xingyu
2 years ago
52 changed files with 186 additions and 1213 deletions
@ -1,36 +1,18 @@ |
|||||||
import { resolve } from 'node:path' |
import { resolve } from 'node:path' |
||||||
import { getThemeVariables } from 'ant-design-vue/dist/theme' |
|
||||||
import { generateAntColors, primaryColor } from '../config/themeConfig' |
import { generateAntColors, primaryColor } from '../config/themeConfig' |
||||||
|
|
||||||
/** |
/** |
||||||
* less global variable |
* less global variable |
||||||
*/ |
*/ |
||||||
export function generateModifyVars(dark = false) { |
export function generateModifyVars() { |
||||||
const palettes = generateAntColors(primaryColor) |
const palettes = generateAntColors(primaryColor) |
||||||
const primary = palettes[5] |
|
||||||
|
|
||||||
const primaryColorObj: Record<string, string> = {} |
const primaryColorObj: Record<string, string> = {} |
||||||
|
|
||||||
for (let index = 0; index < 10; index++) |
for (let index = 0; index < 10; index++) |
||||||
primaryColorObj[`primary-${index + 1}`] = palettes[index] |
primaryColorObj[`primary-${index + 1}`] = palettes[index] |
||||||
|
|
||||||
const modifyVars = getThemeVariables({ dark }) |
|
||||||
return { |
return { |
||||||
...modifyVars, |
hack: `true; @import (reference) "${resolve('src/design/config.less')}";`, |
||||||
// 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
|
|
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -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[] |
|
||||||
} |
|
||||||
@ -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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,23 +1,12 @@ |
|||||||
import { darkCssIsReady, loadDarkThemeCss } from 'vite-vue-plugin-theme/es/client' |
import { useDark, useToggle } from '@vueuse/core' |
||||||
import { addClass, hasClass, removeClass } from '@/utils/domUtils' |
|
||||||
|
|
||||||
export async function updateDarkTheme(mode: string | null = 'light') { |
const isDark = useDark({ |
||||||
const htmlRoot = document.getElementById('htmlRoot') |
attribute: 'data-theme', |
||||||
if (!htmlRoot) |
valueDark: 'dark', |
||||||
return |
valueLight: 'light', |
||||||
|
}) |
||||||
|
const toggleDark = useToggle(isDark) |
||||||
|
|
||||||
const hasDarkClass = hasClass(htmlRoot, 'dark') |
export function updateDarkTheme(mode: string | null = 'light') { |
||||||
if (mode === 'dark') { |
toggleDark(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') |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,16 +1 @@ |
|||||||
import { replaceStyleVariables } from 'vite-vue-plugin-theme/es/client' |
export async function changeTheme(_color: string) {} |
||||||
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], |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|||||||
Reference in new issue