添加登录系统以及超级管理员内容

zhandianxinxi/光谱数据监控/src/router/index.js

@@ -1,28 +1,41 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { ElMessage } from 'element-plus'
 
-// 假设你的组件都在 views 目录下
+// 1. 引入登录页面（建议新建 views/Login.vue）
-// Dashboard 作为首页，通常直接引入
+import Login from '../views/Login.vue'
+// 2. 首页组件
 import Dashboard from '../views/Dashboard.vue'
 
 const routes = [
     {
         path: '/',
+        name: 'Login',
+        component: Login,
+        meta: { title: '系统登录' }
+    },
+    {
+        path: '/dashboard',
         name: 'Dashboard',
         component: Dashboard,
-        meta: { title: '设备监控总览' }
+        meta: { title: '设备监控总览', requiresAuth: true }
     },
     {
         path: '/data-monitor',
         name: 'CrawledData',
-        // 路由懒加载：只有访问该页面时才加载组件，提升首页加载速度
+        // 路由懒加载
         component: () => import('../views/DataMonitor.vue'),
-        meta: { title: '数据爬取监控' }
+        meta: { title: '数据爬取监控', requiresAuth: true }
     },
     {
         path: '/logs',
         name: 'MaintenanceLogs',
         component: () => import('../views/MaintenanceLogs.vue'),
-        meta: { title: '维修日志中心' }
+        meta: { title: '维修日志中心', requiresAuth: true }
+    },
+    // 捕获所有未定义的路径，跳转回登录页或首页
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: '/'
     }
 ]
 
@@ -31,12 +44,30 @@ const router = createRouter({
     routes
 })
 
-// 全局路由守卫：自动修改浏览器标签页标题
+// =======================
+// 核心：全局路由守卫
+// =======================
 router.beforeEach((to, from, next) => {
+    // 1. 设置页面标题
     if (to.meta.title) {
         document.title = to.meta.title
     }
+
+    // 2. 检查登录状态 (从本地存储获取)
+    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
+
+    // 3. 鉴权逻辑
+    if (to.meta.requiresAuth && !isLoggedIn) {
+        // 如果页面需要登录但用户未登录，强行拦截并跳转到登录页
+        ElMessage.error('请先登录系统')
+        next({ name: 'Login' })
+    } else if (to.name === 'Login' && isLoggedIn) {
+        // 如果用户已登录却尝试访问登录页，直接送他去首页
+        next({ name: 'Dashboard' })
+    } else {
+        // 否则正常放行
         next()
+    }
 })
 
 export default router

zhandianxinxi/光谱数据监控/src/views/Dashboard.vue

@@ -13,40 +13,27 @@
           </div>
           <div class="header-actions">
             <el-button type="info" plain icon="Document" @click="openLogCenter(null)">
-              维修日志总览
+              维修日志
             </el-button>
             <el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">
               立即检测
             </el-button>
             <el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
+
+            <el-divider direction="vertical" />
+            <el-button type="danger" plain icon="SwitchButton" @click="handleLogout">
+              退出系统
+            </el-button>
           </div>
         </div>
       </template>
 
-      <div v-if="(summary.hasError || summary.hasWarning) && filters.status !== 'hidden'" class="alert-section">
-        <el-alert
-            v-if="summary.hasError"
-            :title="`严重警告：检测到 ${summary.errorCount} 台设备离线或严重滞后(>7天)！`"
-            type="error"
-            show-icon
-            effect="dark"
-            class="mb-2"
-        />
-        <el-alert
-            v-if="summary.hasWarning"
-            :title="`风险提示：检测到 ${summary.warningCount} 台设备数据滞后(>24小时)`"
-            type="warning"
-            show-icon
-            effect="dark"
-        />
-      </div>
-
       <div class="status-summary">
-        <el-tag color="#409EFF" effect="dark" class="legend-tag" style="border:none">蓝色：维修中</el-tag>
+        <el-tag color="#409EFF" effect="dark" class="legend-tag">蓝色：维修中</el-tag>
-        <el-tag color="#F56C6C" effect="dark" class="legend-tag" style="border:none">红色：离线 / >7天</el-tag>
+        <el-tag color="#F56C6C" effect="dark" class="legend-tag">红色：离线 / >7天</el-tag>
-        <el-tag color="#E6A23C" effect="dark" class="legend-tag" style="border:none">橙色：滞后 1-7天</el-tag>
+        <el-tag color="#E6A23C" effect="dark" class="legend-tag">橙色：滞后 1-7天</el-tag>
-        <el-tag color="#FAC858" effect="dark" class="legend-tag" style="border:none; color: #333">黄色：滞后 &lt; 24h</el-tag>
+        <el-tag color="#FAC858" effect="dark" class="legend-tag" style="color: #333">黄色：滞后 &lt; 24h</el-tag>
-        <el-tag color="#67C23A" effect="dark" class="legend-tag" style="border:none">绿色：正常</el-tag>
+        <el-tag color="#67C23A" effect="dark" class="legend-tag">绿色：正常</el-tag>
       </div>
 
       <div class="toolbar" :class="{ 'mobile-toolbar': isMobile }">
@@ -77,7 +64,7 @@
           v-loading="loading"
           style="width: 100%"
           :row-class-name="tableRowClassName"
-          height="calc(100vh - 350px)"
+          :height="tableHeight"
           :default-sort="{ prop: 'sortHours', order: 'descending' }"
       >
         <el-table-column label="状态" width="120" align="center" fixed="left">
@@ -158,9 +145,7 @@
                     style="--el-switch-on-color: #409EFF;"
                     :before-change="() => handleMaintenanceBeforeChange(row)"
                 />
-
                 <el-button type="primary" link icon="Edit" @click="openLogCenter(row)">日志</el-button>
-
                 <el-popconfirm title="确定隐藏?" @confirm="toggleHidden(row, true)">
                   <template #reference>
                     <el-button type="danger" link icon="Delete">隐藏</el-button>
@@ -175,60 +160,61 @@
 
     <DataMonitor ref="dataMonitorRef" />
     <MaintenanceLogs ref="maintenanceLogsRef" />
-
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
 import axios from 'axios'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
-import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft } from '@element-plus/icons-vue'
+import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton } from '@element-plus/icons-vue'
 
 // 引入子组件
 import DataMonitor from './DataMonitor.vue'
 import MaintenanceLogs from './MaintenanceLogs.vue'
 
+const router = useRouter()
 const loading = ref(false)
 const runningTask = ref(false)
 const rawData = ref([])
 const lastCheckTime = ref('')
+const windowHeight = ref(window.innerHeight)
 const windowWidth = ref(window.innerWidth)
+
+// 动态计算表格高度：窗口高度 - 顶部Header和工具栏预估占用的空间
+const tableHeight = computed(() => {
+  const offset = isMobile.value ? 400 : 280; // 移动端预留更多空间
+  return windowHeight.value - offset;
+})
+
 const isMobile = computed(() => windowWidth.value < 768)
 const filters = reactive({ status: 'all', keyword: '' })
 const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
 
-// 组件引用
 const dataMonitorRef = ref(null)
 const maintenanceLogsRef = ref(null)
 
+// 统计信息
 const summary = computed(() => {
   const activeDevices = rawData.value.filter(r => !r.is_hidden)
   const errors = activeDevices.filter(r => r.statusType === 'error').length
   const warnings = activeDevices.filter(r => r.statusType === 'warning').length
   const hidden = rawData.value.filter(r => r.is_hidden).length
-  return { errorCount: errors, warningCount: warnings, hiddenCount: hidden, hasError: errors > 0, hasWarning: warnings > 0 }
+  return { errorCount: errors, warningCount: warnings, hiddenCount: hidden }
 })
 
-// 打开图表详情
+// 退出登录
-const handleDeviceClick = (row) => {
+const handleLogout = () => {
-  if (row.is_hidden) return
+  ElMessageBox.confirm('确定退出系统吗？', '提示', { type: 'warning' }).then(() => {
-  if (dataMonitorRef.value) dataMonitorRef.value.open(row)
+    localStorage.removeItem('isLoggedIn')
-}
+    localStorage.removeItem('token')
-
+    router.push('/')
-// === 核心：打开日志中心 ===
+    ElMessage.success('已安全退出')
-const openLogCenter = (row) => {
+  }).catch(() => {})
-  if (maintenanceLogsRef.value) {
-    if (row) {
-      // 传入设备信息，子组件会自动筛选并预填新增表单
-      maintenanceLogsRef.value.open({ deviceName: row.name })
-    } else {
-      // 不传参数，显示全部
-      maintenanceLogsRef.value.open(null)
-    }
-  }
 }
 
+// 获取数据
 const fetchData = async () => {
   loading.value = true
   try {
@@ -253,13 +239,11 @@ const fetchData = async () => {
         }
       }
 
-      // 排序逻辑
       let sortHours = diffHours;
       if (item.is_maintaining) sortHours = Number.MAX_SAFE_INTEGER;
       else if (item.status === 'offline' || item.status === '已离线') sortHours = 1000000000;
       else if (!validTime) sortHours = 500000000;
 
-      // 状态颜色逻辑
       let statusColor = '#67C23A', statusLabel = '正常在线', statusType = 'normal', statusLabelColor = '#fff'
       if (item.is_maintaining) {
         statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
@@ -287,17 +271,17 @@ const fetchData = async () => {
   }
 }
 
+// 其他方法 (handleDeviceClick, openLogCenter, runManualMonitor等保持原有逻辑)...
+const handleDeviceClick = (row) => { if (!row.is_hidden && dataMonitorRef.value) dataMonitorRef.value.open(row) }
+const openLogCenter = (row) => { if (maintenanceLogsRef.value) maintenanceLogsRef.value.open(row ? { deviceName: row.name } : null) }
 const runManualMonitor = async () => {
   runningTask.value = true
   try {
     const res = await axios.post(`${API_BASE}/api/run_monitor`)
     ElMessage.success(res.data.message || '任务启动')
     setTimeout(() => fetchData(), 3000)
-  } catch (e) {
+  } catch (e) { ElMessage.warning('请求频繁') }
-    ElMessage.warning('启动频繁或异常')
+  finally { setTimeout(() => { runningTask.value = false }, 1000) }
-  } finally {
-    setTimeout(() => { runningTask.value = false }, 1000)
-  }
 }
 
 const filteredData = computed(() => {
@@ -306,14 +290,12 @@ const filteredData = computed(() => {
     if (item.is_hidden) return false
     if (filters.status === 'abnormal') return (item.statusType === 'error' || item.statusType === 'warning' || item.statusType === 'slight-warning')
     return true
-  }).filter(item => {
+  }).filter(item => !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
-    return !filters.keyword || (item.name && item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
-  })
 })
 
 const handleEditSite = (row) => {
   row.tempSite = row.install_site; row.isEditingSite = true
-  nextTick(() => { document.querySelectorAll('.editing-cell input')[0]?.focus() })
+  nextTick(() => { document.querySelector('.editing-cell input')?.focus() })
 }
 
 const saveSite = async (row) => {
@@ -323,9 +305,7 @@ const saveSite = async (row) => {
   try {
     await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: row.tempSite })
     ElMessage.success('已更新')
-  } catch (e) {
+  } catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
-    row.install_site = oldVal; ElMessage.error('更新失败')
-  }
 }
 
 const handleMaintenanceBeforeChange = (row) => {
@@ -353,37 +333,45 @@ const tableRowClassName = ({ row }) => {
   return ''
 }
 
-onMounted(() => { fetchData(); window.addEventListener('resize', () => windowWidth.value = window.innerWidth) })
+// 监听窗口缩放，动态更新高度
-onBeforeUnmount(() => window.removeEventListener('resize', () => windowWidth.value = window.innerWidth))
+const updateDimensions = () => {
+  windowHeight.value = window.innerHeight
+  windowWidth.value = window.innerWidth
+}
+
+onMounted(() => {
+  fetchData()
+  window.addEventListener('resize', updateDimensions)
+})
+onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
 </script>
 
 <style scoped>
-.dashboard-container { padding: 20px; background: #f5f7fa; min-height: 100vh; }
+.dashboard-container { padding: 15px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
-.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.main-card { border-radius: 8px; }
-.sys-title { margin: 0; font-size: 24px; color: #303133; font-weight: 700; }
+.header-row { display: flex; justify-content: space-between; align-items: center; }
-.alert-section { margin-bottom: 15px; }
+.sys-title { margin: 0; font-size: 22px; color: #303133; font-weight: 700; }
-.mb-2 { margin-bottom: 8px; }
+.status-summary { margin-bottom: 15px; display: flex; gap: 8px; flex-wrap: wrap; }
-.status-summary { margin: 10px 0; display: flex; gap: 10px; flex-wrap: wrap; }
+.legend-tag { font-weight: bold; border: none; }
-.legend-tag { font-weight: bold; }
+.toolbar { background: #fff; padding: 12px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #e4e7ed; }
-.toolbar { background: #fff; padding: 15px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #e4e7ed; }
+.filter-section { display: flex; gap: 15px; align-items: center; }
-.filter-section { display: flex; gap: 20px; align-items: center; }
+.search-input { width: 220px; }
-.search-input { width: 250px; }
 
-.device-name-wrapper { display: flex; align-items: center; gap: 5px; transition: all 0.2s; cursor: pointer; }
+.device-name-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; }
 .device-name-wrapper:hover .device-name { color: #409EFF; text-decoration: underline; }
-.device-name { font-weight: bold; font-size: 15px; color: #303133; }
+.device-name { font-weight: bold; font-size: 14px; color: #303133; }
 .text-deleted { text-decoration: line-through; color: #999; }
-.status-text { font-size: 13px; margin-top: 4px; font-weight: bold; display: flex; align-items: center; }
+.status-text { font-size: 12px; margin-top: 4px; font-weight: bold; }
-.maintenance-text { color: #409EFF; }
 .error-text { color: #F56C6C; }
 .warning-text { color: #E6A23C; }
 .success-text { color: #67C23A; }
+.maintenance-text { color: #409EFF; }
 
-.display-cell { cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; }
+.display-cell { cursor: pointer; padding: 4px 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; }
 .display-cell:hover { background: #d9ecff; }
-.edit-icon { opacity: 0; color: #409EFF; }
+.edit-icon { opacity: 0; color: #409EFF; font-size: 12px; }
 .display-cell:hover .edit-icon { opacity: 1; }
-.action-group { display: flex; gap: 10px; justify-content: center; align-items: center; }
+.action-group { display: flex; gap: 8px; justify-content: center; align-items: center; }
 
 :deep(.error-row) { background-color: #fef0f0 !important; }
 :deep(.warning-row) { background-color: #fdf6ec !important; }

zhandianxinxi/光谱数据监控/src/views/MaintenanceLogs.vue

@@ -46,7 +46,7 @@
             border
             stripe
             v-loading="loading"
-            height="500"
+            height="550"
             style="width: 100%; margin-top: 15px"
         >
           <el-table-column prop="timestamp" label="记录时间" width="170" sortable />
@@ -93,7 +93,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="设备名称">
-                <el-input v-model="logDialog.form.device_name" placeholder="例: 106_Tower" />
+                <el-input
+                    v-model="logDialog.form.device_name"
+                    placeholder="例: 106_Tower"
+                    :disabled="logDialog.isEdit"
+                />
+                <div v-if="logDialog.isEdit" class="form-tip">
+                  <el-icon><InfoFilled /></el-icon> 为了数据追溯，修改模式下禁止更改关联设备
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -131,20 +138,20 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import axios from 'axios'
-import { ElMessage, ElConfigProvider } from 'element-plus' // 引入 ConfigProvider
+import { ElMessage, ElConfigProvider } from 'element-plus'
-import { Search, Plus, Delete, Edit } from '@element-plus/icons-vue'
+import { Search, Plus, Delete, Edit, InfoFilled } from '@element-plus/icons-vue'
-import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文包
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
 
-// --- 状态 ---
+// --- 核心状态 ---
 const visible = ref(false)
 const loading = ref(false)
 const logsList = ref([])
 const keyword = ref('')
 const dateRange = ref([])
 
-// 弹窗状态
+// 弹窗状态封装
 const logDialog = reactive({
   visible: false,
   submitting: false,
@@ -158,20 +165,19 @@ const logDialog = reactive({
   }
 })
 
-// --- 方法 ---
+// --- 方法逻辑 ---
 
-// 1. 打开主弹窗
+// 1. 暴露给父组件的打开方法
 const open = (prefillData = null) => {
   visible.value = true
+  // 如果从设备卡片点击进来，自动筛选该设备
   if (prefillData && prefillData.deviceName) {
     keyword.value = prefillData.deviceName
-  } else {
-    keyword.value = ''
   }
   fetchLogs()
 }
 
-// 2. 获取日志列表
+// 2. 获取数据列表
 const fetchLogs = async () => {
   loading.value = true
   try {
@@ -183,18 +189,18 @@ const fetchLogs = async () => {
     const res = await axios.get(`${API_BASE}/api/logs/list`, { params })
     logsList.value = res.data.data
   } catch (e) {
-    ElMessage.error('加载日志失败')
+    ElMessage.error('加载日志中心数据失败')
   } finally {
     loading.value = false
   }
 }
 
-// 3. 打开新增弹窗
+// 3. 处理新增
 const openAddDialog = () => {
   logDialog.isEdit = false
   logDialog.form = {
     id: null,
-    // 如果当前搜索框有值，自动填入
+    // 自动带入当前的搜索词作为设备名，提高录入效率
     device_name: keyword.value || '',
     engineer: '',
     location: '',
@@ -203,7 +209,7 @@ const openAddDialog = () => {
   logDialog.visible = true
 }
 
-// 4. 打开编辑弹窗 (新增)
+// 4. 处理修改
 const openEditDialog = (row) => {
   logDialog.isEdit = true
   logDialog.form = {
@@ -216,49 +222,82 @@ const openEditDialog = (row) => {
   logDialog.visible = true
 }
 
-// 5. 提交日志 (判断是新增还是修改)
+// 5. 提交表单（核心逻辑区分）
 const submitLog = async () => {
   if (!logDialog.form.device_name || !logDialog.form.content) {
-    return ElMessage.warning('请至少填写设备名称和内容')
+    return ElMessage.warning('设备名称和事件内容为必填项')
   }
 
   logDialog.submitting = true
   try {
-    if (logDialog.isEdit) {
+    const endpoint = logDialog.isEdit ? '/api/logs/update' : '/api/logs/add'
-      // 调用修改接口
+    await axios.post(`${API_BASE}${endpoint}`, logDialog.form)
-      await axios.post(`${API_BASE}/api/logs/update`, logDialog.form)
+
-      ElMessage.success('修改成功')
+    ElMessage.success(logDialog.isEdit ? '日志已成功修改' : '日志已添加')
-    } else {
-      // 调用新增接口
-      await axios.post(`${API_BASE}/api/logs/add`, logDialog.form)
-      ElMessage.success('新增成功')
-    }
     logDialog.visible = false
-    fetchLogs()
+    fetchLogs() // 刷新列表
   } catch (e) {
-    ElMessage.error(logDialog.isEdit ? '修改失败' : '提交失败')
+    ElMessage.error('操作失败，请检查网络或后端服务')
   } finally {
     logDialog.submitting = false
   }
 }
 
-// 6. 删除日志
+// 6. 删除逻辑
 const deleteLog = async (id) => {
   try {
     await axios.post(`${API_BASE}/api/logs/delete`, { id })
-    ElMessage.success('已删除')
+    ElMessage.success('记录已安全删除')
     fetchLogs()
   } catch (e) {
-    ElMessage.error('删除失败')
+    ElMessage.error('删除操作失败')
   }
 }
 
+// 格式化名称工具
 const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
 
+// 暴露方法给父组件 Dashboard 调用
 defineExpose({ open })
 </script>
 
 <style scoped>
-.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
+.logs-container {
-.filter-group { display: flex; gap: 10px; }
+  padding: 10px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-group {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 调整输入框禁用时的样式，保持可读性 */
+:deep(.el-input.is-disabled .el-input__wrapper) {
+  background-color: #f5f7fa;
+  box-shadow: 0 0 0 1px #e4e7ed inset;
+}
+
+:deep(.el-input.is-disabled .el-input__inner) {
+  color: #606266;
+  -webkit-text-fill-color: #606266;
+}
 </style>

zhandianxinxi/光谱数据监控/src/views/login.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="login-container">
+    <el-card class="login-card">
+      <h2>🚀 设备监控系统登录</h2>
+      <el-form :model="loginForm" @keyup.enter="handleLogin">
+        <el-form-item>
+          <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="User" />
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="Lock" show-password />
+        </el-form-item>
+        <el-button type="primary" :loading="loading" style="width: 100%" @click="handleLogin">登录</el-button>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import axios from 'axios'
+
+const router = useRouter()
+const loading = ref(false)
+const loginForm = ref({ username: '', password: '' })
+
+const handleLogin = async () => {
+  if (!loginForm.value.username || !loginForm.value.password) {
+    return ElMessage.warning('请输入用户名和密码')
+  }
+
+  loading.value = true
+  try {
+    const res = await axios.post('/api/login', loginForm.value)
+    if (res.data.code === 200) {
+      // 存储登录状态
+      localStorage.setItem('isLoggedIn', 'true')
+      localStorage.setItem('token', res.data.token)
+      ElMessage.success('欢迎回来')
+      router.push('/dashboard') // 登录成功跳转
+    }
+  } catch (error) {
+    ElMessage.error(error.response?.data?.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #1d2b64 0%, #f8cdda 100%);
+}
+.login-card {
+  width: 400px;
+  padding: 20px;
+  text-align: center;
+  border-radius: 12px;
+}
+</style>