@givolt/i3-composer-agent 3.2.1 → 4.0.0

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

@@ -1,670 +0,0 @@
-* {
-  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

@@ -1,19 +0,0 @@
-: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

@@ -1,20 +0,0 @@
-# 原型设计契约
-
-<!-- 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

@@ -1,2 +0,0 @@
-<!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

@@ -1,5 +0,0 @@
-[
-  { "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": "按计划推进" }] }
-]