fix: 设备模板页搜索框去除多余箭头图标; 重置按钮改标准antd样式(修正company-status-tabs后代选择器泄漏)

diff --git a/app/globals.css b/app/globals.css
index 98d72750418147723fec104579ce59276a44c12e..5dc49dae9b0332e27b2fc0161ec52f2e67da85db 100644 (file)
--- a/app/globals.css
+++ b/app/globals.css
@@ -261,9 +261,9 @@ html,body{font-family:var(--ant-font-family);font-size:var(--ant-font-size);line
 .steps{height:64px;border-top:0;border-bottom:1px solid var(--ant-color-border);padding:0 24px;background:var(--ant-color-bg-container)}.steps button{padding:0 20px;font-size:var(--ant-font-size)}.steps button>i{width:26px;height:26px}.steps button.active>i{background:var(--ant-color-primary);border-color:var(--ant-color-primary)}
 .panel{border:1px solid var(--ant-color-border);border-radius:0;background:var(--ant-color-bg-container);margin:16px 0;box-shadow:none}.panel-head{min-height:48px;padding:0 16px;background:var(--ant-color-bg-container)}.panel-head>strong{font-size:var(--ant-font-size)}.panel-body{padding:16px}
 .company-status-tabs{height:56px;display:flex;align-items:flex-end;border-bottom:1px solid var(--ant-color-border);gap:0;padding-top:8px}
 .steps{height:64px;border-top:0;border-bottom:1px solid var(--ant-color-border);padding:0 24px;background:var(--ant-color-bg-container)}.steps button{padding:0 20px;font-size:var(--ant-font-size)}.steps button>i{width:26px;height:26px}.steps button.active>i{background:var(--ant-color-primary);border-color:var(--ant-color-primary)}
 .panel{border:1px solid var(--ant-color-border);border-radius:0;background:var(--ant-color-bg-container);margin:16px 0;box-shadow:none}.panel-head{min-height:48px;padding:0 16px;background:var(--ant-color-bg-container)}.panel-head>strong{font-size:var(--ant-font-size)}.panel-body{padding:16px}
 .company-status-tabs{height:56px;display:flex;align-items:flex-end;border-bottom:1px solid var(--ant-color-border);gap:0;padding-top:8px}

-.company-status-tabs button{height:48px;min-width:120px;padding:0 24px;border:0;border-bottom:3px solid transparent;background:var(--ant-color-bg-container);color:var(--ant-color-text-secondary);font-size:var(--ant-font-size)}
-.company-status-tabs button span{margin-right:8px}.company-status-tabs button b{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 8px;border-radius:var(--ant-border-radius);background:var(--ant-color-bg-layout);color:var(--ant-color-text-secondary);font-size:var(--ant-font-size-sm)}
-.company-status-tabs button.active{color:var(--ant-color-primary);border-bottom-color:var(--ant-color-primary);font-weight:600}.company-status-tabs button.active b{background:var(--ant-color-fill-secondary);color:var(--ant-color-success)}
+.company-status-tabs > button{height:48px;min-width:120px;padding:0 24px;border:0;border-bottom:3px solid transparent;background:var(--ant-color-bg-container);color:var(--ant-color-text-secondary);font-size:var(--ant-font-size)}
+.company-status-tabs > button span{margin-right:8px}.company-status-tabs > button b{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 8px;border-radius:var(--ant-border-radius);background:var(--ant-color-bg-layout);color:var(--ant-color-text-secondary);font-size:var(--ant-font-size-sm)}
+.company-status-tabs > button.active{color:var(--ant-color-primary);border-bottom-color:var(--ant-color-primary);font-weight:600}.company-status-tabs > button.active b{background:var(--ant-color-fill-secondary);color:var(--ant-color-success)}

 .company-list-panel{margin-top:16px}.company-list-panel>.panel-body{padding:0 16px 12px}
 .company-filterbar{height:auto;min-height:56px;padding:12px 0;gap:8px}.company-filterbar .search-field{width:240px;height:32px;border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius);padding:0 12px;background:var(--ant-color-bg-container)}.company-filterbar .search-field:focus-within{border-color:var(--ant-color-primary)}
 .company-filterbar select{height:32px;min-width:160px;border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius);background:var(--ant-color-bg-container);padding:0 28px 0 12px}
 .company-list-panel{margin-top:16px}.company-list-panel>.panel-body{padding:0 16px 12px}
 .company-filterbar{height:auto;min-height:56px;padding:12px 0;gap:8px}.company-filterbar .search-field{width:240px;height:32px;border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius);padding:0 12px;background:var(--ant-color-bg-container)}.company-filterbar .search-field:focus-within{border-color:var(--ant-color-primary)}
 .company-filterbar select{height:32px;min-width:160px;border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius);background:var(--ant-color-bg-container);padding:0 28px 0 12px}


@@ -286,7 +286,7 @@ html,body{font-family:var(--ant-font-family);font-size:var(--ant-font-size);line
 .text-button{color:var(--ant-color-primary);font-size:var(--ant-font-size)}.modal,.login-card{border-radius:var(--ant-border-radius)}.modal{box-shadow:0 6px 24px color-mix(in srgb,var(--ant-color-text-base) 13%,transparent)}.toast{top:68px;border-radius:var(--ant-border-radius);background:var(--ant-color-text-base)}
 .ai-fab{box-shadow:0 4px 12px color-mix(in srgb,var(--ant-color-text-base) 20%,transparent)}.ai-dialog{border-radius:var(--ant-border-radius)}.ai-dialog header{background:var(--ant-color-primary)}
 @media(max-width:1200px){.company-form-page{grid-template-columns:180px minmax(0,1fr);gap:20px}.single-column-form .field,.form-section-heading,.form-guidance{max-width:100%}}
 .text-button{color:var(--ant-color-primary);font-size:var(--ant-font-size)}.modal,.login-card{border-radius:var(--ant-border-radius)}.modal{box-shadow:0 6px 24px color-mix(in srgb,var(--ant-color-text-base) 13%,transparent)}.toast{top:68px;border-radius:var(--ant-border-radius);background:var(--ant-color-text-base)}
 .ai-fab{box-shadow:0 4px 12px color-mix(in srgb,var(--ant-color-text-base) 20%,transparent)}.ai-dialog{border-radius:var(--ant-border-radius)}.ai-dialog header{background:var(--ant-color-primary)}
 @media(max-width:1200px){.company-form-page{grid-template-columns:180px minmax(0,1fr);gap:20px}.single-column-form .field,.form-section-heading,.form-guidance{max-width:100%}}

-@media(max-width:900px){.app-shell{padding-left:0}.side-nav{display:none}.workspace{min-width:0}.company-form-page{grid-template-columns:1fr}.form-section-nav{display:none}.content{padding:0 16px 20px}.page-heading{padding:12px 16px}.company-status-tabs{overflow-x:auto}.company-status-tabs button{min-width:100px}.company-filterbar{align-items:stretch;flex-wrap:wrap}.filter-actions{margin-left:0;width:100%}.result-pages article{grid-template-columns:1fr}.sticky-actions{left:0}}
+@media(max-width:900px){.app-shell{padding-left:0}.side-nav{display:none}.workspace{min-width:0}.company-form-page{grid-template-columns:1fr}.form-section-nav{display:none}.content{padding:0 16px 20px}.page-heading{padding:12px 16px}.company-status-tabs{overflow-x:auto}.company-status-tabs > button{min-width:100px}.company-filterbar{align-items:stretch;flex-wrap:wrap}.filter-actions{margin-left:0;width:100%}.result-pages article{grid-template-columns:1fr}.sticky-actions{left:0}}

 
 /* Company navigation IA: global menu contains business modules only. */
 .side-nav{display:none!important}
 
 /* Company navigation IA: global menu contains business modules only. */
 .side-nav{display:none!important}

diff --git a/app/page.tsx b/app/page.tsx
index 4faf360fa2cfb2b1c7a5b773b1bde335095ef3b1..a11ebaab2699be6f10103563f33d97bff37d31f9 100644 (file)
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2895,7 +2895,7 @@ function CompanyDeviceTemplates({notify,onViewCpPrompt,go,siteId,domainOptions,i
       {key:"",label:"全部",count:counts.all},{key:"configured",label:"已配置采集点",count:counts.configured},{key:"empty",label:"待配置",count:counts.empty}
     ].map(item=><UiButton 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></UiButton>)}</div>} content={<>
     <Panel className="company-list-panel resource-list-panel">
       {key:"",label:"全部",count:counts.all},{key:"configured",label:"已配置采集点",count:counts.configured},{key:"empty",label:"待配置",count:counts.empty}
     ].map(item=><UiButton 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></UiButton>)}</div>} content={<>
     <Panel className="company-list-panel resource-list-panel">

-      <div className="filterbar company-filterbar"><BrandSearchInput value={query} onChange={setQuery} placeholder="搜索设备名称或说明"/><UiSelect aria-label="领域筛选" value={domainFilter} onChange={e=>setDomainFilter(e.target.value)}><option value="">全部领域</option>{domainOptions.map(domain=><option key={domain.id} value={domain.name}>{domain.name}</option>)}</UiSelect><UiActions className="filter-actions"><Button secondary onClick={()=>{setQuery("");setPointFilter("");setDomainFilter("");}}>重置</Button><Button onClick={()=>setOpenId("create")}>＋ 新增模板</Button></UiActions></div>
+      <div className="filterbar company-filterbar"><BrandSearchInput value={query} onChange={setQuery} placeholder="搜索设备名称或说明"/><UiSelect aria-label="领域筛选" value={domainFilter} onChange={e=>setDomainFilter(e.target.value)}><option value="">全部领域</option>{domainOptions.map(domain=><option key={domain.id} value={domain.name}>{domain.name}</option>)}</UiSelect><UiActions className="filter-actions"><AntButton onClick={()=>{setQuery("");setPointFilter("");setDomainFilter("");}}>重置</AntButton><Button onClick={()=>setOpenId("create")}>＋ 新增模板</Button></UiActions></div>

       {loading?<div className="empty-state">加载中…</div>:<><UiTable 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={()=>setOpenId(row.id)}><td><UiButton className="link company-record-link" title={row.name} onClick={e=>{e.stopPropagation();setOpenId(row.id);}}><b>{row.name||"未命名设备模板"}</b></UiButton></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></UiTable>{filtered.length===0&&<div className="empty-state">暂无符合条件的设备模板</div>}<BrandPagination current={pageIndex} totalPages={Math.max(1,Math.ceil(filtered.length/pageSize))} pageSize={pageSize} onPageChange={setPageIndex} onPageSizeChange={size=>{setPageSize(size);setPageIndex(1);}}/></>}
     </Panel></>}/>
   </>;
       {loading?<div className="empty-state">加载中…</div>:<><UiTable 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={()=>setOpenId(row.id)}><td><UiButton className="link company-record-link" title={row.name} onClick={e=>{e.stopPropagation();setOpenId(row.id);}}><b>{row.name||"未命名设备模板"}</b></UiButton></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></UiTable>{filtered.length===0&&<div className="empty-state">暂无符合条件的设备模板</div>}<BrandPagination current={pageIndex} totalPages={Math.max(1,Math.ceil(filtered.length/pageSize))} pageSize={pageSize} onPageChange={setPageIndex} onPageSizeChange={size=>{setPageSize(size);setPageIndex(1);}}/></>}
     </Panel></>}/>
   </>;

diff --git a/src/components/search-input/index.tsx b/src/components/search-input/index.tsx
index dd67a050377e3d54b0f6fcd8161359fee6c7be7a..41359ddc6cdca0a82b10558d591df5f8b5473c6a 100644 (file)
--- a/src/components/search-input/index.tsx
+++ b/src/components/search-input/index.tsx
@@ -1,6 +1,5 @@
-// 带搜索图标和下拉箭头的搜索输入框
+// 带搜索图标的搜索输入框

 import { Input } from 'antd';
 import { Input } from 'antd';

-import { CaretDownOutlined } from '@ant-design/icons';

 import SvgIcon from '../icons/svgIcon';
 import './index.less';
 
 import SvgIcon from '../icons/svgIcon';
 import './index.less';
 


@@ -21,7 +20,6 @@ const SearchInput = ({ value, placeholder, className, onChange }: SearchInputPro
     prefix={
       <span className="search-prefix">
         <SvgIcon name="search" size={24} />
     prefix={
       <span className="search-prefix">
         <SvgIcon name="search" size={24} />

-        <CaretDownOutlined />

       </span>
     }
   />
       </span>
     }
   />