167 lines
4.5 KiB
Markdown
167 lines
4.5 KiB
Markdown
# 企业级办公App
|
||
|
||
一个基于UniApp开发的企业级办公移动应用，提供完整的办公功能解决方案。
|
||
|
||
## 功能特性
|
||
|
||
### 🏠 工作台
|
||
- **数据概览**: 待审批数量、考勤状态、报销进度等关键数据展示
|
||
- **快捷操作**: 自定义快捷功能入口，支持拖拽排序
|
||
- **常用工具**: 计算器、通讯录、文件传输等辅助工具
|
||
|
||
### 💬 消息
|
||
- **会话管理**: 支持单聊和群聊，消息预览和未读提醒
|
||
- **通知中心**: 按类型分组的系统通知，支持分类查看
|
||
- **消息搜索**: 全局搜索会话和通知内容
|
||
|
||
### ⚙️ 功能
|
||
- **人事管理**: 考勤打卡、请假申请、加班申请、调休记录
|
||
- **财务报销**: 报销提交、进度查询、历史记录
|
||
- **工作协同**: 任务管理、会议预订、项目协作
|
||
- **资源管理**: 客户目录、企业文件库、权限管理
|
||
|
||
### 👤 我的
|
||
- **个人信息**: 头像、姓名、部门、工号等基础信息
|
||
- **数据概览**: 考勤率、任务完成数、待报销金额
|
||
- **账号安全**: 密码修改、手机绑定、账号注销
|
||
- **APP设置**: 消息提醒、主题切换、缓存清理、版本更新
|
||
- **帮助反馈**: 常见问题、意见反馈、客服联系
|
||
|
||
## 技术架构
|
||
|
||
### 前端技术栈
|
||
- **框架**: UniApp (Vue 3 + Vite)
|
||
- **状态管理**: Pinia + 持久化插件
|
||
- **UI组件**: uView UI 2.0
|
||
- **样式**: SCSS + 响应式设计
|
||
- **构建工具**: Vite
|
||
|
||
### 项目结构
|
||
```
|
||
mobile/
|
||
├── pages/ # 页面文件
|
||
│ ├── index/ # 工作台
|
||
│ ├── message/ # 消息
|
||
│ ├── function/ # 功能
|
||
│ └── profile/ # 我的
|
||
├── src/
|
||
│ ├── store/ # 状态管理
|
||
│ ├── components/ # 通用组件
|
||
│ ├── utils/ # 工具函数
|
||
│ └── api/ # API接口
|
||
├── static/ # 静态资源
|
||
│ └── tabbar/ # TabBar图标
|
||
├── App.vue # 应用入口
|
||
├── main.js # 主文件
|
||
├── pages.json # 页面配置
|
||
├── manifest.json # 应用配置
|
||
└── vue.config.js # Vite配置
|
||
```
|
||
|
||
## 核心设计理念
|
||
|
||
### 1. 用户体验优先
|
||
- **3步内触达**: 确保用户3步内可触达任意功能
|
||
- **个性化定制**: 支持快捷操作自定义和主题切换
|
||
- **智能提醒**: 未读消息红点提示，避免信息遗漏
|
||
|
||
### 2. 功能模块化
|
||
- **分类聚合**: 按业务场景分类，避免功能杂乱
|
||
- **权限控制**: 基于角色的功能权限管理
|
||
- **流程跟踪**: 申请流程实时进度跟踪
|
||
|
||
### 3. 数据驱动
|
||
- **实时数据**: 工作数据实时更新和同步
|
||
- **智能分析**: 使用频率统计，自动优化功能排序
|
||
- **离线支持**: 关键数据本地缓存，支持离线使用
|
||
|
||
## 开发指南
|
||
|
||
### 环境要求
|
||
- Node.js >= 16.0.0
|
||
- HBuilderX 或 VS Code + uni-app插件
|
||
|
||
### 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发运行
|
||
```bash
|
||
# H5端
|
||
npm run dev:h5
|
||
|
||
# 微信小程序
|
||
npm run dev:mp-weixin
|
||
|
||
# App端
|
||
npm run dev:app
|
||
```
|
||
|
||
### 构建发布
|
||
```bash
|
||
# 构建H5
|
||
npm run build:h5
|
||
|
||
# 构建微信小程序
|
||
npm run build:mp-weixin
|
||
|
||
# 构建App
|
||
npm run build:app
|
||
```
|
||
|
||
## 配置说明
|
||
|
||
### 1. API配置
|
||
在 `src/api/index.js` 中修改 `BASE_URL` 为实际的后端API地址。
|
||
|
||
### 2. 权限配置
|
||
在 `src/store/userStore.js` 中配置用户权限列表。
|
||
|
||
### 3. 主题配置
|
||
在 `App.vue` 中修改全局样式变量。
|
||
|
||
### 4. TabBar图标
|
||
将图标文件放置在 `static/tabbar/` 目录下，参考 `static/tabbar/README.md`。
|
||
|
||
## 功能扩展
|
||
|
||
### 添加新页面
|
||
1. 在 `pages/` 目录下创建页面文件夹
|
||
2. 在 `pages.json` 中注册页面路由
|
||
3. 如需要TabBar，添加到 `tabBar.list` 配置中
|
||
|
||
### 添加新组件
|
||
1. 在 `src/components/` 目录下创建组件文件
|
||
2. 在需要使用的页面中导入组件
|
||
3. 遵循Vue 3 Composition API规范
|
||
|
||
### 添加新API
|
||
1. 在 `src/api/index.js` 中添加API方法
|
||
2. 在页面中导入并使用API
|
||
3. 处理请求和响应拦截器
|
||
|
||
## 部署说明
|
||
|
||
### 微信小程序
|
||
1. 在微信公众平台注册小程序
|
||
2. 配置 `manifest.json` 中的 `mp-weixin.appid`
|
||
3. 使用微信开发者工具上传代码
|
||
|
||
### App端
|
||
1. 配置 `manifest.json` 中的App信息
|
||
2. 使用HBuilderX云打包或本地打包
|
||
3. 生成安装包并分发
|
||
|
||
### H5端
|
||
1. 构建完成后将 `dist/build/h5` 目录部署到Web服务器
|
||
2. 配置域名和HTTPS证书
|
||
|
||
## 许可证
|
||
|
||
MIT License
|
||
|
||
## 联系方式
|
||
|
||
如有问题或建议，请联系开发团队。
|