瀏覽代碼

feat: 调整会话历史记录删除按钮的样式

zhupei@smartai.com 1 年之前
父節點
當前提交
63a1c91c3b

+ 5 - 0
public/i18n/lang-en.json

@@ -218,6 +218,11 @@
     "btn_cancel": "Cancel",
     "btn_stop": "Stop",
 
+    "are_you_sure": "Are you sure to delete?",
+    "btn_yes": "Yes",
+    "btn_no": "No",
+    "del_success": "Success",
+
     "copy": "Copy"
   }
 }

+ 5 - 0
public/i18n/lang-zh.json

@@ -219,6 +219,11 @@
     "btn_cancel": "取消",
     "btn_stop": "停止生成",
 
+    "are_you_sure": "确定删除吗?",
+    "btn_yes": "是",
+    "btn_no": "否",
+    "del_success": "删除成功",
+
     "copy": "复制"
   }
 }

+ 40 - 18
src/modules/conversation-history/BtnHistoryItemDelete.vue

@@ -1,6 +1,6 @@
 <template>
-  <span @click="handleClick">
-    <icon-delete color="danger" />
+  <span @click="handleClick" class="btn-delete">
+    <icon-delete />
 
     <!-- <template v-if="api_status === 1">
       <icon-delete color="danger" />
@@ -16,6 +16,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { Modal } from '@arco-design/web-vue';
 import { Message } from '@arco-design/web-vue';
 
@@ -27,33 +28,31 @@ const props = defineProps({
 
 const emits = defineEmits(['deleteSuccess']);
 
+const i18n = useI18n();
+
 // api请求的状态
 const api_status = ref(1); // api状态 1 请求未启动 2 请求进心中 3 请求已成功 4 请求失败(网络成功,但是code不等于200) 5 请求出错
 const api_message = ref(''); // 请求消息 与 api_status 对应的 message 消息内容
 
 const handleClick = () => {
+  const msg = i18n.t('conversation.are_you_sure');
+  const btn_yes = i18n.t('conversation.btn_yes');
+  const btn_no = i18n.t('conversation.btn_no');
+
   Modal.info({
-    title: '您确定要删除吗?',
-    okText: '确定',
-    cancelText: '取消',
+    title: msg,
+    okText: btn_yes,
+    cancelText: btn_no,
     hideCancel: false,
 
+    'modal-class': 'history-chat-remove-modal',
+
     // content: '删除后无法恢复'
     onOk(e) {
       // console.log('确定');
       // handleConfirmDelete();
     },
     async onBeforeOk() {
-      // console.log('ok之前1');
-
-      // await (() => {
-      //   return new Promise((resolve) => {
-      //     setTimeout(resolve, 1000);
-      //   });
-      // })();
-
-      // console.log('ok之前2');
-
       try {
         const result = await handleConfirmDeleteV2();
 
@@ -80,8 +79,10 @@ const handleConfirmDeleteV2 = () => {
     apiConversationHistoryDelete(props.target_id)
       .then((res) => {
         if (res.code / 1 === 200) {
+          const msg = i18n.t('conversation.del_success');
+
           // 成功
-          Message.success('删除成功');
+          Message.success(msg);
 
           emits('deleteSuccess');
 
@@ -113,7 +114,10 @@ const handleConfirmDelete = () => {
         api_status.value = 3;
         api_message.value = 'success';
 
-        Message.success('删除成功');
+        // Message.success('删除成功');
+        const msg = i18n.t('conversation.del_success');
+        // 成功
+        Message.success(msg);
 
         emits('deleteSuccess');
       } else {
@@ -131,4 +135,22 @@ const handleConfirmDelete = () => {
 };
 </script>
 
-<style lang="css" scoped></style>
+<style lang="css" scoped>
+.btn-delete {
+  color: red;
+}
+</style>
+
+<style>
+.arco-modal.history-chat-remove-modal.arco-modal-simple {
+}
+.arco-modal.history-chat-remove-modal.arco-modal-simple .arco-modal-header .arco-modal-title {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.arco-modal.history-chat-remove-modal.arco-modal-simple .arco-modal-footer {
+  text-align: right;
+  margin-top: 0;
+}
+</style>

+ 2 - 2
src/modules/conversation-history/HistoryTypeDropdown.vue

@@ -1,14 +1,14 @@
 <template>
   <a-dropdown trigger="hover" :defaultValue="btn_label_str">
-    <a-button v-if="api_status === 1" class="history-type-btn" type="text">
+    <a-button v-if="api_status === 1 || api_status === 3" class="history-type-btn" type="text">
       <img :src="btn_label_icon" class="agent-icon-img" />
 
       <span class="label-text">{{ btn_label_str }}</span>
 
       <span class="nav-item-icon arrow-down"><img src="../../assets/arrow-down.png" /></span>
     </a-button>
+
     <a-button v-if="api_status === 2" class="history-type-btn" type="text"><a-spin :size="16" /></a-button>
-    <a-button v-if="api_status === 3" class="history-type-btn" type="text">{{ btn_label_str }}</a-button>
 
     <template #content>
       <a-doption

+ 1 - 1
src/views/ConversationHistory.vue

@@ -6,7 +6,7 @@
       <ConversationHistoryContainer @historyActive="handleHistoryActive" />
     </ContentContainer>
 
-    <a-back-top :target-container="'#fjkdsdajfklgjsklfjskdlf'" :style="{ position: 'absolute' }" />
+    <!-- <a-back-top :target-container="'#fjkdsdajfklgjsklfjskdlf'" :style="{ position: 'absolute' }" /> -->
   </LayoutExperience>
 </template>