Compare commits
8 Commits
8a47183662
...
2026-04-29
| Author | SHA1 | Date | |
|---|---|---|---|
|
793a8e1b84 | ||
|
|
971967b791 | ||
|
|
5cafab7534 | ||
|
|
f7cdff31ba | ||
|
|
3b359a7fd5 | ||
|
|
f05cf53b85 | ||
| 238f7bb4ad | |||
|
|
dca942bc8f |
25
index.html
25
index.html
@@ -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>
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
body {
|
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>
|
||||||
|
|||||||
14
nginx.conf
14
nginx.conf
@@ -1,10 +1,24 @@
|
|||||||
|
# 发版后避免浏览器长期使用旧 index 引用旧 js/css
|
||||||
server {
|
server {
|
||||||
listen 80;
|
listen 80;
|
||||||
server_name localhost;
|
server_name localhost;
|
||||||
|
|
||||||
|
client_max_body_size 100m;
|
||||||
|
|
||||||
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
464
src/App.vue
@@ -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>
|
||||||
|
|||||||
@@ -82,6 +82,32 @@ export function deleteCase(projectId, caseId) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 恢复状态为 0 的用例为正常（1），POST body: { caseIds: number[] } */
|
||||||
|
export function restoreCases(caseIds) {
|
||||||
|
const raw = Array.isArray(caseIds) ? caseIds : [caseIds]
|
||||||
|
const caseIdsNorm = raw
|
||||||
|
.map(id => Number(id))
|
||||||
|
.filter(id => Number.isFinite(id) && id > 0)
|
||||||
|
return request({
|
||||||
|
url: '/case/restore',
|
||||||
|
method: 'post',
|
||||||
|
data: { caseIds: caseIdsNorm }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据手工用例生成 UI / 接口自动化脚本（字段均为驼峰）。
|
||||||
|
* 典型 body：projectId, caseId, automationType, prompt, caseKey, moduleName, productName,
|
||||||
|
* projectName, steps, expectedResults
|
||||||
|
*/
|
||||||
|
export function generateCaseAutomation(data) {
|
||||||
|
return request({
|
||||||
|
url: '/case/generate-automation',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export function createCaseSnapshot(projectId, caseId) {
|
export function createCaseSnapshot(projectId, caseId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/case/snapshot/create',
|
url: '/case/snapshot/create',
|
||||||
|
|||||||
107
src/api/documentApi.js
Normal file
107
src/api/documentApi.js
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
/** 文档列表 */
|
||||||
|
export function getDocumentList(params) {
|
||||||
|
return request({
|
||||||
|
url: '/document/list',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 文档详情 */
|
||||||
|
export function getDocumentDetail(params) {
|
||||||
|
return request({
|
||||||
|
url: '/document/detail',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 上传 PDF（multipart，单文件一次请求） */
|
||||||
|
export function uploadDocumentPdf({ file, productId, projectId, createdBy }) {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', file)
|
||||||
|
formData.append('productId', productId)
|
||||||
|
formData.append('projectId', projectId)
|
||||||
|
if (createdBy != null && createdBy !== '') {
|
||||||
|
formData.append('createdBy', createdBy)
|
||||||
|
}
|
||||||
|
return request({
|
||||||
|
url: '/document/upload',
|
||||||
|
method: 'post',
|
||||||
|
data: formData
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 创建文档 */
|
||||||
|
export function createDocument(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/create',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 更新文档 */
|
||||||
|
export function updateDocument(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/update',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除文档 */
|
||||||
|
export function deleteDocument(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/delete',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 刷新飞书文档 */
|
||||||
|
export function refreshDocument(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/refresh',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 生成测试用例（预览） */
|
||||||
|
export function generateDocumentCases(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/generate-cases',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 模块匹配 */
|
||||||
|
export function matchDocumentModules(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/match-modules',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导入测试用例 */
|
||||||
|
export function importDocumentCases(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/import-cases',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 批量创建模块 */
|
||||||
|
export function batchCreateDocumentModules(data) {
|
||||||
|
return request({
|
||||||
|
url: '/document/batch-create-modules',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
43
src/api/skillRuleApi.js
Normal file
43
src/api/skillRuleApi.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
/** Skill */
|
||||||
|
export function getSkillList(params) {
|
||||||
|
return request({ url: '/skill/list', method: 'get', params: params || {} })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSkillDetail(skillId) {
|
||||||
|
return request({ url: '/skill/detail', method: 'get', params: { skillId } })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createSkill(data) {
|
||||||
|
return request({ url: '/skill/create', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateSkill(data) {
|
||||||
|
return request({ url: '/skill/update', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteSkill(skillId) {
|
||||||
|
return request({ url: '/skill/delete', method: 'post', data: { skillId } })
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Business rule */
|
||||||
|
export function getBusinessRuleList(params) {
|
||||||
|
return request({ url: '/business-rule/list', method: 'get', params: params || {} })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBusinessRuleDetail(ruleId) {
|
||||||
|
return request({ url: '/business-rule/detail', method: 'get', params: { ruleId } })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createBusinessRule(data) {
|
||||||
|
return request({ url: '/business-rule/create', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateBusinessRule(data) {
|
||||||
|
return request({ url: '/business-rule/update', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteBusinessRule(ruleId) {
|
||||||
|
return request({ url: '/business-rule/delete', method: 'post', data: { ruleId } })
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -97,20 +115,48 @@ export default {
|
|||||||
const filteredMenus = this.filterMenus(this.userMenus)
|
const filteredMenus = this.filterMenus(this.userMenus)
|
||||||
const menus = this.renameTestPlatformToCycle(filteredMenus)
|
const menus = this.renameTestPlatformToCycle(filteredMenus)
|
||||||
const sorted = this.sortMenusByProductOrder(menus)
|
const sorted = this.sortMenusByProductOrder(menus)
|
||||||
const hasHome = sorted.some(menu => menu.path === '/effekt' || menu.name === '首页')
|
const withSkillMenu = this.injectBusinessSkillConfigMenu(sorted)
|
||||||
|
const hasHome = withSkillMenu.some(menu => menu.path === '/effekt' || menu.name === '首页')
|
||||||
if (hasHome) {
|
if (hasHome) {
|
||||||
return sorted
|
return withSkillMenu
|
||||||
}
|
}
|
||||||
return [homeMenu, ...sorted]
|
return [homeMenu, ...withSkillMenu]
|
||||||
},
|
},
|
||||||
displayName() {
|
displayName() {
|
||||||
if (!this.currentUser) {
|
if (!this.currentUser) {
|
||||||
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
|
||||||
},
|
},
|
||||||
@@ -129,6 +175,7 @@ export default {
|
|||||||
'/system/user': '/system/user',
|
'/system/user': '/system/user',
|
||||||
'/system/menu': '/system/menu',
|
'/system/menu': '/system/menu',
|
||||||
'/system/permission': '/system/permission',
|
'/system/permission': '/system/permission',
|
||||||
|
'/test-platform/skill-rules': '/test-platform/skill-rules',
|
||||||
'/bug': '/bug/list',
|
'/bug': '/bug/list',
|
||||||
'/bug/list': '/bug/list',
|
'/bug/list': '/bug/list',
|
||||||
'/bug/detail': '/bug/detail',
|
'/bug/detail': '/bug/detail',
|
||||||
@@ -166,6 +213,7 @@ export default {
|
|||||||
'产品管理': 'el-icon-box',
|
'产品管理': 'el-icon-box',
|
||||||
'项目管理': 'el-icon-s-management',
|
'项目管理': 'el-icon-s-management',
|
||||||
'用例管理': 'el-icon-document',
|
'用例管理': 'el-icon-document',
|
||||||
|
'业务技能配置': 'el-icon-collection',
|
||||||
'测试计划': 'el-icon-date',
|
'测试计划': 'el-icon-date',
|
||||||
'测试报告': 'el-icon-data-line',
|
'测试报告': 'el-icon-data-line',
|
||||||
'测试工具': 'el-icon-s-tools',
|
'测试工具': 'el-icon-s-tools',
|
||||||
@@ -216,6 +264,59 @@ export default {
|
|||||||
return Object.assign({}, item, { name, children })
|
return Object.assign({}, item, { name, children })
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* 在「用例周期」分组下、「用例管理」上方插入「业务技能配置」（与后端菜单并存时去重）。
|
||||||
|
*/
|
||||||
|
injectBusinessSkillConfigMenu(menus) {
|
||||||
|
const INJECT_PATH = '/test-platform/skill-rules'
|
||||||
|
const INJECT_KEY = '__inject_business_skill__'
|
||||||
|
const makeItem = () => ({
|
||||||
|
name: '业务技能配置',
|
||||||
|
path: INJECT_PATH,
|
||||||
|
icon: 'el-icon-collection',
|
||||||
|
menuId: INJECT_KEY,
|
||||||
|
id: INJECT_KEY,
|
||||||
|
visible: 1,
|
||||||
|
status: 1,
|
||||||
|
children: []
|
||||||
|
})
|
||||||
|
const hasInjected = list =>
|
||||||
|
(list || []).some(c => c.path === INJECT_PATH || c.menuId === INJECT_KEY || c.id === INJECT_KEY)
|
||||||
|
const mergeCycleChildren = children => {
|
||||||
|
if (!children || !children.length) return children || []
|
||||||
|
if (hasInjected(children)) {
|
||||||
|
return children.map(c =>
|
||||||
|
c.children && c.children.length
|
||||||
|
? Object.assign({}, c, { children: this.injectBusinessSkillConfigMenu(c.children) })
|
||||||
|
: c
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const next = children.map(c =>
|
||||||
|
c.children && c.children.length
|
||||||
|
? Object.assign({}, c, { children: this.injectBusinessSkillConfigMenu(c.children) })
|
||||||
|
: c
|
||||||
|
)
|
||||||
|
const idx = next.findIndex(c => {
|
||||||
|
const p = String(c.path || '')
|
||||||
|
return p === '/test-platform/case' || c.name === '用例管理'
|
||||||
|
})
|
||||||
|
if (idx >= 0) {
|
||||||
|
next.splice(idx, 0, makeItem())
|
||||||
|
} else {
|
||||||
|
next.unshift(makeItem())
|
||||||
|
}
|
||||||
|
return next
|
||||||
|
}
|
||||||
|
return (menus || []).map(item => {
|
||||||
|
if (item.name === '用例周期' && item.children && item.children.length) {
|
||||||
|
return Object.assign({}, item, { children: mergeCycleChildren(item.children.slice()) })
|
||||||
|
}
|
||||||
|
if (item.children && item.children.length) {
|
||||||
|
return Object.assign({}, item, { children: this.injectBusinessSkillConfigMenu(item.children) })
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
},
|
||||||
/** 左侧栏顶级顺序：首页 → 用例周期 → Bug管理 → 造数 → 系统管理 → 其它 */
|
/** 左侧栏顶级顺序：首页 → 用例周期 → Bug管理 → 造数 → 系统管理 → 其它 */
|
||||||
representativeMenuPath(menu) {
|
representativeMenuPath(menu) {
|
||||||
const direct = String((menu && menu.path) || '').trim()
|
const direct = String((menu && menu.path) || '').trim()
|
||||||
@@ -277,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>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
<el-option v-for="item in moduleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
<el-option v-for="item in moduleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="用例编号">
|
<el-form-item v-if="form.id" label="用例编号">
|
||||||
<el-input v-model="form.caseKey" placeholder="不填则由后端自动生成"></el-input>
|
<el-input v-model="form.caseKey" placeholder="不填则由后端自动生成"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="标题" prop="title">
|
<el-form-item label="标题" prop="title">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
999
src/components/TestPlatform/Case/DocumentSourcePanel.vue
Normal file
999
src/components/TestPlatform/Case/DocumentSourcePanel.vue
Normal file
@@ -0,0 +1,999 @@
|
|||||||
|
<template>
|
||||||
|
<div class="document-source-panel">
|
||||||
|
<div v-if="!compact" class="document-source-main">
|
||||||
|
<div class="document-source-head">
|
||||||
|
<span class="document-source-title">文档源</span>
|
||||||
|
<span class="document-source-hint">PRD / 飞书</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-form :inline="true" size="mini" class="document-source-filters" @submit.native.prevent>
|
||||||
|
<el-form-item label="类型">
|
||||||
|
<el-select v-model="docQuery.type" clearable placeholder="全部" style="width: 88px;">
|
||||||
|
<el-option label="PDF" :value="1"></el-option>
|
||||||
|
<el-option label="飞书" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="docQuery.status" clearable placeholder="全部" style="width: 100px;">
|
||||||
|
<el-option label="待解析" :value="0"></el-option>
|
||||||
|
<el-option label="已解析" :value="1"></el-option>
|
||||||
|
<el-option label="已生成用例" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关键词">
|
||||||
|
<el-input
|
||||||
|
v-model="docQuery.keyword"
|
||||||
|
clearable
|
||||||
|
placeholder="来源"
|
||||||
|
style="width: 120px;"
|
||||||
|
@keyup.enter.native="handleDocSearch">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :disabled="!projectId" @click="handleDocSearch">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="mini" :disabled="!projectId" @click="openCreateDialog">新建</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="mini" :disabled="!projectId" @click="openBatchModuleDialog">批量建模块</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
ref="docTable"
|
||||||
|
v-loading="docLoading"
|
||||||
|
:data="docTableData"
|
||||||
|
border
|
||||||
|
size="small"
|
||||||
|
:height="tableHeight"
|
||||||
|
highlight-current-row
|
||||||
|
class="document-source-table"
|
||||||
|
:empty-text="projectId ? '暂无文档' : '请先选择项目'"
|
||||||
|
@row-click="handleDocRowClick">
|
||||||
|
<el-table-column prop="id" label="ID" width="56"></el-table-column>
|
||||||
|
<el-table-column label="类型" width="72">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag size="mini" :type="scope.row.type === 2 ? 'warning' : 'info'">{{ formatDocType(scope.row.type) }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" width="88">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag size="mini" :type="docStatusTagType(scope.row.status)">{{ formatDocStatus(scope.row.status) }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="来源" min-width="100" show-overflow-tooltip>
|
||||||
|
<template slot-scope="scope">{{ scope.row.source }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updated_time" label="更新时间" width="136" show-overflow-tooltip></el-table-column>
|
||||||
|
<el-table-column label="操作" width="120" fixed="right">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" size="mini" @click.stop="openDetail(scope.row)">详情</el-button>
|
||||||
|
<el-dropdown trigger="click" @command="cmd => handleDocCommand(cmd, scope.row)">
|
||||||
|
<el-button type="text" size="mini">更多</el-button>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item v-if="scope.row.type === 2" command="refresh">刷新飞书</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="generate">生成用例</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="delete" divided>删除</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="document-source-pagination">
|
||||||
|
<el-pagination
|
||||||
|
small
|
||||||
|
layout="total, prev, pager, next"
|
||||||
|
:current-page="docPageNo"
|
||||||
|
:page-size="docPageSize"
|
||||||
|
:total="docTotal"
|
||||||
|
@current-change="handleDocPageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详情 -->
|
||||||
|
<el-drawer title="文档详情" :visible.sync="detailVisible" direction="rtl" size="480px" append-to-body>
|
||||||
|
<div v-loading="detailLoading" class="document-detail-body">
|
||||||
|
<template v-if="detailRecord">
|
||||||
|
<el-descriptions :column="1" size="small" border>
|
||||||
|
<el-descriptions-item label="ID">{{ detailRecord.id }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="类型">{{ formatDocType(detailRecord.type) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="状态">{{ formatDocStatus(detailRecord.status) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="来源">{{ detailRecord.source }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="版本">{{ detailRecord.version }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="AI 模型">{{ detailRecord.ai_model || '—' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="创建时间">{{ detailRecord.created_time }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="更新时间">{{ detailRecord.updated_time }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<div class="document-detail-content-label">内容</div>
|
||||||
|
<el-input v-model="detailContentDisplay" type="textarea" :rows="14" readonly></el-input>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
|
||||||
|
<!-- 新建 -->
|
||||||
|
<el-dialog title="新建文档" :visible.sync="createVisible" width="560px" append-to-body @close="resetCreateForm">
|
||||||
|
<el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="96px" size="small">
|
||||||
|
<el-form-item label="类型" prop="type">
|
||||||
|
<el-select v-model="createForm.type" style="width: 100%;" @change="onCreateTypeChange">
|
||||||
|
<el-option label="PDF" :value="1"></el-option>
|
||||||
|
<el-option label="飞书链接" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<template v-if="createForm.type === 1">
|
||||||
|
<el-form-item label="PDF 上传">
|
||||||
|
<div class="pdf-upload-row">
|
||||||
|
<el-button size="small" type="primary" plain :disabled="!projectId" @click="triggerPdfMultiSelect">选择 PDF（可多选）</el-button>
|
||||||
|
<span class="pdf-upload-hint">每个文件将单独请求上传接口</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
ref="pdfMultiInput"
|
||||||
|
type="file"
|
||||||
|
class="hidden-pdf-input"
|
||||||
|
multiple
|
||||||
|
accept=".pdf,application/pdf"
|
||||||
|
@change="onPdfMultiInputChange">
|
||||||
|
<ul v-if="pdfPendingFiles.length" class="pdf-pending-list">
|
||||||
|
<li v-for="(f, idx) in pdfPendingFiles" :key="idx + f.name + f.size" class="pdf-pending-item">
|
||||||
|
<span class="pdf-pending-name">{{ f.name }}</span>
|
||||||
|
<span class="pdf-pending-size">（{{ formatFileSize(f.size) }}）</span>
|
||||||
|
<el-button type="text" size="mini" @click="removePdfPending(idx)">移除</el-button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p v-else class="pdf-upload-empty">未选择文件</p>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<el-form-item label="来源" prop="source">
|
||||||
|
<el-input v-model="createForm.source" placeholder="飞书文档链接"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="内容">
|
||||||
|
<el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="可选"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer">
|
||||||
|
<el-button size="small" @click="createVisible = false">取消</el-button>
|
||||||
|
<template v-if="createForm.type === 1">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
:loading="pdfUploading"
|
||||||
|
:disabled="!pdfPendingFiles.length || !projectId"
|
||||||
|
@click="submitAllPdfUploads">
|
||||||
|
上传全部
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<el-button v-else type="primary" size="small" :loading="createSubmitting" @click="submitCreate">确定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 编辑 -->
|
||||||
|
<el-dialog title="编辑文档" :visible.sync="editVisible" width="520px" append-to-body @close="resetEditForm">
|
||||||
|
<el-form ref="editFormRef" :model="editForm" label-width="96px" size="small">
|
||||||
|
<el-form-item label="类型">
|
||||||
|
<el-select v-model="editForm.type" style="width: 100%;">
|
||||||
|
<el-option label="PDF" :value="1"></el-option>
|
||||||
|
<el-option label="飞书链接" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="来源">
|
||||||
|
<el-input v-model="editForm.source"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="内容">
|
||||||
|
<el-input v-model="editForm.content" type="textarea" :rows="5"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="AI 模型">
|
||||||
|
<el-input v-model="editForm.ai_model" placeholder="可选"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer">
|
||||||
|
<el-button size="small" @click="editVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" size="small" :loading="editSubmitting" @click="submitEdit">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 生成 / 匹配 / 导入 -->
|
||||||
|
<el-drawer
|
||||||
|
title="从文档生成用例"
|
||||||
|
:visible.sync="generateVisible"
|
||||||
|
direction="rtl"
|
||||||
|
size="640px"
|
||||||
|
append-to-body
|
||||||
|
@close="resetGenerateState">
|
||||||
|
<div v-if="activeDocument" class="generate-drawer-head">
|
||||||
|
<el-tag size="small">文档 #{{ activeDocument.id }}</el-tag>
|
||||||
|
<span class="generate-drawer-source">{{ activeDocument.source }}</span>
|
||||||
|
</div>
|
||||||
|
<el-form :inline="true" size="small" class="generate-form">
|
||||||
|
<el-form-item label="默认优先级">
|
||||||
|
<el-select v-model="genForm.priority" style="width: 100px;">
|
||||||
|
<el-option label="P0" :value="1"></el-option>
|
||||||
|
<el-option label="P1" :value="2"></el-option>
|
||||||
|
<el-option label="P2" :value="3"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用例类型">
|
||||||
|
<el-input-number v-model="genForm.caseType" :min="1" :max="99" size="small"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :loading="generateLoading" @click="runGenerate">生成预览</el-button>
|
||||||
|
<el-button :loading="matchLoading" :disabled="!previewCases.length" @click="runMatch">匹配模块</el-button>
|
||||||
|
<el-button type="success" :loading="importLoading" :disabled="!previewCases.length" @click="runImport">导入选中</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table :data="previewCases" border size="small" max-height="420">
|
||||||
|
<el-table-column width="48">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-checkbox v-model="scope.row.selected"></el-checkbox>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="title" label="标题" min-width="120" show-overflow-tooltip></el-table-column>
|
||||||
|
<el-table-column label="模块" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.module_name || '—' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="模块ID" width="88">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-input v-model.number="scope.row.module_id" size="mini" placeholder="必填"></el-input>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<p v-if="previewTotal" class="generate-total-hint">共 {{ previewTotal }} 条预览（导入前请为每行填写模块ID）</p>
|
||||||
|
</el-drawer>
|
||||||
|
|
||||||
|
<!-- 批量建模块 -->
|
||||||
|
<el-dialog title="批量创建模块" :visible.sync="batchModuleVisible" width="480px" append-to-body>
|
||||||
|
<p class="batch-module-tip">每行一个模块名称，将创建在当前项目下。</p>
|
||||||
|
<el-input v-model="batchModuleText" type="textarea" :rows="8" placeholder="例如：用户管理 订单中心"></el-input>
|
||||||
|
<span slot="footer">
|
||||||
|
<el-button size="small" @click="batchModuleVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" size="small" :loading="batchModuleSubmitting" @click="submitBatchModules">创建</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import {
|
||||||
|
getDocumentList,
|
||||||
|
getDocumentDetail,
|
||||||
|
uploadDocumentPdf,
|
||||||
|
createDocument,
|
||||||
|
updateDocument,
|
||||||
|
deleteDocument,
|
||||||
|
refreshDocument,
|
||||||
|
generateDocumentCases,
|
||||||
|
matchDocumentModules,
|
||||||
|
importDocumentCases,
|
||||||
|
batchCreateDocumentModules
|
||||||
|
} from '@/api/documentApi'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DocumentSourcePanel',
|
||||||
|
props: {
|
||||||
|
productId: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
projectId: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/** 文档列表表格高度（独立 Tab 可传更大值） */
|
||||||
|
tableHeight: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 360
|
||||||
|
},
|
||||||
|
/** 仅保留新建/编辑等弹窗，不展示列表与筛选；不自动请求文档列表 */
|
||||||
|
compact: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docQuery: {
|
||||||
|
type: '',
|
||||||
|
status: '',
|
||||||
|
keyword: ''
|
||||||
|
},
|
||||||
|
docPageNo: 1,
|
||||||
|
docPageSize: 10,
|
||||||
|
docTotal: 0,
|
||||||
|
docTableData: [],
|
||||||
|
docLoading: false,
|
||||||
|
detailVisible: false,
|
||||||
|
detailLoading: false,
|
||||||
|
detailRecord: null,
|
||||||
|
createVisible: false,
|
||||||
|
createSubmitting: false,
|
||||||
|
pdfUploading: false,
|
||||||
|
pdfPendingFiles: [],
|
||||||
|
createForm: {
|
||||||
|
type: 1,
|
||||||
|
source: '',
|
||||||
|
content: ''
|
||||||
|
},
|
||||||
|
createRules: {
|
||||||
|
source: [{ required: true, message: '请输入飞书链接', trigger: 'blur' }]
|
||||||
|
},
|
||||||
|
editVisible: false,
|
||||||
|
editSubmitting: false,
|
||||||
|
editForm: {
|
||||||
|
documentId: null,
|
||||||
|
type: 1,
|
||||||
|
source: '',
|
||||||
|
content: '',
|
||||||
|
ai_model: ''
|
||||||
|
},
|
||||||
|
generateVisible: false,
|
||||||
|
generateLoading: false,
|
||||||
|
matchLoading: false,
|
||||||
|
importLoading: false,
|
||||||
|
activeDocument: null,
|
||||||
|
genForm: {
|
||||||
|
priority: 2,
|
||||||
|
caseType: 1
|
||||||
|
},
|
||||||
|
previewCases: [],
|
||||||
|
previewTotal: 0,
|
||||||
|
batchModuleVisible: false,
|
||||||
|
batchModuleText: '',
|
||||||
|
batchModuleSubmitting: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['currentUser']),
|
||||||
|
detailContentDisplay() {
|
||||||
|
if (!this.detailRecord) return ''
|
||||||
|
return this.detailRecord.content || ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
projectId: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
this.docPageNo = 1
|
||||||
|
if (this.compact) {
|
||||||
|
if (!val) {
|
||||||
|
this.docTableData = []
|
||||||
|
this.docTotal = 0
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (val) {
|
||||||
|
this.fetchDocuments()
|
||||||
|
} else {
|
||||||
|
this.docTableData = []
|
||||||
|
this.docTotal = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatDocType(type) {
|
||||||
|
if (type === 2) return '飞书'
|
||||||
|
if (type === 1) return 'PDF'
|
||||||
|
return '—'
|
||||||
|
},
|
||||||
|
formatDocStatus(status) {
|
||||||
|
const map = { 0: '待解析', 1: '已解析', 2: '已生成用例' }
|
||||||
|
return map[status] !== undefined ? map[status] : '—'
|
||||||
|
},
|
||||||
|
docStatusTagType(status) {
|
||||||
|
if (status === 0) return 'info'
|
||||||
|
if (status === 1) return 'success'
|
||||||
|
if (status === 2) return 'warning'
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
cleanParams(obj) {
|
||||||
|
return Object.keys(obj || {}).reduce((acc, key) => {
|
||||||
|
const v = obj[key]
|
||||||
|
if (v !== '' && v !== undefined && v !== null) {
|
||||||
|
acc[key] = v
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
},
|
||||||
|
fetchDocuments() {
|
||||||
|
if (!this.projectId) {
|
||||||
|
this.docTableData = []
|
||||||
|
this.docTotal = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.docLoading = true
|
||||||
|
const params = this.cleanParams({
|
||||||
|
productId: this.productId || undefined,
|
||||||
|
projectId: this.projectId,
|
||||||
|
type: this.docQuery.type,
|
||||||
|
status: this.docQuery.status,
|
||||||
|
keyword: this.docQuery.keyword,
|
||||||
|
pageNo: this.docPageNo,
|
||||||
|
pageSize: this.docPageSize
|
||||||
|
})
|
||||||
|
getDocumentList(params)
|
||||||
|
.then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
const list = data.list || data.items || []
|
||||||
|
this.docTableData = Array.isArray(list) ? list : []
|
||||||
|
this.docTotal = Number(data.total || 0)
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.docTableData = []
|
||||||
|
this.docTotal = 0
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.docLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDocSearch() {
|
||||||
|
this.docPageNo = 1
|
||||||
|
this.fetchDocuments()
|
||||||
|
},
|
||||||
|
handleDocPageChange(p) {
|
||||||
|
this.docPageNo = p
|
||||||
|
this.fetchDocuments()
|
||||||
|
},
|
||||||
|
handleDocRowClick(row) {
|
||||||
|
if (this.compact || !this.$refs.docTable) return
|
||||||
|
if (this.$refs.docTable.setCurrentRow) {
|
||||||
|
this.$refs.docTable.setCurrentRow(row)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
syncDocumentListAfterMutation() {
|
||||||
|
if (this.compact) {
|
||||||
|
this.$emit('document-changed')
|
||||||
|
} else {
|
||||||
|
this.fetchDocuments()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openDetail(row) {
|
||||||
|
this.detailVisible = true
|
||||||
|
this.detailRecord = Object.assign({}, row)
|
||||||
|
this.detailLoading = true
|
||||||
|
getDocumentDetail({ documentId: row.id })
|
||||||
|
.then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
this.detailRecord = data
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => {
|
||||||
|
this.detailLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
openCreateDialog() {
|
||||||
|
if (!this.productId || !this.projectId) {
|
||||||
|
this.$message.warning('请先选择产品与项目')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.createForm = {
|
||||||
|
type: 1,
|
||||||
|
source: '',
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
this.pdfPendingFiles = []
|
||||||
|
this.createVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.createFormRef && this.$refs.createFormRef.clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resetCreateForm() {
|
||||||
|
this.createForm = { type: 1, source: '', content: '' }
|
||||||
|
this.pdfPendingFiles = []
|
||||||
|
if (this.$refs.pdfMultiInput) {
|
||||||
|
this.$refs.pdfMultiInput.value = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCreateTypeChange() {
|
||||||
|
this.pdfPendingFiles = []
|
||||||
|
if (this.$refs.pdfMultiInput) {
|
||||||
|
this.$refs.pdfMultiInput.value = ''
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.createFormRef && this.$refs.createFormRef.clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
triggerPdfMultiSelect() {
|
||||||
|
this.$refs.pdfMultiInput && this.$refs.pdfMultiInput.click()
|
||||||
|
},
|
||||||
|
onPdfMultiInputChange(e) {
|
||||||
|
const input = e && e.target
|
||||||
|
const picked = input && input.files ? Array.from(input.files) : []
|
||||||
|
if (input) {
|
||||||
|
input.value = ''
|
||||||
|
}
|
||||||
|
const pdfs = picked.filter(f => {
|
||||||
|
const name = String(f.name || '').toLowerCase()
|
||||||
|
return name.endsWith('.pdf') || f.type === 'application/pdf'
|
||||||
|
})
|
||||||
|
if (picked.length && pdfs.length < picked.length) {
|
||||||
|
this.$message.warning('已忽略非 PDF 文件')
|
||||||
|
}
|
||||||
|
const seen = new Set(this.pdfPendingFiles.map(x => `${x.name}_${x.size}`))
|
||||||
|
pdfs.forEach(f => {
|
||||||
|
const key = `${f.name}_${f.size}`
|
||||||
|
if (!seen.has(key)) {
|
||||||
|
seen.add(key)
|
||||||
|
this.pdfPendingFiles.push(f)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removePdfPending(index) {
|
||||||
|
this.pdfPendingFiles.splice(index, 1)
|
||||||
|
},
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
const n = Number(bytes)
|
||||||
|
if (!Number.isFinite(n) || n < 0) return '—'
|
||||||
|
if (n < 1024) return `${n} B`
|
||||||
|
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
|
||||||
|
return `${(n / 1024 / 1024).toFixed(1)} MB`
|
||||||
|
},
|
||||||
|
async submitAllPdfUploads() {
|
||||||
|
if (!this.productId || !this.projectId) {
|
||||||
|
this.$message.warning('请先选择产品与项目')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const files = this.pdfPendingFiles.slice()
|
||||||
|
if (!files.length) {
|
||||||
|
this.$message.warning('请先选择 PDF 文件')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const productId = Number(this.productId)
|
||||||
|
const projectId = Number(this.projectId)
|
||||||
|
const createdBy = this.currentUser && this.currentUser.id ? this.currentUser.id : undefined
|
||||||
|
this.pdfUploading = true
|
||||||
|
const failed = []
|
||||||
|
let ok = 0
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
const file = files[i]
|
||||||
|
try {
|
||||||
|
await uploadDocumentPdf({ file, productId, projectId, createdBy })
|
||||||
|
ok += 1
|
||||||
|
} catch (e) {
|
||||||
|
failed.push(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.pdfUploading = false
|
||||||
|
this.pdfPendingFiles = failed
|
||||||
|
if (ok) {
|
||||||
|
this.syncDocumentListAfterMutation()
|
||||||
|
}
|
||||||
|
if (ok && !failed.length) {
|
||||||
|
this.$message.success(`已上传 ${ok} 个 PDF`)
|
||||||
|
this.createVisible = false
|
||||||
|
} else if (ok && failed.length) {
|
||||||
|
this.$message.warning(`成功 ${ok} 个，失败 ${failed.length} 个；失败项仍留在列表中，可修正后重试`)
|
||||||
|
} else {
|
||||||
|
this.$message.error('上传失败，请检查网络或文件后重试')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
submitCreate() {
|
||||||
|
if (this.createForm.type === 1) {
|
||||||
|
this.$message.info('PDF 请使用「选择 PDF」并点击「上传全部」')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$refs.createFormRef.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
this.createSubmitting = true
|
||||||
|
const payload = {
|
||||||
|
productId: Number(this.productId),
|
||||||
|
projectId: Number(this.projectId),
|
||||||
|
type: this.createForm.type,
|
||||||
|
source: this.createForm.source,
|
||||||
|
content: this.createForm.content || undefined
|
||||||
|
}
|
||||||
|
if (this.currentUser && this.currentUser.id) {
|
||||||
|
payload.createdBy = this.currentUser.id
|
||||||
|
}
|
||||||
|
createDocument(payload)
|
||||||
|
.then(() => {
|
||||||
|
this.$message.success('创建成功')
|
||||||
|
this.createVisible = false
|
||||||
|
this.syncDocumentListAfterMutation()
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.createSubmitting = false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDocCommand(cmd, row) {
|
||||||
|
if (cmd === 'refresh') {
|
||||||
|
this.doRefresh(row)
|
||||||
|
} else if (cmd === 'generate') {
|
||||||
|
this.openGenerate(row)
|
||||||
|
} else if (cmd === 'edit') {
|
||||||
|
this.openEdit(row)
|
||||||
|
} else if (cmd === 'delete') {
|
||||||
|
this.doDelete(row)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
doRefresh(row) {
|
||||||
|
this.$confirm('确认从飞书重新拉取内容？', '提示', { type: 'warning' })
|
||||||
|
.then(() => {
|
||||||
|
return refreshDocument({ documentId: row.id })
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$message.success('已刷新')
|
||||||
|
this.fetchDocuments()
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
doDelete(row) {
|
||||||
|
this.$confirm('确认删除该文档？', '提示', { type: 'warning' })
|
||||||
|
.then(() => {
|
||||||
|
return deleteDocument({ documentId: row.id })
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$message.success('已删除')
|
||||||
|
this.fetchDocuments()
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
openEdit(row) {
|
||||||
|
this.editForm = {
|
||||||
|
documentId: row.id,
|
||||||
|
type: row.type,
|
||||||
|
source: row.source || '',
|
||||||
|
content: row.content || '',
|
||||||
|
ai_model: row.ai_model || ''
|
||||||
|
}
|
||||||
|
this.editVisible = true
|
||||||
|
},
|
||||||
|
resetEditForm() {
|
||||||
|
this.editForm = { documentId: null, type: 1, source: '', content: '', ai_model: '' }
|
||||||
|
},
|
||||||
|
submitEdit() {
|
||||||
|
if (!this.editForm.documentId) return
|
||||||
|
this.editSubmitting = true
|
||||||
|
updateDocument({
|
||||||
|
documentId: this.editForm.documentId,
|
||||||
|
type: this.editForm.type,
|
||||||
|
source: this.editForm.source,
|
||||||
|
content: this.editForm.content,
|
||||||
|
ai_model: this.editForm.ai_model || undefined
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$message.success('保存成功')
|
||||||
|
this.editVisible = false
|
||||||
|
this.fetchDocuments()
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.editSubmitting = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
openGenerate(row) {
|
||||||
|
this.activeDocument = row
|
||||||
|
this.previewCases = []
|
||||||
|
this.previewTotal = 0
|
||||||
|
this.genForm = { priority: 2, caseType: 1 }
|
||||||
|
this.generateVisible = true
|
||||||
|
},
|
||||||
|
resetGenerateState() {
|
||||||
|
this.activeDocument = null
|
||||||
|
this.previewCases = []
|
||||||
|
this.previewTotal = 0
|
||||||
|
},
|
||||||
|
runGenerate() {
|
||||||
|
if (!this.activeDocument || !this.projectId) return
|
||||||
|
this.generateLoading = true
|
||||||
|
generateDocumentCases({
|
||||||
|
documentIds: [this.activeDocument.id],
|
||||||
|
projectId: Number(this.projectId),
|
||||||
|
priority: this.genForm.priority,
|
||||||
|
caseType: this.genForm.caseType,
|
||||||
|
tags: ['AI生成']
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
const list = data.cases || []
|
||||||
|
this.previewTotal = Number(data.total || list.length || 0)
|
||||||
|
this.previewCases = list.map(item =>
|
||||||
|
Object.assign({}, item, {
|
||||||
|
selected: true,
|
||||||
|
module_id: item.module_id != null && item.module_id !== '' ? Number(item.module_id) : null,
|
||||||
|
module_name: item.module_name || ''
|
||||||
|
})
|
||||||
|
)
|
||||||
|
if (!this.previewCases.length) {
|
||||||
|
this.$message.info('未返回预览用例')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.generateLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
runMatch() {
|
||||||
|
if (!this.activeDocument || !this.previewCases.length) return
|
||||||
|
this.matchLoading = true
|
||||||
|
const casesPayload = this.previewCases.map(c => ({
|
||||||
|
title: c.title,
|
||||||
|
precondition: c.precondition,
|
||||||
|
steps: c.steps,
|
||||||
|
expected_result: c.expected_result,
|
||||||
|
priority: c.priority,
|
||||||
|
case_type: c.case_type,
|
||||||
|
tags: c.tags,
|
||||||
|
module_name: c.module_name,
|
||||||
|
module_id: c.module_id
|
||||||
|
}))
|
||||||
|
matchDocumentModules({
|
||||||
|
documentId: this.activeDocument.id,
|
||||||
|
cases: casesPayload
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
const data = (res && res.data) || res || []
|
||||||
|
const arr = Array.isArray(data) ? data : []
|
||||||
|
const byTitle = {}
|
||||||
|
arr.forEach(row => {
|
||||||
|
if (row && row.title) byTitle[row.title] = row
|
||||||
|
})
|
||||||
|
this.previewCases = this.previewCases.map(row => {
|
||||||
|
const m = byTitle[row.title]
|
||||||
|
if (m) {
|
||||||
|
return Object.assign({}, row, {
|
||||||
|
module_name: m.module_name != null ? m.module_name : row.module_name,
|
||||||
|
module_id: m.module_id != null ? Number(m.module_id) : row.module_id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return row
|
||||||
|
})
|
||||||
|
this.$message.success('匹配完成')
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.matchLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
runImport() {
|
||||||
|
if (!this.activeDocument || !this.currentUser || !this.currentUser.id) {
|
||||||
|
this.$message.warning('未获取到当前用户，请重新登录')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const selected = this.previewCases.filter(c => c.selected)
|
||||||
|
if (!selected.length) {
|
||||||
|
this.$message.warning('请至少选择一条用例')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for (let i = 0; i < selected.length; i++) {
|
||||||
|
const c = selected[i]
|
||||||
|
if (!c.module_id && c.module_id !== 0) {
|
||||||
|
this.$message.warning(`请填写模块ID：${c.title || ''}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!c.title || !c.steps) {
|
||||||
|
this.$message.warning('标题与步骤为必填')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const cases = selected.map(c => ({
|
||||||
|
selected: true,
|
||||||
|
module_id: Number(c.module_id),
|
||||||
|
title: c.title,
|
||||||
|
precondition: c.precondition || '',
|
||||||
|
steps: c.steps,
|
||||||
|
expected_result: c.expected_result || '',
|
||||||
|
priority: c.priority != null ? Number(c.priority) : 2,
|
||||||
|
case_type: c.case_type != null ? Number(c.case_type) : 1,
|
||||||
|
tags: Array.isArray(c.tags) ? c.tags : ['AI生成']
|
||||||
|
}))
|
||||||
|
this.$confirm(
|
||||||
|
'请确认已完成对预览用例的审核。导入选中行后将写入正式用例列表，是否继续？',
|
||||||
|
'确认导入',
|
||||||
|
{ type: 'warning', confirmButtonText: '确认导入' }
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
this.importLoading = true
|
||||||
|
return importDocumentCases({
|
||||||
|
documentId: this.activeDocument.id,
|
||||||
|
userId: this.currentUser.id,
|
||||||
|
cases
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (!res) return
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
const n = data.successCount != null ? data.successCount : cases.length
|
||||||
|
this.$message.success(`导入成功 ${n} 条`)
|
||||||
|
this.generateVisible = false
|
||||||
|
this.$emit('refresh-cases')
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => {
|
||||||
|
this.importLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
openBatchModuleDialog() {
|
||||||
|
if (!this.projectId) {
|
||||||
|
this.$message.warning('请先选择项目')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.batchModuleText = ''
|
||||||
|
this.batchModuleVisible = true
|
||||||
|
},
|
||||||
|
submitBatchModules() {
|
||||||
|
const lines = String(this.batchModuleText || '')
|
||||||
|
.split(/\r?\n/)
|
||||||
|
.map(s => s.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
if (!lines.length) {
|
||||||
|
this.$message.warning('请输入至少一个模块名称')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.batchModuleSubmitting = true
|
||||||
|
batchCreateDocumentModules({
|
||||||
|
projectId: Number(this.projectId),
|
||||||
|
moduleNames: lines
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$message.success('模块创建成功')
|
||||||
|
this.batchModuleVisible = false
|
||||||
|
this.$emit('refresh-modules')
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.batchModuleSubmitting = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.document-source-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 2px 8px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-hint {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-filters {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-filters /deep/ .el-form-item {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-table {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-table /deep/ .el-table__body tr.current-row > td {
|
||||||
|
background-color: #ecf5ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-source-pagination {
|
||||||
|
margin-top: 8px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-detail-body {
|
||||||
|
padding: 0 4px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-detail-content-label {
|
||||||
|
margin: 12px 0 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-drawer-head {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-drawer-source {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #606266;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-form {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-total-hint {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batch-module-tip {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #606266;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-pdf-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-upload-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-upload-hint {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-upload-empty {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #c0c4cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-pending-list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-pending-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-pending-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-pending-name {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-pending-size {
|
||||||
|
color: #909399;
|
||||||
|
margin-right: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,13 +27,13 @@
|
|||||||
style="margin-top: 12px;">
|
style="margin-top: 12px;">
|
||||||
<el-table-column prop="planCaseId" label="计划用例ID" width="120"></el-table-column>
|
<el-table-column prop="planCaseId" label="计划用例ID" width="120"></el-table-column>
|
||||||
<el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
|
<el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
|
||||||
<el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
|
<el-table-column label="模块路径" min-width="200" show-overflow-tooltip>
|
||||||
<el-table-column label="自动化执行 Jenkins URL" min-width="180" show-overflow-tooltip>
|
<template slot-scope="scope">{{ scope.row.modulePath || '—' }}</template>
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-link v-if="scope.row.jenkinsUrl" :href="scope.row.jenkinsUrl" target="_blank" type="primary">打开</el-link>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column label="模块名称" min-width="140" show-overflow-tooltip>
|
||||||
|
<template slot-scope="scope">{{ scope.row.moduleName || '—' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
|
||||||
<el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
|
<el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
|
||||||
<el-table-column label="执行状态" width="110">
|
<el-table-column label="执行状态" width="110">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -162,9 +162,10 @@ export default {
|
|||||||
statusLabel: this.formatExecuteStatus(item.status),
|
statusLabel: this.formatExecuteStatus(item.status),
|
||||||
actualResult: item.actual_result || item.actualResult || '',
|
actualResult: item.actual_result || item.actualResult || '',
|
||||||
caseKey: item.case_key || item.caseKey || '',
|
caseKey: item.case_key || item.caseKey || '',
|
||||||
|
modulePath: item.module_path || item.modulePath || '',
|
||||||
|
moduleName: item.module_name || item.moduleName || '',
|
||||||
caseTitle: item.case_title || item.caseTitle || item.title || '',
|
caseTitle: item.case_title || item.caseTitle || item.title || '',
|
||||||
title: item.title || item.case_title || item.caseTitle || '',
|
title: item.title || item.case_title || item.caseTitle || ''
|
||||||
jenkinsUrl: item.jenkins_url || item.jenkinsUrl || ''
|
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
|||||||
@@ -0,0 +1,820 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-wrap">
|
||||||
|
<page-section title="业务技能配置">
|
||||||
|
<el-form :inline="true" size="small" class="filter-bar" @submit.native.prevent>
|
||||||
|
<el-form-item label="产品">
|
||||||
|
<el-select
|
||||||
|
v-model="selectedProductId"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
placeholder="请选择产品"
|
||||||
|
style="width: 200px;"
|
||||||
|
@change="handleProductChange"
|
||||||
|
@focus="loadProductOptions">
|
||||||
|
<el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="项目">
|
||||||
|
<el-select
|
||||||
|
v-model="selectedProjectId"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
placeholder="请选择项目"
|
||||||
|
style="width: 220px;"
|
||||||
|
:disabled="!selectedProductId"
|
||||||
|
@change="handleProjectChange">
|
||||||
|
<el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-tabs v-model="configActiveTab" class="skill-rule-tabs" style="margin-top: 8px;" @tab-click="onConfigTabClick">
|
||||||
|
<el-tab-pane label="Skills 配置" name="skills">
|
||||||
|
<el-form :inline="true" size="small" class="toolbar-form" @submit.native.prevent>
|
||||||
|
<el-form-item label="模块">
|
||||||
|
<el-select v-model="skillQuery.moduleId" clearable filterable placeholder="全部" style="width: 180px;" :disabled="!projectId">
|
||||||
|
<el-option v-for="m in flatModuleOptions" :key="m.id" :label="m.name" :value="m.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关键字">
|
||||||
|
<el-input v-model="skillQuery.keyword" clearable style="width: 160px;" @keyup.enter.native="fetchSkillList" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="skillQuery.status" clearable placeholder="全部" style="width: 100px;">
|
||||||
|
<el-option v-for="o in statusOptions" :key="'s-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型">
|
||||||
|
<el-select v-model="skillQuery.skillType" clearable placeholder="全部" style="width: 130px;">
|
||||||
|
<el-option v-for="o in skillTypeOptions" :key="'t-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="风险">
|
||||||
|
<el-select v-model="skillQuery.riskLevel" clearable placeholder="全部" style="width: 100px;">
|
||||||
|
<el-option v-for="o in riskLevelOptions" :key="'r-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :disabled="!projectId" @click="skillPageNo = 1; fetchSkillList()">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="small" @click="resetSkillQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" size="small" plain :disabled="!projectId" @click="openSkillCreate">新建 Skill</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="skillLoading" :data="skillList" border size="small" style="margin-top: 8px;">
|
||||||
|
<el-table-column prop="id" label="ID" width="72" />
|
||||||
|
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="code" label="编码" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="类型" width="100">
|
||||||
|
<template slot-scope="scope">{{ formatSkillType(scope.row.skill_type) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="风险" width="88">
|
||||||
|
<template slot-scope="scope">{{ formatRiskLevel(scope.row.risk_level) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" width="88">
|
||||||
|
<template slot-scope="scope">{{ formatConfigStatus(scope.row.status) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="标签" min-width="120" show-overflow-tooltip>
|
||||||
|
<template slot-scope="scope">{{ formatTagsCol(scope.row.tags) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updated_time" label="更新时间" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="140" fixed="right">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" @click="openSkillEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="text" style="color: #F56C6C;" @click="removeSkill(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pager-wrap">
|
||||||
|
<el-pagination
|
||||||
|
:current-page="skillPageNo"
|
||||||
|
:page-size="skillPageSize"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
:total="skillTotal"
|
||||||
|
layout="total, sizes, prev, pager, next"
|
||||||
|
@size-change="onSkillSize"
|
||||||
|
@current-change="onSkillPage" />
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="业务规则配置" name="rules">
|
||||||
|
<el-form :inline="true" size="small" class="toolbar-form" @submit.native.prevent>
|
||||||
|
<el-form-item label="模块">
|
||||||
|
<el-select v-model="ruleQuery.moduleId" clearable filterable placeholder="全部" style="width: 180px;" :disabled="!projectId">
|
||||||
|
<el-option v-for="m in flatModuleOptions" :key="'r-' + m.id" :label="m.name" :value="m.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关键字">
|
||||||
|
<el-input v-model="ruleQuery.keyword" clearable style="width: 160px;" @keyup.enter.native="fetchRuleList" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="ruleQuery.status" clearable placeholder="全部" style="width: 100px;">
|
||||||
|
<el-option v-for="o in statusOptions" :key="'rs-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="优先级">
|
||||||
|
<el-select v-model="ruleQuery.priority" clearable placeholder="全部" style="width: 100px;">
|
||||||
|
<el-option v-for="o in priorityOptions" :key="'p-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :disabled="!projectId" @click="rulePageNo = 1; fetchRuleList()">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="small" @click="resetRuleQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" size="small" plain :disabled="!projectId" @click="openRuleCreate">新建规则</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="ruleLoading" :data="ruleList" border size="small" style="margin-top: 8px;">
|
||||||
|
<el-table-column prop="id" label="ID" width="72" />
|
||||||
|
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="rule_code" label="规则编码" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="优先级" width="100">
|
||||||
|
<template slot-scope="scope">{{ formatPriority(scope.row.priority) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" width="88">
|
||||||
|
<template slot-scope="scope">{{ formatConfigStatus(scope.row.status) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="标签" min-width="120" show-overflow-tooltip>
|
||||||
|
<template slot-scope="scope">{{ formatTagsCol(scope.row.tags) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updated_time" label="更新时间" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="140" fixed="right">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" @click="openRuleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="text" style="color: #F56C6C;" @click="removeRule(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pager-wrap">
|
||||||
|
<el-pagination
|
||||||
|
:current-page="rulePageNo"
|
||||||
|
:page-size="rulePageSize"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
:total="ruleTotal"
|
||||||
|
layout="total, sizes, prev, pager, next"
|
||||||
|
@size-change="onRuleSize"
|
||||||
|
@current-change="onRulePage" />
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</page-section>
|
||||||
|
|
||||||
|
<el-dialog :title="skillDialogMode === 'create' ? '新建 Skill' : '编辑 Skill'" :visible.sync="skillDialogVisible" width="720px" @close="resetSkillForm">
|
||||||
|
<el-form ref="skillFormRef" :model="skillForm" :rules="skillFormActiveRules" label-width="120px" size="small">
|
||||||
|
<el-form-item label="模块" prop="moduleId">
|
||||||
|
<el-select v-model="skillForm.moduleId" clearable filterable placeholder="可选" style="width: 100%;" :disabled="!projectId">
|
||||||
|
<el-option v-for="m in flatModuleOptions" :key="'sf-' + m.id" :label="m.name" :value="m.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="skillForm.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<template v-if="skillDialogMode === 'edit'">
|
||||||
|
<el-form-item label="编码">
|
||||||
|
<el-input v-model="skillForm.code" disabled placeholder="创建后不可修改" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="触发条件" prop="triggerCondition">
|
||||||
|
<el-input v-model="skillForm.triggerCondition" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="推理路径">
|
||||||
|
<el-input v-model="skillForm.reasoningPath" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="输出规范">
|
||||||
|
<el-input v-model="skillForm.outputSpec" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
<el-form-item label="描述">
|
||||||
|
<el-input v-model="skillForm.description" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型">
|
||||||
|
<el-select v-model="skillForm.skillType" style="width: 100%;">
|
||||||
|
<el-option v-for="o in skillTypeOptions" :key="'sfo-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="风险等级">
|
||||||
|
<el-select v-model="skillForm.riskLevel" style="width: 100%;">
|
||||||
|
<el-option v-for="o in riskLevelOptions" :key="'sfr-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="skillForm.status" style="width: 100%;">
|
||||||
|
<el-option v-for="o in statusOptions" :key="'sfs-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签">
|
||||||
|
<el-select v-model="skillForm.tags" multiple filterable allow-create default-first-option placeholder="输入后回车可新增" style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer">
|
||||||
|
<el-button size="small" @click="skillDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" size="small" :loading="skillSubmitting" @click="submitSkill">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog :title="ruleDialogMode === 'create' ? '新建业务规则' : '编辑业务规则'" :visible.sync="ruleDialogVisible" width="720px" @close="resetRuleForm">
|
||||||
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="ruleRules" label-width="120px" size="small">
|
||||||
|
<el-form-item label="模块" prop="moduleId">
|
||||||
|
<el-select v-model="ruleForm.moduleId" clearable filterable placeholder="可选" style="width: 100%;" :disabled="!projectId">
|
||||||
|
<el-option v-for="m in flatModuleOptions" :key="'rf-' + m.id" :label="m.name" :value="m.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="ruleForm.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="ruleDialogMode === 'edit'" label="规则编码">
|
||||||
|
<el-input v-model="ruleForm.ruleCode" disabled placeholder="由系统分配" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="规则内容" prop="ruleContent">
|
||||||
|
<el-input v-model="ruleForm.ruleContent" type="textarea" :rows="3" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="适用场景">
|
||||||
|
<el-input v-model="ruleForm.applicableScene" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="示例">
|
||||||
|
<el-input v-model="ruleForm.example" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="优先级">
|
||||||
|
<el-select v-model="ruleForm.priority" style="width: 100%;">
|
||||||
|
<el-option v-for="o in priorityOptions" :key="'rfo-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="ruleForm.status" style="width: 100%;">
|
||||||
|
<el-option v-for="o in statusOptions" :key="'rfs-' + o.value" :label="o.label" :value="o.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签">
|
||||||
|
<el-select v-model="ruleForm.tags" multiple filterable allow-create default-first-option placeholder="输入后回车可新增" style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer">
|
||||||
|
<el-button size="small" @click="ruleDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" size="small" :loading="ruleSubmitting" @click="submitRule">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PageSection from '@/components/TestPlatform/common/PageSection'
|
||||||
|
import { getModuleTree } from '@/api/caseApi'
|
||||||
|
import {
|
||||||
|
createSkill,
|
||||||
|
createBusinessRule,
|
||||||
|
deleteSkill,
|
||||||
|
deleteBusinessRule,
|
||||||
|
getSkillDetail,
|
||||||
|
getSkillList,
|
||||||
|
getBusinessRuleDetail,
|
||||||
|
getBusinessRuleList,
|
||||||
|
updateSkill,
|
||||||
|
updateBusinessRule
|
||||||
|
} from '@/api/skillRuleApi'
|
||||||
|
import { getProductList } from '@/api/productApi'
|
||||||
|
import { getProjectList } from '@/api/projectApi'
|
||||||
|
import {
|
||||||
|
readLastProductProjectCache,
|
||||||
|
saveLastProductProjectCache,
|
||||||
|
pickIdFromOptions
|
||||||
|
} from '@/utils/lastProductProjectCache'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BusinessSkillRuleConfig',
|
||||||
|
components: { PageSection },
|
||||||
|
data() {
|
||||||
|
const routeTab = this.$route.query && this.$route.query.tab
|
||||||
|
const initialTab =
|
||||||
|
routeTab === 'rules' || routeTab === 'business-rules' ? 'rules' : 'skills'
|
||||||
|
return {
|
||||||
|
configActiveTab: initialTab,
|
||||||
|
selectedProductId: '',
|
||||||
|
selectedProjectId: '',
|
||||||
|
productOptions: [],
|
||||||
|
projectOptions: [],
|
||||||
|
moduleTree: [],
|
||||||
|
skillQuery: { moduleId: '', keyword: '', status: '', skillType: '', riskLevel: '' },
|
||||||
|
skillPageNo: 1,
|
||||||
|
skillPageSize: 20,
|
||||||
|
skillList: [],
|
||||||
|
skillTotal: 0,
|
||||||
|
skillLoading: false,
|
||||||
|
skillDialogVisible: false,
|
||||||
|
skillDialogMode: 'create',
|
||||||
|
skillSubmitting: false,
|
||||||
|
skillForm: {},
|
||||||
|
ruleQuery: { moduleId: '', keyword: '', status: '', priority: '' },
|
||||||
|
rulePageNo: 1,
|
||||||
|
rulePageSize: 20,
|
||||||
|
ruleList: [],
|
||||||
|
ruleTotal: 0,
|
||||||
|
ruleLoading: false,
|
||||||
|
ruleDialogVisible: false,
|
||||||
|
ruleDialogMode: 'create',
|
||||||
|
ruleSubmitting: false,
|
||||||
|
ruleForm: {},
|
||||||
|
ruleRules: {
|
||||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||||
|
ruleContent: [{ required: true, message: '请输入规则内容', trigger: 'blur' }]
|
||||||
|
},
|
||||||
|
statusOptions: [
|
||||||
|
{ value: 1, label: '启用' },
|
||||||
|
{ value: 2, label: '停用' },
|
||||||
|
{ value: 3, label: '草稿' }
|
||||||
|
],
|
||||||
|
skillTypeOptions: [
|
||||||
|
{ value: 1, label: '通用测试策略' },
|
||||||
|
{ value: 2, label: '历史缺陷模式' },
|
||||||
|
{ value: 3, label: '边界场景' },
|
||||||
|
{ value: 4, label: '接口测试' },
|
||||||
|
{ value: 5, label: 'UI 测试' },
|
||||||
|
{ value: 6, label: '性能测试' },
|
||||||
|
{ value: 7, label: '安全测试' },
|
||||||
|
{ value: 8, label: '数据一致性' },
|
||||||
|
{ value: 9, label: '并发/幂等' },
|
||||||
|
{ value: 99, label: '其他' }
|
||||||
|
],
|
||||||
|
riskLevelOptions: [
|
||||||
|
{ value: 0, label: '高风险' },
|
||||||
|
{ value: 1, label: '中高风险' },
|
||||||
|
{ value: 2, label: '中风险' },
|
||||||
|
{ value: 3, label: '低风险' }
|
||||||
|
],
|
||||||
|
priorityOptions: [
|
||||||
|
{ value: 0, label: '高优先级' },
|
||||||
|
{ value: 1, label: '中高优先级' },
|
||||||
|
{ value: 2, label: '中优先级' },
|
||||||
|
{ value: 3, label: '低优先级' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
projectId() {
|
||||||
|
return this.selectedProjectId || ''
|
||||||
|
},
|
||||||
|
flatModuleOptions() {
|
||||||
|
const out = []
|
||||||
|
const walk = (list, prefix) => {
|
||||||
|
;(list || []).forEach(item => {
|
||||||
|
const name = prefix ? `${prefix} / ${item.name}` : item.name
|
||||||
|
out.push({ id: item.id, name })
|
||||||
|
const ch = item.children || item.child_list || item.childList || []
|
||||||
|
if (Array.isArray(ch) && ch.length) walk(ch, name)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
walk(this.moduleTree, '')
|
||||||
|
return out
|
||||||
|
},
|
||||||
|
skillFormActiveRules() {
|
||||||
|
if (this.skillDialogMode === 'create') {
|
||||||
|
return {
|
||||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||||
|
triggerCondition: [{ required: true, message: '请输入触发条件', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$route.query.tab'(val) {
|
||||||
|
const next = val === 'rules' || val === 'business-rules' ? 'rules' : 'skills'
|
||||||
|
if (this.configActiveTab !== next) {
|
||||||
|
this.configActiveTab = next
|
||||||
|
}
|
||||||
|
if (!this.projectId) return
|
||||||
|
if (next === 'rules') this.fetchRuleList()
|
||||||
|
else this.fetchSkillList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.resetSkillFormModel()
|
||||||
|
this.resetRuleFormModel()
|
||||||
|
this.bootstrap()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cleanParams(obj) {
|
||||||
|
const r = {}
|
||||||
|
Object.keys(obj || {}).forEach(k => {
|
||||||
|
const v = obj[k]
|
||||||
|
if (v !== '' && v !== undefined && v !== null) r[k] = v
|
||||||
|
})
|
||||||
|
return r
|
||||||
|
},
|
||||||
|
/** 新建 Skill 时后端要求 code 唯一，由前端自动生成 */
|
||||||
|
generateAutoSkillCode() {
|
||||||
|
const t = Date.now()
|
||||||
|
const r = Math.random().toString(36).slice(2, 10).toUpperCase()
|
||||||
|
return `SKILL_AUTO_${t}_${r}`
|
||||||
|
},
|
||||||
|
onConfigTabClick(tab) {
|
||||||
|
const name = tab && tab.name
|
||||||
|
const q = Object.assign({}, this.$route.query || {})
|
||||||
|
if (name === 'rules') {
|
||||||
|
q.tab = 'rules'
|
||||||
|
} else {
|
||||||
|
delete q.tab
|
||||||
|
}
|
||||||
|
const prev = JSON.stringify(this.$route.query || {})
|
||||||
|
const next = JSON.stringify(q)
|
||||||
|
if (prev !== next) {
|
||||||
|
this.$router.replace({ path: this.$route.path, query: q }).catch(() => {})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatTagsCol(tags) {
|
||||||
|
if (Array.isArray(tags)) return tags.join('、')
|
||||||
|
return tags || '—'
|
||||||
|
},
|
||||||
|
formatSkillType(v) {
|
||||||
|
const o = this.skillTypeOptions.find(x => x.value === v)
|
||||||
|
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||||
|
},
|
||||||
|
formatRiskLevel(v) {
|
||||||
|
const o = this.riskLevelOptions.find(x => x.value === v)
|
||||||
|
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||||
|
},
|
||||||
|
formatPriority(v) {
|
||||||
|
const o = this.priorityOptions.find(x => x.value === v)
|
||||||
|
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||||
|
},
|
||||||
|
formatConfigStatus(v) {
|
||||||
|
const o = this.statusOptions.find(x => x.value === v)
|
||||||
|
return o ? o.label : (v === undefined || v === null ? '—' : v)
|
||||||
|
},
|
||||||
|
resetSkillFormModel() {
|
||||||
|
this.skillForm = {
|
||||||
|
skillId: null,
|
||||||
|
moduleId: '',
|
||||||
|
name: '',
|
||||||
|
code: '',
|
||||||
|
description: '',
|
||||||
|
triggerCondition: '',
|
||||||
|
reasoningPath: '',
|
||||||
|
outputSpec: '',
|
||||||
|
skillType: 1,
|
||||||
|
riskLevel: 2,
|
||||||
|
tags: [],
|
||||||
|
status: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetRuleFormModel() {
|
||||||
|
this.ruleForm = {
|
||||||
|
ruleId: null,
|
||||||
|
moduleId: '',
|
||||||
|
name: '',
|
||||||
|
ruleCode: '',
|
||||||
|
ruleContent: '',
|
||||||
|
applicableScene: '',
|
||||||
|
example: '',
|
||||||
|
priority: 2,
|
||||||
|
tags: [],
|
||||||
|
status: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bootstrap() {
|
||||||
|
this.loadProductOptions().then(() => {
|
||||||
|
const routePid = this.$route.query.productId ? Number(this.$route.query.productId) : ''
|
||||||
|
const routeProj = this.$route.query.projectId ? Number(this.$route.query.projectId) : ''
|
||||||
|
if (routePid) {
|
||||||
|
this.selectedProductId = routePid
|
||||||
|
return this.loadProjectOptions(routePid).then(() => {
|
||||||
|
if (routeProj) this.selectedProjectId = pickIdFromOptions(this.projectOptions, routeProj)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const cached = readLastProductProjectCache()
|
||||||
|
if (cached && cached.productId != null && cached.projectId != null) {
|
||||||
|
this.selectedProductId = pickIdFromOptions(this.productOptions, cached.productId)
|
||||||
|
return this.loadProjectOptions(this.selectedProductId).then(() => {
|
||||||
|
this.selectedProjectId = pickIdFromOptions(this.projectOptions, cached.projectId)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}).then(() => {
|
||||||
|
if (this.projectId) {
|
||||||
|
this.loadModuleTree()
|
||||||
|
if (this.configActiveTab === 'rules') this.fetchRuleList()
|
||||||
|
else this.fetchSkillList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadProductOptions() {
|
||||||
|
if (this.productOptions.length) return Promise.resolve()
|
||||||
|
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
this.productOptions = data.items || data.list || data.data || []
|
||||||
|
}).catch(() => { this.productOptions = [] })
|
||||||
|
},
|
||||||
|
loadProjectOptions(productId) {
|
||||||
|
if (!productId) {
|
||||||
|
this.projectOptions = []
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
this.projectOptions = data.items || data.list || data.data || []
|
||||||
|
}).catch(() => { this.projectOptions = [] })
|
||||||
|
},
|
||||||
|
loadModuleTree() {
|
||||||
|
if (!this.projectId) {
|
||||||
|
this.moduleTree = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
getModuleTree({ projectId: this.projectId }).then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
const list = data.list || data.items || []
|
||||||
|
this.moduleTree = Array.isArray(list) ? list : []
|
||||||
|
}).catch(() => { this.moduleTree = [] })
|
||||||
|
},
|
||||||
|
handleProductChange() {
|
||||||
|
this.selectedProjectId = ''
|
||||||
|
this.projectOptions = []
|
||||||
|
this.moduleTree = []
|
||||||
|
this.skillList = []
|
||||||
|
this.ruleList = []
|
||||||
|
this.skillTotal = 0
|
||||||
|
this.ruleTotal = 0
|
||||||
|
this.loadProjectOptions(this.selectedProductId)
|
||||||
|
},
|
||||||
|
handleProjectChange() {
|
||||||
|
if (this.selectedProductId && this.selectedProjectId) {
|
||||||
|
saveLastProductProjectCache(this.selectedProductId, this.selectedProjectId)
|
||||||
|
}
|
||||||
|
this.skillPageNo = 1
|
||||||
|
this.rulePageNo = 1
|
||||||
|
this.loadModuleTree()
|
||||||
|
if (this.projectId) {
|
||||||
|
if (this.configActiveTab === 'rules') this.fetchRuleList()
|
||||||
|
else this.fetchSkillList()
|
||||||
|
} else {
|
||||||
|
this.skillList = []
|
||||||
|
this.ruleList = []
|
||||||
|
this.skillTotal = 0
|
||||||
|
this.ruleTotal = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetSkillQuery() {
|
||||||
|
this.skillQuery = { moduleId: '', keyword: '', status: '', skillType: '', riskLevel: '' }
|
||||||
|
this.skillPageNo = 1
|
||||||
|
this.fetchSkillList()
|
||||||
|
},
|
||||||
|
resetRuleQuery() {
|
||||||
|
this.ruleQuery = { moduleId: '', keyword: '', status: '', priority: '' }
|
||||||
|
this.rulePageNo = 1
|
||||||
|
this.fetchRuleList()
|
||||||
|
},
|
||||||
|
fetchSkillList() {
|
||||||
|
if (!this.projectId) return
|
||||||
|
this.skillLoading = true
|
||||||
|
const params = this.cleanParams(Object.assign({}, this.skillQuery, {
|
||||||
|
pageNo: this.skillPageNo,
|
||||||
|
pageSize: this.skillPageSize,
|
||||||
|
projectId: this.projectId
|
||||||
|
}))
|
||||||
|
getSkillList(params).then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
const list = data.list || data.items || []
|
||||||
|
this.skillList = Array.isArray(list) ? list : []
|
||||||
|
this.skillTotal = Number(data.total || 0)
|
||||||
|
}).catch(() => {
|
||||||
|
this.skillList = []
|
||||||
|
this.skillTotal = 0
|
||||||
|
}).finally(() => { this.skillLoading = false })
|
||||||
|
},
|
||||||
|
fetchRuleList() {
|
||||||
|
if (!this.projectId) return
|
||||||
|
this.ruleLoading = true
|
||||||
|
const params = this.cleanParams(Object.assign({}, this.ruleQuery, {
|
||||||
|
pageNo: this.rulePageNo,
|
||||||
|
pageSize: this.rulePageSize,
|
||||||
|
projectId: this.projectId
|
||||||
|
}))
|
||||||
|
getBusinessRuleList(params).then(res => {
|
||||||
|
const data = (res && res.data) || res || {}
|
||||||
|
const list = data.list || data.items || []
|
||||||
|
this.ruleList = Array.isArray(list) ? list : []
|
||||||
|
this.ruleTotal = Number(data.total || 0)
|
||||||
|
}).catch(() => {
|
||||||
|
this.ruleList = []
|
||||||
|
this.ruleTotal = 0
|
||||||
|
}).finally(() => { this.ruleLoading = false })
|
||||||
|
},
|
||||||
|
onSkillSize(s) {
|
||||||
|
this.skillPageSize = s
|
||||||
|
this.skillPageNo = 1
|
||||||
|
this.fetchSkillList()
|
||||||
|
},
|
||||||
|
onSkillPage(p) {
|
||||||
|
this.skillPageNo = p
|
||||||
|
this.fetchSkillList()
|
||||||
|
},
|
||||||
|
onRuleSize(s) {
|
||||||
|
this.rulePageSize = s
|
||||||
|
this.rulePageNo = 1
|
||||||
|
this.fetchRuleList()
|
||||||
|
},
|
||||||
|
onRulePage(p) {
|
||||||
|
this.rulePageNo = p
|
||||||
|
this.fetchRuleList()
|
||||||
|
},
|
||||||
|
openSkillCreate() {
|
||||||
|
if (!this.projectId) {
|
||||||
|
this.$message.warning('请先选择项目')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.skillDialogMode = 'create'
|
||||||
|
this.resetSkillFormModel()
|
||||||
|
this.skillDialogVisible = true
|
||||||
|
this.$nextTick(() => this.$refs.skillFormRef && this.$refs.skillFormRef.clearValidate())
|
||||||
|
},
|
||||||
|
openSkillEdit(row) {
|
||||||
|
if (!row || !row.id) return
|
||||||
|
getSkillDetail(row.id).then(res => {
|
||||||
|
const d = (res && res.data) || res || {}
|
||||||
|
this.skillDialogMode = 'edit'
|
||||||
|
this.skillForm = {
|
||||||
|
skillId: d.id,
|
||||||
|
moduleId: d.module_id != null && d.module_id !== '' ? d.module_id : '',
|
||||||
|
name: d.name || '',
|
||||||
|
code: d.code || '',
|
||||||
|
description: d.description || '',
|
||||||
|
triggerCondition: d.trigger_condition || '',
|
||||||
|
reasoningPath: d.reasoning_path || '',
|
||||||
|
outputSpec: d.output_spec || '',
|
||||||
|
skillType: d.skill_type !== undefined ? d.skill_type : 1,
|
||||||
|
riskLevel: d.risk_level !== undefined ? d.risk_level : 2,
|
||||||
|
tags: Array.isArray(d.tags) ? d.tags.slice() : [],
|
||||||
|
status: d.status !== undefined ? d.status : 1
|
||||||
|
}
|
||||||
|
this.skillDialogVisible = true
|
||||||
|
this.$nextTick(() => this.$refs.skillFormRef && this.$refs.skillFormRef.clearValidate())
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resetSkillForm() {
|
||||||
|
this.resetSkillFormModel()
|
||||||
|
},
|
||||||
|
submitSkill() {
|
||||||
|
const form = this.$refs.skillFormRef
|
||||||
|
if (!form) return
|
||||||
|
form.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
const tags = Array.isArray(this.skillForm.tags) ? this.skillForm.tags.filter(Boolean) : []
|
||||||
|
this.skillSubmitting = true
|
||||||
|
const done = () => { this.skillSubmitting = false }
|
||||||
|
if (this.skillDialogMode === 'create') {
|
||||||
|
createSkill(this.cleanParams({
|
||||||
|
projectId: this.projectId,
|
||||||
|
moduleId: this.skillForm.moduleId || undefined,
|
||||||
|
name: this.skillForm.name,
|
||||||
|
code: this.generateAutoSkillCode(),
|
||||||
|
description: this.skillForm.description || undefined,
|
||||||
|
triggerCondition: '由系统自动创建，可在编辑中完善。',
|
||||||
|
skillType: this.skillForm.skillType,
|
||||||
|
riskLevel: this.skillForm.riskLevel,
|
||||||
|
tags,
|
||||||
|
status: this.skillForm.status
|
||||||
|
})).then(() => {
|
||||||
|
this.$message.success('创建成功')
|
||||||
|
this.skillDialogVisible = false
|
||||||
|
this.fetchSkillList()
|
||||||
|
}).finally(done)
|
||||||
|
} else {
|
||||||
|
updateSkill(this.cleanParams({
|
||||||
|
skillId: this.skillForm.skillId,
|
||||||
|
name: this.skillForm.name,
|
||||||
|
description: this.skillForm.description || undefined,
|
||||||
|
triggerCondition: this.skillForm.triggerCondition,
|
||||||
|
reasoningPath: this.skillForm.reasoningPath || undefined,
|
||||||
|
outputSpec: this.skillForm.outputSpec || undefined,
|
||||||
|
skillType: this.skillForm.skillType,
|
||||||
|
riskLevel: this.skillForm.riskLevel,
|
||||||
|
tags,
|
||||||
|
status: this.skillForm.status
|
||||||
|
})).then(() => {
|
||||||
|
this.$message.success('保存成功')
|
||||||
|
this.skillDialogVisible = false
|
||||||
|
this.fetchSkillList()
|
||||||
|
}).finally(done)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeSkill(row) {
|
||||||
|
this.$confirm('确认删除该 Skill？', '提示', { type: 'warning' }).then(() => {
|
||||||
|
deleteSkill(row.id).then(() => {
|
||||||
|
this.$message.success('已删除')
|
||||||
|
this.fetchSkillList()
|
||||||
|
})
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
openRuleCreate() {
|
||||||
|
if (!this.projectId) {
|
||||||
|
this.$message.warning('请先选择项目')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.ruleDialogMode = 'create'
|
||||||
|
this.resetRuleFormModel()
|
||||||
|
this.ruleDialogVisible = true
|
||||||
|
this.$nextTick(() => this.$refs.ruleFormRef && this.$refs.ruleFormRef.clearValidate())
|
||||||
|
},
|
||||||
|
openRuleEdit(row) {
|
||||||
|
if (!row || !row.id) return
|
||||||
|
getBusinessRuleDetail(row.id).then(res => {
|
||||||
|
const d = (res && res.data) || res || {}
|
||||||
|
this.ruleDialogMode = 'edit'
|
||||||
|
this.ruleForm = {
|
||||||
|
ruleId: d.id,
|
||||||
|
moduleId: d.module_id != null && d.module_id !== '' ? d.module_id : '',
|
||||||
|
name: d.name || '',
|
||||||
|
ruleCode: d.rule_code || '',
|
||||||
|
ruleContent: d.rule_content || '',
|
||||||
|
applicableScene: d.applicable_scene || '',
|
||||||
|
example: d.example || '',
|
||||||
|
priority: d.priority !== undefined ? d.priority : 2,
|
||||||
|
tags: Array.isArray(d.tags) ? d.tags.slice() : [],
|
||||||
|
status: d.status !== undefined ? d.status : 1
|
||||||
|
}
|
||||||
|
this.ruleDialogVisible = true
|
||||||
|
this.$nextTick(() => this.$refs.ruleFormRef && this.$refs.ruleFormRef.clearValidate())
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resetRuleForm() {
|
||||||
|
this.resetRuleFormModel()
|
||||||
|
},
|
||||||
|
submitRule() {
|
||||||
|
const form = this.$refs.ruleFormRef
|
||||||
|
if (!form) return
|
||||||
|
form.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
const tags = Array.isArray(this.ruleForm.tags) ? this.ruleForm.tags.filter(Boolean) : []
|
||||||
|
this.ruleSubmitting = true
|
||||||
|
const done = () => { this.ruleSubmitting = false }
|
||||||
|
if (this.ruleDialogMode === 'create') {
|
||||||
|
createBusinessRule(this.cleanParams({
|
||||||
|
projectId: this.projectId,
|
||||||
|
moduleId: this.ruleForm.moduleId || undefined,
|
||||||
|
name: this.ruleForm.name,
|
||||||
|
ruleContent: this.ruleForm.ruleContent,
|
||||||
|
applicableScene: this.ruleForm.applicableScene || undefined,
|
||||||
|
example: this.ruleForm.example || undefined,
|
||||||
|
priority: this.ruleForm.priority,
|
||||||
|
tags,
|
||||||
|
status: this.ruleForm.status
|
||||||
|
})).then(() => {
|
||||||
|
this.$message.success('创建成功')
|
||||||
|
this.ruleDialogVisible = false
|
||||||
|
this.fetchRuleList()
|
||||||
|
}).finally(done)
|
||||||
|
} else {
|
||||||
|
updateBusinessRule(this.cleanParams({
|
||||||
|
ruleId: this.ruleForm.ruleId,
|
||||||
|
name: this.ruleForm.name,
|
||||||
|
ruleContent: this.ruleForm.ruleContent,
|
||||||
|
applicableScene: this.ruleForm.applicableScene || undefined,
|
||||||
|
example: this.ruleForm.example || undefined,
|
||||||
|
priority: this.ruleForm.priority,
|
||||||
|
tags,
|
||||||
|
status: this.ruleForm.status
|
||||||
|
})).then(() => {
|
||||||
|
this.$message.success('保存成功')
|
||||||
|
this.ruleDialogVisible = false
|
||||||
|
this.fetchRuleList()
|
||||||
|
}).finally(done)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeRule(row) {
|
||||||
|
this.$confirm('确认删除该业务规则？', '提示', { type: 'warning' }).then(() => {
|
||||||
|
deleteBusinessRule(row.id).then(() => {
|
||||||
|
this.$message.success('已删除')
|
||||||
|
this.fetchRuleList()
|
||||||
|
})
|
||||||
|
}).catch(() => {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-wrap {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.filter-bar {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.toolbar-form {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.pager-wrap {
|
||||||
|
margin-top: 12px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-rule-tabs /deep/ .el-tabs__header {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -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"> </span>
|
<span class="ct-img-yhm"> </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"> </span>
|
<span class="ct_img_mm"> </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>
|
||||||
|
|||||||
@@ -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,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
|
||||||
|
|
||||||
|
|||||||
@@ -96,6 +96,13 @@ export default new Router({
|
|||||||
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectSettings'], resolve)
|
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectSettings'], resolve)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/test-platform/skill-rules',
|
||||||
|
name: 'BusinessSkillRuleConfig',
|
||||||
|
components: {
|
||||||
|
Manage: (resolve) => require(['@/components/TestPlatform/SkillRule/BusinessSkillRuleConfig'], resolve)
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/test-platform/case',
|
path: '/test-platform/case',
|
||||||
name: 'CaseList',
|
name: 'CaseList',
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ export function normalizeUploadPathSlashes(url) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 静态资源（Bug 上传图）访问根，不含末尾 /
|
* 静态资源（Bug 上传图）访问根，不含末尾 /
|
||||||
* - 开发环境默认 http://localhost:5010（与后端文件服务常见端口一致）
|
* - 开发环境默认 http://localhost:8881（与后端文件服务常见端口一致）
|
||||||
* - 可在 index.html 里设置 window.__BUG_UPLOAD_ORIGIN__ 覆盖
|
* - 可在 index.html 里设置 window.__BUG_UPLOAD_ORIGIN__ 覆盖
|
||||||
* - 打包时可配置 VUE_APP_BUG_UPLOAD_ORIGIN（需在 webpack DefinePlugin 中注入）
|
* - 打包时可配置 VUE_APP_BUG_UPLOAD_ORIGIN（需在 webpack DefinePlugin 中注入）
|
||||||
*/
|
*/
|
||||||
@@ -56,14 +56,14 @@ export function getBugUploadStaticOrigin() {
|
|||||||
} catch (e) { /* ignore */ }
|
} catch (e) { /* ignore */ }
|
||||||
try {
|
try {
|
||||||
if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development') {
|
if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development') {
|
||||||
return 'http://localhost:5010'
|
return 'http://localhost:8881'
|
||||||
}
|
}
|
||||||
} catch (e2) { /* ignore */ }
|
} catch (e2) { /* ignore */ }
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 浏览器实际加载图片用的地址：/uploads/... 在开发环境走 5010 端口
|
* 浏览器实际加载图片用的地址：/uploads/... 在开发环境走 8881 端口
|
||||||
* 存库仍可为接口返回的完整 URL，仅展示/预览时改写
|
* 存库仍可为接口返回的完整 URL，仅展示/预览时改写
|
||||||
*/
|
*/
|
||||||
export function rewriteBugImageUrlForAccess(url) {
|
export function rewriteBugImageUrlForAccess(url) {
|
||||||
@@ -155,7 +155,7 @@ export function isStepsLikelyHtml(s) {
|
|||||||
return /<\s*(p|div|br|img|span|ul|ol|li|h[1-6]|table|strong|em)\b/i.test(String(s || '').trim())
|
return /<\s*(p|div|br|img|span|ul|ol|li|h[1-6]|table|strong|em)\b/i.test(String(s || '').trim())
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 将 HTML 中 img 的 src 改写为可访问地址（开发环境 /uploads → 5010） */
|
/** 将 HTML 中 img 的 src 改写为可访问地址（开发环境 /uploads → 8881） */
|
||||||
export function rewriteImgSrcsInHtml(html) {
|
export function rewriteImgSrcsInHtml(html) {
|
||||||
return String(html || '').replace(/(<img\b[^>]*\bsrc\s*=\s*)(["'])([^"']*)\2/gi, function (_m, pre, q, src) {
|
return String(html || '').replace(/(<img\b[^>]*\bsrc\s*=\s*)(["'])([^"']*)\2/gi, function (_m, pre, q, src) {
|
||||||
const fixed = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(src))
|
const fixed = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(src))
|
||||||
|
|||||||
Reference in New Issue
Block a user