From 3b359a7fd5f2d09e746befab4a94d39bfdf53ede Mon Sep 17 00:00:00 2001
From: qiaoxinjiu <qiaoxinjiu@sparkedu.com>
Date: Mon, 18 May 2026 16:18:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=85=A8=E5=B1=80=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8E=E7=99=BB=E5=BD=95=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App 全局主题变量与 Element 组件暗色适配
- 首页、测试平台布局与主题切换
- 登录/注册页改版并支持明暗主题切换
- 用例列表等页面样式与主题保持一致

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/App.vue                                   | 416 ++++++++++++++++++
 src/components/EffektHome.vue                 | 259 ++++++++---
 src/components/Home.vue                       | 374 ++++++++++++++--
 src/components/TestPlatform/Case/CaseList.vue |  94 ++--
 src/components/User/Login.vue                 | 318 ++++++++++---
 src/components/User/Register.vue              | 385 +++++++++++++++-
 6 files changed, 1652 insertions(+), 194 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3e2ef48..8d5ed0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,7 @@ import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'
 export default {
   name: 'App',
   mounted() {
+    this.applyTheme()
     const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
     const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
     if (authUser) {
@@ -20,6 +21,11 @@ export default {
     }
   },
   methods: {
+    applyTheme() {
+      const theme = localStorage.getItem('uiTheme') || 'dark'
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
+    },
     loadUserMenus(authUser) {
       const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
       if (!roleId) {
@@ -34,7 +40,417 @@ export default {
 </script>
 
 <style>
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #070b16;
+  color: #dbeafe;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
+}
+
 #app{
   height: 100%;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button,
+.el-button,
+.el-link,
+.el-menu-item,
+.el-submenu__title {
+  cursor: pointer;
+}
+
+.el-card {
+  border-color: rgba(148, 163, 184, 0.2);
+  background: #111827;
+  color: #e5e7eb;
+}
+
+.el-table,
+.el-table__expanded-cell {
+  background-color: #111827 !important;
+  color: #e5e7eb !important;
+}
+
+.el-table th,
+.el-table tr,
+.el-table td {
+  background-color: #111827 !important;
+  color: #e5e7eb !important;
+}
+
+.el-table th,
+.el-table thead,
+.el-table__header-wrapper th,
+.el-table__fixed-header-wrapper th {
+  background: #1f2937 !important;
+  color: #f8fafc !important;
+  font-weight: 700;
+}
+
+.el-table .cell,
+.el-table th > .cell,
+.el-table__body-wrapper,
+.el-table__fixed-body-wrapper {
+  color: inherit !important;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
+}
+
+.el-table--border,
+.el-table--group,
+.el-table--border td,
+.el-table--border th,
+.el-table__fixed-right-patch {
+  border-color: rgba(148, 163, 184, 0.18) !important;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #162033 !important;
+  color: #e5e7eb !important;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td,
+.el-table__body tr.hover-row > td,
+.el-table__body tr.hover-row.current-row > td,
+.el-table__body tr.hover-row.el-table__row--striped > td,
+.el-table__body tr.hover-row.el-table__row--striped.current-row > td {
+  background-color: #233149 !important;
+  color: #f8fafc !important;
+}
+
+.el-table__body tr.current-row > td,
+.el-table__body tr.current-row:hover > td {
+  background-color: rgba(56, 189, 248, 0.16) !important;
+  color: #f8fafc !important;
+}
+
+.el-table__fixed,
+.el-table__fixed-right,
+.el-table__fixed::before,
+.el-table__fixed-right::before {
+  background-color: #111827 !important;
+}
+
+.el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: rgba(148, 163, 184, 0.18) !important;
+}
+
+.el-form-item__label,
+.el-checkbox,
+.el-radio,
+.el-dialog__body,
+.el-pagination,
+.el-pagination button,
+.el-pagination span:not([class*=suffix]),
+.el-select-dropdown__item,
+.el-dropdown-menu__item {
+  color: #dbeafe;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-select .el-input__inner,
+.el-date-editor .el-input__inner {
+  background-color: #0f172a;
+  border-color: rgba(148, 163, 184, 0.28);
+  color: #f8fafc;
+}
+
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: #64748b;
+}
+
+.el-input__inner:hover,
+.el-textarea__inner:hover,
+.el-input__inner:focus,
+.el-textarea__inner:focus {
+  border-color: #38bdf8;
+}
+
+.el-dialog,
+.el-drawer,
+.el-message-box {
+  background: #111827;
+  color: #e5e7eb;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.el-dialog__title,
+.el-message-box__title {
+  color: #f8fafc;
+}
+
+.el-dialog__header,
+.el-dialog__footer,
+.el-message-box__header,
+.el-message-box__content {
+  border-color: rgba(148, 163, 184, 0.16);
+}
+
+.el-select-dropdown,
+.el-dropdown-menu,
+.el-picker-panel {
+  background: #111827;
+  border-color: rgba(148, 163, 184, 0.22);
+  color: #e5e7eb;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-dropdown-menu__item:hover {
+  background-color: #1e293b;
+  color: #f8fafc;
+}
+
+.el-select-dropdown__item.selected {
+  color: #38bdf8;
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next,
+.el-pager li {
+  background: #111827;
+  color: #dbeafe;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.el-pager li.active {
+  color: #38bdf8;
+  border-color: rgba(56, 189, 248, 0.5);
+}
+
+.el-tag {
+  border-color: rgba(56, 189, 248, 0.28);
+  background: rgba(56, 189, 248, 0.12);
+  color: #bae6fd;
+}
+
+.el-card__header {
+  background: #162033;
+  border-bottom-color: rgba(148, 163, 184, 0.18);
+  color: #f8fafc;
+}
+
+.el-tabs__item {
+  color: #cbd5e1;
+}
+
+.el-tabs__item:hover,
+.el-tabs__item.is-active {
+  color: #38bdf8;
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: rgba(148, 163, 184, 0.18);
+}
+
+.el-popover,
+.el-tooltip__popper.is-light {
+  background: #111827;
+  border-color: rgba(148, 163, 184, 0.22);
+  color: #e5e7eb;
+}
+
+.el-tree,
+.el-tree-node__content {
+  background: transparent;
+  color: #e5e7eb;
+}
+
+.el-tree-node__content:hover,
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #1e293b;
+  color: #f8fafc;
+}
+
+.el-loading-mask {
+  background-color: rgba(15, 23, 42, 0.72);
+}
+
+body.theme-light {
+  background: #eef4ff;
+  color: #1f2937;
+}
+
+body.theme-light .el-card {
+  border-color: #dbe5f3;
+  background: #ffffff;
+  color: #1f2937;
+  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
+}
+
+body.theme-light .el-table,
+body.theme-light .el-table__expanded-cell {
+  background-color: #ffffff !important;
+  color: #1f2937 !important;
+}
+
+body.theme-light .el-table th,
+body.theme-light .el-table tr,
+body.theme-light .el-table td {
+  background-color: #ffffff !important;
+  color: #1f2937 !important;
+}
+
+body.theme-light .el-table th,
+body.theme-light .el-table thead,
+body.theme-light .el-table__header-wrapper th,
+body.theme-light .el-table__fixed-header-wrapper th {
+  background: #f1f6ff !important;
+  color: #0f172a !important;
+}
+
+body.theme-light .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #f8fbff !important;
+  color: #1f2937 !important;
+}
+
+body.theme-light .el-table--enable-row-hover .el-table__body tr:hover > td,
+body.theme-light .el-table__body tr.hover-row > td,
+body.theme-light .el-table__body tr.hover-row.current-row > td,
+body.theme-light .el-table__body tr.hover-row.el-table__row--striped > td,
+body.theme-light .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
+  background-color: #eaf2ff !important;
+  color: #0f172a !important;
+}
+
+body.theme-light .el-table__body tr.current-row > td,
+body.theme-light .el-table__body tr.current-row:hover > td {
+  background-color: #dbeafe !important;
+  color: #0f172a !important;
+}
+
+body.theme-light .el-table td,
+body.theme-light .el-table th.is-leaf,
+body.theme-light .el-table--border,
+body.theme-light .el-table--group,
+body.theme-light .el-table--border td,
+body.theme-light .el-table--border th,
+body.theme-light .el-table__fixed-right-patch {
+  border-color: #e2e8f0 !important;
+}
+
+body.theme-light .el-table__fixed,
+body.theme-light .el-table__fixed-right,
+body.theme-light .el-table__fixed::before,
+body.theme-light .el-table__fixed-right::before {
+  background-color: #ffffff !important;
+}
+
+body.theme-light .el-table::before,
+body.theme-light .el-table--group::after,
+body.theme-light .el-table--border::after {
+  background-color: #e2e8f0 !important;
+}
+
+body.theme-light .el-form-item__label,
+body.theme-light .el-checkbox,
+body.theme-light .el-radio,
+body.theme-light .el-dialog__body,
+body.theme-light .el-pagination,
+body.theme-light .el-pagination button,
+body.theme-light .el-pagination span:not([class*=suffix]),
+body.theme-light .el-select-dropdown__item,
+body.theme-light .el-dropdown-menu__item {
+  color: #334155;
+}
+
+body.theme-light .el-input__inner,
+body.theme-light .el-textarea__inner,
+body.theme-light .el-select .el-input__inner,
+body.theme-light .el-date-editor .el-input__inner {
+  background-color: #ffffff;
+  border-color: #d8e1ef;
+  color: #0f172a;
+}
+
+body.theme-light .el-input__inner::placeholder,
+body.theme-light .el-textarea__inner::placeholder {
+  color: #94a3b8;
+}
+
+body.theme-light .el-dialog,
+body.theme-light .el-drawer,
+body.theme-light .el-message-box,
+body.theme-light .el-select-dropdown,
+body.theme-light .el-dropdown-menu,
+body.theme-light .el-picker-panel,
+body.theme-light .el-popover,
+body.theme-light .el-tooltip__popper.is-light {
+  background: #ffffff;
+  border-color: #dbe5f3;
+  color: #1f2937;
+}
+
+body.theme-light .el-dialog__title,
+body.theme-light .el-message-box__title,
+body.theme-light .el-card__header {
+  color: #0f172a;
+}
+
+body.theme-light .el-card__header {
+  background: #f8fbff;
+  border-bottom-color: #e2e8f0;
+}
+
+body.theme-light .el-select-dropdown__item.hover,
+body.theme-light .el-select-dropdown__item:hover,
+body.theme-light .el-dropdown-menu__item:hover,
+body.theme-light .el-tree-node__content:hover,
+body.theme-light .el-tree-node:focus > .el-tree-node__content {
+  background-color: #eaf2ff;
+  color: #0f172a;
+}
+
+body.theme-light .el-pagination .btn-prev,
+body.theme-light .el-pagination .btn-next,
+body.theme-light .el-pager li {
+  background: #ffffff;
+  color: #334155;
+  border-color: #e2e8f0;
+}
+
+body.theme-light .el-tabs__item {
+  color: #64748b;
+}
+
+body.theme-light .el-tabs__item:hover,
+body.theme-light .el-tabs__item.is-active,
+body.theme-light .el-select-dropdown__item.selected,
+body.theme-light .el-pager li.active {
+  color: #2563eb;
+}
+
+body.theme-light .el-tabs__nav-wrap::after {
+  background-color: #e2e8f0;
+}
+
+body.theme-light .el-tag {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+body.theme-light .el-tree,
+body.theme-light .el-tree-node__content {
+  color: #334155;
+}
+
+body.theme-light .el-loading-mask {
+  background-color: rgba(248, 250, 252, 0.72);
 }
 </style>
diff --git a/src/components/EffektHome.vue b/src/components/EffektHome.vue
index 50b3577..707f941 100644
--- a/src/components/EffektHome.vue
+++ b/src/components/EffektHome.vue
@@ -210,8 +210,7 @@ export default {
 
 <style scoped>
 .effekt-home {
-  padding: 20px;
-  max-width: 1200px;
+  max-width: 1240px;
   margin: 0 auto;
 }
 
@@ -219,37 +218,80 @@ export default {
   margin-bottom: 20px;
 }
 
+.greet-card,
+.work-card,
+.links-card {
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 18px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+  background: #111827;
+}
+
 .greet-card,
 .work-card {
-  border-radius: 10px;
-  border: 1px solid #ebeef5;
-  min-height: 160px;
+  min-height: 174px;
+}
+
+.greet-card {
+  position: relative;
+  background: radial-gradient(circle at 88% 16%, rgba(103, 232, 249, 0.28), transparent 28%), linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(15, 23, 42, 0.96) 62%, rgba(8, 13, 27, 0.98) 100%);
+  color: #fff;
+  border-color: rgba(103, 232, 249, 0.22);
+}
+
+.greet-card:after {
+  content: '';
+  position: absolute;
+  right: -44px;
+  bottom: -54px;
+  width: 170px;
+  height: 170px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.26), transparent 68%);
+}
+
+.greet-card >>> .el-card__body,
+.work-card >>> .el-card__body,
+.links-card >>> .el-card__body {
+  padding: 24px;
+  position: relative;
+  z-index: 1;
 }
 
 .greet-line {
-  font-size: 20px;
-  font-weight: 600;
-  color: #303133;
+  font-size: 24px;
+  font-weight: 800;
+  color: #f8fbff;
   margin-bottom: 8px;
+  letter-spacing: 0.2px;
 }
 
 .greet-date {
-  color: #909399;
+  color: #bae6fd;
   font-size: 13px;
-  margin-bottom: 16px;
+  margin-bottom: 22px;
 }
 
 .greet-progress-label {
   font-size: 12px;
-  color: #606266;
+  color: rgba(224, 242, 254, 0.9);
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
+}
+
+.greet-progress >>> .el-progress-bar__outer {
+  background-color: rgba(15, 23, 42, 0.68);
+}
+
+.greet-progress >>> .el-progress-bar__inner {
+  background: linear-gradient(90deg, #22d3ee 0%, #6366f1 100%);
 }
 
 .greet-progress-tip {
   font-size: 12px;
-  color: #67c23a;
-  margin-top: 6px;
+  color: #a7f3d0;
+  margin-top: 8px;
   display: block;
 }
 
@@ -257,32 +299,52 @@ export default {
   margin-top: 8px;
 }
 
-.work-card-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 16px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ebeef5;
+.greet-login-tip >>> .el-link.el-link--primary {
+  color: #67e8f9;
+  font-weight: 700;
+}
+
+.work-card-title,
+.links-card-title {
+  position: relative;
+  font-size: 16px;
+  font-weight: 800;
+  color: #e0f2fe;
+  margin-bottom: 18px;
+  padding-left: 12px;
+  letter-spacing: 0.3px;
+}
+
+.work-card-title:before,
+.links-card-title:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 3px;
+  width: 4px;
+  height: 16px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #67e8f9 0%, #6366f1 100%);
+  box-shadow: 0 0 14px rgba(103, 232, 249, 0.55);
 }
 
 .work-stats {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  gap: 12px;
+  gap: 14px;
 }
 
 .work-stat {
   flex: 1;
-  min-width: 120px;
-  text-align: center;
-  padding: 12px 8px;
-  border-radius: 8px;
-  background: #f5f9ff;
-  border: 1px solid #e4ecfb;
+  min-width: 126px;
+  text-align: left;
+  padding: 18px;
+  border-radius: 16px;
+  background: #162033;
+  border: 1px solid rgba(148, 163, 184, 0.18);
   cursor: default;
-  transition: box-shadow 0.2s, border-color 0.2s;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
 }
 
 .work-stat--click {
@@ -290,38 +352,35 @@ export default {
 }
 
 .work-stat--click:hover {
-  border-color: #409eff;
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+  border-color: rgba(56, 189, 248, 0.52);
+  background: #1e293b;
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.14), 0 18px 34px rgba(0, 0, 0, 0.24);
+  transform: translateY(-2px);
 }
 
 .work-stat-value {
-  font-size: 28px;
-  font-weight: 600;
-  color: #409eff;
-  line-height: 1.2;
+  font-size: 32px;
+  font-weight: 900;
+  color: #67e8f9;
+  line-height: 1.1;
+  text-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
 }
 
 .work-stat-label {
-  margin-top: 8px;
+  margin-top: 10px;
   font-size: 14px;
-  color: #606266;
+  color: #dbeafe;
+  font-weight: 700;
 }
 
 .work-stat-hint {
-  margin-top: 4px;
-  font-size: 11px;
-  color: #909399;
+  margin-top: 6px;
+  font-size: 12px;
+  color: #8fb3d9;
 }
 
 .links-card {
-  border-radius: 10px;
-}
-
-.links-card-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 8px;
+  background: #111827;
 }
 
 .home-content {
@@ -330,25 +389,28 @@ export default {
 }
 
 .home-desc {
-  margin: 0 0 16px;
-  color: #606266;
+  margin: 0 0 18px;
+  color: #94a3b8;
   font-size: 13px;
 }
 
 .project-block {
-  padding: 16px 0;
-  border-bottom: 1px solid #ebeef5;
+  padding: 18px;
+  margin-bottom: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 16px;
+  background: #162033;
 }
 
 .project-block:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }
 
 .project-title {
   margin-bottom: 12px;
   font-size: 16px;
-  font-weight: 600;
-  color: #303133;
+  font-weight: 800;
+  color: #e0f2fe;
 }
 
 .link-item {
@@ -358,12 +420,95 @@ export default {
   line-height: 22px;
 }
 
+.link-item:last-child {
+  margin-bottom: 0;
+}
+
 .link-label {
-  min-width: 140px;
-  color: #606266;
+  min-width: 150px;
+  color: #b7c9df;
+  font-weight: 700;
 }
 
 .doc-link {
   word-break: break-all;
 }
+
+.doc-link >>> span {
+  color: #67e8f9;
+}
+
+body.theme-light .greet-card,
+body.theme-light .work-card,
+body.theme-light .links-card {
+  background: #ffffff;
+  border-color: #dbe5f3;
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.08);
+}
+
+body.theme-light .greet-card {
+  background: radial-gradient(circle at 88% 16%, rgba(96, 165, 250, 0.24), transparent 28%), linear-gradient(135deg, #2563eb 0%, #3b82f6 58%, #60a5fa 100%);
+  color: #ffffff;
+  border-color: rgba(96, 165, 250, 0.42);
+}
+
+body.theme-light .greet-card:after {
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 68%);
+}
+
+body.theme-light .greet-date,
+body.theme-light .greet-progress-label {
+  color: rgba(239, 246, 255, 0.92);
+}
+
+body.theme-light .greet-progress >>> .el-progress-bar__outer {
+  background-color: rgba(255, 255, 255, 0.28);
+}
+
+body.theme-light .greet-login-tip >>> .el-link.el-link--primary {
+  color: #ffffff;
+}
+
+body.theme-light .work-card-title,
+body.theme-light .links-card-title,
+body.theme-light .project-title {
+  color: #0f172a;
+}
+
+body.theme-light .work-card-title:before,
+body.theme-light .links-card-title:before {
+  background: linear-gradient(180deg, #2563eb 0%, #38bdf8 100%);
+  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
+}
+
+body.theme-light .work-stat,
+body.theme-light .project-block {
+  background: #f8fbff;
+  border-color: #e2e8f0;
+}
+
+body.theme-light .work-stat--click:hover {
+  background: #eef6ff;
+  border-color: #bfdbfe;
+  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
+}
+
+body.theme-light .work-stat-value {
+  color: #2563eb;
+  text-shadow: none;
+}
+
+body.theme-light .work-stat-label,
+body.theme-light .link-label {
+  color: #334155;
+}
+
+body.theme-light .work-stat-hint,
+body.theme-light .home-desc {
+  color: #64748b;
+}
+
+body.theme-light .doc-link >>> span {
+  color: #2563eb;
+}
 </style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index a36abff..2749aaa 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,14 +1,21 @@
 <template>
-  <div class="auto-test-main" style="height: 100%">
-    <el-container style="height: 100%">
-      <div class="aside" style="height: 100%">
+  <div class="auto-test-main" :class="themeClass">
+    <el-container class="app-shell">
+      <aside class="aside" :class="{ 'aside--collapse': isCollapse }">
+        <div class="brand-panel">
+          <div class="brand-mark">效</div>
+          <div v-show="!isCollapse" class="brand-copy">
+            <div class="brand-name">{{ systemName }}</div>
+            <div class="brand-subtitle">Quality Workspace</div>
+          </div>
+        </div>
         <el-menu
           :default-active="$route.path"
           class="el-menu-vertical-demo"
           :collapse="isCollapse"
-          background-color="#545c64"
-          text-color="#fff"
-          active-text-color="#ffd04b"
+          :background-color="menuBackgroundColor"
+          :text-color="menuTextColor"
+          :active-text-color="menuActiveTextColor"
           :router="true">
           <template v-for="menu in displayMenus">
             <el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)">
@@ -41,19 +48,24 @@
             </el-menu-item>
           </template>
         </el-menu>
-      </div>
-      <el-container>
-        <el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)">
+      </aside>
+      <el-container class="workspace-shell">
+        <el-header class="header">
           <div class="header-left">
-            <div class="header-icon">
-              <i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
-              <i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
-            </div>
+            <button class="header-icon" type="button" @click="setCollapse">
+              <i v-if="isCollapse" class="el-icon-s-unfold"></i>
+              <i v-else class="el-icon-s-fold"></i>
+            </button>
             <div class="system-name">
               <span>{{ systemName }}</span>
+              <small>测试协作与效能管理平台</small>
             </div>
           </div>
           <div class="header-user">
+            <button class="theme-switch" type="button" @click="toggleTheme">
+              <i :class="themeIcon"></i>
+              <span>{{ themeLabel }}</span>
+            </button>
             <el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
               <span class="user-name-dropdown">
                 {{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -65,7 +77,7 @@
             <span v-else class="login-label" @click="goLogin">登录</span>
           </div>
         </el-header>
-        <el-main>
+        <el-main class="main-canvas">
           <router-view class="main-form" name="Manage"></router-view>
         </el-main>
       </el-container>
@@ -79,9 +91,13 @@ export default {
   data() {
     return {
       isCollapse: false,
-      systemName: '效能平台'
+      systemName: '效能平台',
+      uiTheme: localStorage.getItem('uiTheme') || 'dark'
     }
   },
+  mounted() {
+    this.applyTheme()
+  },
   computed: {
     currentUser() {
       return this.$store.state.currentUser
@@ -109,9 +125,36 @@ export default {
         return ''
       }
       return this.currentUser.username || this.currentUser.realName || '未命名用户'
+    },
+    themeClass() {
+      return this.uiTheme === 'light' ? 'theme-shell-light' : 'theme-shell-dark'
+    },
+    themeLabel() {
+      return this.uiTheme === 'light' ? '深色' : '浅色'
+    },
+    themeIcon() {
+      return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
+    },
+    menuBackgroundColor() {
+      return this.uiTheme === 'light' ? '#ffffff' : '#07111f'
+    },
+    menuTextColor() {
+      return this.uiTheme === 'light' ? '#64748b' : '#93a9c7'
+    },
+    menuActiveTextColor() {
+      return this.uiTheme === 'light' ? '#ffffff' : '#e0f2fe'
     }
   },
   methods: {
+    applyTheme() {
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
+    },
+    toggleTheme() {
+      this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem('uiTheme', this.uiTheme)
+      this.applyTheme()
+    },
     setCollapse() {
       this.isCollapse = !this.isCollapse
     },
@@ -333,49 +376,308 @@ export default {
 
 <style scoped>
 .auto-test-main {
-  height: 100%;
+  height: 100vh;
   padding: 0;
   margin: 0;
+  overflow: hidden;
+  background: #070b16;
+}
+
+.app-shell {
+  height: 100vh;
+  min-width: 1100px;
+  overflow: hidden;
+  background: radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.22), transparent 30%), #070b16;
+}
+
+.aside {
+  height: 100%;
+  background: linear-gradient(180deg, #07111f 0%, #081426 46%, #050914 100%);
+  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.42), inset -1px 0 0 rgba(56, 189, 248, 0.14);
+  transition: width 0.25s ease;
+}
+
+.aside--collapse .brand-panel {
+  justify-content: center;
+  padding: 18px 8px;
+}
+
+.brand-panel {
+  height: 72px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 18px;
+  color: #e0f2fe;
+  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.96) 100%);
+  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
+}
+
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  border-radius: 12px;
+  font-size: 17px;
+  font-weight: 800;
+  color: #06111f;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 0 22px rgba(56, 189, 248, 0.48), 0 12px 30px rgba(99, 102, 241, 0.25);
+}
+
+.brand-name {
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 20px;
+  letter-spacing: 0.6px;
+}
+
+.brand-subtitle {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #67e8f9;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
 }
 
 .el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  /*min-height: 400px;*/
-}
-
-.header {
-  height: 60px;
-  line-height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.el-header {
-  padding: 0 20px 0 0;
+  width: 220px;
 }
 
 .el-menu-vertical-demo {
-  height: 100%;
+  height: calc(100% - 72px);
+  border-right: none;
+}
+
+.el-menu-vertical-demo >>> .el-menu-item,
+.el-menu-vertical-demo >>> .el-submenu__title {
+  height: 48px;
+  line-height: 48px;
+  margin: 4px 10px;
+  border-radius: 13px;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.el-menu-vertical-demo >>> .el-menu-item.is-active {
+  color: #e0f2fe !important;
+  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95) 0%, rgba(79, 70, 229, 0.95) 100%) !important;
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.el-menu-vertical-demo >>> .el-menu-item:hover,
+.el-menu-vertical-demo >>> .el-submenu__title:hover {
+  background: rgba(14, 165, 233, 0.12) !important;
+  color: #e0f2fe !important;
+}
+
+.workspace-shell {
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header {
+  height: 64px !important;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px 0 18px !important;
+  background: rgba(8, 14, 30, 0.88);
+  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(16px);
 }
 
 .header-left {
   display: flex;
   align-items: center;
+  gap: 14px;
 }
 
 .header-icon {
-  padding-left: 15px;
-  padding-right: 15px;
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(56, 189, 248, 0.28);
+  border-radius: 12px;
+  color: #7dd3fc;
+  background: rgba(14, 165, 233, 0.1);
+  font-size: 18px;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.header-icon:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
+  transform: translateY(-1px);
+}
+
+.system-name span {
+  display: block;
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 800;
+  color: #e0f2fe;
+}
+
+.system-name small {
+  display: block;
+  margin-top: 2px;
+  font-size: 12px;
+  color: #7dd3fc;
 }
 
 .header-user {
-  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #c4d7f2;
   font-size: 14px;
 }
 
-.login-label {
-  color: #409EFF;
+.theme-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
+  background: rgba(15, 23, 42, 0.86);
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.theme-switch:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
+  transform: translateY(-1px);
+}
+
+.user-name-dropdown {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.86);
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
   cursor: pointer;
 }
+
+.login-label {
+  color: #67e8f9;
+  cursor: pointer;
+}
+
+.main-canvas {
+  height: calc(100vh - 64px);
+  padding: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: radial-gradient(circle at 82% 14%, rgba(34, 211, 238, 0.14), transparent 24%), linear-gradient(135deg, #08111f 0%, #0b1020 45%, #070b16 100%);
+}
+
+.main-form {
+  min-height: calc(100vh - 104px);
+}
+
+.theme-shell-light.auto-test-main {
+  background: #eef4ff;
+}
+
+.theme-shell-light .app-shell {
+  background: radial-gradient(circle at 18% 8%, rgba(59, 130, 246, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
+}
+
+.theme-shell-light .aside {
+  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 48%, #eaf2ff 100%);
+  box-shadow: 10px 0 30px rgba(37, 99, 235, 0.12), inset -1px 0 0 #dbe5f3;
+}
+
+.theme-shell-light .brand-panel {
+  color: #0f172a;
+  background: linear-gradient(135deg, #ffffff 0%, #eaf2ff 100%);
+  border-bottom-color: #dbe5f3;
+}
+
+.theme-shell-light .brand-mark {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
+}
+
+.theme-shell-light .brand-subtitle {
+  color: #2563eb;
+}
+
+.theme-shell-light .el-menu-vertical-demo {
+  background: #f4f8ff !important;
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu,
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu--inline {
+  background: #f4f8ff !important;
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item,
+.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title {
+  background: transparent !important;
+  color: #64748b !important;
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item.is-active {
+  color: #ffffff !important;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item:hover,
+.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title:hover {
+  background: #eaf2ff !important;
+  color: #1d4ed8 !important;
+}
+
+.theme-shell-light .header {
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom-color: #dbe5f3;
+  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
+}
+
+.theme-shell-light .header-icon,
+.theme-shell-light .theme-switch,
+.theme-shell-light .user-name-dropdown {
+  color: #1d4ed8;
+  background: #f8fbff;
+  border-color: #dbe5f3;
+}
+
+.theme-shell-light .header-icon:hover,
+.theme-shell-light .theme-switch:hover {
+  background: #eaf2ff;
+  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
+}
+
+.theme-shell-light .system-name span {
+  color: #0f172a;
+}
+
+.theme-shell-light .system-name small,
+.theme-shell-light .login-label {
+  color: #2563eb;
+}
+
+.theme-shell-light .header-user {
+  color: #334155;
+}
+
+.theme-shell-light .main-canvas,
+.theme-shell-light .main-form {
+  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
+}
 </style>
diff --git a/src/components/TestPlatform/Case/CaseList.vue b/src/components/TestPlatform/Case/CaseList.vue
index 2da426a..bf245a9 100644
--- a/src/components/TestPlatform/Case/CaseList.vue
+++ b/src/components/TestPlatform/Case/CaseList.vue
@@ -2212,25 +2212,26 @@ export default {
 
 .case-import-title {
   font-size: 28px;
-  color: #303133;
+  color: #f8fafc;
   margin-bottom: 6px;
 }
 
 .case-import-subtitle {
-  color: #909399;
+  color: #94a3b8;
   margin-bottom: 16px;
 }
 
 .case-import-dropzone {
-  border: 1px dashed #dcdfe6;
+  border: 1px dashed rgba(56, 189, 248, 0.36);
   border-radius: 4px;
   padding: 28px 20px;
   margin: 0 auto;
   max-width: 520px;
+  background: #0f172a;
 }
 
 .case-import-drop-text {
-  color: #606266;
+  color: #cbd5e1;
   margin-bottom: 10px;
 }
 
@@ -2240,12 +2241,12 @@ export default {
 }
 
 .case-import-file-tip {
-  color: #909399;
+  color: #94a3b8;
 }
 
 .case-import-file-name {
   margin-top: 8px;
-  color: #303133;
+  color: #f8fafc;
 }
 
 .case-import-actions {
@@ -2281,10 +2282,10 @@ export default {
 .ai-case-import-tip {
   margin: 0 0 12px;
   padding: 10px 12px;
-  background: #f0f9ff;
-  border: 1px solid #d9ecff;
+  background: rgba(56, 189, 248, 0.1);
+  border: 1px solid rgba(56, 189, 248, 0.28);
   border-radius: 4px;
-  color: #606266;
+  color: #cbd5e1;
   font-size: 13px;
   line-height: 1.5;
 }
@@ -2299,22 +2300,22 @@ export default {
   flex-wrap: wrap;
   margin-bottom: 12px;
   padding: 8px 10px;
-  background: #fafafa;
-  border: 1px solid #ebeef5;
+  background: #162033;
+  border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: 4px;
   font-size: 13px;
-  color: #606266;
+  color: #cbd5e1;
 }
 
 .ai-gen-params-label {
   font-weight: 600;
-  color: #303133;
+  color: #f8fafc;
 }
 
 .ai-gen-params-hint {
   margin-left: 6px;
   font-size: 12px;
-  color: #909399;
+  color: #94a3b8;
 }
 
 .ai-doc-block {
@@ -2324,7 +2325,7 @@ export default {
 .ai-doc-block-title {
   font-weight: 600;
   font-size: 13px;
-  color: #303133;
+  color: #f8fafc;
   margin-bottom: 8px;
 }
 
@@ -2352,15 +2353,15 @@ export default {
 .ai-case-table-title {
   font-weight: 600;
   font-size: 14px;
-  color: #303133;
+  color: #f8fafc;
   margin-bottom: 0;
 }
 
 .mindmap-wrap {
   margin-top: 8px;
-  border: 1px solid #ebeef5;
+  border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: 6px;
-  background: #fafcff;
+  background: #0f172a;
   padding: 14px 12px;
   min-height: 280px;
   overflow: auto;
@@ -2414,11 +2415,11 @@ export default {
   gap: 6px;
   min-width: 220px;
   max-width: 760px;
-  background: #fff;
-  border: 1px solid #dce6ff;
+  background: #111827;
+  border: 1px solid rgba(56, 189, 248, 0.28);
   border-radius: 8px;
   padding: 8px 10px;
-  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.08);
+  box-shadow: 0 1px 8px rgba(56, 189, 248, 0.12);
 }
 
 .mindmap-node-head {
@@ -2442,7 +2443,7 @@ export default {
 .mindmap-node-title {
   flex: 1;
   min-width: 0;
-  color: #303133;
+  color: #f8fafc;
   font-weight: 600;
   line-height: 1.4;
   word-break: break-word;
@@ -2477,15 +2478,15 @@ export default {
 .mindmap-inline-detail-card {
   width: 420px;
   max-width: 620px;
-  background: #fff;
-  border: 1px solid #d9e8f6;
+  background: #111827;
+  border: 1px solid rgba(56, 189, 248, 0.26);
   border-radius: 8px;
   padding: 10px 12px;
-  box-shadow: 0 1px 6px rgba(64, 158, 255, 0.12);
+  box-shadow: 0 1px 8px rgba(56, 189, 248, 0.12);
 }
 
 .mindmap-inline-detail-title {
-  color: #303133;
+  color: #f8fafc;
   font-weight: 600;
 }
 
@@ -2497,7 +2498,7 @@ export default {
 }
 
 .mindmap-inline-detail-item {
-  color: #606266;
+  color: #cbd5e1;
   line-height: 1.6;
   margin-bottom: 6px;
   white-space: pre-wrap;
@@ -2520,12 +2521,12 @@ export default {
 }
 
 .mindmap-meta-text {
-  color: #909399;
+  color: #94a3b8;
   font-size: 12px;
 }
 
 .mindmap-empty {
-  color: #909399;
+  color: #94a3b8;
   text-align: center;
   line-height: 220px;
 }
@@ -2537,7 +2538,7 @@ export default {
 .ai-case-detail-title {
   font-size: 16px;
   font-weight: 600;
-  color: #303133;
+  color: #f8fafc;
   line-height: 1.4;
   margin-bottom: 14px;
 }
@@ -2553,33 +2554,54 @@ export default {
 .ai-case-detail-label {
   font-size: 13px;
   font-weight: 600;
-  color: #606266;
+  color: #cbd5e1;
   margin-bottom: 6px;
 }
 
 .ai-case-detail-text {
   font-size: 13px;
-  color: #303133;
+  color: #e5e7eb;
   line-height: 1.6;
   white-space: pre-wrap;
   word-break: break-word;
   padding: 10px 12px;
-  background: #f9fafc;
+  background: #0f172a;
   border-radius: 4px;
-  border: 1px solid #ebeef5;
+  border: 1px solid rgba(148, 163, 184, 0.2);
 }
 
 .ai-case-detail-empty {
   text-align: center;
-  color: #909399;
+  color: #94a3b8;
   padding: 32px 0;
   font-size: 13px;
 }
 
 .auto-gen-case-title {
-  color: #303133;
+  color: #f8fafc;
   font-weight: 500;
   line-height: 1.5;
   word-break: break-word;
 }
+
+body.theme-light .ai-case-import-tip {
+  color: #475569;
+}
+
+body.theme-light .ai-gen-params-bar {
+  background: #f1f6ff;
+  border-color: #dbe5f3;
+  color: #334155;
+}
+
+body.theme-light .ai-gen-params-label,
+body.theme-light .ai-doc-block-title,
+body.theme-light .ai-case-table-title,
+body.theme-light .auto-gen-case-title {
+  color: #0f172a;
+}
+
+body.theme-light .ai-gen-params-hint {
+  color: #64748b;
+}
 </style>
diff --git a/src/components/User/Login.vue b/src/components/User/Login.vue
index 3ffcd8e..773cad2 100644
--- a/src/components/User/Login.vue
+++ b/src/components/User/Login.vue
@@ -1,14 +1,24 @@
 <template>
-  <div id="backgroud">
+  <div id="backgroud" :class="themeClass">
+    <button class="login-theme-switch" type="button" @click="toggleTheme">
+      <i :class="themeIcon"></i>
+      <span>{{ themeLabel }}</span>
+    </button>
+    <div class="login-hero">
+      <div class="login-brand-mark">效</div>
+      <h1>效能平台</h1>
+      <p>统一管理测试协作、缺陷跟踪、用例周期与数据工具。</p>
+    </div>
     <div class="content_right">
       <div class="login-body-title">
-        <h2>登录</h2>
+        <h2>欢迎登录</h2>
+        <p>Quality Workspace</p>
       </div>
       <div class="messge">
         <span>{{ msg }}</span>
       </div>
       <div class="cr_top">
-        <div class="ct_input" style="height: 60px;width: 254px">
+        <div class="ct_input">
           <span class="ct-img-yhm">&nbsp;</span>
           <input
             id="username"
@@ -23,7 +33,7 @@
             placeholder="用户名"
             @keyup.enter="handleLogin">
         </div>
-        <div class="ct_input" style="height:60px;width: 254px">
+        <div class="ct_input">
           <span class="ct_img_mm">&nbsp;</span>
           <input
             id="password"
@@ -57,10 +67,34 @@ export default {
     return {
       msg: '',
       username: '',
-      password: ''
+      password: '',
+      uiTheme: localStorage.getItem('uiTheme') || 'dark'
     }
   },
+  computed: {
+    themeClass() {
+      return this.uiTheme === 'light' ? 'theme-login-light' : 'theme-login-dark'
+    },
+    themeLabel() {
+      return this.uiTheme === 'light' ? '深色' : '浅色'
+    },
+    themeIcon() {
+      return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
+    }
+  },
+  mounted() {
+    this.applyTheme()
+  },
   methods: {
+    applyTheme() {
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
+    },
+    toggleTheme() {
+      this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem('uiTheme', this.uiTheme)
+      this.applyTheme()
+    },
     handleLogin() {
       if (!this.username || !this.password) {
         this.msg = 'username、password 为必传参数'
@@ -126,67 +160,147 @@ export default {
 <style scoped>
 @import "../../assets/css/Form.css";
 
-.content_right {
-  padding: 20px 0;
-  background: #fff;
-  color: #333;
-  border-radius: 3px;
-  border-color: rgba(250, 255, 251, .8);
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  outline: 0;
-  width: 300px;
-  height: 300px;
+#backgroud {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 80px;
+  background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
+  overflow: hidden;
+}
+
+.login-hero {
+  width: 420px;
+  color: #f8fbff;
+}
+
+.login-brand-mark {
+  width: 56px;
+  height: 56px;
+  line-height: 56px;
   text-align: center;
+  border-radius: 18px;
+  font-size: 28px;
+  font-weight: 900;
+  color: #06111f;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
+}
+
+.login-hero h1 {
+  margin: 24px 0 14px;
+  font-size: 42px;
+  line-height: 1.15;
+  letter-spacing: 1px;
+  text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
+}
+
+.login-hero p {
+  margin: 0;
+  color: #9fb8d4;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.login-theme-switch {
+  position: fixed;
+  right: 28px;
+  top: 24px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
+  background: rgba(15, 23, 42, 0.78);
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.login-theme-switch:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
+  transform: translateY(-1px);
+}
+
+.content_right {
+  padding: 34px 36px 30px;
+  background: rgba(15, 23, 42, 0.78);
+  color: #dbeafe;
+  border-radius: 24px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  position: static;
+  width: 330px;
+  min-height: 340px;
+  text-align: center;
+  backdrop-filter: blur(18px);
+}
+
+.login-body-title h2 {
+  font-size: 26px;
+  color: #e0f2fe;
+  margin-bottom: 8px;
+}
+
+.login-body-title p {
+  color: #67e8f9;
+  font-size: 13px;
+  letter-spacing: 0.8px;
 }
 
 .cr_top .ct_input {
   position: relative;
+  height: 48px;
+  width: 100%;
+  margin-bottom: 16px;
 }
 
 .account-oprate .regist-btn {
   float: right;
   font-size: 14px;
-  color: #333;
+  color: #67e8f9;
+  text-decoration: none;
+}
+
+.account-oprate .regist-btn:hover {
+  color: #bae6fd;
 }
 
 .messge {
   font-size: 12px;
-  margin-top: 10px;
-  height: 20px;
+  margin-top: 14px;
+  height: 22px;
   text-align: left;
-  padding-left: 24px;
-  color: #D60909;
+  color: #f87171;
 }
 
 .content_right .cr_top {
   position: relative;
-  margin: 0 23px 0;
+  margin: 0;
 }
 
 .content_right .input_text {
-  margin-bottom: 18px;
-  background: #fff;
+  background: rgba(8, 18, 36, 0.86);
 }
 
 .account-oprate {
-  width: 252px;
-  margin-left: 24px;
+  width: 100%;
 }
 
 .ct_img_mm,
 .ct-img-yhm {
   position: absolute;
-  top: 14px;
-  left: 8px;
+  top: 16px;
+  left: 14px;
   width: 16px;
   height: 16px;
   background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
+  opacity: 0.82;
+  filter: invert(78%) sepia(37%) saturate(773%) hue-rotate(153deg) brightness(103%) contrast(93%);
 }
 
 .ct-img-yhm {
@@ -195,39 +309,52 @@ export default {
 
 .input_text {
   display: inline-block;
-  width: 224px;
-  height: 24px;
-  padding: 8px 0 8px 28px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  padding: 0 14px 0 42px;
   font-size: 14px;
-  color: #000;
-  border: 1px solid #ccc;
-  border-radius: 3px;
+  color: #e0f2fe;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  border-radius: 14px;
   vertical-align: middle;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }
 
-.input_text:hover {
-  border-color: rgba(82, 168, 236, .8);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
+.input_text::placeholder {
+  color: #6f8baa;
+}
+
+.input_text:hover,
+.input_text:focus {
+  border-color: rgba(103, 232, 249, 0.72);
+  background: rgba(8, 18, 36, 0.96);
+  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 20px rgba(56, 189, 248, 0.14);
   outline: 0;
 }
 
 .btn_login:hover {
-  background-color: #3e82dc;
+  background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
 }
 
 .btn_login {
   text-align: center;
   box-sizing: border-box;
-  width: 254px;
-  height: 37px;
+  width: 100%;
+  height: 46px;
   font-size: 16px;
   cursor: pointer;
-  border-radius: 3px;
-  color: #fff;
-  border: 1px solid #4591f5;
-  background-color: #4591f5;
-  margin-bottom: 14px;
+  border-radius: 14px;
+  color: #06111f;
+  border: 1px solid rgba(103, 232, 249, 0.68);
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  margin-bottom: 16px;
   -webkit-appearance: none;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  font-weight: 800;
 }
 
 button,
@@ -273,4 +400,95 @@ ul {
   padding: 0;
   font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
 }
+
+.theme-login-light#backgroud {
+  background: radial-gradient(circle at 15% 18%, rgba(59, 130, 246, 0.14), transparent 26%), radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #eaf2ff 100%);
+}
+
+.theme-login-light .login-theme-switch {
+  color: #1d4ed8;
+  background: rgba(255, 255, 255, 0.9);
+  border-color: #dbe5f3;
+  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
+}
+
+.theme-login-light .login-theme-switch:hover {
+  background: #eaf2ff;
+  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
+}
+
+.theme-login-light .login-hero {
+  color: #0f172a;
+}
+
+.theme-login-light .login-brand-mark {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24);
+}
+
+.theme-login-light .login-hero h1 {
+  text-shadow: none;
+}
+
+.theme-login-light .login-hero p {
+  color: #64748b;
+}
+
+.theme-login-light .content_right {
+  background: rgba(255, 255, 255, 0.9);
+  color: #334155;
+  border-color: #dbe5f3;
+  box-shadow: 0 24px 70px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+}
+
+.theme-login-light .login-body-title h2 {
+  color: #0f172a;
+}
+
+.theme-login-light .login-body-title p,
+.theme-login-light .account-oprate .regist-btn {
+  color: #2563eb;
+}
+
+.theme-login-light .account-oprate .regist-btn:hover {
+  color: #1d4ed8;
+}
+
+.theme-login-light .content_right .input_text {
+  background: #ffffff;
+}
+
+.theme-login-light .input_text {
+  color: #0f172a;
+  border-color: #d8e1ef;
+}
+
+.theme-login-light .input_text::placeholder {
+  color: #94a3b8;
+}
+
+.theme-login-light .input_text:hover,
+.theme-login-light .input_text:focus {
+  border-color: #60a5fa;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
+}
+
+.theme-login-light .ct_img_mm,
+.theme-login-light .ct-img-yhm {
+  opacity: 0.72;
+  filter: none;
+}
+
+.theme-login-light .btn_login {
+  color: #ffffff;
+  border-color: #2563eb;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+}
+
+.theme-login-light .btn_login:hover {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
+}
 </style>
diff --git a/src/components/User/Register.vue b/src/components/User/Register.vue
index f2ddf85..87183f2 100644
--- a/src/components/User/Register.vue
+++ b/src/components/User/Register.vue
@@ -1,10 +1,27 @@
 <template>
-  <div id="backgroud">
-    <div class="register-head" style="padding-top: 20px"></div>
+  <div id="backgroud" :class="themeClass">
+    <button class="register-theme-switch" type="button" @click="toggleTheme">
+      <i :class="themeIcon"></i>
+      <span>{{ themeLabel }}</span>
+    </button>
+    <div class="register-hero">
+      <div class="register-brand-mark">效</div>
+      <h1>效能平台</h1>
+      <p>创建账号后即可进入统一测试协作、用例管理与质量工作台。</p>
+      <div class="register-feature-list">
+        <span>测试协作</span>
+        <span>用例管理</span>
+        <span>质量工作台</span>
+      </div>
+    </div>
     <div class="model">
-      <div class="location-title"><h1>注册</h1></div>
+      <div class="location-title">
+        <span class="register-card-kicker">Create Account</span>
+        <h1>创建账号</h1>
+        <p>注册后开启你的质量效能工作区</p>
+      </div>
 
-      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
+      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-position="top" class="demo-ruleForm">
         <el-form-item label="用户名" prop="username">
           <el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
         </el-form-item>
@@ -77,10 +94,34 @@ export default {
         username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
         password: [{ required: true, validator: validatePass, trigger: 'blur' }],
         checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
-      }
+      },
+      uiTheme: localStorage.getItem('uiTheme') || 'dark'
     }
   },
+  computed: {
+    themeClass() {
+      return this.uiTheme === 'light' ? 'theme-register-light' : 'theme-register-dark'
+    },
+    themeLabel() {
+      return this.uiTheme === 'light' ? '深色' : '浅色'
+    },
+    themeIcon() {
+      return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
+    }
+  },
+  mounted() {
+    this.applyTheme()
+  },
   methods: {
+    applyTheme() {
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
+    },
+    toggleTheme() {
+      this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem('uiTheme', this.uiTheme)
+      this.applyTheme()
+    },
     open(message) {
       this.$alert(message, '提示', {
         confirmButtonText: '确定'
@@ -116,35 +157,349 @@ export default {
 }
 </script>
 
-<style>
-@import "../../assets/css/Form.css";
+<style scoped>
+#backgroud {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 72px;
+  width: 100vw;
+  min-height: 100vh;
+  padding: 72px 48px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+#backgroud.theme-register-dark {
+  background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
+}
+
+#backgroud.theme-register-light {
+  background: radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.14), transparent 28%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #eaf2ff 100%);
+}
+
+.register-hero {
+  flex: 0 0 420px;
+  max-width: 420px;
+  color: #f8fbff;
+}
+
+.register-brand-mark {
+  width: 56px;
+  height: 56px;
+  line-height: 56px;
+  text-align: center;
+  border-radius: 18px;
+  font-size: 28px;
+  font-weight: 900;
+  color: #06111f;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
+}
+
+.register-hero h1 {
+  margin: 24px 0 14px;
+  font-size: 42px;
+  line-height: 1.15;
+  letter-spacing: 1px;
+  text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
+}
+
+.register-hero p {
+  margin: 0;
+  color: #9fb8d4;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.register-feature-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 28px;
+}
+
+.register-feature-list span {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 999px;
+  color: #bae6fd;
+  background: rgba(56, 189, 248, 0.12);
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.register-theme-switch {
+  position: fixed;
+  right: 28px;
+  top: 24px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
+  background: rgba(15, 23, 42, 0.78);
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.register-theme-switch:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
+  transform: translateY(-1px);
+}
+
+.model {
+  position: relative;
+  flex: 0 0 420px;
+  width: 420px;
+  min-height: auto;
+  height: auto;
+  margin: 0;
+  padding: 34px 36px 30px;
+  border-radius: 24px;
+  text-align: left;
+  background: rgba(15, 23, 42, 0.82);
+  color: #dbeafe;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(18px);
+}
 
 .location-title {
   text-align: center;
+  margin-bottom: 22px;
+}
+
+.register-card-kicker {
+  display: inline-flex;
+  margin-bottom: 10px;
+  color: #67e8f9;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.6px;
+  text-transform: uppercase;
+}
+
+.location-title h1 {
+  margin: 0 0 8px;
+  font-size: 28px;
+  color: #e0f2fe;
+}
+
+.location-title p {
+  margin: 0;
+  color: #9fb8d4;
+  font-size: 13px;
+  letter-spacing: 0.4px;
 }
 
 .register-head {
   position: absolute;
 }
 
-.el-input {
-  float: left;
-  width: 80%;
+.demo-ruleForm {
+  width: 100%;
 }
 
-.register-actions .el-form-item__content {
+.demo-ruleForm >>> .el-form-item {
+  margin-bottom: 15px;
+}
+
+.el-input {
+  float: none;
+  width: 100%;
+}
+
+.model >>> .el-form-item__label {
+  padding: 0 0 7px;
+  color: #cbd5e1;
+  line-height: 1.2;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.model >>> .el-input__inner {
+  height: 44px;
+  background: rgba(8, 18, 36, 0.86);
+  border-color: rgba(56, 189, 248, 0.22);
+  color: #f8fafc;
+  border-radius: 14px;
+}
+
+.model >>> .el-input__inner:hover,
+.model >>> .el-input__inner:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
+}
+
+.register-actions {
+  margin-top: 4px;
+  margin-bottom: 0 !important;
+}
+
+.register-actions >>> .el-form-item__content {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
+  margin-left: 0 !important;
 }
 
-.login-link-wrap {
+.enter-btn {
   width: 100%;
-  margin-top: 8px;
-  text-align: right;
+  height: 46px;
+  border: 1px solid rgba(103, 232, 249, 0.68);
+  border-radius: 14px;
+  color: #06111f;
+  font-weight: 800;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 16px 34px rgba(59, 130, 246, 0.25);
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.enter-btn:hover {
+  background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
 }
 
 .login-link-btn {
+  align-self: flex-end;
   padding-right: 0;
+  margin-top: 10px;
+  color: #67e8f9;
+}
+
+.theme-register-light .register-hero {
+  color: #10233f;
+}
+
+.theme-register-light .register-brand-mark {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
+  box-shadow: 0 20px 48px rgba(37, 99, 235, 0.2);
+}
+
+.theme-register-light .register-hero h1 {
+  color: #0f172a;
+  text-shadow: none;
+}
+
+.theme-register-light .register-hero p {
+  color: #475569;
+}
+
+.theme-register-light .register-feature-list span {
+  color: #1d4ed8;
+  background: rgba(37, 99, 235, 0.08);
+  border-color: rgba(37, 99, 235, 0.16);
+  box-shadow: none;
+}
+
+.theme-register-light .register-theme-switch {
+  color: #1d4ed8;
+  background: rgba(255, 255, 255, 0.86);
+  border-color: rgba(37, 99, 235, 0.18);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+}
+
+.theme-register-light .register-theme-switch:hover {
+  background: #eff6ff;
+  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
+}
+
+.theme-register-light .model {
+  background: rgba(255, 255, 255, 0.94);
+  color: #1e293b;
+  border-color: rgba(37, 99, 235, 0.14);
+  box-shadow: 0 28px 70px rgba(37, 99, 235, 0.14);
+}
+
+.theme-register-light .register-card-kicker {
+  color: #2563eb;
+}
+
+.theme-register-light .location-title h1 {
+  color: #0f172a;
+}
+
+.theme-register-light .location-title p {
+  color: #64748b;
+}
+
+.theme-register-light .model >>> .el-form-item__label {
+  color: #334155;
+}
+
+.theme-register-light .model >>> .el-input__inner {
+  background: #ffffff;
+  border-color: #dbe7f6;
+  color: #0f172a;
+}
+
+.theme-register-light .model >>> .el-input__inner:hover,
+.theme-register-light .model >>> .el-input__inner:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.theme-register-light .enter-btn {
+  color: #ffffff;
+  border-color: #2563eb;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+}
+
+.theme-register-light .enter-btn:hover {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
+}
+
+.theme-register-light .login-link-btn {
+  color: #2563eb;
+}
+
+@media (max-width: 1080px) {
+  #backgroud {
+    gap: 40px;
+    padding: 72px 28px 36px;
+  }
+
+  .register-hero {
+    flex-basis: 360px;
+    max-width: 360px;
+  }
+}
+
+@media (max-width: 920px) {
+  #backgroud {
+    flex-direction: column;
+    gap: 28px;
+    padding: 80px 18px 28px;
+  }
+
+  .register-hero,
+  .model {
+    flex: none;
+    width: 100%;
+    max-width: 430px;
+  }
+
+  .register-hero {
+    text-align: center;
+  }
+
+  .register-brand-mark,
+  .register-feature-list {
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: center;
+  }
 }
 </style>