From 509541d11e14223da2e01e2f467b9d3344a1ec53 Mon Sep 17 00:00:00 2001 From: zhang Date: Sat, 4 Nov 2023 09:21:18 +0800 Subject: [PATCH] style(theme): resolve ts type error and perf themeColor selected (#3237) * perf(useTree): resolve ts type error * perf(projectSetting): themeColor selected * perf(dark): fix mode dark component-background-color var is not work --- src/components/Tree/src/types/tree.ts | 4 +- src/design/dark.less | 110 ----------------- src/design/index.less | 1 - src/design/theme.less | 113 +++++++++++++++++- src/settings/projectSetting.ts | 10 +- .../demo/page/account/center/Article.vue | 4 +- src/views/demo/page/result/fail/index.vue | 2 +- src/views/demo/page/result/success/index.vue | 2 +- 8 files changed, 124 insertions(+), 122 deletions(-) delete mode 100644 src/design/dark.less diff --git a/src/components/Tree/src/types/tree.ts b/src/components/Tree/src/types/tree.ts index ff7cf0435..53f5b5eea 100644 --- a/src/components/Tree/src/types/tree.ts +++ b/src/components/Tree/src/types/tree.ts @@ -165,7 +165,7 @@ export interface TreeActionItem { export interface InsertNodeParams { parentKey: string | null; - node: TreeDataItem; + node?: TreeDataItem; list?: TreeDataItem[]; push?: 'push' | 'unshift'; } @@ -182,7 +182,7 @@ export interface TreeActionType { filterByLevel: (level: number) => void; insertNodeByKey: (opt: InsertNodeParams) => void; insertNodesByKey: (opt: InsertNodeParams) => void; - deleteNodeByKey: (key: string) => void; + deleteNodeByKey: (key: string, list?: TreeDataItem[]) => void; updateNodeByKey: (key: string, node: Omit) => void; setSearchValue: (value: string) => void; getSearchValue: () => string; diff --git a/src/design/dark.less b/src/design/dark.less deleted file mode 100644 index 1c66c8e59..000000000 --- a/src/design/dark.less +++ /dev/null @@ -1,110 +0,0 @@ -[data-theme='dark'] { - body { - background-color: #000; - color: @text-color-base; - } - - .ant-btn { - &[disabled], - &[disabled]:hover, - &[disabled]:focus, - &[disabled]:active { - border-color: #303030; - background: rgb(255 255 255 / 8%); - color: rgb(255 255 255 / 30%); - } - - &-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; - } - } - - &:not( - .ant-btn-link, - .is-disabled, - .ant-btn-primary, - .ant-btn-success, - .ant-btn-warning, - .ant-btn-error, - .ant-btn-dangerous - ) { - background: transparent; - color: @text-color-base; - - &:hover { - color: @button-primary-hover-color; - } - } - - &-dangerous.ant-btn-primary { - &:focus { - background: @error-color !important; - } - } - - &-default.ant-btn-dangerous { - border-color: @error-color; - background: transparent !important; - color: @error-color; - - &:hover, - &:focus { - border-color: @button-error-hover-color !important; - color: @button-error-hover-color !important; - } - } - - &-default:not(.ant-btn-background-ghost) { - border-color: #303030; - - &:hover, - &:focus { - border-color: @button-cancel-hover-color; - color: @button-cancel-hover-color; - } - } - - &-default.is-disabled { - &:hover, - &:focus { - border-color: #303030; - color: rgb(255 255 255 / 30%); - } - } - - &-success:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) { - &:hover, - &:focus, - &:active { - border-color: @button-success-active-color !important; - background-color: @button-success-active-color !important; - color: @white !important; - } - } - - &-warning:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) { - &:hover, - &:focus, - &:active { - border-color: @button-warn-active-color !important; - background-color: @button-warn-active-color !important; - color: @white !important; - } - } - - &-error:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) { - &:hover, - &:focus, - &:active { - border-color: @button-error-active-color !important; - background-color: @button-error-active-color !important; - color: @white !important; - } - } - } -} diff --git a/src/design/index.less b/src/design/index.less index 65307ebc7..a7c056bfa 100644 --- a/src/design/index.less +++ b/src/design/index.less @@ -4,7 +4,6 @@ @import 'ant/index.less'; @import './theme.less'; @import './entry.css'; -@import './dark.less'; input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset !important; diff --git a/src/design/theme.less b/src/design/theme.less index 22a139e0e..d17d86839 100644 --- a/src/design/theme.less +++ b/src/design/theme.less @@ -1,5 +1,5 @@ .bg-white { - background-color: @component-background !important; + background-color: var(--component-background-color) !important; } html[data-theme='light'] { @@ -26,3 +26,114 @@ html[data-theme='light'] { background-color: @layout-body-background !important; } } + +[data-theme='dark'] { + body { + background-color: #000; + color: @text-color-base; + } + + .ant-btn { + &[disabled], + &[disabled]:hover, + &[disabled]:focus, + &[disabled]:active { + border-color: #303030; + background: rgb(255 255 255 / 8%); + color: rgb(255 255 255 / 30%); + } + + &-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; + } + } + + &:not( + .ant-btn-link, + .is-disabled, + .ant-btn-primary, + .ant-btn-success, + .ant-btn-warning, + .ant-btn-error, + .ant-btn-dangerous + ) { + background: transparent; + color: @text-color-base; + + &:hover { + color: @button-primary-hover-color; + } + } + + &-dangerous.ant-btn-primary { + &:focus { + background: @error-color !important; + } + } + + &-default.ant-btn-dangerous { + border-color: @error-color; + background: transparent !important; + color: @error-color; + + &:hover, + &:focus { + border-color: @button-error-hover-color !important; + color: @button-error-hover-color !important; + } + } + + &-default:not(.ant-btn-background-ghost) { + border-color: #303030; + + &:hover, + &:focus { + border-color: @button-cancel-hover-color; + color: @button-cancel-hover-color; + } + } + + &-default.is-disabled { + &:hover, + &:focus { + border-color: #303030; + color: rgb(255 255 255 / 30%); + } + } + + &-success:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) { + &:hover, + &:focus, + &:active { + border-color: @button-success-active-color !important; + background-color: @button-success-active-color !important; + color: @white !important; + } + } + + &-warning:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) { + &:hover, + &:focus, + &:active { + border-color: @button-warn-active-color !important; + background-color: @button-warn-active-color !important; + color: @white !important; + } + } + + &-error:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) { + &:hover, + &:focus, + &:active { + border-color: @button-error-active-color !important; + background-color: @button-error-active-color !important; + color: @white !important; + } + } + } +} diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index 65fc69842..26e70fa1c 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -9,9 +9,11 @@ import { SettingButtonPositionEnum, SessionTimeoutProcessingEnum, } from '/@/enums/appEnum'; -import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './designSetting'; - -const primaryColor = '#0960bd'; +import { + SIDE_BAR_BG_COLOR_LIST, + HEADER_PRESET_BG_COLOR_LIST, + APP_PRESET_COLOR_LIST, +} from './designSetting'; // ! You need to clear the browser cache after the change const setting: ProjectConfig = { @@ -34,7 +36,7 @@ const setting: ProjectConfig = { sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP, // color - themeColor: primaryColor, + themeColor: APP_PRESET_COLOR_LIST[0], // Website gray mode, open for possible mourning dates grayMode: false, diff --git a/src/views/demo/page/account/center/Article.vue b/src/views/demo/page/account/center/Article.vue index 6cd68c475..92ffc2fcb 100644 --- a/src/views/demo/page/account/center/Article.vue +++ b/src/views/demo/page/account/center/Article.vue @@ -70,13 +70,13 @@ } &__content { - color: rgb(0 0 0 / 65%); + color: @text-color-secondary; } &__action { display: inline-block; padding: 0 16px; - color: rgb(0 0 0 / 45%); + color: @text-color-secondary; &:nth-child(1), &:nth-child(2) { diff --git a/src/views/demo/page/result/fail/index.vue b/src/views/demo/page/result/fail/index.vue index f4df10d96..5b04d6987 100644 --- a/src/views/demo/page/result/fail/index.vue +++ b/src/views/demo/page/result/fail/index.vue @@ -39,7 +39,7 @@ &__content { padding: 24px 40px; - background-color: @background-color-light; + background-color: @app-content-background; &-title { margin-bottom: 16px; diff --git a/src/views/demo/page/result/success/index.vue b/src/views/demo/page/result/success/index.vue index 86d884d72..a4a7840b5 100644 --- a/src/views/demo/page/result/success/index.vue +++ b/src/views/demo/page/result/success/index.vue @@ -56,7 +56,7 @@ &__content { padding: 24px 40px; - background-color: @background-color-light; + background-color: @app-content-background; } }