perf: optimized the style of the history list

src/components/Function/components/HistoryDrawer.vue

@@ -1,56 +1,74 @@
 <script lang="ts" setup>
 import { useSessionStore } from '@/stores'
 import { IconDelete } from '@arco-design/web-vue/es/icon'
+import type { SessionPayload } from '@/types'
 
-defineProps<{ visible: boolean; setVisible: () => void }>()
+const props = defineProps<{ visible: boolean; setVisible: () => void }>()
 
 const sessionStore = useSessionStore()
 const { sessionList, currentSession } = storeToRefs(sessionStore)
 const { switchSession, getSessionList, deleteSession } = sessionStore
+
+const handleClick = (item: SessionPayload) => {
+  switchSession(item)
+
+  props.setVisible()
+}
 </script>
 
 <template>
   <a-drawer
     :visible="visible"
     placement="left"
     :footer="false"
-    :closable="false"
+    :width="300"
+    class="history-drawer"
     @cancel="setVisible"
     @before-open="getSessionList"
     unmountOnClose
   >
+    <!-- 加入全部清除的按钮 -->
     <template #title> 会话历史 </template>
-    <div class="flex flex-col gap-3">
-      <a-card
-        hoverable
+    <ul class="flex flex-col gap-2">
+      <li
         v-for="item in sessionList"
-        :body-style="{
-          padding: '5px'
+        class="group flex cursor-pointer items-center justify-between rounded-lg p-2 transition hover:bg-[var(--color-fill-2)]"
+        :class="{
+          'bg-[rgb(var(--blue-6))]! text-white': item.id === currentSession?.id
         }"
         :key="item.id"
-        :class="{ 'bg-red-200': item.id === currentSession?.id }"
-        class="relative"
       >
-        <div class="flex items-center justify-between gap-4">
-          <Avatar :value="item.name" class="!w-10" />
-          <div class="flex flex-1 flex-col justify-between">
-            <span>{{ item.title }}</span>
-            <span
-              >与{{ item.name }}
-              <a-link @click="switchSession(item)" class="text-sm"
-                >继续对话</a-link
-              >
-            </span>
+        <!-- TODO: 优化此处宽度的计算，这样写有点鸡肋 -->
+        <div class="flex w-[calc(100%-16px)] items-center gap-2">
+          <Avatar :value="item.name" class="w-10!" />
+          <div
+            class="flex w-[calc(100%-56px)] flex-col gap-3 leading-none"
+            @click="handleClick(item)"
+          >
+            <div class="truncate">
+              {{ item.title }}
+            </div>
+
+            <span> 与 {{ item.name }} 的聊天 </span>
           </div>
         </div>
-
+        <!-- TODO:删除后刷新列表 -->
         <IconDelete
+          class="text-5 opacity-0 group-hover:opacity-100"
           @click="deleteSession(item)"
-          class="hover:bg-red-4 absolute top-1 right-1 hover:cursor-pointer"
         />
-      </a-card>
-    </div>
+      </li>
+    </ul>
   </a-drawer>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.history-drawer {
+  @apply overflow-hidden rounded-xl;
+  .arco-drawer {
+    .arco-drawer-body {
+      padding: 0.5rem;
+    }
+  }
+}
+</style>

src/stores/session.ts

@@ -1,4 +1,4 @@
-import { executeSQL, selectSQL } from '@/sqls'
+import { deleteSQL, executeSQL, selectSQL } from '@/sqls'
 import type { SessionPayload, SessionData, RecordData } from '@/types'
 import { useRoleStore } from './role'
 import { useSettingsStore } from './settings'