Skip to content

foreign / customer-service

Go to a project
Commit 7c3fe629 by zhousil
Options

不同类型消息样式分离

parent 55070bdd
Inline Side-by-side
Showing with 184 additions and 189 deletions
components/message-item/audio-message.vue
...@@ -25,12 +25,12 @@ ...@@ -25,12 +25,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Ref } from "vue-property-decorator"; import { Component, Ref } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
import VoiceIcon from "./voice.vue"; import VoiceIcon from "./voice.vue";
@Component({ components: { VoiceIcon } }) @Component({ components: { VoiceIcon } })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
@Ref("audio") @Ref("audio")
private readonly audioRef!: HTMLAudioElement; private readonly audioRef!: HTMLAudioElement;
...@@ -81,7 +81,31 @@ export default class Index extends BaseMessage { ...@@ -81,7 +81,31 @@ export default class Index extends BaseMessage {
mounted() { mounted() {
this.buildMessageUrl(); this.buildMessageUrl();
} }
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.voice-message {
height: 40px;
width: 200px;
&.can-play {
cursor: pointer;
}
i {
font-size: 16px;
}
}
.my-message {
.voice-message {
> div {
flex-flow: row-reverse;
}
svg {
transform: rotateY(180deg);
}
}
}
</style>
components/message-item/file-message.vue
...@@ -30,17 +30,17 @@ ...@@ -30,17 +30,17 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
import FileIcon from "./file-icon.vue"; import FileIcon from "./file-icon.vue";
import { FileType, getFileType } from "./file-controller"; import { FileType, getFileType } from "./file-controller";
const k = 1024, const k = 1024,
m = 1024 * k, m = 1024 * k,
g = 1024 * m, g = 1024 * m,
t = 1024 * g; t = 1024 * g;
function formatSize(size: number) { function formatSize(size: number) {
if (size === undefined || size === null) { if (size === undefined || size === null) {
return ""; return "";
} }
...@@ -57,10 +57,10 @@ function formatSize(size: number) { ...@@ -57,10 +57,10 @@ function formatSize(size: number) {
return Number((size / g).toFixed(2)) + " GB"; return Number((size / g).toFixed(2)) + " GB";
} }
return Number((size / t).toFixed(2)) + " TB"; return Number((size / t).toFixed(2)) + " TB";
} }
@Component({ components: { FileIcon } }) @Component({ components: { FileIcon } })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
private get getAttachment() { private get getAttachment() {
if (this.messageBody) { if (this.messageBody) {
return this.messageBody.msg.name; return this.messageBody.msg.name;
...@@ -83,7 +83,16 @@ export default class Index extends BaseMessage { ...@@ -83,7 +83,16 @@ export default class Index extends BaseMessage {
mounted() { mounted() {
this.buildMessageUrl(); this.buildMessageUrl();
} }
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.file-message {
background-color: transparent !important;
border-radius: 4px !important;
border: 1px solid #c5d4e5;
.file-message-name {
max-width: 130px;
}
}
</style>
components/message-item/image-message.vue
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import { FileType } from "./file-controller"; import { FileType } from "./file-controller";
import BaseMessage from "./index"; import BaseMessage from "./index";
import FileIcon from "./file-icon.vue"; import FileIcon from "./file-icon.vue";
@Component({ components: { FileIcon } }) @Component({ components: { FileIcon } })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
private readonly image404 = FileType.Image_404; private readonly image404 = FileType.Image_404;
private onImageError() { private onImageError() {
...@@ -33,7 +33,40 @@ export default class Index extends BaseMessage { ...@@ -33,7 +33,40 @@ export default class Index extends BaseMessage {
mounted() { mounted() {
this.buildMessageUrl(); this.buildMessageUrl();
} }
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.image-message {
background-color: transparent !important;
border-radius: 4px !important;
border: 1px solid #c5d4e5;
line-height: 1;
max-width: 300px;
box-sizing: content-box;
img {
width: 100%;
}
&.image-404 {
background: #f7f8fa;
display: flex;
align-items: center;
justify-content: center;
.file-icon {
margin: 0;
}
}
/deep/ .file-icon {
margin-left: 0;
}
}
.my-message {
&.image-message:not(.image-404) {
background-color: transparent !important;
border-radius: 4px !important;
border: 1px solid #c5d4e5;
}
}
</style>
components/message-item/text-message.vue
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { replaceText2Link } from "@/customer-service/utils"; import { replaceText2Link } from "@/customer-service/utils";
import xim from "@/customer-service/xim"; import xim from "@/customer-service/xim";
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
@Component({ components: {} }) @Component({ components: {} })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
private readonly emptyText = "　"; private readonly emptyText = "　";
private format2Link(text: string) { private format2Link(text: string) {
...@@ -24,13 +24,16 @@ export default class Index extends BaseMessage { ...@@ -24,13 +24,16 @@ export default class Index extends BaseMessage {
} }
return t; return t;
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.inline-text { .inline-text {
display: inline-block;
white-space: pre-wrap;
text-align: left;
/deep/ .highlight { /deep/ .highlight {
color: #e87005; color: #e87005;
} }
} }
</style> </style>
\ No newline at end of file
components/message-item/video-message.vue
...@@ -25,4 +25,15 @@ export default class Index extends BaseMessage { ...@@ -25,4 +25,15 @@ export default class Index extends BaseMessage {
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.video-message {
height: 160px;
width: 200px;
background-color: #000 !important;
border-radius: 0 !important;
svg {
cursor: pointer;
}
}
</style>
components/message-item/withdraw-message.vue
...@@ -3,11 +3,20 @@ ...@@ -3,11 +3,20 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
@Component({ components: {} }) @Component({ components: {} })
export default class Index extends BaseMessage {} export default class Index extends BaseMessage {}
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.my-message {
.withdraw-message {
background-color: transparent !important;
padding: 0 4px;
font-size: 12px;
color: #999;
}
}
</style>
components/message.vue
...@@ -19,6 +19,9 @@ ...@@ -19,6 +19,9 @@
<component <component
:is="messageComponent" :is="messageComponent"
:user-name="userName" :user-name="userName"
:class="{
'my-message': isMyMessage,
}"
v-if="messageComponent" v-if="messageComponent"
v-model="data" v-model="data"
@open="openFile" @open="openFile"
...@@ -94,47 +97,47 @@ ...@@ -94,47 +97,47 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Inject, Mixins, Prop } from "vue-property-decorator"; import { Component, Inject, Mixins, Prop } from "vue-property-decorator";
import { Filters } from "../mixin/filter"; import { Filters } from "../mixin/filter";
import * as dto from "../model"; import * as dto from "../model";
import chat from "./../xim"; import chat from "./../xim";
import { import {
isAudio, isAudio,
isImage, isImage,
isVideo, isVideo,
MAX_FILE_SIZE, MAX_FILE_SIZE,
MAX_IMAGE_SIZE, MAX_IMAGE_SIZE,
} from "./message-item/file-controller"; } from "./message-item/file-controller";
import WhoReadList from "./who-read-list.vue"; import WhoReadList from "./who-read-list.vue";
import avatar from "@/customer-service/components/avatar.vue"; import avatar from "@/customer-service/components/avatar.vue";
import { chatStore, ChatStore } from "@/customer-service/store/model"; import { chatStore, ChatStore } from "@/customer-service/store/model";
import ximInstance from "../xim/xim"; import ximInstance from "../xim/xim";
import { dbController } from "../database"; import { dbController } from "../database";
import ImageMessage from "./message-item/image-message.vue"; import ImageMessage from "./message-item/image-message.vue";
import FileMessage from "./message-item/file-message.vue"; import FileMessage from "./message-item/file-message.vue";
import AudioMessage from "./message-item/audio-message.vue"; import AudioMessage from "./message-item/audio-message.vue";
import VideoMessage from "./message-item/video-message.vue"; import VideoMessage from "./message-item/video-message.vue";
import TextMessage from "./message-item/text-message.vue"; import TextMessage from "./message-item/text-message.vue";
import WithdrawMessage from "./message-item/withdraw-message.vue"; import WithdrawMessage from "./message-item/withdraw-message.vue";
import xim from "./../xim"; import xim from "./../xim";
const twoMinutes = 2 * 60 * 1000; const twoMinutes = 2 * 60 * 1000;
const messageMapping = new Map<dto.MessageType, string>([ const messageMapping = new Map<dto.MessageType, string>([
[dto.MessageType.Image, "image-message"], [dto.MessageType.Image, "image-message"],
[dto.MessageType.File, "file-message"], [dto.MessageType.File, "file-message"],
[dto.MessageType.Video, "video-message"], [dto.MessageType.Video, "video-message"],
[dto.MessageType.Voice, "audio-message"], [dto.MessageType.Voice, "audio-message"],
[dto.MessageType.Text, "text-message"], [dto.MessageType.Text, "text-message"],
[dto.MessageType.Withdraw, "withdraw-message"], [dto.MessageType.Withdraw, "withdraw-message"],
]); ]);
@Component({ @Component({
components: { components: {
WhoReadList, WhoReadList,
avatar, avatar,
...@@ -145,8 +148,8 @@ const messageMapping = new Map<dto.MessageType, string>([ ...@@ -145,8 +148,8 @@ const messageMapping = new Map<dto.MessageType, string>([
TextMessage, TextMessage,
WithdrawMessage, WithdrawMessage,
}, },
}) })
export default class Message extends Mixins(Filters) { export default class Message extends Mixins(Filters) {
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_USER_UID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_USER_UID)
private readonly chatMyId!: ChatStore.STATE_CHAT_CURRENT_USER_UID; private readonly chatMyId!: ChatStore.STATE_CHAT_CURRENT_USER_UID;
...@@ -366,11 +369,11 @@ export default class Message extends Mixins(Filters) { ...@@ -366,11 +369,11 @@ export default class Message extends Mixins(Filters) {
private closeKeywordPopover() { private closeKeywordPopover() {
document.body.click(); document.body.click();
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.message-con { .message-con {
padding-bottom: 20px; padding-bottom: 20px;
margin-right: 15px; margin-right: 15px;
position: relative; position: relative;
...@@ -385,35 +388,6 @@ export default class Message extends Mixins(Filters) { ...@@ -385,35 +388,6 @@ export default class Message extends Mixins(Filters) {
margin-top: 0; margin-top: 0;
background-color: #dbf2ff; background-color: #dbf2ff;
border-radius: 8px 0 8px 8px; border-radius: 8px 0 8px 8px;
&.image-message:not(.image-404),
&.file-message {
background-color: transparent;
border-radius: 4px;
border: 1px solid #c5d4e5;
}
&.voice-message {
> div {
flex-flow: row-reverse;
}
svg {
transform: rotateY(180deg);
}
}
&.video-message {
background-color: #000;
border-radius: 0;
}
&.withdraw-message {
background-color: transparent;
padding: 0 4px;
font-size: 12px;
color: #999;
}
} }
.msg-read { .msg-read {
...@@ -457,14 +431,14 @@ export default class Message extends Mixins(Filters) { ...@@ -457,14 +431,14 @@ export default class Message extends Mixins(Filters) {
font-size: 16px; font-size: 16px;
margin-right: 10px; margin-right: 10px;
} }
} }
.msg-avatar { .msg-avatar {
margin-right: 10px; margin-right: 10px;
flex: 40px 0 0; flex: 40px 0 0;
} }
i.msg-avatar { i.msg-avatar {
font-size: 30px; font-size: 30px;
background-color: #c0c4cc; background-color: #c0c4cc;
border-radius: 4px; border-radius: 4px;
...@@ -477,9 +451,9 @@ i.msg-avatar { ...@@ -477,9 +451,9 @@ i.msg-avatar {
top: 5px; top: 5px;
color: #fff; color: #fff;
} }
} }
.msg-name { .msg-name {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
text-align: right; text-align: right;
...@@ -488,16 +462,16 @@ i.msg-avatar { ...@@ -488,16 +462,16 @@ i.msg-avatar {
&.algin-left { &.algin-left {
text-align: left; text-align: left;
} }
} }
.msg-content { .msg-content {
text-align: right; text-align: right;
&.algin-left { &.algin-left {
text-align: left; text-align: left;
} }
} }
.msg-detail { .msg-detail {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
...@@ -505,73 +479,12 @@ i.msg-avatar { ...@@ -505,73 +479,12 @@ i.msg-avatar {
border-radius: 0px 8px 8px; border-radius: 0px 8px 8px;
padding: 10px; padding: 10px;
word-break: break-word; word-break: break-word;
&.image-message,
&.file-message {
background-color: transparent;
border-radius: 4px;
border: 1px solid #c5d4e5;
}
&.image-message {
line-height: 1;
&.image-404 {
background: #f7f8fa;
display: flex;
align-items: center;
justify-content: center;
.file-icon {
margin: 0;
}
}
/deep/ .file-icon {
margin-left: 0;
}
}
&.voice-message {
height: 40px;
width: 200px;
&.can-play {
cursor: pointer;
}
i {
font-size: 16px;
}
}
&.video-message {
height: 160px;
width: 200px;
background-color: #000;
border-radius: 0;
svg {
cursor: pointer;
}
}
&.inline-text {
display: inline-block;
white-space: pre-wrap;
text-align: left;
}
.file-message-name {
max-width: 130px;
}
/deep/ img { /deep/ img {
max-width: 300px; max-width: 300px;
} }
} }
.download-icon { .download-icon {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
margin-left: 15px; margin-left: 15px;
...@@ -581,29 +494,21 @@ i.msg-avatar { ...@@ -581,29 +494,21 @@ i.msg-avatar {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
} }
.no-selection { .no-selection {
user-select: none; user-select: none;
}
.image-message {
max-width: 300px;
box-sizing: content-box;
img {
width: 100%;
} }
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.all { .all {
color: #4389f8; color: #4389f8;
} }
.match-keyword { .match-keyword {
background-color: #fff3e0; background-color: #fff3e0;
border-radius: 13px; border-radius: 13px;
padding: 3px 8px; padding: 3px 8px;
...@@ -629,9 +534,9 @@ i.msg-avatar { ...@@ -629,9 +534,9 @@ i.msg-avatar {
i { i {
margin-right: 5px; margin-right: 5px;
} }
} }
.keyword-action { .keyword-action {
list-style: none; list-style: none;
li { li {
...@@ -644,11 +549,11 @@ i.msg-avatar { ...@@ -644,11 +549,11 @@ i.msg-avatar {
background-color: #f5f6fa; background-color: #f5f6fa;
} }
} }
} }
</style> </style>
<style lang="less"> <style lang="less">
.match-keyword-popover { .match-keyword-popover {
padding: 0; padding: 0;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment