feat: 侧边栏记录

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

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

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

@@ -1,34 +1,14 @@
 <script setup lang='ts'>
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { NButton, NLayoutSider, useMessage } from 'naive-ui'
 import List from './List.vue'
 import Footer from './Footer.vue'
+import { useAppStore } from '@/store'
 
-interface Props {
-  collapsed?: boolean
-}
-
-interface Emit {
-  (e: 'update:collapsed', value: boolean): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  collapsed: false,
-})
-
-const emit = defineEmits<Emit>()
-
+const appStore = useAppStore()
 const ms = useMessage()
 
-const collapsed = ref(props.collapsed)
-
-watch(
-  () => props.collapsed,
-  (value: boolean) => {
-    collapsed.value = value
-  },
-  { immediate: true },
-)
+const collapsed = ref(appStore.siderCollapsed ?? false)
 
 function handleAdd() {
   ms.info('Coming soon...')
@@ -36,7 +16,7 @@ function handleAdd() {
 
 function handleCollapsed() {
   collapsed.value = !collapsed.value
-  emit('update:collapsed', collapsed.value)
+  appStore.setSiderCollapsed(collapsed.value)
 }
 </script>