cykj/hzdyjs

0 Fork 0

Files

T

zlwu 134f711349 删除不需要的文件及提交移动端的代码

2025-08-06 16:01:27 +08:00

6.0 KiB

Raw Blame History

移动端首页界面重构 - 2025-01-07

📋 变更概述

时间: 2025-01-07 开发者: wuzilong
变更类型: 界面重构、权限控制

🎯 变更目标

完全重构移动端首页界面，实现以下目标：

简化界面结构，移除底部导航，只保留单页面
重新设计头部，包含用户信息和退出登录功能
采用权限控制的服务卡片布局
将所有emoji图标替换为u-icon组件
确保界面风格与web端保持一致

🔄 主要变更

1. 创建权限管理工具 (`mobile/src/utils/permission.js`)

功能: 移动端权限校验工具，参考web端实现

核心功能:

checkPermi(): 字符权限校验
checkRole(): 角色权限校验
hasPermission(): 权限指令校验函数
hasPermi(): Vue过滤器权限校验
hasRole(): 用户角色校验
permissionMixin: 权限控制混入

使用方式:

// 在组件中使用
import { hasPermi, permissionMixin } from '@/utils/permission'

// 混入方式
mixins: [permissionMixin]

// 模板中使用
v-if="hasPermi(['system:user:list'])"

2. 重构首页界面 (`mobile/src/pages/index/index.vue`)

变更前:

复杂的仪表板界面，包含欢迎横幅、统计数据、待办任务、新闻动态等
使用emoji图标
底部tabbar导航

变更后:

头部区域: 用户头像+昵称+部门信息 + 退出登录按钮
内容区域: 按业务模块分组的服务卡片
权限控制: 所有服务卡片支持权限控制
图标系统: 全部使用u-icon组件

头部功能:

点击用户头像: 跳转到个人中心页面
点击退出登录: 确认后退出并清理本地数据

服务模块分组:

学工管理 (6个服务): 学生信息、宿舍管理、学生请假、心理健康、社团管理、心理咨询
后勤管理 (6个服务): 物业报修、场地预约、报告厅预约、满意度调查、食堂管理、物业管理
招生就业 (3个服务): 学生管理、毕业生信息、就业信息
人事管理 (3个服务): 员工管理、出国申请、培训管理
财务管理 (3个服务): 预算管理、费用报销、发票管理
系统管理 (6个服务): 用户管理、角色管理、菜单管理、部门管理、参数设置、在线用户
工作流 (5个服务): 流程定义、我发起的、我的待办、我的已办、抄送我的

权限控制示例:

<ServiceItem
    v-if="hasPermi(['student:info:list'])"
    title="学生信息"
    @click="handleServiceClick"
>

3. 更新ServiceItem组件 (`mobile/src/components/ServiceItem.vue`)

变更内容:

支持u-icon组件通过slot传入
添加深度选择器样式支持u-icon
保持向后兼容emoji图标

使用方式:

<ServiceItem title="学生信息" @click="handleServiceClick">
    <template #icon>
        <u-icon name="account" size="24" color="inherit"></u-icon>
    </template>
</ServiceItem>

🎨 样式设计

头部设计

渐变背景: linear-gradient(135deg, $uni-color-primary, $uni-color-primary-dark)
用户头像: 圆形，48px × 48px，带白色边框
退出按钮: 半透明圆形背景，hover效果

服务卡片

每行3个卡片的自适应布局
卡片悬停效果: 向上移动3px + 阴影变化
图标容器: 圆形背景，主题色

响应式适配

小屏设备(<375px): 调整padding和图标尺寸
保持良好的触摸交互体验

🔐 权限集成

权限检查计算属性

computed: {
    hasStudentServices() {
        return this.hasPermi(['student:info:list']) ||
               this.hasPermi(['student:dorm:list']) ||
               // ... 其他权限
    },
    // ... 其他模块权限检查
}

模块级权限控制

如果用户没有某模块的任何权限，整个模块卡片组不显示
单个服务卡片根据具体权限显示/隐藏
工作流模块始终显示基础功能

📱 用户体验优化

交互优化

退出登录: 二次确认 + Loading状态
服务点击: 震动反馈
页面进入: 渐显动画效果
卡片交互: 平滑过渡动画

无障碍支持

aria-label标签
合适的焦点管理
键盘导航支持

🔧 技术实现

核心依赖

Vue 3组件式开发
uview-plus图标组件
权限校验混入
用户状态管理

代码结构

index.vue (534行)
├── 模板部分 (204行) - 头部 + 内容区域
├── 脚本部分 (234行) - 权限控制 + 用户管理
└── 样式部分 (96行) - 响应式设计

✅ 测试验证

功能测试

用户头像点击跳转个人中心
退出登录流程完整性
权限控制正确性
服务卡片交互
响应式布局适配

兼容性测试

保持ServiceItem组件向后兼容
权限校验工具正确性
u-icon组件显示正常

📊 性能影响

优化项

移除了复杂的仪表板数据
简化了页面结构和状态管理
减少了不必要的API调用

文件大小

index.vue: 压缩为534行 (原1323行)
新增permission.js: 123行
更新ServiceItem.vue: +12行样式

🚀 部署注意事项

权限配置

确保后端已配置相应的权限标识
验证权限数据返回格式正确
检查超级管理员权限(*:*:*)

图标资源

确保uview-plus组件库正确安装
验证所有u-icon名称有效性
测试图标在不同设备上的显示效果

📝 后续优化建议

服务路由: 为每个服务卡片配置具体的跳转路由
图标主题: 考虑为不同模块使用不同颜色的图标
加载状态: 添加权限数据加载时的骨架屏
缓存优化: 权限数据的本地缓存策略
搜索功能: 添加服务快速搜索功能

🔄 相关文档更新

移动端开发规范 (cursorrules-mobile.md)
权限管理文档
API文档同步更新
组件使用说明

变更影响评估: 🟢 低风险 回滚方案: Git版本回滚 测试状态: ✅ 已完成基础测试

6.0 KiB Raw Blame History