系统组件

本小节，介绍项目中封装的系统组件。

1. Wot Design Uni 组件库

项目使用 Wot Design Uni (opens new window) 作为基础 UI 组件库，提供了丰富的移动端组件。

大多数情况下，你可以直接使用 Wot Design Uni 提供的组件来构建界面。

1. DictTag 字典标签

字典标签组件，用于展示字典数据的标签，支持颜色高亮。

• 源码位置：src/components/dict-tag/dict-tag.vue (opens new window)
• 详细文档：字典数据

2. UserPicker 用户选择器

用户选择器组件，支持单选和多选模式，内置搜索过滤功能。

• 源码位置：src/components/system-select/user-picker.vue (opens new window)
• 实战案例（单选）：src/pages-system/dept/form/index.vue (opens new window) 的 formData.leaderUserId 部分
• 实战案例（多选）：src/pages-bpm/user-group/form/index.vue (opens new window) 的 formData.userIds 部分
• 实战案例（获取昵称）：src/pages-system/operate-log/modules/search-form.vue (opens new window) 的 getUserNickname 部分

3. 文件上传

项目提供了两种文件上传方式：

3.1 uploadFile API

直接调用上传 API，适用于简单场景。

• 源码位置：src/api/infra/file/index.ts (opens new window)
• 实战案例：src/pages-infra/file/components/file-list.vue (opens new window) 的 handleUpload 部分

3.2 uploadFileFromPath 工具

支持前端直连上传（S3）和后端上传两种模式，通过环境变量 VITE_UPLOAD_TYPE 配置。

• 源码位置：src/utils/uploadFile.ts (opens new window)
• 实战案例：src/pages-core/user/profile/index.vue (opens new window) 的 uploadFileFromPath 部分

import { uploadFileFromPath } from '@/utils/uploadFile'

// 上传文件到指定目录
const url = await uploadFileFromPath(filePath, 'avatar')

3.3 useUpload Hook

src/hooks/useUpload.ts (opens new window) 封装了文件选择、校验、上传的完整流程。

import useUpload from '@/hooks/useUpload'

const { loading, data, run } = useUpload({
  fileType: 'image',
  maxSize: 5 * 1024 * 1024,
  success: (url) => console.log('上传成功:', url),
})

// 触发选择和上传
run()