@qfei-design/make-app-approval 0.0.0-stage → 0.2.0

package/dist/list/ui-components.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentType, ReactNode } from "react";
+import type { ApprovalListTab, ApprovalStatusOption } from "./types.js";
+/** 宿主将组件库事件转换成值；包不依赖 DOM Event 或任何日期库对象。 */
+export type ApprovalInputProps = Readonly<{
+    id: string;
+    ariaLabel: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}>;
+export type ApprovalSelectProps = ApprovalInputProps & Readonly<{
+    options: readonly ApprovalStatusOption[];
+}>;
+/** 一个完整范围控件；日期为 YYYY-MM-DD，清空回传 ["", ""]。 */
+export type ApprovalDateRangePickerProps = Readonly<{
+    id: string;
+    ariaLabel: string;
+    value: readonly [string, string];
+    onChange: (value: readonly [string, string]) => void;
+    placeholder?: readonly [string, string];
+    disabled?: boolean;
+}>;
+export type ApprovalButtonProps = Readonly<{
+    children: ReactNode;
+    htmlType: "button" | "submit";
+    variant: "primary" | "default" | "text";
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    ariaLabel?: string;
+}>;
+export type ApprovalTabsProps = Readonly<{
+    items: readonly Readonly<{
+        value: ApprovalListTab;
+        label: string;
+    }>[];
+    value: ApprovalListTab;
+    onChange: (value: ApprovalListTab) => void;
+    ariaLabel: string;
+    /** 仅在当前激活的面板渲染一次；宿主 Tabs 负责键盘与 tab/panel 关联。 */
+    children: ReactNode;
+}>;
+/** 必须由宿主完整提供；应在模块作用域定义，避免重渲染时创建新的组件类型。 */
+export type ApprovalUIComponents = Readonly<{
+    Input: ComponentType<ApprovalInputProps>;
+    Select: ComponentType<ApprovalSelectProps>;
+    DateRangePicker: ComponentType<ApprovalDateRangePickerProps>;
+    Button: ComponentType<ApprovalButtonProps>;
+    Tabs: ComponentType<ApprovalTabsProps>;
+}>;

package/dist/list/use-approval-page.d.ts

@@ -0,0 +1,12 @@
+import type { ApprovalListQuery, ApprovalListProvider, ApprovalLogger, ApprovalPage } from "./types.js";
+type LoadState = ApprovalPage & {
+    token: object;
+    status: "success" | "error";
+};
+export declare const useApprovalPage: (provider: ApprovalListProvider, query: ApprovalListQuery, refreshKey: string | number | undefined, logger?: ApprovalLogger) => {
+    initialPage: LoadState | undefined;
+    total: number;
+    status: string;
+    reload: () => void;
+};
+export {};

package/dist/list/virtual-page-loader.d.ts

@@ -0,0 +1,26 @@
+import type { CanvasTableComponent, IVirtualPageRequestContext } from "@qfei-design/canvas-table";
+import type { ApprovalListItem, ApprovalListProvider, ApprovalListQuery, ApprovalLogger, ApprovalPage } from "./types.js";
+export type VirtualListSnapshot = Readonly<{
+    total: number;
+    rows: readonly ApprovalListItem[];
+    failed: boolean;
+    loading: boolean;
+}>;
+type Table = Pick<CanvasTableComponent, "setVirtualPageData" | "markPageLoadFailed" | "getPagesInView" | "getTableData" | "scrollToRow">;
+/** 页面交互不暴露页码；这里只负责 Canvas 的零基数据页。 */
+export declare const createVirtualPageLoader: ({ table, query, initialPage, loadPage, onChange, retryViewport, onReload, logger }: {
+    table: Table;
+    query: ApprovalListQuery;
+    initialPage: ApprovalPage;
+    loadPage: ApprovalListProvider["loadPage"];
+    onChange: (snapshot: VirtualListSnapshot) => void;
+    retryViewport: () => void;
+    onReload: () => void;
+    logger?: ApprovalLogger;
+}) => {
+    load(page: number, request: IVirtualPageRequestContext): void;
+    viewportChanged(): void;
+    retry(): void;
+    dispose(): void;
+};
+export {};

package/dist/list.cjs

@@ -0,0 +1 @@
+"use strict";var ne=Object.create;var Z=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var de=(e,t,i,I)=>{if(t&&typeof t=="object"||typeof t=="function")for(let P of ie(t))!pe.call(e,P)&&P!==i&&Z(e,P,{get:()=>t[P],enumerable:!(I=le(t,P))||I.enumerable});return e};var ue=(e,t,i)=>(i=e!=null?ne(ce(e)):{},de(t||!e||!e.__esModule?Z(i,"default",{value:e,enumerable:!0}):i,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),fe=require("./index.cjs"),te=e=>e==null||e==="UNSUBMITTED"?"状态未知":fe.getApprovalStatusDisplay(e).label,z=(e,t)=>{try{e?e(t):t.phase==="error"?console.warn("[make-app-approval]",t):console.info("[make-app-approval]",t)}catch{console.warn("[make-app-approval] diagnostic sink failed")}},ae=e=>typeof e=="object"&&e!==null,ge=e=>ae(e)?["id","entityKey","recordId"].every(t=>typeof e[t]=="string"&&e[t].trim().length>0)&&["applicationNo","applicationType","applicantName","applicationTime"].every(t=>typeof e[t]=="string")&&["taskId","processInstanceId"].every(t=>e[t]===void 0||typeof e[t]=="string"&&e[t].trim().length>0)&&(typeof e.processStatus=="string"||e.processStatus===null):!1,Y=(e,t)=>{if(!ae(e)||!Array.isArray(e.rows)||!e.rows.every(ge)||typeof e.total!="number"||!Number.isSafeInteger(e.total)||e.total<0||e.rows.length>t||e.rows.length>e.total||new Set(e.rows.map(i=>i.id)).size!==e.rows.length)throw new Error("Invalid approval page contract");return{rows:e.rows,total:e.total}},he=({table:e,query:t,initialPage:i,loadPage:I,onChange:P,retryViewport:L,onReload:V,logger:C})=>{const f=new Map,A=new Set;let N=[];const u=new WeakMap,g=new Set;let b=i,h=i.total,p=0,k=!1,x=!1,R;const M=r=>Number.isSafeInteger(r)&&r>=0&&r*t.pageSize<h,v=(r,a,d)=>z(C,{operation:"list",phase:a,tab:t.tab,page:r+1,pageSize:t.pageSize,rowCount:d}),m=()=>{k||P({total:h,rows:N,failed:x||g.size>0,loading:f.size>0})},j=r=>{r.finished||(r.finished=!0,r.removeAbort(),f.get(r.page)===r&&f.delete(r.page),e.markPageLoadFailed(r.page,r.request),r.controller.abort(),v(r.page,"cancel"))},c=r=>{p=r;const a=e.getPagesInView()??[],d=new Set([p,...a].flatMap(n=>[n-1,n,n+1]).filter(M));for(const n of f.values())d.has(n.page)||j(n);for(const n of g)d.has(n)||g.delete(n)},D=(r,a,d)=>{const n=a.rows.map(w=>{const s={...w,statusLabel:te(w.processStatus)};return u.set(s,w),s});if(!e.setVirtualPageData(n,r,a.total,d)){v(r,"skip");return}h=a.total;try{N=Y({rows:e.getTableData()??[],total:h},Number.MAX_SAFE_INTEGER).rows.map(w=>u.get(w)??w)}catch(w){x=!0,N=[],b=void 0,R&&clearTimeout(R),R=void 0;for(const s of f.values())j(s);throw w}b&&b.total!==h&&(b=void 0),g.delete(r);for(const w of f.values())M(w.page)||j(w);!M(r)&&r>0&&e.scrollToRow(Math.max(0,h-1)),v(r,"success",a.rows.length)},F=()=>{if(k||R)return;const r=[...f.values()].filter(a=>!a.running&&!a.finished).sort((a,d)=>Math.abs(a.page-p)-Math.abs(d.page-p)||a.page-d.page);for(const a of r){if(A.size>=2)break;a.running=!0,A.add(a),v(a.page,"start"),(async()=>{try{const d=await I({...t,page:a.page+1},{signal:a.controller.signal});if(k||a.finished||a.controller.signal.aborted)return;const n=Y(d,t.pageSize);a.finished=!0,a.removeAbort(),f.delete(a.page),D(a.page,n,a.request)}catch{!k&&!a.controller.signal.aborted&&(g.add(a.page),v(a.page,"error"),e.markPageLoadFailed(a.page,a.request))}finally{a.finished||(a.finished=!0,a.removeAbort(),f.get(a.page)===a&&f.delete(a.page)),A.delete(a),m(),F()}})()}m()},O=()=>{R&&clearTimeout(R),R=setTimeout(()=>{R=void 0,F()},120)};return{load(r,a){if(a.useRequestIdentity(),k||x||a.signal.aborted||!M(r)){e.markPageLoadFailed(r,a),v(r,"skip");return}const d=f.get(r);if(d?.request===a&&!d.finished)return;if(d&&j(d),c(r),r===0&&b){const w=b;b=void 0;try{D(0,w,a)}catch{g.add(r),e.markPageLoadFailed(r,a),v(r,"error")}m();return}const n={page:r,request:a,controller:new AbortController,running:!1,finished:!1,removeAbort:()=>{}},B=()=>{j(n),m()};a.signal.addEventListener("abort",B,{once:!0}),n.removeAbort=()=>a.signal.removeEventListener("abort",B),f.set(r,n),O(),m()},viewportChanged(){if(k)return;const r=e.getPagesInView();r?.length&&(c(r[0]),f.size&&O(),m())},retry(){if(!k){if(x){V();return}g.size!==0&&(g.clear(),L(),m())}},dispose(){k=!0,R&&clearTimeout(R),R=void 0;for(const r of f.values())j(r);N=[],g.clear(),b=void 0}}},me=[{key:"applicationNo",title:"申请单编号",width:260},{key:"applicationType",title:"申请单类型",width:180},{key:"applicantName",title:"申请人",width:170},{key:"applicationTime",title:"申请时间",width:220},{key:"statusLabel",title:"流程状态",width:140}].map(e=>({...e,showEllipsis:!0,sortable:!1})),q=40,ve=e=>{const t=l.useRef(void 0);return e.initialPage?o.jsx(be,{...e,initialPage:e.initialPage,restoreScroll:t.current?.query===e.query?t.current.position:void 0,rememberScroll:i=>{t.current={query:e.query,position:i}}}):o.jsx("div",{className:"make-app-approval-canvas",role:"group","aria-label":"审批记录表格"})},be=({components:{Button:e},initialPage:t,query:i,provider:I,themeKey:P,onOpen:L,onReload:V,logger:C,restoreScroll:f,rememberScroll:A})=>{const N=l.useRef(null),u=l.useRef(null),g=l.useRef(null),[b,h]=l.useState(!1),[p,k]=l.useState(0),[x,R]=l.useState({...t,failed:!1,loading:!1}),M=l.useRef(t.rows),v=l.useRef(f),m=l.useRef({provider:I,onOpen:L,onReload:V,logger:C,rememberScroll:A});m.current={provider:I,onOpen:L,onReload:V,logger:C,rememberScroll:A};const j=l.useRef(()=>{});return l.useEffect(()=>{const c=N.current;if(!c)return;let D=!1,F,O,r,a=t.total;z(m.current.logger,{operation:"table",phase:"start"});const d=()=>{D||(h(!0),z(m.current.logger,{operation:"table",phase:"error"}))};return import("@qfei-design/canvas-table").then(n=>{if(D)return;const B=()=>{const s=u.current,S=s?.getScrollState();s&&S&&n.globalEventBus.emitWithNamespace("scroll:change",s.tableId,S)},w=()=>{if(!D)try{const{width:s,height:S}=c.getBoundingClientRect();if(s<=0||S<=0)return;const E=getComputedStyle(c),G={rowHeight:q,headerHeight:40,fontSize:14,fontFamily:E.fontFamily||"Arial, sans-serif",...E.color?{textColor:E.color}:{},...E.getPropertyValue("--make-approval-bg").trim()?{rowBgColor:E.getPropertyValue("--make-approval-bg").trim()}:{},...E.getPropertyValue("--make-approval-header").trim()?{headerBgColor:E.getPropertyValue("--make-approval-header").trim()}:{},...E.getPropertyValue("--make-approval-border").trim()?{borderColor:E.getPropertyValue("--make-approval-border").trim()}:{}},re=Math.max(Math.ceil(300/i.pageSize),Math.ceil(S*3/q/i.pageSize)+2)*i.pageSize,J={enabled:!0,totalRowCount:a,pageSize:i.pageSize,maxCachedRows:re};if(u.current){u.current.updateProps({canvasWidth:s,canvasHeight:S,style:G,virtualOptions:J}),u.current.updateCanvasSize(s,S,!0),B();return}u.current=new n.CanvasTableComponent(c,{columns:me,canvasWidth:s,canvasHeight:S,style:G,rowKey:"id",showSN:{enabled:!0,width:64,formatter:(y,T)=>T+1},virtualOptions:J,selectable:{enabled:!1},rowSortable:{enabled:!1},editApplyMode:"controlled",customEdit:y=>{y.cancel()},emptyStateOptions:{text:"暂无审批记录"},bodyRowHeadSuffixOptions:{enabled:!0,width:20,render:({group:y,x:T,height:_,rowData:U})=>{const oe=U?.id,K=new n.RectShape({name:"approval-open",x:T,y:_/2-10,cursor:"pointer",tooltip:"查看审批详情",attrs:{width:20,height:20,fill:"transparent",stroke:"transparent"}});K.addChild(new n.ImgShape({name:"approval-open-icon",x:3,y:3,attrs:{width:14,height:14,img:"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${E.color||"#64748b"}" stroke-width="1.8"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg>`)}})),K.on("mousedown",X=>X.stopPropagation?.()),K.on("click",X=>{X.stopPropagation?.();const Q=M.current.find(se=>se.id===oe);Q&&m.current.onOpen(Q)}),y.addChild(K)}}});const $=u.current,H=he({table:$,query:i,initialPage:t,retryViewport:B,onReload:()=>m.current.onReload(),loadPage:(y,T)=>m.current.provider.loadPage(y,T),logger:y=>z(m.current.logger,y),onChange:y=>{D||(a=y.total,M.current=y.rows,R(T=>T.total===y.total&&T.failed===y.failed&&T.loading===y.loading&&T.rows.length===y.rows.length&&T.rows.every((_,U)=>_===y.rows[U])?T:y))}});g.current=H,O=n.globalEventBus.onWithNamespace("data:load",$.tableId,(y,T)=>H.load(y,T)),r=n.globalEventBus.onWithNamespace("scroll:change",$.tableId,()=>H.viewportChanged()),v.current&&$.scrollTo(v.current.scrollX,v.current.scrollY),h(!1),z(m.current.logger,{operation:"table",phase:"success"})}catch{d()}};j.current=w,F=new ResizeObserver(w),F.observe(c),w()}).catch(d),()=>{D=!0,F?.disconnect(),j.current=()=>{},u.current&&(v.current=u.current.getScrollState(),v.current&&m.current.rememberScroll(v.current)),O?.(),r?.(),g.current?.dispose(),g.current=null,u.current?.destroy(),u.current=null,z(m.current.logger,{operation:"table",phase:"destroy"})}},[t,i,p]),l.useEffect(()=>{j.current()},[P]),o.jsxs("div",{className:"make-app-approval-table-frame","aria-busy":x.loading,children:[o.jsx("div",{ref:N,className:"make-app-approval-canvas",role:"group","aria-label":"审批记录表格"}),b&&o.jsxs("div",{className:"make-app-approval-overlay",role:"alert",children:["表格加载失败 ",o.jsx(e,{htmlType:"button",variant:"default",onClick:()=>{h(!1),k(c=>c+1)},children:"重新加载表格"})]}),!b&&x.failed&&o.jsxs("div",{className:"make-app-approval-table-feedback",role:"alert",children:["部分审批记录加载失败 ",o.jsx(e,{htmlType:"button",variant:"default",onClick:()=>g.current?.retry(),children:"重试加载"})]}),!b&&!x.failed&&x.loading&&o.jsxs("div",{className:"make-app-approval-table-loading",role:"status","aria-label":"正在加载审批记录","aria-live":"polite",children:[o.jsx("span",{className:"make-app-approval-loading-spinner","aria-hidden":"true"}),o.jsx("span",{children:"加载中"})]}),o.jsxs("ul",{className:"make-app-approval-accessible-rows","aria-label":"审批记录文字视图",children:[x.total===0&&o.jsx("li",{children:"暂无审批记录"}),x.rows.map(c=>o.jsxs("li",{children:[o.jsxs("span",{children:[c.applicationNo,"，",c.applicationType,"，",c.applicantName,"，",c.applicationTime,"，",te(c.processStatus),"。"]}),o.jsxs(e,{htmlType:"button",variant:"text",onClick:()=>L(c),children:["打开 ",c.applicationNo||c.applicationType," 的审批详情"]})]},c.id))]})]})},we=[],ye=(e,t,i,I)=>{const[P,L]=l.useState(0),[V,C]=l.useState(),f=l.useRef({provider:e,logger:I});f.current={provider:e,logger:I};const A=l.useMemo(()=>({}),[t,i,P]);l.useEffect(()=>{const u=new AbortController,{provider:g,logger:b}=f.current,h={operation:"list",tab:t.tab,page:t.page,pageSize:t.pageSize};z(b,{...h,phase:"start"});let p=!1;return(async()=>{try{const k=await g.loadPage(t,{signal:u.signal});if(u.signal.aborted)return;const x=Y(k,t.pageSize);p=!0,C({...x,token:A,status:"success"}),z(b,{...h,phase:"success",rowCount:x.rows.length})}catch{if(u.signal.aborted)return;p=!0,C({token:A,status:"error",rows:we,total:0}),z(b,{...h,phase:"error"})}})(),()=>{u.abort(),p||z(b,{...h,phase:"cancel"})}},[t,A]);const N=V?.token===A?V:void 0;return{initialPage:N?.status==="success"?N:void 0,total:N?.total??0,status:N?.status??"loading",reload:()=>L(u=>u+1)}},W={keyword:"",processStatus:"",startDate:"",endDate:""},Se=[{value:"pending",label:"待我处理"},{value:"approved",label:"已审批"}],ee=e=>{if(e==="")return!0;if(!/^\d{4}-\d{2}-\d{2}$/.test(e))return!1;const t=new Date(`${e}T00:00:00Z`);return Number.isFinite(t.getTime())&&t.toISOString().slice(0,10)===e},ke=({components:e,provider:t,onOpenApproval:i,statusOptions:I=[],pageSize:P=20,refreshKey:L,themeKey:V,logger:C,className:f})=>{const{Input:A,Select:N,DateRangePicker:u,Button:g,Tabs:b}=e,h=l.useId(),[p,k]=l.useState(W),[x,R]=l.useState(0),[M,v]=l.useState(""),[m,j]=l.useState(""),[c,D]=l.useState({...W,tab:"pending",page:1,pageSize:P}),{initialPage:F,status:O,reload:r}=ye(t,c,L,C),a=l.useRef(!1),d=l.useRef(!0);l.useEffect(()=>(d.current=!0,()=>{d.current=!1}),[]);const n=O==="loading",B=async s=>{if(!a.current){a.current=!0,j(""),z(C,{operation:"open",phase:"start"});try{await i(s),z(C,{operation:"open",phase:"success"})}catch{d.current&&j("审批详情打开失败，请重试"),z(C,{operation:"open",phase:"error"})}finally{a.current=!1}}},w=s=>{s!==c.tab&&(v(""),j(""),D(S=>({...S,tab:s,page:1})))};return o.jsx("section",{className:["make-app-approval",f].filter(Boolean).join(" "),"aria-label":"我的审批",children:o.jsxs(b,{items:Se,value:c.tab,onChange:w,ariaLabel:"审批分类",children:[o.jsxs("form",{className:"make-app-approval-filters",onSubmit:s=>{if(s.preventDefault(),!ee(p.startDate)||!ee(p.endDate)){v("请选择有效日期");return}if(p.startDate&&p.endDate&&p.startDate>p.endDate){v("开始日期不能晚于结束日期");return}v(""),j(""),D(S=>({...S,...p,keyword:p.keyword.trim(),page:1}))},children:[o.jsxs("div",{className:"make-app-approval-filter-field",children:[o.jsx("label",{htmlFor:`${h}-keyword`,children:"申请单号或申请人"}),o.jsx(A,{id:`${h}-keyword`,ariaLabel:"申请单号或申请人",placeholder:"搜索申请单号、申请人",value:p.keyword,onChange:s=>k(S=>({...S,keyword:s}))})]}),o.jsxs("div",{className:"make-app-approval-filter-field",children:[o.jsx("label",{htmlFor:`${h}-status`,children:"流程状态"}),o.jsx(N,{id:`${h}-status`,ariaLabel:"流程状态",value:p.processStatus,options:[{value:"",label:"全部流程状态"},...I],onChange:s=>k(S=>({...S,processStatus:s}))})]}),o.jsxs("fieldset",{className:"make-app-approval-date-field",children:[o.jsx("legend",{children:"申请时间"}),o.jsx("div",{className:"make-app-approval-date-control",children:o.jsx(u,{id:`${h}-period`,ariaLabel:"申请时间",placeholder:["开始日期","结束日期"],value:[p.startDate,p.endDate],onChange:([s,S])=>k(E=>({...E,startDate:s,endDate:S}))},x)})]}),o.jsxs("div",{className:"make-app-approval-filter-actions",children:[o.jsx(g,{htmlType:"submit",variant:"primary",children:"查询"}),o.jsx(g,{htmlType:"button",variant:"default",onClick:()=>{k(W),R(s=>s+1),v(""),j(""),D(s=>({...s,...W,page:1}))},children:"重置"}),o.jsx(g,{htmlType:"button",variant:"default",disabled:n,loading:n,onClick:r,children:"刷新"})]})]}),M&&o.jsx("p",{role:"alert",className:"make-app-approval-error",children:M}),m&&o.jsx("p",{role:"alert",className:"make-app-approval-error",children:m}),o.jsxs("div",{className:"make-app-approval-results","aria-busy":n,children:[o.jsx(ve,{components:e,initialPage:F,query:c,provider:t,onOpen:s=>{B(s)},onReload:r,themeKey:V,logger:C}),n&&o.jsx("div",{className:"make-app-approval-overlay",role:"status",children:"正在加载审批记录…"}),O==="error"&&o.jsxs("div",{className:"make-app-approval-overlay",role:"alert",children:[o.jsx("span",{children:"审批列表加载失败，请重试"}),o.jsx(g,{htmlType:"button",variant:"default",onClick:r,children:"重试"})]})]})]})})},xe=e=>{const t=e.pageSize??20;if(!e.scopeKey.trim())throw new Error("MyApprovalsPage requires scopeKey");for(const i of["Input","Select","DateRangePicker","Button","Tabs"])if(!e.components?.[i])throw new Error(`MyApprovalsPage requires components.${i}`);if(!Number.isSafeInteger(t)||t<1||t>200)throw new Error("pageSize must be an integer from 1 to 200");return o.jsx(ke,{...e,pageSize:t},JSON.stringify([e.scopeKey,t]))};exports.MyApprovalsPage=xe;

package/dist/list.mjs

@@ -0,0 +1,387 @@
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import { useRef as M, useState as V, useEffect as j, useMemo as ie, useId as ce } from "react";
+import { getApprovalStatusDisplay as pe } from "./index.mjs";
+const re = (e) => e == null || e === "UNSUBMITTED" ? "状态未知" : pe(e).label, I = (e, a) => {
+  try {
+    e ? e(a) : a.phase === "error" ? console.warn("[make-app-approval]", a) : console.info("[make-app-approval]", a);
+  } catch {
+    console.warn("[make-app-approval] diagnostic sink failed");
+  }
+}, oe = (e) => typeof e == "object" && e !== null, de = (e) => oe(e) ? ["id", "entityKey", "recordId"].every((a) => typeof e[a] == "string" && e[a].trim().length > 0) && ["applicationNo", "applicationType", "applicantName", "applicationTime"].every((a) => typeof e[a] == "string") && ["taskId", "processInstanceId"].every((a) => e[a] === void 0 || typeof e[a] == "string" && e[a].trim().length > 0) && (typeof e.processStatus == "string" || e.processStatus === null) : !1, Q = (e, a) => {
+  if (!oe(e) || !Array.isArray(e.rows) || !e.rows.every(de) || typeof e.total != "number" || !Number.isSafeInteger(e.total) || e.total < 0 || e.rows.length > a || e.rows.length > e.total || new Set(e.rows.map((h) => h.id)).size !== e.rows.length)
+    throw new Error("Invalid approval page contract");
+  return { rows: e.rows, total: e.total };
+}, ue = ({ table: e, query: a, initialPage: h, loadPage: F, onChange: W, retryViewport: B, onReload: O, logger: z }) => {
+  const d = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Set();
+  let C = [];
+  const p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Set();
+  let v = h, f = h.total, i = 0, k = !1, S = !1, R;
+  const L = (r) => Number.isSafeInteger(r) && r >= 0 && r * a.pageSize < f, m = (r, t, c) => I(z, { operation: "list", phase: t, tab: a.tab, page: r + 1, pageSize: a.pageSize, rowCount: c }), g = () => {
+    k || W({ total: f, rows: C, failed: S || u.size > 0, loading: d.size > 0 });
+  }, N = (r) => {
+    r.finished || (r.finished = !0, r.removeAbort(), d.get(r.page) === r && d.delete(r.page), e.markPageLoadFailed(r.page, r.request), r.controller.abort(), m(r.page, "cancel"));
+  }, l = (r) => {
+    i = r;
+    const t = e.getPagesInView() ?? [], c = new Set([i, ...t].flatMap((n) => [n - 1, n, n + 1]).filter(L));
+    for (const n of d.values()) c.has(n.page) || N(n);
+    for (const n of u) c.has(n) || u.delete(n);
+  }, D = (r, t, c) => {
+    const n = t.rows.map((b) => {
+      const o = { ...b, statusLabel: re(b.processStatus) };
+      return p.set(o, b), o;
+    });
+    if (!e.setVirtualPageData(n, r, t.total, c)) {
+      m(r, "skip");
+      return;
+    }
+    f = t.total;
+    try {
+      C = Q({ rows: e.getTableData() ?? [], total: f }, Number.MAX_SAFE_INTEGER).rows.map((b) => p.get(b) ?? b);
+    } catch (b) {
+      S = !0, C = [], v = void 0, R && clearTimeout(R), R = void 0;
+      for (const o of d.values()) N(o);
+      throw b;
+    }
+    v && v.total !== f && (v = void 0), u.delete(r);
+    for (const b of d.values()) L(b.page) || N(b);
+    !L(r) && r > 0 && e.scrollToRow(Math.max(0, f - 1)), m(r, "success", t.rows.length);
+  }, $ = () => {
+    if (k || R) return;
+    const r = [...d.values()].filter((t) => !t.running && !t.finished).sort((t, c) => Math.abs(t.page - i) - Math.abs(c.page - i) || t.page - c.page);
+    for (const t of r) {
+      if (A.size >= 2) break;
+      t.running = !0, A.add(t), m(t.page, "start"), (async () => {
+        try {
+          const c = await F({ ...a, page: t.page + 1 }, { signal: t.controller.signal });
+          if (k || t.finished || t.controller.signal.aborted) return;
+          const n = Q(c, a.pageSize);
+          t.finished = !0, t.removeAbort(), d.delete(t.page), D(t.page, n, t.request);
+        } catch {
+          !k && !t.controller.signal.aborted && (u.add(t.page), m(t.page, "error"), e.markPageLoadFailed(t.page, t.request));
+        } finally {
+          t.finished || (t.finished = !0, t.removeAbort(), d.get(t.page) === t && d.delete(t.page)), A.delete(t), g(), $();
+        }
+      })();
+    }
+    g();
+  }, x = () => {
+    R && clearTimeout(R), R = setTimeout(() => {
+      R = void 0, $();
+    }, 120);
+  };
+  return {
+    load(r, t) {
+      if (t.useRequestIdentity(), k || S || t.signal.aborted || !L(r)) {
+        e.markPageLoadFailed(r, t), m(r, "skip");
+        return;
+      }
+      const c = d.get(r);
+      if (c?.request === t && !c.finished) return;
+      if (c && N(c), l(r), r === 0 && v) {
+        const b = v;
+        v = void 0;
+        try {
+          D(0, b, t);
+        } catch {
+          u.add(r), e.markPageLoadFailed(r, t), m(r, "error");
+        }
+        g();
+        return;
+      }
+      const n = { page: r, request: t, controller: new AbortController(), running: !1, finished: !1, removeAbort: () => {
+      } }, K = () => {
+        N(n), g();
+      };
+      t.signal.addEventListener("abort", K, { once: !0 }), n.removeAbort = () => t.signal.removeEventListener("abort", K), d.set(r, n), x(), g();
+    },
+    viewportChanged() {
+      if (k) return;
+      const r = e.getPagesInView();
+      r?.length && (l(r[0]), d.size && x(), g());
+    },
+    retry() {
+      if (!k) {
+        if (S) {
+          O();
+          return;
+        }
+        u.size !== 0 && (u.clear(), B(), g());
+      }
+    },
+    dispose() {
+      k = !0, R && clearTimeout(R), R = void 0;
+      for (const r of d.values()) N(r);
+      C = [], u.clear(), v = void 0;
+    }
+  };
+}, fe = [
+  { key: "applicationNo", title: "申请单编号", width: 260 },
+  { key: "applicationType", title: "申请单类型", width: 180 },
+  { key: "applicantName", title: "申请人", width: 170 },
+  { key: "applicationTime", title: "申请时间", width: 220 },
+  { key: "statusLabel", title: "流程状态", width: 140 }
+].map((e) => ({ ...e, showEllipsis: !0, sortable: !1 })), te = 40, ge = (e) => {
+  const a = M(void 0);
+  return e.initialPage ? /* @__PURE__ */ s(
+    he,
+    {
+      ...e,
+      initialPage: e.initialPage,
+      restoreScroll: a.current?.query === e.query ? a.current.position : void 0,
+      rememberScroll: (h) => {
+        a.current = { query: e.query, position: h };
+      }
+    }
+  ) : /* @__PURE__ */ s("div", { className: "make-app-approval-canvas", role: "group", "aria-label": "审批记录表格" });
+}, he = ({ components: { Button: e }, initialPage: a, query: h, provider: F, themeKey: W, onOpen: B, onReload: O, logger: z, restoreScroll: d, rememberScroll: A }) => {
+  const C = M(null), p = M(null), u = M(null), [v, f] = V(!1), [i, k] = V(0), [S, R] = V({ ...a, failed: !1, loading: !1 }), L = M(a.rows), m = M(d), g = M({ provider: F, onOpen: B, onReload: O, logger: z, rememberScroll: A });
+  g.current = { provider: F, onOpen: B, onReload: O, logger: z, rememberScroll: A };
+  const N = M(() => {
+  });
+  return j(() => {
+    const l = C.current;
+    if (!l) return;
+    let D = !1, $, x, r, t = a.total;
+    I(g.current.logger, { operation: "table", phase: "start" });
+    const c = () => {
+      D || (f(!0), I(g.current.logger, { operation: "table", phase: "error" }));
+    };
+    return import("@qfei-design/canvas-table").then((n) => {
+      if (D) return;
+      const K = () => {
+        const o = p.current, y = o?.getScrollState();
+        o && y && n.globalEventBus.emitWithNamespace("scroll:change", o.tableId, y);
+      }, b = () => {
+        if (!D)
+          try {
+            const { width: o, height: y } = l.getBoundingClientRect();
+            if (o <= 0 || y <= 0) return;
+            const E = getComputedStyle(l), Z = {
+              rowHeight: te,
+              headerHeight: 40,
+              fontSize: 14,
+              fontFamily: E.fontFamily || "Arial, sans-serif",
+              ...E.color ? { textColor: E.color } : {},
+              ...E.getPropertyValue("--make-approval-bg").trim() ? { rowBgColor: E.getPropertyValue("--make-approval-bg").trim() } : {},
+              ...E.getPropertyValue("--make-approval-header").trim() ? { headerBgColor: E.getPropertyValue("--make-approval-header").trim() } : {},
+              ...E.getPropertyValue("--make-approval-border").trim() ? { borderColor: E.getPropertyValue("--make-approval-border").trim() } : {}
+            }, ne = Math.max(Math.ceil(300 / h.pageSize), Math.ceil(y * 3 / te / h.pageSize) + 2) * h.pageSize, q = { enabled: !0, totalRowCount: t, pageSize: h.pageSize, maxCachedRows: ne };
+            if (p.current) {
+              p.current.updateProps({ canvasWidth: o, canvasHeight: y, style: Z, virtualOptions: q }), p.current.updateCanvasSize(o, y, !0), K();
+              return;
+            }
+            p.current = new n.CanvasTableComponent(l, {
+              columns: fe,
+              canvasWidth: o,
+              canvasHeight: y,
+              style: Z,
+              rowKey: "id",
+              showSN: { enabled: !0, width: 64, formatter: (w, P) => P + 1 },
+              virtualOptions: q,
+              selectable: { enabled: !1 },
+              rowSortable: { enabled: !1 },
+              editApplyMode: "controlled",
+              customEdit: (w) => {
+                w.cancel();
+              },
+              emptyStateOptions: { text: "暂无审批记录" },
+              bodyRowHeadSuffixOptions: {
+                enabled: !0,
+                width: 20,
+                render: ({ group: w, x: P, height: Y, rowData: G }) => {
+                  const se = G?.id, _ = new n.RectShape({ name: "approval-open", x: P, y: Y / 2 - 10, cursor: "pointer", tooltip: "查看审批详情", attrs: { width: 20, height: 20, fill: "transparent", stroke: "transparent" } });
+                  _.addChild(new n.ImgShape({ name: "approval-open-icon", x: 3, y: 3, attrs: {
+                    width: 14,
+                    height: 14,
+                    img: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${E.color || "#64748b"}" stroke-width="1.8"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg>`)
+                  } })), _.on("mousedown", (J) => J.stopPropagation?.()), _.on("click", (J) => {
+                    J.stopPropagation?.();
+                    const ee = L.current.find((le) => le.id === se);
+                    ee && g.current.onOpen(ee);
+                  }), w.addChild(_);
+                }
+              }
+            });
+            const H = p.current, X = ue({
+              table: H,
+              query: h,
+              initialPage: a,
+              // 公开滚动同步事件会重新检测缺页，不移动视口，也不复用失败身份。
+              retryViewport: K,
+              onReload: () => g.current.onReload(),
+              loadPage: (w, P) => g.current.provider.loadPage(w, P),
+              logger: (w) => I(g.current.logger, w),
+              onChange: (w) => {
+                D || (t = w.total, L.current = w.rows, R((P) => P.total === w.total && P.failed === w.failed && P.loading === w.loading && P.rows.length === w.rows.length && P.rows.every((Y, G) => Y === w.rows[G]) ? P : w));
+              }
+            });
+            u.current = X, x = n.globalEventBus.onWithNamespace("data:load", H.tableId, (w, P) => X.load(w, P)), r = n.globalEventBus.onWithNamespace("scroll:change", H.tableId, () => X.viewportChanged()), m.current && H.scrollTo(m.current.scrollX, m.current.scrollY), f(!1), I(g.current.logger, { operation: "table", phase: "success" });
+          } catch {
+            c();
+          }
+      };
+      N.current = b, $ = new ResizeObserver(b), $.observe(l), b();
+    }).catch(c), () => {
+      D = !0, $?.disconnect(), N.current = () => {
+      }, p.current && (m.current = p.current.getScrollState(), m.current && g.current.rememberScroll(m.current)), x?.(), r?.(), u.current?.dispose(), u.current = null, p.current?.destroy(), p.current = null, I(g.current.logger, { operation: "table", phase: "destroy" });
+    };
+  }, [a, h, i]), j(() => {
+    N.current();
+  }, [W]), /* @__PURE__ */ T("div", { className: "make-app-approval-table-frame", "aria-busy": S.loading, children: [
+    /* @__PURE__ */ s("div", { ref: C, className: "make-app-approval-canvas", role: "group", "aria-label": "审批记录表格" }),
+    v && /* @__PURE__ */ T("div", { className: "make-app-approval-overlay", role: "alert", children: [
+      "表格加载失败 ",
+      /* @__PURE__ */ s(e, { htmlType: "button", variant: "default", onClick: () => {
+        f(!1), k((l) => l + 1);
+      }, children: "重新加载表格" })
+    ] }),
+    !v && S.failed && /* @__PURE__ */ T("div", { className: "make-app-approval-table-feedback", role: "alert", children: [
+      "部分审批记录加载失败 ",
+      /* @__PURE__ */ s(e, { htmlType: "button", variant: "default", onClick: () => u.current?.retry(), children: "重试加载" })
+    ] }),
+    !v && !S.failed && S.loading && /* @__PURE__ */ T("div", { className: "make-app-approval-table-loading", role: "status", "aria-label": "正在加载审批记录", "aria-live": "polite", children: [
+      /* @__PURE__ */ s("span", { className: "make-app-approval-loading-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ s("span", { children: "加载中" })
+    ] }),
+    /* @__PURE__ */ T("ul", { className: "make-app-approval-accessible-rows", "aria-label": "审批记录文字视图", children: [
+      S.total === 0 && /* @__PURE__ */ s("li", { children: "暂无审批记录" }),
+      S.rows.map((l) => /* @__PURE__ */ T("li", { children: [
+        /* @__PURE__ */ T("span", { children: [
+          l.applicationNo,
+          "，",
+          l.applicationType,
+          "，",
+          l.applicantName,
+          "，",
+          l.applicationTime,
+          "，",
+          re(l.processStatus),
+          "。"
+        ] }),
+        /* @__PURE__ */ T(e, { htmlType: "button", variant: "text", onClick: () => B(l), children: [
+          "打开 ",
+          l.applicationNo || l.applicationType,
+          " 的审批详情"
+        ] })
+      ] }, l.id))
+    ] })
+  ] });
+}, me = [], ve = (e, a, h, F) => {
+  const [W, B] = V(0), [O, z] = V(), d = M({ provider: e, logger: F });
+  d.current = { provider: e, logger: F };
+  const A = ie(() => ({}), [a, h, W]);
+  j(() => {
+    const p = new AbortController(), { provider: u, logger: v } = d.current, f = { operation: "list", tab: a.tab, page: a.page, pageSize: a.pageSize };
+    I(v, { ...f, phase: "start" });
+    let i = !1;
+    return (async () => {
+      try {
+        const k = await u.loadPage(a, { signal: p.signal });
+        if (p.signal.aborted) return;
+        const S = Q(k, a.pageSize);
+        i = !0, z({ ...S, token: A, status: "success" }), I(v, { ...f, phase: "success", rowCount: S.rows.length });
+      } catch {
+        if (p.signal.aborted) return;
+        i = !0, z({ token: A, status: "error", rows: me, total: 0 }), I(v, { ...f, phase: "error" });
+      }
+    })(), () => {
+      p.abort(), i || I(v, { ...f, phase: "cancel" });
+    };
+  }, [a, A]);
+  const C = O?.token === A ? O : void 0;
+  return {
+    initialPage: C?.status === "success" ? C : void 0,
+    total: C?.total ?? 0,
+    status: C?.status ?? "loading",
+    reload: () => B((p) => p + 1)
+  };
+}, U = { keyword: "", processStatus: "", startDate: "", endDate: "" }, be = [{ value: "pending", label: "待我处理" }, { value: "approved", label: "已审批" }], ae = (e) => {
+  if (e === "") return !0;
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(e)) return !1;
+  const a = /* @__PURE__ */ new Date(`${e}T00:00:00Z`);
+  return Number.isFinite(a.getTime()) && a.toISOString().slice(0, 10) === e;
+}, we = ({ components: e, provider: a, onOpenApproval: h, statusOptions: F = [], pageSize: W = 20, refreshKey: B, themeKey: O, logger: z, className: d }) => {
+  const { Input: A, Select: C, DateRangePicker: p, Button: u, Tabs: v } = e, f = ce(), [i, k] = V(U), [S, R] = V(0), [L, m] = V(""), [g, N] = V(""), [l, D] = V({ ...U, tab: "pending", page: 1, pageSize: W }), { initialPage: $, status: x, reload: r } = ve(a, l, B, z), t = M(!1), c = M(!0);
+  j(() => (c.current = !0, () => {
+    c.current = !1;
+  }), []);
+  const n = x === "loading", K = async (o) => {
+    if (!t.current) {
+      t.current = !0, N(""), I(z, { operation: "open", phase: "start" });
+      try {
+        await h(o), I(z, { operation: "open", phase: "success" });
+      } catch {
+        c.current && N("审批详情打开失败，请重试"), I(z, { operation: "open", phase: "error" });
+      } finally {
+        t.current = !1;
+      }
+    }
+  }, b = (o) => {
+    o !== l.tab && (m(""), N(""), D((y) => ({ ...y, tab: o, page: 1 })));
+  };
+  return /* @__PURE__ */ s("section", { className: ["make-app-approval", d].filter(Boolean).join(" "), "aria-label": "我的审批", children: /* @__PURE__ */ T(v, { items: be, value: l.tab, onChange: b, ariaLabel: "审批分类", children: [
+    /* @__PURE__ */ T("form", { className: "make-app-approval-filters", onSubmit: (o) => {
+      if (o.preventDefault(), !ae(i.startDate) || !ae(i.endDate)) {
+        m("请选择有效日期");
+        return;
+      }
+      if (i.startDate && i.endDate && i.startDate > i.endDate) {
+        m("开始日期不能晚于结束日期");
+        return;
+      }
+      m(""), N(""), D((y) => ({ ...y, ...i, keyword: i.keyword.trim(), page: 1 }));
+    }, children: [
+      /* @__PURE__ */ T("div", { className: "make-app-approval-filter-field", children: [
+        /* @__PURE__ */ s("label", { htmlFor: `${f}-keyword`, children: "申请单号或申请人" }),
+        /* @__PURE__ */ s(A, { id: `${f}-keyword`, ariaLabel: "申请单号或申请人", placeholder: "搜索申请单号、申请人", value: i.keyword, onChange: (o) => k((y) => ({ ...y, keyword: o })) })
+      ] }),
+      /* @__PURE__ */ T("div", { className: "make-app-approval-filter-field", children: [
+        /* @__PURE__ */ s("label", { htmlFor: `${f}-status`, children: "流程状态" }),
+        /* @__PURE__ */ s(C, { id: `${f}-status`, ariaLabel: "流程状态", value: i.processStatus, options: [{ value: "", label: "全部流程状态" }, ...F], onChange: (o) => k((y) => ({ ...y, processStatus: o })) })
+      ] }),
+      /* @__PURE__ */ T("fieldset", { className: "make-app-approval-date-field", children: [
+        /* @__PURE__ */ s("legend", { children: "申请时间" }),
+        /* @__PURE__ */ s("div", { className: "make-app-approval-date-control", children: /* @__PURE__ */ s(
+          p,
+          {
+            id: `${f}-period`,
+            ariaLabel: "申请时间",
+            placeholder: ["开始日期", "结束日期"],
+            value: [i.startDate, i.endDate],
+            onChange: ([o, y]) => k((E) => ({ ...E, startDate: o, endDate: y }))
+          },
+          S
+        ) })
+      ] }),
+      /* @__PURE__ */ T("div", { className: "make-app-approval-filter-actions", children: [
+        /* @__PURE__ */ s(u, { htmlType: "submit", variant: "primary", children: "查询" }),
+        /* @__PURE__ */ s(u, { htmlType: "button", variant: "default", onClick: () => {
+          k(U), R((o) => o + 1), m(""), N(""), D((o) => ({ ...o, ...U, page: 1 }));
+        }, children: "重置" }),
+        /* @__PURE__ */ s(u, { htmlType: "button", variant: "default", disabled: n, loading: n, onClick: r, children: "刷新" })
+      ] })
+    ] }),
+    L && /* @__PURE__ */ s("p", { role: "alert", className: "make-app-approval-error", children: L }),
+    g && /* @__PURE__ */ s("p", { role: "alert", className: "make-app-approval-error", children: g }),
+    /* @__PURE__ */ T("div", { className: "make-app-approval-results", "aria-busy": n, children: [
+      /* @__PURE__ */ s(ge, { components: e, initialPage: $, query: l, provider: a, onOpen: (o) => {
+        K(o);
+      }, onReload: r, themeKey: O, logger: z }),
+      n && /* @__PURE__ */ s("div", { className: "make-app-approval-overlay", role: "status", children: "正在加载审批记录…" }),
+      x === "error" && /* @__PURE__ */ T("div", { className: "make-app-approval-overlay", role: "alert", children: [
+        /* @__PURE__ */ s("span", { children: "审批列表加载失败，请重试" }),
+        /* @__PURE__ */ s(u, { htmlType: "button", variant: "default", onClick: r, children: "重试" })
+      ] })
+    ] })
+  ] }) });
+}, Ne = (e) => {
+  const a = e.pageSize ?? 20;
+  if (!e.scopeKey.trim()) throw new Error("MyApprovalsPage requires scopeKey");
+  for (const h of ["Input", "Select", "DateRangePicker", "Button", "Tabs"])
+    if (!e.components?.[h]) throw new Error(`MyApprovalsPage requires components.${h}`);
+  if (!Number.isSafeInteger(a) || a < 1 || a > 200) throw new Error("pageSize must be an integer from 1 to 200");
+  return /* @__PURE__ */ s(we, { ...e, pageSize: a }, JSON.stringify([e.scopeKey, a]));
+};
+export {
+  Ne as MyApprovalsPage
+};

package/dist/react/index.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from "react";
+export type ApprovalStatusProps = {
+    value: unknown;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const ApprovalStatus: ({ value, className, style }: ApprovalStatusProps) => import("react").JSX.Element;

package/dist/react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("./index.cjs"),n=({value:e,className:a,style:s})=>{const t=r.getApprovalStatusDisplay(e);return o.jsx("span",{className:["make-app-approval-status",a].filter(Boolean).join(" "),"data-tone":t.tone,style:s,children:t.label})};exports.ApprovalStatus=n;

package/dist/react.mjs

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { getApprovalStatusDisplay as r } from "./index.mjs";
+const n = ({ value: a, className: o, style: p }) => {
+  const t = r(a);
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: ["make-app-approval-status", o].filter(Boolean).join(" "),
+      "data-tone": t.tone,
+      style: p,
+      children: t.label
+    }
+  );
+};
+export {
+  n as ApprovalStatus
+};