feat: encapsulated functional components

src/App.vue

@@ -87,16 +87,9 @@ onMounted(async () => {
           正在与 <span class="mark">{{ currentRole?.name }}</span> 对话
         </div>
 
-        <!-- TODO: 没有必要全部拆分，待功能完善将不必要的拆分直接挪到这边或者移步到一个组件即可 -->
-        <Increase />
+        <Function />
 
-        <ReAnswer />
-
-        <Delete />
-
-        <History />
-
-        <Settings />
+        <!-- <Settings />  -->
       </div>
 
       <Input />

src/assets/css/global.scss

@@ -61,10 +61,6 @@ body {
   }
 }
 
-.arco-icon {
-  cursor: pointer;
-}
-
 .mark {
   color: rgb(var(--arcoblue-6));
   background-color: transparent;

src/components/Function/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {
+  IconPlusCircle,
+  IconRefresh,
+  IconDelete,
+  IconHistory
+} from '@arco-design/web-vue/es/icon'
+import { useRecordStore } from '@/stores'
+import { getArrayLength } from '@/utils'
+
+const recordStore = useRecordStore()
+const { createNewRecord, getAiMessage, deleteRecord } = recordStore
+const { currentRecord, isThinking } = storeToRefs(recordStore)
+
+const functions = computed(() => [
+  {
+    content: '新建对话',
+    icon: IconPlusCircle,
+    disabled: !!currentRecord,
+    handleClick: createNewRecord
+  },
+  {
+    content: '重新回答',
+    icon: IconRefresh,
+    disabled:
+      isThinking.value || !(getArrayLength(currentRecord.value?.data) > 2),
+    handleClick: () => getAiMessage()
+  },
+  {
+    content: '清空对话',
+    icon: IconDelete,
+    disabled: !!currentRecord,
+    handleClick: () => deleteRecord()
+  },
+  {
+    content: '历史记录',
+    icon: IconHistory,
+    disabled: false,
+    handleClick: () => {
+      // empty
+    }
+  }
+])
+</script>
+
+<template>
+  <div class="function flex gap-2">
+    <a-tooltip
+      v-for="(item, index) in functions"
+      :content="item.content"
+      :key="index"
+    >
+      <a-button type="text" :disabled="item.disabled" @click="item.handleClick">
+        <template #icon>
+          <component
+            :is="item.icon"
+            class="text-5.5 text-[var(--color-text-2)]"
+          />
+        </template>
+      </a-button>
+    </a-tooltip>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.function {
+  .arco-btn.arco-btn-disabled {
+    .arco-icon {
+      color: var(--color-text-4);
+    }
+  }
+}
+</style>

src/components/Settings/index.vue

@@ -5,7 +5,11 @@ import { IconSettings } from '@arco-design/web-vue/es/icon'
 <template>
   <a-popover trigger="click" position="tr" content-class="p-4 leading-none">
     <a-tooltip content="设置" position="tr">
-      <IconSettings />
+      <a-button type="text">
+        <template #icon>
+          <IconSettings />
+        </template>
+      </a-button>
     </a-tooltip>
 
     <template #content>

src/stores/record.ts

@@ -17,14 +17,15 @@ export const useRecordStore = defineStore('recordStore', () => {
   const getAiMessage = async (value?: string) => {
     isThinking.value = true
 
-    if (!currentRecord.value) {
+    // TODO: 新建的记录的 sql 参数包含角色，后期考虑如何加
+    if (!currentRecord.value && value) {
+      const { currentRole } = useRoleStore()
+
       const newRecord: TablePayload = {
         title: value,
         data: []
       }
 
-      const { currentRole } = useRoleStore()
-
       newRecord.data?.push(
         {
           role: 'system',
@@ -37,8 +38,13 @@ export const useRecordStore = defineStore('recordStore', () => {
       )
 
       currentRecord.value = newRecord
+
+      addRecord()
     } else if (!value) {
-      value = currentRecord.value.data?.at(-1)?.content
+      const newRecord = { ...currentRecord.value }
+      newRecord.data?.pop()
+
+      currentRecord.value = newRecord
     }
 
     const result = await getOpenAIResultApi()
@@ -47,7 +53,9 @@ export const useRecordStore = defineStore('recordStore', () => {
 
     if (!result) return
 
-    currentRecord.value.data?.push(result?.message)
+    currentRecord.value?.data?.push(result?.message)
+
+    updateRecord()
   }
 
   const getRecord = async () => {
@@ -65,21 +73,24 @@ export const useRecordStore = defineStore('recordStore', () => {
     }
   }
 
-  const addRecord = async (payload: TablePayload) => {
-    await insertSQL('history', payload)
+  const addRecord = async () => {
+    await insertSQL('history', currentRecord.value!)
 
     getRecord()
   }
 
-  const updateRecord = async (payload: TablePayload) => {
-    await updateSQL('history', payload)
+  const updateRecord = async () => {
+    await updateSQL('history', currentRecord.value!)
 
     getRecord()
   }
 
-  // TODO：删除这块有 bug，在新对话时考虑禁用或者其它方法
-  const deleteRecord = async (id?: number) => {
-    await deleteSQL('history', id)
+  const deleteRecord = async (deleteAll = false) => {
+    if (deleteAll) {
+      await deleteSQL('history')
+    } else {
+      await deleteSQL('history', currentRecord.value?.id)
+    }
 
     getRecord()
   }

src/utils/shared.ts

@@ -15,3 +15,9 @@ export const isString = (value: any) => typeof value === 'string'
  * @param value 数据
  */
 export const isObject = (value: any) => typeof value === 'object'
+
+/**
+ * 获取数组长度
+ * @param value 数据
+ */
+export const getArrayLength = (value?: any[]) => value?.length ?? 0