refactor: 采用Vuetify组件库

electron.vite.config.ts

@@ -3,11 +3,12 @@ import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
 // Plugins
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { DevUiResolver } from 'unplugin-vue-components/resolvers';
 import Fonts from 'unplugin-fonts/vite';
 import Layouts from 'vite-plugin-vue-layouts';
 import Vue from '@vitejs/plugin-vue';
 import VueRouter from 'unplugin-vue-router/vite';
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 // import rawLoader from 'raw-loader'
 
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
@@ -42,11 +43,19 @@ export default defineConfig({
         ]
       }),
       Layouts(),
-      Vue(),
+      Vue({
+        template: { transformAssetUrls }
+      }),
       // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+      Vuetify({
+        autoImport: true,
+        styles: {
+          configFile: 'src/styles/settings.scss'
+        }
+      }),
       Components({
         dts: 'src/components.d.ts',
-        resolvers: [ElementPlusResolver()],
+        resolvers: [DevUiResolver()]
       }),
       Fonts({
         google: {
@@ -69,8 +78,7 @@ export default defineConfig({
         eslintrc: {
           enabled: true
         },
-        vueTemplate: true,
-        resolvers: [ElementPlusResolver()],
+        vueTemplate: true
       }),
       createSvgIconsPlugin({
         // Specify the icon folder to be cached

package.json

@@ -27,9 +27,9 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@sentry/vue": "^8.20.0",
     "core-js": "^3.34.0",
     "date-fns": "^3.6.0",
-    "element-plus": "^2.7.7",
     "github-markdown-css": "^5.5.1",
     "moment": "^2.30.1",
     "roboto-fontface": "*",
@@ -37,18 +37,20 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vue": "^3.4.34",
-    "vue-showdown": "^4.2.0"
+    "vue-showdown": "^4.2.0",
+    "vuetify": "^3.5.8",
+    "@mdi/font": "7.0.96"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.2.2",
     "@electron-toolkit/eslint-config": "^1.0.1",
     "@electron-toolkit/eslint-config-ts": "^1.0.1",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@mdi/font": "7.0.96",
     "@rushstack/eslint-patch": "^1.6.1",
     "@types/vue": "^2.0.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "commitlint": "^19.3.0",
     "core-js": "^3.34.0",
     "electron": "^28.2.0",
@@ -70,7 +72,9 @@
     "vite-plugin-optimizer": "^1.4.3",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-layouts": "^0.11.0",
+    "vite-plugin-vuetify": "^2.0.3",
     "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27"
-  }
+  },
+  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

src/renderer/src/plugins/vuetify.ts

@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
+
+// Composables
+import { createVuetify } from 'vuetify';
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark'
+  }
+});