feat: 调整对话输入框的样式

public/i18n/lang-en.json

@@ -223,6 +223,8 @@
     "btn_no": "No",
     "del_success": "Success",
 
+    "online_search": "Online search",
+
     "copy": "Copy"
   }
 }

public/i18n/lang-zh.json

@@ -203,7 +203,8 @@
 
     "file_upload_message": "文件上传",
     "input_message": "输入您的问题",
-    "input_placholder": "输入文本内容",
+    "input_placholder_v0": "输入文本内容",
+    "input_placholder": "输入“/”使用Smart智能对话，解决你的问题",
     "input_confirm": "发送",
 
     "back": "返回",
@@ -224,6 +225,8 @@
     "btn_no": "否",
     "del_success": "删除成功",
 
+    "online_search": "联网搜索",
+
     "copy": "复制"
   }
 }

src/modules/conversation-chat/DialogInput.vue

@@ -6,7 +6,7 @@
 
       <div class="textarea-container">
         <a-textarea
-          class="textarea-input"
+          class="chat-textarea-input"
           :placeholder="$t('conversation.input_placholder')"
           :model-value="input_text_value"
           allow-clear
@@ -171,8 +171,8 @@ const { width: input_area_width, height: input_area_height } = useEleSizeV2('inp
 });
 
 const textarea_size_config = {
-  minRows: 2,
-  maxRows: 4
+  minRows: 3,
+  maxRows: 6
 };
 
 const handleSubmit = () => {
@@ -343,8 +343,11 @@ defineExpose({
   flex-direction: column;
 
   /* box-shadow: 0 0 5px var(--color-text-4); */
-  border-radius: 10px;
-  padding: 10px;
+  border-radius: 12px;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-bottom: 16px;
+  padding-top: 25px;
 
   background-color: var(--color-bg-1);
   color: var(--color-text-1);
@@ -358,9 +361,12 @@ defineExpose({
   margin-bottom: 5px;
 }
 
-.textarea-input {
+.chat-textarea-input {
   border-radius: 5px;
 }
+.chat-textarea-input:focus {
+  outline: none;
+}
 
 .file-input-btn {
   display: none;
@@ -371,3 +377,20 @@ defineExpose({
   padding: 5px;
 }
 </style>
+
+<style>
+.chat-textarea-input.arco-textarea-wrapper {
+  border-color: var(--color-bg-1);
+}
+
+.chat-textarea-input.arco-textarea-wrapper .arco-textarea {
+  background-color: var(--color-bg-1);
+  padding: 0;
+}
+
+.chat-textarea-input.arco-textarea-wrapper:focus-within,
+.chat-textarea-input.arco-textarea-wrapper.arco-textarea-focus {
+  /* border: none; */
+  border-color: var(--color-bg-1);
+}
+</style>

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

@@ -1,12 +1,17 @@
 <template>
   <div class="dialog-input-actions">
     <div class="dialog-input-action-left">
-      <!-- <div>联网查询</div> -->
-      <a-tooltip :content="$t('conversation.file_upload_message')" position="top">
+      <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>
+      </a-tooltip> -->
     </div>
 
     <div class="dialog-input-action-right">
@@ -14,18 +19,28 @@
         <div v-if="enable_frequent_question" class="action-right-item-btn" @click="handleQuestionDefine">
           <img src="../../../assets/question-define.png" />
         </div>
-      </a-tooltip>
+      </a-tooltip> -->
 
-      <a-tooltip content="文件上传" position="top">
+      <div v-if="enable_frequent_question" class="action-right-item-btn" @click="handleQuestionDefine">
+        <img src="../../../assets/question-define.png" />
+      </div>
+
+      <!-- <a-tooltip content="文件上传" position="top">
         <div v-if="enable_file_upload" class="action-right-item-btn" @click="handleFileUpload">
           <img src="../../../assets/file-upload.png" />
         </div>
-      </a-tooltip>
+      </a-tooltip> -->
 
-      <a-tooltip content="语音识别" position="top">
+      <!-- <a-tooltip content="语音识别" position="top">
         <div v-if="enable_voice_recognition" class="action-right-item-btn" @click="handleVoiceRecognize">语音识别</div>
       </a-tooltip> -->
 
+      <a-tooltip :content="$t('conversation.file_upload_message')" position="top">
+        <div v-if="enable_file_upload" class="action-right-item-btn" @click="handleFileUpload">
+          <img src="../../../assets/file-upload.png" />
+        </div>
+      </a-tooltip>
+
       <a-tooltip :content="$t('conversation.input_message')" position="top">
         <div class="action-right-item-btn submit-input-btn" @click="handleSubmit">
           {{ $t('conversation.input_confirm') }}
@@ -36,6 +51,8 @@
 </template>
 
 <script setup>
+import { ref, computed } from 'vue';
+
 const props = defineProps({
   /**
    * 是否禁用操作
@@ -105,6 +122,23 @@ const props = defineProps({
 
 const emit = defineEmits(['fileUpload', 'questionDefine', 'voiceRecognize', 'submit']);
 
+// 联网搜索开关
+const default_switch = ref(true);
+const cur_switch = ref(true);
+const search_text_klass = computed(() => {
+  return {
+    'is-connnected': cur_switch.value,
+    'not-connnected': !cur_switch.value
+  };
+});
+const handleSwitchChange = (val) => {
+  if (cur_switch.value) {
+    cur_switch.value = false;
+  } else {
+    cur_switch.value = true;
+  }
+};
+
 const handleQuestionDefine = () => {
   emit('questionDefine');
 };
@@ -144,9 +178,28 @@ const handleSubmit = () => {
   cursor: pointer;
 }
 
+.connect-internet {
+  /* color: #707379; */
+  color: var(--color-text-3);
+}
+.search-from-network {
+  display: inline-block;
+  margin-left: 5px;
+}
+.is-connnected {
+  color: var(--color-text-1);
+}
+.not-connnected {
+  color: var(--color-text-3);
+}
+
 .action-right-item-btn {
-  margin-left: 10px;
+  margin-left: 17px;
   cursor: pointer;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .action-left-item-btn img {
@@ -159,8 +212,24 @@ const handleSubmit = () => {
 .submit-input-btn {
   background-color: rgb(var(--primary-6));
   color: #fff;
-  padding: 5px 15px;
-  border-radius: 15px;
+  /* padding: 5px 15px; */
+  /* border-radius: 15px; */
   font-size: 14px;
+
+  width: 73px;
+  height: 31px;
+  border-radius: 40px;
+  text-align: center;
+  line-height: 31px;
+}
+</style>
+
+<style>
+.arco-switch.arco-switch-type-circle.arco-switch-checked.chat-connect-network-switch {
+  background-color: var(--color-fill-2);
+}
+
+.arco-switch.arco-switch-type-circle.arco-switch-checked.chat-connect-network-switch .arco-switch-handle {
+  background-color: rgb(var(--primary-6));
 }
 </style>