refactor(sidepanel): 重构历史记录组件并优化数据加载

- 移除 template 中的多余代码和注释
- 优化 script 中的数据加载逻辑，使用 async/await
- 添加搜索功能，根据关键词过滤历史记录
- 修复删除对话后的数据更新问题
- 优化消息存储逻辑，添加标题和会话 ID 的更新

src/api/model.js

@@ -18,7 +18,7 @@ export function getConversation(data) {
 
 export function delConversation(id) {
     return request({
-        url: '`/aigc/conversation',
+        url: '/aigc/conversation',
         method: 'delete',
         data: { ids: [id] }
     })

src/entrypoints/sidepanel/component/historyComponent.vue

@@ -1,51 +1,66 @@
-<script setup lang="ts">
-import { ref, inject } from 'vue'
-import { Search, Delete, Paperclip } from '@element-plus/icons-vue'
+<script setup lang="js">
+import { ref } from 'vue'
+import { Search, Delete } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { getConversation,delConversation } from '@/api/model.js'
 import { storeToRefs } from 'pinia';
 import { useMsgStore } from '@/store/modules/msg.ts'
-import { getChatList,deleteChat } from '@/api/index.js'
 import { useUserStore } from '@/store/modules/user';
 
 
 const msgStore = useMsgStore()
 const userStore = useUserStore()
-const { conversationId} = storeToRefs(useMsgStore())
 const drawer = ref(false)
 
 
 const count = ref(0)
 const input = ref('')
 const loading = ref(false)
-const dataList = ref<any[]>([])
+const dataList = ref([])
 // 获取父组件提供的 Hook 实例
 const emit = defineEmits(['currentData'])
-const { msgUuid, messages ,page} = storeToRefs(useMsgStore())
-
-watch(drawer, (newVal) => {
-  if (newVal) {
-    loading.value = true
-    getConversation({
+const { conversationId} = storeToRefs(useMsgStore())
+const fetchList = async () => {
+ try {
+  loading.value = true
+  const res =   await getConversation({
       page: 1,
       size: 100,
       sort: ['createTime,desc'],
       userId:userStore.userInfo.id
-    }).then(res => {
-      dataList.value = res.data.list
-    }).finally(res => loading.value = false)
+    })
+  dataList.value = res.data.list
+ } finally{
+  loading.value = false
+ }
+}
+onMounted(async () => {
+  await fetchList()
+  conversationId.value = dataList.value[0].id
+})
+watch(drawer, (newVal) => {
+  if (newVal) {
+    fetchList()
   }
 })
-function handleDeleteStore(e: any, item: any,name:string) {
-  e.stopPropagation()
-  if (dataList.value.length < 2) {
-    ElMessage({
-      message: '不可删除',
-      grouping: true,
-      showClose: true
+const search = (keyword) => {
+  const loop = (data) => {
+    const result = []
+    data.forEach((item) => {
+      if (item.title?.toLowerCase().includes(keyword) || item.code?.toLowerCase().includes(keyword)) {
+        result.push({...item})
+      }
     })
-    return
+    return result
   }
+  return loop(dataList.value)
+}
+const searchList = computed(() => {
+  if (!input.value) return dataList.value
+  return search(input.value.toLowerCase())
+})
+function handleDeleteStore(e, item,name) {
+  e.stopPropagation()
   ElMessageBox.confirm(
     '此操作无法撤销。',
     `要删【${name.substring(0,20)}】对话吗？`,
@@ -57,24 +72,11 @@ function handleDeleteStore(e: any, item: any,name:string) {
       center: true
     }
   ).then(() => {
-    loading.value = true
-    delConversation([item]).then((res: any) => {
-      loading.value = true
-      if (item === msgUuid.value) {
-        messages.value = []
-        page.value = 1
-      }
-      getConversation({
-        page: 1,
-        size: 100,
-        sort: ['createTime,desc']
-      }).then(res => {
-        dataList.value = res.data.list
-      }).finally(res => loading.value = false)
-    }).catch(() => {
+    delConversation(item).then(() => {
+      fetchList()
+      msgStore.setTitle(null)
+      msgStore.setConvId(null)
     })
-
-
   })
 }
 defineExpose({
@@ -84,37 +86,34 @@ defineExpose({
 
 <template>
   <el-drawer style="height: 70%" v-model="drawer" direction="btt" :show-close="true" :close-on-click-modal="false"
-    :destroy-on-close="true" :close-on-press-escape="false" class="custom_drawer">
-
+    :destroy-on-close="true"  class="custom_drawer">
     <template #header>
       <div class="his_flex"><span class="his_title">历史聊天</span><span class="his_count">({{ dataList.length }})</span>
       </div>
     </template>
     <div style="height: 100%;overflow: hidden;" v-loading="loading">
       <div class="his_delete">
-        <!-- <el-input style="margin-right: 12px" v-model="input" placeholder="搜索" clearable :prefix-icon="Search"
-          :disabled="true" /> -->
-        <!-- <el-tooltip effect="dark" content="删除全部" placement="top">
-          <el-button :icon="Delete" circle @click="handleDeleteDB" />
-        </el-tooltip> -->
+         <el-input style="margin-right: 12px" v-model="input" placeholder="搜索" clearable :prefix-icon="Search"
+           /> 
+     
       </div>
       <div class="his_content">
-        1212
-       <template v-for="item in dataList" :key="item.conversationId">
-         <div :class="`his_list ${msgUuid === item.conversationId ? 'his_list_change' : '' }`"
-           @click="emit('currentData', item.conversationId)">
+       <template v-for="item in searchList" :key="item.id">
+         <div :class="`his_list ${conversationId === item.id ? 'his_list_change' : '' }`"
+           @click="() => { 
+            msgStore.setTitle(item.title)
+            msgStore.setConvId(item.id)
+           }">
            <p class="ellipsis" style="color:#000000;font-weight: 900;">{{ item?.title ?? '&#45;&#45;' }}</p>
            <p class="his_list_op">
              <span style="color: #000">{{ item?.createTime }}</span>
              <el-tooltip effect="dark" content="删除" placement="top">
-               <el-button :disabled="msgUuid === item.conversationId" :icon="Delete" link
-                 @click="(e: any) => handleDeleteStore(e, item.conversationId, item?.content)" />
+               <el-button  :icon="Delete" link
+                 @click="(e) => handleDeleteStore(e, item.id, item?.title)" />
              </el-tooltip>
            </p>
          </div>
        </template>
-
-
       </div>
     </div>
   </el-drawer>

src/store/modules/msg.ts

@@ -13,6 +13,7 @@ export const useMsgStore = defineStore('msg', {
     modelId: '',
     modelName: '',
     modelProvider: '',
+    title:'',
     loading: false,
     conversationId:'',
     messages: <any[]>[],
@@ -71,8 +72,15 @@ export const useMsgStore = defineStore('msg', {
       this.modelName = name
       this.modelProvider = provider
     },
-    setLoading(l:boolean) {
-      this.loading = l
-    }
+    setLoading(val:boolean) {
+      this.loading = val
+    },
+    setConvId(id:string) {
+      this.conversationId = id
+    },
+    setTitle(val: string) {
+      this.title = val
+    },
+   
   }
 })