From 467b04e5b0bc35e1f7fcf5cc36b73f3b68210ae8 Mon Sep 17 00:00:00 2001 From: bwstudio Date: Mon, 20 Oct 2025 07:11:14 +0800 Subject: [PATCH] home1020 --- element-ui-配置指南.md | 326 +++++ 原型/index.html | 289 ++++ 原型/后台管理页面/admin-login.html | 332 +++++ 原型/后台管理页面/category-management.html | 1209 +++++++++++++++++ 原型/后台管理页面/department-management.html | 655 ++++++++++ 原型/后台管理页面/image-management.html | 1232 ++++++++++++++++++ 原型/后台管理页面/task-management.html | 1118 ++++++++++++++++ 原型/后台管理页面/user-management.html | 942 +++++++++++++ 原型/小程序页面/admin-home.html | 472 +++++++ 原型/小程序页面/dept-home.html | 505 +++++++ 原型/小程序页面/image-upload.html | 501 +++++++ 原型/小程序页面/login.html | 284 ++++ 原型/小程序页面/task-management.html | 735 +++++++++++ 原型/小程序页面/user-home.html | 457 +++++++ 原型/小程序页面/user-profile.html | 627 +++++++++ 界面原型提示词.md | 321 +++++ 软件需求文档.md | 229 ++++ 项目规则文件.md | 232 ++++ 18 files changed, 10466 insertions(+) create mode 100644 element-ui-配置指南.md create mode 100644 原型/index.html create mode 100644 原型/后台管理页面/admin-login.html create mode 100644 原型/后台管理页面/category-management.html create mode 100644 原型/后台管理页面/department-management.html create mode 100644 原型/后台管理页面/image-management.html create mode 100644 原型/后台管理页面/task-management.html create mode 100644 原型/后台管理页面/user-management.html create mode 100644 原型/小程序页面/admin-home.html create mode 100644 原型/小程序页面/dept-home.html create mode 100644 原型/小程序页面/image-upload.html create mode 100644 原型/小程序页面/login.html create mode 100644 原型/小程序页面/task-management.html create mode 100644 原型/小程序页面/user-home.html create mode 100644 原型/小程序页面/user-profile.html create mode 100644 界面原型提示词.md create mode 100644 软件需求文档.md create mode 100644 项目规则文件.md diff --git a/element-ui-配置指南.md b/element-ui-配置指南.md new file mode 100644 index 0000000..ab8dc62 --- /dev/null +++ b/element-ui-配置指南.md @@ -0,0 +1,326 @@ +# Element UI 配置指南 + +本文档提供了在项目中正确使用Element UI的配置步骤和最佳实践，替代之前的Tailwind CSS方案。 + +## Element UI 简介 + +Element UI 是一套基于 Vue 2.0 的桌面端组件库，提供了丰富的UI组件，可以快速构建美观、一致的用户界面。对于我们的图片收集小程序后台管理页面，Element UI提供了完善的PC端组件支持，非常适合构建企业级应用界面。 + +## 配置步骤 + +### 方法一：使用CDN引入（适合原型开发） + +1. **在HTML文件头部引入Element UI** + + ```html + + + + + + + + + + + + ``` + +2. **初始化Vue实例** + + ```html + + ``` + +### 方法二：使用npm安装（适合生产环境） + +1. **初始化项目** + + ```bash + npm init -y + ``` + +2. **安装依赖** + + ```bash + npm install vue@2.6.14 element-ui@2.15.8 + ``` + +3. **在项目入口文件中引入Element UI** + + ```javascript + // main.js + import Vue from 'vue' + import ElementUI from 'element-ui' + import 'element-ui/lib/theme-chalk/index.css' + + Vue.use(ElementUI) + + new Vue({ + el: '#app', + render: h => h(App) + }) + ``` + +## 核心组件使用示例 + +### 1. 布局组件 + +```html +
+ + + + + + + + 用户列表 + 角色权限 + + + + 部门结构 + + + + + + + + +
+
图片收集管理系统
+
+ + + + + + 通知1 + 通知2 + + +
管理员
+
+
+ + + + + + + + +
+``` + +### 2. 表格组件（适合数据管理页面） + +```html + + + + + + + + + + + + + + +``` + +### 3. 表单组件 + +```html + + + + + + + + + + + + 提交 + 重置 + + + + +``` + +### 4. 图片上传组件 + +```html + + + + + + + + +``` + +## 响应式设计 + +Element UI 提供了响应式工具类，可以适配不同的屏幕尺寸： + +```html +
+ +
+``` + +## 自定义主题 + +Element UI 支持自定义主题，可以通过以下方式修改： + +1. **使用在线主题生成工具** + 访问 Element UI 官方主题生成器，生成自定义主题包。 + +2. **通过SCSS变量自定义** + ```scss + // 引入官方样式文件 + @import "~element-ui/packages/theme-chalk/src/index"; + + // 修改变量 + $--color-primary: #1989fa; + $--color-success: #67c23a; + $--color-warning: #e6a23c; + $--color-danger: #f56c6c; + $--color-info: #909399; + ``` + +## 生产环境注意事项 + +1. **按需引入**：在生产环境中，可以使用 babel-plugin-component 实现按需引入，减小打包体积 + ```bash + npm install babel-plugin-component -D + ``` + + 配置 .babelrc： + ```json + { + "presets": ["@babel/preset-env"], + "plugins": [ + [ + "component", + { + "libraryName": "element-ui", + "styleLibraryName": "theme-chalk" + } + ] + ] + } + ``` + +2. **CDN优化**：使用稳定的CDN源，如BootCDN，提高加载速度和稳定性 + +3. **组件缓存**：对于频繁使用的组件，可以考虑缓存策略，提高性能 + +4. **按需加载路由**：结合Vue Router的路由懒加载，提高应用启动速度 \ No newline at end of file diff --git a/原型/index.html b/原型/index.html new file mode 100644 index 0000000..7b45769 --- /dev/null +++ b/原型/index.html @@ -0,0 +1,289 @@ + + + + + + 图片收集小程序 - 原型汇总 + + + + + + + + + + + +
+ + +
+

图片收集小程序界面原型

+
+ 版本 1.0 +
+
+ + + + + + + +
+

小程序页面

+
+ 登录页 +
+
+ 普通用户首页 + 用户 +
+
+ 部门负责人首页 + 部门 +
+
+ 管理员/信息员首页 + 管理员 +
+
+ 上传页 +
+
+ 图片详情页 +
+
+ 消息列表页 +
+
+ +
+

后台管理页面

+
+ 用户管理 +
+
+ 部门管理 +
+
+ 图片管理 +
+
+ 任务管理 +
+
+ + + + + + + + + + + + + + + +
+ +
+ +
+

页面说明

+ + {{ currentPageTitle }} + {{ currentPageUrl }} + {{ currentPageDescription }} + {{ currentPageRoles }} + +
+ + + + + + + +

版本 1.0

+

初始原型版本，使用Element UI实现所有页面

+ + + + + + + + +

© 2023 图片收集小程序原型设计

+ + +
+ + + + \ No newline at end of file diff --git a/原型/后台管理页面/admin-login.html b/原型/后台管理页面/admin-login.html new file mode 100644 index 0000000..3c45cae --- /dev/null +++ b/原型/后台管理页面/admin-login.html @@ -0,0 +1,332 @@ + + + + + + 后台管理系统 - 登录 + + + + + + + + + + + +
+ + + + +
+
+ +
登录中...
+
+
+ +
+ + + + \ No newline at end of file diff --git a/原型/后台管理页面/category-management.html b/原型/后台管理页面/category-management.html new file mode 100644 index 0000000..1d3cc6d --- /dev/null +++ b/原型/后台管理页面/category-management.html @@ -0,0 +1,1209 @@ + + + + + + 分类管理 - 图片收集系统 + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+ + 部门管理 +
+
+ + 用户管理 +
+
+ + 任务管理 +
+
+ + 图片管理 +
+
+ + 分类管理 +
+
+ + +
+ +
+
分类管理
+
+ +
+ 退出 +
+
+
+ + +
+ +
+
+ + +
+ + + 新增分类 + +
+ + +
+ +
+ + +
+
+ + +
+

分类统计图表

+
+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+
+
+
+ +
+
{{ category.name }}
+
{{ category.imageCount }}
+
+ {{ category.description }}
+ (已禁用) +
+ + +
+
+ +
+ + +
+
+ 查看详情 +
+
+ 编辑分类 +
+
+ 删除分类 +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + `" + :value="icon.value" + > + +
+ +
+ + + + +
+ + + + +
+ 数值越小，排序越靠前 +
+ + + + + + + + + 取消 + 确定 + + + + + +
+
+
+ +
+
+

{{ categoryDetail.name }}

+

{{ categoryDetail.description }}

+
+
+ 图片数量： + {{ categoryDetail.imageCount }} +
+
+ 创建时间： + {{ formatDateTime(categoryDetail.createTime) }} +
+
+ 状态： + + {{ categoryDetail.isActive ? '已启用' : '已禁用' }} + +
+
+
+
+ +
+

代表性图片

+
+ +
+
+
+ + + 编辑分类 + 关闭 + + + + + +
+ +

{{ selectedImage.description || '暂无描述' }}

+
+ + + 关闭 + + +
+ + + + \ No newline at end of file diff --git a/原型/后台管理页面/department-management.html b/原型/后台管理页面/department-management.html new file mode 100644 index 0000000..305f3fd --- /dev/null +++ b/原型/后台管理页面/department-management.html @@ -0,0 +1,655 @@ + + + + + + 部门管理 - 图片收集系统 + + + + + + + + + + + +
+
+ +
+
+ +
+
+ + 部门管理 +
+
+ + 用户管理 +
+
+ + 任务管理 +
+
+ + 图片管理 +
+
+ + +
+ +
+
部门管理
+
+ +
+ 退出 +
+
+
+ + +
+ +
+
+
+ +
+
+
{{ departmentStats.total }}
+
总部门数
+
+
+
+
+ +
+
+
{{ departmentStats.active }}
+
活跃部门
+
+
+
+
+ +
+
+
{{ departmentStats.totalUsers }}
+
总用户数
+
+
+
+ + +
+
+ + + 新增部门 + +
+
+ + +
+
+
部门列表
+
+
+ + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
部门名称
+ +
+ +
+
部门负责人
+ + + +
+ +
+
部门状态
+ + 活跃 + 禁用 + +
+ +
+ 取消 + + 保存 + +
+ +
+ + + + \ No newline at end of file diff --git a/原型/后台管理页面/image-management.html b/原型/后台管理页面/image-management.html new file mode 100644 index 0000000..12461a3 --- /dev/null +++ b/原型/后台管理页面/image-management.html @@ -0,0 +1,1232 @@ + + + + + + 图片管理 - 图片收集系统 + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+ + 部门管理 +
+
+ + 用户管理 +
+
+ + 任务管理 +
+
+ + 图片管理 +
+
+ + +
+ +
+
图片管理
+
+ +
+ 退出 +
+
+
+ + +
+ +
+
+
+ +
+
+
{{ imageStats.total }}
+
总图片数
+
+
+
+
+ +
+
+
{{ imageStats.approved }}
+
已审核通过
+
+
+
+
+ +
+
+
{{ imageStats.pending }}
+
待审核
+
+
+
+
+ +
+
+
{{ imageStats.rejected }}
+
已拒绝
+
+
+
+ + +
+
+

图片状态分布

+
+
+
+

图片分类统计

+
+
+
+ + +
+ + +
+ + + + + + + + + + + + + + 批量审核通过 + +
+ + +
+ + + + + + + + + +
+ + +
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
+ + + {{ getStatusText(image.status) }} + +
+
{{ image.title }}
+
+ {{ image.categoryName }} + {{ formatDate(image.uploadTime) }} +
+
+
+
+
+
+
+
+
+ + + +
+ + +
+
基本信息
+
+
+
+ 标题：{{ imageDetail.title || '-' }} +
+
+ ID：{{ imageDetail.id || '-' }} +
+
+
+
+ 描述：{{ imageDetail.description || '-' }} +
+
+ 分类：{{ imageDetail.categoryName || '-' }} +
+
+
+
+ 上传人：{{ imageDetail.uploaderName || '-' }} +
+
+ 所属部门：{{ imageDetail.departmentName || '-' }} +
+
+
+
+ 关联任务：{{ imageDetail.taskName || '-' }} +
+
+ 状态： + + {{ getStatusText(imageDetail.status) }} + +
+
+
+
+ 上传时间：{{ formatDateTime(imageDetail.uploadTime) || '-' }} +
+
+ 文件大小：{{ formatFileSize(imageDetail.size) || '-' }} +
+
+
+
+ +
+
标签
+
+ + {{ tag }} + +
+
+ +
+
审核操作
+
+ + 审核通过 + + + 审核拒绝 + +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/原型/后台管理页面/task-management.html b/原型/后台管理页面/task-management.html new file mode 100644 index 0000000..f995add --- /dev/null +++ b/原型/后台管理页面/task-management.html @@ -0,0 +1,1118 @@ + + + + + + 任务管理 - 图片收集系统 + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+ + 部门管理 +
+
+ + 用户管理 +
+
+ + 任务管理 +
+
+ + 图片管理 +
+
+ + +
+ +
+
任务管理
+
+ +
+ 退出 +
+
+
+ + +
+ +
+
+
+ +
+
+
{{ taskStats.total }}
+
总任务数
+
+
+
+
+ +
+
+
{{ taskStats.active }}
+
进行中任务
+
+
+
+
+ +
+
+
{{ taskStats.expired }}
+
已过期任务
+
+
+
+
+ +
+
+
{{ taskStats.completed }}
+
已完成任务
+
+
+
+ + +
+
+

任务状态分布

+
+
+
+

任务优先级分布

+
+
+
+ + +
+
+ + + + + + + + + + + + + + 新增任务 + +
+
+ + +
+
+
任务列表
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
任务名称
+ +
+ +
+
任务描述
+ +
+ +
+
关联部门
+ + + +
+ +
+
目标数量
+ +
+ +
+
优先级
+ + 高 + 中 + 低 + +
+ +
+
截止日期
+ +
+ +
+ 取消 + + 保存 + +
+ +
+ + + + \ No newline at end of file diff --git a/原型/后台管理页面/user-management.html b/原型/后台管理页面/user-management.html new file mode 100644 index 0000000..c35478f --- /dev/null +++ b/原型/后台管理页面/user-management.html @@ -0,0 +1,942 @@ + + + + + + 用户管理 - 图片收集系统 + + + + + + + + + + + +
+
+ +
+
+ +
+
+ + 部门管理 +
+
+ + 用户管理 +
+
+ + 任务管理 +
+
+ + 图片管理 +
+
+ + +
+ +
+
用户管理
+
+ +
+ 退出 +
+
+
+ + +
+ +
+
+
+ +
+
+
{{ userStats.total }}
+
总用户数
+
+
+
+
+ +
+
+
{{ userStats.active }}
+
活跃用户
+
+
+
+
+ +
+
+
{{ userStats.admins }}
+
管理员
+
+
+
+
+ +
+
+
{{ userStats.managers }}
+
部门负责人
+
+
+
+ + +
+
+ + + + + + + + + + + 新增用户 + +
+
+ + +
+
+
用户列表
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+ +
+ +
+ + 上传头像 + +
+ +
+
用户名
+ +
+ +
+
姓名
+ +
+ +
+
所属部门
+ + + +
+ +
+
职位
+ +
+ +
+
手机号
+ +
+ +
+
邮箱
+ +
+ +
+
角色
+ + 管理员 + 部门负责人 + 普通用户 + +
+ +
+
初始密码
+ +
+ +
+
用户状态
+ + 活跃 + 禁用 + +
+ +
+ 取消 + + 保存 + +
+ +
+ + + + \ No newline at end of file diff --git a/原型/小程序页面/admin-home.html b/原型/小程序页面/admin-home.html new file mode 100644 index 0000000..2084c6f --- /dev/null +++ b/原型/小程序页面/admin-home.html @@ -0,0 +1,472 @@ + + + + + + 管理员首页 - 图片收集小程序 + + + + + + + + + + + +
+
+ +
+
图片收集小程序
+
+ + + + {{ notificationCount }} + + + 通知消息 + +
+
{{ notification.title }}
+
{{ notification.time }}
+
+ + + + + + + + + + 个人中心 + 退出登录 + + +
+
+ + +
+ +
+
+ 待处理任务 + {{ pendingCount }} +
+
点击查看所有待审核的图片
+
+ + +
+
部门上传统计
+
+
+
+
{{ dept.count }}
+
+
{{ dept.name }}
+
+
+
+
+ + +
+
+
任务进度查询
+
查看所有任务的完成情况
+
+ +
+ + +
+
+ 最新上传 + 查看全部 +
+
+
+ +
+
{{ image.title }}
+
{{ image.uploader }} · {{ image.department }}
+
+
+
+
+
+ + +
+
+ + 首页 +
+
+ + 任务 +
+
+ + 我的 +
+
+
+
+ + + + \ No newline at end of file diff --git a/原型/小程序页面/dept-home.html b/原型/小程序页面/dept-home.html new file mode 100644 index 0000000..efa88c9 --- /dev/null +++ b/原型/小程序页面/dept-home.html @@ -0,0 +1,505 @@ + + + + + + 部门负责人首页 - 图片收集小程序 + + + + + + + + + + + +
+
+ +
+
图片收集小程序
+
+ + + + {{ currentDepartment.name }} + + + + + {{ dept.name }} + + + + + + + + + + + 个人中心 + 退出登录 + + +
+
+ + +
+ +
+
+
{{ stats.pending }}
+
待审核
+
+
+
{{ stats.approved }}
+
已通过
+
+
+
{{ stats.total }}
+
总数量
+
+
+ + +
+
图片分类统计
+
+ +
+
+ {{ category.name }} + {{ category.count }} ({{ category.percentage }}%) +
+ +
+
+
+ + +
+
+ 待审核图片 + 查看全部 +
+
+
+
+ +
+
+
{{ image.title }}
+
{{ image.uploader }} · {{ formatDate(image.uploadTime) }}
+
+ + +
+
+
+
+
+ 暂无待审核图片 +
+
+
+ + +
+
+ + 首页 +
+
+ + 审核 +
+
+ + 我的 +
+
+
+
+ + + + + + 取消 + 确定 + + + + + + \ No newline at end of file diff --git a/原型/小程序页面/image-upload.html b/原型/小程序页面/image-upload.html new file mode 100644 index 0000000..c820cd0 --- /dev/null +++ b/原型/小程序页面/image-upload.html @@ -0,0 +1,501 @@ + + + + + + 图片上传 - 图片收集小程序 + + + + + + + + + + + +
+
+ +
+
取消
+
图片上传
+
保存
+
+ + +
+ +
+
选择图片
+ + + +
+
+ + +
+
+
+
+
+
+
+
+ + +
+
图片信息
+ + +
+ + 所属部门：{{ currentDepartment }} +
+ + +
+
标题
+ +
+ + +
+
描述
+
+ +
{{ imageForm.description.length }}/200
+
+
+ + +
+
分类标签（可多选）
+
+
+ {{ tag.label }} +
+
+
+ + +
+
关联任务（可选）
+ + + +
+ + + + 提交 + +
+
+
+
+ + + + \ No newline at end of file diff --git a/原型/小程序页面/login.html b/原型/小程序页面/login.html new file mode 100644 index 0000000..ca48323 --- /dev/null +++ b/原型/小程序页面/login.html @@ -0,0 +1,284 @@ + + + + + + 登录 - 图片收集小程序 + + + + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/原型/小程序页面/task-management.html b/原型/小程序页面/task-management.html new file mode 100644 index 0000000..319002d --- /dev/null +++ b/原型/小程序页面/task-management.html @@ -0,0 +1,735 @@ + + + + + + 任务管理 - 图片收集小程序 + + + + + + + + + + + +
+
+ +
+
+ 筛选 +
+
任务管理
+
+ +
+
+ + + +
+
+
+ + + + + +
+
+ + + + + +
+
+ +
+ + + +
+ +
+
+
+
{{ task.title }}
+
+ {{ getStatusText(task.status) }} +
+
+ +
+
+ + {{ formatDate(task.createTime) }} +
+
+ + {{ task.creator }} +
+
+ + {{ task.uploadedCount }}/{{ task.totalCount }} +
+
+ +
+ + 截止日期：{{ formatDate(task.deadline) }} + （已过期） + （即将到期） +
+ +
+
+
完成进度
+
{{ task.progress }}%
+
+
+
+
+
+ +
+
+ + 参与人员： +
+
+
+ {{ participant.name.substring(0, 1) }} +
+
+ +{{ task.participants.length - 4 }} +
+
+
+ + +
+ + 上传图片 + + + 查看图片 + +
+
+
+ + +
+ +
暂无符合条件的任务
+ + 重置筛选 + +
+
+ + +
+
+ + 首页 +
+
+ + 任务 +
+
+ + 上传 +
+
+ + 我的 +
+
+
+
+ + + + \ No newline at end of file diff --git a/原型/小程序页面/user-home.html b/原型/小程序页面/user-home.html new file mode 100644 index 0000000..b3d42e4 --- /dev/null +++ b/原型/小程序页面/user-home.html @@ -0,0 +1,457 @@ + + + + + + 首页 - 图片收集小程序 + + + + + + + + + + + +
+
+ +
+
图片收集小程序
+ + + + + + 个人中心 + 退出登录 + + +
+ + +
+ +
+ + {{ refreshText }} +
+ + +
+
+ 待完成任务 +
+
+
+
{{ task.name }}
+
+ {{ task.department }} + 截止: {{ task.deadline }} +
+
+ {{ task.progress }}% + +
+
+
+
+ 暂无待完成任务 +
+
+ + +
+
+ 我的上传 + 查看全部 +
+
+
+ +
{{ image.title }}
+
+ {{ getStatusText(image.status) }} +
+
+
+
+
+ + +
+ +
+ + +
+
+ + 首页 +
+
+ + 上传 +
+
+ + 我的 +
+
+
+
+ + + + \ No newline at end of file diff --git a/原型/小程序页面/user-profile.html b/原型/小程序页面/user-profile.html new file mode 100644 index 0000000..4e1af97 --- /dev/null +++ b/原型/小程序页面/user-profile.html @@ -0,0 +1,627 @@ + + + + + + 个人中心 - 图片收集小程序 + + + + + + + + + + + +
+
+ +
+
+
个人中心
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
{{ userStats.uploadedImages }}
+
已上传图片
+
+
+
{{ userStats.completedTasks }}
+
已完成任务
+
+
+
{{ userStats.approvalRate }}%
+
通过率
+
+
+ + +
+ 您有 {{ pendingActions.count }} 个待处理事项 +
+ + +
+
+
+
+ + 我的上传 +
+
+ +
+
+
+
+ + 我的任务 +
+
+ {{ userStats.pendingTasks }} + +
+
+
+
+ + 我的收藏 +
+
+ +
+
+
+ + +
+
+
+ + 部门管理 +
+
+ +
+
+
+
+ + 用户管理 +
+
+ +
+
+
+
+ + 任务管理 +
+
+ +
+
+
+ + +
+
+
+ + 图片审核 +
+
+ {{ pendingActions.reviewCount }} + +
+
+
+
+ + 部门任务 +
+
+ +
+
+
+
+ +
+ + +
+
+
+
+ + 意见反馈 +
+
+ +
+
+
+
+ + 关于我们 +
+
+ v1.0.0 + +
+
+
+
+ + + + 退出登录 + + + +
+
+ + 首页 +
+
+ + 任务 +
+
+ + 上传 +
+
+ + 我的 +
+
+
+
+ + + + \ No newline at end of file diff --git a/界面原型提示词.md b/界面原型提示词.md new file mode 100644 index 0000000..00a91d2 --- /dev/null +++ b/界面原型提示词.md @@ -0,0 +1,321 @@ +# 图片收集小程序界面原型提示词 + +请根据以下详细要求，生成清晰、直观、符合企业形象的图片收集小程序界面原型。 + +## 1. 设计目标 +使用HTML+Element UI生成清晰、直观、符合企业形象的界面原型，为开发团队提供可直接查看、可交互的视觉参考。 + +## 2. 整体设计规范 + +### 2.1 风格要求 +请严格遵循以下风格要求： +- **风格定位**：简洁、专业，符合企业形象 +- **主色调**：蓝色系（代表专业、信任），使用Element UI的主题色 `primary` (#1989fa) +- **辅助色**：灰色系（用于中性背景和次要元素），使用Element UI的 `--el-bg-color` (#f5f7fa) 和 `--el-text-color-secondary` (#909399) +- **字体**：使用Element UI默认字体，保持良好的可读性 +- **图标**：使用Element UI内置图标库 ElIcon，确保风格统一 + +### 2.2 布局规范 +请严格遵循以下布局规范： +- **尺寸**：以iPhone 12/13 (375×812px) 为基准设计，使用Element UI的响应式断点 +- **安全区域**：必须遵循小程序顶部和底部安全区域规范，使用 `padding-top` 和 `padding-bottom` 适配安全区域 +- **间距**：组件间距保持一致，使用Element UI的间距规范，确保是8px的倍数 +- **圆角**：卡片、按钮等元素使用Element UI默认圆角，保持一致性 +- **Element UI配置**：在HTML头部引入Element UI的CSS和JavaScript，并可进行主题配置 + +## 3. 页面原型设计要求 + +请为以下所有页面创建详细的原型设计： + +### 3.1 登录页 +**请包含以下核心元素：** +- 应用Logo和名称居中显示 +- 手机号输入框（带国家代码选择） +- 验证码输入框和获取按钮 +- 登录按钮 +- 服务协议和隐私政策链接 +- 版权信息 + +**交互要求：** +- 手机号格式校验 +- 获取验证码按钮倒计时功能 +- 登录失败提示信息 + +### 3.2 首页 +**请根据不同用户角色设计差异化首页：** + +#### 3.2.1 管理员/信息员首页 +**请包含以下核心元素：** +- 顶部导航栏（应用名称、用户头像/切换） +- 待处理任务卡片（显示待审核图片数量） +- 统计图表区域（柱状图显示各部门上传数量） +- 任务进度查询入口或统计卡片（重要：必须包含） +- 最新上传图片列表（卡片式展示） +- 底部导航栏（首页、任务、我的） + +**交互要求：** +- 点击统计图表可查看详细统计信息 +- 点击图片卡片进入图片详情 +- 点击任务进度查询入口可查看所有任务的进度情况 +- 支持下拉刷新 + +#### 3.2.2 部门负责人首页 +**请包含以下核心元素：** +- 顶部导航栏（应用名称、部门切换器、用户头像） +- 待处理任务卡片（显示该部门待审核图片数量） +- 部门图片统计（饼图显示该部门不同分类的图片占比） +- 待审核图片列表（显示该部门待审核的图片） +- 底部导航栏（首页、审核、我的） + +**交互要求：** +- 部门切换器可选择不同管理部门 +- 数据随部门切换实时更新 + +#### 3.2.3 普通用户首页 +**请包含以下核心元素：** +- 顶部导航栏（应用名称、用户头像） +- 待完成任务列表（显示分配给用户的任务） +- 我的上传图片列表（显示用户最近上传的图片） +- 快速上传入口（浮动按钮或明显的上传按钮） +- 底部导航栏（首页、上传、我的） + +**交互要求：** +- 点击任务进入任务详情 +- 点击图片进入图片详情 +- 点击上传按钮跳转到上传页面 + +### 3.3 上传页 +**请包含以下核心元素：** +- 顶部导航栏（标题、取消/保存按钮） +- 图片选择区域（支持点击拍照或从相册选择） +- 已选择图片预览区域（支持多图预览和删除） +- 图片信息表单： + - 标题输入框 + - 描述文本域 + - 分类标签选择器（可多选） + - 关联任务选择器（可选） +- 所属部门显示（当前用户所在部门） +- 提交按钮 + +**交互要求：** +- 支持单张/批量上传 +- 实时显示上传进度 +- 表单验证和错误提示 +- 上传失败时支持重试 + +### 3.4 图片列表页 +**请包含以下核心元素：** +- 顶部导航栏（标题、筛选/排序按钮） +- 搜索框（支持关键词搜索） +- 筛选条件栏（部门、分类、状态等） +- 图片卡片列表（网格布局，2-3列） +- 分页或下拉加载更多 + +**交互要求：** +- 点击筛选按钮弹出筛选面板 +- 点击图片卡片进入图片详情 +- 长按图片可显示操作菜单（分享、删除等） + +### 3.5 图片详情页 +**请包含以下核心元素：** +- 顶部导航栏（返回按钮、操作菜单） +- 图片大图展示区域（支持缩放、滑动查看多张） +- 图片信息展示区域： + - 标题、描述 + - 上传者、上传时间 + - 所属部门、分类标签 + - 审核状态（带状态标识） + - 关联任务信息 +- 操作按钮（根据用户角色和图片状态显示） + +**交互要求：** +- 支持图片缩放查看 +- 根据用户权限显示不同操作按钮 +- 显示审核历史记录 + +### 3.6 审核页 +**请包含以下核心元素：** +- 顶部导航栏（标题、筛选按钮） +- 待审核图片列表（卡片式或列表式） +- 每张图片显示：缩略图、标题、上传者、上传时间 +- 快速操作按钮（通过/拒绝） +- 批量审核功能入口 + +**交互要求：** +- 点击图片可预览大图 +- 点击通过/拒绝按钮执行审核操作 +- 拒绝时弹出原因输入框 +- 支持批量选择多张图片进行审核 + +### 3.7 任务管理页（信息员专属） +**请包含以下核心元素：** +- 顶部导航栏（标题、创建任务按钮） +- 任务列表（显示所有任务） +- 每项任务显示：任务名称、创建时间、截止时间、参与部门数、完成情况、当前进度（重要：必须包含进度显示） +- 任务状态筛选器 +- 任务进度查询功能（重要：必须实现） + +**交互要求：** +- 点击任务进入任务详情 +- 点击创建任务按钮进入创建任务页面 +- 支持任务搜索和筛选 +- 提供任务进度查询和数据统计功能 + +### 3.8 任务详情页 +**请包含以下核心元素：** +- 顶部导航栏（返回按钮、编辑/删除按钮） +- 任务基本信息展示： + - 任务名称、描述 + - 创建人、创建时间 + - 截止时间、目标部门列表 + - 任务状态 +- 任务进度统计（饼图显示各部门完成情况） +- 相关图片列表（显示与该任务关联的图片） + +**交互要求：** +- 点击编辑按钮进入编辑任务页面 +- 点击图片进入图片详情 +- 显示各部门提交进度详情 + +### 3.9 个人中心 +**请包含以下核心元素：** +- 用户信息区域（头像、姓名、角色、所属部门） +- 功能菜单列表： + - 我的上传 + - 消息通知 + - 个人设置 + - 帮助中心 + - 关于我们 + - 退出登录 + +**交互要求：** +- 点击各菜单项跳转到相应页面 +- 点击用户信息区域可编辑个人资料 + +### 3.10 管理中心（管理员专属） +**请包含以下核心元素：** +- 顶部导航栏（标题） +- 管理功能菜单列表： + - 用户管理 + - 部门管理 + - 系统设置 + - 数据统计 + - 操作日志 + +**交互要求：** +- 点击各菜单项跳转到相应管理页面 + +## 4. 后台管理页面（uni-admin） + +### 4.1 整体布局 +**请遵循以下布局规范：** +- **左侧菜单**：功能模块导航 +- **顶部导航**：面包屑、用户信息、系统通知 +- **主内容区**：根据选择的功能显示对应管理界面 +- **PC界面适配**：后台管理页面需要完全适配PC端界面，设计应充分利用PC端宽屏优势，提供更丰富的数据展示和操作空间，确保在1024px及以上分辨率下的良好用户体验 + +### 4.2 关键管理页面 +**请为以下关键页面创建详细原型：** + +#### 用户管理页面 +**请包含以下核心元素：** +- 用户列表（表格形式） +- 搜索、筛选功能 +- 批量操作（启用/禁用、删除） +- 新增、编辑用户功能 +- 角色分配功能 + +#### 部门管理页面 +**请包含以下核心元素：** +- 部门树形结构展示 +- 部门添加、编辑、删除功能 +- 部门负责人设置 + +#### 图片管理页面 +**请包含以下核心元素：** +- 图片列表（表格形式，带缩略图） +- 多条件搜索和筛选 +- 批量操作（删除、审核） +- 图片详情查看 + +#### 任务管理页面 +**请包含以下核心元素：** +- 任务进度概览区域（重要：必须包含） +- 任务列表（表格形式） +- 任务创建、编辑、删除功能 +- 任务进度查询功能（重要：必须实现） +- 进度筛选器 +- 关键指标卡片（总任务数、已完成、逾期等） + +## 5. 交互与动画要求 + +### 5.1 通用交互 +**请实现以下通用交互效果：** +- **页面切换**：使用JavaScript实现页面导航，结合Element UI的过渡动画实现平滑效果 +- **加载状态**：使用Element UI的Loading组件实现加载动画，通过JavaScript控制显示/隐藏 +- **操作反馈**：使用Element UI的按钮组件的默认交互效果，通过Message组件显示提示信息 +- **下拉刷新**：使用JavaScript监听触摸事件实现下拉刷新功能 +- **上拉加载**：使用JavaScript监听滚动事件实现上拉加载更多数据 + +### 5.2 特殊交互 +**请实现以下特殊交互效果：** +- **图片上传**：使用Element UI的Upload组件实现图片上传、预览和进度条显示 +- **审核操作**：使用Element UI的Dialog组件实现模态对话框，添加确认功能 +- **批量操作**：使用Element UI的Checkbox组件实现多选逻辑，配合Button组件实现批量操作 +- **权限提示**：使用JavaScript根据用户角色控制UI元素显示，通过Element UI的Message组件提供友好提示 +- **表单验证**：使用Element UI的Form组件实现表单验证逻辑，自动显示错误状态 + +## 6. 原型交付要求 + +### 6.1 存放位置要求 +**请严格按照以下路径存放文件：** +- 所有界面原型HTML文件必须存放在项目根目录下的 `原型` 子目录中 +- 小程序页面存放在 `原型/小程序页面/` 目录下 +- 后台管理页面存放在 `原型/后台管理页面/` 目录下 +- 每个原型文件需使用语义化的文件名，如 `login.html`、`home.html` + +### 6.2 格式要求 +**请严格遵循以下格式规范：** +- 使用HTML+Element UI设计原型页面 +- 确保所有样式通过Element UI组件和类实现，避免自定义CSS +- 在HTML文件中引入Element UI的CSS和JavaScript CDN +- 提供响应式布局，适配不同设备尺寸 +- **强制要求**：所有原型页面必须汇总到 `原型/index.html` 文件中，方便查阅和管理 + +### 6.3 内容要求 +**请遵循以下内容规范：** +- 包含所有主要页面和关键交互 +- 为不同用户角色（管理员、信息员、部门负责人、普通用户）设计对应的差异化界面 +- 使用Tailwind CSS实现所有布局、颜色、字体和间距要求 +- 添加必要的交互逻辑（使用简单的JavaScript实现） +- 确保页面在浏览器中可以直接打开查看 + +### 6.4 index.html汇总要求 +**请创建以下汇总文件：** +- **必须包含**：所有页面原型的链接、页面名称、功能描述 +- **必须包含**：页面之间的跳转关系图或说明 +- **必须包含**：不同用户角色的界面差异化说明 +- **必须包含**：版本信息、更新日志、设计规范链接 +- **格式要求**：使用HTML+Tailwind CSS实现，响应式设计，支持不同设备查看 +- **交互要求**：点击链接可直接打开对应HTML页面，提供导航菜单快速定位页面 +- **嵌入要求**：**使用iframe元素嵌入其他页面的HTML文件**，实现无需跳转即可在当前页面查看所有原型内容，提供页面切换功能 + +### 6.5 文档要求 +**请遵循以下文档规范：** +- 提供原型说明文档，解释设计思路和交互逻辑 +- 标注各页面功能点和特殊交互要求 +- 说明如何使用Tailwind CSS实现设计规范 +- 提供关键组件的HTML结构和Tailwind类示例 +- 说明页面跳转关系和交互实现方式 + +## 7. 参考资源 +**请参考以下设计资源：** +- 参考软件需求文档中的用户角色和功能需求 +- 遵循uni-app和uView的组件设计规范 +- 参考微信小程序设计指南 +- 参考Ant Design设计系统的布局和组件规范 +- 参考uni-admin的后台管理界面设计风格 + +--- + +以上指令基于《软件需求文档》制定，如有任何疑问或需要调整，请及时与需求方沟通确认。 \ No newline at end of file diff --git a/软件需求文档.md b/软件需求文档.md new file mode 100644 index 0000000..a4ae999 --- /dev/null +++ b/软件需求文档.md @@ -0,0 +1,229 @@ +# 图片收集小程序需求文档 + +## 1. 产品概述 + +### 1.1 产品名称 +图片收集小程序 + +### 1.2 产品定位 +专为企业内部设计的图片收集与管理工具，用于上级公司统一收集、整理和管理各下级部门提交的图片资料。 + +### 1.3 产品目标 +- 提供便捷的图片上传功能，支持多部门、多用户操作 +- 建立统一的图片管理体系，便于分类、查询和统计 +- 简化图片审核流程，提高工作效率 +- 确保图片资料的安全存储和访问权限控制 + +## 2. 用户分析 + +### 2.1 用户角色 +- **管理员**：系统最高权限，负责用户管理、系统配置、部门管理 +- **信息员**：负责发表收集任务，指定要收集的部门，同时审核图片是否符合要求，查询任务进度 +- **部门负责人**：可同时管理多个部门，对所有管理部门的图片上传、审核和查询拥有权限 +- **普通用户**：仅能上传本部门图片并查看自己上传的图片状态 + +### 2.2 用户痛点 +- 传统邮件或聊天软件传输图片效率低下，易丢失 +- 图片资料分散，难以统一管理和查找 +- 缺乏有效的审核机制，无法确保图片质量 +- 难以追踪图片提交进度和完成情况 + +## 3. 功能需求 + +### 3.1 用户管理模块 +- **用户注册/登录**：支持手机号注册，验证码登录 +- **角色分配**：管理员可设置用户角色（管理员、信息员、部门负责人、普通用户） +- **部门管理**：管理员可创建、编辑、删除部门信息 +- **用户绑定部门**：管理员可将用户分配到一个或多个部门，支持一个用户管理多个部门的场景 + +### 3.2 图片上传模块 +- **单张/批量上传**：支持选择本地图片单张上传或多张批量上传 +- **图片预览**：上传前可预览图片 +- **图片信息填写**：上传时需填写图片标题、描述、分类标签等信息 +- **上传状态显示**：显示上传进度和结果 +- **失败重试机制**：上传失败时支持重试 + +### 3.3 图片审核模块 +- **待审核列表**：显示所有待审核的图片，信息员和管理员可查看所有待审核图片，部门负责人可查看其负责的所有部门的待审核图片 +- **审核操作**：支持通过或拒绝，拒绝时需填写原因（信息员、部门负责人和管理员均有审核权限） +- **审核历史记录**：记录每张图片的审核状态和审核人 +- **批量审核**：支持多张图片批量审核 + +### 3.4 图片管理模块 +- **图片列表**：显示所有图片，支持分页（管理员和信息员可查看所有图片，部门负责人可查看其负责的所有部门的图片，普通用户仅可查看自己上传的图片） +- **图片分类**：按部门、分类标签等进行分类展示 +- **搜索功能**：支持按图片标题、描述、上传人、日期等条件搜索，部门负责人可按负责部门筛选 +- **图片查看**：点击图片可放大查看详细信息 +- **图片删除**：管理员和部门负责人可删除各自权限范围内的图片 +- **图片统计**：显示各部门图片上传数量、审核通过率等统计信息（管理员和信息员可见全部，部门负责人可见其负责部门的统计） +- **收集任务管理**：信息员可创建、编辑、删除图片收集任务，指定任务名称、描述、截止时间、目标部门等信息 + +### 3.5 消息通知模块 +- **审核通知**：图片审核结果通过小程序消息通知用户 +- **任务提醒**：提醒用户完成图片上传任务 +- **系统通知**：发布系统公告和重要信息 + +## 4. 非功能需求 + +### 4.1 性能需求 +- **响应时间**：页面加载时间不超过3秒 +- **并发处理**：支持至少500名用户同时在线使用 +- **上传速度**：5MB图片上传时间不超过10秒 +- **图片格式与大小**：支持JPG、PNG、WEBP格式，单张图片大小不超过10MB，建议使用压缩后的图片以提高加载速度 + +### 4.2 安全需求 +- **数据加密**：用户密码加密存储，图片传输加密 +- **访问控制**：基于角色的访问控制，确保数据安全 +- **数据备份**：定期对图片数据进行备份 + +### 4.3 兼容性需求 +- **设备兼容**：支持主流手机型号（iOS 13+，Android 8+） +- **网络环境**：支持WiFi和4G/5G网络环境 + +### 4.4 可用性需求 +- **界面简洁**：操作流程简单明了，易于上手 +- **错误提示**：提供清晰的错误提示和操作引导 +- **离线功能**： + - 支持在无网络环境下缓存已上传的图片信息 + - 支持在离线状态下编写图片描述和标签，待网络恢复后自动提交 + - 提供离线任务提醒功能 + +## 5. 数据需求 + +### 5.1 用户数据 +- 用户ID、手机号、密码（加密）、姓名、角色、所属部门列表（支持多部门关联）、注册时间、最后登录时间 + +### 5.2 部门数据 +- 部门ID、部门名称、负责人ID列表（支持多负责人）、创建时间、描述 + +### 5.3 图片数据 +- 图片ID、图片URL、标题、描述、上传者ID、所属部门ID、上传时间、审核状态、审核人ID、审核时间、分类标签 + +### 5.4 任务数据 +- 任务ID、任务名称、任务描述、创建人ID（信息员）、创建时间、截止时间、目标部门ID列表、任务状态、完成情况统计 + +### 5.5 操作日志数据 +- 日志ID、操作人ID、操作类型、操作时间、操作对象、操作结果 + +## 6. 界面设计 + +### 6.1 整体风格 +- 简洁、专业，符合企业形象 +- 主色调：蓝色系（代表专业、信任） +- 辅助色：灰色系（用于中性背景和次要元素） + +### 6.2 主要页面 +- **登录页**：简洁的登录界面，包含手机号输入框、验证码输入框和登录按钮 +- **首页**： + - 管理员/信息员：显示待处理任务、统计图表、最新上传图片 + - 部门负责人：可切换查看所有管理部门的待处理任务、待审核图片、部门图片统计 + - 普通用户：显示个人待完成任务、我的上传图片列表 +- **上传页**：简洁的图片选择区域、信息填写表单，可选择关联任务 +- **图片列表页**：图片卡片式展示，支持筛选和搜索 +- **图片详情页**：大图展示、详细信息、审核状态、关联任务 +- **审核页**：待审核图片列表、快速审核按钮 +- **任务管理页**（信息员专属）：任务列表、创建任务、任务详情、任务进度统计 +- **任务详情页**：显示任务信息、参与部门、提交状态统计、相关图片列表 +- **个人中心**：用户信息、我的上传、消息通知等 +- **管理中心**：用户管理、部门管理、系统设置等 + +## 7. 技术实现建议 + +### 7.1 前端技术 +- **开发工具**：HBuilderX +- **开发框架**：uni-app +- **后台管理框架**：uni-admin +- **UI框架**：uView +- **技术要点**： + - 采用组件化开发提高代码复用性 + - 使用Vue.js语法规范 + - 遵循uni-app项目结构规范 + - 利用uView组件库构建统一的UI界面 + - 利用uni-app跨平台能力适配不同端 + - 前端权限控制与后端权限管理保持一致 + - 后台管理页面遵循uni-admin的界面设计规范 + +### 7.2 后端技术 +- **云开发平台**：uni-cloud +- **数据库**：uniCloud数据库 +- **文件存储**：uniCloud云存储 +- **后端逻辑**：云函数（JavaScript/TypeScript） +- **数据安全**： + - 利用uniCloud数据库权限规则控制数据访问 + - 敏感数据加密存储 + - 实现基于角色的权限控制 + - 关键操作记录审计日志 + +### 7.3 API设计 +- 基于uniCloud云函数的API设计 +- 统一的错误处理机制 + - 定义统一的错误码体系 + - 提供友好的错误提示信息 + - 记录详细的错误日志用于调试 +- 完善的接口文档 +- 利用uniCloud权限控制实现用户鉴权 +- 支持请求缓存和限流机制 + +## 8. 项目实施计划 + +### 8.1 开发阶段 +- 需求分析与设计：2周 + - 详细功能设计 + - 数据库设计 + - 接口设计 + - UI原型设计 +- 前端开发：4周 + - 基础框架搭建 + - 小程序端开发 + - 后台管理端(uni-admin)开发 + - UI组件封装与优化 +- 后端开发：4周 + - uni-cloud环境配置 + - 数据库表结构设计 + - 云函数开发 + - 权限体系实现 +- 联调测试：2周 + - 功能测试 + - 性能测试 + - 兼容性测试 + - 安全测试 + +### 8.2 上线计划 +- 内部测试：1周 + - 修复bug + - 性能优化 +- 试点部门使用：1周 + - 收集反馈 + - 迭代优化 +- 全公司推广使用：持续进行 + - 用户培训 + - 系统维护与升级 + +## 9. 风险评估与应对策略 + +### 9.1 潜在风险 +- 用户操作不熟悉导致使用困难 +- 图片存储容量和成本控制 +- 网络环境不佳影响上传体验 + +### 9.2 应对策略 +- 提供详细的使用指南和在线帮助 +- 制定合理的存储策略，定期清理无效图片 +- 优化上传机制，支持断点续传 + +## 10. 附录 + +### 10.1 术语定义 +- 图片分类：为便于管理，根据图片内容或用途设定的标签 +- 审核状态：包括待审核、已通过、已拒绝 +- 部门负责人：可同时负责管理多个部门的用户和图片审核的人员，系统支持一个用户关联多个部门 +- 信息员：负责创建收集任务并审核图片的人员 +- 收集任务：由信息员创建的特定图片收集活动，包含任务要求、截止时间和目标部门 + +### 10.2 参考资料 +- 微信小程序开发文档 +- 企业信息管理系统最佳实践 + +--- + +本文档为初步需求分析，实际开发过程中可能根据具体情况进行调整和完善。 \ No newline at end of file diff --git a/项目规则文件.md b/项目规则文件.md new file mode 100644 index 0000000..b0db1c4 --- /dev/null +++ b/项目规则文件.md @@ -0,0 +1,232 @@ +# 项目规则文件 + +## 1. 总则 + +本文档定义了图片收集小程序项目的核心开发规则、编码规范和工作流程，适合个人工作室开发环境使用。 + +## 2. 代码规范 + +### 2.1 开发工具与框架 + +- **开发工具**：HBuilderX +- **开发框架**：uni-app（Vue.js） +- **后台管理框架**：uni-admin +- **云开发平台**：uni-cloud +- **UI框架**：uView +- **uView版本**：建议使用最新稳定版 + +### 2.2 代码风格 + +- **缩进**：使用4个空格进行缩进，禁止使用Tab +- **行长度**：每行代码长度不超过120个字符 +- **文件编码**：统一使用UTF-8编码 +- **换行符**：使用LF（\n）作为换行符 +- **注释**： + - 函数/方法必须包含注释，说明功能、参数和返回值 + - 复杂逻辑必须添加注释说明 + - 避免不必要的注释，代码应当自解释 +- **uView使用规范**： + - 优先使用uView提供的组件，保持UI一致性 + - 遵循uView的主题配置机制进行样式定制 + - 组件属性值优先使用uView提供的常量或枚举值 + - 自定义样式时，避免直接覆盖uView组件的样式，应使用`custom-class`属性 + - 对于常用的uView组件配置，可封装为业务组件以提高复用性 +- **uni-admin使用规范**： + - 遵循uni-admin的目录结构和文件命名规范 + - 使用uni-admin提供的权限管理机制 + - 扩展uni-admin功能时，应遵循其插件机制 + - 后台页面开发时，复用uni-admin提供的基础组件 + - 遵循uni-admin的页面布局规范，确保后台管理界面风格统一 +- **uni-cloud使用规范**： + - 云函数命名应清晰表达其功能，使用小驼峰命名法 + - 数据库集合命名使用复数形式，全小写 + - 严格遵循uni-cloud权限控制规则 + - 避免在云函数中执行耗时操作，复杂业务逻辑应拆分处理 + - 使用云函数时，需要对入参进行严格校验 + - 云函数代码需进行模块化设计，提高复用性 + - 数据库查询应添加合理索引，优化查询性能 + - 云存储文件命名应包含时间戳或随机字符串，避免文件名冲突 + +### 2.3 命名规范 + +- **变量名**：使用小驼峰命名法（camelCase） + - 示例：`userName`, `departmentList`, `imageCount` +- **常量名**：使用全大写，下划线分隔 + - 示例：`MAX_UPLOAD_SIZE`, `API_BASE_URL` +- **函数/方法名**：使用小驼峰命名法，动词开头 + - 示例：`uploadImage()`, `verifyUser()`, `getDepartmentList()` +- **组件名**： + - 自定义组件：使用大驼峰命名法（PascalCase）或短横线命名法（kebab-case） + - 示例：`UserManager.vue`, `image-uploader.vue` + - uView组件：遵循uView官方命名规范，使用`u-`前缀 + - 示例：`u-button`, `u-upload`, `u-table` +- **文件名**：遵循uni-app命名规范，页面文件名建议与页面路由保持一致 + - 示例：`index.vue`, `upload.vue`, `user-detail.vue` +- **云函数命名**：使用小驼峰命名法，前缀表示模块 + - 示例：`userLogin`, `imageUpload`, `taskCreate` +- **数据库集合命名**：使用复数形式，全小写 + - 示例：`users`, `departments`, `images`, `tasks`, `logs` + +### 2.4 目录结构规范（uni-app + uView + uni-admin） + +- `/pages` - 页面文件目录 + - `/admin` - 后台管理页面目录（uni-admin相关） +- `/components` - 自定义组件目录 + - `/uview-ui` - uView UI组件目录（通过插件安装） +- `/static` - 静态资源目录 +- `/common` - 公共资源目录 +- `/api` - 网络请求接口目录 +- `/utils` - 工具函数目录 +- `/services` - 业务逻辑层目录 +- `/config` - 配置文件目录 + - `/theme.scss` - uView主题变量配置文件 +- `/store` - Vuex状态管理目录（可选） +- `/uniCloud` - uni-cloud云开发目录 + - `/database` - 数据库相关配置 + - `/functions` - 云函数目录 + - `/cloud-storage` - 云存储相关文件 +- `/uni_modules` - uni-modules插件目录（包含uni-admin等） + +## 3. 开发流程 + +### 3.1 分支管理（简化） + +- **main**：主分支，存放稳定版本代码 +- **feature**：功能开发分支 +- **bugfix**：bug修复分支（可选） + +### 3.2 代码提交规范 + +提交信息建议使用简洁格式： +``` +<类型>: <描述> +``` + +常用类型： +- **feat**: 新功能 +- **fix**: 修复bug +- **docs**: 文档更新 +- **refactor**: 代码重构 + +## 4. 安全规范 + +### 4.1 数据安全 + +- 敏感数据必须加密存储 +- API接口必须进行权限验证 +- 防止SQL注入、XSS攻击等常见安全问题 +- 文件上传必须验证文件类型和大小 +- 使用uniCloud的环境变量存储敏感配置信息，避免硬编码 +- 云函数中避免打印敏感信息到日志 + +### 4.2 权限管理 + +- 严格按照用户角色分配权限（管理员、信息员、部门负责人、普通用户） +- 确保部门负责人只能访问其负责的部门数据 +- 实现细粒度的权限控制 +- 在uniCloud数据库中设置合理的权限规则 +- 所有数据查询操作必须包含权限过滤条件 +- 对关键操作（如删除、修改权限）添加二次确认机制 + +## 5. 测试规范 + +### 5.1 测试要求 + +- 核心功能建议编写基本测试用例 +- 确保主要业务流程正常运行 +- 重要接口进行必要的测试验证 +- 云函数测试：使用uniCloud提供的本地调试工具进行云函数测试 +- 权限测试：验证不同角色用户的权限控制是否正确 + +### 5.2 测试环境 + +- 开发环境：本地开发环境 +- 测试环境：uniCloud测试环境 +- 生产环境：uniCloud正式运行环境 + +## 6. 文档规范 + +### 6.1 代码文档 + +- 复杂函数和关键逻辑添加注释说明 +- 保持代码自解释性 + +### 6.2 项目文档 + +- 维护基础需求文档 +- 记录主要技术决策 +- 编写简明部署说明 + +## 7. 性能优化 + +### 7.1 前端性能优化 + +- 图片适当压缩和懒加载 +- 避免明显的性能瓶颈 +- 优化关键操作的响应速度 +- 减少网络请求次数，合理使用缓存 +- 页面组件按需加载，避免一次性加载过多内容 +- 使用uni-app提供的性能优化API + +### 7.2 uni-cloud性能优化 + +- 云函数保持轻量化，避免不必要的计算 +- 合理设置数据库索引，优化查询性能 +- 使用事务处理复杂的数据库操作 +- 云存储文件进行合理分类和命名 +- 利用云函数缓存机制减少重复计算 +- 定期清理无效数据，优化存储使用效率 + +## 8. 版本号规范 + +采用语义化版本号（Semantic Versioning）： + +`主版本号.次版本号.修订号` + +- **主版本号**：不兼容的API变更 +- **次版本号**：向下兼容的功能性新增 +- **修订号**：向下兼容的问题修正 + +## 9. 多部门管理特殊规则 + +### 9.1 数据访问控制 + +- 确保部门负责人只能访问和管理其负责的所有部门数据 +- 在数据查询时必须包含部门权限过滤条件 + +### 9.2 用户界面 + +- 为管理多个部门的用户提供部门切换功能 +- 显示数据时必须明确标识所属部门 + +## 10. 部署规范 + +### 10.1 部署流程 + +- 使用HBuilderX提供的uniCloud部署功能 +- 遵循环境分离原则，开发、测试、生产环境严格隔离 +- 正式发布前进行完整的回归测试 + +### 10.2 环境配置 + +- 使用uniCloud环境变量管理不同环境的配置 +- 敏感配置信息通过环境变量注入，不硬编码到代码中 +- 定期备份数据库和云存储中的重要数据 + +### 10.3 版本管理 + +- 每次发布需记录详细的版本说明 +- 重要版本进行数据库备份 +- 建立回滚机制，确保问题出现时可快速恢复 + +## 11. 附则 + +- 本规则根据个人工作室实际情况可灵活调整 +- 核心规范建议严格遵守以保证代码质量 +- 随着项目发展可逐步完善规则 + +--- + +**文档版本**：v1.0.0 +**发布日期**：2024年 +**编制**：个人工作室 \ No newline at end of file