@finebi/finebi-cli 1.6.0 → 1.6.1

package/templates/web-app/src/components/Widget.tsx

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

package/templates/web-app/src/components/calendar-locales.ts

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

package/templates/web-app/src/components/charts/Bar.tsx

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

package/templates/web-app/src/components/charts/Line.tsx

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

package/templates/web-app/src/components/charts/Pie.tsx

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

package/templates/web-app/src/components/month-picker.css

@@ -0,0 +1 @@
+.month-picker{position:relative;--month-accent:#197a58;--month-soft:#eaf6ef}.month-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;height:46px;padding:0 14px;border:1px solid #dce4df;border-radius:10px;text-align:left;color:#87978f;background:#fff}.month-trigger.has-value{color:#204c3c}.month-trigger:focus-visible,.month-popover button:focus-visible{outline:3px solid #a1d6bc;outline-offset:2px}.month-trigger[aria-expanded=true]{border-color:var(--month-accent)}.month-dismiss{position:fixed;inset:0;z-index:20}.month-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:21;width:min(310px,calc(100vw - 48px));padding:15px;border:1px solid #dce8e1;border-radius:15px;background:#fff;box-shadow:0 14px 45px #153f2926;color:#264c3d;max-height:65vh;overflow:auto}.month-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.month-popover button{border:0;background:transparent;border-radius:8px;padding:8px 12px}.month-head>button{font-size:19px}.month-head .month-year{font-size:14px;font-weight:700}.month-grid>[role=row]{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}.month-grid button{height:41px}.month-popover button:hover{background:var(--month-soft)}.month-grid button.selected{background:var(--month-accent);color:#fff}.month-actions{display:flex;justify-content:space-between;gap:4px;border-top:1px solid #e9efeb;margin-top:13px;padding-top:10px}.month-actions button{font-size:12px;color:var(--month-accent);padding:7px}.month-popover p{font-size:11px;color:#87978f;margin:9px 0 0;text-align:center}

package/templates/web-app/src/finebi/client.ts

@@ -1,24 +1,23 @@
 import {normalize} from './normalize';
-import {encodeFilters, validateFilterBindings} from './filters.js';
-import type {AppConfig, QueryResult, FilterState} from './types';
+import {encodeFilters} from './filters.js';
+import {configErrors} from './config.js';
+import type {AppConfig, QueryResult, FilterState, WidgetBinding} 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);
+  const errors=configErrors(config);
+  if(errors.length)throw new Error(errors.join(' '));
 }
-export async function queryWidgets(config: AppConfig, filters: FilterState = {}, signal?: AbortSignal, fetchImpl: typeof fetch = fetch): Promise<Record<string, QueryResult>> {
+export async function queryWidgets(config: AppConfig, filters: FilterState = {}, signal?: AbortSignal, fetchImpl: typeof fetch = fetch, widgetIds?:string[]): Promise<Record<string, QueryResult>> {
   validateConfig(config);
   const refer = encodeFilters(config.filters,filters);
-  const ids = [...new Set(config.widgets.map(w => w.entryId))];
+  const ids = [...new Set(widgetIds ?? config.widgets.map(w => w.entryId))];
+  if(!ids.length||ids.some(id=>!config.widgets.some(w=>w.entryId===id)))throw new Error('组件不在配置范围内');
   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}),
+    body: JSON.stringify({widgetIds: ids, includeWidgetBean: true, pageLimit: config.maxRows, refer,...(config.directoryEntryId?{reportEntryId:config.directoryEntryId}:{})}),
   });
   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', '当前用户没有访问权限');
@@ -35,3 +34,9 @@ export async function queryWidgets(config: AppConfig, filters: FilterState = {},
   }
   return results;
 }
+export async function queryWidget(config:AppConfig,binding:WidgetBinding,filters:FilterState={},signal?:AbortSignal,fetchImpl:typeof fetch=fetch):Promise<QueryResult> {
+  // Validate all draft names before projecting the verified component scope.
+  encodeFilters(config.filters,filters);
+  const scoped=binding.filterNames ? Object.fromEntries(Object.entries(filters).filter(([name])=>binding.filterNames!.includes(name))) : filters;
+  return (await queryWidgets(config,scoped,signal,fetchImpl,[binding.entryId]))[binding.entryId];
+}

package/templates/web-app/src/finebi/config.d.ts

@@ -0,0 +1 @@
+export function configErrors(config: unknown): string[];

package/templates/web-app/src/finebi/config.js

@@ -0,0 +1,44 @@
+import {validateFilterBindings} from './filters.js';
+const nonempty=value=>typeof value==='string'&&value.trim().length>0;
+const record=value=>value!==null&&typeof value==='object'&&!Array.isArray(value);
+export function configErrors(config) {
+  if(!record(config))return ['configuration must be a JSON object.'];
+  const errors=[];
+  const allowed=['schemaVersion','title','basePath','layout','dashboardId','directoryEntryId','maxRows','pageSize','widgets','filters','templateVersion','description','insights','dataNotes'];
+  for(const key of Object.keys(config))if(!allowed.includes(key))errors.push(`unsupported config field: ${key}.`);
+  if(config.schemaVersion!=='1')errors.push('schemaVersion must be "1".');
+  if(!nonempty(config.title))errors.push('title is required.');
+  if(!nonempty(config.basePath)||!/^\/(?!\/)[\w/-]+$/.test(config.basePath))errors.push('basePath must be a same-origin path.');
+  if(!['overview','workbench','cockpit','retail'].includes(config.layout))errors.push('layout must be overview, workbench, cockpit or retail.');
+  if(!nonempty(config.dashboardId))errors.push('project is not bound: dashboardId must be configured.');
+  if('directoryEntryId' in config&&!nonempty(config.directoryEntryId))errors.push('directoryEntryId must be a non-empty string.');
+  if(!Number.isSafeInteger(config.maxRows)||config.maxRows<1||config.maxRows>10000)errors.push('maxRows must be an integer from 1 to 10000.');
+  if(!Number.isSafeInteger(config.pageSize)||config.pageSize<1||config.pageSize>100)errors.push('pageSize must be an integer from 1 to 100.');
+  if('description' in config&&!nonempty(config.description))errors.push('description must be a non-empty string.');
+  if('insights' in config&&typeof config.insights!=='boolean')errors.push('insights must be boolean.');
+  if('dataNotes' in config&&(!Array.isArray(config.dataNotes)||config.dataNotes.some(v=>!nonempty(v))))errors.push('dataNotes must be text array.');
+  try{validateFilterBindings(config.filters);}catch(error){errors.push(error.message);}
+  if(!Array.isArray(config.widgets)||!config.widgets.length)return [...errors,'widgets must be a non-empty array.'];
+  for(const [i,w] of config.widgets.entries()) {
+    if(!record(w)){errors.push(`widgets[${i}] must be an object.`);continue;}
+    const fields=['entryId','name','type','datasetId','categoryFieldId','valueFieldId','series','description','filterNames','tableFieldIds','localFilterFieldIds','valueFormat','categoryFormat','categoryTimeZone'];
+    for(const field of Object.keys(w))if(!fields.includes(field))errors.push(`widgets[${i}].${field} is unsupported.`);
+    for(const field of ['entryId','name'])if(!nonempty(w[field]))errors.push(`widgets[${i}].${field} is required.`);
+    if(!['table','kpi','bar','line','pie'].includes(w.type))errors.push(`widgets[${i}].type is unsupported.`);
+    if('valueFormat' in w&&(w.type!=='kpi'||!['number','percent'].includes(w.valueFormat)))errors.push(`widgets[${i}].valueFormat requires a KPI and number or percent.`);
+    if('categoryFormat' in w||'categoryTimeZone' in w) {
+      if(!['line','bar'].includes(w.type)||w.categoryFormat!=='epoch-month'||!nonempty(w.categoryTimeZone))errors.push(`widgets[${i}].categoryFormat requires a line/bar, epoch-month and an explicit categoryTimeZone.`);
+      else try{new Intl.DateTimeFormat('en',{timeZone:w.categoryTimeZone});}catch{errors.push(`widgets[${i}].categoryTimeZone is invalid.`);}
+    }
+    for(const field of ['datasetId','categoryFieldId','valueFieldId','description'])if(field in w&&!nonempty(w[field]))errors.push(`widgets[${i}].${field} must be non-empty.`);
+    if(w.type!=='table'&&!nonempty(w.valueFieldId)&&!w.series)errors.push(`widgets[${i}].valueFieldId is required.`);
+    if(!['table','kpi'].includes(w.type)&&!nonempty(w.categoryFieldId))errors.push(`widgets[${i}].categoryFieldId is required.`);
+    if('series' in w&&(!['line','bar'].includes(w.type)||!Array.isArray(w.series)||!w.series.length||w.series.some(s=>!record(s)||Object.keys(s).some(k=>!['fieldId','label'].includes(k))||!nonempty(s.fieldId)||!nonempty(s.label))||new Set(w.series.map(s=>s?.fieldId)).size!==w.series.length))errors.push(`widgets[${i}].series is invalid.`);
+    for(const field of ['filterNames','tableFieldIds','localFilterFieldIds'])if(field in w) {
+      if(!Array.isArray(w[field])||w[field].some(v=>!nonempty(v))||new Set(w[field]).size!==w[field].length)errors.push(`widgets[${i}].${field} must be unique strings.`);
+      else if(field==='filterNames'&&w[field].some(name=>!Array.isArray(config.filters)||!config.filters.some(f=>f?.name===name)))errors.push(`widgets[${i}].filterNames references an unknown filter.`);
+      else if(field!=='filterNames'&&(w.type!=='table'||!w[field].length))errors.push(`widgets[${i}].${field} is only for tables and must be non-empty.`);
+    }
+  }
+  return errors;
+}

package/templates/web-app/src/finebi/types.ts

@@ -6,7 +6,7 @@ export type QueryResult = {
   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 WidgetBinding = {entryId: string; name: string; type: 'table' | 'bar' | 'line' | 'pie' | 'kpi'; datasetId?: string; categoryFieldId?: string; valueFieldId?: string; series?: {fieldId:string;label:string}[]; description?:string; filterNames?:string[]; tableFieldIds?:string[]; localFilterFieldIds?:string[]; valueFormat?:'number'|'percent'; categoryFormat?:'epoch-month'; categoryTimeZone?: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}
@@ -15,4 +15,4 @@ export type FilterBinding = {name: string; label: string} & (
 );
 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[]};
+export type AppConfig = {schemaVersion: '1'; title: string; description?:string; basePath: string; layout: 'overview' | 'workbench' | 'cockpit' | 'retail'; dashboardId: string; directoryEntryId?:string; insights?:boolean; dataNotes?:string[]; maxRows: number; pageSize: number; widgets: WidgetBinding[]; filters: FilterBinding[]};

package/templates/web-app/src/retail.css

@@ -0,0 +1,13 @@
+.retail{--chart-1:#3158d5;--chart-2:#e18047;--chart-3:#82a7a0;--chart-4:#9b8fc6;--chart-5:#d2b977;background:#f5f3ee;color:#24272d;min-height:100vh;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
+.retail main{max-width:1480px;padding:48px 48px 24px}.retail a{color:#3158d5}.retail button,.retail select,.retail input{border-radius:5px}.retail :focus-visible{outline:3px solid #e18047;outline-offset:3px}
+.retail-nav{position:sticky;top:0;z-index:30}.retail :is(#dashboard,#components,#data-notes){scroll-margin-top:100px}
+.retail-nav{height:78px;padding:0 48px;border-bottom:1px solid #dcd9d1;display:flex;align-items:center;justify-content:space-between;gap:30px;background:#faf9f6}.retail-nav a{text-decoration:none;color:#40434b}.retail-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px;white-space:nowrap}.retail-brand b{display:grid;place-items:center;background:#24272d;color:#faf9f6;font-family:Georgia,serif;font-size:30px;width:39px;height:39px;border-radius:4px}.retail-brand small{font-size:12px;font-weight:400;border-left:1px solid #bbb7ad;margin-left:10px;padding-left:12px}.retail-nav>div{display:flex;gap:36px;font-size:13px}.retail-nav>div a:first-child{color:#3158d5;font-weight:650}.retail-live{font-size:12px;white-space:nowrap}.retail-live:before{content:"";display:inline-block;width:6px;height:6px;background:#3158d5;border-radius:50%;margin-right:8px}
+.retail header{align-items:flex-end;margin-bottom:30px;gap:30px}.retail .eyebrow{font-size:10px;letter-spacing:2.5px;color:#6d706e}.retail h1{font-size:36px;letter-spacing:-1.2px;font-weight:650;margin:12px 0}.retail header .muted{font-size:13px;max-width:750px;line-height:1.9}.retail .muted{color:#75776f}.retail .header-actions{display:flex;align-items:center;gap:20px;white-space:nowrap;font-size:12px}.retail .header-actions button{background:#24272d;color:#fff;border-color:#24272d;padding:11px 18px}.retail .header-actions a{color:#656863;text-decoration:none}
+.retail .filter-card{border-radius:8px;border-color:#dedbd3;background:#faf9f6;box-shadow:none;padding:20px 24px;margin-bottom:8px}.retail .filter-heading{margin-bottom:14px}.retail .filter-heading p{display:none}.retail .filter-symbol{height:28px;width:28px;background:#eaeefa;border-radius:5px;color:#3158d5}.retail .filter-heading h2{font-size:13px;color:#424740}.retail .filter-fields{gap:14px}.retail .filter-fields:has(>.filter-field:only-child){max-width:760px}.retail .filter-label-row{margin-bottom:5px}.retail .filter-label-row label{color:#575d65}.retail .filter-bottom{margin-top:9px;padding-top:12px;border-color:#e3e0d8}.retail .filter-scope{font-size:11px;color:#797d7e;line-height:1.8;margin:4px 0}.retail .field-hint{min-height:0;margin-top:6px}.retail .filter-status{background:#e9edf9;color:#3158d5}.retail .filter-status.pending{background:#fff0db;color:#855316}.retail .query-status{font-size:11px;color:#75776f;text-align:right;margin:12px 0 28px}
+.retail .section-heading{display:flex;align-items:baseline;gap:16px;margin:35px 0 18px}.retail .section-heading>span{font:10px "Segoe UI",sans-serif;letter-spacing:1.5px;color:#85877d}.retail .section-heading h2{font-size:18px;letter-spacing:-.3px;margin:0}.retail .section-heading p{font-size:11px;color:#85877d;margin:0 0 0 auto}
+.retail .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid #d6d3ca;border-radius:8px;overflow:hidden;background:#fffefb}.retail .kpi-grid .panel{border:0;border-right:1px solid #dedbd3;border-radius:0;background:transparent;padding:23px 25px 18px;display:flex;flex-direction:column;position:relative}.retail .kpi-grid .panel:last-child{border-right:0}.retail .kpi-grid .panel:first-child{background:#eaeefb}.retail .kpi-grid .panel-heading{display:block}.retail .kpi-grid h2{font-size:13px;font-weight:550;margin-bottom:12px}.retail .kpi-grid .component-status{font-size:10px;color:#878b90}.retail .kpi{font-size:clamp(25px,2.45vw,39px);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;color:#252a34;order:1;margin:10px 0 6px}.retail .kpi-grid .panel:first-child .kpi{color:#3158d5}.retail .kpi-grid .muted{order:2;font-size:11px;margin:2px 0;min-height:32px}.retail .kpi-grid .query-details{order:3}.retail .kpi-grid .notice{order:4}
+.retail .grid{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}.retail .grid .panel{border:1px solid #dedbd3;border-radius:8px;padding:26px;background:#fffefb;box-shadow:none}.retail .panel-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.retail .panel-heading h2{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:6px}.retail .component-status{color:#898d88;font-size:10px;white-space:nowrap}.retail .component-status.failed{color:#a74632}.retail .grid .muted{font-size:11px;margin:6px 0 10px}.retail .query-details{font-size:10px;color:#91938c;margin:8px 0}.retail .query-details summary{display:inline-block}.retail .notice{font-size:11px;background:#f9f2e4;border-color:#d9ae66;padding:8px 11px;border-radius:2px;color:#857044}.retail .notice details{font-size:10px;margin:2px 0;color:inherit}.retail .series-controls{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin:16px 0}.retail .series-controls input{accent-color:#3158d5;margin-right:6px}.retail .chart-sort{font-size:10px;margin:10px 0}.retail .chart-sort select{border-color:#e4e2da;background:#fffefb;font-size:10px;padding:4px 8px}.retail .chart{height:310px}.retail details{font-size:11px}.retail .data-notes{border-top:1px solid #d6d3ca;padding-top:22px;margin-top:30px;line-height:1.9;color:#737870}.retail .data-notes>summary{font-size:13px;color:#404740;font-weight:600}.retail th{background:#f3f2ec;color:#525954;font-size:11px}.retail td{border-color:#ebe9e1;font-size:12px}.retail tbody tr:hover{background:#f6f7fc}.retail .table-tools{font-size:12px;flex-wrap:wrap}.retail .table-tools input{max-width:100%}.retail footer{font-size:10px;color:#8b8d85;text-align:center;letter-spacing:.5px}
+@media(max-width:1000px){.retail main{padding:30px 24px}.retail-nav{padding:0 24px}.retail .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.retail .kpi-grid .panel{border-bottom:1px solid #dedbd3}.retail .kpi-grid .panel:nth-child(2n){border-right:0}.retail .kpi-grid .panel:nth-last-child(-n+2){border-bottom:0}.retail header{align-items:flex-start}.retail h1{font-size:29px}.retail .header-actions{flex-direction:column;gap:10px;align-items:flex-end}}
+@media(max-width:700px){.retail main{padding:24px 16px}.retail-nav{height:auto;min-height:68px;padding:16px;flex-wrap:wrap;gap:16px}.retail-nav>div{order:3;width:100%;justify-content:space-between;gap:12px;font-size:12px}.retail .retail-brand{font-size:14px}.retail h1{font-size:26px}.retail header{display:block}.retail .header-actions{flex-direction:row;justify-content:flex-end;margin-top:16px}.retail .grid{grid-template-columns:1fr}.retail .grid .panel{padding:20px 16px}.retail .kpi-grid .panel{padding:18px 15px}.retail .kpi{font-size:26px;letter-spacing:-1px}.retail .section-heading{gap:10px;flex-wrap:wrap;margin-top:28px}.retail .section-heading p{width:100%;margin:0}.retail .section-heading>span{font-size:9px}.retail .panel-heading{display:block}.retail .chart{height:285px}.retail .filter-card{padding:18px 16px}.retail .filter-bottom{align-items:stretch;flex-direction:column}.retail .filter-buttons{justify-content:flex-end}.retail .filter-buttons .ant-btn{font-size:12px}.retail .pager{gap:8px;flex-wrap:wrap;font-size:11px}}
+@media(min-width:900px){.retail .filter-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:start}.retail .filter-heading{grid-column:1/-1;margin-bottom:12px}.retail .filter-fields{width:min(100%,640px)}.retail .filter-bottom{border:0;padding:26px 0 0;margin:0;flex-direction:column;align-items:flex-end;gap:8px}.retail .filter-bottom>p{order:2;font-size:10px}.retail .filter-fields:has(>.filter-field:only-child){max-width:640px}}
+@media(max-width:700px){.retail :is(#dashboard,#components,#data-notes){scroll-margin-top:128px}}

package/templates/web-app/src/services/presentation.ts

@@ -0,0 +1,36 @@
+import type {Cell,WidgetBinding} from '../finebi/types';
+import {displayCell} from './view-data';
+
+// Decimal strings stay strings/integers: formatting a large amount must not lose cents.
+export function formatMetric(cell:Cell,format?:WidgetBinding['valueFormat']):string {
+  if(!format||cell.state!=='AVAILABLE'||cell.value===null)return displayCell(cell);
+  const match=/^(-?)(\d+)(?:\.(\d+))?(?:e([+-]?\d+))?$/i.exec(cell.value);
+  if(!match)return displayCell(cell);
+  const exponent=Number(match[4]??0),fraction=match[3]??'';
+  if(Math.abs(exponent)>100)return displayCell(cell);
+  let digits=(match[2]+fraction).replace(/^0+(?=\d)/,'');
+  let scale=fraction.length-exponent;
+  if(format==='percent') {
+    scale-=2;
+    const shift=2-scale;
+    let amount=BigInt(digits);
+    if(shift>=0)amount*=10n**BigInt(shift);
+    else {const divisor=10n**BigInt(-shift);amount=(amount+divisor/2n)/divisor;}
+    digits=amount.toString();scale=2;
+  }
+  if(scale<0){digits+='0'.repeat(-scale);scale=0;}
+  digits=digits.padStart(scale+1,'0');
+  const whole=(scale?digits.slice(0,-scale):digits).replace(/\B(?=(\d{3})+(?!\d))/g,',');
+  const tail=scale?digits.slice(-scale):'';
+  const decimal=format==='percent'?tail:tail.replace(/0+$/,'');
+  const sign=match[1]&&/[1-9]/.test(digits)?'-':'';
+  return `${sign}${whole}${decimal?'.'+decimal:''}${format==='percent'?'%':''}`;
+}
+
+export function formatCategory(cell:Cell,binding:Pick<WidgetBinding,'categoryFormat'|'categoryTimeZone'>):string {
+  if(binding.categoryFormat!=='epoch-month'||!binding.categoryTimeZone||cell.state!=='AVAILABLE'||!cell.value||! /^-?\d+$/.test(cell.value))return displayCell(cell);
+  const timestamp=Number(cell.value);
+  if(!Number.isSafeInteger(timestamp)||!Number.isFinite(new Date(timestamp).getTime()))return displayCell(cell);
+  const parts=new Intl.DateTimeFormat('en',{year:'numeric',month:'2-digit',timeZone:binding.categoryTimeZone}).formatToParts(new Date(timestamp));
+  return `${parts.find(p=>p.type==='year')!.value}-${parts.find(p=>p.type==='month')!.value}`;
+}

package/templates/web-app/src/services/table-data.ts

@@ -0,0 +1,47 @@
+import type {Cell,Dataset,WidgetBinding} from '../finebi/types';
+import {displayCell} from './view-data';
+function decimal(value:string) {
+  const match=/^([+-]?)(\d*\.?\d+|\d+\.)(?:e([+-]?\d+))?$/i.exec(value);
+  if(!match)throw new Error('无效十进制值');
+  const [whole,fraction='']=match[2].split('.');
+  const digits=(whole+fraction).replace(/^0+/,'').replace(/0+$/,'');
+  const significant=(whole+fraction).replace(/^0+/,'');
+  return {sign:!digits?0:match[1]==='-'?-1:1,digits,order:BigInt(significant.length)+BigInt(match[3]||0)-BigInt(fraction.length)};
+}
+export function compareDecimal(a:string,b:string) {
+  const x=decimal(a),y=decimal(b);
+  if(x.sign!==y.sign)return x.sign<y.sign?-1:1;
+  if(x.sign===0)return 0;
+  const length=Math.max(x.digits.length,y.digits.length);
+  const left=x.digits.padEnd(length,'0'),right=y.digits.padEnd(length,'0');
+  const order=x.order!==y.order?(x.order<y.order?-1:1):left===right?0:left<right?-1:1;
+  return order===0?0:order*x.sign;
+}
+export function tableDataset(dataset:Dataset,binding:WidgetBinding):Dataset {
+  if(!binding.tableFieldIds)return dataset;
+  const indices=binding.tableFieldIds.map(id=>fieldIndex(dataset,id));
+  return {...dataset,columns:indices.map(i=>dataset.columns[i]),rows:dataset.rows.map(row=>({...row,cells:indices.map(i=>row.cells[i])}))};
+}
+export function fieldIndex(dataset:Dataset,id:string) {
+  const index=dataset.columns.findIndex(c=>c.fieldId===id);
+  if(index<0)throw new Error(`结果字段绑定缺失：${id}`);
+  return index;
+}
+type Options={search:string;sort?:{fieldId:string;direction:'asc'|'desc'};filters:Record<string,string>};
+export function tableRows(dataset:Dataset,{search,sort,filters}:Options) {
+  const columns=Object.entries(filters).map(([id,value])=>({index:fieldIndex(dataset,id),value}));
+  const rows=dataset.rows.filter(row=>row.cells.some(c=>displayCell(c).toLocaleLowerCase().includes(search.toLocaleLowerCase()))&&columns.every(({index,value})=>!value||displayCell(row.cells[index])===value));
+  if(!sort)return rows;
+  const index=fieldIndex(dataset,sort.fieldId),numeric=dataset.columns[index].type==='DECIMAL';
+  return [...rows].sort((a,b)=>{
+    const x=a.cells[index],y=b.cells[index];
+    const valid=(c:Cell)=>c.state==='AVAILABLE'&&c.value!==null;
+    if(!valid(x)||!valid(y))return valid(x)?-1:valid(y)?1:0;
+    const order=numeric?compareDecimal(x.value!,y.value!):displayCell(x).localeCompare(displayCell(y),'zh-CN');
+    return sort.direction==='asc'?order:-order;
+  });
+}
+export function tableCsv(dataset:Dataset,rows:Dataset['rows']) {
+  const escape=(value:string)=>`"${(/^[\s]*[=+\-@]/.test(value)?"'"+value:value).replace(/"/g,'""')}"`;
+  return '\uFEFF'+[[...dataset.columns.map(c=>c.name),'行类型'],...rows.map(row=>[...row.cells.map(displayCell),row.kind])].map(row=>row.map(escape).join(',')).join('\r\n');
+}

package/templates/web-app/src/services/widget-queries.ts

@@ -0,0 +1,18 @@
+import {queryWidget} from '../finebi/client';
+import type {AppConfig,FilterState,QueryResult,WidgetBinding} from '../finebi/types';
+export type WidgetState={loading:boolean;result?:QueryResult;error?:Error;at?:string};
+export const widgetKey=(binding:WidgetBinding,index:number)=>`${index}:${binding.entryId}`;
+export async function loadWidgets(config:AppConfig,filters:FilterState,signal:AbortSignal,onState:(id:string,state:WidgetState)=>void,fetchImpl:typeof fetch=fetch) {
+  const queue=config.widgets.map((binding,index)=>({binding,key:widgetKey(binding,index)}));
+  const worker=async()=>{
+    while(queue.length&&!signal.aborted) {
+      const {binding,key}=queue.shift()!;
+      onState(key,{loading:true});
+      try {
+        const result=await queryWidget(config,binding,filters,signal,fetchImpl);
+        if(!signal.aborted)onState(key,{loading:false,result,at:new Date().toLocaleTimeString()});
+      } catch(error) {if(!signal.aborted)onState(key,{loading:false,error:error instanceof Error?error:new Error('查询失败')});}
+    }
+  };
+  await Promise.all(Array.from({length:Math.min(3,queue.length)},worker));
+}

package/templates/web-app/tests/browser/fixtures.mjs

@@ -0,0 +1,28 @@
+// Synthetic native responses, confined to the browser acceptance page.
+export function fixtureConfig(layout, chartCount = 8) {
+  return {schemaVersion: '1', title: '合成门店经营验证', basePath: '/fixture-decision', layout,
+    dashboardId: 'fixture-dashboard', directoryEntryId: 'fixture-directory', maxRows: 1000, pageSize: 8,
+    filters: [{name: '区域', label: '区域', type: 'text'}], widgets: [
+      ...Array.from({length: 4}, (_, i) => ({entryId: `kpi${i}`, name: i === 3 ? '独立范围指标' : `合成指标 ${i + 1}`,
+        type: 'kpi', valueFieldId: 'amount', valueFormat: 'number', filterNames: i === 3 ? [] : ['区域']})),
+      ...Array.from({length: chartCount}, (_, i) => ({entryId: `chart${i}`, name: `${['趋势','对比','构成'][i % 3]} ${i + 1} · 较长标题用于检查文字换行和布局边界`,
+        type: ['line','bar','pie'][i % 3], categoryFieldId: 'region', valueFieldId: 'amount', filterNames: ['区域']})),
+      {entryId: 'table', name: '合成明细', type: 'table', filterNames: ['区域']},
+    ]};
+}
+
+export function nativeFixture(id, refer, scenario) {
+  const filtered = refer['区域']?.[0] === '华东';
+  const kpi = id.startsWith('kpi');
+  const headers = kpi ? [{dId: 'amount', text: '金额'}] : [{dId: 'region', text: '区域'}, {dId: 'amount', text: '金额'}];
+  const cell = (value, authority = true) => ({value, authority});
+  let rows = kpi ? [[cell(filtered ? '120' : '260')]]
+    : (filtered ? [['华东','120']] : [['华东','120'],['华北','80'],['华南','60']]).map(([region, amount]) => [cell(region), cell(amount)]);
+  if (!filtered && id === 'chart0') rows = [[cell('华东'),cell('120')],[cell('华北'),cell(null)],[cell('华南'),cell('-20')]];
+  if (!filtered && id === 'table') rows[1][1] = cell('hidden', false);
+  if (scenario === 'empty') rows = [];
+  const partial = scenario === 'partial' && id === 'chart0';
+  if (partial) rows[1] = [cell('华北')];
+  return {previewResult: {resultType: 'DETAIL', header: headers, items: rows, row: partial ? 30 : rows.length,
+    size: 1000, hasNext: partial}, widgetBean: {dimensions: {region: {type: 1}, amount: {type: 2}}}};
+}

package/templates/web-app/tests/browser/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="zh-CN">
+<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>FineBI 模板浏览器验收</title></head>
+<body>
+  <section id="browser-checks" aria-label="浏览器验收">
+    <h1>模板浏览器验收 · 合成数据</h1>
+    <p>复用实际页面组件，不连接 FineBI。调整浏览器视口后重新运行；真实身份、业务口径与视觉质量需另外核对。</p>
+    <label>测试布局 <select id="test-layout"><option>overview</option><option>workbench</option><option>cockpit</option><option selected>retail</option></select></label>
+    <button id="test-run">运行浏览器检查</button>
+    <strong id="test-result" role="status">未运行</strong>
+    <ol id="test-checks"></ol>
+  </section>
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

package/templates/web-app/tests/browser/main.tsx

@@ -0,0 +1,149 @@
+import {createElement} from 'react';
+import {createRoot} from 'react-dom/client';
+import {flushSync} from 'react-dom';
+import App from '../../src/App';
+import '../../src/styles.css';
+import {fixtureConfig, nativeFixture} from './fixtures.mjs';
+import './test-page.css';
+
+const root = createRoot(document.getElementById('root')!);
+const result = document.getElementById('test-result')!;
+const checks = document.getElementById('test-checks')!;
+const runButton = document.getElementById('test-run') as HTMLButtonElement;
+const layoutSelect = document.getElementById('test-layout') as HTMLSelectElement;
+let config = fixtureConfig(layoutSelect.value), scenario = 'normal', generation = 0, failOnce = false;
+let requests: any[] = [];
+const runtimeErrors: string[] = [];
+for (const level of ['error', 'warn'] as const) {
+  const original = console[level].bind(console);
+  console[level] = (...args) => {runtimeErrors.push(args.map(String).join(' ')); original(...args);};
+}
+window.addEventListener('error', event => runtimeErrors.push(event.message));
+window.addEventListener('unhandledrejection', event => runtimeErrors.push(String(event.reason)));
+
+// This page is a test-only network boundary. Unexpected app requests fail closed.
+window.fetch = async (input, init = {}) => {
+  const url = new URL(input instanceof Request ? input.url : String(input), location.href);
+  if (url.origin !== location.origin) throw new Error('浏览器夹具禁止外部请求');
+  if (url.pathname.endsWith('/app-config.json')) return Response.json(config);
+  if (url.pathname !== '/fixture-decision/v5/api/dashboard/report/fixture-dashboard/widgets/query') throw new Error(`未配置的夹具请求：${url.pathname}`);
+  const body = JSON.parse(String(init.body));
+  requests.push(body);
+  await new Promise(resolve => setTimeout(resolve, 25));
+  if (init.signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+  const id = body.widgetIds[0];
+  if (failOnce && id === 'chart1') {failOnce = false; return Response.json({}, {status: 403});}
+  return Response.json({success: true, data: {[id]: nativeFixture(id, body.refer, scenario)}});
+};
+
+function assert(condition: unknown, message: string): asserts condition {if (!condition) throw new Error(message);}
+async function wait(check: () => boolean, label: string) {
+  const deadline = performance.now() + 15000;
+  while (!check()) {
+    assert(performance.now() < deadline, `超时：${label}`);
+    await new Promise(resolve => setTimeout(resolve, 40));
+  }
+}
+function pass(message: string) {const li = document.createElement('li'); li.textContent = `PASS · ${message}`; checks.append(li);}
+const panels = () => Array.from(document.querySelectorAll<HTMLElement>('#root .panel'));
+async function settled() {
+  await wait(() => panels().length === config.widgets.length && panels().every(panel => /更新于|查询失败/.test(panel.querySelector('.component-status')?.textContent ?? '')), '组件查询结束');
+}
+async function mount(state = 'normal', chartCount = 8) {
+  scenario = state; config = fixtureConfig(layoutSelect.value, chartCount); requests = []; failOnce = state === 'failure';
+  flushSync(() => root.render(createElement(App, {key: ++generation})));
+  await settled();
+}
+function assertRequests(filtered: boolean) {
+  assert(requests.length === config.widgets.length, '每个展示组件应恰好请求一次');
+  for (const request of requests) {
+    assert(request.reportEntryId === 'fixture-directory', '目录入口丢失');
+    const expected = filtered && request.widgetIds[0] !== 'kpi3' ? {区域: ['华东']} : {};
+    assert(JSON.stringify(request.refer) === JSON.stringify(expected), '筛选编码或组件作用范围错误');
+  }
+}
+async function painted(count: number) {
+  await wait(() => {
+    const canvases = Array.from(document.querySelectorAll<HTMLCanvasElement>('#root .chart canvas'));
+    return canvases.length === count && canvases.every(canvas => {
+      const pixels = canvas.getContext('2d')!.getImageData(0, 0, canvas.width, canvas.height).data;
+      let colored = 0;
+      for (let i = 3; i < pixels.length; i += 4) if (pixels[i] && ++colored > 100) return true;
+      return false;
+    });
+  }, '柱/线/饼图实际绘制');
+  assert(runtimeErrors.length === 0, runtimeErrors.join('\n'));
+}
+function geometry(even: boolean) {
+  assert(document.documentElement.scrollWidth <= innerWidth + 1, '页面存在横向溢出');
+  const cards = panels().map(panel => panel.getBoundingClientRect());
+  for (let i = 0; i < cards.length; i++) {
+    const a = cards[i];
+    assert(a.width > 0 && a.left >= -1 && a.right <= innerWidth + 1, '卡片超出视口');
+    for (const b of cards.slice(i + 1)) assert(Math.min(a.right,b.right) - Math.max(a.left,b.left) <= 1 || Math.min(a.bottom,b.bottom) - Math.max(a.top,b.top) <= 1, '卡片重叠');
+  }
+  const grid = document.querySelector<HTMLElement>('#root .grid')!;
+  const columns = getComputedStyle(grid).gridTemplateColumns.split(' ').length;
+  const regular = Array.from(grid.querySelectorAll<HTMLElement>(':scope > .panel:not(.wide)')).map(el => el.getBoundingClientRect());
+  if (even && columns === 2 && regular.length % 2 === 0) for (let i = 0; i < regular.length; i += 2) assert(Math.abs(regular[i].top - regular[i + 1].top) < 2, '偶数组件双列排列出现孤立卡片');
+}
+function button(text: string) {
+  const found = Array.from(document.querySelectorAll<HTMLButtonElement>('#root button')).find(el => el.textContent?.trim() === text);
+  assert(found, `找不到按钮：${text}`); return found;
+}
+
+async function retailNavigation() {
+  if (layoutSelect.value !== 'retail') return;
+  const nav = document.querySelector<HTMLElement>('#root .retail-nav')!;
+  for (const id of ['components', 'data-notes', 'dashboard']) {
+    nav.querySelector<HTMLAnchorElement>(`a[href="#${id}"]`)!.click();
+    await new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+    const bar = nav.getBoundingClientRect(), target = document.getElementById(id)!.getBoundingClientRect();
+    assert(bar.top >= -1 && bar.bottom < innerHeight, '跳转后导航离开视口');
+    assert(target.top >= bar.bottom - 1 && target.top < innerHeight, '锚点标题被导航遮住或离开视口');
+  }
+  assert(document.querySelector('#components h2')?.textContent === '销售表现', '销售分析未定位到区域标题');
+  window.scrollTo(0, 0);
+  pass('页内导航持续可见，三个锚点标题可见且不被遮挡');
+}
+
+async function run() {
+  runButton.disabled = true; layoutSelect.disabled = true; checks.replaceChildren(); result.textContent = '运行中';
+  const started = performance.now();
+  try {
+    assert(runtimeErrors.length === 0, '已有运行错误，请修复并刷新测试页：' + runtimeErrors.join('\n'));
+    await mount(); await painted(8); assertRequests(false); geometry(true);
+    assert(document.querySelector('#root .widget-table')?.textContent?.includes('受限'), '受限值未标记');
+    pass('八张图实际绘制，长标题/边界/偶数排列、目录入口和受限值');
+    const input = document.querySelector<HTMLInputElement>('#root input[aria-label="区域"]');
+    assert(input, '文本筛选尚未加载');
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, '华东');
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    await wait(() => document.querySelector('.filter-status')?.textContent === '待应用', '筛选草稿');
+    assert(requests.length === config.widgets.length, '编辑草稿触发了查询');
+    requests = []; button('应用筛选').click();
+    await wait(() => requests.length === config.widgets.length, '应用发起查询'); await settled();
+    assertRequests(true);
+    assert(document.querySelector('#root .kpi')?.textContent === '120', '应用条件后指标未变化');
+    pass('草稿不查询，应用后按真实编码及组件范围请求，显示值变化');
+    requests = []; button('恢复全部默认').click();
+    await wait(() => requests.length === config.widgets.length, '恢复默认查询'); await settled();
+    assertRequests(false); assert(document.querySelector('#root .kpi')?.textContent === '260', '恢复默认后指标未恢复');
+    pass('恢复默认省略覆盖，显示值恢复');
+    await mount('normal', 7); await painted(7); geometry(false); pass('七张图、奇数组件无溢出与重叠');
+    await mount('empty'); assert(document.querySelectorAll('#root .empty').length === config.widgets.length, '空结果未独立显示');
+    assert(!document.querySelector('#root canvas'), '空结果保留了旧图'); pass('空结果不保留旧图');
+    await mount('partial'); await painted(8);
+    assert(document.querySelector('#root .notice')?.textContent?.includes('首屏'), '截断警告缺失');
+    assert(document.querySelector('#root .notice')?.textContent?.includes('PARTIAL'), '部分适配标记缺失');
+    pass('部分适配与首屏范围警告保持可见');
+    await mount('failure'); assert(document.querySelectorAll('#root .component-error').length === 1, '单组件失败未隔离');
+    assert(document.querySelector('#root .component-error')?.textContent?.includes('PERMISSION_DENIED'), '权限失败语义错误');
+    requests = []; button('重试组件').click(); await wait(() => requests.length === 1, '组件重试'); await settled(); await painted(8);
+    assert(requests.length === 1 && requests[0].widgetIds[0] === 'chart1', '重试影响了其他组件'); pass('权限失败独立显示，单项重试只请求失败组件');
+    await mount(); await painted(8); geometry(true); await retailNavigation();
+    result.textContent = `PASS · ${layoutSelect.value} · ${innerWidth}×${innerHeight} · ${checks.children.length} 项 · ${((performance.now()-started)/1000).toFixed(1)}s`;
+  } catch (error) {result.textContent = `FAIL · ${layoutSelect.value} · ${innerWidth}×${innerHeight} · ${String(error)}`;}
+  finally {runButton.disabled = false; layoutSelect.disabled = false;}
+}
+runButton.addEventListener('click', run);

package/templates/web-app/tests/browser/test-page.css

@@ -0,0 +1,4 @@
+#browser-checks{padding:20px 24px;border-bottom:2px solid #adb8c5;background:#fff;color:#243042;overflow-wrap:anywhere}
+#browser-checks h1{font-size:19px;margin:0 0 8px}#browser-checks p,#browser-checks li{font-size:12px;line-height:1.7}
+#browser-checks label{display:inline-flex;align-items:center;gap:8px;margin:8px 12px 8px 0}#test-result{display:block;margin:12px 0;font-size:14px}
+#test-checks{padding-left:22px;margin:0}#test-run{background:#243042;color:white}

package/templates/web-app/tests/browser/vite.config.mjs

@@ -0,0 +1,13 @@
+import {fileURLToPath} from 'node:url';
+import {defineConfig, normalizePath} from 'vite';
+
+const project = fileURLToPath(new URL('../../', import.meta.url));
+export default defineConfig({
+  root: fileURLToPath(new URL('./', import.meta.url)),
+  publicDir: false,
+  envDir: false,
+  cacheDir: fileURLToPath(new URL('../../temp/vite-browser', import.meta.url)),
+  resolve: {alias: [{find: /^date-fns\/locale$/, replacement: fileURLToPath(new URL('../../src/components/calendar-locales.ts', import.meta.url))}]},
+  server: {host: '127.0.0.1', port: 4188, strictPort: true, hmr: false,
+    fs: {allow: [project], deny: ['.env', '.env.*', '*.{crt,pem}', '**/.git/**', normalizePath(project) + 'temp/**']}},
+});

package/templates/web-app/tests/bundle.test.mjs

@@ -0,0 +1,19 @@
+import assert from 'node:assert/strict';
+import {test} from 'node:test';
+import {build} from 'vite';
+
+test('production entry defers charts and optional controls and only bundles supported date locales',async()=>{
+  const result=await build({logLevel:'silent',build:{write:false}});
+  const chunks=result.output.filter(item=>item.type==='chunk');
+  const initial=new Set();
+  const visit=chunk=>{if(initial.has(chunk))return;initial.add(chunk);for(const name of chunk.imports){const imported=chunks.find(c=>c.fileName===name);if(imported)visit(imported);}};
+  chunks.filter(c=>c.isEntry).forEach(visit);
+  const initialModules=[...initial].flatMap(c=>Object.keys(c.modules));
+  assert.ok(!initialModules.some(id=>/node_modules\/(echarts|zrender)\//.test(id)),'ECharts must not be an entry dependency');
+  assert.ok(!initialModules.some(id=>/node_modules\/(antd|@rc-component\/picker)\//.test(id)),'optional filter UI must not be an entry dependency');
+  const modules=chunks.flatMap(c=>Object.keys(c.modules));
+  assert.ok(!modules.some(id=>id.includes('/tests/browser/')),'browser fixtures and their fetch replacement must not enter production');
+  const locales=new Set(modules.flatMap(id=>{const match=id.match(/date-fns\/locale\/([^/]+)/);return match?[match[1]]:[];}));
+  assert.deepEqual([...locales].filter(name=>!['en-US','zh-CN','_lib','en-US.js','zh-CN.js'].includes(name)),[],'do not bundle unused calendar languages');
+  for(const type of ['Bar','Line','Pie'])assert.ok(chunks.some(c=>c.isDynamicEntry&&Object.keys(c.modules).some(id=>id.endsWith(`/charts/${type}.tsx`))),`${type} has an independent lazy entry`);
+});