feat: 添加用户头像

src/components/business/Chat/index.vue

@@ -90,8 +90,10 @@ 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">
+          <HoverButton tooltip="Clear conversations" @click="handleClear">
-            <SvgIcon icon="ri:refresh-line" />
+            <span class="text-xl text-[#4f555e]">
+              <SvgIcon icon="ri:refresh-line" />
+            </span>
           </HoverButton>
           <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
           <NButton type="primary" :loading="loading" @click="handleSubmit">

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

@@ -1,45 +1,12 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { NLayout, NLayoutContent } from 'naive-ui'
-import { NButton, NLayout, NLayoutContent, NLayoutSider, NScrollbar } from 'naive-ui'
+import Sider from './sider/index.vue'
-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 min-w-[640px]">
     <NLayout class="h-full" has-sider>
-      <NLayoutSider
+      <Sider />
-        :collapsed="collapsed"
-        :collapsed-width="0"
-        :width="260"
-        collapse-mode="width"
-        show-trigger="arrow-circle"
-        bordered
-        @update:collapsed="handleCollapsed"
-      >
-        <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 />
       </NLayoutContent>

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

@@ -0,0 +1,15 @@
+<script setup lang='ts'>
+import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
+</script>
+
+<template>
+  <footer class="flex items-center justify-between p-4 overflow-hidden border-t">
+    <UserAvatar />
+
+    <HoverButton tooltip="Setting">
+      <span class="text-xl text-[#4f555e]">
+        <SvgIcon icon="ri:settings-4-line" />
+      </span>
+    </HoverButton>
+  </footer>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang='ts'>
+import { NScrollbar } from 'naive-ui'
+import ListItem from './ListItem.vue'
+</script>
+
+<template>
+  <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>
+</template>

src/components/business/Chat/layout/sider/ListItem.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/layout/sider/index.vue

@@ -0,0 +1,59 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import { NButton, NLayoutSider } from 'naive-ui'
+import List from './List.vue'
+import Footer from './Footer.vue'
+
+interface Props {
+  collapsed?: boolean
+}
+
+interface Emit {
+  (e: 'update:collapsed', value: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false,
+})
+
+const emit = defineEmits<Emit>()
+
+const collapsed = ref(props.collapsed)
+
+watch(
+  () => props.collapsed,
+  (value: boolean) => {
+    collapsed.value = value
+  },
+  { immediate: true },
+)
+
+function handleCollapsed() {
+  collapsed.value = !collapsed.value
+  emit('update:collapsed', collapsed.value)
+}
+</script>
+
+<template>
+  <NLayoutSider
+    :collapsed="collapsed"
+    :collapsed-width="0"
+    :width="260"
+    collapse-mode="width"
+    show-trigger="arrow-circle"
+    bordered
+    @update:collapsed="handleCollapsed"
+  >
+    <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>
+        <List />
+      </main>
+      <Footer />
+    </div>
+  </NLayoutSider>
+</template>

src/components/common/UserAvatar/index.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div class="w-10 h-10 overflow-hidden rounded-full">
+      <img class="object-cover" src="@/assets/avatar.jpg" alt="avatar">
+    </div>
+    <div class="ml-2">
+      <h2 class="text-sm font-bold">
+        Redon
+      </h2>
+      <p class="text-xs text-gray-500">
+        #0827
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/common/index.ts

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