zdh
84178dabe3
评分原则变更： - L1 个人工具无组织影响 →普遍降分（1-2★） - L2 标准化是组织效率第一道门槛 →维持中等（2.5-3★） - L2.5 知识沉淀+质量门禁有组织放大效应 →普遍升分（4-4.5★） - L3 全链路自驱重组组织架构 →最高分（4.5-5★） 新增 reasoning 字段：每个单元格附评分依据说明 弹窗新增「评分依据」行展示评估逻辑 具体变化： 软件工程师: 3→2, 3.5→3, 4→4.5, 5→5 售前顾问: 2→1.5, 3.5→3, 4→4, 5→4.5 项目经理: 2→1.5, 3→2.5, 4→4.5, 4.5→4.5 应用顾问: 2→1.5, 3.5→3, 4→4.5, 4.5→4.5 测试/QA: 2→1.5, 3→3, 4→4.5, 5→5 管理层: 1.5→1, 2.5→2, 3.5→3.5, 4.5→4.5
636 lines
64 KiB
HTML
636 lines
64 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;}
|
||
}
|
||
|
||
/* Star ratings */
|
||
.cell-stars{text-align:center;margin-top:4px;line-height:1;white-space:nowrap;}
|
||
.star{font-size:12px;display:inline-block;margin:0 0.5px;}
|
||
.star.full{color:#FF8C00;}
|
||
.star.half{position:relative;display:inline-block;color:#D1D1D1;}
|
||
.star.half::after{content:"★";color:#FF8C00;position:absolute;left:0;top:0;width:50%;overflow:hidden;}
|
||
.star.empty{color:#D1D1D1;}
|
||
.di-stars-row{display:flex;align-items:center;gap:10px;padding:8px 0 10px;margin-bottom:8px;border-bottom:1px solid var(--border-light);}
|
||
.di-stars-label{font-size:12px;font-weight:700;color:var(--text-tertiary);}
|
||
.di-stars-visual{font-size:18px;letter-spacing:1px;}
|
||
.di-stars-visual .star{font-size:18px;}
|
||
.di-stars-num{font-size:13px;font-weight:700;color:var(--color-warning);}
|
||
|
||
</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>
|
||
|
||
|
||
<!-- ====== 四阶段团队进化总览 ====== -->
|
||
<section style="margin-top:48px;padding-top:32px;border-top:1px solid var(--border-light);" id="teamGuide">
|
||
<h2 style="font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:8px;">
|
||
🏗️ 四阶段团队进化总览
|
||
</h2>
|
||
<p style="font-size:13px;color:var(--text-tertiary);margin-bottom:20px;">
|
||
每个AI成熟度阶段需要不同的专家团队配置。点击矩阵单元格查看各角色/级别的详细配套团队。
|
||
</p>
|
||
|
||
<div style="overflow-x:auto;">
|
||
<table style="width:100%;border-collapse:collapse;font-size:13px;margin-bottom:24px;">
|
||
<thead>
|
||
<tr style="background:var(--bg-elevated);">
|
||
<th style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;width:10%;">阶段</th>
|
||
<th style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;width:12%;">团队规模</th>
|
||
<th style="padding:10px 14px;border:1px solid var(--border-light);text-align:left;width:30%;">核心角色</th>
|
||
<th style="padding:10px 14px;border:1px solid var(--border-light);text-align:left;width:35%;">关键能力</th>
|
||
<th style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;width:13%;">人机比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;font-weight:700;background:#FFFDF5;">
|
||
<span style="display:inline-block;padding:2px 8px;border-radius:var(--radius-xl);background:var(--color-warning-bg);color:#8A6D00;font-size:11px;">L1 萌芽期</span>
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">3–5人</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
<strong>AI先锋铁三角</strong><br>
|
||
· 业务负责人 (Sponsor)<br>
|
||
· 技术布道者 (早期采用者)<br>
|
||
· 执行协调者 + 外部顾问(可选)
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
选定1-2个高频场景试点<br>
|
||
跑通完整闭环，建立组织信任<br>
|
||
⚠️ <em>不要招ML研究员</em>——先招能做产品的AI工程师
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">1:1<br><span style="font-size:11px;color:var(--text-tertiary);">AI为个人工具</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;font-weight:700;background:#F5FAFF;">
|
||
<span style="display:inline-block;padding:2px 8px;border-radius:var(--radius-xl);background:var(--color-primary-bg);color:#005A9E;font-size:11px;">L2 规范期</span>
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">8–15人</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
<strong>AI卓越中心 (COE)</strong><br>
|
||
· AI工程师 (Applied) ×3<br>
|
||
· 数据工程师 ×2<br>
|
||
· MLOps工程师 ×1<br>
|
||
· AI产品经理 ×1<br>
|
||
· 领域专家 ×2
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
统一工具链+流程+模板<br>
|
||
建立AI使用规范和知识库<br>
|
||
⚠️ <em>AI COE必须嵌入业务线</em>——不要建纯研究中心
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">1:3<br><span style="font-size:11px;color:var(--text-tertiary);">AI为嵌入式副驾驶</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;font-weight:700;background:#FCFAFF;">
|
||
<span style="display:inline-block;padding:2px 8px;border-radius:var(--radius-xl);background:#F3E8FF;color:#722ED1;font-size:11px;">L2.5 增强期</span>
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">15–30人</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
<strong>AI能力中台</strong><br>
|
||
· ML平台团队<br>
|
||
· 各业务线应用AI工程师<br>
|
||
· 数据平台工程师<br>
|
||
· <strong style="color:var(--color-error);">QA/评估专员 ⚠️最常缺失</strong><br>
|
||
· AI安全治理负责人
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
量化治理：AI审查+质量门禁<br>
|
||
知识库驱动智能复用<br>
|
||
建立评估数据集，捕获Prompt漂移<br>
|
||
⚠️ <em>跳过QA评估 = Demo永远变不了生产</em>
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">1:10<br><span style="font-size:11px;color:var(--text-tertiary);">AI为工作流智能体</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;font-weight:700;background:#F5FFF7;">
|
||
<span style="display:inline-block;padding:2px 8px;border-radius:var(--radius-xl);background:var(--color-success-bg);color:var(--color-success);font-size:11px;">L3 原生期</span>
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">30–80+人</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
<strong>联邦式AI组织</strong><br>
|
||
· 首席AI官 (CAIO)<br>
|
||
· Agent编排架构师<br>
|
||
· 前线部署工程师 (FDE)<br>
|
||
· 上下文工程师<br>
|
||
· AI伦理委员会<br>
|
||
· 各业务线嵌入AI能力
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);">
|
||
全链路AI自驱产品研发<br>
|
||
场景模拟→决策推演→AI自主决策<br>
|
||
人定义方向，AI执行日常运营<br>
|
||
⚠️ <em>不早设CAIO</em>——AI先跑通生产再设C级职位
|
||
</td>
|
||
<td style="padding:10px 14px;border:1px solid var(--border-light);text-align:center;">1:30<br><span style="font-size:11px;color:var(--text-tertiary);">AI为自主协作者</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 style="font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;margin-top:28px;">
|
||
📋 六角色 × 四级别：AI作用速查
|
||
</h3>
|
||
<div style="overflow-x:auto;">
|
||
<table style="width:100%;border-collapse:collapse;font-size:12px;">
|
||
<thead>
|
||
<tr style="background:var(--bg-elevated);">
|
||
<th style="padding:8px 10px;border:1px solid var(--border-light);text-align:left;">角色</th>
|
||
<th style="padding:8px 10px;border:1px solid var(--border-light);text-align:center;background:#FFFDF5;">L1 AI作用</th>
|
||
<th style="padding:8px 10px;border:1px solid var(--border-light);text-align:center;background:#F5FAFF;">L2 AI作用</th>
|
||
<th style="padding:8px 10px;border:1px solid var(--border-light);text-align:center;background:#FCFAFF;">L2.5 AI作用</th>
|
||
<th style="padding:8px 10px;border:1px solid var(--border-light);text-align:center;background:#F5FFF7;">L3 AI作用</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-weight:700;">⚙️ 软件工程师</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">个人编码加速器</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">质量一致性保障</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">质量预言机</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">全链路自驱引擎</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-weight:700;">📊 售前顾问</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">个人文案助手</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">方案工厂</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">中标预测引擎</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">端到端方案机器</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-weight:700;">📋 项目经理</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">文书减负器</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">管理文书自动化</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">管理驾驶舱</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">自主项目管理</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-weight:700;">📝 应用顾问</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">片段加速器</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">FS工厂</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">经验放大器</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">自主FS系统</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-weight:700;">🧪 测试/QA</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">用例生成器</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">覆盖率引擎</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">质量显微镜</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">持续质量保障</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-weight:700;">🏛️ 管理层</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">个人查询助理</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">数据透明镜</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">决策加速器</td>
|
||
<td style="padding:8px 10px;border:1px solid var(--border-light);font-size:11px;">AI战略伙伴</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3 style="font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:8px;margin-top:32px;">
|
||
🔑 关键原则
|
||
</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;font-size:13px;">
|
||
<div style="padding:12px 16px;background:var(--color-warning-bg);border-radius:var(--radius-md);border-left:3px solid var(--color-warning);">
|
||
<strong>L1 不要招 ML 研究员</strong><br>
|
||
<span style="color:var(--text-secondary);">先招 AI 工程师（能做产品的人），不是写论文的人</span>
|
||
</div>
|
||
<div style="padding:12px 16px;background:var(--color-primary-bg);border-radius:var(--radius-md);border-left:3px solid var(--color-primary);">
|
||
<strong>L2 COE 必须嵌入业务线</strong><br>
|
||
<span style="color:var(--text-secondary);">别建纯研究中心——产出论文而非产品</span>
|
||
</div>
|
||
<div style="padding:12px 16px;background:var(--color-error-bg);border-radius:var(--radius-md);border-left:3px solid var(--color-error);">
|
||
<strong>L2.5 最常缺失 QA/评估角色</strong><br>
|
||
<span style="color:var(--text-secondary);">跳过QA评估 = Demo永远变不了生产</span>
|
||
</div>
|
||
<div style="padding:12px 16px;background:var(--color-success-bg);border-radius:var(--radius-md);border-left:3px solid var(--color-success);">
|
||
<strong>L3 不早设 CAIO</strong><br>
|
||
<span style="color:var(--text-secondary);">AI先跑通生产再设C级职位——否则是政治角色无实权</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size:11px;color:var(--text-tertiary);margin-top:20px;text-align:center;">
|
||
数据来源：Gartner、Microsoft、IEEE、Deloitte、McKinsey、Bain · 2026年6月
|
||
</p>
|
||
</section>
|
||
|
||
<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>",expertTeam:"AI工具培训师、内部AI布道者（1-2名早期采用者即可）",aiRole:"个人编码加速器——代码补全+生成，效率↑30-50%",collabMode:"AI作为外部工具：我让你帮忙",stars:"2",reasoning:"个人效率↑但无组织级影响：各自为战、代码风格多样、无知识沉淀"},
|
||
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>",expertTeam:"AI平台管理员、DevOps工程师、代码规范制定者",aiRole:"质量一致性保障——统一工具链让代码可追溯、风格统一、CI/CD自动化",collabMode:"AI作为嵌入式副驾驶：我和你一起做",stars:"3",reasoning:"组织效率起步：代码可追溯、风格统一、CI/CD自动化，但人仍是执行主体"},
|
||
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>",expertTeam:"QA评估专员、代码质量分析师、AI模型调优工程师",aiRole:"质量预言机——Bug率可量化下降，技术债务可视化，发布质量可预测",collabMode:"AI作为工作流智能体：你去做，我检查",stars:"4.5",reasoning:"组织级质变：质量门禁→Bug率可量化下降→技术债务可视化，发布质量可预测，影响全研发链"},
|
||
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>",expertTeam:"AI架构师、Agent编排专家、领域建模专家",aiRole:"全链路自驱引擎——需求→设计→编码→测试→部署全自驱，迭代周期缩短60%+",collabMode:"AI作为自主协作者：你负责这个，我负责那个",stars:"5",reasoning:"组织架构重组：全链路AI自驱→迭代周期缩短60%+→工程师从写代码升级为设计系统+训练AI"}
|
||
},
|
||
"售前顾问":{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>",expertTeam:"AI安全培训师（防客户数据泄露至第三方平台）",aiRole:"个人文案助手——私下用AI写方案片段，速度↑但质量不稳定",collabMode:"AI作为外部工具：私下偷偷用",stars:"1.5",reasoning:"个人效率↑但有数据泄露风险：无组织规范、无质量管控、无知识沉淀"},
|
||
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>",expertTeam:"方案模板设计师、AI输出审核员、行业知识库管理员",aiRole:"方案工厂——标书解读→初稿→PPT自动生成，周期5-10天→2-3天",collabMode:"AI作为嵌入式副驾驶：统一流程+模板，人做精修",stars:"3",reasoning:"组织流程标准化：方案周期5-10天→2-3天、模板统一、质量可控，但人工精修占比仍高"},
|
||
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>",expertTeam:"知识库管理员、数据分析师（中标转化分析）",aiRole:"中标预测引擎——模拟客户质疑→方案质量自评→中标概率预估",collabMode:"AI作为工作流智能体：AI模拟+自评，人汇报+决策",stars:"4",reasoning:"组织知识资产化：历史方案复用→经验不绑定个人、中标率可追踪、方案针对性显著提升"},
|
||
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>",expertTeam:"Agent编排工程师、报价模型训练师、风险管理专家",aiRole:"端到端方案机器——招标书→方案+PPT+报价+风险报告，1天完成，1人覆盖3-5项目",collabMode:"AI作为自主协作者：人只审核关键决策，日常全自动",stars:"4.5",reasoning:"售前组织瘦身：1天出方案→1人覆盖3-5项目→方案质量+速度双碾压，但限于售前职能边界"}
|
||
},
|
||
"项目经理":{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>",expertTeam:"无需特殊角色配置（个人工具使用阶段）",aiRole:"文书减负器——AI写周报、做会议纪要，管理方式暂未改变",collabMode:"AI作为外部工具：个人助理",stars:"1.5",reasoning:"个人文书提效但管理方式不变：AI只是打字助手，对项目交付无实质影响"},
|
||
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>",expertTeam:"项目管理方法教练、AI工具培训师",aiRole:"管理文书自动化——WBS+里程碑+风险识别+周报自动生成，管理文书2天→半天/周",collabMode:"AI作为嵌入式副驾驶：AI出初稿，人审核决策",stars:"2.5",reasoning:"管理文书减负：WBS+周报自动生成→管理文书2天→半天，PM有时间做实际管理但决策链未变"},
|
||
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>",expertTeam:"数据分析师、BI工程师、绩效管理专家",aiRole:"管理驾驶舱——实时数据→进度预警+风险趋势+绩效分析，盯进度自动化",collabMode:"AI作为工作流智能体：AI实时监控+预警，人处理异常",stars:"4.5",reasoning:"组织透明化变革：实时数据→自动预警→PM从信息汇总者升级为决策者，跨项目可见性根本性提升"},
|
||
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>",expertTeam:"Agent编排架构师、多项目调度算法工程师",aiRole:"自主项目管理——目标→拆解→分配→跟踪→报告全自驱，1人管3-5个同等规模项目",collabMode:"AI作为自主协作者：日常管理AI驱动，人定义目标+处理例外",stars:"4.5",reasoning:"项目组织瘦身：1人管3-5同等规模项目、AI驱动的日常管理、人只处理例外和定义目标"}
|
||
},
|
||
"应用顾问":{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>",expertTeam:"无需特殊角色配置",aiRole:"片段加速器——私下用AI写FS片段，效率↑但无整体方法转变",collabMode:"AI作为外部工具：个人辅助",stars:"1.5",reasoning:"片段提效但无整体方法转变：FS片段加速但质量不稳定、无组织规范"},
|
||
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>",expertTeam:"FS模板设计师、行业知识库管理员",aiRole:"FS工厂——需求→蓝图框架→FS初稿自动生成，周期缩短50%+，跨项目一致性大幅提升",collabMode:"AI作为嵌入式副驾驶：AI生成框架，人精修业务逻辑",stars:"3",reasoning:"FS标准化：周期缩短50%+、跨项目文档一致性大幅提升，但人工精修业务逻辑仍为核心"},
|
||
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>",expertTeam:"知识图谱工程师、RAG系统管理员、行业方案架构师",aiRole:"经验放大器——历史FS自动匹配复用，经验不再绑定个人，新人上手周期减半",collabMode:"AI作为工作流智能体：知识库驱动智能复用",stars:"4.5",reasoning:"组织记忆工程化：历史FS自动匹配复用→经验去个人化→新人上手周期减半，解决咨询行业核心痛点"},
|
||
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>",expertTeam:"Agent编排工程师、接口规范专家、原型UX评估师",aiRole:"自主FS系统——需求输入→FS+接口规范+原型全自动，1人支撑3个项目FS",collabMode:"AI作为自主协作者：AI端到端FS，人只审业务逻辑",stars:"4.5",reasoning:"顾问组织瘦身：1人同时支撑3个项目FS→\u201C应用顾问是瓶颈\u201D不复存在→交付速度跨越"}
|
||
},
|
||
"测试/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>",expertTeam:"无需特殊角色配置",aiRole:"用例生成器——AI生成测试用例、辅助写自动化脚本",collabMode:"AI作为外部工具：个人辅助",stars:"1.5",reasoning:"用例生成加速但质量参差：个人使用、无统一标准、覆盖率依赖个人经验"},
|
||
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>",expertTeam:"自动化测试框架专家、测试策略设计师",aiRole:"覆盖率引擎——FS→用例+脚本+报告自动生成，回归测试自动化率大幅提升",collabMode:"AI作为嵌入式副驾驶：统一工具链+流程，人执行+补充边界",stars:"3",reasoning:"质量基线建立：用例覆盖率系统化、回归测试自动化率↑、bug逃逸率下降，组织质量底线抬升"},
|
||
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>",expertTeam:"质量数据分析师、ML模型评估专家(Evals)、安全测试专家",aiRole:"质量显微镜——Bug趋势→高风险模块定位→质量拐点预测。从全测变精准测高风险区",collabMode:"AI作为工作流智能体：AI定位风险，人设计策略",stars:"4.5",reasoning:"QA策略升维：从\u201C全测\u201D到\u201C精准测高风险\u201D→测试资源效率×3→QA从执行部门升级为策略部门"},
|
||
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>",expertTeam:"AI测试编排架构师、质量模型训练师、CI/CD管道工程师",aiRole:"持续质量保障——代码变更→自动生成+执行+分析+回归，测试不再成为发布瓶颈",collabMode:"AI作为自主协作者：AI全自动质量保障，人只做策略设计",stars:"5",reasoning:"质量部门重组：测试不再成为发布瓶颈→持续质量保障融入CI/CD→人只做策略+模型训练"}
|
||
},
|
||
"管理层":{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>",expertTeam:"AI素养培训师",aiRole:"个人查询助理——AI查行业信息、写发言稿，对管理方式无实质影响",collabMode:"AI作为外部工具：偶尔查资料",stars:"1",reasoning:"无组织影响：偶尔查资料写发言稿，对管理方式和组织运作无任何实质改变"},
|
||
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>",expertTeam:"数据分析师、BI工程师、效能度量专家",aiRole:"数据透明镜——AI效能面板→各团队采纳率+产出数据，管理从凭感觉到有数可依",collabMode:"AI作为嵌入式副驾驶：看数据+做判断",stars:"2",reasoning:"管理透明化起步：从\u201C凭感觉\u201D到\u201C有数可依\u201D，但数据需人解读、决策速度未变、流程未改"},
|
||
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>",expertTeam:"战略分析师、风险管理专家、AI治理顾问",aiRole:"决策加速器——多维洞察：效率趋势+风险预警+资源优化+绩效校准。决策从拍脑袋升级为选最优，响应速度×3",collabMode:"AI作为工作流智能体：AI提供选项，人在AI选项中做最优选择",stars:"3.5",reasoning:"组织决策升级：决策从\u201C拍脑袋\u201D到\u201C选最优\u201D→响应速度×3→资源错配减少→影响全组织资源配置"},
|
||
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>",expertTeam:"首席AI官(CAIO)、AI伦理委员会、战略场景建模师",aiRole:"AI战略伙伴——场景模拟→决策推演→主动组织建议。日常管理决策80%由AI驱动，管理层带宽释放到战略和外部",collabMode:"AI作为自主协作者：日常管理AI化，人定义方向+审核心决策",stars:"4.5",reasoning:"治理范式变革：日常管理决策80%AI驱动→管理层带宽释放到战略→组织从\u201C人治\u201D升级为\u201C人+AI共治\u201D"}
|
||
}
|
||
};
|
||
|
||
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';
|
||
|
||
|
||
function renderStars(count) {
|
||
var full = Math.floor(count);
|
||
var half = (count - full) >= 0.5;
|
||
var empty = 5 - full - (half ? 1 : 0);
|
||
var html = '';
|
||
for (var i = 0; i < full; i++) html += '<span class="star full">★</span>';
|
||
if (half) html += '<span class="star half">★</span>';
|
||
for (var i = 0; i < empty; i++) html += '<span class="star empty">☆</span>';
|
||
return html;
|
||
}
|
||
|
||
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 += '<div class="cell-stars">' + renderStars(parseFloat(cell.stars)) + '</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-stars-row">' +
|
||
'<span class="di-stars-label">提效预期</span>' +
|
||
'<span class="di-stars-visual">' + renderStars(parseFloat(data.stars)) + '</span>' +
|
||
'<span class="di-stars-num">' + data.stars + ' / 5</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 class="di-row expert-row"><span class="di-label">AI角色</span><div class="di-value">' + data.aiRole + '</div></div>' +
|
||
'<div class="di-row expert-row"><span class="di-label">协作模式</span><div class="di-value">' + data.collabMode + '</div></div>' +
|
||
'<div class="di-row expert-row"><span class="di-label">配套团队</span><div class="di-value">' + data.expertTeam + '</div></div>' +
|
||
'<div class="di-row reasoning-row"><span class="di-label">评分依据</span><div class="di-value" style="font-size:12px;color:var(--text-secondary);font-style:italic;">' + data.reasoning + '</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>
|