@finebi/finebi-cli 1.6.1 → 1.6.2

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/App.tsx

@@ -1,56 +1,63 @@
-import {lazy,Suspense,useEffect,useRef,useState} from 'react';
-import {queryWidget,validateConfig} from './finebi/client';
-import type {AppConfig,FilterState,WidgetBinding} from './finebi/types';
-import {Boundary,Widget} from './components/Widget';
-import {Insights} from './components/Insights';
-import {loadWidgets,widgetKey,type WidgetState} from './services/widget-queries';
-import './cockpit.css';
-import './retail.css';
-const FilterBar=lazy(()=>import('./components/FilterBar').then(module=>({default:module.FilterBar})));
-function Dashboard({config}: {config: AppConfig}) {
-  const [filters,setFilters]=useState<FilterState>({}),[refresh,setRefresh]=useState(0);
-  const [states,setStates]=useState<Record<string,WidgetState>>({});
-  const generation=useRef(0),retries=useRef(new Map<string,AbortController>());
-  useEffect(()=>{
-    const controller=new AbortController();generation.current++;setStates({});
-    void loadWidgets(config,filters,controller.signal,(key,state)=>setStates(old=>({...old,[key]:state})));
-    return ()=>{controller.abort();retries.current.forEach(c=>c.abort());retries.current.clear();};
-  },[config,filters,refresh]);
-  const retry=async(binding:WidgetBinding,index:number)=>{
-    const key=widgetKey(binding,index),current=generation.current,controller=new AbortController();
-    retries.current.get(key)?.abort();retries.current.set(key,controller);
-    setStates(old=>({...old,[key]:{loading:true}}));
-    try {const result=await queryWidget(config,binding,filters,controller.signal);if(current===generation.current&&!controller.signal.aborted)setStates(old=>({...old,[key]:{loading:false,result,at:new Date().toLocaleTimeString()}}));}
-    catch(error){if(current===generation.current&&!controller.signal.aborted)setStates(old=>({...old,[key]:{loading:false,error:error as Error}}));}
-  };
-  const complete=Object.values(states).filter(s=>s.result).length,failed=Object.values(states).filter(s=>s.error).length;
-  const scope=Object.fromEntries(config.filters.map(filter=>{
-    const known=config.widgets.filter(w=>w.filterNames?.includes(filter.name)).map(w=>w.name);
-    const unknown=config.widgets.some(w=>w.filterNames===undefined);
-    return [filter.name,`${known.length?known.join('、'):'无已确认组件'}${unknown?'；未映射组件由源看板决定':''}`];
-  }));
-  const retail=config.layout==='retail';
-  const card=(binding:WidgetBinding,index:number)=><Widget key={`${refresh}-${JSON.stringify(filters)}-${index}`} binding={binding} state={states[widgetKey(binding,index)]??{loading:true}} pageSize={config.pageSize} onRetry={()=>void retry(binding,index)} compact={retail}/>;
-  const cockpit=config.layout==='cockpit';
-  const separateKpis=cockpit||retail;
-  return <div className={`app ${config.layout}`}>
-    {retail&&<nav className="retail-nav" aria-label="页面导航"><a className="retail-brand" href="#dashboard"><b>F.</b><span>FineBI <small>经营简报</small></span></a><div><a href="#dashboard">经营概览</a><a href="#components">销售分析</a><a href="#data-notes">口径说明</a></div><span className="retail-live">动态数据</span></nav>}
-    {config.layout!=='overview'&&!retail&&<aside><strong>FineBI<span>数据应用</span></strong><nav><a href="#dashboard">数据概览</a><a href="#components">分析组件</a>{config.insights&&<a href="#observations">经营观察</a>}<a href="#data-notes">数据口径</a></nav><p className="source-label">{config.directoryEntryId?'目录发布来源':'分析主题来源'}<br/>访问者权限由 FineBI 控制</p></aside>}
-    <main id="dashboard"><header><div><span className="eyebrow">FINEBI · LIVE DATA</span><h1>{config.title}</h1><p className="muted">{config.description??'基于源看板的实时数据，按当前访问权限呈现'}</p></div><div className="header-actions"><a href={retail?'#data-notes':config.basePath} target={retail?undefined:'_blank'} rel="noreferrer">{retail?'口径说明':'打开 FineBI'}</a><button onClick={()=>setRefresh(n=>n+1)}>刷新数据</button></div></header>
-    {config.filters.length>0&&<Boundary><Suspense fallback={<p role="status">正在加载筛选控件…</p>}><FilterBar bindings={config.filters} onApply={setFilters} cockpit={cockpit} scope={scope} compact={retail}/></Suspense></Boundary>}
-    <p className="live query-status" role="status">{config.widgets.length} 个展示组件 · 已返回 {complete} · 失败 {failed} · 其余加载中或等待查询</p>
-    {retail&&<div className="section-heading"><span>01 / OVERVIEW</span><h2>经营概览</h2><p>源看板当前条件 · 随查询更新</p></div>}
-    {separateKpis&&<div className="kpi-grid">{config.widgets.map((binding,i)=>binding.type==='kpi'?card(binding,i):null)}</div>}
-    {config.insights&&<Insights config={config} states={states}/>}
-    {retail&&<div className="section-heading" id="components"><span>02 / PERFORMANCE</span><h2>销售表现</h2><p>趋势、构成与门店表现</p></div>}
-    <div className="grid" id={retail?undefined:'components'}>{config.widgets.map((binding,i)=>!separateKpis||binding.type!=='kpi'?card(binding,i):null)}</div>
-    <details className="data-notes" id="data-notes"><summary>数据口径与范围</summary><p>当前仅消费单次返回结果；COMPLETE 表示本次转换完整，不保证全量。搜索、排序、筛选、分页和 CSV 仅作用于已加载数据。UNKNOWN 行不自动累加，受限值与空值不补零。</p>{config.dataNotes?.map((note,i)=><p key={i}>{note}</p>)}<p>{config.directoryEntryId?'目录入口已绑定；查询失败不会切换到其他来源。':'来源为当前配置的分析看板。'}</p></details>
-    <footer>数据范围以当前查询结果为准 · 权限由 FineBI 服务端控制</footer></main>
-  </div>;
-}
-export default function App() {
-  const [config, setConfig] = useState<AppConfig>(); const [error, setError] = useState('');
-  useEffect(()=>{const controller=new AbortController(); fetch('./app-config.json',{signal:controller.signal,cache:'no-store'}).then(r=>{if(!r.ok)throw Error('应用配置加载失败');return r.json();}).then(c=>{validateConfig(c);setConfig(c);}).catch(e=>{if(!controller.signal.aborted)setError(e.message);});return()=>controller.abort();},[]);
-  if(error)return <main className="state" role="alert"><h1>请完成应用配置</h1><p>{error}</p><p>在 public/app-config.json 中绑定 CLI 发现的仪表板实例与字段。</p></main>;
-  return config ? <Dashboard config={config}/> : <p className="state">正在加载应用…</p>;
-}
+import {lazy,Suspense,useEffect,useRef,useState} from 'react';
+import {queryWidget,validateConfig} from './finebi/client';
+import type {AppConfig,FilterState,WidgetBinding} from './finebi/types';
+import {Boundary,Widget} from './components/Widget';
+import {Insights} from './components/Insights';
+import {loadWidgets,widgetKey,type WidgetState} from './services/widget-queries';
+import './cockpit.css';
+import './retail.css';
+const FilterBar=lazy(()=>import('./components/FilterBar').then(module=>({default:module.FilterBar})));
+function Dashboard({config}: {config: AppConfig}) {
+  const [filters,setFilters]=useState<FilterState>({}),[refresh,setRefresh]=useState(0);
+  const [states,setStates]=useState<Record<string,WidgetState>>({});
+  const [activeHash,setActiveHash]=useState(()=>window.location.hash||'#dashboard');
+  useEffect(()=>{
+    const syncHash=()=>setActiveHash(window.location.hash||'#dashboard');
+    window.addEventListener('hashchange',syncHash);
+    syncHash();
+    return ()=>window.removeEventListener('hashchange',syncHash);
+  },[]);
+  const generation=useRef(0),retries=useRef(new Map<string,AbortController>());
+  useEffect(()=>{
+    const controller=new AbortController();generation.current++;setStates({});
+    void loadWidgets(config,filters,controller.signal,(key,state)=>setStates(old=>({...old,[key]:state})));
+    return ()=>{controller.abort();retries.current.forEach(c=>c.abort());retries.current.clear();};
+  },[config,filters,refresh]);
+  const retry=async(binding:WidgetBinding,index:number)=>{
+    const key=widgetKey(binding,index),current=generation.current,controller=new AbortController();
+    retries.current.get(key)?.abort();retries.current.set(key,controller);
+    setStates(old=>({...old,[key]:{loading:true}}));
+    try {const result=await queryWidget(config,binding,filters,controller.signal);if(current===generation.current&&!controller.signal.aborted)setStates(old=>({...old,[key]:{loading:false,result,at:new Date().toLocaleTimeString()}}));}
+    catch(error){if(current===generation.current&&!controller.signal.aborted)setStates(old=>({...old,[key]:{loading:false,error:error as Error}}));}
+  };
+  const complete=Object.values(states).filter(s=>s.result).length,failed=Object.values(states).filter(s=>s.error).length;
+  const scope=Object.fromEntries(config.filters.map(filter=>{
+    const known=config.widgets.filter(w=>w.filterNames?.includes(filter.name)).map(w=>w.name);
+    const unknown=config.widgets.some(w=>w.filterNames===undefined);
+    return [filter.name,`${known.length?known.join('、'):'无已确认组件'}${unknown?'；未映射组件由源看板决定':''}`];
+  }));
+  const retail=config.layout==='retail';
+  const card=(binding:WidgetBinding,index:number)=><Widget key={`${refresh}-${JSON.stringify(filters)}-${index}`} binding={binding} state={states[widgetKey(binding,index)]??{loading:true}} pageSize={config.pageSize} onRetry={()=>void retry(binding,index)} compact={retail}/>;
+  const cockpit=config.layout==='cockpit';
+  const separateKpis=cockpit||retail;
+  return <div className={`app ${config.layout}`}>
+    {retail&&<nav className="retail-nav" aria-label="页面导航"><a className="retail-brand" href="#dashboard"><b>F.</b><span>FineBI <small>经营简报</small></span></a><div><a href="#dashboard" aria-current={activeHash==='#dashboard'?'location':undefined}>经营概览</a><a href="#components" aria-current={activeHash==='#components'?'location':undefined}>销售分析</a><a href="#data-notes" aria-current={activeHash==='#data-notes'?'location':undefined}>口径说明</a></div><span className="retail-live">动态数据</span></nav>}
+    {config.layout!=='overview'&&!retail&&<aside><strong>FineBI<span>数据应用</span></strong><nav><a href="#dashboard">数据概览</a><a href="#components">分析组件</a>{config.insights&&<a href="#observations">经营观察</a>}<a href="#data-notes">数据口径</a></nav><p className="source-label">{config.directoryEntryId?'目录发布来源':'分析主题来源'}<br/>访问者权限由 FineBI 控制</p></aside>}
+    <main id="dashboard"><header><div><span className="eyebrow">FINEBI · LIVE DATA</span><h1>{config.title}</h1><p className="muted">{config.description??'基于源看板的实时数据，按当前访问权限呈现'}</p></div><div className="header-actions"><a href={retail?'#data-notes':config.basePath} target={retail?undefined:'_blank'} rel="noreferrer">{retail?'口径说明':'打开 FineBI'}</a><button onClick={()=>setRefresh(n=>n+1)}>刷新数据</button></div></header>
+    {config.filters.length>0&&<Boundary><Suspense fallback={<p role="status">正在加载筛选控件…</p>}><FilterBar bindings={config.filters} onApply={setFilters} cockpit={cockpit} scope={scope} compact={retail}/></Suspense></Boundary>}
+    <p className="live query-status" role="status">{config.widgets.length} 个展示组件 · 已返回 {complete} · 失败 {failed} · 其余加载中或等待查询</p>
+    {retail&&<div className="section-heading"><span>01 / OVERVIEW</span><h2>经营概览</h2><p>源看板当前条件 · 随查询更新</p></div>}
+    {separateKpis&&<div className="kpi-grid">{config.widgets.map((binding,i)=>binding.type==='kpi'?card(binding,i):null)}</div>}
+    {config.insights&&<Insights config={config} states={states}/>}
+    {retail&&<div className="section-heading" id="components"><span>02 / PERFORMANCE</span><h2>销售表现</h2><p>趋势、构成与门店表现</p></div>}
+    <div className="grid" id={retail?undefined:'components'}>{config.widgets.map((binding,i)=>!separateKpis||binding.type!=='kpi'?card(binding,i):null)}</div>
+    <details className="data-notes" id="data-notes"><summary>数据口径与范围</summary><p>当前仅消费单次返回结果；COMPLETE 表示本次转换完整，不保证全量。搜索、排序、筛选、分页和 CSV 仅作用于已加载数据。UNKNOWN 行不自动累加，受限值与空值不补零。</p>{config.dataNotes?.map((note,i)=><p key={i}>{note}</p>)}<p>{config.directoryEntryId?'目录入口已绑定；查询失败不会切换到其他来源。':'来源为当前配置的分析看板。'}</p></details>
+    <footer>数据范围以当前查询结果为准 · 权限由 FineBI 服务端控制</footer></main>
+  </div>;
+}
+export default function App() {
+  const [config, setConfig] = useState<AppConfig>(); const [error, setError] = useState('');
+  useEffect(()=>{const controller=new AbortController(); fetch('./app-config.json',{signal:controller.signal,cache:'no-store'}).then(r=>{if(!r.ok)throw Error('应用配置加载失败');return r.json();}).then(c=>{validateConfig(c);setConfig(c);}).catch(e=>{if(!controller.signal.aborted)setError(e.message);});return()=>controller.abort();},[]);
+  if(error)return <main className="state" role="alert"><h1>请完成应用配置</h1><p>{error}</p><p>在 public/app-config.json 中绑定 CLI 发现的仪表板实例与字段。</p></main>;
+  return config ? <Dashboard config={config}/> : <p className="state">正在加载应用…</p>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/cockpit.css

@@ -1,3 +1,3 @@
-.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-heading h2{margin-bottom:6px}.component-status{font-size:10px;color:#71867d;white-space:nowrap}.component-status.failed{color:#bd534f}.result-range,.filter-scope{font-size:11px;color:#84928b;overflow-wrap:anywhere}.filter-scope{margin:4px 0 10px}.component-error{padding:14px 0;color:#af4e46;overflow-wrap:anywhere}.component-error button{color:#8f5044}.header-actions{display:flex;gap:18px;align-items:center;white-space:nowrap}.insight-panel{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;background:#edf6f1;border:1px solid #dbece2;border-radius:15px;padding:24px;margin:24px 0}.insight-panel h2{margin:8px 0}.insight-panel p{font-size:12px;color:#6b8576}.insight-panel ul{margin:0;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:12px;color:#37604a}.data-notes{background:#fff;padding:20px 24px;border:1px solid #e2e8e3;border-radius:12px;margin-top:24px;font-size:12px}.sort-column{border:0;background:transparent;padding:0;font-weight:600;font-size:inherit}.local-filters,.series-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:16px}.local-filters label{font-size:12px;color:#64748b}.local-filters select{margin-left:8px;max-width:220px}.series-controls{font-size:12px}.series-controls label{display:flex;gap:6px;align-items:center}.workbench aside strong span{display:block;font-size:12px;font-weight:400}.source-label{font-size:11px;line-height:1.9;opacity:.65;margin-top:45px}
-.cockpit{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100vh;background:#f3f6f3;color:#253f33}.cockpit aside{background:#123d2c;color:#e0ece4;padding:38px 24px;position:sticky;top:0;height:100vh;min-height:0;display:flex;flex-direction:column}.cockpit aside strong{font-size:27px;letter-spacing:-1px}.cockpit aside strong span{display:block;font-size:11px;letter-spacing:3px;font-weight:400;margin-top:3px;color:#b1c6b8}.cockpit aside nav{margin-top:48px}.cockpit aside a{display:block;font-size:13px;margin:8px -8px;padding:12px 16px;color:#c5d5ca;border-radius:8px;transition:background .15s}.cockpit aside a:hover{background:#ffffff10;color:white}.cockpit aside a:first-child{background:#ffffff13;color:#fff}.cockpit .source-label{margin-top:auto;padding-top:40px}.cockpit main{width:100%;max-width:1640px;padding:38px 40px}.cockpit header{padding-bottom:22px;border-bottom:1px solid #dfe8df;margin-bottom:26px}.cockpit h1{font-size:29px;letter-spacing:-.8px;margin:8px 0}.cockpit h2{font-size:15px;font-weight:650}.cockpit .eyebrow{font-size:10px;color:#659476;letter-spacing:2.5px}.cockpit .muted{font-size:12px;color:#839186}.cockpit a{color:#35775a}.cockpit button:hover{border-color:#197a58}.cockpit .header-actions>button{background:#197a58;border-color:#197a58;color:white;padding:10px 18px}.cockpit .grid{gap:20px}.cockpit .panel{border:1px solid #e0e8df;border-radius:14px;padding:24px;box-shadow:0 3px 12px #193f2103}.cockpit .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.cockpit .widget-kpi{position:relative;overflow:hidden}.cockpit .widget-kpi:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#448b64}.cockpit .widget-kpi:nth-child(2):before{background:#588db2}.cockpit .widget-kpi:nth-child(3):before{background:#d2ad60}.cockpit .widget-kpi:nth-child(4):before{background:#8f7db0}.cockpit .widget-kpi .panel-heading{display:block}.cockpit .widget-kpi .component-status{font-size:9px}.cockpit .kpi{font-size:clamp(22px,2.3vw,36px);color:#24533b;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:15px 0 6px}.cockpit .widget-kpi .result-range{font-size:9px}.cockpit .filter-card{border-color:#dfe8df;border-radius:14px}.cockpit .filter-symbol{color:#377d57;background:#edf5ef}.cockpit .filter-heading h2,.cockpit .filter-label-row label{color:#35533f}.cockpit .query-status{margin:18px 0;color:#6a8976;font-size:11px}.cockpit footer{font-size:11px;color:#8b9b8f}.cockpit .notice{border-radius:5px;font-size:11px}.cockpit .chart{height:290px}.cockpit th{background:#f5f8f4;color:#54725d}.cockpit tbody tr:hover{background:#f5f8f4}.cockpit .table-tools{font-size:11px;flex-wrap:wrap}.cockpit .table-tools input{max-width:220px}.cockpit .pager{font-size:12px}.cockpit .data-notes{color:#6d8171}
-@media(min-width:1500px){.cockpit main{padding:42px 54px}}@media(max-width:1150px){.cockpit{grid-template-columns:170px minmax(0,1fr)}.cockpit main{padding:28px 24px}.cockpit .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-panel{grid-template-columns:1fr;gap:8px}}@media(max-width:800px){.cockpit{grid-template-columns:1fr}.cockpit aside{display:none}.cockpit main{padding:24px 18px}.cockpit .grid{grid-template-columns:1fr}.cockpit header{align-items:flex-start;gap:20px;flex-direction:column}.cockpit h1{font-size:25px}.cockpit .filter-card{padding:20px 18px}.insight-panel ul{grid-template-columns:1fr}.cockpit .panel{padding:20px}.header-actions{font-size:12px}.local-filters{align-items:stretch;flex-direction:column}.cockpit .kpi-grid{gap:12px}.cockpit .kpi-grid .panel{padding:17px 14px}.cockpit .kpi{font-size:24px}.table-tools input{max-width:180px}.panel-heading{flex-wrap:wrap}.component-status{white-space:normal}}@media(prefers-reduced-motion:reduce){.cockpit *{transition:none!important;scroll-behavior:auto!important}}
+.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-heading h2{margin-bottom:6px}.component-status{font-size:10px;color:#71867d;white-space:nowrap}.component-status.failed{color:#bd534f}.result-range,.filter-scope{font-size:11px;color:#84928b;overflow-wrap:anywhere}.filter-scope{margin:4px 0 10px}.component-error{padding:14px 0;color:#af4e46;overflow-wrap:anywhere}.component-error button{color:#8f5044}.header-actions{display:flex;gap:18px;align-items:center;white-space:nowrap}.insight-panel{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;background:#edf6f1;border:1px solid #dbece2;border-radius:15px;padding:24px;margin:24px 0}.insight-panel h2{margin:8px 0}.insight-panel p{font-size:12px;color:#6b8576}.insight-panel ul{margin:0;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:12px;color:#37604a}.data-notes{background:#fff;padding:20px 24px;border:1px solid #e2e8e3;border-radius:12px;margin-top:24px;font-size:12px}.sort-column{border:0;background:transparent;padding:0;font-weight:600;font-size:inherit}.local-filters,.series-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:16px}.local-filters label{font-size:12px;color:#64748b}.local-filters select{margin-left:8px;max-width:220px}.series-controls{font-size:12px}.series-controls label{display:flex;gap:6px;align-items:center}.workbench aside strong span{display:block;font-size:12px;font-weight:400}.source-label{font-size:11px;line-height:1.9;opacity:.65;margin-top:45px}
+.cockpit{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100vh;background:#f3f6f3;color:#253f33}.cockpit aside{background:#123d2c;color:#e0ece4;padding:38px 24px;position:sticky;top:0;height:100vh;min-height:0;display:flex;flex-direction:column}.cockpit aside strong{font-size:27px;letter-spacing:-1px}.cockpit aside strong span{display:block;font-size:11px;letter-spacing:3px;font-weight:400;margin-top:3px;color:#b1c6b8}.cockpit aside nav{margin-top:48px}.cockpit aside a{display:block;font-size:13px;margin:8px -8px;padding:12px 16px;color:#c5d5ca;border-radius:8px;transition:background .15s}.cockpit aside a:hover{background:#ffffff10;color:white}.cockpit aside a:first-child{background:#ffffff13;color:#fff}.cockpit .source-label{margin-top:auto;padding-top:40px}.cockpit main{width:100%;max-width:1640px;padding:38px 40px}.cockpit header{padding-bottom:22px;border-bottom:1px solid #dfe8df;margin-bottom:26px}.cockpit h1{font-size:29px;letter-spacing:-.8px;margin:8px 0}.cockpit h2{font-size:15px;font-weight:650}.cockpit .eyebrow{font-size:10px;color:#659476;letter-spacing:2.5px}.cockpit .muted{font-size:12px;color:#839186}.cockpit a{color:#35775a}.cockpit button:hover{border-color:#197a58}.cockpit .header-actions>button{background:#197a58;border-color:#197a58;color:white;padding:10px 18px}.cockpit .grid{gap:20px}.cockpit .panel{border:1px solid #e0e8df;border-radius:14px;padding:24px;box-shadow:0 3px 12px #193f2103}.cockpit .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.cockpit .widget-kpi{position:relative;overflow:hidden}.cockpit .widget-kpi:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#448b64}.cockpit .widget-kpi:nth-child(2):before{background:#588db2}.cockpit .widget-kpi:nth-child(3):before{background:#d2ad60}.cockpit .widget-kpi:nth-child(4):before{background:#8f7db0}.cockpit .widget-kpi .panel-heading{display:block}.cockpit .widget-kpi .component-status{font-size:9px}.cockpit .kpi{font-size:clamp(22px,2.3vw,36px);color:#24533b;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:15px 0 6px}.cockpit .widget-kpi .result-range{font-size:9px}.cockpit .filter-card{border-color:#dfe8df;border-radius:14px}.cockpit .filter-symbol{color:#377d57;background:#edf5ef}.cockpit .filter-heading h2,.cockpit .filter-label-row label{color:#35533f}.cockpit .query-status{margin:18px 0;color:#6a8976;font-size:11px}.cockpit footer{font-size:11px;color:#8b9b8f}.cockpit .notice{border-radius:5px;font-size:11px}.cockpit .chart{height:290px}.cockpit th{background:#f5f8f4;color:#54725d}.cockpit tbody tr:hover{background:#f5f8f4}.cockpit .table-tools{font-size:11px;flex-wrap:wrap}.cockpit .table-tools input{max-width:220px}.cockpit .pager{font-size:12px}.cockpit .data-notes{color:#6d8171}
+@media(min-width:1500px){.cockpit main{padding:42px 54px}}@media(max-width:1150px){.cockpit{grid-template-columns:170px minmax(0,1fr)}.cockpit main{padding:28px 24px}.cockpit .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-panel{grid-template-columns:1fr;gap:8px}}@media(max-width:800px){.cockpit{grid-template-columns:1fr}.cockpit aside{display:none}.cockpit main{padding:24px 18px}.cockpit .grid{grid-template-columns:1fr}.cockpit header{align-items:flex-start;gap:20px;flex-direction:column}.cockpit h1{font-size:25px}.cockpit .filter-card{padding:20px 18px}.insight-panel ul{grid-template-columns:1fr}.cockpit .panel{padding:20px}.header-actions{font-size:12px}.local-filters{align-items:stretch;flex-direction:column}.cockpit .kpi-grid{gap:12px}.cockpit .kpi-grid .panel{padding:17px 14px}.cockpit .kpi{font-size:24px}.table-tools input{max-width:180px}.panel-heading{flex-wrap:wrap}.component-status{white-space:normal}}@media(prefers-reduced-motion:reduce){.cockpit *{transition:none!important;scroll-behavior:auto!important}}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/Chart.tsx

@@ -1,40 +1,40 @@
-import {useEffect, useRef, useState} from 'react';
-import * as echarts from 'echarts/core';
-import {TooltipComponent} from 'echarts/components';
-import {CanvasRenderer} from 'echarts/renderers';
-import type {Dataset, WidgetBinding} from '../finebi/types';
-import {chartValues,displayCell} from '../services/view-data';
-import {formatCategory} from '../services/presentation';
-echarts.use([TooltipComponent, CanvasRenderer]);
-export function Chart({dataset, binding}: {dataset: Dataset; binding: WidgetBinding}) {
-  const container = useRef<HTMLDivElement>(null);
-  const [order, setOrder] = useState('source');
-  const [metric,setMetric]=useState(0),[hidden,setHidden]=useState<string[]>([]);
-  const series=binding.series??[{fieldId:binding.valueFieldId!,label:binding.name}];
-  const all=series.map(s=>({...s,values:chartValues(dataset,{categoryFieldId:binding.categoryFieldId,valueFieldId:s.fieldId})}));
-  const active=binding.type==='bar'?[all[metric]??all[0]]:all.filter(s=>!hidden.includes(s.fieldId));
-  const values=all[0].values;
-  useEffect(() => {
-    if (!container.current) return;
-    const chart = echarts.init(container.current);
-    const style=getComputedStyle(container.current);
-    const palette=['#197a58','#4988bd','#d6aa4e','#8b75b5','#ec4899'].map((color,i)=>style.getPropertyValue(`--chart-${i+1}`).trim()||color);
-    const categoryIndex=dataset.columns.findIndex(c=>c.fieldId===binding.categoryFieldId);
-    const categoryNames=dataset.rows.map(row=>formatCategory(row.cells[categoryIndex],binding));
-    const indices=values.map((_,i)=>i),ordered=active[0]?.values??values;
-    if(order!=='source')indices.sort((i,j)=>ordered[i].value===null?1:ordered[j].value===null?-1:(ordered[i].value!-ordered[j].value!)*(order==='asc'?1:-1));
-    chart.setOption({
-      color: palette,
-      tooltip: {trigger: binding.type === 'pie' ? 'item' : 'axis', renderMode: 'richText'},
-      ...(binding.type === 'pie' ? {legend:{bottom:0}} : {
-        grid:{left:24,right:24,top:24,bottom:24,containLabel:true},
-        xAxis:{type:'category',data:indices.map(i=>categoryNames[i]),axisLabel:{rotate:values.length>8?30:0}},
-        yAxis:{type:'value'},
-      }),
-      series: active.map(s=>({name:s.label,type:binding.type,connectNulls:false,data:indices.map(i=>binding.type==='pie'?s.values[i]:s.values[i].value),radius:binding.type==='pie'?['42%','67%']:undefined})),
-    });
-    const observer = new ResizeObserver(() => chart.resize()); observer.observe(container.current);
-    return () => {observer.disconnect(); chart.dispose();};
-  }, [dataset, binding, order,metric,hidden]);
-  return <>{all.length>1&&<div className="series-controls">{binding.type==='bar'?<label>显示指标 <select aria-label={`${binding.name}指标`} value={metric} onChange={e=>setMetric(Number(e.target.value))}>{all.map((s,i)=><option key={s.fieldId} value={i}>{s.label}</option>)}</select></label>:all.map(s=><label key={s.fieldId}><input type="checkbox" checked={!hidden.includes(s.fieldId)} onChange={e=>setHidden(old=>e.target.checked?old.filter(id=>id!==s.fieldId):[...old,s.fieldId])}/>{s.label}</label>)}</div>}<label className="chart-sort">显示顺序 <select aria-label={`${binding.name}显示顺序`} value={order} onChange={e => setOrder(e.target.value)}><option value="source">查询顺序</option><option value="desc">已返回值降序</option><option value="asc">已返回值升序</option></select></label><div className="chart" ref={container} role="img" aria-label={binding.name}/><details><summary>查看图表原始显示值（已加载结果）</summary><div className="table-scroll"><table><thead><tr>{dataset.columns.map(c=><th key={c.key}>{c.name}</th>)}</tr></thead><tbody>{dataset.rows.map((row,i)=><tr key={i}>{row.cells.map((cell,j)=><td key={j}>{displayCell(cell)}</td>)}</tr>)}</tbody></table></div></details></>;
-}
+import {useEffect, useRef, useState} from 'react';
+import * as echarts from 'echarts/core';
+import {TooltipComponent} from 'echarts/components';
+import {CanvasRenderer} from 'echarts/renderers';
+import type {Dataset, WidgetBinding} from '../finebi/types';
+import {chartValues,displayCell} from '../services/view-data';
+import {formatCategory} from '../services/presentation';
+echarts.use([TooltipComponent, CanvasRenderer]);
+export function Chart({dataset, binding}: {dataset: Dataset; binding: WidgetBinding}) {
+  const container = useRef<HTMLDivElement>(null);
+  const [order, setOrder] = useState('source');
+  const [metric,setMetric]=useState(0),[hidden,setHidden]=useState<string[]>([]);
+  const series=binding.series??[{fieldId:binding.valueFieldId!,label:binding.name}];
+  const all=series.map(s=>({...s,values:chartValues(dataset,{categoryFieldId:binding.categoryFieldId,valueFieldId:s.fieldId})}));
+  const active=binding.type==='bar'?[all[metric]??all[0]]:all.filter(s=>!hidden.includes(s.fieldId));
+  const values=all[0].values;
+  useEffect(() => {
+    if (!container.current) return;
+    const chart = echarts.init(container.current);
+    const style=getComputedStyle(container.current);
+    const palette=['#197a58','#4988bd','#d6aa4e','#8b75b5','#ec4899'].map((color,i)=>style.getPropertyValue(`--chart-${i+1}`).trim()||color);
+    const categoryIndex=dataset.columns.findIndex(c=>c.fieldId===binding.categoryFieldId);
+    const categoryNames=dataset.rows.map(row=>formatCategory(row.cells[categoryIndex],binding));
+    const indices=values.map((_,i)=>i),ordered=active[0]?.values??values;
+    if(order!=='source')indices.sort((i,j)=>ordered[i].value===null?1:ordered[j].value===null?-1:(ordered[i].value!-ordered[j].value!)*(order==='asc'?1:-1));
+    chart.setOption({
+      color: palette,
+      tooltip: {trigger: binding.type === 'pie' ? 'item' : 'axis', renderMode: 'richText'},
+      ...(binding.type === 'pie' ? {legend:{bottom:0}} : {
+        grid:{left:24,right:24,top:24,bottom:24,containLabel:true},
+        xAxis:{type:'category',data:indices.map(i=>categoryNames[i]),axisLabel:{rotate:values.length>8?30:0}},
+        yAxis:{type:'value'},
+      }),
+      series: active.map(s=>({name:s.label,type:binding.type,connectNulls:false,data:indices.map(i=>binding.type==='pie'?s.values[i]:s.values[i].value),radius:binding.type==='pie'?['42%','67%']:undefined})),
+    });
+    const observer = new ResizeObserver(() => chart.resize()); observer.observe(container.current);
+    return () => {observer.disconnect(); chart.dispose();};
+  }, [dataset, binding, order,metric,hidden]);
+  return <>{all.length>1&&<div className="series-controls">{binding.type==='bar'?<label>显示指标 <select aria-label={`${binding.name}指标`} value={metric} onChange={e=>setMetric(Number(e.target.value))}>{all.map((s,i)=><option key={s.fieldId} value={i}>{s.label}</option>)}</select></label>:all.map(s=><label key={s.fieldId}><input type="checkbox" checked={!hidden.includes(s.fieldId)} onChange={e=>setHidden(old=>e.target.checked?old.filter(id=>id!==s.fieldId):[...old,s.fieldId])}/>{s.label}</label>)}</div>}<label className="chart-sort">显示顺序 <select aria-label={`${binding.name}显示顺序`} value={order} onChange={e => setOrder(e.target.value)}><option value="source">查询顺序</option><option value="desc">已返回值降序</option><option value="asc">已返回值升序</option></select></label><div className="chart" ref={container} role="img" aria-label={binding.name}/><details><summary>查看图表原始显示值（已加载结果）</summary><div className="table-scroll"><table><thead><tr>{dataset.columns.map(c=><th key={c.key}>{c.name}</th>)}</tr></thead><tbody>{dataset.rows.map((row,i)=><tr key={i}>{row.cells.map((cell,j)=><td key={j}>{displayCell(cell)}</td>)}</tr>)}</tbody></table></div></details></>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/DataTable.tsx

@@ -15,7 +15,7 @@ export function DataTable({dataset, pageSize,binding}: {dataset: Dataset; pageSi
   const download=()=>{const url=URL.createObjectURL(new Blob([tableCsv(visible,shown)],{type:'text/csv;charset=utf-8'}));const link=document.createElement('a');link.href=url;link.download='loaded-results.csv';link.click();setTimeout(()=>URL.revokeObjectURL(url),1000);};
   return <><div className="table-tools"><label>搜索已加载数据 <input placeholder="搜索已加载数据" value={search} onChange={e => {setSearch(e.target.value);setPage(0);}}/></label><span>已加载 {dataset.returnedRowCount} 行 · 匹配 {rows.length} 行</span><button onClick={download}>导出匹配结果 CSV</button></div>
     {(binding.localFilterFieldIds?.length??0)>0&&<div className="local-filters">{binding.localFilterFieldIds!.map(id=>{const index=fieldIndex(dataset,id);return <label key={id}>{dataset.columns[index].name}（已加载值）<select value={filters[id]??''} onChange={e=>{setFilters(old=>({...old,[id]:e.target.value}));setPage(0);}}><option value="">全部已加载值</option>{[...new Set(dataset.rows.map(row=>displayCell(row.cells[index])))].filter(Boolean).map(value=><option key={value}>{value}</option>)}</select></label>;})}</div>}
-    <div className="table-scroll"><table><thead><tr><th>序号</th>{visible.columns.map(c => <th key={c.key} aria-sort={sort?.fieldId===c.fieldId?(sort.direction==='asc'?'ascending':'descending'):'none'}><button className="sort-column" onClick={()=>{setSort({fieldId:c.fieldId,direction:sort?.fieldId===c.fieldId&&sort.direction==='asc'?'desc':'asc'});setPage(0);}}>{c.name} {sort?.fieldId===c.fieldId?(sort.direction==='asc'?'↑':'↓'):'↕'}</button></th>)}<th>行类型</th></tr></thead><tbody>{shown.slice(current * pageSize, (current + 1) * pageSize).map((row,i) => <tr key={current * pageSize + i}><td>{current * pageSize + i + 1}</td>{row.cells.map((c,j) => <td key={visible.columns[j].key}>{displayCell(c)}</td>)}<td>{row.kind==='DATA'?'数据':'UNKNOWN'}</td></tr>)}</tbody></table></div>
+    <div className="table-scroll"><table><thead><tr><th>序号</th>{visible.columns.map(c => <th key={c.key} aria-sort={sort?.fieldId===c.fieldId?(sort.direction==='asc'?'ascending':'descending'):'none'}><button className="sort-column" onClick={()=>{setSort({fieldId:c.fieldId,direction:sort?.fieldId===c.fieldId&&sort.direction==='asc'?'desc':'asc'});setPage(0);}}>{c.name} {sort?.fieldId===c.fieldId?(sort.direction==='asc'?'↑':'↓'):'↕'}</button></th>)}<th>行类型</th></tr></thead><tbody>{shown.slice(current * pageSize, (current + 1) * pageSize).map((row,i) => <tr key={current * pageSize + i}><td>{current * pageSize + i + 1}</td>{row.cells.map((c,j) => <td key={visible.columns[j].key}>{displayCell(c)}</td>)}<td>{{DATA:'数据',SUBTOTAL:'小计',GRAND_TOTAL:'总计',UNKNOWN:'UNKNOWN'}[row.kind]}</td></tr>)}</tbody></table></div>
     {!rows.length && <p className="empty">没有匹配的数据</p>}
     <nav className="pager" aria-label="已加载数据分页"><button disabled={current===0} onClick={()=>setPage(current-1)}>上一页</button><span>{current+1} / {pages}</span><button disabled={current===pages-1} onClick={()=>setPage(current+1)}>下一页</button></nav></>;
 }

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/Insights.tsx

@@ -1,17 +1,17 @@
-import type {AppConfig} from '../finebi/types';
-import type {WidgetState} from '../services/widget-queries';
-import {widgetKey} from '../services/widget-queries';
-import {displayCell,selectDataset} from '../services/view-data';
-export function Insights({config,states}:{config:AppConfig;states:Record<string,WidgetState>}) {
-  const notes=config.widgets.map((binding,index)=>{
-    const state=states[widgetKey(binding,index)];
-    if(!state||state.loading)return `${binding.name}：等待当前查询`;
-    if(state.error)return `${binding.name}：查询失败，未参与观察`;
-    try {
-      const result=state.result!,data=selectDataset(result,binding.datasetId);
-      if(binding.type==='kpi'&&data.rows.length===1){const i=data.columns.findIndex(c=>c.fieldId===binding.valueFieldId);if(i<0)throw Error();return `${binding.name}：${displayCell(data.rows[0].cells[i])}（${result.normalization}）`;}
-      return `${binding.name}：已返回 ${data.returnedRowCount} 行，${result.normalization}${result.range.hasNext?'，还有后续数据':''}${data.rows.some(r=>r.kind==='UNKNOWN')?'；含 UNKNOWN 行，不自动汇总':''}`;
-    } catch{return `${binding.name}：绑定或适配不可用，未参与观察`;}
-  });
-  return <section className="insight-panel" id="observations"><div><span className="eyebrow">CURRENT QUERY</span><h2>经营观察</h2><p>根据当前组件返回动态生成，范围以各组件提示为准。</p></div><ul>{notes.map((note,i)=><li key={i}>{note}</li>)}</ul></section>;
-}
+import type {AppConfig} from '../finebi/types';
+import type {WidgetState} from '../services/widget-queries';
+import {widgetKey} from '../services/widget-queries';
+import {displayCell,selectDataset} from '../services/view-data';
+export function Insights({config,states}:{config:AppConfig;states:Record<string,WidgetState>}) {
+  const notes=config.widgets.map((binding,index)=>{
+    const state=states[widgetKey(binding,index)];
+    if(!state||state.loading)return `${binding.name}：等待当前查询`;
+    if(state.error)return `${binding.name}：查询失败，未参与观察`;
+    try {
+      const result=state.result!,data=selectDataset(result,binding.datasetId);
+      if(binding.type==='kpi'&&data.rows.length===1){const i=data.columns.findIndex(c=>c.fieldId===binding.valueFieldId);if(i<0)throw Error();return `${binding.name}：${displayCell(data.rows[0].cells[i])}（${result.normalization}）`;}
+      return `${binding.name}：已返回 ${data.returnedRowCount} 行，${result.normalization}${result.range.hasNext?'，还有后续数据':''}${data.rows.some(r=>r.kind==='UNKNOWN')?'；含 UNKNOWN 行，不自动汇总':''}`;
+    } catch{return `${binding.name}：绑定或适配不可用，未参与观察`;}
+  });
+  return <section className="insight-panel" id="observations"><div><span className="eyebrow">CURRENT QUERY</span><h2>经营观察</h2><p>根据当前组件返回动态生成，范围以各组件提示为准。</p></div><ul>{notes.map((note,i)=><li key={i}>{note}</li>)}</ul></section>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/MonthPicker.tsx

@@ -1,32 +1,32 @@
-import {useId,useLayoutEffect,useRef,useState} from 'react';
-import './month-picker.css';
-const clamp=(n:number,min:number,max:number)=>Math.max(min,Math.min(max,n));
-const pad=(n:number)=>String(n).padStart(4,'0');
-export function MonthPicker({id,label,value,onChange}:{id:string;label:string;value:string;onChange:(value:string)=>void}) {
-  const popupId=useId(),root=useRef<HTMLDivElement>(null),trigger=useRef<HTMLButtonElement>(null),grid=useRef<HTMLDivElement>(null);
-  const now=new Date(),initialYear=value?Number(value.slice(0,4)):now.getFullYear();
-  const [open,setOpen]=useState(false),[mode,setMode]=useState<'months'|'years'>('months');
-  const [year,setYear]=useState(initialYear),[cursor,setCursor]=useState(0),[focusTick,setFocusTick]=useState(0);
-  const base=clamp(Math.floor((year-1)/12)*12+1,1,9988);
-  const focusGrid=()=>setFocusTick(n=>n+1);
-  useLayoutEffect(()=>{if(open&&focusTick)grid.current?.querySelector<HTMLButtonElement>(`[data-cell="${cursor}"]`)?.focus();},[focusTick,open,cursor,mode,year]);
-  const close=(restore=false)=>{setOpen(false);if(restore)trigger.current?.focus();};
-  const show=(focus=false)=>{setYear(initialYear);setMode('months');setCursor(value?Number(value.slice(5))-1:now.getMonth());setOpen(true);if(focus)focusGrid();};
-  const choose=(next:string)=>{onChange(next);close(true);};
-  const navigate=(delta:number)=>{setYear(y=>clamp(y+delta*(mode==='months'?1:12),1,9999));};
-  const keyDown=(e:React.KeyboardEvent)=>{
-    if(e.key==='Escape'){e.preventDefault();e.stopPropagation();close(true);return;}
-    const delta={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3}[e.key];
-    if(delta!==undefined){e.preventDefault();setCursor(c=>clamp(c+delta,0,11));focusGrid();}
-    else if(e.key==='Home'||e.key==='End'){e.preventDefault();setCursor(e.key==='Home'?0:11);focusGrid();}
-    else if(e.key==='PageUp'||e.key==='PageDown'){e.preventDefault();navigate(e.key==='PageUp'?-1:1);focusGrid();}
-  };
-  return <div ref={root} className="month-picker" onBlur={e=>{if(e.relatedTarget&&!e.currentTarget.contains(e.relatedTarget))close();}}>
-    <button id={id} ref={trigger} type="button" className={`month-trigger ${value?'has-value':''}`} aria-label={label} aria-haspopup="dialog" aria-expanded={open} aria-controls={popupId} onClick={()=>open?close():show()} onKeyDown={e=>{if(e.key==='ArrowDown'){e.preventDefault();show(true);}}}><span>{value?`${value.slice(0,4)}年${value.slice(5)}月`:'源看板默认'}</span><span aria-hidden="true">▦</span></button>
-    {open&&<><div className="month-dismiss" onPointerDown={()=>close()}/><div className="month-popover" role="dialog" aria-label={`${label}选择面板`} id={popupId} onKeyDown={e=>{if(e.key==='Escape'){e.preventDefault();e.stopPropagation();close(true);}}}>
-      <div className="month-head"><button type="button" aria-label={mode==='months'?'上一年':'上一组年份'} disabled={year===1} onClick={()=>navigate(-1)}>‹</button><button type="button" className="month-year" aria-label={mode==='months'?'选择年份':'返回月份'} onClick={()=>{setMode(mode==='months'?'years':'months');setCursor(mode==='months'?year-base:0);focusGrid();}}>{mode==='months'?`${pad(year)}年`:`${pad(base)} — ${pad(base+11)}`}</button><button type="button" aria-label={mode==='months'?'下一年':'下一组年份'} disabled={year===9999} onClick={()=>navigate(1)}>›</button></div>
-      <div ref={grid} className="month-grid" role="grid" aria-label={mode==='months'?'月份':'年份'} onKeyDown={keyDown}>{Array.from({length:4},(_,row)=><div role="row" key={row}>{Array.from({length:3},(_,column)=>{const i=row*3+column,selected=mode==='months'?value===`${pad(year)}-${String(i+1).padStart(2,'0')}`:Number(value.slice(0,4))===base+i;return <button key={i} type="button" role="gridcell" data-cell={i} tabIndex={cursor===i?0:-1} aria-selected={selected} className={selected?'selected':''} onFocus={()=>setCursor(i)} onClick={()=>{if(mode==='months')choose(`${pad(year)}-${String(i+1).padStart(2,'0')}`);else{setYear(base+i);setMode('months');setCursor(value?Number(value.slice(5))-1:0);focusGrid();}}}>{mode==='months'?`${i+1}月`:pad(base+i)}</button>;})}</div>)}</div>
-      <div className="month-actions"><button type="button" onClick={()=>choose('')}>默认条件</button><button type="button" onClick={()=>choose(`${pad(now.getFullYear())}-${String(now.getMonth()+1).padStart(2,'0')}`)}>本月</button><button type="button" onClick={()=>choose('')}>清除</button></div><p>选择后点击「应用筛选」取数</p>
-    </div></>}
-  </div>;
-}
+import {useId,useLayoutEffect,useRef,useState} from 'react';
+import './month-picker.css';
+const clamp=(n:number,min:number,max:number)=>Math.max(min,Math.min(max,n));
+const pad=(n:number)=>String(n).padStart(4,'0');
+export function MonthPicker({id,label,value,onChange}:{id:string;label:string;value:string;onChange:(value:string)=>void}) {
+  const popupId=useId(),root=useRef<HTMLDivElement>(null),trigger=useRef<HTMLButtonElement>(null),grid=useRef<HTMLDivElement>(null);
+  const now=new Date(),initialYear=value?Number(value.slice(0,4)):now.getFullYear();
+  const [open,setOpen]=useState(false),[mode,setMode]=useState<'months'|'years'>('months');
+  const [year,setYear]=useState(initialYear),[cursor,setCursor]=useState(0),[focusTick,setFocusTick]=useState(0);
+  const base=clamp(Math.floor((year-1)/12)*12+1,1,9988);
+  const focusGrid=()=>setFocusTick(n=>n+1);
+  useLayoutEffect(()=>{if(open&&focusTick)grid.current?.querySelector<HTMLButtonElement>(`[data-cell="${cursor}"]`)?.focus();},[focusTick,open,cursor,mode,year]);
+  const close=(restore=false)=>{setOpen(false);if(restore)trigger.current?.focus();};
+  const show=(focus=false)=>{setYear(initialYear);setMode('months');setCursor(value?Number(value.slice(5))-1:now.getMonth());setOpen(true);if(focus)focusGrid();};
+  const choose=(next:string)=>{onChange(next);close(true);};
+  const navigate=(delta:number)=>{setYear(y=>clamp(y+delta*(mode==='months'?1:12),1,9999));};
+  const keyDown=(e:React.KeyboardEvent)=>{
+    if(e.key==='Escape'){e.preventDefault();e.stopPropagation();close(true);return;}
+    const delta={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3}[e.key];
+    if(delta!==undefined){e.preventDefault();setCursor(c=>clamp(c+delta,0,11));focusGrid();}
+    else if(e.key==='Home'||e.key==='End'){e.preventDefault();setCursor(e.key==='Home'?0:11);focusGrid();}
+    else if(e.key==='PageUp'||e.key==='PageDown'){e.preventDefault();navigate(e.key==='PageUp'?-1:1);focusGrid();}
+  };
+  return <div ref={root} className="month-picker" onBlur={e=>{if(e.relatedTarget&&!e.currentTarget.contains(e.relatedTarget))close();}}>
+    <button id={id} ref={trigger} type="button" className={`month-trigger ${value?'has-value':''}`} aria-label={label} aria-haspopup="dialog" aria-expanded={open} aria-controls={popupId} onClick={()=>open?close():show()} onKeyDown={e=>{if(e.key==='ArrowDown'){e.preventDefault();show(true);}}}><span>{value?`${value.slice(0,4)}年${value.slice(5)}月`:'源看板默认'}</span><span aria-hidden="true">▦</span></button>
+    {open&&<><div className="month-dismiss" onPointerDown={()=>close()}/><div className="month-popover" role="dialog" aria-label={`${label}选择面板`} id={popupId} onKeyDown={e=>{if(e.key==='Escape'){e.preventDefault();e.stopPropagation();close(true);}}}>
+      <div className="month-head"><button type="button" aria-label={mode==='months'?'上一年':'上一组年份'} disabled={year===1} onClick={()=>navigate(-1)}>‹</button><button type="button" className="month-year" aria-label={mode==='months'?'选择年份':'返回月份'} onClick={()=>{setMode(mode==='months'?'years':'months');setCursor(mode==='months'?year-base:0);focusGrid();}}>{mode==='months'?`${pad(year)}年`:`${pad(base)} — ${pad(base+11)}`}</button><button type="button" aria-label={mode==='months'?'下一年':'下一组年份'} disabled={year===9999} onClick={()=>navigate(1)}>›</button></div>
+      <div ref={grid} className="month-grid" role="grid" aria-label={mode==='months'?'月份':'年份'} onKeyDown={keyDown}>{Array.from({length:4},(_,row)=><div role="row" key={row}>{Array.from({length:3},(_,column)=>{const i=row*3+column,selected=mode==='months'?value===`${pad(year)}-${String(i+1).padStart(2,'0')}`:Number(value.slice(0,4))===base+i;return <button key={i} type="button" role="gridcell" data-cell={i} tabIndex={cursor===i?0:-1} aria-selected={selected} className={selected?'selected':''} onFocus={()=>setCursor(i)} onClick={()=>{if(mode==='months')choose(`${pad(year)}-${String(i+1).padStart(2,'0')}`);else{setYear(base+i);setMode('months');setCursor(value?Number(value.slice(5))-1:0);focusGrid();}}}>{mode==='months'?`${i+1}月`:pad(base+i)}</button>;})}</div>)}</div>
+      <div className="month-actions"><button type="button" onClick={()=>choose('')}>默认条件</button><button type="button" onClick={()=>choose(`${pad(now.getFullYear())}-${String(now.getMonth()+1).padStart(2,'0')}`)}>本月</button><button type="button" onClick={()=>choose('')}>清除</button></div><p>选择后点击「应用筛选」取数</p>
+    </div></>}
+  </div>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/OptionFilter.tsx

@@ -1,7 +1,7 @@
-import Select from 'antd/es/select';
-import type {FilterBinding,FilterValue} from '../finebi/types';
-
-export default function OptionFilter({id,binding,value,onChange}:{id:string;binding:FilterBinding;value:FilterValue;onChange:(value:FilterValue)=>void}) {
-  const type=binding.type??'select',text=typeof value==='string'?value:'';
-  return <Select id={id} aria-label={binding.label} size="large" className="filter-select" mode={type==='multi-select'?'multiple':undefined} allowClear showSearch={{optionFilterProp:'label'}} maxTagCount="responsive" placeholder={`选择${binding.label}，支持搜索`} options={binding.options} disabled={value===null} value={type==='multi-select'?(Array.isArray(value)?value:[]):text||undefined} onChange={selected=>onChange(selected??'')} notFoundContent={`没有匹配的${binding.label}`}/>;
-}
+import Select from 'antd/es/select';
+import type {FilterBinding,FilterValue} from '../finebi/types';
+
+export default function OptionFilter({id,binding,value,onChange}:{id:string;binding:FilterBinding;value:FilterValue;onChange:(value:FilterValue)=>void}) {
+  const type=binding.type??'select',text=typeof value==='string'?value:'';
+  return <Select id={id} aria-label={binding.label} size="large" className="filter-select" mode={type==='multi-select'?'multiple':undefined} allowClear showSearch={{optionFilterProp:'label'}} maxTagCount="responsive" placeholder={`选择${binding.label}，支持搜索`} options={binding.options} disabled={value===null} value={type==='multi-select'?(Array.isArray(value)?value:[]):text||undefined} onChange={selected=>onChange(selected??'')} notFoundContent={`没有匹配的${binding.label}`}/>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/RangeFilter.tsx

@@ -1,9 +1,9 @@
-import generatePicker from 'antd/es/date-picker/generatePicker';
-import {calendarConfig, calendarValue} from './calendar';
-
-const CalendarPicker=generatePicker<Date>(calendarConfig);
-type Interval={start:string;end:string};
-export default function RangeFilter({id,month,value,onChange}:{id:string;month:boolean;value:Interval;onChange:(value:Interval)=>void}) {
-  const update=(_dates:unknown,strings:[string,string]|null)=>onChange({start:strings?.[0]||'',end:strings?.[1]||''});
-  return <CalendarPicker.RangePicker size="large" className="filter-date-range" id={{start:id+'-start',end:id+'-end'}} picker={month?'month':'date'} format={month?'YYYY-MM':'YYYY-MM-DD'} placeholder={month?['开始月份','结束月份']:['开始日期','结束日期']} allowEmpty={[true,true]} allowClear value={[calendarValue(value.start),calendarValue(value.end)]} minDate={calendarValue('0001-01-01')!} maxDate={calendarValue('9999-12-31')!} onCalendarChange={update} onChange={update} onKeyDown={e=>{if(e.key==='Enter')e.preventDefault();}}/>;
-}
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import {calendarConfig, calendarValue} from './calendar';
+
+const CalendarPicker=generatePicker<Date>(calendarConfig);
+type Interval={start:string;end:string};
+export default function RangeFilter({id,month,value,onChange}:{id:string;month:boolean;value:Interval;onChange:(value:Interval)=>void}) {
+  const update=(_dates:unknown,strings:[string,string]|null)=>onChange({start:strings?.[0]||'',end:strings?.[1]||''});
+  return <CalendarPicker.RangePicker size="large" className="filter-date-range" id={{start:id+'-start',end:id+'-end'}} picker={month?'month':'date'} format={month?'YYYY-MM':'YYYY-MM-DD'} placeholder={month?['开始月份','结束月份']:['开始日期','结束日期']} allowEmpty={[true,true]} allowClear value={[calendarValue(value.start),calendarValue(value.end)]} minDate={calendarValue('0001-01-01')!} maxDate={calendarValue('9999-12-31')!} onCalendarChange={update} onChange={update} onKeyDown={e=>{if(e.key==='Enter')e.preventDefault();}}/>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/Widget.tsx

@@ -1,39 +1,40 @@
-import {Component, lazy, Suspense, type ReactNode} from 'react';
-import type {QueryResult, WidgetBinding} from '../finebi/types';
-import {displayCell, selectDataset} from '../services/view-data';
-import {DataTable} from './DataTable';
-import type {WidgetState} from '../services/widget-queries';
-import {formatMetric} from '../services/presentation';
-const charts={bar:lazy(()=>import('./charts/Bar')),line:lazy(()=>import('./charts/Line')),pie:lazy(()=>import('./charts/Pie'))};
-export class Boundary extends Component<{children: ReactNode;onRetry?:()=>void}, {error: string}> {
-  state = {error: ''};
-  static getDerivedStateFromError(error: Error) {return {error: error.message};}
-  render() {return this.state.error ? <div role="alert"><p>{this.state.error}</p>{this.props.onRetry&&<button onClick={this.props.onRetry}>重试组件</button>}</div> : this.props.children;}
-}
-function Content({result, binding, pageSize}: {result: QueryResult; binding: WidgetBinding; pageSize: number}) {
-  const data = selectDataset(result, binding.datasetId);
-  if (!data.rows.length) return <p className="empty">当前查询没有数据</p>;
-  if (binding.type === 'table') return <DataTable dataset={data} pageSize={pageSize} binding={binding}/>;
-  if (binding.type === 'kpi') {
-    const index = data.columns.findIndex(c => c.fieldId === binding.valueFieldId);
-    if (data.rows.length !== 1 || index < 0) throw new Error('KPI 需要单行指标结果，不能自动累加图表行');
-    return <div className="kpi" title={displayCell(data.rows[0].cells[index])}>{formatMetric(data.rows[0].cells[index],binding.valueFormat)}</div>;
-  }
-  const Chart=charts[binding.type];
-  return <Suspense fallback={<p role="status">正在加载图表…</p>}><Chart dataset={data} binding={binding}/></Suspense>;
-}
-export function Widget({state,binding,pageSize,onRetry,compact=false}: {state:WidgetState; binding:WidgetBinding;pageSize:number;onRetry:()=>void;compact?:boolean}) {
-  const result=state.result;
-  const selected=result?.datasets.find(d=>binding.datasetId?d.id===binding.datasetId:result.datasets.length===1);
-  return <section className={`panel widget-${binding.type} ${binding.type==='table'?'wide':''}`}><div className="panel-heading"><h2>{binding.name}</h2><span className={`component-status ${state.error?'failed':''}`}>{state.loading?'加载中':state.error?'查询失败':state.at?`更新于 ${state.at}`:'等待查询'}</span></div>
-    {binding.description&&<p className="muted">{binding.description}</p>}
-    {!compact&&binding.filterNames&&<p className="filter-scope">控件覆盖：{binding.filterNames.length?binding.filterNames.join('、'):'沿用源组件条件'}</p>}
-    {state.loading&&<p className="empty" role="status">正在获取实时数据…</p>}
-    {state.error&&<div className="component-error" role="alert"><p>{'code' in state.error?String(state.error.code)+' · ':''}{state.error.message}</p><button onClick={onRetry}>重试组件</button></div>}
-    {result&&<>
-    {compact?<details className="query-details"><summary>查询范围{selected?` · ${selected.returnedRowCount} 行`:''}</summary><p>{result.range.mode} · {result.normalization} · 后续数据：{String(result.range.hasNext)}</p><p>筛选作用：{binding.filterNames?.join('、')||'沿用源组件条件'}</p></details>:<p className="result-range">{result.range.mode} · 本次{selected?` ${selected.returnedRowCount} 行`:'多个模型，需显式选择'}{result.range.total.value!==null?` · 查询总行数 ${result.range.total.value}`:''} · hasNext={String(result.range.hasNext)} · {result.normalization}</p>}
-    {(result.warnings.length>0||result.normalization!=='COMPLETE'||result.range.hasNext===true)&&<div className="notice" role="status">{result.range.hasNext||result.warnings.includes('NEXT_PAGE_UNSUPPORTED')?'当前仅展示首屏返回结果，本地分页不代表服务端续页。':'部分源图形未转换，当前展示已返回的数据模型。'}{compact?<details><summary>查看适配说明</summary><small>{result.normalization} · {result.warnings.join(' · ')}</small></details>:<small>{result.normalization} · {result.warnings.join(' · ')}</small>}</div>}
-    <Boundary key={state.at} onRetry={onRetry}><Content result={result} binding={binding} pageSize={pageSize}/></Boundary>
-    </>}
-  </section>;
-}
+import {Component, lazy, Suspense, type ReactNode} from 'react';
+import type {QueryResult, WidgetBinding} from '../finebi/types';
+import {displayCell, selectDataset} from '../services/view-data';
+import {DataTable} from './DataTable';
+import type {WidgetState} from '../services/widget-queries';
+import {formatMetric} from '../services/presentation';
+const charts={bar:lazy(()=>import('./charts/Bar')),line:lazy(()=>import('./charts/Line')),pie:lazy(()=>import('./charts/Pie'))};
+export class Boundary extends Component<{children: ReactNode;onRetry?:()=>void}, {error: string}> {
+  state = {error: ''};
+  static getDerivedStateFromError(error: Error) {return {error: error.message};}
+  render() {return this.state.error ? <div role="alert"><p>{this.state.error}</p>{this.props.onRetry&&<button onClick={this.props.onRetry}>重试组件</button>}</div> : this.props.children;}
+}
+function Content({result, binding, pageSize}: {result: QueryResult; binding: WidgetBinding; pageSize: number}) {
+  const data = selectDataset(result, binding.datasetId);
+  if (!data.rows.length) return <p className="empty">当前查询没有数据</p>;
+  if (binding.type === 'table') return <DataTable dataset={data} pageSize={pageSize} binding={binding}/>;
+  if (binding.type === 'kpi') {
+    const index = data.columns.findIndex(c => c.fieldId === binding.valueFieldId);
+    if (data.rows.length !== 1 || index < 0) throw new Error('KPI 需要单行指标结果，不能自动累加图表行');
+    return <div className="kpi" title={displayCell(data.rows[0].cells[index])}>{formatMetric(data.rows[0].cells[index],binding.valueFormat)}</div>;
+  }
+  const Chart=charts[binding.type];
+  return <Suspense fallback={<p role="status">正在加载图表…</p>}><Chart dataset={data} binding={binding}/></Suspense>;
+}
+export function Widget({state,binding,pageSize,onRetry,compact=false}: {state:WidgetState; binding:WidgetBinding;pageSize:number;onRetry:()=>void;compact?:boolean}) {
+  const result=state.result;
+  const selected=result?.datasets.find(d=>binding.datasetId?d.id===binding.datasetId:result.datasets.length===1);
+  return <section className={`panel widget-${binding.type} ${binding.type==='table'?'wide':''}`}><div className="panel-heading"><h2>{binding.name}</h2><span className={`component-status ${state.error?'failed':''}`}>{state.loading?'加载中':state.error?'查询失败':state.at?`更新于 ${state.at}`:'等待查询'}</span></div>
+    {binding.description&&<p className="muted">{binding.description}</p>}
+    {!compact&&binding.filterNames&&<p className="filter-scope">控件覆盖：{binding.filterNames.length?binding.filterNames.join('、'):'沿用源组件条件'}</p>}
+    {state.loading&&<p className="empty" role="status">正在获取实时数据…</p>}
+    {state.error&&<div className="component-error" role="alert"><p>{'code' in state.error?String(state.error.code)+' · ':''}{state.error.message}</p><button onClick={onRetry}>重试组件</button></div>}
+    {result&&<>
+    {compact?<details className="query-details"><summary>查询范围{selected?` · ${selected.returnedRowCount} 行`:''}</summary><p>{result.range.mode} · {result.normalization} · 后续数据：{String(result.range.hasNext)}</p><p>筛选作用：{binding.filterNames?.join('、')||'沿用源组件条件'}</p></details>:<p className="result-range">{result.range.mode} · 本次{selected?` ${selected.returnedRowCount} 行`:'多个模型，需显式选择'}{result.range.total.value!==null?` · 查询总行数 ${result.range.total.value}`:''} · hasNext={String(result.range.hasNext)} · {result.normalization}</p>}
+    {result.range.axes&&<p className="result-range">交叉表当前视图 · 横向还有数据：{result.range.axes.horizontal.hasNext===null?'未知':result.range.axes.horizontal.hasNext?'是':'否'} · 纵向还有数据：{result.range.axes.vertical.hasNext===null?'未知':result.range.axes.vertical.hasNext?'是':'否'}</p>}
+    {(result.warnings.length>0||result.normalization!=='COMPLETE'||result.range.hasNext===true)&&<div className="notice" role="status">{result.range.hasNext||result.warnings.includes('NEXT_PAGE_UNSUPPORTED')?'当前仅展示首屏返回结果，本地分页不代表服务端续页。':'部分源图形未转换，当前展示已返回的数据模型。'}{compact?<details><summary>查看适配说明</summary><small>{result.normalization} · {result.warnings.join(' · ')}</small></details>:<small>{result.normalization} · {result.warnings.join(' · ')}</small>}</div>}
+    <Boundary key={state.at} onRetry={onRetry}><Content result={result} binding={binding} pageSize={pageSize}/></Boundary>
+    </>}
+  </section>;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/calendar-locales.ts

@@ -1,3 +1,3 @@
-// Keep this list aligned with the languages configured by the application.
-export {zhCN} from 'date-fns/locale/zh-CN';
-export {enUS} from 'date-fns/locale/en-US';
+// Keep this list aligned with the languages configured by the application.
+export {zhCN} from 'date-fns/locale/zh-CN';
+export {enUS} from 'date-fns/locale/en-US';

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/calendar.ts

@@ -1,14 +1,14 @@
-import dateFnsConfig from '@rc-component/picker/generate/dateFns';
-import {isDateValue} from '../finebi/date.js';
-
-// Keep the picker on the same 0001–9999 calendar range as the filter contract.
-export const calendarConfig = dateFnsConfig;
-export function calendarValue(value:string):Date|null {
-  const fullDate = value.length===7 ? value+'-01' : value;
-  if (!isDateValue(fullDate)) return null;
-  const [year,month,day] = fullDate.split('-').map(Number);
-  const date = new Date(0);
-  date.setHours(0,0,0,0);
-  date.setFullYear(year,month-1,day);
-  return date;
-}
+import dateFnsConfig from '@rc-component/picker/generate/dateFns';
+import {isDateValue} from '../finebi/date.js';
+
+// Keep the picker on the same 0001–9999 calendar range as the filter contract.
+export const calendarConfig = dateFnsConfig;
+export function calendarValue(value:string):Date|null {
+  const fullDate = value.length===7 ? value+'-01' : value;
+  if (!isDateValue(fullDate)) return null;
+  const [year,month,day] = fullDate.split('-').map(Number);
+  const date = new Date(0);
+  date.setHours(0,0,0,0);
+  date.setFullYear(year,month-1,day);
+  return date;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/components/charts/Bar.tsx

@@ -1,6 +1,6 @@
-import {use} from 'echarts/core';
-import {BarChart} from 'echarts/charts';
-import {GridComponent} from 'echarts/components';
-
-use([BarChart, GridComponent]);
-export {Chart as default} from '../Chart';
+import {use} from 'echarts/core';
+import {BarChart} from 'echarts/charts';
+import {GridComponent} from 'echarts/components';
+
+use([BarChart, GridComponent]);
+export {Chart as default} from '../Chart';