diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0e7ba37
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+dist/
+*.exe
+*.log
+.DS_Store
diff --git a/src/App.vue b/src/App.vue
index 1171061..db395cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,104 +1,80 @@
-<template>
-  <router-view v-if="isAdminPage || isLoginPage" />
-  <template v-else>
-    <div class="background"></div>
-    <Home />
-    <footer>
-      <span>© {{ footerYearText }} Made in <a href="/" target="_blank">{{ userName }}</a></span>
-      <a v-if="icpNumber && icpNumber !== '暂未填写' && icpNumber.trim() !== ''" href="https://beian.miit.gov.cn/" target="_blank">{{ icpNumber }}</a>
-      <a v-if="policenumber && policenumber !== '暂未填写' && policenumber.trim() !== ''" :href="`https://beian.mps.gov.cn/#/query/webSearch?police=${policenumber}`" target="_blank" class="police_link">
-        <span class="police_img"></span> {{ policenumber }}
-      </a>
-    </footer>
-  </template>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import Home from './components/Home.vue';
-import { getSiteConfig } from './api';
-
-const route = useRoute();
-const userName = ref(import.meta.env.VITE_APP_USER_NAME || '用户');
-const icpNumber = ref(import.meta.env.VITE_APP_ICP_NUMBER || '');
-const policenumber = ref(import.meta.env.VITE_APP_POLICE_NUMBER || '');
-
-// 底部年份（支持起止年份）
-const footerYearStart = ref('');
-const footerYearEnd = ref('');
-
-const footerYearText = computed(() => {
-  const currentYear = new Date().getFullYear().toString();
-  const start = (footerYearStart.value || '').trim();
-  const end = (footerYearEnd.value || '').trim();
-
-  // 后台未配置时，默认显示当前年份
-  if (!start && !end) {
-    return currentYear;
-  }
-
-  // 只配置了起始年份
-  if (start && !end) {
-    return start;
-  }
-
-  // 起止年份都有且不同
-  if (start && end && start !== end) {
-    return `${start}~${end}`;
-  }
-
-  // 其他情况（例如起止相同），只显示一个年份
-  return start || end || currentYear;
-});
-
-const isAdminPage = computed(() => route.path === '/admin');
-const isLoginPage = computed(() => route.path === '/login');
-
-const loadConfig = async () => {
-  try {
-    const res = await getSiteConfig();
-    // 同步所有配置信息
-    if (res.data.siteName) {
-      // 站点名称可用于页面显示
-    }
-    if (res.data.siteURL) {
-      // 站点URL可用于链接等
-    }
-    if (res.data.siteDescription) {
-      // 站点描述已通过frontendConfig.js同步到meta标签
-    }
-    if (res.data.siteKeywords) {
-      // 站点关键词已通过frontendConfig.js同步到meta标签
-    }
-    // 只有非空且不是"暂未填写"时才显示备案信息
-    if (res.data.icpNumber && res.data.icpNumber !== '暂未填写' && res.data.icpNumber.trim() !== '') {
-      icpNumber.value = res.data.icpNumber;
-    } else {
-      icpNumber.value = '';
-    }
-    if (res.data.policeNumber && res.data.policeNumber !== '暂未填写' && res.data.policeNumber.trim() !== '') {
-      policenumber.value = res.data.policeNumber;
-    } else {
-      policenumber.value = '';
-    }
-    if (res.data.userName) userName.value = res.data.userName;
-
-    // 底部年份配置
-    if (typeof res.data.footerYearStart === 'string') {
-      footerYearStart.value = res.data.footerYearStart;
-    }
-    if (typeof res.data.footerYearEnd === 'string') {
-      footerYearEnd.value = res.data.footerYearEnd;
-    }
-  } catch (error) {
-    console.error('加载配置失败:', error);
-  }
-};
-
-onMounted(() => {
-  if (!isAdminPage.value && !isLoginPage.value) {
-    loadConfig();
-  }
-});
-</script>
\ No newline at end of file
+<template>
+  <div v-if="isPublicPage" class="public-shell">
+    <div class="background" aria-hidden="true"></div>
+    <router-view />
+    <footer class="site-footer">
+      <span>© {{ footerYearText }} Made by <a href="/">{{ userName }}</a></span>
+      <a v-if="icpNumber" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
+        {{ icpNumber }}
+      </a>
+      <a
+        v-if="policeNumber"
+        :href="`https://beian.mps.gov.cn/#/query/webSearch?police=${policeNumber}`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="police-link"
+      >
+        <i class="fas fa-shield-alt" aria-hidden="true"></i>
+        {{ policeNumber }}
+      </a>
+    </footer>
+  </div>
+  <router-view v-else />
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { getSiteConfig } from './api'
+
+const route = useRoute()
+const userName = ref(import.meta.env.VITE_APP_USER_NAME || '用户')
+const icpNumber = ref('')
+const policeNumber = ref('')
+const footerYearStart = ref('')
+const footerYearEnd = ref('')
+let configChannel = null
+
+const isPublicPage = computed(() => route.name === 'home')
+const footerYearText = computed(() => {
+  const currentYear = String(new Date().getFullYear())
+  const start = footerYearStart.value.trim()
+  const end = footerYearEnd.value.trim()
+  if (!start && !end) return currentYear
+  if (start && end && start !== end) return `${start}~${end}`
+  return start || end || currentYear
+})
+
+const visibleFiling = (value) => {
+  const normalized = typeof value === 'string' ? value.trim() : ''
+  return normalized && normalized !== '暂未填写' ? normalized : ''
+}
+
+const loadConfig = async () => {
+  if (!isPublicPage.value) return
+  try {
+    const { data } = await getSiteConfig()
+    userName.value = data.userName || userName.value
+    icpNumber.value = visibleFiling(data.icpNumber)
+    policeNumber.value = visibleFiling(data.policeNumber)
+    footerYearStart.value = String(data.footerYearStart || '')
+    footerYearEnd.value = String(data.footerYearEnd || '')
+  } catch (error) {
+    console.error('加载页脚配置失败:', error)
+  }
+}
+
+watch(() => route.name, loadConfig)
+
+onMounted(() => {
+  loadConfig()
+  if (window.BroadcastChannel) {
+    configChannel = new BroadcastChannel('config-update')
+    configChannel.onmessage = ({ data }) => {
+      if (data?.type === 'config-updated') loadConfig()
+    }
+  }
+})
+
+onUnmounted(() => configChannel?.close())
+</script>
diff --git a/src/api/index.js b/src/api/index.js
index f3334f7..e034a50 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,100 +1,103 @@
-import axios from 'axios'
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
-
-const api = axios.create({
-  baseURL: API_BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-
-// 请求拦截器 - 添加JWT token
-api.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem('token')
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
-    }
-    return config
-  },
-  (error) => {
-    return Promise.reject(error)
-  }
-)
-
-// 响应拦截器 - 处理错误
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401) {
-      localStorage.removeItem('token')
-      // 可以在这里跳转到登录页
-    }
-    return Promise.reject(error)
-  }
-)
-
-// 公开API
-export const getSites = () => api.get('/sites')
-export const getContacts = () => api.get('/contacts')
-export const getSiteConfig = () => api.get('/config')
-export const getFrontendConfig = () => api.get('/frontend-config')
-
-// 认证API
-export const login = (username, password) =>
-  api.post('/auth/login', { username, password })
-
-// 管理API
-export const adminAPI = {
-  // 站点管理
-  getSites: () => api.get('/admin/sites'),
-  createSite: (data) => api.post('/admin/sites', data),
-  updateSite: (id, data) => api.put(`/admin/sites/${id}`, data),
-  deleteSite: (id) => api.delete(`/admin/sites/${id}`),
-
-  // 联系方式管理
-  getContacts: () => api.get('/admin/contacts'),
-  createContact: (data) => api.post('/admin/contacts', data),
-  updateContact: (id, data) => api.put(`/admin/contacts/${id}`, data),
-  deleteContact: (id) => api.delete(`/admin/contacts/${id}`),
-
-  // 站点配置管理
-  getSiteConfig: () => api.get('/admin/config'),
-  updateSiteConfig: (data) => api.put('/admin/config', data),
-
-  // 文件上传
-  uploadFile: (file) => {
-    const formData = new FormData()
-    formData.append('file', file)
-    return api.post('/admin/upload', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    })
-  },
-
-  // 统计API
-  getStats: () => api.get('/admin/stats'),
-  getChartData: (period) => api.get(`/admin/charts?period=${period}`),
-  getRecentVisits: (limit = 5) => api.get(`/admin/recent-visits?limit=${limit}`),
-  
-  // 热重载通知
-  notifyConfigUpdate: () => api.post('/admin/notify-update'),
-  
-  // 用户管理
-  changePassword: (oldPassword, newPassword) => 
-    api.put('/admin/change-password', { oldPassword, newPassword }),
-  
-  // 日志API
-  getBackendLogs: (lines = 100) => api.get(`/admin/logs?lines=${lines}`),
-  
-  // 登录历史API
-  getLoginHistory: (limit = 20) => api.get(`/admin/login-history?limit=${limit}`),
-  
-  // 轮换文本配置API
-  getRotatingTexts: () => api.get('/api/rotating-texts'),
-  updateRotatingTexts: (texts) => api.put('/admin/rotating-texts', { texts }),
-}
-
-export default api
+import axios from 'axios'
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// 请求拦截器 - 添加JWT token
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器 - 处理错误
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('token')
+      if (window.location.pathname.startsWith('/admin')) {
+        const redirect = encodeURIComponent(`${window.location.pathname}${window.location.search}`)
+        window.location.assign(`/login?redirect=${redirect}`)
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+// 公开API
+export const getSites = () => api.get('/sites')
+export const getContacts = () => api.get('/contacts')
+export const getSiteConfig = () => api.get('/config')
+export const getFrontendConfig = () => api.get('/frontend-config')
+
+// 认证API
+export const login = (username, password) =>
+  api.post('/auth/login', { username, password })
+
+// 管理API
+export const adminAPI = {
+  // 站点管理
+  getSites: () => api.get('/admin/sites'),
+  createSite: (data) => api.post('/admin/sites', data),
+  updateSite: (id, data) => api.put(`/admin/sites/${id}`, data),
+  deleteSite: (id) => api.delete(`/admin/sites/${id}`),
+
+  // 联系方式管理
+  getContacts: () => api.get('/admin/contacts'),
+  createContact: (data) => api.post('/admin/contacts', data),
+  updateContact: (id, data) => api.put(`/admin/contacts/${id}`, data),
+  deleteContact: (id) => api.delete(`/admin/contacts/${id}`),
+
+  // 站点配置管理
+  getSiteConfig: () => api.get('/admin/config'),
+  updateSiteConfig: (data) => api.put('/admin/config', data),
+
+  // 文件上传
+  uploadFile: (file) => {
+    const formData = new FormData()
+    formData.append('file', file)
+    return api.post('/admin/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+  },
+
+  // 统计API
+  getStats: () => api.get('/admin/stats'),
+  getChartData: (period) => api.get(`/admin/charts?period=${period}`),
+  getRecentVisits: (limit = 5) => api.get(`/admin/recent-visits?limit=${limit}`),
+  
+  // 热重载通知
+  notifyConfigUpdate: () => api.post('/admin/notify-update'),
+  
+  // 用户管理
+  changePassword: (oldPassword, newPassword) => 
+    api.put('/admin/change-password', { oldPassword, newPassword }),
+  
+  // 日志API
+  getBackendLogs: (lines = 100) => api.get(`/admin/logs?lines=${lines}`),
+  
+  // 登录历史API
+  getLoginHistory: (limit = 20) => api.get(`/admin/login-history?limit=${limit}`),
+  
+  // 轮换文本配置API
+  getRotatingTexts: () => api.get('/admin/rotating-texts'),
+  updateRotatingTexts: (texts) => api.put('/admin/rotating-texts', { texts }),
+}
+
+export default api
diff --git a/src/components/AboutPage.vue b/src/components/AboutPage.vue
index 8dc5f3c..505a577 100644
--- a/src/components/AboutPage.vue
+++ b/src/components/AboutPage.vue
@@ -1,207 +1,207 @@
-<template>
-  <div class="about-page" @click.stop>
-    <div class="about-modal">
-      <div class="about-modal-content">
-        <div class="tech-stack">
-          <h3>使用的技术栈</h3>
-          <ul class="tech-list">
-            <li v-for="tech in techStack" :key="tech.name" :class="['tech-item', tech.name.toLowerCase()]">
-              <i :class="tech.icon"></i>
-              {{ tech.name }}
-            </li>
-          </ul>
-        </div>
-        <div class="github-info">
-          <h3>开源地址</h3>
-          <div class="github-links">
-            <a href="https://github.com/JLinMr/Home-Vue" target="_blank" class="github-link">
-              <i class="fab fa-github"></i>
-              <div class="link-content">
-                <span class="link-title">静态原项目</span>
-                <span class="link-desc">Home-Vue</span>
-              </div>
-            </a>
-            <a href="https://github.com/JLinMr/Home-Vue-go" target="_blank" class="github-link">
-              <i class="fab fa-github"></i>
-              <div class="link-content">
-                <span class="link-title">动态现项目</span>
-                <span class="link-desc">Home-Vue-go</span>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-      <button @click="closeModal" class="close-btn">
-        <i class="fas fa-times"></i>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const emit = defineEmits(['close']);
-
-const techStack = [
-  // 前端技术栈
-  { name: 'Vue3', icon: 'fab fa-vuejs' },
-  { name: 'Vite', icon: 'fas fa-bolt' },
-  { name: 'CSS3', icon: 'fab fa-css3-alt' },
-  { name: 'HTML5', icon: 'fab fa-html5' },
-  { name: 'JavaScript', icon: 'fab fa-js' },
-  // 后端技术栈
-  { name: 'Go', icon: 'fab fa-golang' },
-  { name: 'Gin', icon: 'fas fa-server' },
-  { name: 'SQLite', icon: 'fas fa-database' },
-  { name: 'Ent', icon: 'fas fa-code-branch' },
-  { name: 'JWT', icon: 'fas fa-key' }
-];
-const closeModal = () => emit('close');
-</script>
-
-<style scoped>
-.about-page {
-  width: 500px;
-  backdrop-filter: blur(5px);
-  background-color: rgba(var(--background-color-rgb), 0.9);
-  padding: 40px;
-  border-radius: var(--border-radius);
-  position: relative;
-  text-align: center;
-  box-sizing: border-box;
-
-  @media (max-width: 600px) {
-    padding: 20px;
-    width: 90%;
-    margin: auto;
-  }
-}
-
-h3 {
-  border-bottom: 2px solid var(--border-color);
-  padding-bottom: 10px;
-}
-
-.tech-stack ul,
-.tech-list {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.tech-stack li,
-.tech-item {
-  padding: 10px 15px;
-  border-radius: var(--border-radius);
-  transition: all 0.3s ease;
-  display: flex;
-  gap: 5px;
-  flex-direction: column;
-}
-
-.tech-stack li:hover,
-.tech-item:hover {
-  background-color: var(--hover-other-color);
-  color: var(--hover-link-color);
-}
-
-.tech-stack li i,
-.tech-item i {
-  font-size: 1.5em;
-}
-
-@media (max-width: 600px) {
-  .tech-stack li,
-  .tech-item {
-    font-size: 0.8em;
-  }
-}
-
-.github-links {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 15px;
-  width: 100%;
-}
-
-.github-link {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background-color: #040404d0;
-  color: white;
-  padding: 15px 20px;
-  border-radius: var(--border-radius);
-  text-decoration: none;
-  transition: all 0.3s ease;
-  flex: 1;
-
-  &:hover {
-    background-color: #1a1a1a;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  i {
-    font-size: 1.5em;
-    flex-shrink: 0;
-  }
-
-  .link-content {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    text-align: left;
-  }
-
-  .link-title {
-    font-size: 0.9em;
-    opacity: 0.9;
-  }
-
-  .link-desc {
-    font-size: 0.85em;
-    opacity: 0.7;
-    font-family: 'Courier New', monospace;
-  }
-}
-
-@media (max-width: 600px) {
-  .github-links {
-    grid-template-columns: 1fr;
-  }
-}
-
-.close-btn {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: none;
-  border: none;
-  font-size: 1.5em;
-  cursor: pointer;
-  color: #7f8c8d;
-  transition: color 0.3s ease;
-
-  &:hover {
-    color: #c61b09;
-  }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.about-modal-content > div {
-  display: flex;
-  flex-direction: column;
-  animation: fadeIn 0.5s ease-out forwards;
-  opacity: 0;
-
-  &:nth-child(1) { animation-delay: 0.2s; }
-  &:nth-child(2) { animation-delay: 0.3s; }
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="about-page" @click.stop>
+    <div class="about-modal">
+      <div class="about-modal-content">
+        <div class="tech-stack">
+          <h3>使用的技术栈</h3>
+          <ul class="tech-list">
+            <li v-for="tech in techStack" :key="tech.name" :class="['tech-item', tech.name.toLowerCase()]">
+              <i :class="tech.icon"></i>
+              {{ tech.name }}
+            </li>
+          </ul>
+        </div>
+        <div class="github-info">
+          <h3>开源地址</h3>
+          <div class="github-links">
+            <a href="https://github.com/JLinMr/Home-Vue" target="_blank" class="github-link">
+              <i class="fab fa-github"></i>
+              <div class="link-content">
+                <span class="link-title">静态原项目</span>
+                <span class="link-desc">Home-Vue</span>
+              </div>
+            </a>
+            <a href="https://github.com/QWQLwToo/Home-Vue-go" target="_blank" rel="noopener noreferrer" class="github-link">
+              <i class="fab fa-github"></i>
+              <div class="link-content">
+                <span class="link-title">动态现项目</span>
+                <span class="link-desc">Home-Vue-go</span>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <button @click="closeModal" class="close-btn">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['close']);
+
+const techStack = [
+  // 前端技术栈
+  { name: 'Vue3', icon: 'fab fa-vuejs' },
+  { name: 'Vite', icon: 'fas fa-bolt' },
+  { name: 'CSS3', icon: 'fab fa-css3-alt' },
+  { name: 'HTML5', icon: 'fab fa-html5' },
+  { name: 'JavaScript', icon: 'fab fa-js' },
+  // 后端技术栈
+  { name: 'Go', icon: 'fab fa-golang' },
+  { name: 'Gin', icon: 'fas fa-server' },
+  { name: 'SQLite', icon: 'fas fa-database' },
+  { name: 'Ent', icon: 'fas fa-code-branch' },
+  { name: 'JWT', icon: 'fas fa-key' }
+];
+const closeModal = () => emit('close');
+</script>
+
+<style scoped>
+.about-page {
+  width: 500px;
+  backdrop-filter: blur(5px);
+  background-color: rgba(var(--background-color-rgb), 0.9);
+  padding: 40px;
+  border-radius: var(--border-radius);
+  position: relative;
+  text-align: center;
+  box-sizing: border-box;
+
+  @media (max-width: 600px) {
+    padding: 20px;
+    width: 90%;
+    margin: auto;
+  }
+}
+
+h3 {
+  border-bottom: 2px solid var(--border-color);
+  padding-bottom: 10px;
+}
+
+.tech-stack ul,
+.tech-list {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.tech-stack li,
+.tech-item {
+  padding: 10px 15px;
+  border-radius: var(--border-radius);
+  transition: all 0.3s ease;
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+}
+
+.tech-stack li:hover,
+.tech-item:hover {
+  background-color: var(--hover-other-color);
+  color: var(--hover-link-color);
+}
+
+.tech-stack li i,
+.tech-item i {
+  font-size: 1.5em;
+}
+
+@media (max-width: 600px) {
+  .tech-stack li,
+  .tech-item {
+    font-size: 0.8em;
+  }
+}
+
+.github-links {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  width: 100%;
+}
+
+.github-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: #040404d0;
+  color: white;
+  padding: 15px 20px;
+  border-radius: var(--border-radius);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  flex: 1;
+
+  &:hover {
+    background-color: #1a1a1a;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  i {
+    font-size: 1.5em;
+    flex-shrink: 0;
+  }
+
+  .link-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    text-align: left;
+  }
+
+  .link-title {
+    font-size: 0.9em;
+    opacity: 0.9;
+  }
+
+  .link-desc {
+    font-size: 0.85em;
+    opacity: 0.7;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+@media (max-width: 600px) {
+  .github-links {
+    grid-template-columns: 1fr;
+  }
+}
+
+.close-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: none;
+  border: none;
+  font-size: 1.5em;
+  cursor: pointer;
+  color: #7f8c8d;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: #c61b09;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.about-modal-content > div {
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 0.5s ease-out forwards;
+  opacity: 0;
+
+  &:nth-child(1) { animation-delay: 0.2s; }
+  &:nth-child(2) { animation-delay: 0.3s; }
+}
+</style>
diff --git a/src/components/Admin.vue b/src/components/Admin.vue
index d77bfd2..c2cbbca 100644
--- a/src/components/Admin.vue
+++ b/src/components/Admin.vue
@@ -1,2984 +1,454 @@
-<template>
-  <div class="admin-wrapper">
-    <!-- 侧边栏 -->
-    <aside class="admin-sidebar">
-      <div class="sidebar-header">
-        <h1 class="sidebar-logo">
-          <i class="fas fa-cog"></i>
-          <span>管理面板</span>
-        </h1>
-      </div>
-      
-      <nav class="sidebar-nav">
-        <button
-          v-for="tab in tabs"
-          :key="tab"
-          @click="handleTabChange(tab)"
-          :class="['nav-item', { active: activeTab === tab }]"
-        >
-          <i :class="getTabIcon(tab)"></i>
-          <span>{{ tab }}</span>
-        </button>
-      </nav>
-
-      <div class="sidebar-footer">
-        <div
-          class="user-footer-wrapper"
-          @mouseenter="userMenuOpen = true"
-          @mouseleave="userMenuOpen = false"
-        >
-          <button class="user-avatar-btn" type="button" title="用户菜单">
-            <i class="fas fa-user-circle"></i>
-          </button>
-          <div class="user-menu" :class="{ open: userMenuOpen }">
-            <div class="user-menu-header">
-              <i class="fas fa-user"></i>
-              <span>用户菜单</span>
-            </div>
-            <button
-              type="button"
-              class="user-menu-item"
-              @click="showChangePasswordModal = true; userMenuOpen = false"
-            >
-              <i class="fas fa-key"></i>
-              <span>修改密码</span>
-            </button>
-          </div>
-        </div>
-        <button @click="logout" class="logout-icon-btn" type="button" title="退出登录">
-          <i class="fas fa-sign-out-alt"></i>
-        </button>
-      </div>
-    </aside>
-
-    <!-- 主内容区 -->
-    <main class="admin-main">
-      <!-- 顶部栏 -->
-      <header class="admin-topbar">
-        <h2 class="page-title">
-          <i :class="getTabIcon(activeTab)"></i>
-          <span>{{ activeTab }}</span>
-        </h2>
-        <div class="topbar-actions">
-          <button v-if="activeTab === '站点配置'" @click="saveSiteConfig" class="btn-save">
-            <i class="fas fa-save"></i>
-            <span>保存配置</span>
-          </button>
-          <button v-if="activeTab === '站点管理'" @click="showSiteForm = true" class="btn-primary">
-            <i class="fas fa-plus"></i>
-            <span>添加站点</span>
-          </button>
-          <button v-if="activeTab === '联系方式管理'" @click="showContactForm = true" class="btn-primary">
-            <i class="fas fa-plus"></i>
-            <span>添加联系方式</span>
-          </button>
-        </div>
-      </header>
-
-      <!-- 内容区域 -->
-      <div class="admin-content">
-        <!-- 加载状态 -->
-        <div v-if="loading" class="loading-overlay">
-          <div class="loading-spinner">
-            <i class="fas fa-spinner fa-spin"></i>
-            <p>加载中...</p>
-          </div>
-        </div>
-
-        <!-- 仪表盘 -->
-        <div v-if="activeTab === '仪表盘' && !loading" class="content-section">
-          <Dashboard />
-        </div>
-
-        <!-- 站点配置 -->
-        <div v-if="activeTab === '站点配置' && !loading" class="content-section">
-          <!-- 配置子标签 -->
-          <div class="config-subtabs">
-            <button
-              v-for="subTab in configSubTabs"
-              :key="subTab"
-              @click="activeConfigSubTab = subTab"
-              :class="['subtab-btn', { active: activeConfigSubTab === subTab }]"
-            >
-              <i :class="getConfigSubTabIcon(subTab)"></i>
-              <span>{{ subTab }}</span>
-            </button>
-          </div>
-
-          <!-- 基础信息 -->
-          <div v-if="activeConfigSubTab === '基础信息'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-info-circle"></i> 基础信息</h3>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>站点名称</label>
-                    <input v-model="siteConfig.siteName" type="text" placeholder="输入站点名称" />
-                    <small class="form-hint">此名称将显示在网站各个位置</small>
-                  </div>
-                  <div class="form-group">
-                    <label>站点URL</label>
-                    <input v-model="siteConfig.siteURL" type="url" placeholder="https://example.com" />
-                    <small class="form-hint">网站的完整URL地址</small>
-                  </div>
-                  <div class="form-group">
-                    <label>站点描述</label>
-                    <textarea v-model="siteConfig.siteDescription" rows="3" placeholder="输入站点描述"></textarea>
-                    <small class="form-hint">网站的描述信息，用于SEO和社交媒体分享</small>
-                  </div>
-                  <div class="form-group">
-                    <label>站点关键词</label>
-                    <input v-model="siteConfig.siteKeywords" type="text" placeholder="关键词1, 关键词2, 关键词3" />
-                    <small class="form-hint">
-                      <i class="fas fa-info-circle"></i>
-                      多个关键词请使用<strong>英文逗号</strong>（,）分隔，例如：个人主页,Vue3,前端开发
-                    </small>
-                  </div>
-                  <div class="form-group">
-                    <label>底部版权年份</label>
-                    <div class="color-input-group">
-                      <input
-                        v-model="siteConfig.footerYearStart"
-                        type="text"
-                        inputmode="numeric"
-                        pattern="[0-9]*"
-                        placeholder="起始年份，例如：2020"
-                      />
-                      <span>-</span>
-                      <input
-                        v-model="siteConfig.footerYearEnd"
-                        type="text"
-                        inputmode="numeric"
-                        pattern="[0-9]*"
-                        placeholder="结束年份（可选）"
-                      />
-                    </div>
-                    <small class="form-hint">
-                      <i class="fas fa-info-circle"></i>
-                      只填写起始年份时，底部显示为「© 起始年份」；同时填写起止年份且不同，则显示为「© 起始年份-结束年份」。
-                    </small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 用户信息 -->
-          <div v-if="activeConfigSubTab === '用户信息'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-user"></i> 用户信息</h3>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>用户名</label>
-                    <input v-model="siteConfig.userName" type="text" placeholder="输入用户名" />
-                    <small class="form-hint">显示在主页上的用户名</small>
-                  </div>
-                  <div class="form-group">
-                    <label>头像</label>
-                    <IconSelector
-                      v-model="siteConfig.profileImageURL"
-                      default-icon-path=""
-                    />
-                    <small class="form-hint">支持上传、URL或使用默认图标</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 图标配置 -->
-          <div v-if="activeConfigSubTab === '图标配置'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-image"></i> 图标配置</h3>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>站点图标</label>
-                    <IconSelector v-model="siteConfig.siteIcon" default-icon-path="/favicon.ico" />
-                    <small class="form-hint">网站的主要图标</small>
-                  </div>
-                  <div class="form-group">
-                    <label>网页图标（Favicon）</label>
-                    <IconSelector v-model="siteConfig.favicon" default-icon-path="/favicon.ico" />
-                    <small class="form-hint">浏览器标签页显示的图标</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 备案信息 -->
-          <div v-if="activeConfigSubTab === '备案信息'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-certificate"></i> 备案信息</h3>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>ICP备案号</label>
-                    <input v-model="siteConfig.icpNumber" type="text" placeholder="暂未填写" />
-                    <small class="form-hint">ICP备案号，将显示在网站底部。留空或填写"暂未填写"则不显示</small>
-                  </div>
-                  <div class="form-group">
-                    <label>公安备案号</label>
-                    <input v-model="siteConfig.policeNumber" type="text" placeholder="暂未填写" />
-                    <small class="form-hint">公安备案号，将显示在网站底部。留空或填写"暂未填写"则不显示</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 前端配置 -->
-          <div v-if="activeConfigSubTab === '前端配置'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-code"></i> 前端配置</h3>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>网页标题</label>
-                    <input v-model="siteConfig.pageTitle" type="text" placeholder="例如：梦爱吃鱼 - 个人主页" />
-                    <small class="form-hint">浏览器标签页显示的标题</small>
-                  </div>
-                  <div class="form-group">
-                    <label>图标库CDN地址</label>
-                    <input v-model="siteConfig.iconLibrary" type="text" placeholder="//lib.baomitu.com/font-awesome/6.5.0/css/all.min.css" />
-                    <small class="form-hint">Font Awesome图标库地址，用于显示图标</small>
-                  </div>
-                  <div class="form-group">
-                    <label>字体库CDN地址</label>
-                    <input v-model="siteConfig.fontLibrary" type="text" placeholder="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
-                    <small class="form-hint">自定义字体库地址，留空则使用默认字体</small>
-                  </div>
-                  <div class="form-group">
-                    <label class="switch-label">
-                      <span>显示停留时间</span>
-                      <label class="switch">
-                        <input type="checkbox" v-model="siteConfig.showVisitTimer" />
-                        <span class="slider"></span>
-                      </label>
-                    </label>
-                    <small class="form-hint">控制主页是否显示停留时间和日期信息</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 轮换文本配置 -->
-          <div v-if="activeConfigSubTab === '轮换文本'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card rotating-text-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-text-height"></i> 轮换文本配置</h3>
-                  <button @click="saveRotatingTexts" class="btn-save">
-                    <i class="fas fa-save"></i>
-                    <span>保存文本配置</span>
-                  </button>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>轮换文本列表</label>
-                    <small class="form-hint">最多可配置8条文本，这些文本将在主页上轮换显示</small>
-                    <div class="rotating-texts-list">
-                      <div
-                        v-for="(text, index) in rotatingTexts"
-                        :key="index"
-                        class="rotating-text-item"
-                      >
-                        <div class="text-item-header">
-                          <span class="text-index">文本 {{ index + 1 }}</span>
-                          <button
-                            v-if="rotatingTexts.length > 1"
-                            @click="removeRotatingText(index)"
-                            class="btn-remove-text"
-                            type="button"
-                            title="删除"
-                          >
-                            <i class="fas fa-times"></i>
-                          </button>
-                        </div>
-                        <textarea
-                          v-model="rotatingTexts[index]"
-                          rows="2"
-                          :placeholder="`输入第 ${index + 1} 条轮换文本...`"
-                          class="text-input"
-                        ></textarea>
-                      </div>
-                      <button
-                        v-if="rotatingTexts.length < 8"
-                        @click="addRotatingText"
-                        class="btn-add-text"
-                        type="button"
-                      >
-                        <i class="fas fa-plus"></i>
-                        添加文本（{{ rotatingTexts.length }}/8）
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 统计配置 -->
-          <div v-if="activeConfigSubTab === '统计配置'" class="config-tab-content">
-            <div class="config-grid">
-              <div class="config-card">
-                <div class="card-header">
-                  <h3><i class="fas fa-chart-line"></i> 统计配置</h3>
-                </div>
-                <div class="card-body">
-                  <div class="form-group">
-                    <label>Umami统计脚本地址</label>
-                    <input v-model="siteConfig.umamiScript" type="text" placeholder="umami.is/tongji.js" />
-                    <small class="form-hint">留空则不启用统计</small>
-                  </div>
-                  <div class="form-group">
-                    <label>Umami统计网站ID</label>
-                    <input v-model="siteConfig.umamiWebsiteId" type="text" placeholder="请填写正确的umami统计id" />
-                    <small class="form-hint">需要先配置Umami统计脚本地址</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 站点管理 -->
-        <div v-if="activeTab === '站点管理' && !loading" class="content-section">
-          <div class="data-table-card">
-            <div class="table-header">
-              <div class="table-info">
-                <span>共 {{ sites.length }} 个站点</span>
-              </div>
-            </div>
-            <div class="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>ID</th>
-                    <th>名称</th>
-                    <th>URL</th>
-                    <th>图标</th>
-                    <th>排序</th>
-                    <th class="actions-col">操作</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="site in sites" :key="site.id">
-                    <td>{{ site.id }}</td>
-                    <td>
-                      <div class="cell-content">
-                        <i :class="site.icon" v-if="site.icon"></i>
-                        <span>{{ site.name }}</span>
-                      </div>
-                    </td>
-                    <td>
-                      <a :href="site.url" target="_blank" class="link-cell">
-                        {{ site.url }}
-                        <i class="fas fa-external-link-alt"></i>
-                      </a>
-                    </td>
-                    <td>
-                      <code class="icon-code">{{ site.icon }}</code>
-                    </td>
-                    <td>
-                      <span class="badge">{{ site.sortOrder }}</span>
-                    </td>
-                    <td class="actions-cell">
-                      <button @click="editSite(site)" class="btn-icon btn-edit" title="编辑">
-                        <i class="fas fa-edit"></i>
-                      </button>
-                      <button @click="deleteSite(site.id)" class="btn-icon btn-delete" title="删除">
-                        <i class="fas fa-trash"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr v-if="sites.length === 0">
-                    <td colspan="6" class="empty-state">
-                      <i class="fas fa-inbox"></i>
-                      <p>暂无站点，点击上方"添加站点"按钮创建</p>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <!-- 联系方式管理 -->
-        <div v-if="activeTab === '联系方式管理' && !loading" class="content-section">
-          <div class="data-table-card">
-            <div class="table-header">
-              <div class="table-info">
-                <span>共 {{ contacts.length }} 个联系方式</span>
-              </div>
-            </div>
-            <div class="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>ID</th>
-                    <th>类型</th>
-                    <th>图标</th>
-                    <th>URL/二维码</th>
-                    <th>悬停颜色</th>
-                    <th>排序</th>
-                    <th class="actions-col">操作</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="contact in contacts" :key="contact.id">
-                    <td>{{ contact.id }}</td>
-                    <td>
-                      <span class="type-badge" :style="{ backgroundColor: contact.hoverColor + '20', color: contact.hoverColor }">
-                        {{ contact.type }}
-                      </span>
-                    </td>
-                    <td>
-                      <div class="icon-preview">
-                        <i :class="contact.icon" :style="{ color: contact.hoverColor }"></i>
-                      </div>
-                    </td>
-                    <td>
-                      <div class="url-cell">
-                        <a v-if="contact.url" :href="contact.url" target="_blank" class="link-cell">
-                          {{ contact.url }}
-                          <i class="fas fa-external-link-alt"></i>
-                        </a>
-                        <span v-else-if="contact.qrCode" class="qr-indicator">
-                          <i class="fas fa-qrcode"></i>
-                          二维码
-                        </span>
-                        <span v-else class="text-muted">-</span>
-                      </div>
-                    </td>
-                    <td>
-                      <div class="color-preview">
-                        <span class="color-dot" :style="{ backgroundColor: contact.hoverColor }"></span>
-                        <code>{{ contact.hoverColor }}</code>
-                      </div>
-                    </td>
-                    <td>
-                      <span class="badge">{{ contact.sortOrder }}</span>
-                    </td>
-                    <td class="actions-cell">
-                      <button @click="editContact(contact)" class="btn-icon btn-edit" title="编辑">
-                        <i class="fas fa-edit"></i>
-                      </button>
-                      <button @click="deleteContact(contact.id)" class="btn-icon btn-delete" title="删除">
-                        <i class="fas fa-trash"></i>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr v-if="contacts.length === 0">
-                    <td colspan="7" class="empty-state">
-                      <i class="fas fa-inbox"></i>
-                      <p>暂无联系方式，点击上方"添加联系方式"按钮创建</p>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-
-    <!-- 站点表单模态框 -->
-    <Transition name="modal">
-      <div v-if="showSiteForm" class="modal-overlay" @click="showSiteForm = false">
-        <div class="modal-content" @click.stop>
-          <div class="modal-header">
-            <h3>
-              <i class="fas" :class="editingSite ? 'fa-edit' : 'fa-plus'"></i>
-              {{ editingSite ? '编辑站点' : '添加站点' }}
-            </h3>
-            <button @click="cancelSiteForm" class="modal-close">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-          <div class="modal-body">
-            <div class="form-group">
-              <label>名称 <span class="required">*</span></label>
-              <input v-model="siteForm.name" type="text" placeholder="输入站点名称" required />
-            </div>
-            <div class="form-group">
-              <label>URL <span class="required">*</span></label>
-              <input v-model="siteForm.url" type="url" placeholder="https://example.com" required />
-            </div>
-            <div class="form-group">
-              <label>图标类名 <span class="required">*</span></label>
-              <div class="icon-input-wrapper">
-                <input 
-                  v-model="siteForm.icon" 
-                  type="text" 
-                  placeholder="点击右侧按钮选择图标" 
-                  required 
-                  readonly
-                  class="icon-input"
-                />
-                <button @click="openIconPicker('site')" type="button" class="icon-picker-btn">
-                  <i class="fas fa-icons"></i>
-                  选择图标
-                </button>
-              </div>
-              <small class="form-hint">点击"选择图标"按钮从图标库中选择，或手动输入Font Awesome图标类名</small>
-              <div v-if="siteForm.icon" class="icon-preview-inline">
-                <i :class="siteForm.icon"></i>
-                <code>{{ siteForm.icon }}</code>
-              </div>
-            </div>
-            <div class="form-group">
-              <label>排序</label>
-              <input v-model.number="siteForm.sortOrder" type="number" min="0" />
-              <small class="form-hint">数字越小越靠前</small>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button @click="cancelSiteForm" class="btn-secondary">
-              <i class="fas fa-times"></i>
-              <span>取消</span>
-            </button>
-            <button @click="saveSite" class="btn-primary">
-              <i class="fas fa-save"></i>
-              <span>保存</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-
-    <!-- 联系方式表单模态框 -->
-    <Transition name="modal">
-      <div v-if="showContactForm" class="modal-overlay" @click="showContactForm = false">
-        <div class="modal-content" @click.stop>
-          <div class="modal-header">
-            <h3>
-              <i class="fas" :class="editingContact ? 'fa-edit' : 'fa-plus'"></i>
-              {{ editingContact ? '编辑联系方式' : '添加联系方式' }}
-            </h3>
-            <button @click="cancelContactForm" class="modal-close">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-          <div class="modal-body">
-            <div class="form-group">
-              <label>类型 <span class="required">*</span></label>
-              <select v-model="contactForm.type" required>
-                <option value="Email">Email</option>
-                <option value="Github">Github</option>
-                <option value="支付宝">支付宝</option>
-                <option value="微信">微信</option>
-                <option value="其他">其他</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label>图标类名 <span class="required">*</span></label>
-              <div class="icon-input-wrapper">
-                <input 
-                  v-model="contactForm.icon" 
-                  type="text" 
-                  placeholder="点击右侧按钮选择图标" 
-                  required 
-                  readonly
-                  class="icon-input"
-                />
-                <button @click="openIconPicker('contact')" type="button" class="icon-picker-btn">
-                  <i class="fas fa-icons"></i>
-                  选择图标
-                </button>
-              </div>
-              <small class="form-hint">点击"选择图标"按钮从图标库中选择，或手动输入Font Awesome图标类名</small>
-              <div v-if="contactForm.icon" class="icon-preview-inline">
-                <i :class="contactForm.icon"></i>
-                <code>{{ contactForm.icon }}</code>
-              </div>
-            </div>
-            <div class="form-group" v-if="contactForm.type === 'Email' || contactForm.type === 'Github'">
-              <label>URL <span class="required">*</span></label>
-              <input v-model="contactForm.url" type="text" :placeholder="contactForm.type === 'Email' ? 'mailto:example@domain.com' : 'https://...'" required />
-              <small class="form-hint" v-if="contactForm.type === 'Email'">Email必须使用mailto:格式</small>
-            </div>
-            <div class="form-group" v-if="contactForm.type === '支付宝' || contactForm.type === '微信'">
-              <label>二维码图片 <span class="required">*</span></label>
-              <IconSelector
-                v-model="contactForm.qrCode"
-                default-icon-path=""
-              />
-            </div>
-            <div class="form-group">
-              <label>悬停颜色</label>
-              <div class="color-input-group">
-                <input v-model="contactForm.hoverColor" type="color" />
-                <input v-model="contactForm.hoverColor" type="text" placeholder="#000000" />
-              </div>
-            </div>
-            <div class="form-group">
-              <label>排序</label>
-              <input v-model.number="contactForm.sortOrder" type="number" min="0" />
-              <small class="form-hint">数字越小越靠前</small>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button @click="cancelContactForm" class="btn-secondary">
-              <i class="fas fa-times"></i>
-              <span>取消</span>
-            </button>
-            <button @click="saveContact" class="btn-primary">
-              <i class="fas fa-save"></i>
-              <span>保存</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-
-    <!-- 图标选择器模态框 -->
-    <Transition name="modal">
-      <div v-if="showIconPicker" class="modal-overlay" @click.self="showIconPicker = false">
-        <div class="modal-content icon-picker-modal" @click.stop>
-          <div class="modal-header">
-            <h3>
-              <i class="fas fa-icons"></i>
-              选择图标
-            </h3>
-            <button @click="showIconPicker = false" class="modal-close">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-          <div class="modal-body icon-picker-modal-body">
-            <IconPicker 
-              :modelValue="iconPickerTarget === 'site' ? siteForm.icon : contactForm.icon"
-              @close="showIconPicker = false"
-              @update:modelValue="handleIconSelect"
-            />
-          </div>
-        </div>
-      </div>
-    </Transition>
-
-    <!-- 修改密码模态框 -->
-    <Transition name="modal">
-      <div v-if="showChangePasswordModal" class="modal-overlay" @click.self="closePasswordModal">
-        <div class="modal-content password-modal" @click.stop>
-          <div class="modal-header">
-            <div class="modal-header-content">
-              <div class="modal-icon-wrapper">
-                <i class="fas fa-key"></i>
-              </div>
-              <div>
-                <h3>修改密码</h3>
-                <p class="modal-subtitle">为了您的账户安全，请定期更新密码</p>
-              </div>
-            </div>
-            <button @click="closePasswordModal" class="modal-close">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-          <div class="modal-body">
-            <div class="password-form">
-              <div class="form-group">
-                <label>
-                  <i class="fas fa-lock"></i>
-                  当前密码 <span class="required">*</span>
-                </label>
-                <div class="password-input-wrapper">
-                  <input
-                    v-model="passwordForm.oldPassword"
-                    :type="showOldPassword ? 'text' : 'password'"
-                    placeholder="请输入当前密码"
-                    required
-                    class="password-input"
-                    @focus="passwordFormErrors.oldPassword = ''"
-                  />
-                  <button
-                    type="button"
-                    @click="showOldPassword = !showOldPassword"
-                    class="password-toggle"
-                    :title="showOldPassword ? '隐藏密码' : '显示密码'"
-                  >
-                    <i :class="showOldPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
-                  </button>
-                </div>
-                <small v-if="passwordFormErrors.oldPassword" class="form-error">
-                  <i class="fas fa-exclamation-circle"></i>
-                  {{ passwordFormErrors.oldPassword }}
-                </small>
-              </div>
-
-              <div class="form-group">
-                <label>
-                  <i class="fas fa-key"></i>
-                  新密码 <span class="required">*</span>
-                </label>
-                <div class="password-input-wrapper">
-                  <input
-                    v-model="passwordForm.newPassword"
-                    :type="showNewPassword ? 'text' : 'password'"
-                    placeholder="至少8位字符，建议包含字母、数字和特殊字符"
-                    required
-                    class="password-input"
-                    @input="validatePassword"
-                    @focus="passwordFormErrors.newPassword = ''"
-                  />
-                  <button
-                    type="button"
-                    @click="showNewPassword = !showNewPassword"
-                    class="password-toggle"
-                    :title="showNewPassword ? '隐藏密码' : '显示密码'"
-                  >
-                    <i :class="showNewPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
-                  </button>
-                </div>
-                <small class="form-hint">密码至少8位字符，建议包含大小写字母、数字和特殊字符</small>
-                <div v-if="passwordStrength" class="password-strength">
-                  <div class="strength-bar" :class="passwordStrength.level">
-                    <div class="strength-fill" :style="{ width: passwordStrength.percent + '%' }"></div>
-                  </div>
-                  <div class="strength-info">
-                    <span class="strength-text" :class="passwordStrength.level">
-                      <i :class="getStrengthIcon(passwordStrength.level)"></i>
-                      {{ passwordStrength.text }}
-                    </span>
-                    <span class="strength-tips" v-if="passwordStrength.tips">
-                      {{ passwordStrength.tips }}
-                    </span>
-                  </div>
-                </div>
-                <small v-if="passwordFormErrors.newPassword" class="form-error">
-                  <i class="fas fa-exclamation-circle"></i>
-                  {{ passwordFormErrors.newPassword }}
-                </small>
-              </div>
-
-              <div class="form-group">
-                <label>
-                  <i class="fas fa-check-double"></i>
-                  确认新密码 <span class="required">*</span>
-                </label>
-                <div class="password-input-wrapper">
-                  <input
-                    v-model="passwordForm.confirmPassword"
-                    :type="showConfirmPassword ? 'text' : 'password'"
-                    placeholder="请再次输入新密码"
-                    required
-                    class="password-input"
-                    :class="{ 'input-error': passwordMismatch && passwordForm.confirmPassword }"
-                    @focus="passwordFormErrors.confirmPassword = ''"
-                  />
-                  <button
-                    type="button"
-                    @click="showConfirmPassword = !showConfirmPassword"
-                    class="password-toggle"
-                    :title="showConfirmPassword ? '隐藏密码' : '显示密码'"
-                  >
-                    <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
-                  </button>
-                </div>
-                <small v-if="passwordMismatch && passwordForm.confirmPassword" class="form-error">
-                  <i class="fas fa-exclamation-circle"></i>
-                  两次输入的密码不一致
-                </small>
-                <small v-else-if="passwordForm.confirmPassword && !passwordMismatch" class="form-success">
-                  <i class="fas fa-check-circle"></i>
-                  密码匹配
-                </small>
-                <small v-if="passwordFormErrors.confirmPassword" class="form-error">
-                  <i class="fas fa-exclamation-circle"></i>
-                  {{ passwordFormErrors.confirmPassword }}
-                </small>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button @click="closePasswordModal" class="btn-secondary">
-              <i class="fas fa-times"></i>
-              <span>取消</span>
-            </button>
-            <button
-              @click="changePassword"
-              class="btn-primary"
-              :disabled="!canSubmitPassword || changingPassword"
-            >
-              <i v-if="changingPassword" class="fas fa-spinner fa-spin"></i>
-              <i v-else class="fas fa-save"></i>
-              <span>{{ changingPassword ? '修改中...' : '确认修改' }}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { adminAPI } from '../api'
-import IconSelector from './IconSelector.vue'
-import IconPicker from './IconPicker.vue'
-import Dashboard from './Dashboard.vue'
-import { loadAndApplyFrontendConfig } from '../utils/frontendConfig'
-
-const route = useRoute()
-const router = useRouter()
-
-const tabs = ['仪表盘', '站点配置', '站点管理', '联系方式管理']
-const activeTab = ref('仪表盘')
-const configSubTabs = ['基础信息', '用户信息', '图标配置', '备案信息', '前端配置', '轮换文本', '统计配置']
-const activeConfigSubTab = ref('基础信息')
-const loading = ref(false)
-const sites = ref([])
-const contacts = ref([])
-const siteConfig = ref({
-  siteName: '',
-  siteURL: '',
-  siteIcon: '',
-  siteDescription: '',
-  siteKeywords: '',
-  userName: '',
-  profileImageURL: '',
-  icpNumber: '',
-  policeNumber: '',
-  pageTitle: '',
-  favicon: '',
-  umamiScript: '',
-  umamiWebsiteId: '',
-  iconLibrary: '',
-  fontLibrary: '',
-  // 底部版权年份
-  footerYearStart: '',
-  footerYearEnd: '',
-  // 显示停留时间
-  showVisitTimer: true,
-})
-
-const rotatingTexts = ref([
-  "你好鸭，欢迎来到我的主页！！",
-  "随时可以联系我，期待与你交流。",
-  "愿你历尽千帆，归来仍是少年。",
-  "梦想还是要有的，万一实现了呢？",
-  "I hope you have a happy day every day."
-])
-
-const showSiteForm = ref(false)
-const showContactForm = ref(false)
-const showChangePasswordModal = ref(false)
-const showIconPicker = ref(false)
-const iconPickerTarget = ref(null) // 'site' 或 'contact'
-const editingSite = ref(null)
-const editingContact = ref(null)
-
-// 修改密码相关
-const passwordForm = ref({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: ''
-})
-const showOldPassword = ref(false)
-const showNewPassword = ref(false)
-const showConfirmPassword = ref(false)
-const passwordStrength = ref(null)
-const changingPassword = ref(false)
-const passwordFormErrors = ref({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: ''
-})
-
-const siteForm = ref({
-  name: '',
-  url: '',
-  icon: '',
-  sortOrder: 0,
-})
-
-const contactForm = ref({
-  type: 'Email',
-  icon: '',
-  url: '',
-  qrCode: '',
-  hoverColor: '#000000',
-  sortOrder: 0,
-})
-
-// 左下角用户菜单状态
-const userMenuOpen = ref(false)
-
-// 打开图标选择器
-const openIconPicker = (target) => {
-  // target: 'site' 或 'contact'
-  iconPickerTarget.value = target
-  showIconPicker.value = true
-}
-
-// 处理从图标选择器返回的图标
-const handleIconSelect = (icon) => {
-  if (iconPickerTarget.value === 'site') {
-    siteForm.value.icon = icon
-  } else if (iconPickerTarget.value === 'contact') {
-    contactForm.value.icon = icon
-  }
-}
-
-const getTabIcon = (tab) => {
-  const icons = {
-    '仪表盘': 'fas fa-chart-bar',
-    '站点配置': 'fas fa-cog',
-    '站点管理': 'fas fa-link',
-    '联系方式管理': 'fas fa-address-book'
-  }
-  return icons[tab] || 'fas fa-circle'
-}
-
-const getConfigSubTabIcon = (subTab) => {
-  const icons = {
-    '基础信息': 'fas fa-info-circle',
-    '用户信息': 'fas fa-user',
-    '图标配置': 'fas fa-image',
-    '备案信息': 'fas fa-certificate',
-    '前端配置': 'fas fa-code',
-    '轮换文本': 'fas fa-text-height',
-    '统计配置': 'fas fa-chart-line'
-  }
-  return icons[subTab] || 'fas fa-circle'
-}
-
-const handleTabChange = (tab) => {
-  activeTab.value = tab
-  // 切换到站点配置时，重置子标签为第一个
-  if (tab === '站点配置') {
-    activeConfigSubTab.value = '基础信息'
-  }
-  // 更新路由参数
-  updateRoute()
-}
-
-const updateRoute = () => {
-  const params = {}
-  if (activeTab.value !== '仪表盘') {
-    params.tab = activeTab.value
-  }
-  if (activeTab.value === '站点配置' && activeConfigSubTab.value !== '基础信息') {
-    params.subTab = activeConfigSubTab.value
-  }
-  router.replace({ 
-    path: '/admin',
-    query: params 
-  })
-}
-
-// 监听子标签变化
-watch(activeConfigSubTab, () => {
-  if (activeTab.value === '站点配置') {
-    updateRoute()
-  }
-})
-
-const loadData = async () => {
-  loading.value = true
-  try {
-    const [sitesRes, contactsRes, configRes, textsRes] = await Promise.all([
-      adminAPI.getSites(),
-      adminAPI.getContacts(),
-      adminAPI.getSiteConfig(),
-      adminAPI.getRotatingTexts().catch(() => ({ data: { texts: [] } })),
-    ])
-    sites.value = sitesRes.data
-    contacts.value = contactsRes.data
-    Object.assign(siteConfig.value, configRes.data)
-    // 确保 showVisitTimer 正确赋值，处理 false 值
-    if (configRes.data.showVisitTimer !== undefined) {
-      siteConfig.value.showVisitTimer = Boolean(configRes.data.showVisitTimer)
-    }
-    console.log('Admin 加载配置 - showVisitTimer:', siteConfig.value.showVisitTimer, '原始值:', configRes.data.showVisitTimer)
-    if (textsRes.data?.texts && textsRes.data.texts.length > 0) {
-      rotatingTexts.value = textsRes.data.texts
-    }
-  } catch (error) {
-    console.error('加载数据失败:', error)
-    showNotification('加载数据失败: ' + (error.response?.data?.error || error.message), 'error')
-  } finally {
-    loading.value = false
-  }
-}
-
-const addRotatingText = () => {
-  if (rotatingTexts.value.length < 8) {
-    rotatingTexts.value.push('')
-  }
-}
-
-const removeRotatingText = (index) => {
-  if (rotatingTexts.value.length > 1) {
-    rotatingTexts.value.splice(index, 1)
-  }
-}
-
-const saveRotatingTexts = async () => {
-  try {
-    // 过滤空文本
-    const filteredTexts = rotatingTexts.value.filter(text => text.trim() !== '')
-    if (filteredTexts.length === 0) {
-      showNotification('至少需要保留一条文本', 'error')
-      return
-    }
-    
-    await adminAPI.updateRotatingTexts(filteredTexts)
-    rotatingTexts.value = filteredTexts
-    showNotification('轮换文本配置保存成功', 'success')
-  } catch (error) {
-    showNotification('保存失败: ' + (error.response?.data?.error || error.message), 'error')
-  }
-}
-
-const showNotification = (message, type = 'success') => {
-  // 移除已存在的通知
-  const existingNotifications = document.querySelectorAll('.top-notification')
-  existingNotifications.forEach(n => n.remove())
-  
-  // 顶部呼吸弹窗通知
-  const notification = document.createElement('div')
-  notification.className = 'top-notification'
-  
-  // 根据类型设置样式和图标
-  const typeConfig = {
-    success: {
-      bgColor: 'rgba(76, 175, 80, 0.95)',
-      icon: 'fa-check-circle',
-      borderColor: '#4caf50'
-    },
-    error: {
-      bgColor: 'rgba(244, 67, 54, 0.95)',
-      icon: 'fa-exclamation-circle',
-      borderColor: '#f44336'
-    },
-    warning: {
-      bgColor: 'rgba(255, 152, 0, 0.95)',
-      icon: 'fa-exclamation-triangle',
-      borderColor: '#ff9800'
-    },
-    info: {
-      bgColor: 'rgba(33, 150, 243, 0.95)',
-      icon: 'fa-info-circle',
-      borderColor: '#2196f3'
-    }
-  }
-  
-  const config = typeConfig[type] || typeConfig.success
-  
-  // 先设置初始样式（完全隐藏）
-  notification.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -100%);
-    background: ${config.bgColor};
-    color: white;
-    padding: 18px 40px;
-    border-radius: 0 0 16px 16px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 15px;
-    font-weight: 500;
-    border-bottom: 4px solid ${config.borderColor};
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    min-width: 320px;
-    max-width: 90vw;
-    text-align: center;
-    justify-content: center;
-    opacity: 0;
-    pointer-events: none;
-  `
-  
-  notification.innerHTML = `
-    <i class="fas ${config.icon}" style="font-size: 20px;"></i>
-    <span style="white-space: nowrap;">${message}</span>
-  `
-  
-  document.body.appendChild(notification)
-  
-  // 强制重排，确保初始状态生效
-  void notification.offsetHeight
-  
-  // 应用动画 - 使用双重requestAnimationFrame确保动画正确触发
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      notification.style.animation = 'slideDownAndBreathe 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards'
-      notification.style.opacity = '1'
-      notification.style.pointerEvents = 'auto'
-    })
-  })
-  
-  // 3秒后淡出并移除
-  setTimeout(() => {
-    notification.style.animation = 'slideUpAndFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards'
-    setTimeout(() => {
-      if (notification.parentNode) {
-        notification.remove()
-      }
-    }, 400)
-  }, 3000)
-}
-
-const saveSiteConfig = async () => {
-  try {
-    // 确保年份字段以字符串形式发送，避免后端解析错误
-    // 确保 showVisitTimer 明确包含在 payload 中，即使是 false 值
-    const payload = {
-      ...siteConfig.value,
-      footerYearStart:
-        siteConfig.value.footerYearStart !== undefined && siteConfig.value.footerYearStart !== null
-          ? String(siteConfig.value.footerYearStart).trim()
-          : '',
-      footerYearEnd:
-        siteConfig.value.footerYearEnd !== undefined && siteConfig.value.footerYearEnd !== null
-          ? String(siteConfig.value.footerYearEnd).trim()
-          : '',
-      // 明确包含 showVisitTimer，确保 false 值也能正确发送
-      showVisitTimer: siteConfig.value.showVisitTimer !== undefined 
-        ? Boolean(siteConfig.value.showVisitTimer) 
-        : true,
-    }
-    
-    console.log('保存配置 - showVisitTimer 值:', payload.showVisitTimer, '类型:', typeof payload.showVisitTimer)
-
-    await adminAPI.updateSiteConfig(payload)
-    showNotification('配置保存成功', 'success')
-    
-    // 重新加载配置以获取最新值
-    await loadData()
-    
-    // 触发热重载
-    await triggerHotReload()
-  } catch (error) {
-    showNotification('保存失败: ' + (error.response?.data?.error || error.message), 'error')
-  }
-}
-
-// 热重载功能
-const triggerHotReload = async () => {
-  try {
-    // 通知后端配置已更新
-    await adminAPI.notifyConfigUpdate()
-    
-    // 重新加载前端配置
-    await loadAndApplyFrontendConfig()
-    
-    // 发送消息给其他标签页和主页
-    if (window.BroadcastChannel) {
-      const channel = new BroadcastChannel('config-update')
-      channel.postMessage({ type: 'config-updated' })
-      channel.close()
-    }
-    
-    // 如果当前不在管理页面，刷新页面
-    if (window.location.pathname !== '/admin') {
-      // 延迟刷新，让用户看到通知
-      setTimeout(() => {
-        window.location.reload()
-      }, 1000)
-    }
-  } catch (error) {
-    console.error('热重载失败:', error)
-  }
-}
-
-// 监听配置更新消息
-let broadcastChannel = null
-if (window.BroadcastChannel) {
-  broadcastChannel = new BroadcastChannel('config-update')
-  broadcastChannel.onmessage = (event) => {
-    if (event.data.type === 'config-updated') {
-      loadAndApplyFrontendConfig()
-    }
-  }
-}
-
-const saveSite = async () => {
-  try {
-    if (editingSite.value) {
-      await adminAPI.updateSite(editingSite.value.id, siteForm.value)
-      showNotification('站点更新成功', 'success')
-    } else {
-      await adminAPI.createSite(siteForm.value)
-      showNotification('站点创建成功', 'success')
-    }
-    await loadData()
-    cancelSiteForm()
-  } catch (error) {
-    showNotification('保存失败: ' + (error.response?.data?.error || error.message), 'error')
-  }
-}
-
-const editSite = (site) => {
-  editingSite.value = site
-  siteForm.value = {
-    name: site.name,
-    url: site.url,
-    icon: site.icon,
-    sortOrder: site.sortOrder,
-  }
-  showSiteForm.value = true
-}
-
-const deleteSite = async (id) => {
-  if (!confirm('确定要删除这个站点吗？此操作不可恢复。')) return
-  try {
-    await adminAPI.deleteSite(id)
-    showNotification('站点删除成功', 'success')
-    await loadData()
-  } catch (error) {
-    showNotification('删除失败: ' + (error.response?.data?.error || error.message), 'error')
-  }
-}
-
-const cancelSiteForm = () => {
-  showSiteForm.value = false
-  editingSite.value = null
-  siteForm.value = { name: '', url: '', icon: '', sortOrder: 0 }
-}
-
-const saveContact = async () => {
-  try {
-    if (editingContact.value) {
-      await adminAPI.updateContact(editingContact.value.id, contactForm.value)
-      showNotification('联系方式更新成功', 'success')
-    } else {
-      await adminAPI.createContact(contactForm.value)
-      showNotification('联系方式创建成功', 'success')
-    }
-    await loadData()
-    cancelContactForm()
-  } catch (error) {
-    showNotification('保存失败: ' + (error.response?.data?.error || error.message), 'error')
-  }
-}
-
-const editContact = (contact) => {
-  editingContact.value = contact
-  contactForm.value = { ...contact }
-  showContactForm.value = true
-}
-
-const deleteContact = async (id) => {
-  if (!confirm('确定要删除这个联系方式吗？此操作不可恢复。')) return
-  try {
-    await adminAPI.deleteContact(id)
-    showNotification('联系方式删除成功', 'success')
-    await loadData()
-  } catch (error) {
-    showNotification('删除失败: ' + (error.response?.data?.error || error.message), 'error')
-  }
-}
-
-const cancelContactForm = () => {
-  showContactForm.value = false
-  editingContact.value = null
-  contactForm.value = {
-    type: 'Email',
-    icon: '',
-    url: '',
-    qrCode: '',
-    hoverColor: '#000000',
-    sortOrder: 0,
-  }
-}
-
-// 密码强度验证
-const validatePassword = () => {
-  const password = passwordForm.value.newPassword
-  if (!password) {
-    passwordStrength.value = null
-    passwordFormErrors.value.newPassword = ''
-    return
-  }
-
-  let strength = 0
-  let text = '弱'
-  let level = 'weak'
-  let tips = ''
-
-  // 长度检查
-  if (password.length >= 8) strength++
-  if (password.length >= 12) strength++
-  
-  // 字符类型检查
-  const hasLower = /[a-z]/.test(password)
-  const hasUpper = /[A-Z]/.test(password)
-  const hasNumber = /\d/.test(password)
-  const hasSpecial = /[^a-zA-Z0-9]/.test(password)
-  
-  if (hasLower && hasUpper) strength++
-  if (hasNumber) strength++
-  if (hasSpecial) strength++
-
-  // 确定强度等级
-  if (strength <= 2) {
-    text = '弱'
-    level = 'weak'
-    tips = '建议添加数字、大小写字母或特殊字符'
-  } else if (strength <= 4) {
-    text = '中'
-    level = 'medium'
-    tips = '可以添加特殊字符或增加长度以提升安全性'
-  } else {
-    text = '强'
-    level = 'strong'
-    tips = '密码强度良好'
-  }
-
-  passwordStrength.value = {
-    level,
-    text,
-    percent: Math.min((strength / 6) * 100, 100),
-    tips
-  }
-
-  // 验证错误信息
-  if (password.length < 8) {
-    passwordFormErrors.value.newPassword = '密码长度至少8位'
-  } else {
-    passwordFormErrors.value.newPassword = ''
-  }
-}
-
-// 获取强度图标
-const getStrengthIcon = (level) => {
-  const icons = {
-    weak: 'fas fa-exclamation-circle',
-    medium: 'fas fa-info-circle',
-    strong: 'fas fa-check-circle'
-  }
-  return icons[level] || 'fas fa-circle'
-}
-
-// 关闭密码模态框
-const closePasswordModal = () => {
-  showChangePasswordModal.value = false
-  // 重置表单
-  passwordForm.value = {
-    oldPassword: '',
-    newPassword: '',
-    confirmPassword: ''
-  }
-  passwordStrength.value = null
-  passwordFormErrors.value = {
-    oldPassword: '',
-    newPassword: '',
-    confirmPassword: ''
-  }
-  showOldPassword.value = false
-  showNewPassword.value = false
-  showConfirmPassword.value = false
-}
-
-// 计算密码是否匹配
-const passwordMismatch = computed(() => {
-  return passwordForm.value.newPassword && 
-         passwordForm.value.confirmPassword && 
-         passwordForm.value.newPassword !== passwordForm.value.confirmPassword
-})
-
-// 是否可以提交密码修改
-const canSubmitPassword = computed(() => {
-  return passwordForm.value.oldPassword &&
-         passwordForm.value.newPassword &&
-         passwordForm.value.confirmPassword &&
-         passwordForm.value.newPassword.length >= 8 &&
-         !passwordMismatch.value
-})
-
-// 修改密码
-const changePassword = async () => {
-  // 重置错误信息
-  passwordFormErrors.value = {
-    oldPassword: '',
-    newPassword: '',
-    confirmPassword: ''
-  }
-
-  // 验证表单
-  if (!passwordForm.value.oldPassword) {
-    passwordFormErrors.value.oldPassword = '请输入当前密码'
-    return
-  }
-
-  if (!passwordForm.value.newPassword) {
-    passwordFormErrors.value.newPassword = '请输入新密码'
-    return
-  }
-
-  if (passwordForm.value.newPassword.length < 8) {
-    passwordFormErrors.value.newPassword = '密码长度至少8位'
-    return
-  }
-
-  if (!passwordForm.value.confirmPassword) {
-    passwordFormErrors.value.confirmPassword = '请确认新密码'
-    return
-  }
-
-  if (passwordMismatch.value) {
-    passwordFormErrors.value.confirmPassword = '两次输入的密码不一致'
-    return
-  }
-
-  if (!canSubmitPassword.value) {
-    showNotification('请填写完整信息并确保密码符合要求', 'error')
-    return
-  }
-
-  changingPassword.value = true
-
-  try {
-    await adminAPI.changePassword(
-      passwordForm.value.oldPassword,
-      passwordForm.value.newPassword
-    )
-    showNotification('密码修改成功', 'success')
-    closePasswordModal()
-  } catch (error) {
-    const errorMessage = error.response?.data?.error || error.message || '密码修改失败'
-    showNotification('密码修改失败: ' + errorMessage, 'error')
-    
-    // 根据错误信息设置相应的错误提示
-    if (errorMessage.includes('旧密码') || errorMessage.includes('密码错误')) {
-      passwordFormErrors.value.oldPassword = '当前密码错误'
-    }
-  } finally {
-    changingPassword.value = false
-  }
-}
-
-const logout = () => {
-  if (confirm('确定要退出登录吗？')) {
-    localStorage.removeItem('token')
-    window.location.href = '/login'
-  }
-}
-
-onMounted(() => {
-  // 从路由参数恢复页面状态
-  const tabParam = route.query.tab
-  const subTabParam = route.query.subTab
-  
-  if (tabParam && tabs.includes(tabParam)) {
-    activeTab.value = tabParam
-    if (tabParam === '站点配置' && subTabParam && configSubTabs.includes(subTabParam)) {
-      activeConfigSubTab.value = subTabParam
-    }
-  }
-  
-  loadData()
-})
-
-onUnmounted(() => {
-  if (broadcastChannel) {
-    broadcastChannel.close()
-  }
-})
-</script>
-
-<style scoped>
-/* 主容器 */
-.admin-wrapper {
-  display: flex;
-  min-height: 100vh;
-  background: var(--background-color);
-  color: var(--text-color);
-  font-family: 'HarmonyOS_Regular', 'MiSans', 'HarmonyOS Sans SC', sans-serif;
-}
-
-/* 侧边栏 */
-.admin-sidebar {
-  width: 260px;
-  background: rgba(var(--background-color-rgb), 0.98);
-  backdrop-filter: blur(10px);
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  height: 100vh;
-  left: 0;
-  top: 0;
-  z-index: 100;
-  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
-}
-
-.sidebar-header {
-  padding: 24px 20px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.sidebar-logo {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--text-color);
-}
-
-.sidebar-logo i {
-  font-size: 1.5rem;
-  color: var(--hover-link-color);
-}
-
-.sidebar-nav {
-  flex: 1;
-  padding: 16px 0;
-  overflow-y: auto;
-}
-
-.nav-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 20px;
-  background: transparent;
-  border: none;
-  color: var(--text-color);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: left;
-  font-size: 0.95rem;
-  position: relative;
-}
-
-.nav-item i {
-  width: 20px;
-  text-align: center;
-  font-size: 1.1rem;
-}
-
-.nav-item:hover {
-  background: rgba(var(--background-color-rgb), 0.5);
-  color: var(--hover-link-color);
-}
-
-.nav-item.active {
-  background: linear-gradient(90deg, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.15) 0%, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.08) 100%);
-  color: var(--hover-link-color);
-  font-weight: 600;
-}
-
-.nav-item.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--hover-link-color);
-}
-
-.sidebar-footer {
-  padding: 16px 20px;
-  border-top: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  position: relative;
-}
-
-.user-footer-wrapper {
-  position: relative;
-  flex: 1;
-}
-
-.user-avatar-btn {
-  width: 44px;
-  height: 44px;
-  border: 2px solid var(--border-color);
-  border-radius: 12px;
-  background: linear-gradient(135deg, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.15) 0%, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.1) 100%);
-  color: var(--hover-link-color);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-size: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.user-avatar-btn:hover {
-  background: linear-gradient(135deg, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.25) 0%, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.15) 100%);
-  border-color: var(--hover-link-color);
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.2);
-}
-
-.user-menu {
-  position: absolute;
-  bottom: 60px;
-  left: 0;
-  min-width: 200px;
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.98) 0%, rgba(var(--background-color-rgb), 0.95) 100%);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateX(-10px);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1000;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  overflow: hidden;
-}
-
-.user-menu.open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(0);
-}
-
-.user-menu-header {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text-color);
-  background: rgba(var(--background-color-rgb), 0.5);
-}
-
-.user-menu-header i {
-  color: var(--hover-link-color);
-  font-size: 1rem;
-}
-
-.user-menu-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: transparent;
-  border: none;
-  color: var(--text-color);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: left;
-  font-size: 0.95rem;
-  border-bottom: 1px solid transparent;
-}
-
-.user-menu-item:last-child {
-  border-bottom: none;
-}
-
-.user-menu-item:hover {
-  background: rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.1);
-  color: var(--hover-link-color);
-  padding-left: 20px;
-}
-
-.user-menu-item i {
-  width: 20px;
-  text-align: center;
-  font-size: 1rem;
-  color: var(--hover-link-color);
-}
-
-.logout-icon-btn {
-  width: 44px;
-  height: 44px;
-  border: 2px solid rgba(244, 67, 54, 0.3);
-  border-radius: 12px;
-  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.1) 100%);
-  color: #f44336;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-size: 1.3rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.logout-icon-btn:hover {
-  background: linear-gradient(135deg, rgba(244, 67, 54, 0.25) 0%, rgba(244, 67, 54, 0.15) 100%);
-  border-color: #f44336;
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
-}
-
-.change-password-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: rgba(33, 150, 243, 0.1);
-  color: #2196f3;
-  border: 1px solid rgba(33, 150, 243, 0.3);
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 0.95rem;
-}
-
-.change-password-btn:hover {
-  background: rgba(33, 150, 243, 0.2);
-  border-color: rgba(33, 150, 243, 0.5);
-}
-
-.logout-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: rgba(244, 67, 54, 0.1);
-  color: #f44336;
-  border: 1px solid rgba(244, 67, 54, 0.3);
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 0.95rem;
-}
-
-.logout-btn:hover {
-  background: rgba(244, 67, 54, 0.2);
-  border-color: rgba(244, 67, 54, 0.5);
-}
-
-/* 主内容区 */
-.admin-main {
-  flex: 1;
-  margin-left: 260px;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  overflow: hidden;
-}
-
-.admin-topbar {
-  background: rgba(var(--background-color-rgb), 0.98);
-  backdrop-filter: blur(10px);
-  padding: 20px 32px;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.page-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-color);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.page-title i {
-  color: var(--hover-link-color);
-  font-size: 1.3rem;
-}
-
-.topbar-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.admin-content {
-  flex: 1;
-  padding: 32px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-  height: calc(100vh - 80px);
-  max-height: calc(100vh - 80px);
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-}
-
-.content-section {
-  max-width: 1600px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-/* 配置子标签 */
-.config-subtabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 32px;
-  border-bottom: 2px solid var(--border-color);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  position: relative;
-}
-
-.subtab-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 14px 28px;
-  background: transparent;
-  border: none;
-  border-bottom: 3px solid transparent;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  font-size: 15px;
-  font-weight: 400;
-  white-space: nowrap;
-  font-family: inherit;
-}
-
-.subtab-btn::before {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, var(--hover-link-color), #ffd700);
-  transform: scaleX(0);
-  transform-origin: center;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.subtab-btn:hover {
-  color: var(--text-color);
-  background: rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.05);
-}
-
-.subtab-btn:hover::before {
-  transform: scaleX(0.5);
-}
-
-.subtab-btn.active {
-  color: var(--hover-link-color);
-  font-weight: 500;
-  background: rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.08);
-}
-
-.subtab-btn.active::before {
-  transform: scaleX(1);
-}
-
-.subtab-btn i {
-  font-size: 0.95rem;
-  transition: transform 0.3s ease;
-}
-
-.subtab-btn.active i {
-  transform: scale(1.1);
-  color: var(--hover-link-color);
-}
-
-.config-tab-content {
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 配置卡片网格 */
-.config-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
-  margin-bottom: 32px;
-}
-
-.config-card {
-  background: rgba(var(--background-color-rgb), 0.85);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-}
-
-.rotating-text-card .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.config-card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
-  border-color: var(--hover-link-color);
-}
-
-.card-header {
-  padding: 20px 24px;
-  background: rgba(var(--background-color-rgb), 0.8);
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-color);
-}
-
-.card-header i {
-  color: var(--hover-link-color);
-}
-
-.card-body {
-  padding: 24px;
-}
-
-/* 表单组 */
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  font-size: 0.9rem;
-  color: var(--text-color);
-}
-
-.required {
-  color: #f44336;
-}
-
-.form-group input,
-.form-group textarea,
-.form-group select {
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background: rgba(var(--background-color-rgb), 0.8);
-  color: var(--text-color);
-  font-size: 0.95rem;
-  transition: all 0.3s ease;
-  font-family: inherit;
-}
-
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: var(--hover-link-color);
-  box-shadow: 0 0 0 3px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.1);
-}
-
-.form-group textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.form-hint {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  margin-top: 6px;
-  font-size: 0.85rem;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
-  font-style: italic;
-  line-height: 1.4;
-}
-
-.form-hint i {
-  color: var(--hover-link-color);
-  margin-top: 2px;
-  flex-shrink: 0;
-}
-
-.form-hint strong {
-  color: var(--hover-link-color);
-  font-weight: 600;
-}
-
-.color-input-group {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.color-input-group input[type="color"] {
-  width: 60px;
-  height: 40px;
-  padding: 2px;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-}
-
-.color-input-group input[type="text"] {
-  flex: 1;
-}
-
-/* 开关样式 */
-.switch-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-  font-weight: 500;
-  font-size: 0.9rem;
-  color: var(--text-color);
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 26px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(var(--text-color-rgb, 51, 51, 51), 0.3);
-  transition: 0.3s;
-  border-radius: 26px;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 20px;
-  width: 20px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-.switch input:checked + .slider {
-  background-color: var(--hover-link-color);
-}
-
-.switch input:checked + .slider:before {
-  transform: translateX(24px);
-}
-
-.switch input:focus + .slider {
-  box-shadow: 0 0 0 3px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.2);
-}
-
-/* 按钮样式 */
-.btn-primary,
-.btn-secondary,
-.btn-save {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border: none;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  font-family: inherit;
-}
-
-.btn-primary,
-.btn-save {
-  background: var(--hover-link-color);
-  color: #333;
-  box-shadow: 0 2px 8px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.3);
-}
-
-.btn-primary:hover,
-.btn-save:hover {
-  background: #ffd700;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.4);
-}
-
-.btn-secondary {
-  background: rgba(var(--text-color-rgb, 51, 51, 51), 0.1);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
-}
-
-.btn-secondary:hover {
-  background: rgba(var(--text-color-rgb, 51, 51, 51), 0.2);
-}
-
-/* 数据表格卡片 */
-.data-table-card {
-  background: rgba(var(--background-color-rgb), 0.85);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-}
-
-.table-header {
-  padding: 20px 24px;
-  background: rgba(var(--background-color-rgb), 0.8);
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.table-info {
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.7);
-  font-size: 0.9rem;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-thead {
-  background: rgba(var(--background-color-rgb), 0.4);
-}
-
-th {
-  padding: 16px 24px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text-color);
-  border-bottom: 2px solid var(--border-color);
-  white-space: nowrap;
-}
-
-.actions-col {
-  text-align: center;
-  width: 120px;
-}
-
-td {
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--border-color);
-  color: var(--text-color);
-}
-
-tbody tr {
-  transition: background 0.2s ease;
-}
-
-tbody tr:hover {
-  background: rgba(var(--background-color-rgb), 0.4);
-}
-
-.cell-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.cell-content i {
-  font-size: 1.2rem;
-  color: var(--hover-link-color);
-}
-
-.link-cell {
-  color: var(--hover-link-color);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  transition: color 0.3s ease;
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.link-cell:hover {
-  color: #ffd700;
-  text-decoration: underline;
-}
-
-.link-cell i {
-  font-size: 0.85rem;
-  opacity: 0.7;
-}
-
-.icon-code {
-  background: rgba(var(--background-color-rgb), 0.8);
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  font-family: 'Courier New', monospace;
-  color: var(--hover-link-color);
-}
-
-.type-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 0.85rem;
-  font-weight: 500;
-}
-
-.icon-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  font-size: 1.2rem;
-}
-
-.color-preview {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.color-dot {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid var(--border-color);
-  flex-shrink: 0;
-}
-
-.color-preview code {
-  background: rgba(var(--background-color-rgb), 0.8);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  font-family: 'Courier New', monospace;
-}
-
-.badge {
-  display: inline-block;
-  padding: 4px 10px;
-  background: rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.2);
-  color: var(--hover-link-color);
-  border-radius: 12px;
-  font-size: 0.85rem;
-  font-weight: 500;
-}
-
-.qr-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--hover-link-color);
-  font-size: 0.9rem;
-}
-
-.text-muted {
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
-}
-
-.actions-cell {
-  text-align: center;
-}
-
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  margin: 0 4px;
-  font-size: 0.9rem;
-}
-
-.btn-edit {
-  background: rgba(33, 150, 243, 0.1);
-  color: #2196f3;
-}
-
-.btn-edit:hover {
-  background: rgba(33, 150, 243, 0.2);
-  transform: scale(1.1);
-}
-
-.btn-delete {
-  background: rgba(244, 67, 54, 0.1);
-  color: #f44336;
-}
-
-.btn-delete:hover {
-  background: rgba(244, 67, 54, 0.2);
-  transform: scale(1.1);
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
-}
-
-.empty-state i {
-  font-size: 3rem;
-  margin-bottom: 16px;
-  opacity: 0.3;
-}
-
-.empty-state p {
-  margin: 0;
-  font-size: 0.95rem;
-}
-
-/* 模态框 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  padding: 20px;
-}
-
-.modal-content {
-  background: rgba(var(--background-color-rgb), 0.98);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  max-width: 600px;
-  width: 100%;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-}
-
-.modal-header {
-  padding: 24px;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(var(--background-color-rgb), 0.8);
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-color);
-}
-
-.modal-close {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  color: var(--text-color);
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  font-size: 1.1rem;
-}
-
-.modal-close:hover {
-  background: rgba(var(--text-color-rgb, 51, 51, 51), 0.1);
-}
-
-.modal-body {
-  padding: 24px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.modal-footer {
-  padding: 20px 24px;
-  border-top: 1px solid var(--border-color);
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  background: rgba(var(--background-color-rgb), 0.8);
-}
-
-/* 动画 */
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOut {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .modal-content,
-.modal-leave-active .modal-content {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.modal-enter-from .modal-content,
-.modal-leave-to .modal-content {
-  transform: scale(0.9);
-  opacity: 0;
-}
-
-/* 密码输入相关样式 */
-.password-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.password-input {
-  width: 100%;
-  padding: 12px 48px 12px 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 8px;
-  background: rgba(var(--background-color-rgb), 0.6);
-  color: var(--text-color);
-  font-size: 15px;
-  transition: all 0.3s ease;
-  outline: none;
-}
-
-.password-input:focus {
-  border-color: #007aff;
-  background: rgba(var(--background-color-rgb), 0.8);
-  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
-}
-
-.password-input.input-error {
-  border-color: #f44336;
-}
-
-.password-toggle {
-  position: absolute;
-  right: 12px;
-  background: transparent;
-  border: none;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.3s ease;
-}
-
-.password-toggle:hover {
-  color: var(--text-color);
-}
-
-.password-strength {
-  margin-top: 8px;
-}
-
-.strength-bar {
-  height: 4px;
-  background: rgba(var(--text-color-rgb, 51, 51, 51), 0.1);
-  border-radius: 2px;
-  overflow: hidden;
-  margin-bottom: 4px;
-}
-
-.strength-fill {
-  height: 100%;
-  transition: width 0.3s ease, background-color 0.3s ease;
-}
-
-.strength-bar.weak .strength-fill {
-  background: #f44336;
-}
-
-.strength-bar.medium .strength-fill {
-  background: #ff9800;
-}
-
-.strength-bar.strong .strength-fill {
-  background: #4caf50;
-}
-
-.strength-text {
-  font-size: 12px;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
-}
-
-.form-error {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 4px;
-  color: #f44336;
-  font-size: 12px;
-}
-
-.required {
-  color: #f44336;
-  margin-left: 4px;
-}
-
-/* 修改密码模态框特殊样式 */
-.password-modal {
-  max-width: 520px;
-}
-
-.modal-header-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.modal-icon-wrapper {
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, #2196f3, #1976d2);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 20px;
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
-}
-
-.modal-subtitle {
-  margin: 4px 0 0 0;
-  font-size: 13px;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
-  font-weight: 400;
-}
-
-.password-form {
-  padding: 8px 0;
-}
-
-.password-form .form-group {
-  margin-bottom: 24px;
-}
-
-.password-form .form-group label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-  font-weight: 500;
-  color: var(--text-color);
-}
-
-.password-form .form-group label i {
-  color: #2196f3;
-  font-size: 14px;
-}
-
-.form-success {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 4px;
-  color: #4caf50;
-  font-size: 12px;
-}
-
-.strength-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 6px;
-}
-
-.strength-text {
-  font-size: 12px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.strength-text.weak {
-  color: #f44336;
-}
-
-.strength-text.medium {
-  color: #ff9800;
-}
-
-.strength-text.strong {
-  color: #4caf50;
-}
-
-.strength-tips {
-  font-size: 11px;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
-}
-
-/* 图标选择器相关样式 */
-.icon-input-wrapper {
-  display: flex;
-  gap: 8px;
-  align-items: stretch;
-}
-
-.icon-input {
-  flex: 1;
-  padding: 12px 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 8px;
-  background: rgba(var(--background-color-rgb), 0.6);
-  color: var(--text-color);
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.icon-input:focus {
-  outline: none;
-  border-color: #007aff;
-  background: rgba(var(--background-color-rgb), 0.8);
-}
-
-.icon-picker-btn {
-  padding: 12px 20px;
-  border: 2px solid var(--hover-link-color);
-  border-radius: 8px;
-  background: var(--hover-link-color);
-  color: #333;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.3s ease;
-  white-space: nowrap;
-}
-
-.icon-picker-btn:hover {
-  background: #ffd700;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
-}
-
-.icon-preview-inline {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 8px;
-  padding: 8px 12px;
-  background: rgba(var(--background-color-rgb), 0.5);
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-}
-
-.icon-preview-inline i {
-  font-size: 20px;
-  color: var(--hover-link-color);
-}
-
-.icon-preview-inline code {
-  background: rgba(var(--background-color-rgb), 0.8);
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: 'Courier New', monospace;
-  color: var(--text-color);
-}
-
-.icon-picker-modal {
-  max-width: 900px;
-  max-height: 85vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.icon-picker-modal-body {
-  padding: 0;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-  .config-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .admin-sidebar {
-    width: 220px;
-  }
-  
-  .admin-main {
-    margin-left: 220px;
-  }
-}
-
-@media (max-width: 768px) {
-  .admin-sidebar {
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-  }
-  
-  .admin-sidebar.open {
-    transform: translateX(0);
-  }
-  
-  .admin-main {
-    margin-left: 0;
-  }
-  
-  .admin-topbar {
-    padding: 16px 20px;
-  }
-  
-  .admin-content {
-    padding: 20px;
-  }
-  
-  .config-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .table-wrapper {
-    overflow-x: scroll;
-  }
-  
-  table {
-    min-width: 800px;
-  }
-}
-
-/* 加载状态 */
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(var(--background-color-rgb), 0.8);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-}
-
-.loading-spinner {
-  text-align: center;
-  color: var(--text-color);
-}
-
-.loading-spinner i {
-  font-size: 3rem;
-  color: var(--hover-link-color);
-  margin-bottom: 16px;
-}
-
-.loading-spinner p {
-  margin: 0;
-  font-size: 1rem;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.7);
-}
-
-/* 深色模式适配 */
-.dark-mode .admin-wrapper {
-  filter: brightness(0.7);
-}
-
-.dark-mode .config-card,
-.dark-mode .data-table-card,
-.dark-mode .modal-content {
-  background: rgba(var(--background-color-rgb), 0.8);
-}
-
-.dark-mode .nav-item.active {
-  background: rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.15);
-}
-
-/* 轮换文本配置样式 */
-.rotating-texts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-top: 12px;
-}
-
-.rotating-text-item {
-  background: rgba(var(--background-color-rgb), 0.5);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 16px;
-  transition: all 0.3s ease;
-}
-
-.rotating-text-item:hover {
-  border-color: var(--hover-link-color);
-  background: rgba(var(--background-color-rgb), 0.7);
-}
-
-.text-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.text-index {
-  font-weight: 600;
-  color: var(--text-color);
-  font-size: 0.9rem;
-}
-
-.btn-remove-text {
-  width: 28px;
-  height: 28px;
-  border: 1px solid rgba(244, 67, 54, 0.3);
-  border-radius: 6px;
-  background: rgba(244, 67, 54, 0.1);
-  color: #f44336;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  font-size: 0.85rem;
-}
-
-.btn-remove-text:hover {
-  background: rgba(244, 67, 54, 0.2);
-  border-color: #f44336;
-  transform: scale(1.1);
-}
-
-.text-input {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1.5px solid var(--border-color);
-  border-radius: 8px;
-  background: rgba(var(--background-color-rgb), 0.8);
-  color: var(--text-color);
-  font-size: 0.95rem;
-  font-family: inherit;
-  resize: vertical;
-  transition: all 0.3s ease;
-}
-
-.text-input:focus {
-  outline: none;
-  border-color: var(--hover-link-color);
-  box-shadow: 0 0 0 3px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.1);
-  background: rgba(var(--background-color-rgb), 1);
-}
-
-.btn-add-text {
-  padding: 12px 20px;
-  border: 2px dashed var(--border-color);
-  border-radius: 10px;
-  background: rgba(var(--background-color-rgb), 0.5);
-  color: var(--text-color);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: all 0.3s ease;
-  font-size: 0.95rem;
-  font-weight: 500;
-}
-
-.btn-add-text:hover {
-  border-color: var(--hover-link-color);
-  background: rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.1);
-  color: var(--hover-link-color);
-  transform: translateY(-2px);
-}
-</style>
+<template>
+  <div class="admin-page">
+    <div class="admin-background" aria-hidden="true"></div>
+    <button v-if="sidebarOpen" type="button" class="drawer-backdrop" aria-label="关闭导航" @click="sidebarOpen = false"></button>
+
+    <aside class="admin-sidebar" :class="{ open: sidebarOpen }">
+      <router-link to="/" class="admin-brand" title="返回主页">
+        <span class="brand-mark">
+          <img v-if="brandIcon && !brandIconFailed" :src="brandIcon" alt="" @error="brandIconFailed = true" />
+          <i v-else class="fas fa-home" aria-hidden="true"></i>
+        </span>
+        <span><strong>{{ siteConfig.siteName || 'Home-Vue' }}</strong><small>管理后台</small></span>
+      </router-link>
+
+      <nav class="admin-nav" aria-label="后台导航">
+        <button
+          v-for="tab in tabs"
+          :key="tab.name"
+          type="button"
+          :class="{ active: activeTab === tab.name }"
+          @click="selectTab(tab.name)"
+        >
+          <i :class="tab.icon" aria-hidden="true"></i><span>{{ tab.name }}</span>
+        </button>
+      </nav>
+
+      <div class="sidebar-footer">
+        <router-link to="/" class="sidebar-action" title="查看主页" aria-label="查看主页"><i class="fas fa-arrow-up-right-from-square"></i></router-link>
+        <button type="button" class="sidebar-action" :title="themeLabel" :aria-label="themeLabel" @click="toggleTheme"><i :class="themeIcon"></i></button>
+        <button type="button" class="sidebar-action" title="修改密码" aria-label="修改密码" @click="passwordModalOpen = true"><i class="fas fa-key"></i></button>
+        <button type="button" class="sidebar-action sidebar-action--danger" title="退出登录" aria-label="退出登录" @click="requestLogout"><i class="fas fa-right-from-bracket"></i></button>
+      </div>
+    </aside>
+
+    <div class="admin-main">
+      <header class="admin-topbar">
+        <div class="topbar-title">
+          <button type="button" class="menu-button" title="打开导航" aria-label="打开导航" @click="sidebarOpen = true"><i class="fas fa-bars"></i></button>
+          <span class="page-icon"><i :class="currentTab.icon"></i></span>
+          <div><h1>{{ activeTab }}</h1><p>{{ currentTab.description }}</p></div>
+        </div>
+        <div class="topbar-actions">
+          <button v-if="activeTab === '站点配置'" type="button" class="primary-button" :disabled="actionLoading" @click="saveSiteConfig">
+            <i :class="actionLoading ? 'fas fa-spinner fa-spin' : 'fas fa-floppy-disk'"></i><span>保存配置</span>
+          </button>
+          <button v-else-if="activeTab === '站点管理'" type="button" class="primary-button" @click="openSiteForm()"><i class="fas fa-plus"></i><span>添加站点</span></button>
+          <button v-else-if="activeTab === '联系方式管理'" type="button" class="primary-button" @click="openContactForm()"><i class="fas fa-plus"></i><span>添加联系方式</span></button>
+        </div>
+      </header>
+
+      <main class="admin-content">
+        <div v-if="loading" class="admin-loading"><i class="fas fa-spinner fa-spin"></i><span>正在读取管理数据</span></div>
+        <Dashboard v-else-if="activeTab === '仪表盘'" />
+        <AdminConfig
+          v-else-if="activeTab === '站点配置'"
+          :config="siteConfig"
+          :rotating-texts="rotatingTexts"
+          :active-section="activeConfigSection"
+          @update:active-section="activeConfigSection = $event"
+          @add-text="addRotatingText"
+          @remove-text="removeRotatingText"
+          @save-texts="saveRotatingTexts"
+        />
+        <AdminCollection v-else-if="activeTab === '站点管理'" kind="sites" :items="sites" @edit="openSiteForm" @delete="requestDelete('site', $event)" />
+        <AdminCollection v-else kind="contacts" :items="contacts" @edit="openContactForm" @delete="requestDelete('contact', $event)" />
+      </main>
+    </div>
+
+    <Transition name="toast">
+      <div v-if="toast.visible" class="admin-toast" :class="`admin-toast--${toast.type}`" role="status">
+        <i :class="toastIcon" aria-hidden="true"></i><span>{{ toast.message }}</span>
+        <button type="button" aria-label="关闭通知" @click="toast.visible = false"><i class="fas fa-xmark"></i></button>
+      </div>
+    </Transition>
+
+    <AdminModal :open="siteModalOpen" :title="editingSite ? '编辑站点' : '添加站点'" description="站点会按排序数字从小到大展示" @close="closeSiteForm">
+      <form id="site-form" class="modal-form" @submit.prevent="saveSite">
+        <label><span>名称 <b>*</b></span><input v-model.trim="siteForm.name" type="text" required placeholder="例如：个人博客" /></label>
+        <label><span>URL <b>*</b></span><input v-model.trim="siteForm.url" type="url" required placeholder="https://example.com" /></label>
+        <label class="field-full"><span>图标类名 <b>*</b></span><div class="icon-input"><i :class="siteForm.icon || 'fas fa-icons'"></i><input v-model.trim="siteForm.icon" type="text" required placeholder="fas fa-link" /><button type="button" @click="openIconPicker('site')"><i class="fas fa-icons"></i>选择</button></div></label>
+        <label><span>排序</span><input v-model.number="siteForm.sortOrder" type="number" min="0" /></label>
+      </form>
+      <template #footer><button type="button" class="secondary-button" @click="closeSiteForm">取消</button><button form="site-form" type="submit" class="primary-button" :disabled="actionLoading">{{ actionLoading ? '正在保存' : '保存站点' }}</button></template>
+    </AdminModal>
+
+    <AdminModal :open="contactModalOpen" :title="editingContact ? '编辑联系方式' : '添加联系方式'" description="二维码类型与链接类型会在主页使用不同交互" @close="closeContactForm">
+      <form id="contact-form" class="modal-form" @submit.prevent="saveContact">
+        <label><span>类型 <b>*</b></span><select v-model="contactForm.type"><option v-for="type in contactTypes" :key="type">{{ type }}</option></select></label>
+        <label><span>排序</span><input v-model.number="contactForm.sortOrder" type="number" min="0" /></label>
+        <label class="field-full"><span>图标类名 <b>*</b></span><div class="icon-input"><i :class="contactForm.icon || 'fas fa-icons'" :style="{ color: contactForm.hoverColor }"></i><input v-model.trim="contactForm.icon" type="text" required placeholder="fas fa-envelope" /><button type="button" @click="openIconPicker('contact')"><i class="fas fa-icons"></i>选择</button></div></label>
+        <label v-if="!contactUsesQr" class="field-full"><span>链接 <b>*</b></span><input v-model.trim="contactForm.url" type="text" required :placeholder="contactForm.type === 'Email' ? 'mailto:name@example.com' : 'https://example.com'" /><small v-if="contactForm.type === 'Email'">Email 必须使用 mailto: 格式</small></label>
+        <div v-else class="field-full selector-field"><span>二维码图片 <b>*</b></span><IconSelector v-model="contactForm.qrCode" :default-icon-path="''" /></div>
+        <label><span>悬停颜色</span><div class="color-input"><input v-model="contactForm.hoverColor" type="color" /><input v-model.trim="contactForm.hoverColor" type="text" pattern="#[0-9a-fA-F]{6}" /></div></label>
+      </form>
+      <template #footer><button type="button" class="secondary-button" @click="closeContactForm">取消</button><button form="contact-form" type="submit" class="primary-button" :disabled="actionLoading">{{ actionLoading ? '正在保存' : '保存联系方式' }}</button></template>
+    </AdminModal>
+
+    <AdminModal :open="iconPickerOpen" title="选择 Font Awesome 图标" size="large" @close="iconPickerOpen = false">
+      <IconPicker v-model="iconPickerValue" @close="iconPickerOpen = false" />
+    </AdminModal>
+
+    <AdminModal :open="passwordModalOpen" title="修改密码" description="新密码至少八位，建议混合大小写、数字和符号" size="small" @close="closePasswordModal">
+      <form id="password-form" class="password-form" @submit.prevent="changePassword">
+        <label><span>当前密码</span><div class="password-input"><input v-model="passwordForm.oldPassword" :type="passwordVisibility.old ? 'text' : 'password'" autocomplete="current-password" required /><button type="button" :aria-label="passwordVisibility.old ? '隐藏密码' : '显示密码'" @click="passwordVisibility.old = !passwordVisibility.old"><i :class="passwordVisibility.old ? 'fas fa-eye-slash' : 'fas fa-eye'"></i></button></div></label>
+        <label><span>新密码</span><div class="password-input"><input v-model="passwordForm.newPassword" :type="passwordVisibility.new ? 'text' : 'password'" autocomplete="new-password" minlength="8" required /><button type="button" :aria-label="passwordVisibility.new ? '隐藏密码' : '显示密码'" @click="passwordVisibility.new = !passwordVisibility.new"><i :class="passwordVisibility.new ? 'fas fa-eye-slash' : 'fas fa-eye'"></i></button></div></label>
+        <div class="password-strength"><span :style="{ width: `${passwordStrength.percent}%` }" :class="passwordStrength.level"></span></div>
+        <small>{{ passwordStrength.label }}</small>
+        <label><span>确认新密码</span><div class="password-input"><input v-model="passwordForm.confirmPassword" :type="passwordVisibility.confirm ? 'text' : 'password'" autocomplete="new-password" required /><button type="button" :aria-label="passwordVisibility.confirm ? '隐藏密码' : '显示密码'" @click="passwordVisibility.confirm = !passwordVisibility.confirm"><i :class="passwordVisibility.confirm ? 'fas fa-eye-slash' : 'fas fa-eye'"></i></button></div></label>
+        <p v-if="passwordMismatch" class="field-error">两次输入的新密码不一致</p>
+      </form>
+      <template #footer><button type="button" class="secondary-button" @click="closePasswordModal">取消</button><button form="password-form" type="submit" class="primary-button" :disabled="!canChangePassword || actionLoading">{{ actionLoading ? '正在修改' : '修改密码' }}</button></template>
+    </AdminModal>
+
+    <AdminModal :open="Boolean(confirmAction)" :title="confirmTitle" :description="confirmDescription" size="small" @close="confirmAction = null">
+      <p class="confirm-copy">{{ confirmAction?.kind === 'logout' ? '退出后需要重新输入管理员凭据。' : '此操作会立即生效且无法恢复。' }}</p>
+      <template #footer><button type="button" class="secondary-button" @click="confirmAction = null">取消</button><button type="button" class="danger-button" :disabled="actionLoading" @click="runConfirmedAction">{{ actionLoading ? '正在处理' : confirmButtonLabel }}</button></template>
+    </AdminModal>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { adminAPI } from '../api'
+import { useTheme } from '../composables/useTheme'
+import { loadAndApplyFrontendConfig } from '../utils/frontendConfig'
+import Dashboard from './Dashboard.vue'
+import IconPicker from './IconPicker.vue'
+import IconSelector from './IconSelector.vue'
+import AdminCollection from './admin/AdminCollection.vue'
+import AdminConfig from './admin/AdminConfig.vue'
+import AdminModal from './admin/AdminModal.vue'
+
+const tabs = [
+  { name: '仪表盘', icon: 'fas fa-chart-column', description: '访问概览、登录记录与服务日志' },
+  { name: '站点配置', icon: 'fas fa-sliders', description: '维护主页内容、站点身份和外部服务' },
+  { name: '站点管理', icon: 'fas fa-link', description: '维护主页展示的快捷站点' },
+  { name: '联系方式管理', icon: 'fas fa-address-book', description: '维护社交链接和二维码联系方式' },
+]
+const configSections = ['基础信息', '用户信息', '图标配置', '备案信息', '前端配置', '轮换文本', '统计配置']
+const contactTypes = ['Email', 'Github', '支付宝', '微信', 'QQ', '微博', '其他']
+const defaultTexts = ['你好鸭，欢迎来到我的主页！！', '随时可以联系我，期待与你交流。', '愿你历尽千帆，归来仍是少年。', '梦想还是要有的，万一实现了呢？', 'I hope you have a happy day every day.']
+const route = useRoute()
+const router = useRouter()
+const { themeIcon, themeLabel, toggleTheme } = useTheme()
+const activeTab = ref('仪表盘')
+const activeConfigSection = ref('基础信息')
+const sidebarOpen = ref(false)
+const loading = ref(true)
+const actionLoading = ref(false)
+const sites = ref([])
+const contacts = ref([])
+const rotatingTexts = ref([...defaultTexts])
+const brandIconFailed = ref(false)
+const siteModalOpen = ref(false)
+const contactModalOpen = ref(false)
+const iconPickerOpen = ref(false)
+const passwordModalOpen = ref(false)
+const iconPickerTarget = ref('site')
+const editingSite = ref(null)
+const editingContact = ref(null)
+const confirmAction = ref(null)
+const toast = reactive({ visible: false, message: '', type: 'success' })
+let toastTimer = null
+let configChannel = null
+
+const siteConfig = reactive({
+  siteName: '', siteURL: '', siteIcon: '', siteDescription: '', siteKeywords: '', userName: '', profileImageURL: '',
+  icpNumber: '', policeNumber: '', pageTitle: '', favicon: '', umamiScript: '', umamiWebsiteId: '', iconLibrary: '', fontLibrary: '',
+  footerYearStart: '', footerYearEnd: '', showVisitTimer: true,
+})
+const siteForm = reactive({ name: '', url: '', icon: '', sortOrder: 0 })
+const contactForm = reactive({ type: 'Email', icon: '', url: '', qrCode: '', hoverColor: '#555555', sortOrder: 0 })
+const passwordForm = reactive({ oldPassword: '', newPassword: '', confirmPassword: '' })
+const passwordVisibility = reactive({ old: false, new: false, confirm: false })
+
+const currentTab = computed(() => tabs.find((tab) => tab.name === activeTab.value) || tabs[0])
+const brandIcon = computed(() => siteConfig.siteIcon || siteConfig.favicon || '/favicon.ico')
+const contactUsesQr = computed(() => ['支付宝', '微信'].includes(contactForm.type))
+const iconPickerValue = computed({
+  get: () => iconPickerTarget.value === 'site' ? siteForm.icon : contactForm.icon,
+  set: (value) => { if (iconPickerTarget.value === 'site') siteForm.icon = value; else contactForm.icon = value },
+})
+const passwordMismatch = computed(() => Boolean(passwordForm.newPassword && passwordForm.confirmPassword && passwordForm.newPassword !== passwordForm.confirmPassword))
+const canChangePassword = computed(() => passwordForm.oldPassword && passwordForm.newPassword.length >= 8 && passwordForm.confirmPassword && !passwordMismatch.value)
+const passwordStrength = computed(() => {
+  const password = passwordForm.newPassword
+  if (!password) return { percent: 0, level: '', label: '尚未输入新密码' }
+  let score = password.length >= 8 ? 1 : 0
+  if (password.length >= 12) score++
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++
+  if (/\d/.test(password)) score++
+  if (/[^a-zA-Z0-9]/.test(password)) score++
+  if (score <= 2) return { percent: 34, level: 'weak', label: '密码强度：弱' }
+  if (score <= 4) return { percent: 68, level: 'medium', label: '密码强度：中' }
+  return { percent: 100, level: 'strong', label: '密码强度：强' }
+})
+const toastIcon = computed(() => ({ success: 'fas fa-circle-check', error: 'fas fa-circle-exclamation', warning: 'fas fa-triangle-exclamation' }[toast.type] || 'fas fa-circle-info'))
+const confirmTitle = computed(() => confirmAction.value?.kind === 'logout' ? '退出登录' : `删除${confirmAction.value?.kind === 'site' ? '站点' : '联系方式'}`)
+const confirmDescription = computed(() => confirmAction.value?.kind === 'logout' ? '确认结束当前管理会话吗？' : `确认删除“${confirmAction.value?.item?.name || confirmAction.value?.item?.type || ''}”吗？`)
+const confirmButtonLabel = computed(() => confirmAction.value?.kind === 'logout' ? '退出登录' : '确认删除')
+
+const notify = (message, type = 'success') => {
+  window.clearTimeout(toastTimer)
+  Object.assign(toast, { visible: true, message, type })
+  toastTimer = window.setTimeout(() => { toast.visible = false }, 3200)
+}
+
+const selectTab = (name) => { activeTab.value = name; sidebarOpen.value = false }
+const syncRoute = () => {
+  const query = {}
+  if (activeTab.value !== '仪表盘') query.tab = activeTab.value
+  if (activeTab.value === '站点配置' && activeConfigSection.value !== '基础信息') query.subTab = activeConfigSection.value
+  router.replace({ name: 'admin', query })
+}
+watch([activeTab, activeConfigSection], syncRoute)
+watch(() => siteConfig.profileImageURL, () => { brandIconFailed.value = false })
+
+const loadData = async () => {
+  loading.value = true
+  try {
+    const [sitesResult, contactsResult, configResult, textsResult] = await Promise.all([
+      adminAPI.getSites(), adminAPI.getContacts(), adminAPI.getSiteConfig(), adminAPI.getRotatingTexts().catch(() => ({ data: { texts: [] } })),
+    ])
+    sites.value = sitesResult.data || []
+    contacts.value = contactsResult.data || []
+    Object.assign(siteConfig, configResult.data || {})
+    siteConfig.showVisitTimer = configResult.data?.showVisitTimer === undefined ? true : Boolean(configResult.data.showVisitTimer)
+    rotatingTexts.value = textsResult.data?.texts?.length ? textsResult.data.texts : [...defaultTexts]
+  } catch (error) {
+    notify(`加载管理数据失败：${error.response?.data?.error || error.message}`, 'error')
+  } finally { loading.value = false }
+}
+
+const broadcastConfigUpdate = async () => {
+  await adminAPI.notifyConfigUpdate().catch(() => {})
+  await loadAndApplyFrontendConfig()
+  if (window.BroadcastChannel) {
+    const channel = new BroadcastChannel('config-update')
+    channel.postMessage({ type: 'config-updated' })
+    channel.close()
+  }
+}
+
+const saveSiteConfig = async () => {
+  actionLoading.value = true
+  try {
+    await adminAPI.updateSiteConfig({ ...siteConfig, footerYearStart: String(siteConfig.footerYearStart || '').trim(), footerYearEnd: String(siteConfig.footerYearEnd || '').trim(), showVisitTimer: Boolean(siteConfig.showVisitTimer) })
+    await broadcastConfigUpdate()
+    notify('站点配置已保存')
+  } catch (error) { notify(`保存失败：${error.response?.data?.error || error.message}`, 'error') }
+  finally { actionLoading.value = false }
+}
+
+const addRotatingText = () => { if (rotatingTexts.value.length < 8) rotatingTexts.value.push('') }
+const removeRotatingText = (index) => { if (rotatingTexts.value.length > 1) rotatingTexts.value.splice(index, 1) }
+const saveRotatingTexts = async () => {
+  const texts = rotatingTexts.value.map((text) => text.trim()).filter(Boolean)
+  if (!texts.length) return notify('至少保留一条轮换文本', 'warning')
+  actionLoading.value = true
+  try { await adminAPI.updateRotatingTexts(texts); rotatingTexts.value = texts; await broadcastConfigUpdate(); notify('轮换文本已保存') }
+  catch (error) { notify(`保存失败：${error.response?.data?.error || error.message}`, 'error') }
+  finally { actionLoading.value = false }
+}
+
+const openIconPicker = (target) => { iconPickerTarget.value = target; iconPickerOpen.value = true }
+const openSiteForm = (site = null) => {
+  editingSite.value = site
+  Object.assign(siteForm, site ? { name: site.name, url: site.url, icon: site.icon, sortOrder: site.sortOrder } : { name: '', url: '', icon: '', sortOrder: 0 })
+  siteModalOpen.value = true
+}
+const closeSiteForm = () => { siteModalOpen.value = false; editingSite.value = null }
+const saveSite = async () => {
+  actionLoading.value = true
+  try {
+    if (editingSite.value) await adminAPI.updateSite(editingSite.value.id, { ...siteForm })
+    else await adminAPI.createSite({ ...siteForm })
+    sites.value = (await adminAPI.getSites()).data || []
+    notify(editingSite.value ? '站点已更新' : '站点已创建')
+    closeSiteForm()
+  } catch (error) { notify(`保存失败：${error.response?.data?.error || error.message}`, 'error') }
+  finally { actionLoading.value = false }
+}
+
+const openContactForm = (contact = null) => {
+  editingContact.value = contact
+  Object.assign(contactForm, contact ? { type: contact.type, icon: contact.icon, url: contact.url || '', qrCode: contact.qrCode || '', hoverColor: contact.hoverColor || '#555555', sortOrder: contact.sortOrder } : { type: 'Email', icon: '', url: '', qrCode: '', hoverColor: '#555555', sortOrder: 0 })
+  contactModalOpen.value = true
+}
+const closeContactForm = () => { contactModalOpen.value = false; editingContact.value = null }
+const saveContact = async () => {
+  if (contactUsesQr.value && !contactForm.qrCode) return notify('请上传或填写二维码图片', 'warning')
+  if (!contactUsesQr.value && !contactForm.url) return notify('请填写联系方式链接', 'warning')
+  if (contactForm.type === 'Email' && !contactForm.url.startsWith('mailto:')) return notify('Email 链接必须使用 mailto: 格式', 'warning')
+  actionLoading.value = true
+  const payload = { ...contactForm, url: contactUsesQr.value ? '' : contactForm.url, qrCode: contactUsesQr.value ? contactForm.qrCode : '' }
+  try {
+    if (editingContact.value) await adminAPI.updateContact(editingContact.value.id, payload)
+    else await adminAPI.createContact(payload)
+    contacts.value = (await adminAPI.getContacts()).data || []
+    notify(editingContact.value ? '联系方式已更新' : '联系方式已创建')
+    closeContactForm()
+  } catch (error) { notify(`保存失败：${error.response?.data?.error || error.message}`, 'error') }
+  finally { actionLoading.value = false }
+}
+
+const requestDelete = (kind, item) => { confirmAction.value = { kind, item } }
+const requestLogout = () => { confirmAction.value = { kind: 'logout' } }
+const runConfirmedAction = async () => {
+  if (!confirmAction.value) return
+  if (confirmAction.value.kind === 'logout') {
+    localStorage.removeItem('token'); confirmAction.value = null; await router.replace('/login'); return
+  }
+  actionLoading.value = true
+  try {
+    if (confirmAction.value.kind === 'site') { await adminAPI.deleteSite(confirmAction.value.item.id); sites.value = (await adminAPI.getSites()).data || [] }
+    else { await adminAPI.deleteContact(confirmAction.value.item.id); contacts.value = (await adminAPI.getContacts()).data || [] }
+    notify('记录已删除')
+    confirmAction.value = null
+  } catch (error) { notify(`删除失败：${error.response?.data?.error || error.message}`, 'error') }
+  finally { actionLoading.value = false }
+}
+
+const closePasswordModal = () => {
+  passwordModalOpen.value = false
+  Object.assign(passwordForm, { oldPassword: '', newPassword: '', confirmPassword: '' })
+  Object.assign(passwordVisibility, { old: false, new: false, confirm: false })
+}
+const changePassword = async () => {
+  if (!canChangePassword.value) return
+  actionLoading.value = true
+  try { await adminAPI.changePassword(passwordForm.oldPassword, passwordForm.newPassword); closePasswordModal(); notify('密码已修改') }
+  catch (error) { notify(`修改失败：${error.response?.data?.error || error.message}`, 'error') }
+  finally { actionLoading.value = false }
+}
+
+onMounted(() => {
+  if (tabs.some((tab) => tab.name === route.query.tab)) activeTab.value = route.query.tab
+  if (configSections.includes(route.query.subTab)) activeConfigSection.value = route.query.subTab
+  loadData()
+  if (window.BroadcastChannel) {
+    configChannel = new BroadcastChannel('config-update')
+    configChannel.onmessage = ({ data }) => { if (data?.type === 'config-updated') loadAndApplyFrontendConfig() }
+  }
+})
+onUnmounted(() => { window.clearTimeout(toastTimer); configChannel?.close() })
+</script>
+
+<style scoped>
+.admin-page { min-height: 100vh; min-height: 100dvh; color: var(--text-color); }
+.admin-background { position: fixed; inset: 0; z-index: -1; background: var(--background-color) var(--background-image) repeat; }
+.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; width: 232px; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); background: var(--surface-color); backdrop-filter: blur(18px); }
+.admin-brand { height: 74px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-bottom: 1px solid var(--border-color); }
+.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--border-color); border-radius: 50%; color: var(--hover-link-color); background: var(--surface-muted); }
+.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
+.admin-brand > span:last-child { min-width: 0; display: flex; flex-direction: column; }
+.admin-brand strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
+.admin-brand small { color: var(--text-muted); font-size: 11px; }
+.admin-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; }
+.admin-nav button { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; text-align: left; cursor: pointer; }
+.admin-nav button i { width: 18px; text-align: center; }
+.admin-nav button:hover { color: var(--text-color); background: var(--surface-muted); }
+.admin-nav button.active { border-color: var(--border-color); color: var(--text-color); background: var(--surface-solid); box-shadow: inset 3px 0 var(--hover-link-color); font-weight: 600; }
+.sidebar-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 12px 10px; border-top: 1px solid var(--border-color); }
+.sidebar-action { width: 42px; height: 38px; display: grid; place-items: center; justify-self: center; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; cursor: pointer; }
+.sidebar-action:hover { border-color: var(--border-color); color: var(--hover-link-color); background: var(--surface-solid); }
+.sidebar-action--danger:hover { color: var(--danger-color); }
+.admin-main { min-height: 100vh; margin-left: 232px; }
+.admin-topbar { position: sticky; top: 0; z-index: 50; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 24px; border-bottom: 1px solid var(--border-color); background: var(--surface-color); backdrop-filter: blur(18px); }
+.topbar-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
+.page-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #2c2500; background: var(--hover-link-color); }
+.topbar-title h1 { margin: 0 0 2px; font-size: 17px; letter-spacing: 0; }
+.topbar-title p { margin: 0; color: var(--text-muted); font-size: 11px; }
+.menu-button { display: none; }
+.topbar-actions { flex: 0 0 auto; }
+.admin-content { width: min(100%, 1500px); margin: 0 auto; padding: 24px; }
+.admin-loading { min-height: calc(100vh - 122px); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
+.admin-loading i { color: var(--hover-link-color); font-size: 22px; }
+.primary-button,
+.secondary-button,
+.danger-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 6px; font-weight: 600; cursor: pointer; }
+.primary-button { border: 1px solid #d1a700; color: #2b2400; background: var(--hover-link-color); }
+.secondary-button { border: 1px solid var(--border-color); color: var(--text-color); background: var(--surface-muted); }
+.danger-button { border: 1px solid var(--danger-color); color: white; background: var(--danger-color); }
+.primary-button:disabled,
+.secondary-button:disabled,
+.danger-button:disabled { opacity: 0.55; cursor: not-allowed; }
+.admin-toast { position: fixed; top: 86px; right: 18px; z-index: 3000; max-width: min(420px, calc(100vw - 36px)); display: grid; grid-template-columns: 20px minmax(0, 1fr) 28px; gap: 9px; align-items: center; padding: 11px 10px 11px 13px; border: 1px solid var(--border-color); border-left: 4px solid var(--success-color); border-radius: 7px; background: var(--surface-solid); box-shadow: 0 9px 24px rgba(0, 0, 0, 0.2); font-size: 13px; }
+.admin-toast--error { border-left-color: var(--danger-color); }
+.admin-toast--warning { border-left-color: var(--warning-color); }
+.admin-toast > i { color: var(--success-color); }
+.admin-toast--error > i { color: var(--danger-color); }
+.admin-toast--warning > i { color: var(--warning-color); }
+.admin-toast button { width: 28px; height: 28px; border: 0; border-radius: 5px; color: var(--text-muted); background: transparent; cursor: pointer; }
+.toast-enter-active,
+.toast-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
+.toast-enter-from,
+.toast-leave-to { opacity: 0; transform: translateY(-8px); }
+.modal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
+.modal-form label,
+.selector-field,
+.password-form label { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
+.modal-form label > span,
+.selector-field > span,
+.password-form label > span { font-size: 13px; font-weight: 600; }
+.modal-form b,
+.selector-field b { color: var(--danger-color); }
+.modal-form input,
+.modal-form select,
+.password-form input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); background: var(--surface-muted); }
+.modal-form input:focus,
+.modal-form select:focus,
+.password-form input:focus { border-color: var(--hover-link-color); outline: 3px solid var(--focus-ring); }
+.modal-form small { color: var(--text-muted); font-size: 11px; }
+.field-full { grid-column: 1 / -1; }
+.icon-input { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; }
+.icon-input > i { height: 40px; display: grid; place-items: center; border: 1px solid var(--border-color); border-right: 0; border-radius: 6px 0 0 6px; background: var(--surface-muted); }
+.icon-input input { border-radius: 0; }
+.icon-input button { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid var(--border-color); border-left: 0; border-radius: 0 6px 6px 0; color: var(--text-color); background: var(--surface-solid); cursor: pointer; }
+.color-input { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 7px; }
+.color-input input[type='color'] { padding: 4px; }
+.password-form { display: flex; flex-direction: column; gap: 15px; }
+.password-input { position: relative; }
+.password-input input { padding-right: 42px; }
+.password-input button { position: absolute; top: 3px; right: 3px; width: 34px; height: 34px; border: 0; border-radius: 5px; color: var(--text-muted); background: transparent; cursor: pointer; }
+.password-strength { height: 4px; overflow: hidden; border-radius: 3px; background: var(--surface-muted); }
+.password-strength span { display: block; height: 100%; background: var(--text-muted); transition: width 0.2s ease; }
+.password-strength .weak { background: var(--danger-color); }
+.password-strength .medium { background: var(--warning-color); }
+.password-strength .strong { background: var(--success-color); }
+.password-form > small { margin-top: -10px; color: var(--text-muted); }
+.field-error { margin: -8px 0 0; color: var(--danger-color); font-size: 12px; }
+.confirm-copy { margin: 0; color: var(--text-muted); font-size: 13px; }
+.drawer-backdrop { display: none; }
+
+@media (max-width: 900px) {
+  .admin-sidebar { width: 240px; transform: translateX(-100%); transition: transform 0.2s ease; }
+  .admin-sidebar.open { transform: translateX(0); }
+  .drawer-backdrop { position: fixed; inset: 0; z-index: 90; display: block; border: 0; background: rgba(0, 0, 0, 0.48); }
+  .admin-main { margin-left: 0; }
+  .menu-button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); background: var(--surface-muted); cursor: pointer; }
+  .page-icon { display: none; }
+}
+@media (max-width: 600px) {
+  .admin-topbar { min-height: 64px; padding: 9px 12px; }
+  .topbar-title p { display: none; }
+  .topbar-actions .primary-button { width: 38px; padding: 0; }
+  .topbar-actions .primary-button span { display: none; }
+  .admin-content { padding: 14px 10px 22px; }
+  .modal-form { grid-template-columns: 1fr; }
+  .field-full { grid-column: auto; }
+  .admin-toast { top: 72px; right: 10px; }
+}
+</style>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index a50d2cb..e38b891 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,1495 +1,339 @@
 <template>
-  <div class="dashboard" :class="{ loading: isLoading }">
-    <!-- 顶部关键指标区 -->
-    <div class="stats-grid">
-      <div class="stat-card">
-        <div class="stat-icon" style="background: rgba(33, 150, 243, 0.1); color: #2196f3;">
-          <i class="fas fa-eye"></i>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">{{ animatedStats.totalViews }}</div>
-          <div class="stat-label">总访问量</div>
-        </div>
-      </div>
-      
-      <div class="stat-card">
-        <div class="stat-icon" style="background: rgba(76, 175, 80, 0.1); color: #4caf50;">
-          <i class="fas fa-users"></i>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">{{ animatedStats.uniqueVisitors }}</div>
-          <div class="stat-label">独立访客</div>
-        </div>
-      </div>
-      
-      <div class="stat-card">
-        <div class="stat-icon" style="background: rgba(255, 152, 0, 0.1); color: #ff9800;">
-          <i class="fas fa-calendar-day"></i>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">{{ animatedStats.todayViews }}</div>
-          <div class="stat-label">今日访问</div>
-        </div>
-      </div>
-      
-      <div class="stat-card">
-        <div class="stat-icon" style="background: rgba(156, 39, 176, 0.1); color: #9c27b0;">
-          <i class="fas fa-link"></i>
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">{{ animatedStats.totalSites }}</div>
-          <div class="stat-label">站点数量</div>
-        </div>
-      </div>
-    </div>
+  <div ref="dashboardElement" class="dashboard" :aria-busy="loading">
+    <p v-if="errorMessage" class="dashboard-alert" role="status">
+      <i class="fas fa-circle-exclamation" aria-hidden="true"></i>{{ errorMessage }}
+    </p>
 
-    <!-- 中部图表区域 -->
-    <div class="charts-grid">
-      <!-- 访问趋势图（主图表，权重更高） -->
-      <div class="chart-card chart-card--primary">
-        <div class="card-header">
-          <h3><i class="fas fa-chart-line"></i> 访问趋势</h3>
-          <select v-model="chartPeriod" @change="loadChartData" class="period-select">
-            <option value="7">最近7天</option>
-            <option value="30">最近30天</option>
-            <option value="90">最近90天</option>
+    <section class="stats-grid" aria-label="访问概览">
+      <article v-for="stat in statCards" :key="stat.key" class="stat-card">
+        <span class="stat-icon"><i :class="stat.icon" aria-hidden="true"></i></span>
+        <div><strong>{{ formatNumber(stats[stat.key]) }}</strong><span>{{ stat.label }}</span></div>
+      </article>
+    </section>
+
+    <section class="charts-grid">
+      <article class="dashboard-panel trend-panel">
+        <header class="panel-header">
+          <div><h2>访问趋势</h2><p>按日期汇总的页面访问次数</p></div>
+          <select v-model="chartPeriod" aria-label="趋势统计周期" @change="loadCharts">
+            <option value="7">最近 7 天</option>
+            <option value="30">最近 30 天</option>
+            <option value="90">最近 90 天</option>
           </select>
-        </div>
-        <div class="card-body chart-body">
-          <canvas ref="trendChart"></canvas>
-        </div>
-      </div>
+        </header>
+        <div class="chart-canvas"><canvas ref="trendCanvas" aria-label="访问趋势图"></canvas></div>
+      </article>
 
-      <!-- 访问来源（次要图表） -->
-      <div class="chart-card chart-card--secondary">
-        <div class="card-header">
-          <h3><i class="fas fa-chart-pie"></i> 访问来源</h3>
+      <article class="dashboard-panel source-panel">
+        <header class="panel-header"><div><h2>访问来源</h2><p>访客进入站点的主要渠道</p></div></header>
+        <div class="source-content">
+          <div class="source-canvas"><canvas ref="sourceCanvas" aria-label="访问来源图"></canvas></div>
+          <ul class="source-legend">
+            <li v-for="(source, index) in sourceData" :key="source.label">
+              <i :style="{ background: chartColors[index % chartColors.length] }"></i>
+              <span>{{ source.label }}</span><strong>{{ source.value }}%</strong>
+            </li>
+          </ul>
         </div>
-        <div class="card-body chart-body">
-          <canvas ref="sourceChart"></canvas>
-        </div>
-      </div>
-    </div>
+      </article>
+    </section>
 
-    <!-- 底部列表与日志区域 - 现代化布局 -->
-    <div class="bottom-grid-modern">
-      <!-- 左侧：最近登录IP（小卡片） -->
-      <div class="recent-login-card compact-card">
-        <div class="card-header">
-          <h3><i class="fas fa-sign-in-alt"></i> 最近登录IP</h3>
-          <button @click="loadLoginHistory" class="refresh-logs-btn" title="刷新">
-            <i class="fas fa-sync-alt" :class="{ 'fa-spin': loadingLoginHistory }"></i>
+    <section class="activity-grid">
+      <article class="dashboard-panel login-panel">
+        <header class="panel-header">
+          <div><h2>最近登录</h2><p>最近五次后台登录记录</p></div>
+          <button type="button" class="icon-action" title="刷新登录记录" aria-label="刷新登录记录" @click="loadLoginHistory">
+            <i class="fas fa-rotate" :class="{ 'fa-spin': loginLoading }" aria-hidden="true"></i>
           </button>
-        </div>
-        <div class="card-body compact-body">
-          <div class="recent-list login-history-list">
-            <div
-              v-for="(history, index) in loginHistory"
-              :key="index"
-              class="recent-item login-item"
-            >
-              <div
-                class="recent-icon"
-                :class="{ 'login-success': history.success, 'login-failed': !history.success }"
-              >
-                <i :class="history.success ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
-              </div>
-              <div class="recent-content">
-                <div class="recent-title">
-                  <span class="login-ip">{{ history.ip }}</span>
-                  <span v-if="history.location" class="login-location">{{ history.location }}</span>
-                </div>
-                <div class="recent-meta">
-                  <span>{{ history.username }}</span>
-                  <span>{{ history.loginTime }}</span>
-                </div>
-              </div>
-            </div>
-            <div v-if="loginHistory.length === 0" class="empty-state">
-              <i class="fas fa-inbox"></i>
-              <p>暂无登录记录</p>
-            </div>
+        </header>
+        <div class="login-list">
+          <div v-for="(history, index) in loginHistory" :key="`${history.loginTime}-${index}`" class="login-row">
+            <i :class="history.success ? 'fas fa-circle-check success' : 'fas fa-circle-xmark danger'" aria-hidden="true"></i>
+            <div><strong>{{ history.ip || '未知 IP' }}</strong><span>{{ history.location || history.username || '未知位置' }}</span></div>
+            <time>{{ history.loginTime }}</time>
           </div>
+          <div v-if="!loginHistory.length" class="panel-empty"><i class="fas fa-clock-rotate-left"></i><span>暂无登录记录</span></div>
         </div>
-      </div>
+      </article>
 
-      <!-- 右侧：后台日志（平铺，占更大空间） -->
-      <div class="logs-card-full">
-        <div class="card-header">
-          <h3><i class="fas fa-terminal"></i> 后台日志</h3>
-          <div class="logs-controls">
-            <select v-model="logLines" @change="loadLogs" class="log-lines-select">
-              <option value="50">最近50条</option>
-              <option value="100">最近100条</option>
-              <option value="200">最近200条</option>
-              <option value="500">最近500条</option>
-              <option value="all">全部</option>
+      <article class="dashboard-panel logs-panel">
+        <header class="panel-header">
+          <div><h2>后台日志</h2><p>服务端最近输出的运行记录</p></div>
+          <div class="panel-actions">
+            <select v-model="logLines" aria-label="日志数量" @change="loadLogs">
+              <option value="50">50 条</option><option value="100">100 条</option><option value="200">200 条</option><option value="500">500 条</option><option value="all">全部</option>
             </select>
-            <button @click="loadLogs" class="refresh-logs-btn" title="刷新日志">
-              <i class="fas fa-sync-alt" :class="{ 'fa-spin': loadingLogs }"></i>
+            <button type="button" class="icon-action" :class="{ active: autoScroll }" title="自动滚动" aria-label="自动滚动" @click="autoScroll = !autoScroll">
+              <i class="fas fa-arrow-down" aria-hidden="true"></i>
             </button>
-            <button
-              @click="autoScroll = !autoScroll"
-              class="auto-scroll-btn"
-              :class="{ active: autoScroll }"
-              title="自动滚动"
-            >
-              <i class="fas fa-arrow-down"></i>
+            <button type="button" class="icon-action" title="刷新日志" aria-label="刷新日志" @click="loadLogs">
+              <i class="fas fa-rotate" :class="{ 'fa-spin': logsLoading }" aria-hidden="true"></i>
             </button>
           </div>
+        </header>
+        <div ref="logsElement" class="logs-output" @scroll="handleLogScroll">
+          <div v-for="(log, index) in logs" :key="index" class="log-line" :class="logClass(log)"><span>{{ String(index + 1).padStart(3, '0') }}</span><code>{{ log }}</code></div>
+          <div v-if="!logs.length" class="panel-empty"><i class="fas fa-terminal"></i><span>暂无日志</span></div>
         </div>
-        <div class="card-body logs-body-full" ref="logsContainer">
-          <div class="logs-content">
-            <div
-              v-for="(log, index) in backendLogs"
-              :key="index"
-              class="log-line"
-              :class="getLogLevel(log)"
-            >
-              <span class="log-content">{{ log }}</span>
-            </div>
-            <div v-if="backendLogs.length === 0" class="empty-state">
-              <i class="fas fa-inbox"></i>
-              <p>暂无日志</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      </article>
+    </section>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { adminAPI } from '../api'
 
-const stats = ref({
-  totalViews: 0,
-  uniqueVisitors: 0,
-  todayViews: 0,
-  totalSites: 0,
-})
-
-const animatedStats = ref({
-  totalViews: 0,
-  uniqueVisitors: 0,
-  todayViews: 0,
-  totalSites: 0,
-})
-
-const chartPeriod = ref(7)
-const trendChart = ref(null)
-const sourceChart = ref(null)
-const backendLogs = ref([])
+const statCards = [
+  { key: 'totalViews', label: '总访问量', icon: 'fas fa-eye' },
+  { key: 'uniqueVisitors', label: '独立访客', icon: 'fas fa-users' },
+  { key: 'todayViews', label: '今日访问', icon: 'fas fa-calendar-day' },
+  { key: 'totalSites', label: '站点数量', icon: 'fas fa-link' },
+]
+const chartColors = ['#ffcc00', '#4f8bc9', '#4c9a61', '#d07842', '#8b6cb1']
+const stats = ref({ totalViews: 0, uniqueVisitors: 0, todayViews: 0, totalSites: 0 })
+const chartPeriod = ref('7')
+const trendData = ref([])
+const sourceData = ref([])
+const logs = ref([])
 const logLines = ref('100')
-const loadingLogs = ref(false)
-const autoScroll = ref(true)
-const logsContainer = ref(null)
 const loginHistory = ref([])
-const loadingLoginHistory = ref(false)
-const isLoading = ref(true)
-let trendChartInstance = null
-let sourceChartInstance = null
+const loading = ref(true)
+const logsLoading = ref(false)
+const loginLoading = ref(false)
+const autoScroll = ref(true)
+const errorMessage = ref('')
+const dashboardElement = ref(null)
+const trendCanvas = ref(null)
+const sourceCanvas = ref(null)
+const logsElement = ref(null)
+let refreshTimer = null
+let resizeObserver = null
+let themeObserver = null
 
-// 简单的图表实现（使用Canvas绘制，不依赖外部库）
-const drawTrendChart = (data) => {
-  if (!trendChart.value) return
-  
-  const canvas = trendChart.value
-  const ctx = canvas.getContext('2d')
-  const width = canvas.width = canvas.offsetWidth
-  const height = canvas.height = canvas.offsetHeight
-  
-  ctx.clearRect(0, 0, width, height)
-  
-  if (!data || data.length === 0) {
-    ctx.fillStyle = '#999'
-    ctx.font = '14px sans-serif'
-    ctx.textAlign = 'center'
-    ctx.fillText('暂无数据', width / 2, height / 2)
-    return
+const formatNumber = (value) => new Intl.NumberFormat('zh-CN').format(Number(value) || 0)
+const styles = computed(() => getComputedStyle(document.documentElement))
+const cssColor = (name, fallback) => styles.value.getPropertyValue(name).trim() || fallback
+
+const canvasContext = (canvas) => {
+  if (!canvas) return null
+  const rect = canvas.getBoundingClientRect()
+  const width = Math.max(rect.width, 240)
+  const height = Math.max(rect.height, 180)
+  const dpr = Math.min(window.devicePixelRatio || 1, 2)
+  canvas.width = Math.round(width * dpr)
+  canvas.height = Math.round(height * dpr)
+  const context = canvas.getContext('2d')
+  context.setTransform(dpr, 0, 0, dpr, 0, 0)
+  context.clearRect(0, 0, width, height)
+  return { context, width, height }
+}
+
+const drawEmpty = ({ context, width, height }) => {
+  context.fillStyle = cssColor('--text-muted', '#777')
+  context.font = '13px sans-serif'
+  context.textAlign = 'center'
+  context.fillText('暂无数据', width / 2, height / 2)
+}
+
+const drawTrend = () => {
+  const surface = canvasContext(trendCanvas.value)
+  if (!surface) return
+  const { context, width, height } = surface
+  if (!trendData.value.length) return drawEmpty(surface)
+  const padding = { top: 20, right: 18, bottom: 36, left: 42 }
+  const chartWidth = width - padding.left - padding.right
+  const chartHeight = height - padding.top - padding.bottom
+  const max = Math.max(...trendData.value.map((point) => Number(point.value) || 0), 1)
+  const textColor = cssColor('--text-muted', '#777')
+  const gridColor = cssColor('--border-color', 'rgba(0,0,0,.15)')
+  const accent = cssColor('--hover-link-color', '#ffcc00')
+
+  context.strokeStyle = gridColor
+  context.lineWidth = 1
+  context.fillStyle = textColor
+  context.font = '11px sans-serif'
+  for (let index = 0; index <= 4; index++) {
+    const y = padding.top + chartHeight * (index / 4)
+    context.beginPath(); context.moveTo(padding.left, y); context.lineTo(width - padding.right, y); context.stroke()
+    context.textAlign = 'right'
+    context.fillText(String(Math.round(max * (1 - index / 4))), padding.left - 8, y + 4)
   }
-  
-  const padding = 50
-  const chartWidth = width - padding * 2
-  const chartHeight = height - padding * 2
-  const maxValue = Math.max(...data.map(d => d.value), 1)
-  
-  // 绘制背景渐变
-  const bgGradient = ctx.createLinearGradient(0, padding, 0, height - padding)
-  bgGradient.addColorStop(0, 'rgba(255, 204, 0, 0.05)')
-  bgGradient.addColorStop(1, 'rgba(255, 204, 0, 0)')
-  ctx.fillStyle = bgGradient
-  ctx.fillRect(padding, padding, chartWidth, chartHeight)
-  
-  // 绘制网格
-  ctx.strokeStyle = 'rgba(0, 0, 0, 0.08)'
-  ctx.lineWidth = 1
-  ctx.setLineDash([2, 4])
-  for (let i = 0; i <= 5; i++) {
-    const y = padding + (chartHeight / 5) * i
-    ctx.beginPath()
-    ctx.moveTo(padding, y)
-    ctx.lineTo(width - padding, y)
-    ctx.stroke()
-  }
-  ctx.setLineDash([])
-  
-  // 绘制数据区域（渐变填充）
-  const areaGradient = ctx.createLinearGradient(0, padding, 0, height - padding)
-  areaGradient.addColorStop(0, 'rgba(255, 204, 0, 0.3)')
-  areaGradient.addColorStop(1, 'rgba(255, 204, 0, 0.05)')
-  
-  ctx.fillStyle = areaGradient
-  ctx.beginPath()
-  data.forEach((point, index) => {
-    const x = padding + (chartWidth / (data.length - 1 || 1)) * index
-    const y = padding + chartHeight - (point.value / maxValue) * chartHeight
-    if (index === 0) {
-      ctx.moveTo(x, height - padding)
-      ctx.lineTo(x, y)
-    } else {
-      ctx.lineTo(x, y)
-    }
-  })
-  ctx.lineTo(width - padding, height - padding)
-  ctx.closePath()
-  ctx.fill()
-  
-  // 绘制折线（带渐变）
-  const lineGradient = ctx.createLinearGradient(padding, 0, width - padding, 0)
-  lineGradient.addColorStop(0, '#ffd700')
-  lineGradient.addColorStop(0.5, '#ffcc00')
-  lineGradient.addColorStop(1, '#ffaa00')
-  
-  ctx.strokeStyle = lineGradient
-  ctx.lineWidth = 3
-  ctx.lineCap = 'round'
-  ctx.lineJoin = 'round'
-  ctx.shadowColor = 'rgba(255, 204, 0, 0.5)'
-  ctx.shadowBlur = 8
-  ctx.shadowOffsetX = 0
-  ctx.shadowOffsetY = 2
-  
-  ctx.beginPath()
-  data.forEach((point, index) => {
-    const x = padding + (chartWidth / (data.length - 1 || 1)) * index
-    const y = padding + chartHeight - (point.value / maxValue) * chartHeight
-    if (index === 0) {
-      ctx.moveTo(x, y)
-    } else {
-      ctx.lineTo(x, y)
-    }
-  })
-  ctx.stroke()
-  
-  // 重置阴影
-  ctx.shadowColor = 'transparent'
-  ctx.shadowBlur = 0
-  ctx.shadowOffsetX = 0
-  ctx.shadowOffsetY = 0
-  
-  // 绘制点（带光晕效果）
-  data.forEach((point, index) => {
-    const x = padding + (chartWidth / (data.length - 1 || 1)) * index
-    const y = padding + chartHeight - (point.value / maxValue) * chartHeight
-    
-    // 外圈光晕
-    const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, 8)
-    glowGradient.addColorStop(0, 'rgba(255, 204, 0, 0.6)')
-    glowGradient.addColorStop(1, 'rgba(255, 204, 0, 0)')
-    ctx.fillStyle = glowGradient
-    ctx.beginPath()
-    ctx.arc(x, y, 8, 0, Math.PI * 2)
-    ctx.fill()
-    
-    // 内圈点
-    const pointGradient = ctx.createRadialGradient(x, y, 0, x, y, 5)
-    pointGradient.addColorStop(0, '#ffd700')
-    pointGradient.addColorStop(1, '#ffcc00')
-    ctx.fillStyle = pointGradient
-    ctx.beginPath()
-    ctx.arc(x, y, 5, 0, Math.PI * 2)
-    ctx.fill()
-    
-    // 白色高光
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'
-    ctx.beginPath()
-    ctx.arc(x - 1.5, y - 1.5, 2, 0, Math.PI * 2)
-    ctx.fill()
-  })
-  
-  // 绘制Y轴标签
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
-  ctx.font = '11px sans-serif'
-  ctx.textAlign = 'right'
-  for (let i = 0; i <= 5; i++) {
-    const y = padding + (chartHeight / 5) * i
-    const value = Math.round(maxValue - (maxValue / 5) * i)
-    ctx.fillText(value.toString(), padding - 10, y + 4)
-  }
-  
-  // 绘制X轴标签
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'
-  ctx.font = '12px sans-serif'
-  ctx.textAlign = 'center'
-  data.forEach((point, index) => {
-    const x = padding + (chartWidth / (data.length - 1 || 1)) * index
-    ctx.fillText(point.label, x, height - 15)
+
+  const points = trendData.value.map((point, index) => ({
+    x: padding.left + chartWidth * (index / Math.max(trendData.value.length - 1, 1)),
+    y: padding.top + chartHeight - (Number(point.value) || 0) / max * chartHeight,
+    label: point.label,
+  }))
+  const fill = context.createLinearGradient(0, padding.top, 0, height - padding.bottom)
+  fill.addColorStop(0, 'rgba(255, 204, 0, 0.24)')
+  fill.addColorStop(1, 'rgba(255, 204, 0, 0.01)')
+  context.beginPath(); context.moveTo(points[0].x, height - padding.bottom)
+  points.forEach((point) => context.lineTo(point.x, point.y))
+  context.lineTo(points.at(-1).x, height - padding.bottom); context.closePath(); context.fillStyle = fill; context.fill()
+  context.beginPath(); points.forEach((point, index) => index ? context.lineTo(point.x, point.y) : context.moveTo(point.x, point.y))
+  context.strokeStyle = accent; context.lineWidth = 2.5; context.lineJoin = 'round'; context.stroke()
+
+  const labelStep = Math.max(1, Math.ceil(trendData.value.length / Math.max(Math.floor(chartWidth / 58), 1)))
+  context.fillStyle = textColor; context.textAlign = 'center'
+  points.forEach((point, index) => {
+    if (index % labelStep === 0 || index === points.length - 1) context.fillText(point.label, point.x, height - 13)
   })
 }
 
-const drawSourceChart = (data) => {
-  if (!sourceChart.value) return
-  
-  const canvas = sourceChart.value
-  const ctx = canvas.getContext('2d')
-  const width = canvas.width = canvas.offsetWidth
-  const height = canvas.height = canvas.offsetHeight
-  
-  ctx.clearRect(0, 0, width, height)
-  
-  if (!data || data.length === 0) {
-    ctx.fillStyle = '#999'
-    ctx.font = '14px sans-serif'
-    ctx.textAlign = 'center'
-    ctx.fillText('暂无数据', width / 2, height / 2)
-    return
-  }
-  
+const drawSources = () => {
+  const surface = canvasContext(sourceCanvas.value)
+  if (!surface) return
+  const { context, width, height } = surface
+  if (!sourceData.value.length) return drawEmpty(surface)
   const centerX = width / 2
-  const centerY = height / 2 - 10
-  const radius = Math.min(width, height) / 2 - 50
-  const total = data.reduce((sum, item) => sum + item.value, 0)
-  
-  let currentAngle = -Math.PI / 2
-  const colors = [
-    { start: '#ffd700', end: '#ffcc00' },
-    { start: '#42a5f5', end: '#2196f3' },
-    { start: '#66bb6a', end: '#4caf50' },
-    { start: '#ffb74d', end: '#ff9800' },
-    { start: '#ba68c8', end: '#9c27b0' }
-  ]
-  
-  data.forEach((item, index) => {
-    const sliceAngle = (item.value / total) * Math.PI * 2
-    const color = colors[index % colors.length]
-    
-    // 创建渐变
-    const gradient = ctx.createRadialGradient(
-      centerX + Math.cos(currentAngle + sliceAngle / 2) * (radius * 0.3),
-      centerY + Math.sin(currentAngle + sliceAngle / 2) * (radius * 0.3),
-      0,
-      centerX,
-      centerY,
-      radius
-    )
-    gradient.addColorStop(0, color.start)
-    gradient.addColorStop(1, color.end)
-    
-    // 绘制扇形（带阴影）
-    ctx.shadowColor = 'rgba(0, 0, 0, 0.2)'
-    ctx.shadowBlur = 8
-    ctx.shadowOffsetX = 2
-    ctx.shadowOffsetY = 2
-    
-    ctx.beginPath()
-    ctx.moveTo(centerX, centerY)
-    ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
-    ctx.closePath()
-    ctx.fillStyle = gradient
-    ctx.fill()
-    
-    // 绘制分隔线
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'
-    ctx.lineWidth = 2
-    ctx.beginPath()
-    ctx.moveTo(centerX, centerY)
-    ctx.lineTo(
-      centerX + Math.cos(currentAngle) * radius,
-      centerY + Math.sin(currentAngle) * radius
-    )
-    ctx.stroke()
-    
-    // 重置阴影
-    ctx.shadowColor = 'transparent'
-    ctx.shadowBlur = 0
-    ctx.shadowOffsetX = 0
-    ctx.shadowOffsetY = 0
-    
-    // 绘制标签（带背景）
-    const labelAngle = currentAngle + sliceAngle / 2
-    const labelX = centerX + Math.cos(labelAngle) * (radius * 0.75)
-    const labelY = centerY + Math.sin(labelAngle) * (radius * 0.75)
-    
-    // 标签背景
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
-    ctx.beginPath()
-    ctx.arc(labelX, labelY, 20, 0, Math.PI * 2)
-    ctx.fill()
-    
-    // 标签文字
-    ctx.fillStyle = '#333'
-    ctx.font = 'bold 11px sans-serif'
-    ctx.textAlign = 'center'
-    ctx.textBaseline = 'middle'
-    ctx.fillText(item.label, labelX, labelY)
-    
-    // 百分比
-    const percent = ((item.value / total) * 100).toFixed(1)
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'
-    ctx.font = '10px sans-serif'
-    ctx.fillText(percent + '%', labelX, labelY + 15)
-    
-    currentAngle += sliceAngle
-  })
-  
-  // 绘制中心圆（白色背景）
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.95)'
-  ctx.beginPath()
-  ctx.arc(centerX, centerY, radius * 0.4, 0, Math.PI * 2)
-  ctx.fill()
-  
-  // 绘制图例（改进样式）
-  const legendY = height - 25
-  const legendStartX = (width - (data.length * 120)) / 2
-  
-  data.forEach((item, index) => {
-    const color = colors[index % colors.length]
-    const x = legendStartX + index * 120
-    
-    // 图例方块（带渐变）
-    const legendGradient = ctx.createLinearGradient(x, legendY, x + 16, legendY + 16)
-    legendGradient.addColorStop(0, color.start)
-    legendGradient.addColorStop(1, color.end)
-    
-    ctx.fillStyle = legendGradient
-    ctx.fillRect(x, legendY, 16, 16)
-    
-    // 图例文字
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'
-    ctx.font = '12px sans-serif'
-    ctx.textAlign = 'left'
-    ctx.textBaseline = 'middle'
-    ctx.fillText(item.label, x + 22, legendY + 8)
-    
-    // 数值
-    const percent = ((item.value / total) * 100).toFixed(1)
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
-    ctx.font = '11px sans-serif'
-    ctx.fillText(`(${item.value}, ${percent}%)`, x + 22, legendY + 22)
+  const centerY = height / 2
+  const radius = Math.max(Math.min(width, height) / 2 - 20, 40)
+  const total = sourceData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) || 1
+  let angle = -Math.PI / 2
+  sourceData.value.forEach((item, index) => {
+    const nextAngle = angle + (Number(item.value) || 0) / total * Math.PI * 2
+    context.beginPath(); context.arc(centerX, centerY, radius, angle, nextAngle); context.arc(centerX, centerY, radius * 0.62, nextAngle, angle, true); context.closePath()
+    context.fillStyle = chartColors[index % chartColors.length]; context.fill(); angle = nextAngle
   })
+  context.fillStyle = cssColor('--text-color', '#333'); context.textAlign = 'center'; context.font = '700 20px sans-serif'; context.fillText(`${Math.round(total)}%`, centerX, centerY + 7)
 }
 
-// 数字动画函数
-const animateNumber = (target, current, duration = 1000) => {
-  const start = current
-  const end = target
-  const startTime = performance.now()
-  
-  const animate = (currentTime) => {
-    const elapsed = currentTime - startTime
-    const progress = Math.min(elapsed / duration, 1)
-    
-    // 使用缓动函数
-    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
-    const value = Math.floor(start + (end - start) * easeOutQuart)
-    
-    return value
-  }
-  
-  return animate
-}
-
-// 更新动画数字
-const updateAnimatedStats = (newStats) => {
-  const duration = 800
-  const steps = 60
-  const stepDuration = duration / steps
-  
-  Object.keys(newStats).forEach((key) => {
-    const target = newStats[key]
-    const start = animatedStats.value[key]
-    let currentStep = 0
-    
-    const interval = setInterval(() => {
-      currentStep++
-      const progress = currentStep / steps
-      const easeOutQuart = 1 - Math.pow(1 - progress, 4)
-      animatedStats.value[key] = Math.floor(start + (target - start) * easeOutQuart)
-      
-      if (currentStep >= steps) {
-        animatedStats.value[key] = target
-        clearInterval(interval)
-      }
-    }, stepDuration)
-  })
-}
+const drawCharts = () => { drawTrend(); drawSources() }
 
 const loadStats = async () => {
-  try {
-    const res = await adminAPI.getStats()
-    stats.value = res.data
-    updateAnimatedStats(res.data)
-  } catch (error) {
-    console.error('加载统计失败:', error)
-    // 使用模拟数据
-    const mockStats = {
-      totalViews: 1234,
-      uniqueVisitors: 567,
-      todayViews: 89,
-      totalSites: 12,
-    }
-    stats.value = mockStats
-    updateAnimatedStats(mockStats)
-  }
+  const { data } = await adminAPI.getStats()
+  stats.value = { ...stats.value, ...data }
 }
 
-const loadChartData = async () => {
+const loadCharts = async () => {
   try {
-    const res = await adminAPI.getChartData(chartPeriod.value)
-    await nextTick()
-    drawTrendChart(res.data.trend)
-    drawSourceChart(res.data.sources)
-  } catch (error) {
-    console.error('加载图表数据失败:', error)
-    // 使用模拟数据
-    const mockTrend = Array.from({ length: chartPeriod.value }, (_, i) => ({
-      label: `${i + 1}日`,
-      value: Math.floor(Math.random() * 100) + 50,
-    }))
-    const mockSources = [
-      { label: '直接访问', value: 45 },
-      { label: '搜索引擎', value: 30 },
-      { label: '社交媒体', value: 15 },
-      { label: '其他', value: 10 },
-    ]
-    await nextTick()
-    drawTrendChart(mockTrend)
-    drawSourceChart(mockSources)
+    const { data } = await adminAPI.getChartData(chartPeriod.value)
+    trendData.value = data.trend || []
+    sourceData.value = data.sources || []
+    await nextTick(); drawCharts()
+  } catch {
+    trendData.value = []; sourceData.value = []; drawCharts()
   }
 }
 
-
 const loadLogs = async () => {
-  loadingLogs.value = true
+  logsLoading.value = true
   try {
-    const res = await adminAPI.getBackendLogs(logLines.value)
-    backendLogs.value = res.data.logs || []
-    
-    // 自动滚动到底部
-    if (autoScroll.value) {
-      nextTick(() => {
-        scrollToBottom()
-      })
-    }
-  } catch (error) {
-    console.error('加载日志失败:', error)
-    backendLogs.value = []
-  } finally {
-    loadingLogs.value = false
-  }
+    const { data } = await adminAPI.getBackendLogs(logLines.value)
+    logs.value = data.logs || []
+    if (autoScroll.value) await nextTick().then(() => { if (logsElement.value) logsElement.value.scrollTop = logsElement.value.scrollHeight })
+  } catch { logs.value = [] } finally { logsLoading.value = false }
 }
 
-const scrollToBottom = () => {
-  if (logsContainer.value) {
-    const container = logsContainer.value
-    container.scrollTop = container.scrollHeight
-  }
-}
-
-const getLogLevel = (log) => {
-  if (!log) return ''
-  const logUpper = log.toUpperCase()
-  if (logUpper.includes('[ERROR]') || logUpper.includes('ERROR')) {
-    return 'log-error'
-  }
-  if (logUpper.includes('[WARN]') || logUpper.includes('WARN')) {
-    return 'log-warn'
-  }
-  if (logUpper.includes('[INFO]') || logUpper.includes('INFO')) {
-    return 'log-info'
-  }
-  return 'log-default'
-}
-
-let refreshInterval = null
-
 const loadLoginHistory = async () => {
-  loadingLoginHistory.value = true
+  loginLoading.value = true
   try {
-    // 最近登录 IP 只展示 5 条
-    const res = await adminAPI.getLoginHistory(5)
-    loginHistory.value = (res.data.data || res.data || []).slice(0, 5)
-  } catch (error) {
-    console.error('加载登录历史失败:', error)
-    loginHistory.value = []
-  } finally {
-    loadingLoginHistory.value = false
-  }
+    const { data } = await adminAPI.getLoginHistory(5)
+    loginHistory.value = (data.data || data || []).slice(0, 5)
+  } catch { loginHistory.value = [] } finally { loginLoading.value = false }
+}
+
+const refreshAll = async () => {
+  errorMessage.value = ''
+  const results = await Promise.allSettled([loadStats(), loadCharts(), loadLogs(), loadLoginHistory()])
+  if (results.some((result) => result.status === 'rejected')) errorMessage.value = '部分仪表盘数据暂时无法读取，请稍后刷新。'
+}
+
+const logClass = (log) => {
+  const upper = String(log).toUpperCase()
+  if (upper.includes('ERROR')) return 'error'
+  if (upper.includes('WARN')) return 'warning'
+  if (upper.includes('INFO')) return 'info'
+  return ''
+}
+
+const handleLogScroll = () => {
+  if (!logsElement.value) return
+  const atBottom = logsElement.value.scrollHeight - logsElement.value.scrollTop <= logsElement.value.clientHeight + 12
+  if (!atBottom) autoScroll.value = false
 }
 
 onMounted(async () => {
-  isLoading.value = true
-  try {
-    await Promise.all([
-      loadStats(),
-      loadChartData(),
-      loadLogs(),
-      loadLoginHistory()
-    ])
-  } finally {
-    // 延迟一下让动画更自然
-    setTimeout(() => {
-      isLoading.value = false
-    }, 300)
-  }
-  
-  // 每30秒刷新一次数据
-  refreshInterval = setInterval(() => {
-    loadStats()
-    loadChartData()
-    loadLogs()
-    loadLoginHistory()
-  }, 30000)
-  
-  // 窗口大小改变时重绘图表
-  window.addEventListener('resize', () => {
-    loadChartData()
-  })
-  
-  // 监听日志容器滚动，如果用户手动滚动，则禁用自动滚动
-  if (logsContainer.value) {
-    logsContainer.value.addEventListener('scroll', () => {
-      const container = logsContainer.value
-      const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10
-      if (!isAtBottom) {
-        autoScroll.value = false
-      }
-    })
-  }
+  await refreshAll()
+  loading.value = false
+  refreshTimer = window.setInterval(refreshAll, 30000)
+  resizeObserver = new ResizeObserver(() => window.requestAnimationFrame(drawCharts))
+  if (dashboardElement.value) resizeObserver.observe(dashboardElement.value)
+  themeObserver = new MutationObserver(() => window.requestAnimationFrame(drawCharts))
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 })
 
 onUnmounted(() => {
-  if (refreshInterval) {
-    clearInterval(refreshInterval)
-  }
-  window.removeEventListener('resize', loadChartData)
+  window.clearInterval(refreshTimer)
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
 })
 </script>
 
 <style scoped>
-.dashboard {
-  padding: 4px 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
-  animation: fadeInUp 0.6s ease-out;
-  position: relative;
-}
-
-.dashboard.loading {
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-.dashboard.loading * {
-  animation-play-state: paused !important;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 24px;
-}
-
-.stat-card {
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.8) 0%, rgba(var(--background-color-rgb), 0.6) 100%);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  padding: 28px;
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  position: relative;
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(90deg, transparent, var(--hover-link-color), transparent);
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
-
-.stat-card:hover {
-  transform: translateY(-4px) scale(1.02);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
-  border-color: var(--hover-link-color);
-}
-
-.stat-card:hover::before {
-  opacity: 1;
-}
-
-.stat-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.75rem;
-  flex-shrink: 0;
-  position: relative;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.stat-card:hover .stat-icon {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-}
-
-.stat-content {
-  flex: 1;
-  position: relative;
-  z-index: 1;
-}
-
-.stat-value {
-  font-size: 2.25rem;
-  font-weight: 700;
-  color: var(--text-color);
-  line-height: 1.2;
-  margin-bottom: 6px;
-  background: linear-gradient(135deg, var(--text-color) 0%, rgba(var(--text-color-rgb, 51, 51, 51), 0.8) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transition: all 0.3s ease;
-}
-
-.stat-card:hover .stat-value {
-  transform: scale(1.05);
-}
-
-.stat-label {
-  font-size: 0.95rem;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.65);
-  font-weight: 500;
-  letter-spacing: 0.3px;
-}
-
-.charts-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.7fr);
-  gap: 28px;
-}
-
-.chart-card--primary .chart-body canvas {
-  height: 360px;
-  max-height: 360px;
-}
-
-.chart-card--secondary .chart-body canvas {
-  height: 300px;
-  max-height: 300px;
-}
-
-.chart-card,
-.recent-card {
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.85) 0%, rgba(var(--background-color-rgb), 0.7) 100%);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.chart-card:hover,
-.recent-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
-  border-color: var(--hover-link-color);
-}
-
-.card-header {
-  padding: 22px 28px;
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.95) 0%, rgba(var(--background-color-rgb), 0.85) 100%);
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-}
-
-.card-header::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--hover-link-color), transparent);
-  opacity: 0.3;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: var(--text-color);
-  letter-spacing: 0.3px;
-}
-
-.card-header i {
-  color: var(--hover-link-color);
-  font-size: 1.2rem;
-  transition: transform 0.3s ease;
-}
-
-.chart-card:hover .card-header i {
-  transform: scale(1.1);
-}
-
-.period-select {
-  padding: 8px 16px;
-  border: 1.5px solid var(--border-color);
-  border-radius: 10px;
-  background: rgba(var(--background-color-rgb), 0.9);
-  color: var(--text-color);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 500;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.period-select:hover {
-  border-color: var(--hover-link-color);
-  background: rgba(var(--background-color-rgb), 1);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.period-select:focus {
-  outline: none;
-  border-color: var(--hover-link-color);
-  box-shadow: 0 0 0 3px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.2);
-}
-
-.card-body {
-  padding: 28px;
-  position: relative;
-}
-
-.card-body canvas {
-  width: 100%;
-  height: 300px;
-  max-height: 320px;
-  border-radius: 8px;
-}
-
-.recent-list {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.recent-item {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.5) 0%, rgba(var(--background-color-rgb), 0.3) 100%);
-  border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid transparent;
-  position: relative;
-  overflow: hidden;
-}
-
-.recent-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--hover-link-color);
-  transform: scaleY(0);
-  transition: transform 0.3s ease;
-}
-
-.recent-item:hover {
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.7) 0%, rgba(var(--background-color-rgb), 0.5) 100%);
-  transform: translateX(4px);
-  border-color: var(--hover-link-color);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.recent-item:hover::before {
-  transform: scaleY(1);
-}
-
-.recent-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.15) 0%, rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.1) 100%);
-  color: var(--hover-link-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: 1.1rem;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.recent-item:hover .recent-icon {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-}
-
-.recent-content {
-  flex: 1;
-  position: relative;
-  z-index: 1;
-}
-
-.recent-title {
-  font-weight: 600;
-  color: var(--text-color);
-  margin-bottom: 6px;
-  font-size: 0.95rem;
-  letter-spacing: 0.2px;
-}
-
-.recent-meta {
-  display: flex;
-  gap: 16px;
-  font-size: 0.85rem;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.65);
-  font-weight: 500;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
-  animation: fadeIn 0.5s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.empty-state i {
-  font-size: 3.5rem;
-  margin-bottom: 20px;
-  opacity: 0.25;
-  display: inline-block;
-  animation: float 3s ease-in-out infinite;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-.empty-state p {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.3px;
-}
-
-/* 底部布局：现代化两栏布局 */
-.bottom-grid-modern {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
-  gap: 20px;
-  align-items: start;
-}
-
-.recent-login-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  height: 100%;
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.85) 0%, rgba(var(--background-color-rgb), 0.7) 100%);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.recent-login-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
-  border-color: var(--hover-link-color);
-}
-
-.compact-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.compact-body {
-  flex: 1;
-  padding: 18px;
-  overflow-y: auto;
-  min-height: 0;
-  max-height: 400px;
-  /* 自定义滚动条 */
-  scrollbar-width: thin;
-  scrollbar-color: var(--hover-link-color) rgba(var(--background-color-rgb), 0.3);
-}
-
-.compact-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.compact-body::-webkit-scrollbar-track {
-  background: rgba(var(--background-color-rgb), 0.3);
-  border-radius: 3px;
-}
-
-.compact-body::-webkit-scrollbar-thumb {
-  background: var(--hover-link-color);
-  border-radius: 3px;
-  transition: background 0.3s ease;
-}
-
-.compact-body::-webkit-scrollbar-thumb:hover {
-  background: #ffd700;
-}
-
-.logs-card-full {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  height: 100%;
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.85) 0%, rgba(var(--background-color-rgb), 0.7) 100%);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  grid-column: span 1;
-}
-
-.logs-card-full:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
-  border-color: var(--hover-link-color);
-}
-
-.logs-body-full {
-  flex: 1;
-  padding: 0;
-  overflow-y: auto;
-  min-height: 0;
-  max-height: 400px;
-  background: #1e1e1e;
-  font-family: 'Courier New', 'Consolas', monospace;
-  /* 自定义滚动条 */
-  scrollbar-width: thin;
-  scrollbar-color: var(--hover-link-color) rgba(0, 0, 0, 0.3);
-}
-
-.logs-body-full::-webkit-scrollbar {
-  width: 8px;
-}
-
-.logs-body-full::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-}
-
-.logs-body-full::-webkit-scrollbar-thumb {
-  background: var(--hover-link-color);
-  border-radius: 4px;
-  transition: background 0.3s ease;
-}
-
-.logs-body-full::-webkit-scrollbar-thumb:hover {
-  background: #ffd700;
-}
-
-.login-history-list {
-  max-height: none;
-}
-
-/* 后台日志样式 */
-.logs-card {
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.85) 0%, rgba(var(--background-color-rgb), 0.7) 100%);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.logs-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
-  border-color: var(--hover-link-color);
-}
-
-.logs-controls {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.log-lines-select {
-  padding: 8px 16px;
-  border: 1.5px solid var(--border-color);
-  border-radius: 10px;
-  background: rgba(var(--background-color-rgb), 0.9);
-  color: var(--text-color);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 500;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.log-lines-select:hover {
-  border-color: var(--hover-link-color);
-  background: rgba(var(--background-color-rgb), 1);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.log-lines-select:focus {
-  outline: none;
-  border-color: var(--hover-link-color);
-  box-shadow: 0 0 0 3px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.2);
-}
-
-.refresh-logs-btn,
-.auto-scroll-btn {
-  width: 36px;
-  height: 36px;
-  border: 1.5px solid var(--border-color);
-  border-radius: 10px;
-  background: rgba(var(--background-color-rgb), 0.9);
-  color: var(--text-color);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.refresh-logs-btn:hover,
-.auto-scroll-btn:hover {
-  background: rgba(var(--background-color-rgb), 1);
-  border-color: var(--hover-link-color);
-  transform: scale(1.05);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.refresh-logs-btn:active,
-.auto-scroll-btn:active {
-  transform: scale(0.95);
-}
-
-.auto-scroll-btn.active {
-  background: linear-gradient(135deg, var(--hover-link-color) 0%, #ffd700 100%);
-  color: #333;
-  border-color: var(--hover-link-color);
-  box-shadow: 0 4px 12px rgba(var(--hover-link-color-rgb, 255, 204, 0), 0.3);
-}
-
-.logs-body {
-  padding: 0;
-  max-height: 400px;
-  overflow-y: auto;
-  background: #1e1e1e;
-  font-family: 'Courier New', 'Consolas', monospace;
-}
-
-.logs-content {
-  padding: 16px 20px;
-}
-
-.log-line {
-  display: flex;
-  gap: 12px;
-  padding: 6px 0;
-  font-size: 13px;
-  line-height: 1.7;
-  word-break: break-all;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.log-time {
-  color: #888;
-  flex-shrink: 0;
-  min-width: 150px;
-}
-
-.log-content {
-  color: #d4d4d4;
-  flex: 1;
-  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
-  white-space: pre-wrap;
-}
-
-.log-line.log-error .log-content {
-  color: #f48771;
-}
-
-.log-line.log-warn .log-content {
-  color: #dcdcaa;
-}
-
-.log-line.log-info .log-content {
-  color: #4ec9b0;
-}
-
-/* 登录历史样式 - 已移到compact-body中处理滚动 */
-
-.login-item {
-  border-left: 4px solid transparent;
-  transition: all 0.3s ease;
-}
-
-.login-item .login-ip {
-  font-weight: 600;
-  color: var(--text-color);
-  margin-right: 10px;
-  font-size: 0.95rem;
-}
-
-.login-item .login-location {
-  font-size: 0.85rem;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.65);
-  background: linear-gradient(135deg, rgba(var(--background-color-rgb), 0.6) 0%, rgba(var(--background-color-rgb), 0.4) 100%);
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-weight: 500;
-  border: 1px solid var(--border-color);
-}
-
-.login-success {
-  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%) !important;
-  color: #4caf50 !important;
-  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
-}
-
-.login-failed {
-  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%) !important;
-  color: #f44336 !important;
-  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
-}
-
-.login-item.login-success {
-  border-left-color: #4caf50;
-}
-
-.login-item.login-success:hover {
-  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.12) 100%) !important;
-}
-
-.login-item.login-failed {
-  border-left-color: #f44336;
-}
-
-.login-item.login-failed:hover {
-  background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.12) 100%) !important;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .charts-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .chart-card--primary .chart-body canvas {
-    height: 320px;
-  }
-  
-  .chart-card--secondary .chart-body canvas {
-    height: 280px;
-  }
-}
-
-@media (max-width: 1400px) {
-  .bottom-grid-modern {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-  }
-  
-  .logs-card-full {
-    grid-column: span 1;
-  }
-}
+.dashboard { display: flex; flex-direction: column; gap: 20px; }
+.dashboard-alert { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-left: 3px solid var(--warning-color); color: var(--warning-color); background: var(--surface-muted); font-size: 13px; }
+.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
+.stat-card { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); }
+.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #302800; background: var(--hover-link-color); }
+.stat-card div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.stat-card strong { overflow: hidden; font-size: 24px; line-height: 1.1; text-overflow: ellipsis; }
+.stat-card span { color: var(--text-muted); font-size: 12px; }
+.charts-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: 16px; }
+.activity-grid { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr); gap: 16px; }
+.dashboard-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); }
+.panel-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-color); }
+.panel-header h2 { margin: 0 0 3px; font-size: 15px; letter-spacing: 0; }
+.panel-header p { margin: 0; color: var(--text-muted); font-size: 11px; }
+.panel-header select { height: 34px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); background: var(--surface-muted); font-size: 12px; }
+.chart-canvas { height: 330px; padding: 15px; }
+.chart-canvas canvas,
+.source-canvas canvas { width: 100%; height: 100%; display: block; }
+.source-content { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.8fr); gap: 10px; align-items: center; min-height: 330px; padding: 15px; }
+.source-canvas { height: 220px; }
+.source-legend { display: flex; flex-direction: column; gap: 10px; }
+.source-legend li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 7px; align-items: center; font-size: 11px; }
+.source-legend li i { width: 9px; height: 9px; border-radius: 50%; }
+.source-legend li span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
+.login-list { max-height: 370px; overflow-y: auto; }
+.login-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
+.login-row:last-child { border-bottom: 0; }
+.login-row > div { min-width: 0; display: flex; flex-direction: column; }
+.login-row span,
+.login-row time { color: var(--text-muted); font-size: 10px; }
+.success { color: var(--success-color); }
+.danger { color: var(--danger-color); }
+.panel-actions { display: flex; align-items: center; gap: 5px; }
+.icon-action { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-muted); background: var(--surface-muted); cursor: pointer; }
+.icon-action:hover,
+.icon-action.active { color: var(--hover-link-color); border-color: var(--hover-link-color); }
+.logs-output { height: 370px; overflow: auto; padding: 10px 0; color: #d8d8d4; background: #20201f; }
+.log-line { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 3px 12px; font: 11px/1.55 Consolas, 'Courier New', monospace; }
+.log-line:hover { background: rgba(255, 255, 255, 0.05); }
+.log-line > span { color: #696964; text-align: right; user-select: none; }
+.log-line code { color: inherit; overflow-wrap: anywhere; white-space: pre-wrap; }
+.log-line.error code { color: #ff8279; }
+.log-line.warning code { color: #eab561; }
+.log-line.info code { color: #86b7e8; }
+.panel-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
+.panel-empty i { color: var(--hover-link-color); font-size: 20px; }
+.logs-output .panel-empty { color: #92928d; }
 
 @media (max-width: 1200px) {
-  .bottom-grid-modern {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-  }
-  
-  .logs-card-full {
-    grid-column: span 1;
-  }
-  
-  .compact-body {
-    max-height: 280px;
-  }
-  
-  .logs-body-full {
-    max-height: 400px;
-  }
+  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .charts-grid,
+  .activity-grid { grid-template-columns: 1fr; }
 }
-
-@media (max-width: 768px) {
-  .dashboard {
-    gap: 20px;
-  }
-  
-  .stats-grid {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-  
-  .stat-card {
-    padding: 20px;
-  }
-  
-  .stat-icon {
-    width: 56px;
-    height: 56px;
-    font-size: 1.5rem;
-  }
-  
-  .stat-value {
-    font-size: 1.9rem;
-  }
-  
-  .charts-grid {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-  
-  .chart-card--primary .chart-body canvas,
-  .chart-card--secondary .chart-body canvas {
-    height: 280px;
-  }
-
-  .bottom-grid-modern {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-  
-  .logs-card-full {
-    grid-column: span 1;
-  }
-  
-  .card-header {
-    padding: 18px 20px;
-  }
-  
-  .card-body {
-    padding: 20px;
-  }
-  
-  .compact-body {
-    padding: 16px;
-    max-height: 250px;
-  }
-  
-  .logs-body-full {
-    max-height: 350px;
-  }
-  
-  .recent-item {
-    padding: 14px;
-  }
-}
-
-/* 骨架屏加载效果 */
-.dashboard.loading .stat-card,
-.dashboard.loading .chart-card,
-.dashboard.loading .recent-card,
-.dashboard.loading .logs-card {
-  position: relative;
-  overflow: hidden;
-}
-
-.dashboard.loading .stat-card::after,
-.dashboard.loading .chart-card::after,
-.dashboard.loading .recent-card::after,
-.dashboard.loading .logs-card::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.3),
-    transparent
-  );
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
+@media (max-width: 600px) {
+  .stats-grid { grid-template-columns: 1fr; }
+  .stat-card { padding: 13px; }
+  .chart-canvas { height: 260px; padding: 10px; }
+  .source-content { grid-template-columns: 1fr; min-height: 0; }
+  .source-canvas { height: 210px; }
+  .panel-header { align-items: flex-start; }
+  .panel-header p { display: none; }
+  .login-row { grid-template-columns: 18px minmax(0, 1fr); }
+  .login-row time { grid-column: 2; }
 }
 </style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 09e8147..be4c3ba 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,528 +1,360 @@
-<template>
-  <div class="content">
-    <div class="user-profile-container">
-      <div class="user-profile-image" v-motion-pop>
-        <img :src="profileImage" alt="头像" @click.stop="toggleInfo">
-        <span class="status-ball"></span>
-      </div>
-      <div class="user-name" v-motion-slide-left>
-        <h1>Hi,</h1>
-        <h1>I'm <span class="name-style">{{ userName }}</span></h1>
-      </div>
-    </div>
-    <div class="description">
-      <p ref="descriptionElement"></p>
-    </div>
-    <div class="contact-section" v-motion-pop>
-      <template v-for="contact in contacts" :key="contact.type">
-        <a v-if="contact.url" :href="contact.url" target="_blank" class="contact-item" :style="{ '--hover-color': contact.hoverColor }">
-          <i :class="contact.icon"></i>
-          <span class="tooltip">{{ contact.type }}</span>
-        </a>
-        <span v-else @click="toggleQRCode(contact.qrCode)" class="contact-item" :style="{ '--hover-color': contact.hoverColor }">
-          <i :class="contact.icon"></i>
-          <span class="tooltip">{{ contact.type }}</span>
-        </span>
-      </template>
-      <span class="contact-item" @click="toggleDarkMode" :style="{ '--hover-color': isDarkMode ? '#ffcc00' : '#666' }">
-        <i :class="darkModeIconClass"></i>
-        <span class="tooltip">{{ isDarkMode ? '浅色' : '深色' }}</span>
-      </span>
-    </div>
-    <Website /> 
-    <!-- 使用v-if确保组件完全从DOM中移除，包括所有class -->
-    <VisitTimer v-if="showVisitTimer" :key="showVisitTimer ? 'visit-timer-show' : 'visit-timer-hide'" />
-
-    <Transition name="fade">
-      <div v-if="showAbout" class="overlay" @click="showAbout = false">
-        <div class="modal-content">
-          <AboutPage @close="showAbout = false" />
-        </div>
-      </div>
-    </Transition>
-
-    <Transition name="fade">
-      <div v-if="showQR" class="overlay" @click="hideQRCode">
-        <div class="modal-content">
-          <img :src="qrCodeSrc" alt="QR Code" class="qr-image" @click.stop>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
-import { getContacts, getSiteConfig } from '../api';
-import api from '../api';
-import Website from './Website.vue';
-import AboutPage from './AboutPage.vue';
-import VisitTimer from './VisitTimer.vue';
-import Typed from 'typed.js';
-
-const contacts = ref([]);
-const showQR = ref(false);
-const showAbout = ref(false);
-const qrCodeSrc = ref('');
-const profileImage = ref('');
-const userName = ref('');
-const siteConfig = ref({});
-const descriptionElement = ref(null);
-const showVisitTimer = ref(true);
-
-const loadData = async () => {
-  try {
-    const [contactsRes, configRes] = await Promise.all([
-      getContacts(),
-      getSiteConfig(),
-    ]);
-    contacts.value = contactsRes.data;
-    siteConfig.value = configRes.data;
-    userName.value = configRes.data.userName || import.meta.env.VITE_APP_USER_NAME || '用户';
-    profileImage.value = configRes.data.profileImageURL || import.meta.env.VITE_APP_PROFILE_IMAGE_URL || '';
-    // 确保正确读取 showVisitTimer，明确处理 false 值
-    const timerValue = configRes.data.showVisitTimer;
-    const newValue = timerValue !== undefined && timerValue !== null 
-      ? Boolean(timerValue) 
-      : true;
-    // 使用赋值触发响应式更新
-    const oldValue = showVisitTimer.value;
-    showVisitTimer.value = newValue;
-    console.log('加载配置 - showVisitTimer:', { 
-      oldValue, 
-      newValue, 
-      rawValue: timerValue, 
-      type: typeof timerValue,
-      isFalse: timerValue === false 
-    });
-    
-    // 如果从true变为false，确保DOM被移除
-    if (oldValue && !newValue) {
-      await nextTick();
-      const timerElements = document.querySelectorAll('.visit-timer-container, .visit-timer');
-      if (timerElements.length > 0) {
-        console.warn('检测到需要移除的visit-timer元素，数量:', timerElements.length);
-        timerElements.forEach(el => {
-          console.log('移除元素:', el);
-          el.remove();
-        });
-      }
-    }
-  } catch (error) {
-    console.error('加载数据失败:', error);
-    // 如果API失败，使用环境变量或默认值
-    userName.value = import.meta.env.VITE_APP_USER_NAME || '用户';
-    profileImage.value = import.meta.env.VITE_APP_PROFILE_IMAGE_URL || '';
-    showVisitTimer.value = true; // 默认显示
-  }
-};
-
-const predefinedDescriptions = ref([
-  "你好鸭，欢迎来到我的主页！！",
-  "随时可以联系我，期待与你交流。",
-  "愿你历尽千帆，归来仍是少年。",
-  "梦想还是要有的，万一实现了呢？",
-  "I hope you have a happy day every day."
-]);
-
-let typedInstance = null;
-
-const loadRotatingTexts = async () => {
-  try {
-    const res = await api.get('/rotating-texts');
-    if (res.data?.texts && res.data.texts.length > 0) {
-      predefinedDescriptions.value = res.data.texts;
-    }
-  } catch (error) {
-    console.debug('加载轮换文本失败，使用默认文本:', error);
-  }
-};
-
-const initializeTyped = () => {
-  if (typedInstance) {
-    typedInstance.destroy();
-  }
-  typedInstance = new Typed(descriptionElement.value, {
-    strings: predefinedDescriptions.value,
-    typeSpeed: 120,
-    backSpeed: 80,
-    showCursor: true,
-    cursorChar: '|',
-    loop: true,
-  });
-};
-
-// 记录访问统计
-const trackVisit = async () => {
-  try {
-    const path = window.location.pathname;
-    const referer = document.referrer || '';
-    await api.post('/track-visit', {
-      path: path,
-      referer: referer,
-    });
-  } catch (error) {
-    // 静默失败，不影响用户体验
-    console.debug('访问统计记录失败:', error);
-  }
-};
-
-// 监听配置更新消息
-let broadcastChannel = null
-if (window.BroadcastChannel) {
-  broadcastChannel = new BroadcastChannel('config-update')
-  broadcastChannel.onmessage = async (event) => {
-    if (event.data.type === 'config-updated') {
-      console.log('收到配置更新消息，重新加载数据...')
-      const oldTimerValue = showVisitTimer.value
-      await loadData()
-      await loadRotatingTexts()
-      if (typedInstance) {
-        typedInstance.destroy()
-      }
-      initializeTyped()
-      // 停留时间显示状态会在loadData中更新
-      // 使用 nextTick 确保 DOM 更新
-      await nextTick()
-      console.log('配置更新后 - showVisitTimer:', showVisitTimer.value, '之前的值:', oldTimerValue, 'DOM已更新')
-      
-      // 如果从true变为false，强制检查并移除残留的DOM元素
-      if (oldTimerValue && !showVisitTimer.value) {
-        console.log('showVisitTimer从true变为false，强制清理残留元素')
-        const timerElements = document.querySelectorAll('.visit-timer-container, .visit-timer, [class*="visit-timer"]')
-        if (timerElements.length > 0) {
-          console.warn('发现残留的visit-timer相关元素，强制移除:', timerElements.length)
-          timerElements.forEach(el => {
-            console.log('移除残留元素:', el.className, el)
-            el.remove()
-          })
-        }
-        // 再次等待DOM更新
-        await nextTick()
-      }
-    }
-  }
-}
-
-// 监听showVisitTimer变化，确保DOM正确更新
-watch(showVisitTimer, async (newValue, oldValue) => {
-  console.log('showVisitTimer变化:', { oldValue, newValue })
-  // 等待DOM更新完成
-  await nextTick()
-  // 如果设置为false，强制检查并移除任何残留的visit-timer元素
-  if (!newValue) {
-    const timerElements = document.querySelectorAll('.visit-timer-container, .visit-timer')
-    if (timerElements.length > 0) {
-      console.warn('发现残留的visit-timer元素，强制移除:', timerElements.length)
-      timerElements.forEach(el => el.remove())
-    }
-  }
-}, { immediate: false })
-
-onMounted(async () => {
-  await loadData();
-  await loadRotatingTexts();
-  initializeTyped();
-  trackVisit(); // 记录访问
-});
-
-// 清理
-onUnmounted(() => {
-  if (broadcastChannel) {
-    broadcastChannel.close()
-  }
-  if (typedInstance) {
-    typedInstance.destroy()
-  }
-})
-
-const toggleQRCode = (qrCode) => {
-  qrCodeSrc.value = qrCode || '';
-  showQR.value = !showQR.value;
-};
-
-const hideQRCode = () => {
-  showQR.value = false;
-};
-
-const toggleInfo = () => {
-  showAbout.value = !showAbout.value;
-};
-
-const isDarkMode = ref(false);
-const darkModeIconClass = ref('fas fa-moon');
-
-const toggleDarkMode = () => {
-  isDarkMode.value = !isDarkMode.value;
-  document.body.classList.toggle('dark-mode', isDarkMode.value);
-
-  localStorage.setItem('darkMode', isDarkMode.value);
-
-  darkModeIconClass.value = isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon';
-};
-
-onMounted(() => {
-  const savedDarkMode = localStorage.getItem('darkMode');
-  if (savedDarkMode !== null) {
-    isDarkMode.value = savedDarkMode === 'true';
-    document.body.classList.toggle('dark-mode', isDarkMode.value);
-  }
-
-  darkModeIconClass.value = isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon';
-});
-</script>
-
-<style scoped>
-.content {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  gap: 30px;
-  margin-top: 20px;
-
-  .user-profile-container {
-    display: flex;
-    align-items: center;
-    gap: 30px;
-  }
-
-  .user-profile-image {
-    display: flex;
-    border-radius: 50%;
-    box-shadow: 0 2px 8px var(--shadow-color);
-    padding: 5px;
-    border: 3px solid var(--border-color);
-    position: relative;
-
-    img {
-      width: 150px;
-      height: 150px;
-      border-radius: 50%;
-      background-size: cover;
-      background-position: center;
-    }
-
-    .status-ball {
-      position: absolute;
-      background: #00c800;
-      width: 2em;
-      height: 2em;
-      border-radius: 20px;
-      border: 3px solid #eee;
-      bottom: 5px;
-      right: 15px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: all 0.3s ease;
-      z-index: 1;
-      cursor: pointer;
-      overflow: hidden;
-
-      &::before {
-        content: "在线中";
-        color: #00c800;
-        opacity: 0;
-        transition: opacity 0.3s ease-in-out, color 0.1s ease-in-out;
-      }
-
-      &:hover {
-        width: 4.5em;
-        height: 2em;
-      }
-
-      &:hover::before {
-        opacity: 1;
-        color: #eee;
-      }
-    }
-  }
-
-  .user-name {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    font-size: 1.3em;
-
-    h1 {
-      margin: 0;
-    }
-  }
-
-  .name-style {
-    position: relative;
-
-    &:before {
-      position: absolute;
-      border-radius: 5px;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%);
-      z-index: -1;
-      content: "";
-      background: #ffcc00ad;
-      height: 30%;
-      width: 110%;
-      transition: height 0.3s ease-in-out;
-    }
-    &:hover::before {
-      height: 60%;
-    }
-  }
-
-  .description {
-    display: flex;
-    min-height: 32px;
-    width: 100%;
-    max-width: 500px;
-    font-family: 'Georgia', serif;
-    font-size: 1.2rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease-in-out;
-
-    &::before,
-    &::after {
-      content: '"';
-      font-size: 1.5em;
-      color: #999;
-      margin: 0 10px;
-    }
-
-    p {
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .contact-section {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    padding: 5px 10px;
-    border: 1px solid transparent;
-    border-radius: var(--border-radius);
-    transition: all 0.3s ease-in-out;
-
-    .contact-item {
-      color: var(--text-color);
-      font-size: var(--icon-size);
-      cursor: pointer;
-      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
-      position: relative;
-
-      .fas.fa-moon {
-        width: 20px;
-        height: 20px;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      &:hover {
-        transform: translateY(-5px) rotate(10deg);
-        color: var(--hover-color);
-
-        .tooltip {
-          opacity: 1;
-          transform: translate(-50%, 0);
-        }
-      }
-
-      .tooltip {
-        position: absolute;
-        bottom: 100%;
-        left: 50%;
-        transform: translate(-50%, 10px);
-        opacity: 0;
-        transition: opacity 0.3s ease, transform 0.3s ease;
-        white-space: nowrap;
-        pointer-events: none;
-      }
-    }
-
-    &:hover {
-      backdrop-filter: blur(10px);
-      border: 1px solid var(--border-color);
-      box-shadow: 0 2px 8px var(--shadow-color);
-      background-color: rgba(var(--background-color-rgb), 0.2);
-    }
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: all 0.3s ease-out;
-    
-    .modal-content {
-      transition: all 0.3s ease-out;
-    }
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-    
-    .modal-content {
-      transform: translateY(30px) scale(0.8);
-      opacity: 0;
-    }
-  }
-
-  .fade-enter-to,
-  .fade-leave-from {
-    opacity: 1;
-    
-    .modal-content {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  .qr-image {
-    width: 300px;
-    height: 300px;
-    background: white;
-    padding: 20px;
-    border-radius: var(--border-radius);
-    box-shadow: 0 4px 8px var(--shadow-color);
-    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-    &:hover {
-      transform: scale(1.03) translateY(-5px);
-      box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .content {
-    gap: 15px;
-  }
-  .content .user-profile-container {
-    flex-direction: column;
-    gap: 0;
-  }
-
-  h1 {
-    font-size: 1.5em;
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <main class="home-view" :aria-busy="loading">
+    <section class="identity" aria-labelledby="home-title">
+      <button class="profile-button" type="button" aria-label="查看关于信息" @click="showAbout = true" v-motion-pop>
+        <img v-if="profileImage && !profileImageFailed" :src="profileImage" :alt="`${userName} 的头像`" @error="profileImageFailed = true" />
+        <span v-else class="profile-fallback"><i class="fas fa-user" aria-hidden="true"></i></span>
+        <span class="status-ball"><span>在线</span></span>
+      </button>
+
+      <div class="user-name" v-motion-slide-left>
+        <h1 id="home-title">Hi,</h1>
+        <h1>I'm <span class="name-style">{{ userName }}</span></h1>
+      </div>
+    </section>
+
+    <div class="description" aria-live="polite">
+      <p v-if="loading">正在加载主页...</p>
+      <p v-else ref="descriptionElement"></p>
+    </div>
+
+    <p v-if="loadError" class="home-notice">
+      <i class="fas fa-circle-info" aria-hidden="true"></i>
+      当前展示本地备用内容
+    </p>
+
+    <nav class="contact-section" aria-label="联系方式" v-motion-pop>
+      <template v-for="contact in contacts" :key="contact.id || contact.type">
+        <a
+          v-if="contact.url"
+          :href="contact.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="contact-item"
+          :style="{ '--hover-color': contact.hoverColor || 'var(--hover-link-color)' }"
+          :aria-label="contact.type"
+        >
+          <i :class="contact.icon" aria-hidden="true"></i>
+          <span class="tooltip">{{ contact.type }}</span>
+        </a>
+        <button
+          v-else
+          type="button"
+          class="contact-item"
+          :style="{ '--hover-color': contact.hoverColor || 'var(--hover-link-color)' }"
+          :aria-label="`查看${contact.type}二维码`"
+          @click="showQRCode(contact.qrCode)"
+        >
+          <i :class="contact.icon" aria-hidden="true"></i>
+          <span class="tooltip">{{ contact.type }}</span>
+        </button>
+      </template>
+      <button type="button" class="contact-item" :aria-label="themeLabel" @click="toggleTheme">
+        <i :class="themeIcon" aria-hidden="true"></i>
+        <span class="tooltip">{{ isDarkMode ? '浅色' : '深色' }}</span>
+      </button>
+    </nav>
+
+    <Website />
+    <VisitTimer v-if="showVisitTimer" />
+
+    <Transition name="fade">
+      <div v-if="showAbout" class="overlay" role="dialog" aria-modal="true" aria-label="关于本站" @click="showAbout = false">
+        <div class="modal-content"><AboutPage @close="showAbout = false" /></div>
+      </div>
+    </Transition>
+
+    <Transition name="fade">
+      <div v-if="showQR" class="overlay" role="dialog" aria-modal="true" aria-label="二维码" @click="showQR = false">
+        <div class="modal-content" @click.stop>
+          <img :src="qrCodeSrc" alt="联系方式二维码" class="qr-image" />
+        </div>
+      </div>
+    </Transition>
+  </main>
+</template>
+
+<script setup>
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import Typed from 'typed.js'
+import api, { getContacts, getSiteConfig } from '../api'
+import fallbackContacts from '../config/links.json'
+import { useTheme } from '../composables/useTheme'
+import AboutPage from './AboutPage.vue'
+import VisitTimer from './VisitTimer.vue'
+import Website from './Website.vue'
+
+const defaultDescriptions = [
+  '你好鸭，欢迎来到我的主页！！',
+  '随时可以联系我，期待与你交流。',
+  '愿你历尽千帆，归来仍是少年。',
+  '梦想还是要有的，万一实现了呢？',
+  'I hope you have a happy day every day.',
+]
+
+const contacts = ref(fallbackContacts)
+const userName = ref(import.meta.env.VITE_APP_USER_NAME || '用户')
+const profileImage = ref(import.meta.env.VITE_APP_PROFILE_IMAGE_URL || '')
+const profileImageFailed = ref(false)
+const showVisitTimer = ref(true)
+const descriptions = ref(defaultDescriptions)
+const descriptionElement = ref(null)
+const loading = ref(true)
+const loadError = ref(false)
+const showAbout = ref(false)
+const showQR = ref(false)
+const qrCodeSrc = ref('')
+const { isDarkMode, themeIcon, themeLabel, toggleTheme } = useTheme()
+let typedInstance = null
+let configChannel = null
+
+const initializeTyped = async () => {
+  typedInstance?.destroy()
+  await nextTick()
+  if (!descriptionElement.value) return
+  typedInstance = new Typed(descriptionElement.value, {
+    strings: descriptions.value,
+    typeSpeed: 90,
+    backSpeed: 55,
+    backDelay: 1400,
+    showCursor: true,
+    cursorChar: '|',
+    loop: true,
+  })
+}
+
+const loadData = async () => {
+  loading.value = true
+  loadError.value = false
+  profileImageFailed.value = false
+
+  const [contactsResult, configResult, textsResult] = await Promise.allSettled([
+    getContacts(),
+    getSiteConfig(),
+    api.get('/rotating-texts'),
+  ])
+
+  if (contactsResult.status === 'fulfilled' && Array.isArray(contactsResult.value.data)) {
+    contacts.value = contactsResult.value.data
+  } else {
+    contacts.value = fallbackContacts
+    loadError.value = true
+  }
+
+  if (configResult.status === 'fulfilled') {
+    const config = configResult.value.data || {}
+    userName.value = config.userName || import.meta.env.VITE_APP_USER_NAME || '用户'
+    profileImage.value = config.profileImageURL || import.meta.env.VITE_APP_PROFILE_IMAGE_URL || ''
+    showVisitTimer.value = config.showVisitTimer === undefined ? true : Boolean(config.showVisitTimer)
+  } else {
+    loadError.value = true
+  }
+
+  if (textsResult.status === 'fulfilled' && textsResult.value.data?.texts?.length) {
+    descriptions.value = textsResult.value.data.texts
+  } else {
+    descriptions.value = defaultDescriptions
+  }
+
+  loading.value = false
+  await initializeTyped()
+}
+
+const showQRCode = (src) => {
+  if (!src) return
+  qrCodeSrc.value = src
+  showQR.value = true
+}
+
+const closeDialogsOnEscape = (event) => {
+  if (event.key !== 'Escape') return
+  showAbout.value = false
+  showQR.value = false
+}
+
+onMounted(async () => {
+  await loadData()
+  api.post('/track-visit', { path: window.location.pathname, referer: document.referrer || '' }).catch(() => {})
+  document.addEventListener('keydown', closeDialogsOnEscape)
+
+  if (window.BroadcastChannel) {
+    configChannel = new BroadcastChannel('config-update')
+    configChannel.onmessage = ({ data }) => {
+      if (data?.type === 'config-updated') loadData()
+    }
+  }
+})
+
+onUnmounted(() => {
+  typedInstance?.destroy()
+  configChannel?.close()
+  document.removeEventListener('keydown', closeDialogsOnEscape)
+})
+</script>
+
+<style scoped lang="less">
+.home-view {
+  flex: 1;
+  width: min(100%, 760px);
+  margin: 0 auto;
+  padding: clamp(28px, 6vh, 64px) 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
+.profile-button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 166px;
+  height: 166px;
+  padding: 5px;
+  border: 3px solid var(--border-color);
+  border-radius: 50%;
+  color: var(--text-muted);
+  background: var(--surface-muted);
+  box-shadow: 0 2px 8px var(--shadow-color);
+  cursor: pointer;
+}
+
+.profile-button img,
+.profile-fallback {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+}
+
+.profile-button img { object-fit: cover; }
+.profile-fallback { display: grid; place-items: center; font-size: 52px; background: var(--surface-color); }
+
+.status-ball {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 3px solid var(--background-color);
+  border-radius: 20px;
+  color: white;
+  background: #248f3d;
+  transition: width 0.2s ease;
+}
+
+.status-ball span { opacity: 0; font-size: 12px; white-space: nowrap; }
+.profile-button:hover .status-ball { width: 56px; }
+.profile-button:hover .status-ball span { opacity: 1; }
+
+.user-name { display: flex; flex-direction: column; align-items: flex-start; font-size: 1.3em; }
+.user-name h1 { margin: 0; letter-spacing: 0; }
+.name-style { position: relative; z-index: 0; }
+.name-style::before {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 110%;
+  height: 30%;
+  border-radius: 4px;
+  background: rgba(var(--hover-link-color-rgb), 0.68);
+  content: '';
+  transform: translateX(-50%);
+  transition: height 0.2s ease;
+  z-index: -1;
+}
+.name-style:hover::before { height: 60%; }
+
+.description {
+  min-height: 32px;
+  max-width: min(100%, 580px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Georgia, serif;
+  font-size: 1.15rem;
+  text-align: center;
+}
+.description::before,
+.description::after { content: '"'; margin: 0 10px; color: var(--text-muted); font-size: 1.4em; }
+.description p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
+
+.home-notice { margin: -14px 0 0; color: var(--text-muted); font-size: 13px; }
+
+.contact-section {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  min-height: 42px;
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.contact-section:hover { border-color: var(--border-color); background: var(--surface-muted); box-shadow: 0 2px 8px var(--shadow-color); }
+.contact-item {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  color: var(--text-color);
+  background: transparent;
+  font-size: var(--icon-size);
+  cursor: pointer;
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+.contact-item:hover { color: var(--hover-color, var(--hover-link-color)); transform: translateY(-3px); }
+.tooltip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  padding: 3px 7px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  color: var(--text-color);
+  background: var(--surface-solid);
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.contact-item:hover .tooltip,
+.contact-item:focus-visible .tooltip { opacity: 1; transform: translate(-50%, 0); }
+
+.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.62); z-index: 1000; }
+.modal-content { max-width: 100%; }
+.qr-image { width: min(320px, 82vw); aspect-ratio: 1; object-fit: contain; padding: 18px; border-radius: 8px; background: white; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); }
+.fade-enter-active,
+.fade-leave-active { transition: opacity 0.2s ease; }
+.fade-enter-from,
+.fade-leave-to { opacity: 0; }
+
+@media (max-width: 768px) {
+  .home-view { justify-content: flex-start; gap: 17px; padding-top: 28px; }
+  .identity { flex-direction: column; gap: 8px; }
+  .profile-button { width: 132px; height: 132px; }
+  .profile-button img,
+  .profile-fallback { width: 116px; height: 116px; }
+  .status-ball { right: 5px; bottom: 5px; }
+  .user-name { align-items: center; font-size: 1em; }
+  .description { min-height: 48px; font-size: 1rem; }
+  .description::before,
+  .description::after { margin: 0 6px; }
+  .contact-section { gap: 14px; }
+}
+</style>
diff --git a/src/components/IconSelector.vue b/src/components/IconSelector.vue
index a5cfc25..dfe3832 100644
--- a/src/components/IconSelector.vue
+++ b/src/components/IconSelector.vue
@@ -1,517 +1,525 @@
-<template>
-  <div class="icon-selector">
-    <div class="icon-tabs">
-      <button
-        v-if="defaultIconPath"
-        :class="['tab-btn', { active: iconMode === 'default' }]"
-        @click="iconMode = 'default'"
-      >
-        默认图标
-      </button>
-      <button
-        :class="['tab-btn', { active: iconMode === 'upload' }]"
-        @click="iconMode = 'upload'"
-      >
-        上传图标
-      </button>
-      <button
-        :class="['tab-btn', { active: iconMode === 'url' }]"
-        @click="iconMode = 'url'"
-      >
-        URL图标
-      </button>
-    </div>
-
-    <!-- 默认图标 -->
-    <div v-if="iconMode === 'default' && defaultIconPath" class="icon-content">
-      <div class="default-icon-preview">
-        <img :src="defaultIconPath" alt="默认图标" class="icon-preview" />
-        <p class="icon-hint">使用默认本地图标：{{ defaultIconPath }}</p>
-      </div>
-      <button @click="selectDefault" class="select-btn">使用默认图标</button>
-    </div>
-
-    <!-- 上传图标 -->
-    <div v-if="iconMode === 'upload'" class="icon-content">
-      <div class="upload-area">
-        <input
-          type="file"
-          ref="fileInput"
-          @change="handleFileSelect"
-          accept="image/*"
-          style="display: none"
-        />
-        <div v-if="!uploadedIconUrl" class="upload-placeholder">
-          <p>点击选择图标文件</p>
-          <p class="hint">支持 jpg、png、jpeg、webp、avif、svg、ico 等格式</p>
-        </div>
-        <div v-else class="uploaded-preview">
-          <img :src="uploadedIconUrl" alt="上传的图标" class="icon-preview" />
-          <p class="icon-hint">已上传的图标</p>
-        </div>
-        <button @click="$refs.fileInput.click()" class="upload-btn">
-          {{ uploadedIconUrl ? '重新选择' : '选择文件' }}
-        </button>
-        <div v-if="uploading" class="upload-status">上传中...</div>
-      </div>
-    </div>
-
-    <!-- URL图标 -->
-    <div v-if="iconMode === 'url'" class="icon-content">
-      <div class="url-input-group">
-        <label>图标URL</label>
-        <input
-          v-model="iconUrl"
-          type="text"
-          placeholder="https://example.com/favicon.ico"
-          class="url-input"
-          @input="handleUrlInput"
-        />
-        <small class="form-hint">支持重定向图片URL，格式：avif, png, jpg, jpeg, webp, svg, ico等</small>
-        <div v-if="urlValidating" class="url-status">
-          <i class="fas fa-spinner fa-spin"></i>
-          <span>正在验证图片URL...</span>
-        </div>
-        <div v-if="urlError" class="url-error">
-          <i class="fas fa-exclamation-circle"></i>
-          <span>{{ urlError }}</span>
-        </div>
-      </div>
-      <div v-if="iconUrl && !urlError && urlValidated" class="url-preview">
-        <img :src="validatedUrl" alt="URL图标" class="icon-preview" @error="handleImageError" />
-        <p class="icon-hint">URL图标预览（支持重定向）</p>
-      </div>
-      <button @click="selectUrl" class="select-btn" :disabled="!iconUrl || urlValidating || !!urlError">
-        {{ urlValidating ? '验证中...' : '使用URL图标' }}
-      </button>
-    </div>
-
-    <!-- 当前选择的图标预览 -->
-    <div v-if="currentIcon" class="current-icon">
-      <p class="current-label">当前图标：</p>
-      <img :src="currentIcon" alt="当前图标" class="icon-preview" @error="handleImageError" />
-      <p class="icon-hint">{{ currentIcon }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted } from 'vue'
-import { adminAPI } from '../api'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  defaultIconPath: {
-    type: String,
-    default: '/favicon.ico',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const iconMode = ref('default')
-const iconUrl = ref('')
-const uploadedIconUrl = ref('')
-const uploading = ref(false)
-const currentIcon = ref(props.modelValue || props.defaultIconPath)
-const urlValidating = ref(false)
-const urlValidated = ref(false)
-const urlError = ref('')
-const validatedUrl = ref('')
-
-// 支持的图片格式
-const allowedImageFormats = ['avif', 'png', 'jpg', 'jpeg', 'webp', 'svg', 'ico', 'gif', 'bmp']
-
-// 监听外部值变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      currentIcon.value = newVal
-      // 根据值判断模式
-      if (props.defaultIconPath && newVal === props.defaultIconPath) {
-        iconMode.value = 'default'
-      } else if (newVal.startsWith('http://') || newVal.startsWith('https://')) {
-        iconMode.value = 'url'
-        iconUrl.value = newVal
-      } else if (newVal.startsWith('/uploads/')) {
-        iconMode.value = 'upload'
-        uploadedIconUrl.value = newVal
-      } else {
-        // 如果值不为空但不是已知格式，默认使用URL模式
-        iconMode.value = 'url'
-        iconUrl.value = newVal
-      }
-    } else {
-      currentIcon.value = props.defaultIconPath || ''
-    }
-  },
-  { immediate: true }
-)
-
-const handleFileSelect = async (event) => {
-  const file = event.target.files[0]
-  if (!file) return
-
-  // 检查文件类型，支持常见图标格式包括ico
-  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/ico', 'image/icon']
-  const fileExtension = file.name.split('.').pop()?.toLowerCase()
-  const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'avif', 'bmp']
-  
-  if (!allowedTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
-    alert('不支持的文件格式，请上传 jpg、png、gif、webp、svg、ico 等格式的图片')
-    return
-  }
-
-  uploading.value = true
-  try {
-    const res = await adminAPI.uploadFile(file)
-    uploadedIconUrl.value = res.data.url
-    currentIcon.value = res.data.url
-    emit('update:modelValue', res.data.url)
-  } catch (error) {
-    alert('上传失败: ' + (error.response?.data?.error || error.message))
-  } finally {
-    uploading.value = false
-  }
-}
-
-const selectDefault = () => {
-  currentIcon.value = props.defaultIconPath
-  emit('update:modelValue', props.defaultIconPath)
-}
-
-// 验证图片URL（支持重定向）
-const validateImageUrl = async (url) => {
-  if (!url) {
-    urlError.value = ''
-    urlValidated.value = false
-    return false
-  }
-
-  urlValidating.value = true
-  urlError.value = ''
-  urlValidated.value = false
-
-  try {
-    // 检查URL格式
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      urlError.value = 'URL必须以http://或https://开头'
-      urlValidating.value = false
-      return false
-    }
-
-    // 使用fetch跟随重定向
-    const response = await fetch(url, {
-      method: 'HEAD',
-      mode: 'cors',
-      redirect: 'follow'
-    })
-
-    if (!response.ok) {
-      urlError.value = '无法访问该URL'
-      urlValidating.value = false
-      return false
-    }
-
-    // 获取最终URL（可能经过重定向）
-    const finalUrl = response.url || url
-    
-    // 检查Content-Type
-    const contentType = response.headers.get('content-type') || ''
-    const isImage = contentType.startsWith('image/')
-    
-    // 或者检查URL扩展名
-    const urlLower = finalUrl.toLowerCase()
-    const hasImageExtension = allowedImageFormats.some(format => 
-      urlLower.includes(`.${format}`) || urlLower.includes(`/${format}`)
-    )
-
-    if (!isImage && !hasImageExtension) {
-      urlError.value = 'URL指向的不是图片文件'
-      urlValidating.value = false
-      return false
-    }
-
-    // 使用Image对象进一步验证（支持重定向）
-    return new Promise((resolve) => {
-      const img = new Image()
-      img.crossOrigin = 'anonymous'
-      
-      img.onload = () => {
-        validatedUrl.value = finalUrl
-        urlValidated.value = true
-        urlError.value = ''
-        urlValidating.value = false
-        resolve(true)
-      }
-      
-      img.onerror = () => {
-        // 即使Image加载失败，如果Content-Type正确，也允许使用
-        if (isImage || hasImageExtension) {
-          validatedUrl.value = finalUrl
-          urlValidated.value = true
-          urlError.value = ''
-          urlValidating.value = false
-          resolve(true)
-        } else {
-          urlError.value = '无法加载图片，请检查URL是否正确'
-          urlValidated.value = false
-          urlValidating.value = false
-          resolve(false)
-        }
-      }
-      
-      img.src = finalUrl
-    })
-  } catch (error) {
-    urlError.value = '验证失败: ' + (error.message || '网络错误')
-    urlValidated.value = false
-    urlValidating.value = false
-    return false
-  }
-}
-
-// 处理URL输入（防抖）
-let urlValidationTimer = null
-const handleUrlInput = () => {
-  urlValidated.value = false
-  urlError.value = ''
-  
-  if (urlValidationTimer) {
-    clearTimeout(urlValidationTimer)
-  }
-  
-  urlValidationTimer = setTimeout(() => {
-    if (iconUrl.value) {
-      validateImageUrl(iconUrl.value)
-    }
-  }, 500)
-}
-
-const selectUrl = async () => {
-  if (iconUrl.value && !urlError.value) {
-    // 如果还未验证，先验证
-    if (!urlValidated.value) {
-      const isValid = await validateImageUrl(iconUrl.value)
-      if (!isValid) {
-        return
-      }
-    }
-    
-    currentIcon.value = validatedUrl.value || iconUrl.value
-    emit('update:modelValue', validatedUrl.value || iconUrl.value)
-  }
-}
-
-const handleImageError = () => {
-  if (iconMode.value === 'url') {
-    urlError.value = '无法加载图片，请检查URL是否正确'
-    urlValidated.value = false
-  }
-  console.warn('无法加载图标URL:', iconUrl.value)
-}
-
-onMounted(() => {
-  // 初始化时根据当前值设置模式
-  if (props.modelValue) {
-    if (props.defaultIconPath && props.modelValue === props.defaultIconPath) {
-      iconMode.value = 'default'
-    } else if (
-      props.modelValue.startsWith('http://') ||
-      props.modelValue.startsWith('https://')
-    ) {
-      iconMode.value = 'url'
-      iconUrl.value = props.modelValue
-    } else if (props.modelValue.startsWith('/uploads/')) {
-      iconMode.value = 'upload'
-      uploadedIconUrl.value = props.modelValue
-    } else {
-      // 如果值不为空但不是已知格式，默认使用URL模式
-      iconMode.value = 'url'
-      iconUrl.value = props.modelValue
-    }
-  } else if (!props.defaultIconPath) {
-    // 如果没有默认图标路径，默认使用上传模式
-    iconMode.value = 'upload'
-  }
-})
-</script>
-
-<style scoped>
-.icon-selector {
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 15px;
-  background: rgba(var(--background-color-rgb), 0.3);
-}
-
-.icon-tabs {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-  border-bottom: 2px solid var(--border-color);
-}
-
-.tab-btn {
-  padding: 8px 16px;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-color);
-  cursor: pointer;
-  transition: all 0.3s;
-  font-size: 14px;
-}
-
-.tab-btn.active {
-  border-bottom-color: #007aff;
-  color: #007aff;
-  font-weight: bold;
-}
-
-.icon-content {
-  min-height: 200px;
-}
-
-.default-icon-preview,
-.uploaded-preview,
-.url-preview {
-  text-align: center;
-  padding: 20px;
-  background: rgba(var(--background-color-rgb), 0.5);
-  border-radius: 8px;
-  margin-bottom: 15px;
-}
-
-.icon-preview {
-  width: 64px;
-  height: 64px;
-  object-fit: contain;
-  margin: 0 auto 10px;
-  display: block;
-}
-
-.icon-hint {
-  font-size: 12px;
-  color: #999;
-  margin: 0;
-}
-
-.upload-area {
-  text-align: center;
-}
-
-.upload-placeholder {
-  padding: 40px;
-  background: rgba(var(--background-color-rgb), 0.5);
-  border-radius: 8px;
-  border: 2px dashed var(--border-color);
-  margin-bottom: 15px;
-}
-
-.upload-placeholder p {
-  margin: 5px 0;
-  color: var(--text-color);
-}
-
-.upload-placeholder .hint {
-  font-size: 12px;
-  color: #999;
-}
-
-.upload-btn,
-.select-btn {
-  padding: 10px 20px;
-  background: #007aff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  margin-top: 10px;
-}
-
-.upload-btn:hover,
-.select-btn:hover {
-  background: #0056b3;
-}
-
-.select-btn:disabled {
-  background: #999;
-  cursor: not-allowed;
-}
-
-.upload-status {
-  margin-top: 10px;
-  color: #007aff;
-  font-size: 14px;
-}
-
-.url-input-group {
-  margin-bottom: 15px;
-}
-
-.url-input-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: var(--text-color);
-}
-
-.url-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  background: rgba(var(--background-color-rgb), 0.5);
-  color: var(--text-color);
-  font-size: 14px;
-}
-
-.form-hint {
-  display: block;
-  margin-top: 5px;
-  font-size: 12px;
-  color: #999;
-}
-
-.url-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  color: #007aff;
-  font-size: 13px;
-}
-
-.url-error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  color: #f44336;
-  font-size: 13px;
-  padding: 8px;
-  background: rgba(244, 67, 54, 0.1);
-  border-radius: 4px;
-  border: 1px solid rgba(244, 67, 54, 0.2);
-}
-
-.current-icon {
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid var(--border-color);
-  text-align: center;
-}
-
-.current-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: var(--text-color);
-  margin-bottom: 10px;
-}
-</style>
+<template>
+  <div class="icon-selector">
+    <div class="icon-tabs">
+      <button
+        v-if="defaultIconPath"
+        type="button"
+        :class="['tab-btn', { active: iconMode === 'default' }]"
+        @click="iconMode = 'default'"
+      >
+        默认图标
+      </button>
+      <button
+        type="button"
+        :class="['tab-btn', { active: iconMode === 'upload' }]"
+        @click="iconMode = 'upload'"
+      >
+        上传图标
+      </button>
+      <button
+        type="button"
+        :class="['tab-btn', { active: iconMode === 'url' }]"
+        @click="iconMode = 'url'"
+      >
+        URL图标
+      </button>
+    </div>
+
+    <!-- 默认图标 -->
+    <div v-if="iconMode === 'default' && defaultIconPath" class="icon-content">
+      <div class="default-icon-preview">
+        <img :src="defaultIconPath" alt="默认图标" class="icon-preview" />
+        <p class="icon-hint">使用默认本地图标：{{ defaultIconPath }}</p>
+      </div>
+      <button type="button" @click="selectDefault" class="select-btn">使用默认图标</button>
+    </div>
+
+    <!-- 上传图标 -->
+    <div v-if="iconMode === 'upload'" class="icon-content">
+      <div class="upload-area">
+        <input
+          type="file"
+          ref="fileInput"
+          @change="handleFileSelect"
+          accept="image/*"
+          style="display: none"
+        />
+        <div v-if="!uploadedIconUrl" class="upload-placeholder">
+          <p>点击选择图标文件</p>
+          <p class="hint">支持 jpg、png、jpeg、webp、avif、svg、ico 等格式</p>
+        </div>
+        <div v-else class="uploaded-preview">
+          <img :src="uploadedIconUrl" alt="上传的图标" class="icon-preview" />
+          <p class="icon-hint">已上传的图标</p>
+        </div>
+        <button type="button" @click="$refs.fileInput.click()" class="upload-btn">
+          {{ uploadedIconUrl ? '重新选择' : '选择文件' }}
+        </button>
+        <div v-if="uploading" class="upload-status">上传中...</div>
+      </div>
+    </div>
+
+    <!-- URL图标 -->
+    <div v-if="iconMode === 'url'" class="icon-content">
+      <div class="url-input-group">
+        <label>图标URL</label>
+        <input
+          v-model="iconUrl"
+          type="text"
+          placeholder="https://example.com/favicon.ico"
+          class="url-input"
+          @input="handleUrlInput"
+        />
+        <small class="form-hint">支持重定向图片URL，格式：avif, png, jpg, jpeg, webp, svg, ico等</small>
+        <div v-if="urlValidating" class="url-status">
+          <i class="fas fa-spinner fa-spin"></i>
+          <span>正在验证图片URL...</span>
+        </div>
+        <div v-if="urlError" class="url-error">
+          <i class="fas fa-exclamation-circle"></i>
+          <span>{{ urlError }}</span>
+        </div>
+      </div>
+      <div v-if="iconUrl && !urlError && urlValidated" class="url-preview">
+        <img :src="validatedUrl" alt="URL图标" class="icon-preview" @error="handleImageError" />
+        <p class="icon-hint">URL图标预览（支持重定向）</p>
+      </div>
+      <button type="button" @click="selectUrl" class="select-btn" :disabled="!iconUrl || urlValidating || !!urlError">
+        {{ urlValidating ? '验证中...' : '使用URL图标' }}
+      </button>
+    </div>
+
+    <!-- 当前选择的图标预览 -->
+    <div v-if="currentIcon" class="current-icon">
+      <p class="current-label">当前图标：</p>
+      <img :src="currentIcon" alt="当前图标" class="icon-preview" @error="handleImageError" />
+      <p class="icon-hint">{{ currentIcon }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { adminAPI } from '../api'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  defaultIconPath: {
+    type: String,
+    default: '/favicon.ico',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const iconMode = ref('default')
+const iconUrl = ref('')
+const uploadedIconUrl = ref('')
+const uploading = ref(false)
+const currentIcon = ref(props.modelValue || props.defaultIconPath)
+const urlValidating = ref(false)
+const urlValidated = ref(false)
+const urlError = ref('')
+const validatedUrl = ref('')
+
+// 支持的图片格式
+const allowedImageFormats = ['avif', 'png', 'jpg', 'jpeg', 'webp', 'svg', 'ico', 'gif', 'bmp']
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      currentIcon.value = newVal
+      // 根据值判断模式
+      if (props.defaultIconPath && newVal === props.defaultIconPath) {
+        iconMode.value = 'default'
+      } else if (newVal.startsWith('http://') || newVal.startsWith('https://')) {
+        iconMode.value = 'url'
+        iconUrl.value = newVal
+      } else if (newVal.startsWith('/uploads/')) {
+        iconMode.value = 'upload'
+        uploadedIconUrl.value = newVal
+      } else {
+        // 如果值不为空但不是已知格式，默认使用URL模式
+        iconMode.value = 'url'
+        iconUrl.value = newVal
+      }
+    } else {
+      currentIcon.value = props.defaultIconPath || ''
+    }
+  },
+  { immediate: true }
+)
+
+const handleFileSelect = async (event) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  // 检查文件类型，支持常见图标格式包括ico
+  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/ico', 'image/icon']
+  const fileExtension = file.name.split('.').pop()?.toLowerCase()
+  const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'avif', 'bmp']
+  
+  if (!allowedTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
+    alert('不支持的文件格式，请上传 jpg、png、gif、webp、svg、ico 等格式的图片')
+    return
+  }
+
+  uploading.value = true
+  try {
+    const res = await adminAPI.uploadFile(file)
+    uploadedIconUrl.value = res.data.url
+    currentIcon.value = res.data.url
+    emit('update:modelValue', res.data.url)
+  } catch (error) {
+    alert('上传失败: ' + (error.response?.data?.error || error.message))
+  } finally {
+    uploading.value = false
+  }
+}
+
+const selectDefault = () => {
+  currentIcon.value = props.defaultIconPath
+  emit('update:modelValue', props.defaultIconPath)
+}
+
+// 验证图片URL（支持重定向）
+const validateImageUrl = async (url) => {
+  if (!url) {
+    urlError.value = ''
+    urlValidated.value = false
+    return false
+  }
+
+  urlValidating.value = true
+  urlError.value = ''
+  urlValidated.value = false
+
+  try {
+    // 检查URL格式
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      urlError.value = 'URL必须以http://或https://开头'
+      urlValidating.value = false
+      return false
+    }
+
+    // 使用fetch跟随重定向
+    const response = await fetch(url, {
+      method: 'HEAD',
+      mode: 'cors',
+      redirect: 'follow'
+    })
+
+    if (!response.ok) {
+      urlError.value = '无法访问该URL'
+      urlValidating.value = false
+      return false
+    }
+
+    // 获取最终URL（可能经过重定向）
+    const finalUrl = response.url || url
+    
+    // 检查Content-Type
+    const contentType = response.headers.get('content-type') || ''
+    const isImage = contentType.startsWith('image/')
+    
+    // 或者检查URL扩展名
+    const urlLower = finalUrl.toLowerCase()
+    const hasImageExtension = allowedImageFormats.some(format => 
+      urlLower.includes(`.${format}`) || urlLower.includes(`/${format}`)
+    )
+
+    if (!isImage && !hasImageExtension) {
+      urlError.value = 'URL指向的不是图片文件'
+      urlValidating.value = false
+      return false
+    }
+
+    // 使用Image对象进一步验证（支持重定向）
+    return new Promise((resolve) => {
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      
+      img.onload = () => {
+        validatedUrl.value = finalUrl
+        urlValidated.value = true
+        urlError.value = ''
+        urlValidating.value = false
+        resolve(true)
+      }
+      
+      img.onerror = () => {
+        // 即使Image加载失败，如果Content-Type正确，也允许使用
+        if (isImage || hasImageExtension) {
+          validatedUrl.value = finalUrl
+          urlValidated.value = true
+          urlError.value = ''
+          urlValidating.value = false
+          resolve(true)
+        } else {
+          urlError.value = '无法加载图片，请检查URL是否正确'
+          urlValidated.value = false
+          urlValidating.value = false
+          resolve(false)
+        }
+      }
+      
+      img.src = finalUrl
+    })
+  } catch (error) {
+    urlError.value = '验证失败: ' + (error.message || '网络错误')
+    urlValidated.value = false
+    urlValidating.value = false
+    return false
+  }
+}
+
+// 处理URL输入（防抖）
+let urlValidationTimer = null
+const handleUrlInput = () => {
+  urlValidated.value = false
+  urlError.value = ''
+  
+  if (urlValidationTimer) {
+    clearTimeout(urlValidationTimer)
+  }
+  
+  urlValidationTimer = setTimeout(() => {
+    if (iconUrl.value) {
+      validateImageUrl(iconUrl.value)
+    }
+  }, 500)
+}
+
+const selectUrl = async () => {
+  if (iconUrl.value && !urlError.value) {
+    // 如果还未验证，先验证
+    if (!urlValidated.value) {
+      const isValid = await validateImageUrl(iconUrl.value)
+      if (!isValid) {
+        return
+      }
+    }
+    
+    currentIcon.value = validatedUrl.value || iconUrl.value
+    emit('update:modelValue', validatedUrl.value || iconUrl.value)
+  }
+}
+
+const handleImageError = () => {
+  if (iconMode.value === 'url') {
+    urlError.value = '无法加载图片，请检查URL是否正确'
+    urlValidated.value = false
+  }
+  console.warn('无法加载图标URL:', iconUrl.value)
+}
+
+onMounted(() => {
+  // 初始化时根据当前值设置模式
+  if (props.modelValue) {
+    if (props.defaultIconPath && props.modelValue === props.defaultIconPath) {
+      iconMode.value = 'default'
+    } else if (
+      props.modelValue.startsWith('http://') ||
+      props.modelValue.startsWith('https://')
+    ) {
+      iconMode.value = 'url'
+      iconUrl.value = props.modelValue
+    } else if (props.modelValue.startsWith('/uploads/')) {
+      iconMode.value = 'upload'
+      uploadedIconUrl.value = props.modelValue
+    } else {
+      // 如果值不为空但不是已知格式，默认使用URL模式
+      iconMode.value = 'url'
+      iconUrl.value = props.modelValue
+    }
+  } else if (!props.defaultIconPath) {
+    // 如果没有默认图标路径，默认使用上传模式
+    iconMode.value = 'upload'
+  }
+})
+</script>
+
+<style scoped>
+.icon-selector {
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+  padding: 14px;
+  background: var(--surface-muted);
+}
+
+.icon-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tab-btn {
+  min-height: 36px;
+  padding: 7px 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+  font-size: 14px;
+}
+
+.tab-btn.active {
+  border-bottom-color: var(--accent-color);
+  color: var(--text-color);
+  font-weight: 700;
+  background: var(--accent-soft);
+}
+
+.icon-content {
+  min-height: 170px;
+}
+
+.default-icon-preview,
+.uploaded-preview,
+.url-preview {
+  text-align: center;
+  padding: 20px;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+  margin-bottom: 15px;
+}
+
+.icon-preview {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  margin: 0 auto 10px;
+  display: block;
+}
+
+.icon-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.upload-area {
+  text-align: center;
+}
+
+.upload-placeholder {
+  padding: 40px;
+  background: var(--surface-color);
+  border-radius: 7px;
+  border: 1px dashed var(--border-strong);
+  margin-bottom: 15px;
+}
+
+.upload-placeholder p {
+  margin: 5px 0;
+  color: var(--text-color);
+}
+
+.upload-placeholder .hint {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.upload-btn,
+.select-btn {
+  padding: 10px 20px;
+  background: var(--accent-color);
+  color: #2f280d;
+  border: 1px solid var(--accent-strong);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.upload-btn:hover,
+.select-btn:hover {
+  background: var(--accent-strong);
+}
+
+.select-btn:disabled {
+  color: var(--text-muted);
+  background: var(--surface-muted);
+  border-color: var(--border-color);
+  cursor: not-allowed;
+}
+
+.upload-status {
+  margin-top: 10px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.url-input-group {
+  margin-bottom: 15px;
+}
+
+.url-input-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: var(--text-color);
+}
+
+.url-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--surface-color);
+  color: var(--text-color);
+  font-size: 14px;
+}
+
+.form-hint {
+  display: block;
+  margin-top: 5px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.url-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.url-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  color: var(--danger-color);
+  font-size: 13px;
+  padding: 8px;
+  background: rgba(244, 67, 54, 0.1);
+  border-radius: 6px;
+  border: 1px solid rgba(244, 67, 54, 0.2);
+}
+
+.current-icon {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+}
+
+.current-label {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--text-color);
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 4969631..f610ae5 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,403 +1,210 @@
-<template>
-  <div class="login-container">
-    <div class="login-background">
-      <div class="floating-shapes">
-        <div class="shape shape-1"></div>
-        <div class="shape shape-2"></div>
-        <div class="shape shape-3"></div>
-      </div>
-    </div>
-    <div class="login-box">
-      <div class="login-header">
-        <div class="login-icon">
-          <i class="fas fa-lock"></i>
-        </div>
-        <h2>管理员登录</h2>
-        <p class="login-subtitle">欢迎回来，请登录您的账户</p>
-      </div>
-      <form @submit.prevent="handleLogin" class="login-form">
-        <div class="form-group">
-          <div class="input-wrapper">
-            <i class="fas fa-user input-icon"></i>
-            <input 
-              v-model="username" 
-              type="text" 
-              placeholder="请输入用户名" 
-              required 
-              class="login-input"
-            />
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="input-wrapper">
-            <i class="fas fa-lock input-icon"></i>
-            <input 
-              v-model="password" 
-              type="password" 
-              placeholder="请输入密码" 
-              required 
-              class="login-input"
-            />
-          </div>
-        </div>
-        <button type="submit" :disabled="loading" class="login-btn">
-          <span v-if="!loading">
-            <i class="fas fa-sign-in-alt"></i>
-            登录
-          </span>
-          <span v-else>
-            <i class="fas fa-spinner fa-spin"></i>
-            登录中...
-          </span>
-        </button>
-        <div v-if="error" class="error-message">
-          <i class="fas fa-exclamation-circle"></i>
-          {{ error }}
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { login } from '../api'
-
-const username = ref('')
-const password = ref('')
-const loading = ref(false)
-const error = ref('')
-
-const handleLogin = async () => {
-  loading.value = true
-  error.value = ''
-  try {
-    const res = await login(username.value, password.value)
-    localStorage.setItem('token', res.data.token)
-    window.location.href = '/admin'
-  } catch (err) {
-    error.value = err.response?.data?.error || '登录失败'
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.login-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: var(--background-color);
-  overflow: hidden;
-}
-
-.login-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, 
-    rgba(0, 122, 255, 0.1) 0%, 
-    rgba(255, 204, 0, 0.1) 50%, 
-    rgba(0, 122, 255, 0.1) 100%);
-  background-size: 200% 200%;
-  animation: gradientShift 15s ease infinite;
-  z-index: 0;
-}
-
-@keyframes gradientShift {
-  0%, 100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-.floating-shapes {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.shape {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0.1;
-  animation: float 20s infinite ease-in-out;
-}
-
-.shape-1 {
-  width: 300px;
-  height: 300px;
-  background: var(--hover-link-color);
-  top: -100px;
-  left: -100px;
-  animation-delay: 0s;
-}
-
-.shape-2 {
-  width: 200px;
-  height: 200px;
-  background: #007aff;
-  bottom: -50px;
-  right: -50px;
-  animation-delay: 5s;
-}
-
-.shape-3 {
-  width: 150px;
-  height: 150px;
-  background: var(--hover-link-color);
-  top: 50%;
-  right: 10%;
-  animation-delay: 10s;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  33% {
-    transform: translate(30px, -30px) scale(1.1);
-  }
-  66% {
-    transform: translate(-20px, 20px) scale(0.9);
-  }
-}
-
-.login-box {
-  position: relative;
-  z-index: 1;
-  background: rgba(var(--background-color-rgb), 0.85);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  padding: 48px 40px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-  width: 100%;
-  max-width: 420px;
-  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 36px;
-}
-
-.login-icon {
-  width: 64px;
-  height: 64px;
-  margin: 0 auto 20px;
-  background: linear-gradient(135deg, #007aff, var(--hover-link-color));
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
-  }
-  50% {
-    transform: scale(1.05);
-    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
-  }
-}
-
-.login-icon i {
-  font-size: 28px;
-  color: white;
-}
-
-.login-header h2 {
-  margin: 0 0 8px 0;
-  color: var(--text-color);
-  font-size: 28px;
-  font-weight: 600;
-}
-
-.login-subtitle {
-  margin: 0;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
-  font-size: 14px;
-}
-
-.login-form {
-  width: 100%;
-}
-
-.form-group {
-  margin-bottom: 24px;
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.input-icon {
-  position: absolute;
-  left: 16px;
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
-  font-size: 16px;
-  z-index: 1;
-  transition: color 0.3s ease;
-}
-
-.login-input {
-  width: 100%;
-  padding: 14px 16px 14px 48px;
-  border: 2px solid var(--border-color);
-  border-radius: 12px;
-  background: rgba(var(--background-color-rgb), 0.6);
-  color: var(--text-color);
-  font-size: 15px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  outline: none;
-}
-
-.login-input::placeholder {
-  color: rgba(var(--text-color-rgb, 51, 51, 51), 0.4);
-}
-
-.login-input:focus {
-  border-color: #007aff;
-  background: rgba(var(--background-color-rgb), 0.8);
-  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
-  transform: translateY(-2px);
-}
-
-.login-input:focus + .input-icon,
-.login-input:focus ~ .input-icon {
-  color: #007aff;
-}
-
-.login-btn {
-  width: 100%;
-  padding: 16px;
-  background: linear-gradient(135deg, #007aff, #0056b3);
-  color: white;
-  border: none;
-  border-radius: 12px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 600;
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
-  position: relative;
-  overflow: hidden;
-}
-
-.login-btn::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.login-btn:hover::before {
-  width: 300px;
-  height: 300px;
-}
-
-.login-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
-}
-
-.login-btn:active {
-  transform: translateY(0);
-}
-
-.login-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.login-btn span {
-  position: relative;
-  z-index: 1;
-}
-
-.error-message {
-  color: #f44336;
-  margin-top: 16px;
-  text-align: center;
-  padding: 12px;
-  background: rgba(244, 67, 54, 0.1);
-  border-radius: 8px;
-  border: 1px solid rgba(244, 67, 54, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 14px;
-  animation: shake 0.5s ease;
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-10px);
-  }
-  75% {
-    transform: translateX(10px);
-  }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .login-box {
-    padding: 36px 24px;
-    margin: 20px;
-    max-width: calc(100% - 40px);
-  }
-  
-  .login-header h2 {
-    font-size: 24px;
-  }
-  
-  .shape {
-    display: none;
-  }
-}
-</style>
+<template>
+  <main class="login-page">
+    <div class="background" aria-hidden="true"></div>
+
+    <div class="login-tools">
+      <router-link to="/" class="icon-button" title="返回主页" aria-label="返回主页">
+        <i class="fas fa-house" aria-hidden="true"></i>
+      </router-link>
+      <button type="button" class="icon-button" :title="themeLabel" :aria-label="themeLabel" @click="toggleTheme">
+        <i :class="themeIcon" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    <section class="login-panel" aria-labelledby="login-title">
+      <header class="login-header">
+        <span class="site-mark">
+          <img v-if="siteIcon && !iconFailed" :src="siteIcon" alt="" @error="iconFailed = true" />
+          <i v-else class="fas fa-home" aria-hidden="true"></i>
+        </span>
+        <div>
+          <p class="site-name">{{ siteName }}</p>
+          <h1 id="login-title">管理后台</h1>
+        </div>
+      </header>
+
+      <form class="login-form" @submit.prevent="handleLogin">
+        <label for="username">用户名</label>
+        <div class="input-control">
+          <i class="fas fa-user" aria-hidden="true"></i>
+          <input id="username" v-model.trim="username" type="text" autocomplete="username" placeholder="请输入用户名" required autofocus />
+        </div>
+
+        <label for="password">密码</label>
+        <div class="input-control">
+          <i class="fas fa-lock" aria-hidden="true"></i>
+          <input
+            id="password"
+            v-model="password"
+            :type="showPassword ? 'text' : 'password'"
+            autocomplete="current-password"
+            placeholder="请输入密码"
+            required
+          />
+          <button
+            type="button"
+            class="password-toggle"
+            :title="showPassword ? '隐藏密码' : '显示密码'"
+            :aria-label="showPassword ? '隐藏密码' : '显示密码'"
+            @click="showPassword = !showPassword"
+          >
+            <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" aria-hidden="true"></i>
+          </button>
+        </div>
+
+        <p v-if="error" class="login-error" role="alert">
+          <i class="fas fa-circle-exclamation" aria-hidden="true"></i>
+          {{ error }}
+        </p>
+
+        <button type="submit" class="login-submit" :disabled="loading">
+          <i :class="loading ? 'fas fa-spinner fa-spin' : 'fas fa-arrow-right-to-bracket'" aria-hidden="true"></i>
+          {{ loading ? '正在登录' : '登录' }}
+        </button>
+      </form>
+
+      <p class="login-footnote">使用站点管理员账户继续</p>
+    </section>
+  </main>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getSiteConfig, login } from '../api'
+import { useTheme } from '../composables/useTheme'
+
+const route = useRoute()
+const router = useRouter()
+const username = ref('')
+const password = ref('')
+const showPassword = ref(false)
+const loading = ref(false)
+const error = ref('')
+const siteName = ref('Home-Vue')
+const siteIcon = ref('/favicon.ico')
+const iconFailed = ref(false)
+const { themeIcon, themeLabel, toggleTheme } = useTheme()
+
+const handleLogin = async () => {
+  if (loading.value) return
+  loading.value = true
+  error.value = ''
+  try {
+    const { data } = await login(username.value, password.value)
+    localStorage.setItem('token', data.token)
+    const redirect = typeof route.query.redirect === 'string' && route.query.redirect.startsWith('/')
+      ? route.query.redirect
+      : '/admin'
+    await router.replace(redirect)
+  } catch (requestError) {
+    error.value = requestError.response?.data?.error || '登录失败，请检查用户名和密码'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  try {
+    const { data } = await getSiteConfig()
+    siteName.value = data.siteName || data.userName || siteName.value
+    siteIcon.value = data.siteIcon || data.favicon || siteIcon.value
+  } catch {
+    // Public configuration is optional on the login page.
+  }
+})
+</script>
+
+<style scoped>
+.login-page {
+  position: relative;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 72px 20px 32px;
+  overflow: hidden;
+}
+
+.login-tools {
+  position: fixed;
+  top: 18px;
+  right: 18px;
+  display: flex;
+  gap: 8px;
+  z-index: 2;
+}
+
+.icon-button,
+.password-toggle {
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  background: var(--surface-color);
+  cursor: pointer;
+}
+
+.icon-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  backdrop-filter: blur(12px);
+}
+
+.icon-button:hover { color: var(--hover-link-color); border-color: var(--hover-link-color); }
+
+.login-panel {
+  position: relative;
+  width: min(100%, 390px);
+  padding: 30px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--surface-color);
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(18px);
+}
+
+.login-panel::before {
+  position: absolute;
+  top: 0;
+  left: 28px;
+  width: 54px;
+  height: 3px;
+  background: var(--hover-link-color);
+  content: '';
+}
+
+.login-header { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
+.site-mark { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-color); border-radius: 50%; background: var(--surface-muted); color: var(--hover-link-color); font-size: 20px; overflow: hidden; }
+.site-mark img { width: 100%; height: 100%; object-fit: cover; }
+.site-name { margin: 0 0 2px; color: var(--text-muted); font-size: 13px; }
+.login-header h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
+.login-form { display: flex; flex-direction: column; }
+.login-form label { margin: 0 0 7px; font-size: 13px; font-weight: 600; }
+.input-control { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
+.input-control > i { position: absolute; left: 13px; color: var(--text-muted); pointer-events: none; }
+.input-control input {
+  width: 100%;
+  height: 44px;
+  padding: 0 42px 0 39px;
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+  color: var(--text-color);
+  background: var(--surface-muted);
+}
+.input-control input:focus { border-color: var(--hover-link-color); outline: 3px solid var(--focus-ring); }
+.password-toggle { position: absolute; right: 5px; width: 34px; height: 34px; border: 0; border-radius: 5px; background: transparent; }
+.password-toggle:hover { color: var(--hover-link-color); }
+.login-error { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 16px; padding: 10px 12px; border-left: 3px solid var(--danger-color); color: var(--danger-color); background: rgba(201, 54, 43, 0.08); font-size: 13px; }
+.login-submit { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #d1a700; border-radius: 7px; color: #272100; background: var(--hover-link-color); font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
+.login-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--hover-link-color-rgb), 0.28); }
+.login-submit:disabled { opacity: 0.64; cursor: wait; }
+.login-footnote { margin: 20px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }
+
+@media (max-width: 480px) {
+  .login-page { padding-inline: 14px; }
+  .login-tools { top: 12px; right: 12px; }
+  .login-panel { padding: 26px 20px; }
+}
+</style>
diff --git a/src/components/Website.vue b/src/components/Website.vue
index f916e44..a32b8a5 100644
--- a/src/components/Website.vue
+++ b/src/components/Website.vue
@@ -1,158 +1,105 @@
-<template>
-  <div class="container">
-    <div class="swiper-container">
-      <div class="swiper-wrapper">
-        <div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
-          <div class="site-grid">
-            <div v-for="(site, i) in siteChunk" :key="i" class="site-box" @click="openLink(site.url)">
-              <div class="site-content">
-                <i :class="site.icon" aria-hidden="true"></i>
-                <span class="site-name">{{ site.name }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="swiper-pagination"></div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import Swiper from 'swiper/bundle';
-import 'swiper/swiper-bundle.css';
-import { getSites } from '../api';
-
-const sites = ref([]);
-const chunkedSites = ref([]);
-
-const loadSites = async () => {
-  try {
-    const res = await getSites();
-    sites.value = res.data;
-    // 将站点数据分块（每页6个）
-    chunkedSites.value = sites.value.reduce((acc, site, index) => {
-      const chunkIndex = Math.floor(index / 6);
-      if (!acc[chunkIndex]) acc[chunkIndex] = [];
-      acc[chunkIndex].push(site);
-      return acc;
-    }, []);
-    
-    // 如果数据加载后需要重新初始化Swiper
-    if (chunkedSites.value.length > 0) {
-      setTimeout(() => {
-        initSwiper();
-      }, 100);
-    }
-  } catch (error) {
-    console.error('加载站点数据失败:', error);
-    // 如果API失败，使用空数组
-    chunkedSites.value = [];
-  }
-};
-
-let swiperInstance = null;
-
-const initSwiper = () => {
-  if (swiperInstance) {
-    swiperInstance.destroy();
-  }
-  swiperInstance = new Swiper('.swiper-container', {
-    slidesPerView: 1,
-    spaceBetween: 20,
-    pagination: { el: '.swiper-pagination', clickable: true },
-    mousewheel: true,
-  });
-};
-
-const openLink = (url) => {
-  if (url) window.open(url, '_blank');
-};
-
-onMounted(() => {
-  loadSites();
-});
-</script>
-
-
-<style scoped>
-.container {
-  max-width: 700px;
-  width: 100%;
-  margin: 30px 0 20px;
-}
-
-.swiper-container {
-  overflow: hidden;
-  padding: 10px;
-}
-
-.swiper-pagination {
-  bottom: inherit;
-}
-
-.site-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-}
-
-.site-box {
-  padding: 30px;
-  backdrop-filter: blur(10px);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  background-color: rgba(var(--background-color-rgb), 0.2);
-  cursor: pointer;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-
-  &:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 1px 8px var(--shadow-color);
-  }
-}
-
-.site-content {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
-
-  i {
-    font-size: var(--icon-size);
-  }
-}
-
-.site-name {
-  margin: 0;
-  font-size: 1.17em;
-  font-weight: bold;
-}
-
-@media screen and (max-width: 768px) {
-  .site-content {
-    gap: 5px;
-    flex-direction: column;
-  }
-
-  .site-box {
-    padding: 15px;
-    border-radius: 8px;
-  }
-
-  .site-name {
-    font-size: 16px;
-  }
-
-  .site-content i {
-    font-size: 18px;
-  }
-}
-
-:deep(.swiper-pagination-bullet-active) {
-  background: #8c8c8c94;
-  width: 20px;
-  border-radius: 5px;
-}
-</style>
\ No newline at end of file
+<template>
+  <section class="sites" aria-label="站点导航" :aria-busy="loading">
+    <div v-if="loading" class="site-grid site-grid--loading" aria-label="正在加载站点">
+      <span v-for="index in 6" :key="index" class="site-skeleton"></span>
+    </div>
+    <div v-else ref="swiperElement" class="swiper sites-swiper">
+      <div class="swiper-wrapper">
+        <div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
+          <div class="site-grid">
+            <a
+              v-for="site in siteChunk"
+              :key="site.id || site.url"
+              :href="site.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="site-box"
+            >
+              <i :class="site.icon" aria-hidden="true"></i>
+              <span>{{ site.name }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div ref="paginationElement" class="swiper-pagination"></div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import Swiper from 'swiper/bundle'
+import 'swiper/swiper-bundle.css'
+import { getSites } from '../api'
+import fallbackSites from '../config/site.json'
+
+const sites = ref([])
+const loading = ref(true)
+const swiperElement = ref(null)
+const paginationElement = ref(null)
+const chunkedSites = computed(() => sites.value.reduce((chunks, site, index) => {
+  const chunkIndex = Math.floor(index / 6)
+  if (!chunks[chunkIndex]) chunks[chunkIndex] = []
+  chunks[chunkIndex].push(site)
+  return chunks
+}, []))
+let swiperInstance = null
+
+const initializeSwiper = async () => {
+  await nextTick()
+  swiperInstance?.destroy(true, true)
+  if (!swiperElement.value || chunkedSites.value.length < 1) return
+  swiperInstance = new Swiper(swiperElement.value, {
+    slidesPerView: 1,
+    spaceBetween: 18,
+    pagination: { el: paginationElement.value, clickable: true },
+    mousewheel: { forceToAxis: true },
+    keyboard: { enabled: true },
+  })
+}
+
+onMounted(async () => {
+  try {
+    const { data } = await getSites()
+    sites.value = Array.isArray(data) && data.length ? data : fallbackSites
+  } catch {
+    sites.value = fallbackSites
+  } finally {
+    loading.value = false
+    initializeSwiper()
+  }
+})
+
+onUnmounted(() => swiperInstance?.destroy(true, true))
+</script>
+
+<style scoped lang="less">
+.sites { width: min(100%, 700px); min-height: 185px; margin: 2px 0 0; }
+.sites-swiper { overflow: hidden; padding: 10px 10px 28px; }
+.site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+.site-box,
+.site-skeleton {
+  min-width: 0;
+  min-height: 72px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--surface-muted);
+}
+.site-box { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
+.site-box:hover { transform: translateY(-2px); border-color: var(--hover-link-color); box-shadow: 0 3px 10px var(--shadow-color); }
+.site-box i { flex: 0 0 auto; font-size: var(--icon-size); }
+.site-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.site-grid--loading { padding: 10px; }
+.site-skeleton { animation: pulse 1.2s ease-in-out infinite alternate; }
+@keyframes pulse { to { opacity: 0.45; } }
+:deep(.swiper-pagination-bullet) { background: var(--text-muted); }
+:deep(.swiper-pagination-bullet-active) { width: 20px; border-radius: 5px; background: var(--hover-link-color); }
+
+@media (max-width: 600px) {
+  .sites { min-height: 160px; }
+  .site-grid { gap: 9px; }
+  .site-box,
+  .site-skeleton { min-height: 60px; }
+  .site-box { flex-direction: column; gap: 5px; padding: 10px 6px; font-size: 14px; }
+}
+</style>
diff --git a/src/components/admin/AdminCollection.vue b/src/components/admin/AdminCollection.vue
new file mode 100644
index 0000000..f9e98dd
--- /dev/null
+++ b/src/components/admin/AdminCollection.vue
@@ -0,0 +1,122 @@
+<template>
+  <section class="collection" :aria-label="kind === 'sites' ? '站点列表' : '联系方式列表'">
+    <header class="collection-summary">
+      <span>{{ kind === 'sites' ? '站点' : '联系方式' }}</span>
+      <strong>{{ items.length }}</strong>
+    </header>
+
+    <div v-if="items.length" class="desktop-table">
+      <table v-if="kind === 'sites'">
+        <thead><tr><th>名称</th><th>地址</th><th>图标</th><th>排序</th><th><span class="sr-only">操作</span></th></tr></thead>
+        <tbody>
+          <tr v-for="item in items" :key="item.id">
+            <td><span class="name-cell"><i :class="item.icon" aria-hidden="true"></i>{{ item.name }}</span></td>
+            <td><a :href="item.url" target="_blank" rel="noopener noreferrer" class="url-cell">{{ item.url }}<i class="fas fa-arrow-up-right-from-square"></i></a></td>
+            <td><code>{{ item.icon }}</code></td>
+            <td>{{ item.sortOrder }}</td>
+            <td class="row-actions"><ActionButtons :item="item" @edit="emit('edit', item)" @delete="emit('delete', item)" /></td>
+          </tr>
+        </tbody>
+      </table>
+      <table v-else>
+        <thead><tr><th>类型</th><th>图标</th><th>链接或二维码</th><th>悬停颜色</th><th>排序</th><th><span class="sr-only">操作</span></th></tr></thead>
+        <tbody>
+          <tr v-for="item in items" :key="item.id">
+            <td><strong>{{ item.type }}</strong></td>
+            <td><i :class="item.icon" :style="{ color: item.hoverColor }" aria-hidden="true"></i></td>
+            <td><a v-if="item.url" :href="item.url" target="_blank" rel="noopener noreferrer" class="url-cell">{{ item.url }}<i class="fas fa-arrow-up-right-from-square"></i></a><span v-else class="muted"><i class="fas fa-qrcode"></i> 二维码</span></td>
+            <td><span class="color-cell"><i :style="{ background: item.hoverColor }"></i><code>{{ item.hoverColor }}</code></span></td>
+            <td>{{ item.sortOrder }}</td>
+            <td class="row-actions"><ActionButtons :item="item" @edit="emit('edit', item)" @delete="emit('delete', item)" /></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="items.length" class="mobile-list">
+      <article v-for="item in items" :key="item.id" class="mobile-item">
+        <div class="mobile-icon"><i :class="item.icon" :style="kind === 'contacts' ? { color: item.hoverColor } : {}"></i></div>
+        <div class="mobile-content">
+          <strong>{{ kind === 'sites' ? item.name : item.type }}</strong>
+          <span>{{ item.url || '二维码联系方式' }}</span>
+          <small>排序 {{ item.sortOrder }}</small>
+        </div>
+        <ActionButtons :item="item" @edit="emit('edit', item)" @delete="emit('delete', item)" />
+      </article>
+    </div>
+
+    <div v-if="!items.length" class="empty-state">
+      <i :class="kind === 'sites' ? 'fas fa-link' : 'fas fa-address-book'" aria-hidden="true"></i>
+      <strong>暂无{{ kind === 'sites' ? '站点' : '联系方式' }}</strong>
+      <p>使用页面右上角的添加按钮创建第一条记录。</p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { defineComponent, h } from 'vue'
+
+defineProps({
+  kind: { type: String, required: true },
+  items: { type: Array, default: () => [] },
+})
+const emit = defineEmits(['edit', 'delete'])
+
+const ActionButtons = defineComponent({
+  emits: ['edit', 'delete'],
+  setup(_, { emit: childEmit }) {
+    return () => h('div', { class: 'action-buttons' }, [
+      h('button', { type: 'button', title: '编辑', 'aria-label': '编辑', onClick: () => childEmit('edit') }, [h('i', { class: 'fas fa-pen' })]),
+      h('button', { type: 'button', title: '删除', 'aria-label': '删除', class: 'delete', onClick: () => childEmit('delete') }, [h('i', { class: 'fas fa-trash' })]),
+    ])
+  },
+})
+</script>
+
+<style scoped>
+.collection { overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); }
+.collection-summary { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: 13px; }
+.collection-summary strong { min-width: 26px; padding: 2px 7px; border-radius: 10px; color: var(--text-color); background: var(--surface-muted); text-align: center; }
+.desktop-table { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+th,
+td { padding: 13px 15px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; font-size: 13px; }
+th { color: var(--text-muted); background: var(--surface-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
+tbody tr:last-child td { border-bottom: 0; }
+tbody tr:hover { background: var(--surface-muted); }
+.name-cell,
+.color-cell,
+.url-cell,
+.muted { display: inline-flex; align-items: center; gap: 8px; }
+.name-cell { font-weight: 600; }
+.name-cell i { width: 18px; color: var(--hover-link-color); text-align: center; }
+.url-cell { max-width: 360px; color: var(--text-muted); }
+.url-cell:hover { color: var(--hover-link-color); }
+.url-cell { overflow-wrap: anywhere; }
+.url-cell i { font-size: 10px; }
+code { padding: 3px 6px; border-radius: 4px; color: var(--text-muted); background: var(--surface-muted); font: 11px Consolas, monospace; }
+.color-cell i { width: 13px; height: 13px; border: 1px solid var(--border-color); border-radius: 50%; }
+.muted { color: var(--text-muted); }
+.row-actions { width: 94px; text-align: right; }
+:deep(.action-buttons) { display: inline-flex; gap: 5px; }
+:deep(.action-buttons button) { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; cursor: pointer; }
+:deep(.action-buttons button:hover) { border-color: var(--border-color); color: var(--text-color); background: var(--surface-solid); }
+:deep(.action-buttons button.delete:hover) { border-color: var(--danger-color); color: var(--danger-color); }
+.mobile-list { display: none; }
+.empty-state { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--text-muted); text-align: center; }
+.empty-state > i { font-size: 28px; color: var(--hover-link-color); }
+.empty-state strong { color: var(--text-color); }
+.empty-state p { margin: 0; font-size: 13px; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+@media (max-width: 720px) {
+  .desktop-table { display: none; }
+  .mobile-list { display: block; }
+  .mobile-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px; border-bottom: 1px solid var(--border-color); }
+  .mobile-item:last-child { border-bottom: 0; }
+  .mobile-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-muted); }
+  .mobile-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+  .mobile-content span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+  .mobile-content small { color: var(--text-muted); font-size: 10px; }
+}
+</style>
diff --git a/src/components/admin/AdminConfig.vue b/src/components/admin/AdminConfig.vue
new file mode 100644
index 0000000..722e8a0
--- /dev/null
+++ b/src/components/admin/AdminConfig.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="settings-shell">
+    <nav class="settings-nav" aria-label="配置分类">
+      <button
+        v-for="section in sections"
+        :key="section.name"
+        type="button"
+        :class="{ active: activeSection === section.name }"
+        @click="emit('update:activeSection', section.name)"
+      >
+        <i :class="section.icon" aria-hidden="true"></i>
+        <span>{{ section.name }}</span>
+      </button>
+    </nav>
+
+    <div class="settings-workspace">
+      <section class="settings-form" :aria-labelledby="`settings-${activeSection}`">
+        <header class="section-heading">
+          <span><i :class="currentSection.icon" aria-hidden="true"></i></span>
+          <div>
+            <h2 :id="`settings-${activeSection}`">{{ activeSection }}</h2>
+            <p>{{ currentSection.description }}</p>
+          </div>
+        </header>
+
+        <div v-if="activeSection === '基础信息'" class="form-grid">
+          <label class="field"><span>站点名称</span><input v-model="config.siteName" type="text" placeholder="Home-Vue" /></label>
+          <label class="field"><span>站点 URL</span><input v-model="config.siteURL" type="url" placeholder="https://example.com" /></label>
+          <label class="field field--full"><span>站点描述</span><textarea v-model="config.siteDescription" rows="3" placeholder="用于搜索和社交分享的站点描述"></textarea></label>
+          <label class="field field--full"><span>站点关键词</span><input v-model="config.siteKeywords" type="text" placeholder="个人主页, Vue3" /><small>使用英文逗号分隔多个关键词</small></label>
+          <label class="field"><span>版权起始年份</span><input v-model="config.footerYearStart" inputmode="numeric" placeholder="2024" /></label>
+          <label class="field"><span>版权结束年份</span><input v-model="config.footerYearEnd" inputmode="numeric" placeholder="留空则只显示起始年份" /></label>
+        </div>
+
+        <div v-else-if="activeSection === '用户信息'" class="form-grid">
+          <label class="field field--full"><span>主页用户名</span><input v-model="config.userName" type="text" placeholder="显示在 Hi, I'm 后方" /></label>
+          <div class="field field--full"><span>头像</span><IconSelector v-model="config.profileImageURL" :default-icon-path="''" /><small>支持上传图片或填写外部图片 URL</small></div>
+        </div>
+
+        <div v-else-if="activeSection === '图标配置'" class="form-grid">
+          <div class="field field--full"><span>站点图标</span><IconSelector v-model="config.siteIcon" default-icon-path="/favicon.ico" /></div>
+          <div class="field field--full"><span>浏览器图标</span><IconSelector v-model="config.favicon" default-icon-path="/favicon.ico" /></div>
+        </div>
+
+        <div v-else-if="activeSection === '备案信息'" class="form-grid">
+          <label class="field"><span>ICP备案号</span><input v-model="config.icpNumber" type="text" placeholder="留空则不显示" /></label>
+          <label class="field"><span>公安备案号</span><input v-model="config.policeNumber" type="text" placeholder="留空则不显示" /></label>
+        </div>
+
+        <div v-else-if="activeSection === '前端配置'" class="form-grid">
+          <label class="field field--full"><span>网页标题</span><input v-model="config.pageTitle" type="text" placeholder="个人主页" /></label>
+          <label class="field field--full"><span>图标库 CDN 地址</span><input v-model="config.iconLibrary" type="url" placeholder="Font Awesome 样式地址" /></label>
+          <label class="field field--full"><span>字体库 CDN 地址</span><input v-model="config.fontLibrary" type="url" placeholder="留空使用默认字体" /></label>
+          <label class="switch-field field--full">
+            <span><strong>显示访问计时器</strong><small>在主页显示停留时间与日期</small></span>
+            <input v-model="config.showVisitTimer" type="checkbox" role="switch" />
+          </label>
+        </div>
+
+        <div v-else-if="activeSection === '轮换文本'" class="rotating-editor">
+          <div v-for="(text, index) in rotatingTexts" :key="index" class="rotating-row">
+            <span>{{ String(index + 1).padStart(2, '0') }}</span>
+            <input v-model="rotatingTexts[index]" type="text" :placeholder="`第 ${index + 1} 条文本`" />
+            <button type="button" title="删除此文本" aria-label="删除此文本" :disabled="rotatingTexts.length <= 1" @click="emit('removeText', index)">
+              <i class="fas fa-trash" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="inline-actions">
+            <button type="button" class="secondary-button" :disabled="rotatingTexts.length >= 8" @click="emit('addText')">
+              <i class="fas fa-plus" aria-hidden="true"></i>添加文本
+            </button>
+            <button type="button" class="primary-button" @click="emit('saveTexts')">
+              <i class="fas fa-floppy-disk" aria-hidden="true"></i>保存轮换文本
+            </button>
+          </div>
+        </div>
+
+        <div v-else class="form-grid">
+          <label class="field field--full"><span>Umami 统计脚本地址</span><input v-model="config.umamiScript" type="url" placeholder="https://analytics.example.com/script.js" /><small>留空时不加载统计脚本</small></label>
+          <label class="field field--full"><span>Umami 网站 ID</span><input v-model="config.umamiWebsiteId" type="text" placeholder="网站 UUID" /></label>
+        </div>
+      </section>
+
+      <aside class="live-preview" aria-label="主页即时预览">
+        <header><span>即时预览</span><small>尚未保存</small></header>
+        <div class="preview-stage">
+          <div class="preview-identity">
+            <span class="preview-avatar">
+              <img v-if="config.profileImageURL && !previewImageFailed" :src="config.profileImageURL" alt="头像预览" @error="previewImageFailed = true" />
+              <i v-else class="fas fa-user" aria-hidden="true"></i>
+            </span>
+            <div><strong>Hi,</strong><strong>I'm <mark>{{ config.userName || '用户' }}</mark></strong></div>
+          </div>
+          <p class="preview-text">“{{ previewText }}”</p>
+          <div class="preview-icons"><i class="fas fa-envelope"></i><i class="fab fa-github"></i><i class="fas fa-moon"></i></div>
+          <div v-if="config.showVisitTimer" class="preview-timer"><i class="fas fa-clock"></i> 停留时间 : 00:03:27</div>
+        </div>
+        <footer>{{ previewFooter }}</footer>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import IconSelector from '../IconSelector.vue'
+
+const props = defineProps({
+  config: { type: Object, required: true },
+  rotatingTexts: { type: Array, required: true },
+  activeSection: { type: String, required: true },
+})
+const emit = defineEmits(['update:activeSection', 'addText', 'removeText', 'saveTexts'])
+const previewImageFailed = ref(false)
+const sections = [
+  { name: '基础信息', icon: 'fas fa-circle-info', description: '站点身份、搜索信息和版权年份' },
+  { name: '用户信息', icon: 'fas fa-user', description: '主页展示的用户名与头像' },
+  { name: '图标配置', icon: 'fas fa-image', description: '站点图标和浏览器标签图标' },
+  { name: '备案信息', icon: 'fas fa-shield-halved', description: '页脚展示的备案信息' },
+  { name: '前端配置', icon: 'fas fa-code', description: '网页标题、外部资源和计时器' },
+  { name: '轮换文本', icon: 'fas fa-i-cursor', description: '主页逐条打字展示的短句，最多八条' },
+  { name: '统计配置', icon: 'fas fa-chart-line', description: 'Umami 访问统计接入信息' },
+]
+const currentSection = computed(() => sections.find((section) => section.name === props.activeSection) || sections[0])
+const previewText = computed(() => props.rotatingTexts.find((text) => text?.trim()) || '欢迎来到我的主页')
+const previewFooter = computed(() => {
+  const currentYear = String(new Date().getFullYear())
+  const start = String(props.config.footerYearStart || '').trim()
+  const end = String(props.config.footerYearEnd || '').trim()
+  const year = start && end && start !== end ? `${start}~${end}` : start || end || currentYear
+  return `© ${year} Made by ${props.config.userName || '用户'}`
+})
+
+watch(() => props.config.profileImageURL, () => { previewImageFailed.value = false })
+</script>
+
+<style scoped>
+.settings-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
+.settings-nav { display: flex; flex-direction: column; gap: 4px; }
+.settings-nav button { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; text-align: left; cursor: pointer; }
+.settings-nav button i { width: 18px; text-align: center; }
+.settings-nav button:hover { color: var(--text-color); background: var(--surface-muted); }
+.settings-nav button.active { border-color: var(--border-color); color: var(--text-color); background: var(--surface-color); box-shadow: inset 3px 0 var(--hover-link-color); }
+.settings-workspace { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
+.settings-form { min-width: 0; }
+.section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
+.section-heading > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #312900; background: var(--hover-link-color); }
+.section-heading h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: 0; }
+.section-heading p { margin: 0; color: var(--text-muted); font-size: 13px; }
+.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
+.field--full { grid-column: 1 / -1; }
+.field > span,
+.field > label { font-size: 13px; font-weight: 600; }
+.field small,
+.switch-field small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
+.field input,
+.field textarea,
+.rotating-row input { width: 100%; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); background: var(--surface-muted); }
+.field input { height: 40px; padding: 0 11px; }
+.field textarea { padding: 10px 11px; resize: vertical; }
+.field input:focus,
+.field textarea:focus,
+.rotating-row input:focus { border-color: var(--hover-link-color); outline: 3px solid var(--focus-ring); }
+.switch-field { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--surface-muted); }
+.switch-field > span { display: flex; flex-direction: column; gap: 3px; }
+.switch-field input { width: 42px; height: 22px; accent-color: var(--hover-link-color); }
+.rotating-editor { display: flex; flex-direction: column; gap: 10px; }
+.rotating-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
+.rotating-row > span { color: var(--text-muted); font: 12px Consolas, monospace; }
+.rotating-row input { height: 40px; padding: 0 11px; }
+.rotating-row button { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px; color: var(--danger-color); background: transparent; cursor: pointer; }
+.rotating-row button:hover:not(:disabled) { border-color: currentColor; background: rgba(201, 54, 43, 0.07); }
+.rotating-row button:disabled { opacity: 0.35; cursor: not-allowed; }
+.inline-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
+.primary-button,
+.secondary-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 6px; cursor: pointer; }
+.primary-button { border: 1px solid #d1a700; color: #292100; background: var(--hover-link-color); font-weight: 700; }
+.secondary-button { border: 1px solid var(--border-color); color: var(--text-color); background: var(--surface-muted); }
+.primary-button:disabled,
+.secondary-button:disabled { opacity: 0.5; cursor: not-allowed; }
+.live-preview { position: sticky; top: 92px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08); }
+.live-preview > header { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 700; }
+.live-preview > header small { color: var(--warning-color); font-weight: 400; }
+.preview-stage { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px; background: var(--background-color) var(--background-image) repeat; }
+.preview-identity { display: flex; align-items: center; gap: 13px; }
+.preview-avatar { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--border-color); border-radius: 50%; background: var(--surface-color); color: var(--text-muted); }
+.preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.preview-identity div { display: flex; flex-direction: column; font-size: 16px; }
+.preview-identity mark { position: relative; color: inherit; background: linear-gradient(transparent 65%, rgba(var(--hover-link-color-rgb), 0.68) 65%); }
+.preview-text { max-width: 260px; min-height: 34px; margin: 0; color: var(--text-muted); font-family: Georgia, serif; font-size: 12px; text-align: center; }
+.preview-icons { display: flex; gap: 18px; }
+.preview-timer { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-muted); font-size: 11px; }
+.live-preview > footer { padding: 10px 12px; color: var(--text-muted); font-size: 10px; text-align: center; }
+
+@media (max-width: 1280px) {
+  .settings-workspace { grid-template-columns: minmax(0, 1fr); }
+  .live-preview { position: static; }
+  .preview-stage { min-height: 250px; }
+}
+@media (max-width: 900px) {
+  .settings-shell { grid-template-columns: 1fr; }
+  .settings-nav { flex-direction: row; overflow-x: auto; padding-bottom: 5px; }
+  .settings-nav button { flex: 0 0 auto; white-space: nowrap; }
+  .settings-nav button.active { box-shadow: inset 0 -3px var(--hover-link-color); }
+}
+@media (max-width: 600px) {
+  .form-grid { grid-template-columns: 1fr; }
+  .field--full { grid-column: auto; }
+  .inline-actions { flex-direction: column-reverse; }
+  .inline-actions button { width: 100%; }
+}
+</style>
diff --git a/src/components/admin/AdminModal.vue b/src/components/admin/AdminModal.vue
new file mode 100644
index 0000000..d1ffdac
--- /dev/null
+++ b/src/components/admin/AdminModal.vue
@@ -0,0 +1,90 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div v-if="open" class="modal-backdrop" @mousedown.self="emit('close')">
+        <section
+          ref="dialogElement"
+          class="admin-modal"
+          :class="[`admin-modal--${size}`]"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="titleId"
+          :aria-describedby="description ? descriptionId : undefined"
+          tabindex="-1"
+          @keydown.esc="emit('close')"
+        >
+          <header class="modal-header">
+            <div>
+              <h2 :id="titleId">{{ title }}</h2>
+              <p v-if="description" :id="descriptionId">{{ description }}</p>
+            </div>
+            <button type="button" class="modal-close" title="关闭" aria-label="关闭" @click="emit('close')">
+              <i class="fas fa-xmark" aria-hidden="true"></i>
+            </button>
+          </header>
+          <div class="modal-body"><slot /></div>
+          <footer v-if="$slots.footer" class="modal-footer"><slot name="footer" /></footer>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { nextTick, onUnmounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+  size: { type: String, default: 'medium' },
+})
+const emit = defineEmits(['close'])
+const dialogElement = ref(null)
+const titleId = `modal-title-${Math.random().toString(36).slice(2)}`
+const descriptionId = `modal-description-${Math.random().toString(36).slice(2)}`
+let previousFocus = null
+
+watch(() => props.open, async (open) => {
+  if (open) {
+    previousFocus = document.activeElement
+    document.body.style.overflow = 'hidden'
+    await nextTick()
+    const focusTarget = dialogElement.value?.querySelector('input, textarea, select, button, [tabindex="0"]')
+    ;(focusTarget || dialogElement.value)?.focus()
+  } else {
+    document.body.style.overflow = ''
+    previousFocus?.focus?.()
+  }
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<style scoped>
+.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.58); z-index: 2000; }
+.admin-modal { width: min(100%, 620px); max-height: min(88vh, 860px); display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); background: var(--surface-solid); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
+.admin-modal--small { max-width: 430px; }
+.admin-modal--large { max-width: 920px; }
+.modal-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
+.modal-header h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
+.modal-header p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
+.modal-close { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; cursor: pointer; }
+.modal-close:hover { border-color: var(--border-color); color: var(--text-color); background: var(--surface-muted); }
+.modal-body { min-height: 0; padding: 20px; overflow-y: auto; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-color); background: var(--surface-muted); }
+.modal-fade-enter-active,
+.modal-fade-leave-active { transition: opacity 0.18s ease; }
+.modal-fade-enter-active .admin-modal,
+.modal-fade-leave-active .admin-modal { transition: transform 0.18s ease; }
+.modal-fade-enter-from,
+.modal-fade-leave-to { opacity: 0; }
+.modal-fade-enter-from .admin-modal,
+.modal-fade-leave-to .admin-modal { transform: translateY(10px); }
+@media (max-width: 640px) {
+  .modal-backdrop { place-items: end center; padding: 0; }
+  .admin-modal { width: 100%; max-height: 92vh; border-radius: 8px 8px 0 0; }
+}
+</style>
diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js
new file mode 100644
index 0000000..607c2f4
--- /dev/null
+++ b/src/composables/useTheme.js
@@ -0,0 +1,36 @@
+import { computed, ref } from 'vue'
+
+const isDarkMode = ref(false)
+let initialized = false
+
+const applyTheme = (dark) => {
+  isDarkMode.value = Boolean(dark)
+  document.documentElement.classList.toggle('dark-mode', isDarkMode.value)
+  document.body.classList.toggle('dark-mode', isDarkMode.value)
+  document.documentElement.style.colorScheme = isDarkMode.value ? 'dark' : 'light'
+}
+
+export const initializeTheme = () => {
+  if (initialized || typeof window === 'undefined') return
+
+  const savedTheme = localStorage.getItem('darkMode')
+  const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+  applyTheme(savedTheme === null ? prefersDark : savedTheme === 'true')
+  initialized = true
+}
+
+export const useTheme = () => {
+  initializeTheme()
+
+  const toggleTheme = () => {
+    applyTheme(!isDarkMode.value)
+    localStorage.setItem('darkMode', String(isDarkMode.value))
+  }
+
+  return {
+    isDarkMode,
+    themeIcon: computed(() => (isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon')),
+    themeLabel: computed(() => (isDarkMode.value ? '切换到浅色模式' : '切换到深色模式')),
+    toggleTheme,
+  }
+}
diff --git a/src/main.js b/src/main.js
index 37563ae..c6d85bc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,16 +1,17 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import './style.less';
-import { MotionPlugin } from '@vueuse/motion';
-import router from './router';
-import { loadAndApplyFrontendConfig } from './utils/frontendConfig';
-
-// 加载前端配置
-loadAndApplyFrontendConfig();
-
-const app = createApp(App);
-
-app.use(MotionPlugin);
-app.use(router);
-
-app.mount('#app');
\ No newline at end of file
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.less';
+import { MotionPlugin } from '@vueuse/motion';
+import router from './router';
+import { loadAndApplyFrontendConfig } from './utils/frontendConfig';
+import { initializeTheme } from './composables/useTheme';
+
+initializeTheme();
+loadAndApplyFrontendConfig();
+
+const app = createApp(App);
+
+app.use(MotionPlugin);
+app.use(router);
+
+app.mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
index 2ef95a4..4e678e9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,34 +1,46 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../components/Home.vue'
-import Admin from '../components/Admin.vue'
-import Login from '../components/Login.vue'
-
-const routes = [
-  {
-    path: '/',
-    component: Home,
-  },
-  {
-    path: '/admin',
-    component: Admin,
-    beforeEnter: (to, from, next) => {
-      const token = localStorage.getItem('token')
-      if (!token) {
-        next('/login')
-      } else {
-        next()
-      }
-    },
-  },
-  {
-    path: '/login',
-    component: Login,
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
-
-export default router
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../components/Home.vue'
+import Admin from '../components/Admin.vue'
+import Login from '../components/Login.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home,
+  },
+  {
+    path: '/admin',
+    name: 'admin',
+    component: Admin,
+    beforeEnter: (to, from, next) => {
+      const token = localStorage.getItem('token')
+      if (!token) {
+        next('/login')
+      } else {
+        next()
+      }
+    },
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login,
+    beforeEnter: (to) => {
+      if (localStorage.getItem('token')) {
+        const redirect = typeof to.query.redirect === 'string' && to.query.redirect.startsWith('/')
+          ? to.query.redirect
+          : '/admin'
+        return redirect
+      }
+      return true
+    },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
diff --git a/src/style.less b/src/style.less
index bdaf968..ec77c82 100644
--- a/src/style.less
+++ b/src/style.less
@@ -1,155 +1,167 @@
-:root {
-  --border-radius: 10px;
-  --text-size: 16px;
-  --icon-size: 20px;
-  --text-color: #333;
-  --background-color: #eee;
-  --background-color-rgb: 238, 238, 238;
-  --shadow-color: rgba(0, 0, 0, 0.2);
-  --border-color: rgb(193 193 193 / 50%);
-  --hover-link-color: #ffcc00;
-  --hover-other-color:  #555;
-  --background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgMTkyIDE5Mic+PHBhdGggZmlsbD0nI2QzZDNkMycgZmlsbC1vcGFjaXR5PScwLjUnIGQ9J00xOTIgMTV2MmExMSAxMSAwIDAgMC0xMSAxMWMwIDEuOTQgMS4xNiA0Ljc1IDIuNTMgNi4xMWwyLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxIDEuMjIgNy41NmwtLjQzLjg0YTguMDggOC4wOCAwIDAgMS02LjY2IDQuMTNIMTQ1djM1LjAyYTYuMSA2LjEgMCAwIDAgMy4wMyA0Ljg3bC44NC40M2MxLjU4Ljc5IDQgLjQgNS4yNC0uODVsMi4zNi0yLjM2YTEyLjA0IDEyLjA0IDAgMCAxIDcuNTEtMy4xMSAxMyAxMyAwIDEgMSAuMDIgMjYgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNhNi4xIDYuMSAwIDAgMC0zLjAzIDQuODdWMTQzaDM1LjAyYTguMDggOC4wOCAwIDAgMSA2LjY2IDQuMTNsLjQzLjg0YTYuOTEgNi45MSAwIDAgMS0xLjIyIDcuNTZsLTIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxODEgMTY0YTExIDExIDAgMCAwIDExIDExdjJhMTMgMTMgMCAwIDEtMTMtMTMgMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRhNi4xIDYuMSAwIDAgMC00Ljg3LTMuMDNIMTQ1djM1LjAyYTguMDggOC4wOCAwIDAgMS00LjEzIDYuNjZsLS44NC40M2E2LjkxIDYuOTEgMCAwIDEtNy41Ni0xLjIybC0yLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTI0IDE4MWExMSAxMSAwIDAgMC0xMSAxMWgtMmExMyAxMyAwIDAgMSAxMy0xM2MyLjQ3IDAgNS43OSAxLjM3IDcuNTMgMy4xMWwyLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwIDUuMjQuODVsLjg0LS40M2E2LjEgNi4xIDAgMCAwIDMuMDMtNC44N1YxNDVoLTM1LjAyYTguMDggOC4wOCAwIDAgMS02LjY2LTQuMTNsLS40My0uODRhNi45MSA2LjkxIDAgMCAxIDEuMjItNy41NmwyLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTA3IDEyNGExMSAxMSAwIDAgMC0yMiAwYzAgMS45NCAxLjE2IDQuNzUgMi41MyA2LjExbDIuMzYgMi4zNmE2LjkzIDYuOTMgMCAwIDEgMS4yMiA3LjU2bC0uNDMuODRhOC4wOCA4LjA4IDAgMCAxLTYuNjYgNC4xM0g0OXYzNS4wMmE2LjEgNi4xIDAgMCAwIDMuMDMgNC44N2wuODQuNDNjMS41OC43OSA0IC40IDUuMjQtLjg1bDIuMzYtMi4zNmExMi4wNCAxMi4wNCAwIDAgMSA3LjUxLTMuMTFBMTMgMTMgMCAwIDEgODEgMTkyaC0yYTExIDExIDAgMCAwLTExLTExYy0xLjk0IDAtNC43NSAxLjE2LTYuMTEgMi41M2wtMi4zNiAyLjM2YTYuOTMgNi45MyAwIDAgMS03LjU2IDEuMjJsLS44NC0uNDNhOC4wOCA4LjA4IDAgMCAxLTQuMTMtNi42NlYxNDVIMTEuOThhNi4xIDYuMSAwIDAgMC00Ljg3IDMuMDNsLS40My44NGMtLjc5IDEuNTgtLjQgNCAuODUgNS4yNGwyLjM2IDIuMzZhMTIuMDQgMTIuMDQgMCAwIDEgMy4xMSA3LjUxQTEzIDEzIDAgMCAxIDAgMTc3di0yYTExIDExIDAgMCAwIDExLTExYzAtMS45NC0xLjE2LTQuNzUtMi41My02LjExbC0yLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxLTEuMjItNy41NmwuNDMtLjg0YTguMDggOC4wOCAwIDAgMSA2LjY2LTQuMTNINDd2LTM1LjAyYTYuMSA2LjEgMCAwIDAtMy4wMy00Ljg3bC0uODQtLjQzYy0xLjU5LS44LTQtLjQtNS4yNC44NWwtMi4zNiAyLjM2QTEyIDEyIDAgMCAxIDI4IDEwOWExMyAxMyAwIDEgMSAwLTI2YzIuNDcgMCA1Ljc5IDEuMzcgNy41MyAzLjExbDIuMzYgMi4zNmE0Ljk0IDQuOTQgMCAwIDAgNS4yNC44NWwuODQtLjQzQTYuMSA2LjEgMCAwIDAgNDcgODQuMDJWNDlIMTEuOThhOC4wOCA4LjA4IDAgMCAxLTYuNjYtNC4xM2wtLjQzLS44NGE2LjkxIDYuOTEgMCAwIDEgMS4yMi03LjU2bDIuMzYtMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxMSAyOCAxMSAxMSAwIDAgMCAwIDE3di0yYTEzIDEzIDAgMCAxIDEzIDEzYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NEE2LjEgNi4xIDAgMCAwIDExLjk4IDQ3SDQ3VjExLjk4YTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCA2OCAxMSAxMSAxMSAwIDAgMCA3OSAwaDJhMTMgMTMgMCAwIDEtMTMgMTMgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNBNi4xIDYuMSAwIDAgMCA0OSAxMS45OFY0N2gzNS4wMmE4LjA4IDguMDggMCAwIDEgNi42NiA0LjEzbC40My44NGE2LjkxIDYuOTEgMCAwIDEtMS4yMiA3LjU2bC0yLjM2IDIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgODUgNjhhMTEgMTEgMCAwIDAgMjIgMGMwLTEuOTQtMS4xNi00Ljc1LTIuNTMtNi4xMWwtMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMS0xLjIyLTcuNTZsLjQzLS44NGE4LjA4IDguMDggMCAwIDEgNi42Ni00LjEzSDE0M1YxMS45OGE2LjEgNi4xIDAgMCAwLTMuMDMtNC44N2wtLjg0LS40M2MtMS41OS0uOC00LS40LTUuMjQuODVsLTIuMzYgMi4zNkExMiAxMiAwIDAgMSAxMjQgMTNhMTMgMTMgMCAwIDEtMTMtMTNoMmExMSAxMSAwIDAgMCAxMSAxMWMxLjk0IDAgNC43NS0xLjE2IDYuMTEtMi41M2wyLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxIDcuNTYtMS4yMmwuODQuNDNhOC4wOCA4LjA4IDAgMCAxIDQuMTMgNi42NlY0N2gzNS4wMmE2LjEgNi4xIDAgMCAwIDQuODctMy4wM2wuNDMtLjg0Yy44LTEuNTkuNC00LS44NS01LjI0bC0yLjM2LTIuMzZBMTIgMTIgMCAwIDEgMTc5IDI4YTEzIDEzIDAgMCAxIDEzLTEzek04NC4wMiAxNDNhNi4xIDYuMSAwIDAgMCA0Ljg3LTMuMDNsLjQzLS44NGMuOC0xLjU5LjQtNC0uODUtNS4yNGwtMi4zNi0yLjM2QTEyIDEyIDAgMCAxIDgzIDEyNGExMyAxMyAwIDEgMSAyNiAwYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NGE2LjEgNi4xIDAgMCAwIDQuODcgMy4wM0gxNDN2LTM1LjAyYTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxNjQgMTA3YTExIDExIDAgMCAwIDAtMjJjLTEuOTQgMC00Ljc1IDEuMTYtNi4xMSAyLjUzbC0yLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxLTcuNTYgMS4yMmwtLjg0LS40M2E4LjA4IDguMDggMCAwIDEtNC4xMy02LjY2VjQ5aC0zNS4wMmE2LjEgNi4xIDAgMCAwLTQuODcgMy4wM2wtLjQzLjg0Yy0uNzkgMS41OC0uNCA0IC44NSA1LjI0bDIuMzYgMi4zNmExMi4wNCAxMi4wNCAwIDAgMSAzLjExIDcuNTFBMTMgMTMgMCAxIDEgODMgNjhhMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRBNi4xIDYuMSAwIDAgMCA4NC4wMiA0OUg0OXYzNS4wMmE4LjA4IDguMDggMCAwIDEtNC4xMyA2LjY2bC0uODQuNDNhNi45MSA2LjkxIDAgMCAxLTcuNTYtMS4yMmwtMi4zNi0yLjM2QTEwLjA2IDEwLjA2IDAgMCAwIDI4IDg1YTExIDExIDAgMCAwIDAgMjJjMS45NCAwIDQuNzUtMS4xNiA2LjExLTIuNTNsMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMSA3LjU2LTEuMjJsLjg0LjQzYTguMDggOC4wOCAwIDAgMSA0LjEzIDYuNjZWMTQzaDM1LjAyeic+PC9wYXRoPjwvc3ZnPg==);
-}
-
-.dark-mode {
-  --text-color: #eee;
-  --background-color: #333;
-  --background-color-rgb: 51, 51, 51;
-  --shadow-color: rgba(255, 255, 255, 0.2);
-  --border-color: rgb(131 131 131 / 50%);
-  --background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgMTkyIDE5Mic+PHBhdGggZmlsbD0nIzVhNWE1YScgZmlsbC1vcGFjaXR5PScwLjUnIGQ9J00xOTIgMTV2MmExMSAxMSAwIDAgMC0xMSAxMWMwIDEuOTQgMS4xNiA0Ljc1IDIuNTMgNi4xMWwyLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxIDEuMjIgNy41NmwtLjQzLjg0YTguMDggOC4wOCAwIDAgMS02LjY2IDQuMTNIMTQ1djM1LjAyYTYuMSA2LjEgMCAwIDAgMy4wMyA0Ljg3bC44NC40M2MxLjU4Ljc5IDQgLjQgNS4yNC0uODVsMi4zNi0yLjM2YTEyLjA0IDEyLjA0IDAgMCAxIDcuNTEtMy4xMSAxMyAxMyAwIDEgMSAuMDIgMjYgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNhNi4xIDYuMSAwIDAgMC0zLjAzIDQuODdWMTQzaDM1LjAyYTguMDggOC4wOCAwIDAgMSA2LjY2IDQuMTNsLjQzLjg0YTYuOTEgNi45MSAwIDAgMS0xLjIyIDcuNTZsLTIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxODEgMTY0YTExIDExIDAgMCAwIDExIDExdjJhMTMgMTMgMCAwIDEtMTMtMTMgMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRhNi4xIDYuMSAwIDAgMC00Ljg3LTMuMDNIMTQ1djM1LjAyYTguMDggOC4wOCAwIDAgMS00LjEzIDYuNjZsLS44NC40M2E2LjkxIDYuOTEgMCAwIDEtNy41Ni0xLjIybC0yLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTI0IDE4MWExMSAxMSAwIDAgMC0xMSAxMWgtMmExMyAxMyAwIDAgMSAxMy0xM2MyLjQ3IDAgNS43OSAxLjM3IDcuNTMgMy4xMWwyLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwIDUuMjQuODVsLjg0LS40M2E2LjEgNi4xIDAgMCAwIDMuMDMtNC44N1YxNDVoLTM1LjAyYTguMDggOC4wOCAwIDAgMS02LjY2LTQuMTNsLS40My0uODRhNi45MSA2LjkxIDAgMCAxIDEuMjItNy41NmwyLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTA3IDEyNGExMSAxMSAwIDAgMC0yMiAwYzAgMS45NCAxLjE2IDQuNzUgMi41MyA2LjExbDIuMzYgMi4zNmE2LjkzIDYuOTMgMCAwIDEgMS4yMiA3LjU2bC0uNDMuODRhOC4wOCA4LjA4IDAgMCAxLTYuNjYgNC4xM0g0OXYzNS4wMmE2LjEgNi4xIDAgMCAwIDMuMDMgNC44N2wuODQuNDNjMS41OC43OSA0IC40IDUuMjQtLjg1bDIuMzYtMi4zNmExMi4wNCAxMi4wNCAwIDAgMSA3LjUxLTMuMTFBMTMgMTMgMCAwIDEgODEgMTkyaC0yYTExIDExIDAgMCAwLTExLTExYy0xLjk0IDAtNC43NSAxLjE2LTYuMTEgMi41M2wtMi4zNiAyLjM2YTYuOTMgNi45MyAwIDAgMS03LjU2IDEuMjJsLS44NC0uNDNhOC4wOCA4LjA4IDAgMCAxLTQuMTMtNi42NlYxNDVIMTEuOThhNi4xIDYuMSAwIDAgMC00Ljg3IDMuMDNsLS40My44NGMtLjc5IDEuNTgtLjQgNCAuODUgNS4yNGwyLjM2IDIuMzZhMTIuMDQgMTIuMDQgMCAwIDEgMy4xMSA3LjUxQTEzIDEzIDAgMCAxIDAgMTc3di0yYTExIDExIDAgMCAwIDExLTExYzAtMS45NC0xLjE2LTQuNzUtMi41My02LjExbC0yLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxLTEuMjItNy41NmwuNDMtLjg0YTguMDggOC4wOCAwIDAgMSA2LjY2LTQuMTNINDd2LTM1LjAyYTYuMSA2LjEgMCAwIDAtMy4wMy00Ljg3bC0uODQtLjQzYy0xLjU5LS44LTQtLjQtNS4yNC44NWwtMi4zNiAyLjM2QTEyIDEyIDAgMCAxIDI4IDEwOWExMyAxMyAwIDEgMSAwLTI2YzIuNDcgMCA1Ljc5IDEuMzcgNy41MyAzLjExbDIuMzYgMi4zNmE0Ljk0IDQuOTQgMCAwIDAgNS4yNC44NWwuODQtLjQzQTYuMSA2LjEgMCAwIDAgNDcgODQuMDJWNDlIMTEuOThhOC4wOCA4LjA4IDAgMCAxLTYuNjYtNC4xM2wtLjQzLS44NGE2LjkxIDYuOTEgMCAwIDEgMS4yMi03LjU2bDIuMzYtMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxMSAyOCAxMSAxMSAwIDAgMCAwIDE3di0yYTEzIDEzIDAgMCAxIDEzIDEzYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NEE2LjEgNi4xIDAgMCAwIDExLjk4IDQ3SDQ3VjExLjk4YTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCA2OCAxMSAxMSAxMSAwIDAgMCA3OSAwaDJhMTMgMTMgMCAwIDEtMTMgMTMgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNBNi4xIDYuMSAwIDAgMCA0OSAxMS45OFY0N2gzNS4wMmE4LjA4IDguMDggMCAwIDEgNi42NiA0LjEzbC40My44NGE2LjkxIDYuOTEgMCAwIDEtMS4yMiA3LjU2bC0yLjM2IDIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgODUgNjhhMTEgMTEgMCAwIDAgMjIgMGMwLTEuOTQtMS4xNi00Ljc1LTIuNTMtNi4xMWwtMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMS0xLjIyLTcuNTZsLjQzLS44NGE4LjA4IDguMDggMCAwIDEgNi42Ni00LjEzSDE0M1YxMS45OGE2LjEgNi4xIDAgMCAwLTMuMDMtNC44N2wtLjg0LS40M2MtMS41OS0uOC00LS40LTUuMjQuODVsLTIuMzYgMi4zNkExMiAxMiAwIDAgMSAxMjQgMTNhMTMgMTMgMCAwIDEtMTMtMTNoMmExMSAxMSAwIDAgMCAxMSAxMWMxLjk0IDAgNC43NS0xLjE2IDYuMTEtMi41M2wyLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxIDcuNTYtMS4yMmwuODQuNDNhOC4wOCA4LjA4IDAgMCAxIDQuMTMgNi42NlY0N2gzNS4wMmE2LjEgNi4xIDAgMCAwIDQuODctMy4wM2wuNDMtLjg0Yy44LTEuNTkuNC00LS44NS01LjI0bC0yLjM2LTIuMzZBMTIgMTIgMCAwIDEgMTc5IDI4YTEzIDEzIDAgMCAxIDEzLTEzek04NC4wMiAxNDNhNi4xIDYuMSAwIDAgMCA0Ljg3LTMuMDNsLjQzLS44NGMuOC0xLjU5LjQtNC0uODUtNS4yNGwtMi4zNi0yLjM2QTEyIDEyIDAgMCAxIDgzIDEyNGExMyAxMyAwIDEgMSAyNiAwYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NGE2LjEgNi4xIDAgMCAwIDQuODcgMy4wM0gxNDN2LTM1LjAyYTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxNjQgMTA3YTExIDExIDAgMCAwIDAtMjJjLTEuOTQgMC00Ljc1IDEuMTYtNi4xMSAyLjUzbC0yLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxLTcuNTYgMS4yMmwtLjg0LS40M2E4LjA4IDguMDggMCAwIDEtNC4xMy02LjY2VjQ5aC0zNS4wMmE2LjEgNi4xIDAgMCAwLTQuODcgMy4wM2wtLjQzLjg0Yy0uNzkgMS41OC0uNCA0IC44NSA1LjI0bDIuMzYgMi4zNmExMi4wNCAxMi4wNCAwIDAgMSAzLjExIDcuNTFBMTMgMTMgMCAxIDEgODMgNjhhMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRBNi4xIDYuMSAwIDAgMCA4NC4wMiA0OUg0OXYzNS4wMmE4LjA4IDguMDggMCAwIDEtNC4xMyA2LjY2bC0uODQuNDNhNi45MSA2LjkxIDAgMCAxLTcuNTYtMS4yMmwtMi4zNi0yLjM2QTEwLjA2IDEwLjA2IDAgMCAwIDI4IDg1YTExIDExIDAgMCAwIDAgMjJjMS45NCAwIDQuNzUtMS4xNiA2LjExLTIuNTNsMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMSA3LjU2LTEuMjJsLjg0LjQzYTguMDggOC4wOCAwIDAgMSA0LjEzIDYuNjZWMTQzaDM1LjAyeic+PC9wYXRoPjwvc3ZnPg==);
-}
-
-* {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-}
-
-/* 顶部呼吸弹窗通知动画 - 全局样式 */
-@keyframes slideDownAndBreathe {
-  0% {
-    transform: translate(-50%, -100%);
-    opacity: 0;
-  }
-  50% {
-    transform: translate(-50%, 0);
-    opacity: 1;
-  }
-  60% {
-    transform: translate(-50%, 0) scale(1.03);
-  }
-  70% {
-    transform: translate(-50%, 0) scale(1);
-  }
-  80% {
-    transform: translate(-50%, 0) scale(1.02);
-  }
-  100% {
-    transform: translate(-50%, 0) scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes slideUpAndFade {
-  from {
-    transform: translate(-50%, 0) scale(1);
-    opacity: 1;
-  }
-  to {
-    transform: translate(-50%, -100%) scale(0.9);
-    opacity: 0;
-  }
-}
-
-/* 确保通知在全局样式下正确显示 */
-.top-notification {
-  position: fixed !important;
-  top: 0 !important;
-  left: 50% !important;
-  z-index: 10000 !important;
-}
-
-a {
-    text-decoration: none;
-}
-
-ul {
-  padding: 0;
-  list-style: none;
-  margin: 0;
-}
-
-body, html {
-  height: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  font-family: 'HarmonyOS_Regular', 'MiSans', 'HarmonyOS Sans SC', sans-serif;
-  color: var(--text-color);
-  overflow: hidden;
-}
-
-body.dark-mode {
-  filter: brightness(0.7);
-}
-
-/* App 页面 */
-#app {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px;
-}
-
-.background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: -2;
-  background: var(--background-color) var(--background-image) repeat;
-}
-
-
-footer {
-  padding: 10px 0;
-  display: flex;
-  justify-content: center;
-  margin: 0;
-  font-size: var(--text-size);
-  gap: 8px;
-
-  a {
-    color: var(--text-color);
-    transition: all 0.3s ease-in-out;
-    &:hover {
-      color: var(--hover-link-color);
-    }
-  }
-}
-
-.police_link {
-  display: flex;
-  align-items: center;
-
-  .police_img {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAACglBMVEUAAAD89dn+/ODz6KrcrGreqFfYrn3x16769M3oxnyaaVzhs2ifaFXbrGLkvFnpyF7v2X/kwm3cp1nhsGfqw3rntVzjrFPt3oDjvGnbnFGti3q0lH7ktoLryXn9v1T4znr/74bnvGz034v+2I/ktoDz6ZLkwY/Dfz7buoftzYbq2IPr0pjs3bLv6KPRrnbKhFv/+dDZr4Lx38f/+cH/95f42oL7/97s2Y3++uzTk3AAAXgCAWbmulrdmUXWHRcBAm7uzWbpwmLsxl3ktV3qvFr/0ljmwFHksE7fo0raSijXPSDWAgjPAAJrdoeUj4EAAICRiXb143Pyy27w1Gz+z2XtymH/217qyVy7jluTeFrrwFfislP+xVJRNlHpuFDpsErVkEbysETajkPpgj7ThT3ilDvXdTg5FDjdhTXtcTDWZTC7TCbuXiPTOCLJPR/TLhzJJxP9LA+0Bw/QFg2Ej5kcPpdyhZSptJEACJFpfo4AG44XMInFvYfTvIejmYRyeoJzdoK9un7FrnwAEHp8enny2HjWwHjKtnhcX3jYzHfu2HWsonPNwnH70m9WTm8AAW//723pym3dtmm0o2ZeWWb/4mPtwmJuYmL/vmB5ZGAMAF2njVn4xFjYnli0mVjiqVfyyVbmtlbXkVPlvFLNrFKjfVLuvlBgHlDsuU9ODk7/2E02Gk3jqkqEaUr/tUngjkf7n0b6xERCJETdn0K1gD/ooD3Ulj3TZT3WjjzOeDqBWDr3pDlMADnbbTf2gjbkbzaTYDZpAjbplzTEazPXXzOeXzDMPi38jizJWSrVSCrzfCjVdCjTQCbFUiTlYCPiRh7SIRrRDBG/ABHBDAvEGArJAAJrcyAdAAAAOnRSTlMAGghC4MasaVv7+/n39fTw7Ozr5+bk5OHg0tHLx8TDwb68urKxq5+cmJWTjIN8b11MSEFBNTApJyEUZZQtrgAAAW1JREFUGNNigAJGdmkpdkYGZGDMxnN019qlXGwGCDGmiPQDh89lTupOj2CCa5WPjTzlnevps6E8Vhkqasa9esrxC3b5nsWXZ/huEjEHC5oE+M/O8c63u5h7NafRPsAUrFnOz2rLeW87Ly87H6/O/hYFC6Cg3u46/3n7fE5sc1tfnNlj7+eqABTUONRUMX1jdl5W2t6kqTOtahLVgIIsGUGl9tnJJ/OOnNm/3bq6NZUFKAgY7851ZVZFhVln05ILL1lXxqRIAAVVNofUVu0pulJQ4HnsYHN7b7QmUFAmaX5IiZW19crls6yt6sOc18gCBTnnLkoNaov0nbyko69h2lZbdwGgIMdij4TTc8JWxSS6TnDNSMgOZ2YAifK7pexwcHG3cQi2tZ0oCBZjMBIOd1oY5eQY6uJhE+woBBFUCuxydnZxd4yz9bCxcQhUhYSmFl/cgmXxK+KjnNxCxXVhAWqpr84qKSbKqqhtCOYDALPYc2hoS0J5AAAAAElFTkSuQmCC");
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .police_link {
-    display: none;
-  }
-}
\ No newline at end of file
+:root {
+  --border-radius: 10px;
+  --text-size: 16px;
+  --icon-size: 20px;
+  --text-color: #333;
+  --background-color: #eee;
+  --background-color-rgb: 238, 238, 238;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --border-color: rgb(193 193 193 / 50%);
+  --hover-link-color: #ffcc00;
+  --hover-link-color-rgb: 255, 204, 0;
+  --hover-other-color:  #555;
+  --surface-color: rgba(238, 238, 238, 0.86);
+  --surface-solid: #f6f6f4;
+  --surface-muted: rgba(255, 255, 255, 0.38);
+  --text-muted: #6d6d68;
+  --success-color: #238636;
+  --danger-color: #c9362b;
+  --warning-color: #a76500;
+  --focus-ring: rgba(255, 204, 0, 0.34);
+  --control-height: 40px;
+  --background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgMTkyIDE5Mic+PHBhdGggZmlsbD0nI2QzZDNkMycgZmlsbC1vcGFjaXR5PScwLjUnIGQ9J00xOTIgMTV2MmExMSAxMSAwIDAgMC0xMSAxMWMwIDEuOTQgMS4xNiA0Ljc1IDIuNTMgNi4xMWwyLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxIDEuMjIgNy41NmwtLjQzLjg0YTguMDggOC4wOCAwIDAgMS02LjY2IDQuMTNIMTQ1djM1LjAyYTYuMSA2LjEgMCAwIDAgMy4wMyA0Ljg3bC44NC40M2MxLjU4Ljc5IDQgLjQgNS4yNC0uODVsMi4zNi0yLjM2YTEyLjA0IDEyLjA0IDAgMCAxIDcuNTEtMy4xMSAxMyAxMyAwIDEgMSAuMDIgMjYgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNhNi4xIDYuMSAwIDAgMC0zLjAzIDQuODdWMTQzaDM1LjAyYTguMDggOC4wOCAwIDAgMSA2LjY2IDQuMTNsLjQzLjg0YTYuOTEgNi45MSAwIDAgMS0xLjIyIDcuNTZsLTIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxODEgMTY0YTExIDExIDAgMCAwIDExIDExdjJhMTMgMTMgMCAwIDEtMTMtMTMgMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRhNi4xIDYuMSAwIDAgMC00Ljg3LTMuMDNIMTQ1djM1LjAyYTguMDggOC4wOCAwIDAgMS00LjEzIDYuNjZsLS44NC40M2E2LjkxIDYuOTEgMCAwIDEtNy41Ni0xLjIybC0yLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTI0IDE4MWExMSAxMSAwIDAgMC0xMSAxMWgtMmExMyAxMyAwIDAgMSAxMy0xM2MyLjQ3IDAgNS43OSAxLjM3IDcuNTMgMy4xMWwyLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwIDUuMjQuODVsLjg0LS40M2E2LjEgNi4xIDAgMCAwIDMuMDMtNC44N1YxNDVoLTM1LjAyYTguMDggOC4wOCAwIDAgMS02LjY2LTQuMTNsLS40My0uODRhNi45MSA2LjkxIDAgMCAxIDEuMjItNy41NmwyLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTA3IDEyNGExMSAxMSAwIDAgMC0yMiAwYzAgMS45NCAxLjE2IDQuNzUgMi41MyA2LjExbDIuMzYgMi4zNmE2LjkzIDYuOTMgMCAwIDEgMS4yMiA3LjU2bC0uNDMuODRhOC4wOCA4LjA4IDAgMCAxLTYuNjYgNC4xM0g0OXYzNS4wMmE2LjEgNi4xIDAgMCAwIDMuMDMgNC44N2wuODQuNDNjMS41OC43OSA0IC40IDUuMjQtLjg1bDIuMzYtMi4zNmExMi4wNCAxMi4wNCAwIDAgMSA3LjUxLTMuMTFBMTMgMTMgMCAwIDEgODEgMTkyaC0yYTExIDExIDAgMCAwLTExLTExYy0xLjk0IDAtNC43NSAxLjE2LTYuMTEgMi41M2wtMi4zNiAyLjM2YTYuOTMgNi45MyAwIDAgMS03LjU2IDEuMjJsLS44NC0uNDNhOC4wOCA4LjA4IDAgMCAxLTQuMTMtNi42NlYxNDVIMTEuOThhNi4xIDYuMSAwIDAgMC00Ljg3IDMuMDNsLS40My44NGMtLjc5IDEuNTgtLjQgNCAuODUgNS4yNGwyLjM2IDIuMzZhMTIuMDQgMTIuMDQgMCAwIDEgMy4xMSA3LjUxQTEzIDEzIDAgMCAxIDAgMTc3di0yYTExIDExIDAgMCAwIDExLTExYzAtMS45NC0xLjE2LTQuNzUtMi41My02LjExbC0yLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxLTEuMjItNy41NmwuNDMtLjg0YTguMDggOC4wOCAwIDAgMSA2LjY2LTQuMTNINDd2LTM1LjAyYTYuMSA2LjEgMCAwIDAtMy4wMy00Ljg3bC0uODQtLjQzYy0xLjU5LS44LTQtLjQtNS4yNC44NWwtMi4zNiAyLjM2QTEyIDEyIDAgMCAxIDI4IDEwOWExMyAxMyAwIDEgMSAwLTI2YzIuNDcgMCA1Ljc5IDEuMzcgNy41MyAzLjExbDIuMzYgMi4zNmE0Ljk0IDQuOTQgMCAwIDAgNS4yNC44NWwuODQtLjQzQTYuMSA2LjEgMCAwIDAgNDcgODQuMDJWNDlIMTEuOThhOC4wOCA4LjA4IDAgMCAxLTYuNjYtNC4xM2wtLjQzLS44NGE2LjkxIDYuOTEgMCAwIDEgMS4yMi03LjU2bDIuMzYtMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxMSAyOCAxMSAxMSAwIDAgMCAwIDE3di0yYTEzIDEzIDAgMCAxIDEzIDEzYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NEE2LjEgNi4xIDAgMCAwIDExLjk4IDQ3SDQ3VjExLjk4YTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCA2OCAxMSAxMSAxMSAwIDAgMCA3OSAwaDJhMTMgMTMgMCAwIDEtMTMgMTMgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNBNi4xIDYuMSAwIDAgMCA0OSAxMS45OFY0N2gzNS4wMmE4LjA4IDguMDggMCAwIDEgNi42NiA0LjEzbC40My44NGE2LjkxIDYuOTEgMCAwIDEtMS4yMiA3LjU2bC0yLjM2IDIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgODUgNjhhMTEgMTEgMCAwIDAgMjIgMGMwLTEuOTQtMS4xNi00Ljc1LTIuNTMtNi4xMWwtMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMS0xLjIyLTcuNTZsLjQzLS44NGE4LjA4IDguMDggMCAwIDEgNi42Ni00LjEzSDE0M1YxMS45OGE2LjEgNi4xIDAgMCAwLTMuMDMtNC44N2wtLjg0LS40M2MtMS41OS0uOC00LS40LTUuMjQuODVsLTIuMzYgMi4zNkExMiAxMiAwIDAgMSAxMjQgMTNhMTMgMTMgMCAwIDEtMTMtMTNoMmExMSAxMSAwIDAgMCAxMSAxMWMxLjk0IDAgNC43NS0xLjE2IDYuMTEtMi41M2wyLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxIDcuNTYtMS4yMmwuODQuNDNhOC4wOCA4LjA4IDAgMCAxIDQuMTMgNi42NlY0N2gzNS4wMmE2LjEgNi4xIDAgMCAwIDQuODctMy4wM2wuNDMtLjg0Yy44LTEuNTkuNC00LS44NS01LjI0bC0yLjM2LTIuMzZBMTIgMTIgMCAwIDEgMTc5IDI4YTEzIDEzIDAgMCAxIDEzLTEzek04NC4wMiAxNDNhNi4xIDYuMSAwIDAgMCA0Ljg3LTMuMDNsLjQzLS44NGMuOC0xLjU5LjQtNC0uODUtNS4yNGwtMi4zNi0yLjM2QTEyIDEyIDAgMCAxIDgzIDEyNGExMyAxMyAwIDEgMSAyNiAwYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NGE2LjEgNi4xIDAgMCAwIDQuODcgMy4wM0gxNDN2LTM1LjAyYTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxNjQgMTA3YTExIDExIDAgMCAwIDAtMjJjLTEuOTQgMC00Ljc1IDEuMTYtNi4xMSAyLjUzbC0yLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxLTcuNTYgMS4yMmwtLjg0LS40M2E4LjA4IDguMDggMCAwIDEtNC4xMy02LjY2VjQ5aC0zNS4wMmE2LjEgNi4xIDAgMCAwLTQuODcgMy4wM2wtLjQzLjg0Yy0uNzkgMS41OC0uNCA0IC44NSA1LjI0bDIuMzYgMi4zNmExMi4wNCAxMi4wNCAwIDAgMSAzLjExIDcuNTFBMTMgMTMgMCAxIDEgODMgNjhhMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRBNi4xIDYuMSAwIDAgMCA4NC4wMiA0OUg0OXYzNS4wMmE4LjA4IDguMDggMCAwIDEtNC4xMyA2LjY2bC0uODQuNDNhNi45MSA2LjkxIDAgMCAxLTcuNTYtMS4yMmwtMi4zNi0yLjM2QTEwLjA2IDEwLjA2IDAgMCAwIDI4IDg1YTExIDExIDAgMCAwIDAgMjJjMS45NCAwIDQuNzUtMS4xNiA2LjExLTIuNTNsMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMSA3LjU2LTEuMjJsLjg0LjQzYTguMDggOC4wOCAwIDAgMSA0LjEzIDYuNjZWMTQzaDM1LjAyeic+PC9wYXRoPjwvc3ZnPg==);
+}
+
+.dark-mode {
+  --text-color: #eee;
+  --background-color: #333;
+  --background-color-rgb: 51, 51, 51;
+  --shadow-color: rgba(255, 255, 255, 0.2);
+  --border-color: rgb(131 131 131 / 50%);
+  --surface-color: rgba(51, 51, 51, 0.9);
+  --surface-solid: #292927;
+  --surface-muted: rgba(255, 255, 255, 0.055);
+  --text-muted: #b3b3ad;
+  --success-color: #58a86b;
+  --danger-color: #ff7168;
+  --warning-color: #e4ac4f;
+  --focus-ring: rgba(255, 204, 0, 0.26);
+  --background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgMTkyIDE5Mic+PHBhdGggZmlsbD0nIzVhNWE1YScgZmlsbC1vcGFjaXR5PScwLjUnIGQ9J00xOTIgMTV2MmExMSAxMSAwIDAgMC0xMSAxMWMwIDEuOTQgMS4xNiA0Ljc1IDIuNTMgNi4xMWwyLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxIDEuMjIgNy41NmwtLjQzLjg0YTguMDggOC4wOCAwIDAgMS02LjY2IDQuMTNIMTQ1djM1LjAyYTYuMSA2LjEgMCAwIDAgMy4wMyA0Ljg3bC44NC40M2MxLjU4Ljc5IDQgLjQgNS4yNC0uODVsMi4zNi0yLjM2YTEyLjA0IDEyLjA0IDAgMCAxIDcuNTEtMy4xMSAxMyAxMyAwIDEgMSAuMDIgMjYgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNhNi4xIDYuMSAwIDAgMC0zLjAzIDQuODdWMTQzaDM1LjAyYTguMDggOC4wOCAwIDAgMSA2LjY2IDQuMTNsLjQzLjg0YTYuOTEgNi45MSAwIDAgMS0xLjIyIDcuNTZsLTIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxODEgMTY0YTExIDExIDAgMCAwIDExIDExdjJhMTMgMTMgMCAwIDEtMTMtMTMgMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRhNi4xIDYuMSAwIDAgMC00Ljg3LTMuMDNIMTQ1djM1LjAyYTguMDggOC4wOCAwIDAgMS00LjEzIDYuNjZsLS44NC40M2E2LjkxIDYuOTEgMCAwIDEtNy41Ni0xLjIybC0yLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTI0IDE4MWExMSAxMSAwIDAgMC0xMSAxMWgtMmExMyAxMyAwIDAgMSAxMy0xM2MyLjQ3IDAgNS43OSAxLjM3IDcuNTMgMy4xMWwyLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwIDUuMjQuODVsLjg0LS40M2E2LjEgNi4xIDAgMCAwIDMuMDMtNC44N1YxNDVoLTM1LjAyYTguMDggOC4wOCAwIDAgMS02LjY2LTQuMTNsLS40My0uODRhNi45MSA2LjkxIDAgMCAxIDEuMjItNy41NmwyLjM2LTIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgMTA3IDEyNGExMSAxMSAwIDAgMC0yMiAwYzAgMS45NCAxLjE2IDQuNzUgMi41MyA2LjExbDIuMzYgMi4zNmE2LjkzIDYuOTMgMCAwIDEgMS4yMiA3LjU2bC0uNDMuODRhOC4wOCA4LjA4IDAgMCAxLTYuNjYgNC4xM0g0OXYzNS4wMmE2LjEgNi4xIDAgMCAwIDMuMDMgNC44N2wuODQuNDNjMS41OC43OSA0IC40IDUuMjQtLjg1bDIuMzYtMi4zNmExMi4wNCAxMi4wNCAwIDAgMSA3LjUxLTMuMTFBMTMgMTMgMCAwIDEgODEgMTkyaC0yYTExIDExIDAgMCAwLTExLTExYy0xLjk0IDAtNC43NSAxLjE2LTYuMTEgMi41M2wtMi4zNiAyLjM2YTYuOTMgNi45MyAwIDAgMS03LjU2IDEuMjJsLS44NC0uNDNhOC4wOCA4LjA4IDAgMCAxLTQuMTMtNi42NlYxNDVIMTEuOThhNi4xIDYuMSAwIDAgMC00Ljg3IDMuMDNsLS40My44NGMtLjc5IDEuNTgtLjQgNCAuODUgNS4yNGwyLjM2IDIuMzZhMTIuMDQgMTIuMDQgMCAwIDEgMy4xMSA3LjUxQTEzIDEzIDAgMCAxIDAgMTc3di0yYTExIDExIDAgMCAwIDExLTExYzAtMS45NC0xLjE2LTQuNzUtMi41My02LjExbC0yLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxLTEuMjItNy41NmwuNDMtLjg0YTguMDggOC4wOCAwIDAgMSA2LjY2LTQuMTNINDd2LTM1LjAyYTYuMSA2LjEgMCAwIDAtMy4wMy00Ljg3bC0uODQtLjQzYy0xLjU5LS44LTQtLjQtNS4yNC44NWwtMi4zNiAyLjM2QTEyIDEyIDAgMCAxIDI4IDEwOWExMyAxMyAwIDEgMSAwLTI2YzIuNDcgMCA1Ljc5IDEuMzcgNy41MyAzLjExbDIuMzYgMi4zNmE0Ljk0IDQuOTQgMCAwIDAgNS4yNC44NWwuODQtLjQzQTYuMSA2LjEgMCAwIDAgNDcgODQuMDJWNDlIMTEuOThhOC4wOCA4LjA4IDAgMCAxLTYuNjYtNC4xM2wtLjQzLS44NGE2LjkxIDYuOTEgMCAwIDEgMS4yMi03LjU2bDIuMzYtMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxMSAyOCAxMSAxMSAwIDAgMCAwIDE3di0yYTEzIDEzIDAgMCAxIDEzIDEzYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NEE2LjEgNi4xIDAgMCAwIDExLjk4IDQ3SDQ3VjExLjk4YTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCA2OCAxMSAxMSAxMSAwIDAgMCA3OSAwaDJhMTMgMTMgMCAwIDEtMTMgMTMgMTIgMTIgMCAwIDEtNy41My0zLjExbC0yLjM2LTIuMzZhNC45MyA0LjkzIDAgMCAwLTUuMjQtLjg1bC0uODQuNDNBNi4xIDYuMSAwIDAgMCA0OSAxMS45OFY0N2gzNS4wMmE4LjA4IDguMDggMCAwIDEgNi42NiA0LjEzbC40My44NGE2LjkxIDYuOTEgMCAwIDEtMS4yMiA3LjU2bC0yLjM2IDIuMzZBMTAuMDYgMTAuMDYgMCAwIDAgODUgNjhhMTEgMTEgMCAwIDAgMjIgMGMwLTEuOTQtMS4xNi00Ljc1LTIuNTMtNi4xMWwtMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMS0xLjIyLTcuNTZsLjQzLS44NGE4LjA4IDguMDggMCAwIDEgNi42Ni00LjEzSDE0M1YxMS45OGE2LjEgNi4xIDAgMCAwLTMuMDMtNC44N2wtLjg0LS40M2MtMS41OS0uOC00LS40LTUuMjQuODVsLTIuMzYgMi4zNkExMiAxMiAwIDAgMSAxMjQgMTNhMTMgMTMgMCAwIDEtMTMtMTNoMmExMSAxMSAwIDAgMCAxMSAxMWMxLjk0IDAgNC43NS0xLjE2IDYuMTEtMi41M2wyLjM2LTIuMzZhNi45MyA2LjkzIDAgMCAxIDcuNTYtMS4yMmwuODQuNDNhOC4wOCA4LjA4IDAgMCAxIDQuMTMgNi42NlY0N2gzNS4wMmE2LjEgNi4xIDAgMCAwIDQuODctMy4wM2wuNDMtLjg0Yy44LTEuNTkuNC00LS44NS01LjI0bC0yLjM2LTIuMzZBMTIgMTIgMCAwIDEgMTc5IDI4YTEzIDEzIDAgMCAxIDEzLTEzek04NC4wMiAxNDNhNi4xIDYuMSAwIDAgMCA0Ljg3LTMuMDNsLjQzLS44NGMuOC0xLjU5LjQtNC0uODUtNS4yNGwtMi4zNi0yLjM2QTEyIDEyIDAgMCAxIDgzIDEyNGExMyAxMyAwIDEgMSAyNiAwYzAgMi40Ny0xLjM3IDUuNzktMy4xMSA3LjUzbC0yLjM2IDIuMzZhNC45NCA0Ljk0IDAgMCAwLS44NSA1LjI0bC40My44NGE2LjEgNi4xIDAgMCAwIDQuODcgMy4wM0gxNDN2LTM1LjAyYTguMDggOC4wOCAwIDAgMSA0LjEzLTYuNjZsLjg0LS40M2E2LjkxIDYuOTEgMCAwIDEgNy41NiAxLjIybDIuMzYgMi4zNkExMC4wNiAxMC4wNiAwIDAgMCAxNjQgMTA3YTExIDExIDAgMCAwIDAtMjJjLTEuOTQgMC00Ljc1IDEuMTYtNi4xMSAyLjUzbC0yLjM2IDIuMzZhNi45MyA2LjkzIDAgMCAxLTcuNTYgMS4yMmwtLjg0LS40M2E4LjA4IDguMDggMCAwIDEtNC4xMy02LjY2VjQ5aC0zNS4wMmE2LjEgNi4xIDAgMCAwLTQuODcgMy4wM2wtLjQzLjg0Yy0uNzkgMS41OC0uNCA0IC44NSA1LjI0bDIuMzYgMi4zNmExMi4wNCAxMi4wNCAwIDAgMSAzLjExIDcuNTFBMTMgMTMgMCAxIDEgODMgNjhhMTIgMTIgMCAwIDEgMy4xMS03LjUzbDIuMzYtMi4zNmE0LjkzIDQuOTMgMCAwIDAgLjg1LTUuMjRsLS40My0uODRBNi4xIDYuMSAwIDAgMCA4NC4wMiA0OUg0OXYzNS4wMmE4LjA4IDguMDggMCAwIDEtNC4xMyA2LjY2bC0uODQuNDNhNi45MSA2LjkxIDAgMCAxLTcuNTYtMS4yMmwtMi4zNi0yLjM2QTEwLjA2IDEwLjA2IDAgMCAwIDI4IDg1YTExIDExIDAgMCAwIDAgMjJjMS45NCAwIDQuNzUtMS4xNiA2LjExLTIuNTNsMi4zNi0yLjM2YTYuOTMgNi45MyAwIDAgMSA3LjU2LTEuMjJsLjg0LjQzYTguMDggOC4wOCAwIDAgMSA0LjEzIDYuNjZWMTQzaDM1LjAyeic+PC9wYXRoPjwvc3ZnPg==);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-width: 320px;
+  font-family: 'HarmonyOS_Regular', 'MiSans', 'HarmonyOS Sans SC', system-ui, sans-serif;
+  color: var(--text-color);
+  background: var(--background-color);
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button {
+  letter-spacing: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.public-shell {
+  position: relative;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  padding: 0 14px;
+  overflow-x: hidden;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: -1;
+  background: var(--background-color) var(--background-image) repeat;
+}
+
+.site-footer {
+  padding: 12px 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-top: auto;
+  font-size: 14px;
+  gap: 6px 12px;
+  color: var(--text-muted);
+  text-align: center;
+
+  a {
+    color: inherit;
+    transition: color 0.2s ease;
+    &:hover {
+      color: var(--hover-link-color);
+    }
+  }
+}
+
+.police-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+@media screen and (max-width: 768px) {
+  .public-shell {
+    padding: 0 10px;
+  }
+
+  .site-footer {
+    font-size: 12px;
+    padding-bottom: 10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}