wip: antdv 4.0
xingyu
parent
0b4ab70603
commit
320c6ee043
|
|
@ -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')}";`,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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[]
|
||||
}
|
||||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
171
pnpm-lock.yaml
171
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}
|
||||
|
|
|
|||
14
src/App.vue
14
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>
|
||||
|
|
|
|||
|
|
@ -61,10 +61,6 @@ function goHome() {
|
|||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&.light &__title {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&.dark &__title {
|
||||
color: @white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -235,8 +235,6 @@ function handleClose() {
|
|||
|
||||
&--active {
|
||||
color: #fff;
|
||||
background-color: @primary-color;
|
||||
|
||||
.@{prefix-cls}-list__item-enter {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,10 +99,6 @@ export default defineComponent({
|
|||
color: @text-color-help-dark;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,6 @@ const getClass = computed(() => [
|
|||
height: 16px;
|
||||
margin-right: 4px;
|
||||
content: '';
|
||||
background-color: @primary-color;
|
||||
}
|
||||
|
||||
&-help {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
> * {
|
||||
|
|
|
|||
|
|
@ -51,10 +51,6 @@ function handleClose() {
|
|||
&__back {
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__twrap {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,10 +124,6 @@ export default defineComponent({
|
|||
color: #ccc;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
> span {
|
||||
padding-left: 2px;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -152,9 +152,9 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
&-content-bg {
|
||||
background-color: @component-background;
|
||||
}
|
||||
// &-content-bg {
|
||||
// background-color: @component-background;
|
||||
// }
|
||||
|
||||
&--dense {
|
||||
.@{prefix-cls}-content {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -329,7 +329,7 @@ emit('register', tableAction, formActions)
|
|||
|
||||
&-row__striped {
|
||||
td {
|
||||
background-color: @app-content-background;
|
||||
// background-color: @app-content-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
z-index: 99999;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: @primary-color;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||
|
||||
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 { 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,15 +39,15 @@ 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: ~'@{namespace}-setting-drawer-feature';
|
||||
|
||||
.@{prefix-cls} {
|
||||
.@{prefix-cls} {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: 0;
|
||||
|
|
@ -61,12 +58,11 @@ const getIsFixedSettingDrawer = computed(() => {
|
|||
padding: 10px;
|
||||
color: @white;
|
||||
cursor: pointer;
|
||||
background-color: @primary-color;
|
||||
border-radius: 6px 0 0 6px;
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -163,10 +163,6 @@ function getIcon(route) {
|
|||
|
||||
a {
|
||||
color: rgb(0 0 0 / 65%);
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} {
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: @content-bg;
|
||||
|
||||
> .ant-layout {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
&-main {
|
||||
width: 100%;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -152,7 +152,6 @@ const { prefixCls } = useDesign('setting-menu-type-picker')
|
|||
&:hover,
|
||||
&--active {
|
||||
padding: 12px;
|
||||
border: 2px solid @primary-color;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ const getClass = computed(() => {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @primary-color;
|
||||
box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@ function handleShowForm(show = false) {
|
|||
&__err-msg {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
|
|
|||
|
|
@ -174,10 +174,6 @@ html[data-theme='dark'] {
|
|||
font-size: 22px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -166,10 +166,6 @@ html[data-theme='dark'] {
|
|||
font-size: 22px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue