# 🎯 个人看板访问指南

## 📍 访问地址

### 本地开发环境
等待开发服务器启动后（通常需要30-60秒），访问以下地址：

```
http://localhost:4200/wxwork/[cid]/project-loader
```

**参数说明**:
- `[cid]`: 公司ID，从localStorage获取或使用测试值

### 快速访问链接示例

假设您的公司ID是 `test-company`：
```
http://localhost:4200/wxwork/test-company/project-loader
```

---

## 🔑 访问前提条件

### 1. 用户登录状态
需要先登录并获取Profile信息。有以下几种方式：

#### 方式A: 通过登录页面
```
http://localhost:4200/
```
使用企微账号登录

#### 方式B: 使用localStorage设置（测试用）
打开浏览器控制台(F12)，执行：
```javascript
// 设置公司ID
localStorage.setItem('company', 'your-company-id');

// 设置Profile ID（可选，用于测试）
localStorage.setItem('Parse/ProfileId', 'your-profile-id');
```

### 2. Parse数据库连接
确保Parse Server已启动并可访问：
- 检查 `src/main.ts` 中的Parse配置
- 确认Parse Server地址正确

---

## 🎨 三种访问场景

### 场景1: 个人看板（默认）✨
**访问方式**: 直接访问URL，无企微上下文

**预期效果**:
- 显示个人信息卡片
- 显示4个统计指标
- 显示4个选项卡（概览、技能、案例、统计）
- 可以编辑自我评价、技能、案例

**URL示例**:
```
http://localhost:4200/wxwork/test-company/project-loader
```

### 场景2: 群聊场景
**访问方式**: 从企微群聊进入（需企微环境）

**预期效果**:
- 如果群聊有关联项目 → 自动跳转到项目详情
- 如果群聊无项目 → 显示创建项目引导

### 场景3: 联系人场景
**访问方式**: 从企微联系人会话进入（需企微环境）

**预期效果**:
- 自动跳转到客户画像页面

---

## 🖥️ 查看步骤（详细）

### Step 1: 启动开发服务器
在项目根目录执行：
```bash
cd yss-project
npm start
```

等待编译完成，看到类似信息：
```
✔ Browser application bundle generation complete.
** Angular Live Development Server is listening on localhost:4200 **
```

### Step 2: 打开浏览器
访问：
```
http://localhost:4200
```

### Step 3: 登录系统
- 如果未登录，会跳转到登录页
- 使用企微账号登录
- 登录成功后会保存Profile信息到localStorage

### Step 4: 访问个人看板
在地址栏输入：
```
http://localhost:4200/wxwork/[your-cid]/project-loader
```

**替换 `[your-cid]`**:
- 从localStorage获取: `localStorage.getItem('company')`
- 或查看登录后的URL中的cid参数

---

## 🎯 功能测试清单

访问成功后，您可以测试以下功能：

### ✅ 概览选项卡
- [ ] 查看个人信息（姓名、角色）
- [ ] 查看4个统计指标
- [ ] 查看自我评价
- [ ] 点击编辑按钮，修改个人陈述
- [ ] 添加/删除优势标签
- [ ] 添加/删除待提升项
- [ ] 查看月度表现

### ✅ 技能选项卡
- [ ] 查看技能列表（按类别分组）
- [ ] 查看技能分数和进度条
- [ ] 点击编辑按钮
- [ ] 使用滑块调整分数
- [ ] 保存技能评分

### ✅ 案例选项卡
- [ ] 查看案例作品网格
- [ ] 点击"+"按钮打开案例选择器
- [ ] 选择已完成项目（最多12个）
- [ ] 保存案例选择
- [ ] 查看案例详细信息

### ✅ 统计选项卡
- [ ] 查看完成率
- [ ] 查看月均项目数
- [ ] 查看月度趋势柱状图

---

## 🔍 调试技巧

### 1. 查看当前登录用户
打开浏览器控制台(F12)：
```javascript
// 查看Profile ID
console.log(localStorage.getItem('Parse/ProfileId'));

// 查看公司ID
console.log(localStorage.getItem('company'));
```

### 2. 查看组件数据
在控制台的Elements标签中：
- 找到 `<app-project-loader>` 元素
- 在Console中查看组件实例：
```javascript
// Angular DevTools (如已安装)
ng.getComponent($0)
```

### 3. 查看网络请求
- 打开 Network 标签
- 筛选 XHR 请求
- 查看Parse API调用是否成功

### 4. 查看Parse数据
确认以下数据存在：
- **Project表**: 有分配给当前用户的项目
- **Profile表**: 当前用户的Profile记录
- **项目状态**: 至少有一些`currentStage='售后归档'`的项目

---

## 🎨 预期界面效果

### 移动端/平板端
- 单列布局
- 统计卡片2列或1列
- 选项卡只显示文字（图标隐藏）
- 案例网格自适应

### 桌面端
- 最大宽度800px居中
- 统计卡片4列
- 选项卡显示图标+文字
- 案例网格多列

---

## 🐛 常见问题

### Q1: 页面一片空白
**可能原因**:
- Parse Server未启动
- 用户未登录

**解决方法**:
1. 检查控制台错误
2. 确认Parse Server运行
3. 先访问登录页面

### Q2: 显示"加载失败"
**可能原因**:
- 网络请求失败
- Parse查询错误

**解决方法**:
1. 查看控制台错误信息
2. 检查Network标签的请求
3. 确认Parse配置正确

### Q3: 没有数据显示
**可能原因**:
- 当前用户没有项目
- Profile.data字段为空

**解决方法**:
1. 添加一些测试项目
2. 技能和自我评价会使用默认值
3. 案例需要手动选择

### Q4: 企微场景无法测试
**解决方法**:
- 本地开发环境无法完全模拟企微
- 个人看板场景可以正常测试
- 群聊/联系人场景需要在企微环境中测试

---

## 📱 企微环境访问（生产环境）

### 配置企微自定义菜单
在企微管理后台配置菜单：
```json
{
  "button": [
    {
      "type": "view",
      "name": "个人看板",
      "url": "https://your-domain.com/wxwork/$CORPID$/project-loader"
    }
  ]
}
```

### URL参数说明
- `$CORPID$`: 企微会自动替换为企业ID
- 企微SDK会自动获取当前用户信息

---

## 🎉 快速开始

**最简单的测试方式**:

1. 启动项目：`cd yss-project && npm start`
2. 等待编译完成（约30-60秒）
3. 浏览器访问：`http://localhost:4200`
4. 登录系统
5. 访问：`http://localhost:4200/wxwork/[cid]/project-loader`

**第一次访问**:
- 会看到默认的自我评价
- 会看到默认的技能评分（根据角色）
- 案例需要手动选择已完成项目
- 统计会自动计算

---

**祝您使用愉快！** 🎊

如有问题，请检查：
1. 控制台错误信息
2. Network请求状态
3. Parse数据库连接
4. localStorage中的登录信息