Home Explore Help
Register Sign In
nkkj
/
yss-project
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 64035c380b
Branches Tags
yss-project
/
PERSONAL-BOARD-ACCESS-GUIDE.md

PERSONAL-BOARD-ACCESS-GUIDE.md 6.2 KB
History Raw

🎯 个人看板访问指南

📍 访问地址

本地开发环境

等待开发服务器启动后（通常需要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)，执行：

// 设置公司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: 启动开发服务器

在项目根目录执行：

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)：

// 查看Profile ID
console.log(localStorage.getItem('Parse/ProfileId'));

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

2. 查看组件数据

在控制台的Elements标签中：

  • 找到 <app-project-loader> 元素

  • 在Console中查看组件实例：

    // 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: 企微场景无法测试

解决方法:

  • 本地开发环境无法完全模拟企微
  • 个人看板场景可以正常测试
  • 群聊/联系人场景需要在企微环境中测试

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

配置企微自定义菜单

在企微管理后台配置菜单：

{
  "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中的登录信息