Prechádzať zdrojové kódy

feat:增加文档

jilei 3 týždňov pred
rodič
commit
54c5847202
3 zmenil súbory, kde vykonal 524 pridanie a 0 odobranie
  1. 133 0
      BUSINESS.md
  2. 186 0
      NOTES.md
  3. 205 0
      TECHNICAL.md

+ 133 - 0
BUSINESS.md

@@ -0,0 +1,133 @@
+# 项目业务文档
+
+## 1. 业务概述
+
+本项目是一个医疗问卷调查系统,主要用于医疗机构患者填写各类表单以及查看填写结果。系统通过URL参数实现动态加载不同的问卷内容,并能够与医院挂号系统进行联动,形成完整的医疗服务流程。
+
+## 2. 核心业务模块
+
+### 2.1 表单填写模块 (FormVolume)
+
+表单填写是系统的核心功能之一,支持多种布局类型的问卷展示和填写。
+
+#### 主要特点:
+- 支持多种布局类型(Layout1、Layout2、Layoutileads1)
+- 提供历史记录查看功能
+- 支持复杂的表单验证规则
+- 可根据不同业务场景定制表单字段
+
+#### 业务流程:
+1. 用户通过特定链接进入系统(携带token、topic_id等参数)
+2. 系统根据topic_id加载相应的问卷模板
+3. 用户填写问卷内容
+4. 提交表单数据至后台
+5. 系统保存填写结果并返回结果ID
+
+### 2.2 结果查看模块 (FormResult)
+
+该模块用于展示用户已提交的问卷结果。
+
+#### 主要特点:
+- 展示已填写问卷的内容和结果
+- 支持结果数据的格式化展示
+- 可通过result_id直接访问特定结果
+
+#### 业务流程:
+1. 用户通过带有result_id的链接访问系统
+2. 系统根据result_id获取填写结果
+3. 展示格式化的结果内容给用户
+
+### 2.3 用户管理模块 (Manager)
+
+用户管理模块提供了系统的配置和属性管理功能。
+
+#### 主要特点:
+- 支持用户个性化设置
+- 提供系统配置选项
+- 管理用户相关的元数据
+
+### 2.4 身份认证模块
+
+系统支持两种身份识别方式:
+
+#### Token认证
+- 通过URL中的token参数识别用户身份
+- 系统会将token存储在Cookie中供后续请求使用
+
+#### 手机号认证
+- 通过手机号识别用户
+- 与医疗机构的用户体系对接
+
+## 3. 业务链路
+
+### 3.1 新用户填写表单链路
+
+```mermaid
+graph LR
+A[用户点击链接] --> B[系统解析参数]
+B --> C{参数验证}
+C -->|有效| D[加载问卷模板]
+C -->|无效| E[显示错误页面]
+D --> F[展示表单]
+F --> G[用户填写表单]
+G --> H[提交表单]
+H --> I[保存结果]
+I --> J[返回结果ID]
+```
+
+### 3.2 查看结果链路
+
+```mermaid
+graph LR
+A[用户点击结果链接] --> B[系统解析result_id]
+B --> C{ID有效性检查}
+C -->|有效| D[加载结果数据]
+C -->|无效| E[显示错误页面]
+D --> F[展示结果]
+```
+
+### 3.3 系统集成链路
+
+```mermaid
+graph LR
+A[医院挂号系统] --> B{生成问卷链接}
+B --> C[包含token/topic_id等参数]
+C --> D[用户访问链接]
+D --> E[系统处理请求]
+E --> F{判断请求类型}
+F -->|填写表单| G[FormVolume模块]
+F -->|查看结果| H[FormResult模块]
+```
+
+## 4. 参数说明
+
+### 4.1 必要参数
+
+| 参数名 | 说明 | 示例 |
+|--------|------|------|
+| token | 用户身份标识 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx |
+| topic_id | 问卷主题ID | 10001 |
+| clinic_id | 医院ID | 20001 |
+
+### 4.2 可选参数
+
+| 参数名 | 说明 | 示例 |
+|--------|------|------|
+| result_id | 结果ID | 30001 |
+| group_id | 组ID | 40001 |
+| mobile | 手机号 | 13800138000 |
+
+## 5. 业务规则
+
+### 5.1 数据一致性规则
+- 同一用户对同一topic_id只能有一份有效的表单结果
+- 表单提交后不可修改,只能重新填写
+
+### 5.2 权限控制规则
+- 用户只能查看自己的表单结果
+- 通过token或mobile参数验证用户身份
+
+### 5.3 数据安全规则
+- 敏感操作必须验证token或mobile
+- URL参数需要进行合法性校验
+- 避免XSS攻击风险

+ 186 - 0
NOTES.md

@@ -0,0 +1,186 @@
+# 项目注意事项文档
+
+## 1. 注意事项
+
+### 1.1 技术注意事项
+
+#### 兼容性问题
+- 项目使用的 webpack-dev-server 版本较老(^2.9.1),而 Node.js 版本为 14.2.0,可能存在兼容性风险
+- 旧版本 webpack-dev-server 对高版本 Node.js 支持不佳,建议升级或替换开发服务器
+
+#### 命名规范问题
+- 存在拼写错误的目录名:`Layoutileads1` 应为 `LayoutLeads1` 或类似命名
+- 需要确认是否为笔误并在后续版本中修复
+
+#### 代码质量问题
+- 项目中存在两个相同的 README.md 内容重复,可能为冗余文件
+- 建议清理冗余文件以保持项目整洁
+
+#### 安全注意事项
+- 敏感操作需验证 token 或 mobile 参数
+- 避免 XSS 风险(注意 mixin 中的规则注入)
+- 不应在前端暴露敏感接口密钥
+
+### 1.2 性能注意事项
+
+#### 加载性能
+- 系统需支持移动端快速加载
+- 使用 webpack 分离公共代码优化首屏性能
+- 图片资源建议压缩处理
+
+#### 浏览器兼容性
+- 支持现代主流浏览器
+- 不支持 IE <= 8 版本
+
+### 1.3 业务注意事项
+
+#### 参数处理
+- 所有 URL 参数都需要进行合法性校验
+- token 和 mobile 是互斥的身份验证方式
+- topic_id 和 result_id 不能同时为空
+
+#### 数据一致性
+- 同一用户对同一 topic_id 只能有一份有效的表单结果
+- 表单提交后不可修改,只能重新填写
+
+## 2. 实施指南
+
+### 2.1 环境搭建
+
+#### 开发环境要求
+1. 安装 Node.js 14.2.0
+2. 安装 npm >=6.14.4 或 Yarn
+3. 安装 Git(推荐)
+
+#### 项目初始化步骤
+1. 克隆项目到本地目录
+2. 打开终端进入项目根目录
+3. 安装依赖:
+   ```bash
+   yarn install
+   ```
+   或
+   ```bash
+   npm install
+   ```
+
+4. 启动本地开发服务器:
+   ```bash
+   npm run dev
+   ```
+   默认访问地址:http://localhost:8080
+
+### 2.2 部署指南
+
+#### 生产环境部署
+1. 构建生产环境代码:
+   ```bash
+   npm run build
+   ```
+
+2. 查看打包分析报告(可选):
+   ```bash
+   npm run build --report
+   ```
+
+3. 将 `dist/` 目录下的文件部署至 Web 服务器(如 Nginx、Apache)
+
+#### 部署注意事项
+- 确保服务器支持静态文件服务
+- 配置正确的路径重定向以支持 Vue Router 的 history 模式
+- 设置合适的缓存策略提高加载速度
+
+## 3. 最佳实践
+
+### 3.1 开发实践
+
+#### 组件开发
+- 优先使用现有的公共组件
+- 遵循单一职责原则,每个组件只负责一个功能点
+- 使用 mixin 复用校验规则和布局逻辑
+
+#### 状态管理
+- 合理划分 Vuex 模块(header、manager、user)
+- 避免在组件中直接修改 store 数据
+- 使用 getter 获取派生状态
+
+#### 路由管理
+- 利用路由守卫(`router/permission.js`)实现访问权限控制
+- 合理组织路由结构,便于维护
+
+#### HTTP 请求
+- 通过 `api/index.js` 统一管理接口调用
+- 使用 `utils/http` 封装的 axios 处理拦截和基础配置
+- 对请求和响应进行适当的错误处理
+
+### 3.2 Git 工作流实践
+
+#### 分支管理
+1. 严格按照版本分支策略执行:
+   - 1.0U 版本:生产(master)、测试(develop),只能 develop 合并到 master
+   - 1.0S 版本:生产(eye)、测试(eye-dev),只能 eye-dev 合并到 eye
+   - 不同版本分支相互独立,不能相互合并
+
+2. 功能开发流程:
+   - 从测试分支创建功能分支
+   - 在功能分支上进行开发
+   - 提交 Pull Request/Merge Request 进行代码审查
+   - 审查通过后合并回测试分支
+
+#### 提交规范
+- 使用清晰明确的提交信息
+- 每次提交只包含一个功能点的变更
+- 关联相关的任务或问题编号
+
+### 3.3 代码质量实践
+
+#### 代码审查要点
+- 检查是否存在潜在的安全漏洞
+- 确认代码符合项目编码规范
+- 验证功能实现是否满足需求
+- 检查是否有冗余或无用的代码
+
+#### 性能优化建议
+- 减少不必要的组件重新渲染
+- 合理使用 computed 和 watch
+- 对大列表进行虚拟滚动优化
+- 压缩图片和其他静态资源
+
+#### 测试建议
+- 对核心业务逻辑编写单元测试
+- 对复杂组件编写集成测试
+- 进行跨浏览器兼容性测试
+- 定期进行性能基准测试
+
+## 4. 常见问题及解决方案
+
+### 4.1 开发环境问题
+
+#### 依赖安装失败
+- 清除缓存后重新安装:`npm cache clean --force` 然后 `npm install`
+- 确认 Node.js 版本是否匹配要求(14.2.0)
+
+#### 启动失败
+- 检查端口是否被占用,默认使用 8080 端口
+- 确认配置文件是否正确
+
+### 4.2 部署问题
+
+#### 页面空白
+- 检查构建过程是否有错误
+- 确认服务器配置是否支持 Vue Router 的 history 模式
+
+#### 静态资源加载失败
+- 检查资源路径配置
+- 确认服务器静态资源配置是否正确
+
+### 4.3 业务逻辑问题
+
+#### 表单验证不生效
+- 检查 rules.js 中的验证规则配置
+- 确认表单字段名称是否匹配
+
+#### 数据加载异常
+- 检查网络请求是否正常
+- 确认参数传递是否正确
+- 查看浏览器控制台错误信息

+ 205 - 0
TECHNICAL.md

@@ -0,0 +1,205 @@
+# 项目技术文档
+
+## 1. 项目介绍
+
+本项目是一个基于 Vue.js 的问卷调查服务系统,主要用于移动端用户填写表单、查看结果等场景。系统支持通过 URL 参数动态加载不同的问卷内容,并能与医疗机构的挂号系统进行联动。
+
+### 核心功能
+
+- 支持通过 token 或手机号识别用户身份
+- 动态加载指定 topic_id 的问卷内容
+- 支持与挂号系统(clinic_id)联动的业务流程
+- 可查询已有填写结果(result_id)
+
+## 2. [目录结构说明](#directory-structure)
+
+```
+.
+├── config                    # 配置文件目录
+│   ├── dev.env.js           # 开发环境配置
+│   ├── index.js             # 基础配置
+│   └── prod.env.js          # 生产环境配置
+├── src                      # 源代码主目录
+│   ├── api                  # 接口相关
+│   │   └── index.js
+│   ├── assets               # 静态资源
+│   │   └── css
+│   │       ├── base.scss
+│   │       └── ui.scss
+│   ├── common              # 公共资源
+│   │   └── scss
+│   │       ├── base.scss
+│   │       └── bl-flex.scss
+│   ├── components          # 公共组件
+│   │   ├── UserImg
+│   │   │   └── index.vue
+│   │   ├── ViewMove
+│   │   │   └── index.vue
+│   │   └── ViewScroll
+│   │       └── index.vue
+│   ├── directive           # 自定义指令
+│   │   ├── blBr.js
+│   │   └── blMobile.js
+│   ├── pages               # 页面组件
+│   │   ├── FormResult      # 表单结果页
+│   │   │   ├── mixins
+│   │   │   │   ├── index.js
+│   │   │   │   └── rules.js
+│   │   │   ├── index.vue
+│   │   │   └── style.scss
+│   │   ├── FormVolume      # 表单填写页
+│   │   │   ├── Layout1
+│   │   │   │   ├── index.vue
+│   │   │   │   └── style.scss
+│   │   │   ├── Layout2
+│   │   │   │   ├── index.vue
+│   │   │   │   └── style.scss
+│   │   │   ├── Layoutileads1
+│   │   │   │   ├── index.vue
+│   │   │   │   └── style.scss
+│   │   │   ├── components
+│   │   │   │   └── HistoryRecord
+│   │   │   │       └── index.vue
+│   │   │   ├── js
+│   │   │   │   ├── area.js
+│   │   │   │   └── custom.js
+│   │   │   ├── mixins
+│   │   │   │   ├── index.js
+│   │   │   │   └── layout.js
+│   │   │   ├── index.vue
+│   │   │   └── style.scss
+│   │   ├── Manager         # 管理页面
+│   │   │   ├── js
+│   │   │   │   └── config.js
+│   │   │   ├── mixins
+│   │   │   │   ├── attribute.js
+│   │   │   │   └── index.js
+│   │   │   ├── common.scss
+│   │   │   ├── index.vue
+│   │   │   └── style.scss
+│   │   ├── 404.vue         # 404页面
+│   │   └── Entry.vue       # 入口页面
+│   ├── router              # 路由配置
+│   │   ├── index.js
+│   │   └── permission.js
+│   ├── store               # 状态管理
+│   │   ├── modules
+│   │   │   ├── header.js
+│   │   │   ├── manager.js
+│   │   │   └── user.js
+│   │   ├── getters.js
+│   │   └── index.js
+│   ├── utils               # 工具类
+│   │   ├── http
+│   │   │   ├── index.js
+│   │   │   └── init.js
+│   │   ├── Single.js
+│   │   ├── blRule.js
+│   │   ├── environment.js
+│   │   ├── jweixin-1.3.2.js
+│   │   └── storage.js
+│   ├── App.vue
+│   └── main.js
+├── README.md
+├── index.html
+└── package.json
+```
+
+## 3. [功能模块说明](#functional-modules)
+
+### 主要功能模块
+
+1. **表单填写 (FormVolume)**
+   - 支持多种布局(Layout1、Layout2、Layoutileads1)的问卷展示和交互
+   - 提供历史记录查看功能
+   - 支持区域选择和自定义字段
+
+2. **结果查看 (FormResult)**
+   - 展示已提交问卷的结果
+   - 支持结果数据的展示和格式化
+
+3. **用户管理页面 (Manager)**
+   - 提供配置和属性管理功能
+   - 支持用户相关设置
+
+4. **入口路由控制 (Entry.vue)**
+   - 根据 query 参数跳转至对应页面
+   - 处理用户身份验证和初始化
+
+5. **404 页面**
+   - 处理无效路由请求
+
+## 4. 技术栈
+
+| 类别 | 技术 |
+|------|------|
+| 前端框架 | Vue.js ^2.5.2 |
+| UI 框架 | Vant ^2.11.1 |
+| 构建工具 | Webpack ^3.6.0 |
+| 包管理 | yarn / npm |
+| 编程语言 | JavaScript (ES6+) + SCSS |
+| HTTP 客户端 | axios ^0.18.0 |
+| 路由 | vue-router ^3.0.1 |
+| 状态管理 | vuex ^3.3.0 |
+
+### 其他依赖项
+
+- js-cookie: 管理浏览器 Cookie
+- qs: 查询字符串序列化
+- datejs: 日期处理
+- postcss-px2rem: 移动端 rem 自适应
+- vconsole: 移动端调试面板
+
+### 版本要求
+
+- Node.js: 14.2.0
+- npm: >=6.14.4
+
+## 5. Git分支说明
+
+### 1.0U 版本分支
+- 生产环境分支: master
+- 测试环境分支: develop
+- 合并规则: 只允许从 develop 分支合并到 master,不允许从 master 分支合并到 develop
+
+### 1.0S 版本分支
+- 生产环境分支: eye
+- 测试环境分支: eye-dev
+- 合并规则: 只允许从 eye-dev 分支合并到 eye,不允许从 eye 分支合并到 eye-dev
+
+### 分支管理原则
+- 1.0U 和 1.0S 的分支相互独立,不能相互合并
+- 所有功能开发应在对应的测试分支上进行
+- 发布时需要通过 Pull Request/Merge Request 进行代码审查
+
+## 6. 环境说明
+
+### 开发环境
+- Node.js 14.2.0
+- npm >=6.14.4 或 Yarn
+- Git(推荐)
+- 文本编辑器(如 VSCode)
+
+### 搭建步骤
+1. 克隆项目到本地目录
+2. 进入项目根目录
+3. 安装依赖:
+   ```bash
+   yarn install
+   ```
+4. 启动本地开发服务器:
+   ```bash
+   npm run dev
+   ```
+   默认访问地址:http://localhost:8080
+
+### 生产环境
+- 构建命令:
+  ```bash
+  npm run build
+  ```
+- 查看打包分析报告:
+  ```bash
+  npm run build --report
+  ```
+- 输出目录:默认为 `dist/`,需部署至 Web 服务器(如 Nginx、Apache)