refactor: 系统UI

README.en.md

@@ -147,7 +147,7 @@ meta: {
   roles: ['admin', 'editor']
   // Set the name of the route displayed in the sidebar and breadcrumbs
   title: 'title'
-  // Icon to set this route, Remember to import svg into @/assets/svg-icons/icons
+  // Icon to set this route, Remember to import svg into @/icons/svg
   icon: 'svg-name'
   // The default is true. If it is set to false, it will not be displayed in breadcrumbs
   breadcrumb: false

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v3-admin",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "homepage": "https://github.com/un-pany/v3-admin",
   "scripts": {
     "dev": "vue-cli-service serve",

src/components/screenfull/index.vue

@@ -1,37 +1,23 @@
 <template>
-  <div @click="state.click">
-    <svg-icon :name="state.isFullscreen ? 'exit-fullscreen' : 'fullscreen'" font-size="20px" />
+  <div @click="click">
+    <el-tooltip effect="dark" content="全屏" placement="bottom">
+      <el-icon :size="20">
+        <full-screen />
+      </el-icon>
+    </el-tooltip>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, reactive } from 'vue'
+import { FullScreen } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import screenfull from 'screenfull'
 
-const state = reactive({
-  isFullscreen: false,
-  click: () => {
-    if (!screenfull.isEnabled) {
-      ElMessage.warning('您的浏览器无法工作')
-      return
-    }
-    screenfull.toggle()
-  },
-  change: () => {
-    if (screenfull.isEnabled) {
-      state.isFullscreen = screenfull.isFullscreen
-    }
+const click = () => {
+  if (!screenfull.isEnabled) {
+    ElMessage.warning('您的浏览器无法工作')
+    return
   }
-})
-onMounted(() => {
-  if (screenfull.isEnabled) {
-    screenfull.on('change', state.change)
-  }
-})
-onBeforeUnmount(() => {
-  if (screenfull.isEnabled) {
-    screenfull.off('change', state.change)
-  }
-})
+  screenfull.toggle()
+}
 </script>

src/components/theme-switch/index.vue

@@ -1,6 +1,10 @@
 <template>
   <el-dropdown trigger="click" @command="handleSetTheme">
-    <svg-icon name="theme" font-size="20px" />
+    <el-tooltip effect="dark" content="主题模式" placement="bottom">
+      <el-icon :size="20">
+        <magic-stick />
+      </el-icon>
+    </el-tooltip>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
@@ -17,8 +21,9 @@
 </template>
 
 <script lang="ts" setup>
-import { store } from '@/store'
+import { MagicStick } from '@element-plus/icons-vue'
 import { computed } from 'vue'
+import { store } from '@/store'
 
 const themeList = computed(() => {
   return store.state.app.themeList