refactor: Optimization of Q&A page

--story=1018176 --user=王孝刚 【问答页面】优化对话页面显示 https://www.tapd.cn/57709429/s/1674146

Author: wxg0103

apps/application/serializers/application_serializers.py

@@ -984,6 +984,7 @@ def profile(self, with_valid=True):
                                                 'draggable': application_setting.draggable,
                                                 'show_guide': application_setting.show_guide,
                                                 'avatar': application_setting.avatar,
+                                                'show_avatar': application_setting.show_avatar,
                                                 'float_icon': application_setting.float_icon,
                                                 'authentication': application_setting.authentication,
                                                 'authentication_type': application_setting.authentication_value.get(
@@ -992,6 +993,7 @@ def profile(self, with_valid=True):
                                                 'disclaimer_value': application_setting.disclaimer_value,
                                                 'custom_theme': application_setting.custom_theme,
                                                 'user_avatar': application_setting.user_avatar,
+                                                'show_user_avatar': application_setting.show_user_avatar,
                                                 'float_location': application_setting.float_location}
             return ApplicationSerializer.Query.reset_application(
                 {**ApplicationSerializer.ApplicationModel(application).data,

ui/src/locales/lang/en-US/views/application-overview.ts

@@ -71,6 +71,7 @@ export default {
       default: 'Default',
       askUserAvatar: 'User Avatar (Asking)',
       replace: 'Replace',
+      display: 'Display',
       imageMessage:
         'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
       AIAvatar: 'AI Avatar',

ui/src/locales/lang/zh-CN/views/application-overview.ts

@@ -72,6 +72,7 @@ export default {
       replace: '替换',
       imageMessage: '建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB',
       AIAvatar: 'AI 回复头像',
+      display: '显示',
       floatIcon: '浮窗入口图标',
       iconDefaultPosition: '图标默认位置',
       iconPosition: {

ui/src/locales/lang/zh-Hant/views/application-overview.ts

@@ -70,6 +70,7 @@ export default {
       default: '預設',
       askUserAvatar: '提問用戶頭像',
       replace: '取代',
+      display: '顯示',
       imageMessage: '建議尺寸 32*32，支援 JPG、PNG、GIF，大小不超過 10 MB',
       AIAvatar: 'AI 回覆頭像',
       floatIcon: '浮窗入口圖示',

ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue

@@ -81,7 +81,7 @@
           <div>
             <div class="p-16" style="position: relative">
               <div class="flex">
-                <div class="avatar">
+                <div class="avatar" v-if="xpackForm.show_avatar">
                   <el-image
                     v-if="imgUrl.avatar"
                     :src="imgUrl.avatar"
@@ -99,7 +99,8 @@
                 <img src="@/assets/display-bg2.png" alt="" width="270" />
               </div>
               <div class="flex-between">
-                <div class="avatar">
+                <img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
+                <div class="avatar" v-if="xpackForm.show_user_avatar">
                   <el-image
                     v-if="imgUrl.user_avatar"
                     :src="imgUrl.user_avatar"
@@ -111,8 +112,6 @@
                     <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
                   </AppAvatar>
                 </div>
-
-                <img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
               </div>
             </div>
             <div
@@ -188,7 +187,11 @@
             <span class="lighter">{{
               $t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
             }}</span>
-
+            <el-checkbox v-model="xpackForm.show_user_avatar" style="margin-left: 200px">
+              {{
+                $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
+              }}</el-checkbox
+            >
             <el-upload
               ref="uploadRef"
               action="#"
@@ -211,7 +214,9 @@
             <span class="lighter">{{
               $t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
             }}</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="#"
@@ -417,7 +422,9 @@ const defaultSetting = {
   float_location: {
     y: { type: 'bottom', value: 30 },
     x: { type: 'right', value: 0 }
-  }
+  },
+  show_avatar: true,
+  show_user_avatar: false
 }
 
 const displayFormRef = ref()
@@ -443,7 +450,9 @@ const xpackForm = ref<any>({
   float_location: {
     y: { type: 'bottom', value: 30 },
     x: { type: 'right', value: 0 }
-  }
+  },
+  show_avatar: true,
+  show_user_avatar: false
 })
 
 const imgUrl = ref<any>({
@@ -510,6 +519,8 @@ const open = (data: any, content: any) => {
   xpackForm.value.avatar_url = data.avatar
   xpackForm.value.user_avatar_url = data.user_avatar
   xpackForm.value.float_icon_url = data.float_icon
+  xpackForm.value.show_avatar = data.show_avatar
+  xpackForm.value.show_user_avatar = data.show_user_avatar
   xpackForm.value.custom_theme = {
     theme_color: data.custom_theme?.theme_color || '',
     header_font_color: data.custom_theme?.header_font_color || '#1f2329'

ui/src/views/dataset/DatasetSetting.vue

@@ -90,6 +90,8 @@
             <el-form-item label="App Secret" prop="app_id" v-if="detail.type === '2'">
               <el-input
                 v-model="form.app_secret"
+                type="password"
+                show-password
                 :placeholder="
                   $t('views.application.applicationAccess.larkSetting.appSecretPlaceholder')
                 "

ui/src/views/dataset/component/CreateDatasetDialog.vue

@@ -154,6 +154,8 @@
       <el-form-item label="App Secret" prop="app_id" v-if="datasetForm.type === '2'">
         <el-input
           v-model="datasetForm.app_secret"
+          type="password"
+          show-password
           :placeholder="$t('views.application.applicationAccess.larkSetting.appSecretPlaceholder')"
         />
       </el-form-item>