From 1b13a0e72fcda8b5bdf5aca1013ece71695a424e Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Tue, 9 Sep 2025 15:59:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=B8=BBagent=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat-view/components/right-view/index.vue |  4 +--
 .../components/sender-input/index.vue         |  4 +--
 src/components/xt-chat/chat-view/constants.ts |  3 +-
 src/components/xt-chat/chat-view/index.vue    |  6 ++--
 src/components/xt-chat/chat-view/style.scss   | 34 ++++++++++++++-----
 .../xt-chat/chat-view/useChatHandler.tsx      | 21 +++++-------
 6 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/xt-chat/chat-view/components/right-view/index.vue b/src/components/xt-chat/chat-view/components/right-view/index.vue
index ca682d1..87fa1fe 100644
--- a/src/components/xt-chat/chat-view/components/right-view/index.vue
+++ b/src/components/xt-chat/chat-view/components/right-view/index.vue
@@ -76,7 +76,7 @@ export default {
     };
     const renderHeader = () => {
       return (
-        <header class="header flex justify-end items-center mb-16px px-32px">
+        <header class="header flex justify-end items-center mb-16px px-16px">
           {hasMediaCenter.value && (
             <Button
               type="outline"
@@ -175,7 +175,7 @@ export default {
         return null;
       };
       return (
-        <section class="flex-1 overflow-y-auto content flex justify-center px-32px">
+        <section class="flex-1 overflow-y-auto content flex justify-center px-16px">
           <Bubble
             ref={bubbleRef}
             placement="start"
diff --git a/src/components/xt-chat/chat-view/components/sender-input/index.vue b/src/components/xt-chat/chat-view/components/sender-input/index.vue
index e587a43..aaded96 100644
--- a/src/components/xt-chat/chat-view/components/sender-input/index.vue
+++ b/src/components/xt-chat/chat-view/components/sender-input/index.vue
@@ -84,7 +84,7 @@ export default {
     });
 
     return () => (
-      <div class="sender-input-wrap full h-120px">
+      <section class="sender-input-wrap full h-120px">
         <Sender
           v-model:value={localSearchValue.value}
           ref={senderRef}
@@ -94,7 +94,7 @@ export default {
           placeholder={props.placeholder}
           actions={() => renderActions()}
         />
-      </div>
+      </section>
     );
   },
 };
diff --git a/src/components/xt-chat/chat-view/constants.ts b/src/components/xt-chat/chat-view/constants.ts
index de31db9..b9f6fc9 100644
--- a/src/components/xt-chat/chat-view/constants.ts
+++ b/src/components/xt-chat/chat-view/constants.ts
@@ -34,8 +34,7 @@ export const REMOTE_USER_ROLE = 'user'; // 接口返回用户
 export const REMOTE_ASSISTANT_ROLE = 'assistant'; // 接口返回智能体
 
 export const ROLE_STYLE = {
-  width: '600px',
-  margin: '0 auto',
+  width: 'var(--max-content-width)',
 };
 
 export const ANSWER_STYLE = {
diff --git a/src/components/xt-chat/chat-view/index.vue b/src/components/xt-chat/chat-view/index.vue
index 440f4a8..b1eb5c5 100644
--- a/src/components/xt-chat/chat-view/index.vue
+++ b/src/components/xt-chat/chat-view/index.vue
@@ -149,8 +149,8 @@ export default {
     });
 
     return () => (
-      <div class="chat-view-wrap w-full h-full flex">
-        <section class="flex-1 flex flex-col pt-20px justify-center relative pl-16px pr-2px">
+      <div class={`chat-view-wrap w-full h-full flex ${showRightView.value ? 'show-right-view' : ''}`}>
+        <section class="flex-1 flex flex-col pt-20px justify-center relative bubble-wrap">
           <div class="flex-1 overflow-hidden pb-20px">
             <BubbleList
               ref={bubbleListRef}
@@ -165,7 +165,7 @@ export default {
             <SenderInput
               v-model={searchValue.value}
               ref={senderRef}
-              class="w-600px"
+              style={{ 'width': 'var(--max-content-width)' }}
               placeholder="继续追问..."
               loading={generateLoading.value}
               onSubmit={handleSubmit}
diff --git a/src/components/xt-chat/chat-view/style.scss b/src/components/xt-chat/chat-view/style.scss
index 8f33429..04d1ab2 100644
--- a/src/components/xt-chat/chat-view/style.scss
+++ b/src/components/xt-chat/chat-view/style.scss
@@ -1,4 +1,8 @@
+$bubble-wrap-padding-left: 16px;
+$bubble-wrap-padding-right: 2px;
 .chat-view-wrap {
+  --max-content-width: 900px;
+  --max-question-width: 500px;
   .cts {
     color: var(--Text-1, #737478);
     font-size: 14px;
@@ -6,15 +10,27 @@
     font-weight: 400;
     line-height: 22px;
   }
-  :deep(.xt-bubble) {
-    .file-card {
-      border-radius: 12px;
-      border: 1px solid var(--Border-2, #e6e6e8);
-      background: linear-gradient(90deg, #f6f4ff 0%, #fff 100%);
-      padding: 13px 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  .bubble-wrap {
+    padding-left: $bubble-wrap-padding-left;
+    padding-right: $bubble-wrap-padding-right;
+  }
+  :deep(.xt-bubble-list) {
+    align-items: center;
+    padding-right: $bubble-wrap-padding-left - $bubble-wrap-padding-right;
+    .xt-bubble {
+      .file-card {
+        border-radius: 12px;
+        border: 1px solid var(--Border-2, #e6e6e8);
+        background: linear-gradient(90deg, #f6f4ff 0%, #fff 100%);
+        padding: 13px 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
+  &.show-right-view {
+    --max-content-width: 596px;
+    --max-question-width: 396px;
+  }
 }
diff --git a/src/components/xt-chat/chat-view/useChatHandler.tsx b/src/components/xt-chat/chat-view/useChatHandler.tsx
index 2051d94..5782ba9 100644
--- a/src/components/xt-chat/chat-view/useChatHandler.tsx
+++ b/src/components/xt-chat/chat-view/useChatHandler.tsx
@@ -86,9 +86,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       shape: 'round',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-400px">
-          {message}
-        </div>;
+        return <div style={{ 'max-width': 'var(--max-question-width)' }}>{message}</div>;
       },
     },
     [REMOTE_USER_ROLE]: {
@@ -96,9 +94,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       shape: 'round',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-600px">
-          {message}
-        </div>;
+        return <div style={{ 'max-width': 'var(--max-question-width)' }}>{message}</div>;
       },
     },
     [REMOTE_ASSISTANT_ROLE]: {
@@ -106,14 +102,16 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       variant: 'borderless',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-600px markdown-wrap" v-html={md.render(message)} />;
+        return (
+          <div class="markdown-wrap" style={{ 'max-width': 'var(--max-content-width)' }} v-html={md.render(message)} />
+        );
       },
       footer: (params) => {
         const { content, item } = params as { content: string; item: MESSAGE.Answer };
         const isShow = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
         return (
           <div class="flex items-center">
-            <Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }} >
+            <Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }}>
               <div class="action-box">
                 <IconCopy size={16} class="color-#737478" />
               </div>
@@ -318,7 +316,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
     // 含有思考过程，折叠思考过程，展示结果
     if (_hasRunTask) {
       setRunTaskCollapse(teamRunTaskId, false);
-      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理')
+      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理');
       if (_targetData) {
         showRightView.value = true;
         rightViewDataSource.value = extra_data.data;
@@ -345,8 +343,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
             )}
           </>
         );
-      }
-
+      };
     } else {
       _targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
     }
@@ -418,6 +415,6 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
     conversationList,
     showRightView,
     rightViewDataSource,
-    rightPreviewData
+    rightPreviewData,
   };
 }