refactor: 重命名 CRUD 组件为 Crud 并简化字典标签类型

- CURD 组件 PageModal、PageSearch、PageContent、usePage 重命名为 CrudModal、CrudSearch、CrudTable、useCrudPage
- 字典项标签类型改用 primary/success/warning/danger/info，保留历史单字母值兼容读取
- 字典项页面拆分为独立子组件，移除 GithubCorner 组件
- 新增 icon 工具与 screen 样式
- 新增路由缓存、路由跳转、大屏与表格 CRUD 示例页

src/composables/usePageTable.ts

@@ -19,10 +19,8 @@ export function usePageTable<T, Q extends BaseQueryParams = BaseQueryParams>(
 
   /**
    * 拉取当前查询参数对应的分页数据
-   *
    * 只负责请求和回填，不处理弹窗、路由或消息提示
-   */
-  async function fetchData(): Promise<void> {
+   */ async function fetchData(): Promise<void> {
     loading.value = true;
     try {
       const data = await request(params);
@@ -43,17 +41,14 @@ export function usePageTable<T, Q extends BaseQueryParams = BaseQueryParams>(
 
   /**
    * 恢复初始查询参数
-   *
    * 保持响应式引用不变，不触发查询
-   */
-  function resetParams(): void {
+   */ function resetParams(): void {
     Object.assign(params, initialParams);
   }
 
   /**
    * 恢复初始查询参数并重新查询
-   */
-  function handleResetQuery(): void {
+   */ function handleResetQuery(): void {
     onBeforeReset?.();
     resetParams();
     fetchData();
@@ -74,9 +69,7 @@ export function usePageTable<T, Q extends BaseQueryParams = BaseQueryParams>(
 export interface UsePageTableOptions<T, Q extends BaseQueryParams> {
   /** 初始查询参数，同时作为重置基准 */
   initialParams: Q;
-  /**
-   * 分页请求函数
-   */
+  /** 分页请求函数 */
   request: (params: Q) => Promise<PageResult<T>>;
   /**
    * 重置查询前的回调
@@ -95,20 +88,12 @@ export interface UsePageTableReturn<T, Q extends BaseQueryParams> {
   total: Ref<number>;
   /** 当前查询参数 */
   params: Q;
-  /**
-   * 拉取分页数据
-   */
+  /** 拉取分页数据 */
   fetchData: () => Promise<void>;
-  /**
-   * 回到第一页并查询
-   */
+  /** 回到第一页并查询 */
   handleQuery: () => void;
-  /**
-   * 恢复初始参数并重新查询
-   */
+  /** 恢复初始参数并重新查询 */
   handleResetQuery: () => void;
-  /**
-   * 恢复初始参数但不触发查询
-   */
+  /** 恢复初始参数但不触发查询 */
   resetParams: () => void;
 }

src/composables/useTableSelection.ts

@@ -1,15 +1,15 @@
 import { computed, ref } from "vue";
 
 /**
- * 表格行选择 Composable。
+ * 表格行选择 Composable
  *
- * 提供统一的表格行选择逻辑，包括选中 ID 管理和清空选择。
+ * 提供统一的表格行选择逻辑，包括选中 ID 管理和清空选择
  *
  * 规则：
  *
- * - 不和分页状态合并。
- * - 不和弹窗状态合并。
- * - 不和 API 请求合并。
+ * - 不和分页状态合并
+ * - 不和弹窗状态合并
+ * - 不和 API 请求合并
  *
  * @template T 数据项类型，必须包含可选 `id` 属性
  *
@@ -19,36 +19,36 @@ import { computed, ref } from "vue";
  * ```
  */
 export function useTableSelection<T extends { id?: string | number }>() {
-  /** 选中的数据项 ID 列表。 */
+  // 选中的数据项 ID 列表
   const selectedIds = ref<(string | number)[]>([]);
 
-  /** 选中数量。 */
+  // 选中数量
   const selectedCount = computed(() => selectedIds.value.length);
 
-  /** 是否有选中项。 */
+  // 是否有选中项
   const hasSelection = computed(() => selectedIds.value.length > 0);
 
   /**
-   * 表格选中项变化处理。
+   * 表格选中项变化处理
    *
    * @param selection 选中的行数据列表
-   */
-  function handleSelectionChange(selection: T[]): void {
+   */ function handleSelectionChange(selection: T[]): void {
     selectedIds.value = selection.flatMap((item) =>
       item.id === undefined || item.id === null ? [] : [item.id]
     );
   }
 
   /**
-   * 检查指定 ID 是否被选中。
+   * 检查指定 ID 是否被选中
    *
    * @param id 要检查的 ID
-   */
-  function isSelected(id: string | number): boolean {
+   */ function isSelected(id: string | number): boolean {
     return selectedIds.value.includes(id);
   }
 
-  /** 清空选中 ID。注意：不会清空表格 UI 上的勾选状态，需页面自行调用表格实例的 `clearSelection`。 */
+  /**
+   * 清空选中 ID（不改变表格 UI 勾选状态，需页面自行调用表格实例的 `clearSelection`）
+   */
   function clearSelection(): void {
     selectedIds.value = [];
   }