diff --git a/build/generate/generateModifyVars.ts b/build/generate/generateModifyVars.ts
index 6357763d..b27d33d6 100644
--- a/build/generate/generateModifyVars.ts
+++ b/build/generate/generateModifyVars.ts
@@ -1,36 +1,18 @@
import { resolve } from 'node:path'
-import { getThemeVariables } from 'ant-design-vue/dist/theme'
import { generateAntColors, primaryColor } from '../config/themeConfig'
/**
* less global variable
*/
-export function generateModifyVars(dark = false) {
+export function generateModifyVars() {
const palettes = generateAntColors(primaryColor)
- const primary = palettes[5]
const primaryColorObj: Record<string, string> = {}
for (let index = 0; index < 10; index++)
primaryColorObj[`primary-${index + 1}`] = palettes[index]
- const modifyVars = getThemeVariables({ dark })
return {
- ...modifyVars,
- // Used for global import to avoid the need to import each style file separately
- // reference: Avoid repeated references
- 'hack': `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
- 'primary-color': primary,
- ...primaryColorObj,
- 'info-color': primary,
- 'processing-color': primary,
- 'success-color': '#55D187', // Success color
- 'error-color': '#ED6F6F', // False color
- 'warning-color': '#EFBD47', // Warning color
- // 'border-color-base': '#EEEEEE',
- 'font-size-base': '14px', // Main font size
- 'border-radius-base': '2px', // Component/float fillet
- 'link-color': primary, // Link color
- 'app-content-background': '#fafafa', // Link color
+ hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
}
}
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 6f68764f..ebcfa24d 100644
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -9,9 +9,7 @@ import { presetTypography, presetUno } from 'unocss'
import { configPwaConfig } from './pwa'
import { configHtmlPlugin } from './html'
import { configCompressPlugin } from './compress'
-import { configStyleImportPlugin } from './styleImport'
import { configVisualizerConfig } from './visualizer'
-import { configThemePlugin } from './theme'
import { configSvgIconsPlugin } from './svgSprite'
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
@@ -45,13 +43,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
// rollup-plugin-visualizer
vitePlugins.push(configVisualizerConfig())
- // vite-plugin-vben-theme
- vitePlugins.push(configThemePlugin(isBuild))
-
// The following plugins only work in the production environment
if (isBuild) {
- // vite-plugin-style-import
- vitePlugins.push(configStyleImportPlugin(isBuild))
// rollup-plugin-gzip
vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts
deleted file mode 100644
index ca2d39ec..00000000
--- a/build/vite/plugin/styleImport.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Introduces component library styles on demand.
- * https://github.com/xingyuv/vite-plugin-style-import
- */
-import { createStyleImportPlugin } from 'vite-plugin-style-import'
-
-export function configStyleImportPlugin(_isBuild: boolean) {
- if (!_isBuild)
- return []
-
- const styleImportPlugin = createStyleImportPlugin({
- libs: [
- {
- libraryName: 'ant-design-vue',
- esModule: true,
- resolveStyle: (name) => {
- // 这里是无需额外引入样式文件的“子组件”列表
- const ignoreList = [
- 'anchor-link',
- 'sub-menu',
- 'menu-item',
- 'menu-divider',
- 'menu-item-group',
- 'breadcrumb-item',
- 'breadcrumb-separator',
- 'form-item',
- 'step',
- 'select-option',
- 'select-opt-group',
- 'card-grid',
- 'card-meta',
- 'collapse-panel',
- 'descriptions-item',
- 'list-item',
- 'list-item-meta',
- 'table-column',
- 'table-column-group',
- 'tab-pane',
- 'tab-content',
- 'timeline-item',
- 'tree-node',
- 'skeleton-input',
- 'skeleton-avatar',
- 'skeleton-title',
- 'skeleton-paragraph',
- 'skeleton-image',
- 'skeleton-button',
- ]
- // 这里是需要额外引入样式的子组件列表
- // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
- const replaceList = {
- 'textarea': 'input',
- 'typography-text': 'typography',
- 'typography-title': 'typography',
- 'typography-paragraph': 'typography',
- 'typography-link': 'typography',
- 'dropdown-button': 'dropdown',
- 'input-password': 'input',
- 'input-search': 'input',
- 'input-group': 'input',
- 'radio-group': 'radio',
- 'checkbox-group': 'checkbox',
- 'layout-sider': 'layout',
- 'layout-content': 'layout',
- 'layout-footer': 'layout',
- 'layout-header': 'layout',
- 'month-picker': 'date-picker',
- 'range-picker': 'date-picker',
- 'image-preview-group': 'image',
- }
-
- return ignoreList.includes(name)
- ? ''
- : replaceList.hasOwnProperty(name)
- ? `ant-design-vue/es/${replaceList[name]}/style/index`
- : `ant-design-vue/es/${name}/style/index`
- },
- },
- ],
- })
- return styleImportPlugin
-}
diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts
deleted file mode 100644
index 9eef9fb7..00000000
--- a/build/vite/plugin/theme.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Vite plugin for website theme color switching
- * https://github.com/xingyuv/vite-vue-plugin-theme
- */
-import path from 'node:path'
-import type { PluginOption } from 'vite'
-import { antdDarkThemePlugin, mixDarken, mixLighten, tinycolor, viteThemePlugin } from 'vite-vue-plugin-theme'
-import { generateColors, getThemeColors } from '../../config/themeConfig'
-import { generateModifyVars } from '../../generate/generateModifyVars'
-
-export function configThemePlugin(isBuild: boolean): PluginOption[] {
- const colors = generateColors({
- mixDarken,
- mixLighten,
- tinycolor,
- })
- const plugin = [
- viteThemePlugin({
- resolveSelector: (s) => {
- s = s.trim()
- switch (s) {
- case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
- return '.ant-steps-item-icon > .ant-steps-icon'
- case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
- case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
- case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
- return s
- case '.ant-steps-item-icon > .ant-steps-icon':
- return s
- case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
- return s
- default:
- if (s.indexOf('.ant-btn') >= -1) {
- // 按钮被重新定制过，需要过滤掉class防止覆盖
- return s
- }
- }
- return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`
- },
- colorVariables: [...getThemeColors(), ...colors],
- }),
- antdDarkThemePlugin({
- preloadFiles: [
- path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
- // path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
- path.resolve(process.cwd(), 'src/design/index.less'),
- ],
- filter: id => (isBuild ? !id.endsWith('antd.less') : true),
- // extractCss: false,
- darkModifyVars: {
- ...generateModifyVars(true),
- 'text-color': '#c9d1d9',
- 'primary-1': 'rgb(255 255 255 / 8%)',
- 'text-color-base': '#c9d1d9',
- 'component-background': '#151515',
- 'heading-color': 'rgb(255 255 255 / 65%)',
- // black: '#0e1117',
- // #8b949e
- 'text-color-secondary': '#8b949e',
- 'border-color-base': '#303030',
- // 'border-color-split': '#30363d',
- 'item-active-bg': '#111b26',
- 'app-content-background': '#1e1e1e',
- 'tree-node-selected-bg': '#11263c',
-
- 'alert-success-border-color': '#274916',
- 'alert-success-bg-color': '#162312',
- 'alert-success-icon-color': '#49aa19',
- 'alert-info-border-color': '#153450',
- 'alert-info-bg-color': '#111b26',
- 'alert-info-icon-color': '#177ddc',
- 'alert-warning-border-color': '#594214',
- 'alert-warning-bg-color': '#2b2111',
- 'alert-warning-icon-color': '#d89614',
- 'alert-error-border-color': '#58181c',
- 'alert-error-bg-color': '#2a1215',
- 'alert-error-icon-color': '#a61d24',
- },
- }),
- ]
-
- return plugin as unknown as PluginOption[]
-}
diff --git a/package.json b/package.json
index 0b918f56..9b4b6a70 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"@vue/runtime-core": "^3.3.4",
"@vueuse/core": "^10.2.1",
"@zxcvbn-ts/core": "^3.0.3",
- "ant-design-vue": "^3.2.20",
+ "ant-design-vue": "^4.0.0",
"axios": "^1.4.0",
"codemirror": "^5.65.3",
"cron-parser": "^4.8.1",
@@ -135,10 +135,8 @@
"vite-plugin-progress": "^0.0.7",
"vite-plugin-purge-icons": "^0.9.2",
"vite-plugin-pwa": "^0.16.4",
- "vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-vue-plugin-html": "^1.0.2",
- "vite-vue-plugin-theme": "^1.0.2",
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.8.8"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84f7961d..277614c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
specifier: ^3.0.3
version: 3.0.3
ant-design-vue:
- specifier: ^3.2.20
- version: 3.2.20(vue@3.3.4)
+ specifier: ^4.0.0
+ version: 4.0.0(vue@3.3.4)
axios:
specifier: ^1.4.0
version: 1.4.0(debug@4.3.4)
@@ -268,18 +268,12 @@ devDependencies:
vite-plugin-pwa:
specifier: ^0.16.4
version: 0.16.4(vite@4.4.7)(workbox-build@7.0.0)(workbox-window@7.0.0)
- vite-plugin-style-import:
- specifier: ^2.0.0
- version: 2.0.0(vite@4.4.7)
vite-plugin-svg-icons:
specifier: ^2.0.1
version: 2.0.1(vite@4.4.7)
vite-vue-plugin-html:
specifier: ^1.0.2
version: 1.0.2(rollup@3.27.0)(vite@4.4.7)
- vite-vue-plugin-theme:
- specifier: ^1.0.2
- version: 1.0.2(vite@4.4.7)
vue-eslint-parser:
specifier: ^9.3.1
version: 9.3.1(eslint@8.46.0)
@@ -1845,6 +1839,14 @@ packages:
engines: {node: '>=10'}
dev: false
+ /@emotion/hash@0.9.1:
+ resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+ dev: false
+
+ /@emotion/unitless@0.8.1:
+ resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+ dev: false
+
/@esbuild-kit/cjs-loader@2.4.2:
resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
dependencies:
@@ -2691,14 +2693,6 @@ packages:
rollup: 2.79.1
dev: true
- /@rollup/pluginutils@4.2.1:
- resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
- engines: {node: '>= 8.0.0'}
- dependencies:
- estree-walker: 2.0.2
- picomatch: 2.3.1
- dev: true
-
/@rollup/pluginutils@5.0.2(rollup@3.27.0):
resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
engines: {node: '>=14.0.0'}
@@ -2871,10 +2865,6 @@ packages:
'@types/node': 20.4.5
dev: true
- /@types/tinycolor2@1.4.3:
- resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
- dev: true
-
/@types/trusted-types@2.0.3:
resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
dev: true
@@ -3574,8 +3564,8 @@ packages:
engines: {node: '>=12'}
dev: true
- /ant-design-vue@3.2.20(vue@3.3.4):
- resolution: {integrity: sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==}
+ /ant-design-vue@4.0.0(vue@3.3.4):
+ resolution: {integrity: sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==}
engines: {node: '>=12.22.0'}
peerDependencies:
vue: '>=3.2.0'
@@ -3584,9 +3574,12 @@ packages:
'@ant-design/icons-vue': 6.1.0(vue@3.3.4)
'@babel/runtime': 7.21.0
'@ctrl/tinycolor': 3.6.0
+ '@emotion/hash': 0.9.1
+ '@emotion/unitless': 0.8.1
'@simonwep/pickr': 1.8.2
array-tree-filter: 2.1.0
async-validator: 4.2.5
+ csstype: 3.1.2
dayjs: 1.11.9
dom-align: 1.12.4
dom-scroll-into-view: 2.0.1
@@ -3595,6 +3588,8 @@ packages:
resize-observer-polyfill: 1.5.1
scroll-into-view-if-needed: 2.2.31
shallow-equal: 1.2.1
+ stylis: 4.3.0
+ throttle-debounce: 5.0.0
vue: 3.3.4
vue-types: 3.0.2(vue@3.3.4)
warning: 4.0.3
@@ -3946,14 +3941,6 @@ packages:
resolution: {integrity: sha512-ewDad7+D2vlyy+E4UJuVfiBsU69IL+8oVmTuZnH5Q6CIUbxNfI50uVpRHbUPDD6SUaN2o0Lh4DhTrvLG/Tn1yg==}
dev: true
- /capital-case@1.0.4:
- resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
- dependencies:
- no-case: 3.0.4
- tslib: 2.6.0
- upper-case-first: 2.0.2
- dev: true
-
/cfb@1.2.2:
resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
engines: {node: '>=0.8'}
@@ -4000,23 +3987,6 @@ packages:
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
dev: true
- /change-case@4.1.2:
- resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
- dependencies:
- camel-case: 4.1.2
- capital-case: 1.0.4
- constant-case: 3.0.4
- dot-case: 3.0.4
- header-case: 2.0.4
- no-case: 3.0.4
- param-case: 3.0.4
- pascal-case: 3.1.2
- path-case: 3.0.4
- sentence-case: 3.0.4
- snake-case: 3.0.4
- tslib: 2.5.0
- dev: true
-
/character-entities-legacy@1.1.4:
resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
dev: true
@@ -4244,18 +4214,6 @@ packages:
engines: {node: ^14.18.0 || >=16.10.0}
dev: true
- /console@0.7.2:
- resolution: {integrity: sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==}
- dev: true
-
- /constant-case@3.0.4:
- resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
- dependencies:
- no-case: 3.0.4
- tslib: 2.6.0
- upper-case: 2.0.2
- dev: true
-
/conventional-changelog-angular@5.0.13:
resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
engines: {node: '>=10'}
@@ -4859,10 +4817,6 @@ packages:
which-typed-array: 1.1.9
dev: true
- /es-module-lexer@0.9.3:
- resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
- dev: true
-
/es-set-tostringtag@2.0.1:
resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
engines: {node: '>= 0.4'}
@@ -4881,10 +4835,6 @@ packages:
is-symbol: 1.0.4
dev: true
- /esbuild-plugin-alias@0.2.1:
- resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==}
- dev: true
-
/esbuild@0.17.19:
resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
engines: {node: '>=12'}
@@ -5936,13 +5886,6 @@ packages:
hasBin: true
dev: true
- /header-case@2.0.4:
- resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
- dependencies:
- capital-case: 1.0.4
- tslib: 2.6.0
- dev: true
-
/hosted-git-info@2.8.9:
resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
dev: true
@@ -7476,13 +7419,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
- /path-case@3.0.4:
- resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
- dependencies:
- dot-case: 3.0.4
- tslib: 2.6.0
- dev: true
-
/path-exists@4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
engines: {node: '>=8'}
@@ -8209,14 +8145,6 @@ packages:
lru-cache: 6.0.0
dev: true
- /sentence-case@3.0.4:
- resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
- dependencies:
- no-case: 3.0.4
- tslib: 2.6.0
- upper-case-first: 2.0.2
- dev: true
-
/serialize-javascript@4.0.0:
resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==}
dependencies:
@@ -8309,13 +8237,6 @@ packages:
is-fullwidth-code-point: 4.0.0
dev: true
- /snake-case@3.0.4:
- resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
- dependencies:
- dot-case: 3.0.4
- tslib: 2.6.0
- dev: true
-
/snapdragon-node@2.1.1:
resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
engines: {node: '>=0.10.0'}
@@ -8726,6 +8647,10 @@ packages:
- supports-color
dev: true
+ /stylis@4.3.0:
+ resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
+ dev: false
+
/supports-color@2.0.0:
resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
engines: {node: '>=0.8.0'}
@@ -8849,6 +8774,11 @@ packages:
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
dev: true
+ /throttle-debounce@5.0.0:
+ resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
+ engines: {node: '>=12.22'}
+ dev: false
+
/through2@4.0.2:
resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
dependencies:
@@ -8859,10 +8789,6 @@ packages:
resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
dev: true
- /tinycolor2@1.6.0:
- resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
- dev: true
-
/tinymce@5.10.7:
resolution: {integrity: sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA==}
dev: false
@@ -9207,18 +9133,6 @@ packages:
picocolors: 1.0.0
dev: true
- /upper-case-first@2.0.2:
- resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
- dependencies:
- tslib: 2.6.0
- dev: true
-
- /upper-case@2.0.2:
- resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
- dependencies:
- tslib: 2.6.0
- dev: true
-
/uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
dependencies:
@@ -9335,21 +9249,6 @@ packages:
- supports-color
dev: true
- /vite-plugin-style-import@2.0.0(vite@4.4.7):
- resolution: {integrity: sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA==}
- peerDependencies:
- vite: '>=2.0.0'
- dependencies:
- '@rollup/pluginutils': 4.2.1
- change-case: 4.1.2
- console: 0.7.2
- es-module-lexer: 0.9.3
- fs-extra: 10.1.0
- magic-string: 0.25.9
- pathe: 0.2.0
- vite: 4.4.7(@types/node@20.4.5)(less@4.1.3)(terser@5.19.2)
- dev: true
-
/vite-plugin-svg-icons@2.0.1(vite@4.4.7):
resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
peerDependencies:
@@ -9390,24 +9289,6 @@ packages:
- rollup
dev: true
- /vite-vue-plugin-theme@1.0.2(vite@4.4.7):
- resolution: {integrity: sha512-zaB0hfdz1VyFncNoJ/6Y8PqThqBm4zhCidc/qdV5/XgsGCm/6HMNRFmnjvHHkBL7VK687bFQSaxEB+cXerfKwA==}
- peerDependencies:
- vite: '>=4.3.0'
- dependencies:
- '@types/node': 20.4.5
- '@types/tinycolor2': 1.4.3
- clean-css: 5.3.2
- debug: 4.3.4
- esbuild: 0.17.19
- esbuild-plugin-alias: 0.2.1
- picocolors: 1.0.0
- tinycolor2: 1.6.0
- vite: 4.4.7(@types/node@20.4.5)(less@4.1.3)(terser@5.19.2)
- transitivePeerDependencies:
- - supports-color
- dev: true
-
/vite@4.4.7(@types/node@20.4.5)(less@4.1.3)(terser@5.19.2):
resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/src/App.vue b/src/App.vue
index e9c1d841..7fb1ec10 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,24 @@
<script lang="ts" setup>
-import { computed } from 'vue'
+import 'dayjs/locale/zh-cn'
+
import { ConfigProvider } from 'ant-design-vue'
+import { storeToRefs } from 'pinia'
+
import { AppProvider } from '@/components/Application'
import { useTitle } from '@/hooks/web/useTitle'
import { useLocale } from '@/locales/useLocale'
import { useAppStore } from '@/store/modules/app'
-import 'dayjs/locale/zh-cn'
-
// support Multi-language
const { getAntdLocale } = useLocale()
-
const appStore = useAppStore()
-
-const componentSize = computed(() => appStore.getComponentSize)
-
+const { themeConfig } = storeToRefs(appStore)
// Listening to page changes and dynamically changing site titles
useTitle()
</script>
<template>
- <ConfigProvider :locale="getAntdLocale" :component-size="componentSize">
+ <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
<AppProvider>
<RouterView />
</AppProvider>
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
index e6e93c9d..c40adf3c 100644
--- a/src/components/Application/src/AppLogo.vue
+++ b/src/components/Application/src/AppLogo.vue
@@ -61,10 +61,6 @@ function goHome() {
padding-left: 20px;
}
- &.light &__title {
- color: @primary-color;
- }
-
&.dark &__title {
color: @white;
}
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index 45f8b03e..dbf22af5 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -235,8 +235,6 @@ function handleClose() {
&--active {
color: #fff;
- background-color: @primary-color;
-
.@{prefix-cls}-list__item-enter {
opacity: 1;
}
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
index d6484d78..65526225 100644
--- a/src/components/Basic/src/BasicHelp.vue
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -99,10 +99,6 @@ export default defineComponent({
color: @text-color-help-dark;
cursor: pointer;
- &:hover {
- color: @primary-color;
- }
-
&__wrap {
p {
margin-bottom: 0;
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 46f11de8..2c02d9b9 100644
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -67,7 +67,6 @@ const getClass = computed(() => [
height: 16px;
margin-right: 4px;
content: '';
- background-color: @primary-color;
}
&-help {
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index 2fd23eed..eeec2a95 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -93,7 +93,7 @@ export default defineComponent({
@prefix-cls: ~'@{namespace}-collapse-container';
.@{prefix-cls} {
- background-color: @component-background;
+ // background-color: @component-background;
border-radius: 2px;
transition: all 0.3s ease-in-out;
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index 633654f3..ce6ec1d5 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -167,16 +167,10 @@ function handleOk() {
overflow: hidden;
}
- .ant-drawer-close {
- &:hover {
- color: @error-color;
- }
- }
-
.ant-drawer-body {
height: calc(100% - @header-height);
padding: 0;
- background-color: @component-background;
+ // background-color: @component-background;
.scrollbar__wrap {
padding: 16px !important;
@@ -197,7 +191,7 @@ function handleOk() {
width: 100%;
height: @detail-header-height;
padding: 0;
- border-top: 1px solid @border-color-base;
+ border-top: 1px solid;
}
.ant-drawer-title {
diff --git a/src/components/Drawer/src/components/DrawerFooter.vue b/src/components/Drawer/src/components/DrawerFooter.vue
index e0816b22..6a80d05d 100644
--- a/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@@ -63,7 +63,7 @@ function handleClose() {
width: 100%;
padding: 0 12px 0 20px;
text-align: right;
- background-color: @component-background;
+ // background-color: @component-background;
border-top: 1px solid @border-color-base;
> * {
diff --git a/src/components/Drawer/src/components/DrawerHeader.vue b/src/components/Drawer/src/components/DrawerHeader.vue
index 5d8f2bbd..adce20a8 100644
--- a/src/components/Drawer/src/components/DrawerHeader.vue
+++ b/src/components/Drawer/src/components/DrawerHeader.vue
@@ -51,10 +51,6 @@ function handleClose() {
&__back {
padding: 0 12px;
cursor: pointer;
-
- &:hover {
- color: @primary-color;
- }
}
&__twrap {
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue b/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
index 099317fd..535c8427 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
@@ -90,10 +90,6 @@ ul {
&:hover {
position: relative;
- color: @primary-color;
- border: 1px solid @primary-color;
- // z-index: 1;
- box-shadow: 0 2px 6px @primary-color;
}
}
}
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue b/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
index 706c63cd..f1505ac8 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
@@ -124,10 +124,6 @@ export default defineComponent({
color: #ccc;
}
- &:hover {
- color: @primary-color;
- }
-
> span {
padding-left: 2px;
font-size: 14px;
diff --git a/src/components/FormDesign/src/components/VFormDesign/styles/drag.less b/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
index e0176767..8a489108 100644
--- a/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
+++ b/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
@@ -23,7 +23,6 @@
width: 100%;
height: 5px;
content: "";
- background-color: @primary-color;
}
}
@@ -35,10 +34,6 @@
overflow: hidden;
transition: all 0.3s;
- &:hover {
- background-color: @primary-hover-bg-color;
- }
-
// 选择时 start
&::before {
position: absolute;
@@ -47,12 +42,10 @@
width: 100%;
height: 5px;
content: "";
- background-color: @primary-color;
transition: all 0.3s;
}
&.active {
- background-color: @primary-hover-bg-color;
outline-offset: 0;
&::before {
@@ -89,7 +82,6 @@
bottom: 2px;
font-size: 14px;
// z-index: 999;
- color: @primary-color;
}
.copy,
@@ -116,13 +108,11 @@
.copy {
right: 30px;
- background-color: @primary-color;
border-radius: 0 0 0 8px;
}
.delete {
right: 0;
- background-color: @primary-color;
}
}
diff --git a/src/components/Modal/src/components/ModalClose.vue b/src/components/Modal/src/components/ModalClose.vue
index 7641795f..105b1214 100644
--- a/src/components/Modal/src/components/ModalClose.vue
+++ b/src/components/Modal/src/components/ModalClose.vue
@@ -84,16 +84,6 @@ function handleFullScreen(e: Event) {
& span:nth-child(1) {
display: inline-block;
padding: 10px;
-
- &:hover {
- color: @primary-color;
- }
- }
-
- & span:last-child {
- &:hover {
- color: @error-color;
- }
}
}
</style>
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
index 07180662..798c0698 100644
--- a/src/components/Modal/src/index.less
+++ b/src/components/Modal/src/index.less
@@ -83,27 +83,11 @@
}
}
- &-confirm-confirm.error .ant-modal-confirm-body > .anticon {
- color: @error-color;
- }
-
&-confirm-btns {
.ant-btn:last-child {
margin-right: 0;
}
}
-
- &-confirm-info {
- .ant-modal-confirm-body > .anticon {
- color: @warning-color;
- }
- }
-
- &-confirm-confirm.success {
- .ant-modal-confirm-body > .anticon {
- color: @success-color;
- }
- }
}
.ant-modal-confirm .ant-modal-body {
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index beb171f0..f7211bef 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -152,9 +152,9 @@ watch(
}
}
- &-content-bg {
- background-color: @component-background;
- }
+ // &-content-bg {
+ // background-color: @component-background;
+ // }
&--dense {
.@{prefix-cls}-content {
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
index 0600adec..76635b9e 100644
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/src/components/SimpleMenu/src/components/menu.less
@@ -14,7 +14,6 @@
display: block;
width: 2px;
content: "";
- background-color: @primary-color;
}
}
@@ -62,7 +61,6 @@
&-selected {
color: #fff;
- background-color: @primary-color !important;
}
}
}
@@ -72,15 +70,8 @@
.@{menu-prefix-cls}-submenu-title {
color: @text-color-base;
- &:hover {
- color: @primary-color;
- }
-
&-selected {
z-index: 2;
- color: @primary-color;
- background-color: fade(@primary-color, 10);
-
.light-border();
}
}
@@ -110,8 +101,6 @@
background-color: #fff;
.@{menu-prefix-cls}-submenu-active {
- color: @primary-color !important;
-
&-border {
.light-border();
}
@@ -161,10 +150,6 @@
white-space: nowrap;
cursor: pointer;
- &:hover {
- color: @primary-color;
- }
-
.@{menu-prefix-cls}-tooltip {
width: calc(100% - 0px);
padding: 12px 0;
@@ -218,21 +203,14 @@
&-light&-vertical &-item {
&-active:not(.@{menu-prefix-cls}-submenu) {
z-index: 2;
- color: @primary-color;
- background-color: fade(@primary-color, 10);
-
.light-border();
}
- &-active.@{menu-prefix-cls}-submenu {
- color: @primary-color;
- }
}
&-light&-vertical&-collapse {
> li.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}-submenu-active {
position: relative;
- background-color: fade(@primary-color, 5);
&::after {
display: none;
@@ -245,7 +223,6 @@
width: 3px;
height: 100%;
content: "";
- background-color: @primary-color;
}
}
}
@@ -255,7 +232,6 @@
color: @menu-dark-subsidiary-color;
&-active:not(.@{menu-prefix-cls}-submenu) {
color: #fff !important;
- background-color: @primary-color !important;
}
&:hover {
@@ -277,7 +253,6 @@
width: 3px;
height: 100%;
content: "";
- background-color: @primary-color;
}
.@{menu-prefix-cls}-submenu-collapse {
diff --git a/src/components/SimpleMenu/src/index.less b/src/components/SimpleMenu/src/index.less
index e0d2d21a..d1dca486 100644
--- a/src/components/SimpleMenu/src/index.less
+++ b/src/components/SimpleMenu/src/index.less
@@ -59,21 +59,5 @@
padding: 0;
border-radius: 50%;
}
-
- &--primary {
- background-color: @primary-color;
- }
-
- &--error {
- background-color: @error-color;
- }
-
- &--success {
- background-color: @success-color;
- }
-
- &--warn {
- background-color: @warning-color;
- }
}
}
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
index 7fef1b8b..b9f8f7eb 100644
--- a/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -98,31 +98,6 @@ watch(
transition:
width 0.5s ease-in-out,
background 0.25s;
-
- &[data-score='0'] {
- width: 20%;
- background-color: darken(@error-color, 10%);
- }
-
- &[data-score='1'] {
- width: 40%;
- background-color: @error-color;
- }
-
- &[data-score='2'] {
- width: 60%;
- background-color: @warning-color;
- }
-
- &[data-score='3'] {
- width: 80%;
- background-color: fade(@success-color, 50%);
- }
-
- &[data-score='4'] {
- width: 100%;
- background-color: @success-color;
- }
}
}
}
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index ad4a48ad..db37d389 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -329,7 +329,7 @@ emit('register', tableAction, formActions)
&-row__striped {
td {
- background-color: @app-content-background;
+ // background-color: @app-content-background;
}
}
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index 622fc89d..10c84a06 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -475,7 +475,6 @@ export default defineComponent({
.edit-cell-rule-popover {
.ant-popover-inner-content {
padding: 4px 8px;
- color: @error-color;
// border: 1px solid @error-color;
border-radius: 2px;
}
@@ -497,10 +496,6 @@ export default defineComponent({
&__icon {
&:hover {
transform: scale(1.2);
-
- svg {
- color: @primary-color;
- }
}
}
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index 254b4b45..95e1511e 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -406,10 +406,6 @@ function updateSortOption(column: BasicColumn) {
.ant-checkbox-wrapper {
width: 100%;
-
- &:hover {
- color: @primary-color;
- }
}
}
@@ -418,11 +414,6 @@ function updateSortOption(column: BasicColumn) {
color: rgb(0 0 0 / 45%);
cursor: pointer;
- &.active,
- &:hover {
- color: @primary-color;
- }
-
&.disabled {
color: @disabled-color;
cursor: not-allowed;
diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less
deleted file mode 100644
index ee493fec..00000000
--- a/src/design/ant/btn.less
+++ /dev/null
@@ -1,286 +0,0 @@
-// button reset
-.ant-btn {
- &-link:hover,
- &-link:focus,
- &-link:active {
- border-color: transparent !important;
- }
-
- &-primary {
- color: @white;
- background-color: @button-primary-color;
-
- &:hover,
- &:focus {
- color: @white;
- background-color: @button-primary-hover-color;
- }
- }
-
- /* stylelint-disable-next-line selector-not-notation */
- &-primary:not(&-background-ghost):not([disabled]) {
- color: @white;
- }
-
- &-default {
- color: @button-cancel-color;
- background-color: @button-cancel-bg-color;
- border-color: @button-cancel-border-color;
-
- &:hover,
- &:focus {
- color: @button-cancel-hover-color;
- background-color: @button-cancel-hover-bg-color;
- border-color: @button-cancel-hover-border-color;
- }
- //
- //&[disabled],
- //&[disabled]:hover {
- // color: fade(@button-cancel-color, 40%) !important;
- // background: fade(@button-cancel-bg-color, 40%) !important;
- // border-color: fade(@button-cancel-border-color, 40%) !important;
- //}
- }
-
- [data-theme="light"] &.ant-btn-link.is-disabled {
- color: rgb(0 0 0 / 25%);
- text-shadow: none;
- cursor: not-allowed !important;
- background-color: transparent !important;
- border-color: transparent !important;
- box-shadow: none;
- }
-
- [data-theme="dark"] &.ant-btn-link.is-disabled {
- color: rgb(255 255 255 / 25%) !important;
- text-shadow: none;
- cursor: not-allowed !important;
- background-color: transparent !important;
- border-color: transparent !important;
- box-shadow: none;
- }
-
- // color: @white;
-
- &-success.ant-btn-link:not([disabled="disabled"]) {
- color: @button-success-color;
-
- &:hover,
- &:focus {
- color: @button-success-hover-color;
- border-color: transparent;
- }
-
- &:active {
- color: @button-success-active-color;
- }
- }
-
- &-success.ant-btn-link.ant-btn-loading,
- &-warning.ant-btn-link.ant-btn-loading,
- &-error.ant-btn-link.ant-btn-loading,
- &-background-ghost.ant-btn-link.ant-btn-loading,
- &.ant-btn-link.ant-btn-loading {
- &::before {
- background: transparent;
- }
- }
-
- &-success:not(.ant-btn-link, .is-disabled) {
- color: @white;
- background-color: @button-success-color;
- border-color: @button-success-color;
- //border-width: 0;
-
- &:hover,
- &:focus {
- color: @white;
- background-color: @button-success-hover-color;
- border-color: @button-success-hover-color;
- }
-
- &:active {
- background-color: @button-success-active-color;
- border-color: @button-success-active-color;
- }
- }
-
- &-warning.ant-btn-link:not([disabled="disabled"]) {
- color: @button-warn-color;
-
- &:hover,
- &:focus {
- color: @button-warn-hover-color;
- border-color: transparent;
- }
-
- &:active {
- color: @button-warn-active-color;
- }
- }
-
- &-warning:not(.ant-btn-link, .is-disabled) {
- color: @white;
- background-color: @button-warn-color;
- border-color: @button-warn-color;
- //border-width: 0;
-
- &:hover,
- &:focus {
- color: @white;
- background-color: @button-warn-hover-color;
- border-color: @button-warn-hover-color;
- }
-
- &:active {
- background-color: @button-warn-active-color;
- border-color: @button-warn-active-color;
- }
-
- //&[disabled],
- //&[disabled]:hover {
- // color: @white;
- // background-color: fade(@button-warn-color, 40%);
- // border-color: fade(@button-warn-color, 40%);
- //}
- }
-
- &-error.ant-btn-link:not([disabled="disabled"]) {
- color: @button-error-color;
-
- &:hover,
- &:focus {
- color: @button-error-hover-color;
- border-color: transparent;
- }
-
- &:active {
- color: @button-error-active-color;
- }
- }
-
- &-error:not(.ant-btn-link, .is-disabled) {
- color: @white;
- background-color: @button-error-color;
- border-color: @button-error-color;
- //border-width: 0;
-
- &:hover,
- &:focus {
- color: @white;
- background-color: @button-error-hover-color;
- border-color: @button-error-hover-color;
- }
-
- &:active {
- background-color: @button-error-active-color;
- border-color: @button-error-active-color;
- }
-
- //&[disabled],
- //&[disabled]:hover {
- // color: @white;
- // background-color: fade(@button-error-color, 40%);
- // border-color: fade(@button-error-color, 40%);
- //}
- }
-
- &-background-ghost {
- background-color: transparent !important;
- border-width: 1px;
-
- &[disabled],
- &[disabled]:hover {
- color: fade(@white, 40%) !important;
- background-color: transparent !important;
- border-color: fade(@white, 40%) !important;
- }
- }
-
- &-dashed&-background-ghost,
- &-default&-background-ghost {
- color: @button-ghost-color;
- border-color: @button-ghost-color;
-
- &:hover,
- &:focus {
- color: @button-ghost-hover-color;
- border-color: @button-ghost-hover-color;
- }
-
- &:active {
- color: @button-ghost-active-color;
- border-color: @button-ghost-active-color;
- }
-
- &[disabled],
- &[disabled]:hover {
- color: fade(@white, 40%) !important;
- border-color: fade(@white, 40%) !important;
- }
- }
-
- &-background-ghost&-success:not(.ant-btn-link) {
- color: @button-success-color;
- background-color: transparent;
- border-color: @button-success-color;
- border-width: 1px;
-
- &:hover,
- &:focus {
- color: @button-success-hover-color !important;
- border-color: @button-success-hover-color;
- }
-
- &:active {
- color: @button-success-active-color;
- border-color: @button-success-active-color;
- }
- }
-
- &-background-ghost&-warning:not(.ant-btn-link) {
- color: @button-warn-color;
- background-color: transparent;
- border-color: @button-warn-color;
- border-width: 1px;
-
- &:hover,
- &:focus {
- color: @button-warn-hover-color !important;
- border-color: @button-warn-hover-color;
- }
-
- &:active {
- color: @button-warn-active-color;
- border-color: @button-warn-active-color;
- }
- }
-
- &-background-ghost&-error:not(.ant-btn-link) {
- color: @button-error-color;
- background-color: transparent;
- border-color: @button-error-color;
- border-width: 1px;
-
- &:hover,
- &:focus {
- color: @button-error-hover-color !important;
- border-color: @button-error-hover-color;
- }
-
- &:active {
- color: @button-error-active-color;
- border-color: @button-error-active-color;
- }
- }
-
- &-ghost.ant-btn-link:not([disabled="disabled"]) {
- color: @button-ghost-color;
-
- &:hover,
- &:focus {
- color: @button-ghost-hover-color;
- border-color: transparent;
- }
- }
-}
diff --git a/src/design/ant/index.less b/src/design/ant/index.less
deleted file mode 100644
index a4037519..00000000
--- a/src/design/ant/index.less
+++ /dev/null
@@ -1,67 +0,0 @@
-@import "./pagination.less";
-@import "./input.less";
-@import "./btn.less";
-
-.ant-image-preview-root {
- img {
- display: unset;
- }
-}
-
-span.anticon:not(.app-iconify) {
- vertical-align: 0.125em !important;
-}
-
-.ant-back-top {
- right: 20px;
- bottom: 20px;
-}
-
-.collapse-container__body {
- > .ant-descriptions {
- margin-left: 6px;
- }
-}
-
-.ant-image-preview-operations {
- background-color: rgb(0 0 0 / 30%);
-}
-
-.ant-popover {
- &-content {
- box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
- }
-}
-
-// =================================
-// ==============modal message======
-// =================================
-.modal-icon-warning {
- color: @warning-color !important;
-}
-
-.modal-icon-success {
- color: @success-color !important;
-}
-
-.modal-icon-error {
- color: @error-color !important;
-}
-
-.modal-icon-info {
- color: @primary-color !important;
-}
-
-.ant-checkbox-checked .ant-checkbox-inner::after,
-.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
- border-top: 0 !important;
- border-left: 0 !important;
-}
-
-.ant-form-item-control-input-content {
- > div {
- > div {
- max-width: 100%;
- }
- }
-}
diff --git a/src/design/ant/input.less b/src/design/ant/input.less
deleted file mode 100644
index 5fdabf1c..00000000
--- a/src/design/ant/input.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@import (reference) "../color.less";
-
-// input
-.ant-input {
- &-number,
- &-number-group-wrapper {
- width: 100% !important;
- min-width: 110px;
- max-width: 100%;
- }
-}
-
-.ant-input-affix-wrapper .ant-input-suffix {
- right: 9px;
-}
-
-.ant-input-clear-icon {
- margin-right: 5px;
-}
-
-.ant-input-affix-wrapper-textarea-with-clear-btn {
- padding: 0 !important;
-
- textarea.ant-input {
- padding: 4px;
- }
-}
diff --git a/src/design/ant/pagination.less b/src/design/ant/pagination.less
deleted file mode 100644
index 7c05a74d..00000000
--- a/src/design/ant/pagination.less
+++ /dev/null
@@ -1,96 +0,0 @@
-html[data-theme="dark"] {
- .ant-pagination {
- &.mini {
- .ant-pagination-prev,
- .ant-pagination-next,
- .ant-pagination-item {
- background-color: rgb(255 255 255 / 4%) !important;
-
- a {
- color: #8b949e !important;
- }
- }
-
- .ant-select-arrow {
- color: @text-color-secondary !important;
- }
-
- .ant-pagination-item-active {
- background-color: @primary-color !important;
- border: none;
- border-radius: none !important;
-
- a {
- color: @white !important;
- }
- }
- }
- }
-}
-
-.ant-pagination {
- &.mini {
- .ant-pagination-prev,
- .ant-pagination-next {
- font-size: 12px;
- color: @text-color-base;
- border: 1px solid;
- }
-
- .ant-pagination-prev:hover,
- .ant-pagination-next:hover,
- .ant-pagination-item:focus,
- .ant-pagination-item:hover {
- a {
- color: @primary-color;
- }
- }
-
- .ant-pagination-prev,
- .ant-pagination-next,
- .ant-pagination-item {
- margin: 0 4px !important;
- background-color: #f4f4f5 !important;
- border: none;
- border-radius: none !important;
-
- a {
- margin-top: 1px;
- color: #606266;
- }
-
- &:last-child {
- margin-right: 0 !important;
- }
- }
-
- .ant-pagination-item-active {
- background-color: @primary-color !important;
- border: none;
- border-radius: none !important;
-
- a {
- color: @white !important;
- }
- }
-
- .ant-pagination-options {
- margin-left: 12px;
- }
-
- .ant-pagination-options-quick-jumper input {
- height: 22px;
- margin: 0 6px;
- line-height: 22px;
- text-align: center;
- }
-
- .ant-select-arrow {
- color: @border-color-shallow-dark;
- }
- }
-
- &-disabled {
- display: none !important;
- }
-}
diff --git a/src/design/ant/table.less b/src/design/ant/table.less
deleted file mode 100644
index 2e3a8194..00000000
--- a/src/design/ant/table.less
+++ /dev/null
@@ -1,76 +0,0 @@
-@prefix-cls: ~"@{namespace}-basic-table";
-
-// fix table unnecessary scrollbar
-.@{prefix-cls} {
- .hide-scrollbar-y {
- .ant-spin-nested-loading {
- .ant-spin-container {
- .ant-table {
- .ant-table-content {
- .ant-table-scroll {
- .ant-table-hide-scrollbar {
- overflow-y: auto !important;
- }
-
- .ant-table-body {
- overflow-y: auto !important;
- }
- }
-
- .ant-table-fixed-right {
- .ant-table-body-outer {
- .ant-table-body-inner {
- overflow-y: auto !important;
- }
- }
- }
-
- .ant-table-fixed-left {
- .ant-table-body-outer {
- .ant-table-body-inner {
- overflow-y: auto !important;
- }
- }
- }
- }
- }
- }
- }
- }
-
- .hide-scrollbar-x {
- .ant-spin-nested-loading {
- .ant-spin-container {
- .ant-table {
- .ant-table-content {
- .ant-table-scroll {
- .ant-table-hide-scrollbar {
- //overflow-x: auto !important;
- }
-
- .ant-table-body {
- overflow: auto !important;
- }
- }
-
- .ant-table-fixed-right {
- .ant-table-body-outer {
- .ant-table-body-inner {
- overflow-x: auto !important;
- }
- }
- }
-
- .ant-table-fixed-left {
- .ant-table-body-outer {
- .ant-table-body-inner {
- overflow-x: auto !important;
- }
- }
- }
- }
- }
- }
- }
- }
-}
diff --git a/src/design/color.less b/src/design/color.less
index 9d2138c4..b8b125f1 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -10,10 +10,38 @@ html {
--sider-dark-lighten-bg-color: #273352;
}
+@font-size-base: 14;
+
@white: #fff;
+@black: #000;
+
@content-bg: #f4f7f9;
+@text-color: fade(@black, 85%);
+
+@text-color-secondary: fade(@black, 45%);
+
+@text-color-inverse: @white;
+
+@icon-color: inherit;
+
+@icon-color-hover: fade(@black, 75%);
+
+@component-background: #fff;
+
+@component-background-dark: fade(@black, 75%);
+
+@layout-body-background: #f0f2f5;
+
+@modal-mask-bg: fade(@black, 45%);
+
+@disabled-color: fade(#000, 25%);
+
+@background-color-light: hsv(0, 0, 98%);
+
+@item-hover-bg: #f5f5f5;
+
// :export {
// name: "less";
// mainColor: @mainColor;
@@ -24,6 +52,7 @@ html {
// =================================
// ==============border-color=======
// =================================
+@border-color-base: #fff;
// Dark-dark
@border-color-dark: #b6b7b9;
@@ -83,9 +112,6 @@ html {
// =================================
// ==============link============
// =================================
-@link-hover-color: @primary-color;
-@link-active-color: darken(@primary-color, 10%);
-
// =================================
// ==============Text color-=============
// =================================
@@ -107,32 +133,13 @@ html {
// ==============button=============
// =================================
-@button-primary-color: @primary-color;
-@button-primary-hover-color: lighten(@primary-color, 5%);
-@button-primary-active-color: darken(@primary-color, 5%);
-
@button-ghost-color: @white;
@button-ghost-hover-color: lighten(@white, 10%);
@button-ghost-hover-bg-color: #e1ebf6;
@button-ghost-active-color: darken(@white, 10%);
-@button-success-color: @success-color;
-@button-success-hover-color: lighten(@success-color, 10%);
-@button-success-active-color: darken(@success-color, 10%);
-
-@button-warn-color: @warning-color;
-@button-warn-hover-color: lighten(@warning-color, 10%);
-@button-warn-active-color: darken(@warning-color, 10%);
-
-@button-error-color: @error-color;
-@button-error-hover-color: lighten(@error-color, 10%);
-@button-error-active-color: darken(@error-color, 10%);
-
@button-cancel-color: @text-color-call-out;
+
@button-cancel-bg-color: @white;
@button-cancel-border-color: @border-color-shallow-dark;
-// Mouse over
-@button-cancel-hover-color: @primary-color;
-@button-cancel-hover-bg-color: @white;
-@button-cancel-hover-border-color: @primary-color;
diff --git a/src/design/index.less b/src/design/index.less
index c08b62a0..4b7b8fc6 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -1,7 +1,7 @@
@import "transition/index.less";
@import "var/index.less";
@import "public.less";
-@import "ant/index.less";
+// @import "ant/index.less";
@import "./theme.less";
@import "./entry.css";
diff --git a/src/design/public.less b/src/design/public.less
index 644bfab2..3e0c6bbf 100644
--- a/src/design/public.less
+++ b/src/design/public.less
@@ -45,7 +45,6 @@
z-index: 99999;
width: 100%;
height: 2px;
- background-color: @primary-color;
opacity: 0.75;
}
}
diff --git a/src/layouts/default/feature/index.vue b/src/layouts/default/feature/index.vue
index d34bc8cc..9d584508 100644
--- a/src/layouts/default/feature/index.vue
+++ b/src/layouts/default/feature/index.vue
@@ -1,30 +1,27 @@
<script lang="ts" setup>
+import { FloatButton } from 'ant-design-vue'
import { computed, unref } from 'vue'
-import { BackTop } from 'ant-design-vue'
-import { useRootSetting } from '@/hooks/setting/useRootSetting'
+import { SettingButtonPositionEnum } from '@/enums/appEnum'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
+import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStoreWithOut } from '@/store/modules/user'
-
-import { SettingButtonPositionEnum } from '@/enums/appEnum'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
-
import SessionTimeoutLogin from '@/views/base/login/SessionTimeoutLogin.vue'
defineOptions({ name: 'LayoutFeatures' })
-
const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/index.vue'))
-
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
-const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting()
+const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent }
+ = useRootSetting()
+
+const getTarget = () => document.body
const userStore = useUserStoreWithOut()
const { prefixCls } = useDesign('setting-drawer-feature')
const { getShowHeader } = useHeaderSetting()
-const getTarget = () => document.body
-
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)
const getIsFixedSettingDrawer = computed(() => {
@@ -42,31 +39,30 @@ const getIsFixedSettingDrawer = computed(() => {
<template>
<LayoutLockPage />
- <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+ <FloatButton.BackTop v-if="getUseOpenBackTop" :target="getTarget" />
<SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
<style lang="less">
-@prefix-cls: ~'@{namespace}-setting-drawer-feature';
-
-.@{prefix-cls} {
- position: absolute;
- top: 45%;
- right: 0;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 10px;
- color: @white;
- cursor: pointer;
- background-color: @primary-color;
- border-radius: 6px 0 0 6px;
-
- svg {
- width: 1em;
- height: 1em;
+ @prefix-cls: ~'@{namespace}-setting-drawer-feature';
+
+ .@{prefix-cls} {
+ position: absolute;
+ top: 45%;
+ right: 0;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+ color: @white;
+ cursor: pointer;
+ border-radius: 6px 0 0 6px;
+
+ svg {
+ width: 1em;
+ height: 1em;
+ }
}
-}
</style>
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index ef7e30f5..4a701fdd 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -163,10 +163,6 @@ function getIcon(route) {
a {
color: rgb(0 0 0 / 65%);
-
- &:hover {
- color: @primary-color;
- }
}
}
diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less
index 18620595..682867a8 100644
--- a/src/layouts/default/header/index.less
+++ b/src/layouts/default/header/index.less
@@ -3,6 +3,11 @@
@breadcrumb-prefix-cls: ~"@{namespace}-layout-breadcrumb";
@logo-prefix-cls: ~"@{namespace}-app-logo";
+.ant-layout .ant-layout-header {
+ height: 48px !important;
+ padding-inline: 10px;
+}
+
.@{header-prefix-cls} {
display: flex;
align-items: center;
@@ -120,7 +125,7 @@
}
.ant-badge-dot {
- top: 10px;
+ top: 14px;
right: 2px;
}
}
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
index 5ec9049b..306a26f9 100644
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -1,21 +1,20 @@
<script lang="ts" setup>
-import { computed, unref } from 'vue'
import { Layout } from 'ant-design-vue'
+import { computed, unref } from 'vue'
-import LayoutHeader from './header/index.vue'
import LayoutContent from './content/index.vue'
-import LayoutSideBar from './sider/index.vue'
+import LayoutHeader from './header/index.vue'
import LayoutMultipleHeader from './header/MultipleHeader.vue'
-import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
-
+import LayoutSideBar from './sider/index.vue'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+import { useAppInject } from '@/hooks/web/useAppInject'
import { useDesign } from '@/hooks/web/useDesign'
import { useLockPage } from '@/hooks/web/useLockPage'
-
-import { useAppInject } from '@/hooks/web/useAppInject'
+import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
defineOptions({ name: 'DefaultLayout' })
+
const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'))
const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'))
@@ -52,22 +51,17 @@ const layoutClass = computed(() => {
</template>
<style lang="less">
-@prefix-cls: ~'@{namespace}-default-layout';
+ @prefix-cls: ~'@{namespace}-default-layout';
-.@{prefix-cls} {
- display: flex;
- flex-direction: column;
- width: 100%;
- min-height: 100%;
- background-color: @content-bg;
-
- > .ant-layout {
+ .@{prefix-cls} {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
min-height: 100%;
- }
- &-main {
- width: 100%;
- margin-left: 1px;
+ &-main {
+ width: 100%;
+ margin-left: 1px;
+ }
}
-}
</style>
diff --git a/src/layouts/default/setting/components/ThemeColorPicker.vue b/src/layouts/default/setting/components/ThemeColorPicker.vue
index 5f90ea30..8b38fc46 100644
--- a/src/layouts/default/setting/components/ThemeColorPicker.vue
+++ b/src/layouts/default/setting/components/ThemeColorPicker.vue
@@ -66,8 +66,6 @@ function handleClick(color: string) {
}
&--active {
- border: 1px solid lighten(@primary-color, 10%);
-
svg {
display: inline-block;
margin: 0 0 3px 3px;
diff --git a/src/layouts/default/setting/components/TypePicker.vue b/src/layouts/default/setting/components/TypePicker.vue
index f590185c..7db4e48d 100644
--- a/src/layouts/default/setting/components/TypePicker.vue
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -152,7 +152,6 @@ const { prefixCls } = useDesign('setting-menu-type-picker')
&:hover,
&--active {
padding: 12px;
- border: 2px solid @primary-color;
&::before,
&::after {
diff --git a/src/layouts/default/sider/DragBar.vue b/src/layouts/default/sider/DragBar.vue
index 082ef962..d0088baf 100644
--- a/src/layouts/default/sider/DragBar.vue
+++ b/src/layouts/default/sider/DragBar.vue
@@ -52,7 +52,6 @@ const getClass = computed(() => {
}
&:hover {
- background-color: @primary-color;
box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
}
}
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
index d4e3f4e7..f6e23bf6 100644
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -103,7 +103,7 @@ const getTrigger = h(LayoutTrigger)
z-index: @layout-sider-fixed-z-index;
&--fixed {
- position: fixed;
+ position: fixed !important;
top: 0;
left: 0;
height: 100%;
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index bf88b2e2..9bc87b4a 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -331,7 +331,7 @@ export default defineComponent({
position: fixed;
top: 0;
left: 0;
- z-index: @layout-mix-sider-fixed-z-index;
+ // z-index: @layout-mix-sider-fixed-z-index;
height: 100%;
overflow: hidden;
background-color: @sider-dark-bg-color;
@@ -372,7 +372,6 @@ export default defineComponent({
color: rgb(0 0 0 / 65%);
&--active {
- color: @primary-color;
background-color: unset;
}
}
@@ -458,7 +457,6 @@ export default defineComponent({
width: 3px;
height: 100%;
content: '';
- background-color: @primary-color;
}
}
}
@@ -511,7 +509,6 @@ export default defineComponent({
height: @header-height;
// margin-left: -6px;
font-size: 18px;
- color: @primary-color;
border-bottom: 1px solid rgb(238 238 238);
opacity: 0;
transition: unset;
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index 6283709b..db691ed0 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -1,6 +1,7 @@
@prefix-cls: ~"@{namespace}-multiple-tabs";
html[data-theme="dark"] {
+ // background-color: @component-background-dark;
.@{prefix-cls} {
.ant-tabs-tab {
border-bottom: none !important;
@@ -18,6 +19,7 @@ html[data-theme="dark"] {
}
html[data-theme="light"] {
+ background-color: @component-background;
.@{prefix-cls} {
.ant-tabs-tab:not(.ant-tabs-tab-active) {
border: none !important;
@@ -34,7 +36,6 @@ html[data-theme="light"] {
z-index: 10;
height: @multiple-height;
line-height: @multiple-height;
- background-color: @component-background;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
.ant-tabs-small {
@@ -46,7 +47,7 @@ html[data-theme="light"] {
height: @multiple-height;
padding-left: 10px;
margin: 0;
- background-color: @component-background;
+ // background-color: @component-background;
border: 0;
box-shadow: none;
@@ -62,17 +63,17 @@ html[data-theme="light"] {
padding: 0 16px;
margin: 0 -14px 0 0 !important;
line-height: @multiple-height;
- color: @text-color-base;
- background-color: @component-background;
+ // color: @text-color-base;
+ // background-color: @component-background;
border-radius: 8px 8px 0 0;
/* stylelint-disable-next-line function-url-quotes */
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
transition: padding 0.3s;
mask-size: 100% 100%;
- .ant-tabs-tab-btn {
- color: @text-color-base;
- }
+ // .ant-tabs-tab-btn {
+ // color: @text-color-base;
+ // }
&:hover {
z-index: 2;
@@ -140,18 +141,9 @@ html[data-theme="light"] {
z-index: 3;
padding: 0 16px;
font-weight: inherit;
- color: @primary-color !important;
background: #d4ebff;
border: 0;
- span {
- color: @primary-color !important;
- }
-
- .ant-tabs-tab-btn {
- color: @primary-color;
- }
-
.ant-tabs-tab-remove .anticon-close {
opacity: 1;
@@ -162,7 +154,6 @@ html[data-theme="light"] {
svg {
width: inherit;
- fill: @primary-color;
}
}
}
@@ -210,7 +201,7 @@ html[data-theme="light"] {
width: 36px;
height: @multiple-height;
line-height: @multiple-height;
- color: @text-color-secondary;
+ // color: @text-color-secondary;
text-align: center;
cursor: pointer;
border-left: 1px solid @border-color-base;
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
index f3a50622..c9f3325f 100644
--- a/src/logics/theme/dark.ts
+++ b/src/logics/theme/dark.ts
@@ -1,23 +1,12 @@
-import { darkCssIsReady, loadDarkThemeCss } from 'vite-vue-plugin-theme/es/client'
-import { addClass, hasClass, removeClass } from '@/utils/domUtils'
+import { useDark, useToggle } from '@vueuse/core'
-export async function updateDarkTheme(mode: string | null = 'light') {
- const htmlRoot = document.getElementById('htmlRoot')
- if (!htmlRoot)
- return
+const isDark = useDark({
+ attribute: 'data-theme',
+ valueDark: 'dark',
+ valueLight: 'light',
+})
+const toggleDark = useToggle(isDark)
- const hasDarkClass = hasClass(htmlRoot, 'dark')
- if (mode === 'dark') {
- if (import.meta.env.PROD && !darkCssIsReady)
- await loadDarkThemeCss()
-
- htmlRoot.setAttribute('data-theme', 'dark')
- if (!hasDarkClass)
- addClass(htmlRoot, 'dark')
- }
- else {
- htmlRoot.setAttribute('data-theme', 'light')
- if (hasDarkClass)
- removeClass(htmlRoot, 'dark')
- }
+export function updateDarkTheme(mode: string | null = 'light') {
+ toggleDark(mode === 'dark')
}
diff --git a/src/logics/theme/index.ts b/src/logics/theme/index.ts
index dfd3a3c1..d8e80b77 100644
--- a/src/logics/theme/index.ts
+++ b/src/logics/theme/index.ts
@@ -1,16 +1 @@
-import { replaceStyleVariables } from 'vite-vue-plugin-theme/es/client'
-import { mixDarken, mixLighten, tinycolor } from 'vite-vue-plugin-theme/es/colorUtils'
-import { generateColors, getThemeColors } from '../../../build/config/themeConfig'
-
-export async function changeTheme(color: string) {
- const colors = generateColors({
- mixDarken,
- mixLighten,
- tinycolor,
- color,
- })
-
- return await replaceStyleVariables({
- colorVariables: [...getThemeColors(color), ...colors],
- })
-}
+export async function changeTheme(_color: string) {}
diff --git a/src/main.ts b/src/main.ts
index bc0e97ce..bcb2c125 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,11 @@
import 'uno.css'
-import '@/design/index.less'
+import 'ant-design-vue/dist/reset.css'
+import './design/index.less'
// Register icon sprite
import 'virtual:svg-icons-register'
import { createApp } from 'vue'
import App from './App.vue'
-import { isDevMode } from './utils/env'
import { initAppConfigStore } from '@/logics/initAppConfig'
import { setupErrorHandle } from '@/logics/error-handle'
import { router, setupRouter } from '@/router'
@@ -17,10 +17,6 @@ import { registerGlobComp } from '@/components/registerGlobComp'
import '@/utils/tongji'
-if (isDevMode())
- import('ant-design-vue/dist/antd.less')
-// 百度统计
-
async function bootstrap() {
const app = createApp(App)
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 9b682502..7e301697 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,4 +1,7 @@
import { defineStore } from 'pinia'
+import { theme as antdTheme } from 'ant-design-vue/es'
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context'
+import { reactive } from 'vue'
import type { AppSizeType, HeaderSetting, MenuSetting, MultiTabsSetting, ProjectConfig, TransitionSetting } from '@/types/config'
import type { BeforeMiniState } from '@/types/store'
@@ -13,6 +16,7 @@ import { deepMerge } from '@/utils'
interface AppState {
darkMode?: ThemeEnum
+ themeConfig: ThemeConfig
// Page loading status
pageLoading: boolean
// project config
@@ -25,6 +29,13 @@ let timeId: TimeoutHandle
export const useAppStore = defineStore('app', {
state: (): AppState => ({
darkMode: undefined,
+ themeConfig: {
+ algorithm: antdTheme.defaultAlgorithm,
+ token: {
+ colorBgContainer: '#fff',
+ },
+ components: {},
+ },
pageLoading: false,
projectConfig: Persistent.getLocal(PROJ_CFG_KEY),
beforeMiniInfo: {},
@@ -69,8 +80,38 @@ export const useAppStore = defineStore('app', {
setDarkMode(mode: ThemeEnum): void {
this.darkMode = mode
+ console.info(mode)
+ this.setThemeConfig()
localStorage.setItem(APP_DARK_MODE_KEY_, mode)
},
+ setThemeConfig(color?: string): void {
+ console.info(this.darkMode)
+ let themeConfig = reactive<ThemeConfig>({
+ algorithm: antdTheme.defaultAlgorithm,
+ token: {
+ colorBgContainer: '#fff',
+ colorPrimary: color || (this.projectConfig
+ ? this.projectConfig.themeColor
+ : '#1890ff'),
+ },
+ components: {},
+ })
+
+ if (this.darkMode === 'dark') {
+ themeConfig = {
+ algorithm: antdTheme.darkAlgorithm,
+ token: {
+ colorBgContainer: 'rgb(36, 37, 37)',
+ colorPrimary: color || (this.projectConfig
+ ? this.projectConfig.themeColor
+ : '#1890ff'),
+ },
+ components: {},
+ }
+ }
+ console.info(themeConfig)
+ this.themeConfig = themeConfig
+ },
setBeforeMiniInfo(state: BeforeMiniState): void {
this.beforeMiniInfo = state
diff --git a/src/views/base/lock/LockPage.vue b/src/views/base/lock/LockPage.vue
index 981eff84..0f584106 100644
--- a/src/views/base/lock/LockPage.vue
+++ b/src/views/base/lock/LockPage.vue
@@ -211,7 +211,6 @@ function handleShowForm(show = false) {
&__err-msg {
display: inline-block;
margin-top: 10px;
- color: @error-color;
}
&__footer {
diff --git a/src/views/base/login/Login.vue b/src/views/base/login/Login.vue
index 49f3d9de..364687e6 100644
--- a/src/views/base/login/Login.vue
+++ b/src/views/base/login/Login.vue
@@ -174,10 +174,6 @@ html[data-theme='dark'] {
font-size: 22px;
color: #888;
cursor: pointer;
-
- &:hover {
- color: @primary-color;
- }
}
}
diff --git a/src/views/base/login/sso.vue b/src/views/base/login/sso.vue
index 5b0e121f..a707333c 100644
--- a/src/views/base/login/sso.vue
+++ b/src/views/base/login/sso.vue
@@ -166,10 +166,6 @@ html[data-theme='dark'] {
font-size: 22px;
color: #888;
cursor: pointer;
-
- &:hover {
- color: @primary-color;
- }
}
}