From 9c9245ce636b50688b5671f873889a8f6c0f2d78 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Fri, 4 Jul 2025 16:40:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EmptyState.vue | 111 ++++++++++++++++++++++++++++------
 1 file changed, 91 insertions(+), 20 deletions(-)

diff --git a/src/components/EmptyState.vue b/src/components/EmptyState.vue
index 32068f0..43b4eaf 100644
--- a/src/components/EmptyState.vue
+++ b/src/components/EmptyState.vue
@@ -1,49 +1,120 @@
 <template>
-  <div class="flex flex-col items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
+  <div class="flex flex-col items-center justify-center h-full bg-white dark:bg-[#1a1a1a]">
+    <!-- 模式切换按钮 -->
+    <div class="absolute top-4 right-4">
+      <button @click="toggleDarkMode" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+        <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
+        </svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      </button>
+    </div>
+
     <!-- SVG 插画 -->
     <div class="mb-8">
       <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
         <!-- 聊天气泡 -->
-        <ellipse cx="70" cy="80" rx="35" ry="25" fill="#E3F2FD" stroke="#2196F3" stroke-width="2"/>
-        <ellipse cx="130" cy="120" rx="35" ry="25" fill="#F3E5F5" stroke="#9C27B0" stroke-width="2"/>
+        <ellipse cx="70" cy="80" rx="35" ry="25"
+                 class="fill-blue-100 stroke-blue-500
+                 dark:fill-blue-900 dark:stroke-blue-300"
+                 stroke-width="2"/>
+        <ellipse cx="130" cy="120" rx="35" ry="25"
+                 class="fill-purple-100 stroke-purple-500
+                 dark:fill-purple-900 dark:stroke-purple-300"
+                 stroke-width="2"/>
 
         <!-- 消息线条 -->
-        <line x1="45" y1="85" x2="55" y2="85" stroke="#2196F3" stroke-width="2" stroke-linecap="round"/>
-        <line x1="45" y1="90" x2="65" y2="90" stroke="#2196F3" stroke-width="2" stroke-linecap="round"/>
-        <line x1="45" y1="95" x2="60" y2="95" stroke="#2196F3" stroke-width="2" stroke-linecap="round"/>
+        <line x1="45" y1="85" x2="55" y2="85"
+              class="stroke-blue-500 dark:stroke-blue-300"
+              stroke-width="2" stroke-linecap="round"/>
+        <line x1="45" y1="90" x2="65" y2="90"
+              class="stroke-blue-500 dark:stroke-blue-300"
+              stroke-width="2" stroke-linecap="round"/>
+        <line x1="45" y1="95" x2="60" y2="95"
+              class="stroke-blue-500 dark:stroke-blue-300"
+              stroke-width="2" stroke-linecap="round"/>
 
-        <line x1="110" y1="115" x2="125" y2="115" stroke="#9C27B0" stroke-width="2" stroke-linecap="round"/>
-        <line x1="110" y1="120" x2="140" y2="120" stroke="#9C27B0" stroke-width="2" stroke-linecap="round"/>
-        <line x1="110" y1="125" x2="135" y2="125" stroke="#9C27B0" stroke-width="2" stroke-linecap="round"/>
+        <line x1="110" y1="115" x2="125" y2="115"
+              class="stroke-purple-500 dark:stroke-purple-300"
+              stroke-width="2" stroke-linecap="round"/>
+        <line x1="110" y1="120" x2="140" y2="120"
+              class="stroke-purple-500 dark:stroke-purple-300"
+              stroke-width="2" stroke-linecap="round"/>
+        <line x1="110" y1="125" x2="135" y2="125"
+              class="stroke-purple-500 dark:stroke-purple-300"
+              stroke-width="2" stroke-linecap="round"/>
 
         <!-- 装饰性元素 -->
-        <circle cx="50" cy="50" r="3" fill="#FFB74D"/>
-        <circle cx="150" cy="60" r="3" fill="#81C784"/>
-        <circle cx="40" cy="140" r="3" fill="#F06292"/>
-        <circle cx="160" cy="150" r="3" fill="#64B5F6"/>
+        <circle cx="50" cy="50" r="3"
+                class="fill-orange-500 dark:fill-orange-300"/>
+        <circle cx="150" cy="60" r="3"
+                class="fill-green-500 dark:fill-green-300"/>
+        <circle cx="40" cy="140" r="3"
+                class="fill-pink-500 dark:fill-pink-300"/>
+        <circle cx="160" cy="150" r="3"
+                class="fill-blue-500 dark:fill-blue-300"/>
 
         <!-- 连接线 -->
-        <path d="M70 105 Q100 110 130 95" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
+        <path d="M70 105 Q100 110 130 95"
+              class="stroke-gray-300 dark:stroke-gray-500"
+              stroke-width="2" fill="none" stroke-dasharray="5,5"/>
       </svg>
     </div>
 
     <!-- 文字提示 -->
     <div class="text-center">
-      <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">
+      <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
         开始聊天吧！
       </h3>
-      <p class="text-gray-500 dark:text-gray-400 max-w-md">
+      <p class="text-gray-600 dark:text-gray-400 max-w-md">
         从左侧选择一个联系人开始对话，享受愉快的聊天体验
       </p>
     </div>
 
     <!-- 装饰性动画元素 -->
-    <div class="absolute top-20 left-20 w-4 h-4 bg-blue-200 rounded-full animate-bounce opacity-60"></div>
-    <div class="absolute bottom-20 right-20 w-6 h-6 bg-purple-200 rounded-full animate-pulse opacity-60"></div>
-    <div class="absolute top-40 right-40 w-3 h-3 bg-green-200 rounded-full animate-ping opacity-60"></div>
+    <div class="absolute top-20 left-20 w-4 h-4 bg-blue-100 rounded-full animate-bounce opacity-80
+                dark:bg-blue-800"></div>
+    <div class="absolute bottom-20 right-20 w-6 h-6 bg-purple-100 rounded-full animate-pulse opacity-80
+                dark:bg-purple-800"></div>
+    <div class="absolute top-40 right-40 w-3 h-3 bg-green-100 rounded-full animate-ping opacity-80
+                dark:bg-green-800"></div>
   </div>
 </template>
 
 <script setup>
-// 空状态组件 - 当没有选择聊天用户时显示
+import { ref, onMounted } from 'vue';
+
+const isDark = ref(false);
+
+// 检查系统偏好或本地存储
+onMounted(() => {
+  const savedPreference = localStorage.getItem('darkMode');
+  const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  if (savedPreference !== null) {
+    isDark.value = savedPreference === 'true';
+  } else {
+    isDark.value = systemPreference;
+  }
+
+  updateDarkClass();
+});
+
+// 切换模式
+function toggleDarkMode() {
+  isDark.value = !isDark.value;
+  localStorage.setItem('darkMode', isDark.value);
+  updateDarkClass();
+}
+
+// 更新HTML class
+function updateDarkClass() {
+  if (isDark.value) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
 </script>