From 1fb10620568c6cfaafd82d97cce3ec3cdacf46b2 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 28 Oct 2026 09:24:29 +0000
Subject: [PATCH] =?UTF-8?q?perf(dialog):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E7=AA=97=E5=8F=A3=E5=85=88=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E5=8A=A8=E7=94=BB=E5=86=8D=E6=8C=82=E8=BD=BD?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=EF=BC=8C=E6=8C=82=E8=BD=BD=E5=89=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=AF=BC=E8=88=AA=E4=B8=8E=E6=B6=88=E6=81=AF=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=8D=A0=E4=BD=8D=EF=BC=9B=E5=85=B3=E9=97=AD=E6=97=B6?=
 =?UTF-8?q?=E5=85=88=E5=BC=80=E5=A7=8B=E5=8A=A8=E7=94=BB=E5=86=8D=E6=B8=85?=
 =?UTF-8?q?=E9=99=A4=E4=BC=9A=E8=AF=9DID=EF=BC=8C=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E9=A6=96=E5=B8=A7=E5=8D=A1=E9=A1=BF=E4=B8=8E?=
 =?UTF-8?q?=E5=88=92=E5=85=A5=E6=97=B6=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/manage/components/DialogModal.vue   | 103 +++++++++++++++++-
 .../sass/pages/components/dialog-modal.scss   |  65 +++++++++++
 2 files changed, 165 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogModal.vue b/resources/assets/js/pages/manage/components/DialogModal.vue
index 81da0ce84..98d339243 100644
--- a/resources/assets/js/pages/manage/components/DialogModal.vue
+++ b/resources/assets/js/pages/manage/components/DialogModal.vue
@@ -11,29 +11,102 @@
         :class-name="className"
         :beforeClose="onBeforeClose">
         <DialogWrapper
-            v-if="show"
+            v-if="show && contentReady"
             ref="dialogWrapper"
             :dialogId="dialogId"
             :style="dialogStyles"
             :beforeBack="onBeforeClose"
             location="modal"/>
+        <!--内容挂载前的占位（导航结构与 DialogWrapper 一致 + 消息骨架），避免划入时整页空白-->
+        <div v-else-if="show" class="dialog-wrapper" :style="dialogStyles">
+            <div class="dialog-nav">
+                <div class="nav-wrapper" :class="{completed: $A.dialogCompleted(dialogData)}">
+                    <div class="dialog-back" @click="onBeforeClose">
+                        <i class="taskfont">&#xe676;</i>
+                    </div>
+                    <div class="dialog-block">
+                        <div class="dialog-avatar">
+                            <template v-if="dialogData.type=='group'">
+                                <EAvatar v-if="dialogData.avatar" class="img-avatar" :src="dialogData.avatar" :size="42"></EAvatar>
+                                <i v-else-if="dialogData.group_type=='department'" class="taskfont icon-avatar department">&#xe75c;</i>
+                                <i v-else-if="dialogData.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
+                                <i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
+                                <i v-else-if="dialogData.group_type=='okr'" class="taskfont icon-avatar task">&#xe6f4;</i>
+                                <Icon v-else class="icon-avatar" type="ios-people" />
+                            </template>
+                            <div v-else-if="dialogData.dialog_user" class="user-avatar">
+                                <UserAvatarTip :online="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42"/>
+                            </div>
+                            <Icon v-else class="icon-avatar" type="md-person" />
+                        </div>
+                        <div class="dialog-title">
+                            <div class="main-title">
+                                <Tag v-for="(tag, index) in dialogTags" :key="index" :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
+                                <h2 v-html="transformEmojiToHtml(dialogData.name)"></h2>
+                                <em v-if="peopleNum > 0">({{peopleNum}})</em>
+                                <Tag v-if="dialogData.bot" class="after" :fade="false">{{$L('机器人')}}</Tag>
+                                <Tag v-if="dialogData.group_type=='all'" class="after" :fade="false">{{$L('全员')}}</Tag>
+                                <Tag v-else-if="dialogData.group_type=='department'" class="after" :fade="false">{{$L('部门')}}</Tag>
+                            </div>
+                            <ul class="title-desc">
+                                <li v-if="dialogData.type === 'user'" :class="[dialogData.online_state === true ? 'online' : 'offline']">
+                                    {{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="dialog-menu">
+                        <i class="taskfont dialog-menu-icon">&#xe6e9;</i>
+                    </div>
+                </div>
+            </div>
+            <div class="dialog-skeleton">
+                <div v-for="(item, index) in skeletonList" :key="index" class="skeleton-item" :class="{self: item.self}">
+                    <div class="skeleton-avatar"></div>
+                    <div class="skeleton-bubble" :style="{width: item.width, height: item.height}"></div>
+                </div>
+            </div>
+            <div class="dialog-skeleton-footer">
+                <div class="skeleton-input"></div>
+            </div>
+        </div>
     </Modal>
 </template>
 
 <script>
 import {mapState} from "vuex";
 import DialogWrapper from "./DialogWrapper";
+import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
+import transformEmojiToHtml from "../../../utils/emoji";
 import emitter from "../../../store/events";
 
 export default {
     name: "DialogModal",
-    components: {DialogWrapper},
+    components: {DialogWrapper, UserAvatarTip},
 
     data() {
         return {
             show: false,
             timer: null,
             closIng: false,
+            contentReady: false,
+            skeletonList: [
+                {self: true, width: '50%', height: '62px'},
+                {self: false, width: '36%', height: '40px'},
+                {self: false, width: '58%', height: '84px'},
+                {self: true, width: '42%', height: '40px'},
+                {self: false, width: '52%', height: '40px'},
+                {self: true, width: '44%', height: '40px'},
+                {self: false, width: '66%', height: '84px'},
+                {self: false, width: '40%', height: '40px'},
+                {self: true, width: '60%', height: '62px'},
+                {self: false, width: '48%', height: '40px'},
+                {self: false, width: '64%', height: '62px'},
+                {self: true, width: '38%', height: '40px'},
+                {self: false, width: '56%', height: '40px'},
+                {self: true, width: '68%', height: '84px'},
+                {self: false, width: '42%', height: '40px'},
+            ],
         }
     },
 
@@ -46,7 +119,19 @@ export default {
     },
 
     computed: {
-        ...mapState(['dialogId', 'windowOrientation']),
+        ...mapState(['dialogId', 'windowOrientation', 'cacheDialogs']),
+
+        dialogData() {
+            return this.cacheDialogs.find(({id}) => id == this.dialogId) || {}
+        },
+
+        dialogTags() {
+            return $A.dialogTags(this.dialogData).filter(tag => tag.color != 'success')
+        },
+
+        peopleNum() {
+            return this.dialogData.type === 'group' ? $A.runNum(this.dialogData.people_user) : 0
+        },
 
         modalStyles() {
             if (this.windowPortrait) {
@@ -95,16 +180,28 @@ export default {
         show(v) {
             this.$store.state.dialogModalShow = v;
             $A.eeuiAppSetScrollDisabled(v && this.windowPortrait)
+            if (v) {
+                // 会话内容渲染较重，等打开动画开始（交由合成线程执行）后再挂载，避免动画首帧被阻塞
+                this.contentReady = false
+                requestAnimationFrame(_ => requestAnimationFrame(_ => {
+                    this.contentReady = this.show
+                }))
+            }
         }
     },
 
     methods: {
+        transformEmojiToHtml,
+
         onBeforeClose() {
             if (this.$refs.dialogWrapper) {
                 this.$refs.dialogWrapper.operateVisible = false
             }
             return new Promise(async _ => {
                 this.closIng++
+                // 先关闭窗口让关闭动画开始（交由合成线程执行），再清除会话ID，避免消息列表等重渲染阻塞动画首帧
+                this.show = false
+                await new Promise(resolve => requestAnimationFrame(_ => requestAnimationFrame(resolve)))
                 await this.$store.dispatch("openDialog", 0)
                 await new Promise(resolve => setTimeout(resolve, 300))
                 this.closIng--
diff --git a/resources/assets/sass/pages/components/dialog-modal.scss b/resources/assets/sass/pages/components/dialog-modal.scss
index 8cec22478..6265766fe 100644
--- a/resources/assets/sass/pages/components/dialog-modal.scss
+++ b/resources/assets/sass/pages/components/dialog-modal.scss
@@ -87,3 +87,68 @@ body {
         }
     }
 }
+
+// 会话内容挂载前的消息骨架占位（见 DialogModal.vue）
+.dialog-wrapper {
+    .dialog-skeleton {
+        flex: 1;
+        height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding: 16px 16px 8px;
+        animation: dialog-skeleton-animation 1.2s ease-in-out infinite;
+
+        .skeleton-item {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 16px;
+
+            .skeleton-avatar {
+                flex-shrink: 0;
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background-color: #ececec;
+            }
+
+            .skeleton-bubble {
+                margin-left: 10px;
+                border-radius: 8px;
+                background-color: #eeeeee;
+            }
+
+            &.self {
+                flex-direction: row-reverse;
+
+                .skeleton-bubble {
+                    margin-left: 0;
+                    margin-right: 10px;
+                    background-color: #e4f3dc;
+                }
+            }
+        }
+    }
+
+    .dialog-skeleton-footer {
+        flex-shrink: 0;
+        padding: 8px 24px 0;
+        margin-bottom: 16px;
+
+        .skeleton-input {
+            height: 40px;
+            border-radius: 20px;
+            background-color: #ffffff;
+        }
+    }
+}
+
+@keyframes dialog-skeleton-animation {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.6;
+    }
+}