优化更新

2026-09-13 23:01:19 +08:00
parent 0c67b3e8b5
commit 23bd737b82
88 changed files with 2214 additions and 2503 deletions
@@ -21,20 +21,6 @@ export function getNormalPath(path: string) {
    return newPath[newPath.length - 1] === '/' ? newPath.slice(0, -1) : newPath;
 }

-// 确认弹窗封装
-export function confirm(msg: string, type: 'warning') {
-    return ElMessageBox.confirm(msg, '温馨提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: type,
-    });
-}
-
-// 消息提示封装
-export function message(msg: string, type = 'success') {
-    ElMessage[type](msg);
-}
-
 // 文件流下载
 export function streamFileDownload(file: any, fileName = '文件名称.zip') {
    const blob = new Blob([file], { type: 'application/octet-stream;charset=UTF-8' });
@@ -49,6 +35,38 @@ export function streamFileDownload(file: any, fileName = '文件名称.zip') {
 }
 ```

+### 消息提示与确认弹窗
+
+项目使用 NaiveUI 的 `useMessage` 和 `useDialog` 提供消息提示和确认弹窗：
+
+```typescript
+import { useMessage, useDialog } from 'naive-ui';
+
+// 在 setup 中初始化
+const message = useMessage();
+const dialog = useDialog();
+
+// 消息提示
+message.success('操作成功');
+message.error('操作失败');
+message.warning('请注意');
+
+// 确认弹窗
+dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+        // 执行删除操作
+    },
+});
+```
+
+:::warning 注意
+`useMessage` 和 `useDialog` 必须在 Vue 组件的 `setup` 中调用。如果需要在非组件环境（如 Axios 拦截器）中使用，可通过 `window.__message` 和 `window.__dialog` 全局引用访问。
+:::
+
 ### 树结构操作

 `auth.ts` 中还包含树结构转换工具：
@@ -181,14 +199,31 @@ export function formatToDate(date: Date, formatStr = DATE_FORMAT): string {
 }
 ```

-`dateUtil` 也被 `vite.config.ts` 使用，记录构建时间戳：
+## renderIcon 工具
+
+图标渲染工具，用于在 TableAction 等组件中渲染 NaiveUI 图标：

 ```typescript
-// vite.config.ts
-import { formatToDateTime } from './src/utils/dateUtil';
-const __APP_INFO__ = {
-    pkg: { dependencies, devDependencies, name, version },
-    lastBuildTime: formatToDateTime(new Date()),
+// src/utils/index.ts
+import { h } from 'vue';
+import { NIcon } from 'naive-ui';
+
+export function renderIcon(icon) {
+    return () => h(NIcon, null, { default: () => h(icon) });
+}
+```
+
+使用示例：
+
+```typescript
+import { renderIcon } from '@/utils';
+import { FormOutlined, DeleteOutlined } from '@vicons/antd';
+
+const actionColumn = {
+    actions: [
+        { label: '编辑', icon: renderIcon(FormOutlined), type: 'info' },
+        { label: '删除', icon: renderIcon(DeleteOutlined), type: 'error' },
+    ],
 };
 ```

@@ -233,9 +268,9 @@ export enum PageEnum {
 ```

 :::tip 温馨提示
-`Storage` 工具类自动将键名转为大写（如 `access-token` → `ACCESS-TOKEN`），存储时包含过期时间，读取时自动检查是否过期。`auth.ts` 中的 `confirm` 和 `message` 函数是对 ElementPlus 的简封装，在业务组件中直接调用即可。
+`Storage` 工具类自动将键名转为大写（如 `access-token` → `ACCESS-TOKEN`），存储时包含过期时间，读取时自动检查是否过期。项目使用 NaiveUI 的 `useMessage` 和 `useDialog` 提供消息提示和确认弹窗，`renderIcon` 工具函数用于在操作列等场景渲染 @vicons 图标。
 :::

 ## 总结

-工具函数库提供了 Storage（本地存储，支持过期）、auth（认证管理、树结构操作、文件下载）、dateUtil（日期格式化）、httpEnum/pageEnum（枚举定义）等通用能力。`confirm` 和 `message` 是 ElementPlus 的简封装，`arrayToTree`/`treeToArray` 处理菜单数据转换。
+工具函数库提供了 Storage（本地存储，支持过期）、auth（认证管理、树结构操作、文件下载）、dateUtil（日期格式化）、renderIcon（图标渲染）、httpEnum/pageEnum（枚举定义）等通用能力。消息提示使用 NaiveUI 的 `useMessage`，确认弹窗使用 `useDialog`，图标使用 `@vicons/antd` 库。