create-yss-spec 3.5.2 → 3.5.4

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

@@ -1,23 +0,0 @@
-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>);