create-yss-spec 3.3.8 → 3.4.3

package/template/.codex/skills/yss-prototype-stage/assets/antd-authoring/workbench.jsx

@@ -0,0 +1,23 @@
+import React, {useState} from 'react';
+import {createRoot} from 'react-dom/client';
+import zhCN from 'antd/locale/zh_CN';
+import {ConfigProvider, App, Layout, Typography, Breadcrumb, Table, Form, Input, Button, Space, Tag, Modal, Drawer, Descriptions, Alert, Select, DatePicker, Empty, Spin} from 'antd';
+const seed=[{id:'M-001',name:'季度经营分析资料',owner:'张明',status:'已更新'},{id:'M-002',name:'跨部门业务协作与异常处理说明（长名称示例）',owner:'李华',status:'待核对'},{id:'M-003',name:'归档清单',owner:'王宁',status:'已更新'}];
+const options=[['primary','正常'],['empty','空数据'],['loading','加载中'],['failure','保存失败'],['no-permission','无编辑权限'],['conflict','并发冲突']].map(([value,label])=>({value,label}));
+function Workbench(){
+ const [rows,setRows]=useState(seed.map(x=>({...x}))),[query,setQuery]=useState(''),[filter,setFilter]=useState(''),[scenario,setScenario]=useState(options.some(x=>x.value===new URLSearchParams(location.hash.slice(1)).get('scenario'))?new URLSearchParams(location.hash.slice(1)).get('scenario'):'primary'),[edit,setEdit]=useState(null),[detail,setDetail]=useState(null),[error,setError]=useState(''),[retry,setRetry]=useState(false),[feedback,setFeedback]=useState('');const [form]=Form.useForm();
+ const reset=value=>{setScenario(value);location.hash=`scenario=${value}`;setRows(seed.map(x=>({...x})));setQuery('');setFilter('');setEdit(null);setDetail(null);setError('');setRetry(false);setFeedback('');};
+ const open=row=>{form.setFieldsValue(row);setEdit(row);setError('');setRetry(false);};
+ const save=(values,attempt=false)=>{if(scenario==='no-permission')return;if(scenario==='failure'&&!(retry||attempt)){setError('保存失败，输入已保留，请重试。');return;}if(scenario==='conflict'&&!retry){setError('资料已更新。输入已保留，重新加载前可复制内容。');return;}setRows(rows.map(row=>row.id===edit.id?{...row,...values,status:'已更新'}:row));setEdit(null);setFeedback('保存成功（本地模拟）。');};
+ const visible=['empty','loading'].includes(scenario)?[]:rows.filter(x=>(x.id+x.name).includes(filter));
+ return <Layout><Layout.Header><strong>业务工作台</strong><Breadcrumb items={[{title:'资料管理'},{title:'资料维护'}]}/></Layout.Header><Layout.Content><div className="heading"><div><Typography.Title level={2}>资料维护</Typography.Title><Typography.Paragraph>查询资料、核对详情并维护负责人。</Typography.Paragraph></div><Tag>示例数据</Tag></div>
+ <section className="surface"><Form layout="vertical" onFinish={()=>setFilter(query.trim())}><Form.Item label="资料名称"><Space wrap><Input id="keyword" aria-label="资料名称筛选" value={query} onChange={e=>setQuery(e.target.value)} placeholder="输入名称或编号"/><Button aria-label="查询" htmlType="submit" type="primary">查询</Button><Button onClick={()=>{setQuery('');setFilter('');}}>重置筛选</Button></Space></Form.Item></Form></section>
+ <section className="surface"><Typography.Title level={4}>资料列表 · 共 {visible.length} 条</Typography.Title>{scenario==='no-permission'&&<Alert title="当前资料仅可查看。" type="info"/>}<Table rowKey="id" size="small" loading={scenario==='loading'} dataSource={visible} pagination={{pageSize:2,showSizeChanger:false}} scroll={{x:700}} locale={{emptyText:<Empty description="暂无符合条件的资料"/>}} columns={[{title:'编号',dataIndex:'id',width:90},{title:'资料名称',dataIndex:'name'},{title:'负责人',dataIndex:'owner',width:90},{title:'状态',dataIndex:'status',width:100,render:v=><Tag color={v==='已更新'?'green':'orange'}>{v}</Tag>},{title:'操作',width:145,render:(_,row)=><Space><Button aria-label={`查看 ${row.id}`} onClick={()=>setDetail(row)}>查看</Button><Button aria-label={`编辑 ${row.id}`} disabled={scenario==='no-permission'} onClick={()=>open(row)}>编辑</Button></Space>}]}/></section>
+ <p role="status">{feedback}</p><details className="review-controls"><summary>评审场景</summary><label htmlFor="scenario">场景</label><select id="scenario" value={scenario} onChange={e=>reset(e.target.value)}>{options.map(x=><option key={x.value} value={x.value}>{x.label}</option>)}</select> <Button id="reset" onClick={()=>reset(scenario)}>重置场景</Button><p>供评审使用；所有数据和保存结果均为本地模拟。</p></details>
+ <Drawer title="资料详情" open={!!detail} onClose={()=>setDetail(null)} size={480}><Descriptions column={1} items={detail?Object.entries(detail).map(([key,value])=>({key,label:({id:'编号',name:'名称',owner:'负责人',status:'状态'})[key],children:value})):[]}/></Drawer>
+ <Modal title="编辑资料" open={!!edit} onCancel={()=>setEdit(null)} footer={null} destroyOnHidden afterOpenChange={open=>{if(open)document.getElementById('name')?.focus();}}><Form form={form} layout="vertical" onFinish={save}>
+ <Form.Item label="资料名称" name="name" rules={[{required:true,message:'请输入资料名称'}]}><Input id="name" maxLength={80}/></Form.Item><Form.Item label="负责人" name="owner" rules={[{required:true,message:'请选择负责人'}]}><Select id="owner" options={['张明','李华','王宁','最新负责人'].map(x=>({value:x,label:x}))}/></Form.Item>
+ <Form.Item label="有效日期范围（选填）" name="dates"><DatePicker.RangePicker style={{width:'100%'}}/></Form.Item>{error&&<Alert title={error} type="error" showIcon style={{marginBottom:16}}/>}<Space wrap><Button id="save" type="primary" htmlType="submit">保存</Button>{error&&scenario==='failure'&&<Button id="retry" onClick={()=>form.validateFields().then(values=>save(values,true)).catch(()=>{})}>重试</Button>}{error&&scenario==='conflict'&&<Button id="reload" onClick={()=>{form.setFieldsValue({...edit,owner:'最新负责人'});setRetry(true);setError('已重新加载，请确认后保存。');}}>重新加载</Button>}<Button onClick={()=>setEdit(null)}>取消</Button></Space></Form></Modal>
+ </Layout.Content></Layout>;
+}
+createRoot(document.getElementById('app')).render(<ConfigProvider locale={zhCN} theme={{token:__PROTOTYPE_THEME__}}><App><Workbench/></App></ConfigProvider>);

package/template/.codex/skills/yss-prototype-stage/assets/native-workbench/app.js

@@ -0,0 +1,20 @@
+(() => {
+ const $ = id => document.getElementById(id);
+ const seed = [{id:'M-001',name:'季度经营分析资料',owner:'张明',status:'已更新'},{id:'M-002',name:'跨部门业务协作与异常处理说明（长名称示例）',owner:'李华',status:'待核对'},{id:'M-003',name:'归档清单',owner:'王宁',status:'已更新'}];
+ let rows, scenario, current, retried=false, trigger;
+ function render(){
+  const visible=(scenario==='empty'||scenario==='loading')?[]:rows.filter(r=>(r.id+r.name).includes($('keyword').value.trim()));
+  $('count').textContent=`共 ${visible.length} 条`;
+  $('list-status').textContent=scenario==='loading'?'正在加载（固定评审状态）':visible.length?'':'暂无符合条件的资料';
+  $('rows').replaceChildren();
+  for(const row of visible){const tr=document.createElement('tr');for(const key of ['id','name','owner','status']){const td=document.createElement('td');td.textContent=row[key];tr.append(td);}const td=document.createElement('td');for(const type of ['查看','编辑']){const b=document.createElement('button');b.textContent=type;b.disabled=type==='编辑'&&scenario==='no-permission';b.setAttribute('aria-label',`${type} ${row.id}`);b.onclick=()=>open(row,type,b);td.append(b);}tr.append(td);$('rows').append(tr);}
+ }
+ function close(id){$(id).close();const next=document.querySelector(`[aria-label="${trigger}"]`);if(next&&!next.disabled)next.focus();}
+ function open(row,type,b){current=row;trigger=b.getAttribute('aria-label');retried=false;$('retry').hidden=true;$('reload').hidden=true;$('edit-status').textContent='';if(type==='查看'){ $('detail-content').replaceChildren();for(const [key,label] of [['id','编号'],['name','名称'],['owner','负责人'],['status','状态']]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=row[key];$('detail-content').append(dt,dd);}$('detail').showModal();$('detail-close').focus();}else{$('name').value=row.name;$('owner').value=row.owner;$('edit').showModal();$('name').focus();}}
+ function reset(){for(const id of ['detail','edit'])if($(id).open)$(id).close();scenario=new URLSearchParams(location.hash.slice(1)).get('scenario')||'primary';if(![...$('scenario').options].some(x=>x.value===scenario))scenario='primary';$('scenario').value=scenario;rows=seed.map(x=>({...x}));$('keyword').value='';$('feedback').textContent=scenario==='no-permission'?'当前资料仅可查看。':'';document.body.dataset.state=scenario;render();}
+ $('query').onsubmit=e=>{e.preventDefault();render();};$('clear').onclick=()=>{$('keyword').value='';render();};
+ $('editor').onsubmit=e=>{e.preventDefault();if(scenario==='no-permission')return;if(scenario==='failure'&&!retried){$('edit-status').textContent='保存失败，输入已保留，请重试。';$('retry').hidden=false;return;}if(scenario==='conflict'&&!retried){$('edit-status').textContent='资料已被更新。输入已保留，重新加载前可复制内容。';$('reload').hidden=false;return;}current.name=$('name').value;current.owner=$('owner').value;current.status='已更新';render();close('edit');$('feedback').textContent='保存成功（本地模拟）。';document.body.dataset.state='success';};
+ $('retry').onclick=()=>{retried=true;$('editor').requestSubmit();};$('reload').onclick=()=>{retried=true;$('name').value=current.name;$('owner').value='最新负责人';$('reload').hidden=true;$('edit-status').textContent='已重新加载，可继续编辑。';$('name').focus();};
+ $('cancel').onclick=()=>close('edit');$('detail-close').onclick=()=>close('detail');for(const id of ['edit','detail'])$(id).addEventListener('cancel',e=>{e.preventDefault();close(id);});
+ $('scenario').onchange=()=>{location.hash=`scenario=${$('scenario').value}`;reset();};$('reset').onclick=reset;window.addEventListener('hashchange',reset);reset();
+})();

package/template/.codex/skills/yss-prototype-stage/assets/native-workbench/index.html

@@ -0,0 +1,11 @@
+<!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="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./styles.css"><script defer src="./app.js"></script></head><body>
+<header><strong>业务工作台</strong><span>资料管理 / 资料维护</span></header><main>
+<div class="heading"><div><h1>资料维护</h1><p>查询资料、核对详情并维护负责人。</p></div><span class="tag">示例数据</span></div>
+<section class="surface"><form id="query"><label for="keyword">资料名称</label><div class="actions"><input id="keyword" placeholder="输入名称或编号"><button type="submit">查询</button><button id="clear" type="button">重置筛选</button></div></form></section>
+<section class="surface"><h2>资料列表 <small id="count"></small></h2><p id="list-status" role="status"></p><div class="table-scroll"><table><thead><tr><th>编号</th><th>资料名称</th><th>负责人</th><th>状态</th><th>操作</th></tr></thead><tbody id="rows"></tbody></table></div></section>
+<p id="feedback" role="status" aria-live="polite"></p>
+<details class="review-controls"><summary>评审场景</summary><label for="scenario">场景</label><select id="scenario"><option value="primary">正常</option><option value="empty">空数据</option><option value="loading">加载中</option><option value="failure">保存失败</option><option value="no-permission">无编辑权限</option><option value="conflict">并发冲突</option></select> <button id="reset" type="button">重置场景</button><p>供评审使用；所有数据和保存结果均为本地模拟。</p></details>
+</main>
+<dialog id="detail" aria-labelledby="detail-title"><h2 id="detail-title">资料详情</h2><dl id="detail-content"></dl><button id="detail-close" type="button">关闭详情</button></dialog>
+<dialog id="edit" aria-labelledby="edit-title"><form id="editor"><h2 id="edit-title">编辑资料</h2><label for="name">资料名称</label><input id="name" required maxlength="80"><label for="owner">负责人</label><input id="owner" required maxlength="40"><p id="edit-status" role="status"></p><div class="actions"><button id="save" type="submit">保存</button><button id="retry" type="button" hidden>重试</button><button id="reload" type="button" hidden>重新加载</button><button id="cancel" type="button">取消</button></div></form></dialog>
+</body></html>

package/template/.codex/skills/yss-prototype-stage/assets/native-workbench/styles.css

@@ -0,0 +1,28 @@
+:root { font-family: var(--brand-font-family, system-ui, sans-serif); font-size: var(--brand-font-size); line-height: var(--brand-line-height); color: var(--brand-color-text); background: var(--brand-color-bg-layout); }
+* { box-sizing: border-box; }
+body { margin: 0; }
+main { max-width: 1440px; margin: auto; padding: var(--brand-size-lg); }
+.surface { padding: var(--yss-card-padding, var(--brand-size)); border-radius: var(--brand-border-radius-lg); background: var(--brand-color-bg-container); }
+label { display: block; margin-block: var(--brand-size-sm); }
+input, select, button { font: inherit; min-height: var(--yss-control-height); height: var(--yss-control-height); border-radius: var(--brand-border-radius); max-width: 100%; }
+input, select { padding: 0 var(--brand-size-sm); color: inherit; border: 1px solid var(--brand-color-border); background: var(--brand-color-bg-container); }
+input { width: 100%; }
+.actions { display: flex; flex-wrap: wrap; gap: var(--brand-size-sm); margin-block: var(--brand-size); }
+button { padding: 0 var(--brand-size-sm); border: 0; color: var(--yss-color-on-primary, var(--brand-color-bg-container)); background: var(--yss-color-primary-control); cursor: pointer; }
+button:hover { background: var(--yss-color-primary-control-hover); }
+button:disabled { opacity: .5; cursor: not-allowed; }
+:focus-visible { outline: 2px solid var(--yss-color-primary-control); outline-offset: 2px; }
+.review-controls { margin-block: var(--brand-size-lg); }
+p { overflow-wrap: anywhere; }
+@media (max-width: 576px) { main, .surface { padding: var(--brand-size-sm); } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+
+button:not(#save) { color: var(--brand-color-text); background: var(--brand-color-bg-container); border: 1px solid var(--brand-color-border); }
+header { display:flex; gap:32px; align-items:center; padding:16px 24px; background:var(--brand-color-bg-container); border-bottom:1px solid var(--brand-color-border); }
+header span,small { color:var(--brand-color-text-secondary); font-weight:normal; }
+.heading { display:flex; justify-content:space-between; align-items:center; } h1 { margin-bottom:8px; } .surface { margin-block:16px; }
+.tag { color:var(--yss-color-primary-control); border:1px solid var(--brand-color-border); padding:4px 8px; border-radius:4px; }
+#query input { max-width:320px; } .table-scroll { overflow-x:auto; } table { border-collapse:collapse; width:100%; min-width:650px; } th,td { text-align:left; padding:12px; border-bottom:1px solid var(--brand-color-border); } th { background:var(--brand-color-bg-layout); } td button { margin-right:8px; } th,td:not(:nth-child(2)){white-space:nowrap;} td:nth-child(2){max-width:360px;overflow-wrap:anywhere;}
+dialog { width:min(600px,calc(100vw - 32px)); max-height:85vh; overflow:auto; padding:24px; border:0; border-radius:var(--brand-border-radius-lg); background:var(--brand-color-bg-container); color:var(--brand-color-text); }
+dialog::backdrop { background:rgba(0,0,0,.45); } dt { color:var(--brand-color-text-secondary); } dd { margin:8px 0 20px;overflow-wrap:anywhere; }
+@media(max-width:576px){header{padding:12px;gap:16px}.heading{align-items:start;gap:8px}.actions input{flex-basis:100%}h1{font-size:22px}}

package/template/.codex/skills/yss-prototype-stage/assets/offline-html/app.js

@@ -0,0 +1,50 @@
+(() => {
+  const scenarios = window.prototypeScenarios;
+  const form = document.querySelector('#editor');
+  const content = document.querySelector('#content');
+  const selector = document.querySelector('#scenario');
+  const status = document.querySelector('#status');
+  const save = document.querySelector('#save');
+  const retry = document.querySelector('#retry');
+  const reload = document.querySelector('#reload');
+  let state;
+  for (const scenario of scenarios) selector.add(new Option(scenario.label, scenario.id));
+  function reset(id) {
+    const scenario = scenarios.find(item => item.id === id) || scenarios[0];
+    state = { ...scenario, retried: false };
+    selector.value = scenario.id;
+    content.value = scenario.content;
+    content.readOnly = scenario.outcome === 'no-permission';
+    save.disabled = content.readOnly;
+    retry.hidden = true;
+    reload.hidden = true;
+    status.textContent = content.readOnly ? '当前没有编辑权限，可查看内容或切换场景。' : '可以编辑并保存。';
+    document.body.dataset.scenario = scenario.id;
+    document.body.dataset.state = content.readOnly ? 'no-permission' : 'editing';
+  }
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    if (content.readOnly || !form.reportValidity()) return;
+    if (state.outcome === 'failure' && !state.retried) {
+      status.textContent = '保存失败，输入已保留。请重试。';
+      document.body.dataset.state = 'error';
+      retry.hidden = false;
+    } else if (state.outcome === 'conflict') {
+      status.textContent = '内容已被更新，本地输入已保留。重新加载前可以复制当前内容。';
+      document.body.dataset.state = 'conflict';
+      reload.hidden = false;
+    } else {
+      status.textContent = '保存成功。';
+      document.body.dataset.state = 'success';
+      retry.hidden = true;
+      save.focus();
+    }
+  });
+  retry.addEventListener('click', () => { state.retried = true; form.requestSubmit(); });
+  reload.addEventListener('click', () => { state.outcome = 'success'; content.value = '重新加载的最新内容'; reload.hidden = true; status.textContent = '已重新加载，可以继续编辑。'; document.body.dataset.state = 'editing'; content.focus(); });
+  selector.addEventListener('change', () => { location.hash = `scenario=${selector.value}`; reset(selector.value); });
+  document.querySelector('#reset').addEventListener('click', () => reset(selector.value));
+  const selectedFromHash = () => new URLSearchParams(location.hash.slice(1)).get('scenario');
+  window.addEventListener('hashchange', () => reset(selectedFromHash()));
+  reset(selectedFromHash());
+})();

package/template/.codex/skills/yss-prototype-stage/assets/offline-html/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>__FEATURE__</title>
+  <link rel="stylesheet" href="./tokens.css">
+  <link rel="stylesheet" href="./styles.css">
+  <script defer src="./scenarios.js"></script>
+  <script defer src="./app.js"></script>
+</head>
+<body>
+  <main>
+    <h1>__FEATURE__</h1>
+    <p>请依据已评审的交互说明替换此示例。</p>
+    <section class="surface" aria-labelledby="editor-title">
+      <h2 id="editor-title">内容编辑</h2>
+      <form id="editor">
+        <label for="content">内容</label>
+        <input id="content" name="content" required aria-describedby="status">
+        <div class="actions">
+          <button id="save" type="submit">保存</button>
+          <button id="retry" type="button" hidden>重试</button>
+          <button id="reload" type="button" hidden>重新加载</button>
+        </div>
+        <p id="status" role="status" aria-live="polite"></p>
+      </form>
+    </section>
+    <details class="review-controls">
+      <summary>评审场景</summary>
+      <label for="scenario">场景</label>
+      <select id="scenario" aria-label="评审场景"></select>
+      <button id="reset" type="button">重置场景</button>
+      <p>此区域供评审使用；场景数据为模拟数据。</p>
+    </details>
+  </main>
+</body>
+</html>

package/template/.codex/skills/yss-prototype-stage/assets/offline-html/scenarios.js

@@ -0,0 +1,7 @@
+// Replace these examples with cases derived from the existing state matrix.
+window.prototypeScenarios = [
+  { id: 'primary', label: '正常保存', content: '待编辑内容', outcome: 'success' },
+  { id: 'failure', label: '保存失败后重试', content: '失败后应保留的输入', outcome: 'failure' },
+  { id: 'no-permission', label: '无编辑权限', content: '可查看的内容', outcome: 'no-permission' },
+  { id: 'conflict', label: '内容冲突后重新加载', content: '本地待保存内容', outcome: 'conflict' }
+];

package/template/.codex/skills/yss-prototype-stage/assets/offline-html/styles.css

@@ -0,0 +1,20 @@
+:root { font-family: var(--brand-font-family, system-ui, sans-serif); font-size: var(--brand-font-size); line-height: var(--brand-line-height); color: var(--brand-color-text); background: var(--brand-color-bg-layout); }
+* { box-sizing: border-box; }
+body { margin: 0; }
+main { max-width: 1440px; margin: auto; padding: var(--brand-size-lg); }
+.surface { padding: var(--yss-card-padding, var(--brand-size)); border-radius: var(--brand-border-radius-lg); background: var(--brand-color-bg-container); }
+label { display: block; margin-block: var(--brand-size-sm); }
+input, select, button { font: inherit; min-height: var(--yss-control-height); height: var(--yss-control-height); border-radius: var(--brand-border-radius); max-width: 100%; }
+input, select { padding: 0 var(--brand-size-sm); color: inherit; border: 1px solid var(--brand-color-border); background: var(--brand-color-bg-container); }
+input { width: 100%; }
+.actions { display: flex; flex-wrap: wrap; gap: var(--brand-size-sm); margin-block: var(--brand-size); }
+button { padding: 0 var(--brand-size-sm); border: 0; color: var(--yss-color-on-primary, var(--brand-color-bg-container)); background: var(--yss-color-primary-control); cursor: pointer; }
+button:hover { background: var(--yss-color-primary-control-hover); }
+button:disabled { opacity: .5; cursor: not-allowed; }
+:focus-visible { outline: 2px solid var(--yss-color-primary-control); outline-offset: 2px; }
+.review-controls { margin-block: var(--brand-size-lg); }
+p { overflow-wrap: anywhere; }
+@media (max-width: 576px) { main, .surface { padding: var(--brand-size-sm); } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+
+button:not(#save) { color: var(--brand-color-text); background: var(--brand-color-bg-container); border: 1px solid var(--brand-color-border); }