feat: 侧边栏静态增删

src/components/business/Chat/layout/sider/List.vue

@@ -1,14 +1,53 @@
 <script setup lang='ts'>
 import { NScrollbar } from 'naive-ui'
-import ListItem from './ListItem.vue'
+import type { HistoryChatProps } from '../../types'
+import { SvgIcon } from '@/components/common'
+
+interface Props {
+  data: HistoryChatProps[]
+}
+
+interface Emit {
+  (ev: 'delete', index: number): void
+  (ev: 'edit', index: number): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+function handleEdit(index: number) {
+  emit('delete', index)
+}
+
+function handleDelete(index: number) {
+  emit('delete', index)
+}
 </script>
 
 <template>
   <NScrollbar class="px-4">
     <div class="flex flex-col gap-2 text-sm">
-      <ListItem text="Learning correlation" />
-      <ListItem text="Write Code" />
-      <ListItem text="docs..." />
+      <div v-for="(item, index) of data" :key="index">
+        <a
+          class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
+        >
+          <span>
+            <SvgIcon icon="ri:message-3-line" />
+          </span>
+          <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
+            <span>{{ item.title }}</span>
+          </div>
+          <div class="absolute z-10 flex visible right-1">
+            <button class="p-1">
+              <SvgIcon icon="ri:edit-line" @click="handleEdit(index)" />
+            </button>
+            <button class="p-1" @click="handleDelete(index)">
+              <SvgIcon icon="ri:delete-bin-line" />
+            </button>
+          </div>
+        </a>
+      </div>
     </div>
   </NScrollbar>
 </template>

src/components/business/Chat/layout/sider/ListItem.vue

@@ -1,52 +0,0 @@
-<script setup lang='ts'>
-import { SvgIcon } from '@/components/common'
-
-interface Props {
-  text: string
-}
-
-interface Emit {
-  (e: 'click',): void
-  (e: 'edit',): void
-  (e: 'delete',): void
-}
-
-defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-function handleClick(event: Event) {
-  emit('click')
-  event.preventDefault()
-}
-
-function handleEdit() {
-  emit('edit')
-}
-
-function handleDelete() {
-  emit('delete')
-}
-</script>
-
-<template>
-  <a
-    class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
-    @click="handleClick"
-  >
-    <span>
-      <SvgIcon icon="ri:message-3-line" />
-    </span>
-    <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
-      <span>{{ text }}</span>
-    </div>
-    <div class="absolute z-10 flex visible right-1">
-      <button class="p-1" @click="handleEdit">
-        <SvgIcon icon="ri:edit-line" />
-      </button>
-      <button class="p-1" @click="handleDelete">
-        <SvgIcon icon="ri:delete-bin-line" />
-      </button>
-    </div>
-  </a>
-</template>

src/components/business/Chat/layout/sider/index.vue

@@ -1,17 +1,31 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
-import { NButton, NLayoutSider, useMessage } from 'naive-ui'
+import { NButton, NLayoutSider } from 'naive-ui'
+import type { HistoryChatProps } from '../../types'
 import List from './List.vue'
 import Footer from './Footer.vue'
 import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
-const ms = useMessage()
 
 const collapsed = ref(appStore.siderCollapsed ?? false)
 
+const history = ref<HistoryChatProps[]>([])
+
 function handleAdd() {
-  ms.info('Coming soon...')
+  history.value.push({
+    title: 'New chat',
+    edit: false,
+    data: [],
+  })
+}
+
+function handleEdit(index: number) {
+  history.value[index].edit = true
+}
+
+function handleDelete(index: number) {
+  history.value.splice(index, 1)
 }
 
 function handleCollapsed() {
@@ -37,7 +51,7 @@ function handleCollapsed() {
             New chat
           </NButton>
         </div>
-        <List />
+        <List :data="history" @edit="handleEdit" @delete="handleDelete" />
       </main>
       <Footer />
     </div>

src/components/business/Chat/types.ts

@@ -10,3 +10,9 @@ export interface ChatProps {
   error?: boolean
   options?: ChatOptions
 }
+
+export interface HistoryChatProps {
+  title: string
+  edit: boolean
+  data: ChatProps[]
+}