@bit-sun/business-component 4.2.0-alpha.6.8 → 4.2.0-alpha.7

package/dist/plugin/TableColumnSetting/index.d.ts

@@ -38,14 +38,14 @@ declare class TableColumnSetting extends React.Component<TableColumnSettingProps
     } | {
         title: string;
         dataIndex: string;
-        render: (text: any, record: any) => React.JSX.Element;
+        render: (text: any, record: any) => JSX.Element;
         className?: undefined;
         width?: undefined;
     } | {
         title: string;
         dataIndex: string;
         className: string;
-        render: () => React.JSX.Element;
+        render: () => JSX.Element;
         width?: undefined;
     })[];
     showModal: () => void;
@@ -53,13 +53,13 @@ declare class TableColumnSetting extends React.Component<TableColumnSettingProps
     handleCancel: (e: React.MouseEvent<HTMLElement>) => void;
     handleTableHeadHidden: (title: string) => void;
     onSortEnd: ({ oldIndex, newIndex }: any) => void;
-    DraggableContainer: (props: any) => React.JSX.Element;
-    DraggableBodyRow: ({ className, style, ...restProps }: any) => React.JSX.Element;
+    DraggableContainer: (props: any) => JSX.Element;
+    DraggableBodyRow: ({ className, style, ...restProps }: any) => JSX.Element;
     onChange: (e: any, title: any) => void;
     handleReset: () => void;
     handleResetSetting: () => Promise<unknown>;
     onSearch: (e: any) => void;
     onSearchSort: (e: any) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default TableColumnSetting;

package/dist/utils/TableUtils.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import moment from 'moment';
 type mediaListType = {
     type: number;
@@ -49,24 +48,24 @@ declare const updateGuanDate: (requestParams: any, dateKeyParams?: any) => {
     };
     submit: any;
 };
-declare const textIcon: (type: string | number, text?: string) => React.JSX.Element | undefined;
-declare const handleTextDoubleOrId: (textOne: string | undefined, textTwo: string | undefined) => React.JSX.Element;
-declare const handleTextDouble: (textOne: string | undefined, textTwo: string | undefined) => React.JSX.Element;
-declare const handleTextOverflow: (text: string | undefined, width?: number) => React.JSX.Element;
-declare const handleTextLineFeed: (text: string | undefined, width?: number) => React.JSX.Element;
-declare const handleTextTooltip: (text: any) => React.JSX.Element;
-declare const handleTextBreakSpaces: (text: any) => React.JSX.Element;
-declare const handleStatusBadge: (text: any, color: any) => React.JSX.Element;
-declare const HandleTotalCount: (totalParams: any) => React.JSX.Element;
+declare const textIcon: (type: string | number, text?: string) => JSX.Element | undefined;
+declare const handleTextDoubleOrId: (textOne: string | undefined, textTwo: string | undefined) => JSX.Element;
+declare const handleTextDouble: (textOne: string | undefined, textTwo: string | undefined) => JSX.Element;
+declare const handleTextOverflow: (text: string | undefined, width?: number) => JSX.Element;
+declare const handleTextLineFeed: (text: string | undefined, width?: number) => JSX.Element;
+declare const handleTextTooltip: (text: any) => JSX.Element;
+declare const handleTextBreakSpaces: (text: any) => JSX.Element;
+declare const handleStatusBadge: (text: any, color: any) => JSX.Element;
+declare const HandleTotalCount: (totalParams: any) => JSX.Element;
 declare const handleCommonTimeRender: (text: any, format?: any) => any;
-declare const handleTooltip: (text: any, timeTrue?: boolean) => React.JSX.Element;
-declare const handleTooltipHours: (text: any, timeTrue?: boolean) => React.JSX.Element;
+declare const handleTooltip: (text: any, timeTrue?: boolean) => JSX.Element;
+declare const handleTooltipHours: (text: any, timeTrue?: boolean) => JSX.Element;
 type tableColumnsImageType = {
     width?: number | string;
     height?: number | string;
     [key: string]: any;
 };
-declare const tableColumnsImage: (url?: string, paramsObj?: tableColumnsImageType) => React.JSX.Element;
+declare const tableColumnsImage: (url?: string, paramsObj?: tableColumnsImageType) => JSX.Element;
 interface ColumnsEditInterfave {
     text?: string;
     record?: any;
@@ -82,7 +81,7 @@ interface ColumnsEditInterfave {
     };
     [key: string]: any;
 }
-declare const ColumnsEdit: (props: ColumnsEditInterfave) => React.JSX.Element;
+declare const ColumnsEdit: (props: ColumnsEditInterfave) => JSX.Element;
 type UserColumnsType = {
     name: string;
     department?: string;
@@ -90,13 +89,13 @@ type UserColumnsType = {
     company?: string;
     avatar?: string;
 };
-declare const userColumns: (props: UserColumnsType) => React.JSX.Element;
-declare const userInfoCard: (props: any) => React.JSX.Element;
+declare const userColumns: (props: UserColumnsType) => JSX.Element;
+declare const userInfoCard: (props: any) => JSX.Element;
 declare const getItemDefaultWidth: (item: any) => number;
-declare const sulaTableRenderTooltip: ({ text }: any) => React.JSX.Element;
+declare const sulaTableRenderTooltip: ({ text }: any) => JSX.Element;
 declare const renderNumberText: ({ text }: any) => any;
 declare const renderFixed2: (text: any) => any;
-declare const handleTextWarpCustom: (text: any, style?: {}) => React.JSX.Element;
+declare const handleTextWarpCustom: (text: any, style?: {}) => JSX.Element;
 declare const calculateValidPeriod: (start: any, end: any) => string;
-declare const handleTextWarp: (text: any) => React.JSX.Element;
+declare const handleTextWarp: (text: any) => JSX.Element;
 export { getSkuImg, updateGuanDate, textIcon, handleTextDoubleOrId, handleTextDouble, handleTextOverflow, handleTextLineFeed, handleTextTooltip, handleTextBreakSpaces, handleStatusBadge, HandleTotalCount, handleTooltip, handleCommonTimeRender, handleTooltipHours, tableColumnsImage, ColumnsEdit, userColumns, userInfoCard, getItemDefaultWidth, renderNumberText, sulaTableRenderTooltip, renderFixed2, handleTextWarpCustom, handleTextWarp, calculateValidPeriod };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.2.0-alpha.6.8",
+  "version": "4.2.0-alpha.7",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/BsSulaQueryTable/index.md

@@ -16,11 +16,32 @@ order: 1
 ### BsSulaQueryTable
 
 ```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Tabs, Button } from 'antd';
 import { BsSulaQueryTable } from '../../../index.ts';
 
 export default () => {
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    // @ts-ignore
+    window.__POWERED_BY_WUJIE__ = true;
+    const flowConfig = [
+      {
+        tradeType: 180,
+        controlButtons: ['DRP_Sale_Order_edit'],
+        config: [
+          { fromStatus: 1, buttons: ['DRP_Sale_Order_edit'] },
+          { fromStatus: 25, buttons: [] },
+        ],
+      },
+    ];
+    localStorage.setItem('BUSINESS_FLOW_BUTTONS', JSON.stringify(flowConfig));
+    const authCodes = [
+      'User_ApplicationList_add',
+      'DRP_Sale_Order_edit',
+    ];
+    localStorage.setItem('menuAuth_mainProject', JSON.stringify(authCodes));
+  }, []);
   const config = {
     needPageHeader: false,
     remoteDataSource: {
@@ -38,7 +59,8 @@ export default () => {
         return {
           ...item,
           id: `${index}`,
-          orderStatus: index === 1 ? '-1' : '',
+          orderStatus: index % 2 === 0 ? 1 : 25,
+          saleInfo: { tradeStatus: index % 2 === 0 ? 1 : 25 },
           name: `${item.name.first} ${item.name.last}`,
         };
       }),
@@ -73,6 +95,14 @@ export default () => {
         },
         action: ['refreshTable'],
       },
+      {
+        type: 'button',
+        code: 'User_ApplicationList_delete',
+        props: {
+          children: '删除',
+        },
+        action: ['refreshTable'],
+      },
     ],
     fields: [
             {
@@ -191,6 +221,28 @@ export default () => {
         key: 'email3',
         title: '邮箱3',
       },
+      {
+        key: 'operate',
+        title: '操作',
+        isPermissionColumn: true,
+        fixed: 'right',
+        render: [
+          {
+            type: 'link',
+            props: {
+              children: '编辑',
+              type: 'primary',
+            },
+            visible: '#{record.saleInfo.tradeStatus == 1}',
+            code: 'DRP_Sale_Order_edit',
+            action: {
+              type: 'route',
+              path: '/sales-management/sales-order/edit/#{record.id}',
+            },
+          },
+          
+        ],
+      },
     ],
     rowSelection: {
         onChange: (rowKey: any, rows: any) => {
@@ -199,6 +251,8 @@ export default () => {
         },
       },
     rowKey: 'id',
+    tradeType: 180,
+    statusFieldPath: 'saleInfo.tradeStatus',
     tableProps: {
       initialPaging: {
         pagination: {
@@ -216,4 +270,3 @@ export default () => {
   );
 };
 ```
-

package/src/components/Business/BsSulaQueryTable/index.tsx

@@ -607,10 +607,24 @@ export default (props: any) => {
       ...value?.tableProps || {}
     };
 
-    // @ts-ignore
     if (tableProps?.initialPaging?.pagination) {
-      // @ts-ignore
       tableProps.initialPaging.pagination.showSizeChanger = true;
+
+      // 分页大小改变时，更新本地存储
+      const onShowSizeChange = (current: number, size: number) => {
+        let allPaginationData = JSON.parse(localStorage.getItem('paginationData') || "{}");
+        allPaginationData[bsTableCode] = size;
+        localStorage.setItem('paginationData', JSON.stringify(allPaginationData || {}));
+      };
+      tableProps.initialPaging.pagination.onShowSizeChange = onShowSizeChange;
+      
+      // 从本地存储中获取分页大小
+      const pageSize = JSON.parse(localStorage.getItem('paginationData') || "{}")[bsTableCode];
+      if (pageSize) {
+        tableProps.initialPaging.pagination.pageSize = pageSize;
+        tableProps.pageSize = pageSize;
+        tableProps.defaultPageSize = pageSize;
+      }
     }
     return tableProps;
   };
@@ -735,9 +749,103 @@ export default (props: any) => {
     if (value.rowSelection) {
       value.rowSelection.columnWidth = 50;
     }
+    if (typeof props.tradeType !== 'number') {
+      return {
+        ...value,
+        actionsRender,
+      };
+    }
+    try {
+      const raw = JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+      const entry = raw.find((i: any) => i?.tradeType === props.tradeType);
+      if (entry) {
+        const ctrlSet = new Set((entry?.controlButtons || []).filter(Boolean));
+        const allowedTopSet: any = new Set();
+        (entry?.config || []).forEach((c: any) => {
+          (c?.buttons || []).filter(Boolean).forEach((b: any) => {
+            if (!ctrlSet.size || ctrlSet.has(b)) allowedTopSet.add(b);
+          });
+        });
+        console.debug('[FlowCtrl:top]', { ctrlSize: ctrlSet.size, allowedTopSize: allowedTopSet.size });
+        actionsRender = actionsRender.filter((ui: any) => {
+          const code = ui?.code;
+          if (!code) return true;
+          if (ctrlSet.size && !ctrlSet.has(code)) return true; // 非流程控制按钮不处理
+          const keep = allowedTopSet.has(code);
+          if (code) console.debug('[FlowCtrl:top-element]', { code, keep });
+          return keep;
+        });
+      }
+    } catch (e) {}
+    let remoteDataSource = value?.remoteDataSource;
+    if (remoteDataSource) {
+      let ctrlSet: any = new Set();
+      let btnStatusMap: any = new Map();
+      try {
+        const raw = JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+        const entry = raw.find((i: any) => i?.tradeType === props.tradeType);
+        if (entry) {
+          ctrlSet = new Set((entry?.controlButtons || []).filter(Boolean));
+          (entry?.config || []).forEach((c: any) => {
+            (c?.buttons || []).filter(Boolean).forEach((b: any) => {
+              if (!ctrlSet.size || ctrlSet.has(b)) {
+                const set = btnStatusMap.get(b) || new Set();
+                set.add(c?.fromStatus);
+                btnStatusMap.set(b, set);
+              }
+            });
+          });
+        }
+      } catch (e) {}
+      const getByPath = (obj: any, path: string) => {
+        if (!obj || !path) return undefined;
+        const parts = path.split('.');
+        let cur = obj;
+        for (let i = 0; i < parts.length; i++) {
+          cur = cur?.[parts[i]];
+          if (cur === undefined) return undefined;
+        }
+        return cur;
+      };
+      const statusPath = props?.statusFieldPath;
+      const augment = (result: any) => {
+        if (!btnStatusMap || btnStatusMap.size === 0) return result;
+        if (result && Array.isArray(result.list)) {
+          result.list = result.list.map((rec: any) => {
+            const status = statusPath ? getByPath(rec, statusPath) : (rec?.status ?? rec?.orderStatus ?? rec?.flowStatus ?? rec?.tradeStatus ?? rec?.currentStatus);
+            const map: any = {};
+            btnStatusMap.forEach((set: any, code: string) => {
+              map[code] = set.has(status) ? true : undefined;
+            });
+            return { ...rec, __flowAllowedMap: map };
+          });
+        }
+        return result;
+      };
+      if (Array.isArray(remoteDataSource.converter)) {
+        const stages = remoteDataSource.converter;
+        const pipeline = (args: any) => {
+          let res = args;
+          for (let i = 0; i < stages.length; i++) {
+            res = stages[i](res);
+          }
+          res = augment(res);
+          return res;
+        };
+        remoteDataSource = { ...remoteDataSource, converter: pipeline };
+      } else if (typeof remoteDataSource.converter === 'function') {
+        const orig = remoteDataSource.converter;
+        const wrap = (args: any) => {
+          const res = orig(args);
+          return augment(res);
+        };
+        remoteDataSource = { ...remoteDataSource, converter: wrap };
+      }
+    }
     return {
       ...value,
       actionsRender,
+      remoteDataSource,
     };
   };
 
@@ -773,11 +881,59 @@ export default (props: any) => {
     // 优化一下 减少复杂度
     const titleMap = toMapByKey(value.columns, 'title');
     // 加上排序
-    const cols = showColumn.map((i) => ({
-      ...i,
-      isPermissionColumn: titleMap[renderToString(i.title)]?.isPermissionColumn,
-      render: titleMap[renderToString(i.title)]?.render,
-    }));
+    const hasFlowEntry = (typeof props.tradeType === 'number') && (() => {
+      try {
+        const raw = JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+        return !!raw.find((i: any) => i?.tradeType === props.tradeType);
+      } catch (e) { return false; }
+    })();
+    const hasControlRange = (typeof props.tradeType === 'number') && (() => {
+      try {
+        const raw = JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+        const entry = raw.find((i: any) => i?.tradeType === props.tradeType);
+        if (!entry) return false;
+        const ctrlSet = new Set((entry?.controlButtons || []).filter(Boolean));
+        return ctrlSet.size > 0;
+      } catch (e) { return false; }
+    })();
+    const toExpr = (v: any) => {
+      if (typeof v === 'string') return v.replace(/^#\{|\}$/g, '');
+      if (v === undefined) return 'true';
+      return v ? 'true' : 'false';
+    };
+    // 读取当前 tradeType 的控制范围，用于只在控制按钮上追加流程表达式
+    let ctrlSet: any = new Set();
+    if (hasFlowEntry) {
+      try {
+        const raw = JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+        const entry = raw.find((i: any) => i?.tradeType === props.tradeType);
+        if (entry) ctrlSet = new Set((entry?.controlButtons || []).filter(Boolean));
+      } catch (e) {}
+    }
+    const augmentPermissionRender = (arr: any[], set: Set<string>) => {
+      return arr.map((el: any) => {
+        const code = el?.code;
+        if (!code) return el;
+        // 非控制范围按钮不追加流程控制，保持原 visible
+        if (!set || set.size === 0 || !set.has(code)) return el;
+        const base = toExpr(el.visible);
+        const flow = `record.__flowAllowedMap['${code}'] == true`;
+        return { ...el, visible: `#{(${base}) && (${flow})}` };
+      });
+    };
+    const cols = showColumn.map((i) => {
+      const orig = titleMap[renderToString(i.title)] || {};
+      const origRender = orig.render;
+      const isPerm = orig.isPermissionColumn;
+      const newRender = (Array.isArray(origRender) && isPerm && hasFlowEntry && hasControlRange)
+        ? augmentPermissionRender(origRender, ctrlSet)
+        : origRender;
+      return {
+        ...i,
+        isPermissionColumn: isPerm,
+        render: newRender,
+      };
+    });
     cols.forEach((i) => handleBssulaColumnsSpecialParams(i));
     return cols;
   };
@@ -967,6 +1123,7 @@ export default (props: any) => {
       {/* 列设置弹出框表格 */}
       <SortableTable
         ref={sortTableRef}
+        disableColumnFixed={props.tableProps?.isVirtualTable}
         setShowColumns={setResizeShowColumns}
         showColumn={showColumn}
         setInitialTableInfo={setInitialTableInfo}

package/src/components/Business/BsSulaQueryTable/setting.tsx

@@ -288,6 +288,9 @@ class SortableTable extends React.Component {
       title: '列首',
       dataIndex: 'fixedLeft',
       render: (text, record) => {
+        if(this.props.disableColumnFixed) {
+          return null
+        }
         return (
           <span
             onClick={() => {
@@ -375,6 +378,9 @@ class SortableTable extends React.Component {
       title: '列尾',
       dataIndex: 'fixedRight',
       render: (text, record) => {
+        if(this.props.disableColumnFixed) {
+          return null
+        }
         return (
           <span
             onClick={() => {

package/src/components/Business/DetailPageWrapper/index.tsx

@@ -78,6 +78,8 @@ const DetailWrapper = React.memo(
     pathToRegexp,
     backHistoryPath,
     onBack,
+    tradeType,
+    fromStatus,
   }: any) => {
     const [isFullScreen, setIsFnllScreen]: any = useState(false);
     const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
@@ -195,6 +197,34 @@ const DetailWrapper = React.memo(
       }
     };
 
+    const getFlowButtons = () => {
+      try {
+        return JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+      } catch (e) { return []; }
+    };
+    const matchByRule = (ui: any, flow: any, ctx: any) => {
+      if (flow.tradeType !== ctx.tradeType) return false;
+      if (typeof ctx.status === 'number' && flow.fromStatus !== ctx.status) return false;
+      const uiCode = ui.code || ui.buttonCode || ui?.props?.code || ui?.props?.buttonCode;
+      if (!uiCode || !flow.buttonCode) return false;
+      return uiCode === flow.buttonCode;
+    };
+    const filterByFlowRules = (list: Array<any>, ctx: any) => {
+      const flowList = getFlowButtons();
+      if (!flowList?.length || typeof ctx.tradeType !== 'number') return list;
+      const entry = flowList.find((i: any) => i?.tradeType === ctx.tradeType);
+      if (!entry) return list;
+      const ctrlSet = new Set((entry?.controlButtons || []).filter(Boolean));
+      const statButtons = (entry?.config || []).find((c: any) => c?.fromStatus === ctx.status)?.buttons || [];
+      const allowedSet = new Set((statButtons || []).filter(Boolean).filter((b: any) => ctrlSet.size ? ctrlSet.has(b) : true));
+      return list.filter((ui) => {
+        const uiCode = ui.code || ui.buttonCode || ui?.props?.code || ui?.props?.buttonCode;
+        if (!uiCode) return true;
+        if (ctrlSet.size && !ctrlSet.has(uiCode)) return true; // 非流程控制按钮不处理
+        return allowedSet.has(uiCode);
+      });
+    };
+
     const renderPageActionList = (actionLists: Array<actionItem>) => {
       const authButton = localStorage.getItem(getMenuAuthDataKey())
       ? JSON.parse(localStorage.getItem(getMenuAuthDataKey()) as string)
@@ -202,9 +232,13 @@ const DetailWrapper = React.memo(
       let visibleActions = actionLists.filter(
         (action) =>
           ((action.visible && action.visible !== 'false') || judgeIsEmpty(action.visible)) &&
-          (!shouldUseAuth() || (judgeIsEmpty(action.code) || authButton.filter(item => item === action.code))),
+          (!shouldUseAuth() || (judgeIsEmpty(action.code) || authButton.some((item: any) => item === action.code))),
       );
 
+      if (typeof tradeType === 'number') {
+        visibleActions = filterByFlowRules(visibleActions, { tradeType, status: fromStatus });
+      }
+
       const renderButton = (item: actionItem, type?: any) => {
         return (
           <Button
@@ -348,3 +382,49 @@ const DetailWrapper = React.memo(
     return true;
   },
 );
+
+export const processDetailButtonsVisible = (buttons: any[], params: any) => {
+  const { tradeType, fromStatus } = params || {};
+  const getFlowButtons = () => {
+    try {
+      return JSON.parse(localStorage.getItem('BUSINESS_FLOW_BUTTONS') || '[]');
+    } catch (e) { return []; }
+  };
+  const evalVisible = (v: any, ctx: any) => {
+    if (typeof v === 'string') {
+      const expr = v.replace(/^#\{|\}$/g, '');
+      try {
+        const keys = Object.keys(ctx || {});
+        const vals = keys.map((k) => ctx[k]);
+        // eslint-disable-next-line no-new-func
+        return Function(...keys, `return (${expr});`)(...vals);
+      } catch (e) { return true; }
+    }
+    if (v === undefined) return true;
+    return !!v;
+  };
+  let ctrlSet: any = new Set();
+  let allowedSet: any = new Set();
+  if (typeof tradeType === 'number') {
+    const flowList = getFlowButtons();
+    const entry = flowList.find((i: any) => i?.tradeType === tradeType);
+    if (entry) {
+      ctrlSet = new Set((entry?.controlButtons || []).filter(Boolean));
+      const statButtons = (entry?.config || []).find((c: any) => c?.fromStatus === fromStatus)?.buttons || [];
+      allowedSet = new Set((statButtons || []).filter(Boolean).filter((b: any) => ctrlSet.size ? ctrlSet.has(b) : true));
+    }
+  }
+  const processed = (buttons || []).map((btn: any) => {
+    const visBase = evalVisible(btn?.visible, params);
+    let vis = visBase;
+    if (typeof tradeType === 'number' && ctrlSet && allowedSet && btn?.code) {
+      if (ctrlSet.size === 0 || !ctrlSet.has(btn.code)) {
+        vis = visBase;
+      } else {
+        vis = visBase && allowedSet.has(btn.code);
+      }
+    }
+    return { ...btn, visible: vis };
+  });
+  return processed;
+};

package/src/components/Business/DetailPageWrapper/readme.md

@@ -0,0 +1,89 @@
+# DetailPageWrapper 按钮过滤测试
+
+演示目标：验证详情页在仅传入 `tradeType` 与 `fromStatus` 时，按钮按本地基础数据源与资源 `code` 精确匹配过滤、并叠加权限过滤是否生效。
+
+## 使用步骤
+
+1. 初始化本地数据源与权限
+
+```tsx
+import React, { useEffect } from 'react';
+import DetailPageWrapper from './index.tsx';
+
+export default () => {
+  useEffect(() => {
+    // 开启权限过滤演示
+    // @ts-ignore
+    window.__POWERED_BY_WUJIE__ = true;
+
+    // 流程基础数据源（新结构示例）
+    const flowConfig = [
+      {
+        tradeType: 180,
+        controlButtons: ['Detail_Submit','Detail_Audit','Detail_ReAudit'],
+        config: [
+          { fromStatus: 1, buttons: ['Detail_Submit'] },
+          { fromStatus: 25, buttons: ['Detail_Audit'] },
+          { fromStatus: 26, buttons: ['Detail_ReAudit'] },
+        ],
+      },
+    ];
+    localStorage.setItem('BUSINESS_FLOW_BUTTONS', JSON.stringify(flowConfig));
+
+    // 菜单按钮授权（仅示例）
+    const authCodes = ['Detail_Submit', 'Detail_Audit', 'Detail_ReAudit'];
+    localStorage.setItem('menuAuth_mainProject', JSON.stringify(authCodes));
+  }, []);
+
+  const actionList = [
+    {
+      name: '提交',
+      code: 'Detail_Submit',
+      type: 'button',
+      action: () => console.log('提交'),
+    },
+    {
+      name: '审核',
+      code: 'Detail_Audit',
+      type: 'button',
+      action: () => console.log('审核'),
+    },
+    {
+      name: '反审核',
+      code: 'Detail_ReAudit',
+      type: 'button',
+      action: () => console.log('反审核'),
+    },
+  ];
+
+  return (
+    <DetailPageWrapper
+      title="详情页演示"
+      actionList={actionList}
+      tradeType={180}
+      fromStatus={1}
+    >
+      <div style={{ padding: 16 }}>这里是详情内容区域</div>
+    </DetailPageWrapper>
+  );
+};
+```
+
+2. 切换 `fromStatus` 验证按钮显示
+
+- `fromStatus=1`：显示 `Detail_Submit`
+- `fromStatus=25`：显示 `Detail_Audit`
+- `fromStatus=26`：显示 `Detail_ReAudit`
+
+3. 权限过滤验证
+
+- 从 `localStorage.menuAuth_mainProject` 移除某个 `code`，对应按钮不会显示
+
+## 说明
+
+- 详情页按钮显示条件：
+  - 资源 `code` 与 `BUSINESS_FLOW_BUTTONS.buttonCode` 完全一致
+  - `tradeType` 匹配
+  - `fromStatus` 匹配
+  - 权限启用且授权通过
+- 其余属性（`routes`、`pathToRegexp` 等）非必需，可按页面实际需要补充。