github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 10:33:50 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

style(theme): resolve ts type error and perf themeColor selected (#3237)

Browse Source 
* perf(useTree): resolve ts type error

* perf(projectSetting): themeColor selected

* perf(dark): fix mode dark component-background-color var is not work
This commit is contained in:
zhang 2023-11-04 09:21:18 +08:00 committed by GitHub
parent da1f177284
commit 509541d11e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 124 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Tree/src/types/tree.ts
View File

@ -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<TreeDataItem, 'key'>) => void;
setSearchValue: (value: string) => void;
getSearchValue: () => string;

110
src/design/dark.less
View File

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

1
src/design/index.less
View File

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

113
src/design/theme.less
View File

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

10
src/settings/projectSetting.ts
View File

@ -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,

4
src/views/demo/page/account/center/Article.vue
View File

@ -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) {

2
src/views/demo/page/result/fail/index.vue
View File

@ -39,7 +39,7 @@
&__content {
padding: 24px 40px;
background-color: @background-color-light;
background-color: @app-content-background;
&-title {
margin-bottom: 16px;

2
src/views/demo/page/result/success/index.vue
View File

@ -56,7 +56,7 @@
&__content {
padding: 24px 40px;
background-color: @background-color-light;
background-color: @app-content-background;
}
}
</style>