aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/lowcode-components/base-tabs/index.tsx

@@ -1,184 +1,184 @@
-
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
-import { Button, Space } from "antd";
-import HydrocarbonService from "../../tmpl/hcservice-v3";
-import ProgramConfig from "../../units";
-import LowcodeConstant from "../assets/lowcode-constant";
-import { useLocale } from "../../locale/useLocale";
-import './index.less';
-
-const { serverKey, sourceId } = LowcodeConstant.fileUpload;
-
-// 处理背景图片地址
-const handleImgUrl = (basePath: string) => {
-    if (!basePath) {
-        return "";
-    }
-    if (basePath.startsWith("http")) {
-        return basePath;
-    }
-    const url = encodeURI(ProgramConfig.joinPath(
-        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
-        basePath
-    )) +
-        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
-    return url;
-}
-
-const iterateLayerLink = (layerHeader: string, res: string[], layerConfigs: any) => {
-    let layer: ILayerItem = layerConfigs[layerHeader];
-    if (layer) {
-        res.push(layer.id);
-        if (layer.childHeader)
-            iterateLayerLink(layer.childHeader, res, layerConfigs);
-        let nextLayer = layerConfigs[layer.next];
-        while (nextLayer) {
-            if (nextLayer.childHeader)
-                iterateLayerLink(nextLayer.childHeader, res, layerConfigs);
-            res.push(nextLayer.id);
-            nextLayer = layerConfigs[nextLayer.next];
-        }
-    }
-}
-
-const findAllChildLayer = (groupIds: string[], hasSelf: boolean = true, layerConfigs: any): string[] => {
-    let layerIdArr: string[] = [];
-    groupIds.forEach((id) => {
-        layerIdArr.push(id);
-        let layer: ILayerItem = layerConfigs[id];
-        if (layer.childHeader)
-            iterateLayerLink(layer.childHeader, layerIdArr, layerConfigs);
-    });
-    if (!hasSelf)
-        layerIdArr = layerIdArr.filter((id) => !groupIds.includes(id));
-    return [...new Set(layerIdArr)];
-}
-
-// 控制组件显隐
-const handleCompsHide = (ids: string[], type: string) => {
-    if (!ids || ids.length === 0) return;
-    // @ts-ignore
-    const { layerConfigs, updateLayer } = window.LC_VIEW?.layerManager || {};
-    const toBeUpdate = ids.map((id: string) => {
-        const item = layerConfigs[id];
-        const hide = type === "show" ? false : true;
-        if (item.type === "group") {
-            const childLayerIds = findAllChildLayer([item.id], true, layerConfigs);
-            return childLayerIds.map(id => ({ ...layerConfigs[id], hide }));
-        }
-        return [{ ...item, hide }];
-    }).flat();
-    // eslint-disable-next-line no-unused-expressions
-    updateLayer?.(toBeUpdate);
-}
-
-interface ILayerItem {
-    id?: string | undefined;
-    hide?: boolean;
-    childHeader?: string;
-    next?: string;
-}
-
-interface ItemStyle {
-    backgroundColor?: string;
-    backgroundImage?: string;
-    color?: string;
-    fontSize?: string;
-    localImgCode?: string;
-}
-
-export interface ComponentStyle {
-    items?: { text: string, compsIds: string[] }[]; // 标签项
-    size?: number; // 间距大小
-    direction?: "vertical" | "horizontal"; // 间距方向
-    defaultActiveKey?: string; // 默认选中项
-    defaultStyle?: ItemStyle; // 默认样式
-    activeStyle?: ItemStyle; // 选中样式
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    isDesignMode?: boolean; // 是否编辑模式
-}
-
-export interface ComponentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-}
-
-const ButtonComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, isDesignMode } = props;
-    const [config, setConfig] = useState<ComponentStyle>(style || {});
-    const [activeKey, setActiveKey] = useState<string>(style.defaultActiveKey);
-    const [defaultStyle, setDefaultStyle] = useState<ItemStyle>({ ...style.defaultStyle });
-    const [activeStyle, setActiveStyle] = useState<ItemStyle>({ ...style.activeStyle });
-    const [localImgDel, setLocalImgDel] = useState<{ active: boolean, default: boolean }>({ active: false, default: false });
-    const { translate } = useLocale();
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => { // 组件更新配置
-            const { style } = newConfig;
-            setConfig({ ...(style || {}) });
-            setActiveKey(style.defaultActiveKey);
-            setActiveStyle({ ...style.activeStyle });
-            setDefaultStyle({ ...style.defaultStyle });
-            const activeItem = style.items.find((r, index) => `key${index}` === style.defaultActiveKey);
-            onClick({ ...activeItem, key: style.defaultActiveKey });
-        },
-    }));
-
-    const onClick = (item) => {
-        setActiveKey(item.key);
-        const showCompsIds = item.compsIds;
-        const hideCompsIds = style.items.filter((r, index) => `key${index}` !== item.key).map(r => r.compsIds).flat().filter(Boolean);
-        handleCompsHide(showCompsIds, "show");
-        handleCompsHide(hideCompsIds, "hide");
-    };
-
-    const activeBackgroundImage = useMemo(() => handleImgUrl(activeStyle?.backgroundImage), [activeStyle]);
-    const defaultBackgroundImage = useMemo(() => handleImgUrl(defaultStyle?.backgroundImage), [defaultStyle]);
-
-    //  编辑页判断本地图片是否存在
-    const handleDesignModeLocalImg = async (type: "active" | "default") => {
-        const localImgCode = type === "active" ? activeStyle.localImgCode : defaultStyle.localImgCode;
-        if (!localImgCode) {
-            setLocalImgDel(val => ({ ...val, [type]: false }));
-            return;
-        }
-        const { entity } = await HydrocarbonService.requestDtmplConfig(serverKey, sourceId, localImgCode);
-        setLocalImgDel(val => ({ ...val, [type]: !entity }));
-    }
-
-    useEffect(() => {
-        if (isDesignMode) {
-            handleDesignModeLocalImg("active");
-            handleDesignModeLocalImg("default");
-        }
-    }, [activeStyle, defaultStyle]);
-
-    return (
-        <Space className='base-tabs' size={config.size} direction={config.direction} style={{ width: "100%", height: "100%" }}>
-            {config.items?.map((item, index) => <Button
-                key={`key${index}`}
-                className='tabs-item'
-                style={
-                    activeKey === `key${index}` ?
-                        {
-                            ...activeStyle,
-                            backgroundColor: activeBackgroundImage ? "transparent" : activeStyle.backgroundColor,
-                            backgroundImage: `url(${activeBackgroundImage})`,
-                        } : {
-                            ...defaultStyle,
-                            backgroundColor: defaultBackgroundImage ? "transparent" : defaultStyle.backgroundColor,
-                            backgroundImage: `url(${defaultBackgroundImage})`,
-                        }
-                }
-                onClick={() => onClick({ ...item, key: `key${index}` })}
-            >
-                {isDesignMode && (activeKey === `key${index}` ? localImgDel.active : localImgDel.default) ? <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.5)", display: "flex", justifyContent: "center", alignItems: "center", color: "red" }}>背景图片已删除，请重新上传</div> : null}
-                {item.text ? translate("${" + item.text + "}") : ""}
-            </Button>)}
-        </Space>
-    );
-});
-
+
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
+import { Button, Space } from "antd";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import ProgramConfig from "../../units";
+import LowcodeConstant from "../assets/lowcode-constant";
+import { useLocale } from "../../locale/useLocale";
+import './index.less';
+
+const { serverKey, sourceId } = LowcodeConstant.fileUpload;
+
+// 处理背景图片地址
+const handleImgUrl = (basePath: string) => {
+    if (!basePath) {
+        return "";
+    }
+    if (basePath.startsWith("http")) {
+        return basePath;
+    }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        basePath
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
+    return url;
+}
+
+const iterateLayerLink = (layerHeader: string, res: string[], layerConfigs: any) => {
+    let layer: ILayerItem = layerConfigs[layerHeader];
+    if (layer) {
+        res.push(layer.id);
+        if (layer.childHeader)
+            iterateLayerLink(layer.childHeader, res, layerConfigs);
+        let nextLayer = layerConfigs[layer.next];
+        while (nextLayer) {
+            if (nextLayer.childHeader)
+                iterateLayerLink(nextLayer.childHeader, res, layerConfigs);
+            res.push(nextLayer.id);
+            nextLayer = layerConfigs[nextLayer.next];
+        }
+    }
+}
+
+const findAllChildLayer = (groupIds: string[], hasSelf: boolean = true, layerConfigs: any): string[] => {
+    let layerIdArr: string[] = [];
+    groupIds.forEach((id) => {
+        layerIdArr.push(id);
+        let layer: ILayerItem = layerConfigs[id];
+        if (layer.childHeader)
+            iterateLayerLink(layer.childHeader, layerIdArr, layerConfigs);
+    });
+    if (!hasSelf)
+        layerIdArr = layerIdArr.filter((id) => !groupIds.includes(id));
+    return [...new Set(layerIdArr)];
+}
+
+// 控制组件显隐
+const handleCompsHide = (ids: string[], type: string) => {
+    if (!ids || ids.length === 0) return;
+    // @ts-ignore
+    const { layerConfigs, updateLayer } = window.LC_VIEW?.layerManager || {};
+    const toBeUpdate = ids.map((id: string) => {
+        const item = layerConfigs[id];
+        const hide = type === "show" ? false : true;
+        if (item.type === "group") {
+            const childLayerIds = findAllChildLayer([item.id], true, layerConfigs);
+            return childLayerIds.map(id => ({ ...layerConfigs[id], hide }));
+        }
+        return [{ ...item, hide }];
+    }).flat();
+    // eslint-disable-next-line no-unused-expressions
+    updateLayer?.(toBeUpdate);
+}
+
+interface ILayerItem {
+    id?: string | undefined;
+    hide?: boolean;
+    childHeader?: string;
+    next?: string;
+}
+
+interface ItemStyle {
+    backgroundColor?: string;
+    backgroundImage?: string;
+    color?: string;
+    fontSize?: string;
+    localImgCode?: string;
+}
+
+export interface ComponentStyle {
+    items?: { text: string, compsIds: string[] }[]; // 标签项
+    size?: number; // 间距大小
+    direction?: "vertical" | "horizontal"; // 间距方向
+    defaultActiveKey?: string; // 默认选中项
+    defaultStyle?: ItemStyle; // 默认样式
+    activeStyle?: ItemStyle; // 选中样式
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+}
+
+const ButtonComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [activeKey, setActiveKey] = useState<string>(style.defaultActiveKey);
+    const [defaultStyle, setDefaultStyle] = useState<ItemStyle>({ ...style.defaultStyle });
+    const [activeStyle, setActiveStyle] = useState<ItemStyle>({ ...style.activeStyle });
+    const [localImgDel, setLocalImgDel] = useState<{ active: boolean, default: boolean }>({ active: false, default: false });
+    const { translate } = useLocale();
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => { // 组件更新配置
+            const { style } = newConfig;
+            setConfig({ ...(style || {}) });
+            setActiveKey(style.defaultActiveKey);
+            setActiveStyle({ ...style.activeStyle });
+            setDefaultStyle({ ...style.defaultStyle });
+            const activeItem = style.items.find((r, index) => `key${index}` === style.defaultActiveKey);
+            onClick({ ...activeItem, key: style.defaultActiveKey });
+        },
+    }));
+
+    const onClick = (item) => {
+        setActiveKey(item.key);
+        const showCompsIds = item.compsIds;
+        const hideCompsIds = style.items.filter((r, index) => `key${index}` !== item.key).map(r => r.compsIds).flat().filter(Boolean);
+        handleCompsHide(showCompsIds, "show");
+        handleCompsHide(hideCompsIds, "hide");
+    };
+
+    const activeBackgroundImage = useMemo(() => handleImgUrl(activeStyle?.backgroundImage), [activeStyle]);
+    const defaultBackgroundImage = useMemo(() => handleImgUrl(defaultStyle?.backgroundImage), [defaultStyle]);
+
+    //  编辑页判断本地图片是否存在
+    const handleDesignModeLocalImg = async (type: "active" | "default") => {
+        const localImgCode = type === "active" ? activeStyle.localImgCode : defaultStyle.localImgCode;
+        if (!localImgCode) {
+            setLocalImgDel(val => ({ ...val, [type]: false }));
+            return;
+        }
+        const { entity } = await HydrocarbonService.requestDtmplConfig(serverKey, sourceId, localImgCode);
+        setLocalImgDel(val => ({ ...val, [type]: !entity }));
+    }
+
+    useEffect(() => {
+        if (isDesignMode) {
+            handleDesignModeLocalImg("active");
+            handleDesignModeLocalImg("default");
+        }
+    }, [activeStyle, defaultStyle]);
+
+    return (
+        <Space className='base-tabs' size={config.size} direction={config.direction} style={{ width: "100%", height: "100%" }}>
+            {config.items?.map((item, index) => <Button
+                key={`key${index}`}
+                className='tabs-item'
+                style={
+                    activeKey === `key${index}` ?
+                        {
+                            ...activeStyle,
+                            backgroundColor: activeBackgroundImage ? "transparent" : activeStyle.backgroundColor,
+                            backgroundImage: `url(${activeBackgroundImage})`,
+                        } : {
+                            ...defaultStyle,
+                            backgroundColor: defaultBackgroundImage ? "transparent" : defaultStyle.backgroundColor,
+                            backgroundImage: `url(${defaultBackgroundImage})`,
+                        }
+                }
+                onClick={() => onClick({ ...item, key: `key${index}` })}
+            >
+                {isDesignMode && (activeKey === `key${index}` ? localImgDel.active : localImgDel.default) ? <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.5)", display: "flex", justifyContent: "center", alignItems: "center", color: "red" }}>背景图片已删除，请重新上传</div> : null}
+                {item.text ? translate("${" + item.text + "}") : ""}
+            </Button>)}
+        </Space>
+    );
+});
+
 export default ButtonComponent;

package/src/aldehyde/lowcode-components/base-text/index.tsx

@@ -1,59 +1,59 @@
-
-import React, {
-    CSSProperties,
-    ForwardedRef,
-    forwardRef,
-    useImperativeHandle,
-    useState
-} from 'react';
-import { useLocale } from "../../locale/useLocale";
-import './index.less';
-
-export interface BaseTextComponentStyle {
-    color?: string;
-    fontSize?: number;
-    fontWeight?: number;
-    fontFamily?: string;
-    alignItems?: string;
-    justifyContent?: string;
-    strokeWidth?: number;
-    strokeColor?: string;
-    letterSpacing?: number;
-    lineHeight?: number;
-}
-
-export interface BaseTextComponentProps {
-    style?: BaseTextComponentStyle;
-    data?: any;
-    base: { id: string }
-}
-
-export interface BaseTextComponentRef {
-    updateConfig: (newConfig: BaseTextComponentProps) => void;
-}
-
-const BaseTextComponent = forwardRef((props: BaseTextComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
-    const { translate } = useLocale();
-    const [config, setConfig] = useState<BaseTextComponentProps>({ ...props });
-    const { style, data } = config;
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => setConfig({ ...newConfig }),
-    }));
-
-    const strokeStyle: CSSProperties = {
-        WebkitTextStrokeWidth: style?.strokeWidth,
-        WebkitTextStrokeColor: style?.strokeColor,
-    }
-
-    return (
-        <div
-            className={'base-text-component'}
-            style={{ ...style, ...strokeStyle }}
-        >
-            {data?.staticData ? translate("${" + data.staticData + "}") : ""}
-        </div>
-    );
-});
-
+
+import React, {
+    CSSProperties,
+    ForwardedRef,
+    forwardRef,
+    useImperativeHandle,
+    useState
+} from 'react';
+import { useLocale } from "../../locale/useLocale";
+import './index.less';
+
+export interface BaseTextComponentStyle {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+    alignItems?: string;
+    justifyContent?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+    letterSpacing?: number;
+    lineHeight?: number;
+}
+
+export interface BaseTextComponentProps {
+    style?: BaseTextComponentStyle;
+    data?: any;
+    base: { id: string }
+}
+
+export interface BaseTextComponentRef {
+    updateConfig: (newConfig: BaseTextComponentProps) => void;
+}
+
+const BaseTextComponent = forwardRef((props: BaseTextComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
+    const { translate } = useLocale();
+    const [config, setConfig] = useState<BaseTextComponentProps>({ ...props });
+    const { style, data } = config;
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({ ...newConfig }),
+    }));
+
+    const strokeStyle: CSSProperties = {
+        WebkitTextStrokeWidth: style?.strokeWidth,
+        WebkitTextStrokeColor: style?.strokeColor,
+    }
+
+    return (
+        <div
+            className={'base-text-component'}
+            style={{ ...style, ...strokeStyle }}
+        >
+            {data?.staticData ? translate("${" + data.staticData + "}") : ""}
+        </div>
+    );
+});
+
 export default BaseTextComponent;

package/src/aldehyde/lowcode-components/border/border1/index.tsx

@@ -1,71 +1,71 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-}
-
-export interface ComponentRef {
-    updateConfig: (config: ComponentProps) => void;
-}
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
-    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => setStyle({ ...newConfig.style }),
-    }));
-
-    return <div style={{ position: "relative", width: "100%", height: "100%" }}>
-        <svg width="150px" height="150px" style={{ position: "absolute", top: 0, left: 0, display: "block" }}>
-            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
-                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
-                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
-                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-        </svg>
-        <svg width="150px" height="150px" style={{ position: "absolute", top: 0, right: 0, display: "block", transform: "rotateY(180deg)" }}>
-            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
-                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
-                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
-                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-        </svg>
-        <svg width="150px" height="150px" style={{ position: "absolute", bottom: 0, left: 0, display: "block", transform: "rotateX(180deg)" }}>
-            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
-                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
-                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
-                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-        </svg>
-        <svg width="150px" height="150px" style={{ position: "absolute", bottom: 0, right: 0, display: "block", transform: "rotateX(180deg) rotateY(180deg)" }}>
-            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
-                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
-                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
-                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
-            </polygon>
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setStyle({ ...newConfig.style }),
+    }));
+
+    return <div style={{ position: "relative", width: "100%", height: "100%" }}>
+        <svg width="150px" height="150px" style={{ position: "absolute", top: 0, left: 0, display: "block" }}>
+            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
+                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
+                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
+                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+        </svg>
+        <svg width="150px" height="150px" style={{ position: "absolute", top: 0, right: 0, display: "block", transform: "rotateY(180deg)" }}>
+            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
+                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
+                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
+                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+        </svg>
+        <svg width="150px" height="150px" style={{ position: "absolute", bottom: 0, left: 0, display: "block", transform: "rotateX(180deg)" }}>
+            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
+                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
+                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
+                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+        </svg>
+        <svg width="150px" height="150px" style={{ position: "absolute", bottom: 0, right: 0, display: "block", transform: "rotateX(180deg) rotateY(180deg)" }}>
+            <polygon fill={`${mainColor}`} points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
+                <animate attributeName="fill" values={`${mainColor};${subColor};${mainColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${subColor}`} points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8">
+                <animate attributeName="fill" values={`${subColor};${mainColor};${subColor}`} dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+            <polygon fill={`${mainColor}`} points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54">
+                <animate attributeName="fill" values={`${mainColor};${subColor};transparent`} dur="1s" begin="0s" repeatCount="indefinite"></animate>
+            </polygon>
+        </svg>
+    </div>;
+});
+
 export default Index;