lq/nl-im-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

空状态

Browse Source
This commit is contained in:
年糕崽崽
2025-07-04 16:40:38 +08:00
parent 62563c365e
commit 9c9245ce63
1 changed files with 91 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/EmptyState.vue
View File

@@ -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>