feat: code to implement some of the functions

Author: ayangweb

src/App.vue

@@ -6,6 +6,7 @@ import {
   useThemeStore,
   useUuidStore,
   useRecordStore,
+  useRoleStore,
   useFixedStore
 } from '@/stores'
 
@@ -14,6 +15,7 @@ initSQL()
 const { themeClass } = storeToRefs(useThemeStore())
 const { uuid } = storeToRefs(useUuidStore())
 const { recordList } = storeToRefs(useRecordStore())
+const { currentRole } = storeToRefs(useRoleStore())
 const { isFix } = storeToRefs(useFixedStore())
 
 const windowFocused = ref(true)
@@ -54,14 +56,23 @@ onMounted(async () => {
     </ul>
 
     <div class="flex cursor-default flex-col gap-2 pt-2">
-      <div class="text-5 flex w-full justify-end gap-4">
-        <Refresh />
+      <div class="flex justify-between">
+        <div class="flex-1 text-right">
+          正在与 <span class="mark">{{ currentRole?.name }}</span> 对话
+        </div>
 
-        <Delete />
+        <!-- TODO: 没有必要全部拆分，后期功能完善将不必要的拆分直接挪到这边 -->
+        <div class="text-5 flex flex-1 justify-end gap-4">
+          <Increase />
 
-        <History />
+          <ReAnswer />
 
-        <Settings />
+          <Delete />
+
+          <History />
+
+          <Settings />
+        </div>
       </div>
 
       <Input />

src/assets/css/global.scss

@@ -15,27 +15,27 @@ body {
 }
 
 .bordered {
-  border: 1px solid var(--color-neutral-3);
+  border: 1px solid var(--color-border);
 }
 
 .bordered-transparent {
   border: 1px solid transparent;
 }
 
 .bordered-top {
-  border-top: 1px solid var(--color-neutral-3);
+  border-top: 1px solid var(--color-border);
 }
 
 .bordered-right {
-  border-right: 1px solid var(--color-neutral-3);
+  border-right: 1px solid var(--color-border);
 }
 
 .bordered-bottom {
-  border-bottom: 1px solid var(--color-neutral-3);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .bordered-left {
-  border-left: 1px solid var(--color-neutral-3);
+  border-left: 1px solid var(--color-border);
 }
 
 .frosted {
@@ -62,3 +62,8 @@ body {
 .arco-icon {
   cursor: pointer;
 }
+
+.mark {
+  color: rgba(var(--primary-6));
+  background-color: transparent;
+}

src/components/Delete/index.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { IconDelete } from '@arco-design/web-vue/es/icon'
+import { useRecordStore } from '@/stores'
+
+const recordStore = useRecordStore()
+const { deleteRecord } = recordStore
+const { currentRecord } = storeToRefs(recordStore)
 </script>
 
 <template>
   <a-tooltip content="清空对话">
-    <IconDelete />
+    <IconDelete @click="deleteRecord(currentRecord?.id)" />
   </a-tooltip>
 </template>
-
-<style scoped lang="scss"></style>

src/components/Increase/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { IconPlusCircle } from '@arco-design/web-vue/es/icon'
+import { useRecordStore } from '@/stores'
+
+const { createNewRecord } = useRecordStore()
+</script>
+
+<template>
+  <a-tooltip content="新建对话">
+    <IconPlusCircle @click="createNewRecord" />
+  </a-tooltip>
+</template>

src/components/Input/index.vue

@@ -23,9 +23,14 @@ const textAreaValue = ref('')
     transition: all 0.3s;
 
     border-radius: 32px;
+
+    &:hover {
+      border-color: var(--color-neutral-4);
+    }
     &.arco-textarea-focus {
       height: 96px;
 
+      border-color: rgb(var(--arcoblue-6));
       border-radius: 0;
     }
   }

src/components/ReAnswer/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { IconRefresh } from '@arco-design/web-vue/es/icon'
+import { useRecordStore } from '@/stores'
+
+const recordStore = useRecordStore()
+const { updateRecord } = recordStore
+const { currentRecord } = storeToRefs(recordStore)
+
+const handleClick = () => {
+  if (!currentRecord.value) return
+
+  const newRecord = { ...currentRecord.value }
+  newRecord.data?.pop()
+
+  currentRecord.value = newRecord
+
+  updateRecord(newRecord)
+}
+</script>
+
+<template>
+  <a-tooltip content="重新回答">
+    <IconRefresh @click="handleClick" />
+  </a-tooltip>
+</template>

src/components/Refresh/index.vue

@@ -4,6 +4,6 @@ export enum THEME {
 }
 
 export enum DEFAULT_ROLE {
-  name = '默认角色',
+  name = 'AI 程序员',
   description = '请以 markdown 的形式返回答案！'
 }

src/constants/shared.ts

@@ -6,11 +6,15 @@ export const useRecordStore = defineStore('recordStore', () => {
 
   const recordList = ref<TablePayload[]>([])
 
+  const createNewRecord = () => {
+    currentRecord.value = undefined
+  }
+
   const getRecord = async () => {
     recordList.value = await selectSQL('history')
 
     if (currentRecord.value) {
-      // 检查聊天内容是否还存在于数据库
+      // 检查聊天记录是否还存在于数据库
       const findRecord = recordList.value.find(
         (record) => record.id === currentRecord.value?.id
       )
@@ -41,5 +45,12 @@ export const useRecordStore = defineStore('recordStore', () => {
 
   onMounted(getRecord)
 
-  return { currentRecord, recordList, addRecord, updateRecord, deleteRecord }
+  return {
+    currentRecord,
+    recordList,
+    createNewRecord,
+    addRecord,
+    updateRecord,
+    deleteRecord
+  }
 })