refactor: 重构项目页面与组件，优化整体结构与体验

1. 重构分类页面路由与实现，替换旧分类详情页为文章列表页 2. 统一使用自定义导航栏，替换原有原生导航配置 3. 重构加载状态管理，统一使用useDataLoadingStatus hook 4. 优化插件可用性检查逻辑与组件展示 5. 调整数据加载占位与空状态样式 6. 优化文章卡片样式与交互，新增分类跳转功能 7. 重构设置页枚举选择弹窗，使用wd-picker替换自定义实现 8. 删除废弃的IPluginAvailable类型与相关代码
2026-09-12 16:40:40 +08:00 · 2026-09-04 20:31:46 +08:00
parent 56ce29e69e
commit 02fa9e4294
27 changed files with 727 additions and 630 deletions
@@ -15,150 +15,152 @@
 *   handleGetData()
 * })
 */
-import { ref } from 'vue'
-import { checkPluginAvailable } from '@/api/halo'
-import { checkUrl } from '@/utils/url'
+import { ref } from 'vue';
+import { checkPluginAvailable } from '@/api/halo';
+import { checkUrl } from '@/utils/url';

 /** 依赖插件 ID 常量 */
 export const NeedPluginIds = Object.freeze({
-  PluginUniHalo: 'plugin-uni-halo',
-  PluginPhotos: 'PluginPhotos',
-  PluginLinks: 'PluginLinks',
-  PluginMoments: 'PluginMoments',
-  PluginSearchWidget: 'PluginSearchWidget',
-  PluginCommentWidget: 'PluginCommentWidget',
-  PluginVote: 'vote',
-  PluginDataStatistics: 'data-statistics',
-})
+	PluginUniHalo: 'plugin-uni-halo',
+	PluginPhotos: 'PluginPhotos',
+	PluginLinks: 'PluginLinks',
+	PluginMoments: 'PluginMoments',
+	PluginSearchWidget: 'PluginSearchWidget',
+	PluginCommentWidget: 'PluginCommentWidget',
+	PluginVote: 'vote',
+	PluginDataStatistics: 'data-statistics'
+});
+
+interface IPluginAvailableOption {
+	pluginId: string;
+	// 用于提示用户插件未安装或未启用时显示的提示信息
+	tips?: string;
+	// 是否直接隐藏UI，不显示 uh-plugin-unavailable 组件
+	hideUI?: boolean;
+	// 是否默认启用插件
+	initalAvailable?: boolean;
+	// 检查完成后的回调函数
+	callback?: (available: boolean) => void;
+}

 export interface IPluginInfo {
-  id: string
-  name: string
-  desc: string
-  logo: string
-  url: string
+	id: string;
+	name: string;
+	desc: string;
+	logo: string;
+	url: string;
 }

 /** 依赖插件清单 */
 export const NeedPlugins = new Map<string, IPluginInfo>([
-  [
-    NeedPluginIds.PluginUniHalo,
-    {
-      id: 'plugin-uni-halo',
-      name: 'UniHalo配置',
-      desc: 'uni-halo 核心插件，未安装和启用的情况下，将无法使用 uni-halo，请检查是否已安装和启用',
-      logo: checkUrl('/plugins/plugin-uni-halo/assets/logo.png'),
-      url: 'https://www.halo.run/store/apps/app-ryemX',
-    },
-  ],
-  [
-    NeedPluginIds.PluginPhotos,
-    {
-      id: 'PluginPhotos',
-      name: '图库管理',
-      desc: '图库功能模块所需要的插件',
-      logo: checkUrl('/plugins/PluginPhotos/assets/logo.svg'),
-      url: 'https://www.halo.run/store/apps/app-BmQJW',
-    },
-  ],
-  [
-    NeedPluginIds.PluginLinks,
-    {
-      id: 'PluginLinks',
-      name: '链接管理',
-      desc: '链接管理模块，用于网站友情链接功能模块',
-      logo: checkUrl('/plugins/PluginLinks/assets/logo.svg'),
-      url: 'https://www.halo.run/store/apps/app-hfbQg',
-    },
-  ],
-  [
-    NeedPluginIds.PluginMoments,
-    {
-      id: 'PluginMoments',
-      name: '瞬间',
-      desc: '提供一个轻量级的内容图文、视频、音频等内容展示',
-      logo: checkUrl('/plugins/PluginMoments/assets/logo.svg'),
-      url: 'https://www.halo.run/store/apps/app-SnwWD',
-    },
-  ],
-  [
-    NeedPluginIds.PluginSearchWidget,
-    {
-      id: 'PluginSearchWidget',
-      name: '搜索组件',
-      desc: '为应用提供统一的搜索组件',
-      logo: checkUrl('/plugins/PluginSearchWidget/assets/logo.svg'),
-      url: 'https://www.halo.run/store/apps/app-DlacW',
-    },
-  ],
-  [
-    NeedPluginIds.PluginCommentWidget,
-    {
-      id: 'PluginCommentWidget',
-      name: '评论组件',
-      desc: '为用户前台提供完整的评论解决方案',
-      logo: checkUrl('/plugins/PluginCommentWidget/assets/logo.svg'),
-      url: 'https://www.halo.run/store/apps/app-YXyaD',
-    },
-  ],
-  [
-    NeedPluginIds.PluginVote,
-    {
-      id: 'vote',
-      name: '投票管理',
-      desc: '投票模块所需要的插件，用于展示投票和提交投票',
-      logo: checkUrl('/plugins/vote/assets/logo.png'),
-      url: 'https://www.halo.run/store/apps/app-veyvzyhv',
-    },
-  ],
-  [
-    NeedPluginIds.PluginDataStatistics,
-    {
-      id: 'data-statistics',
-      name: '数据看板',
-      desc: '为 Halo2 提供强大的数据可视化统计功能，支持 Umami 流量统计、uptime、网站内部数据图表（标签、分类、文章趋势、评论排行、热门文章等）',
-      logo: checkUrl('/plugins/data-statistics/assets/logo.svg'),
-      url: 'https://www.halo.run/store/apps/app-rtnbbgfk',
-    },
-  ],
-])
+	[
+		NeedPluginIds.PluginUniHalo,
+		{
+			id: 'plugin-uni-halo',
+			name: 'UniHalo配置',
+			desc: 'uni-halo 核心插件，未安装和启用的情况下，将无法使用 uni-halo，请检查是否已安装和启用',
+			logo: checkUrl('/plugins/plugin-uni-halo/assets/logo.png'),
+			url: 'https://www.halo.run/store/apps/app-ryemX'
+		}
+	],
+	[
+		NeedPluginIds.PluginPhotos,
+		{
+			id: 'PluginPhotos',
+			name: '图库管理',
+			desc: '图库功能模块所需要的插件',
+			logo: checkUrl('/plugins/PluginPhotos/assets/logo.svg'),
+			url: 'https://www.halo.run/store/apps/app-BmQJW'
+		}
+	],
+	[
+		NeedPluginIds.PluginLinks,
+		{
+			id: 'PluginLinks',
+			name: '链接管理',
+			desc: '链接管理模块，用于网站友情链接功能模块',
+			logo: checkUrl('/plugins/PluginLinks/assets/logo.svg'),
+			url: 'https://www.halo.run/store/apps/app-hfbQg'
+		}
+	],
+	[
+		NeedPluginIds.PluginMoments,
+		{
+			id: 'PluginMoments',
+			name: '瞬间',
+			desc: '提供一个轻量级的内容图文、视频、音频等内容展示',
+			logo: checkUrl('/plugins/PluginMoments/assets/logo.svg'),
+			url: 'https://www.halo.run/store/apps/app-SnwWD'
+		}
+	],
+	[
+		NeedPluginIds.PluginSearchWidget,
+		{
+			id: 'PluginSearchWidget',
+			name: '搜索组件',
+			desc: '为应用提供统一的搜索组件',
+			logo: checkUrl('/plugins/PluginSearchWidget/assets/logo.svg'),
+			url: 'https://www.halo.run/store/apps/app-DlacW'
+		}
+	],
+	[
+		NeedPluginIds.PluginCommentWidget,
+		{
+			id: 'PluginCommentWidget',
+			name: '评论组件',
+			desc: '为用户前台提供完整的评论解决方案',
+			logo: checkUrl('/plugins/PluginCommentWidget/assets/logo.svg'),
+			url: 'https://www.halo.run/store/apps/app-YXyaD'
+		}
+	],
+	[
+		NeedPluginIds.PluginVote,
+		{
+			id: 'vote',
+			name: '投票管理',
+			desc: '投票模块所需要的插件，用于展示投票和提交投票',
+			logo: checkUrl('/plugins/vote/assets/logo.png'),
+			url: 'https://www.halo.run/store/apps/app-veyvzyhv'
+		}
+	],
+	[
+		NeedPluginIds.PluginDataStatistics,
+		{
+			id: 'data-statistics',
+			name: '数据看板',
+			desc: '为 Halo2 提供强大的数据可视化统计功能，支持 Umami 流量统计、uptime、网站内部数据图表（标签、分类、文章趋势、评论排行、热门文章等）',
+			logo: checkUrl('/plugins/data-statistics/assets/logo.svg'),
+			url: 'https://www.halo.run/store/apps/app-rtnbbgfk'
+		}
+	]
+]);

-/**
- * 检查插件是否启用、安装
- * @param pluginId 插件 id
- * @returns true = 安装、启用;false = 未安装启用
- */
-export async function checkNeedPluginAvailable(pluginId: string): Promise<boolean> {
-  try {
-    const available = await checkPluginAvailable(pluginId)
-    return available?.data?.available !== false
-  }
-  catch (err) {
-    console.error(`检查插件 ${pluginId} 可用性失败`, err)
-    return false
-  }
-}
-
-export function usePluginAvailable(pluginId: string, initial = true) {
-  /** 插件是否可用(默认 true,避免首帧闪现插件不可用占位;需要先置 false 的页面传 initial=false) */
-  const available = ref(initial)
-  /** 是否校验中 */
-  const checking = ref(false)
-
-  /**
-   * 执行插件可用性校验(刷新 available)
-   * @returns 当前是否可用(与 available.value 一致,便于一次性调用方直接取返回值)
-   */
-  async function check(): Promise<boolean> {
-    checking.value = true
-    try {
-      available.value = await checkNeedPluginAvailable(pluginId)
-      return available.value
-    }
-    finally {
-      checking.value = false
-    }
-  }
-
-  return { available, checking, check }
+export function usePluginAvailable(option: IPluginAvailableOption) {
+	const { pluginId, callback, tips = '功能正在开发中...', initalAvailable = false } = option;
+	const checking = ref(false);
+	const available = ref(initalAvailable ?? false);
+
+	/**
+	 * 检查插件是否启用、安装
+	 */
+	function check(): Promise<boolean> {
+		return new Promise<boolean>(async (resolve) => {
+			try {
+				checking.value = true;
+				const result = await checkPluginAvailable(pluginId);
+				console.log(`检查插件 ${pluginId} 可用性成功`, result);
+				available.value = result.data;
+				resolve(result.data);
+			} catch (err) {
+				console.error(`检查插件 ${pluginId} 可用性失败`, err);
+				available.value = false;
+				resolve(false);
+			} finally {
+				typeof callback === 'function' && callback(available.value);
+				checking.value = false;
+			}
+		});
+	}
+
+	return { pluginId, tips, checking, available, check };
 }