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

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

src/design/dark.less

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

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;

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

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,

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

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;

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