border

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -93,12 +93,50 @@ export const layoutColumns: ColumnItem[] = [
       step: 0.01,
     },
   },
+  {
+    label: "锁定",
+    dataIndex: "layout.locked",
+    component: "Switch",
+  },
+];
+
+export const bdColumns: ColumnItem[] = [
+  {
+    label: "边框样式",
+    dataIndex: "layout.border.style",
+    component: "Select",
+    props: {
+      defaultValue: "none",
+      options: [
+        { label: "无", value: "none" },
+        { label: "直线", value: "solid" },
+        { label: "点状线", value: "dotted" },
+        { label: "破折线", value: "dashed" },
+      ],
+    },
+  },
+  {
+    label: "边框颜色",
+    dataIndex: "layout.border.color",
+    ...createColorOpts(),
+  },
+  {
+    label: "边框尺寸",
+    dataIndex: "layout.border.width",
+    component: Slider,
+    props: {
+      defaultValue: 0,
+      step: 1,
+      min: 0,
+      max: 2,
+    },
+  },
   {
     label: "边框弧度",
-    dataIndex: "layout.radius",
+    dataIndex: "layout.border.radius",
     component: Slider,
-    isVisible: (value, data) =>
-      ["Web3D", "Container", "Video"].includes(data.compKey) ? false : true,
+    // isVisible: (value, data) =>
+    //   ["Web3D", "Container", "Video"].includes(data.compKey) ? false : true,
     props: {
       defaultValue: 0,
       min: 0,
@@ -106,11 +144,6 @@ export const layoutColumns: ColumnItem[] = [
       step: 1,
     },
   },
-  {
-    label: "锁定",
-    dataIndex: "layout.locked",
-    component: "Switch",
-  },
 ];
 
 export const bgColumns: ColumnItem[] = [
@@ -217,6 +250,16 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
                 />
               </>
             )}
+            {["Text", "Image", "Map"].includes(component.compKey) ? (
+              <>
+                <div>边框</div>
+                <FormUI
+                  data={component}
+                  columns={bdColumns}
+                  onChange={changeVal}
+                />
+              </>
+            ) : null}
           </div>
         );
       };

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -19,13 +19,25 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
     style["opacity"] = layout.opacity;
   }
 
+  if (layout.border) {
+    if (layout.border.style) {
+      style["border-style"] = layout.border.style;
+    }
+    style["border-width"] = (layout.border.width || 0) + "px";
+    style["border-color"] = layout.border.color || "#000";
+
+    if (layout.border.radius) {
+      style["border-radius"] = layout.border.radius / 2 + "%";
+      style["overflow"] = "hidden";
+    }
+  }
+
   if (layout.radius !== undefined) {
     style["border-radius"] = layout.radius / 2 + "%";
     style["overflow"] = "hidden";
   }
 
-
-  if (layout.locked === true) { 
+  if (layout.locked === true) {
     style["pointer-events"] = "none";
   }
 

src/modules/editor/typings.ts

@@ -16,6 +16,12 @@ export type Layout = {
     y?: number; // marginTop
     s?: number; // scale
   };
+  border?: {
+    style?: string;
+    width?: number;
+    color?: string;
+    radius?: number;
+  };
   zIndex?: number;
   margin?: string;
   padding?: string;