audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构后端，改为 node 技术栈

Browse Source
This commit is contained in:
eafonyang
2026-06-09 16:36:23 +08:00
parent abab985769
commit e4e6529577
59 changed files with 4901 additions and 1916 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/main.js
+11
View File
@@ -1,5 +1,6 @@
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'element-plus/dist/index.css'
import '@/styles/lux-theme.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
@@ -12,3 +13,13 @@ app.use(ElementPlus, { locale: zhCn })
app.use(router)
app.mount('#app')
// 等浏览器完成绘制后显示应用并移除遮罩
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const appEl = document.getElementById('app')
if (appEl) appEl.classList.add('app-visible')
const loadingEl = document.getElementById('app-loading')
if (loadingEl) loadingEl.style.display = 'none'
})
})
frontend/src/styles/lux-theme.css
+91 -51
View File
@@ -5,22 +5,23 @@ body {
}
/**
* 全站主题（与登录页一致）：深色宇宙底、浅色内容卡片、青紫渐变主按钮
* 仅作用于 .lux-shell 内，避免影响登录页
* 全站主题：深色宇宙底、深色卡片、青紫渐变主按钮
*/
:root {
--lux-font:
'Inter', 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei',
sans-serif;
--lux-page-bg: #0a0e14;
--lux-text-strong: #0f172a;
--lux-text-muted: #64748b;
--lux-text-strong: #e2e8f0;
--lux-text-muted: #94a3b8;
--lux-cyan: #38bdf8;
--lux-indigo: #6366f1;
--lux-violet: #7c3aed;
--lux-card-grad: linear-gradient(165deg, #fafbfc 0%, #f0f3f8 100%);
--lux-glass-sidebar: rgba(15, 23, 42, 0.52);
--lux-glass-header: rgba(250, 251, 252, 0.9);
--lux-card-bg: #1e293b;
--lux-card-border: rgba(148, 163, 184, 0.12);
--lux-glass-sidebar: rgba(15, 23, 42, 0.6);
--lux-glass-header: rgba(30, 41, 59, 0.8);
--lux-input-bg: #0f172a;
}
.lux-shell {
@@ -165,7 +166,7 @@ body {
color: inherit;
}
/* —— 顶栏（与内容卡片一致的浅色底） —— */
/* —— 顶栏（深色玻璃底） —— */
.lux-shell .lux-header {
height: 44px !important;
min-height: 44px !important;
@@ -175,13 +176,11 @@ body {
padding: 0 14px !important;
margin: 8px 16px 0 8px;
border-radius: 10px;
background: var(--lux-card-grad) !important;
background: rgba(30, 41, 59, 0.75) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(148, 163, 184, 0.22) !important;
box-shadow:
0 2px 4px -1px rgba(15, 23, 42, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.65) inset;
border: 1px solid rgba(148, 163, 184, 0.12) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.lux-shell .lux-header-power-btn {
@@ -236,28 +235,28 @@ body {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f172a;
color: #e2e8f0;
}
.lux-shell .brand-not-in-db-tip {
color: #b45309;
color: #f59e0b;
}
/* —— 卡片 / 表格 —— */
/* —— 卡片 / 表格（深色风格） —— */
.lux-shell .el-card {
border-radius: 16px !important;
background: var(--lux-card-grad) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
background: #1e293b !important;
border: 1px solid rgba(148, 163, 184, 0.12) !important;
box-shadow:
0 4px 6px -1px rgba(15, 23, 42, 0.06),
0 14px 32px -10px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(255, 255, 255, 0.65) inset !important;
0 4px 6px -1px rgba(0, 0, 0, 0.2),
0 14px 32px -10px rgba(0, 0, 0, 0.3) !important;
color: #e2e8f0;
}
.lux-shell .el-card__header {
border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
font-weight: 600;
color: var(--lux-text-strong);
color: #e2e8f0;
}
/* 列表页顶部筛选栏：压低整体高度 */
@@ -275,56 +274,60 @@ body {
}
.lux-shell .el-table {
--el-table-border-color: rgba(148, 163, 184, 0.22);
--el-table-header-bg-color: #eef2f7;
--el-table-row-hover-bg-color: rgba(56, 189, 248, 0.06);
color: var(--lux-text-strong);
--el-table-border-color: rgba(148, 163, 184, 0.1);
--el-table-header-bg-color: #0f172a;
--el-table-row-hover-bg-color: rgba(56, 189, 248, 0.08);
--el-table-bg-color: #1e293b;
--el-table-tr-bg-color: #1e293b;
--el-table-header-text-color: #cbd5e1;
--el-table-text-color: #cbd5e1;
color: #e2e8f0;
border-radius: 12px;
overflow: hidden;
}
.lux-shell .el-table th.el-table__cell {
font-weight: 600;
color: #334155;
color: #94a3b8;
background: #0f172a !important;
}
.lux-shell .el-pagination {
--el-pagination-font-size: 13px;
--el-pagination-button-color: #475569;
--el-pagination-button-color: #94a3b8;
--el-pagination-hover-color: var(--lux-cyan);
--el-pagination-bg-color: transparent;
}
.lux-shell .el-pagination .el-pager li {
color: #94a3b8;
}
.lux-shell .el-pagination .el-pager li.is-active {
color: #fff !important;
background: linear-gradient(135deg, var(--lux-cyan), var(--lux-indigo)) !important;
background: #38bdf8 !important;
border-radius: 8px;
}
/* 主按钮渐变 */
/* 主按钮 */
.lux-shell .el-button--primary {
--el-button-bg-color: transparent;
--el-button-border-color: transparent;
background: linear-gradient(
92deg,
#38bdf8 0%,
#4f8ff7 38%,
#6366f1 72%,
#7c3aed 100%
) !important;
background: #38bdf8 !important;
border: none !important;
box-shadow: 0 8px 20px rgba(56, 189, 248, 0.28);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}
.lux-shell .el-button--primary:hover,
.lux-shell .el-button--primary:focus {
filter: brightness(1.06);
box-shadow: 0 10px 26px rgba(56, 189, 248, 0.35);
background: #22d3ee !important;
box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3);
}
.lux-shell .el-button--primary.is-plain {
background: rgba(56, 189, 248, 0.12) !important;
color: #0369a1 !important;
border: 1px solid rgba(56, 189, 248, 0.45) !important;
background: rgba(56, 189, 248, 0.15) !important;
color: #7dd3fc !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
box-shadow: none;
}
@@ -341,18 +344,28 @@ body {
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
}
/* 输入框（搜索栏等） */
/* 输入框（深色风格） */
.lux-shell .el-input__wrapper {
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25) inset;
background-color: #0f172a !important;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15) inset !important;
}
.lux-shell .el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45) inset, 0 0 0 3px rgba(56, 189, 248, 0.15);
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45) inset, 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}
.lux-shell .el-input__inner {
color: #e2e8f0 !important;
}
.lux-shell .el-input__inner::placeholder {
color: #64748b !important;
}
.lux-shell .el-select .el-select__wrapper {
border-radius: 10px;
background-color: #0f172a !important;
}
/* 标签 */
@@ -360,16 +373,43 @@ body {
border-radius: 8px;
}
/* 对话框（Teleport 到 body，不用 .lux-shell 前缀） */
/* 对话框（Teleport 到 body，不用 .lux-shell 前缀，深色风格） */
.el-overlay .el-dialog {
border-radius: 18px;
overflow: hidden;
background: #1e293b !important;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(148, 163, 184, 0.1) inset;
}
.el-overlay .el-dialog__header {
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
font-weight: 700;
color: #e2e8f0;
}
.el-overlay .el-dialog__title {
color: #e2e8f0;
}
.el-overlay .el-dialog__body {
color: #cbd5e1;
}
/* 表单标签深色 */
.lux-shell .el-form-item__label {
color: #94a3b8 !important;
}
/* 下拉菜单深色 */
.lux-shell .el-dropdown-menu {
background: #1e293b !important;
border-color: rgba(148, 163, 184, 0.12) !important;
}
/* 消息框深色 */
.el-message-box {
background: #1e293b !important;
border-color: rgba(148, 163, 184, 0.12) !important;
}
frontend/src/views/login/index.vue
+25 -28
View File
@@ -217,11 +217,11 @@ const handleSubmit = async () => {
max-width: 420px;
padding: 44px 40px 36px;
border-radius: 24px;
background: linear-gradient(165deg, #fafbfc 0%, #f0f3f8 100%);
background: #1e293b;
border: 1px solid rgba(148, 163, 184, 0.12);
box-shadow:
0 4px 6px -1px rgba(15, 23, 42, 0.06),
0 25px 50px -12px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.65) inset;
0 4px 6px -1px rgba(0, 0, 0, 0.2),
0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.logo-ring {
@@ -232,11 +232,11 @@ const handleSubmit = async () => {
align-items: center;
justify-content: center;
border-radius: 16px;
color: #1e3a5f;
background: linear-gradient(145deg, #e8eef6 0%, #dce5f0 100%);
color: #38bdf8;
background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
box-shadow:
0 2px 8px rgba(30, 58, 95, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.9) inset;
0 2px 8px rgba(56, 189, 248, 0.15),
0 0 0 1px rgba(56, 189, 248, 0.2) inset;
}
.title {
@@ -245,14 +245,14 @@ const handleSubmit = async () => {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f172a;
color: #e2e8f0;
}
.subtitle {
margin: 10px 0 0;
text-align: center;
font-size: 13px;
color: #64748b;
color: #94a3b8;
font-weight: 500;
}
@@ -267,7 +267,7 @@ const handleSubmit = async () => {
.field-label {
font-size: 12px;
font-weight: 600;
color: #475569;
color: #94a3b8;
letter-spacing: 0.02em;
}
@@ -283,8 +283,8 @@ const handleSubmit = async () => {
.glass-input :deep(.el-input__wrapper) {
border-radius: 14px;
background-color: #eef1f6;
box-shadow: none;
background-color: #0f172a !important;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15) inset !important;
border: 1px solid transparent;
transition:
box-shadow 0.2s ease,
@@ -293,25 +293,26 @@ const handleSubmit = async () => {
}
.glass-input :deep(.el-input__wrapper:hover) {
background-color: #e8ecf2;
background-color: #1e293b !important;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25) inset !important;
}
.glass-input :deep(.el-input__wrapper.is-focus) {
background-color: #fff;
background-color: #0f172a !important;
border-color: rgba(56, 189, 248, 0.45);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
}
.glass-input :deep(.el-input__inner) {
color: #0f172a;
color: #e2e8f0 !important;
}
.glass-input :deep(.el-input__inner::placeholder) {
color: #94a3b8;
color: #64748b !important;
}
.glass-input :deep(.el-input__prefix) {
color: #64748b;
color: #94a3b8 !important;
}
.btn-wrap {
@@ -333,21 +334,17 @@ const handleSubmit = async () => {
font-weight: 700;
letter-spacing: 0.12em;
color: #fff !important;
background: linear-gradient(92deg, #38bdf8 0%, #4f8ff7 38%, #6366f1 72%, #7c3aed 100%) !important;
box-shadow:
0 10px 28px rgba(56, 189, 248, 0.38),
0 4px 12px rgba(99, 102, 241, 0.25);
background: #38bdf8 !important;
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
transition:
transform 0.15s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
background 0.2s ease;
}
.login-btn:hover {
filter: brightness(1.05);
box-shadow:
0 14px 36px rgba(56, 189, 248, 0.45),
0 6px 16px rgba(99, 102, 241, 0.3);
background: #22d3ee !important;
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);
}
.login-btn:active {
frontend/src/views/model/index.vue
+2 -2
View File
@@ -842,7 +842,7 @@ onMounted(() => {
.title {
font-size: 18px;
font-weight: 600;
color: #333;
color: #e2e8f0;
}
.pagination {
@@ -913,7 +913,7 @@ onMounted(() => {
.step-label {
font-size: 15px;
font-weight: 600;
color: #0f172a;
color: #e2e8f0;
}
.step-status {