From ee5c8a455d7f301fa664b1552b2e3f76c9b053b7 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Mar 2025 20:38:32 +0800
Subject: [PATCH] feat: Setting avatar show or hide

---
 .../component/answer-content/index.vue        |  18 ++-
 .../operation-button/ChatOperationButton.vue  |  30 +++--
 .../component/prologue-content/index.vue      |  10 +-
 .../component/question-content/index.vue      |   5 +-
 .../ai-chat/component/user-form/index.vue     |   2 +-
 ui/src/components/ai-chat/index.scss          |   4 +-
 .../component/XPackDisplaySettingDialog.vue   | 112 +++++++++++-------
 7 files changed, 115 insertions(+), 66 deletions(-)

diff --git a/ui/src/components/ai-chat/component/answer-content/index.vue b/ui/src/components/ai-chat/component/answer-content/index.vue
index 3724f3351..00fcfacf8 100644
--- a/ui/src/components/ai-chat/component/answer-content/index.vue
+++ b/ui/src/components/ai-chat/component/answer-content/index.vue
@@ -1,11 +1,17 @@
 <template>
   <div class="item-content mb-16 lighter">
     <template v-for="(answer_text, index) in answer_text_list" :key="index">
-      <div class="avatar">
+      <div class="avatar mr-8" v-if="application.show_avatar">
         <img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
         <LogoIcon v-else height="28px" width="28px" />
       </div>
-      <div class="content" @mouseup="openControl">
+      <div
+        class="content"
+        @mouseup="openControl"
+        :style="{
+          'padding-right': application.show_user_avatar ? 'var(--padding-left)' : '0'
+        }"
+      >
         <el-card shadow="always" class="mb-8 border-r-8" style="--el-card-padding: 6px 16px">
           <MdRenderer
             v-if="
@@ -42,7 +48,13 @@
         </el-card>
       </div>
     </template>
-    <div class="content">
+    <div
+      class="content"
+      :style="{
+        'padding-left': application.show_avatar ? 'var(--padding-left)' : '0',
+        'padding-right': application.show_user_avatar ? 'var(--padding-left)' : '0'
+      }"
+    >
       <OperationButton
         :type="type"
         :application="application"
diff --git a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
index ba9d22810..2dffae740 100644
--- a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
+++ b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
@@ -6,7 +6,7 @@
 
     <div>
       <!-- 语音播放 -->
-      <span v-if="tts">
+      <span>
         <el-tooltip
           v-if="audioManage?.isPlaying()"
           effect="dark"
@@ -40,18 +40,18 @@
         <el-divider direction="vertical" />
       </span>
       <span v-if="type == 'ai-chat' || type == 'log'">
-        <el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
-          <el-button :disabled="chat_loading" text @click="regeneration">
-            <el-icon><RefreshRight /></el-icon>
-          </el-button>
-        </el-tooltip>
-        <el-divider direction="vertical" />
         <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
           <el-button text @click="copyClick(data?.answer_text.trim())">
             <AppIcon iconName="app-copy"></AppIcon>
           </el-button>
         </el-tooltip>
         <el-divider direction="vertical" />
+        <el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
+          <el-button :disabled="chat_loading" text @click="regeneration">
+            <el-icon><RefreshRight /></el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-divider direction="vertical" />
         <el-tooltip
           effect="dark"
           :content="$t('chat.operation.like')"
@@ -94,10 +94,17 @@
           </el-button>
         </el-tooltip>
       </span>
+
+      <!-- 先渲染，不然不能播放   -->
+      <audio
+        ref="audioPlayer"
+        v-for="item in audioList"
+        :key="item"
+        controls
+        hidden="hidden"
+      ></audio>
+      <div ref="audioCiontainer"></div>
     </div>
-    <!-- 先渲染，不然不能播放   -->
-    <audio ref="audioPlayer" v-for="item in audioList" :key="item" controls hidden="hidden"></audio>
-    <div ref="audioCiontainer"></div>
   </div>
 </template>
 <script setup lang="ts">
@@ -520,9 +527,10 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-@media only screen and (max-width: 420px) {
+@media only screen and (max-width: 430px) {
   .chat-operation-button {
     display: block;
+    text-align: right;
   }
 }
 </style>
diff --git a/ui/src/components/ai-chat/component/prologue-content/index.vue b/ui/src/components/ai-chat/component/prologue-content/index.vue
index b9da8fb9f..92cbffba3 100644
--- a/ui/src/components/ai-chat/component/prologue-content/index.vue
+++ b/ui/src/components/ai-chat/component/prologue-content/index.vue
@@ -1,11 +1,17 @@
 <template>
   <!-- 开场白组件 -->
   <div class="item-content mb-16">
-    <div class="avatar" v-if="prologue">
+    <div class="avatar mr-8" v-if="prologue && application.show_avatar">
       <img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
       <LogoIcon v-else height="28px" width="28px" />
     </div>
-    <div class="content" v-if="prologue">
+    <div
+      class="content"
+      v-if="prologue"
+      :style="{
+        'padding-right': application.show_user_avatar ? 'var(--padding-left)' : '0'
+      }"
+    >
       <el-card shadow="always" class="border-r-8" style="--el-card-padding: 10px 16px 12px">
         <MdRenderer
           :source="prologue"
diff --git a/ui/src/components/ai-chat/component/question-content/index.vue b/ui/src/components/ai-chat/component/question-content/index.vue
index e95cb41b9..20d518a18 100644
--- a/ui/src/components/ai-chat/component/question-content/index.vue
+++ b/ui/src/components/ai-chat/component/question-content/index.vue
@@ -2,7 +2,7 @@
   <!-- 问题内容 -->
   <div class="question-content item-content mb-16 lighter">
     <div
-      class="content mr-12 p-12-16 border-r-8"
+      class="content p-12-16 border-r-8"
       :class="document_list.length >= 2 ? 'media_2' : `media_${document_list.length}`"
     >
       <div class="text break-all pre-wrap">
@@ -63,7 +63,7 @@
         <span> {{ chatRecord.problem_text }}</span>
       </div>
     </div>
-    <div class="avatar">
+    <div class="avatar ml-8" v-if="application.show_user_avatar">
       <el-image
         v-if="application.user_avatar"
         :src="application.user_avatar"
@@ -133,7 +133,6 @@ onMounted(() => {})
     background: #d6e2ff;
     padding-left: 16px;
     padding-right: 16px;
-
   }
 
   .download-file {
diff --git a/ui/src/components/ai-chat/component/user-form/index.vue b/ui/src/components/ai-chat/component/user-form/index.vue
index 97350cc91..1676165c4 100644
--- a/ui/src/components/ai-chat/component/user-form/index.vue
+++ b/ui/src/components/ai-chat/component/user-form/index.vue
@@ -16,7 +16,7 @@
           {{ inputFieldConfig.title }}
         </span>
       </div>
-      <el-scrollbar max-height="160">
+      <el-scrollbar :max-height="!props.first ? 160 : 0">
         <el-collapse-transition>
           <div v-show="showUserInput" class="mt-16" style="padding: 0 8px">
             <DynamicsForm
diff --git a/ui/src/components/ai-chat/index.scss b/ui/src/components/ai-chat/index.scss
index 52ea5e349..b5bf9ebe1 100644
--- a/ui/src/components/ai-chat/index.scss
+++ b/ui/src/components/ai-chat/index.scss
@@ -16,8 +16,8 @@
     }
 
     .content {
-      padding-left: var(--padding-left);
-      padding-right: var(--padding-left);
+      // padding-left: var(--padding-left);
+      // padding-right: var(--padding-left);
 
       :deep(ol) {
         margin-left: 16px !important;
diff --git a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
index c9e99af22..325e38cde 100644
--- a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -87,26 +87,44 @@
                     :src="imgUrl.avatar"
                     alt=""
                     fit="cover"
-                    style="width: 35px; height: 35px; display: block"
+                    style="width: 28px; height: 28px; display: block"
                   />
                   <LogoIcon
                     v-else
-                    height="35px"
-                    style="width: 35px; height: 35px; display: block"
+                    height="28px"
+                    style="width: 28px; height: 28px; display: block"
                   />
                 </div>
 
-                <img src="@/assets/display-bg2.png" alt="" width="270" />
+                <img
+                  src="@/assets/display-bg2.png"
+                  alt=""
+                  :width="
+                    xpackForm.show_avatar
+                      ? xpackForm.show_user_avatar
+                        ? '240px'
+                        : '270px'
+                      : xpackForm.show_user_avatar
+                        ? '270px'
+                        : '300px'
+                  "
+                />
               </div>
-              <div class="flex-between">
-                <img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
+              <div class="flex" style="justify-content: flex-end">
+                <img
+                  src="@/assets/display-bg3.png"
+                  alt=""
+                  :width="xpackForm.show_user_avatar ? '240px' : '270px'"
+                  class="mr-8"
+                  style="object-fit: contain"
+                />
                 <div class="avatar" v-if="xpackForm.show_user_avatar">
                   <el-image
                     v-if="imgUrl.user_avatar"
                     :src="imgUrl.user_avatar"
                     alt=""
                     fit="cover"
-                    style="width: 35px; height: 35px; display: block"
+                    style="width: 28px; height: 28px; display: block"
                   />
                   <AppAvatar v-else>
                     <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
@@ -185,53 +203,59 @@
         <el-card shadow="never" class="mb-8">
           <div class="flex-between mb-8">
             <span class="lighter">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
+              $t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
             }}</span>
-            <el-checkbox v-model="xpackForm.show_user_avatar" style="margin-left: 200px">
-              {{
+            <span class="flex align-center">
+              <el-checkbox v-model="xpackForm.show_avatar">{{
                 $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
-              }}</el-checkbox
-            >
-            <el-upload
-              ref="uploadRef"
-              action="#"
-              :auto-upload="false"
-              :show-file-list="false"
-              accept="image/jpeg, image/png, image/gif"
-              :on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
-            >
-              <el-button size="small">
-                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-              </el-button>
-            </el-upload>
+              }}</el-checkbox>
+              <el-upload
+                class="ml-8"
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
+              >
+                <el-button size="small">
+                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                </el-button>
+              </el-upload>
+            </span>
           </div>
-          <el-text type="info" size="small"
-            >{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+          <el-text type="info" size="small">
+            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
           </el-text>
         </el-card>
         <el-card shadow="never" class="mb-8">
           <div class="flex-between mb-8">
             <span class="lighter">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
+              $t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
             }}</span>
-            <el-checkbox v-model="xpackForm.show_avatar" style="margin-left: 200px">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
-            }}</el-checkbox>
-            <el-upload
-              ref="uploadRef"
-              action="#"
-              :auto-upload="false"
-              :show-file-list="false"
-              accept="image/jpeg, image/png, image/gif"
-              :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
-            >
-              <el-button size="small">
-                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-              </el-button>
-            </el-upload>
+            <span class="flex align-center">
+              <el-checkbox v-model="xpackForm.show_user_avatar">
+                {{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
+                }}</el-checkbox
+              >
+              <el-upload
+                class="ml-8"
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
+              >
+                <el-button size="small">
+                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                </el-button>
+              </el-upload>
+            </span>
           </div>
-          <el-text type="info" size="small">
-            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+          <el-text type="info" size="small"
+            >{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
           </el-text>
         </el-card>
         <el-card shadow="never" class="mb-8">