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
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OPC橙果商城 · OPC 公共服务平台 Demo</title>
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
</head>
|
||||
<body data-page="market">
|
||||
<header class="topnav" id="topnav"></header>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-title">OPC橙果商城</div>
|
||||
<div class="page-sub">OPC 上架可复用成果，客户直接购买授权 · 标准化授权与版权管理（REQ-113~115）
|
||||
<span style="float:right" id="mk-actions"></span>
|
||||
</div>
|
||||
|
||||
<!-- REQ-113 成果商品 -->
|
||||
<div class="grid grid-4" id="mk-grid"></div>
|
||||
|
||||
<!-- 我的购买（买方角色） -->
|
||||
<div class="section">
|
||||
<h2>我的购买 <span class="req">REQ-115 · 授权书随单生成</span></h2>
|
||||
<div class="card"><table id="mk-orders"></table></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="notice">REQ-114：成果须经运营商审核并明示授权类型（个人授权/企业授权/买断）与版权归属；交付含版权来源记录，超范围使用或二次销售进入争议仲裁（REQ-060）。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">OPC 公共服务平台 Demo · OPC橙果商城</div>
|
||||
<script src="assets/app.js"></script>
|
||||
<script src="assets/store.js"></script>
|
||||
<script>
|
||||
let workSeq = 61;
|
||||
|
||||
function renderPage(DB) {
|
||||
const M = DB.market;
|
||||
const role = currentRole();
|
||||
const canSell = ['opc', 'operator'].includes(role);
|
||||
const canBuy = ['opc', 'enterprise', 'personal', 'learner'].includes(role);
|
||||
|
||||
document.getElementById('mk-actions').innerHTML =
|
||||
(canSell ? `<button class="btn sm" onclick="sellWork()">＋ 上架成果</button>` : '');
|
||||
|
||||
document.getElementById('mk-grid').innerHTML = M.items.map(w => `
|
||||
<div class="card">
|
||||
<h3>${w.name}</h3>
|
||||
<div class="sub">${w.code} · ${w.cat}</div>
|
||||
<p class="muted">出品 ${w.seller} · 销量 ${w.sales} · ★${w.rating}</p>
|
||||
<div class="num" style="font-size:18px">${w.price}</div>
|
||||
<p style="margin:6px 0">${B(w.status)}</p>
|
||||
<button class="btn sm" onclick="detail('${w.code}')">查看详情</button>
|
||||
${canBuy && w.action === 'buy' ? `<button class="btn sm ghost" onclick="buyWork('${w.code}')">直接购买</button>` : ''}
|
||||
${role === 'operator' && w.action === 'audit' ? `<button class="btn sm ghost" onclick="auditWork('${w.code}')">审核</button>` : ''}
|
||||
</div>`).join('');
|
||||
|
||||
document.getElementById('mk-orders').innerHTML =
|
||||
`<tr><th>订单号</th><th>成果</th><th>授权类型</th><th>金额</th><th>状态</th></tr>` +
|
||||
M.purchases.map(p => `<tr><td>${p.order}</td><td>${p.item}</td><td>${p.license}</td><td>${p.amount}</td><td>${B(p.status)} <button class="btn sm ghost" onclick="toast('授权书 LICENSE_${p.order.slice(6)}.pdf 已下载（演示）')">授权书</button></td></tr>`).join('');
|
||||
}
|
||||
|
||||
function detail(code) {
|
||||
const w = DB.market.items.find(x => x.code === code);
|
||||
openModal({
|
||||
title: w.name,
|
||||
body: `<table>
|
||||
<tr><th>成果编码</th><td>${w.code}</td></tr>
|
||||
<tr><th>出品方</th><td>${w.seller}</td></tr>
|
||||
<tr><th>授权类型</th><td>${w.licenses.map(l => `${l[0]} ${l[1]}`).join(' · ')}</td></tr>
|
||||
<tr><th>版权归属</th><td>著作权归出品 OPC 所有；按授权类型授予使用权，买断转移全部财产权</td></tr>
|
||||
<tr><th>来源记录</th><td><span class="badge ok">素材来源已备案 · 无侵权风险</span></td></tr>
|
||||
<tr><th>交付内容</th><td>源文件 + 授权书 + 使用说明</td></tr>
|
||||
</table>`,
|
||||
actions: [
|
||||
{ label: '关闭', cls: 'ghost' },
|
||||
{ label: '购买', onClick: m => { m.remove(); buyWork(code); } },
|
||||
],
|
||||
});
|
||||
}
|
||||
function buyWork(code) {
|
||||
const w = DB.market.items.find(x => x.code === code);
|
||||
openModal({
|
||||
title: '购买成果 · ' + w.name,
|
||||
body: `
|
||||
<div class="field"><label>授权类型</label><select id="bw-l">${w.licenses.map(l => `<option>${l[0]}（${l[1]}）</option>`).join('')}</select></div>
|
||||
<div class="checks"><label><input type="checkbox" id="bw-a" checked> 同意授权协议（授权范围、禁止事项、违约责任）</label></div>
|
||||
<p class="muted">支付经第三方通道完成，授权书随订单自动生成（REQ-114）。</p>`,
|
||||
actions: [
|
||||
{ label: '取消', cls: 'ghost' },
|
||||
{ label: '支付并下单', onClick: m => {
|
||||
if (!document.getElementById('bw-a').checked) { toast('请先同意授权协议', 'warn'); return; }
|
||||
m.remove();
|
||||
const lic = document.getElementById('bw-l').value.split('（')[0];
|
||||
const order = 'ORDER_2026091401';
|
||||
DB.market.purchases.unshift({ order, item: `${w.code} ${w.name}`, license: lic, amount: w.licenses.find(l => l[0] === lic)[1], status: ['已交付 · 授权书已生成', 'ok'] });
|
||||
w.sales++;
|
||||
renderPage(DB);
|
||||
toast(`购买成功：订单 ${order} 已生成，授权书与源文件已交付`);
|
||||
} },
|
||||
],
|
||||
});
|
||||
}
|
||||
function sellWork() {
|
||||
openModal({
|
||||
title: '上架成果（OPC 角色 · REQ-113）',
|
||||
body: `
|
||||
<div class="field"><label>成果名称</label><input id="sw-n" placeholder="如：双 11 Banner 模板包"></div>
|
||||
<div class="field-row">
|
||||
<div class="field"><label>类目</label><select><option>电商视觉模板</option><option>素材包</option><option>AI 漫剧</option><option>企业智能体</option></select></div>
|
||||
<div class="field"><label>个人授权价</label><input placeholder="¥"></div>
|
||||
</div>
|
||||
<div class="checks"><label><input type="checkbox" checked> 声明原创或已获完整授权，版权来源记录随件提交（REQ-114）</label></div>`,
|
||||
actions: [
|
||||
{ label: '取消', cls: 'ghost' },
|
||||
{ label: '提交审核', onClick: m => {
|
||||
const n = document.getElementById('sw-n').value.trim();
|
||||
if (!n) { toast('请填写成果名称', 'warn'); return; }
|
||||
m.remove();
|
||||
DB.market.items.push({ code: 'WORK_00' + workSeq++, name: n, seller: 'OPC_00017 张设计', cat: '电商视觉模板', price: '待定价', licenses: [['个人授权', '待定价']], sales: 0, rating: '—', status: ['审核中', 'info'], action: 'audit' });
|
||||
renderPage(DB);
|
||||
toast('成果已提交运营商审核，审核通过后自动上架并公示授权类型');
|
||||
} },
|
||||
],
|
||||
});
|
||||
}
|
||||
function auditWork(code) {
|
||||
const w = DB.market.items.find(x => x.code === code);
|
||||
confirmDlg('上架审核', `审核「${w.name}」：原创声明 ✓ 版权来源记录 ✓ 授权类型明示 ✓。确认通过上架？`, '通过上架', () => {
|
||||
w.status = ['已上架', 'ok']; w.action = 'buy';
|
||||
renderPage(DB);
|
||||
toast('审核通过，成果已上架');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user