update vite to 4.x

package.json

@@ -79,7 +79,7 @@
     "unocss": "^0.33.5",
     "unplugin-auto-import": "^0.11.2",
     "unplugin-vue-components": "^0.22.8",
-    "vite": "^3.1.8",
+    "vite": "^4.0.2",
     "vite-plugin-mkcert": "^1.7.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",

src/plugins/vite-plugin-setup-extend/index.ts

@@ -2,7 +2,6 @@ import { parse } from '@vue/compiler-sfc'
 import { render } from 'ejs'
 import type { Plugin } from 'vite'
 export default ({ inject }): Plugin => {
-  // let viteConfig
   return {
     name: 'vite-plugin-setup-extend',
     enforce: 'pre',

src/theme/base/custom/ct-css-vars.scss

@@ -0,0 +1,67 @@
+html.base-theme {
+  /*element-plus section */
+  --el-menu-active-color: #409eff;
+  --el-menu-text-color: #bfcbd9;
+  --el-menu-hover-text-color: var(--el-color-primary);
+  --el-menu-bg-color: #304156;
+  --el-menu-hover-bg-color: #263445;
+  --el-menu-item-height: 56px;
+  --el-menu-border-color: none;
+  /*layout section*/
+  //layout
+  --layout-border-left-color: #ddd;
+  //Breadcrumb
+  --breadcrumb-no-redirect: #97a8be;
+  //Hamburger
+  --hamburger-color: #2b2f3a;
+  --hamburger-width: 20px;
+  --hamburger-height: 20px;
+  //Sidebar
+  --sidebar-el-icon-size: 20px;
+  --sidebar-logo-background: #2b2f3a;
+  --sidebar-logo-color: #ff9901;
+  --sidebar-logo-width: 32px;
+  --sidebar-logo-height: 32px;
+  --sidebar-logo-title-color: #fff;
+  --side-bar-width: 210px;
+  --side-bar-border-right-color: '#ddd';
+  //TagsView
+  --tags-view-background: #fff;
+  --tags-view-border-bottom-color: #d8dce5;
+  --tags-view-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  --tags-view-item-background: #fff;
+  --tags-view-item-border-color: #d8dce5;
+  --tags-view-item-color: #495060;
+  --tag-view-height: 32px;
+  --tags-view-item-active-background: #42b983;
+  --tags-view-item-active-color: #fff;
+  --tags-view-item-active-border-color: #42b983;
+  --tags-view-contextmenu-background: #fff;
+  --tags-view-contextmenu-color: #333;
+  --tags-view-contextmenu-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  --tags-view-contextmenu-hover-background: #eee;
+  //close-icon
+  --tags-view-close-icon-hover-background: #b4bccc;
+  --tags-view-close-icon-hover-color: #fff;
+  //AppMain.vue
+  --app-main-padding: 10px;
+  --app-main-background: #fff;
+  //Navbar.vue
+  --nav-bar-height: 50px;
+  --nav-bar-background: #fff;
+  --nav-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  --nav-bar-right-menu-background: #fff;
+
+  //transition 动画
+  //侧边栏切换动画时长
+  --sideBar-switch-duration: 0.2s;
+  //logo切换动画时长
+  --logo-switch-duration: 1s;
+  //页面动画时长
+  --page-transform-duration: 0.2s;
+  //面包屑导航动画时长
+  --breadcrumb-change-duration: 0.2s;
+
+  //进度条颜色
+  --pregress-bar-color: #409eff;
+}

src/theme/base/element-plus/button.scss

@@ -0,0 +1,122 @@
+html.base-theme {
+  .at-button-low {
+    --el-button-text-color: #262626;
+    --el-button-bg-color: #ffffff;
+    --el-button-border-color: #d9d9d9;
+    --el-button-outline-color: #d9d9d9;
+
+    --el-button-hover-text-color: #c72210;
+    --el-button-hover-link-text-color: #c72210;
+    --el-button-hover-bg-color: #ffece6;
+    --el-button-hover-border-color: transparent;
+
+    --el-button-active-color: #a8150a;
+    --el-button-active-bg-color: #a8150a;
+    --el-button-active-border-color: transparent;
+
+    --el-button-disabled-text-color: #a6a6a6;
+    --el-button-disabled-bg-color: #ffece6;
+    --el-button-disabled-border-color: #c72210;
+    //loading
+    --el-button-loading-text-color: #c72210;
+    --el-button-loading-bg-color: #ffece6;
+    --el-button-loading-border-color: #c72210;
+  }
+
+  .at-button-middle {
+    --el-button-text-color: #c72210;
+    --el-button-bg-color: #ffece6;
+    --el-button-border-color: #c72210;
+    --el-button-outline-color: #c72210;
+
+    --el-button-hover-text-color: #ffffff;
+    --el-button-hover-link-text-color: #ffffff;
+    --el-button-hover-bg-color: #c72210;
+    --el-button-hover-border-color: #c72210;
+
+    --el-button-active-color: #ffffff;
+    --el-button-active-bg-color: #a8150a;
+    --el-button-active-border-color: #a8150a;
+
+    --el-button-disabled-text-color: #a6a6a6;
+    --el-button-disabled-bg-color: #ffffff;
+    --el-button-disabled-border-color: #d9d9d9;
+
+    //loading
+    --el-button-loading-text-color: #c72210;
+    --el-button-loading-bg-color: #ffece6;
+    --el-button-loading-border-color: #c72210;
+  }
+
+  .at-button-height {
+    --el-button-text-color: #ffffff;
+    --el-button-bg-color: #c72210;
+    --el-button-border-color: transparent;
+    --el-button-outline-color: transparent;
+
+    --el-button-hover-text-color: #ffffff;
+    --el-button-hover-link-text-color: #ffffff;
+    --el-button-hover-bg-color: #dd715b;
+    --el-button-hover-border-color: #c72210;
+
+    --el-button-active-color: #ffffff;
+    --el-button-active-bg-color: #a8150a;
+    --el-button-active-border-color: transparent;
+
+    --el-button-disabled-text-color: #a6a6a6;
+    --el-button-disabled-bg-color: #f5f5f5;
+    --el-button-disabled-border-color: transparent;
+
+    //loading
+    --el-button-loading-text-color: #ffffff;
+    --el-button-loading-bg-color: #c72210;
+    --el-button-loading-border-color: transparent;
+  }
+
+  .at-button-text {
+    --el-button-text-color: #477ef5;
+    --el-fill-color-light: transparent;
+    --el-fill-color: transparent;
+
+    --el-button-hover-text-color: #86b2f9;
+
+    --el-button-active-color: #2c59cb;
+
+    --el-button-disabled-text-color: #a6a6a6;
+
+    //loading
+    --el-button-loading-text-color: #477ef5;
+  }
+
+  .el-button {
+    //default
+    --el-button-size: 36px;
+    height: var(--el-button-size);
+    padding: 8px 30px;
+    font-size: 14px;
+    //loading
+    .is-loading {
+      color: var(--el-button-loading-text-color);
+      background-color: var(--el-button-loading-bg-color);
+      border-color: var(--el-button-loading-border-color);
+    }
+  }
+
+  .el-button--small {
+    --el-button-size: 27px;
+    height: var(--el-button-size);
+    padding: 5px 24px;
+    font-size: 12px;
+  }
+
+  .el-button--large {
+    --el-button-size: 40px;
+    height: var(--el-button-size);
+    padding: 10px 30px;
+    font-size: 14px;
+  }
+
+  .el-button + .el-button {
+    margin-left: 12px;
+  }
+}

src/theme/base/element-plus/checkbox.scss

@@ -0,0 +1,27 @@
+html.china-red {
+  .el-checkbox {
+    --el-checkbox-font-size: 14px;
+    --el-checkbox-font-weight: var(--el-font-weight-primary);
+    --el-checkbox-text-color: #262626;
+    --el-checkbox-input-height: 14px;
+    --el-checkbox-input-width: 14px;
+    --el-checkbox-border-radius: var(--el-border-radius-small);
+    --el-checkbox-bg-color: var(--el-fill-color-blank);
+    --el-checkbox-input-border: var(--el-border);
+
+    //disabled
+    --el-checkbox-disabled-border-color: var(--el-border-color);
+    --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
+    --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
+    --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
+    --el-checkbox-disabled-checked-input-border-color: var(--el-border-color);
+    --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
+
+    //check
+    --el-checkbox-checked-text-color: #262626;
+    --el-checkbox-checked-input-border-color: transparent;
+    --el-checkbox-checked-bg-color: #c72210;
+    --el-checkbox-checked-icon-color: #ffffff;
+    --el-checkbox-input-border-color-hover: #c72210;
+  }
+}

src/theme/base/element-plus/css-vars.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+@use './var' as *;
+@use '../../mixins/var'  as *;
+@use '../../mixins/mixins'  as *;
+
+html.china-red {
+  color-scheme: china-red;
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($colors, $type);
+  }
+
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+  //--el-color-primary: #c72210;
+}

src/theme/base/element-plus/form.scss

@@ -0,0 +1,20 @@
+html.china-red {
+  //date
+  .el-date-range-picker {
+    --el-datepicker-text-color: var(--el-text-color-regular);
+    --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+    --el-datepicker-header-text-color: var(--el-text-color-regular);
+    --el-datepicker-icon-color: var(--el-text-color-primary);
+    --el-datepicker-border-color: var(--el-disabled-border-color);
+    --el-datepicker-inner-border-color: var(--el-border-color-light);
+    --el-datepicker-inrange-bg-color: #ffece6;
+    --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light);
+    --el-datepicker-active-color: var(--el-color-primary);
+    --el-datepicker-hover-text-color: var(--el-color-primary);
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: #ffece6;
+  }
+}

src/theme/base/element-plus/pagination.scss

@@ -0,0 +1,30 @@
+html.china-red {
+  .el-pagination {
+    --el-text-color-regular: #8c8c8c;
+    --el-pagination-font-size: 14px;
+    --el-pagination-bg-color: var(--el-fill-color-blank);
+    --el-pagination-text-color: var(--el-text-color-primary);
+    --el-pagination-border-radius: 3px;
+    --el-pagination-button-color: var(--el-text-color-primary);
+    --el-pagination-button-width: 32px;
+    --el-pagination-button-height: 32px;
+    --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
+    --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
+    --el-pagination-button-bg-color: var(--el-fill-color);
+    --el-pagination-hover-color: var(--el-color-primary);
+    --el-pagination-height-extra-small: 24px;
+    --el-pagination-line-height-extra-small: var(--el-pagination-height-extra-small);
+    white-space: nowrap;
+    padding: 2px 5px;
+    color: var(--el-pagination-text-color);
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-pagination__total {
+    margin-right: 16px;
+    font-weight: 400;
+    color: var(--el-text-color-regular);
+  }
+}

src/theme/base/element-plus/redio.scss

@@ -0,0 +1,18 @@
+html.china-red {
+  .el-radio {
+    --el-radio-font-size: var(--el-font-size-base);
+    --el-radio-text-color: #262626;
+    --el-radio-font-weight: var(--el-font-weight-primary);
+    --el-radio-input-height: 14px;
+    --el-radio-input-width: 14px;
+    --el-radio-input-border-radius: var(--el-border-radius-circle);
+    --el-radio-input-bg-color: var(--el-fill-color-blank);
+    --el-radio-input-border: var(--el-border);
+    --el-radio-input-border-color: transparent;
+    //--el-radio-input-border-color-hover: transparent;
+  }
+
+  .el-radio__input.is-checked + .el-radio__label {
+    color: #262626;
+  }
+}

src/theme/base/element-plus/table.scss

@@ -0,0 +1,17 @@
+html.china-red {
+  .el-table {
+    --el-table-border-color: #f0f0f0;
+    --el-table-border: 1px solid #f0f0f0;
+    --el-table-text-color: var(--el-text-color-regular);
+    --el-table-header-text-color: var(--el-text-color-secondary);
+    --el-table-row-hover-bg-color: #ffece6;
+    --el-table-current-row-bg-color: var(--el-color-primary-light-9);
+    --el-table-header-bg-color: #fafafa;
+    --el-table-fixed-box-shadow: var(--el-box-shadow-light);
+    --el-table-bg-color: var(--el-fill-color-blank);
+    --el-table-tr-bg-color: var(--el-fill-color-blank);
+    --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
+    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  }
+}