签入版本

This commit is contained in:
2026-10-11 19:06:33 +08:00
parent 17d28de8b7
commit 4084c6bd17
674 changed files with 58855 additions and 1892 deletions
@@ -141,14 +141,15 @@ export function getDictItemByCode(code) {
```vue
<template>
<el-select v-model="formData.status" placeholder="请选择状态">
<el-option
<a-select v-model:value="formData.status" placeholder="请选择状态" style="width: 100%">
<a-select-option
v-for="item in statusOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
>
{{ item.name }}
</a-select-option>
</a-select>
</template>
<script setup>
@@ -86,6 +86,8 @@
## 前端错误处理
```typescript
import { message } from 'ant-design-vue';
// Axios 响应拦截器
axios.interceptors.response.use(response => {
const { code, msg, data } = response.data;
@@ -101,12 +103,12 @@ axios.interceptors.response.use(response => {
}
if (code === 403 || response.status === 403) {
ElMessage.error(msg || '无权限');
message.error(msg || '无权限');
return;
}
// 其他错误
ElMessage.error(msg || '操作失败');
message.error(msg || '操作失败');
return Promise.reject(new Error(msg));
});
```
@@ -286,16 +286,16 @@ axios.interceptors.response.use(
// 权限不足
if (code === 403 || response.status === 403) {
ElMessage.error(msg || '无访问权限');
message.error(msg || '无访问权限');
return Promise.reject(new Error(msg));
}
// 其他业务错误
ElMessage.error(msg || '操作失败');
message.error(msg || '操作失败');
return Promise.reject(new Error(msg));
},
error => {
ElMessage.error('网络错误');
message.error('网络错误');
return Promise.reject(error);
}
);
@@ -320,9 +320,9 @@ const handleImport = async (file) => {
const res = await importUsers(file);
// res = { count: 8, errors: [{ row: 3, name: "...", reason: "..." }] }
if (res.errors.length === 0) {
ElMessage.success(`成功导入 ${res.count} 条`);
message.success(`成功导入 ${res.count} 条`);
} else {
ElMessage.warning(`成功 ${res.count} 条,失败 ${res.errors.length} 条`);
message.warning(`成功 ${res.count} 条,失败 ${res.errors.length} 条`);
}
};
```
@@ -164,11 +164,11 @@ Authorization: Bearer <access_token>
```bash
# curl
curl http://localhost:8000/api/user/page \
curl http://admin.laravel13.antdvue/api/user/page \
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
# curl(带分页参数)
curl "http://localhost:8000/api/user/page?pageNo=1&pageSize=10" \
curl "http://admin.laravel13.antdvue/api/user/page?pageNo=1&pageSize=10" \
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
```
@@ -363,7 +363,7 @@ Authorization: Bearer <access_token>
前端路由守卫支持通过 URL 参数传递 Token,适用于 SSO 单点登录场景:
```text
http://localhost:8001/?token=<access_token>
http://localhost:8002/?token=<access_token>
```
**前端处理逻辑:**
@@ -403,14 +403,17 @@ config.headers['Authorization'] = `Bearer ${token}`;
// code === 401(ResultEnum.TIMEOUT)
case ResultEnum.TIMEOUT:
if (router.currentRoute.value?.name === PageEnum.BASE_LOGIN_NAME) return;
ElMessageBox.confirm('登录身份已失效,请重新登录!', '提示', {
type: 'warning',
})
.then(() => {
Modal.warning({
title: '提示',
content: '登录身份已失效,请重新登录!',
closable: false,
maskClosable: false,
okText: '确定',
onOk: () => {
storage.clear();
window.location.href = PageEnum.BASE_LOGIN; // '/login'
})
.catch(() => {});
},
});
break;
```
@@ -32,7 +32,7 @@
"ok": true,
"msg": "上传成功",
"data": {
"fileUrl": "http://localhost:8000/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
"fileUrl": "http://admin.laravel13.antdvue/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
"filePath": "temp/20261002/123456_a1b2c3d4e5f6.jpg",
"originalName": "photo.jpg",
"fileSize": 102400,
@@ -47,7 +47,7 @@
| 字段 | 类型 | 说明 | 示例 |
|------|------|------|------|
| `fileUrl` | string | 可访问 URL(`FILE_DOMAIN_URL` 为空时等于相对路径) | `http://localhost:8000/uploads/temp/...` |
| `fileUrl` | string | 可访问 URL(`FILE_DOMAIN_URL` 为空时等于相对路径) | `http://admin.laravel13.antdvue/uploads/temp/...` |
| `filePath` | string | 相对存储路径(**提交表单建议用此字段**) | `temp/20261002/123456_a1b2....jpg` |
| `originalName` | string | 原始文件名 | `photo.jpg` |
| `fileSize` | number | 文件大小(字节) | `102400` |
@@ -102,52 +102,56 @@ gif, jpg, jpeg, png, bmp, webp
## 前端使用
### Element Plus Upload 组件
### AntDesign Upload 组件
```vue
<template>
<!-- 上传文件(默认 type=file) -->
<el-upload
<a-upload
:action="'/api/upload/uploadFile'"
:headers="{ Authorization: `Bearer ${token}` }"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:show-upload-list="false"
@change="handleUploadChange"
>
<el-button type="primary">上传文件</el-button>
</el-upload>
<a-button type="primary">上传文件</a-button>
</a-upload>
<!-- 上传图片(指定 type=image) -->
<el-upload
<a-upload
:action="'/api/upload/uploadFile?type=image'"
:data="{ type: 'image' }"
:headers="{ Authorization: `Bearer ${token}` }"
:on-success="handleImageSuccess"
:show-upload-list="false"
accept="image/*"
@change="handleImageChange"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
<a-button type="primary">上传图片</a-button>
</a-upload>
</template>
<script setup>
import { message } from 'ant-design-vue';
const token = localStorage.getItem('access_token');
const beforeUpload = (file) => {
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
ElMessage.error('文件大小不能超过 10MB');
message.error('文件大小不能超过 10MB');
}
return isLt10M;
};
const handleUploadSuccess = (response) => {
if (response.code === 0) {
form.value.file = response.data.filePath; // 建议存相对路径
const handleUploadChange = ({ file }) => {
if (file.status === 'done' && file.response.code === 0) {
form.value.file = file.response.data.filePath; // 建议存相对路径
}
};
const handleImageSuccess = (response) => {
if (response.code === 0) {
form.value.avatar = response.data.filePath;
const handleImageChange = ({ file }) => {
if (file.status === 'done' && file.response.code === 0) {
form.value.avatar = file.response.data.filePath;
}
};
</script>
@@ -167,7 +171,7 @@ const res = await http.request({
headers: { 'Content-Type': 'multipart/form-data' },
});
// res.filePath = "temp/20261002/123456_a1b2....jpg"
// res.fileUrl = "http://localhost:8000/uploads/temp/20261002/..."
// res.fileUrl = "http://admin.laravel13.antdvue/uploads/temp/20261002/..."
// 上传图片(指定 type=image)
const res2 = await http.request({
@@ -199,25 +203,25 @@ await exampleAdd({
```vue
<template>
<div class="avatar-upload">
<el-avatar :src="form.avatar" :size="80" />
<el-upload
<a-avatar :src="form.avatar" :size="80" />
<a-upload
:action="'/api/upload/uploadFile?type=image'"
:headers="{ Authorization: `Bearer ${token}` }"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:show-upload-list="false"
accept="image/*"
@change="handleAvatarChange"
>
<el-button size="small">更换头像</el-button>
</el-upload>
<a-button size="small">更换头像</a-button>
</a-upload>
</div>
</template>
<script setup>
const form = ref({ avatar: '' });
const handleAvatarSuccess = (response) => {
if (response.code === 0) {
form.value.avatar = response.data.filePath;
const handleAvatarChange = ({ file }) => {
if (file.status === 'done' && file.response.code === 0) {
form.value.avatar = file.response.data.filePath;
}
};
</script>