# 项目技术文档

## 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）