@finebi/finebi-cli 1.6.0 → 1.6.2

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/scripts/browser-session.mjs

@@ -0,0 +1,59 @@
+import {spawn} from 'node:child_process';
+
+function openBrowser(url) {
+  const [command,args]=process.platform==='win32' ? ['rundll32.exe',['url.dll,FileProtocolHandler',url]]
+    : process.platform==='darwin' ? ['open',[url]] : ['xdg-open',[url]];
+  const child=spawn(command,args,{stdio:'ignore',windowsHide:true});child.on('error',()=>{});child.unref();
+}
+
+export function sleep(ms,signal) {
+  return new Promise((resolve,reject)=>{
+    if(signal?.aborted){reject(Error('AUTH_REQUIRED'));return;}
+    const abort=()=>{clearTimeout(timer);reject(Error('AUTH_REQUIRED'));};
+    const timer=setTimeout(()=>{signal?.removeEventListener('abort',abort);resolve();},ms);
+    signal?.addEventListener('abort',abort,{once:true});
+  });
+}
+
+export async function authRequest(url,body,{fetchImpl=fetch,signal}={}) {
+  const controller=new AbortController();
+  const abort=()=>controller.abort();
+  if(signal?.aborted)abort();else signal?.addEventListener('abort',abort,{once:true});
+  const timer=setTimeout(abort,30000);
+  try {
+    const response=await fetchImpl(url,{method:'POST',redirect:'manual',headers:{'Content-Type':'application/json'},body:JSON.stringify(body),signal:controller.signal});
+    const payload=await response.json().catch(()=>null);
+    return {response,payload};
+  } catch {throw Error(signal?.aborted?'AUTH_REQUIRED':'UPSTREAM_UNAVAILABLE');}
+  finally {clearTimeout(timer);signal?.removeEventListener('abort',abort);}
+}
+
+export async function browserSession(baseUrl,options={}) {
+  const {signal,notify=console.info,openBrowser:launch=openBrowser,sleep:wait=sleep}=options;
+  const target=new URL(baseUrl);
+  if(target.protocol!=='https:' && !(target.protocol==='http:' && ['localhost','127.0.0.1','[::1]'].includes(target.hostname)))throw Error('AUTH_HTTPS_REQUIRED');
+  const root=baseUrl.replace(/\/$/,'')+'/api/bi-cli/dev-session-auth';
+  const started=await authRequest(root+'/start',{description:'FineBI Web 本地开发'},options);
+  if(started.response.status===404)throw Error('AUTH_PLUGIN_REQUIRED');
+  if(!started.response.ok)throw Error('AUTH_UNAVAILABLE');
+  const data=started.payload?.data;
+  if(!data || !/^[A-Za-z0-9_-]{43}$/.test(data.deviceCode) || !/^[A-Z2-9]{4}-[A-Z2-9]{4}$/.test(data.userCode)
+    || data.verificationPath!==`/api/bi-cli/dev-session-auth/authorize?code=${data.userCode}` || data.expiresIn!==600 || data.interval!==5)throw Error('AUTH_PROTOCOL_ERROR');
+  const verification=baseUrl.replace(/\/$/,'')+data.verificationPath;
+  notify(`请先通过原有入口登录 FineBI，再打开授权页：${verification}\n核对确认码：${data.userCode}。授权会将当前账号会话保存到本地 .env.local。`);
+  try{await launch(verification);}catch{notify('未能打开浏览器，请手动打开上述授权页。');}
+  const deadline=Date.now()+data.expiresIn*1000;
+  while(Date.now()<deadline && !signal?.aborted) {
+    await wait(data.interval*1000,signal);
+    const polled=await authRequest(root+'/poll',{deviceCode:data.deviceCode},options);
+    if(polled.response.status===429)continue;
+    if(polled.response.status===404)throw Error('AUTH_REQUIRED');
+    if(!polled.response.ok)throw Error('AUTH_UNAVAILABLE');
+    const result=polled.payload?.data;
+    if(result?.status==='pending')continue;
+    if(result?.status==='approved' && typeof result.token==='string' && /^[\x21-\x7e]+$/.test(result.token) && !/[;,]/.test(result.token) && typeof result.username==='string')return result;
+    if(['denied','expired','consumed'].includes(result?.status))throw Error('AUTH_REQUIRED');
+    throw Error('AUTH_PROTOCOL_ERROR');
+  }
+  throw Error('AUTH_REQUIRED');
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/scripts/dev-proxy.mjs

@@ -1,24 +1,13 @@
 // Development only: the browser never receives the developer's session token.
 import {validateRefer} from '../src/finebi/filters.js';
-export function createDevMiddleware(config, env = process.env, fetchImpl = fetch) {
+import {validateDimensionSelections} from '../src/finebi/config.js';
+import {createDevSession} from './dev-session.mjs';
+export function createDevMiddleware(config, env = process.env, fetchImpl = fetch, sessionOptions = {}) {
   const prefix = config.basePath.replace(/\/$/, '');
   const queryPath = `${prefix}/v5/api/dashboard/report/${encodeURIComponent(config.dashboardId)}/widgets/query`;
-  let token = env.FINEBI_DEV_TOKEN || '';
-  let login;
+  const session = createDevSession(env,{...sessionOptions,fetchImpl});
   const reply = (res, status, errorCode) => {res.writeHead(status, {'Content-Type':'application/json','Cache-Control':'no-store'});res.end(JSON.stringify({success:false,errorCode}));};
-  async function session() {
-    if (token) return token;
-    if (!env.FINEBI_DEV_USERNAME || !env.FINEBI_DEV_PASSWORD) throw new Error('AUTH_REQUIRED');
-    if (!login) login = (async()=>{
-      const response = await fetchImpl(`${env.FINEBI_DEV_BASE_URL.replace(/\/$/, '')}/login`, {method:'POST',redirect:'error',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:env.FINEBI_DEV_USERNAME,password:env.FINEBI_DEV_PASSWORD,encrypted:false,tenantId:''}),signal:AbortSignal.timeout(30000)});
-      const body = await response.json();
-      if (!response.ok || typeof body?.data?.accessToken !== 'string' || !body.data.accessToken) throw new Error('AUTH_REQUIRED');
-      token=body.data.accessToken;
-      return token;
-    })().finally(()=>{login=undefined;});
-    return login;
-  }
-  return async (req, res, next) => {
+  const middleware = async (req, res, next) => {
     const pathname = new URL(req.url, 'http://localhost').pathname;
     if (!pathname.startsWith(prefix+'/') && pathname !== prefix) return next();
     const host = req.headers.host || '';
@@ -31,26 +20,39 @@ export function createDevMiddleware(config, env = process.env, fetchImpl = fetch
       for await (const chunk of req) {raw+=chunk.toString();if (raw.length>65536) throw new Error('BODY_TOO_LARGE');}
       body=JSON.parse(raw);
       if (!Array.isArray(body.widgetIds) || !body.widgetIds.length || body.widgetIds.some(id=>!config.widgets.some(w=>w.entryId===id)) || !Number.isSafeInteger(body.pageLimit) || body.pageLimit<1 || body.pageLimit>config.maxRows) throw new Error('INVALID_REQUEST');
+      if(body.reportEntryId!==config.directoryEntryId)throw new Error('INVALID_SOURCE');
       validateRefer(config.filters || [],body.refer);
+      validateDimensionSelections(config.widgets,body.widgetIds,body.dimensionSelections);
     } catch {return reply(res,400,'INVALID_REQUEST');}
     if (!env.FINEBI_DEV_BASE_URL) return reply(res,401,'AUTH_REQUIRED');
     try {
       const target = new URL(env.FINEBI_DEV_BASE_URL);
       if (!['http:','https:'].includes(target.protocol) || target.username || target.password || target.search || target.hash) throw new Error('INVALID_TARGET');
-      const auth=await session();
+      for(let attempt=0;attempt<2;attempt++) {
+      const auth=await session.get();
       const response=await fetchImpl(`${target.href.replace(/\/$/, '')}/v5/api/dashboard/report/${encodeURIComponent(config.dashboardId)}/widgets/query`, {
         method:'POST',redirect:'manual',signal:AbortSignal.timeout(30000),
         headers:{'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest',Cookie:`fine_auth_token=${auth}`},
-        body:JSON.stringify({widgetIds:body.widgetIds,includeWidgetBean:true,pageLimit:body.pageLimit,refer:body.refer || {}}),
+        body:JSON.stringify({widgetIds:body.widgetIds,includeWidgetBean:true,pageLimit:body.pageLimit,refer:body.refer || {},...(config.directoryEntryId?{reportEntryId:config.directoryEntryId}:{}),...(body.dimensionSelections!==undefined?{dimensionSelections:body.dimensionSelections}:{})}),
       });
-      if (response.status===401 || response.status>=300 && response.status<400 || response.headers.get('content-type')?.includes('text/html')) {token='';return reply(res,401,'AUTH_REQUIRED');}
-      if (response.status===403) return reply(res,403,'PERMISSION_DENIED');
-      const json=await response.json();
-      if (response.status===401 || ['TIME_OUT','JWT_EXPIRED','LOGIN_INFO_NOT_AVAILABLE','CANNOT_GET_TOKEN'].includes(json.errorCode)) {token='';return reply(res,401,'AUTH_REQUIRED');}
       if (response.status===403) return reply(res,403,'PERMISSION_DENIED');
+      const loginResponse=response.status===401 || response.status>=300 && response.status<400 || response.ok && response.headers.get('content-type')?.includes('text/html');
+      const json=loginResponse ? null : await response.json();
+      if (loginResponse || response.ok && ['TIME_OUT','JWT_EXPIRED','LOGIN_INFO_NOT_AVAILABLE','CANNOT_GET_TOKEN'].includes(json?.errorCode ?? json?.code)) {
+        await session.invalidate(auth);
+        if(attempt===0)continue;
+        return reply(res,401,'AUTH_REQUIRED');
+      }
       // Forward only the query envelope, never upstream headers or login payloads.
       res.writeHead(response.status,{'Content-Type':'application/json','Cache-Control':'no-store'});
-      res.end(JSON.stringify(json.success===true ? {success:true,data:json.data} : {success:false,errorCode:json.errorCode || 'QUERY_FAILED'}));
-    } catch (error) {reply(res,error.message==='AUTH_REQUIRED'?401:502,error.message==='AUTH_REQUIRED'?'AUTH_REQUIRED':'UPSTREAM_UNAVAILABLE');}
+      return res.end(JSON.stringify(json.success===true ? {success:true,data:json.data} : {success:false,errorCode:json.errorCode || json.code || 'QUERY_FAILED'}));
+      }
+    } catch (error) {
+      const code=['AUTH_REQUIRED','AUTH_PLUGIN_REQUIRED','AUTH_HTTPS_REQUIRED','AUTH_PROTOCOL_ERROR','AUTH_UNAVAILABLE','AUTH_STORAGE_FAILED'].includes(error.message)?error.message:'UPSTREAM_UNAVAILABLE';
+      if(code!=='UPSTREAM_UNAVAILABLE') (sessionOptions.notify || console.info)(`FineBI 开发认证：${code}。请检查终端提示与 .env.local，修正后重试。`);
+      reply(res,code==='AUTH_REQUIRED'?401:502,code);
+    }
   };
+  middleware.dispose=()=>session.dispose();
+  return middleware;
 }

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/scripts/dev-session.mjs

@@ -0,0 +1,57 @@
+import {resolve} from 'node:path';
+import {saveSession} from './session-file.mjs';
+import {authRequest,browserSession} from './browser-session.mjs';
+
+export function createDevSession(env,options={}) {
+  const {fetchImpl=fetch,browser=browserSession,notify=console.info}=options;
+  const file=options.file || resolve('.env.local');
+  const save=options.save || ((...args)=>saveSession(file,...args));
+  const baseUrl=(env.FINEBI_DEV_BASE_URL || '').replace(/\/$/,'');
+  let token=env.FINEBI_DEV_TOKEN || '';
+  if(env.FINEBI_DEV_TOKEN_BASE_URL && env.FINEBI_DEV_TOKEN_BASE_URL.replace(/\/$/,'')!==baseUrl)token='';
+  let username=env.FINEBI_DEV_TOKEN_USERNAME || '';
+  let pending,clearing,passwordRejected=false;
+  const controller=new AbortController();
+  const valid=value=>typeof value==='string' && /^[\x21-\x7e]+$/.test(value) && !/[;,]/.test(value);
+  if(token && !valid(token))token='';
+
+  async function acquire() {
+    if(!baseUrl || controller.signal.aborted)throw Error('AUTH_REQUIRED');
+    const target=new URL(baseUrl);
+    if(!['http:','https:'].includes(target.protocol) || target.username || target.password || target.search || target.hash)throw Error('AUTH_PROTOCOL_ERROR');
+    let result;
+    if(!passwordRejected && env.FINEBI_DEV_USERNAME && env.FINEBI_DEV_PASSWORD) {
+      const {response,payload}=await authRequest(baseUrl+'/login',{username:env.FINEBI_DEV_USERNAME,password:env.FINEBI_DEV_PASSWORD,encrypted:false,tenantId:''},{fetchImpl,signal:controller.signal});
+      if(response.status>=500 || response.status===429)throw Error('UPSTREAM_UNAVAILABLE');
+      if(response.ok && valid(payload?.data?.accessToken))result={token:payload.data.accessToken,username:env.FINEBI_DEV_USERNAME};
+      else if([401,403].includes(response.status) || response.status>=300 && response.status<400 || payload?.errorCode || payload?.code || response.headers.get('content-type')?.includes('text/html')) {
+        passwordRejected=true;notify('密码登录被拒绝或需要交互登录，转为浏览器授权；本次运行不再重复尝试该密码。');
+      } else throw Error('AUTH_PROTOCOL_ERROR');
+    }
+    if(!result)result=await browser(baseUrl,{fetchImpl,signal:controller.signal,notify});
+    if(controller.signal.aborted)throw Error('AUTH_REQUIRED');
+    if(!valid(result?.token) || typeof result.username!=='string')throw Error('AUTH_PROTOCOL_ERROR');
+    if(username && username!==result.username)notify(`开发身份已切换：${username} → ${result.username}`);
+    try{await save(baseUrl,result.token,result.username);}catch{throw Error('AUTH_STORAGE_FAILED');}
+    token=result.token;username=result.username;
+    notify(`FineBI 开发会话已保存，当前账号：${username}`);
+    return token;
+  }
+  return {
+    async get() {
+      if(clearing)await clearing;
+      if(controller.signal.aborted)throw Error('AUTH_REQUIRED');
+      if(token)return token;
+      if(!pending)pending=acquire().finally(()=>{pending=undefined;});
+      return pending;
+    },
+    async invalidate(rejected) {
+      if(token!==rejected)return;
+      token='';
+      // Serialize invalidation with acquisition so an old response cannot overwrite a new session on disk.
+      clearing=save(baseUrl,'',username).catch(()=>{throw Error('AUTH_STORAGE_FAILED');}).finally(()=>{clearing=undefined;});
+      await clearing;
+    },
+    dispose(){controller.abort();},
+  };
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/scripts/session-file.mjs

@@ -0,0 +1,45 @@
+import {lstat, readFile, open, mkdir, rename, chmod, unlink} from 'node:fs/promises';
+import {dirname, resolve} from 'node:path';
+import {randomUUID} from 'node:crypto';
+import {spawnSync} from 'node:child_process';
+
+async function regularFile(path) {
+  try {const info=await lstat(path);if(!info.isFile() || info.isSymbolicLink())throw Error('SESSION_FILE_UNSAFE');}
+  catch(error){if(error.code!=='ENOENT')throw error;}
+}
+
+async function restrict(path) {
+  if(process.platform!=='win32'){await chmod(path,0o600);return;}
+  const options={encoding:'utf8',windowsHide:true};
+  const identity=spawnSync('whoami.exe',['/user','/fo','csv','/nh'],options);
+  const sid=identity.status===0 && identity.stdout.match(/"[^"]*","(S-[^"]+)"/)?.[1];
+  if(!sid)throw Error('SESSION_FILE_PERMISSIONS');
+  const result=spawnSync('icacls.exe',[path,'/inheritance:r','/grant:r',`*${sid}:(F)`,'*S-1-5-18:(F)','*S-1-5-32-544:(F)'],options);
+  if(result.status!==0)throw Error('SESSION_FILE_PERMISSIONS');
+}
+
+export async function saveSession(path,baseUrl,token,username='') {
+  path=resolve(path);
+  await regularFile(path);
+  const original=await readFile(path,'utf8').catch(error=>{if(error.code==='ENOENT')return '';throw error;});
+  const updates={FINEBI_DEV_TOKEN:token,FINEBI_DEV_TOKEN_BASE_URL:baseUrl,FINEBI_DEV_TOKEN_USERNAME:username};
+  if(!/^\s*(?:export\s+)?FINEBI_DEV_BASE_URL\s*=/m.test(original))updates.FINEBI_DEV_BASE_URL=baseUrl;
+  const retained=original.split(/\r?\n/).filter(line=>{
+    const key=line.match(/^\s*(?:export\s+)?([\w]+)\s*=/)?.[1];return !Object.hasOwn(updates,key);
+  }).join('\n').replace(/\n*$/,'');
+  const content=(retained?retained+'\n':'')+Object.entries(updates).map(([key,value])=>`${key}=${JSON.stringify(value)}`).join('\n')+'\n';
+  const temp=resolve(dirname(path),'temp');
+  await mkdir(temp,{recursive:true});
+  if((await lstat(temp)).isSymbolicLink())throw Error('SESSION_FILE_UNSAFE');
+  const stage=resolve(temp,`.finebi-session-${randomUUID()}`);
+  const handle=await open(stage,'wx',0o600);
+  try {
+    await restrict(stage);
+    await handle.writeFile(content,'utf8');await handle.sync();await handle.close();
+    await regularFile(path);
+    // A concurrent configuration edit wins; do not overwrite it with the earlier snapshot.
+    const current=await readFile(path,'utf8').catch(error=>{if(error.code==='ENOENT')return '';throw error;});
+    if(current!==original)throw Error('SESSION_FILE_CHANGED');
+    await rename(stage,path);
+  } finally {await handle.close().catch(()=>{});await unlink(stage).catch(error=>{if(error.code!=='ENOENT')throw error;});}
+}

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

@@ -1,31 +1,63 @@
-import {useEffect, useState} from 'react';
-import {FineBIError, queryWidgets, validateConfig} from './finebi/client';
-import type {AppConfig, QueryResult, FilterState} from './finebi/types';
-import {Widget} from './components/Widget';
-import {FilterBar} from './components/FilterBar';
-function Dashboard({config}: {config: AppConfig}) {
-  const [filters, setFilters] = useState<FilterState>({});
-  const [refresh, setRefresh] = useState(0);
-  const [state, setState] = useState<{loading:boolean; results?:Record<string,QueryResult>; error?:Error; at?:string}>({loading:true});
-  useEffect(() => {
-    const controller = new AbortController(); let current = true;
-    setState({loading:true});
-    queryWidgets(config, filters, controller.signal).then(results => {if(current) setState({loading:false,results,at:new Date().toLocaleTimeString()});}).catch(error => {if(current) setState({loading:false,error});});
-    return () => {current=false;controller.abort();};
-  },[config,filters,refresh]);
-  return <div className={`app ${config.layout}`}>
-    {config.layout==='workbench' && <aside><strong>FineBI</strong><a href="#dashboard">数据概览</a></aside>}
-    <main id="dashboard"><header><div><span className="eyebrow">FINEBI · LIVE DATA</span><h1>{config.title}</h1><p className="muted">{state.at ? `最近更新 ${state.at}` : '连接 FineBI 数据'} · {config.widgets.length} 个展示组件</p></div><button onClick={()=>setRefresh(n=>n+1)}>刷新</button></header>
-    {config.filters.length>0 && <FilterBar bindings={config.filters} onApply={setFilters}/>}
-    {state.loading && <p className="state" role="status">正在获取实时数据…</p>}
-    {state.error && <div className="state error" role="alert"><h2>{state.error instanceof FineBIError && state.error.code==='AUTH_REQUIRED'?'需要登录 FineBI':'数据暂不可用'}</h2><p>{state.error.message}</p><a href={config.basePath} target="_blank" rel="noreferrer">打开 FineBI</a><button onClick={()=>setRefresh(n=>n+1)}>重试</button></div>}
-    {state.results && <><p className="live" role="status">实时数据已更新</p><div className="grid">{config.widgets.map((binding,i)=><Widget key={`${refresh}-${JSON.stringify(filters)}-${i}`} result={state.results![binding.entryId]} binding={binding} pageSize={config.pageSize}/>)}</div></>}
-    <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);if(!Number.isSafeInteger(c.pageSize)||c.pageSize<1||c.pageSize>100)throw Error('pageSize 必须在 1–100 范围内');if(!Array.isArray(c.filters))throw Error('filters 必须为数组');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

@@ -0,0 +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}}

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

@@ -1,31 +1,40 @@
-import {useEffect, useRef, useState} from 'react';
-import * as echarts from 'echarts/core';
-import {BarChart, LineChart, PieChart} from 'echarts/charts';
-import {GridComponent, TooltipComponent, LegendComponent} from 'echarts/components';
-import {CanvasRenderer} from 'echarts/renderers';
-import type {Dataset, WidgetBinding} from '../finebi/types';
-import {chartValues} from '../services/view-data';
-echarts.use([BarChart, LineChart, PieChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
-export function Chart({dataset, binding}: {dataset: Dataset; binding: WidgetBinding}) {
-  const container = useRef<HTMLDivElement>(null);
-  const [order, setOrder] = useState('source');
-  const values = chartValues(dataset, binding);
-  useEffect(() => {
-    if (!container.current) return;
-    const chart = echarts.init(container.current);
-    const data = [...values];
-    if (order !== 'source') data.sort((a, b) => a.value === null ? 1 : b.value === null ? -1 : (a.value - b.value) * (order === 'asc' ? 1 : -1));
-    chart.setOption({
-      color: ['#2563eb','#14b8a6','#f59e0b','#8b5cf6','#ec4899'],
-      tooltip: {trigger: binding.type === 'pie' ? 'item' : 'axis', renderMode: 'richText'},
-      legend: binding.type === 'pie' ? {bottom: 0} : undefined,
-      grid: {left: 65, right: 24, top: 24, bottom: 65},
-      xAxis: binding.type === 'pie' ? undefined : {type: 'category', data: data.map(d => d.name), axisLabel: {rotate: data.length > 8 ? 30 : 0}},
-      yAxis: binding.type === 'pie' ? undefined : {type: 'value'},
-      series: [{type: binding.type, data: binding.type === 'pie' ? data : data.map(d => d.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]);
-  return <><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><table><tbody>{values.map((v,i) => <tr key={i}><td>{v.name}</td><td>{v.value ?? '不可用'}</td></tr>)}</tbody></table></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

@@ -1,14 +1,21 @@
 import {useState} from 'react';
-import type {Dataset} from '../finebi/types';
+import type {Dataset,WidgetBinding} from '../finebi/types';
 import {displayCell} from '../services/view-data';
-export function DataTable({dataset, pageSize}: {dataset: Dataset; pageSize: number}) {
+import {fieldIndex,tableCsv,tableDataset,tableRows} from '../services/table-data';
+export function DataTable({dataset, pageSize,binding}: {dataset: Dataset; pageSize: number;binding:WidgetBinding}) {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(0);
-  const rows = dataset.rows.filter(row => row.cells.some(c => displayCell(c).toLocaleLowerCase().includes(search.toLocaleLowerCase())));
+  const [sort,setSort]=useState<{fieldId:string;direction:'asc'|'desc'}>();
+  const [filters,setFilters]=useState<Record<string,string>>({});
+  const visible=tableDataset(dataset,binding);
+  const rows=tableRows(dataset,{search,sort,filters});
+  const shown=tableDataset({...dataset,rows},binding).rows;
   const pages = Math.max(1, Math.ceil(rows.length / pageSize));
   const current = Math.min(page, pages - 1);
-  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></div>
-    <div className="table-scroll"><table><thead><tr><th>序号</th>{dataset.columns.map(c => <th key={c.key}>{c.name}</th>)}</tr></thead><tbody>{rows.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={dataset.columns[j].key}>{displayCell(c)}</td>)}</tr>)}</tbody></table></div>
+  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>{{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/FilterBar.tsx

@@ -1,13 +1,18 @@
-import {useId, useState} from 'react';
-import {Alert, Button, Checkbox, ConfigProvider, DatePicker, Input, Select} from 'antd';
+import {lazy, Suspense, useId, useState} from 'react';
+import Alert from 'antd/es/alert';
+import Button from 'antd/es/button';
+import Checkbox from 'antd/es/checkbox';
+import ConfigProvider from 'antd/es/config-provider';
+import Input from 'antd/es/input';
 import zhCN from 'antd/locale/zh_CN';
-import {calendarConfig, calendarValue} from './calendar';
 import {encodeFilters} from '../finebi/filters.js';
 import type {FilterBinding, FilterState, FilterValue} from '../finebi/types';
+import {MonthPicker} from './MonthPicker';
 
-const CalendarPicker = DatePicker.generatePicker<Date>(calendarConfig);
+const RangeFilter=lazy(()=>import('./RangeFilter'));
+const OptionFilter=lazy(()=>import('./OptionFilter'));
 
-export function FilterBar({bindings,onApply}: {bindings:FilterBinding[];onApply:(state:FilterState)=>void}) {
+export function FilterBar({bindings,onApply,cockpit=false,scope,compact=false}: {bindings:FilterBinding[];onApply:(state:FilterState)=>void;cockpit?:boolean;scope?:Record<string,string>;compact?:boolean}) {
   const id=useId();
   const [draft,setDraft]=useState<FilterState>({});
   const [applied,setApplied]=useState<FilterState>({});
@@ -18,7 +23,7 @@ export function FilterBar({bindings,onApply}: {bindings:FilterBinding[];onApply:
     catch(e){setError((e as Error).message);}
   };
   const dirty=JSON.stringify(draft)!==JSON.stringify(applied);
-  return <ConfigProvider locale={zhCN} theme={{token:{colorPrimary:'#2563eb',colorText:'#253858',colorBorder:'#dce4ef',borderRadius:10,controlHeightLG:46,fontFamily:'Inter,"Microsoft YaHei",system-ui,sans-serif'},components:{Select:{optionSelectedBg:'#edf4ff'},DatePicker:{cellActiveWithRangeBg:'#edf4ff'}}}}>
+  return <ConfigProvider locale={zhCN} theme={{token:{colorPrimary:cockpit?'#197a58':'#2563eb',colorText:'#253858',colorBorder:'#dce4ef',borderRadius:10,controlHeightLG:46,fontFamily:'Inter,"Microsoft YaHei",system-ui,sans-serif'},components:{Select:{optionSelectedBg:cockpit?'#eaf6ef':'#edf4ff'},DatePicker:{cellActiveWithRangeBg:cockpit?'#eaf6ef':'#edf4ff'}}}}>
     <form className="filter-card" onSubmit={e=>{e.preventDefault();apply(draft);}}>
       <div className="filter-heading"><div className="filter-heading-title"><span className="filter-symbol" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M4 7h16M7 12h10M10 17h4"/></svg></span><div><h2>筛选条件</h2><p>选择筛选条件，查看对应的数据</p></div></div><span className={`filter-status ${dirty?'pending':''}`}>{dirty?'待应用':'当前条件已应用'}</span></div>
       <div className="filter-fields">{bindings.map((binding,index)=>{
@@ -26,13 +31,14 @@ export function FilterBar({bindings,onApply}: {bindings:FilterBinding[];onApply:
         const isRange=type==='date-range'||type==='month-range';
         const interval=value && typeof value==='object' && !Array.isArray(value)?value:{start:'',end:''};
         const fieldId=`${id}-filter-${index}`;
-        const updateRange=(_dates:unknown,strings:[string,string]|null)=>update(binding.name,{start:strings?.[0]||'',end:strings?.[1]||''});
         return <div className={`filter-field ${isRange?'date-field':''}`} key={binding.name}>
           <div className="filter-label-row"><label htmlFor={isRange?fieldId+'-start':fieldId}>{binding.label}<span>{type==='multi-select'?'可多选':type==='month-range'?'按起止月份筛选':isRange?'按起止日期筛选':''}</span></label><button className="field-reset" type="button" aria-label={`恢复${binding.label}默认`} onClick={()=>update(binding.name,'')}>重置</button></div>
-          {isRange ? <><label className="sr-only" htmlFor={fieldId+'-start'}>{binding.label}开始日期</label><label className="sr-only" htmlFor={fieldId+'-end'}>{binding.label}结束日期</label><CalendarPicker.RangePicker size="large" className="filter-date-range" id={{start:fieldId+'-start',end:fieldId+'-end'}} picker={type==='month-range'?'month':'date'} format={type==='month-range'?'YYYY-MM':'YYYY-MM-DD'} placeholder={type==='month-range'?['开始月份','结束月份']:['开始日期','结束日期']} allowEmpty={[true,true]} allowClear value={[calendarValue(interval.start),calendarValue(interval.end)]} minDate={calendarValue('0001-01-01')!} maxDate={calendarValue('9999-12-31')!} onCalendarChange={updateRange} onChange={updateRange} onKeyDown={e=>{if(e.key==='Enter')e.preventDefault();}}/></>
-            : binding.options ? <Select id={fieldId} 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=>update(binding.name,selected??'')} notFoundContent={`没有匹配的${binding.label}`}/>
-            : <Input id={fieldId} aria-label={binding.label} size="large" type={type==='date'?'date':type==='month'?'month':'text'} min={type==='date'?'0001-01-01':type==='month'?'0001-01':undefined} max={type==='date'?'9999-12-31':type==='month'?'9999-12':undefined} inputMode={type==='number'?'decimal':undefined} placeholder={type==='quarter'?'YYYY-Q，例如 2026-3':type==='year'?'YYYY':type==='text'?'输入精确匹配值':undefined} disabled={value===null} value={text} onChange={e=>update(binding.name,e.target.value)}/>}
+          {isRange ? <><label className="sr-only" htmlFor={fieldId+'-start'}>{binding.label}开始日期</label><label className="sr-only" htmlFor={fieldId+'-end'}>{binding.label}结束日期</label><Suspense fallback={<span role="status">正在加载日期控件…</span>}><RangeFilter id={fieldId} month={type==='month-range'} value={interval} onChange={value=>update(binding.name,value)}/></Suspense></>
+            : binding.options ? <Suspense fallback={<span role="status">正在加载选项…</span>}><OptionFilter id={fieldId} binding={binding} value={value} onChange={value=>update(binding.name,value)}/></Suspense>
+            : type==='month'?<MonthPicker id={fieldId} label={binding.label} value={text} onChange={value=>update(binding.name,value)}/>
+            : <Input id={fieldId} aria-label={binding.label} size="large" type={type==='date'?'date':'text'} min={type==='date'?'0001-01-01':undefined} max={type==='date'?'9999-12-31':undefined} inputMode={type==='number'?'decimal':undefined} placeholder={type==='quarter'?'YYYY-Q，例如 2026-3':type==='year'?'YYYY':type==='text'?'输入精确匹配值':undefined} disabled={value===null} value={text} onChange={e=>update(binding.name,e.target.value)}/>}
           <div className="field-hint">{binding.allowNull ? <Checkbox checked={value===null} onChange={e=>update(binding.name,e.target.checked?null:'')}>仅筛选空值</Checkbox> : isRange ? <span>可只填一端；全部留空沿用默认条件</span> : <span>留空沿用默认条件</span>}</div>
+          {scope&&(compact?<details className="filter-scope"><summary>查看筛选作用范围</summary>{scope[binding.name]}</details>:<p className="filter-scope">作用范围：{scope[binding.name]}</p>)}
         </div>;
       })}</div>
       <div className="filter-bottom"><p className={dirty?'unsaved-note':''}>{dirty?'条件已修改，点击「应用筛选」更新数据':'未设置的条件沿用看板保存值'}</p><div className="filter-buttons"><Button size="large" onClick={()=>{setDraft({});apply({});}}>恢复全部默认</Button><Button size="large" type="primary" htmlType="submit">应用筛选</Button></div></div>

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

@@ -0,0 +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>;
+}