From 7debee6d82c4fbd05c002bd840a71abb32756cbc Mon Sep 17 00:00:00 2001
From: sitga <2389647927@qq.com>
Date: Wed, 18 Mar 2026 16:06:46 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/AssetList.vue | 185 +++++++-----
 frontend/src/pages/Dashboard.vue | 166 ++++++++---
 frontend/src/pages/Login.vue     | 276 +++++++++++++++--
 frontend/src/styles/main.css     | 496 ++++++++++++++++++++++---------
 4 files changed, 832 insertions(+), 291 deletions(-)

diff --git a/frontend/src/pages/AssetList.vue b/frontend/src/pages/AssetList.vue
index b05e384..8ee0fcd 100644
--- a/frontend/src/pages/AssetList.vue
+++ b/frontend/src/pages/AssetList.vue
@@ -766,97 +766,106 @@ onMounted(async () => {
 .asset-page {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
   min-height: calc(100vh - 150px);
 }
 
 .page-head,
 .filter-panel,
 .table-panel {
-  background: #fff;
-  border: 1px solid #d9e2ec;
-  border-radius: 6px;
+  background: var(--surface);
+  border: none;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
 }
 
 .page-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
-  padding: 12px 14px;
+  gap: 16px;
+  padding: 18px 20px;
 }
 
 .head-actions {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .filter-panel {
-  padding: 12px 14px;
+  padding: 18px 20px;
 }
 
 .filter-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
   align-items: center;
 }
 
 .keyword-input {
-  width: 320px;
+  width: 340px;
 }
 
 .summary-strip {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 10px;
+  gap: 12px;
+  margin-top: 14px;
 }
 
 .summary-card {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-height: 58px;
-  padding: 10px 12px;
-  border: 1px solid #e4e7ec;
-  background: #fbfcfd;
+  gap: 12px;
+  min-height: 68px;
+  padding: 14px 16px;
+  border: none;
+  background: var(--surface);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+}
+
+.summary-card:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
 }
 
 .summary-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  font-size: 14px;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  font-size: 18px;
 }
 
 .summary-icon.is-blue {
-  color: #155eef;
-  background: #eff4ff;
+  color: var(--brand);
+  background: var(--brand-soft);
 }
 
 .summary-icon.is-green {
-  color: #067647;
-  background: #ecfdf3;
+  color: var(--success);
+  background: var(--success-soft);
 }
 
 .summary-icon.is-amber {
-  color: #b54708;
-  background: #fffaeb;
+  color: var(--warning);
+  background: var(--warning-soft);
 }
 
 .summary-icon.is-red {
-  color: #b42318;
-  background: #fef3f2;
+  color: var(--danger);
+  background: var(--danger-soft);
 }
 
 .summary-icon.is-slate {
-  color: #344054;
-  background: #f2f4f7;
+  color: var(--text-sub);
+  background: var(--surface-muted);
 }
 
 .summary-body {
@@ -865,15 +874,17 @@ onMounted(async () => {
 
 .summary-label {
   font-size: 12px;
-  color: #667085;
+  color: var(--text-sub);
+  font-weight: 500;
 }
 
 .summary-value {
-  margin-top: 2px;
-  font-size: 20px;
+  margin-top: 4px;
+  font-size: 22px;
   font-weight: 700;
   line-height: 1;
-  color: #101828;
+  color: var(--text-main);
+  letter-spacing: -0.02em;
 }
 
 .table-panel {
@@ -881,26 +892,27 @@ onMounted(async () => {
   flex-direction: column;
   min-height: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 .table-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 12px 14px 8px;
-  border-bottom: 1px solid #e4e7ec;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--line);
 }
 
 .table-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--text-main);
 }
 
 .table-meta {
-  font-size: 12px;
-  color: #667085;
+  font-size: 13px;
+  color: var(--text-sub);
 }
 
 .asset-table {
@@ -908,41 +920,45 @@ onMounted(async () => {
 }
 
 .asset-table :deep(.el-table__header th) {
-  background: #f8fafc;
-  color: #344054;
-  font-weight: 700;
+  background: var(--surface-muted);
+  color: var(--text-main);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .asset-table :deep(.el-table__cell) {
-  padding: 8px 0;
+  padding: 10px 0;
 }
 
 .asset-table :deep(.cell) {
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
 .cell-stack {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .cell-line {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
   min-width: 0;
 }
 
 .cell-line-main {
-  color: #101828;
+  color: var(--text-main);
   font-weight: 600;
+  font-size: 14px;
 }
 
 .cell-line-sub {
   font-size: 12px;
-  color: #667085;
+  color: var(--text-sub);
 }
 
 .asset-name {
@@ -953,67 +969,69 @@ onMounted(async () => {
 }
 
 .muted-text {
-  color: #667085;
+  color: var(--text-sub);
 }
 
 .row-actions {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   flex-wrap: wrap;
 }
 
 .table-empty {
-  padding: 36px 0;
+  padding: 48px 0;
   text-align: center;
 }
 
 .table-empty-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: #101828;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-main);
 }
 
 .table-empty-sub {
-  margin-top: 4px;
-  font-size: 12px;
-  color: #667085;
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--text-sub);
 }
 
 .table-footer {
   display: flex;
   justify-content: flex-end;
-  padding: 10px 14px 14px;
-  border-top: 1px solid #e4e7ec;
+  padding: 14px 20px;
+  border-top: 1px solid var(--line);
 }
 
 .detail-layout {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
 }
 
 .detail-section {
-  border: 1px solid #e4e7ec;
-  background: #fff;
+  border: none;
+  background: var(--surface-muted);
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 
 .detail-section-title,
 .form-section-title {
-  padding: 10px 12px;
-  font-size: 13px;
+  padding: 14px 18px;
+  font-size: 14px;
   font-weight: 700;
-  color: #1f2937;
-  border-bottom: 1px solid #e4e7ec;
-  background: #f8fafc;
+  color: var(--text-main);
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
 }
 
 .detail-grid,
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px 16px;
-  padding: 14px;
+  gap: 16px 24px;
+  padding: 18px;
 }
 
 .detail-item {
@@ -1027,13 +1045,14 @@ onMounted(async () => {
 
 .detail-label {
   font-size: 12px;
-  color: #667085;
+  color: var(--text-sub);
+  font-weight: 500;
 }
 
 .detail-value {
-  margin-top: 4px;
-  font-size: 13px;
-  color: #101828;
+  margin-top: 6px;
+  font-size: 14px;
+  color: var(--text-main);
   word-break: break-all;
 }
 
@@ -1042,13 +1061,16 @@ onMounted(async () => {
 }
 
 .form-section {
-  margin-top: 12px;
-  border: 1px solid #e4e7ec;
+  margin-top: 16px;
+  border: none;
+  background: var(--surface-muted);
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 
 @media (max-width: 1200px) {
   .summary-strip {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
@@ -1063,7 +1085,10 @@ onMounted(async () => {
     width: 100%;
   }
 
-  .summary-strip,
+  .summary-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .detail-grid,
   .form-grid {
     grid-template-columns: 1fr;
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
index c1b540a..69e1a35 100644
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@@ -306,151 +306,223 @@ onMounted(refresh);
 .metric-list,
 .status-list {
   display: grid;
-  gap: 10px;
+  gap: 12px;
 }
 
 .metric-item,
 .category-item {
-  padding: 10px 12px;
-  border: 1px solid #d8e2eb;
-  border-radius: 6px;
-  background: #f7fafc;
+  padding: 14px 16px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  transition: var(--transition);
+}
+
+.metric-item:hover,
+.category-item:hover {
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  transform: translateX(4px);
 }
 
 .metric-top {
   display: flex;
   justify-content: space-between;
-  gap: 8px;
-  font-size: 13px;
-  color: #314b60;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--text-sub);
+  font-weight: 500;
 }
 
 .metric-top strong {
-  font-size: 16px;
-  color: #1f3447;
+  font-size: 22px;
+  color: var(--text-main);
+  font-weight: 700;
+  letter-spacing: -0.02em;
 }
 
 .metric-track,
 .status-track {
-  margin-top: 8px;
-  height: 6px;
-  background: #e3ebf2;
+  margin-top: 10px;
+  height: 8px;
+  background: #e2e8f0;
   border-radius: 999px;
   overflow: hidden;
 }
 
-.metric-fill,
+.metric-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 999px;
+  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .status-fill {
   height: 100%;
-  background: #3a78b7;
+  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
+  border-radius: 999px;
+  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .status-item {
   display: grid;
-  grid-template-columns: 80px 1fr 42px;
+  grid-template-columns: 72px 1fr 48px;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+  padding: 12px 16px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
 }
 
-.status-label,
-.status-value {
-  font-size: 12px;
-  color: #566d80;
+.status-item:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-1px);
+}
+
+.status-label {
+  font-size: 13px;
+  color: var(--text-sub);
+  font-weight: 500;
 }
 
 .status-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-main);
   text-align: right;
-  font-weight: 600;
-  color: #1f3447;
 }
 
 .timeline-chart {
   display: grid;
-  grid-template-columns: 44px 1fr;
-  gap: 10px;
+  grid-template-columns: 48px 1fr;
+  gap: 16px;
   align-items: center;
+  padding: 8px 0;
 }
 
 .y-axis {
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   font-size: 11px;
-  color: #708494;
+  color: var(--text-soft);
   text-align: right;
-  padding-right: 4px;
+  padding-right: 8px;
+  font-weight: 500;
 }
 
 .chart-area {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 .chart-canvas {
   position: relative;
   width: 100%;
-  height: 168px;
+  height: 180px;
+  background: linear-gradient(180deg, rgba(59, 130, 246, 0.02) 0%, transparent 100%);
+  border-radius: var(--radius-sm);
 }
 
 .timeline-svg {
   width: 100%;
-  height: 168px;
+  height: 180px;
 }
 
 .timeline-grid {
-  stroke: #dde7ef;
-  stroke-width: 0.6;
+  stroke: #e2e8f0;
+  stroke-width: 0.8;
   fill: none;
 }
 
 .timeline-line {
   fill: none;
-  stroke: #2f76ba;
-  stroke-width: 0.26;
+  stroke: url(#lineGradient);
+  stroke: #3b82f6;
+  stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
+  filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
 }
 
 .timeline-dot {
   position: absolute;
-  width: 4px;
-  height: 4px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: #2f76ba;
+  background: #3b82f6;
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
   transform: translate(-50%, -50%);
+  transition: var(--transition);
+}
+
+.timeline-dot:hover {
+  transform: translate(-50%, -50%) scale(1.5);
 }
 
 .x-axis {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
-  gap: 2px;
+  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
+  gap: 4px;
   font-size: 10px;
-  color: #708494;
+  color: var(--text-soft);
   text-align: center;
+  font-weight: 500;
 }
 
 .category-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 12px;
+}
+
+.category-item {
+  padding: 16px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+}
+
+.category-item:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
 }
 
 .category-name {
-  font-size: 12px;
-  color: #5e7383;
+  font-size: 13px;
+  color: var(--text-sub);
+  font-weight: 500;
 }
 
 .category-count {
-  margin-top: 6px;
-  font-size: 18px;
+  margin-top: 8px;
+  font-size: 24px;
   font-weight: 700;
-  color: #1f3447;
+  color: var(--text-main);
+  letter-spacing: -0.02em;
+}
+
+.admin-empty {
+  padding: 32px 0;
+  font-size: 14px;
+  text-align: center;
+  color: var(--text-soft);
 }
 
 @media (max-width: 1100px) {
   .dashboard-grid {
     grid-template-columns: 1fr;
   }
+  
+  .category-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
 }
 </style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 2b7cf13..c071a22 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,26 +1,52 @@
 <template>
   <div class="login-page">
+    <div class="login-background">
+      <div class="login-shape login-shape-1"></div>
+      <div class="login-shape login-shape-2"></div>
+      <div class="login-shape login-shape-3"></div>
+    </div>
     <div class="login-card">
       <div class="login-logo">
-        <img :src="logoUrl" alt="公司标识" />
+        <div class="logo-icon">
+          <img :src="logoUrl" alt="公司标识" />
+        </div>
       </div>
       <div class="login-title">固定资产管理系统</div>
       <div class="login-subtitle">企业内网资产台账与审批平台</div>
 
-      <el-form :model="form" @submit.prevent>
+      <el-form :model="form" @submit.prevent class="login-form">
         <el-form-item>
-          <el-input v-model="form.username" placeholder="请输入用户名" @keyup.enter="submit" />
+          <el-input 
+            v-model="form.username" 
+            placeholder="请输入用户名" 
+            size="large"
+            :prefix-icon="User"
+            @keyup.enter="submit" 
+          />
         </el-form-item>
         <el-form-item>
-          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password @keyup.enter="submit" />
+          <el-input 
+            v-model="form.password" 
+            type="password" 
+            placeholder="请输入密码" 
+            size="large"
+            :prefix-icon="Lock"
+            show-password 
+            @keyup.enter="submit" 
+          />
         </el-form-item>
-        <el-button class="login-submit" @click="submit" :loading="loading">
-          <el-icon><Key /></el-icon>
+        <el-button class="login-submit" type="primary" size="large" @click="submit" :loading="loading">
           <span>登录系统</span>
+          <el-icon class="login-arrow"><ArrowRight /></el-icon>
         </el-button>
       </el-form>
 
-      <div class="login-note">默认管理员账号：admin / admin123</div>
+      <div class="login-footer">
+        <div class="login-note">默认管理员账号：<code>admin</code> / <code>admin123</code></div>
+      </div>
+    </div>
+    <div class="login-copyright">
+      <span>© 2024 固定资产管理系统 · 企业内网平台</span>
     </div>
   </div>
 </template>
@@ -28,7 +54,7 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useRouter } from "vue-router";
-import { Key } from "@element-plus/icons-vue";
+import { ArrowRight, Lock, User } from "@element-plus/icons-vue";
 import { authApi } from "../api/auth";
 import { useAuthStore } from "../store/auth";
 import logoUrl from "../assets/company-logo.svg";
@@ -59,54 +85,250 @@ const submit = async () => {
 <style scoped>
 .login-page {
   min-height: 100vh;
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 24px;
-  background: #bcc5cf;
+  background: linear-gradient(135deg, #1e3a5f 0%, #0d253f 50%, #1a365d 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.login-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.login-shape {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.1;
+}
+
+.login-shape-1 {
+  width: 600px;
+  height: 600px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  top: -200px;
+  right: -100px;
+  animation: float 20s ease-in-out infinite;
+}
+
+.login-shape-2 {
+  width: 400px;
+  height: 400px;
+  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+  bottom: -100px;
+  left: -100px;
+  animation: float 15s ease-in-out infinite reverse;
+}
+
+.login-shape-3 {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: pulse 10s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(20px, -20px) rotate(5deg);
+  }
+  50% {
+    transform: translate(-10px, 20px) rotate(-5deg);
+  }
+  75% {
+    transform: translate(-20px, -10px) rotate(3deg);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.1;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.1);
+    opacity: 0.15;
+  }
 }
 
 .login-card {
-  width: min(390px, 92vw);
-  padding: 28px 28px 24px;
-  border: 1px solid #aebbc8;
-  border-radius: 8px;
-  background: rgba(248, 251, 253, 0.96);
+  width: min(420px, 92vw);
+  padding: 40px 36px 32px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  box-shadow: 
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  position: relative;
+  z-index: 10;
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .login-logo {
   display: flex;
   justify-content: center;
-  margin-bottom: 12px;
+  margin-bottom: 20px;
+}
+
+.logo-icon {
+  width: 72px;
+  height: 72px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
+  padding: 12px;
 }
 
-.login-logo img {
-  width: 56px;
-  height: 56px;
+.logo-icon img {
+  width: 100%;
+  height: 100%;
   object-fit: contain;
+  filter: brightness(0) invert(1);
 }
 
 .login-title {
-  font-size: 24px;
+  font-size: 26px;
   font-weight: 700;
-  color: #1e3346;
+  color: #1a202c;
   text-align: center;
+  letter-spacing: -0.02em;
+  margin-bottom: 6px;
 }
 
 .login-subtitle {
-  margin: 6px 0 20px;
-  font-size: 12px;
-  color: #6a7f90;
+  margin-bottom: 28px;
+  font-size: 14px;
+  color: #64748b;
   text-align: center;
 }
 
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.login-form :deep(.el-input__wrapper) {
+  padding: 4px 12px;
+  border-radius: 10px !important;
+  box-shadow: 0 0 0 1px #e2e8f0 inset !important;
+  transition: all 0.2s ease !important;
+}
+
+.login-form :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #cbd5e1 inset !important;
+}
+
+.login-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 2px #3b82f6 inset !important;
+}
+
+.login-form :deep(.el-input__inner) {
+  font-size: 15px;
+  padding: 8px 0;
+}
+
+.login-form :deep(.el-input__prefix) {
+  color: #94a3b8;
+}
+
 .login-submit {
   width: 100%;
+  height: 48px;
+  margin-top: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 10px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.login-arrow {
+  transition: transform 0.2s ease;
+}
+
+.login-submit:hover .login-arrow {
+  transform: translateX(4px);
+}
+
+.login-footer {
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid #e2e8f0;
 }
 
 .login-note {
-  margin-top: 14px;
+  font-size: 13px;
+  color: #94a3b8;
+  text-align: center;
+}
+
+.login-note code {
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
   font-size: 12px;
-  color: #748899;
+  color: #64748b;
+}
+
+.login-copyright {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  right: 0;
   text-align: center;
+  z-index: 10;
+}
+
+.login-copyright span {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 480px) {
+  .login-card {
+    padding: 32px 24px 28px;
+  }
+  
+  .login-title {
+    font-size: 22px;
+  }
+  
+  .logo-icon {
+    width: 60px;
+    height: 60px;
+  }
 }
 </style>
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 9e43375..ced473a 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1,26 +1,42 @@
 :root {
-  font-family: "IBM Plex Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
+  font-family: "Inter", "IBM Plex Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
     "Source Han Sans SC", sans-serif;
-  color: #1f3447;
-  background-color: #edf3f8;
-  --shell-bg: #edf3f8;
-  --sidebar-bg: #4c83bf;
-  --sidebar-line: #3f74ad;
-  --sidebar-hover: rgba(255, 255, 255, 0.14);
-  --sidebar-active: rgba(255, 255, 255, 0.2);
+  color: #1a202c;
+  background-color: #f0f4f8;
+  --shell-bg: #f0f4f8;
+  --sidebar-bg: linear-gradient(180deg, #1e3a5f 0%, #0d253f 100%);
+  --sidebar-bg-solid: #1e3a5f;
+  --sidebar-line: rgba(255, 255, 255, 0.08);
+  --sidebar-hover: rgba(255, 255, 255, 0.12);
+  --sidebar-active: rgba(99, 179, 237, 0.2);
   --surface: #ffffff;
-  --surface-muted: #f7fafc;
-  --line: #d8e2eb;
-  --line-strong: #c4d2de;
-  --text-main: #1f3447;
-  --text-sub: #667b8c;
-  --text-soft: #8395a5;
-  --brand: #2f6aa5;
-  --brand-soft: #e8f0f8;
-  --success-soft: #edf8f1;
-  --warning-soft: #fff7e8;
-  --danger-soft: #fdeeee;
-  --radius: 6px;
+  --surface-muted: #f8fafc;
+  --surface-hover: #f1f5f9;
+  --line: #e2e8f0;
+  --line-strong: #cbd5e1;
+  --text-main: #1a202c;
+  --text-sub: #64748b;
+  --text-soft: #94a3b8;
+  --brand: #3b82f6;
+  --brand-dark: #2563eb;
+  --brand-soft: #eff6ff;
+  --success: #10b981;
+  --success-soft: #ecfdf5;
+  --warning: #f59e0b;
+  --warning-soft: #fffbeb;
+  --danger: #ef4444;
+  --danger-soft: #fef2f2;
+  --info: #06b6d4;
+  --info-soft: #ecfeff;
+  --radius: 10px;
+  --radius-sm: 6px;
+  --radius-lg: 14px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 * {
@@ -53,14 +69,16 @@ a {
   top: 0;
   left: 0;
   bottom: 0;
-  width: 220px;
+  width: 240px;
   z-index: 35;
   background: var(--sidebar-bg);
-  color: #eef5fb;
-  padding: 12px 10px;
-  border-right: 1px solid var(--sidebar-line);
+  background: linear-gradient(180deg, #1e3a5f 0%, #0d253f 100%);
+  color: #e2e8f0;
+  padding: 16px 12px;
+  border-right: none;
+  box-shadow: var(--shadow-xl);
   transform: translateX(0);
-  transition: transform 0.2s ease;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .app-shell.drawer-collapsed .sidebar {
@@ -69,40 +87,46 @@ a {
 
 .brand {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   align-items: center;
-  min-height: 42px;
-  margin-bottom: 14px;
-  padding: 4px;
+  min-height: 52px;
+  margin-bottom: 20px;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius);
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .brand-mark {
-  width: 30px;
-  height: 30px;
-  border-radius: 6px;
-  background: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.72);
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border: none;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
 }
 
 .brand-mark.has-logo {
   background-color: transparent;
+  box-shadow: none;
 }
 
 .brand-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
-  color: #f6fbff;
-  line-height: 1.2;
+  color: #ffffff;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
 }
 
 .brand-sub {
   font-size: 11px;
-  color: rgba(238, 245, 251, 0.82);
+  color: rgba(226, 232, 240, 0.7);
   line-height: 1.2;
-  margin-top: 2px;
+  margin-top: 3px;
 }
 
 .nav {
@@ -112,75 +136,82 @@ a {
 
 .nav .el-menu {
   background: transparent !important;
+  border: none !important;
 }
 
 .nav .el-menu-item,
 .nav .el-sub-menu__title {
-  color: #edf5fb;
+  color: #cbd5e1;
   font-size: 13px;
-  height: 36px;
-  line-height: 36px;
-  border-radius: 6px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: var(--radius-sm);
   margin-bottom: 4px;
   background: transparent;
-  border: 1px solid transparent;
-  transition: all 0.16s ease;
+  border: none;
+  transition: var(--transition);
+  font-weight: 500;
 }
 
 .nav .el-menu-item:hover,
 .nav .el-sub-menu__title:hover {
   color: #ffffff;
   background: var(--sidebar-hover);
-  border-color: rgba(255, 255, 255, 0.14);
 }
 
 .nav .el-menu-item.is-active {
   color: #ffffff;
   background: var(--sidebar-active);
-  border-color: rgba(255, 255, 255, 0.22);
+  border-left: 3px solid #3b82f6;
+  margin-left: -3px;
 }
 
 .nav .el-menu-item .el-icon,
 .nav .el-sub-menu__title .el-icon {
-  margin-right: 8px;
-  font-size: 14px;
+  margin-right: 10px;
+  font-size: 16px;
   color: inherit;
 }
 
 .nav .el-sub-menu .el-menu {
   background: transparent !important;
+  padding-left: 8px;
 }
 
 .nav .el-sub-menu .el-menu-item {
-  color: #edf5fb;
+  color: #94a3b8;
   background: transparent;
-  height: 32px;
-  line-height: 32px;
-  margin-bottom: 4px;
-  border-radius: 6px;
-  padding-left: 40px !important;
-  border: 1px solid transparent;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 2px;
+  border-radius: var(--radius-sm);
+  padding-left: 44px !important;
+  border: none;
+  font-size: 12px;
 }
 
 .nav .el-sub-menu .el-menu-item:hover {
+  color: #ffffff;
   background: var(--sidebar-hover);
-  border-color: rgba(255, 255, 255, 0.14);
 }
 
 .nav .el-sub-menu .el-menu-item.is-active {
   color: #ffffff;
   background: var(--sidebar-active);
-  border-color: rgba(255, 255, 255, 0.22);
+  border-left: 2px solid #60a5fa;
+  margin-left: -2px;
 }
 
 .nav .el-sub-menu__title .el-sub-menu__icon-arrow {
-  color: rgba(238, 245, 251, 0.88);
+  color: #94a3b8;
 }
 
 .content {
-  margin-left: 220px;
-  padding: 14px 16px 20px;
-  transition: margin-left 0.2s ease;
+  margin-left: 240px;
+  padding: 20px 24px 24px;
+  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--shell-bg);
+  min-height: 100vh;
 }
 
 .app-shell.drawer-collapsed .content {
@@ -191,37 +222,40 @@ a {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  border: 1px solid var(--line);
+  gap: 16px;
+  padding: 14px 18px;
+  margin-bottom: 16px;
+  border: none;
   border-radius: var(--radius);
   background: var(--surface);
+  box-shadow: var(--shadow);
 }
 
 .topbar-main {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
 .topbar-title {
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 700;
-  color: #1c3448;
+  color: var(--text-main);
+  letter-spacing: -0.01em;
 }
 
 .topbar-meta {
   font-size: 12px;
   color: var(--text-sub);
+  margin-top: 2px;
 }
 
 .topbar-user {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   color: var(--text-sub);
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .topbar-user strong {
@@ -230,9 +264,10 @@ a {
 }
 
 .drawer-toggle {
-  min-width: 32px !important;
-  width: 32px;
-  padding: 6px !important;
+  min-width: 36px !important;
+  width: 36px;
+  height: 36px;
+  padding: 0 !important;
 }
 
 .page {
@@ -245,33 +280,34 @@ a {
 .admin-page {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  min-height: calc(100vh - 110px);
+  gap: 16px;
+  min-height: calc(100vh - 120px);
 }
 
 .admin-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  gap: 16px;
   flex-wrap: wrap;
 }
 
 .admin-heading {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .admin-title {
-  font-size: 18px;
+  font-size: 22px;
   font-weight: 700;
   color: var(--text-main);
   line-height: 1.2;
+  letter-spacing: -0.02em;
 }
 
 .admin-subtitle {
-  font-size: 12px;
+  font-size: 13px;
   color: var(--text-sub);
 }
 
@@ -279,16 +315,22 @@ a {
 .admin-filter-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .admin-card {
   background: var(--surface);
-  border: 1px solid var(--line);
+  border: none;
   border-radius: var(--radius);
-  padding: 12px;
+  padding: 18px;
   min-width: 0;
+  box-shadow: var(--shadow);
+  transition: var(--transition);
+}
+
+.admin-card:hover {
+  box-shadow: var(--shadow-md);
 }
 
 .admin-card.is-tight {
@@ -299,19 +341,20 @@ a {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 8px;
+  gap: 12px;
   flex-wrap: wrap;
-  margin-bottom: 10px;
+  margin-bottom: 14px;
 }
 
 .admin-card-title {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
-  color: #22394d;
+  color: var(--text-main);
+  letter-spacing: -0.01em;
 }
 
 .admin-card-subtitle {
-  margin-top: 3px;
+  margin-top: 4px;
   font-size: 12px;
   color: var(--text-sub);
 }
@@ -319,53 +362,82 @@ a {
 .admin-grid,
 .admin-grid-2 {
   display: grid;
-  gap: 12px;
+  gap: 16px;
 }
 
 .admin-grid-2 {
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
 }
 
 .admin-summary-strip {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
 }
 
 .admin-summary-card {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-height: 60px;
-  padding: 10px 12px;
-  border: 1px solid var(--line);
-  background: var(--surface-muted);
+  gap: 14px;
+  min-height: 72px;
+  padding: 14px 16px;
+  border: none;
+  background: var(--surface);
   border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  transition: var(--transition);
+}
+
+.admin-summary-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }
 
 .admin-summary-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  font-size: 14px;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-sm);
+  font-size: 20px;
   color: var(--brand);
   background: var(--brand-soft);
 }
 
+.admin-summary-icon.success {
+  color: var(--success);
+  background: var(--success-soft);
+}
+
+.admin-summary-icon.warning {
+  color: var(--warning);
+  background: var(--warning-soft);
+}
+
+.admin-summary-icon.danger {
+  color: var(--danger);
+  background: var(--danger-soft);
+}
+
+.admin-summary-icon.info {
+  color: var(--info);
+  background: var(--info-soft);
+}
+
 .admin-summary-label {
-  font-size: 12px;
+  font-size: 13px;
   color: var(--text-sub);
+  font-weight: 500;
 }
 
 .admin-summary-value {
-  margin-top: 3px;
-  font-size: 20px;
+  margin-top: 4px;
+  font-size: 26px;
   font-weight: 700;
-  color: #152a3c;
+  color: var(--text-main);
   line-height: 1;
+  letter-spacing: -0.02em;
 }
 
 .admin-table-foot {
@@ -432,12 +504,15 @@ a {
 
 .el-button {
   gap: 6px;
-  padding: 7px 12px !important;
-  border-radius: 4px !important;
-  background: transparent !important;
-  border: 1px solid #9fc0db !important;
-  color: #1a4d6f !important;
-  box-shadow: none !important;
+  padding: 8px 16px !important;
+  border-radius: var(--radius-sm) !important;
+  background: var(--surface) !important;
+  border: 1px solid var(--line) !important;
+  color: var(--text-main) !important;
+  box-shadow: var(--shadow-sm) !important;
+  font-weight: 500;
+  font-size: 13px;
+  transition: var(--transition) !important;
 }
 
 .el-button .el-icon {
@@ -446,26 +521,62 @@ a {
 
 .el-button:hover,
 .el-button:focus {
-  background: rgba(255, 255, 255, 0.45) !important;
-  border-color: #6f9fc7 !important;
-  color: #113e5d !important;
+  background: var(--surface-hover) !important;
+  border-color: var(--line-strong) !important;
+  color: var(--text-main) !important;
+  box-shadow: var(--shadow) !important;
 }
 
 .el-button.is-disabled {
-  opacity: 0.58;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.el-button--primary {
+  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
+  border-color: var(--brand-dark) !important;
+  color: #ffffff !important;
+  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
+}
+
+.el-button--primary:hover,
+.el-button--primary:focus {
+  background: linear-gradient(135deg, var(--brand-dark) 0%, #1d4ed8 100%) !important;
+  border-color: #1d4ed8 !important;
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4) !important;
+}
+
+.el-button--success {
+  background: linear-gradient(135deg, var(--success) 0%, #059669 100%) !important;
+  border-color: #059669 !important;
+  color: #ffffff !important;
+  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
+}
+
+.el-button--danger {
+  background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%) !important;
+  border-color: #dc2626 !important;
+  color: #ffffff !important;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
 }
 
-.el-button--primary,
-.el-button--success,
-.el-button--danger,
 .el-button--warning {
-  background: transparent !important;
+  background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%) !important;
+  border-color: #d97706 !important;
+  color: #ffffff !important;
+  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
 }
 
 .el-button.is-link {
-  padding: 0 4px !important;
+  padding: 0 6px !important;
   border: none !important;
   min-height: auto;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.el-button.is-link:hover {
+  background: var(--brand-soft) !important;
 }
 
 .el-input__wrapper,
@@ -474,8 +585,21 @@ a {
 .el-date-editor.el-input,
 .el-date-editor.el-input__wrapper,
 .el-input-number {
-  border-radius: 4px !important;
-  box-shadow: 0 0 0 1px #cddae6 inset !important;
+  border-radius: var(--radius-sm) !important;
+  box-shadow: 0 0 0 1px var(--line) inset !important;
+  transition: var(--transition) !important;
+}
+
+.el-input__wrapper:hover,
+.el-select__wrapper:hover,
+.el-textarea__inner:hover {
+  box-shadow: 0 0 0 1px var(--line-strong) inset !important;
+}
+
+.el-input__wrapper.is-focus,
+.el-select__wrapper.is-focus,
+.el-textarea__inner:focus {
+  box-shadow: 0 0 0 2px var(--brand) inset !important;
 }
 
 .el-textarea__inner,
@@ -485,43 +609,88 @@ a {
 
 .el-table {
   --el-table-border-color: var(--line);
-  --el-table-header-bg-color: #f7fafc;
-  --el-table-row-hover-bg-color: #f5f9fd;
-  --el-table-current-row-bg-color: #eef5fb;
+  --el-table-header-bg-color: var(--surface-muted);
+  --el-table-row-hover-bg-color: var(--brand-soft);
+  --el-table-current-row-bg-color: var(--brand-soft);
   width: 100%;
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 
 .el-table th.el-table__cell {
-  background: #f7fafc !important;
-  color: #314b60;
-  font-weight: 700;
+  background: var(--surface-muted) !important;
+  color: var(--text-main);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .el-table .el-table__cell {
-  padding: 8px 0;
+  padding: 12px 0;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background: var(--surface-muted);
 }
 
 .el-dialog,
 .el-drawer__body {
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
 }
 
 .el-dialog {
-  border: 1px solid var(--line);
+  border: none;
+  box-shadow: var(--shadow-xl);
+}
+
+.el-drawer {
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
 }
 
 .el-tabs__item {
-  height: 34px;
-  line-height: 34px;
+  height: 38px;
+  line-height: 38px;
+  font-weight: 500;
 }
 
 .el-tag {
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+}
+
+.el-tag--success {
+  background: var(--success-soft);
+  border-color: var(--success);
+  color: var(--success);
+}
+
+.el-tag--warning {
+  background: var(--warning-soft);
+  border-color: var(--warning);
+  color: var(--warning);
+}
+
+.el-tag--danger {
+  background: var(--danger-soft);
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+.el-tag--info {
+  background: var(--info-soft);
+  border-color: var(--info);
+  color: var(--info);
 }
 
 .el-pagination {
   flex-wrap: wrap;
-  row-gap: 8px;
+  row-gap: 10px;
+}
+
+.el-pagination .el-pager li {
+  border-radius: var(--radius-sm);
+  font-weight: 500;
 }
 
 .el-icon svg {
@@ -530,15 +699,68 @@ a {
 
 @media (max-width: 1080px) {
   .sidebar {
-    width: 208px;
+    width: 220px;
   }
 
   .content {
     margin-left: 0;
-    padding: 12px;
+    padding: 16px;
   }
 
   .admin-detail-grid {
     grid-template-columns: 1fr;
   }
+  
+  .admin-summary-strip {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    max-width: 280px;
+  }
+  
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .topbar-user {
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .admin-title {
+    font-size: 18px;
+  }
+  
+  .admin-card {
+    padding: 14px;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.admin-card {
+  animation: fadeIn 0.3s ease-out;
 }
+
+.admin-summary-card {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.admin-summary-card:nth-child(1) { animation-delay: 0.05s; }
+.admin-summary-card:nth-child(2) { animation-delay: 0.1s; }
+.admin-summary-card:nth-child(3) { animation-delay: 0.15s; }
+.admin-summary-card:nth-child(4) { animation-delay: 0.2s; }