qiaoxinjiu/effekt-interface-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qiaoxinjiu:7d0f8a5aefbfe7d4c0391d9f918fe96dc0a47204
Branches Tags
qiaoxinjiu:master qiaoxinjiu:2026-04-29-nrc4 qiaoxinjiu:qiaoxinjiu
..
compare: qiaoxinjiu:master
Branches Tags
qiaoxinjiu:master qiaoxinjiu:2026-04-29-nrc4 qiaoxinjiu:qiaoxinjiu

9 Commits
7d0f8a5aef ... master

Author SHA1 Message Date
qiaoxinjiu
cca37d9384 Merge pull request 'fix(case): AI 用例详情弹窗深浅色主题可读性' (#8) from 2026-04-29-nrc4 into master 
Reviewed-on: #8
 2026-05-18 17:06:12 +08:00
qiaoxinjiu
793a8e1b84 fix(case): AI 用例详情弹窗深浅色主题可读性 
为 append-to-body 详情弹窗增加独立样式，修复标题、标签与描述列表在浅色/服务器环境下的对比度。

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-05-18 17:05:45 +08:00
qiaoxinjiu
48309e703c Merge pull request '2026-04-29-nrc4' (#7) from 2026-04-29-nrc4 into master 
Reviewed-on: #7
 2026-05-18 16:56:33 +08:00
qiaoxinjiu
971967b791 fix(layout): 左侧菜单栏支持纵向滚动 
菜单项过多时可在侧栏内滚动查看，品牌区保持固定。

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-05-18 16:55:56 +08:00
qiaoxinjiu
5cafab7534 fix(case): 用例管理 Tab、自动化弹窗与日期筛选主题样式 
- Tab 未选中项在深色/浅色下可读性修复
- 生成自动化用例弹窗独立深色样式（append-to-body）
- 创建时间日期范围与主题一致

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-05-18 16:50:27 +08:00
qiaoxinjiu
f2bf843984 Merge pull request 'fix(ui): 主题与脑图浅色适配、标签配色及静态资源缓存' (#6) from 2026-04-29-nrc4 into master 
Reviewed-on: #6
 2026-05-18 16:34:09 +08:00
qiaoxinjiu
f7cdff31ba fix(ui): 主题与脑图浅色适配、标签配色及静态资源缓存 
- 浅色模式下用例脑图区域改为浅色样式
- 恢复 el-tag 按 success/warning/info 等类型的颜色
- 启动时应用主题，Home 内容区深色样式兜底
- nginx 禁止缓存 index.html，hash 静态资源长期缓存

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-05-18 16:33:35 +08:00
qiaoxinjiu
69d9d9f622 Merge pull request 'feat(ui): 全局深色主题与登录注册页样式优化' (#5) from 2026-04-29-nrc4 into master 
Reviewed-on: #5
 2026-05-18 16:20:38 +08:00
qiaoxinjiu
3b359a7fd5 feat(ui): 全局深色主题与登录注册页样式优化 
- App 全局主题变量与 Element 组件暗色适配
- 首页、测试平台布局与主题切换
- 登录/注册页改版并支持明暗主题切换
- 用例列表等页面样式与主题保持一致

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-05-18 16:18:40 +08:00
9 changed files with 2124 additions and 200 deletions
Expand all files Collapse all files

27
index.html
View File

@@ -6,18 +6,37 @@
<title>效能平台</title> <title>效能平台</title>
<link rel="stylesheet" href="https://unpkg.com/wangeditor@4.7.15/dist/css/style.css" /> <link rel="stylesheet" href="https://unpkg.com/wangeditor@4.7.15/dist/css/style.css" />
<style> <style>
body{ html {
height: 100%;
}
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #070b16;
color: #dbeafe;
} }
html{ body.theme-light {
height: 100%; background: #eef4ff;
color: #1f2937;
} }
</style> </style>
<script>
(function () {
var theme = 'dark';
try {
theme = localStorage.getItem('uiTheme') || 'dark';
} catch (e) {}
document.documentElement.className = theme === 'light' ? 'theme-light' : 'theme-dark';
document.addEventListener('DOMContentLoaded', function () {
document.body.classList.remove('theme-dark', 'theme-light');
document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark');
});
})();
</script>
</head> </head>
<body> <body class="theme-dark">
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

12
nginx.conf
View File

@@ -1,3 +1,4 @@
# 发版后避免浏览器长期使用旧 index 引用旧 js/css
server { server {
listen 80; listen 80;
server_name localhost; server_name localhost;
@@ -7,6 +8,17 @@ server {
root /usr/share/nginx/html; root /usr/share/nginx/html;
index index.html; index index.html;
location = /index.html {
add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
add_header Pragma "no-cache" always;
}
location ^~ /static/ {
expires 1y;
add_header Cache-Control "public, immutable" always;
access_log off;
}
location /it/api/ { location /it/api/ {
proxy_pass http://172.18.0.1:5010; proxy_pass http://172.18.0.1:5010;
proxy_set_header Host $host; proxy_set_header Host $host;

464
src/App.vue
View File

@@ -10,6 +10,7 @@ import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'
export default { export default {
name: 'App', name: 'App',
mounted() { mounted() {
this.applyTheme()
const authUser = JSON.parse(localStorage.getItem('authUser') || 'null') const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]') const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
if (authUser) { if (authUser) {
@@ -20,6 +21,11 @@ export default {
} }
}, },
methods: { 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) { loadUserMenus(authUser) {
const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
if (!roleId) { if (!roleId) {
@@ -34,7 +40,465 @@ export default {
</script> </script>
<style> <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{ #app{
height: 100%; 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:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
border-color: rgba(56, 189, 248, 0.28);
background: rgba(56, 189, 248, 0.12);
color: #bae6fd;
}
.el-tag.el-tag--success {
border-color: rgba(103, 194, 58, 0.45);
background: rgba(103, 194, 58, 0.16);
color: #86efac;
}
.el-tag.el-tag--warning {
border-color: rgba(230, 162, 60, 0.45);
background: rgba(230, 162, 60, 0.16);
color: #fcd34d;
}
.el-tag.el-tag--danger {
border-color: rgba(245, 108, 108, 0.45);
background: rgba(245, 108, 108, 0.16);
color: #fca5a5;
}
.el-tag.el-tag--info {
border-color: rgba(148, 163, 184, 0.35);
background: rgba(148, 163, 184, 0.14);
color: #cbd5e1;
}
.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:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
body.theme-light .el-tag.el-tag--success {
border-color: #e1f3d8;
background: #f0f9eb;
color: #67c23a;
}
body.theme-light .el-tag.el-tag--warning {
border-color: #faecd8;
background: #fdf6ec;
color: #e6a23c;
}
body.theme-light .el-tag.el-tag--danger {
border-color: #fde2e2;
background: #fef0f0;
color: #f56c6c;
}
body.theme-light .el-tag.el-tag--info {
border-color: #e9e9eb;
background: #f4f4f5;
color: #909399;
}
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> </style>

259
src/components/EffektHome.vue
View File

@@ -210,8 +210,7 @@ export default {
<style scoped> <style scoped>
.effekt-home { .effekt-home {
padding: 20px; max-width: 1240px;
max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
@@ -219,37 +218,80 @@ export default {
margin-bottom: 20px; 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, .greet-card,
.work-card { .work-card {
border-radius: 10px; min-height: 174px;
border: 1px solid #ebeef5; }
min-height: 160px;
.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 { .greet-line {
font-size: 20px; font-size: 24px;
font-weight: 600; font-weight: 800;
color: #303133; color: #f8fbff;
margin-bottom: 8px; margin-bottom: 8px;
letter-spacing: 0.2px;
} }
.greet-date { .greet-date {
color: #909399; color: #bae6fd;
font-size: 13px; font-size: 13px;
margin-bottom: 16px; margin-bottom: 22px;
} }
.greet-progress-label { .greet-progress-label {
font-size: 12px; font-size: 12px;
color: #606266; color: rgba(224, 242, 254, 0.9);
display: block; 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 { .greet-progress-tip {
font-size: 12px; font-size: 12px;
color: #67c23a; color: #a7f3d0;
margin-top: 6px; margin-top: 8px;
display: block; display: block;
} }
@@ -257,32 +299,52 @@ export default {
margin-top: 8px; margin-top: 8px;
} }
.work-card-title { .greet-login-tip >>> .el-link.el-link--primary {
font-size: 15px; color: #67e8f9;
font-weight: 600; font-weight: 700;
color: #303133; }
margin-bottom: 16px;
padding-bottom: 10px; .work-card-title,
border-bottom: 1px solid #ebeef5; .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 { .work-stats {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 14px;
} }
.work-stat { .work-stat {
flex: 1; flex: 1;
min-width: 120px; min-width: 126px;
text-align: center; text-align: left;
padding: 12px 8px; padding: 18px;
border-radius: 8px; border-radius: 16px;
background: #f5f9ff; background: #162033;
border: 1px solid #e4ecfb; border: 1px solid rgba(148, 163, 184, 0.18);
cursor: default; 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 { .work-stat--click {
@@ -290,38 +352,35 @@ export default {
} }
.work-stat--click:hover { .work-stat--click:hover {
border-color: #409eff; border-color: rgba(56, 189, 248, 0.52);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15); 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 { .work-stat-value {
font-size: 28px; font-size: 32px;
font-weight: 600; font-weight: 900;
color: #409eff; color: #67e8f9;
line-height: 1.2; line-height: 1.1;
text-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
} }
.work-stat-label { .work-stat-label {
margin-top: 8px; margin-top: 10px;
font-size: 14px; font-size: 14px;
color: #606266; color: #dbeafe;
font-weight: 700;
} }
.work-stat-hint { .work-stat-hint {
margin-top: 4px; margin-top: 6px;
font-size: 11px; font-size: 12px;
color: #909399; color: #8fb3d9;
} }
.links-card { .links-card {
border-radius: 10px; background: #111827;
}
.links-card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 8px;
} }
.home-content { .home-content {
@@ -330,25 +389,28 @@ export default {
} }
.home-desc { .home-desc {
margin: 0 0 16px; margin: 0 0 18px;
color: #606266; color: #94a3b8;
font-size: 13px; font-size: 13px;
} }
.project-block { .project-block {
padding: 16px 0; padding: 18px;
border-bottom: 1px solid #ebeef5; margin-bottom: 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 16px;
background: #162033;
} }
.project-block:last-child { .project-block:last-child {
border-bottom: none; margin-bottom: 0;
} }
.project-title { .project-title {
margin-bottom: 12px; margin-bottom: 12px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 800;
color: #303133; color: #e0f2fe;
} }
.link-item { .link-item {
@@ -358,12 +420,95 @@ export default {
line-height: 22px; line-height: 22px;
} }
.link-item:last-child {
margin-bottom: 0;
}
.link-label { .link-label {
min-width: 140px; min-width: 150px;
color: #606266; color: #b7c9df;
font-weight: 700;
} }
.doc-link { .doc-link {
word-break: break-all; 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> </style>

452
src/components/Home.vue
View File

@@ -1,14 +1,22 @@
<template> <template>
<div class="auto-test-main" style="height: 100%"> <div class="auto-test-main" :class="themeClass">
<el-container style="height: 100%"> <el-container class="app-shell">
<div class="aside" style="height: 100%"> <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>
<div class="aside-menu-scroll">
<el-menu <el-menu
:default-active="$route.path" :default-active="$route.path"
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
:collapse="isCollapse" :collapse="isCollapse"
background-color="#545c64" :background-color="menuBackgroundColor"
text-color="#fff" :text-color="menuTextColor"
active-text-color="#ffd04b" :active-text-color="menuActiveTextColor"
:router="true"> :router="true">
<template v-for="menu in displayMenus"> <template v-for="menu in displayMenus">
<el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)"> <el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)">
@@ -42,18 +50,24 @@
</template> </template>
</el-menu> </el-menu>
</div> </div>
<el-container> </aside>
<el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)"> <el-container class="workspace-shell">
<el-header class="header">
<div class="header-left"> <div class="header-left">
<div class="header-icon"> <button class="header-icon" type="button" @click="setCollapse">
<i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i> <i v-if="isCollapse" class="el-icon-s-unfold"></i>
<i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i> <i v-else class="el-icon-s-fold"></i>
</div> </button>
<div class="system-name"> <div class="system-name">
<span>{{ systemName }}</span> <span>{{ systemName }}</span>
<small>测试协作与效能管理平台</small>
</div> </div>
</div> </div>
<div class="header-user"> <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"> <el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
<span class="user-name-dropdown"> <span class="user-name-dropdown">
{{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i> {{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -65,7 +79,7 @@
<span v-else class="login-label" @click="goLogin">登录</span> <span v-else class="login-label" @click="goLogin">登录</span>
</div> </div>
</el-header> </el-header>
<el-main> <el-main class="main-canvas">
<router-view class="main-form" name="Manage"></router-view> <router-view class="main-form" name="Manage"></router-view>
</el-main> </el-main>
</el-container> </el-container>
@@ -79,9 +93,13 @@ export default {
data() { data() {
return { return {
isCollapse: false, isCollapse: false,
systemName: '效能平台' systemName: '效能平台',
uiTheme: localStorage.getItem('uiTheme') || 'dark'
} }
}, },
mounted() {
this.applyTheme()
},
computed: { computed: {
currentUser() { currentUser() {
return this.$store.state.currentUser return this.$store.state.currentUser
@@ -109,9 +127,36 @@ export default {
return '' return ''
} }
return this.currentUser.username || this.currentUser.realName || '未命名用户' 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: { 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() { setCollapse() {
this.isCollapse = !this.isCollapse this.isCollapse = !this.isCollapse
}, },
@@ -333,49 +378,386 @@ export default {
<style scoped> <style scoped>
.auto-test-main { .auto-test-main {
height: 100%; height: 100vh;
padding: 0; padding: 0;
margin: 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 {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
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-menu-scroll {
flex: 1;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.aside-menu-scroll::-webkit-scrollbar {
width: 6px;
}
.aside-menu-scroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(148, 163, 184, 0.35);
}
.aside-menu-scroll::-webkit-scrollbar-track {
background: transparent;
}
.aside--collapse .brand-panel {
justify-content: center;
padding: 18px 8px;
}
.brand-panel {
flex-shrink: 0;
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) { .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; width: 220px;
/*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;
} }
.el-menu-vertical-demo { .el-menu-vertical-demo {
height: 100%; 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 { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px;
} }
.header-icon { .header-icon {
padding-left: 15px; width: 38px;
padding-right: 15px; 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 { .header-user {
color: #333; display: flex;
align-items: center;
gap: 12px;
color: #c4d7f2;
font-size: 14px; font-size: 14px;
} }
.login-label { .theme-switch {
color: #409EFF; 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; 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%);
}
/* 深色壳下内容区兜底：避免旧缓存 bundle 未加载 App.vue 全局样式时出现白卡片/白分页 */
.theme-shell-dark >>> .page-section.el-card {
background: #111827;
border-color: rgba(148, 163, 184, 0.2);
color: #e5e7eb;
}
.theme-shell-dark >>> .page-section .el-card__header {
background: #162033;
border-bottom-color: rgba(148, 163, 184, 0.18);
color: #f8fafc;
}
.theme-shell-dark >>> .page-section .el-table,
.theme-shell-dark >>> .page-section .el-table__expanded-cell,
.theme-shell-dark >>> .page-section .el-table th,
.theme-shell-dark >>> .page-section .el-table tr,
.theme-shell-dark >>> .page-section .el-table td {
background-color: #111827 !important;
color: #e5e7eb !important;
}
.theme-shell-dark >>> .page-section .el-table th,
.theme-shell-dark >>> .page-section .el-table thead th {
background: #1f2937 !important;
color: #f8fafc !important;
}
.theme-shell-dark >>> .page-section .el-form-item__label {
color: #dbeafe;
}
.theme-shell-dark >>> .page-section .el-input__inner,
.theme-shell-dark >>> .page-section .el-textarea__inner,
.theme-shell-dark >>> .page-section .el-select .el-input__inner {
background-color: #0f172a;
border-color: rgba(148, 163, 184, 0.28);
color: #f8fafc;
}
.theme-shell-dark >>> .page-section .el-pagination,
.theme-shell-dark >>> .page-section .el-pagination button,
.theme-shell-dark >>> .page-section .el-pagination span:not([class*=suffix]) {
color: #dbeafe;
}
.theme-shell-dark >>> .page-section .el-pagination .btn-prev,
.theme-shell-dark >>> .page-section .el-pagination .btn-next,
.theme-shell-dark >>> .page-section .el-pager li {
background: #111827;
color: #dbeafe;
border: 1px solid rgba(148, 163, 184, 0.18);
}
</style> </style>

395
src/components/TestPlatform/Case/CaseList.vue
View File

@@ -36,7 +36,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-tabs v-model="activeTab" style="margin-top: 8px;"> <el-tabs v-model="activeTab" class="case-list-tabs" style="margin-top: 8px;">
<el-tab-pane label="模块列表" name="modules"> <el-tab-pane label="模块列表" name="modules">
<div class="module-list-toolbar"> <div class="module-list-toolbar">
<el-button <el-button
@@ -588,6 +588,7 @@
width="760px" width="760px"
top="6vh" top="6vh"
append-to-body append-to-body
custom-class="case-ai-detail-dialog"
@closed="resetAiCaseDetailDialog"> @closed="resetAiCaseDetailDialog">
<div v-loading="aiCaseDetailLoading" class="ai-case-detail-wrap"> <div v-loading="aiCaseDetailLoading" class="ai-case-detail-wrap">
<template v-if="!aiCaseDetailLoading && aiCaseDetailRowPresent"> <template v-if="!aiCaseDetailLoading && aiCaseDetailRowPresent">
@@ -641,6 +642,7 @@
:visible.sync="autoGenDialogVisible" :visible.sync="autoGenDialogVisible"
width="560px" width="560px"
append-to-body append-to-body
custom-class="case-auto-gen-dialog"
@closed="resetAutoGenDialog"> @closed="resetAutoGenDialog">
<el-form ref="autoGenFormRef" :model="autoGenForm" :rules="autoGenRules" label-width="120px" size="small"> <el-form ref="autoGenFormRef" :model="autoGenForm" :rules="autoGenRules" label-width="120px" size="small">
<el-form-item label="当前用例"> <el-form-item label="当前用例">
@@ -2212,25 +2214,26 @@ export default {
.case-import-title { .case-import-title {
font-size: 28px; font-size: 28px;
color: #303133; color: #f8fafc;
margin-bottom: 6px; margin-bottom: 6px;
} }
.case-import-subtitle { .case-import-subtitle {
color: #909399; color: #94a3b8;
margin-bottom: 16px; margin-bottom: 16px;
} }
.case-import-dropzone { .case-import-dropzone {
border: 1px dashed #dcdfe6; border: 1px dashed rgba(56, 189, 248, 0.36);
border-radius: 4px; border-radius: 4px;
padding: 28px 20px; padding: 28px 20px;
margin: 0 auto; margin: 0 auto;
max-width: 520px; max-width: 520px;
background: #0f172a;
} }
.case-import-drop-text { .case-import-drop-text {
color: #606266; color: #cbd5e1;
margin-bottom: 10px; margin-bottom: 10px;
} }
@@ -2240,12 +2243,12 @@ export default {
} }
.case-import-file-tip { .case-import-file-tip {
color: #909399; color: #94a3b8;
} }
.case-import-file-name { .case-import-file-name {
margin-top: 8px; margin-top: 8px;
color: #303133; color: #f8fafc;
} }
.case-import-actions { .case-import-actions {
@@ -2281,10 +2284,10 @@ export default {
.ai-case-import-tip { .ai-case-import-tip {
margin: 0 0 12px; margin: 0 0 12px;
padding: 10px 12px; padding: 10px 12px;
background: #f0f9ff; background: rgba(56, 189, 248, 0.1);
border: 1px solid #d9ecff; border: 1px solid rgba(56, 189, 248, 0.28);
border-radius: 4px; border-radius: 4px;
color: #606266; color: #cbd5e1;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
} }
@@ -2299,22 +2302,22 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 12px; margin-bottom: 12px;
padding: 8px 10px; padding: 8px 10px;
background: #fafafa; background: #162033;
border: 1px solid #ebeef5; border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
color: #606266; color: #cbd5e1;
} }
.ai-gen-params-label { .ai-gen-params-label {
font-weight: 600; font-weight: 600;
color: #303133; color: #f8fafc;
} }
.ai-gen-params-hint { .ai-gen-params-hint {
margin-left: 6px; margin-left: 6px;
font-size: 12px; font-size: 12px;
color: #909399; color: #94a3b8;
} }
.ai-doc-block { .ai-doc-block {
@@ -2324,7 +2327,7 @@ export default {
.ai-doc-block-title { .ai-doc-block-title {
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
color: #303133; color: #f8fafc;
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -2352,15 +2355,15 @@ export default {
.ai-case-table-title { .ai-case-table-title {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #303133; color: #f8fafc;
margin-bottom: 0; margin-bottom: 0;
} }
.mindmap-wrap { .mindmap-wrap {
margin-top: 8px; margin-top: 8px;
border: 1px solid #ebeef5; border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 6px; border-radius: 6px;
background: #fafcff; background: #0f172a;
padding: 14px 12px; padding: 14px 12px;
min-height: 280px; min-height: 280px;
overflow: auto; overflow: auto;
@@ -2414,11 +2417,11 @@ export default {
gap: 6px; gap: 6px;
min-width: 220px; min-width: 220px;
max-width: 760px; max-width: 760px;
background: #fff; background: #111827;
border: 1px solid #dce6ff; border: 1px solid rgba(56, 189, 248, 0.28);
border-radius: 8px; border-radius: 8px;
padding: 8px 10px; 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 { .mindmap-node-head {
@@ -2442,7 +2445,7 @@ export default {
.mindmap-node-title { .mindmap-node-title {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
color: #303133; color: #f8fafc;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;
word-break: break-word; word-break: break-word;
@@ -2477,15 +2480,15 @@ export default {
.mindmap-inline-detail-card { .mindmap-inline-detail-card {
width: 420px; width: 420px;
max-width: 620px; max-width: 620px;
background: #fff; background: #111827;
border: 1px solid #d9e8f6; border: 1px solid rgba(56, 189, 248, 0.26);
border-radius: 8px; border-radius: 8px;
padding: 10px 12px; 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 { .mindmap-inline-detail-title {
color: #303133; color: #f8fafc;
font-weight: 600; font-weight: 600;
} }
@@ -2497,7 +2500,7 @@ export default {
} }
.mindmap-inline-detail-item { .mindmap-inline-detail-item {
color: #606266; color: #cbd5e1;
line-height: 1.6; line-height: 1.6;
margin-bottom: 6px; margin-bottom: 6px;
white-space: pre-wrap; white-space: pre-wrap;
@@ -2520,12 +2523,12 @@ export default {
} }
.mindmap-meta-text { .mindmap-meta-text {
color: #909399; color: #94a3b8;
font-size: 12px; font-size: 12px;
} }
.mindmap-empty { .mindmap-empty {
color: #909399; color: #94a3b8;
text-align: center; text-align: center;
line-height: 220px; line-height: 220px;
} }
@@ -2537,7 +2540,6 @@ export default {
.ai-case-detail-title { .ai-case-detail-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #303133;
line-height: 1.4; line-height: 1.4;
margin-bottom: 14px; margin-bottom: 14px;
} }
@@ -2553,33 +2555,352 @@ export default {
.ai-case-detail-label { .ai-case-detail-label {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #606266;
margin-bottom: 6px; margin-bottom: 6px;
} }
.ai-case-detail-text { .ai-case-detail-text {
font-size: 13px; font-size: 13px;
color: #303133;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
padding: 10px 12px; padding: 10px 12px;
background: #f9fafc;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ebeef5;
} }
.ai-case-detail-empty { .ai-case-detail-empty {
text-align: center; text-align: center;
color: #909399; color: #94a3b8;
padding: 32px 0; padding: 32px 0;
font-size: 13px; font-size: 13px;
} }
.auto-gen-case-title { .auto-gen-case-title {
color: #303133;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
word-break: break-word; 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 {
color: #0f172a;
}
body.theme-light .ai-gen-params-hint {
color: #64748b;
}
body.theme-light .mindmap-wrap {
background: #f8fbff;
border-color: #dbe5f3;
}
body.theme-light .xmind-tree /deep/ .el-tree-node__children:before {
border-left-color: #cbd5e1;
}
body.theme-light .xmind-tree /deep/ .el-tree-node__content:before {
border-top-color: #94a3b8;
}
body.theme-light .mindmap-node {
background: #ffffff;
border-color: #dbe5f3;
box-shadow: 0 1px 6px rgba(37, 99, 235, 0.08);
}
body.theme-light .mindmap-node-title {
color: #0f172a;
}
body.theme-light .mindmap-node-project {
border-color: #67c23a;
box-shadow: 0 1px 6px rgba(103, 194, 58, 0.12);
}
body.theme-light .mindmap-node-module {
border-color: #e6a23c;
box-shadow: 0 1px 6px rgba(230, 162, 60, 0.1);
}
body.theme-light .mindmap-node-case {
border-color: #93c5fd;
}
body.theme-light .mindmap-inline-detail-line {
border-top-color: #94a3b8;
}
body.theme-light .mindmap-inline-detail-card {
background: #ffffff;
border-color: #dbe5f3;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}
body.theme-light .mindmap-inline-detail-title {
color: #0f172a;
}
body.theme-light .mindmap-inline-detail-item {
color: #475569;
}
body.theme-light .mindmap-meta-text,
body.theme-light .mindmap-empty {
color: #64748b;
}
</style>
<!-- 非 scoped：Tab / append-to-body 弹窗 / 日期范围在深浅色下与整站一致 -->
<style>
.case-list-tabs .el-tabs__item {
color: #94a3b8;
}
.case-list-tabs .el-tabs__item:hover {
color: #cbd5e1;
}
.case-list-tabs .el-tabs__item.is-active {
color: #38bdf8;
}
.case-list-tabs .el-tabs__nav-wrap::after {
background-color: rgba(148, 163, 184, 0.18);
}
body.theme-light .case-list-tabs .el-tabs__item {
color: #64748b;
}
body.theme-light .case-list-tabs .el-tabs__item:hover {
color: #334155;
}
body.theme-light .case-list-tabs .el-tabs__item.is-active {
color: #2563eb;
}
body.theme-light .case-list-tabs .el-tabs__nav-wrap::after {
background-color: #e2e8f0;
}
.el-dialog.case-auto-gen-dialog {
background: #111827;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.el-dialog.case-auto-gen-dialog .el-dialog__header {
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.el-dialog.case-auto-gen-dialog .el-dialog__title,
.el-dialog.case-auto-gen-dialog .el-dialog__body,
.el-dialog.case-auto-gen-dialog .el-form-item__label {
color: #e5e7eb;
}
.el-dialog.case-auto-gen-dialog .auto-gen-case-title {
color: #f1f5f9;
}
.el-dialog.case-auto-gen-dialog .el-input__inner,
.el-dialog.case-auto-gen-dialog .el-textarea__inner,
.el-dialog.case-auto-gen-dialog .el-select .el-input__inner {
background-color: #0f172a;
border-color: rgba(148, 163, 184, 0.28);
color: #f8fafc;
}
.el-dialog.case-auto-gen-dialog .el-input__inner::placeholder,
.el-dialog.case-auto-gen-dialog .el-textarea__inner::placeholder {
color: #64748b;
}
body.theme-light .el-dialog.case-auto-gen-dialog {
background: #ffffff;
border-color: #e5e7eb;
}
body.theme-light .el-dialog.case-auto-gen-dialog .el-dialog__header {
border-bottom-color: #ebeef5;
}
body.theme-light .el-dialog.case-auto-gen-dialog .el-dialog__title,
body.theme-light .el-dialog.case-auto-gen-dialog .el-dialog__body,
body.theme-light .el-dialog.case-auto-gen-dialog .el-form-item__label {
color: #303133;
}
body.theme-light .el-dialog.case-auto-gen-dialog .auto-gen-case-title {
color: #0f172a;
}
body.theme-light .el-dialog.case-auto-gen-dialog .el-input__inner,
body.theme-light .el-dialog.case-auto-gen-dialog .el-textarea__inner,
body.theme-light .el-dialog.case-auto-gen-dialog .el-select .el-input__inner {
background-color: #ffffff;
border-color: #dcdfe6;
color: #606266;
}
.page-wrap .el-date-editor .el-input__inner {
background-color: #0f172a;
border-color: rgba(148, 163, 184, 0.28);
color: #f8fafc;
}
.page-wrap .el-date-editor .el-range-input {
background-color: transparent;
color: #f8fafc;
}
.page-wrap .el-date-editor .el-range-separator {
color: #94a3b8;
}
.page-wrap .el-date-editor .el-range-input::placeholder {
color: #64748b;
}
body.theme-light .page-wrap .el-date-editor .el-input__inner {
background-color: #ffffff;
border-color: #dcdfe6;
color: #606266;
}
body.theme-light .page-wrap .el-date-editor .el-range-input {
color: #606266;
}
body.theme-light .page-wrap .el-date-editor .el-range-separator {
color: #909399;
}
/* AI 用例详情弹窗（append-to-body） */
.el-dialog.case-ai-detail-dialog {
background: #111827;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.el-dialog.case-ai-detail-dialog .el-dialog__header {
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.el-dialog.case-ai-detail-dialog .el-dialog__title {
color: #f8fafc;
}
.el-dialog.case-ai-detail-dialog .el-dialog__body {
color: #e5e7eb;
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-title {
color: #f8fafc;
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-label {
color: #dbeafe;
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-text {
color: #e5e7eb;
background: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.el-dialog.case-ai-detail-dialog .ai-case-detail-empty {
color: #94a3b8;
}
.el-dialog.case-ai-detail-dialog .el-descriptions__body {
background-color: #111827;
color: #e5e7eb;
}
.el-dialog.case-ai-detail-dialog .el-descriptions-item__label {
color: #94a3b8;
background: #1f2937;
}
.el-dialog.case-ai-detail-dialog .el-descriptions-item__content {
color: #e5e7eb;
background: #111827;
}
.el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions__table {
border-color: rgba(148, 163, 184, 0.2);
}
.el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions-item__cell {
border-color: rgba(148, 163, 184, 0.2);
}
body.theme-light .el-dialog.case-ai-detail-dialog {
background: #ffffff;
border-color: #e5e7eb;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-dialog__header {
border-bottom-color: #ebeef5;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-dialog__title {
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-dialog__body {
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-title {
color: #0f172a;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-label {
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-text {
color: #334155;
background: #f8fafc;
border: 1px solid #e5e7eb;
}
body.theme-light .el-dialog.case-ai-detail-dialog .ai-case-detail-empty {
color: #909399;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions__body {
background-color: #ffffff;
color: #303133;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions-item__label {
color: #606266;
background: #fafafa;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions-item__content {
color: #303133;
background: #ffffff;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions__table {
border-color: #ebeef5;
}
body.theme-light .el-dialog.case-ai-detail-dialog .el-descriptions__body .el-descriptions-item__cell {
border-color: #ebeef5;
}
</style> </style>

318
src/components/User/Login.vue
View File

@@ -1,14 +1,24 @@
<template> <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="content_right">
<div class="login-body-title"> <div class="login-body-title">
<h2>登录</h2> <h2>欢迎登录</h2>
<p>Quality Workspace</p>
</div> </div>
<div class="messge"> <div class="messge">
<span>{{ msg }}</span> <span>{{ msg }}</span>
</div> </div>
<div class="cr_top"> <div class="cr_top">
<div class="ct_input" style="height: 60px;width: 254px"> <div class="ct_input">
<span class="ct-img-yhm">&nbsp;</span> <span class="ct-img-yhm">&nbsp;</span>
<input <input
id="username" id="username"
@@ -23,7 +33,7 @@
placeholder="用户名" placeholder="用户名"
@keyup.enter="handleLogin"> @keyup.enter="handleLogin">
</div> </div>
<div class="ct_input" style="height:60px;width: 254px"> <div class="ct_input">
<span class="ct_img_mm">&nbsp;</span> <span class="ct_img_mm">&nbsp;</span>
<input <input
id="password" id="password"
@@ -57,10 +67,34 @@ export default {
return { return {
msg: '', msg: '',
username: '', 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: { 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() { handleLogin() {
if (!this.username || !this.password) { if (!this.username || !this.password) {
this.msg = 'username、password 为必传参数' this.msg = 'username、password 为必传参数'
@@ -126,67 +160,147 @@ export default {
<style scoped> <style scoped>
@import "../../assets/css/Form.css"; @import "../../assets/css/Form.css";
.content_right { #backgroud {
padding: 20px 0; display: flex;
background: #fff; align-items: center;
color: #333; justify-content: center;
border-radius: 3px; gap: 80px;
border-color: rgba(250, 255, 251, .8); 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%);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6); overflow: hidden;
position: absolute; }
left: 0;
right: 0; .login-hero {
top: 0; width: 420px;
bottom: 0; color: #f8fbff;
margin: auto; }
outline: 0;
width: 300px; .login-brand-mark {
height: 300px; width: 56px;
height: 56px;
line-height: 56px;
text-align: center; 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 { .cr_top .ct_input {
position: relative; position: relative;
height: 48px;
width: 100%;
margin-bottom: 16px;
} }
.account-oprate .regist-btn { .account-oprate .regist-btn {
float: right; float: right;
font-size: 14px; font-size: 14px;
color: #333; color: #67e8f9;
text-decoration: none;
}
.account-oprate .regist-btn:hover {
color: #bae6fd;
} }
.messge { .messge {
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 14px;
height: 20px; height: 22px;
text-align: left; text-align: left;
padding-left: 24px; color: #f87171;
color: #D60909;
} }
.content_right .cr_top { .content_right .cr_top {
position: relative; position: relative;
margin: 0 23px 0; margin: 0;
} }
.content_right .input_text { .content_right .input_text {
margin-bottom: 18px; background: rgba(8, 18, 36, 0.86);
background: #fff;
} }
.account-oprate { .account-oprate {
width: 252px; width: 100%;
margin-left: 24px;
} }
.ct_img_mm, .ct_img_mm,
.ct-img-yhm { .ct-img-yhm {
position: absolute; position: absolute;
top: 14px; top: 16px;
left: 8px; left: 14px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png"); 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 { .ct-img-yhm {
@@ -195,39 +309,52 @@ export default {
.input_text { .input_text {
display: inline-block; display: inline-block;
width: 224px; box-sizing: border-box;
height: 24px; width: 100%;
padding: 8px 0 8px 28px; height: 48px;
padding: 0 14px 0 42px;
font-size: 14px; font-size: 14px;
color: #000; color: #e0f2fe;
border: 1px solid #ccc; border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 3px; border-radius: 14px;
vertical-align: middle; vertical-align: middle;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
} }
.input_text:hover { .input_text::placeholder {
border-color: rgba(82, 168, 236, .8); color: #6f8baa;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6); }
.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; outline: 0;
} }
.btn_login:hover { .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 { .btn_login {
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
width: 254px; width: 100%;
height: 37px; height: 46px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 14px;
color: #fff; color: #06111f;
border: 1px solid #4591f5; border: 1px solid rgba(103, 232, 249, 0.68);
background-color: #4591f5; background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
margin-bottom: 14px; margin-bottom: 16px;
-webkit-appearance: none; -webkit-appearance: none;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
font-weight: 800;
} }
button, button,
@@ -273,4 +400,95 @@ ul {
padding: 0; padding: 0;
font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif; 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> </style>

385
src/components/User/Register.vue
View File

@@ -1,10 +1,27 @@
<template> <template>
<div id="backgroud"> <div id="backgroud" :class="themeClass">
<div class="register-head" style="padding-top: 20px"></div> <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="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-form-item label="用户名" prop="username">
<el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input> <el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
@@ -77,10 +94,34 @@ export default {
username: [{ required: true, validator: validateUsername, trigger: 'blur' }], username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
password: [{ required: true, validator: validatePass, trigger: 'blur' }], password: [{ required: true, validator: validatePass, trigger: 'blur' }],
checkPass: [{ required: true, validator: validatePass2, 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: { 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) { open(message) {
this.$alert(message, '提示', { this.$alert(message, '提示', {
confirmButtonText: '确定' confirmButtonText: '确定'
@@ -116,35 +157,349 @@ export default {
} }
</script> </script>
<style> <style scoped>
@import "../../assets/css/Form.css"; #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 { .location-title {
text-align: center; 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 { .register-head {
position: absolute; position: absolute;
} }
.el-input { .demo-ruleForm {
float: left; width: 100%;
width: 80%;
} }
.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; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: stretch;
margin-left: 0 !important;
} }
.login-link-wrap { .enter-btn {
width: 100%; width: 100%;
margin-top: 8px; height: 46px;
text-align: right; 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 { .login-link-btn {
align-self: flex-end;
padding-right: 0; 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> </style>

8
src/main.js
View File

@@ -8,6 +8,14 @@ import ElementUI from 'element-ui';
import store from '@/vuex/store' import store from '@/vuex/store'
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios' import axios from 'axios'
function applyInitialTheme() {
const theme = localStorage.getItem('uiTheme') || 'dark'
document.body.classList.remove('theme-dark', 'theme-light')
document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
}
applyInitialTheme()
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.prototype.$axios = axios Vue.prototype.$axios = axios