feat: OPC 社区运营公共服务平台 Demo v1.3
一人公司/超级个体产业社区公共服务基础设施 Demo，包含： - 18 个角色页面（运营商/OPC/企业/个人/学员/培训机构/服务机构/政府/审计/金融） - 暖橙活力主题 UI（渐变毛玻璃 + 暖色侧栏） - 五步运营闭环（选方向→育人才→建平台→立SOP→聚产业） - 华强北硬件供应链接入 - 蜂群式交付 + 产业集聚效应展示 - 需求文档（REQ-001~118 全覆盖） Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin
+174
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录 · OPC 公共服务平台 Demo</title>
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<style>
|
||||
.login-wrap { max-width: 1080px; margin: 48px auto; padding: 0 16px; }
|
||||
.login-head { text-align: center; margin-bottom: 28px; }
|
||||
.login-head h1 { font-size: 24px; }
|
||||
.login-head p { color: var(--text-2); font-size: 13px; margin-top: 6px; }
|
||||
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||||
@media (max-width: 800px) { .role-grid { grid-template-columns: repeat(2,1fr); } }
|
||||
@media (max-width: 520px) { .role-grid { grid-template-columns: 1fr; } }
|
||||
.role-card {
|
||||
background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 18px; cursor: pointer; transition: all .2s;
|
||||
box-shadow: 0 4px 24px rgba(120, 90, 50, 0.08);
|
||||
}
|
||||
.role-card:hover { border-color: var(--primary); box-shadow: 0 8px 32px rgba(249, 115, 22, 0.15); transform: translateY(-2px); }
|
||||
.role-card h3 { font-size: 15px; margin-bottom: 4px; }
|
||||
.role-card p { font-size: 12px; color: var(--text-2); }
|
||||
.role-card .go { font-size: 12px; color: var(--primary); margin-top: 10px; display: inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body data-page="login">
|
||||
<div class="login-wrap">
|
||||
<div class="login-head">
|
||||
<h1>OPC 公共服务平台 <span style="color:var(--primary)">Demo</span></h1>
|
||||
<p>一人公司 / 超级个体产业社区 · 选择角色进入对应工作台（演示环境，无需密码）</p>
|
||||
</div>
|
||||
<div class="role-grid" id="roleGrid"></div>
|
||||
<p class="footer">静态原型演示 · 角色权限参照 pmdocs/0-req-OPCSP.md §3</p>
|
||||
|
||||
<!-- 设计与使用说明 -->
|
||||
<div class="section" id="guide" style="text-align:left;margin-top:36px">
|
||||
<h2 style="font-size:20px;margin-bottom:16px">设计与使用说明 <span class="req">Demo v1.3 · REQ-001~118 全覆盖</span></h2>
|
||||
|
||||
<!-- 平台定位 -->
|
||||
<div class="card" style="margin-bottom:16px">
|
||||
<h3>平台定位</h3>
|
||||
<p>本 Demo 是 OPC 社区运营公共服务平台的可交互原型，验证产品结构、角色权限、业务流程、培训机构/认证管理、成果交易和政府绩效监管等核心能力。长期目标是形成"一个入口、一个身份、一个能力档案、一个订单池、一套交付标准、一套政府绩效台账"的产业公共服务基础设施。</p>
|
||||
<p class="muted" style="margin-top:8px">技术形态：纯静态 HTML + Mock 数据（assets/mock.json）+ localStorage 持久化，无后端依赖。数据通过 fetch 加载，须通过 HTTP 访问（不能 file:// 直开）。</p>
|
||||
</div>
|
||||
|
||||
<!-- 角色与入口 -->
|
||||
<div class="card" style="margin-bottom:16px">
|
||||
<h3>角色与入口 <span class="req">REQ-011~018 · 10 个角色</span></h3>
|
||||
<table>
|
||||
<tr><th>角色</th><th>首页</th><th>核心功能</th></tr>
|
||||
<tr><td>社区运营商</td><td>运营工作台</td><td>全业务运营、审核仲裁、质检规则、拨付确认</td></tr>
|
||||
<tr><td>OPC/一人公司</td><td>OPC 工作台</td><td>建档、能力认证、订单池接单、交付质检、收入结算、上架成果</td></tr>
|
||||
<tr><td>培训学员</td><td>培训认证</td><td>学员档案、培训履历、作品沉淀、申请入驻成为 OPC</td></tr>
|
||||
<tr><td>企业客户</td><td>企业工作台</td><td>发布需求、AI 诊断、小样签约、验收、争议、开票</td></tr>
|
||||
<tr><td>个人客户</td><td>个人工作台</td><td>同企业流程，轻量认证（实名+支付验证）</td></tr>
|
||||
<tr><td>培训机构/导师</td><td>机构管理</td><td>资质入驻、课程/实训/认证项目、证书颁发/吊销/复评、补贴绩效</td></tr>
|
||||
<tr><td>服务机构</td><td>企业服务中心</td><td>资质上架、服务包、机构工单办理、券核销、评价退出</td></tr>
|
||||
<tr><td>政府主管部门</td><td>政府驾驶舱</td><td>指标下钻、政策发布、财政拨付、整改跟踪、供需监测</td></tr>
|
||||
<tr><td>审计/评估机构</td><td>审计视图</td><td>授权范围内只读核查绩效、资金台账、抽样底稿、函证异议</td></tr>
|
||||
<tr><td>金融/园区/平台方</td><td>政策服务</td><td>资源券、信用贷、工位等资源产品管理和核销</td></tr>
|
||||
</table>
|
||||
<p class="muted" style="margin-top:8px">上方选择角色卡片即可进入对应工作台；角色写入 localStorage，各页面按角色动态渲染导航菜单和可见功能。</p>
|
||||
</div>
|
||||
|
||||
<!-- 核心业务流 -->
|
||||
<div class="card" style="margin-bottom:16px">
|
||||
<h3>核心业务流 <span class="req">REQ-027~048 · 全链路单据化</span></h3>
|
||||
<div class="steps" style="margin:8px 0 14px">
|
||||
<span class="step done">需求发布</span><span class="arrow">→</span>
|
||||
<span class="step done">订单生成</span><span class="arrow">→</span>
|
||||
<span class="step done">小样试做</span><span class="arrow">→</span>
|
||||
<span class="step done">签约</span><span class="arrow">→</span>
|
||||
<span class="step cur">任务拆解</span><span class="arrow">→</span>
|
||||
<span class="step">交付批次</span><span class="arrow">→</span>
|
||||
<span class="step">三级质检</span><span class="arrow">→</span>
|
||||
<span class="step">验收</span><span class="arrow">→</span>
|
||||
<span class="step">托管结算</span><span class="arrow">→</span>
|
||||
<span class="step">评价归档</span>
|
||||
</div>
|
||||
<table>
|
||||
<tr><th>业务域</th><th>核心页面</th><th>关键单据</th><th>对应 REQ</th></tr>
|
||||
<tr><td>订单交付</td><td>order.html</td><td>ORDER_ → TASK_ → DLV_ → ACPT_ → SETL_</td><td>REQ-027~048</td></tr>
|
||||
<tr><td>能力认证</td><td>opc.html / training.html</td><td>OPC_ → CERT_ → EVAL_</td><td>REQ-019~026, 081~086</td></tr>
|
||||
<tr><td>培训管理</td><td>institution.html</td><td>TRN_ → CRS_ → ACR_ → CERT_</td><td>REQ-099~110</td></tr>
|
||||
<tr><td>政策资金</td><td>policy.html</td><td>POLICY_ → APLY_ → VCH_ → FUND_</td><td>REQ-071~080</td></tr>
|
||||
<tr><td>供需对接</td><td>leads.html</td><td>ACT_ → LEAD_ → ORDER_</td><td>REQ-095~098</td></tr>
|
||||
<tr><td>成果交易</td><td>market.html</td><td>WORK_ → ORDER_ → LICENSE_</td><td>REQ-111~115</td></tr>
|
||||
<tr><td>政府监管</td><td>government.html</td><td>FUND_ → VCH_ → 绩效台账</td><td>REQ-087~094</td></tr>
|
||||
<tr><td>审计核查</td><td>audit.html</td><td>SMP_ · 函证 · 异议</td><td>REQ-093</td></tr>
|
||||
<tr><td>AI 匹配</td><td>profile.html</td><td>主题画像 → score/evidence/confidence</td><td>REQ-116/117</td></tr>
|
||||
<tr><td>展览大屏</td><td>showcase.html</td><td>脱敏汇总 KPI</td><td>REQ-118</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 使用指南 -->
|
||||
<div class="card" style="margin-bottom:16px">
|
||||
<h3>使用指南</h3>
|
||||
<ol style="padding-left:20px">
|
||||
<li><b>访问入口</b>：在上方选择角色卡片进入对应工作台（演示环境无需密码）。</li>
|
||||
<li><b>切换角色</b>：进入工作台后，右上角点击「退出」可回到本页重新选择角色。</li>
|
||||
<li><b>推荐体验路径</b>：
|
||||
<ul style="margin:6px 0">
|
||||
<li>企业客户 → 发布需求（AI 诊断）→ 小样签约 → 订单协同 → 三级质检 → 验收</li>
|
||||
<li>OPC → 能力档案 → 订单池报价/领取 → 提交交付物 → 收入结算 → 上架成果到橙果商城</li>
|
||||
<li>培训机构 → 发布课程 → 颁发证书 → 吊销/复评 → 查验页演示</li>
|
||||
<li>政府 → 指标下钻 → 拨付确认 → 整改跟踪 → 发布政策</li>
|
||||
<li>运营商 → 待办审核队列 → 通过/驳回/仲裁 → 跨域数据联动演示</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>数据持久化</b>：交互产生的变更（新订单、新证书、状态流转）自动保存到 localStorage，刷新不丢失；点击右上角「重置数据」可恢复 mock.json 初始状态。</li>
|
||||
<li><b>跨页联动</b>：运营商工作台通过审核后，对应课程/成果会同步到机构管理页和橙果商城——演示"一个数据底座"。</li>
|
||||
<li><b>打印导出</b>：政府驾驶舱「导出季度报告」按钮触发浏览器打印（已配 @media print 样式）。</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- 统一编码与文档 -->
|
||||
<div class="card">
|
||||
<h3>统一编码与配套文档</h3>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<p><b>实体编码规范</b>（附 2）</p>
|
||||
<ul style="font-size:13px">
|
||||
<li>主体/机构：5 位顺序号（OPC_00017、TRN_00001）</li>
|
||||
<li>业务单据：日期+2 位序号（ORDER_2026091201）</li>
|
||||
<li>证书：年份+4 位序号（CERT_20260042）</li>
|
||||
<li>编号不可改、不复用，外键用业务编号关联</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>配套文档</b></p>
|
||||
<ul style="font-size:13px">
|
||||
<li><a href="../pmdocs/0-req-OPCSP.html">需求与目标文档 v1.3（汇报版 HTML）</a></li>
|
||||
<li><a href="README.md">Demo README（角色—菜单矩阵）</a></li>
|
||||
<li>需求文档：pmdocs/0-req-OPCSP.md（118 条 REQ）</li>
|
||||
<li>Mock 数据：assets/mock.json（14 个业务域）</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/app.js"></script>
|
||||
<script>
|
||||
const DESCS = {
|
||||
operator: '全业务运营、项目管理、质检、结算、机构准入',
|
||||
opc: '建档、学习、认证、接单、交付、购买外包服务、上架成果',
|
||||
learner: '学习实训、沉淀履历与作品、申请入驻成为 OPC',
|
||||
enterprise: '发布需求、选方案、验收、评价',
|
||||
personal: '发布需求、下单、验收、评价（轻量认证）',
|
||||
trainer: '机构入驻、课程/实训/认证项目发布、证书颁发',
|
||||
service: '财税、法务、知识产权、融资等服务上架',
|
||||
gov: '绩效驾驶舱、政策发布、供需对接成效、审计监督',
|
||||
auditor: '授权台账只读核查、抽样底稿、函证与异议登记',
|
||||
finance: '授信、空间、渠道和资源券',
|
||||
};
|
||||
const grid = document.getElementById('roleGrid');
|
||||
grid.innerHTML = Object.entries(ROLES).map(([k, r]) => `
|
||||
<div class="role-card" onclick="loginAs('${k}')">
|
||||
<h3>${r.name}</h3>
|
||||
<p>${DESCS[k] || ''}</p>
|
||||
<span class="go">以该角色进入 →</span>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
function loginAs(role) {
|
||||
localStorage.setItem('opc_role', role);
|
||||
localStorage.setItem('opc_user', '演示账号');
|
||||
location.href = ROLES[role].home;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user