初始化提交

2026-01-15 10:38:00 +08:00
commit 96ccf6430a
58 changed files with 13856 additions and 0 deletions
--- a/admin/.gitignore
+++ b/admin/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/admin/index.html
+++ b/admin/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>admin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
--- a/admin/package.json
+++ b/admin/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "admin",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.13.1",
+    "pinia": "^3.0.4"
+  }
+}
--- a/admin/public/vite.svg
+++ b/admin/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
--- a/admin/src/counter.ts
+++ b/admin/src/counter.ts
@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -0,0 +1,23 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import App from './App.vue'
+
+// 引入全局样式
+import './styles/variables.css'
+import './styles/global.css'
+import './styles/components.css'
+import './styles/element-plus.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(ElementPlus)
+
+// 注册所有图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.mount('#app')
--- a/admin/src/main.ts
+++ b/admin/src/main.ts
@@ -0,0 +1,24 @@
+import './style.css'
+import typescriptLogo from './typescript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.ts'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <a href="https://vite.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>Vite + TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite and TypeScript logos to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
--- a/admin/src/store/index.js
+++ b/admin/src/store/index.js
@@ -0,0 +1,491 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+import { indexedDB } from '@utils/indexedDB'
+
+export const useLotteryStore = defineStore('lottery', () => {
+  // 状态
+  const fields = ref([])
+  const participants = ref([])
+  const prizes = ref([])
+  const rounds = ref([])
+  const winners = ref([])
+  const isRolling = ref(false)
+  const currentRound = ref(null)
+  const displayMode = ref('scroll')
+  const backgroundImage = ref('')
+  const isInitialized = ref(false)
+
+  // 初始化 - 从IndexedDB加载数据
+  const initialize = async () => {
+    if (isInitialized.value) return
+    
+    try {
+      const data = await indexedDB.getAll()
+      
+      fields.value = data.lottery_fields || []
+      participants.value = data.lottery_participants || []
+      prizes.value = data.lottery_prizes || []
+      rounds.value = data.lottery_rounds || []
+      winners.value = data.lottery_winners || []
+      isRolling.value = data.lottery_isRolling === 'true'
+      currentRound.value = data.lottery_currentRound || null
+      displayMode.value = data.lottery_displayMode || 'scroll'
+      backgroundImage.value = data.lottery_backgroundImage || ''
+      
+      isInitialized.value = true
+    } catch (error) {
+      console.error('Failed to initialize from IndexedDB:', error)
+      // 使用默认值
+      fields.value = [{key: 'name', label: '姓名', required: true}]
+      isInitialized.value = true
+    }
+  }
+
+  // 保存单个数据到IndexedDB
+  const saveData = async (key, value) => {
+    try {
+      console.log(`Saving ${key} to IndexedDB...`)
+      // 深拷贝数据以避免Vue响应式包装器
+      const clonedValue = JSON.parse(JSON.stringify(value))
+      await indexedDB.set(key, clonedValue)
+      
+      // 触发localStorage事件通知其他标签页
+      localStorage.setItem('lottery_data_changed', Date.now().toString())
+      
+      console.log(`Successfully saved ${key}`)
+    } catch (error) {
+      console.error(`Failed to save ${key} to IndexedDB:`, error)
+      throw error
+    }
+  }
+
+  // ============ 字段管理 ============
+  const addField = async (field) => {
+    const newField = {
+      id: Date.now(),
+      key: field.key,
+      label: field.label,
+      required: field.required || false
+    }
+    fields.value.push(newField)
+    await saveData('lottery_fields', fields.value)
+  }
+
+  const updateField = async (field) => {
+    const index = fields.value.findIndex(f => f.id === field.id)
+    if (index > -1) {
+      fields.value[index] = field
+      await saveData('lottery_fields', fields.value)
+    }
+  }
+
+  const removeField = async (id) => {
+    const index = fields.value.findIndex(f => f.id === id)
+    if (index > -1) {
+      fields.value.splice(index, 1)
+      await saveData('lottery_fields', fields.value)
+    }
+  }
+
+  // ============ 参与者管理 ============
+  const addParticipant = async (data) => {
+    const participant = { id: Date.now(), ...data }
+    participants.value.push(participant)
+    await saveData('lottery_participants', participants.value)
+  }
+
+  const updateParticipant = async (id, data) => {
+    const index = participants.value.findIndex(p => p.id === id)
+    if (index > -1) {
+      participants.value[index] = { ...participants.value[index], ...data }
+      await saveData('lottery_participants', participants.value)
+    }
+  }
+
+  const removeParticipant = async (id) => {
+    const index = participants.value.findIndex(p => p.id === id)
+    if (index > -1) {
+      participants.value.splice(index, 1)
+      await saveData('lottery_participants', participants.value)
+    }
+  }
+
+  const clearParticipants = async () => {
+    participants.value = []
+    await saveData('lottery_participants', participants.value)
+  }
+
+  const importParticipantsFromFile = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = async (e) => {
+        try {
+          const content = e.target.result
+          const lines = content.split('\n').map(l => l.trim()).filter(l => l)
+          
+          // 检测是否是CSV格式（包含逗号）
+          const isCSV = lines.some(line => line.includes(','))
+          
+          if (isCSV) {
+            // CSV格式导入
+            const headers = lines[0].split(',').map(h => h.trim())
+            const data = []
+            
+            // 自动添加缺失的字段到配置
+            headers.forEach(header => {
+              if (!fields.value.some(f => f.key === header)) {
+                fields.value.push({
+                  id: Date.now() + Math.random(),
+                  key: header,
+                  label: header,
+                  required: false
+                })
+              }
+            })
+            
+            // 保存更新后的字段配置
+            await saveData('lottery_fields', fields.value)
+            
+            for (let i = 1; i < lines.length; i++) {
+              const values = lines[i].split(',').map(v => v.trim())
+              const participant = { id: Date.now() + i }
+              headers.forEach((header, index) => {
+                participant[header] = values[index] || ''
+              })
+              data.push(participant)
+            }
+            
+            participants.value.push(...data)
+            await saveData('lottery_participants', participants.value)
+            resolve(data.length)
+          } else {
+            // 简单文本格式导入（每行一个姓名）
+            const data = lines.map(line => ({
+              id: Date.now() + Math.random(),
+              name: line
+            }))
+            participants.value.push(...data)
+            await saveData('lottery_participants', participants.value)
+            resolve(data.length)
+          }
+        } catch (error) {
+          reject(error)
+        }
+      }
+      reader.onerror = () => reject(new Error('文件读取失败'))
+      reader.readAsText(file)
+    })
+  }
+
+  // ============ 奖品管理 ============
+  const addPrize = async (prize) => {
+    prizes.value.push({
+      id: Date.now(),
+      name: prize.name,
+      stock: parseInt(prize.stock) || 0,
+      used: 0
+    })
+    await saveData('lottery_prizes', prizes.value)
+  }
+
+  const updatePrize = async (prize) => {
+    const index = prizes.value.findIndex(p => p.id === prize.id)
+    if (index > -1) {
+      prizes.value[index] = prize
+      await saveData('lottery_prizes', prizes.value)
+    }
+  }
+
+  const removePrize = async (id) => {
+    const index = prizes.value.findIndex(p => p.id === id)
+    if (index > -1) {
+      prizes.value.splice(index, 1)
+      await saveData('lottery_prizes', prizes.value)
+    }
+  }
+
+  const getPrizeAvailable = (prizeId) => {
+    const prize = prizes.value.find(p => p.id === prizeId)
+    return prize ? prize.stock - prize.used : 0
+  }
+
+  // ============ 轮次管理 ============
+  const addRound = async (round) => {
+    rounds.value.push({
+      id: Date.now(),
+      name: round.name,
+      prizeId: round.prizeId,
+      count: parseInt(round.count) || 1,
+      completed: false
+    })
+    await saveData('lottery_rounds', rounds.value)
+  }
+
+  const updateRound = async (round) => {
+    const index = rounds.value.findIndex(r => r.id === round.id)
+    if (index > -1) {
+      rounds.value[index] = round
+      await saveData('lottery_rounds', rounds.value)
+    }
+  }
+
+  const removeRound = async (id) => {
+    const index = rounds.value.findIndex(r => r.id === id)
+    if (index > -1) {
+      rounds.value.splice(index, 1)
+      await saveData('lottery_rounds', rounds.value)
+    }
+  }
+
+  const getPrizeForRound = (roundId) => {
+    const round = rounds.value.find(r => r.id === roundId)
+    if (!round) return null
+    return prizes.value.find(p => p.id === round.prizeId)
+  }
+
+  // ============ 抽奖控制 ============
+  const startLottery = async (round) => {
+    const prize = getPrizeForRound(round.id)
+    if (!prize) {
+      throw new Error('奖品不存在')
+    }
+    if (prize.used >= prize.stock) {
+      throw new Error('奖品库存不足')
+    }
+    if (round.completed) {
+      throw new Error('该轮次已完成')
+    }
+    if (participants.value.length === 0) {
+      throw new Error('参与者名单为空')
+    }
+
+    currentRound.value = round
+    isRolling.value = true
+    displayMode.value = 'scroll'
+    
+    await saveData('lottery_currentRound', currentRound.value)
+    await saveData('lottery_isRolling', isRolling.value)
+    await saveData('lottery_displayMode', displayMode.value)
+  }
+
+  const stopLottery = async () => {
+    if (!currentRound.value) return
+
+    const round = rounds.value.find(r => r.id === currentRound.value.id)
+    const prize = prizes.value.find(p => p.id === round.prizeId)
+
+    // 获取可用的参与者（未中奖）
+    const availableParticipants = participants.value.filter(
+      p => !winners.value.some(w => w.id === p.id)
+    )
+
+    // 计算本次抽奖人数
+    const maxAvailable = prize.stock - prize.used
+    const roundCount = Math.min(round.count, maxAvailable, availableParticipants.length)
+
+    if (roundCount === 0) {
+      isRolling.value = false
+      displayMode.value = 'result'
+      await saveData('lottery_isRolling', isRolling.value)
+      await saveData('lottery_displayMode', displayMode.value)
+      return
+    }
+
+    // 随机抽取
+    const shuffled = [...availableParticipants].sort(() => Math.random() - 0.5)
+    const newWinners = shuffled.slice(0, roundCount)
+
+    // 记录中奖者
+    newWinners.forEach(participant => {
+      winners.value.push({
+        id: participant.id,
+        ...participant,
+        prizeId: prize.id,
+        prizeName: prize.name,
+        roundId: round.id,
+        roundName: round.name,
+        time: new Date().toISOString()
+      })
+    })
+
+    // 更新奖品使用量
+    prize.used += roundCount
+
+    // 更新轮次状态
+    round.completed = roundCount >= round.count || prize.used >= prize.stock
+
+    isRolling.value = false
+    displayMode.value = 'result'
+
+    await saveData('lottery_winners', winners.value)
+    await saveData('lottery_prizes', prizes.value)
+    await saveData('lottery_rounds', rounds.value)
+    await saveData('lottery_isRolling', isRolling.value)
+    await saveData('lottery_displayMode', displayMode.value)
+  }
+
+  const resetLottery = async () => {
+    winners.value = []
+    isRolling.value = false
+    currentRound.value = null
+    displayMode.value = 'scroll'
+
+    // 重置奖品使用量
+    prizes.value.forEach(p => {
+      p.used = 0
+    })
+
+    // 重置轮次状态
+    rounds.value.forEach(r => {
+      r.completed = false
+    })
+
+    await saveData('lottery_winners', winners.value)
+    await saveData('lottery_isRolling', isRolling.value)
+    await saveData('lottery_currentRound', currentRound.value)
+    await saveData('lottery_displayMode', displayMode.value)
+    await saveData('lottery_prizes', prizes.value)
+    await saveData('lottery_rounds', rounds.value)
+  }
+
+  // ============ 导出功能 ============
+  const exportWinners = () => {
+    if (winners.value.length === 0) return
+    
+    // 获取所有字段
+    const participantFields = Object.keys(winners.value[0]).filter(
+      key => !['id', 'prizeId', 'prizeName', 'roundId', 'roundName', 'time'].includes(key)
+    )
+    
+    const headers = [...participantFields, '奖品', '轮次', '时间']
+    const rows = winners.value.map(w => {
+      const row = {}
+      participantFields.forEach(field => {
+        row[field] = w[field] || ''
+      })
+      row['奖品'] = w.prizeName
+      row['轮次'] = w.roundName
+      row['时间'] = new Date(w.time).toLocaleString()
+      return row
+    })
+
+    // 转换为CSV格式
+    const csv = [headers.join(','), ...rows.map(row => headers.map(h => row[h]).join(','))].join('\n')
+
+    // 创建下载
+    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `中奖名单_${new Date().toLocaleDateString()}.csv`
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const exportParticipants = () => {
+    if (participants.value.length === 0) return
+    
+    // 获取所有字段
+    const allKeys = new Set()
+    participants.value.forEach(p => {
+      Object.keys(p).forEach(key => {
+        if (key !== 'id') allKeys.add(key)
+      })
+    })
+    
+    const headers = Array.from(allKeys)
+    const rows = participants.value.map(p => headers.map(h => p[h] || '').join(','))
+
+    const csv = [headers.join(','), ...rows].join('\n')
+    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `抽奖名单_${new Date().toLocaleDateString()}.csv`
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  // ============ 显示控制 ============
+  const switchDisplayMode = async (mode) => {
+    displayMode.value = mode
+    await saveData('lottery_displayMode', displayMode.value)
+  }
+
+  const setBackgroundImage = async (imageData) => {
+    try {
+      console.log('setBackgroundImage called with image data length:', imageData ? imageData.length : 0)
+      await saveData('lottery_backgroundImage', imageData)
+      backgroundImage.value = imageData
+      console.log('setBackgroundImage completed successfully')
+    } catch (error) {
+      console.error('Failed to save background image:', error)
+      throw new Error('保存背景图片失败')
+    }
+  }
+
+  const clearBackgroundImage = async () => {
+    try {
+      await indexedDB.delete('lottery_backgroundImage')
+      backgroundImage.value = ''
+    } catch (error) {
+      console.error('Failed to clear background image:', error)
+      throw new Error('清除背景图片失败')
+    }
+  }
+
+  return {
+    // 状态
+    fields,
+    participants,
+    prizes,
+    rounds,
+    winners,
+    isRolling,
+    currentRound,
+    displayMode,
+    backgroundImage,
+    isInitialized,
+
+    // 初始化
+    initialize,
+
+    // 字段管理
+    addField,
+    updateField,
+    removeField,
+
+    // 参与者管理
+    addParticipant,
+    updateParticipant,
+    removeParticipant,
+    clearParticipants,
+    importParticipantsFromFile,
+
+    // 奖品管理
+    addPrize,
+    updatePrize,
+    removePrize,
+    getPrizeAvailable,
+
+    // 轮次管理
+    addRound,
+    updateRound,
+    removeRound,
+    getPrizeForRound,
+
+    // 抽奖控制
+    startLottery,
+    stopLottery,
+    resetLottery,
+
+    // 导出功能
+    exportWinners,
+    exportParticipants,
+
+    // 显示控制
+    switchDisplayMode,
+    setBackgroundImage,
+    clearBackgroundImage
+  }
+})
--- a/admin/src/style.css
+++ b/admin/src/style.css
@@ -0,0 +1,97 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/admin/src/styles/components.css
+++ b/admin/src/styles/components.css
@@ -0,0 +1,249 @@
+/* 组件样式 */
+
+/* ===== 按钮组件 ===== */
+.el-button {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-md);
+  transition: var(--transition-normal);
+  box-shadow: var(--shadow-small);
+}
+
+.el-button--primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.el-button--primary:hover {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+  box-shadow: var(--shadow-button);
+}
+
+.el-button--success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.el-button--warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+}
+
+.el-button--danger {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+/* ===== 卡片组件 ===== */
+.el-card {
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-medium);
+  border: 1px solid var(--color-border);
+}
+
+.el-card__header {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  padding: var(--spacing-xl);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.el-card__body {
+  padding: var(--spacing-xl);
+}
+
+/* ===== 表单组件 ===== */
+.el-form-item__label {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.el-input__wrapper {
+  border-radius: var(--border-radius-md);
+  transition: var(--transition-normal);
+}
+
+.el-input__wrapper:hover {
+  box-shadow: var(--shadow-small);
+}
+
+.el-input__wrapper.is-focus {
+  box-shadow: var(--shadow-medium);
+}
+
+/* ===== 表格组件 ===== */
+.el-table {
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+}
+
+.el-table th.el-table__cell {
+  background-color: var(--color-primary);
+  color: var(--color-text-white);
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.el-table tr {
+  transition: var(--transition-background);
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: rgba(var(--color-secondary-rgb), 0.1);
+}
+
+/* ===== 对话框组件 ===== */
+.el-dialog {
+  border-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-large);
+}
+
+.el-dialog__header {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+  padding: var(--spacing-2xl);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.el-dialog__body {
+  padding: var(--spacing-2xl);
+}
+
+.el-dialog__footer {
+  padding: var(--spacing-xl) var(--spacing-2xl);
+  border-top: 1px solid var(--color-border);
+}
+
+/* ===== 标签组件 ===== */
+.el-tag {
+  border-radius: var(--border-radius-md);
+  font-weight: var(--font-weight-medium);
+}
+
+.el-tag--success {
+  background-color: rgba(var(--color-success), 0.1);
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.el-tag--warning {
+  background-color: rgba(var(--color-warning), 0.1);
+  color: var(--color-warning);
+  border-color: var(--color-warning);
+}
+
+.el-tag--danger {
+  background-color: rgba(var(--color-danger), 0.1);
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+/* ===== 消息提示组件 ===== */
+.el-message {
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-large);
+  font-family: var(--font-family-primary);
+}
+
+.el-message--success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.el-message--warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+}
+
+.el-message--error {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+/* ===== 自定义卡片样式 ===== */
+.custom-card {
+  background: var(--color-background);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-medium);
+  padding: var(--spacing-2xl);
+  transition: var(--transition-normal);
+}
+
+.custom-card:hover {
+  box-shadow: var(--shadow-large);
+  transform: translateY(-2px);
+}
+
+/* ===== 标题样式 ===== */
+.page-title {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-3xl);
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-xl);
+}
+
+.section-title {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 2px solid var(--color-secondary);
+}
+
+/* ===== 统计卡片 ===== */
+.stat-card {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+  color: var(--color-text-white);
+  border-radius: var(--border-radius-xl);
+  padding: var(--spacing-2xl);
+  box-shadow: var(--shadow-large);
+}
+
+.stat-card .stat-value {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--spacing-sm);
+}
+
+.stat-card .stat-label {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-md);
+  opacity: 0.9;
+}
+
+/* ===== 操作按钮组 ===== */
+.action-buttons {
+  display: flex;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+/* ===== 表单区域 ===== */
+.form-section {
+  background: var(--color-background);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-2xl);
+  box-shadow: var(--shadow-medium);
+  margin-bottom: var(--spacing-xl);
+}
+
+.form-section-title {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+}
--- a/admin/src/styles/element-plus.css
+++ b/admin/src/styles/element-plus.css
@@ -0,0 +1,567 @@
+/* Element Plus 组件样式覆盖 - 基于参考项目设计 */
+
+/* ===== 按钮组件 ===== */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family-primary);
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--transition-color), var(--transition-background), var(--transition-border), var(--transition-box-shadow), var(--transition-transform);
+  background: none;
+  color: var(--color-text-primary);
+  padding: var(--spacing-lg) var(--spacing-xl);
+}
+
+.el-button:focus {
+  outline: 2px solid var(--color-secondary);
+  outline-offset: 2px;
+}
+
+.el-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.el-button--primary {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-text-white);
+  box-shadow: var(--shadow-button);
+}
+
+.el-button--primary:hover {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
+}
+
+.el-button--primary:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-button);
+}
+
+.el-button--success {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--color-text-white);
+  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
+}
+
+.el-button--success:hover {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--color-success-rgb), 0.4);
+}
+
+.el-button--success:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
+}
+
+.el-button--danger {
+  background: var(--color-danger);
+  border-color: var(--color-danger);
+  color: var(--color-text-white);
+  box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
+}
+
+.el-button--danger:hover {
+  background: var(--color-danger);
+  border-color: var(--color-danger);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--color-danger-rgb), 0.4);
+}
+
+.el-button--danger:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
+}
+
+.el-button--warning {
+  background: var(--color-warning);
+  border-color: var(--color-warning);
+  color: var(--color-text-white);
+  box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
+}
+
+.el-button--warning:hover {
+  background: var(--color-warning);
+  border-color: var(--color-warning);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--color-warning-rgb), 0.4);
+}
+
+.el-button--warning:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
+}
+
+.el-button--info {
+  background: var(--color-info);
+  border-color: var(--color-info);
+  color: var(--color-text-white);
+  box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
+}
+
+.el-button--info:hover {
+  background: var(--color-info);
+  border-color: var(--color-info);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--color-info-rgb), 0.4);
+}
+
+.el-button--info:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
+}
+
+.el-button--default {
+  background: var(--color-background);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+.el-button--default:hover {
+  background: rgba(var(--color-primary-rgb), 0.1);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.el-button--default:active {
+  transform: translateY(0);
+}
+
+.el-button--small {
+  padding: var(--spacing-sm) var(--spacing-lg);
+  font-size: var(--font-size-sm);
+  height: var(--button-height-sm);
+}
+
+.el-button--small.el-button--primary:hover,
+.el-button--small.el-button--success:hover,
+.el-button--small.el-button--info:hover,
+.el-button--small.el-button--warning:hover,
+.el-button--small.el-button--danger:hover {
+  transform: translateY(-1px);
+}
+
+.el-button--small.el-button--primary:active,
+.el-button--small.el-button--success:active,
+.el-button--small.el-button--info:active,
+.el-button--small.el-button--warning:active,
+.el-button--small.el-button--danger:active {
+  transform: translateY(0);
+}
+
+.el-button.is-circle {
+  border-radius: var(--border-radius-full);
+}
+
+.el-button.is-link {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.el-button.is-link:hover {
+  background: transparent;
+  transform: none;
+  box-shadow: none;
+}
+
+.el-button--text {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  color: var(--color-text-primary);
+}
+
+.el-button--text:hover {
+  background: rgba(var(--color-primary-rgb), 0.1);
+  color: var(--color-primary);
+  transform: none;
+}
+
+/* ===== 卡片组件 ===== */
+.el-card {
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-small);
+  border: 1px solid var(--color-border);
+}
+
+.el-card__header {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  padding: var(--spacing-xl);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-background);
+}
+
+.el-card__body {
+  padding: var(--spacing-xl);
+  background: var(--color-background);
+}
+
+/* ===== 表格组件 ===== */
+.el-table {
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-small);
+  font-family: var(--font-family-primary);
+}
+
+.el-table .el-table__header-wrapper {
+  background: var(--color-background);
+}
+
+.el-table th {
+  background: var(--color-background);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.el-table td {
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-base);
+}
+
+.el-table .el-table__row:hover > td {
+  background: rgba(var(--color-primary-rgb), 0.05);
+}
+
+.el-table .el-table__row {
+  transition: var(--transition-background);
+}
+
+/* ===== 对话框组件 ===== */
+.el-dialog {
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-large);
+  overflow: hidden;
+}
+
+.el-dialog__header {
+  background: var(--color-primary);
+  color: var(--color-text-white);
+  padding: var(--spacing-2xl);
+  border-bottom: none;
+}
+
+.el-dialog__title {
+  color: var(--color-text-white);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family-secondary);
+}
+
+.el-dialog__headerbtn {
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-lg);
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-full);
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  transition: var(--transition-background), var(--transition-transform);
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+  color: var(--color-text-white);
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+}
+
+.el-dialog__headerbtn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.el-dialog__body {
+  padding: var(--spacing-2xl);
+}
+
+.el-dialog__footer {
+  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
+  border-top: 1px solid var(--color-border);
+  text-align: right;
+}
+
+/* ===== 表单组件 ===== */
+.el-form-item__label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
+}
+
+.el-input__wrapper {
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  transition: var(--transition-border), var(--transition-box-shadow);
+  box-shadow: none;
+}
+
+.el-input__wrapper:hover {
+  border-color: var(--color-primary);
+  box-shadow: none;
+}
+
+.el-input__wrapper.is-focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-small);
+}
+
+.el-input__inner::placeholder {
+  color: var(--color-text-light);
+}
+
+.el-textarea__inner {
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  transition: var(--transition-border), var(--transition-box-shadow);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+  box-shadow: none;
+}
+
+.el-textarea__inner:hover {
+  border-color: var(--color-primary);
+  box-shadow: none;
+}
+
+.el-textarea__inner:focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-small);
+}
+
+.el-textarea__inner::placeholder {
+  color: var(--color-text-light);
+}
+
+/* ===== 选择器组件 ===== */
+.el-select .el-input__wrapper {
+  border-radius: var(--border-radius-md);
+  box-shadow: none;
+}
+
+.el-select-dropdown {
+  border-radius: var(--border-radius-lg);
+  border: none;
+  box-shadow: var(--shadow-large);
+  padding: var(--spacing-md);
+}
+
+.el-select-dropdown__item {
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  transition: var(--transition-color), var(--transition-background);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.el-select-dropdown__item:hover {
+  background: rgba(var(--color-primary-rgb), 0.1);
+  color: var(--color-primary);
+}
+
+.el-select-dropdown__item.is-selected {
+  background: var(--color-primary);
+  color: var(--color-text-white);
+}
+
+/* ===== 数字输入框 ===== */
+.el-input-number {
+  width: 100px;
+}
+
+.el-input-number .el-input__wrapper {
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  transition: var(--transition-border), var(--transition-box-shadow);
+  box-shadow: none;
+}
+
+.el-input-number .el-input__wrapper:hover {
+  border-color: var(--color-primary);
+  box-shadow: none;
+}
+
+.el-input-number .el-input__wrapper.is-focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-small);
+}
+
+/* ===== 上传组件 ===== */
+.el-upload-dragger {
+  border-radius: var(--border-radius-lg);
+  border: 2px dashed var(--color-border);
+  transition: var(--transition-border), var(--transition-background);
+}
+
+.el-upload-dragger:hover {
+  border-color: var(--color-primary);
+  background: rgba(var(--color-primary-rgb), 0.05);
+}
+
+/* ===== 标签组件 ===== */
+.el-tag {
+  border-radius: var(--border-radius-full);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-primary);
+}
+
+.el-tag--success {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--color-text-white);
+}
+
+.el-tag--info {
+  background: var(--color-info);
+  border-color: var(--color-info);
+  color: var(--color-text-white);
+}
+
+.el-tag--warning {
+  background: var(--color-warning);
+  border-color: var(--color-warning);
+  color: var(--color-text-white);
+}
+
+.el-tag--danger {
+  background: var(--color-danger);
+  border-color: var(--color-danger);
+  color: var(--color-text-white);
+}
+
+/* ===== 消息提示 ===== */
+.el-message {
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-large);
+  font-family: var(--font-family-primary);
+}
+
+.el-message--success {
+  background: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.el-message--warning {
+  background: var(--color-warning);
+  border-color: var(--color-warning);
+}
+
+.el-message--error {
+  background: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.el-message--info {
+  background: var(--color-info);
+  border-color: var(--color-info);
+}
+
+/* ===== 复选框 ===== */
+.el-checkbox {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.el-checkbox__inner:hover {
+  border-color: var(--color-primary);
+}
+
+/* ===== 分页 ===== */
+.el-pagination {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
+}
+
+.el-pagination .el-pager li {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  border-radius: var(--border-radius-sm);
+  margin: 0 2px;
+  transition: var(--transition-color), var(--transition-background);
+}
+
+.el-pagination .el-pager li.active {
+  background: var(--color-primary);
+  color: var(--color-text-white);
+}
+
+.el-pagination .el-pager li:hover {
+  color: var(--color-text-primary);
+}
+
+.el-pagination button {
+  border-radius: var(--border-radius-sm);
+}
+
+/* ===== 开关 ===== */
+.el-switch {
+  --el-switch-on-color: var(--color-success);
+}
+
+.el-switch__core {
+  border-radius: var(--border-radius-full);
+}
+
+/* ===== 下拉菜单 ===== */
+.el-dropdown-menu {
+  border-radius: var(--border-radius-lg);
+  border: none;
+  box-shadow: var(--shadow-large);
+  padding: var(--spacing-md);
+  background: var(--color-background);
+  overflow: hidden;
+  font-family: var(--font-family-primary);
+}
+
+.el-dropdown-menu__item {
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  transition: var(--transition-color), var(--transition-background);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.el-dropdown-menu__item:hover {
+  background: rgba(var(--color-primary-rgb), 0.1);
+  color: var(--color-primary);
+}
+
+.el-dropdown-menu__item.is-divided {
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  margin-top: 8px;
+  padding-top: 16px;
+}
--- a/admin/src/styles/global.css
+++ b/admin/src/styles/global.css
@@ -0,0 +1,322 @@
+/* 全局基础样式 */
+
+/* ===== 重置样式 ===== */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-background);
+  overflow-x: hidden;
+}
+
+/* ===== 通用样式 ===== */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-primary);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+}
+
+h6 {
+  font-size: var(--font-size-md);
+}
+
+p {
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-secondary);
+}
+
+a {
+  color: var(--color-secondary);
+  text-decoration: none;
+  transition: var(--transition-color);
+}
+
+a:hover {
+  color: var(--color-primary);
+}
+
+ul, ol {
+  margin-bottom: var(--spacing-md);
+  padding-left: var(--spacing-2xl);
+}
+
+li {
+  margin-bottom: var(--spacing-sm);
+  color: var(--color-text-secondary);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* ===== 工具类 ===== */
+.container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-secondary {
+  color: var(--color-secondary);
+}
+
+.text-muted {
+  color: var(--color-text-light);
+}
+
+.font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+/* ===== 间距工具类 ===== */
+.m-0 { margin: 0; }
+.mt-0 { margin-top: 0; }
+.mr-0 { margin-right: 0; }
+.mb-0 { margin-bottom: 0; }
+.ml-0 { margin-left: 0; }
+.mx-0 { margin-left: 0; margin-right: 0; }
+.my-0 { margin-top: 0; margin-bottom: 0; }
+
+.m-1 { margin: var(--spacing-xs); }
+.mt-1 { margin-top: var(--spacing-xs); }
+.mr-1 { margin-right: var(--spacing-xs); }
+.mb-1 { margin-bottom: var(--spacing-xs); }
+.ml-1 { margin-left: var(--spacing-xs); }
+.mx-1 { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
+.my-1 { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
+
+.m-2 { margin: var(--spacing-sm); }
+.mt-2 { margin-top: var(--spacing-sm); }
+.mr-2 { margin-right: var(--spacing-sm); }
+.mb-2 { margin-bottom: var(--spacing-sm); }
+.ml-2 { margin-left: var(--spacing-sm); }
+.mx-2 { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
+.my-2 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
+
+.m-3 { margin: var(--spacing-md); }
+.mt-3 { margin-top: var(--spacing-md); }
+.mr-3 { margin-right: var(--spacing-md); }
+.mb-3 { margin-bottom: var(--spacing-md); }
+.ml-3 { margin-left: var(--spacing-md); }
+.mx-3 { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
+.my-3 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
+
+.m-4 { margin: var(--spacing-lg); }
+.mt-4 { margin-top: var(--spacing-lg); }
+.mr-4 { margin-right: var(--spacing-lg); }
+.mb-4 { margin-bottom: var(--spacing-lg); }
+.ml-4 { margin-left: var(--spacing-lg); }
+.mx-4 { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
+.my-4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
+
+.p-0 { padding: 0; }
+.pt-0 { padding-top: 0; }
+.pr-0 { padding-right: 0; }
+.pb-0 { padding-bottom: 0; }
+.pl-0 { padding-left: 0; }
+.px-0 { padding-left: 0; padding-right: 0; }
+.py-0 { padding-top: 0; padding-bottom: 0; }
+
+.p-1 { padding: var(--spacing-xs); }
+.pt-1 { padding-top: var(--spacing-xs); }
+.pr-1 { padding-right: var(--spacing-xs); }
+.pb-1 { padding-bottom: var(--spacing-xs); }
+.pl-1 { padding-left: var(--spacing-xs); }
+.px-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
+.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
+
+.p-2 { padding: var(--spacing-sm); }
+.pt-2 { padding-top: var(--spacing-sm); }
+.pr-2 { padding-right: var(--spacing-sm); }
+.pb-2 { padding-bottom: var(--spacing-sm); }
+.pl-2 { padding-left: var(--spacing-sm); }
+.px-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
+.py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
+
+.p-3 { padding: var(--spacing-md); }
+.pt-3 { padding-top: var(--spacing-md); }
+.pr-3 { padding-right: var(--spacing-md); }
+.pb-3 { padding-bottom: var(--spacing-md); }
+.pl-3 { padding-left: var(--spacing-md); }
+.px-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
+.py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
+
+.p-4 { padding: var(--spacing-lg); }
+.pt-4 { padding-top: var(--spacing-lg); }
+.pr-4 { padding-right: var(--spacing-lg); }
+.pb-4 { padding-bottom: var(--spacing-lg); }
+.pl-4 { padding-left: var(--spacing-lg); }
+.px-4 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
+.py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
+
+/* ===== Flexbox 工具类 ===== */
+.d-flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+/* ===== 滚动条样式 ===== */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-border);
+  border-radius: var(--border-radius-sm);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-text-light);
+  border-radius: var(--border-radius-sm);
+  transition: var(--transition-background);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+/* ===== Vue 应用样式 ===== */
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--transition-normal);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all var(--transition-normal) ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all var(--transition-fast) ease-in;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateY(10px);
+  opacity: 0;
+}
--- a/admin/src/styles/variables.css
+++ b/admin/src/styles/variables.css
@@ -0,0 +1,163 @@
+/* 全局样式变量 - 基于琳盛网站设计系统 */
+
+/* ===== 色彩系统 ===== */
+:root {
+  /* 主色调 - 深棕红色 */
+  --color-primary: rgb(29, 17, 17);
+  --color-primary-rgb: 29, 17, 17;
+  
+  /* 次要色 - 青绿色 */
+  --color-secondary: rgb(0, 165, 141);
+  --color-secondary-rgb: 0, 165, 141;
+  
+  /* 强调色 - 深蓝色 */
+  --color-accent: rgb(34, 37, 121);
+  --color-accent-rgb: 34, 37, 121;
+  
+  /* 背景色 */
+  --color-background: rgb(255, 255, 255);
+  --color-background-rgb: 255, 255, 255;
+  
+  /* 文字颜色 */
+  --color-text-primary: rgb(29, 17, 17);
+  --color-text-secondary: rgb(64, 64, 64);
+  --color-text-light: rgb(120, 120, 120);
+  --color-text-white: rgb(255, 255, 255);
+  
+  /* 边框颜色 */
+  --color-border: rgb(225, 225, 225);
+  --color-border-light: rgba(0, 0, 0, 0.1);
+  
+  /* 状态颜色 */
+  --color-success: rgb(0, 165, 141);
+  --color-warning: rgb(243, 156, 18);
+  --color-danger: rgb(220, 53, 69);
+  --color-info: rgb(23, 162, 184);
+  
+  /* 阴影 */
+  --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.05);
+  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.1);
+  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-button: 0 4px 16px rgba(var(--color-primary-rgb), 0.3);
+}
+
+/* ===== 字体系统 ===== */
+:root {
+  /* 主字体 - Poppins */
+  --font-family-primary: 'Poppins', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  
+  /* 辅助字体 - Montserrat */
+  --font-family-secondary: 'Montserrat', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  
+  /* 等宽字体 */
+  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+  
+  /* 字体大小 */
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 28px;
+  --font-size-4xl: 32px;
+  
+  /* 字体粗细 */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* 行高 */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.8;
+}
+
+/* ===== 间距系统 ===== */
+:root {
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+  --spacing-4xl: 40px;
+  --spacing-5xl: 48px;
+}
+
+/* ===== 圆角系统 ===== */
+:root {
+  --border-radius-none: 0px;
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  --border-radius-xl: 16px;
+  --border-radius-2xl: 20px;
+  --border-radius-full: 50%;
+}
+
+/* ===== 过渡动画 ===== */
+:root {
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  
+  /* 简化的过渡效果 */
+  --transition-color: color var(--transition-normal);
+  --transition-background: background-color var(--transition-normal);
+  --transition-border: border-color var(--transition-normal);
+  --transition-transform: transform var(--transition-normal);
+  --transition-box-shadow: box-shadow var(--transition-normal);
+}
+
+/* ===== 断点系统 ===== */
+:root {
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1400px;
+}
+
+/* ===== Z-index 层级 ===== */
+:root {
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-fixed: 1030;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+}
+
+/* ===== 组件特定变量 ===== */
+:root {
+  /* 按钮高度 */
+  --button-height-sm: 32px;
+  --button-height-md: 40px;
+  --button-height-lg: 48px;
+  --button-height-xl: 56px;
+  
+  /* 输入框高度 */
+  --input-height-sm: 32px;
+  --input-height-md: 40px;
+  --input-height-lg: 48px;
+  
+  /* 侧边栏 */
+  --sidebar-width-collapsed: 80px;
+  --sidebar-width-expanded: 260px;
+  --sidebar-height: 80px;
+  
+  /* 头部导航 */
+  --header-height: 108px;
+  
+  /* 卡片 */
+  --card-padding: var(--spacing-2xl);
+  --card-border-radius: var(--border-radius-lg);
+  --card-shadow: var(--shadow-medium);
+}
--- a/admin/src/typescript.svg
+++ b/admin/src/typescript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
--- a/admin/tsconfig.json
+++ b/admin/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/admin/vite.config.js
+++ b/admin/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@utils': path.resolve(__dirname, '../utils')
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>