fix(conversation): 完善对话历史记录中英文切换异常的问题

public/i18n/lang-en.json

@@ -59,6 +59,13 @@
   "conversation": {
     "chat_new": "New Session",
     "chat_history": "History",
-    "chat_smart": "SmartAI+"
+    "chat_smart": "SmartAI+",
+
+    "search_history": "Search history",
+    "history_today": "Today",
+    "history_month": "This month",
+    "history_earlier": "Earlier",
+    "history_loadmore": "Load more",
+    "history_empty": "Empty"
   }
 }

public/i18n/lang-zh.json

@@ -59,6 +59,13 @@
   "conversation": {
     "chat_new": "开启新会话",
     "chat_history": "历史会话",
-    "chat_smart": "SmartAI+"
+    "chat_smart": "SmartAI+",
+
+    "search_history": "搜索历史会话",
+    "history_today": "今天",
+    "history_month": "本月",
+    "history_earlier": "更早以前",
+    "history_loadmore": "加载更多",
+    "history_empty": "暂无数据"
   }
 }

src/modules/conversation-history/HistoryItem.vue

@@ -1,6 +1,10 @@
 <template>
   <div v-if="is_label_item" :class="item_klass">
-    {{ history.content }}
+    <template v-if="history.client_field_timestamp_type === 'today'">{{ $t('conversation.history_today') }}</template>
+    <template v-if="history.client_field_timestamp_type === 'month'">{{ $t('conversation.history_month') }}</template>
+    <template v-if="history.client_field_timestamp_type === 'earlier'">{{
+      $t('conversation.history_earlier')
+    }}</template>
   </div>
 
   <div v-if="is_data_item" :class="item_klass" @click="handleClick">
@@ -17,6 +21,7 @@
 <script setup>
 import { computed } from 'vue';
 import { formatTimestamp2Hours, formatTimestamp2Weekend, formatTimestamp2Date } from '../../utils/datetime';
+import { useLocaleStore } from '../../base/store/use-locale';
 
 const props = defineProps({
   history: Object,
@@ -47,6 +52,8 @@ const emit = defineEmits('active');
  * ------------------------------------------------------
  */
 
+const locale = useLocaleStore();
+
 const is_label_item = computed(() => {
   return props.history.client_field_content_type === 'label';
 });
@@ -81,16 +88,18 @@ const time_display = computed(() => {
   const p_tp = props.history.client_field_timestamp_type; // 列表的类别
   const tm_stp = props.history.create_time; // 数据项目的创建时间戳
 
+  const cur_locale_value = locale.value;
+
   if (p_tp === 'today') {
-    return formatTimestamp2Hours(tm_stp);
+    return formatTimestamp2Hours(tm_stp, cur_locale_value);
   }
 
   if (p_tp === 'month') {
-    return formatTimestamp2Weekend(tm_stp);
+    return formatTimestamp2Weekend(tm_stp, cur_locale_value);
   }
 
   if (p_tp === 'earlier') {
-    return formatTimestamp2Date(tm_stp);
+    return formatTimestamp2Date(tm_stp, cur_locale_value);
   }
 
   return '';

src/modules/conversation-history/HistoryLoadMore.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="item_klass" @click="handleClick">
-    <div class="history-item-icon">加载更多</div>
+    <div class="history-item-icon">{{ $t('conversation.history_loadmore') }}</div>
   </div>
 </template>
 

src/modules/conversation-history/HistoryName.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="conversation-history-title">
-    <div>历史会话</div>
+    <div>{{ $t('conversation.chat_history') }}</div>
   </div>
 </template>
 

src/modules/conversation-history/HistorySearchInput.vue

@@ -9,7 +9,7 @@
         <input
           type="text"
           class="search-input"
-          placeholder="搜索历史会话"
+          :placeholder="$t('conversation.search_history')"
           v-model="search_text"
           @input="handleInputInput"
           @change="handleInputChange"
@@ -67,6 +67,8 @@ const handleKeyUp = (e) => {
  */
 const handleInputClear = () => {
   search_text.value = '';
+
+  emit('search', search_text.value);
 };
 </script>
 

src/utils/datetime.js

@@ -1,10 +1,4 @@
 import dayjs from '../3rd-libs/dayjs';
-/**
- * 请注意：此处的引用不符合规范中关于目录层级的定义
- * 若有违反目录层级引用规定，请做好说明，并添加标记 code_flag:violate_rules
- * code_flag:violate_rules
- */
-import { localST_Locale } from '../base/storage';
 
 /**
  * 时间戳的时长定义
@@ -31,20 +25,34 @@ export const getTodayZeroTimestamp = () => {
  * 例如：19:43、12:02
  * 场景1：会话历史记录当前的记录数据以此种形式进行展示
  * @param {number} timestamp - 时间戳
+ * @param {string} [locale] - 可选参数 语言选项 zh/en
  */
-export const formatTimestamp2Hours = (timestamp) => {
-  return dayjs(timestamp).format('HH:mm');
+export const formatTimestamp2Hours = (timestamp, locale) => {
+  if (!locale) {
+    return dayjs(timestamp).format('HH:mm');
+  }
+
+  if (locale === 'zh') {
+    return dayjs(timestamp).locale('zh-cn').format('HH:mm');
+  }
+
+  if (locale === 'en') {
+    return dayjs(timestamp).format('HH:mm');
+  }
 };
 
 /**
  * 将一个时间戳转换为星期形式
  * 场景1：会话历史记录，本月的记录以此种形式进行展示
  * @param {number} timestamp - 时间戳
+ * @param {string} [locale] - 可选参数 语言选项 zh/en
  */
-export const formatTimestamp2Weekend = (timestamp) => {
-  const cur_locale = localST_Locale.getItem(); // zh/en
+export const formatTimestamp2Weekend = (timestamp, locale) => {
+  if (!locale) {
+    return dayjs(timestamp).format('dddd');
+  }
 
-  if (cur_locale === 'zh') {
+  if (locale === 'zh') {
     return dayjs(timestamp).locale('zh-cn').format('dddd');
   } else {
     return dayjs(timestamp).format('dddd');
@@ -56,7 +64,16 @@ export const formatTimestamp2Weekend = (timestamp) => {
  * 例如：12-11、 10-08
  * 场景1：会话历史记录更早的数据以此种形式进行展示
  * @param {number} timestamp - 时间戳
+ * @param {string} [locale] - 可选参数 语言选项 zh/en
  */
-export const formatTimestamp2Date = (timestamp) => {
-  return dayjs(timestamp).format('MM-DD');
+export const formatTimestamp2Date = (timestamp, locale) => {
+  if (!locale) {
+    return dayjs(timestamp).format('MM-DD');
+  }
+
+  if (locale === 'zh') {
+    return dayjs(timestamp).locale('zh-cn').format('MM-DD');
+  } else {
+    return dayjs(timestamp).format('MM-DD');
+  }
 };

src/views/conversation/ConversationHistoryContainer.vue

@@ -16,15 +16,19 @@
         <a-spin :size="32" />
       </div>
     </template>
-    <!-- <template v-if="api_status === 3">
-      <HistoryList
+    <template v-if="api_status === 3 && list_history.length === 0">
+      <div class="infomations-container">
+        <a-empty> {{ $t('conversation.history_empty') }} </a-empty>
+      </div>
+
+      <!-- <HistoryList
         v-if="list_history.length !== 0"
         :list="list_history"
         :can_loadmore="can_loadmore"
         @loadmore="handleListLoadMore"
         @active="handleListItemActive"
-      />
-    </template> -->
+      /> -->
+    </template>
     <template v-if="api_status === 4">
       <div class="infomations-container">
         <a-result status="warning" :title="api_message"> </a-result>
@@ -58,8 +62,8 @@ const search_text = ref(''); // 搜索字符串
 const can_loadmore = ref(true); // 是否可以加载更多
 
 // api请求的状态
-const api_status = ref(1); // api状态
-const api_message = ref(''); // 请求消息
+const api_status = ref(1); // api状态 1 请求未启动 2 请求进心中 3 请求已成功 4 请求失败（网络成功，但是code不等于200） 5 请求出错
+const api_message = ref(''); // 请求消息 与 api_status 对应的 message 消息内容
 
 // 历史记录列表数据
 const list_history = ref([]); // 历史记录的列表数据
@@ -68,15 +72,16 @@ const count_today = ref(0); // 记录今天的数据量
 const count_month = ref(0); // 记录本月的数据量
 const count_earlier = ref(0); // 记录更早的数据量
 
-// 今天的数据
-// 这个月的数据
-// 这个月以前的数据
 const today_zero = getTodayZeroTimestamp(); // 今天零点
 const yesterday_zero = today_zero - ONE_DAY; // 昨天零点
-const last_month_zero = yesterday_zero - ONE_MONTH; // 上个月零点
+const last_month_zero = yesterday_zero - ONE_MONTH; // 上个月(30天之前的)零点
 
 /**
  * 将数据进行分类
+ * 依据时间戳，将列表数据分成三中类型：今天、本月、更早
+ * 今天：从今天零点开始到现在
+ * 本月：从今天零点之前，往前推30天
+ * 更早：在30天之前的数据
  * @param res_list
  */
 function dropListByType(res_list) {
@@ -90,8 +95,9 @@ function dropListByType(res_list) {
         // 今天的数据
         list_history.value.push({
           client_field_content_type: 'label',
-          client_field_timestamp_type: 'today',
-          content: '今天'
+          client_field_timestamp_type: 'today'
+          // content: '今天'
+          // content: t('conversation.history_today')
         });
       }
 
@@ -108,8 +114,9 @@ function dropListByType(res_list) {
       if (count_month.value === 0) {
         list_history.value.push({
           client_field_content_type: 'label',
-          client_field_timestamp_type: 'month',
-          content: '本月'
+          client_field_timestamp_type: 'month'
+          // content: '本月'
+          // content: t('conversation.history_month')
         });
       }
 
@@ -123,8 +130,9 @@ function dropListByType(res_list) {
       if (count_earlier.value === 0) {
         list_history.value.push({
           client_field_content_type: 'label',
-          client_field_timestamp_type: 'earlier',
-          content: '更早以前'
+          client_field_timestamp_type: 'earlier'
+          // content: '更早以前'
+          // content: t('conversation.history_earlier')
         });
       }
 
@@ -174,16 +182,18 @@ const handleApiRequest = () => {
           dropListByType(res_list);
         }
 
+        // api请求成功
         api_status.value = 3;
         api_message.value = 'success';
       } else {
-        // 失败
+        // api请求成功，但是业务失败
         api_status.value = 4;
         api_message.value = res.msg;
       }
     })
     .catch((err) => {
       console.log(err);
+      // api请求出错
       api_status.value = 5;
       api_message.value = err.msg;
     });
@@ -215,8 +225,6 @@ const handleListItemActive = (history_id) => {};
  * @param value
  */
 const handleHistorySearch = (value) => {
-  console.log(value, '开始搜索');
-
   search_text.value = value; // 搜索字符串
   page_no.value = 1; // 页码归位