feat: 侧边栏历史会话

src/components/business/Chat/components/ListItem/index.vue

@@ -0,0 +1,52 @@
+<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/components/index.ts

@@ -1,3 +1,4 @@
 import Message from './Message/index.vue'
+import ListItem from './ListItem/index.vue'
 
-export { Message }
+export { Message, ListItem }

src/components/business/Chat/index.vue

@@ -78,17 +78,7 @@ function addMessage(message: string, reversal = false) {
 <template>
   <Layout>
     <div class="flex flex-col h-full">
-      <header class="flex items-center justify-between p-4">
+      <main class="flex-1 overflow-hidden">
-        <h1 class="text-xl font-bold">
-          ChatGPT Web
-        </h1>
-        <div class="flex items-center space-x-4">
-          <HoverButton tooltip="Clear" @click="handleClear">
-            <SvgIcon icon="ri:delete-bin-6-line" />
-          </HoverButton>
-        </div>
-      </header>
-      <main class="flex-1 overflow-hidden border-y">
         <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
           <div>
             <Message
@@ -100,6 +90,9 @@ function addMessage(message: string, reversal = false) {
       </main>
       <footer class="p-4">
         <div class="flex items-center justify-between space-x-2">
+          <HoverButton tooltip="Clear" @click="handleClear">
+            <SvgIcon icon="ri:refresh-line" />
+          </HoverButton>
           <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
           <NButton type="primary" :loading="loading" @click="handleSubmit">
             <template #icon>

src/components/business/Chat/layout/Layout.vue

@@ -1,19 +1,44 @@
 <script setup lang='ts'>
-import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
+import { ref } from 'vue'
+import { NButton, NLayout, NLayoutContent, NLayoutSider, NScrollbar } from 'naive-ui'
+import { ListItem } from '../components'
+
+const collapsed = ref(false)
+
+function handleCollapsed() {
+  collapsed.value = !collapsed.value
+}
 </script>
 
 <template>
-  <div class="h-full overflow-hidden border rounded-md shadow-md">
+  <div class="h-full overflow-hidden border rounded-md shadow-md min-w-[640px]">
     <NLayout class="h-full" has-sider>
       <NLayoutSider
+        :collapsed="collapsed"
+        :collapsed-width="0"
+        :width="260"
         collapse-mode="width"
-        :collapsed-width="120"
-        :width="240"
         show-trigger="arrow-circle"
-        class="p-4"
         bordered
+        @update:collapsed="handleCollapsed"
       >
-        <span>Sider</span>
+        <div class="flex flex-col h-full">
+          <main class="flex-1 min-h-0 overflow-hidden">
+            <div class="p-4">
+              <NButton dashed block>
+                Add chat
+              </NButton>
+            </div>
+            <NScrollbar class="px-4">
+              <div class="flex flex-col gap-2 text-sm">
+                <ListItem v-for="(_, index) of 4" :key="index" text="hello world" />
+              </div>
+            </NScrollbar>
+          </main>
+          <footer class="py-4 my-2 border-t">
+            footer
+          </footer>
+        </div>
       </NLayoutSider>
       <NLayoutContent class="h-full">
         <slot />

src/components/common/index.ts

@@ -1,5 +1,5 @@
 import HoverButton from './HoverButton/index.vue'
-import NaiveProvider from './NaiveProvider.vue'
+import NaiveProvider from './NaiveProvider/index.vue'
-import SvgIcon from './SvgIcon.vue'
+import SvgIcon from './SvgIcon/index.vue'
 
 export { HoverButton, NaiveProvider, SvgIcon }