个人看板功能实现文档

📋 概述

将企业微信端的project-loader页面重构为功能完整的个人看板页面，支持员工自我评价、技能展示、案例作品集管理和月度统计等功能。

✨ 核心功能

1. 个人信息展示

✅ 头像和基本信息
✅ 角色显示
✅ 实时统计数据（总项目数、已完成、本月项目、案例数量）

2. 自我评价系统

✅ 个人陈述编辑
✅ 优势标签管理
✅ 待提升项标签管理
✅ 最后更新时间记录
✅ 实时编辑和保存

3. 技能评分系统

✅ 按类别分组展示（设计能力、沟通能力、技术能力、项目管理）
✅ 当前分数 vs 目标分数
✅ 可视化进度条
✅ 分数颜色区分（高/中/低）
✅ 滑块编辑器

4. 案例作品集

✅ 从已完成项目中选择案例
✅ 最多12个案例展示
✅ 案例卡片（封面图、标题、客户、标签、价格、完成日期）
✅ 网格布局
✅ 案例选择器弹窗

5. 月度统计

✅ 最近6个月项目数据
✅ 月度项目数、已完成数、收入统计
✅ 柱状图可视化
✅ 完成率、月均项目计算

6. 多场景兼容

✅ 保留原有群聊场景（创建项目）
✅ 保留原有联系人场景（跳转客户画像）
✅ 新增个人看板场景（默认）

🗂️ 数据结构

Profile 数据扩展

在 Profile.data 字段中存储以下数据：

{
  data: {
    // 自我评价
    selfEvaluation: {
      strengths: string[],          // 优势标签
      improvements: string[],       // 待提升项标签
      personalStatement: string,    // 个人陈述
      lastUpdated: Date            // 最后更新时间
    },
    
    // 技能评分
    skillRatings: [{
      name: string,                 // 技能名称
      currentScore: number,         // 当前分数 (0-100)
      targetScore: number,          // 目标分数 (0-100)
      category: string              // 类别: 设计能力/沟通能力/技术能力/项目管理
    }],
    
    // 案例作品集（存储项目ID）
    caseWorks: string[]            // 项目ObjectId数组，最多12个
  }
}

📊 数据查询逻辑

1. 个人信息统计

// 总项目数
const totalQuery = new Parse.Query('Project');
totalQuery.equalTo('assignee', profilePointer);
totalQuery.notEqualTo('isDeleted', true);
const totalProjects = await totalQuery.count();

// 已完成项目数
const completedQuery = new Parse.Query('Project');
completedQuery.equalTo('assignee', profilePointer);
completedQuery.equalTo('currentStage', '售后归档');
const completedProjects = await completedQuery.count();

// 本月项目数
const currentMonth = new Date();
currentMonth.setDate(1);
const monthQuery = new Parse.Query('Project');
monthQuery.equalTo('assignee', profilePointer);
monthQuery.greaterThanOrEqualTo('createdAt', currentMonth);
const currentMonthProjects = await monthQuery.count();

2. 案例作品查询

// 从 Profile.data.caseWorks 获取项目ID列表
const caseProjectIds = profileData.caseWorks || [];

// 查询对应的项目
const query = new Parse.Query('Project');
query.containedIn('objectId', caseProjectIds);
query.equalTo('currentStage', '售后归档');
query.notEqualTo('isDeleted', true);
query.include('contact');
query.limit(20);

const projects = await query.find();

3. 月度统计

// 查询最近6个月的项目
const sixMonthsAgo = new Date();
sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);

const query = new Parse.Query('Project');
query.equalTo('assignee', profilePointer);
query.greaterThanOrEqualTo('createdAt', sixMonthsAgo);
query.notEqualTo('isDeleted', true);
query.limit(1000);

const projects = await query.find();

// 按月分组统计
// 计算每月的总项目数、已完成数、收入等

4. 可选项目列表（案例选择器）

// 查询所有已完成的项目供选择
const query = new Parse.Query('Project');
query.equalTo('assignee', profilePointer);
query.equalTo('currentStage', '售后归档');
query.notEqualTo('isDeleted', true);
query.include('contact');
query.descending('updatedAt');
query.limit(100);

const availableProjects = await query.find();

🎨 UI 设计特点

1. 现代化设计

渐变色系: 紫色主题 (#667eea → #764ba2)
卡片式布局: 圆角、阴影、悬停效果
流畅动画: 淡入、滑动、缩放等过渡效果

2. 响应式适配

桌面端: 最大宽度800px，双列/多列网格
平板端: 自适应网格
移动端: 单列布局，底部弹窗

3. 组件样式

统计卡片: 渐变图标 + 数字展示
选项卡: iOS风格，活动状态高亮
技能条: 进度条 + 分数徽章
案例卡: 图片封面 + 信息叠加
柱状图: 响应式高度，顶部标签

🔧 核心方法

TypeScript 方法

方法名	说明
`loadPersonalBoard()`	加载个人看板所有数据
`loadProfileData()`	加载个人资料
`loadSkillRatings()`	加载技能评分
`loadCaseWorks()`	加载案例作品
`loadMonthlyStats()`	加载月度统计
`loadSelfEvaluation()`	加载自我评价
`calculateStatistics()`	计算统计数据
`openEditEvaluation()`	打开编辑自我评价弹窗
`saveEvaluation()`	保存自我评价
`openCaseSelector()`	打开案例选择器
`toggleProjectSelection()`	切换项目选择状态
`saveCaseSelection()`	保存案例选择
`saveSkillRatings()`	保存技能评分
`transformProjectToCase()`	将项目转换为案例对象
`getDefaultSkillRatings()`	获取默认技能评分（按角色）
`filterSkillsByCategory()`	按类别筛选技能
`getMaxMonthlyProjects()`	获取月度最大项目数
`updateStrengths()`	更新优势标签
`updateImprovements()`	更新待提升项

📱 使用场景

场景1: 个人看板（默认）

触发条件: 从企微端直接访问，无群聊/联系人上下文

流程:

初始化SDK
获取当前用户Profile
加载个人看板数据
显示概览、技能、案例、统计四个选项卡

场景2: 群聊场景（保留）

触发条件: 从企微群聊中打开

流程:

检测群聊上下文
查询群聊关联的项目
如有项目 → 跳转项目详情
如无项目 → 显示创建项目引导

场景3: 联系人场景（保留）

触发条件: 从企微联系人会话中打开

流程:

检测联系人上下文
同步联系人信息
跳转客户画像页面

🎯 默认值设计

设计师/组员默认技能

[
  { name: '空间设计', currentScore: 70, targetScore: 90, category: '设计能力' },
  { name: '色彩搭配', currentScore: 65, targetScore: 85, category: '设计能力' },
  { name: '软装搭配', currentScore: 75, targetScore: 90, category: '设计能力' },
  { name: '客户沟通', currentScore: 60, targetScore: 80, category: '沟通能力' },
  { name: '需求分析', currentScore: 65, targetScore: 85, category: '沟通能力' },
  { name: '3D建模', currentScore: 70, targetScore: 85, category: '技术能力' },
  { name: '效果图渲染', currentScore: 75, targetScore: 90, category: '技术能力' },
  { name: '项目管理', currentScore: 60, targetScore: 80, category: '项目管理' }
]

客服默认技能

[
  { name: '客户接待', currentScore: 80, targetScore: 95, category: '沟通能力' },
  { name: '需求挖掘', currentScore: 75, targetScore: 90, category: '沟通能力' },
  { name: '订单管理', currentScore: 70, targetScore: 85, category: '项目管理' },
  { name: '售后服务', currentScore: 75, targetScore: 90, category: '沟通能力' },
  { name: '问题解决', currentScore: 65, targetScore: 85, category: '项目管理' }
]

默认自我评价

{
  strengths: ['专业扎实', '责任心强'],
  improvements: ['沟通效率', '时间管理'],
  personalStatement: '我是一名热爱设计的专业人士，致力于为客户提供优质的服务。',
  lastUpdated: new Date()
}

🔄 数据同步

保存机制

所有数据保存到 Profile.data 字段：

const data = profile.get('data') || {};

// 保存自我评价
data.selfEvaluation = {
  strengths: ['...'],
  improvements: ['...'],
  personalStatement: '...',
  lastUpdated: new Date()
};

// 保存技能评分
data.skillRatings = [...];

// 保存案例作品
data.caseWorks = ['projectId1', 'projectId2', ...];

profile.set('data', data);
await profile.save();

📸 案例图片获取策略

优先级顺序：

参考图片: data.referenceImages[0]
交付物图片: data.deliverables[0].files[0]

默认图片: /assets/images/default-project.jpg

let coverImage = '/assets/images/default-project.jpg';
if (data.referenceImages && data.referenceImages.length > 0) {
coverImage = data.referenceImages[0];
} else if (data.deliverables && data.deliverables.length > 0) {
const firstDeliverable = data.deliverables[0];
if (firstDeliverable.files && firstDeliverable.files.length > 0) {
coverImage = firstDeliverable.files[0];
}
}

🎛️ 选项卡切换

概览: 自我评价 + 月度表现
技能: 技能评分（按类别分组）
案例: 案例作品集网格
统计: 完成率、月均项目、月度趋势图

状态管理：

activeTab: 'overview' | 'cases' | 'stats' | 'skills' = 'overview';

📝 表单验证

自我评价

个人陈述: 无限制
优势/待提升: 逗号分隔，自动去除空格

技能评分

分数范围: 0-100
步长: 5

案例选择

最大数量: 12个
条件: 必须是已完成项目（售后归档）

🚀 性能优化

并行加载: 使用 Promise.all() 并行加载多个数据
限制查询: 合理设置 limit 参数
缓存数据: Profile 数据存储在内存
懒加载: 案例选择器打开时才加载可选项目

🔒 权限控制

查看: 所有员工可查看自己的看板
编辑: 仅本人可编辑自己的数据
案例: 只能从自己负责的已完成项目中选择

🌐 路由配置

路由路径：/wxwork/:cid/project-loader

访问方式：

企微端自定义菜单
企微应用首页
群聊/联系人会话（自动识别场景）

📦 文件清单

文件	说明
`project-loader.component.ts`	组件逻辑（857行）
`project-loader.component.html`	模板（598行）
`project-loader.component.scss`	样式（1025行）

✅ 测试要点

个人看板数据加载正常
自我评价编辑和保存
技能评分编辑和保存
案例选择和保存（最多12个）
月度统计计算正确
柱状图渲染正常
响应式适配（桌面/平板/移动）
群聊场景兼容（创建项目）
联系人场景兼容（跳转客户画像）
默认值生成正确（按角色）

🎉 完成状态

✅ 所有功能已实现 ✅ 无 linter 错误 ✅ 精美的UI设计 ✅ 完整的数据对接 ✅ 响应式布局 ✅ 多场景兼容

实现日期: 2025-10-30
文档版本: v1.0
作者: AI Assistant

PERSONAL-BOARD-IMPLEMENTATION.md 11 KB Permalink Verlauf Originalformat