chore: version 2.7.3 (#120)

* fix: 用户输入也被渲染的问题 (#117)

* fix: 用户输入不转换

* feat: 基础深色模式适配

* feat: 主题模式跟随系统

* feat: 深色适配补漏

* chore: version 2.7.3

src/views/chat/layout/Layout.vue

@@ -20,7 +20,7 @@ const collapsed = computed(() => appStore.siderCollapsed)
 const getMobileClass = computed(() => {
   if (isMobile.value)
     return ['rounded-none', 'shadow-none']
-  return ['border', 'rounded-md', 'shadow-md']
+  return ['border', 'rounded-md', 'shadow-md', 'dark:border-neutral-800']
 })
 
 const getContainerClass = computed(() => {
@@ -32,7 +32,7 @@ const getContainerClass = computed(() => {
 </script>
 
 <template>
-  <div class="h-full" :class="[isMobile ? 'p-0' : 'p-4']">
+  <div class="h-full dark:bg-[#24272e] transition-all" :class="[isMobile ? 'p-0' : 'p-4']">
     <div class="h-full overflow-hidden" :class="getMobileClass">
       <NLayout class="z-40 transition" :class="getContainerClass" has-sider>
         <Sider />

src/views/chat/layout/header/index.vue

@@ -18,7 +18,7 @@ function handleUpdateCollapsed() {
 </script>
 
 <template>
-  <header class="fixed top-0 left-0 right-0 z-30 border-b bg-white/80 backdrop-blur">
+  <header class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/30 backdrop-blur">
     <div class="relative flex items-center justify-between h-14">
       <button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
         <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />

src/views/chat/layout/sider/Footer.vue

@@ -1,15 +1,60 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { computed, h, ref } from 'vue'
+import { NDropdown } from 'naive-ui'
 import { HoverButton, Setting, SvgIcon, UserAvatar } from '@/components/common'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
 
 const show = ref(false)
+
+const theme = computed(() => appStore.theme)
+
+const options = [
+  {
+    label: 'Dark',
+    key: 'dark',
+    icon: renderIcon('ri:moon-foggy-line'),
+  },
+  {
+    label: 'Light',
+    key: 'light',
+    icon: renderIcon('ri:sun-foggy-line'),
+  },
+  {
+    label: 'Auto',
+    key: 'auto',
+    icon: renderIcon('ri:contrast-line'),
+  },
+]
+
+function renderIcon(icon: string) {
+  return () => {
+    return h(SvgIcon, { icon })
+  }
+}
+
+function handleThemeChange(key: 'light' | 'dark' | 'auto') {
+  appStore.setTheme(key)
+}
 </script>
 
 <template>
-  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t">
+  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
     <UserAvatar />
+
+    <NDropdown :options="options" placement="top" trigger="click" @select="handleThemeChange">
+      <HoverButton>
+        <span class="text-xl text-[#4f555e] dark:text-white">
+          <SvgIcon v-if="theme === 'dark'" icon="ri:sun-foggy-line" />
+          <SvgIcon v-if="theme === 'light'" icon="ri:moon-foggy-line" />
+          <SvgIcon v-if="theme === 'auto'" icon="ri:contrast-line" />
+        </span>
+      </HoverButton>
+    </NDropdown>
+
     <HoverButton tooltip="Setting" @click="show = true">
-      <span class="text-xl text-[#4f555e]">
+      <span class="text-xl text-[#4f555e] dark:text-white">
         <SvgIcon icon="ri:settings-4-line" />
       </span>
     </HoverButton>

src/views/chat/layout/sider/List.vue

@@ -55,8 +55,8 @@ function isActive(uuid: number) {
       <template v-else>
         <div v-for="(item, index) of dataSources" :key="index">
           <a
-            class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group"
-            :class="isActive(item.uuid) && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]', 'pr-14']"
+            class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group dark:border-neutral-800 dark:hover:bg-[#24272e]"
+            :class="isActive(item.uuid) && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]', 'dark:bg-[#24272e]', 'dark:border-[#4b9e5f]', 'pr-14']"
             @click="handleSelect(item)"
           >
             <span>