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; - } } }