From 7714c530856662cd53e9102da6ebd278766d4943 Mon Sep 17 00:00:00 2001 From: Pang Date: Sun, 7 Jan 2024 23:23:42 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B6=88=E6=81=AF=E7=BD=AE=E9=A1=B6?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=81=A2=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Http/Controllers/Api/DialogController.php | 3 +- .../pages/manage/components/DialogWrapper.vue | 49 ++++---- .../sass/pages/components/dialog-wrapper.scss | 107 +++++++++--------- 3 files changed, 85 insertions(+), 74 deletions(-) diff --git a/app/Http/Controllers/Api/DialogController.php b/app/Http/Controllers/Api/DialogController.php index ca836142f..e61775fd7 100755 --- a/app/Http/Controllers/Api/DialogController.php +++ b/app/Http/Controllers/Api/DialogController.php @@ -2296,13 +2296,14 @@ class DialogController extends AbstractController $dialog->save(); // $data = [ + 'add' => null, 'update' => [ 'dialog_id' => $dialog->id, 'top_msg_id' => $dialog->top_msg_id, 'top_userid' => $dialog->top_userid, ] ]; - $res = $msg->sendMsg(null, $dialog->id, 'top', [ + $res = WebSocketDialogMsg::sendMsg(null, $dialog->id, 'top', [ 'action' => $dialog->top_msg_id ? 'add' : 'remove', 'data' => [ 'id' => $msg->id, diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index 7f58a5839..f4e62eb66 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue @@ -12,7 +12,7 @@
-
+
{{msgUnreadOnly}}
@@ -137,7 +137,7 @@
-
+
@@ -147,7 +147,10 @@ : {{$A.getMsgSimpleDesc(topMessageInfo)}}

-

{{$L('置顶人员')}}

+

+ {{ $L('置顶人员') }} + +

@@ -158,7 +161,7 @@
-
+
@@ -171,7 +174,6 @@ ref="scroller" class="dialog-scroller scrollbar-virtual" active-prefix="item" - :class="scrollerClass" :data-key="'id'" :data-sources="allMsgs" :data-component="msgItem" @@ -949,6 +951,14 @@ export default { return this.todoList.length > 0 && this.windowScrollY === 0 && this.quoteId === 0 }, + tagShow() { + return this.msgTags.length > 1 && this.windowScrollY === 0 && !this.searchShow + }, + + topShow() { + return this.topMessageInfo && this.windowScrollY === 0 && !this.searchShow + }, + wrapperClass() { if (['ready', 'ing'].includes(this.recordState)) { return ['record-ready'] @@ -956,12 +966,11 @@ export default { return null }, - tagShow() { - return this.msgTags.length > 1 && this.windowScrollY === 0 && !this.searchShow - }, - - scrollerClass() { - return !this.$slots.head && !this.topMessageInfo && this.tagShow ? 'default-header' : null + navClass() { + return { + 'completed': $A.dialogCompleted(this.dialogData), + 'tagged': this.tagShow + } }, pasteWrapperClass() { @@ -1104,10 +1113,6 @@ export default { topMessageInfo() { return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id) - }, - - topMessageClass() { - return !this.$slots.head && this.tagShow ? 'default-header' : null } }, @@ -3383,11 +3388,10 @@ export default { data: { msg_id: data.id }, - }).then(async ({ data, msg }) => { + }).then(({ data, msg }) => { resolve(msg) - this.onMarkOffset(false) // 取消置顶 - await this.$store.dispatch("saveDialog", { + this.$store.dispatch("saveDialog", { 'id' : this.dialogId, 'top_msg_id' : data.update?.top_msg_id || 0, 'top_userid' : data.update?.top_userid || 0 @@ -3396,10 +3400,15 @@ export default { if (data.update?.top_msg_id) { const index = this.dialogMsgs.findIndex(({ id }) => id == data.update.top_msg_id); if (index > -1) { - await this.$store.dispatch("saveDialogMsgTop", Object.assign({}, this.dialogMsgs[index])) + this.$store.dispatch("saveDialogMsgTop", Object.assign({}, this.dialogMsgs[index])) } } - this.onMarkOffset(true) + // 添加消息 + if (data.add) { + this.$store.dispatch("saveDialogMsg", data.add); + this.$store.dispatch("updateDialogLastMsg", data.add); + this.onActive(); + } }).catch(({ msg }) => { reject(msg); }).finally(_ => { diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss index a3ea055d7..7720525c6 100644 --- a/resources/assets/sass/pages/components/dialog-wrapper.scss +++ b/resources/assets/sass/pages/components/dialog-wrapper.scss @@ -437,8 +437,8 @@ .dialog-top-message { background: white; - .dialog-top-message-warp{ - padding:10px 5px; + .dialog-top-message-warp { + padding: 10px 5px; position: relative; display: flex; margin: 10px 16px 0; @@ -450,24 +450,29 @@ .dialog-top-message-content { flex: 1; overflow: hidden; + p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; + &.content { margin-bottom: 2px; - >span{ + + > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 22px; } } + &.personnel { font-size: 12px; color: #afafaf; + .avatar-name { color: #84C56A; margin-left: 10px; @@ -476,11 +481,12 @@ } } - .dialog-top-message-font{ + .dialog-top-message-font { line-height: 42px; text-align: center; - padding:0 10px; - .taskfont{ + padding: 0 10px; + + .taskfont { font-size: 16px; padding: 5px; border-radius: 50%; @@ -494,12 +500,14 @@ align-items: center; justify-content: flex-end; gap: 10px; - padding:0 10px; + padding: 0 10px; + .taskfont { border-radius: 3px; font-size: 18px; padding: 4px; } + .common-pureing { width: 18px; height: 18px; @@ -509,6 +517,41 @@ } } + .dialog-position { + position: relative; + z-index: 2; + height: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + opacity: 0; + transform: translateX(100%); + animation: position-in-animation 200ms ease-out forwards; + animation-delay: 300ms; + + .position-label { + position: absolute; + top: 24px; + right: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 5px 10px; + border-radius: 18px 0 0 18px; + color: #ffffff; + background-color: $primary-color; + cursor: pointer; + > i { + margin-right: 4px; + width: 14px; + height: 14px; + font-size: 14px; + line-height: 14px; + } + } + } + .dialog-scroller { flex: 1; position: relative; @@ -1534,38 +1577,6 @@ } } - .dialog-position { - position: absolute; - top: 100px; - right: 0; - z-index: 2; - display: flex; - align-items: center; - justify-content: flex-end; - opacity: 0; - transform: translateX(100%); - animation: position-in-animation 200ms ease-out forwards; - animation-delay: 300ms; - - .position-label { - display: flex; - align-items: center; - justify-content: center; - padding: 5px 10px; - border-radius: 18px 0 0 18px; - color: #ffffff; - background-color: $primary-color; - cursor: pointer; - > i { - margin-right: 4px; - width: 14px; - height: 14px; - font-size: 14px; - line-height: 14px; - } - } - } - .dialog-footer { position: absolute; left: 0; @@ -2216,6 +2227,10 @@ body.window-portrait { } } + &.tagged { + margin-bottom: 34px; + } + .dialog-back, .dialog-menu { position: absolute; @@ -2307,21 +2322,12 @@ body.window-portrait { } } } - .dialog-top-message { - &.default-header { - margin-top: 34px; - } - } .dialog-scroller { padding-right: 14px; padding-left: 14px; overscroll-behavior: none; background-color: #ffffff; - &.default-header { - margin-top: 34px; - } - .dialog-item { .dialog-view { &.text { @@ -2363,11 +2369,6 @@ body.window-portrait { } } } - .dialog-position { - &.down { - top: 130px; - } - } .dialog-footer { background-color: #f8f8f8; padding: 8px 10px;