提升主题支持并优化标签组件

- 升级 Vue 至 3.5.17，更新依赖。
- 添加主题切换支持，扩展图片路径解析功能。
- 替换标签渲染逻辑为新组件 `UnifiedTag`，确保视觉一致性。
- 小幅优化样式与交互，提升整体用户体验。

Author: ForteScarlet

package-lock.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.45"
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@vicons/ionicons5": "^0.12.0",

package.json

@@ -1,9 +1,9 @@
 <template>
   <n-card embedded
           :bordered="false">
-    <n-page-header subtitle="探寻你的梦中情档">
+    <n-page-header subtitle="探寻你的梦中情档" style="user-select: none;">
       <template #title>
-        <n-text style="font-size: 24px;" class="title">Simple Robot</n-text>
+        <n-text style="font-size: 24px; user-select: none;" class="title">Simple Robot</n-text>
       </template>
 
       <n-menu v-model:value="menuActiveKey"
@@ -20,6 +20,7 @@
             :src="logoSvg"
             color="FFFFFF00"
             :img-props="{draggable: false}"
+            style="user-select: none;"
         />
       </template>
       <template #extra>

public/img/fol_mk2_guild_dark.jpg

@@ -1,6 +1,6 @@
 <template>
   <n-config-provider :theme="theme">
-    <div id="center-body">
+    <div id="center-body" :data-theme="theme ? 'dark' : 'light'">
       <n-layout position="absolute">
         <n-layout-header bordered>
           <HomeHead @theme-active-change="onThemeActiveChange" :init-theme-active-value="initThemeActiveValue"/>
@@ -39,7 +39,7 @@
                   </n-card>
                   <n-card embedded :bordered="false">
                     <n-collapse-item name="作品展示">
-                      <ShowCards/>
+                      <ShowCards :theme="theme" />
                       <template #header>
                         <n-divider title-placement="left" style="user-select: none">
                           <n-text strong style="font-size: 19px" class="sub-text">作品展示</n-text>

public/img/fol_mk2_guild_light.jpg

@@ -19,10 +19,13 @@
           </n-image-group>
 
           <n-space size="small">
-            <component v-for="{ component, props } in card.tags"
-                       v-bind="props"
-                       :is="component"
-                       v-html="props.name" />
+            <UnifiedTag 
+              v-for="tag in card.tags" 
+              :key="tag.name"
+              :name="tag.name"
+              :type="tag.type"
+              :allow-html="true"
+            />
           </n-space>
 
 
@@ -54,7 +57,10 @@
  */
 
 // Naive UI 组件导入
-import {NA, NButton, NCard, NGi, NGrid, NImage, NImageGroup, NP, NSpace, NTag} from "naive-ui";
+import {NA, NButton, NCard, NGi, NGrid, NImage, NImageGroup, NP, NSpace} from "naive-ui";
+
+// 统一标签组件导入
+import UnifiedTag from "./common/UnifiedTag.vue";
 
 // ==================== 类型定义 ====================
 
@@ -91,7 +97,7 @@ interface LinkConfig {
  */
 interface ComponentCard {
   name: string;
-  tags: ReturnType<typeof Tag>[];
+  tags: TagConfig[];
   shields: ReturnType<typeof Shield>[];
   description: string;
   links: LinkConfig[][];
@@ -100,21 +106,6 @@ interface ComponentCard {
 
 // ==================== 辅助函数 ====================
 
-/**
- * 创建标签组件配置
- * @param props - 标签属性配置
- * @returns 标签组件配置对象
- */
-function Tag(props: TagConfig) {
-  return {
-    component: NTag,
-    props: {
-      round: props.round ?? true,
-      size: props.size ?? 'small',
-      ...props
-    }
-  };
-}
 
 /**
  * 创建徽章组件配置
@@ -134,22 +125,22 @@ function Shield(props: ShieldConfig) {
 // ==================== 预定义标签 ====================
 
 /** 官方标签 - 标识官方维护的组件 */
-const officialTag = Tag({ name: 'Official', type: 'info' });
+const officialTag: TagConfig = { name: 'Official', type: 'info' };
 
 /** 核心标签 - 标识核心库组件 */
-const coreTag = Tag({ name: '核心', type: 'info' });
+const coreTag: TagConfig = { name: '核心', type: 'info' };
 
 /** 组件标签 - 标识组件库类型 */
-const componentTag = Tag({ name: "组件", type: "success" });
+const componentTag: TagConfig = { name: "组件", type: "success" };
 
 /** 开发中标签 - 标识正在开发的组件 */
-const WIPTag = Tag({ name: '<b>🚧WIP</b>', type: 'warning' });
+const WIPTag: TagConfig = { name: '<b>🚧WIP</b>', type: 'warning' };
 
 /** 期待协助标签 - 标识需要社区帮助的组件 */
-const helpWanted = Tag({ name: '<b>🤝期待协助</b>', type: 'success' });
+const helpWanted: TagConfig = { name: '<b>🤝期待协助</b>', type: 'success' };
 
 /** 已废弃标签 - 标识不再维护的组件 */
-const deadTag = Tag({ name: '<b>💀阵亡</b>', type: 'error' });
+const deadTag: TagConfig = { name: '<b>💀阵亡</b>', type: 'error' };
 
 const componentCards: ComponentCard[] = [
   {

public/img/fol_mk2_qq_dark.jpg

@@ -0,0 +1,70 @@
+<template>
+  <n-tag
+      :type="type"
+      size="small"
+      round
+      v-bind="$attrs"
+  >
+    <span v-if="allowHtml" v-html="name"></span>
+    <span v-else>{{ name }}</span>
+  </n-tag>
+</template>
+
+<script setup lang="ts">
+/**
+ * 统一标签组件 - UnifiedTag
+ * 基于"作品展示"中的Tag样式，提供统一的标签显示效果
+ * 特点：小尺寸(small)、圆角(round)、支持多种类型和HTML内容
+ */
+
+import {NTag} from "naive-ui";
+
+// ==================== 类型定义 ====================
+
+/**
+ * 标签类型枚举
+ */
+type TagType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * 组件属性接口
+ */
+interface Props {
+  /** 标签显示的名称/内容 */
+  name: string;
+  /** 标签类型，决定颜色主题 */
+  type?: TagType;
+  /** 是否允许HTML内容（用于支持富文本标签） */
+  allowHtml?: boolean;
+}
+
+// ==================== 属性定义 ====================
+
+/**
+ * 组件属性，设置默认值
+ */
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  allowHtml: false
+});
+
+// 继承所有未声明的属性，允许传递给底层的 n-tag 组件
+defineOptions({
+  inheritAttrs: false
+});
+</script>
+
+<style scoped>
+/**
+ * 统一标签样式
+ * 基于"作品展示"的设计规范，确保视觉一致性
+ */
+
+/* 标签基础样式已由 naive-ui 的 n-tag 组件提供 */
+/* size="small" 和 round 属性确保了与"作品展示"一致的外观 */
+
+/**
+ * 如果需要额外的自定义样式，可以在这里添加
+ * 例如：特殊的间距、动画效果等
+ */
+</style>