element 主题色修改，element和sass版本固定，不然element有些方法在sass某些版本里面没有

package-lock.json

@@ -17,7 +17,7 @@
         "crypto-js": "^4.2.0",
         "dexie": "3.0.3",
         "echarts": "^5.5.1",
-        "element-plus": "^2.3.4",
+        "element-plus": "2.6.1",
         "file-saver": "^2.0.5",
         "hfmath": "^0.0.2",
         "html-to-image": "^1.11.11",
@@ -65,7 +65,7 @@
         "eslint-plugin-vue": "^9.17.0",
         "npm-run-all2": "^6.1.1",
         "prettier": "^3.3.3",
-        "sass": "^1.69.6",
+        "sass": "1.66.1",
         "typescript": "~5.3.0",
         "vite": "^5.3.5",
         "vue-tsc": "^2.0.29"
@@ -2361,9 +2361,9 @@
       "peer": true
     },
     "node_modules/element-plus": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.7.tgz",
-      "integrity": "sha512-oGQyFRufFOgjd872tZc+T4xQAYLlX4hj6d3ixeY13L4fFNUuc1N49JHAqJGPda0tdx3qCnjceZoh1kqqj2+tXQ==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.6.1.tgz",
+      "integrity": "sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.3.1",
@@ -4183,9 +4183,9 @@
       "peer": true
     },
     "node_modules/sass": {
-      "version": "1.69.6",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.6.tgz",
-      "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
+      "version": "1.66.1",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -6591,9 +6591,9 @@
       "peer": true
     },
     "element-plus": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.7.tgz",
-      "integrity": "sha512-oGQyFRufFOgjd872tZc+T4xQAYLlX4hj6d3ixeY13L4fFNUuc1N49JHAqJGPda0tdx3qCnjceZoh1kqqj2+tXQ==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.6.1.tgz",
+      "integrity": "sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==",
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.3.1",
@@ -7989,9 +7989,9 @@
       "peer": true
     },
     "sass": {
-      "version": "1.69.6",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.6.tgz",
-      "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
+      "version": "1.66.1",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",

package.json

@@ -22,7 +22,7 @@
     "crypto-js": "^4.2.0",
     "dexie": "3.0.3",
     "echarts": "^5.5.1",
-    "element-plus": "^2.3.4",
+    "element-plus": "2.6.1",
     "file-saver": "^2.0.5",
     "hfmath": "^0.0.2",
     "html-to-image": "^1.11.11",
@@ -70,7 +70,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.3.3",
-    "sass": "^1.69.6",
+    "sass": "1.66.1",
     "typescript": "~5.3.0",
     "vite": "^5.3.5",
     "vue-tsc": "^2.0.29"

src/assets/styles/elementTheme.scss

@@ -0,0 +1,59 @@
+/* 修改主题的时候  去掉registerComponents.ts文件里面的全局导入*/
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
+  $colors: (
+    "primary": (
+      "base": $themeColor
+    )
+  ),
+  // $text-color: (
+  //    "regular": red
+  // )
+);
+@use "element-plus/theme-chalk/src/index.scss" as *;
+
+/* 普通模式 */
+:root {
+  --el-loading-spinner-size: 50px;
+  --el-loading-fullscreen-spinner-size: 58px;
+}
+/* 暗黑模式 */
+//html.dark {}
+
+//表头加颜色
+.el-table .el-table__header thead th {
+  background-color: var(--el-bg-color-page);
+}
+
+/* 空元素全局样式 */
+.el-empty .el-empty__description p {
+  font-weight: 400;
+  font-size: 22px;
+  color: #aaaaaa;
+}
+
+/* 加载条加宽 */
+.el-loading-spinner {
+  margin-top: 0;
+  transform: translateY(-50%);
+  .path {
+    stroke-width: 4;
+  }
+}
+
+/* 滚动条 */
+.el-scrollbar {
+  .el-scrollbar__bar.is-vertical {
+    right: 1px;
+    width: 5px;
+    .el-scrollbar__thumb {
+      opacity: 1;
+      background-color: #dbd6d2;
+    }
+  }
+}
+
+// 下拉选择框 给最大高度，高度自适应
+.el-cascader-panel .el-cascader-menu__wrap.el-scrollbar__wrap {
+  height: 100%;
+  max-height: 204px;
+}

src/main.ts

@@ -6,7 +6,7 @@ import App from "./App.vue"
 import "@icon-park/vue-next/styles/index.css"
 import "prosemirror-view/style/prosemirror.css"
 import "animate.css"
-import "element-plus/dist/index.css"
+import "@/assets/styles/elementTheme.scss"
 import "@/assets/styles/prosemirror.scss"
 import "@/assets/styles/global.scss"
 import "@/assets/styles/font.scss"

vite.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         additionalData: `
-          @import '@/assets/styles/variable.scss';
-          @import '@/assets/styles/mixin.scss';
+          @use "@/assets/styles/variable.scss" as *;
+          @use "@/assets/styles/mixin.scss" as *;
         `
       }
     }