zdh
5a7ecdbdbb
- 通义灵码/Cursor/Claude Code/CodeGeeX → Trae / Trae SOLO - 通义千问/Kimi/文心一言 → 豆包（火山引擎方舟） - DeepSeek → Seed 2.1（火山引擎方舟） - Dify → 扣子（Coze） - Gitea/Gitee → 火山引擎 DevOps - 讯飞智文/WPS AI → 即梦 AI + 飞书文档 AI - 秘塔AI搜索 → 豆包 AI 搜索 - 帆软FineBI → 火山引擎数智平台 - 飞书系列产品标记为豆包驱动 共替换 88 处工具引用，JS 语法验证通过，Playwright 渲染正常
405 lines
39 KiB
HTML
405 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>角色×AI成熟度 效果矩阵 [交互版] — 六角色四级全景</title>
|
||
<style>
|
||
:root {
|
||
--color-primary:#0078D4;--color-primary-hover:#106EBE;--color-primary-active:#005A9E;--color-primary-bg:#DEECF9;--color-primary-ring:rgba(0,120,212,.18);
|
||
--color-success:#107C10;--color-success-bg:#DFF6DD;--color-success-border:#A7E3A1;--color-success-ring:rgba(16,124,16,.15);
|
||
--color-warning:#FF8C00;--color-warning-bg:#FFF4CE;--color-warning-border:#FFD335;--color-warning-ring:rgba(255,140,0,.15);
|
||
--color-error:#C42B1C;--color-error-bg:#FDE7E9;--color-error-border:#EEACB2;
|
||
--bg:#FAF9F8;--bg-container:#FFFFFF;--bg-elevated:#F3F2F1;
|
||
--border:#D1D1D1;--border-light:#EDEBE9;
|
||
--text-primary:#1B1A19;--text-secondary:#605E5C;--text-tertiary:#8A8886;
|
||
--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;
|
||
--shadow-sm:0 0 2px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
|
||
--shadow-md:0 0 2px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.08);
|
||
--shadow-lg:0 0 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.12);
|
||
--shadow-xl:0 0 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.16);
|
||
--header-h:64px;
|
||
--transition-fast:.12s cubic-bezier(0,0,0,1);
|
||
--transition-normal:.2s cubic-bezier(.4,0,.2,1);
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box;}
|
||
body{font-family:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.6;font-size:15px;font-weight:450;-webkit-font-smoothing:antialiased;}
|
||
::-webkit-scrollbar{width:6px;height:6px;}
|
||
::-webkit-scrollbar-track{background:transparent;}
|
||
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
|
||
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary);}
|
||
|
||
/* Header —— Acrylic */
|
||
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:rgba(250,249,248,.88);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--border-light);display:flex;align-items:center;padding:0 28px;z-index:100;box-shadow:0 1px 0 rgba(0,0,0,.02);}
|
||
.header .back-link{margin-right:16px;font-size:12px;color:var(--color-primary);text-decoration:none;flex-shrink:0;font-weight:500;transition:color var(--transition-fast);}
|
||
.header .back-link:hover{color:var(--color-primary-hover);}
|
||
.header h1{font-size:18px;font-weight:700;background:linear-gradient(135deg,#0078D4 0%,#2B88D8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
|
||
.header .badge{margin-left:10px;padding:2px 10px;background:var(--color-primary-bg);color:var(--color-primary);border-radius:var(--radius-xl);font-size:11px;font-weight:600;}
|
||
|
||
/* Main */
|
||
.main{margin-top:var(--header-h);padding:28px 36px 48px;max-width:1520px;margin-left:auto;margin-right:auto;}
|
||
.instruction{text-align:center;margin-bottom:18px;font-size:13px;color:var(--text-tertiary);}
|
||
.instruction kbd{display:inline-block;padding:2px 8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-xs);font-family:'Cascadia Code','Fira Code',monospace;font-size:11px;margin:0 2px;box-shadow:0 1px 0 rgba(0,0,0,.08);}
|
||
|
||
/* Quick nav —— Pills */
|
||
.quick-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;justify-content:center;}
|
||
.quick-nav button{padding:7px 18px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-container);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;font-weight:500;}
|
||
.quick-nav button:hover{background:var(--color-primary-bg);color:var(--color-primary);border-color:var(--color-primary-bg);}
|
||
.quick-nav button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:600;box-shadow:0 2px 8px var(--color-primary-ring);}
|
||
.level-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;font-size:12px;color:var(--text-tertiary);}
|
||
.level-legend span{display:flex;align-items:center;gap:6px;}
|
||
.level-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;}
|
||
|
||
/* Matrix */
|
||
.matrix-wrap{overflow-x:auto;margin:0 auto 20px;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--bg-container);}
|
||
.matrix{width:100%;border-collapse:collapse;min-width:960px;font-size:14px;}
|
||
.matrix th,.matrix td{padding:13px 15px;border:1px solid var(--border-light);text-align:center;vertical-align:middle;}
|
||
.matrix thead th{background:var(--bg-elevated);font-weight:700;color:var(--text-primary);font-size:13px;position:sticky;top:0;z-index:2;}
|
||
.matrix thead th:first-child{border-top-left-radius:var(--radius-lg);}
|
||
.matrix thead th:last-child{border-top-right-radius:var(--radius-lg);}
|
||
|
||
/* Level header gradients */
|
||
.matrix thead th.l0{background:linear-gradient(180deg,#F3F2F1 0%,#E8E7E6 100%);color:#605E5C;}
|
||
.matrix thead th.l1{background:linear-gradient(180deg,#FFF8E0 0%,#FFF4CE 100%);color:#8A6D00;}
|
||
.matrix thead th.l2{background:linear-gradient(180deg,#EFF6FC 0%,#DEECF9 100%);color:#005A9E;}
|
||
.matrix thead th.l25{background:linear-gradient(180deg,#F9F2FF 0%,#F3E8FF 100%);color:#722ED1;}
|
||
.matrix thead th.l3{background:linear-gradient(180deg,#EBF9EB 0%,#DFF6DD 100%);color:#107C10;}
|
||
.matrix thead th .lv-num{display:block;font-size:19px;font-weight:800;margin-bottom:1px;}
|
||
.matrix thead th .lv-name{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;}
|
||
|
||
/* Role name */
|
||
.matrix tbody td.role-name{font-weight:600;color:var(--text-primary);background:var(--bg);text-align:left;font-size:14px;position:sticky;left:0;z-index:1;white-space:nowrap;border-left:3px solid var(--border);transition:border-color var(--transition-fast);}
|
||
.matrix tbody tr:hover td.role-name{border-left-color:var(--color-primary);background:var(--color-primary-bg);}
|
||
.matrix tbody td.role-name .role-icon{font-size:17px;margin-right:3px;vertical-align:-2px;}
|
||
|
||
/* Clickable cells */
|
||
.matrix tbody td.cell{cursor:pointer;position:relative;transition:all var(--transition-fast);user-select:none;min-width:118px;max-width:158px;}
|
||
.matrix tbody td.cell:hover{transform:scale(1.04);z-index:3;box-shadow:var(--shadow-lg);}
|
||
.matrix tbody td.cell:active{transform:scale(.96);}
|
||
.matrix tbody td.cell-l0{background:#FAFAFA;}
|
||
.matrix tbody tr:hover td.cell-l0{background:#F5F5F5;}
|
||
.matrix tbody td.cell-l1{background:#FFFDF5;}
|
||
.matrix tbody tr:hover td.cell-l1{background:#FFFAE8;}
|
||
.matrix tbody td.cell-l2{background:#F5FAFF;}
|
||
.matrix tbody tr:hover td.cell-l2{background:#EBF4FC;}
|
||
.matrix tbody td.cell-l25{background:#FCFAFF;}
|
||
.matrix tbody tr:hover td.cell-l25{background:#F6F0FC;}
|
||
.matrix tbody td.cell-l3{background:#F5FFF7;}
|
||
.matrix tbody tr:hover td.cell-l3{background:#EBF9ED;}
|
||
|
||
/* Selected */
|
||
.matrix tbody td.cell.selected{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:4;box-shadow:inset 0 0 0 4px var(--color-primary-ring),var(--shadow-lg);border-radius:2px;}
|
||
.cell-label-matrix{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:2px;}
|
||
.cell-brief{font-size:11px;color:var(--text-secondary);line-height:1.4;}
|
||
.cell-indicator{position:absolute;top:5px;right:7px;width:7px;height:7px;border-radius:50%;opacity:.7;transition:opacity var(--transition-fast);}
|
||
.matrix tbody td.cell:hover .cell-indicator{opacity:1;}
|
||
.cell-indicator.l0-dot{background:#A19F9D;}
|
||
.cell-indicator.l1-dot{background:var(--color-warning);}
|
||
.cell-indicator.l2-dot{background:var(--color-primary);}
|
||
.cell-indicator.l25-dot{background:#722ED1;}
|
||
.cell-indicator.l3-dot{background:var(--color-success);}
|
||
|
||
/* ===== Floating detail popover ===== */
|
||
.detail-pop{display:none;position:fixed;z-index:200;max-width:460px;min-width:300px;padding:12px 16px 14px;background:var(--bg-container);border:1.5px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);animation:slideIn var(--transition-normal);font-size:13px;}
|
||
.detail-pop.show{display:block;}
|
||
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
|
||
.detail-pop .di-close{position:absolute;top:4px;right:7px;width:20px;height:20px;border:1px solid var(--border);border-radius:50%;background:var(--bg-container);cursor:pointer;font-size:14px;line-height:18px;text-align:center;color:var(--text-tertiary);transition:all var(--transition-fast);padding:0;}
|
||
.detail-pop .di-close:hover{background:var(--color-error-bg);color:var(--color-error);border-color:var(--color-error-border);}
|
||
.detail-pop .di-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-light);flex-wrap:wrap;}
|
||
.detail-pop .di-role{font-size:14px;font-weight:700;color:var(--text-primary);}
|
||
.detail-pop .di-role-desc{font-size:12px;color:var(--text-secondary);}
|
||
.detail-pop .di-effect-inline{font-size:12px;color:var(--color-warning);}
|
||
.detail-pop .di-effect-inline::before{content:"· ";color:var(--text-tertiary);}
|
||
.detail-pop .di-badge{display:inline-flex;align-items:center;gap:2px;padding:1px 8px;border-radius:var(--radius-xl);font-size:10px;font-weight:700;letter-spacing:.02em;}
|
||
.detail-pop .di-badge.bl0{background:#E1DFDD;color:#605E5C;}
|
||
.detail-pop .di-badge.bl1{background:var(--color-warning-bg);color:#8A6D00;}
|
||
.detail-pop .di-badge.bl2{background:var(--color-primary-bg);color:#0078D4;}
|
||
.detail-pop .di-badge.bl25{background:#F3E8FF;color:#722ED1;}
|
||
.detail-pop .di-badge.bl3{background:var(--color-success-bg);color:var(--color-success);}
|
||
|
||
/* Detail rows */
|
||
.di-rows{display:flex;flex-direction:column;gap:3px;}
|
||
.di-row{display:flex;align-items:baseline;font-size:13px;line-height:1.55;}
|
||
.di-row .di-label{flex-shrink:0;width:56px;font-weight:700;color:var(--text-tertiary);text-align:right;padding-top:1px;}
|
||
.di-row .di-value{flex:1;color:var(--text-primary);padding-left:8px;word-break:break-word;}
|
||
.di-row.effect-row .di-label{color:var(--color-warning);}
|
||
.di-row.compete-row .di-label{color:var(--color-success);}
|
||
.di-row.tools-row{font-size:12px;}
|
||
|
||
/* Reset */
|
||
.reset-btn{display:block;margin:0 auto;padding:8px 24px;background:var(--bg-container);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;cursor:pointer;font-family:inherit;transition:all var(--transition-fast);}
|
||
.reset-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--text-secondary);}
|
||
|
||
/* Footer */
|
||
.footer{text-align:center;padding:32px 0 20px;color:var(--text-tertiary);font-size:12px;margin-top:32px;}
|
||
.footer a{color:var(--color-primary);text-decoration:none;}
|
||
.footer a:hover{text-decoration:underline;}
|
||
|
||
/* ===== Responsive ===== */
|
||
@media(max-width:1024px){.main{padding:20px 16px 40px;}}
|
||
@media(max-width:768px){
|
||
.header{padding:0 16px;}.header h1{font-size:14px;}.header .badge{display:none;}
|
||
.main{padding:12px 8px 28px;}
|
||
.matrix{font-size:12px;min-width:720px;}
|
||
.matrix th,.matrix td{padding:9px 6px;}
|
||
.matrix thead th .lv-num{font-size:15px;}.matrix thead th .lv-name{font-size:10px;}
|
||
.matrix tbody td.role-name{font-size:11px;}
|
||
.cell-label-matrix{font-size:11px;}.cell-brief{font-size:10px;}
|
||
.detail-pop{max-width:calc(100vw - 20px);left:10px!important;}
|
||
.di-row .di-label{width:48px;font-size:10px;}
|
||
.di-row .di-value{font-size:12px;}
|
||
.di-row{gap:6px;padding:4px 0;}
|
||
}
|
||
@media print{
|
||
.header{position:static;}.main{margin-top:0;}
|
||
.quick-nav,.reset-btn,.instruction{display:none;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<a href="../../index.html" class="back-link">← 返回知识库</a>
|
||
<h1>角色×AI成熟度 效果矩阵</h1>
|
||
<span class="badge">交互版</span>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<p class="instruction">
|
||
💡 <strong>点击任意单元格</strong>，详情在点击行下方展开 · 键盘 <kbd>←</kbd><kbd>→</kbd><kbd>↑</kbd><kbd>↓</kbd> 导航 · <kbd>Esc</kbd> 关闭
|
||
</p>
|
||
<div class="quick-nav" id="quickNav">
|
||
<button data-level="all" class="active">全部级别</button>
|
||
<button data-level="l1">L1 · 萌芽期 · 个人能力提升</button>
|
||
<button data-level="l2">L2 · 规范期 · 工作流程自动化</button>
|
||
<button data-level="l25">L2.5 · 增强期 · 考核自动化 · 知识沉淀</button>
|
||
<button data-level="l3">L3 · 原生期 · 人机共治</button>
|
||
</div>
|
||
<div class="level-legend">
|
||
<span><span class="dot" style="background:#FFF4CE;"></span> L1 野生 · 个人能力提升</span>
|
||
<span><span class="dot" style="background:#DEECF9;"></span> L2 制度 · 工作流程自动化</span>
|
||
<span><span class="dot" style="background:#F3E8FF;"></span> L2.5 辅政 · 考核自动化</span>
|
||
<span><span class="dot" style="background:#DFF6DD;"></span> L3 原生 · 人机共治</span>
|
||
</div>
|
||
|
||
<div class="matrix-wrap">
|
||
<table class="matrix" id="theMatrix">
|
||
<thead><tr>
|
||
<th style="width:16%">角色</th>
|
||
<th class="l1" style="width:19%"><span class="lv-num">L1</span><span class="lv-name">萌芽期 · 个人能力提升</span></th>
|
||
<th class="l2" style="width:23%"><span class="lv-num">L2</span><span class="lv-name">规范期 · 工作流程自动化</span></th>
|
||
<th class="l25" style="width:23%"><span class="lv-num">L2.5</span><span class="lv-name">增强期 · 考核自动化 · 知识沉淀</span></th>
|
||
<th class="l3" style="width:19%"><span class="lv-num">L3</span><span class="lv-name">原生期 · 人机共治</span></th>
|
||
</tr></thead>
|
||
<tbody id="matrixBody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="detail-pop" id="detailPop"></div>
|
||
|
||
<button class="reset-btn" id="resetBtn">🔄 清除选中 · 查看全部</button>
|
||
|
||
<footer class="footer">
|
||
<p>角色×AI成熟度 效果矩阵 [交互版] · V1.2 · 2026-06-14</p>
|
||
<p style="margin-top:4px">配套阅读：<a href="ai-enterprise-maturity-model.html">企业 AI 成熟度五级模型</a> · <a href="ai-role-level-matrix.html">静态版矩阵</a></p>
|
||
</footer>
|
||
</main>
|
||
|
||
<script>
|
||
// =====================================================================
|
||
// DATA
|
||
// =====================================================================
|
||
const MATRIX_DATA = {
|
||
"软件工程师":{icon:"⚙️",
|
||
l0:{label:"—",brief:"手工编码+手工测试，无AI",aiUsage:"无",humanRole:"纯手工编码+手工测试",keyChange:"—",effect:"基准效率，代码质量依赖个人",compete:"基准线",tools:"—"},
|
||
l1:{label:"个人工具",brief:"Trae / Trae SOLO，各用各的",aiUsage:"个人使用 AI 编码工具：Trae / Trae SOLO，代码生成+补全",humanRole:"<em>执行者</em>",keyChange:"个人编码效率↑30-50%，但代码质量因工具和 Prompt 能力而异",effect:"个人效率↑30-50%，代码风格多样，无统一标准",compete:"无变化——产品交付节奏不变",tools:"<strong>Trae</strong>（免费版）/ <strong>Trae</strong><br><strong>Trae SOLO</strong> / <strong>Trae</strong><br>Seed 2.1（火山引擎方舟）<br><span style=\"font-size:10px;color:#8A8886\">个人选型，无统一管理</span>"},
|
||
l2:{label:"统一开发平台",brief:"Trae企版+火山引擎 DevOps+CI/CD集成",aiUsage:"公司统一工具链：Trae企业版 + 火山引擎 DevOps + CI/CD，代码生成+自动测试",humanRole:"<em>执行者+遵守规范</em>",keyChange:"代码可追溯、风格统一、CI/CD 自动化，技术债务开始可量化",effect:"代码可追溯、CI/CD 自动化，质量开始可度量",compete:"微弱——产品交付质量更稳定",tools:"<strong>Trae</strong>（企业版）<br><strong>火山引擎 DevOps</strong> — 私有代码托管<br><strong>火山引擎方舟 API（Seed 2.1）</strong> — CI/CD集成<br><span style=\"font-size:10px;color:#8A8886\">公司统一采购、统一配置</span>"},
|
||
l25:{label:"AI质量门禁",brief:"AI审查→质量评分→CI门禁拦截",aiUsage:"AI 自动审查每次提交→代码质量评分→技术债务趋势→CI 质量门禁自动拦截",humanRole:"<em>执行者+接受量化评估</em>",keyChange:"质量可预测、Bug率可量化下降、发布风险前置发现。工程师从\u201C修Bug\u201D变为\u201C防Bug\u201D",effect:"Bug率可量化下降，技术债务可视化，发布质量可预测",compete:"中等——线上Bug率可量化下降，产品稳定性提升",tools:"<strong>Trae</strong>（企业版）— AI Code Review<br><strong>火山引擎 DevOps CI + Seed 2.1</strong> — 质量门禁<br><strong>扣子（Coze）</strong> — 代码质量评估+趋势分析<br><span style=\"font-size:10px;color:#8A8886\">AI质量门禁+技术债务追踪</span>"},
|
||
l3:{label:"AI驱动产品研发",brief:"需求→设计→编码→测试→部署全自驱",aiUsage:"需求→AI 拆解→架构设计→编码→测试→部署→监控，全链路 AI 自驱",humanRole:"<em>产品方向定义者+架构决策者</em>",keyChange:"产品迭代周期缩短 60%+，工程师从\u201C写代码\u201D升级为\u201C设计系统+训练AI\u201D",effect:"产品迭代周期缩短 60%+，人力聚焦创新而非重复劳动",compete:"质变——产品迭代速度+质量碾压竞品，创新从人力瓶颈中解放",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 产品研发编排<br><strong>Trae</strong>（企业版）— 全流程代码生成<br><strong>火山引擎 DevOps CI/CD + AI Agent</strong> — 自动部署+监控<br><span style=\"font-size:10px;color:#8A8886\">全链路AI自驱产品研发平台</span>"}
|
||
},
|
||
"售前顾问":{icon:"📊",
|
||
l0:{label:"—",brief:"纯手工方案+PPT",aiUsage:"无",humanRole:"纯手工方案+PPT",keyChange:"—",effect:"5-10 天/方案",compete:"基准线",tools:"—"},
|
||
l1:{label:"偷偷用",brief:"私下用AI写方案片段",aiUsage:"私下用豆包写方案片段",humanRole:"<em>执行者+AI润色</em>",keyChange:"个人方案速度↑但质量不稳定，有客户数据泄露风险",effect:"个人方案速度↑，但不稳定，可能泄露客户信息",compete:"微弱——仅体现在个别售前的响应速度",tools:"<strong>豆包（火山引擎方舟）</strong> / <strong>豆包</strong> / <strong>Seed 2.1（火山引擎方舟）</strong><br><strong>豆包</strong> / <strong>豆包</strong><br><span style=\"font-size:10px;color:#8A8886\">个人自行使用，工具自选</span>"},
|
||
l2:{label:"AI辅助方案",brief:"标书解读→初稿→PPT，统一流程",aiUsage:"AI 辅助标书解读→方案初稿→PPT 生成，统一流程",humanRole:"<em>精修者+客户沟通者</em>",keyChange:"方案周期 5-10天→2-3天，模板一致、质量可控",effect:"方案周期 5-10天→2-3天，质量一致性提升",compete:"中等——响应速度明显快于竞品",tools:"<strong>豆包（火山引擎方舟）</strong> — 标书解读 / 方案生成<br><strong>即梦 AI + 飞书文档 AI</strong> / <strong>飞书文档 AI</strong> — PPT 自动生成<br><strong>豆包</strong> — 长文档分析<br><span style=\"font-size:10px;color:#8A8886\">公司统一流程+模板</span>"},
|
||
l25:{label:"AI模拟+评估",brief:"模拟客户质疑→质量自评→中标预估",aiUsage:"AI 模拟客户质疑→方案质量自评→改进建议→中标概率预估",humanRole:"<em>汇报者+关系维护者</em>",keyChange:"方案针对性显著提升，中标率开始可以系统化追踪和优化",effect:"中标率可量化追踪，方案针对性显著提升",compete:"显著——方案质量感知 + 中标率双重提升",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 模拟汇报工作流<br><strong>飞书知识库</strong> — 历史方案沉淀匹配<br><strong>豆包（火山引擎方舟）</strong> — 方案质量评估<br><span style=\"font-size:10px;color:#8A8886\">AI模拟+方案库复用</span>"},
|
||
l3:{label:"AI端到端方案",brief:"招标书→方案+PPT+报价，1天完成",aiUsage:"招标书→AI 端到端方案+PPT+报价+风险报告，1 天内完成",humanRole:"<em>审核者+关键决策者</em>",keyChange:"1 个售前同时覆盖 3-5 个项目，小项目方案可接近零人工",effect:"方案产出 1 天内，售前可同时覆盖 3-5 个项目",compete:"碾压级——竞品还在写方案，你已经可以报更低价格",tools:"<strong>扣子工作流 + 豆包（火山引擎方舟）</strong> — 端到端方案编排<br><strong>即梦 AI + 飞书文档 AI / 飞书文档 AI</strong> — PPT 全自动输出<br><strong>飞书多维表格 + AI</strong> — 报价+风险评估<br><span style=\"font-size:10px;color:#8A8886\">1天内全流程AI输出</span>"}
|
||
},
|
||
"项目经理":{icon:"📋",
|
||
l0:{label:"—",brief:"手工Excel排期、Word写报告",aiUsage:"无",humanRole:"手工 Excel/Word 管理",keyChange:"—",effect:"每周 1-2 天做管理文书",compete:"基准线",tools:"—"},
|
||
l1:{label:"个人辅助",brief:"AI写周报、做会议纪要",aiUsage:"个人用 AI 写周报、做会议纪要",humanRole:"<em>全部管理决策</em>",keyChange:"文书效率↑，管理方式不变——AI 只是打字助手",effect:"个人文书效率↑，但管理方式未变",compete:"无变化",tools:"<strong>豆包（火山引擎方舟）</strong> / <strong>豆包</strong> / <strong>Seed 2.1（火山引擎方舟）</strong><br><strong>豆包</strong> / <strong>豆包</strong><br><strong>飞书妙记</strong> — 会议纪要转写<br><span style=\"font-size:10px;color:#8A8886\">个人辅助工具，无系统性</span>"},
|
||
l2:{label:"AI辅助管理",brief:"WBS+里程碑+风险识别+周报自动",aiUsage:"AI 生成 WBS+里程碑+风险识别+周报自动生成",humanRole:"<em>审核者+决策者</em>",keyChange:"管理文书时间 2天→半天/周，PM 有更多时间做真正的管理",effect:"管理文书时间 2天→半天/周，留出更多时间做实际管理",compete:"微弱——内部效率提升",tools:"<strong>豆包（火山引擎方舟）</strong> — WBS/风险管理生成<br><strong>飞书多维表格 + AI</strong> — 进度跟踪+周报自动生成<br><strong>豆包</strong> — 长文档/合同分析<br><span style=\"font-size:10px;color:#8A8886\">管理文书AI辅助</span>"},
|
||
l25:{label:"AI管理驾驶舱",brief:"实时数据→进度预警+风险趋势",aiUsage:"AI 实时采集 火山引擎 DevOps+工具链数据→进度预警+风险趋势+绩效分析",humanRole:"<em>异常处理者+决策者</em>",keyChange:"\u201C盯进度\u201D自动化。PM 从信息汇总者升级为决策者。AI 预警\u201C哪个任务可能延期\u201D",effect:"盯进度自动化，PM 从信息汇总者升级为决策者",compete:"中等——交付更准时，客户信任度提升",tools:"<strong>飞书智能伙伴（豆包驱动）</strong> — 项目管理驾驶舱<br><strong>火山引擎 DevOps + Seed 2.1</strong> — 数据采集+趋势分析<br><strong>飞书多维表格 + AI</strong> — 实时进度看板<br><span style=\"font-size:10px;color:#8A8886\">管理驾驶舱，AI实时预警</span>"},
|
||
l3:{label:"AI自主项目管理",brief:"目标→拆解→分配→跟踪→报告全自驱",aiUsage:"目标→AI 拆解→分配→跟踪→报告，全链路自驱。人处理 escalations",humanRole:"<em>目标定义者+例外处理者</em>",keyChange:"1 个 PM 可管理 3-5 个同等规模项目。中层管理职能被 AI 系统替代",effect:"1 个 PM 可管理 3-5 个同等规模项目",compete:"显著——多项目并行能力 ×3，管理成本大幅下降",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 项目管理AI编排<br><strong>飞书 × AI Agent</strong> — 多项目并行调度<br><strong>火山引擎 DevOps + AI Agent</strong> — 自动跟踪+异常升级<br><span style=\"font-size:10px;color:#8A8886\">全链路AI自驱管理</span>"}
|
||
},
|
||
"应用顾问":{icon:"📝",
|
||
l0:{label:"—",brief:"手工调研+蓝图+FS",aiUsage:"无",humanRole:"纯手工调研+蓝图+FS",keyChange:"—",effect:"文档耗时占项目 30-40%",compete:"基准线",tools:"—"},
|
||
l1:{label:"个人辅助",brief:"私下用AI写FS片段",aiUsage:"私下用 AI 写 FS 片段、整理需求文档",humanRole:"<em>全部业务判断</em>",keyChange:"片段效率↑但无整体方法转变，文档质量不稳定",effect:"片段效率↑，但无整体方法转变",compete:"无变化",tools:"<strong>豆包（火山引擎方舟）</strong> / <strong>豆包</strong> / <strong>Seed 2.1（火山引擎方舟）</strong><br><strong>豆包</strong> — 需求整理+FS片段<br><span style=\"font-size:10px;color:#8A8886\">个人辅助，无统一规范</span>"},
|
||
l2:{label:"AI辅助FS",brief:"需求→蓝图框架→FS初稿自动生成",aiUsage:"需求→AI 生成蓝图框架→FS 初稿（功能+规则+界面+异常流程）",humanRole:"<em>精修业务逻辑</em>",keyChange:"FS 周期缩短 50%+，跨项目文档一致性大幅提升",effect:"FS 周期缩短 50%+，跨项目一致性大幅提升",compete:"中等——交付文档质量更专业、更规范",tools:"<strong>扣子（Coze）</strong> — FS生成工作流<br><strong>豆包（火山引擎方舟）</strong> — 蓝图/FS初稿生成<br><strong>飞书知识库</strong> — FS模板沉淀<br><span style=\"font-size:10px;color:#8A8886\">统一流程+模板</span>"},
|
||
l25:{label:"AI知识复用",brief:"扣子（Coze）知识库→历史FS自动匹配复用",aiUsage:"扣子（Coze） 知识库→历史 FS/行业方案自动匹配→新项目智能复用",humanRole:"<em>审核者+定制调优者</em>",keyChange:"经验不再绑定个人，新人上手周期减半。跨项目经验复用率 >60%",effect:"经验不再绑定个人，新顾问上手周期减半",compete:"显著——方案复用带来速度和质量的同步提升",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 知识库RAG匹配<br><strong>飞书知识库</strong> — 历史FS存贮+标注<br><strong>豆包（火山引擎方舟）</strong> — 行业方案智能适配<br><span style=\"font-size:10px;color:#8A8886\">知识库驱动智能复用</span>"},
|
||
l3:{label:"AI自主FS",brief:"需求→FS+接口规范+原型，人只审逻辑",aiUsage:"需求输入→AI 端到端 FS+接口规范+原型，人只审业务逻辑",humanRole:"<em>业务把关者+客户确认者</em>",keyChange:"1 个顾问同时支撑 3 个项目，\u201C应用顾问是瓶颈\u201D不复存在",effect:"1 个顾问同时支撑 3 个项目 FS，瓶颈消失",compete:"碾压级——交付速度 + 人力效率双重碾压",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 端到端FS编排<br><strong>飞书 × AI Agent</strong> — 接口规范+原型自动生成<br><strong>扣子（Coze）</strong> — 需求收集Bot<br><span style=\"font-size:10px;color:#8A8886\">全链路AI自驱FS平台</span>"}
|
||
},
|
||
"测试/QA":{icon:"🧪",
|
||
l0:{label:"—",brief:"手工用例+手工执行",aiUsage:"无",humanRole:"手工用例+手工执行",keyChange:"—",effect:"测试覆盖率依赖个人经验",compete:"基准线",tools:"—"},
|
||
l1:{label:"个人辅助",brief:"AI生成用例、辅助写自动化脚本",aiUsage:"个人用 AI 生成测试用例、辅助写自动化脚本",humanRole:"<em>全部执行+判断</em>",keyChange:"用例编写加速，但无统一标准，质量取决于个人",effect:"用例编写加速，但质量参差，无统一标准",compete:"无变化",tools:"<strong>豆包（火山引擎方舟）</strong> / <strong>Seed 2.1（火山引擎方舟）</strong> — 测试用例生成<br><strong>Trae</strong> — 自动化脚本辅助<br><strong>豆包</strong> — 测试策略咨询<br><span style=\"font-size:10px;color:#8A8886\">个人辅助，无统一标准</span>"},
|
||
l2:{label:"AI辅助测试",brief:"FS→用例+脚本+报告，统一流程",aiUsage:"FS→AI 生成测试用例+自动化脚本+测试报告，统一工具和流程",humanRole:"<em>执行者+边界补充者</em>",keyChange:"覆盖率系统化，回归测试自动化率大幅提升，测试不再是人海战术",effect:"用例覆盖率系统化，回归测试自动化率↑",compete:"中等——交付质量更稳定，bug 逃逸率下降",tools:"<strong>豆包（火山引擎方舟）</strong> — FS→用例自动生成<br><strong>Playwright + AI</strong> — 自动化测试<br><strong>扣子（Coze）</strong> — 测试报告自动生成工作流<br><span style=\"font-size:10px;color:#8A8886\">统一工具链+流程</span>"},
|
||
l25:{label:"AI质量洞察",brief:"Bug趋势→高风险模块→质量预测",aiUsage:"AI 分析 火山引擎 DevOps bug 趋势→定位高风险模块→预测质量拐点→建议测试重点",humanRole:"<em>策略设计者+AI升级处理者</em>",keyChange:"从\u201C全部测一遍\u201D变为\u201C精准测高风险\u201D，测试资源效率 ×3",effect:"从测全变为测对，测试资源聚焦高风险区",compete:"显著——线上事故率可量化下降，客户信任度提升",tools:"<strong>火山引擎 DevOps + Seed 2.1</strong> — Bug趋势分析<br><strong>扣子（Coze） + 豆包（火山引擎方舟）</strong> — 质量预测工作流<br><strong>飞书多维表格 + AI</strong> — 质量看板<br><span style=\"font-size:10px;color:#8A8886\">精准测试+质量洞察</span>"},
|
||
l3:{label:"AI自主测试",brief:"代码变更→自动生成+执行+分析+回归",aiUsage:"代码变更→AI 自动生成+执行+分析+回归，异常自动升级",humanRole:"<em>测试策略设计者+质量模型训练者</em>",keyChange:"测试不再成为发布瓶颈，持续质量保障融入 CI/CD，人只做策略",effect:"测试不再成为发布瓶颈，持续质量保障",compete:"碾压级——发布速度 + 质量双提升，竞品难以复制",tools:"<strong>扣子 + Seed 2.1（火山引擎方舟）</strong> — AI测试编排引擎<br><strong>Playwright + AI Agent</strong> — 自动化执行<br><strong>火山引擎 DevOps CI + AI Agent</strong> — 持续质量保障<br><span style=\"font-size:10px;color:#8A8886\">CI/CD+AI全自动质量保障</span>"}
|
||
},
|
||
"管理层":{icon:"🏛️",
|
||
l0:{label:"—",brief:"凭经验+滞后报表决策",aiUsage:"无",humanRole:"凭经验+滞后报表决策",keyChange:"—",effect:"决策基于主观判断",compete:"基准线",tools:"—"},
|
||
l1:{label:"偶尔查资料",brief:"AI查行业信息、写发言稿",aiUsage:"偶尔用 AI 查行业信息、写发言稿",humanRole:"<em>全部决策</em>",keyChange:"对管理方式无实质影响，AI 只是个人助理",effect:"对管理无实质影响",compete:"无变化",tools:"<strong>豆包（火山引擎方舟）</strong> / <strong>Seed 2.1（火山引擎方舟）</strong> / <strong>豆包</strong><br><strong>豆包 AI 搜索</strong> — 行业调研<br><span style=\"font-size:10px;color:#8A8886\">个人级别使用，对管理无影响</span>"},
|
||
l2:{label:"看Dashboard",brief:"AI效能面板：各团队采纳率+数据",aiUsage:"看 AI 效能 Dashboard：各团队采纳率、产出数据、项目健康度",humanRole:"<em>看数据+做判断</em>",keyChange:"管理从\u201C凭感觉\u201D到\u201C有数可依\u201D，但数据需人解读，决策速度未变",effect:"管理有数可依，但数据需人解读",compete:"微弱——内部管理透明度提升",tools:"<strong>飞书多维表格 + AI</strong> — 效能数据看板<br><strong>火山引擎 DevOps + Seed 2.1</strong> — 研发数据采集<br><strong>火山引擎数智平台 + AI</strong> — 管理Dashboard<br><span style=\"font-size:10px;color:#8A8886\">数据看板，仍需人解读</span>"},
|
||
l25:{label:"AI决策支持",brief:"多维洞察：效率+风险+资源+竞品",aiUsage:"AI 多维洞察：效率趋势+风险预警+资源优化建议+绩效校准+竞品动态",humanRole:"<em>在AI选项中做最优选择</em>",keyChange:"决策从\u201C拍脑袋\u201D升级为\u201C选最优\u201D。信息搜集和分析由 AI 完成，人专注于判断和权衡。管理响应速度 ×3",effect:"决策从拍脑袋升级为选最优，响应速度 ×3",compete:"显著——战略调整更快、资源错配减少、竞品反应时间缩短",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 多维洞察生成<br><strong>飞书智能伙伴（豆包驱动）</strong> — 风险预警+决策建议<br><strong>豆包</strong> — 竞品分析+行业动态<br><span style=\"font-size:10px;color:#8A8886\">AI决策支持系统</span>"},
|
||
l3:{label:"AI战略伙伴",brief:"场景模拟→决策推演→主动组织建议",aiUsage:"AI 模拟业务场景→推演决策后果→主动建议组织调整→绩效结论由 AI 生成",humanRole:"<em>方向制定者+AI建议审核者</em>",keyChange:"日常管理决策 80% 由 AI 驱动。管理层带宽全部释放到战略、客户关系和外部机会。管理半径 ×5",effect:"管理层带宽释放到战略和外部，日常管理 AI 化",compete:"质变——组织从\u201C人治\u201D升级为\u201C人+AI共治\u201D，决策质量+速度碾压传统企业",tools:"<strong>扣子（Coze）+ Seed 2.1（火山引擎方舟）</strong> — 业务场景模拟<br><strong>飞书 × AI Agent</strong> — 组织决策推演<br><strong>火山引擎 AI 战略驾驶舱</strong> — 全景管理<br><span style=\"font-size:10px;color:#8A8886\">人+AI共治决策平台</span>"}
|
||
}
|
||
};
|
||
|
||
const ROLES = Object.keys(MATRIX_DATA);
|
||
const LEVELS = ['l1','l2','l25','l3'];
|
||
const LEVEL_LABELS = {l1:'L1 · 萌芽期 · 个人能力提升',l2:'L2 · 规范期 · 工作流程自动化',l25:'L2.5 · 增强期 · 考核自动化 · 知识沉淀',l3:'L3 · 原生期 · 人机共治'};
|
||
let selectedRole = null, selectedLevel = null, currentFilter = 'all';
|
||
|
||
const matrixBody = document.getElementById('matrixBody');
|
||
function buildMatrixBody() {
|
||
let html = '';
|
||
ROLES.forEach(role => {
|
||
const data = MATRIX_DATA[role];
|
||
html += '<tr class="role-row" data-role="' + escapeHtml(role) + '">';
|
||
html += '<td class="role-name">' + role + '</td>';
|
||
LEVELS.forEach(lv => {
|
||
const cell = data[lv];
|
||
const show = (currentFilter === 'all' || currentFilter === lv);
|
||
html += '<td class="cell cell-' + lv + '" data-role="' + escapeHtml(role) + '" data-level="' + lv + '" style="' + (show ? '' : 'opacity:0.25;') + '">';
|
||
html += '<div class="cell-indicator ' + lv + '-dot"></div>';
|
||
html += '<div class="cell-label-matrix">' + cell.label + '</div>';
|
||
html += '<div class="cell-brief">' + cell.brief + '</div>';
|
||
html += '</td>';
|
||
});
|
||
html += '</tr>';
|
||
});
|
||
matrixBody.innerHTML = html;
|
||
}
|
||
|
||
matrixBody.addEventListener('click', function(e) {
|
||
const cell = e.target.closest('.cell');
|
||
if (!cell) return;
|
||
selectCell(cell.dataset.role, cell.dataset.level);
|
||
});
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (!selectedRole || !selectedLevel) return;
|
||
const ri = ROLES.indexOf(selectedRole), li = LEVELS.indexOf(selectedLevel);
|
||
let nr = ri, nl = li;
|
||
switch(e.key) {
|
||
case 'ArrowLeft': nl = Math.max(0, li-1); e.preventDefault(); break;
|
||
case 'ArrowRight': nl = Math.min(LEVELS.length-1, li+1); e.preventDefault(); break;
|
||
case 'ArrowUp': nr = Math.max(0, ri-1); e.preventDefault(); break;
|
||
case 'ArrowDown': nr = Math.min(ROLES.length-1, ri+1); e.preventDefault(); break;
|
||
case 'Escape': clearSelection(); e.preventDefault(); return;
|
||
default: return;
|
||
}
|
||
selectCell(ROLES[nr], LEVELS[nl]);
|
||
});
|
||
|
||
function selectCell(role, level) {
|
||
selectedRole = role; selectedLevel = level;
|
||
document.querySelectorAll('.cell.selected').forEach(c => c.classList.remove('selected'));
|
||
const cell = document.querySelector('.cell[data-role="' + escapeHtml(role) + '"][data-level="' + level + '"]');
|
||
if (cell) { cell.classList.add('selected'); cell.scrollIntoView({behavior:'smooth',block:'nearest',inline:'nearest'}); }
|
||
showInlineDetail(role, level);
|
||
window.location.hash = encodeURIComponent(role) + '-' + level;
|
||
}
|
||
|
||
function clearSelection() {
|
||
selectedRole = null; selectedLevel = null;
|
||
document.querySelectorAll('.cell.selected').forEach(c => c.classList.remove('selected'));
|
||
document.getElementById('detailPop').classList.remove('show');
|
||
window.location.hash = '';
|
||
}
|
||
|
||
function showInlineDetail(role, level) {
|
||
if (!role || !level) return;
|
||
const data = MATRIX_DATA[role][level];
|
||
const badgeClass = 'bl' + level.replace('.','');
|
||
const pop = document.getElementById('detailPop');
|
||
|
||
pop.innerHTML =
|
||
'<button class="di-close" onclick="clearSelection()" title="关闭">×</button>' +
|
||
'<div class="di-header">' +
|
||
'<span class="di-role">' + role + '</span>' +
|
||
'<span class="di-badge ' + badgeClass + '">' + LEVEL_LABELS[level] + '</span>' +
|
||
'<span class="di-role-desc">' + stripHtml(data.humanRole) + '</span>' +
|
||
'<span class="di-effect-inline">' + data.effect + '</span>' +
|
||
'</div>' +
|
||
'<div class="di-rows">' +
|
||
'<div class="di-row"><span class="di-label">AI使用</span><div class="di-value">' + data.aiUsage + '</div></div>' +
|
||
'<div class="di-row"><span class="di-label">关键变化</span><div class="di-value">' + data.keyChange + '</div></div>' +
|
||
'<div class="di-row compete-row"><span class="di-label">竞争力</span><div class="di-value">' + data.compete + '</div></div>' +
|
||
'<div class="di-row tools-row"><span class="di-label">工具</span><div class="di-value">' + data.tools + '</div></div>' +
|
||
'</div>';
|
||
pop.classList.add('show');
|
||
|
||
// Position below the clicked cell
|
||
const cell = document.querySelector('.cell[data-role="' + escapeHtml(role) + '"][data-level="' + level + '"]');
|
||
if (cell) {
|
||
const cr = cell.getBoundingClientRect();
|
||
const popW = pop.offsetWidth;
|
||
const popH = pop.offsetHeight;
|
||
let left = cr.left + (cr.width - popW) / 2;
|
||
let top = cr.bottom + 4;
|
||
// Keep within viewport
|
||
if (left < 8) left = 8;
|
||
if (left + popW > window.innerWidth - 8) left = window.innerWidth - popW - 8;
|
||
if (top + popH > window.innerHeight - 8) top = cr.top - popH - 4;
|
||
pop.style.left = left + 'px';
|
||
pop.style.top = top + 'px';
|
||
}
|
||
}
|
||
|
||
document.getElementById('quickNav').addEventListener('click', function(e) {
|
||
const btn = e.target.closest('button');
|
||
if (!btn) return;
|
||
document.querySelectorAll('#quickNav button').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
currentFilter = btn.dataset.level;
|
||
buildMatrixBody();
|
||
if (selectedRole && selectedLevel && (currentFilter === 'all' || currentFilter === selectedLevel)) {
|
||
const cell = document.querySelector('.cell[data-role="' + escapeHtml(selectedRole) + '"][data-level="' + selectedLevel + '"]');
|
||
if (cell) cell.classList.add('selected');
|
||
}
|
||
});
|
||
|
||
// Scroll: reposition popover
|
||
window.addEventListener('scroll', function() {
|
||
if (selectedRole && selectedLevel) showInlineDetail(selectedRole, selectedLevel);
|
||
}, {passive:true});
|
||
|
||
// Click outside: dismiss
|
||
document.addEventListener('click', function(e) {
|
||
if (selectedRole && !e.target.closest('.cell') && !e.target.closest('.detail-pop')) clearSelection();
|
||
});
|
||
|
||
document.getElementById('resetBtn').addEventListener('click', clearSelection);
|
||
|
||
function loadFromHash() {
|
||
const hash = window.location.hash.slice(1);
|
||
if (!hash) return;
|
||
const idx = hash.lastIndexOf('-');
|
||
if (idx < 0) return;
|
||
const level = hash.slice(idx+1);
|
||
const role = decodeURIComponent(hash.slice(0, idx));
|
||
if (MATRIX_DATA[role] && LEVELS.includes(level)) selectCell(role, level);
|
||
}
|
||
window.addEventListener('hashchange', loadFromHash);
|
||
|
||
function stripHtml(s) { return s.replace(/<[^>]*>/g,''); }
|
||
function escapeHtml(s) {
|
||
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||
}
|
||
|
||
buildMatrixBody();
|
||
loadFromHash();
|
||
</script>
|
||
</body>
|
||
</html>
|