# 新问卷-管理端

**Repository Path**: elitdr/xwj-admin

## Basic Information

- **Project Name**: 新问卷-管理端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-30
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 新问卷-管理端

一个基于 React + TypeScript 的现代化问卷管理系统管理端。

## 项目介绍
新问卷管理端是一个功能完备的问卷设计与管理平台，支持用户创建、编辑、发布和统计分析问卷。系统采用了现代化的前端技术栈，提供了友好的用户界面和流畅的操作体验。

## 技术栈

### 核心技术
- **React 18**: 前端框架
- **TypeScript**: 类型安全的JavaScript超集
- **Ant Design 5**: 企业级UI组件库
- **Redux Toolkit**: 状态管理
- **React Router 6**: 路由管理
- **Axios**: HTTP客户端

### 开发工具
- **Create React App**: 项目脚手架
- **Craco**: 配置增强工具
- **SASS**: CSS预处理器
- **ESLint**: 代码质量检查
- **Prettier**: 代码格式化
- **Husky**: Git钩子工具
- **Storybook**: 组件开发与文档

## 功能特性

### 用户管理
- 用户注册
- 用户登录
- 会话管理

### 问卷管理
- 创建新问卷
- 编辑问卷基本信息
- 问卷列表展示
- 问卷搜索功能
- 问卷星标收藏
- 问卷删除与恢复
- 问卷复制

### 问卷设计
- 拖拽式组件设计
- 支持多种问题类型
- 实时预览
- 撤销/重做功能
- 组件属性配置

### 统计分析
- 问卷答卷统计
- 图表化数据展示
- 单个组件统计分析
- 答卷记录管理

## 快速开始

### 环境要求
- Node.js >= 14.x
- npm >= 6.x

### 安装依赖
```bash
npm install
```

### 配置环境变量
根据需要修改 `.env` 文件中的环境变量：
```bash
REACT_APP_API_URL=http://localhost:3000
REACT_APP_CLIENT_URL=http://localhost:8080
```

### 启动开发服务器
```bash
npm start
```

系统将在 http://localhost:3000 启动开发服务器。

### 构建生产版本
```bash
npm run build
```

构建产物将输出到 `build` 目录。

### 运行测试
```bash
npm test
```

### 代码质量检查
```bash
# ESLint检查
npm run lint

# Prettier格式化
npm run format
```

### 启动Storybook
```bash
npm run storybook
```

Storybook将在 http://localhost:6006 启动。

## 项目结构
```bash
src/
├── components/          # 通用组件
├── constants/          # 常量定义
├── hooks/              # 自定义Hooks
├── layouts/            # 布局组件
│   ├── MainLayout.tsx  # 主布局
│   ├── ManageLayout.tsx # 管理页面布局
│   └── QuestionLayout.tsx # 问卷页面布局
├── pages/              # 页面组件
│   ├── Home.tsx        # 首页
│   ├── Login.tsx       # 登录页
│   ├── Register.tsx    # 注册页
│   ├── Error.tsx       # 错误页
│   ├── manage/         # 问卷管理页面
│   │   ├── List.tsx    # 问卷列表
│   │   ├── Star.tsx    # 星标问卷
│   │   └── Trash.tsx   # 回收箱
│   └── question/       # 问卷相关页面
│       ├── Edit/       # 问卷编辑
│       └── Stat/       # 问卷统计
├── router/             # 路由配置
├── services/           # API服务
│   ├── ajax.ts         # Axios封装
│   ├── question.ts     # 问卷相关API
│   └── user.ts         # 用户相关API
├── store/              # Redux状态管理
│   ├── componentsReducer/ # 组件状态
│   ├── pageInfoReducer.ts # 页面信息状态
│   └── userInfoReducer.ts # 用户信息状态
├── types/              # TypeScript类型定义
└── utils/              # 工具函数
```

## 主要功能模块

### 1. 问卷设计器
问卷设计器是系统的核心功能，支持用户通过拖拽的方式添加和配置各种问题组件，实现所见即所得的问卷设计体验。

### 2. 问卷管理
用户可以在管理页面查看所有已创建的问卷，并进行搜索、排序、收藏、删除等操作。

### 3. 统计分析
系统提供了详细的问卷统计功能，通过图表化展示帮助用户直观地了解问卷填写情况。

## API接口

系统主要通过以下API与后端交互：

### 问卷相关
- `GET /api/question/info/:id` - 获取问卷详情
- `POST /api/question` - 创建问卷
- `GET /api/question/list` - 获取问卷列表
- `PATCH /api/question/edit/:id` - 更新问卷
- `POST /api/question/edit` - 批量更新问卷
- `POST /api/question/duplicate/:id` - 复制问卷
- `DELETE /api/question` - 删除问卷
- `GET /api/question/stat/:id` - 获取问卷统计

## 开发规范

### 代码规范
- 使用TypeScript进行类型定义
- 遵循ESLint和Prettier配置
- 使用函数式组件和Hooks
- 组件命名采用PascalCase
- 文件命名采用kebab-case

### 提交规范
- 使用Conventional Commits规范
- 提交前自动运行ESLint和Prettier检查

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 许可证

MIT License