feat: 清空聊天历史

src/locales/zh-CN.ts

@@ -47,7 +47,7 @@ export default {
     deleteMessage: '删除消息',
     deleteMessageConfirm: '是否删除此消息?',
     deleteHistoryConfirm: '确定删除此记录?',
-    clearHistoryConfirm: '确定清空聊天记录?',
+    clearHistoryConfirm: '确定清空记录?',
     preview: '预览',
     showRawText: '显示原文',
   },

src/store/modules/chat/index.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { getLocalState, setLocalState } from './helper'
+import { defaultState, getLocalState, setLocalState } from './helper'
 import { router } from '@/router'
 
 export const useChatStore = defineStore('chat-store', {
@@ -182,6 +182,11 @@ export const useChatStore = defineStore('chat-store', {
       }
     },
 
+    clearHistory() {
+      this.$state = { ...defaultState() }
+      this.recordState()
+    },
+
     async reloadRoute(uuid?: number) {
       this.recordState()
       await router.push({ name: 'Chat', params: { uuid } })

src/views/chat/layout/sider/index.vue

@@ -1,16 +1,19 @@
 <script setup lang='ts'>
 import type { CSSProperties } from 'vue'
 import { computed, ref, watch } from 'vue'
-import { NButton, NLayoutSider } from 'naive-ui'
+import { NButton, NLayoutSider, useDialog } from 'naive-ui'
 import List from './List.vue'
 import Footer from './Footer.vue'
 import { useAppStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { PromptStore } from '@/components/common'
+import { PromptStore, SvgIcon } from '@/components/common'
+import { t } from '@/locales'
 
 const appStore = useAppStore()
 const chatStore = useChatStore()
 
+const dialog = useDialog()
+
 const { isMobile } = useBasicLayout()
 const show = ref(false)
 
@@ -26,6 +29,20 @@ function handleUpdateCollapsed() {
   appStore.setSiderCollapsed(!collapsed.value)
 }
 
+function handleClearAll() {
+  dialog.warning({
+    title: t('chat.deleteMessage'),
+    content: t('chat.clearHistoryConfirm'),
+    positiveText: t('common.yes'),
+    negativeText: t('common.no'),
+    onPositiveClick: () => {
+      chatStore.clearHistory()
+      if (isMobile.value)
+        appStore.setSiderCollapsed(true)
+    },
+  })
+}
+
 const getMobileClass = computed<CSSProperties>(() => {
   if (isMobile.value) {
     return {
@@ -79,9 +96,14 @@ watch(
         <div class="flex-1 min-h-0 pb-4 overflow-hidden">
           <List />
         </div>
-        <div class="p-4">
+        <div class="flex items-center p-4 space-x-4">
-          <NButton block @click="show = true">
+          <div class="flex-1">
-            {{ $t('store.siderButton') }}
+            <NButton block @click="show = true">
+              {{ $t('store.siderButton') }}
+            </NButton>
+          </div>
+          <NButton @click="handleClearAll">
+            <SvgIcon icon="ri:close-circle-line" />
           </NButton>
         </div>
       </main>