feat: 增加删除逻辑与公共配置

src/components/Content.vue

@@ -30,25 +30,29 @@ const text = ref('') // current select message
 const translates = ref<Translates>({}) // translate result
 const isTranslating = ref(false) // translate loading
 
-const messageLength = computed(() => store.currentChatMessages.length)
-const chatMessages = computed(() => store.currentChatMessages.slice(1))
+const messageLength = computed(() => store.getConversationsByCurrentProps('chatMessages').length)
+const chatMessages = computed(() => store.getConversationsByCurrentProps('chatMessages').slice(1))
+const currentChatMessages = computed(() => store.getConversationsByCurrentProps('chatMessages'))
 const currentKey = computed(() => store.currentKey)
-const currentName = computed(() => store.currentName)
+const currentName = computed(() => store.getConversationsByCurrentProps('name'))
+const currentAvatar = computed(() => store.getConversationsByCurrentProps('avatar'))
+const currentLanguage = computed(() => store.getConversationsByCurrentProps('language'))
+const currentVoice = computed(() => store.getConversationsByCurrentProps('voice'))
 
 useTitle(currentName)
 
 // effects
 watch(messageLength, () => nextTick(() => scrollToBottom()))
 watch(currentKey, () => {
-  language.value = store.currentLanguage as any
-  voiceName.value = store.currentVoice as any
+  language.value = currentLanguage.value as any
+  voiceName.value = currentVoice.value as any
 })
 
 // methods
 const fetchResponse = async (key: string) => {
   let res
   try {
-    res = await generateText(store.currentChatMessages, key, getOpenProxy())
+    res = await generateText(currentChatMessages.value, key, getOpenProxy())
   }
   catch (error: any) {
     return alert('[Error] 网络请求超时, 请检查网络或代理')
@@ -64,7 +68,7 @@ const onSubmit = async () => {
   if (!message.value) return
 
   store.changeConversations([
-    ...store.currentChatMessages,
+    ...currentChatMessages.value,
     { content: message.value, role: 'user' },
   ])
   message.value = ''
@@ -73,15 +77,15 @@ const onSubmit = async () => {
   const content = await fetchResponse(key)
   if (content) {
     store.changeConversations([
-      ...store.currentChatMessages,
+      ...currentChatMessages.value,
       {
         content, role: 'assistant',
       },
     ])
     speak(content)
   }
   else {
-    store.changeConversations(store.currentChatMessages.slice(0, -1))
+    store.changeConversations(currentChatMessages.value.slice(0, -1))
   }
 
   store.changeLoading(false)
@@ -134,7 +138,7 @@ const translate = async (text: string, i: number) => {
           center-y odd:flex-row-reverse
         >
           <div class="w-10">
-            <img w-full rounded-full :src="item.role === 'user' ? getAvatarUrl('self.png') : store.currentAvatar" alt="">
+            <img w-full rounded-full :src="item.role === 'user' ? getAvatarUrl('self.png') : currentAvatar" alt="">
           </div>
 
           <div style="flex-basis:fit-content" mx-2>
@@ -201,7 +205,7 @@ const translate = async (text: string, i: number) => {
       </Button>
       <Button
         :disabled="store.loading"
-        @click="store.cleanConversations()"
+        @click="store.cleanCurrentConversations()"
       >
         <i i-carbon:trash-can />
       </Button>

src/components/Nav.vue

@@ -1,15 +1,8 @@
 <script setup lang="ts">
 import Card from './widgets/Card.vue'
-import Modal from './Modal.vue'
-import NewChat from './NewChat.vue'
+import Tool from './Tool.vue'
 import type { Key } from '@/stores'
 import { useConversationStore } from '@/stores'
-import InputKit from '@/components/widgets/InputKit.vue'
-import { OPEN_KEY, OPEN_PROXY } from '@/constant'
-const openKey = useLocalStorage(OPEN_KEY, '')
-const proxy = useLocalStorage(OPEN_PROXY, '')
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
 const store = useConversationStore()
 
 const handleCardClick = (key: Key) => {
@@ -18,7 +11,9 @@ const handleCardClick = (key: Key) => {
   store.changeCurrentKey(key)
 }
 
-const visible = ref(false)
+const handleDelete = (key: Key) => {
+  store.deleteConversation(key)
+}
 </script>
 
 <template>
@@ -33,46 +28,11 @@ const visible = ref(false)
           :name="item.name"
           :active="store.currentKey === item.key"
           @click="handleCardClick(item.key)"
+          @delete="handleDelete(item.key)"
         />
       </div>
       <div w-full h-0.2 bg-gray-200 dark:bg-gray-700 />
-      <div py-1>
-        <div
-          nav-item
-          @click="() => toggleDark()"
-        >
-          <i icon-btn dark:i-carbon-moon i-carbon:sun />
-          <span v-if="isDark">Light Mode</span>
-          <span v-else>Dark Mode</span>
-        </div>
-        <div nav-item>
-          <InputKit v-model="proxy" input-type="text">
-            <template #mainIcon>
-              <i i-carbon:server-proxy />
-            </template>
-            <template #mainText>
-              Proxy
-            </template>
-          </InputKit>
-        </div>
-        <div nav-item>
-          <InputKit v-model="openKey">
-            <template #mainText>
-              OpenAi Key
-            </template>
-          </InputKit>
-        </div>
-        <div
-          nav-item
-          @click="visible = true"
-        >
-          <i icon-btn i-ic:baseline-person-add-alt />
-          <span>New Chat</span>
-        </div>
-      </div>
-      <Modal v-model:visible="visible" class="dark:bg-[#111111] bg-white" center max-w-120 p6>
-        <NewChat @close="visible = false" />
-      </Modal>
+      <Tool />
     </div>
   </nav>
 </template>

src/components/NewChat.vue

@@ -88,9 +88,10 @@ const changeAvatar = () => {
           </option>
         </select>
       </div>
-      <!-- <div center-y text-sm text-gray-500>
-        <i inline-block w-4 h-4 m-1 cursor-auto i-ic:baseline-lightbulb />
-        按 esc 键或点击空白处可关闭弹框
+      <!-- todo -->
+      <!-- <div flex>
+        <label center-y justify-end mr-2 for="">预设</label>
+        <textarea id="message" resize-none w-50 block p-2 text-sm placeholder="Write your thoughts here..." />
       </div> -->
       <div center-y text-sm text-gray-500>
         <i inline-block w-4 h-4 m-1 cursor-auto i-ic:baseline-lightbulb />

src/components/Setting.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import InputKit from '@/components/widgets/InputKit.vue'
+import { OPEN_KEY, OPEN_PROXY } from '@/constant'
+const openKey = useLocalStorage(OPEN_KEY, '')
+const proxy = useLocalStorage(OPEN_PROXY, '')
+</script>
+
+<template>
+  <div flex="~ col gap-3" items-center>
+    <div flex w-50 text-sm>
+      <InputKit v-model="openKey">
+        <template #mainIcon>
+          <i inline-block mr-1 rotate-115 i-ic:baseline-key />
+        </template>
+        <template #mainText>
+          点击设置OpenAi Key
+        </template>
+      </InputKit>
+    </div>
+    <div flex w-50 text-sm>
+      <InputKit v-model="proxy" h-4 input-type="text">
+        <template #mainIcon>
+          <i inline-block mr-1 text-sm i-carbon:server-proxy />
+        </template>
+        <template #mainText>
+          点击设置代理
+        </template>
+      </InputKit>
+    </div>
+  </div>
+</template>

src/components/Tool.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Modal from './widgets/Modal.vue'
+import NewChat from './NewChat.vue'
+import Setting from './Setting.vue'
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+const addVisible = ref(false)
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <div py-1>
+    <div
+      nav-item
+      @click="() => toggleDark()"
+    >
+      <i icon-btn dark:i-carbon-moon i-carbon:sun />
+      <span v-if="isDark">Light Mode</span>
+      <span v-else>Dark Mode</span>
+    </div>
+    <div
+      nav-item
+      @click="addVisible = true"
+    >
+      <i icon-btn i-ic:baseline-person-add-alt />
+      <span>New Chat</span>
+    </div>
+    <div nav-item @click="settingVisible = true">
+      <i icon-btn i-carbon:settings />
+      <span>Setting</span>
+    </div>
+  </div>
+
+  <Modal v-model:visible="addVisible" class="dark:bg-[#111111] bg-white" center max-w-120 p6>
+    <NewChat @close="addVisible = false" />
+  </Modal>
+
+  <Modal v-model:visible="settingVisible" h20 class="dark:bg-[#111111] bg-white" center max-w-80 p6>
+    <Setting />
+  </Modal>
+</template>

src/components/widgets/Card.vue

@@ -5,11 +5,19 @@ const { name, desc, active, avaterUrl } = defineProps<{
   active: boolean
   avaterUrl: string
 }>()
+const emit = defineEmits<{
+  (event: 'delete',): void
+}>()
+
+const handleWidgetClick = (event: MouseEvent) => {
+  event.stopPropagation()
+  emit('delete')
+}
 </script>
 
 <template>
   <div
-    p-2 cursor-pointer center-y
+    p-2 cursor-pointer center-y relative
     m-2 rounded duration-300 shadow-sm
     dark="bg-gray-700/80 hover:bg-gray-500/80"
     bg="gray-400/20 hover:gray-500/20"
@@ -28,5 +36,8 @@ const { name, desc, active, avaterUrl } = defineProps<{
         {{ desc }}
       </div>
     </div>
+    <div v-if="active" absolute right-2 top-2 @click=" handleWidgetClick($event)">
+      <i w-4 h-4 icon-btn i-carbon:trash-can />
+    </div>
   </div>
 </template>

src/components/widgets/InputKit.vue

@@ -6,37 +6,39 @@ const [isShowInput, toggle] = useToggle(false)
 </script>
 
 <template>
-  <slot name="mainIcon">
-    <i icon-btn rotate-115 i-ic:baseline-key />
-  </slot>
-  <div v-if="isShowInput" class="wrapper">
-    <input
-      v-model="tempValue"
-      :type="props.inputType || 'password'"
-      class="input"
-    >
-    <i
-      icon-btn i-carbon-checkmark @click="() => {
-        $emit('update:modelValue', tempValue)
-        toggle()
-      }"
-    />
-    <i icon-btn i-carbon-close @click="toggle()" />
-  </div>
-  <div
-    v-else
-    cursor-pointer
-    @click="toggle()"
-  >
-    <slot name="mainText">
-      Key
+  <div center-y>
+    <slot name="mainIcon">
+      <i icon-btn rotate-115 i-ic:baseline-key />
     </slot>
+    <div v-if="isShowInput" class="wrapper">
+      <input
+        v-model="tempValue"
+        :type="props.inputType || 'password'"
+        class="input"
+      >
+      <i
+        icon-btn i-carbon-checkmark @click="() => {
+          $emit('update:modelValue', tempValue)
+          toggle()
+        }"
+      />
+      <i icon-btn i-carbon-close @click="toggle()" />
+    </div>
+    <div
+      v-else
+      cursor-pointer
+      @click="toggle()"
+    >
+      <slot name="mainText">
+        Key
+      </slot>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .wrapper{
   display: grid;
-  grid-template-columns: 100px 1fr 1fr;
+  grid-template-columns: auto 1fr 1fr;
 }
 </style>