From d7902b4d0865a4e681b09bc6d889ed2dd794904c Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 7 Apr 2025 13:40:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/DropdownMenu.vue     |  4 +-
 .../pages/manage/components/DialogWrapper.vue | 33 ++++----
 .../js/pages/manage/components/TaskDetail.vue | 81 +++++++++++++++++--
 .../sass/pages/components/dialog-wrapper.scss |  4 +-
 .../sass/pages/components/task-detail.scss    | 30 ++++++-
 5 files changed, 126 insertions(+), 26 deletions(-)

diff --git a/resources/assets/js/components/DropdownMenu.vue b/resources/assets/js/components/DropdownMenu.vue
index eebbeb392..4a5d0b90d 100644
--- a/resources/assets/js/components/DropdownMenu.vue
+++ b/resources/assets/js/components/DropdownMenu.vue
@@ -17,7 +17,7 @@
                         :key="key"
                         :command="item.value"
                         :divided="!!item.divided"
-                        :disabled="active === item.value || !!item.disabled">
+                        :disabled="(active === item.value && !activeClick) || !!item.disabled">
                         <div class="item-box">
                             <div class="item">{{item.label}}</div>
                             <div v-if="tickShow" class="tick">
@@ -40,6 +40,7 @@ export default {
 
             list: [],           // 数据列表: [{label: '', value: ''}]
             active: '',         // 当前选中的值
+            activeClick: false, // 当前选中的值是否可以被点击
             onUpdate: null,     // 选中后的回调函数
             scrollHide: true,   // 滚动立即隐藏
             tickShow: true,     // 是否显示打勾
@@ -81,6 +82,7 @@ export default {
                 }
                 this.list = data.list;
                 this.active = data.active && this.list.find(item => item.value === data.active) ? data.active : '';
+                this.activeClick = typeof data.activeClick === "boolean" ? data.activeClick : false;
                 this.onUpdate = typeof data.onUpdate === "function" ? data.onUpdate : null;
                 this.scrollHide = typeof data.scrollHide === "boolean" ? data.scrollHide : true;
                 this.tickShow = typeof data.tickShow === "boolean" ? data.tickShow : true;
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 0ab6c765a..110db78f2 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -54,9 +54,9 @@
                                     {{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
                                 </li>
                             </ul>
-                            <ul v-if="tagShow" class="title-tags scrollbar-hidden">
+                            <ul v-if="typeShow" class="title-types scrollbar-hidden">
                                 <li
-                                    v-for="item in msgTags"
+                                    v-for="item in msgTypes"
                                     :key="item.type"
                                     :class="{
                                         [item.type || 'msg']: true,
@@ -64,7 +64,7 @@
                                     }"
                                     @click="onMsgType(item.type)">
                                     <i class="no-dark-content"></i>
-                                    <span>{{$L(item.label)}}</span>
+                                    <span>{{item.label}}</span>
                                 </li>
                             </ul>
                         </div>
@@ -972,33 +972,33 @@ export default {
             return '发送文件'
         },
 
-        msgTags({dialogData}) {
+        msgTypes({dialogData}) {
             const array = [
-                {type: '', label: '消息'},
+                {type: '', label: this.$L('消息')},
             ];
             if (dialogData.has_tag) {
-                array.push({type: 'tag', label: '标注'})
+                array.push({type: 'tag', label: this.$L('标注')})
             }
             if (dialogData.has_todo) {
-                array.push({type: 'todo', label: '事项'})
+                array.push({type: 'todo', label: this.$L('事项')})
             }
             if (dialogData.has_image) {
-                array.push({type: 'image', label: '图片'})
+                array.push({type: 'image', label: this.$L('图片')})
             }
             if (dialogData.has_file) {
-                array.push({type: 'file', label: '文件'})
+                array.push({type: 'file', label: this.$L('文件')})
             }
             if (dialogData.has_link) {
-                array.push({type: 'link', label: '链接'})
+                array.push({type: 'link', label: this.$L('链接')})
             }
             if (dialogData.group_type === 'project') {
-                array.push({type: 'project', label: '打开项目'})
+                array.push({type: 'project', label: this.$L('打开项目')})
             }
             if (dialogData.group_type === 'task') {
-                array.push({type: 'task', label: '打开任务'})
+                array.push({type: 'task', label: this.$L('打开任务')})
             }
             if (dialogData.group_type === 'okr') {
-                array.push({type: 'okr', label: '打开OKR'})
+                array.push({type: 'okr', label: this.$L('打开OKR')})
             }
             return array
         },
@@ -1032,8 +1032,8 @@ export default {
             return this.todoList.length > 0 && this.isDefaultSize && this.quoteId === 0
         },
 
-        tagShow() {
-            return this.msgTags.length > 1 && this.isDefaultSize && !this.searchShow
+        typeShow() {
+            return this.msgTypes.length > 1 && this.isDefaultSize && !this.searchShow
         },
 
         topShow() {
@@ -1050,7 +1050,7 @@ export default {
         navClass() {
             return {
                 'completed': $A.dialogCompleted(this.dialogData),
-                'tagged': this.tagShow
+                'tagged': this.typeShow
             }
         },
 
@@ -1261,6 +1261,7 @@ export default {
 
         msgType() {
             this.onGetMsgClear()
+            this.$emit('on-type-change', this.msgType)
         },
 
         searchKey(key) {
diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index 0f1e2cffa..e5972173a 100755
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -435,16 +435,26 @@
                 class="task-resize"
                 placement="right"
                 v-model="taskDialogWidth"
-                :min="220"
+                :min="300"
                 :max="900"
                 :reverse="true"/>
             <template v-if="hasOpenDialog">
-                <DialogWrapper v-if="taskId > 0" ref="dialog" :dialog-id="taskDetail.dialog_id">
+                <DialogWrapper
+                    v-if="taskId > 0"
+                    ref="dialog"
+                    :dialog-id="taskDetail.dialog_id"
+                    @on-type-change="onTypeChange">
                     <div slot="head" class="head">
                         <Icon class="icon" type="ios-chatbubbles-outline" />
                         <div class="nav">
-                            <p :class="{active:navActive=='dialog'}" @click="navActive='dialog'">{{$L('聊天')}}</p>
-                            <p :class="{active:navActive=='log'}" @click="navActive='log'">{{$L('动态')}}</p>
+                            <div class="nav-item nav-chat" :class="{active:navActive=='dialog'}" @click="navActive='dialog'">
+                                {{$L('聊天')}}
+                                <span v-if="msgTypes.length > 1" class="msg-type" @click.stop="openTypeClick">
+                                    <i class="taskfont">&#xe740;</i>
+                                    <em v-if="msgType">{{getTypeLabel(msgType)}}</em>
+                                </span>
+                            </div>
+                            <div class="nav-item" :class="{active:navActive=='log'}" @click="navActive='log'">{{$L('动态')}}</div>
                             <div v-if="navActive=='log'" class="refresh">
                                 <Loading v-if="logLoadIng"/>
                                 <Icon v-else type="ios-refresh" @click="getLogLists"></Icon>
@@ -663,6 +673,7 @@ export default {
             msgText: '',
             msgFile: [],
             msgRecord: {},
+            msgType: '',
             navActive: 'dialog',
             logLoadIng: false,
 
@@ -740,6 +751,7 @@ export default {
             'cacheProjects',
             'cacheColumns',
             'cacheTasks',
+            'cacheDialogs',
 
             'taskContents',
             'taskFiles',
@@ -966,7 +978,36 @@ export default {
                 && !taskDetail.complete_at
                 && taskDetail.end_at
                 && taskDetail.end_at != mainEndAt
-        }
+        },
+
+        dialogData({taskDetail}) {
+            if (!taskDetail.dialog_id) {
+                return {}
+            }
+            return this.cacheDialogs.find(({id}) => id == taskDetail.dialog_id) || {}
+        },
+
+        msgTypes({dialogData}) {
+            const array = [
+                {value: '', label: this.$L('全部')},
+            ];
+            if (dialogData.has_tag) {
+                array.push({value: 'tag', label: this.$L('标注')})
+            }
+            if (dialogData.has_todo) {
+                array.push({value: 'todo', label: this.$L('事项')})
+            }
+            if (dialogData.has_image) {
+                array.push({value: 'image', label: this.$L('图片')})
+            }
+            if (dialogData.has_file) {
+                array.push({value: 'file', label: this.$L('文件')})
+            }
+            if (dialogData.has_link) {
+                array.push({value: 'link', label: this.$L('链接')})
+            }
+            return array
+        },
     },
 
     watch: {
@@ -2043,6 +2084,36 @@ export default {
             ];
             // 触发更新
             this.updateData('tag', mergedTags);
+        },
+
+        getTypeLabel(type) {
+            this.msgTypes.some(item => {
+                if (item.value === type) {
+                    type = item.label
+                    return true
+                }
+            })
+            return type
+        },
+
+        onTypeChange(type) {
+            this.msgType = type
+        },
+
+        openTypeClick(event) {
+            if (this.msgTypes.length === 0) {
+                return
+            }
+            this.$store.state.menuOperation = {
+                event,
+                list: this.msgTypes,
+                active: this.msgType,
+                activeClick: true,
+                onUpdate: (type) => {
+                    this.navActive = 'dialog'
+                    this.$refs.dialog?.onMsgType(type)
+                }
+            }
         }
     }
 }
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 66c8ce8a1..56bac52c6 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -262,7 +262,7 @@
                         }
                     }
 
-                    .title-tags {
+                    .title-types {
                         display: flex;
                         align-items: center;
 
@@ -2618,7 +2618,7 @@ body.window-portrait {
                             display: flex;
                             justify-content: center;
                         }
-                        .title-tags {
+                        .title-types {
                             position: absolute;
                             left: 0;
                             right: 0;
diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss
index e105149ca..0fb757c82 100644
--- a/resources/assets/sass/pages/components/task-detail.scss
+++ b/resources/assets/sass/pages/components/task-detail.scss
@@ -618,7 +618,7 @@
                 padding-left: 18px;
                 font-weight: 500;
                 color: $primary-text-color;
-                > p {
+                .nav-item {
                     display: flex;
                     align-items: center;
                     margin-right: 24px;
@@ -630,6 +630,32 @@
                         color: #555555;
                         cursor: default;
                     }
+                    &.nav-chat {
+                        .msg-type {
+                            display: flex;
+                            align-items: center;
+                            padding-left: 6px;
+                            opacity: 0.8;
+                            transition: opacity 0.2s;
+                            cursor: pointer;
+                            &:hover {
+                                opacity: 1;
+                            }
+                            .taskfont {
+                                display: inline-block;
+                                font-size: 12px;
+                                padding-top: 1px;
+                                font-weight: normal;
+                                opacity: 0.9;
+                            }
+                            > em {
+                                padding-left: 4px;
+                                font-style: normal;
+                                font-size: 12px;
+                                font-weight: normal;
+                            }
+                        }
+                    }
                 }
                 .refresh {
                     display: flex;
@@ -801,7 +827,7 @@
                 }
                 .nav {
                     padding-left: 0;
-                    > p {
+                    .nav-item {
                         margin-right: 28px;
                         &.active {
                             font-size: 18px;