fix: 调整对话区域样式

public/i18n/lang-en.json

@@ -297,7 +297,8 @@
 
     "file_upload_message": "Upload",
     "input_message": "Enter your question",
-    "input_placholder": "Enter text content",
+    "input_placholder_v0": "Enter text content",
+    "input_placholder": "",
     "input_confirm": "Confirm",
 
     "back": "Back",

public/i18n/lang-zh.json

@@ -299,7 +299,8 @@
     "file_upload_message": "文件上传",
     "input_message": "输入您的问题",
     "input_placholder_v0": "输入文本内容",
-    "input_placholder": "输入“/”使用Smart智能对话，解决你的问题",
+    "input_placholder_v1": "输入“/”使用Smart智能对话，解决你的问题",
+    "input_placholder": "",
     "input_confirm": "发送",
 
     "back": "返回",

src/modules/conversation-chat/DialogInput.vue

@@ -6,6 +6,7 @@
 
       <div class="textarea-container">
         <a-textarea
+          ref="chat_input_textarea"
           class="chat-textarea-input"
           :placeholder="$t('conversation.input_placholder')"
           :model-value="input_text_value"
@@ -51,6 +52,7 @@ import FileUploadPreviewV1 from '../file-preview/FileUploadPreviewV1.vue';
 import useFileSelect from './use-file-select';
 import useFileSelectedV2 from './use-file-select-v2';
 import useEleSizeV2 from '../../utils/use-ele-size-v2';
+import useTextareaAutoFocus from './use-textarea-auto-focus';
 
 const props = defineProps({
   /**
@@ -82,7 +84,7 @@ const props = defineProps({
    */
   enable_frequent_question: {
     type: Boolean,
-    default: true,
+    default: false,
     required: false
   },
   /**
@@ -160,6 +162,8 @@ const emit = defineEmits(['submit', 'sizeChange']);
  */
 const { select, remove } = useFileSelectedV2();
 
+const autoFocus = useTextareaAutoFocus('chat_input_textarea');
+
 /**
  * 监听表单区域的尺寸变化
  */
@@ -328,6 +332,11 @@ const handleTextKeyUp = (e) => {
   }
 };
 
+onMounted(() => {
+  // 对话输入框自动获得焦点
+  autoFocus();
+});
+
 onUnmounted(() => {
   remove();
 });

src/modules/conversation-chat/dialog-input/InputActions.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="dialog-input-actions">
     <div class="dialog-input-action-left">
-      <div class="action-left-item-btn connect-internet" @click="handleSwitchChange">
+      <!-- <div class="action-left-item-btn connect-internet" @click="handleSwitchChange">
         <a-switch class="chat-connect-network-switch" :default-checked="default_switch" :model-value="cur_switch" />
 
         <span class="search-from-network" :class="search_text_klass">{{ $t('conversation.online_search') }}</span>
-      </div>
-
-      <!-- <a-tooltip :content="$t('conversation.file_upload_message')" position="top">
-        <div v-if="enable_file_upload" class="action-left-item-btn" @click="handleFileUpload">
-          <img src="../../../assets/file-upload.png" />
-        </div>
-      </a-tooltip> -->
+      </div> -->
     </div>
 
     <div class="dialog-input-action-right">
@@ -82,7 +76,7 @@ const props = defineProps({
    */
   enable_frequent_question: {
     type: Boolean,
-    default: true,
+    default: false,
     required: false
   },
   /**

src/modules/conversation-chat/use-textarea-auto-focus.js

@@ -0,0 +1,19 @@
+import { ref, getCurrentInstance, onMounted, onUnmounted, computed } from 'vue';
+
+/**
+ * 自动获得焦点
+ * @see https://arco.design/vue/component/textarea#API
+ * @param {string} ref_name
+ * @returns
+ */
+export default function useTextareaAutoFocus(ref_name) {
+  const { proxy } = getCurrentInstance();
+
+  return (value) => {
+    const target = proxy.$refs[ref_name];
+
+    if (target && typeof target.focus === 'function') {
+      target.focus();
+    }
+  };
+}

src/modules/conversation-content/DialogContent.vue

@@ -53,7 +53,12 @@ const custom_style = computed(() => {
   background-color: var(--color-bg-1);
   color: var(--color-text-1);
   border-radius: 12px;
-  padding: 31px;
+  /* padding: 31px; */
+
+  padding-top: 25px;
+  padding-bottom: 26px;
+  padding-left: 30px;
+  padding-right: 30px;
   /* box-shadow: 0 0 5px #dedede; */
   /* box-shadow: 0 0 5px var(--color-text-4); */
 }

src/modules/conversation-item/DialogAnswer.vue

@@ -4,7 +4,12 @@
 
     <div class="dialog-main answer-main">
       <div class="dialog-icon answer-icon">
-        <img :src="answer.client_custom_icon" />
+        <!-- 根据智能体显示图标 -->
+        <!-- <img :src="answer.client_custom_icon" /> -->
+
+        <!-- 2024-12-26：薛娜提出，使用设计稿的图标 -->
+        <!-- 需求详情查看 https://note.youdao.com/ynoteshare/index.html?id=d781d48a6d64bab8451026fe65342a7f&type=note&_time=1735176727116 6.1 -->
+        <img :src="chat_agent_icon" />
       </div>
 
       <div class="dialog-content answer-content">
@@ -64,6 +69,8 @@ import RefferenceFileBlocks from '../answer-refference/RefferenceFileBlocks.vue'
 
 import copyText from '../../3rd-libs/clipboard';
 
+import chat_agent_icon from '../../assets/chat/chat-agent-icon.png';
+
 const props = defineProps({
   /**
    * 是否显示选择按钮
@@ -290,6 +297,7 @@ onMounted(() => {
 }
 .answer-icon img {
   width: 100%;
+  transform: scale(1.6);
 }
 
 .answer-actions-btns {
@@ -299,4 +307,8 @@ onMounted(() => {
 .refference-files-blocks-container {
   margin-top: 26px;
 }
+
+.dialog-content.answer-content .dialog-chat-answer-content {
+  padding-right: 45px;
+}
 </style>

src/modules/conversation-item/DialogQuestion.vue

@@ -79,6 +79,7 @@ const handleSelectChange = () => {
 }
 .question-icon {
   margin-left: 22px;
+  border-radius: 50%;
 }
 
 .question-icon img {

src/modules/conversation-item/dialog-item-common.css

@@ -34,7 +34,5 @@
 .dialog-icon {
   width: 40px;
   height: 40px;
-  background-color: #fff;
-  border-radius: 25px;
   flex-shrink: 0;
 }

src/modules/file-preview/FileItemRemoveBtn.vue

@@ -22,5 +22,12 @@ const handleRemove = () => {
   border-radius: 50%;
 
   cursor: pointer;
+
+  font-size: 12px;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>

src/views/ConversationQA.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onBeforeUpdate } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import LayoutExperience from './layout/LayoutExperience.vue';
 import ContentContainer from './layout/ContentContainer.vue';
@@ -174,26 +174,7 @@ function comfirmAgent(agent_id) {
   chat_agent.value = agent_id;
 }
 
-onBeforeRouteUpdate(async (to, from) => {
-  // console.log(to, from);
-  // // 路由发生了变化
-  if (to.path === '/chat' || to.path === '/chat/qa') {
-    const default_agent_id = await getDefaultAgentId();
-
-    if (!to.query.agent) {
-      chat_agent.value = default_agent_id;
-
-      router.replace({
-        path: '/chat/qa',
-        query: {
-          agent: default_agent_id
-        }
-      });
-    }
-  }
-});
-
-onMounted(async () => {
+async function init() {
   const query = route.query;
 
   const agent_id = query.agent;
@@ -258,5 +239,35 @@ onMounted(async () => {
     query_value_status.value = 2;
     query_value_message.value = 'success';
   }
+}
+
+/**
+ * 处理路由变化
+ * 监听路由参数的变化
+ */
+onBeforeRouteUpdate(async (to, from) => {
+  // // 路由发生了变化
+  if (to.path === '/chat' || to.path === '/chat/qa') {
+    const default_agent_id = await getDefaultAgentId();
+
+    if (!to.query.agent) {
+      chat_agent.value = default_agent_id;
+
+      router.replace({
+        path: '/chat/qa',
+        query: {
+          agent: default_agent_id
+        }
+      });
+    }
+  }
+});
+
+onMounted(async () => {
+  await init();
+});
+
+onBeforeUpdate(async () => {
+  await init();
 });
 </script>

src/views/Xiaoshu.vue

@@ -67,6 +67,7 @@ onMounted(() => {
     localStorage.setItem('xintongxiaoshu', '${info_str}');
   `;
 
+  // TODO: 根据权限判断是否有 返回 按钮
   const insert_script_after_str = `
     const box = document.querySelector('.xiaoshu-aside-left-menus-container');