perf: 走查问题调整

src/components/xt-chat/chat-view/components/right-view/index.vue

@@ -11,12 +11,16 @@ import { FILE_TYPE } from '@/components/xt-chat/chat-view/constants';
 export default {
   emits: ['close'],
   props: {
-    rightViewData: {
+    dataSource: {
       type: Array,
       default: () => [],
     },
+    previewData: {
+      type: Object,
+      default: () => {},
+    },
   },
-  setup(props: { rightViewData: any[] }, { emit, expose }) {
+  setup(props: { dataSource: any[]; previewData: any }, { emit, expose }) {
     const bubbleRef = ref(null);
 
     const md = markdownit({
@@ -26,19 +30,15 @@ export default {
       typographer: true,
     });
 
-    const dataSource = computed(() => {
-      return props.rightViewData.find((v) => v.task_type === '任务管理') ?? {};
-    });
-
     const tasks = computed(() => {
-      return dataSource.value.payload?.tasks ?? [];
+      return props.previewData.payload?.tasks ?? [];
     });
 
     const isTaskManage = computed(() => {
-      return dataSource.value.task_type === '任务管理';
+      return props.previewData.task_type === '任务管理';
     });
     const hasMediaCenter = computed(() => {
-      return props.rightViewData.some((v) => v.task_type === '素材中心')
+      return props.dataSource.some((v) => v.task_type === '素材中心');
     });
 
     const onDownload = () => {
@@ -46,10 +46,11 @@ export default {
       message.success('下载成功！');
     };
     const onAddMediaCenter = () => {
+      const _data = props.dataSource.find((v) => v.task_type === '素材中心');
       const {
         api: { endpoint, method },
         payload,
-      } = dataSource.value;
+      } = _data;
       Http[method.toLowerCase()]?.(endpoint, payload).then((res) => {
         const { code } = res;
         if (code === 200) {
@@ -58,10 +59,11 @@ export default {
       });
     };
     const onAddTaskManage = () => {
+      const _data = props.dataSource.find((v) => v.task_type === '任务管理');
       const {
         api: { endpoint, method },
         payload,
-      } = dataSource.value;
+      } = _data;
       Http[method.toLowerCase()]?.(endpoint, payload).then((res) => {
         const { code } = res;
         if (code === 200) {
@@ -111,7 +113,7 @@ export default {
       );
     };
     const renderTaskManage = () => {
-      const { file_type } = dataSource.value;
+      const { file_type } = props.previewData;
       return tasks.value.map((item) => {
         const { params, execution_time, name } = item;
         if (file_type === FILE_TYPE.topic_only) {

src/components/xt-chat/chat-view/constants.ts

@@ -9,7 +9,8 @@ export interface UseChatHandlerReturn {
   generateLoading?: Ref<boolean>;
   conversationList?: Ref<any[]>;
   showRightView?: Ref<boolean>;
-  rightViewData?: Ref<any>;
+  rightViewDataSource?: Ref<any>;
+  rightPreviewData?: Ref<any>;
   senderRef?: Ref<null>
 }
 export enum EnumTeamRunStatus {

src/components/xt-chat/chat-view/index.vue

@@ -108,7 +108,8 @@ export default {
     const {
       roles,
       showRightView,
-      rightViewData,
+      rightViewDataSource,
+      rightPreviewData,
       generateTeamRunTaskId,
       handleMessage,
       conversationList,
@@ -178,7 +179,8 @@ export default {
         {showRightView.value && (
           <RightView
             ref={rightViewRef}
-            rightViewData={rightViewData.value}
+            dataSource={rightViewDataSource.value}
+            previewData={rightPreviewData.value}
             showRightView={showRightView.value}
             onClose={() => (showRightView.value = false)}
           />

src/components/xt-chat/chat-view/useChatHandler.tsx

@@ -48,7 +48,8 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
   const generateTeamRunTaskId = ref<string | null>(null);
 
   const showRightView = ref(false);
-  const rightViewData = ref<any>({});
+  const rightViewDataSource = ref<any>([]);
+  const rightPreviewData = ref<any>([]);
 
   // 初始化markdown
   const md = markdownit({
@@ -84,18 +85,28 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       placement: 'end',
       shape: 'round',
       style: ROLE_STYLE,
+      messageRender: (message: string) => {
+        return <div class="max-w-400px">
+          {message}
+        </div>;
+      },
     },
     [REMOTE_USER_ROLE]: {
       placement: 'end',
       shape: 'round',
       style: ROLE_STYLE,
+      messageRender: (message: string) => {
+        return <div class="max-w-400px">
+          {message}
+        </div>;
+      },
     },
     [REMOTE_ASSISTANT_ROLE]: {
       placement: 'start',
       variant: 'borderless',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div v-html={md.render(message)} />;
+        return <div class="max-w-400px" v-html={md.render(message)} />;
       },
       footer: (params) => {
         const { content, item } = params as { content: string; item: MESSAGE.Answer };
@@ -118,7 +129,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
 
   // 下载处理
   const onDownload = () => {
-    console.log('onDownload', rightViewData.value);
+    console.log('onDownload', rightViewDataSource.value);
   };
 
   const onCopy = (content: string) => {
@@ -303,13 +314,14 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
     // 含有思考过程，折叠思考过程，展示结果
     if (_hasRunTask) {
       setRunTaskCollapse(teamRunTaskId, false);
-      if (extra_data) {
+      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理')
+      if (_targetData) {
         showRightView.value = true;
-        rightViewData.value = extra_data.data;
+        rightViewDataSource.value = extra_data.data;
+        rightPreviewData.value = _targetData;
       }
 
       _targetTask.content.customRender = () => {
-        const _targetData = extra_data?.data.find((item: any) => item.task_type === '任务管理')
         return (
           <>
             <div v-html={md.render(output)} />
@@ -395,6 +407,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
     generateLoading,
     conversationList,
     showRightView,
-    rightViewData,
+    rightViewDataSource,
+    rightPreviewData
   };
 }

src/components/xt-chat/xt-bubble/style.scss

@@ -44,7 +44,7 @@
           left: 0;
           width: 100%;
           height: 100%;
-          border-left: 1px solid #E6E6E8;
+          border-left: 1px solid #e6e6e8;
         }
       }
     }
@@ -59,6 +59,8 @@
     align-items: flex-start;
     min-width: 0;
     max-width: 100%;
+    min-height: 36px;
+    word-break: break-all;
     @include cts;
     &-filled {
       background-color: #f2f3f5;
@@ -101,7 +103,7 @@
     &-corner {
       border-radius: 4px;
     }
-    
+
     :deep(table) {
       border-collapse: collapse;
       thead {
@@ -109,9 +111,8 @@
           th {
             @include cts;
             padding: 6px 8px;
-            border: 1px solid #E6E6E8;
+            border: 1px solid #e6e6e8;
             text-align: left;
-
           }
         }
       }
@@ -119,7 +120,7 @@
         tr {
           td {
             @include cts;
-            border: 1px solid #E6E6E8;
+            border: 1px solid #e6e6e8;
             padding: 16px 8px;
             text-align: left;
           }
@@ -142,5 +143,4 @@
     display: inline-block;
     min-width: 36px;
   }
-  
 }

src/layouts/Basic.vue

@@ -103,7 +103,7 @@ const checkHasInviteCode = () => {
 .layout-wrap {
   font-family: inherit;
   background: transparent;
-  min-width: 1200px;
+  min-width: $layout-min-width;
   .layout-header-wrap {
     background: transparent;
     height: $navbar-height;
@@ -115,6 +115,7 @@ const checkHasInviteCode = () => {
     left: 0;
     z-index: 1000;
     width: 100%;
+    min-width: $layout-min-width;
   }
   .layout-content-wrap {
     width: 100%;

src/layouts/components/navbar/components/middle-side/index.vue

@@ -14,7 +14,7 @@ export default {
       keyWord.value = '';
     };
     return () => (
-      <div class="middle-wrap h-100% flex-1 flex items-center justify-center px-24px">
+      <div class="middle-wrap h-100% flex items-center justify-center">
         <Input
           v-model:value={keyWord.value}
           onPressEnter={handleSearch}

src/layouts/components/navbar/components/middle-side/style.scss

@@ -1,4 +1,7 @@
 .middle-wrap {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   :deep(.ant-input-affix-wrapper) {

src/layouts/components/navbar/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="navbar-wrap px-24px">
+    <div class="w-full h-full relative flex justify-between">
+
     <div class="left-wrap flex items-center cursor-pointer" @click="handleUserHome">
       <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
     </div>
-    <div class="flex-1">
+    <!-- <div class="flex-1"> -->
       <MiddleSide v-if="!isHomeRoute" />
-    </div>
+    <!-- </div> -->
     <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
   </div>
+
+  </div>
 </template>
 
 <script setup>
@@ -32,8 +36,6 @@ const isHomeRoute = computed(() => {
 <style scoped lang="scss">
 .navbar-wrap {
   position: relative;
-  display: flex;
-  justify-content: space-between;
   height: 100%;
   &::before {
     width: 100%;

src/styles/lib/variable.scss

@@ -1,3 +1,4 @@
+$layout-min-width: 1200px;
 $navbar-height: 52px; // 头部高度
 $sidebar-width: 138px; // 侧边栏菜单宽度
 $sidebar-width-collapse: 74px; // 折叠侧边栏菜单宽度

src/views/creative-generation-workshop/explore/detail/style.scss

@@ -1,6 +1,6 @@
 .explore-page {
   position: relative;
-  min-width: 1200px;
+  min-width: $layout-min-width;
   min-height: 100vh;
   background: #fff;
   display: flex;
@@ -35,7 +35,7 @@
     right: 0;
     top: 0;
     z-index: 1000;
-    min-width: 1200px;
+    min-width: $layout-min-width;
     .content {
       height: $navbar-height;
       // border-bottom: 1px solid var(--Border-1, #d7d7d9);

src/views/creative-generation-workshop/explore/list/style.scss

@@ -1,7 +1,7 @@
 .explore-page {
   position: relative;
   padding-top: $navbar-height;
-  min-width: 1200px;
+  min-width: $layout-min-width;
   .cts {
     font-family: $font-family-regular;
     font-size: 14px;
@@ -18,7 +18,7 @@
     right: 0;
     top: 0;
     z-index: 1000;
-    min-width: 1200px;
+    min-width: $layout-min-width;
     .content {
       height: $navbar-height;
       // border-bottom: 1px solid var(--Border-1, #d7d7d9);
@@ -41,7 +41,7 @@
   .page-wrapper {
     min-height: calc(100vh - $navbar-height);
     .explore-container {
-      width: 1200px;
+      width: $layout-min-width;
       .explore-list-wrap {
         :deep(.overflow-text) {
           color: var(--Text-1, #211f24);

src/views/material-center/components/finished-products/explore/detail/style.scss

@@ -1,6 +1,6 @@
 .explore-page {
   position: relative;
-  min-width: 1200px;
+  min-width: $layout-min-width;
   min-height: 100vh;
   // background: #fff;
   display: flex;
@@ -35,7 +35,7 @@
     right: 0;
     top: 0;
     z-index: 1000;
-    min-width: 1200px;
+    min-width: $layout-min-width;
     .content {
       height: $navbar-height;
       // border-bottom: 1px solid var(--Border-1, #d7d7d9);

src/views/material-center/components/finished-products/explore/list/style.scss

@@ -1,7 +1,7 @@
 .explore-page {
   position: relative;
   padding-top: $navbar-height;
-  min-width: 1200px;
+  min-width: $layout-min-width;
   .cts {
     font-family: $font-family-regular;
     font-size: 14px;
@@ -18,7 +18,7 @@
     right: 0;
     top: 0;
     z-index: 1000;
-    min-width: 1200px;
+    min-width: $layout-min-width;
     .content {
       height: $navbar-height;
       // border-bottom: 1px solid var(--Border-1, #d7d7d9);
@@ -41,7 +41,7 @@
   .page-wrapper {
     min-height: calc(100vh - $navbar-height);
     .explore-container {
-      width: 1200px;
+      width: $layout-min-width;
       .explore-list-wrap {
         :deep(.overflow-text) {
           color: var(--Text-1, #211f24);