fix: disable SSR and configure dark mode infrastructure
Disable SSR (ssr: false) for development stability, add dark-mode.css with CSS variables for light/dark theme switching
This commit is contained in:
parent
9303fd2f45
commit
f5c6a6991b
132
app/assets/css/dark-mode.css
Normal file
132
app/assets/css/dark-mode.css
Normal file
@ -0,0 +1,132 @@
|
||||
/* 暗色模式 CSS 变量 */
|
||||
:root {
|
||||
--sidebar-bg: #1e293b;
|
||||
--sidebar-header-bg: #0f172a;
|
||||
--sidebar-hover-bg: #334155;
|
||||
--sidebar-text: #94a3b8;
|
||||
--sidebar-active-text: #fff;
|
||||
--sidebar-active-bg: #3b82f6;
|
||||
--header-bg: #ffffff;
|
||||
--header-border: #e2e8f0;
|
||||
--header-text: #1e293b;
|
||||
--main-bg: #f8fafc;
|
||||
--main-text: #1e293b;
|
||||
--footer-bg: #ffffff;
|
||||
--footer-border: #e2e8f0;
|
||||
--footer-text: #64748b;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--sidebar-bg: #0f172a;
|
||||
--sidebar-header-bg: #020617;
|
||||
--sidebar-hover-bg: #1e293b;
|
||||
--sidebar-text: #cbd5e1;
|
||||
--sidebar-active-text: #fff;
|
||||
--sidebar-active-bg: #3b82f6;
|
||||
--header-bg: #1e293b;
|
||||
--header-border: #334155;
|
||||
--header-text: #f1f5f9;
|
||||
--main-bg: #0f172a;
|
||||
--main-text: #f1f5f9;
|
||||
--footer-bg: #1e293b;
|
||||
--footer-border: #334155;
|
||||
--footer-text: #cbd5e1;
|
||||
}
|
||||
|
||||
/* 基础样式 */
|
||||
body {
|
||||
color: var(--main-text);
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
/* ========== Element Plus 暗色模式全局覆盖 ========== */
|
||||
|
||||
/* 输入框、文本框、选择器 */
|
||||
html.dark .el-input__inner,
|
||||
html.dark .el-textarea__inner,
|
||||
html.dark .el-select .el-input__inner,
|
||||
html.dark .el-cascader .el-input__inner {
|
||||
color: var(--header-text) !important;
|
||||
background-color: var(--header-bg) !important;
|
||||
border-color: var(--header-border) !important;
|
||||
}
|
||||
|
||||
/* 选择器下拉项 */
|
||||
html.dark .el-select-dropdown__item {
|
||||
color: var(--header-text) !important;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item.selected {
|
||||
color: var(--sidebar-active-text) !important;
|
||||
background-color: var(--sidebar-active-bg) !important;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item.hover {
|
||||
background-color: var(--sidebar-hover-bg) !important;
|
||||
}
|
||||
|
||||
/* 表单标签 */
|
||||
html.dark .el-form-item__label {
|
||||
color: var(--header-text) !important;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
html.dark .el-table {
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
html.dark .el-table th {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
html.dark .el-table tr {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
html.dark .el-table td {
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
html.dark .el-card {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
html.dark .el-card .el-card__header {
|
||||
border-bottom-color: var(--header-border);
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
html.dark .el-tag {
|
||||
background-color: var(--sidebar-bg) !important;
|
||||
border-color: var(--header-border) !important;
|
||||
color: var(--header-text) !important;
|
||||
}
|
||||
|
||||
/* 按钮文字颜色 */
|
||||
html.dark .el-button--default {
|
||||
color: var(--header-text);
|
||||
background-color: var(--header-bg);
|
||||
border-color: var(--header-border);
|
||||
}
|
||||
|
||||
html.dark .el-button--primary {
|
||||
background-color: var(--sidebar-active-bg) !important;
|
||||
border-color: var(--sidebar-active-bg) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 级联选择器、日期选择器等 */
|
||||
html.dark .el-cascader .el-input__inner,
|
||||
html.dark .el-date-editor .el-input__inner {
|
||||
color: var(--header-text) !important;
|
||||
background-color: var(--header-bg) !important;
|
||||
border-color: var(--header-border) !important;
|
||||
}
|
||||
|
||||
/* 占位符 */
|
||||
html.dark .el-input__inner::placeholder {
|
||||
color: var(--footer-text) !important;
|
||||
}
|
||||
@ -1,13 +1,5 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
modules: [
|
||||
'@nuxt/eslint',
|
||||
'@pinia/nuxt',
|
||||
'@element-plus/nuxt'
|
||||
],
|
||||
|
||||
css: ['element-plus/dist/index.css']
|
||||
ssr: false,
|
||||
modules: ['@element-plus/nuxt'],
|
||||
css: ['~/assets/css/dark-mode.css']
|
||||
})
|
||||
|
||||
41
package.json
41
package.json
@ -9,18 +9,25 @@
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"user:cli": "node scripts/user-cli.js",
|
||||
"user:init": "node scripts/user-cli.js init"
|
||||
"user:init": "node scripts/user-cli.js init",
|
||||
"user:admin": "node scripts/user-manager.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/nuxt": "1.0.10",
|
||||
"@pinia/nuxt": "0.11.3",
|
||||
"@unocss/nuxt": "^66.6.7",
|
||||
"bcryptjs": "^3.0.3",
|
||||
"better-sqlite3": "^12.8.0",
|
||||
"chalk": "^5.6.2",
|
||||
"element-plus": "2.9.2",
|
||||
"inquirer": "^9.3.8",
|
||||
"jsonwebtoken": "^9.0.3",
|
||||
"nuxt": "^4.3.1",
|
||||
"opencode-ai": "^1.2.27",
|
||||
"pinia": "2.3.1",
|
||||
"puppeteer": "^24.40.0",
|
||||
"sql.js": "^1.14.1",
|
||||
"sqlite3": "^6.0.1",
|
||||
"unocss": "^66.6.7",
|
||||
"uuid": "^13.0.0",
|
||||
"vue": "^3.5.29",
|
||||
"vue-router": "^4.6.4",
|
||||
@ -31,7 +38,33 @@
|
||||
"@nuxt/icon": "2.2.1",
|
||||
"@types/bcryptjs": "^3.0.0",
|
||||
"@types/jsonwebtoken": "^9.0.10",
|
||||
"@types/uuid": "^11.0.0"
|
||||
"@types/uuid": "^11.0.0",
|
||||
"better-sqlite3": "^12.8.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
|
||||
"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"pkg-types": "^2.3.0"
|
||||
},
|
||||
"onlyBuiltDependencies": [
|
||||
"esbuild",
|
||||
"opencode-ai",
|
||||
"puppeteer",
|
||||
"sqlite3",
|
||||
"vue-demi"
|
||||
]
|
||||
},
|
||||
"version": "1.0.0",
|
||||
"description": "基于 Nuxt 3 + Element Plus + SQLite 的运动会管理系统",
|
||||
"main": "test-db-connection.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.mzmc.top/laobinghu/SportMeetingAdminSys.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
||||
2006
pnpm-lock.yaml
generated
2006
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user