|
|
@@ -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)
|