perf: 优化dialogwrap组件

1. 拆离用户头像的展示组件
2. 在菜单栏显示 报告生成和报表合并

src/components/DialogWrap.vue

@@ -23,9 +23,11 @@
           :data-item-key="item.client_gen_id"
         >
           <div class="dialog-header" v-if="item?.question">
-            <div class="user-name" style="background-color: rgb(255, 110, 110)">
+            <!-- <div class="user-name" style="background-color: rgb(255, 110, 110)">
               {{ userName.slice(0, 1) }}
-            </div>
+            </div> -->
+
+            <ClientUserAvatar />
           </div>
 
           <div class="dialog-footer" v-if="item?.question">
@@ -269,6 +271,7 @@ import initTempHistory, {getChatIdFromUrl} from './answer-effect/temp-history';
 
 import Question from './dialog-wrap/Question.vue';
 import Suggestion from './dialog-wrap/Suggestion.vue';
+import ClientUserAvatar from './dialog-wrap/ClientUserAvatar.vue';
 
 import Answer from './dialog-wrap/Answer.vue';
 
@@ -284,6 +287,7 @@ export default defineComponent({
     DialogFeedback,
 
     Suggestion,
+    ClientUserAvatar,
 
     Question,
     Answer,
@@ -314,8 +318,12 @@ export default defineComponent({
     }
 
     const { helper, ajax } = inject("$global");
-    const userName = ref(helper.read("userName") || "");
+    // const userName = ref(helper.read("userName") || "");
 
+    /**
+     * 此数据定义，仅用于暂时隐藏 重新生成、复制、收藏、点赞、反馈、分享 按钮
+     * 如果这些按钮需要显示，则可将此定义移除，同时移除 对应的 v-if
+     */
     const show_info_btns = ref(false);
 
     /**
@@ -901,7 +909,7 @@ export default defineComponent({
       stopWriting,
       knowledgeList,
       dialogConfig,
-      userName,
+      // userName,
       downloadFile,
 
       openDocument,
@@ -925,7 +933,7 @@ export default defineComponent({
 }
 </style>
 <style scoped>
-.user-name {
+/* .user-name {
   width: 28px;
   height: 28px;
   border-radius: 14px;
@@ -933,7 +941,7 @@ export default defineComponent({
   align-items: center;
   justify-content: center;
   color: #fff;
-}
+} */
 
 .paper-download {
   padding-left: 50px;

src/components/PictureCards.vue

@@ -212,7 +212,13 @@ export default defineComponent({
           const data = await ajax.message.createDialog(props.agentId);
           const result = await ajax.file.uploadFile(props.agentId, data.chat_id, formData);
 
-          // 保存一张临时图片
+          /**
+           * 临时保存file里的图片
+           * 此图片用于在客户端进行展示
+           * 当用户使用图生文功能时，需要上传一张图片，但是用户上传的照片目前（2024-11-27）无法通过服务器拿到在前端展示
+           * 于是前端将此图片保存，临时在界面上展示
+           * 此方案在用户刷新页面后就会失效
+           */
           huituSetTempImageFile(temp_file, props.agentId, data.chat_id);
 
           // 保存小数绘图数据

src/components/dialog-wrap/ClientUserAvatar.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="user-name" style="background-color: rgb(255, 110, 110)">
+    {{ u_name_display }}
+</div>
+</template>
+
+<script setup>
+import { ref, inject, computed } from "vue";
+
+
+const { helper, ajax } = inject("$global");
+const userName = ref(helper.read("userName") || "");
+
+const u_name_display = computed(() => {
+    return userName.value.slice(0, 1);
+});
+</script>
+
+<style scoped>
+.user-name {
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+</style>

src/utils/config.js

@@ -2,22 +2,7 @@ export default {
     defaultTitle: "信通小数",
     defaultDesc: "大模型AI能力平台，为你的下一个创意助力",
     slider: [
-        // {
-        //     id: 0,
-        //     title: "报告生成",
-        //     icon: "2",
-        //     img: "/src/assets/index/2.png",
-        //     desc: "基于您创建的报告格式和内容，快速生成定制报告，并支持一键下载",
-        //     dialog: "基于您创建的报告格式和内容，快速生成定制报告，并支持一键下载。"
-        // },
-        // {
-        //     id: 1,
-        //     title: "报表合并",
-        //     icon: "6",
-        //     img: "/src/assets/index/6.png",
-        //     desc: "基于您上传的报表进行合并，助您快速完成报表整合与分析",
-        //     dialog: "基于您上传的报表进行合并，助您快速完成报表整合与分析"
-        // },
+
         {
             id: 2,
             title: "知识问答",
@@ -74,5 +59,22 @@ export default {
             desc: "您可以上传文档，小数能针对单文档或多个文档内容自动出题，高效便捷的帮助你建立私人题库。",
             dialog: "您可以上传文档，小数能针对单文档或多个文档内容自动出题，高效便捷的帮助你建立私人题库。"
         },
+
+        {
+            id: 0,
+            title: "报告生成",
+            icon: "2",
+            img: "/src/assets/index/2.png",
+            desc: "基于您创建的报告格式和内容，快速生成定制报告，并支持一键下载",
+            dialog: "基于您创建的报告格式和内容，快速生成定制报告，并支持一键下载。"
+        },
+        {
+            id: 1,
+            title: "报表合并",
+            icon: "6",
+            img: "/src/assets/index/6.png",
+            desc: "基于您上传的报表进行合并，助您快速完成报表整合与分析",
+            dialog: "基于您上传的报表进行合并，助您快速完成报表整合与分析"
+        },
     ]
 };