From 797c42aea121a684f3668865d3254be9375d6175 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 7 Jul 2025 00:16:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=A0=B8=E5=BF=83=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E5=9D=97?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整App.vue和所有通用组件为template→script→style顺序
- 涉及NovaDialog、UserCenter、IconSelect等核心组件
- 统一组件结构，提升代码可读性和维护性
- 符合项目新的Vue组件代码块排布规范
---
 src/App.vue                              |  22 ++--
 src/components/common/AppLoading.vue     |   6 +-
 src/components/common/CommonWrapper.vue  |   6 +-
 src/components/common/DarkModeSwitch.vue |  20 ++--
 src/components/common/ErrorTip.vue       |  16 +--
 src/components/common/HelpInfo.vue       |  16 +--
 src/components/common/IconSelect.vue     | 133 ++++++++++++-----------
 src/components/common/LangsSwitch.vue    |  16 +--
 src/components/common/NaiveProvider.vue  |  26 ++---
 src/components/common/NovaDialog.vue     | 126 ++++++++++-----------
 src/components/common/NovaIcon.vue       |  32 +++---
 src/components/common/Pagination.vue     |  28 ++---
 src/components/common/UserCenter.vue     |  86 +++++++--------
 13 files changed, 268 insertions(+), 265 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f1c40a1..df8324e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,14 @@
+<template>
+  <n-config-provider
+    class="wh-full" inline-theme-disabled :theme="appStore.colorMode === 'dark' ? darkTheme : null"
+    :locale="naiveLocale.locale" :date-locale="naiveLocale.dateLocale" :theme-overrides="appStore.theme"
+  >
+    <naive-provider>
+      <router-view />
+    </naive-provider>
+  </n-config-provider>
+</template>
+
 <script setup lang="ts">
 import { naiveI18nOptions } from '@/utils'
 import { darkTheme } from 'naive-ui'
@@ -10,14 +21,3 @@ const naiveLocale = computed(() => {
 },
 )
 </script>
-
-<template>
-  <n-config-provider
-    class="wh-full" inline-theme-disabled :theme="appStore.colorMode === 'dark' ? darkTheme : null"
-    :locale="naiveLocale.locale" :date-locale="naiveLocale.dateLocale" :theme-overrides="appStore.theme"
-  >
-    <naive-provider>
-      <router-view />
-    </naive-provider>
-  </n-config-provider>
-</template>
diff --git a/src/components/common/AppLoading.vue b/src/components/common/AppLoading.vue
index 4e40190..0eb1176 100644
--- a/src/components/common/AppLoading.vue
+++ b/src/components/common/AppLoading.vue
@@ -1,6 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <naive-provider>
     <div id="loading-container">
@@ -34,6 +31,9 @@
   </naive-provider>
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style scoped>
   #loading-container {
     width: 100vw;
diff --git a/src/components/common/CommonWrapper.vue b/src/components/common/CommonWrapper.vue
index a7b223c..3e28ec5 100644
--- a/src/components/common/CommonWrapper.vue
+++ b/src/components/common/CommonWrapper.vue
@@ -1,6 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <n-el
     tag="div"
@@ -16,6 +13,9 @@
   </n-el>
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style scoped>
   .el {
     color: var(--n-text-color);
diff --git a/src/components/common/DarkModeSwitch.vue b/src/components/common/DarkModeSwitch.vue
index 98f29db..07ba43b 100644
--- a/src/components/common/DarkModeSwitch.vue
+++ b/src/components/common/DarkModeSwitch.vue
@@ -1,3 +1,13 @@
+<template>
+  <n-popselect :value="appStore.storeColorMode" :render-label="renderLabel" :options="options" trigger="click" @update:value="appStore.setColorMode">
+    <CommonWrapper>
+      <icon-park-outline-moon v-if="appStore.storeColorMode === 'dark'" />
+      <icon-park-outline-sun-one v-if="appStore.storeColorMode === 'light'" />
+      <icon-park-outline-laptop-computer v-if="appStore.storeColorMode === 'auto'" />
+    </CommonWrapper>
+  </n-popselect>
+</template>
+
 <script setup lang="ts">
 import { useAppStore } from '@/store'
 import IconAuto from '~icons/icon-park-outline/laptop-computer'
@@ -39,14 +49,4 @@ function renderLabel(option: any) {
 }
 </script>
 
-<template>
-  <n-popselect :value="appStore.storeColorMode" :render-label="renderLabel" :options="options" trigger="click" @update:value="appStore.setColorMode">
-    <CommonWrapper>
-      <icon-park-outline-moon v-if="appStore.storeColorMode === 'dark'" />
-      <icon-park-outline-sun-one v-if="appStore.storeColorMode === 'light'" />
-      <icon-park-outline-laptop-computer v-if="appStore.storeColorMode === 'auto'" />
-    </CommonWrapper>
-  </n-popselect>
-</template>
-
 <style scoped></style>
diff --git a/src/components/common/ErrorTip.vue b/src/components/common/ErrorTip.vue
index f44b638..442bdd0 100644
--- a/src/components/common/ErrorTip.vue
+++ b/src/components/common/ErrorTip.vue
@@ -1,11 +1,3 @@
-<script setup lang="ts">
-defineProps<{
-  /** 异常类型 403 404 500 */
-  type: '403' | '404' | '500'
-}>()
-const router = useRouter()
-</script>
-
 <template>
   <div class="flex-col-center h-full">
     <img
@@ -34,3 +26,11 @@ const router = useRouter()
     </n-button>
   </div>
 </template>
+
+<script setup lang="ts">
+defineProps<{
+  /** 异常类型 403 404 500 */
+  type: '403' | '404' | '500'
+}>()
+const router = useRouter()
+</script>
diff --git a/src/components/common/HelpInfo.vue b/src/components/common/HelpInfo.vue
index 969ae99..eb05c84 100644
--- a/src/components/common/HelpInfo.vue
+++ b/src/components/common/HelpInfo.vue
@@ -1,11 +1,3 @@
-<script setup lang="ts">
-interface Props {
-  message: string
-}
-
-const { message } = defineProps<Props>()
-</script>
-
 <template>
   <n-tooltip :show-arrow="false" trigger="hover">
     <template #trigger>
@@ -14,3 +6,11 @@ const { message } = defineProps<Props>()
     {{ message }}
   </n-tooltip>
 </template>
+
+<script setup lang="ts">
+interface Props {
+  message: string
+}
+
+const { message } = defineProps<Props>()
+</script>
diff --git a/src/components/common/IconSelect.vue b/src/components/common/IconSelect.vue
index 2736a70..99b1127 100644
--- a/src/components/common/IconSelect.vue
+++ b/src/components/common/IconSelect.vue
@@ -1,3 +1,69 @@
+<template>
+  <n-input-group disabled>
+    <n-button v-if="value" :disabled="disabled" type="primary">
+      <template #icon>
+        <nova-icon :icon="value" />
+      </template>
+    </n-button>
+    <n-input :value="value" readonly :placeholder="$t('components.iconSelector.inputPlaceholder')" />
+    <n-button type="primary" ghost :disabled="disabled" @click="showModal = true">
+      {{ $t('common.choose') }}
+    </n-button>
+  </n-input-group>
+  <n-modal
+    v-model:show="showModal" preset="card" :title="$t('components.iconSelector.selectorTitle')" size="small" class="w-800px" :bordered="false"
+  >
+    <template #header-extra>
+      <n-button type="warning" size="small" ghost @click="clearIcon">
+        {{ $t('components.iconSelector.clearIcon') }}
+      </n-button>
+    </template>
+
+    <n-tabs :value="currentTab" type="line" animated placement="left" @update:value="handleChangeTab">
+      <n-tab-pane v-for="(list, index) in iconList" :key="list.prefix" :name="index" :tab="list.title">
+        <n-flex vertical>
+          <n-flex size="small">
+            <n-tag
+              v-for="(_v, k) in list.categories" :key="k"
+              :checked="currentTag === k" round checkable size="small"
+              @update:checked="handleSelectIconTag(k)"
+            >
+              {{ k }}
+            </n-tag>
+          </n-flex>
+
+          <n-input
+            v-model:value="searchValue" type="text" clearable
+            :placeholder="$t('components.iconSelector.searchPlaceholder')"
+          />
+
+          <div>
+            <n-flex :size="2">
+              <n-el
+                v-for="(icon) in visibleIcons" :key="icon"
+                class="hover:(text-[var(--primary-color)] ring-1) ring-[var(--primary-color)] p-1 rounded flex-center"
+                :title="`${list.prefix}:${icon}`"
+                @click="handleSelectIcon(`${list.prefix}:${icon}`)"
+              >
+                <nova-icon :icon="`${list.prefix}:${icon}`" :size="24" />
+              </n-el>
+              <n-empty v-if="visibleIcons.length === 0" class="w-full" />
+            </n-flex>
+          </div>
+
+          <n-flex justify="center">
+            <n-pagination
+              v-model:page="currentPage"
+              :item-count="filteredIcons.length"
+              :page-size="200"
+            />
+          </n-flex>
+        </n-flex>
+      </n-tab-pane>
+    </n-tabs>
+  </n-modal>
+</template>
+
 <script setup lang="ts">
 interface Props {
   disabled?: boolean
@@ -121,68 +187,5 @@ function clearIcon() {
 }
 </script>
 
-<template>
-  <n-input-group disabled>
-    <n-button v-if="value" :disabled="disabled" type="primary">
-      <template #icon>
-        <nova-icon :icon="value" />
-      </template>
-    </n-button>
-    <n-input :value="value" readonly :placeholder="$t('components.iconSelector.inputPlaceholder')" />
-    <n-button type="primary" ghost :disabled="disabled" @click="showModal = true">
-      {{ $t('common.choose') }}
-    </n-button>
-  </n-input-group>
-  <n-modal
-    v-model:show="showModal" preset="card" :title="$t('components.iconSelector.selectorTitle')" size="small" class="w-800px" :bordered="false"
-  >
-    <template #header-extra>
-      <n-button type="warning" size="small" ghost @click="clearIcon">
-        {{ $t('components.iconSelector.clearIcon') }}
-      </n-button>
-    </template>
-
-    <n-tabs :value="currentTab" type="line" animated placement="left" @update:value="handleChangeTab">
-      <n-tab-pane v-for="(list, index) in iconList" :key="list.prefix" :name="index" :tab="list.title">
-        <n-flex vertical>
-          <n-flex size="small">
-            <n-tag
-              v-for="(_v, k) in list.categories" :key="k"
-              :checked="currentTag === k" round checkable size="small"
-              @update:checked="handleSelectIconTag(k)"
-            >
-              {{ k }}
-            </n-tag>
-          </n-flex>
-
-          <n-input
-            v-model:value="searchValue" type="text" clearable
-            :placeholder="$t('components.iconSelector.searchPlaceholder')"
-          />
-
-          <div>
-            <n-flex :size="2">
-              <n-el
-                v-for="(icon) in visibleIcons" :key="icon"
-                class="hover:(text-[var(--primary-color)] ring-1) ring-[var(--primary-color)] p-1 rounded flex-center"
-                :title="`${list.prefix}:${icon}`"
-                @click="handleSelectIcon(`${list.prefix}:${icon}`)"
-              >
-                <nova-icon :icon="`${list.prefix}:${icon}`" :size="24" />
-              </n-el>
-              <n-empty v-if="visibleIcons.length === 0" class="w-full" />
-            </n-flex>
-          </div>
-
-          <n-flex justify="center">
-            <n-pagination
-              v-model:page="currentPage"
-              :item-count="filteredIcons.length"
-              :page-size="200"
-            />
-          </n-flex>
-        </n-flex>
-      </n-tab-pane>
-    </n-tabs>
-  </n-modal>
-</template>
+<style scoped>
+</style>
diff --git a/src/components/common/LangsSwitch.vue b/src/components/common/LangsSwitch.vue
index 5f8f115..ca086f9 100644
--- a/src/components/common/LangsSwitch.vue
+++ b/src/components/common/LangsSwitch.vue
@@ -1,3 +1,11 @@
+<template>
+  <n-popselect :value="appStore.lang" :options="options" trigger="click" @update:value="appStore.setAppLang">
+    <CommonWrapper>
+      <icon-park-outline-translate />
+    </CommonWrapper>
+  </n-popselect>
+</template>
+
 <script setup lang="ts">
 import { useAppStore } from '@/store'
 
@@ -14,12 +22,4 @@ const options = [
 ]
 </script>
 
-<template>
-  <n-popselect :value="appStore.lang" :options="options" trigger="click" @update:value="appStore.setAppLang">
-    <CommonWrapper>
-      <icon-park-outline-translate />
-    </CommonWrapper>
-  </n-popselect>
-</template>
-
 <style scoped></style>
diff --git a/src/components/common/NaiveProvider.vue b/src/components/common/NaiveProvider.vue
index 85b8c44..752df39 100644
--- a/src/components/common/NaiveProvider.vue
+++ b/src/components/common/NaiveProvider.vue
@@ -1,3 +1,16 @@
+<template>
+  <n-loading-bar-provider>
+    <n-dialog-provider>
+      <n-notification-provider>
+        <n-message-provider>
+          <slot />
+          <NaiveProviderContent />
+        </n-message-provider>
+      </n-notification-provider>
+    </n-dialog-provider>
+  </n-loading-bar-provider>
+</template>
+
 <script setup lang="ts">
 import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui'
 
@@ -20,17 +33,4 @@ const NaiveProviderContent = defineComponent({
 })
 </script>
 
-<template>
-  <n-loading-bar-provider>
-    <n-dialog-provider>
-      <n-notification-provider>
-        <n-message-provider>
-          <slot />
-          <NaiveProviderContent />
-        </n-message-provider>
-      </n-notification-provider>
-    </n-dialog-provider>
-  </n-loading-bar-provider>
-</template>
-
 <style scoped></style>
diff --git a/src/components/common/NovaDialog.vue b/src/components/common/NovaDialog.vue
index 8e14736..7350ea9 100644
--- a/src/components/common/NovaDialog.vue
+++ b/src/components/common/NovaDialog.vue
@@ -1,3 +1,66 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    :mask-closable="false"
+    :close-on-esc="false"
+    :auto-focus="autoFocus"
+    preset="card"
+    :loading="confirmLoading"
+    :show-icon="false"
+    :style="{
+      width: typeof width === 'number' ? `${width}px` : width,
+    }"
+    class="nova-dialog"
+    @close="handleClose"
+  >
+    <!-- 头部插槽 -->
+    <template #header>
+      <div v-if="$slots.header" class="nova-dialog-custom-header">
+        <slot name="header" />
+      </div>
+      <div v-else class="nova-dialog-header">
+        <div class="nova-dialog-title">
+          {{ title }}
+        </div>
+      </div>
+    </template>
+
+    <!-- 内容区域 -->
+    <div
+      class="nova-dialog-content"
+      :style="{
+        height: fullscreen ? 'auto' : (typeof height === 'number' ? `${height}px` : height),
+        overflow: height === 'auto' ? 'visible' : 'auto',
+      }"
+    >
+      <slot name="content" />
+    </div>
+
+    <!-- 底部操作区域 -->
+    <template #footer>
+      <div v-if="!footerHidden" class="nova-dialog-footer">
+        <NSpace justify="center">
+          <NButton
+            size="medium"
+            @click="handleCancel"
+          >
+            {{ cancelText }}
+          </NButton>
+          <NButton
+            type="primary"
+            size="medium"
+            :loading="confirmLoading"
+            @click="handleConfirm"
+          >
+            {{ confirmText }}
+          </NButton>
+        </NSpace>
+      </div>
+      <div v-else />
+    </template>
+  </n-modal>
+</template>
+
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { NButton, NSpace } from 'naive-ui'
@@ -93,69 +156,6 @@ defineExpose({
 })
 </script>
 
-<template>
-  <n-modal
-    v-model:show="visible"
-    :mask-closable="false"
-    :close-on-esc="false"
-    :auto-focus="autoFocus"
-    preset="card"
-    :loading="confirmLoading"
-    :show-icon="false"
-    :style="{
-      width: typeof width === 'number' ? `${width}px` : width,
-    }"
-    class="nova-dialog"
-    @close="handleClose"
-  >
-    <!-- 头部插槽 -->
-    <template #header>
-      <div v-if="$slots.header" class="nova-dialog-custom-header">
-        <slot name="header" />
-      </div>
-      <div v-else class="nova-dialog-header">
-        <div class="nova-dialog-title">
-          {{ title }}
-        </div>
-      </div>
-    </template>
-
-    <!-- 内容区域 -->
-    <div
-      class="nova-dialog-content"
-      :style="{
-        height: fullscreen ? 'auto' : (typeof height === 'number' ? `${height}px` : height),
-        overflow: height === 'auto' ? 'visible' : 'auto',
-      }"
-    >
-      <slot name="content" />
-    </div>
-
-    <!-- 底部操作区域 -->
-    <template #footer>
-      <div v-if="!footerHidden" class="nova-dialog-footer">
-        <NSpace justify="center">
-          <NButton
-            size="medium"
-            @click="handleCancel"
-          >
-            {{ cancelText }}
-          </NButton>
-          <NButton
-            type="primary"
-            size="medium"
-            :loading="confirmLoading"
-            @click="handleConfirm"
-          >
-            {{ confirmText }}
-          </NButton>
-        </NSpace>
-      </div>
-      <div v-else />
-    </template>
-  </n-modal>
-</template>
-
 <style scoped>
 /* 弹框标题样式 */
 .nova-dialog :deep(.n-card-header) {
diff --git a/src/components/common/NovaIcon.vue b/src/components/common/NovaIcon.vue
index a19f28a..f317d07 100644
--- a/src/components/common/NovaIcon.vue
+++ b/src/components/common/NovaIcon.vue
@@ -1,3 +1,19 @@
+<template>
+  <n-icon
+    v-if="icon"
+    :size="size"
+    :depth="depth"
+    :color="color"
+  >
+    <template v-if="isLocal">
+      <i v-html="getLocalIcon(icon)" />
+    </template>
+    <template v-else>
+      <Icon :icon="icon" />
+    </template>
+  </n-icon>
+</template>
+
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 
@@ -28,19 +44,3 @@ function getLocalIcon(icon: string) {
   return svg[`/src/assets/svg-icons/${svgName}.svg`]
 }
 </script>
-
-<template>
-  <n-icon
-    v-if="icon"
-    :size="size"
-    :depth="depth"
-    :color="color"
-  >
-    <template v-if="isLocal">
-      <i v-html="getLocalIcon(icon)" />
-    </template>
-    <template v-else>
-      <Icon :icon="icon" />
-    </template>
-  </n-icon>
-</template>
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index dc09836..0253b66 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -1,3 +1,17 @@
+<template>
+  <n-pagination
+    v-if="count > 0"
+    v-model:page="page"
+    v-model:page-size="pageSize"
+    :page-sizes="[10, 20, 30, 50]"
+    :item-count="count"
+    :display-order="displayOrder"
+    show-size-picker
+    @update-page="changePage"
+    @update-page-size="changePage"
+  />
+</template>
+
 <script setup lang="ts">
 interface Props {
   count?: number
@@ -19,18 +33,4 @@ function changePage() {
 }
 </script>
 
-<template>
-  <n-pagination
-    v-if="count > 0"
-    v-model:page="page"
-    v-model:page-size="pageSize"
-    :page-sizes="[10, 20, 30, 50]"
-    :item-count="count"
-    :display-order="displayOrder"
-    show-size-picker
-    @update-page="changePage"
-    @update-page-size="changePage"
-  />
-</template>
-
 <style scoped></style>
diff --git a/src/components/common/UserCenter.vue b/src/components/common/UserCenter.vue
index cfc8704..ca3ad2b 100644
--- a/src/components/common/UserCenter.vue
+++ b/src/components/common/UserCenter.vue
@@ -1,46 +1,3 @@
-<script setup lang="ts">
-import { computed, h } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/store/auth'
-import { coiMsgBox } from '@/utils/coi'
-import IconUser from '~icons/icon-park-outline/user'
-import IconLogout from '~icons/icon-park-outline/logout'
-
-const authStore = useAuthStore()
-const router = useRouter()
-
-// 获取用户信息
-const userInfo = computed(() => authStore.userInfo)
-
-// 获取用户显示名称
-const displayName = computed(() => {
-  if (!userInfo.value)
-    return '未知用户'
-  return userInfo.value.userName || '未知用户'
-})
-
-// 获取用户头像
-const avatar = computed(() => {
-  if (!userInfo.value?.avatar)
-    return ''
-  return userInfo.value.avatar
-})
-
-// 处理个人中心点击
-function handlePersonalCenter() {
-  router.push('/personal-center')
-}
-
-// 处理退出登录
-function handleLogout() {
-  coiMsgBox('确定要退出登录吗？', '退出确认').then(() => {
-    authStore.logout()
-  }).catch(() => {
-    // 取消操作
-  })
-}
-</script>
-
 <template>
   <n-dropdown
     placement="bottom-end"
@@ -93,6 +50,49 @@ function handleLogout() {
   </n-dropdown>
 </template>
 
+<script setup lang="ts">
+import { computed, h } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/store/auth'
+import { coiMsgBox } from '@/utils/coi'
+import IconUser from '~icons/icon-park-outline/user'
+import IconLogout from '~icons/icon-park-outline/logout'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+// 获取用户信息
+const userInfo = computed(() => authStore.userInfo)
+
+// 获取用户显示名称
+const displayName = computed(() => {
+  if (!userInfo.value)
+    return '未知用户'
+  return userInfo.value.userName || '未知用户'
+})
+
+// 获取用户头像
+const avatar = computed(() => {
+  if (!userInfo.value?.avatar)
+    return ''
+  return userInfo.value.avatar
+})
+
+// 处理个人中心点击
+function handlePersonalCenter() {
+  router.push('/personal-center')
+}
+
+// 处理退出登录
+function handleLogout() {
+  coiMsgBox('确定要退出登录吗？', '退出确认').then(() => {
+    authStore.logout()
+  }).catch(() => {
+    // 取消操作
+  })
+}
+</script>
+
 <style scoped>
 .dark .hover\:bg-gray-50:hover {
   background-color: rgba(255, 255, 255, 0.1);