@givolt/i3-composer-agent 2.2.3 → 2.3.0

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

@@ -0,0 +1,670 @@
+* {
+  box-sizing:border-box
+}
+body {
+  margin:0;
+  background:var(--color-background);
+  color:var(--color-text);
+  font-family:var(--font-body);
+  font-size:14px;
+  line-height:1.6
+}
+a {
+  color:var(--color-primary);
+  text-decoration:none
+}
+a:hover {
+  text-decoration:underline
+}
+button,input,select,textarea {
+  font:inherit
+}
+button,.button {
+  display:inline-flex;
+  justify-content:center;
+  align-items:center;
+  min-height:var(--control-height);
+  padding:7px 16px;
+  border:1px solid var(--color-border);
+  border-radius:5px;
+  background:var(--color-surface);
+  color:var(--color-text);
+  cursor:pointer;
+  white-space:nowrap
+}
+.primary {
+  background:var(--color-primary);
+  border-color:var(--color-primary);
+  color:white
+}
+.danger {
+  color:var(--color-danger)
+}
+button:hover,.button:hover {
+  filter:brightness(.96);
+  text-decoration:none
+}
+button:disabled {
+  opacity:.5;
+  cursor:not-allowed
+}
+:focus-visible {
+  outline:3px solid var(--color-primary);
+  outline-offset:3px
+}
+input,select,textarea {
+  min-height:var(--control-height);
+  border:1px solid var(--color-border);
+  border-radius:5px;
+  background:var(--color-surface);
+  padding:8px 12px;
+  color:var(--color-text);
+  max-width:100%
+}
+textarea {
+  width:100%;
+  resize:vertical
+}
+.shell {
+  display:grid;
+  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
+  min-height:100vh
+}
+.sidebar {
+  background:var(--color-sidebar);
+  color:var(--color-sidebar-text);
+  border-right:1px solid var(--color-border);
+  padding:28px 16px;
+  display:flex;
+  flex-direction:column;
+  gap:32px
+}
+.brand {
+  display:flex;
+  align-items:center;
+  gap:12px;
+  font-weight:650;
+  color:inherit;
+  padding:0 8px;
+  line-height:1.4
+}
+.brand small {
+  display:block;
+  font-size:11px;
+  font-weight:400;
+  opacity:.7;
+  margin-top:6px
+}
+.brand-mark {
+  display:grid;
+  place-items:center;
+  width:34px;
+  height:34px;
+  border-radius:8px;
+  background:var(--color-primary);
+  color:white
+}
+.sidebar nav {
+  display:grid;
+  gap:8px
+}
+.nav-link {
+  padding:10px 16px;
+  border-radius:5px;
+  color:inherit
+}
+.nav-link.active {
+  background:var(--color-primary);
+  color:white
+}
+.sidebar-note {
+  margin-top:auto;
+  padding:0 16px;
+  opacity:.65;
+  font-size:12px
+}
+.workspace {
+  min-width:0;
+  display:flex;
+  flex-direction:column
+}
+.topbar {
+  min-height:72px;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:16px;
+  padding:12px var(--space-page);
+  background:var(--color-surface);
+  border-bottom:1px solid var(--color-border)
+}
+.breadcrumb {
+  color:var(--color-muted);
+  font-size:13px
+}
+.role-control {
+  display:flex;
+  align-items:center;
+  gap:10px;
+  font-size:12px;
+  color:var(--color-muted)
+}
+main {
+  padding:var(--space-page);
+  flex:1;
+  min-width:0;
+  outline:none
+}
+.page-heading {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:24px;
+  margin-bottom:28px
+}
+.eyebrow {
+  color:var(--color-muted);
+  font-size:11px;
+  letter-spacing:2px;
+  margin-bottom:6px
+}
+h1 {
+  font-size:28px;
+  line-height:1.35;
+  font-weight:650;
+  margin:0;
+  overflow-wrap:anywhere
+}
+.page-heading p {
+  margin:10px 0 0;
+  color:var(--color-muted)
+}
+h2 {
+  font-size:16px;
+  margin:0;
+  font-weight:600
+}
+h3 {
+  font-size:18px;
+  margin:0 0 8px
+}
+.metrics {
+  display:grid;
+  grid-template-columns:repeat(4,minmax(0,1fr));
+  gap:16px;
+  margin-bottom:24px
+}
+.metrics>div {
+  padding:20px 24px;
+  background:var(--color-surface);
+  border:1px solid var(--color-border);
+  border-radius:var(--radius-panel)
+}
+.metrics span {
+  display:block;
+  color:var(--color-muted);
+  font-size:12px
+}
+.metrics strong {
+  font-size:28px;
+  font-weight:600;
+  line-height:1.5
+}
+.panel {
+  background:var(--color-surface);
+  border:1px solid var(--color-border);
+  border-radius:var(--radius-panel);
+  overflow:hidden
+}
+.panel-toolbar {
+  padding:20px 24px;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:16px
+}
+.panel-toolbar form {
+  display:flex;
+  gap:8px
+}
+.count {
+  font-weight:400;
+  color:var(--color-muted);
+  margin-left:8px
+}
+.table-scroll {
+  overflow:auto
+}
+table {
+  border-collapse:collapse;
+  width:100%;
+  min-width:680px
+}
+th,td {
+  padding:var(--table-cell-space) 24px;
+  text-align:left;
+  border-bottom:1px solid var(--color-border);
+  vertical-align:middle
+}
+th {
+  background:var(--color-background);
+  font-size:12px;
+  font-weight:500;
+  color:var(--color-muted)
+}
+td small {
+  display:block;
+  font-size:11px;
+  margin-top:5px;
+  color:var(--color-muted)
+}
+.record-title {
+  font-weight:500;
+  color:var(--color-text)
+}
+.numeric {
+  font-variant-numeric:tabular-nums;
+  white-space:nowrap
+}
+.badge {
+  display:inline-flex;
+  align-items:center;
+  gap:6px;
+  padding:3px 9px;
+  font-size:12px;
+  border-radius:4px;
+  white-space:nowrap;
+  background:var(--color-background)
+}
+.badge:before {
+  content:"";
+  width:5px;
+  height:5px;
+  border-radius:50%;
+  background:currentColor
+}
+.badge.submitted {
+  color:var(--color-warning);
+  background:#fff7e6
+}
+.badge.approved {
+  color:var(--color-success);
+  background:#edf7ee
+}
+.badge.rejected {
+  color:var(--color-danger);
+  background:#fdf0ef
+}
+.badge.draft {
+  color:var(--color-muted)
+}
+.panel-foot {
+  padding:12px 24px;
+  color:var(--color-muted);
+  font-size:12px
+}
+.empty {
+  padding:64px 24px;
+  text-align:center;
+  color:var(--color-muted)
+}
+.form-panel {
+  max-width:900px;
+  padding:28px
+}
+.fields {
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:20px 24px;
+  margin-top:24px
+}
+.field {
+  min-width:0
+}
+.field label {
+  display:block;
+  font-size:13px;
+  font-weight:500;
+  margin-bottom:8px
+}
+.field label span {
+  color:var(--color-danger)
+}
+.field input,.field select {
+  width:100%
+}
+.wide {
+  grid-column:1/-1
+}
+.field-error {
+  color:var(--color-danger);
+  font-size:12px;
+  margin:6px 0 0;
+  min-height:4px
+}
+[aria-invalid=true] {
+  border-color:var(--color-danger)
+}
+#error-summary {
+  padding:16px 20px;
+  border:1px solid var(--color-danger);
+  background:#fdf0ef;
+  margin-bottom:24px
+}
+#error-summary h2 {
+  font-size:14px
+}
+#error-summary ul {
+  margin:8px 0 0;
+  padding-left:20px
+}
+#error-summary a {
+  color:var(--color-danger)
+}
+.form-actions {
+  display:flex;
+  justify-content:flex-end;
+  align-items:center;
+  flex-wrap:wrap;
+  gap:12px;
+  padding-top:24px;
+  margin-top:20px;
+  border-top:1px solid var(--color-border)
+}
+.detail-grid {
+  display:grid;
+  grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
+  gap:24px
+}
+.detail-panel,.history-panel {
+  padding:28px
+}
+.panel-title {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px
+}
+dl {
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:24px;
+  margin:28px 0 0
+}
+dt {
+  color:var(--color-muted);
+  font-size:12px;
+  margin-bottom:6px
+}
+dd {
+  margin:0;
+  overflow-wrap:anywhere
+}
+.description {
+  white-space:pre-wrap
+}
+.timeline {
+  list-style:none;
+  padding:0;
+  margin:28px 0 0
+}
+.timeline li {
+  border-left:2px solid var(--color-border);
+  padding:0 0 24px 16px
+}
+.timeline strong {
+  display:block;
+  font-size:13px
+}
+.timeline span,.timeline p {
+  font-size:12px;
+  color:var(--color-muted)
+}
+.timeline p {
+  margin:6px 0 0;
+  overflow-wrap:anywhere
+}
+.muted {
+  color:var(--color-muted)
+}
+footer {
+  display:flex;
+  align-items:center;
+  gap:16px;
+  justify-content:space-between;
+  flex-wrap:wrap;
+  padding:16px var(--space-page);
+  color:var(--color-muted);
+  font-size:11px
+}
+footer label {
+  display:flex;
+  align-items:center;
+  gap:8px
+}
+footer select {
+  min-height:30px;
+  padding:4px 8px;
+  font-size:11px
+}
+.text-button {
+  border:0;
+  padding:4px;
+  min-height:28px;
+  background:none;
+  color:var(--color-muted);
+  font-size:11px
+}
+#feedback:not(:empty) {
+  position:fixed;
+  bottom:28px;
+  left:50%;
+  transform:translateX(-50%);
+  max-width:90%;
+  padding:12px 20px;
+  background:var(--color-text);
+  color:white;
+  border-radius:8px;
+  z-index:5
+}
+dialog {
+  width:min(480px,calc(100% - 32px));
+  padding:28px;
+  border:1px solid var(--color-border);
+  border-radius:var(--radius-panel);
+  color:var(--color-text)
+}
+dialog::backdrop {
+  background:#172b4d66
+}
+dialog label {
+  display:block;
+  margin:20px 0 8px
+}
+.sr-only {
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip:rect(0,0,0,0);
+  white-space:nowrap;
+  border:0
+}
+.skip-link {
+  position:fixed;
+  top:-100px;
+  left:16px;
+  padding:10px;
+  background:white;
+  z-index:10
+}
+.skip-link:focus {
+  top:16px
+}
+body[data-layout=workspace] .shell {
+  grid-template-columns:1fr
+}
+body[data-layout=workspace] .sidebar {
+  flex-direction:row;
+  align-items:center;
+  justify-content:space-between;
+  padding:16px 32px;
+  border-right:0;
+  border-bottom:1px solid var(--color-border);
+  gap:24px
+}
+body[data-layout=workspace] .sidebar nav {
+  display:flex
+}
+body[data-layout=workspace] .sidebar-note {
+  display:none
+}
+body[data-layout=workspace] main {
+  max-width:1400px;
+  width:100%;
+  margin:auto
+}
+body[data-layout=workspace] .metrics {
+  gap:24px
+}
+body[data-layout=workspace] .metrics>div {
+  border:0;
+  background:transparent;
+  padding:8px 0 20px;
+  border-bottom:1px solid var(--color-border)
+}
+body[data-layout=workspace] .panel-toolbar {
+  padding:24px
+}
+body[data-layout=operations] .topbar {
+  min-height:60px
+}
+body[data-layout=operations] h1 {
+  font-size:24px
+}
+body[data-layout=operations] .page-heading {
+  margin-bottom:20px
+}
+body[data-layout=operations] .metrics {
+  gap:0;
+  border:1px solid var(--color-border);
+  background:var(--color-surface);
+  border-radius:var(--radius-panel)
+}
+body[data-layout=operations] .metrics>div {
+  border:0;
+  border-radius:0;
+  border-right:1px solid var(--color-border);
+  padding:14px 24px
+}
+body[data-layout=operations] .metrics strong {
+  font-size:26px
+}
+body[data-layout=operations] .nav-link.active {
+  background:#ffffff18
+}
+body[data-layout=operations] .panel-toolbar {
+  padding:16px 24px
+}
+@media(max-width:1024px) {
+  .detail-grid {
+    grid-template-columns:1fr
+  }
+  .panel-toolbar {
+    align-items:flex-start;
+    flex-direction:column
+  }
+  .sidebar {
+    padding:24px 10px
+  }
+  .panel-toolbar form {
+    max-width:100%;
+    flex-wrap:wrap
+  }
+}
+@media(max-width:768px) {
+  .shell {
+    grid-template-columns:1fr
+  }
+  .sidebar {
+    flex-direction:row;
+    align-items:center;
+    justify-content:space-between;
+    padding:16px!important;
+    border-right:0;
+    border-bottom:1px solid var(--color-border);
+    gap:12px!important
+  }
+  .sidebar nav {
+    display:flex;
+    gap:4px
+  }
+  .nav-link {
+    padding:8px 12px
+  }
+  .sidebar-note {
+    display:none
+  }
+  .topbar {
+    padding:12px 16px;
+    flex-wrap:wrap;
+    min-height:64px
+  }
+  main {
+    padding:24px 16px
+  }
+  .metrics {
+    grid-template-columns:repeat(2,minmax(0,1fr))
+  }
+  .metrics>div {
+    padding:16px
+  }
+  .page-heading {
+    gap:16px;
+    align-items:flex-start
+  }
+  .page-heading h1 {
+    font-size:24px
+  }
+  .fields,dl {
+    grid-template-columns:1fr
+  }
+  .panel-toolbar,.form-panel,.detail-panel,.history-panel {
+    padding:20px
+  }
+  .panel-toolbar form {
+    gap:8px
+  }
+  .panel-toolbar input {
+    min-width:0;
+    width:100%
+  }
+  .brand {
+    padding:0
+  }
+  .brand small {
+    display:none
+  }
+  footer {
+    padding:16px
+  }
+  .form-actions {
+    gap:8px
+  }
+  .form-actions>* {
+    flex:1
+  }
+  body[data-layout=operations] .metrics {
+    grid-template-columns:1fr 1fr
+  }
+  body[data-layout=workspace] .metrics {
+    gap:16px
+  }
+}
+@media(prefers-reduced-motion:reduce) {
+  * {
+    scroll-behavior:auto!important
+  }
+}

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

@@ -0,0 +1,19 @@
+:root {
+  --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;
+  --radius-panel: 8px;
+  --control-height: 40px;
+  --table-cell-space: 16px;
+  --sidebar-width: 220px;
+}

package/skills/i3-ui-prototype/assets/templates/common/design-system/master.md

@@ -0,0 +1,20 @@
+# 原型设计契约
+
+<!-- i3:zh-guide:start -->
+## 中文使用说明
+
+按下文完整工程步骤、检查项与验证条件执行。根据任务选择适用步骤，保留证据、风险和退出条件；正文示例中的英文标签在面向用户输出时译为中文。
+
+默认使用简体中文解释、追问及生成报告；用户明确要求其他语言时可切换。原方法正文、引用、阈值和审批条件完整保留。代码标识、路径、命令、工具参数、JSON 键/枚举与原文引用保持原样。
+<!-- i3:zh-guide:end -->
+
+本原型采用 prototype.json 固定的模板版本。tokens.json 是页面实际样式值的来源；修改时同步 app/tokens.css 并记录影响。
+
+- 导航保持列表、申请表单、详情及审批记录的明确路径。每页有一个主要任务与清晰标题。
+- 草稿、待审批、通过、退回使用固定文字标签与语义色；不能仅靠颜色表达状态。
+- 使用模板的字号、间距和控制高度。组件状态包括禁用、焦点、校验失败和提交反馈。
+- 提交校验失败时聚焦错误摘要，摘要链接到错误字段；保留字段旁错误与已填内容。
+- 演示角色体现申请人、审批人、只读的不同操作范围。原型中的角色切换不等于生产权限系统。
+- 中文长文本可换行；窄屏保留操作和字段可读性，表格在自身区域横向滚动。
+
+页面特例放在 pages/，说明原因、适用页面及验证条件。涉及上述固定规则的改变必须形成候选并评审。当前契约与原型均待用户认可。

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

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>UI 原型模板选择</title><link rel="icon" href="data:,"><style>body{margin:0;font:14px system-ui,sans-serif;color:#172b4d;background:#f4f6fa}header{padding:24px 32px;background:white;border-bottom:1px solid #dce3ee}h1{margin:0;font-size:24px}p{color:#53657f;margin:8px 0 0}.options{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}button{padding:12px 18px;background:white;border:1px solid #dce3ee;border-radius:6px;color:#172b4d;font:inherit;cursor:pointer}button[aria-pressed=true]{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}iframe{display:block;width:100%;height:calc(100vh - 188px);min-height:540px;border:0}@media(max-width:768px){header{padding:20px 16px}iframe{height:760px}}</style></head><body><header><h1>选择适合业务的 UI 模板</h1><p>三套模板使用同一申请与审批示例，可比较布局、信息密度和交互。运行形态均为 HTML 审查原型。</p><div class="options"><button data-template="classic-admin" aria-pressed="true">企业管理后台</button><button data-template="modern-workspace" aria-pressed="false">现代工作空间</button><button data-template="data-operations" aria-pressed="false">数据运营控制台</button></div></header><iframe title="选定模板的交互预览" src="./app/index.html?template=classic-admin"></iframe><script>const allowed=['classic-admin','modern-workspace','data-operations'];function select(id){if(!allowed.includes(id))return;document.querySelector('iframe').src='./app/index.html?template='+id;document.querySelectorAll('button').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.template===id)))}document.querySelectorAll('button').forEach(button=>button.onclick=()=>select(button.dataset.template));select(new URLSearchParams(location.search).get('template')||allowed[0]);</script></body></html>

package/skills/i3-ui-prototype/assets/templates/common/mocks/applications.json

@@ -0,0 +1,5 @@
+[
+  { "id": "A-001", "title": "客户服务流程优化", "department": "运营中心", "amount": 180000, "description": "整合客户反馈渠道，缩短问题处理周期，按月评估服务质量。", "applicant": "李思", "status": "submitted", "date": "2026-10-14", "history": [{ "action": "提交申请", "actor": "李思", "note": "材料已补齐" }] },
+  { "id": "A-002", "title": "知识库内容整理", "department": "产品中心", "amount": 60000, "description": "梳理常见问题、操作指引和业务词汇，形成持续维护的内容目录。", "applicant": "李思", "status": "draft", "date": "2026-10-14", "history": [] },
+  { "id": "A-003", "title": "设备巡检记录改进", "department": "技术中心", "amount": 120000, "description": "统一巡检记录与异常反馈，明确责任人与处理时限。", "applicant": "陈晨", "status": "approved", "date": "2026-10-13", "history": [{ "action": "审批通过", "actor": "审批人", "note": "按计划推进" }] }
+]