diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/EventFilterTableDemo.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/EventFilterTableDemo.tsx index 42d0809dab..ea5704b092 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/EventFilterTableDemo.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/EventFilterTableDemo.tsx @@ -327,7 +327,7 @@ eventFlowManager.addFlow({ // --- FilterFlow 定义 --- filterFlowManager.addFlow({ - name: 'tabulator:columns', + key: 'tabulator:columns', title: '表格列展示流程', steps: [ { @@ -416,7 +416,7 @@ const EventFilterTableDemo: React.FC = (props) => { [hooks, filterFlowParams], ); - const tableColumns = useApplyFilters(filterFlowManager, 'tabulator:columns', {}, filterContext); + const { columns: tableColumns } = useApplyFilters(filterFlowManager, 'tabulator:columns', null, filterContext); // 初始化和刷新数据 const refreshData = useCallback(async () => { diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/basic-filterflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/basic-filterflow.tsx index 5cd7ad9e2a..b8675322bb 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/basic-filterflow.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/basic-filterflow.tsx @@ -30,7 +30,7 @@ filterFlowManager.addFilter({ // 创建过滤器流 filterFlowManager.addFlow({ - name: 'basic-text-transform', + key: 'basic-text-transform', title: '基础文本转换', steps: [ { diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/conditional-filterflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/conditional-filterflow.tsx index 23deac4a02..c5671fa2d4 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/conditional-filterflow.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/conditional-filterflow.tsx @@ -1,5 +1,5 @@ -import { Button, Card, Input, Radio, Space, Typography } from 'antd'; -import React, { useMemo, useState } from 'react'; +import { Card, Input, Space, Typography } from 'antd'; +import React, { useState } from 'react'; import { FilterFlowManager, useApplyFilters } from '@nocobase/client'; // 创建FilterFlowManager实例 @@ -60,7 +60,7 @@ filterFlowManager.addFilter({ // 创建条件FilterFlow filterFlowManager.addFlow({ - name: 'conditional-text-transform', + key: 'conditional-text-transform', title: '条件文本转换', steps: [ { diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/configurable-filter.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/configurable-filter.tsx index cc48f6b248..c1173d8c42 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/configurable-filter.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/configurable-filter.tsx @@ -119,7 +119,7 @@ filterFlowManager.addFilter({ // 创建可配置FilterFlow filterFlowManager.addFlow({ - name: 'configurable-text-transform', + key: 'configurable-text-transform', title: '可配置文本转换', steps: [ { diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/data-transform-filterflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/data-transform-filterflow.tsx index 1b2e7e90ee..0a79e22dcc 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/data-transform-filterflow.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/data-transform-filterflow.tsx @@ -160,7 +160,7 @@ filterFlowManager.addFilter({ // 创建FilterFlow filterFlowManager.addFlow({ - name: 'data-transform-flow', + key: 'data-transform-flow', title: '数据转换流程', steps: [ { diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/hide-show-filterflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/hide-show-filterflow.tsx new file mode 100644 index 0000000000..ee458152c2 --- /dev/null +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/hide-show-filterflow.tsx @@ -0,0 +1,213 @@ +import { Card, Space, Typography, Input, Button, Form, Checkbox } from 'antd'; +import React, { useState, useEffect, useMemo } from 'react'; +import { FilterFlowManager, useApplyFilters } from '@nocobase/client'; + +// 创建过滤器管理器实例 +const filterFlowManager = new FilterFlowManager(); + +// 注册过滤器组 +filterFlowManager.addFilterGroup({ + name: 'visibilityControl', + title: '可见性控制', + sort: 1, +}); + +// 注册过滤器 +filterFlowManager.addFilter({ + name: 'showHideElements', + title: '显示/隐藏元素', + description: '根据条件控制 actions 和 fields 的可见性', + group: 'visibilityControl', + sort: 1, + uiSchema: { + showActions: { + type: 'array', + title: '显示的操作', + enum: [ + { label: 'Action 1', value: 'action1' }, + { label: 'Action 2', value: 'action2' }, + { label: 'Action 3', value: 'action3' }, + ], + default: ['action1', 'action2', 'action3'], + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox.Group', + }, + showFields: { + type: 'array', + title: '显示的字段', + enum: [ + { label: 'Field 1', value: 'field1' }, + { label: 'Field 2', value: 'field2' }, + { label: 'Field 3', value: 'field3' }, + ], + default: ['field1', 'field2', 'field3'], + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox.Group', + }, + }, + handler: (currentValue, params, context) => { + // 过滤器处理函数，返回应显示的元素配置 + return { + visibleActions: params.showActions || [], + visibleFields: params.showFields || [], + }; + }, +}); + +// 创建过滤器流 +filterFlowManager.addFlow({ + key: 'visibility-control', + title: '元素可见性控制', + steps: [ + { + key: 'show-hide-step', + filterName: 'showHideElements', + title: '控制元素可见性', + }, + ], +}); + +const HideShowFilterFlow = () => { + const [filterParams, setFilterParams] = useState({ + showActions: ['action1', 'action2', 'action3'], + showFields: ['field1', 'field2', 'field3'], + }); + const filterContext = useMemo(() => { + return { + meta: { + params: { + 'show-hide-step': filterParams, + }, + }, + }; + }, [filterParams]); + // 应用过滤器获取可见性配置 + const visibilityConfig = useApplyFilters(filterFlowManager, 'visibility-control', null, filterContext); + + // 渲染 Action 按钮 + const renderActions = () => { + const actions = [ + { key: 'action1', title: 'Action 1', color: '#1890ff' }, + { key: 'action2', title: 'Action 2', color: '#52c41a' }, + { key: 'action3', title: 'Action 3', color: '#faad14' }, + ]; + + return ( + + {actions.map((action) => ( + + ))} + + ); + }; + + // 渲染 Field 表单项 + const renderFields = () => { + const fields = [ + { key: 'field1', title: 'Field 1', placeholder: '请输入 Field 1' }, + { key: 'field2', title: 'Field 2', placeholder: '请输入 Field 2' }, + { key: 'field3', title: 'Field 3', placeholder: '请输入 Field 3' }, + ]; + + return ( +
+ {fields.map((field) => ( + + + + ))} +
+ ); + }; + + // 过滤器配置表单 + const handleVisibilityChange = (type, values) => { + setFilterParams((prev) => ({ + ...prev, + [type]: values, + })); + }; + + return ( +
+ 显示/隐藏元素过滤器演示 + + 这个示例展示了如何使用过滤器配置来控制界面元素（actions 和 fields）的可见性。 + + + + +
+ 显示的操作: +
+ handleVisibilityChange('showActions', values)} + /> +
+
+ +
+ 显示的字段: +
+ handleVisibilityChange('showFields', values)} + /> +
+
+ + + + + +
+ 操作按钮: +
{renderActions()}
+
+ +
+ 表单字段: +
{renderFields()}
+
+ + + + + +
+ visibilityConfig: + 
{JSON.stringify(visibilityConfig, null, 2)}
+
+ + +
+ ); +}; + +export default HideShowFilterFlow; diff --git a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/multi-step-filterflow.tsx b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/multi-step-filterflow.tsx index d20b924252..ad6987f8c1 100644 --- a/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/multi-step-filterflow.tsx +++ b/packages/core/client/docs/zh-CN/core/event-and-filter/demos/filters/multi-step-filterflow.tsx @@ -84,7 +84,7 @@ filterFlowManager.addFilter({ // 创建多步骤FilterFlow filterFlowManager.addFlow({ - name: 'multi-step-text-transform', + key: 'multi-step-text-transform', title: '多步骤文本转换', steps: [ { diff --git a/packages/core/client/src/eventflow/types.ts b/packages/core/client/src/eventflow/types.ts index 78b5cfc943..14cf9956c4 100644 --- a/packages/core/client/src/eventflow/types.ts +++ b/packages/core/client/src/eventflow/types.ts @@ -26,14 +26,12 @@ export interface EventContext { userId?: string; event?: string | string[]; // 事件名称， 一个事件是可以触发多个eventflow的，与filterflow不同 [key: string]: any; - // params?: Record>; eventParams?: { flow?: string; params?: Record>; }[]; actionParams?: { flow?: string; - event?: string; params?: Record>; }[]; }; diff --git a/packages/core/client/src/filterflow/filterflow-manager.ts b/packages/core/client/src/filterflow/filterflow-manager.ts index 37e4bb6d7b..e38a1b7062 100644 --- a/packages/core/client/src/filterflow/filterflow-manager.ts +++ b/packages/core/client/src/filterflow/filterflow-manager.ts @@ -108,8 +108,8 @@ export class FilterFlow { delete this.options.steps; } - get name() { - return this.options.name; + get key() { + return this.options.key; } get title() { @@ -176,7 +176,7 @@ export class FilterFlow { } async remove() { - this.filterFlowManager.removeFlow(this.name); + this.filterFlowManager.removeFlow(this.key); } setFilterFlowManager(filterFlowManager: FilterFlowManager) { @@ -285,16 +285,16 @@ export class FilterFlowManager { flowInstance = flowOptions; flowInstance.setFilterFlowManager(this); } else { - if (!flowOptions.name) { - throw new Error('FilterFlowOptions must have a name.'); + if (!flowOptions.key) { + throw new Error('FilterFlowOptions must have a key.'); } flowInstance = new FilterFlow(flowOptions, this); } - if (this.filterFlows.has(flowInstance.name)) { - console.warn(`FilterFlow with name "${flowInstance.name}" is being overwritten.`); + if (this.filterFlows.has(flowInstance.key)) { + console.warn(`FilterFlow with key "${flowInstance.key}" is being overwritten.`); } - this.filterFlows.set(flowInstance.name, flowInstance); + this.filterFlows.set(flowInstance.key, flowInstance); return flowInstance; } @@ -371,8 +371,7 @@ export class FilterFlowManager { context = context || {}; if (!context.meta) { context.meta = { - flowKey, - flowName: flow.name, + flowKey: flow.key, }; } diff --git a/packages/core/client/src/filterflow/hooks.tsx b/packages/core/client/src/filterflow/hooks.tsx index 54dd908a99..47c15ff72a 100644 --- a/packages/core/client/src/filterflow/hooks.tsx +++ b/packages/core/client/src/filterflow/hooks.tsx @@ -39,14 +39,15 @@ export function useApplyFilters( useEffect(() => { if (prevValue.current !== initialValue) { - setTimeout(async () => { + const refreshData = async () => { const cachedEntry = filterCache.get(cacheKey); if (cachedEntry?.status === 'resolved') { const newData = await filterFlowManager.applyFilters(flowName, initialValue, context); filterCache.set(cacheKey, { status: 'resolved', data: newData, promise: Promise.resolve(newData) }); forceUpdate((prev) => prev + 1); } - }, 0); + }; + refreshData(); prevValue.current = initialValue; } }, [initialValue]); diff --git a/packages/core/client/src/filterflow/types.ts b/packages/core/client/src/filterflow/types.ts index 75c90b32a5..0e364c0bd7 100644 --- a/packages/core/client/src/filterflow/types.ts +++ b/packages/core/client/src/filterflow/types.ts @@ -15,10 +15,12 @@ export type FilterHandlerContext = { meta?: { flowKey?: string; flowName?: string; - params?: Record>; + params?: FilterStepParams; }; }; +export type FilterStepParams = Record>; + export type FilterHandler = ( currentValue: any, params?: Record, @@ -45,7 +47,7 @@ export interface FilterFlowStepOptions { condition?: string; } export interface FilterFlowOptions { - name: string; + key: string; title: string; steps: FilterFlowStepOptions[]; }