rect props

src/components/config/globalConfig.ts

@@ -149,13 +149,13 @@ export const elementList = [
         component: 'YvanRect',
         propValue: '',
         style: {
-            borderRadius: 'inherit',
+            borderRadius: 0,
             borderWidth: 1,
             borderColor: '#212121',
             borderType: 'solid',
             width: 200,
             height: 200,
-            background: null,
+            background: '#FFFFFF',
             rotate: 0
         },
         groupStyle: {}

src/components/elements/YvanRectProps.vue

@@ -2,33 +2,38 @@
   <section class="yvan-rect-props">
     <el-form ref="form" label-position="top">
       <el-form-item label="宽度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.width" controls-position="right"/>
       </el-form-item>
       <el-form-item label="高度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.height" controls-position="right"/>
       </el-form-item>
       <el-form-item label="背景颜色">
-        <el-color-picker show-alpha/>
+        <el-color-picker v-model="activeComponent.style.background"/>
       </el-form-item>
       <el-form-item label="边框类型">
-        <el-select placeholder="请选择行高">
+        <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
           <el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
-        <el-color-picker show-alpha/>
+        <el-color-picker v-model="activeComponent.style.borderColor"/>
       </el-form-item>
       <el-form-item label="边框宽度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.borderWidth" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="边框圆角">
+        <el-input-number v-model="activeComponent.style.borderRadius" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="旋转角度(°)">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.rotate" controls-position="right"/>
       </el-form-item>
     </el-form>
   </section>
 </template>
 
 <script lang="ts">
+import {mapState} from "pinia";
+import {globalStore} from "@/store";
 import {borderStyleList} from "@/components/config/globalConfig";
 
 export default {
@@ -37,7 +42,15 @@ export default {
     return {
       borderStyleList
     }
-  }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      activeComponent: (state) => {
+        console.log("activeComponent => ", state.curComponent)
+        return state.curComponent
+      }
+    }),
+  },
 }
 </script>
 

src/components/elements/style.js

@@ -218,7 +218,7 @@ export const StyledRect = styled('div', rectProps)`
   overflow: hidden;
   position: absolute;
   background: ${(props) => props.background};
-  border-radius: ${(props) => props.borderRadius};
+  border-radius: ${(props) => `${props.borderRadius}px`};
   z-index: ${(props) => props.zIndex};
   border: ${(props) => {
     const {borderWidth, borderType, borderColor} = props