aldehyde 0.2.281 → 0.2.283

package/src/aldehyde/form/dtmpl-form.tsx

@@ -378,7 +378,7 @@ export default class DtmplForm extends React.PureComponent<
             loading={loading}
             styles={{body:{ padding: "6px" },header:{ background: "#f2f4f5" }}}
           >
-            <FormItemGroup
+            <FormItemGroup layout={HcserviceV3.isForeignLanguageMode()?"vertical":"horizontal"}
               serverKey={serverKey}
               formRef={formRef}
               mainCode={mainCode}
@@ -433,6 +433,7 @@ export default class DtmplForm extends React.PureComponent<
     if (!dtmplConfig || !dtmplData) {
       return <Card loading={true}>{translate("${加载中}")}... ...</Card>;
     }
+
     //debugger
     const { buttons, premises } = appDtmplConfig
       ? appDtmplConfig
@@ -473,6 +474,7 @@ export default class DtmplForm extends React.PureComponent<
           </Card>
         ) : null}
         <AntdForm
+            layout={HcserviceV3.isForeignLanguageMode()?"vertical":"horizontal"}
           scrollToFirstError={true}
           labelWrap={true}
           ref={formRef}

package/src/aldehyde/form/form-Item-group.tsx

@@ -20,6 +20,7 @@ export interface FieldGroupProps {
   mainCode?: string;
   formRef?: RefObject<FormInstance>;
   dataCode?:string,
+  layout?: "horizontal" | "vertical"
 }
 
 interface FieldGroupState {
@@ -78,10 +79,20 @@ export default class FormItemGroup extends React.PureComponent<
     return fieldConfig;
   };
   initFormItem = (fieldConfig: FieldConfig, fieldValue) => {
-    const { nameAttr, maxColsOnRow, mainCode, serverKey,dataCode } = this.props;
+    const { nameAttr, maxColsOnRow, mainCode, serverKey,dataCode,layout } = this.props;
     const { translate } = this.context;
     let item = this.getFieldConfig(fieldConfig);
 
+    let labelColSpan=24;
+    let wrapperColSpan=24;
+    debugger
+    if(layout==="vertical"){
+      labelColSpan=24;
+      wrapperColSpan=24;
+    }else {
+      labelColSpan= maxColsOnRow == 1 ?  6 : item.colSpan == 1 ?  6 :  3;
+      wrapperColSpan= maxColsOnRow == 1 ?  18 : item.colSpan == 1 ? 15 :  19 ;
+    }
 
     return (
       <FormItem
@@ -89,19 +100,10 @@ export default class FormItemGroup extends React.PureComponent<
         hidden={item.hidden}
         name={fieldConfig.controlType=="field-history" ?undefined:item[nameAttr]}
         key={item.id}
-        labelCol={
-          maxColsOnRow == 1
-            ? { span: 6 }
-            : item.colSpan == 1
-            ? { span: 6 }
-            : { span: 3 }
+        labelCol={{ span: labelColSpan }
         }
         wrapperCol={
-          maxColsOnRow == 1
-            ? { span: 18 }
-            : item.colSpan == 1
-            ? { span: 15 }
-            : { span: 19 }
+         {span:wrapperColSpan}
         }
         tooltip={(!item.tip || item.tip=="")?undefined:item.tip}
         initialValue={fieldValue}

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;
+    }
+
+}