提交代码修改
This commit is contained in:
zlwu committed
1 parent
fbb8dd6bd5
commit
97f7619bca
9 files changed
+1315
-19
No files matched your search
@@ -420,4 +420,155 @@ disabilityLevel: '',
|
||||
**变更时间**: 2025-01-27 16:00:00
|
||||
**变更人员**: AI Assistant
|
||||
**变更类型**: 功能优化
|
||||
**影响范围**: 学生花名册高级检索界面
|
||||
**影响范围**: 学生花名册高级检索界面
|
||||
|
||||
# 代码调整记录 - 2025-01-27
|
||||
|
||||
## 修改概述
|
||||
将 `stuMsgDetailDialog.vue` 界面的学生照片加载方式与 `index.vue` 界面保持一致，实现统一的异步照片加载机制。
|
||||
|
||||
## 修改文件
|
||||
- `web/src/views/xg/xsjcxx/stuMsgSupply/stuMsgDetailDialog.vue`
|
||||
|
||||
## 具体修改内容
|
||||
|
||||
### 1. 模板部分修改
|
||||
- **位置**: 第100-108行
|
||||
- **修改前**: 直接使用 `form.photoUrl` 显示照片
|
||||
- **修改后**: 使用异步加载机制，包含加载状态显示
|
||||
```vue
|
||||
<!-- 修改前 -->
|
||||
<img v-if="form.photoUrl" :src="form.photoUrl" class="photo" />
|
||||
|
||||
<!-- 修改后 -->
|
||||
<div v-if="photoLoading" class="photo-loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
<img v-else-if="asyncPhotoUrl" :src="asyncPhotoUrl" class="photo" />
|
||||
```
|
||||
|
||||
### 2. 脚本部分修改
|
||||
|
||||
#### 2.1 导入模块
|
||||
- **位置**: 第745行
|
||||
- **新增**: 导入 `watchEffect` 和 `Loading` 图标
|
||||
```typescript
|
||||
import { ref, reactive, getCurrentInstance, nextTick, watch, toRefs, watchEffect } from 'vue';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
```
|
||||
|
||||
#### 2.2 响应式变量
|
||||
- **位置**: 第825-826行
|
||||
- **新增**: 照片加载相关的响应式变量
|
||||
```typescript
|
||||
const photoLoading = ref(false); // 照片加载状态
|
||||
const asyncPhotoUrl = ref(''); // 异步加载的照片URL
|
||||
```
|
||||
|
||||
#### 2.3 照片加载方法
|
||||
- **位置**: 第975-1015行
|
||||
- **新增**: `getImageBlobUrl` 方法，通过认证请求获取图片数据
|
||||
```typescript
|
||||
const getImageBlobUrl = async (imageUrl: string): Promise<string> => {
|
||||
// 通过axios请求图片数据，自动带上token和clientId
|
||||
const response = await request({
|
||||
url: '/resource/oss/download/' + imageUrl,
|
||||
method: 'get',
|
||||
responseType: 'blob',
|
||||
timeout: 300000
|
||||
});
|
||||
// 创建blob URL并返回
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.4 监听器
|
||||
- **位置**: 第1225-1240行
|
||||
- **新增**: `watchEffect` 监听 `form.photoPath` 变化，异步加载图片
|
||||
```typescript
|
||||
watchEffect(async () => {
|
||||
if (form.photoPath) {
|
||||
photoLoading.value = true;
|
||||
try {
|
||||
const blobUrl = await getImageBlobUrl(form.photoPath);
|
||||
asyncPhotoUrl.value = blobUrl;
|
||||
} catch (error) {
|
||||
console.error('加载图片失败:', error);
|
||||
asyncPhotoUrl.value = '';
|
||||
} finally {
|
||||
photoLoading.value = false;
|
||||
}
|
||||
} else {
|
||||
asyncPhotoUrl.value = '';
|
||||
photoLoading.value = false;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 样式部分修改
|
||||
- **位置**: 第1740-1762行
|
||||
- **新增**: 照片加载状态的CSS样式
|
||||
```css
|
||||
.photo-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
color: #8c8d91;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.photo-loading .el-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.photo-loading span {
|
||||
font-size: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
## 技术实现要点
|
||||
|
||||
### 1. 异步加载机制
|
||||
- 使用 `watchEffect` 监听 `form.photoPath` 变化
|
||||
- 通过 `getImageBlobUrl` 方法获取图片数据
|
||||
- 支持认证请求，自动携带token和clientId
|
||||
|
||||
### 2. 加载状态管理
|
||||
- `photoLoading` 控制加载状态显示
|
||||
- `asyncPhotoUrl` 存储异步加载的照片URL
|
||||
- 加载失败时显示占位符
|
||||
|
||||
### 3. 用户体验优化
|
||||
- 加载过程中显示加载动画和提示文字
|
||||
- 加载失败时优雅降级到占位符
|
||||
- 保持与 `index.vue` 界面一致的视觉效果
|
||||
|
||||
## 修改效果
|
||||
1. **统一性**: 两个界面的照片加载方式完全一致
|
||||
2. **安全性**: 通过认证请求获取图片，确保访问权限
|
||||
3. **用户体验**: 提供加载状态反馈，提升用户体验
|
||||
4. **错误处理**: 完善的错误处理机制，确保界面稳定性
|
||||
|
||||
## 测试建议
|
||||
1. 测试有照片路径时的加载效果
|
||||
2. 测试无照片路径时的显示效果
|
||||
3. 测试网络异常时的错误处理
|
||||
4. 测试加载状态的视觉反馈
|
||||
|
||||
## 相关文件
|
||||
- 参考文件: `web/src/views/xg/xsjcxx/stuPersonalMsg/index.vue`
|
||||
- 修改文件: `web/src/views/xg/xsjcxx/stuMsgSupply/stuMsgDetailDialog.vue`
|
||||
|
||||
---
|
||||
**修改时间**: 2025-01-27 14:30:00
|
||||
**修改人**: AI Assistant
|
||||
**修改类型**: 功能优化 - 照片加载方式统一
|
||||
@@ -891,3 +891,292 @@ watchEffect(async () => {
|
||||
**变更状态**: ✅ 已完成
|
||||
**代码审查**: 待审查
|
||||
**测试状态**: 待测试
|
||||
|
||||
# 学生花名册卡片视图照片加载中状态优化
|
||||
|
||||
**变更时间**: 2025-01-27 15:30:00
|
||||
**变更人员**: Cursor AI
|
||||
**变更文件**: `web/src/views/xg/xsjcxx/stuRoster/index.vue`
|
||||
|
||||
## 变更内容
|
||||
|
||||
### 功能优化
|
||||
在学生花名册卡片视图中，优化了学生照片加载过程中的用户体验：
|
||||
|
||||
1. **照片加载中状态显示优化**
|
||||
- 将原本显示在头像内部的"加载中..."文字移除
|
||||
- 在头像底部新增独立的加载中状态提示
|
||||
- 添加了旋转的加载图标和"加载中..."文字
|
||||
|
||||
2. **视觉效果增强**
|
||||
- 加载中状态文字使用蓝色主题色
|
||||
- 添加了淡蓝色背景和边框
|
||||
- 实现了脉冲动画效果，提升视觉吸引力
|
||||
- 加载图标持续旋转，提供动态反馈
|
||||
|
||||
3. **布局优化**
|
||||
- 调整卡片头部布局为 `align-items: flex-start`，确保在有加载中文字时布局不会错乱
|
||||
- 照片容器改为垂直布局，头像和加载文字垂直排列
|
||||
|
||||
4. **响应式适配**
|
||||
- 为移动端添加了专门的样式调整
|
||||
- 移动端加载中文字更小更紧凑
|
||||
- 确保在不同屏幕尺寸下都有良好的显示效果
|
||||
|
||||
## 技术实现
|
||||
|
||||
### HTML结构变更
|
||||
```vue
|
||||
<!-- 照片加载中状态文字 - 显示在头像底部 -->
|
||||
<div v-if="isPhotoLoading(item)" class="photo-loading-text">
|
||||
<el-text type="primary" size="small">
|
||||
<el-icon class="is-loading mr-1" size="12">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
加载中...
|
||||
</el-text>
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS样式新增
|
||||
```css
|
||||
/* 照片加载中状态文字样式 */
|
||||
.photo-loading-text {
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
padding: 4px 8px;
|
||||
background-color: #f0f9ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.photo-loading-text .el-text {
|
||||
font-weight: 500;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.photo-loading-text .el-icon {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 移动端响应式样式
|
||||
```css
|
||||
/* 移动端照片加载中文字样式调整 */
|
||||
.photo-loading-text {
|
||||
margin-top: 6px;
|
||||
padding: 3px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.photo-loading-text .el-icon {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
```
|
||||
|
||||
## 用户体验改进
|
||||
|
||||
1. **更清晰的加载状态反馈**
|
||||
- 用户能够清楚地看到照片正在加载
|
||||
- 避免了头像内部文字显示不清晰的问题
|
||||
|
||||
2. **更好的视觉层次**
|
||||
- 加载状态文字独立显示，不会与头像内容混淆
|
||||
- 使用动画效果提升了视觉吸引力
|
||||
|
||||
3. **响应式友好**
|
||||
- 在不同设备上都有良好的显示效果
|
||||
- 移动端适配更加完善
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. **功能测试**
|
||||
- 验证照片加载过程中是否正确显示加载中状态
|
||||
- 确认加载完成后加载中状态是否正确消失
|
||||
|
||||
2. **视觉测试**
|
||||
- 检查加载中动画效果是否流畅
|
||||
- 验证在不同屏幕尺寸下的显示效果
|
||||
|
||||
3. **性能测试**
|
||||
- 确认新增的动画效果不会影响页面性能
|
||||
- 验证大量学生数据时的显示效果
|
||||
|
||||
## 相关文件
|
||||
|
||||
- **主要文件**: `web/src/views/xg/xsjcxx/stuRoster/index.vue`
|
||||
- **相关组件**: 学生花名册卡片视图组件
|
||||
- **样式文件**: 内联样式，无需额外文件
|
||||
|
||||
## 备注
|
||||
|
||||
此次优化提升了学生花名册卡片视图的用户体验，特别是在照片加载过程中的状态反馈更加清晰和友好。通过将加载状态文字从头像内部移到外部，避免了视觉混乱，同时添加了动画效果提升了界面的现代感。
|
||||
|
||||
# 学生信息审核界面照片加载功能优化
|
||||
|
||||
**变更时间**: 2025-01-27 15:30:00
|
||||
**变更人员**: Cursor AI
|
||||
**变更类型**: 功能优化
|
||||
|
||||
## 📋 变更概述
|
||||
|
||||
参考学生信息完善界面的照片加载方式，优化学生信息审核界面的照片加载功能，实现异步加载和更好的用户体验。
|
||||
|
||||
## 🔧 具体变更内容
|
||||
|
||||
### 1. 照片显示逻辑优化
|
||||
**文件**: `web/src/views/xg/xsjcxx/stuMsgAudit/stuMsgDetailDialog.vue`
|
||||
|
||||
#### 变更前
|
||||
```vue
|
||||
<div class="photo-display">
|
||||
<img v-if="form.photoUrl" :src="form.photoUrl" class="photo" />
|
||||
<div v-else class="photo-placeholder">暂无照片</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 变更后
|
||||
```vue
|
||||
<div class="photo-display">
|
||||
<div v-if="photoLoading" class="photo-loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
<img v-else-if="asyncPhotoUrl" :src="asyncPhotoUrl" class="photo" />
|
||||
<div v-else class="photo-placeholder">暂无照片</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 2. 新增响应式数据
|
||||
```typescript
|
||||
const photoLoading = ref(false); // 照片加载状态
|
||||
const asyncPhotoUrl = ref(''); // 异步加载的照片URL
|
||||
```
|
||||
|
||||
### 3. 新增照片加载方法
|
||||
```typescript
|
||||
// 通过认证请求获取图片数据并转换为blob URL
|
||||
const getImageBlobUrl = async (imageUrl: string): Promise<string> => {
|
||||
try {
|
||||
const response = await request({
|
||||
url: '/resource/oss/download/' + imageUrl,
|
||||
method: 'get',
|
||||
responseType: 'blob',
|
||||
timeout: 300000 // 300秒超时
|
||||
});
|
||||
|
||||
const blob = response;
|
||||
|
||||
if (!blob || !(blob instanceof Blob)) {
|
||||
throw new Error('响应数据不是有效的Blob对象');
|
||||
}
|
||||
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
return blobUrl;
|
||||
} catch (error) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 4. 新增照片路径监听
|
||||
```typescript
|
||||
// 监听form.photoPath变化，异步加载图片
|
||||
watchEffect(async () => {
|
||||
if (form.photoPath) {
|
||||
photoLoading.value = true;
|
||||
try {
|
||||
const blobUrl = await getImageBlobUrl(form.photoPath);
|
||||
asyncPhotoUrl.value = blobUrl;
|
||||
} catch (error) {
|
||||
console.error('加载图片失败:', error);
|
||||
asyncPhotoUrl.value = '';
|
||||
} finally {
|
||||
photoLoading.value = false;
|
||||
}
|
||||
} else {
|
||||
asyncPhotoUrl.value = '';
|
||||
photoLoading.value = false;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 5. 新增导入语句
|
||||
```typescript
|
||||
import { watchEffect } from 'vue';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
```
|
||||
|
||||
### 6. 新增CSS样式
|
||||
```css
|
||||
/* 照片加载状态样式 */
|
||||
.photo-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
color: #8c8d91;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.photo-loading .el-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.photo-loading span {
|
||||
font-size: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 优化效果
|
||||
|
||||
### 用户体验提升
|
||||
1. **加载状态提示**: 照片加载时显示加载动画和文字提示
|
||||
2. **异步加载**: 通过blob URL异步加载照片，避免直接暴露文件路径
|
||||
3. **错误处理**: 加载失败时优雅降级，显示占位符
|
||||
4. **认证支持**: 自动携带token和clientId进行认证请求
|
||||
|
||||
### 技术改进
|
||||
1. **安全性**: 使用blob URL避免直接暴露服务器文件路径
|
||||
2. **性能**: 异步加载避免阻塞界面渲染
|
||||
3. **兼容性**: 支持认证的图片请求，适用于需要权限的图片资源
|
||||
4. **可维护性**: 统一的照片加载逻辑，便于后续维护
|
||||
|
||||
## 📚 参考实现
|
||||
|
||||
本次优化参考了 `web/src/views/xg/xsjcxx/stuMsgSupply/stuMsgDetailDialog.vue` 中的照片加载实现，确保了两个界面的一致性。
|
||||
|
||||
## ✅ 验证要点
|
||||
|
||||
1. 照片加载时显示加载动画
|
||||
2. 照片加载成功后正确显示
|
||||
3. 照片加载失败时显示占位符
|
||||
4. 支持认证的图片请求
|
||||
5. 界面响应正常，无控制台错误
|
||||
|
||||
---
|
||||
|
||||
**变更状态**: ✅ 已完成
|
||||
**测试状态**: 🔄 待测试
|
||||
**文档状态**: ✅ 已更新
|
||||
Reference in new issue
Block a user