no message

This commit is contained in:
kuaifan 2022-06-04 12:32:20 +08:00
parent 3042ed2628
commit d735dbc72c
6 changed files with 109 additions and 34 deletions

View File

@ -2,10 +2,10 @@ const isSupportTouch = "ontouchend" in document;
// 长按或右键指令 // 长按或右键指令
const longpress = { const longpress = {
bind: function (el, binding) { bind: function (el, binding) {
let delay = 501, let delay = 500,
callback = binding.value; callback = binding.value;
if ($A.isJson(binding.value)) { if ($A.isJson(binding.value)) {
delay = binding.value.delay || 501; delay = binding.value.delay || 500;
callback = binding.value.callback; callback = binding.value.callback;
} }
if (typeof callback !== 'function') { if (typeof callback !== 'function') {

View File

@ -599,6 +599,22 @@
} }
}, },
/**
* 获取数组长度处理数组不存在
* @param array
* @returns {number|*}
*/
arrayLength(array) {
if (array) {
try {
return array.length;
} catch (e) {
return 0
}
}
return 0;
},
/** /**
* 将数组或对象内容部分拼成字符串 * 将数组或对象内容部分拼成字符串
* @param obj * @param obj

View File

@ -5,7 +5,13 @@
<UserAvatar :userid="msgData.userid" :show-icon="false" :show-name="true" :tooltip-disabled="true"/> <UserAvatar :userid="msgData.userid" :show-icon="false" :show-name="true" :tooltip-disabled="true"/>
</div> </div>
<div class="dialog-head" v-longpress="handleLongpress"> <div
class="dialog-head"
:class="headClass"
v-longpress="{
callback: handleLongpress,
delay: 300,
}">
<!--详情--> <!--详情-->
<div class="dialog-content" :class="contentClass"> <div class="dialog-content" :class="contentClass">
<!--文本--> <!--文本-->
@ -34,7 +40,7 @@
</div> </div>
<!--会议--> <!--会议-->
<div v-else-if="msgData.type === 'meeting'" class="content-meeting no-dark-content"> <div v-else-if="msgData.type === 'meeting'" class="content-meeting no-dark-content">
<ul class="dialog-meeting" @click="openMeeting"> <ul class="dialog-meeting">
<li> <li>
<em>{{$L('会议主题')}}</em> <em>{{$L('会议主题')}}</em>
{{msgData.msg.name}} {{msgData.msg.name}}
@ -47,7 +53,7 @@
<em>{{$L('频道ID')}}</em> <em>{{$L('频道ID')}}</em>
{{msgData.msg.meetingid.replace(/^(.{3})(.{3})(.*)$/, '$1 $2 $3')}} {{msgData.msg.meetingid.replace(/^(.{3})(.{3})(.*)$/, '$1 $2 $3')}}
</li> </li>
<li class="meeting-operation"> <li class="meeting-operation" @click="openMeeting">
{{$L('点击加入会议')}} {{$L('点击加入会议')}}
<i class="taskfont">&#xe68b;</i> <i class="taskfont">&#xe68b;</i>
</li> </li>
@ -59,9 +65,11 @@
</div> </div>
<!--未知--> <!--未知-->
<div v-else class="content-unknown">{{$L("未知的消息类型")}}</div> <div v-else class="content-unknown">{{$L("未知的消息类型")}}</div>
<!--覆盖-->
<div class="content-cover"></div>
</div> </div>
<!--emoji--> <!--emoji-->
<ul v-if="msgData.emoji.length > 0" class="dialog-emoji"> <ul v-if="$A.arrayLength(msgData.emoji) > 0" class="dialog-emoji">
<li <li
v-for="(item, index) in msgData.emoji" v-for="(item, index) in msgData.emoji"
:key="index" :key="index"
@ -154,6 +162,7 @@ export default {
popperShow: false, popperShow: false,
timeShow: false, timeShow: false,
recordPlay: false, recordPlay: false,
operateEnter: false,
allList: [], allList: [],
} }
}, },
@ -170,12 +179,16 @@ export default {
...mapState(['userToken', 'userId', 'dialogMsgs']), ...mapState(['userToken', 'userId', 'dialogMsgs']),
viewClass() { viewClass() {
const {msgData, operateAction, operateEnter} = this;
const array = []; const array = [];
if (this.msgData.type) { if (msgData.type) {
array.push(this.msgData.type) array.push(msgData.type)
} }
if (this.operateAction) { if (operateAction) {
array.push('operate-action') array.push('operate-action')
if (operateEnter) {
array.push('operate-enter')
}
} }
return array return array
}, },
@ -188,6 +201,20 @@ export default {
return this.allList.filter(({read_at}) => !read_at) return this.allList.filter(({read_at}) => !read_at)
}, },
headClass() {
const {type, msg, emoji} = this.msgData;
const array = [];
if ($A.arrayLength(emoji) === 0) {
if (type === 'text') {
if (/^<img\s+class="emoticon"[^>]*?>$/.test(msg.text)
|| /^\s*<p>\s*([\uD800-\uDBFF][\uDC00-\uDFFF]){1,3}\s*<\/p>\s*$/.test(msg.text)) {
array.push('transparent')
}
}
}
return array;
},
contentClass() { contentClass() {
const {type, msg} = this.msgData; const {type, msg} = this.msgData;
const classArray = []; const classArray = [];
@ -216,6 +243,14 @@ export default {
this.msgRead(); this.msgRead();
}, },
immediate: true, immediate: true,
},
operateAction(val) {
this.operateEnter = false;
if (val) {
setTimeout(_ => {
this.operateEnter = true;
}, 400)
}
} }
}, },

View File

@ -186,6 +186,7 @@
v-for="(emoji, key) in operateEmojis" v-for="(emoji, key) in operateEmojis"
:key="key" :key="key"
v-html="emoji" v-html="emoji"
class="no-dark-content"
@click="onOperate('emoji', emoji)"></li> @click="onOperate('emoji', emoji)"></li>
</ul> </ul>
</DropdownItem> </DropdownItem>

View File

@ -445,6 +445,15 @@ body.dark-mode-reverse {
} }
} }
} }
.chat-toolbar {
> li {
&.chat-send {
.taskfont {
color: #000000;
}
}
}
}
} }
} }
} }

View File

@ -241,16 +241,14 @@
border-radius: 2px 8px 8px 8px; border-radius: 2px 8px 8px 8px;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
&.transparent {
background-color: transparent !important;
}
.dialog-content { .dialog-content {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
position: relative;
&.an-emoticon,
&.an-emoji,
&.two-emoji,
&.three-emoji {
background-color: transparent !important;
}
&.an-emoji { &.an-emoji {
.content-text { .content-text {
@ -266,6 +264,7 @@
> pre { > pre {
font-size: 52px; font-size: 52px;
line-height: 1; line-height: 1;
letter-spacing: 4px;
} }
} }
} }
@ -275,6 +274,7 @@
> pre { > pre {
font-size: 32px; font-size: 32px;
line-height: 1; line-height: 1;
letter-spacing: 4px;
} }
} }
} }
@ -438,7 +438,6 @@
max-width: 220px; max-width: 220px;
max-height: 220px; max-height: 220px;
border-radius: 6px; border-radius: 6px;
background-color: transparent;
overflow: hidden; overflow: hidden;
.file-img { .file-img {
@ -501,7 +500,6 @@
padding: 4px 6px; padding: 4px 6px;
color: $primary-title-color; color: $primary-title-color;
.dialog-meeting { .dialog-meeting {
cursor: pointer;
min-width: 220px; min-width: 220px;
> li { > li {
list-style: none; list-style: none;
@ -517,6 +515,12 @@
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
cursor: pointer;
&:hover {
.taskfont {
padding-left: 4px;
}
}
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -531,6 +535,7 @@
font-size: 12px; font-size: 12px;
padding-left: 2px; padding-left: 2px;
transform: scale(0.8); transform: scale(0.8);
transition: all 0.2s;
} }
} }
> em { > em {
@ -555,6 +560,17 @@
.content-unknown { .content-unknown {
text-decoration: underline; text-decoration: underline;
} }
.content-cover {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
user-select: none;
}
} }
.dialog-emoji { .dialog-emoji {
@ -721,17 +737,6 @@
} }
} }
.content-file {
&.file {
background-color: #F4F5F7;
}
&.img {
border-radius: 6px;
background-color: transparent;
}
}
.content-record { .content-record {
color: #ffffff; color: #ffffff;
@ -1117,11 +1122,20 @@
.dialog-item { .dialog-item {
.dialog-view { .dialog-view {
user-select: none; .dialog-head {
.dialog-content {
&.operate-action { .content-cover {
.content-text { display: block;
user-select: text; }
}
}
&.operate-enter {
.dialog-head {
.dialog-content {
.content-cover {
display: none;
}
}
} }
} }
} }