@givolt/i3-composer-agent 2.2.3 → 2.3.1

package/skills/i3-ui-prototype/assets/templates/catalog.json

@@ -0,0 +1,148 @@
+{
+  "schemaVersion": 2,
+  "templates": [
+    {
+      "id": "enterprise-admin",
+      "name": "企业管理后台",
+      "brand": "i3-Composer",
+      "version": "0.1.1",
+      "availability": "available",
+      "reviewStatus": "pending-review",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "source": "EASEL v0.14 / Antdv Next HTML 审查版",
+      "bestFor": [
+        "企业管理",
+        "审批台账",
+        "复杂表单及多模块业务"
+      ],
+      "preview": "enterprise-admin/index.html#/workbench",
+      "fixed": [
+        "既有设计 token",
+        "导航和控件规范",
+        "权限及状态语义"
+      ],
+      "adjustable": [
+        "业务模块",
+        "业务字段",
+        "按需求适配的流程"
+      ],
+      "manifest": "enterprise-admin/manifest.json"
+    },
+    {
+      "id": "ai-workbench",
+      "name": "AI 工作台",
+      "version": null,
+      "availability": "planned",
+      "source": "https://github.com/TencentCloud/Octop",
+      "bestFor": [
+        "Agent 会话",
+        "执行过程",
+        "工具及产物工作区"
+      ]
+    },
+    {
+      "id": "digital-twin",
+      "name": "数字孪生大屏",
+      "version": null,
+      "availability": "planned",
+      "bestFor": [
+        "场景对象",
+        "指标告警",
+        "联动下钻"
+      ]
+    },
+    {
+      "id": "mobile-app",
+      "name": "移动端应用",
+      "version": null,
+      "availability": "planned",
+      "bestFor": [
+        "移动业务",
+        "待办",
+        "触控表单"
+      ]
+    }
+  ],
+  "legacyTemplates": [
+    {
+      "id": "classic-admin",
+      "name": "企业管理后台",
+      "version": "1.0.0",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "bestFor": [
+        "申请审批",
+        "台账",
+        "组织管理"
+      ],
+      "preview": "common/gallery.html?template=classic-admin",
+      "license": "MIT",
+      "fixed": [
+        "导航体系",
+        "状态语义",
+        "字号及间距尺度"
+      ],
+      "adjustable": [
+        "业务字段",
+        "表单分组",
+        "模板尺度内的信息密度"
+      ],
+      "availability": "legacy",
+      "manifest": "classic-admin/manifest.json"
+    },
+    {
+      "id": "modern-workspace",
+      "name": "现代工作空间",
+      "version": "1.0.0",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "bestFor": [
+        "项目协作",
+        "任务",
+        "内容管理"
+      ],
+      "preview": "common/gallery.html?template=modern-workspace",
+      "license": "MIT",
+      "fixed": [
+        "导航体系",
+        "状态语义",
+        "字号及间距尺度"
+      ],
+      "adjustable": [
+        "业务字段",
+        "表单分组",
+        "模板尺度内的信息密度"
+      ],
+      "availability": "legacy",
+      "manifest": "modern-workspace/manifest.json"
+    },
+    {
+      "id": "data-operations",
+      "name": "数据运营控制台",
+      "version": "1.0.0",
+      "artifactKind": "html-review",
+      "runtime": "HTML/CSS/JavaScript",
+      "bestFor": [
+        "指标与明细",
+        "异常处置",
+        "运营台账"
+      ],
+      "preview": "common/gallery.html?template=data-operations",
+      "license": "MIT",
+      "fixed": [
+        "导航体系",
+        "状态语义",
+        "字号及间距尺度"
+      ],
+      "adjustable": [
+        "业务字段",
+        "表单分组",
+        "模板尺度内的信息密度"
+      ],
+      "availability": "legacy",
+      "manifest": "data-operations/manifest.json"
+    }
+  ],
+  "defaultTemplate": "enterprise-admin"
+}

package/skills/i3-ui-prototype/assets/templates/classic-admin/manifest.json

@@ -0,0 +1,9 @@
+{
+  "schemaVersion": 1,
+  "adapter": "legacy-html",
+  "preset": "classic-admin/preset.json",
+  "resources": {
+    "common": "common"
+  },
+  "defaultTitle": "立项申请"
+}

package/skills/i3-ui-prototype/assets/templates/classic-admin/preset.json

@@ -0,0 +1,6 @@
+{
+  "layout": "admin",
+  "primitive": { "blue": "#2563eb", "slate": "#172b4d", "spacing": [4, 8, 12, 16, 24, 32] },
+  "semantic": { "color-primary": "#2563eb", "color-text": "#172b4d", "color-muted": "#53657f", "color-background": "#f4f6fa", "color-surface": "#ffffff", "color-border": "#dce3ee", "color-sidebar": "#ffffff", "color-sidebar-text": "#172b4d", "color-success": "#166534", "color-warning": "#92400e", "color-danger": "#b91c1c", "space-page": "32px", "font-body": "system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif" },
+  "component": { "radius-panel": "8px", "control-height": "40px", "table-cell-space": "16px", "sidebar-width": "220px" }
+}

package/skills/i3-ui-prototype/assets/templates/common/app/app.mjs

@@ -0,0 +1,89 @@
+import { statusLabels, validateApplication, canPerform, transition } from './domain.mjs';
+const $ = selector => document.querySelector(selector);
+const escape = value => String(value ?? '').replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
+const badge = value => `<span class="badge ${value}">${statusLabels[value]}</span>`;
+const money = value => new Intl.NumberFormat('zh-CN').format(value);
+const [config, seeds] = await Promise.all([fetch('./config.json').then(r => r.json()), fetch('../mocks/applications.json').then(r => r.json())]);
+const previewTemplate = new URLSearchParams(location.search).get('template');
+if (config.preview && ['classic-admin', 'modern-workspace', 'data-operations'].includes(previewTemplate)) {
+  const preset = await fetch(`../../${previewTemplate}/preset.json`).then(r => r.json());
+  config.layout = preset.layout;
+  config.templateName = { 'classic-admin': '企业管理后台', 'modern-workspace': '现代工作空间', 'data-operations': '数据运营控制台' }[previewTemplate];
+  config.id = `preview-${previewTemplate}`;
+  for (const [key, value] of Object.entries({ ...preset.semantic, ...preset.component })) document.documentElement.style.setProperty(`--${key}`, value);
+}
+document.body.dataset.layout = config.layout;
+document.title = config.title;
+$('#template-name').textContent = config.templateName;
+const storageKey = `i3-prototype-${config.id}`;
+let records = seeds;
+try { const stored = JSON.parse(localStorage.getItem(storageKey)); if (Array.isArray(stored)) records = stored; } catch {}
+let role = 'requester', scene = 'normal', filter = '', reviewing = null;
+function persist() { try { localStorage.setItem(storageKey, JSON.stringify(records)); } catch { notify('浏览器未允许保存，当前演示仍可继续'); } }
+function notify(message) { $('#feedback').textContent = message; }
+function navigate(route) { if (location.hash === route) render(); else location.hash = route; }
+function pageTitle(title, description, action = '') { return `<div class="page-heading"><div><div class="eyebrow">申请与审批</div><h1>${title}</h1><p>${description}</p></div>${action}</div>`; }
+function metrics() { const visible = records.filter(r => role !== 'requester' || r.applicant === '李思'); return `<section class="metrics" aria-label="申请概览">${[['全部申请', visible.length], ['待审批', visible.filter(r => r.status === 'submitted').length], ['已通过', visible.filter(r => r.status === 'approved').length], ['草稿', visible.filter(r => r.status === 'draft').length]].map(([label, count]) => `<div><span>${label}</span><strong>${count}</strong></div>`).join('')}</section>`; }
+function listPage() {
+  const visible = scene === 'empty' ? [] : records.filter(record => (role !== 'requester' || record.applicant === '李思') && (record.title + record.department).includes(filter));
+  $('#page').innerHTML = pageTitle(escape(config.title), '集中查看申请进度，按角色完成提交与审批。', role === 'requester' ? '<a class="button primary" href="#/new">新建申请</a>' : '') + metrics() + `<section class="panel"><div class="panel-toolbar"><h2>申请台账 <span class="count">${visible.length}</span></h2><form id="filter-form"><label class="sr-only" for="filter">搜索项目或部门</label><input id="filter" placeholder="搜索项目或部门" value="${escape(filter)}"><button>查询</button><button type="button" id="clear-filter">重置</button></form></div>${scene === 'loading' ? '<div class="empty" role="status" aria-busy="true"><h3>正在加载申请</h3><p>请稍候，申请列表正在准备。</p></div>' : scene === 'failed' ? '<div class="empty" role="alert"><h3>暂时无法加载</h3><p>已保留当前筛选条件，请重试。</p><button id="retry">重新加载</button></div>' : visible.length ? `<div class="table-scroll"><table><thead><tr><th scope="col">项目名称</th><th scope="col">申请部门</th><th scope="col">申请金额</th><th scope="col">状态</th><th scope="col">申请人</th><th scope="col">操作</th></tr></thead><tbody>${visible.map(r => `<tr><td><a class="record-title" href="#/detail/${r.id}">${escape(r.title)}</a><small>${r.id} · ${r.date}</small></td><td>${escape(r.department)}</td><td class="numeric">¥ ${money(r.amount)}</td><td>${badge(r.status)}</td><td>${escape(r.applicant)}</td><td><a href="#/detail/${r.id}">查看详情</a></td></tr>`).join('')}</tbody></table></div>` : '<div class="empty"><h3>暂无申请</h3><p>调整筛选条件，或新建一份申请。</p></div>'}<div class="panel-foot">共 ${visible.length} 条记录 · 当前为本地演示</div></section>`;
+  $('#filter-form').onsubmit = event => { event.preventDefault(); filter = $('#filter').value.trim(); render(); };
+  $('#clear-filter').onclick = () => { filter = ''; render(); };
+  if ($('#retry')) $('#retry').onclick = () => { scene = 'normal'; $('#scene').value = scene; render(); };
+}
+function fieldErrors(errors) { return Object.entries(errors).map(([key, value]) => `<li><a href="#${key}">${value}</a></li>`).join(''); }
+function formPage(record = null) {
+  if (role !== 'requester' || (record && !canPerform(record, role, 'save'))) { $('#page').innerHTML = pageTitle('当前角色无法编辑', '切换到申请人查看可操作范围。') + '<a class="button" href="#/list">返回台账</a>'; return; }
+  const value = record || { title: '', department: '', amount: '', description: '' };
+  $('#page').innerHTML = pageTitle(record ? '编辑申请' : '新建申请', '填写基本信息与申请说明，保存草稿或提交审批。') + `<section class="panel form-panel"><form id="application-form" novalidate><div id="error-summary" tabindex="-1" role="alert" hidden><h2>请检查以下内容</h2><ul></ul></div><h2>基本信息</h2><div class="fields"><div class="field wide"><label for="title">项目名称 <span aria-hidden="true">*</span></label><input id="title" name="title" required maxlength="100" value="${escape(value.title)}"><p class="field-error" id="title-error"></p></div><div class="field"><label for="department">申请部门 <span aria-hidden="true">*</span></label><select id="department" name="department" required><option value="">请选择部门</option>${['运营中心', '产品中心', '技术中心'].map(d => `<option ${value.department === d ? 'selected' : ''}>${d}</option>`).join('')}</select><p class="field-error" id="department-error"></p></div><div class="field"><label for="amount">申请金额（元） <span aria-hidden="true">*</span></label><input id="amount" name="amount" inputmode="decimal" type="number" min="1" required value="${escape(value.amount)}"><p class="field-error" id="amount-error"></p></div><div class="field wide"><label for="description">申请说明 <span aria-hidden="true">*</span></label><textarea id="description" name="description" rows="5" required>${escape(value.description)}</textarea><p class="field-error" id="description-error"></p></div></div><div class="form-actions"><a class="button" href="#/list">取消</a><button name="action" value="save">保存草稿</button><button class="primary" name="action" value="submit">提交审批</button></div></form></section>`;
+  $('#application-form').onsubmit = event => {
+    event.preventDefault();
+    const data = Object.fromEntries(new FormData(event.currentTarget));
+    data.amount = Number(data.amount);
+    const errors = validateApplication(data);
+    for (const field of ['title', 'department', 'amount', 'description']) {
+      $(`#${field}-error`).textContent = errors[field] || '';
+      $(`#${field}`).setAttribute('aria-invalid', String(Boolean(errors[field])));
+      $(`#${field}`).setAttribute('aria-describedby', `${field}-error`);
+    }
+    const summary = $('#error-summary');
+    summary.hidden = !Object.keys(errors).length;
+    summary.querySelector('ul').innerHTML = fieldErrors(errors);
+    if (!summary.hidden) { summary.focus(); summary.querySelectorAll('a').forEach(link => link.onclick = event => { event.preventDefault(); $(link.getAttribute('href')).focus(); }); return; }
+    if (scene === 'submit-failed') { notify('提交失败，已保留填写内容，请稍后重试'); return; }
+    const draft = { ...(record || { id: `A-${String(records.length + 1).padStart(3, '0')}`, applicant: '李思', status: 'draft', date: '2026-10-14', history: [] }), ...data };
+    const result = transition(draft, role, event.submitter?.value || 'save');
+    records = record ? records.map(r => r.id === record.id ? result : r) : [...records, result];
+    persist(); navigate(`#/detail/${result.id}`); notify(result.status === 'submitted' ? '申请已提交，等待审批' : '草稿已保存');
+  };
+}
+function detailPage(id) {
+  const record = records.find(r => r.id === id && (role !== 'requester' || r.applicant === '李思'));
+  if (!record) { $('#page').innerHTML = pageTitle('未找到申请', '记录不存在或当前演示角色无法查看。') + '<a class="button" href="#/list">返回台账</a>'; return; }
+  $('#page').innerHTML = pageTitle(escape(record.title), `${record.id} · ${record.date}`, '<a class="button" href="#/list">返回台账</a>') + `<div class="detail-grid"><section class="panel detail-panel"><div class="panel-title"><h2>申请信息</h2>${badge(record.status)}</div><dl><div><dt>申请部门</dt><dd>${escape(record.department)}</dd></div><div><dt>申请金额</dt><dd>¥ ${money(record.amount)}</dd></div><div><dt>申请人</dt><dd>${escape(record.applicant)}</dd></div><div class="wide"><dt>申请说明</dt><dd class="description">${escape(record.description)}</dd></div></dl><div class="form-actions">${canPerform(record, role, 'save') ? '<button id="edit">编辑申请</button>' : ''}${canPerform(record, role, 'submit') ? '<button class="primary" id="submit-existing">提交审批</button>' : ''}${canPerform(record, role, 'approve') ? '<button id="reject" class="danger">退回申请</button><button id="approve" class="primary">审批通过</button>' : ''}${role === 'viewer' ? '<span class="muted">当前角色仅可查看</span>' : ''}</div></section><section class="panel history-panel"><h2>审批记录</h2>${record.history.length ? `<ol class="timeline">${record.history.map(item => `<li><strong>${item.action}</strong><span>${escape(item.actor)}</span><p>${escape(item.note || '已完成操作')}</p></li>`).join('')}</ol>` : '<p class="muted">尚未提交审批</p>'}</section></div>`;
+  if ($('#edit')) $('#edit').onclick = () => formPage(record);
+  if ($('#submit-existing')) $('#submit-existing').onclick = () => {
+    if (scene === 'submit-failed') { notify('提交失败，申请内容已保留'); return; }
+    records = records.map(r => r.id === id ? transition(r, role, 'submit') : r); persist(); render(); notify('申请已提交，等待审批');
+  };
+  for (const action of ['approve', 'reject']) if ($(`#${action}`)) $(`#${action}`).onclick = () => {
+    reviewing = { id, action }; $('#review-title').textContent = action === 'approve' ? '审批通过' : '退回申请'; $('#review-description').textContent = record.title; $('#review-note').value = ''; $('#review-error').textContent = ''; $('#review-dialog').showModal(); $('#review-note').focus();
+  };
+}
+function render() {
+  const route = location.hash || '#/list';
+  $('#breadcrumb').textContent = route.startsWith('#/detail') ? '申请详情' : route === '#/new' ? '新建申请' : '申请台账';
+  document.querySelectorAll('.nav-link').forEach(link => { const active = link.getAttribute('href') === (route.startsWith('#/detail') ? '#/list' : route); link.classList.toggle('active', active); if (active) link.setAttribute('aria-current', 'page'); else link.removeAttribute('aria-current'); });
+  if (route === '#/new') formPage(); else if (route.startsWith('#/detail/')) detailPage(route.split('/')[2]); else listPage();
+}
+$('#role').onchange = event => { role = event.target.value; render(); };
+$('#scene').onchange = event => { scene = event.target.value; if (!$('#application-form')) render(); };
+$('#reset').onclick = () => { records = structuredClone(seeds); filter = ''; scene = 'normal'; $('#scene').value = scene; persist(); navigate('#/list'); notify('示例数据已恢复'); };
+$('#close-review').onclick = () => $('#review-dialog').close();
+$('#review-form').onsubmit = event => {
+  event.preventDefault();
+  try { records = records.map(r => r.id === reviewing.id ? transition(r, role, reviewing.action, $('#review-note').value) : r); persist(); $('#review-dialog').close(); render(); notify(reviewing.action === 'approve' ? '申请已通过' : '申请已退回'); }
+  catch (error) { $('#review-error').textContent = error.message; $('#review-note').focus(); }
+};
+window.addEventListener('hashchange', render);
+render();

package/skills/i3-ui-prototype/assets/templates/common/app/config.json

@@ -0,0 +1 @@
+{ "id": "template-preview", "title": "立项申请", "templateName": "企业管理后台", "layout": "admin", "preview": true }

package/skills/i3-ui-prototype/assets/templates/common/app/domain.mjs

@@ -0,0 +1,20 @@
+export const statusLabels = { draft: '草稿', submitted: '待审批', approved: '已通过', rejected: '已退回' };
+export function validateApplication(value) {
+  const errors = {};
+  if (!value.title?.trim()) errors.title = '请输入项目名称';
+  if (!value.department?.trim()) errors.department = '请选择申请部门';
+  if (!Number.isFinite(Number(value.amount)) || Number(value.amount) <= 0) errors.amount = '申请金额必须大于零';
+  if (!value.description?.trim()) errors.description = '请填写申请说明';
+  return errors;
+}
+export function canPerform(record, role, action) {
+  if (['approve', 'reject'].includes(action)) return role === 'approver' && record.status === 'submitted';
+  return ['save', 'submit'].includes(action) && role === 'requester' && record.applicant === '李思' && ['draft', 'rejected'].includes(record.status);
+}
+export function transition(record, role, action, note = '') {
+  if (!canPerform(record, role, action)) throw new Error('当前角色或申请状态不允许此操作');
+  if (action === 'submit' && Object.keys(validateApplication(record)).length) throw new Error('申请信息校验未通过');
+  if (action === 'reject' && !note.trim()) throw new Error('请填写退回原因');
+  const next = { save: 'draft', submit: 'submitted', approve: 'approved', reject: 'rejected' }[action];
+  return { ...record, status: next, history: [...record.history, { action: { save: '保存草稿', submit: '提交申请', approve: '审批通过', reject: '退回申请' }[action], actor: role === 'requester' ? '李思' : '审批人', note }] };
+}

package/skills/i3-ui-prototype/assets/templates/common/app/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>立项申请</title><link rel="icon" href="data:,"><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./styles.css"></head>
+<body>
+  <a class="skip-link" href="#main">跳到主要内容</a>
+  <div class="shell">
+    <aside class="sidebar"><a class="brand" href="#/list"><span class="brand-mark" aria-hidden="true">工</span><span>业务工作台<small id="template-name">申请与审批</small></span></a><nav aria-label="工作台导航"><a class="nav-link" href="#/list">申请台账</a><a class="nav-link" href="#/new">新建申请</a></nav><div class="sidebar-note">交互原型<br>本地演示数据</div></aside>
+    <div class="workspace"><header class="topbar"><span class="breadcrumb">工作台 / <span id="breadcrumb">申请台账</span></span><label class="role-control">演示角色 <select id="role"><option value="requester">申请人 · 李思</option><option value="approver">审批人</option><option value="viewer">只读人员</option></select></label></header>
+      <main id="main" tabindex="-1"><div id="page"></div></main>
+      <footer><span>交互演示 · 数据仅保存在本机</span><label>演示情景 <select id="scene"><option value="normal">正常数据</option><option value="empty">空列表</option><option value="loading">加载中</option><option value="failed">加载失败</option><option value="submit-failed">提交失败</option></select></label><button class="text-button" id="reset">恢复示例</button></footer>
+    </div>
+  </div>
+  <div id="feedback" role="status" aria-live="polite"></div>
+  <dialog id="review-dialog" aria-labelledby="review-title"><form id="review-form"><h2 id="review-title">审批申请</h2><p id="review-description"></p><label for="review-note">审批意见</label><textarea id="review-note" rows="4"></textarea><p id="review-error" class="field-error" role="alert"></p><div class="form-actions"><button type="button" id="close-review">取消</button><button type="submit" class="primary">确认审批</button></div></form></dialog>
+  <script type="module" src="./app.mjs"></script>
+</body>
+</html>

package/skills/i3-ui-prototype/assets/templates/common/app/serve.cjs

@@ -0,0 +1,16 @@
+'use strict';
+const http = require('node:http');
+const fs = require('node:fs');
+const path = require('node:path');
+const root = path.resolve(__dirname, '..');
+const types = { '.html': 'text/html', '.mjs': 'text/javascript', '.css': 'text/css', '.json': 'application/json' };
+const server = http.createServer((req, res) => {
+  let relative;
+  try { relative = decodeURIComponent(new URL(req.url, 'http://localhost').pathname); } catch { res.writeHead(400).end(); return; }
+  if (relative === '/') { res.writeHead(302, { Location: '/app/index.html' }).end(); return; }
+  const file = path.resolve(root, '.' + relative);
+  if (!file.startsWith(root + path.sep) || !fs.existsSync(file) || !fs.statSync(file).isFile() || !fs.realpathSync(file).startsWith(fs.realpathSync(root) + path.sep)) { res.writeHead(404).end(); return; }
+  res.writeHead(200, { 'Content-Type': (types[path.extname(file)] || 'application/octet-stream') + '; charset=utf-8', 'Cache-Control': 'no-store' });
+  fs.createReadStream(file).pipe(res);
+});
+server.listen(Number(process.argv[2] || 0), '127.0.0.1', () => process.stdout.write(`原型预览：http://127.0.0.1:${server.address().port}/\n`));