@finebi/finebi-cli 1.5.0 → 1.6.0

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "finebi-web-app",
+  "version": "0.2.0",
+  "private": true,
+  "type": "module",
+  "engines": {"node": ">=18.17"},
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "test": "node --test tests/*.test.mjs"
+  },
+  "dependencies": {"@rc-component/picker": "1.12.2", "antd": "6.6.7", "date-fns": "4.1.0", "echarts": "5.6.0", "react": "18.3.1", "react-dom": "18.3.1"},
+  "devDependencies": {"@types/node": "22.13.10", "@types/react": "18.3.18", "@types/react-dom": "18.3.5", "typescript": "5.8.3", "vite": "5.4.21"}
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/public/app-config.json

@@ -0,0 +1,11 @@
+{
+  "schemaVersion": "1",
+  "title": "FineBI 数据应用",
+  "basePath": "/webroot/decision",
+  "layout": "overview",
+  "dashboardId": "",
+  "maxRows": 1000,
+  "pageSize": 8,
+  "widgets": [],
+  "filters": []
+}

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

@@ -0,0 +1,56 @@
+// 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) {
+  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 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 pathname = new URL(req.url, 'http://localhost').pathname;
+    if (!pathname.startsWith(prefix+'/') && pathname !== prefix) return next();
+    const host = req.headers.host || '';
+    const origin = req.headers.origin;
+    if (!/^(localhost|127\.0\.0\.1)(:\d+)?$/.test(host) || origin && origin !== `http://${host}` || req.headers['sec-fetch-site'] === 'cross-site') return reply(res,403,'PERMISSION_DENIED');
+    if (pathname !== queryPath || req.method !== 'POST' || req.headers['x-requested-with'] !== 'XMLHttpRequest') return reply(res,403,'PERMISSION_DENIED');
+    let body;
+    try {
+      let raw='';
+      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');
+      validateRefer(config.filters || [],body.refer);
+    } 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();
+      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 || {}}),
+      });
+      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');
+      // 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');}
+  };
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import {useState} from 'react';
+import type {Dataset} from '../finebi/types';
+import {displayCell} from '../services/view-data';
+export function DataTable({dataset, pageSize}: {dataset: Dataset; pageSize: number}) {
+  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 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>
+    {!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

@@ -0,0 +1,42 @@
+import {useId, useState} from 'react';
+import {Alert, Button, Checkbox, ConfigProvider, DatePicker, Input, Select} from 'antd';
+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';
+
+const CalendarPicker = DatePicker.generatePicker<Date>(calendarConfig);
+
+export function FilterBar({bindings,onApply}: {bindings:FilterBinding[];onApply:(state:FilterState)=>void}) {
+  const id=useId();
+  const [draft,setDraft]=useState<FilterState>({});
+  const [applied,setApplied]=useState<FilterState>({});
+  const [error,setError]=useState('');
+  const update=(name:string,value:FilterValue)=>{setDraft(old=>({...old,[name]:value}));setError('');};
+  const apply=(state:FilterState)=>{
+    try {encodeFilters(bindings,state);setApplied(state);onApply(state);setError('');}
+    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'}}}}>
+    <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)=>{
+        const type=binding.type??'select', value=draft[binding.name], text=typeof value==='string'?value:'';
+        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)}/>}
+          <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>
+        </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>
+      {error && <Alert title={error} type="error" showIcon className="filter-alert"/>}
+    </form>
+  </ConfigProvider>;
+}

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

@@ -0,0 +1,28 @@
+import {Component, type ReactNode} from 'react';
+import type {QueryResult, WidgetBinding} from '../finebi/types';
+import {displayCell, selectDataset} from '../services/view-data';
+import {Chart} from './Chart';
+import {DataTable} from './DataTable';
+class Boundary extends Component<{children: ReactNode}, {error: string}> {
+  state = {error: ''};
+  static getDerivedStateFromError(error: Error) {return {error: error.message};}
+  render() {return this.state.error ? <p role="alert">{this.state.error}</p> : 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}/>;
+  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">{displayCell(data.rows[0].cells[index])}</div>;
+  }
+  return <Chart dataset={data} binding={binding}/>;
+}
+export function Widget({result, binding, pageSize}: {result: QueryResult; binding: WidgetBinding; pageSize: number}) {
+  return <section className={`panel ${binding.type==='table'?'wide':''}`}><h2>{binding.name}</h2>
+    {result.range.total.value !== null && <p className="muted">查询总行数 {result.range.total.value} · 本次返回 {result.datasets[0]?.returnedRowCount ?? 0}</p>}
+    {result.warnings.length > 0 && <p className="notice" role="status">{result.warnings.includes('NEXT_PAGE_UNSUPPORTED') ? '接口仍标记有后续数据；当前仅展示本次返回结果，本地分页不代表服务端续页。' : '部分结果未能完整转换。'}<small>{result.warnings.join(' · ')}</small></p>}
+    <Boundary><Content result={result} binding={binding} pageSize={pageSize}/></Boundary>
+  </section>;
+}

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

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

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

@@ -0,0 +1,37 @@
+import {normalize} from './normalize';
+import {encodeFilters, validateFilterBindings} from './filters.js';
+import type {AppConfig, QueryResult, FilterState} from './types';
+export class FineBIError extends Error {
+  constructor(public code: string, message: string) {super(message); this.name = 'FineBIError';}
+}
+export function validateConfig(config: AppConfig) {
+  if (config.schemaVersion !== '1') throw new Error('不支持的配置版本');
+  if (!/^\/(?!\/)[\w/-]+$/.test(config.basePath)) throw new Error('basePath 必须是同源绝对路径');
+  if (!config.dashboardId || !config.widgets?.length) throw new Error('请先在 app-config.json 绑定仪表板和组件');
+  if (!Number.isSafeInteger(config.maxRows) || config.maxRows < 1 || config.maxRows > 10000) throw new Error('maxRows 必须在 1–10000 范围内');
+  validateFilterBindings(config.filters);
+}
+export async function queryWidgets(config: AppConfig, filters: FilterState = {}, signal?: AbortSignal, fetchImpl: typeof fetch = fetch): Promise<Record<string, QueryResult>> {
+  validateConfig(config);
+  const refer = encodeFilters(config.filters,filters);
+  const ids = [...new Set(config.widgets.map(w => w.entryId))];
+  const response = await fetchImpl(`${config.basePath.replace(/\/$/, '')}/v5/api/dashboard/report/${encodeURIComponent(config.dashboardId)}/widgets/query`, {
+    method: 'POST', credentials: 'include', signal, redirect: 'manual',
+    headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
+    body: JSON.stringify({widgetIds: ids, includeWidgetBean: true, pageLimit: config.maxRows, refer}),
+  });
+  if (response.status === 401 || response.type === 'opaqueredirect' || response.status >= 300 && response.status < 400) throw new FineBIError('AUTH_REQUIRED', '登录已失效，请登录 FineBI 后重试');
+  if (response.status === 403) throw new FineBIError('PERMISSION_DENIED', '当前用户没有访问权限');
+  if (response.headers.get('content-type')?.includes('text/html')) throw new FineBIError('AUTH_REQUIRED', '返回了登录页面，请重新登录 FineBI');
+  const body = await response.json().catch(() => {throw new FineBIError('INVALID_RESPONSE', 'FineBI 返回了无法解析的响应');});
+  const code = body.errorCode ?? body.code;
+  if (['TIME_OUT','JWT_EXPIRED','LOGIN_INFO_NOT_AVAILABLE','CANNOT_GET_TOKEN','AUTH_REQUIRED'].includes(code)) throw new FineBIError('AUTH_REQUIRED', '登录已失效，请登录 FineBI 后重试');
+  if (code === 'PERMISSION_DENIED') throw new FineBIError('PERMISSION_DENIED', '当前用户没有数据或字段权限');
+  if (!response.ok || body.success !== true) throw new FineBIError('QUERY_FAILED', 'FineBI 查询失败，请检查组件、控件绑定及访问权限');
+  const results: Record<string, QueryResult> = {};
+  for (const id of ids) {
+    if (!body.data?.[id]?.previewResult) throw new FineBIError('INVALID_RESPONSE', `接口未返回组件 ${id}，不能视为空数据`);
+    results[id] = normalize(body.data[id]);
+  }
+  return results;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/finebi/date.d.ts

@@ -0,0 +1 @@
+export function isDateValue(value: unknown): boolean;

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/finebi/date.js

@@ -0,0 +1,5 @@
+export function isDateValue(value) {
+  if (typeof value !== 'string' || !/^(?!0000)\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const date = new Date(`${value}T00:00:00.000Z`);
+  return Number.isFinite(date.getTime()) && date.toISOString().slice(0, 10) === value;
+}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/finebi/filters.d.ts

@@ -0,0 +1,4 @@
+import type {FilterBinding, FilterState} from './types';
+export function validateFilterBindings(bindings: unknown): void;
+export function encodeFilters(bindings: FilterBinding[], state?: FilterState): Record<string,string[]>;
+export function validateRefer(bindings: FilterBinding[], refer?: unknown): void;

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/finebi/filters.js

@@ -0,0 +1,106 @@
+import {isDateValue} from './date.js';
+
+const types = new Set(['text','select','multi-select','number','date','date-range','year','month','month-range','quarter','time-label']);
+const choices = new Set(['select','multi-select','time-label']);
+const nullable = new Set(['text','select','multi-select','number']);
+const record = value => value !== null && typeof value === 'object' && !Array.isArray(value);
+const nonempty = value => typeof value === 'string' && value.trim().length > 0;
+const literal = value => typeof value === 'string' && value !== '' && value !== 'null' && !value.includes(',');
+const kind = binding => binding.type ?? 'select';
+const range = binding => ['date-range','month-range'].includes(kind(binding));
+const keys = binding => range(binding) ? [binding.name+'_s',binding.name+'_e'] : [binding.name];
+const fail = message => {throw new Error(`无效筛选：${message}`);};
+
+// Shared by app inspect, browser requests and the development proxy.
+export function validateFilterBindings(bindings) {
+  if (!Array.isArray(bindings)) fail('filters 必须为数组');
+  const names = new Set(), wireKeys = new Set();
+  for (const binding of bindings) {
+    if (!record(binding)) fail('配置必须为对象');
+    for (const key of Object.keys(binding)) if (!['name','label','type','options','allowNull'].includes(key)) fail(`不支持的配置字段 ${key}`);
+    if (!nonempty(binding.name) || !nonempty(binding.label)) fail('name 和 label 必须为非空文本');
+    if (names.has(binding.name)) fail(`重复名称 ${binding.name}`);
+    names.add(binding.name);
+    if (!types.has(kind(binding))) fail(`不支持的类型 ${binding.type}`);
+    if ('allowNull' in binding && (typeof binding.allowNull !== 'boolean' || !nullable.has(kind(binding)))) fail(`${binding.name} 不支持此 allowNull 配置`);
+    for (const key of keys(binding)) {
+      if (wireKeys.has(key)) fail(`请求键冲突 ${key}`);
+      wireKeys.add(key);
+    }
+    if (!choices.has(kind(binding))) {
+      if ('options' in binding) fail(`${binding.name} 不配置 options`);
+      continue;
+    }
+    if (!Array.isArray(binding.options)) fail(`${binding.name} 必须配置 options`);
+    const values = new Set();
+    for (const option of binding.options) {
+      if (!record(option) || Object.keys(option).some(key => !['label','value'].includes(key)) || !nonempty(option.label)
+          || !(kind(binding)==='time-label' ? nonempty(option.value) : literal(option.value))) fail(`${binding.name} 含无法编码的选项（空串、逗号或保留字 null）`);
+      if (values.has(option.value)) fail(`${binding.name} 含重复选项`);
+      values.add(option.value);
+    }
+  }
+}
+
+function temporal(type, value) {
+  if (typeof value !== 'string') return false;
+  if (type === 'date' || type === 'date-range') return isDateValue(value);
+  if (type === 'year') return /^\d{4}$/.test(value) && value !== '0000';
+  if (type === 'quarter') return /^\d{4}-[1-4]$/.test(value) && !value.startsWith('0000-');
+  return /^\d{4}-(0[1-9]|1[0-2])$/.test(value) && !value.startsWith('0000-');
+}
+
+export function encodeFilters(bindings, state = {}) {
+  validateFilterBindings(bindings);
+  if (!record(state)) fail('状态必须为对象');
+  const result = Object.create(null);
+  for (const [name, value] of Object.entries(state)) {
+    const binding = bindings.find(item => item.name === name);
+    if (!binding) fail(`未知名称 ${name}`);
+    const type = kind(binding);
+    // Empty UI values mean saved conditions, never an unrestricted query.
+    if (value === undefined || value === '') continue;
+    if (value === null) {
+      if (!binding.allowNull) fail(`${name} 不支持筛选空值`);
+      result[name] = ['null'];
+    } else if (range(binding)) {
+      if (!record(value) || Object.keys(value).some(key => !['start','end'].includes(key))
+          || typeof value.start !== 'string' || typeof value.end !== 'string') fail(`${name} 需要 start/end`);
+      const {start,end} = value;
+      if (start && !temporal(type,start) || end && !temporal(type,end) || start && end && start > end) fail(`${name} 区间无效或起始晚于结束`);
+      if (start) result[name+'_s'] = [start];
+      if (end) result[name+'_e'] = [end];
+    } else if (type === 'multi-select') {
+      if (!Array.isArray(value) || value.some(v => !literal(v) || !binding.options.some(o => o.value === v)) || new Set(value).size !== value.length) fail(`${name} 多选值无效`);
+      if (value.length) result[name] = [value.join(',')];
+    } else {
+      const valid = type === 'text' ? literal(value)
+        : type === 'number' ? typeof value === 'string' && /^-?\d+(\.\d+)?$/.test(value)
+        : choices.has(type) ? typeof value === 'string' && binding.options.some(o => o.value === value)
+        : temporal(type,value);
+      if (!valid) fail(`${name} 值格式不正确`);
+      result[name] = [value];
+    }
+  }
+  return {...result};
+}
+
+export function validateRefer(bindings, refer = {}) {
+  validateFilterBindings(bindings);
+  if (!record(refer)) fail('refer 必须为对象');
+  const known = new Set(bindings.flatMap(keys));
+  for (const [name,value] of Object.entries(refer)) {
+    if (!known.has(name) || !Array.isArray(value) || value.length !== 1 || typeof value[0] !== 'string' || !value[0]) fail(`非法请求键或值 ${name}`);
+  }
+  const state = Object.create(null);
+  for (const binding of bindings) {
+    if (range(binding)) {
+      const start = refer[binding.name+'_s']?.[0] ?? '', end = refer[binding.name+'_e']?.[0] ?? '';
+      if (start || end) state[binding.name] = {start,end};
+    } else if (Object.hasOwn(refer,binding.name)) {
+      const value = refer[binding.name][0];
+      state[binding.name] = value === 'null' && nullable.has(kind(binding)) ? null : kind(binding) === 'multi-select' ? value.split(',') : value;
+    }
+  }
+  encodeFilters(bindings,state);
+}

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

@@ -0,0 +1,77 @@
+import type {Cell, Column, Dataset, QueryResult} from './types';
+
+// Native preview JSON is deliberately confined to this boundary.
+type Native = Record<string, any>;
+const unavailable = (reason: string, display: string | null = null): Cell => ({value: null, display, state: 'UNAVAILABLE', reason});
+const text = (value: unknown): string | null => typeof value === 'string' ? value : null;
+const column = (id: string, name: string, index: number, type: Column['type']): Column => ({key: `c${index}`, fieldId: id, name, type, encoding: ({STRING: 'STRING', DECIMAL: 'DECIMAL_STRING', DATE: 'EPOCH_MILLIS_STRING', UNKNOWN: null})[type]});
+const warn = (r: QueryResult, message: string) => {if (!r.warnings.includes(message)) r.warnings.push(message);};
+const partial = (r: QueryResult, message: string) => {r.normalization = 'PARTIAL'; warn(r, message);};
+
+function value(raw: unknown, display: string | null, authority: unknown, type: Column['type']): Cell {
+  if (authority === false) return {value: null, display, state: 'RESTRICTED', reason: 'SOURCE_VALUE_RESTRICTED'};
+  if (authority !== true) return unavailable('AUTHORITY_UNAVAILABLE', display);
+  if (raw == null) return display === null ? {value: null, display: null, state: 'NULL', reason: null} : unavailable('DISPLAY_ONLY', display);
+  if (type === 'STRING' && typeof raw === 'string') return {value: raw, display, state: 'AVAILABLE', reason: null};
+  if (type === 'DATE') {
+    const s = String(raw);
+    if ((typeof raw === 'string' || typeof raw === 'number' && Number.isSafeInteger(raw)) && /^[+-]?\d+$/.test(s)) {
+      const n = BigInt(s);
+      if (n >= -9223372036854775808n && n <= 9223372036854775807n) return {value: s, display, state: 'AVAILABLE', reason: null};
+    }
+    return unavailable('INVALID_TIMESTAMP_VALUE', display);
+  }
+  if (type === 'DECIMAL' && (typeof raw === 'string' || typeof raw === 'number')) {
+    if (typeof raw === 'number' && (!Number.isFinite(raw) || Number.isInteger(raw) && !Number.isSafeInteger(raw))) return unavailable('UNSAFE_NUMERIC_VALUE', display);
+    if (/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(String(raw))) return {value: String(raw), display, state: 'AVAILABLE', reason: null};
+  }
+  return unavailable(type === 'UNKNOWN' ? 'TYPE_UNAVAILABLE' : 'DISPLAY_ONLY', display);
+}
+
+export function normalize(source: Native): QueryResult {
+  const p = source?.previewResult;
+  const r: QueryResult = {schemaVersion: '1', resultType: 'UNKNOWN', normalization: 'COMPLETE', datasets: [], warnings: [], range: {mode: 'UNKNOWN', page: null, pageSize: null, pageUnit: null, hasNext: null, hasPrevious: null, total: {value: null, unit: null}}};
+  if (p?.resultType === 'DETAIL' && Array.isArray(p.header) && Array.isArray(p.items)) {
+    r.resultType = 'DETAIL_TABLE';
+    r.range = {mode: 'PAGE', page: 1, pageSize: Number.isSafeInteger(p.size) ? p.size : null, pageUnit: 'ROW', hasNext: typeof p.hasNext === 'boolean' ? p.hasNext : null, hasPrevious: typeof p.hasPrev === 'boolean' ? p.hasPrev : null, total: {value: Number.isSafeInteger(p.row) && p.row >= 0 ? p.row : null, unit: 'DETAIL_ROW'}};
+    const dataset: Dataset = {id: 'main', columns: p.header.map((h: Native, i: number) => column(h.dId, h.text, i, detailType(source.widgetBean?.dimensions?.[h.dId]?.type))), rows: [], returnedRowCount: p.items.length};
+    for (const row of p.items) {
+      if (!Array.isArray(row) || row.length !== dataset.columns.length) partial(r, 'ROW_WIDTH_MISMATCH');
+      dataset.rows.push({kind: 'DATA', cells: dataset.columns.map((c, i) => {
+        const cell = row?.[i];
+        if (!cell || typeof cell !== 'object' || cell.dId && cell.dId !== c.fieldId) {partial(r, 'ROW_FIELD_MISMATCH'); return unavailable('MISSING_CELL');}
+        return value(cell.value, text(cell.formatText) ?? text(cell.text), cell.authority, c.type);
+      })});
+    }
+    r.datasets.push(dataset);
+    if (p.hasNext) warn(r, 'NEXT_PAGE_UNSUPPORTED');
+    if (r.range.total.value !== null && dataset.rows.length < r.range.total.value) warn(r, 'RESULT_TRUNCATED');
+  } else if (p?.resultType === 'CHART') {
+    r.resultType = 'CHART'; r.range.mode = 'UNPAGED';
+    const models: Native[] = [];
+    for (const geom of p.geoms || []) {
+      if (geom?.dataModel) models.push(geom.dataModel); else partial(r, 'GEOMETRY_WITHOUT_INLINE_DATA');
+    }
+    if (p.shared?.data) models.push(p.shared.data);
+    if (p.computedState) partial(r, 'CHART_COMPUTED_STATE_NOT_NORMALIZED');
+    for (const model of new Set(models)) {
+      if (!Array.isArray(model.fields) || !Array.isArray(model.colData) || !Number.isSafeInteger(model.rowCount) || model.rowCount < 0) {partial(r, 'INVALID_CHART_MODEL'); continue;}
+      const dataset: Dataset = {id: `model${r.datasets.length}`, columns: model.fields.map((f: Native, i: number) => column(f.id, f.name, i, f.fieldType === 'MEASURE' ? 'DECIMAL' : f.fieldType === 'DIMENSION' ? 'STRING' : 'UNKNOWN')), rows: [], returnedRowCount: model.rowCount};
+      if (model.colData.length !== model.fields.length || model.colData.some((c: unknown[]) => !Array.isArray(c) || c.length !== model.rowCount)) partial(r, 'ROW_WIDTH_MISMATCH');
+      for (let i = 0; i < model.rowCount; i++) dataset.rows.push({kind: 'UNKNOWN', cells: dataset.columns.map((c, j) => {
+        if (!Array.isArray(model.colData[j]) || i >= model.colData[j].length) return unavailable('MISSING_CELL');
+        const raw = model.colData[j][i];
+        if (raw === '***') return {value: null, display: '***', state: 'RESTRICTED', reason: 'SOURCE_VALUE_RESTRICTED'};
+        if (c.type === 'DECIMAL' && typeof raw === 'string') return unavailable('CHART_VALUE_SEMANTICS_UNKNOWN');
+        return value(raw, c.type === 'STRING' ? text(raw) : null, true, c.type);
+      })});
+      r.datasets.push(dataset);
+    }
+    if (!r.datasets.length) {r.normalization = 'UNSUPPORTED'; warn(r, 'NO_INLINE_CHART_DATA');}
+  } else {r.normalization = 'UNSUPPORTED'; warn(r, 'RESULT_TYPE_UNSUPPORTED');}
+  return r;
+}
+
+function detailType(type: number): Column['type'] {
+  return type === 1 ? 'STRING' : type === 2 ? 'DECIMAL' : [3,13,15,20].includes(type) ? 'DATE' : 'UNKNOWN';
+}

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

@@ -0,0 +1,18 @@
+export type Cell = {value: string | null; display: string | null; state: 'AVAILABLE' | 'NULL' | 'UNAVAILABLE' | 'RESTRICTED'; reason: string | null};
+export type Column = {key: string; fieldId: string; name: string; type: 'STRING' | 'DECIMAL' | 'DATE' | 'UNKNOWN'; encoding: string | null};
+export type Dataset = {id: string; columns: Column[]; rows: {kind: 'DATA' | 'UNKNOWN'; cells: Cell[]}[]; returnedRowCount: number};
+export type QueryResult = {
+  schemaVersion: '1'; resultType: 'DETAIL_TABLE' | 'CHART' | 'UNKNOWN';
+  normalization: 'COMPLETE' | 'PARTIAL' | 'UNSUPPORTED'; datasets: Dataset[]; warnings: string[];
+  range: {mode: 'PAGE' | 'UNPAGED' | 'UNKNOWN'; page: number | null; pageSize: number | null; pageUnit: string | null; hasNext: boolean | null; hasPrevious: boolean | null; total: {value: number | null; unit: string | null}};
+};
+export type WidgetBinding = {entryId: string; name: string; type: 'table' | 'bar' | 'line' | 'pie' | 'kpi'; datasetId?: string; categoryFieldId?: string; valueFieldId?: string};
+export type FilterBinding = {name: string; label: string} & (
+  {type: 'date' | 'date-range' | 'year' | 'month' | 'month-range' | 'quarter'; options?: never; allowNull?: never}
+  | {type: 'text' | 'number'; options?: never; allowNull?: boolean}
+  | {type?: 'select' | 'multi-select'; options: {label: string; value: string}[]; allowNull?: boolean}
+  | {type: 'time-label'; options: {label: string; value: string}[]; allowNull?: never}
+);
+export type FilterValue = string | string[] | {start:string;end:string} | null | undefined;
+export type FilterState = Record<string,FilterValue>;
+export type AppConfig = {schemaVersion: '1'; title: string; basePath: string; layout: 'overview' | 'workbench'; dashboardId: string; maxRows: number; pageSize: number; widgets: WidgetBinding[]; filters: FilterBinding[]};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App';
+import './styles.css';
+createRoot(document.getElementById('root')!).render(<React.StrictMode><App/></React.StrictMode>);

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/src/services/view-data.ts

@@ -0,0 +1,18 @@
+import type {Cell, Dataset, QueryResult, WidgetBinding} from '../finebi/types';
+export function selectDataset(result: QueryResult, id?: string): Dataset {
+  if (result.normalization === 'UNSUPPORTED') throw new Error('当前结果类型尚未支持，请使用 FineBI 原生查看页');
+  const dataset = id ? result.datasets.find(d => d.id === id) : result.datasets.length === 1 ? result.datasets[0] : undefined;
+  if (!dataset) throw new Error('请绑定唯一的数据模型 datasetId');
+  return dataset;
+}
+export const displayCell = (cell: Cell) => cell.state === 'RESTRICTED' ? '受限' : cell.display ?? (cell.state === 'AVAILABLE' ? cell.value : null) ?? (cell.state === 'NULL' ? '—' : '不可用');
+export function chartValues(dataset: Dataset, binding: Pick<WidgetBinding, 'categoryFieldId' | 'valueFieldId'>) {
+  const x = dataset.columns.findIndex(c => c.fieldId === binding.categoryFieldId);
+  const y = dataset.columns.findIndex(c => c.fieldId === binding.valueFieldId);
+  if (x < 0 || y < 0 || dataset.columns[y].type !== 'DECIMAL') throw new Error('图表字段绑定缺失或类型不匹配');
+  return dataset.rows.map(row => {
+    const cell = row.cells[y];
+    const n = cell.state === 'AVAILABLE' ? Number(cell.value) : NaN;
+    return {name: displayCell(row.cells[x]), value: Number.isFinite(n) ? n : null};
+  });
+}

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

@@ -0,0 +1,8 @@
+:root{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#17233b;background:#f3f6fa;font-synthesis:none;line-height:1.5;font-size:14px}
+*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input{border:1px solid #cbd5e1;border-radius:6px;background:white;padding:8px 12px;color:inherit}button{cursor:pointer}button:hover{border-color:#2563eb}button:disabled{opacity:.4;cursor:default}a{color:#2563eb}main{max-width:1500px;margin:auto;padding:32px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1{font-size:28px;margin:5px 0}h2{font-size:17px;margin:0 0 12px}.eyebrow{color:#2563eb;font-weight:700;font-size:11px;letter-spacing:2px}.muted,footer{color:#64748b}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.panel{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;min-width:0}.wide{grid-column:1/-1}.chart{height:300px}.chart-sort{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#64748b}.chart-sort select{font-size:12px}.table-scroll{overflow:auto;max-height:580px}table{border-collapse:collapse;width:100%;font-size:13px}td,th{white-space:nowrap;padding:11px 14px;text-align:left;border-bottom:1px solid #edf0f5}th{background:#f8fafc;color:#475569;font-weight:600;position:sticky;top:0}tbody tr:hover{background:#f8fafc}.table-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0}.table-tools input{margin-left:10px}.pager{display:flex;gap:16px;align-items:center;justify-content:flex-end;margin-top:18px}.notice{background:#fff7e5;border-left:3px solid #d89b21;padding:10px 14px;color:#76550d;font-size:12px}.notice small{display:block;margin-top:4px;overflow-wrap:anywhere}.live{color:#0c836d;font-size:12px}.state{margin:48px auto;padding:32px;background:white;border:1px solid #e2e8f0;border-radius:10px;max-width:900px}.error{border-color:#efb7b7}.error button{margin-left:20px}.empty{text-align:center;padding:40px;color:#64748b}.kpi{font-size:36px;font-weight:700;color:#2563eb}footer{padding:24px 0;font-size:12px}details{margin-top:12px;color:#64748b}summary{cursor:pointer}.workbench{display:grid;grid-template-columns:190px minmax(0,1fr)}aside{background:#14233c;color:#fff;padding:32px 22px;min-height:100vh}aside strong{font-size:24px}aside a{display:block;margin-top:35px;color:#c4d4f0;text-decoration:none}.workbench main{width:100%}@media(max-width:800px){main{padding:16px}.grid{grid-template-columns:1fr}.workbench{display:block}aside{display:none}.table-tools{align-items:flex-start;flex-direction:column}h1{font-size:24px}}
+
+.filter-card{background:#fff;border:1px solid #e3eaf3;border-radius:16px;padding:24px 28px 20px;margin-bottom:22px;box-shadow:0 4px 18px #25385804}
+.filter-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}.filter-heading-title{display:flex;align-items:center;gap:12px}.filter-symbol{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;background:#eff5ff;color:#2563eb;border-radius:12px}.filter-symbol svg{width:24px;height:24px}.filter-heading h2{margin:0 0 3px;font-size:16px;font-weight:650;color:#1e3150}.filter-heading p{margin:0;color:#8492a6;font-size:12px}.filter-status{background:#eef9f5;color:#168367;font-size:11px;font-weight:500;padding:5px 10px;border-radius:20px;white-space:nowrap}.filter-status.pending{background:#fff6e8;color:#b47519}
+.filter-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:30px}.filter-field{min-width:0}.filter-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.filter-label-row label{font-size:13px;font-weight:600;color:#344768}.filter-label-row label span{margin-left:10px;font-size:11px;font-weight:400;color:#94a0b2}.field-reset{border:0;background:transparent;color:#7f8ca1;padding:2px 0;font-size:12px;border-radius:0}.field-reset:hover{color:#2563eb}.filter-select,.filter-date-range{width:100%}.filter-date-range{overflow:hidden}.field-hint{min-height:24px;margin-top:9px;font-size:11px;color:#8b98aa;display:flex;align-items:center}.field-hint .ant-checkbox-label{font-size:11px;color:#8391a6}.filter-card .ant-picker-input>input{border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}.filter-card .ant-select-input{border:0;padding:0;background:transparent}.filter-card .ant-select-selection-item{font-size:13px}.filter-card .ant-select-selection-placeholder,.filter-card .ant-picker input::placeholder{color:#a0acbd;font-size:13px}.filter-card .ant-picker-range-separator{color:#a0acbd}.filter-card .ant-btn{font-size:13px;font-weight:500}.filter-card .ant-btn-primary{box-shadow:0 3px 9px #2563eb20;min-width:112px}
+.filter-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px;padding-top:18px;border-top:1px solid #f0f3f8}.filter-bottom p{margin:0;color:#94a0b2;font-size:12px}.filter-bottom p.unsaved-note{color:#b47519}.filter-buttons{display:flex;gap:10px}.filter-alert{margin-top:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@media(max-width:760px){.filter-card{padding:20px 18px}.filter-fields{grid-template-columns:1fr;gap:17px}.filter-heading{align-items:flex-start}.filter-heading p{max-width:190px;line-height:1.6}.filter-status{font-size:10px}.filter-bottom{align-items:stretch;flex-direction:column;gap:13px}.filter-buttons{justify-content:flex-end}.filter-date-range{min-width:0}.filter-label-row label span{font-size:10px}.ant-picker-dropdown .ant-picker-panels{flex-direction:column}.ant-picker-dropdown .ant-picker-panel-container{max-height:min(60vh,360px);overflow-y:auto}}

package/skills/finebi-cli-agent/scripts/finebi-cli/templates/web-app/tests/calendar.test.mjs

@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import {test} from 'node:test';
+import {createServer} from 'vite';
+
+test('picker input and month arithmetic preserve the full calendar contract',async()=>{
+  const server=await createServer({configFile:false,cacheDir:'temp/calendar-tests',server:{middlewareMode:true,hmr:false}});
+  try {
+    const {calendarValue,calendarConfig:config}=await server.ssrLoadModule('/src/components/calendar.ts');
+    for(const value of ['0001-01-01','0099-02-28','0100-03-01','2000-02-29','2024-02-29','9999-12-31']) {
+      const parsed=config.locale.parse('zh_CN',value,['YYYY-MM-DD']);
+      assert.ok(parsed,value);
+      assert.equal(config.locale.format('zh_CN',parsed,'YYYY-MM-DD'),value);
+      assert.equal(config.locale.format('zh_CN',calendarValue(value),'YYYY-MM-DD'),value);
+    }
+    for(const value of ['0001-02','0099-12','2024-02','9999-12']) {
+      const parsed=config.locale.parse('zh_CN',value,['YYYY-MM']);
+      assert.equal(config.locale.format('zh_CN',parsed,'YYYY-MM'),value);
+      assert.equal(config.locale.format('zh_CN',calendarValue(value),'YYYY-MM'),value);
+    }
+    for(const value of ['0000-01-01','1900-02-29','2023-02-29','2024-13-01','2024-02-30','']) assert.equal(calendarValue(value),null,value);
+    assert.equal(config.locale.parse('zh_CN','2023-02-29',['YYYY-MM-DD']),null);
+    assert.equal(config.locale.format('zh_CN',config.getEndDate(calendarValue('0001-02')),'YYYY-MM-DD'),'0001-02-28');
+    assert.equal(config.locale.format('zh_CN',config.addMonth(calendarValue('0099-12'),1),'YYYY-MM'),'0100-01');
+  } finally {await server.close();}
+});