style(device-templates): 领域标签改为圆角胶囊、删除说明列、加宽所属领域列

diff --git a/app/globals.css b/app/globals.css
index bbbb78cb270c5a152bacdc5631b7709f0a6353cb..5ceab0286e249a5b532d321e3b2b076b13757ff6 100644 (file)
--- a/app/globals.css
+++ b/app/globals.css
@@ -320,7 +320,9 @@ html,body{font-family:Roboto,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;f
 .resource-table th:nth-child(7),.resource-table td:nth-child(7){width:96px}.resource-table th:nth-child(8),.resource-table td:nth-child(8){width:180px}
 .domain-resource-table th:first-child,.domain-resource-table td:first-child{width:260px;min-width:260px;text-align:left}.domain-resource-table .company-record-link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
 .resource-detail>p{margin:8px 0;color:#666;line-height:1.8;white-space:pre-wrap}.resource-detail-image{display:block;width:100%;max-height:220px;object-fit:contain;border:1px solid var(--company-border);background:#f5f5f5;margin-bottom:20px}
-.device-resource-table{min-width:860px}.device-resource-table th:nth-child(1),.device-resource-table td:nth-child(1){width:280px;min-width:280px;text-align:left}.device-resource-table th:nth-child(2),.device-resource-table td:nth-child(2){width:auto}.device-resource-table th:nth-child(3),.device-resource-table td:nth-child(3){width:90px;text-align:center}.device-resource-table th:nth-child(4),.device-resource-table td:nth-child(4){width:110px}.device-resource-table th:nth-child(5),.device-resource-table td.domain-cell{width:180px;min-width:140px;text-align:left;white-space:normal}.device-resource-table th:nth-child(6),.device-resource-table td:nth-child(6){width:64px}.device-resource-table .company-record-link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
+.device-resource-table{min-width:820px}.device-resource-table th:nth-child(1),.device-resource-table td:nth-child(1){width:280px;min-width:280px;text-align:left}.device-resource-table th:nth-child(2),.device-resource-table td:nth-child(2){width:90px;text-align:center}.device-resource-table th:nth-child(3),.device-resource-table td:nth-child(3){width:110px;text-align:left}.device-resource-table th:nth-child(4),.device-resource-table td.domain-cell{width:240px;min-width:180px;text-align:left;white-space:normal}.device-resource-table th:nth-child(5),.device-resource-table td:nth-child(5){width:64px;text-align:center}.device-resource-table .company-record-link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
+.domain-tag-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+.ant-tag.tag-new{display:inline-flex;align-items:center;height:24px;line-height:21px;border-radius:12px;padding:0 10px;font-size:13px;white-space:nowrap;margin:0}
 .resource-name-cell{display:flex;align-items:center;gap:12px;min-width:0}.resource-name-cell>img,.resource-placeholder{flex:none;width:48px;height:36px;border:1px solid var(--company-border);background:#f5f5f5;object-fit:cover;border-radius:2px}.resource-placeholder{display:grid;place-items:center;color:#999}.resource-name-cell .company-record-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
 .resource-point-list{border-top:1px solid #eee}.resource-point-list>div{height:40px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.resource-point-list span{color:var(--company-muted)}.resource-point-list>p{color:var(--company-muted)}
 .resource-back{height:44px;display:flex;align-items:center;border-bottom:1px solid var(--company-border);margin:0 0 16px}.resource-back .text-button{margin:0}

diff --git a/app/page.tsx b/app/page.tsx
index eb387088df7fdd0d2906fa5adaf80c80c129e05a..197316c38281d6ee13b65b718f6db7c2406f1b91 100644 (file)
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2503,7 +2503,7 @@ function CompanyDeviceTemplates({notify,onViewCpPrompt}:{notify:(m:string)=>void
     ].map(item=><button key={item.key||"all"} role="tab" aria-selected={pointFilter===item.key} className={pointFilter===item.key?"active":""} onClick={()=>setPointFilter(item.key as ""|"configured"|"empty")}><span>{item.label}</span><b>{item.count}</b></button>)}</div>
     <Panel className="company-list-panel resource-list-panel">
       <div className="filterbar company-filterbar"><label className="search-field"><span aria-hidden>⌕</span><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="搜索设备名称或说明"/></label><div className="filter-actions"><Button secondary onClick={()=>{setQuery("");setPointFilter("");}}>重置</Button><Button onClick={()=>setOpenId("create")}>＋ 新增模板</Button></div></div>
-      {loading?<div className="empty-state">加载中…</div>:<><table className="data-table company-table resource-table device-resource-table"><thead><tr><th>设备模板名称</th><th>说明</th><th>采集点</th><th>配置状态</th><th>所属领域</th><th>操作</th></tr></thead><tbody>{filtered.slice((pageIndex-1)*pageSize,pageIndex*pageSize).map(row=><tr key={row.id} onClick={()=>setPreview(row)}><td><button className="link company-record-link" title={row.name} onClick={e=>{e.stopPropagation();setPreview(row);}}><b>{row.name||"未命名设备模板"}</b></button></td><td>{row.description||"—"}</td><td>{pointCount(row)}</td><td><Status>{pointCount(row)>0?"已配置":"待配置"}</Status></td><td className="domain-cell">{domainNames(row).map(n=><DomainTag key={n} name={n}/>)}</td><td onClick={e=>e.stopPropagation()}><Dropdown trigger={["click"]} menu={{items:[{key:"edit",label:"编辑模板",icon:<EditOutlined/>},{key:"delete",label:"删除",danger:true,icon:<DeleteOutlined/>}],onClick:({key})=>key==="edit"?setOpenId(row.id):remove(row)}}><AntButton type="text" aria-label="更多操作" icon={<EllipsisOutlined/>}/></Dropdown></td></tr>)}</tbody></table>{filtered.length===0&&<div className="empty-state">暂无符合条件的设备模板</div>}<div className="pagination"><span>{filtered.length} / 总数</span><button disabled={pageIndex<=1} onClick={()=>setPageIndex(p=>Math.max(1,p-1))}>‹</button><button className="active">{pageIndex}</button><button disabled={pageIndex>=Math.max(1,Math.ceil(filtered.length/pageSize))} onClick={()=>setPageIndex(p=>Math.min(Math.max(1,Math.ceil(filtered.length/pageSize)),p+1))}>›</button><select value={pageSize} onChange={e=>{setPageSize(Number(e.target.value));setPageIndex(1);}}><option value={10}>10 / 页</option><option value={20}>20 / 页</option><option value={50}>50 / 页</option></select></div></>}
+      {loading?<div className="empty-state">加载中…</div>:<><table className="data-table company-table resource-table device-resource-table"><thead><tr><th>设备模板名称</th><th>采集点</th><th>配置状态</th><th>所属领域</th><th>操作</th></tr></thead><tbody>{filtered.slice((pageIndex-1)*pageSize,pageIndex*pageSize).map(row=><tr key={row.id} onClick={()=>setPreview(row)}><td><button className="link company-record-link" title={row.name} onClick={e=>{e.stopPropagation();setPreview(row);}}><b>{row.name||"未命名设备模板"}</b></button></td><td>{pointCount(row)}</td><td><Status>{pointCount(row)>0?"已配置":"待配置"}</Status></td><td className="domain-cell"><div className="domain-tag-list">{domainNames(row).map(n=><DomainTag key={n} name={n}/>)}</div></td><td onClick={e=>e.stopPropagation()}><Dropdown trigger={["click"]} menu={{items:[{key:"edit",label:"编辑模板",icon:<EditOutlined/>},{key:"delete",label:"删除",danger:true,icon:<DeleteOutlined/>}],onClick:({key})=>key==="edit"?setOpenId(row.id):remove(row)}}><AntButton type="text" aria-label="更多操作" icon={<EllipsisOutlined/>}/></Dropdown></td></tr>)}</tbody></table>{filtered.length===0&&<div className="empty-state">暂无符合条件的设备模板</div>}<div className="pagination"><span>{filtered.length} / 总数</span><button disabled={pageIndex<=1} onClick={()=>setPageIndex(p=>Math.max(1,p-1))}>‹</button><button className="active">{pageIndex}</button><button disabled={pageIndex>=Math.max(1,Math.ceil(filtered.length/pageSize))} onClick={()=>setPageIndex(p=>Math.min(Math.max(1,Math.ceil(filtered.length/pageSize)),p+1))}>›</button><select value={pageSize} onChange={e=>{setPageSize(Number(e.target.value));setPageIndex(1);}}><option value={10}>10 / 页</option><option value={20}>20 / 页</option><option value={50}>50 / 页</option></select></div></>}
     </Panel>
     <Drawer title={preview?.name||"设备模板详情"} width={440} open={!!preview} onClose={()=>setPreview(null)} extra={preview&&<Button onClick={()=>{setPreview(null);setOpenId(preview.id);}}>编辑模板</Button>}>
       {preview&&<div className="company-detail resource-detail">{preview.image_path&&<img className="resource-detail-image" src={`/api/db/device-templates/${preview.id}/image`} alt={preview.name}/>}<h3>基础信息</h3><dl><dt>模板名称</dt><dd>{preview.name}</dd><dt>采集点数量</dt><dd>{pointCount(preview)}</dd><dt>配置状态</dt><dd><Status>{pointCount(preview)>0?"已配置":"待配置"}</Status></dd></dl><h3>模板说明</h3><p>{preview.description||"暂无说明"}</p><h3>采集点预览</h3><div className="resource-point-list">{(preview.collection_points||[]).slice(0,8).map((cp:any)=><div key={cp.id||cp.name}><b>{cp.name}</b><span>{cp.unit||cp.value_range||"—"}</span></div>)}{pointCount(preview)===0&&<p>暂无采集点</p>}</div></div>}