# 金山表单

**Repository Path**: PunchOvO/wpsform

## Basic Information

- **Project Name**: 金山表单
- **Description**: 本项目的前端样式、交互以及提示等内容参考金山表单进行实现。 相较于金山表单，功能做了较多删减。链接为演示demo
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: punch
- **Homepage**: https://wpsform.vercel.app/#/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-21
- **Last Updated**: 2023-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, JavaScript

## README

# 金山表单

### 介绍
本项目的前端样式、交互以及提示等内容参考金山表单进行实现。 相较于金山表单，功能做了较多删减，这里是原型图https://modao.cc/app/ZlAsY7aErb1kbbQZFPMz5。

### 构建运行
- vue create wpsform

```bash
# 下载依赖
$ npm i (yarn add 项目所需依赖各种包)

# 运行
# 同时在form-server服务端后端开启服务监听3000端口，在wpsform前端中起项目
$ npm run serve
```

### 实现模块划分

1. **用户模块** 注册、登录、退出、设置用户信息、获取用户信息、修改密码
2. **表单模块** 创建、填写、查看填写详情(题目栏目)、预览、保存草稿
3. **问题模块** 发布、编辑、查看结果、收藏、取消收藏、获取收藏列表


### 项目使用说明
- 运行项目，会进入欢迎页，点击立即使用会进入首页，在首页会判断用户的登录状态，并决定是否跳转至登录注册界面。
- 登录注册页面实现了部分响应式，以及输入提示和输入验证，在个人信息页面实现了传入头像，修改信息等一系列操作。
- 在首页可以看到自己创建的表单列表，可以设置是否发布、停止手机，标星，删除等操作。
- 左上角按钮点击进入新建表单，左侧的题目项点击后可以向中间的题目列表添加对应的题目，中间可以实现问题的设置，复制，删除，添加到常用，右侧的按钮实现了添加草稿，继续编辑草稿，预览表单，清空表单以及创建表单，创建完成后可以在今日分享界面实现分享填写。
- 点击首页的表单项可以键入表单统计页面，实现了表单收集详情等统计数据。