aldehyde 0.2.279 → 0.2.282

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

@@ -0,0 +1,108 @@
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import chinaJson from "../assets/china.json";
+
+const defOption = {
+    tooltip: {
+        trigger: 'item',
+    },
+    geo: {
+        show: true,
+        map: 'china',
+        roam: true,
+        zoom: 1,
+        label: {
+            normal: { show: false },
+            emphasis: { show: false }
+        },
+        itemStyle: {
+            normal: {
+                areaColor: '#031525',
+                borderColor: '#076ba1'
+            },
+            emphasis: {
+                areaColor: '#2B91B7'
+            }
+        },
+        select: {}
+    },
+    series: [
+        {
+            type: 'map',
+            coordinateSystem: 'geo',
+            map: 'china',
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            data: []
+        }
+    ]
+};
+
+
+export interface ChartComponentStyle {
+    tooltip?: { show: boolean };
+    geo?: { [key: string]: any };
+}
+
+export interface ChartComponentProps {
+    style?: ChartComponentStyle;
+    base: { width: number, height: number }
+}
+
+export interface BaseTextComponentRef {
+    updateConfig: (newConfig: ChartComponentProps) => void;
+}
+
+const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
+    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>()
+    const chartRef = useRef<HTMLDivElement>(null);
+    const chart = useRef<any>(null);
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { base, style } = newConfig;
+            setConfig({ ...(style || {}) });
+            setSize({ width: base.width, height: base.height });
+        },
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+
+    useEffect(() => {
+        echarts.registerMap('china', chinaJson as any);
+        chart.current = echarts.init(chartRef.current, null, { renderer: 'svg' });
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            chart.current.dispose();
+        }
+    }, []);
+
+    const renderChart = () => {
+        const { tooltip, geo } = config
+        const option = _.cloneDeep(defOption);
+        option.tooltip = { trigger: "item", ...tooltip };
+        option.geo = { ...option.geo, ...geo, ...geo.normal };
+        chart.current.setOption(option, true);
+    }
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config]);
+
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+
+    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+});
+
+export default Index;

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

@@ -0,0 +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>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border10/index.less

@@ -0,0 +1,27 @@
+.border-box-10 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+
+    .right-top {
+        right: 0px;
+        transform: rotateY(180deg);
+        position: absolute;
+    }
+
+    .left-bottom {
+        bottom: 0px;
+        left: 0px;
+        transform: rotateX(180deg);
+        position: absolute;
+    }
+
+    .right-bottom {
+        right: 0px;
+        bottom: 0px;
+        transform: rotateX(180deg) rotateY(180deg);
+        position: absolute;
+    }
+
+}

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

@@ -0,0 +1,46 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom'];
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+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 className="border-box-10" style={{ boxShadow: `inset 0 0 25px 3px ${mainColor}` }} >
+        {border.map(borderName => (
+            <svg
+                width='150px'
+                height='150px'
+                key={borderName}
+                className={`${borderName} border-svg-container`}
+            >
+                <polygon
+                    fill={subColor}
+                    points='40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3'
+                />
+            </svg>
+        ))}
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border11/index.less

@@ -0,0 +1,18 @@
+.border-box-11 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    polyline {
+        fill: none;
+        stroke-width: 1;
+    }
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+    }
+}

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

@@ -0,0 +1,232 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+    title?: { text: string, fontSize?: number, color?: string };
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number, id: string }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(480);
+    const [height, setHeight] = useState<number>(320);
+    const { mainColor = "#83BFF6", subColor = "#00CED1", title } = style || {};
+    const filterId = `border-box-11${props.base.id}`;
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-6"  >
+        <svg className='border-svg-container' width={width} height={height}>
+            <defs>
+                <filter id={filterId} height='150%' width='150%' x='-25%' y='-25%'>
+                    <feMorphology operator='dilate' radius='2' in='SourceAlpha' result='thicken' />
+                    <feGaussianBlur in='thicken' stdDeviation='3' result='blurred' />
+                    <feFlood floodColor={subColor} result='glowColor' />
+                    <feComposite in='glowColor' in2='blurred' operator='in' result='softGlowColored' />
+                    <feMerge>
+                        <feMergeNode in='softGlowColored' />
+                        <feMergeNode in='SourceGraphic' />
+                    </feMerge>
+                </filter>
+            </defs>
+            <polyline
+                stroke={mainColor}
+                filter={`url(#${filterId})`}
+                points={`
+          ${(width - (width / 2)) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + (width / 2)) / 2}, 30
+          ${(width + (width / 2)) / 2 - 20}, 7 ${(width - (width / 2)) / 2 + 20}, 7
+          ${(width - (width / 2)) / 2}, 30 ${(width - (width / 2)) / 2 + 20}, 52
+          ${(width + (width / 2)) / 2 - 20}, 52 ${(width + (width / 2)) / 2}, 30
+        `}
+            />
+            <polygon
+                stroke={mainColor}
+                fill='none'
+                points={`
+          ${(width + (width / 2)) / 2 - 5}, 30 ${(width + (width / 2)) / 2 - 21}, 11
+          ${(width + (width / 2)) / 2 - 27}, 11 ${(width + (width / 2)) / 2 - 8}, 34
+        `}
+            />
+            <polygon
+                stroke={mainColor}
+                fill='none'
+                points={`
+          ${(width - (width / 2)) / 2 + 5}, 30 ${(width - (width / 2)) / 2 + 22}, 49
+          ${(width - (width / 2)) / 2 + 28}, 49 ${(width - (width / 2)) / 2 + 8}, 26
+        `}
+            />
+            <polygon
+                stroke={mainColor}
+                fill={subColor}
+                filter={`url(#${filterId})`}
+                points={`
+          ${(width + (width / 2)) / 2 - 11}, 37 ${(width + (width / 2)) / 2 - 32}, 11
+          ${(width - (width / 2)) / 2 + 23}, 11 ${(width - (width / 2)) / 2 + 11}, 23
+          ${(width - (width / 2)) / 2 + 33}, 49 ${(width + (width / 2)) / 2 - 22}, 49
+        `}
+            />
+
+            <polygon
+                filter={`url(#${filterId})`}
+                fill={mainColor}
+                opacity='1'
+                points={`
+          ${(width - (width / 2)) / 2 - 10}, 37 ${(width - (width / 2)) / 2 - 31}, 37
+          ${(width - (width / 2)) / 2 - 25}, 46 ${(width - (width / 2)) / 2 - 4}, 46
+        `}
+            >
+                <animate
+                    attributeName='opacity'
+                    values='1;0.7;1'
+                    dur='2s'
+                    begin='0s'
+                    repeatCount='indefinite'
+                />
+            </polygon>
+            <polygon
+                filter={`url(#${filterId})`}
+                fill={mainColor}
+                opacity='0.7'
+                points={`
+          ${(width - (width / 2)) / 2 - 40}, 37 ${(width - (width / 2)) / 2 - 61}, 37
+          ${(width - (width / 2)) / 2 - 55}, 46 ${(width - (width / 2)) / 2 - 34}, 46
+        `}
+            >
+                <animate
+                    attributeName='opacity'
+                    values='0.7;0.4;0.7'
+                    dur='2s'
+                    begin='0s'
+                    repeatCount='indefinite'
+                />
+            </polygon>
+
+            <polygon
+                filter={`url(#${filterId})`}
+                fill={mainColor}
+                opacity='0.5'
+                points={`
+          ${(width - (width / 2)) / 2 - 70}, 37 ${(width - (width / 2)) / 2 - 91}, 37
+          ${(width - (width / 2)) / 2 - 85}, 46 ${(width - (width / 2)) / 2 - 64}, 46
+        `}
+            >
+                <animate
+                    attributeName='opacity'
+                    values='0.5;0.2;0.5'
+                    dur='2s'
+                    begin='0s'
+                    repeatCount='indefinite'
+                />
+            </polygon>
+
+            <polygon
+                filter={`url(#${filterId})`}
+                fill={mainColor}
+                opacity='1'
+                points={`
+          ${(width + (width / 2)) / 2 + 30}, 37 ${(width + (width / 2)) / 2 + 9}, 37
+          ${(width + (width / 2)) / 2 + 3}, 46 ${(width + (width / 2)) / 2 + 24}, 46
+        `}
+            >
+                <animate
+                    attributeName='opacity'
+                    values='1;0.7;1'
+                    dur='2s'
+                    begin='0s'
+                    repeatCount='indefinite'
+                />
+            </polygon>
+
+            <polygon
+                filter={`url(#${filterId})`}
+                fill={mainColor}
+                opacity='0.7'
+                points={`
+          ${(width + (width / 2)) / 2 + 60}, 37 ${(width + (width / 2)) / 2 + 39}, 37
+          ${(width + (width / 2)) / 2 + 33}, 46 ${(width + (width / 2)) / 2 + 54}, 46
+        `}
+            >
+                <animate
+                    attributeName='opacity'
+                    values='0.7;0.4;0.7'
+                    dur='2s'
+                    begin='0s'
+                    repeatCount='indefinite'
+                />
+            </polygon>
+
+            <polygon
+                filter={`url(#${filterId})`}
+                fill={mainColor}
+                opacity='0.5'
+                points={`
+          ${(width + (width / 2)) / 2 + 90}, 37 ${(width + (width / 2)) / 2 + 69}, 37
+          ${(width + (width / 2)) / 2 + 63}, 46 ${(width + (width / 2)) / 2 + 84}, 46
+        `}
+            >
+                <animate
+                    attributeName='opacity'
+                    values='0.5;0.2;0.5'
+                    dur='2s'
+                    begin='0s'
+                    repeatCount='indefinite'
+                />
+            </polygon>
+
+            <text
+                className='border-box-11-title'
+                x={`${width / 2}`}
+                y='32'
+                fill={title?.color || "#fff"}
+                fontSize={title?.fontSize || 18}
+                textAnchor='middle'
+                dominantBaseline='middle'
+            >
+                {title?.text}
+            </text>
+
+            <polygon
+                fill={mainColor}
+                filter={`url(#${filterId})`}
+                points={`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `}
+            />
+
+            <polygon
+                fill={mainColor}
+                filter={`url(#${filterId})`}
+                points={`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border12/index.less

@@ -0,0 +1,14 @@
+.border-box-12 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+    }
+
+}

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

@@ -0,0 +1,115 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number, id: string }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(320);
+    const [height, setHeight] = useState<number>(200);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+    const filterId = `border-box-12${props.base.id}`;
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { width, height } = newConfig.base;
+            setStyle({ ...newConfig.style });
+            setWidth(width);
+            setHeight(height);
+        },
+    }));
+
+    return <div className="border-box-12"  >
+        <svg className='dv-border-svg-container' width={width} height={height}>
+            <defs>
+                <filter id={filterId} height='150%' width='150%' x='-25%' y='-25%'>
+                    <feMorphology operator='dilate' radius='1' in='SourceAlpha' result='thicken' />
+                    <feGaussianBlur in='thicken' stdDeviation='2' result='blurred' />
+                    <feFlood floodColor={mainColor} result='glowColor'>
+                        <animate
+                            attributeName='flood-color'
+                            values={`${mainColor};${subColor};${mainColor};`}
+                            dur='3s'
+                            begin='0s'
+                            repeatCount='indefinite'
+                        />
+                    </feFlood>
+                    <feComposite in='glowColor' in2='blurred' operator='in' result='softGlowColored' />
+                    <feMerge>
+                        <feMergeNode in='softGlowColored' />
+                        <feMergeNode in='SourceGraphic' />
+                    </feMerge>
+                </filter>
+            </defs>
+
+            <path
+                fill="none"
+                strokeWidth='2'
+                stroke={mainColor}
+                d={`
+            M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
+            L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
+            L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
+            Q 5 5 15 5
+          `}
+            />
+
+            <path
+                strokeWidth='2'
+                fill='transparent'
+                strokeLinecap='round'
+                filter={`url(#${filterId})`}
+                stroke={subColor}
+                d={`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`}
+            />
+
+            <path
+                strokeWidth='2'
+                fill='transparent'
+                strokeLinecap='round'
+                filter={`url(#${filterId})`}
+                stroke={subColor}
+                d={`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`}
+            />
+
+            <path
+                strokeWidth='2'
+                fill='transparent'
+                strokeLinecap='round'
+                filter={`url(#${filterId})`}
+                stroke={subColor}
+                d={`
+          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
+          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
+          L ${width - 5} ${height - 20}
+        `}
+            />
+
+            <path
+                strokeWidth='2'
+                fill='transparent'
+                strokeLinecap='round'
+                filter={`url(#${filterId})`}
+                stroke={subColor}
+                d={`
+          M 20 ${height - 5} L 15 ${height - 5}
+          Q 5 ${height - 5} 5 ${height - 15}
+          L 5 ${height - 20}
+        `}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/border/border13/index.less

@@ -0,0 +1,14 @@
+.border-box-13 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .border-svg-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+    }
+
+}