SaaS客户引导流程设计

# SaaS客户引导流程设计

> **文档版本**: v1.0.0
> **创建日期**: 2026-03-24
> **最后更新**: 2026-03-24
> **维护人**: 未来鸟FutureBird码巢企业服务引擎开发组
> **状态**: [已确认]

> **搜索标签**: SaaS, 客户引导, 注册流程, 试用, 演示数据, 三端协作

---

## &#128203; 目录

- [一、流程概览](#一流程概览)
- [二、各阶段详细设计](#二各阶段详细设计)
- [三、三端协作架构](#三三端协作架构)
- [四、数据状态流转](#四数据状态流转)
- [五、API接口设计](#五api接口设计)
- [六、演示数据规范](#六演示数据规范)
- [七、前端页面设计](#七前端页面设计)
- [八、注意事项](#八注意事项)

---

## 一、流程概览

### 1. 客户转化旅程

```
┌─────────────────────────────────────────────────────────────────┐
│                    SaaS 客户转化旅程                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐     │
│  │  注册   │───▶│  开通   │───▶│  创建   │───▶│ 演示数据│     │
│  │ (官网)  │    │ (平台)  │    │ (企业)  │    │ (企业)  │     │
│  └─────────┘    └─────────┘    └─────────┘    └─────────┘     │
│       │              │              │              │            │
│       ▼              ▼              ▼              ▼            │
│   用户表          租户表          公司表         演示数据        │
│   users          tenants        companies      demo_employees  │
│                                                                 │
│  ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐     │
│  │  体验   │───▶│正式开通 │───▶│ 清理初始化│──▶│正式商用 │     │
│  │ (企业)  │    │ (平台)  │    │  (企业)  │    │ (企业)  │     │
│  └─────────┘    └─────────┘    └─────────┘    └─────────┘     │
│       │              │              │              │            │
│       ▼              ▼              ▼              ▼            │
│   体验模式        试用→正式       清理演示        正式数据       │
│   trial_mode      status变更      delete_demo    real_data     │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### 2. 阶段说明

| 阶段 | 步骤 | 执行端 | 核心操作 | 数据变化 |
|------|------|--------|----------|----------|
| 注册 | ① | 官网→平台 | 创建用户+租户 | users, tenants |
| 开通 | ② | 平台 | 设置试用状态 | tenants.status=trial |
| 创建 | ③ | 企业 | 创建公司 | companies |
| 演示数据 | ④ | 企业 | 生成演示数据 | employees(isDemo=true) |
| 体验 | ⑤ | 企业 | 用户浏览体验 | 只读状态 |
| 正式开通 | ⑥ | 平台 | 付费激活 | tenants.status=active |
| 清理初始化 | ⑦ | 企业 | 删除演示数据 | DELETE isDemo=true |
| 正式商用 | ⑧ | 企业 | 录入真实数据 | employees(isDemo=false) |

### 3. 设计原则

| 原则 | 说明 |
|------|------|
| **低门槛** | 注册即可试用，无需付费 |
| **快速体验** | 自动生成演示数据，立即可用 |
| **数据隔离** | 演示数据与真实数据严格区分 |
| **平滑过渡** | 正式开通时自动清理演示数据 |
| **三端协作** | 官网引流、平台管理、企业落地 |

---

## 二、各阶段详细设计

### 2.1 阶段一：注册（官网端 → 平台端）

#### 用户操作

1. 访问官网注册页面
2. 填写手机号、验证码、密码
3. 填写企业名称（可选）
4. 提交注册

#### 系统处理

```typescript
// 官网端：注册页面
// src/app/register/page.tsx

async function handleRegister(formData: RegisterForm) {
  // 1. 调用平台开放API创建用户
  const response = await fetch('https://api.xxx.com/open/v1/users/register', {
    method: 'POST',
    headers: openApiHeaders(),
    body: JSON.stringify({
      phone: formData.phone,
      name: formData.name,
      password: formData.password,
      companyName: formData.companyName,
      source: 'website',
      createTrialTenant: true,  // 同时创建试用租户
    }),
  });
  
  const { userId, tenantId, token } = await response.json();
  
  // 2. 存储Token并跳转
  localStorage.setItem('token', token);
  router.push(`https://app.xxx.com/onboarding?step=create`);
}
```

#### 数据变化

```sql
-- 新增用户
INSERT INTO users (id, phone, name, password, role, source)
VALUES (uuid(), '13800138000', '张三', 'hashed_password', 'tenant_admin', 'website');

-- 新增租户（试用）
INSERT INTO tenants (id, name, status, expired_at, created_at)
VALUES (uuid(), '张三的企业', 'trial', NOW() + INTERVAL '14 days', NOW());

-- 关联用户与租户
INSERT INTO user_tenants (user_id, tenant_id, role)
VALUES (userId, tenantId, 'admin');
```

---

### 2.2 阶段二：开通（平台端）

#### 系统处理

用户注册成功后，平台端自动创建试用租户：

| 字段 | 值 | 说明 |
|------|-----|------|
| status | `trial` | 试用状态 |
| expired_at | 注册时间 + 14天 | 试用期结束时间 |
| plan | `trial` | 套餐类型 |
| max_employees | 50 | 试用员工上限 |

#### 试用期限制

```typescript
// 试用期配置
const TRIAL_CONFIG = {
  duration: 14,           // 试用天数
  maxEmployees: 50,       // 最大员工数
  maxCompanies: 1,        // 最大公司数
  features: [
    'employee_management',
    'payroll_calculation',
    'attendance_tracking',
    'report_export',
  ],
  restrictions: [
    'no_data_export',     // 不可导出数据
    'no_api_access',      // 不可API访问
  ],
};
```

---

### 2.3 阶段三：创建公司（企业端）

#### 用户操作

1. 首次登录企业端，进入引导页面
2. 填写公司基本信息（名称、行业、规模）
3. 选择功能模块
4. 确认创建

#### 系统处理

```typescript
// 企业端：创建公司
// src/app/api/onboarding/company/route.ts

export async function POST(request: Request) {
  const { tenantId, userId } = await getAuthInfo(request);
  const { name, industry, scale, modules } = await request.json();
  
  // 1. 检查是否已创建公司
  const existing = await db.select().from(companies)
    .where(eq(tenantId, tenantId));
  
  if (existing.length > 0) {
    return Response.json({ error: '公司已存在' }, { status: 400 });
  }
  
  // 2. 创建公司
  const company = await db.insert(companies).values({
    tenantId,
    name,
    industry,
    scale,
    modules,
    onboardingStatus: 'pending',
  }).returning();
  
  // 3. 更新租户状态
  await db.update(tenants).set({
    onboardingProgress: 'company_created',
  }).where(eq(id, tenantId));
  
  return Response.json({ company, nextStep: 'demo-data' });
}
```

#### 数据变化

```sql
-- 新增公司
INSERT INTO companies (id, tenant_id, name, industry, scale, onboarding_status)
VALUES (uuid(), tenantId, '测试科技有限公司', 'IT', '50-100', 'pending');

-- 更新租户引导进度
UPDATE tenants SET onboarding_progress = 'company_created' WHERE id = tenantId;
```

---

### 2.4 阶段四：演示数据（企业端）

#### 用户操作

1. 系统提示"是否加载演示数据？"
2. 用户确认
3. 系统自动生成演示数据
4. 提示"演示数据已就绪，开始体验"

#### 系统处理

```typescript
// 企业端：生成演示数据
// src/app/api/onboarding/demo-data/route.ts

export async function POST(request: Request) {
  const { tenantId, companyId } = await getAuthInfo(request);
  
  // 检查是否已有演示数据
  const existing = await db.select().from(employees)
    .where(and(eq(tenantId, tenantId), eq(isDemo, true)));
  
  if (existing.length > 0) {
    return Response.json({ error: '演示数据已存在' }, { status: 400 });
  }
  
  // 生成演示数据
  await db.transaction(async (tx) => {
    // 1. 创建部门
    const depts = await tx.insert(departments).values([
      { tenantId, companyId, name: '技术部', isDemo: true },
      { tenantId, companyId, name: '销售部', isDemo: true },
      { tenantId, companyId, name: '财务部', isDemo: true },
      { tenantId, companyId, name: '人事部', isDemo: true },
    ]).returning();
    
    // 2. 创建职位
    const positions = await tx.insert(positions).values([
      { tenantId, companyId, name: '高级工程师', isDemo: true },
      { tenantId, companyId, name: '销售经理', isDemo: true },
      { tenantId, companyId, name: '财务主管', isDemo: true },
    ]).returning();
    
    // 3. 创建演示员工（10人）
    const demoEmployees = generateDemoEmployees(10, depts, positions);
    await tx.insert(employees).values(demoEmployees);
    
    // 4. 创建演示工资单
    const demoPayroll = await generateDemoPayroll(tenantId, companyId);
    await tx.insert(payrollSheets).values(demoPayroll.sheet);
    await tx.insert(payrollDetails).values(demoPayroll.details);
    
    // 5. 创建演示考勤数据
    const demoAttendance = generateDemoAttendance(tenantId, companyId);
    await tx.insert(attendanceRecords).values(demoAttendance);
  });
  
  // 更新公司状态
  await db.update(companies).set({
    onboardingStatus: 'demo_ready',
  }).where(eq(id, companyId));
  
  return Response.json({ success: true, nextStep: 'experience' });
}
```

---

### 2.5 阶段五：体验（企业端）

#### 用户操作

1. 进入系统首页，看到演示数据
2. 浏览员工列表、工资单、考勤记录
3. 体验各功能模块
4. 页面顶部显示"试用模式 · 剩余 X 天"

#### 界面设计

```
┌─────────────────────────────────────────────────────────────────┐
│ ⚠️ 试用模式 · 剩余 12 天 │ [立即开通] [延长试用]               │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  欢迎使用薪资管理系统！以下是您的演示数据：                       │
│                                                                 │
│  &#128202; 员工统计         &#128176; 薪资统计         &#128197; 考勤统计            │
│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐        │
│  │   10 人      │    │  ¥125,000   │    │  98.5%      │        │
│  │  演示员工    │    │  本月工资总额 │    │  本月出勤率  │        │
│  └─────────────┘    └─────────────┘    └─────────────┘        │
│                                                                 │
│  &#128161; 提示：这是演示数据，正式开通后将自动清理                      │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

#### 体验模式限制

| 功能 | 试用状态 | 正式状态 |
|------|---------|---------|
| 查看数据 | ✅ | ✅ |
| 编辑数据 | ✅ | ✅ |
| 导出数据 | ❌ 提示开通 | ✅ |
| API调用 | ❌ 提示开通 | ✅ |
| 发送工资条 | ❌ 提示开通 | ✅ |

---

### 2.6 阶段六：正式开通（平台端）

#### 用户操作

1. 点击"立即开通"按钮
2. 选择套餐方案
3. 完成支付
4. 系统激活

#### 系统处理

```typescript
// 平台端：正式开通
// src/app/api/tenants/[id]/activate/route.ts

export async function POST(request: Request) {
  const tenantId = getParam(request, 'id');
  const { plan, paymentId, period } = await request.json();
  
  // 1. 验证支付
  const payment = await verifyPayment(paymentId);
  if (!payment.success) {
    return Response.json({ error: '支付验证失败' }, { status: 400 });
  }
  
  // 2. 更新租户状态
  await db.update(tenants).set({
    status: 'active',
    plan: plan,
    period: period,
    expiredAt: calculateExpiredAt(plan, period),
    activatedAt: new Date(),
    maxEmployees: getPlanMaxEmployees(plan),
  }).where(eq(id, tenantId));
  
  // 3. 记录交易
  await db.insert(tenantTransactions).values({
    tenantId,
    type: 'subscription',
    amount: getPlanPrice(plan, period),
    paymentId,
    description: `开通${plan}套餐 - ${period}个月`,
  });
  
  // 4. 发送通知给企业端
  await notifyEnterprise(tenantId, 'tenant_activated');
  
  return Response.json({ success: true });
}
```

---

### 2.7 阶段七：清理初始化（企业端）

#### 用户操作

1. 系统提示"您已正式开通，需要清理演示数据"
2. 用户确认清理
3. 系统删除演示数据
4. 提示"系统已就绪，开始使用"

#### 系统处理

```typescript
// 企业端：清理演示数据
// src/app/api/onboarding/cleanup/route.ts

export async function POST(request: Request) {
  const { tenantId, companyId } = await getAuthInfo(request);
  
  await db.transaction(async (tx) => {
    // 1. 删除演示员工
    await tx.delete(employees).where(
      and(eq(tenantId, tenantId), eq(isDemo, true))
    );
    
    // 2. 删除演示部门
    await tx.delete(departments).where(
      and(eq(tenantId, tenantId), eq(isDemo, true))
    );
    
    // 3. 删除演示工资单
    await tx.delete(payrollSheets).where(
      and(eq(tenantId, tenantId), eq(isDemo, true))
    );
    
    // 4. 删除演示考勤
    await tx.delete(attendanceRecords).where(
      and(eq(tenantId, tenantId), eq(isDemo, true))
    );
    
    // 5. 更新公司状态
    await tx.update(companies).set({
      onboardingStatus: 'completed',
      activatedAt: new Date(),
    }).where(eq(id, companyId));
    
    // 6. 创建默认配置
    await tx.insert(salaryConfigs).values({
      companyId,
      tenantId,
      // 默认薪资配置
    });
  });
  
  return Response.json({ success: true, message: '系统已就绪' });
}
```

---

### 2.8 阶段八：正式商用（企业端）

#### 用户操作

1. 进入正式版首页
2. 开始录入真实员工数据
3. 使用所有功能

#### 系统状态

```sql
-- 租户状态
UPDATE tenants SET 
  status = 'active',
  onboarding_progress = 'completed'
WHERE id = tenantId;

-- 公司状态
UPDATE companies SET
  onboarding_status = 'completed',
  activated_at = NOW()
WHERE id = companyId;

-- 员工数据（全部 isDemo = false）
SELECT COUNT(*) FROM employees 
WHERE tenant_id = tenantId AND is_demo = false;
```

---

## 三、三端协作架构

### 1. 架构图

```
┌─────────────────────────────────────────────────────────────────┐
│                    三端协作流程                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                        官网端                            │   │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐                 │   │
│  │  │ 产品介绍 │  │ 注册页面 │  │ 引导入口 │                 │   │
│  │  └─────────┘  └────┬────┘  └─────────┘                 │   │
│  │                    │                                    │   │
│  │                    │ ①注册请求                          │   │
│  │                    ▼                                    │   │
│  └────────────────────┼────────────────────────────────────┘   │
│                       │                                        │
│                       │ 开放API                                │
│                       ▼                                        │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                      平台端                              │   │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐                 │   │
│  │  │ 用户管理 │  │ 租户管理 │  │ 开通管理 │                 │   │
│  │  │ users   │  │ tenants │  │activate │                 │   │
│  │  └─────────┘  └────┬────┘  └────┬────┘                 │   │
│  │                    │            │                       │   │
│  │                    │ ②创建租户  │ ⑥正式开通             │   │
│  │                    ▼            │                       │   │
│  └────────────────────┼────────────┼───────────────────────┘   │
│                       │            │                            │
│                       │ JWT Token  │ 通知清理                   │
│                       ▼            ▼                            │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                      企业端                              │   │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐    │   │
│  │  │ 创建公司 │─▶│ 演示数据 │─▶│ 体验模式 │─▶│ 清理初始化│    │   │
│  │  │company  │  │demo data│  │ trial   │  │ cleanup │    │   │
│  │  └─────────┘  └─────────┘  └─────────┘  └─────────┘    │   │
│  │       ③          ④           ⑤           ⑦            │   │
│  │                                                          │   │
│  │                    ⑧ 正式商用                            │   │
│  │                   ┌────────────┐                         │   │
│  │                   │ 真实数据    │                         │   │
│  │                   │ employees  │                         │   │
│  │                   │ payrolls   │                         │   │
│  │                   └────────────┘                         │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### 2. 三端职责划分

| 端 | 职责 | 涉及阶段 |
|---|------|---------|
| **官网端** | 流量入口、产品展示、用户注册 | ① 注册 |
| **平台端** | 用户管理、租户管理、付费开通 | ② 开通、⑥ 正式开通 |
| **企业端** | 公司创建、演示数据、业务使用 | ③④⑤⑦⑧ |

### 3. 端间通信方式

| 通信方式 | 场景 | 示例 |
|---------|------|------|
| **开放API** | 官网调用平台 | 注册、查询用户 |
| **JWT Token** | 用户身份传递 | 登录后跳转 |
| **Webhook通知** | 平台通知企业 | 开通、到期提醒 |
| **共享数据库** | 数据一致性 | 租户状态同步 |

---

## 四、数据状态流转

### 1. 租户状态流转

```
┌─────────────────────────────────────────────────────────────────┐
│                    租户状态流转图                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│                          ┌─────────┐                            │
│                          │ pending │                            │
│                          │  待开通  │                            │
│                          └────┬────┘                            │
│                               │ 注册成功                        │
│                               ▼                                 │
│                          ┌─────────┐                            │
│              ┌──────────▶│ trial   │◀──────────┐               │
│              │           │  试用中  │            │               │
│              │           └────┬────┘            │               │
│              │                │ 付费成功        │ 续费          │
│              │                ▼                 │               │
│              │           ┌─────────┐            │               │
│              │           │ active  │────────────┘               │
│              │           │  正式   │                            │
│              │           └────┬────┘                            │
│              │                │ 到期未续费                      │
│              │                ▼                                 │
│              │           ┌─────────┐                            │
│              └───────────│expired  │                            │
│              重新付费    │  已过期  │                            │
│                          └────┬────┘                            │
│                               │ 长期未续费                      │
│                               ▼                                 │
│                          ┌─────────┐                            │
│                          │suspended│                            │
│                          │  已暂停  │                            │
│                          └─────────┘                            │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### 2. 公司引导状态流转

```
pending         →  待创建（租户注册后）
demo_ready      →  演示数据已加载
trial           →  体验中
activating      →  正在激活（清理演示数据）
completed       →  正式商用
```

### 3. 数据标记规范

```sql
-- 所有业务表增加 is_demo 字段
ALTER TABLE employees ADD COLUMN is_demo BOOLEAN DEFAULT FALSE;
ALTER TABLE departments ADD COLUMN is_demo BOOLEAN DEFAULT FALSE;
ALTER TABLE payroll_sheets ADD COLUMN is_demo BOOLEAN DEFAULT FALSE;
ALTER TABLE attendance_records ADD COLUMN is_demo BOOLEAN DEFAULT FALSE;

-- 查询真实数据
SELECT * FROM employees WHERE tenant_id = ? AND is_demo = FALSE;

-- 查询演示数据
SELECT * FROM employees WHERE tenant_id = ? AND is_demo = TRUE;

-- 删除演示数据
DELETE FROM employees WHERE tenant_id = ? AND is_demo = TRUE;
```

---

## 五、API接口设计

### 1. 开放API（平台端）

```
# 用户注册（官网调用）
POST /api/open/v1/users/register
├── Headers: X-Api-Key, X-Timestamp, X-Signature
├── Body: { phone, name, password, companyName?, createTrialTenant }
└── Response: { userId, tenantId, token }

# 查询租户状态
GET /api/open/v1/tenants/:id
├── Headers: X-Api-Key
└── Response: { id, name, status, expiredAt, ... }

# 正式开通通知
POST /api/open/v1/tenants/:id/activated
├── Headers: X-Api-Key, X-Signature
├── Body: { plan, period, activatedAt }
└── Response: { success }
```

### 2. 企业端API

```
# 创建公司
POST /api/onboarding/company
├── Auth: Bearer Token
├── Body: { name, industry, scale, modules }
└── Response: { company, nextStep }

# 生成演示数据
POST /api/onboarding/demo-data
├── Auth: Bearer Token
└── Response: { success, demoStats }

# 清理演示数据
POST /api/onboarding/cleanup
├── Auth: Bearer Token
└── Response: { success, message }

# 获取引导进度
GET /api/onboarding/progress
├── Auth: Bearer Token
└── Response: { step, completed, nextAction }
```

---

## 六、演示数据规范

### 1. 演示数据内容

| 数据类型 | 数量 | 说明 |
|---------|------|------|
| 部门 | 4个 | 技术部、销售部、财务部、人事部 |
| 职位 | 6个 | 高级工程师、工程师、销售经理、销售、财务主管、HR |
| 员工 | 10个 | 每个部门2-3人 |
| 工资单 | 1个月 | 当前月份的工资单 |
| 考勤记录 | 1个月 | 当前月份的打卡记录 |
| 请假记录 | 3条 | 不同类型的请假示例 |

### 2. 演示员工数据示例

```typescript
const demoEmployees = [
  { name: '张伟', department: '技术部', position: '高级工程师', salary: 25000 },
  { name: '李娜', department: '技术部', position: '工程师', salary: 18000 },
  { name: '王芳', department: '销售部', position: '销售经理', salary: 20000 },
  { name: '刘洋', department: '销售部', position: '销售', salary: 12000 },
  { name: '陈静', department: '财务部', position: '财务主管', salary: 18000 },
  { name: '赵敏', department: '人事部', position: 'HR', salary: 10000 },
  // ...
];
```

### 3. 演示数据标识

```typescript
// 所有演示数据统一标识
const DEMO_MARKERS = {
  namePrefix: '',           // 不加前缀，体验真实
  isDemo: true,             // 数据库标记
  createdBy: 'system',      // 创建者
  createdAt: new Date(),    // 创建时间
};
```

---

## 七、前端页面设计

### 1. 引导流程页面

```
┌─────────────────────────────────────────────────────────────────┐
│                        引导流程                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  步骤指示器                                                      │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                                                         │   │
│  │   ① ──── ② ──── ③ ──── ④                              │   │
│  │   ●      ○      ○      ○                               │   │
│  │  创建   演示   体验   开通                              │   │
│  │  公司   数据                                         │   │
│  │                                                         │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  内容区域                                                        │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                                                         │   │
│  │   当前步骤的具体内容                                     │   │
│  │   - 表单填写                                            │   │
│  │   - 操作按钮                                            │   │
│  │   - 帮助提示                                            │   │
│  │                                                         │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  操作按钮                                                        │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                                                         │   │
│  │   [上一步]                          [下一步/跳过]        │   │
│  │                                                         │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### 2. 试用模式提示

```typescript
// 试用模式顶部提示条
function TrialBanner({ daysLeft }: { daysLeft: number }) {
  return (
    <div className="bg-amber-50 border-b border-amber-200 px-4 py-2">
      <div className="flex items-center justify-between max-w-7xl mx-auto">
        <div className="flex items-center gap-2">
          <AlertTriangle className="h-4 w-4 text-amber-600" />
          <span className="text-amber-800">
            试用模式 · 剩余 {daysLeft} 天
          </span>
        </div>
        <div className="flex items-center gap-3">
          <Button variant="outline" size="sm">延长试用</Button>
          <Button size="sm">立即开通</Button>
        </div>
      </div>
    </div>
  );
}
```

### 3. 演示数据提示

```typescript
// 演示数据提示气泡
function DemoDataTooltip() {
  return (
    <div className="fixed bottom-4 right-4 bg-blue-50 border border-blue-200 rounded-lg p-4 max-w-sm shadow-lg">
      <div className="flex items-start gap-3">
        <Info className="h-5 w-5 text-blue-500 mt-0.5" />
        <div>
          <p className="font-medium text-blue-900">这是演示数据</p>
          <p className="text-sm text-blue-700 mt-1">
            正式开通后，演示数据将被清理，您可以录入真实数据。
          </p>
        </div>
        <button className="text-blue-400 hover:text-blue-600">
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}
```

---

## 八、注意事项

### 1. 数据安全

- ✅ 演示数据与真实数据严格隔离（isDemo字段）
- ✅ 清理演示数据前需用户确认
- ✅ 试用期数据不可导出
- ✅ 正式开通后才开放敏感功能

### 2. 用户体验

- ✅ 引导流程可跳过（老用户直接使用）
- ✅ 演示数据真实可信（不加"测试"前缀）
- ✅ 试用到期前7天、3天、1天发送提醒
- ✅ 支持延长试用（申请审批）

### 3. 技术实现

- ✅ 引导进度存储在数据库（刷新不丢失）
- ✅ 演示数据生成使用事务（保证一致性）
- ✅ 清理操作幂等（可重复调用）
- ✅ 支持回滚（用户反悔可恢复演示数据）

### 4. 运营策略

- ✅ 试用期默认14天，可申请延长至30天
- ✅ 演示数据定期更新（避免过期数据）
- ✅ 开通引导页展示成功案例
- ✅ 支持销售介入（人工协助开通）

---

## 更新日志

| 版本 | 日期 | 更新内容 |
|------|------|---------|
| v1.0.0 | 2026-03-24 | 初始版本，完整流程设计 |