refactor: 重构为更推荐的 vue3 代码组织方式

src/components/Screenfull/index.vue

@@ -1,16 +1,6 @@
-<template>
-  <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 { FullScreen } from "@element-plus/icons-vue"
 import { ElMessage } from "element-plus"
+import { FullScreen } from "@element-plus/icons-vue"
 import screenfull from "screenfull"
 
 const click = () => {
@@ -21,3 +11,13 @@ const click = () => {
   screenfull.toggle()
 }
 </script>
+
+<template>
+  <div @click="click">
+    <el-tooltip effect="dark" content="全屏" placement="bottom">
+      <el-icon :size="20">
+        <FullScreen />
+      </el-icon>
+    </el-tooltip>
+  </div>
+</template>

src/components/SvgIcon/index.vue

@@ -1,9 +1,3 @@
-<template>
-  <svg class="svg-icon" aria-hidden="true">
-    <use :href="symbolId" />
-  </svg>
-</template>
-
 <script lang="ts" setup>
 import { computed } from "vue"
 
@@ -21,6 +15,12 @@ const props = defineProps({
 const symbolId = computed(() => `#${props.prefix}-${props.name}`)
 </script>
 
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :href="symbolId" />
+  </svg>
+</template>
+
 <style lang="scss" scoped>
 .svg-icon {
   width: 1em;

src/components/ThemeSwitch/index.vue

@@ -1,8 +1,26 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { useAppStore } from "@/store/modules/app"
+import { MagicStick } from "@element-plus/icons-vue"
+
+const appStore = useAppStore()
+
+const themeList = computed(() => {
+  return appStore.themeList
+})
+const activeThemeName = computed(() => {
+  return appStore.activeThemeName
+})
+const handleSetTheme = (name: string) => {
+  appStore.setTheme(name)
+}
+</script>
+
 <template>
   <el-dropdown trigger="click" @command="handleSetTheme">
     <el-tooltip effect="dark" content="主题模式" placement="bottom">
       <el-icon :size="20">
-        <magic-stick />
+        <MagicStick />
       </el-icon>
     </el-tooltip>
     <template #dropdown>
@@ -19,20 +37,3 @@
     </template>
   </el-dropdown>
 </template>
-
-<script lang="ts" setup>
-import { MagicStick } from "@element-plus/icons-vue"
-import { computed } from "vue"
-import { useAppStore } from "@/store/modules/app"
-
-const appStore = useAppStore()
-const themeList = computed(() => {
-  return appStore.themeList
-})
-const activeThemeName = computed(() => {
-  return appStore.activeThemeName
-})
-const handleSetTheme = (name: string) => {
-  appStore.setTheme(name)
-}
-</script>