SoybeanAdmin业务模块开发实战指南
项目地址: https://gitcode.com/GitHub_Trending/soy/soybean-admin 本文全面介绍了SoybeanAdmin框架中核心业务模块的开发实现，涵盖用户管理与权限系统、数据表格与表单组件、图表可视化集成以及文件上传下载功能。通过详细的代码示例和架构设计说明，展示了如何基于Vue3、TypeScript和现代前端技术栈构建企业级后台管理系统。文章重点讲解了权限控制机制、响应式表格设计、ECharts集成方案以及大文件分片上传等高级功能的实现原理和最佳实践。
用户管理与权限系统实现
SoybeanAdmin 的用户管理与权限系统采用了现代化的设计理念，基于 Vue3、Pinia 和 TypeScript 构建，提供了完整的身份认证、用户信息管理、角色权限控制等功能。该系统支持前后端分离架构，既可以与静态路由配合使用，也支持动态路由的权限控制。
认证存储与状态管理
系统使用 Pinia 进行状态管理，在 auth 模块中定义了完整的认证状态和操作方法：
// 用户信息接口定义
interface UserInfo {
userId: string;
userName: string;
roles: string[];
buttons: string[];
}
// 认证存储核心状态
const token = ref(getToken());
const userInfo: Api.Auth.UserInfo = reactive({
userId: '',
userName: '',
roles: [],
buttons: []
});
系统通过 localStorage 存储 token 信息，确保用户登录状态的持久化：
// Token 存储与获取
function getToken() {
return localStg.get('token') || '';
}
function clearAuthStorage() {
localStg.remove('token');
localStg.remove('refreshToken');
}
登录认证流程
SoybeanAdmin 的登录流程采用了现代化的异步处理模式，支持 token 刷新机制：
权限控制机制
系统支持两种权限路由模式：静态路由和动态路由。通过环境变量配置：
const isStaticSuper = computed(() => {
const { VITE_AUTH_ROUTE_MODE, VITE_STATIC_SUPER_ROLE } = import.meta.env;
return VITE_AUTH_ROUTE_MODE === 'static' && userInfo.roles.includes(VITE_STATIC_SUPER_ROLE);
});
权限控制的核心在于用户角色和按钮权限的验证：
| 权限类型 | 数据结构 | 用途说明 |
|---|---|---|
| 角色权限 | roles: string[] | 控制页面级别的访问权限 |
| 按钮权限 | buttons: string[] | 控制功能按钮的操作权限 |
| 超级角色 | VITE_STATIC_SUPER_ROLE | 静态路由模式下的管理员角色 |
API 接口设计
系统提供了完整的认证相关 API 接口：
// 登录接口
export function fetchLogin(userName: string, password: string) {
return request<Api.Auth.LoginToken>({
url: '/auth/login',
method: 'post',
data: { userName, password }
});
}
// 获取用户信息接口
export function fetchGetUserInfo() {
return request<Api.Auth.UserInfo>({ url: '/auth/getUserInfo' });
}
// Token 刷新接口
export function fetchRefreshToken(refreshToken: string) {
return request<Api.Auth.LoginToken>({
url: '/auth/refreshToken',
method: 'post',
data: { refreshToken }
});
}
用户信息管理
用户信息管理模块提供了完整的 CRUD 操作和状态管理：
// 用户信息类型定义
type User = {
id: number;
userName: string;
userGender: '1' | '2' | null;
nickName: string;
userPhone: string;
userEmail: string;
userRoles: string[];
status: EnableStatus | null;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
系统支持用户信息的初始化、更新和重置操作：
安全性与错误处理
系统实现了完善的错误处理机制和安全防护：
async function login(userName: string, password: string, redirect = true) {
startLoading();
const { data: loginToken, error } = await fetchLogin(userName, password);
if (!error) {
const pass = await loginByToken(loginToken);
if (pass) {
await routeStore.initAuthRoute();
if (redirect) {
await redirectFromLogin();
}
// 成功通知
window.$notification?.success({
title: $t('page.login.common.loginSuccess'),
content: $t('page.login.common.welcomeBack', { userName: userInfo.userName }),
duration: 4500
});
}
} else {
resetStore(); // 认证失败时重置状态
}
endLoading();
}
路由权限集成
用户权限系统与路由系统深度集成，支持动态路由的按需加载：
// 初始化权限路由
async function initAuthRoute() {
const { isDynamicRouteMode } = useAppStore();
if (isDynamicRouteMode) {
// 动态路由模式：从后端获取路由配置
await initDynamicRoute();
} else {
// 静态路由模式：使用预设路由配置
await initStaticRoute();
}
}
这种设计使得 SoybeanAdmin 能够灵活适应不同的业务场景，既支持简单的静态权限配置，也支持复杂的动态权限管理。
系统的用户管理与权限实现体现了现代前端架构的最佳实践，通过类型安全的 TypeScript 定义、响应式的状态管理、模块化的代码组织，为开发者提供了强大而灵活的用户权限管理解决方案。
数据表格与表单组件开发
在SoybeanAdmin中，数据表格和表单组件是后台管理系统的核心组成部分。该项目基于Vue3、TypeScript和Naive UI构建了一套高度可复用、类型安全的表格和表单解决方案，极大地提升了开发效率和代码质量。
表格组件的架构设计
SoybeanAdmin采用组合式API和自定义Hooks的方式封装表格功能，提供了useTable和useTableOperate两个核心Hook：
// 表格基础Hook
const {
columns,
data,
loading,
pagination,
getData,
searchParams
} = useTable({
apiFn: fetchGetUserList,
showTotal: true,
apiParams: { current: 1, size: 10 },
columns: () => [...]
});
// 表格操作Hook
const {
drawerVisible,
operateType,
editingData,
handleAdd,
handleEdit
} = useTableOperate(data, getData);
表格列配置的类型系统
项目定义了完善的类型系统来确保表格列配置的类型安全：
表格列配置示例展示了强大的渲染能力：
const columns = () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
},
{
key: 'userName',
title: $t('page.manage.user.userName'),
align: 'center',
minWidth: 100
},
{
key: 'status',
title: $t('page.manage.user.userStatus'),
align: 'center',
width: 100,
render: row => {
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
1: 'success',
2: 'warning'
};
return <NTag type={tagMap[row.status]}>{$t(enableStatusRecord[row.status])}</NTag>;
}
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => (
<div class="flex-center gap-8px">
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
{$t('common.edit')}
</NButton>
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
<NButton type="error" ghost size="small">
{$t('common.delete')}
</NButton>
</NPopconfirm>
</div>
)
}
];
表单组件的开发实践
SoybeanAdmin的表单组件基于Naive UI的Form组件进行封装，提供了统一的验证规则管理和表单操作Hook。
表单验证规则系统
项目内置了完善的表单验证规则管理系统：
export function useFormRules() {
const patternRules = {
userName: {
pattern: REG_USER_NAME,
message: $t('form.userName.invalid'),
trigger: 'change'
},
phone: {
pattern: REG_PHONE,
message: $t('form.phone.invalid'),
trigger: 'change'
},
pwd: {
pattern: REG_PWD,
message: $t('form.pwd.invalid'),
trigger: 'change'
},
email: {
pattern: REG_EMAIL,
message: $t('form.email.invalid'),
trigger: 'change'
}
};
const formRules = {
userName: [createRequiredRule($t('form.userName.required')), patternRules.userName],
phone: [createRequiredRule($t('form.phone.required')), patternRules.phone],
pwd: [createRequiredRule($t('form.pwd.required')), patternRules.pwd],
email: [createRequiredRule($t('form.email.required')), patternRules.email]
};
return { patternRules, formRules, defaultRequiredRule, createRequiredRule };
}
表单数据流管理
表单组件采用响应式数据管理，支持增删改查操作：
表单组件的实现示例：
<script setup lang="ts">
const { formRef, validate, restoreValidation } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();
const model = reactive({
userName: '',
userGender: null,
nickName: '',
userPhone: '',
userEmail: '',
userRoles: [],
status: null
});
const rules = {
userName: defaultRequiredRule,
status: defaultRequiredRule
};
async function handleSubmit() {
await validate();
// 提交数据逻辑
window.$message?.success($t('common.updateSuccess'));
emit('submitted');
}
</script>
<template>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.manage.user.userName')" path="userName">
<NInput v-model:value="model.userName" />
</NFormItem>
<NFormItem :label="$t('page.manage.user.userGender')">
<NRadioGroup v-model:value="model.userGender">
<NRadio v-for="item in userGenderOptions" :key="item.value"
:value="item.value" :label="$t(item.label)" />
</NRadioGroup>
</NFormItem>
</NForm>
</template>
高级功能特性
响应式表格分页
SoybeanAdmin的表格分页支持移动端和桌面端的自适应显示：
const mobilePagination = computed(() => {
const p: PaginationProps = {
...pagination,
pageSlot: isMobile.value ? 3 : 9,
prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
};
return p;
});
列显示控制
支持动态显示/隐藏表格列功能：
const { columnChecks, reloadColumns } = useTable(config);
// 监听语言变化重新加载列配置
watch(() => appStore.locale, () => {
reloadColumns();
});
批量操作支持
表格支持多选和批量操作：
const { checkedRowKeys, onBatchDeleted } = useTableOperate(data, getData);
async function handleBatchDelete() {
console.log(checkedRowKeys.value); // 选中的行ID
onBatchDeleted(); // 批量删除后的回调
}
最佳实践建议
- 类型安全优先：充分利用TypeScript的类型系统，为表格和表单定义完整的类型约束
- 组件复用：通过自定义Hooks实现业务逻辑的复用，避免重复代码
- 国际化支持：所有文本内容都通过
$t函数进行国际化处理 - 响应式设计：确保表格和表单在不同屏幕尺寸下都有良好的显示效果
- 错误处理：完善的表单验证和错误提示机制，提升用户体验
通过SoybeanAdmin的表格和表单组件体系，开发者可以快速构建出功能完善、用户体验优良的后台管理系统界面，大大提高了开发效率和代码质量。
图表可视化与ECharts集成
在现代后台管理系统中，数据可视化是提升用户体验和决策效率的关键功能。SoybeanAdmin基于ECharts 5.5.1构建了强大的图表可视化解决方案，通过精心设计的Hook封装和组件化实现，为开发者提供了开箱即用的图表功能。
ECharts核心Hook设计
SoybeanAdmin通过useEcharts自定义Hook实现了ECharts的完整生命周期管理，该Hook位于src/hooks/common/echarts.ts中，提供了以下核心功能：
// ECharts配置类型定义
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| PieSeriesOption
| ScatterSeriesOption
| PictorialBarSeriesOption
| RadarSeriesOption
| GaugeSeriesOption
| TitleComponentOption
| LegendComponentOption
| TooltipComponentOption
| GridComponentOption
| ToolboxComponentOption
| DatasetComponentOption
>;
// Hook函数签名
export function useEcharts<T extends ECOption>(
optionsFactory: () => T,
hooks: ChartHooks = {}
)
该Hook支持多种图表类型，包括柱状图、折线图、饼图、散点图、象形柱图、雷达图和仪表盘等，通过模块化的方式按需引入，确保包体积的最优化。
响应式图表实现
SoybeanAdmin的图表组件具备完整的响应式能力，能够自动适应容器尺寸变化和主题切换：
// 响应式尺寸监听
const { width, height } = useElementSize(domRef, initialSize);
// 主题切换处理
watch(darkMode, () => {
changeTheme();
});
// 尺寸变化处理
watch([width, height], ([newWidth, newHeight]) => {
renderChartBySize(newWidth, newHeight);
});
这种设计确保了图表在不同屏幕尺寸和主题模式下都能保持最佳的显示效果。
多语言国际化支持
图表组件完美集成国际化系统，支持动态语言切换：
function updateLocale() {
updateOptions((opts, factory) => {
const originOpts = factory();
opts.legend.data = originOpts.legend.data;
opts.series[0].name = originOpts.series[0].name;
opts.series[1].name = originOpts.series[1].name;
return opts;
});
}
实际应用示例
以下是一个折线图组件的完整实现示例：
<script setup lang="ts">
import { watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
const appStore = useAppStore();
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: { trigger: 'axis' },
legend: {
data: [$t('page.home.downloadCount'), $t('page.home.registerCount')]
},
xAxis: { type: 'category', data: [] },
yAxis: { type: 'value' },
series: [
{
color: '#8e9dff',
name: $t('page.home.downloadCount'),
type: 'line',
smooth: true,
data: [] as number[]
}
]
}));
// 数据模拟和更新逻辑
async function mockData() {
await new Promise(resolve => setTimeout(resolve, 1000));
updateOptions(opts => {
opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00'];
opts.series[0].data = [4623, 6145, 6268, 6411];
return opts;
});
}
</script>
<template>
<NCard :bordered="false" class="card-wrapper">
<div ref="domRef" class="h-360px overflow-hidden"></div>
</NCard>
</template>
性能优化策略
SoybeanAdmin在图表实现中采用了多项性能优化措施：
- 按需引入：只引入实际使用的ECharts模块
- 作用域管理：使用Vue3的effectScope管理副作用
- 懒加载：图表数据异步加载，避免阻塞页面渲染
- 内存管理：组件卸载时自动销毁图表实例
主题适配机制
图表系统深度集成主题管理系统，支持亮色和暗色主题的无缝切换：
开发最佳实践
在使用SoybeanAdmin的图表功能时，建议遵循以下最佳实践：
- 配置分离：将图表配置与业务逻辑分离，提高代码可维护性
- 类型安全：充分利用TypeScript类型系统，避免配置错误
- 响应式设计：确保图表容器具有明确的尺寸定义
- 错误处理：添加适当的加载状态和错误处理机制
通过这套完整的图表可视化解决方案，开发者可以快速构建出专业级的数据展示界面，提升后台管理系统的数据呈现能力和用户体验。
文件上传与下载功能实现
在现代Web应用中，文件上传与下载是业务系统中不可或缺的核心功能。SoybeanAdmin基于Vue3和TypeScript技术栈，提供了优雅且强大的文件处理解决方案。本文将深入探讨如何在SoybeanAdmin中实现高效、安全的文件上传与下载功能。
技术架构设计
SoybeanAdmin采用前后端分离架构，文件上传下载功能通过RESTful API与后端服务进行交互。整个文件处理流程遵循以下架构设计：
文件上传功能实现
1. 前端上传组件设计
在SoybeanAdmin中，文件上传通常使用Naive UI的n-upload组件，结合自定义的业务逻辑封装：
<template>
<n-upload
:action="uploadUrl"
:headers="headers"
:data="extraData"
@finish="handleUploadFinish"
@error="handleUploadError"
:max="5"
:multiple="true"
>
<n-button>选择文件</n-button>
</n-upload>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
const authStore = useAuthStore();
const uploadUrl = import.meta.env.VITE_API_BASE_URL + '/file/upload';
const headers = computed(() => ({
Authorization: `Bearer ${authStore.token}`
}));
const extraData = {
bizType: 'user_avatar',
userId: authStore.userInfo?.id
};
const handleUploadFinish = ({ file, event }: any) => {
const response = JSON.parse(event?.target?.response);
if (response.code === '0000') {
console.log('上传成功:', response.data);
}
};
const handleUploadError = (error: Error) => {
console.error('上传失败:', error);
};
</script>
2. API服务层封装
在src/service/api/目录下创建文件上传的API服务：
// file.ts
import { request } from '../request';
export interface FileUploadParams {
file: File;
bizType: string;
userId?: string;
}
export interface FileInfo {
id: string;
name: string;
size: number;
url: string;
mimeType: string;
uploadTime: string;
}
/** 文件上传 */
export function uploadFile(params: FileUploadParams) {
const formData = new FormData();
formData.append('file', params.file);
formData.append('bizType', params.bizType);
if (params.userId) {
formData.append('userId', params.userId);
}
return request<FileInfo>({
url: '/file/upload',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
/** 获取文件列表 */
export function getFileList(params: {
bizType?: string;
page: number;
size: number;
}) {
return request<{
list: FileInfo[];
total: number;
}>({
url: '/file/list',
method: 'get',
params
});
}
3. 类型定义扩展
在src/typings/api.d.ts中扩展文件相关的类型定义：
declare namespace Api {
namespace File {
interface FileInfo {
id: string;
name: string;
size: number;
url: string;
mimeType: string;
uploadTime: string;
bizType: string;
}
interface UploadParams {
file: globalThis.File;
bizType: string;
userId?: string;
}
interface ListParams {
bizType?: string;
page: number;
size: number;
}
interface ListResult {
list: FileInfo[];
total: number;
}
}
}
文件下载功能实现
1. 前端下载组件设计
文件下载功能通常通过创建隐藏的链接元素来实现：
<template>
<n-button @click="handleDownload">下载文件</n-button>
</template>
<script setup lang="ts">
import { downloadFile } from '@/utils/file';
const props = defineProps<{
fileId: string;
fileName: string;
}>();
const handleDownload = async () => {
try {
await downloadFile(props.fileId, props.fileName);
} catch (error) {
console.error('下载失败:', error);
}
};
</script>
2. 下载工具函数封装
在src/utils/目录下创建文件下载工具函数：
// file.ts
import { request } from '@/service/request';
import { localStg } from './storage';
/**
* 文件下载工具函数
* @param fileId 文件ID
* @param fileName 文件名
*/
export async function downloadFile(fileId: string, fileName: string) {
try {
const response = await request({
url: `/file/download/${fileId}`,
method: 'get',
responseType: 'blob'
});
// 创建Blob对象
const blob = new Blob([response]);
// 创建下载链接
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = fileName;
// 触发下载
document.body.appendChild(link);
link.click();
// 清理资源
document.body.removeChild(link);
window.URL.revokeObjectURL(downloadUrl);
} catch (error) {
throw new Error(`文件下载失败: ${error}`);
}
}
/**
* 预览文件（支持图片、PDF等）
* @param fileUrl 文件URL
*/
export function previewFile(fileUrl: string) {
window.open(fileUrl, '_blank');
}
高级功能实现
1. 大文件分片上传
对于大文件上传，实现分片上传功能：
// large-file-upload.ts
export class LargeFileUploader {
private chunkSize: number;
private file: File;
private totalChunks: number;
private uploadedChunks: number;
constructor(file: File, chunkSize = 5 * 1024 * 1024) {
this.file = file;
this.chunkSize = chunkSize;
this.totalChunks = Math.ceil(file.size / chunkSize);
this.uploadedChunks = 0;
}
async upload() {
const fileHash = await this.calculateFileHash();
const uploadId = await this.initUpload(fileHash);
for (let chunkIndex = 0; chunkIndex < this.totalChunks; chunkIndex++) {
const chunk = this.getChunk(chunkIndex);
await this.uploadChunk(uploadId, chunkIndex, chunk, fileHash);
this.uploadedChunks++;
}
return await this.completeUpload(uploadId, fileHash);
}
private getChunk(index: number): Blob {
const start = index * this.chunkSize;
const end = Math.min(start + this.chunkSize, this.file.size);
return this.file.slice(start, end);
}
private async calculateFileHash(): Promise<string> {
// 使用crypto API计算文件哈希
const buffer = await this.file.arrayBuffer();
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
return Array.from(new Uint8Array(hashBuffer))
.map(b => b.toString(16).padStart(2, '0'))
.join('');
}
private async initUpload(fileHash: string) {
const response = await request({
url: '/file/upload/init',
method: 'post',
data: {
fileName: this.file.name,
fileSize: this.file.size,
fileHash,
totalChunks: this.totalChunks
}
});
return response.uploadId;
}
private async uploadChunk(uploadId: string, chunkIndex: number, chunk: Blob, fileHash: string) {
const formData = new FormData();
formData.append('uploadId', uploadId);
formData.append('chunkIndex', chunkIndex.toString());
formData.append('chunk', chunk);
formData.append('fileHash', fileHash);
await request({
url: '/file/upload/chunk',
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
});
}
private async completeUpload(uploadId: string, fileHash: string) {
return await request({
url: '/file/upload/complete',
method: 'post',
data: { uploadId, fileHash }
});
}
}
2. 文件上传状态管理
使用Pinia进行文件上传状态管理：
// stores/modules/file.ts
import { defineStore } from 'pinia';
interface UploadTask {
id: string;
file: File;
progress: number;
status: 'pending' | 'uploading' | 'completed' | 'error';
error?: string;
}
export const useFileStore = defineStore('file', {
state: () => ({
uploadTasks: [] as UploadTask[],
downloadTasks: [] as string[]
}),
actions: {
addUploadTask(file: File) {
const task: UploadTask = {
id: Date.now().toString(),
file,
progress: 0,
status: 'pending'
};
this.uploadTasks.push(task);
return task.id;
},
updateUploadProgress(taskId: string, progress: number) {
const task = this.uploadTasks.find(t => t.id === taskId);
if (task) {
task.progress = progress;
task.status = progress < 100 ? 'uploading' : 'completed';
}
},
setUploadError(taskId: string, error: string) {
const task = this.uploadTasks.find(t => t.id === taskId);
if (task) {
task.status = 'error';
task.error = error;
}
}
}
});
安全性与性能优化
1. 文件类型验证
// file-validation.ts
const ALLOWED_FILE_TYPES = {
IMAGE: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
DOCUMENT: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
VIDEO: ['video/mp4', 'video/mpeg', 'video/quicktime']
};
export function validateFileType(file: File, allowedTypes: string[]): boolean {
return allowedTypes.includes(file.type);
}
export function validateFileSize(file: File, maxSizeMB: number): boolean {
return file.size <= maxSizeMB * 1024 * 1024;
}
export function getFileExtension(filename: string): string {
return filename.split('.').pop()?.toLowerCase() || '';
}
2. 上传进度监控
<template>
<n-upload
:action="uploadUrl"
@change="handleUploadChange"
@progress="handleUploadProgress"
>
<n-upload-dragger>
<div style="margin-bottom: 12px">
<n-icon size="48" :depth="3">
<CloudUploadOutline />
</n-icon>
</div>
<n-text style="font-size: 16px">点击或者拖动文件到该区域来上传</n-text>
</n-upload-dragger>
</n-upload>
<n-progress
v-for="task in fileStore.uploadTasks"
:key="task.id"
:percentage="task.progress"
:status="getProgressStatus(task.status)"
/>
</template>
<script setup lang="ts">
import { CloudUploadOutline } from '@vicons/ionicons5';
import { useFileStore } from '@/stores/modules/file';
const fileStore = useFileStore();
const handleUploadChange = (data: { file: any; fileList: any[] }) => {
const taskId = fileStore.addUploadTask(data.file.file);
// 开始上传任务
};
const handleUploadProgress = (event: ProgressEvent, file: any) => {
const progress = Math.round((event.loaded / event.total) * 100);
fileStore.updateUploadProgress(file.uid, progress);
};
const getProgressStatus = (status: string) => {
switch (status) {
case 'completed': return 'success';
case 'error': return 'error';
default: return 'default';
}
};
</script>
错误处理与用户体验
1. 统一错误处理机制
// error-handler.ts
export class FileUploadError extends Error {
constructor(
message: string,
public code: string,
public details?: any
) {
super(message);
this.name = 'FileUploadError';
}
}
export function handleUploadError(error: any) {
if (error instanceof FileUploadError) {
switch (error.code) {
case 'FILE_TOO_LARGE':
window.$message.error('文件大小超过限制');
break;
case 'INVALID_FILE_TYPE':
window.$message.error('不支持的文件类型');
break;
case 'NETWORK_ERROR':
window.$message.error('网络错误，请检查网络连接');
break;
default:
window.$message.error('上传失败，请重试');
}
} else {
window.$message.error('未知错误');
}
}
2. 重试机制
// retry-utils.ts
export async function withRetry<T>(
operation: () => Promise<T>,
maxRetries = 3,
delay = 1000
): Promise<T> {
let lastError: Error;
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await operation();
} catch (error) {
lastError = error as Error;
if (attempt < maxRetries) {
await new Promise(resolve => setTimeout(resolve, delay * attempt));
}
}
}
throw lastError;
}
通过以上实现，SoybeanAdmin提供了一个完整、健壮的文件上传下载解决方案，涵盖了从基础功能到高级特性的全方位支持。这种设计不仅保证了功能的完整性，还充分考虑了用户体验和系统性能，为业务开发提供了强有力的支撑。
总结
SoybeanAdmin提供了一个完整的前端解决方案，通过模块化的架构设计和类型安全的代码实现，显著提升了后台管理系统的开发效率和质量。文章详细介绍了四大核心模块的实现：权限系统采用Pinia状态管理和动态路由控制；表格表单组件通过自定义Hooks实现高度复用；图表可视化基于ECharts提供响应式展示；文件处理支持大文件分片和进度监控。这些模块共同构成了一个功能完备、性能优异的管理系统框架，为开发者提供了最佳实践参考和技术实现方案。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
