商家营销工具架构升级总结

import { MicroModule } from '@ice/stark-module';
// 路由与为模块的映射const MPathToModuleBaseInfo = {  '/工具A/home': { name: '工具A-home-module', url: 'https://xxx.xxx.xxx' },  '/工具A/create': { name: '工具A-create-module', url: 'https://xxx.xxx.xxx' },  ...}
// 页面主应用页面export default function App() {  const [state, setState] = useState(1);  // 页面上下文  const pageContext = useMemo(() => ({ setState }), []);
  return (    ...    // 渲染微模块          moduleInfo={MPathToModuleBaseInfo[location.pathname]}      // 将上下文作为 prop 注入进微模块      pageContext={pageContext}    />;    ...   )}

export default function Module(props) {  // 获取上下文  const { pageContext } = props || {};
  const handleClick = () => {    // 与页面容器做数据通信    pageContext.setState((preState: number) => preState + 1);  }
  // 渲染业务定制模块  return (button onClick={handleClick}>state + 1button>);}

// 路由与为插件资源的映射const MPathToPluginInfo = {  '/工具A/home': { url: 'https://xxx.xxx.xxx' },  ...}// 核心系统export default function CoreApp() {  const [tabList, setTabList] = useState([]);
  // 插件API生成  const pluginApi = useMemo(() => {    return {      tabs: {        add: setTabList;      },    }  }, []);
  // 加载并运行插件  const pluginResult = useMemo(() => {    const plugin = registerPlugin(MPathToPluginInfo[location.pathname]);    plugin(pluginApi);  }, []);
  // 核心系统内部渲染 Tab List 的逻辑  return (    Tab>      {        tabList.map((tab) => (          Tab.Item key={tab.key} title={tab.title}>{tab.content}Tab.Item>        ))      }    Tab>  )}

function Content() {  return div>contentdiv>}
export default function plugin(api) {  // 使用 api 对核心系统进行定制  api.tabs.add((preState) => (    [...preState, { key: 'demo', title: '标题', content: Content /> }]  ))}

import Entry from './components/Entry';import Header from './components/Header';
// 预设的本地区块const MPresetNameToComponent = {  'home-entry': Entry,  'home-header': Header,}
const pageConfigs = [  { name: 'home-header', type: 'preSetComponent' },  { name: 'home-entry', type: 'preSetComponent' },  {    name: 'home-table-layout',    type: 'microModule',    moduleInfo: {      ...    },  },]
export default function App() {  const pageContext = useMemo(() => {}, []);    // 解析协议，渲染模块  const renderModule = (config) => {    const { name, type, moduleInfo } = config || {};      if (type === 'preSetComponent') {      const Component = MPresetNameToComponent[name];      if (Component) {        return       }    }      if (type === 'microModule') {      return (              )    }
    return null;  }    return pageConfigs.map((config) => renderModule(config));}

// 添加Tab1api.appendItem({ extensionId: EExtensionId.xx, title: 'xxx', type: 'table' });// 添加Tab2api.appendItem({ extensionId: EExtensionId.xx, title: 'xxx', type: 'table' });

ExtensibleTable.modifyFilter(() => {  return (form) => {    // form 为核心系统中注入的表单实例        return {      // 表单项1      A: {        type: 'string',        'x-decorator': 'FormItem',        'x-component': 'Input',        'x-component-props': {          placeholder: 'A',        }      },      // 表单项2      B: {        type: 'number',        'x-decorator': 'FormItem',        'x-component': 'Select',        enum: [          { label: 'xxxx', value: 0 },        ],        'x-component-props': {          placeholder: 'B',          hasClear: true,        }      },    }  }})

const listXXX = () => {  return fetch('https://xxx.xxx.xxx')}
ExtensibleTable.modifyActions((columns, ctx) => {  return {    search: {      // 声明列表接口      request: ({ current, pageSize, filterValue }) => {        // filterValue 中每个 key 和声明的表单项一一对应        return listXXX({ current, pageSize, filterValue });      }  }});

  ExtensibleTable.modifyColumns((columns, ctx) => {    return [      // 活动信息模型 AA，对应字段 A、B、C      { title: '活动', 'x-component': 'AA', width: 180 },      // 活动状态模型 BB，对应字段 D      { title: '活动状态', 'x-component': 'BB', width: 90 },      // 活动时间模型 CC，对应字段 E、F、G      { title: '活动时间', 'x-component': 'CC', width: 180 },      {        title: 'xx',        dataIndex: 'xx',        cell: (value, index, record) => {          // 该工具独有的单元格，自定义渲染        },        width: 240,      },      // 操作列数据模型 TT，对应字段 H      {        title: '操作',        width: 150,        'x-component': 'TT',        'x-component-props': { maxCol: 3, maxRow: 5 },      },    ];  });

ExtensibleTable.modifyRowActions((columns, ctx) => { return {   // 自定义交互   custom: (option, rowData, tableContext) => {     // 操作的业务类型为 A 时，对应的交互     if (option.type === 'A') {        // do things     }
     // 操作类型为 B 时，对应的交互     if (option.type === 'B') {        // do things     }   },   // 二次确认交互   doubleCheck: (option, rowData) => {     let message = '';          // 不同业务类型对应不同的提示文案     if (option?.type === 'C') { message = 'CCC'; };     if (option?.type === 'D') { message = 'DDD'; };          return {       message,       onConfirm: () => {         // 操作类型为 E，点击确认时要调用的接口         if (option.type === 'E') {           return fetch(params)             .then(() => {               Message.success('成功');             });         }                  if (option.type === 'F') {           return fetch(params)             .then(() => {               Message.success('成功');             })         }      },    }  },  // 导出文件交互  export: (option, rowData) => {    let type = '';    if (option?.type === 'G') type = 'GGG';    if (option?.type === 'H') type = 'HHH';    // 声明导出文件的业务参数，无需封装接口调用方法    return {      params: {        type,      }    }  },  }});