feat: add wp Integration

apps/web/src/plugin/components/index.ts

@@ -7,3 +7,4 @@ export { default as ChartTimeSelect } from './chart-time-select';
 export { default as entitySelect } from './entity-select';
 export { default as chartMetricsSelect } from './chart-metrics-select';
 export { default as multiEntitySelect } from './multi-entity-select';
+export { default as meetingRoom } from './switch';

apps/web/src/plugin/components/meeting-room/config.json

@@ -0,0 +1,70 @@
+{
+    "type": "meetingRoom",
+    "name": "Meeting Room",
+    "class": "meeting_room",
+    "icon": "./icon.png",
+    "defaultRow": 3,
+    "defaultCol": 5,
+    "minRow": 2,
+    "minCol": 4,
+    "configProps": [
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "entitySelect",
+                    "title": "Entity",
+                    "key": "entity",
+                    "style": "width: 100%",
+                    "componentProps": {
+                        "size": "small",
+                        "entityType": ["PROPERTY"],
+                        "entityValueTypes": ["STRING", "LONG", "DOUBLE", "BOOLEAN"]
+                    },
+                    "rules": {
+                        "required": true
+                    }
+                }
+            ]
+        },
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "input",
+                    "title": "Label",
+                    "key": "title",
+                    "style": "width: 100%",
+                    "defaultValue": "Label",
+                    "componentProps": {
+                        "size": "small",
+                        "inputProps": {
+                            "maxLength": 15
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    "view": [
+        {
+            "tag": "div",
+            "themes": {
+                "default": {
+                    "class": "data-view__container"
+                }
+            },
+            "children": [
+                {
+                    "tag": "span",
+                    "themes": {
+                        "default": {
+                            "class": "data-view__content"
+                        }
+                    },
+                    "params": ["entity"]
+                }
+            ]
+        }
+    ]
+}

apps/web/src/plugin/components/meeting-room/configure/index.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { RenderConfig } from '../../../render';
+import { useConnect } from '../runtime';
+import type { ConfigureType, ViewConfigProps } from '../typings';
+
+interface ConfigPluginProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+    onOk: (data: ViewConfigProps) => void;
+    onChange: (data: ViewConfigProps) => void;
+}
+const Plugin = forwardRef((props: ConfigPluginProps, ref: any) => {
+    const { value, config, onOk, onChange } = props;
+    const { configure, handleChange } = useConnect({ value, config, onChange });
+
+    return (
+        <RenderConfig
+            value={value}
+            config={configure}
+            ref={ref}
+            onOk={onOk}
+            onChange={handleChange}
+        />
+    );
+});
+
+export default Plugin;

apps/web/src/plugin/components/meeting-room/runtime/action/index.tsx

@@ -0,0 +1,15 @@
+import { useTrigger } from './useTrigger';
+import type { ViewConfigProps, ConfigureType } from '../../typings';
+
+interface IProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+    onChange: (data: ViewConfigProps) => void;
+}
+export const useAction = ({ onChange }: IProps) => {
+    const { handleChange } = useTrigger({ onChange });
+
+    return {
+        handleChange,
+    };
+};

apps/web/src/plugin/components/meeting-room/runtime/action/useTrigger.tsx

@@ -0,0 +1,29 @@
+// import { useRef } from 'react';
+import type { ViewConfigProps } from '../../typings';
+
+interface IProps {
+    onChange: (data: ViewConfigProps) => void;
+}
+export const useTrigger = ({ onChange }: IProps) => {
+    // const prevStateRef = useRef<ViewConfigProps>();
+
+    const handleChange = (value: ViewConfigProps) => {
+        // const { entity } = value || {};
+        // const { value: entityValue, rawData } = entity || {};
+        // const prevEntityValue = prevStateRef.current?.entity?.value;
+
+        // // 如果实体变化时，更新title为当前选中实体名称
+        // if (prevEntityValue !== entityValue) {
+        //     // 当前选中实体
+        //     const { entityName } = rawData || {};
+        //     entityName && (value.title = entityName);
+        // }
+
+        // prevStateRef.current = value;
+        onChange(value);
+    };
+
+    return {
+        handleChange,
+    };
+};

apps/web/src/plugin/components/meeting-room/runtime/index.tsx

@@ -0,0 +1,18 @@
+import { useAction } from './action';
+import { useReducer } from './reducer';
+import type { ConfigureType, ViewConfigProps } from '../typings';
+
+interface IProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+    onChange: (data: ViewConfigProps) => void;
+}
+export const useConnect = ({ value, config, onChange }: IProps) => {
+    const { handleChange } = useAction({ value, config, onChange });
+    const { configure } = useReducer({ value, config });
+
+    return {
+        configure,
+        handleChange,
+    };
+};

apps/web/src/plugin/components/meeting-room/runtime/reducer/index.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { cloneDeep } from 'lodash-es';
+import { useDynamic } from './useDynamic';
+import type { ConfigureType, ViewConfigProps } from '../../typings';
+
+interface IProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+}
+export const useReducer = ({ value, config }: IProps) => {
+    const { updateDynamicForm } = useDynamic();
+
+    // /** config实时保存value */
+    // const updateConfigState = (value: ViewConfigProps, config: ConfigureType) => {
+    //     config.config = value || {};
+
+    //     return config;
+    // };
+
+    /** 生成新的configure */
+    const configure = useMemo(() => {
+        // 按顺序执行回调，返回最新的configure
+        const ChainCallList = [updateDynamicForm];
+
+        const newConfig = ChainCallList.reduce((config, fn) => {
+            return fn(value, cloneDeep(config));
+        }, config);
+
+        return { ...newConfig };
+    }, [value, config]);
+
+    return {
+        configure,
+    };
+};

apps/web/src/plugin/components/meeting-room/runtime/reducer/useDynamic.tsx

@@ -0,0 +1,79 @@
+import type { ConfigureType, ViewConfigProps } from '../../typings';
+
+export const useDynamic = () => {
+    /**
+     * 动态生成的每一项表单
+     */
+    const generateFormItem = (title: string, index: string, value: Record<string, any>) => {
+        return {
+            $$type: 'dynamic',
+            title,
+            style: 'display: flex;margin-bottom: 20px;',
+            components: [
+                {
+                    type: 'iconSelect',
+                    key: `Icon_${index}`,
+                    style: 'flex: 1;padding-right: 12px;',
+                    defaultValue: value[`Icon_${index}`] || undefined,
+                    componentProps: {
+                        size: 'small',
+                    },
+                },
+                {
+                    type: 'iconColorSelect',
+                    key: `IconColor_${index}`,
+                    style: 'flex: 1;',
+                    defaultValue: value[`IconColor_${index}`] || undefined,
+                    componentProps: {
+                        size: 'small',
+                    },
+                },
+            ],
+        };
+    };
+
+    /**
+     * 生成动态configure逻辑
+     */
+    const dynamicConfigure = (
+        currentEntity: Required<EntityOptionType>['rawData'],
+        value: Record<string, any>,
+    ) => {
+        const { entityValueAttribute, entityId } = currentEntity || {};
+        const { enum: enumStruct } = entityValueAttribute || {};
+
+        // 非枚举类型
+        if (!enumStruct) return [generateFormItem(`Appearance`, entityId?.toString(), value)];
+
+        // 枚举类型
+        return Object.keys(enumStruct || {}).map(enumKey => {
+            const enumValue = enumStruct[enumKey];
+            return generateFormItem(`Appearance of ${enumValue}`, enumKey, value);
+        });
+    };
+
+    /** 动态渲染表单 */
+    const updateDynamicForm = (value: ViewConfigProps, config: ConfigureType) => {
+        const { entity } = value || {};
+        // 获取当前选中实体
+        const { rawData: currentEntity } = entity || {};
+        if (!currentEntity) return config;
+
+        // 渲染动态表单
+        const result = dynamicConfigure(currentEntity, value);
+        if (!result) return config;
+
+        // 动态渲染表单
+        const { configProps } = config || {};
+        const newConfigProps = [
+            ...configProps.filter((item: any) => item.$$type !== 'dynamic'),
+            ...result,
+        ];
+        config.configProps = newConfigProps;
+        return config;
+    };
+
+    return {
+        updateDynamicForm,
+    };
+};

apps/web/src/plugin/components/meeting-room/typings.d.ts

@@ -0,0 +1,7 @@
+export interface ViewConfigProps {
+    title: string;
+    entity: EntityOptionType;
+    [key: string]: string;
+}
+
+export type ConfigureType = any;

apps/web/src/plugin/components/meeting-room/view/hooks/index.tsx

@@ -0,0 +1 @@
+export { useSource } from './useSource';

apps/web/src/plugin/components/meeting-room/view/hooks/useSource.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useMemo } from 'react';
+import { useRequest } from 'ahooks';
+import ws, { getExChangeTopic } from '@/services/ws';
+import { awaitWrap, entityAPI, getResponseData, isRequestSuccess } from '@/services/http';
+import type { ViewConfigProps } from '../../typings';
+
+interface IProps {
+    entity: ViewConfigProps['entity'];
+}
+export const useSource = (props: IProps) => {
+    const { entity } = props;
+
+    const { data: entityStatusValue, runAsync: getEntityStatusValue } = useRequest(
+        async () => {
+            if (!entity) return;
+            const { value } = entity || {};
+
+            const [error, resp] = await awaitWrap(entityAPI.getEntityStatus({ id: value }));
+            if (error || !isRequestSuccess(resp)) return;
+
+            return getResponseData(resp)?.value;
+        },
+        { manual: true },
+    );
+    useEffect(() => {
+        getEntityStatusValue();
+    }, [entity]);
+
+    const topic = useMemo(() => {
+        const entityKey = entity?.rawData?.entityKey?.toString();
+        return entityKey && getExChangeTopic(entityKey);
+    }, [entity]);
+    // 订阅 WS 主题
+    useEffect(() => {
+        if (!topic) return;
+
+        return ws.subscribe(topic, getEntityStatusValue);
+    }, [topic]);
+
+    return {
+        entityStatusValue,
+    };
+};