# 社区活动协同平台

**Repository Path**: FlyFive/sqhdxt

## Basic Information

- **Project Name**: 社区活动协同平台
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-13
- **Last Updated**: 2026-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 活动管理系统

基于 Vue 3 + 飞书多维表格的活动管理前端应用。

## 功能特性

- **活动申请**: Fellow 发起活动申请，填写基本信息
- **流程看板**: 时间轴视图展示活动审批和执行进度
- **活动日历**: 日历视图查看所有活动的预计日期
- **数据统计**: 图表展示城市分布、月份趋势、活动状态等
- **总结填写**: 活动结束后填写活动数据总结

## 技术栈

- Vue 3 + Composition API
- Vite
- Element Plus (UI 组件库)
- Vue Router (路由管理)
- Pinia (状态管理)
- Tailwind CSS (样式)
- ECharts (图表)
- Axios (HTTP 请求)

## 项目结构

```
src/
├── api/              # API 请求封装
├── assets/           # 静态资源
│   └── main.css      # Tailwind 入口
├── router/           # 路由配置
│   └── index.js
├── stores/           # Pinia 状态管理
│   └── activity.js
├── utils/            # 工具函数
│   └── feishu.js     # 飞书 API 封装
├── views/            # 页面组件
│   ├── ActivityApply.vue    # 活动申请
│   ├── ProcessBoard.vue     # 流程看板
│   ├── ActivityCalendar.vue # 活动日历
│   ├── DataStatistics.vue  # 数据统计
│   └── SummaryFill.vue      # 总结填写
├── App.vue           # 根组件
└── main.js           # 入口文件

scripts/
└── init-feishu-tables.js  # 飞书多维表格初始化脚本
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 配置飞书凭证

在 `src/utils/feishu.js` 中更新 App ID 和 App Secret：

```javascript
const APP_ID = 'your_app_id'
const APP_SECRET = 'your_app_secret'
```

### 运行初始化脚本

创建飞书多维表格（需要先在飞书开放平台配置应用权限）：

```bash
node scripts/init-feishu-tables.js
```

初始化脚本会创建 4 张数据表并输出 appToken 和 tableId。

### 配置页面数据源

将初始化脚本输出的配置填入各页面组件的顶部：

```javascript
const APP_TOKEN = 'your_app_token'
const TABLE_ID = 'your_table_id'
```

### 启动开发服务器

```bash
npm run dev
```

## 飞书多维表格结构

### 表1: 活动申请表

| 字段名 | 类型 | 说明 |
|--------|------|------|
| 活动ID | 文本 | 唯一标识 |
| Fellow姓名 | 文本 | 申请人 |
| 城市 | 文本 | 活动城市 |
| 活动形式 | 单选 | 线下/线上/混合 |
| 预计日期 | 日期 | 计划日期 |
| 实际日期 | 日期 | 实际日期 |
| 嘉宾需求 | 文本 | 嘉宾要求 |
| 报名问卷链接 | 超链接 | 报名表单 |
| 邮寄地址 | 文本 | 物料邮寄地址 |
| 状态 | 单选 | 待审批/审批通过/等进行中/已完成/已总结 |
| 创建时间 | 日期 | 记录创建时间 |

### 表2: 活动流程节点表

| 字段名 | 类型 | 说明 |
|--------|------|------|
| 活动ID | 文本 | 关联活动 |
| 阶段 | 单选 | 申请/审批/准备/执行/总结 |
| 节点名称 | 文本 | 具体节点 |
| 负责人 | 文本 | 负责人姓名 |
| 负责人类型 | 单选 | Fellow/运营/总部 |
| 节点状态 | 单选 | pending/in_progress/completed |
| 截止日期 | 日期 | 截止时间 |
| 完成时间 | 日期 | 实际完成时间 |
| 备注 | 文本 | 补充说明 |

### 表3: 活动总结表

| 字段名 | 类型 | 说明 |
|--------|------|------|
| 活动ID | 文本 | 关联活动 |
| 报名人数 | 数字 | 报名总数 |
| 通过人数 | 数字 | 审核通过数 |
| 实到人数 | 数字 | 实际到场数 |
| 到场率 | 数字 | 百分比 |
| 满意率 | 数字 | 百分比 |
| TRAE深度用户占比 | 数字 | 百分比 |
| 小红书帖子数 | 数字 | 帖子数量 |
| 推文回顾 | 文本 | 回顾链接/内容 |
| 活动照片 | 附件 | 现场照片 |

### 表4: 检查项配置表

| 字段名 | 类型 | 说明 |
|--------|------|------|
| 阶段 | 单选 | 申请/审批/准备/执行/总结 |
| 检查项名称 | 文本 | 检查项名称 |
| 负责人类型 | 单选 | Fellow/运营/总部 |
| 是否必填 | 单选 | 是/否 |

## 开发说明

### API 封装

飞书 API 调用封装在 `src/utils/feishu.js`，主要功能：

- 自动获取和缓存 tenant_access_token
- 封装多维表格的 CRUD 操作
- 支持批量创建和筛选记录

### 状态管理

使用 Pinia 管理活动数据，在 `src/stores/activity.js`：

- `activities`: 所有活动列表
- `currentActivity`: 当前选中的活动
- `loading`: 加载状态

### 路由配置

| 路径 | 组件 | 说明 |
|------|------|------|
| / | /apply | 重定向到申请页 |
| /apply | ActivityApply | 活动申请 |
| /board | ProcessBoard | 流程看板 |
| /calendar | ActivityCalendar | 活动日历 |
| /statistics | DataStatistics | 数据统计 |
| /summary | SummaryFill | 总结填写 |

## 构建部署

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

# 预览构建结果
npm run preview
```

构建产物在 `dist/` 目录，可部署到任意静态服务器。

## License

MIT