his-answer/TECHNICAL.md

项目技术文档

1. 项目介绍

本项目是一个基于 Vue.js 的问卷调查服务系统，主要用于移动端用户填写表单、查看结果等场景。系统支持通过 URL 参数动态加载不同的问卷内容，并能与医疗机构的挂号系统进行联动。

核心功能

• 支持通过 token 或手机号识别用户身份
• 动态加载指定 topic_id 的问卷内容
• 支持与挂号系统（clinic_id）联动的业务流程
• 可查询已有填写结果（result_id）

2. 目录结构说明

.
├── 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. 功能模块说明

主要功能模块

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）