支持自定义圆角半径

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -86,7 +86,7 @@
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
                 <MediaAssetBoard v-if="item.type === 'mediaAsset'" :width="item.width * canvasScale"
                   :height="item.height * canvasScale" :media-id="item.mediaId" :selected="selectedComponent === item"
-                  v-model="item.mediaGroup" @resize="
+                  v-model="item.mediaGroup" :border-radius="item.borderRadius || 0" @resize="
                     ({ width, height }) => {
                       item.width = width / canvasScale;
                       item.height = height / canvasScale;
@@ -94,14 +94,15 @@
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
                 <LiveBoard v-if="item.type === 'live'" :width="item.width * canvasScale"
                   :height="item.height * canvasScale" :live-url="item.liveUrl" :play-audio="item.playAudio"
-                  :selected="selectedComponent === item" @resize="
+                  :selected="selectedComponent === item" :border-radius="item.borderRadius || 0" @resize="
                     ({ width, height }) => {
                       item.width = width / canvasScale;
                       item.height = height / canvasScale;
                     }
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
                 <WebPageBoard v-if="item.type === 'webPage'" :width="item.width * canvasScale"
-                  :height="item.height * canvasScale" :url="item.url" :selected="selectedComponent === item" @resize="
+                  :height="item.height * canvasScale" :url="item.url" :selected="selectedComponent === item"
+                  :border-radius="item.borderRadius || 0" @resize="
                     ({ width, height }) => {
                       item.width = width / canvasScale;
                       item.height = height / canvasScale;
@@ -164,6 +165,9 @@
                   <el-option label="日期+时间 (YYYY-MM-DD HH:mm:ss)" value="date" />
                 </el-select>
               </template>
+              <template v-else-if="key === 'borderRadius'">
+                <el-input-number v-model="selectedComponent[key]" :min="0" :max="100" :step="1" style="width: 100%" />
+              </template>
               <template v-else>
                 <el-input v-model="selectedComponent[key]" />
               </template>
@@ -376,8 +380,21 @@ function selectCanvasFromSidebar() {
 function showEditableProp(key: string) {
   // 明确排除 type 字段，防止被编辑
   if (!selectedComponent.value) return false;
-  // 对于文本和滚动文本组件，移除 'fontWeight' 属性
-  if ((selectedComponent.value.type === 'text' || selectedComponent.value.type === 'scrollingText') && (key === 'fontWeight' || key === 'align')) {
+  // 对于文本、滚动文本和时钟组件，移除 'fontWeight' 和 'align' 属性
+  if (
+    (selectedComponent.value.type === 'text' || selectedComponent.value.type === 'scrollingText' || selectedComponent.value.type === 'clock') &&
+    (key === 'fontWeight' || key === 'align')
+  ) {
+    return false;
+  }
+  // 画布、文本、滚动文本和时钟组件不显示 borderRadius 属性
+  if (
+    (selectedComponent.value.type === 'canvas' ||
+      selectedComponent.value.type === 'text' ||
+      selectedComponent.value.type === 'scrollingText' ||
+      selectedComponent.value.type === 'clock') &&
+    key === 'borderRadius'
+  ) {
     return false;
   }
   return !['type', 'depth'].includes(key);
@@ -573,7 +590,8 @@ function onCanvasDrop(e: DragEvent) {
       y: y,
       width: 120,
       height: 120,
-      depth: getMaxDepth() + 1
+      depth: getMaxDepth() + 1,
+      borderRadius: 0
     };
     editorContent.value.elements.push(newMediaAsset);
     nextTick(() => selectComponent(newMediaAsset));
@@ -586,19 +604,21 @@ function onCanvasDrop(e: DragEvent) {
       y: y,
       width: 200,
       height: 120,
-      depth: getMaxDepth() + 1
+      depth: getMaxDepth() + 1,
+      borderRadius: 0
     };
     editorContent.value.elements.push(newLive);
     nextTick(() => selectComponent(newLive));
   } else if (dragType.value === 'webPage') {
     const newWebPage = {
       type: 'webPage',
-      url: '',
+      url: 'https://example.com',
       x: x,
       y: y,
-      width: 120,
-      height: 120,
-      depth: getMaxDepth() + 1
+      width: 300,
+      height: 200,
+      depth: getMaxDepth() + 1,
+      borderRadius: 0
     };
     editorContent.value.elements.push(newWebPage);
     nextTick(() => selectComponent(newWebPage));

smsb-plus-ui/src/views/smsb/itemProgram/component/LiveBoard.vue

@@ -94,8 +94,7 @@ function select() {
   -moz-user-select: none;
   -ms-user-select: none;
   background: #f8fafc;
-  border-radius: 0px;
-  transition: border-color 0.2s;
+  transition: all 0.2s;
   position: relative;
   box-sizing: border-box;
   display: flex;

smsb-plus-ui/src/views/smsb/itemProgram/component/MediaAssetBoard.vue

@@ -13,12 +13,14 @@
     borderRadius: props.borderRadius + 'px'
   }" @click="$emit('click', $event)">
     <!-- 预览窗口 -->
-    <div v-if="mediaItems.length > 0" class="preview-container">
+    <div v-if="mediaItems.length > 0" class="preview-container" :style="{ borderRadius: props.borderRadius + 'px' }">
       <template v-for="(item, index) in mediaItems" :key="index">
-        <div v-show="currentMediaIndex === index" class="media-item" :class="{ 'active': currentMediaIndex === index }">
-          <img v-if="item.type === 1" :src="item.url" :alt="item.name" class="media-content" />
+        <div v-show="currentMediaIndex === index" class="media-item" :class="{ 'active': currentMediaIndex === index }"
+          :style="{ borderRadius: props.borderRadius + 'px' }">
+          <img v-if="item.type === 1" :src="item.url" :alt="item.name" class="media-content"
+            :style="{ borderRadius: props.borderRadius + 'px' }" />
           <video v-else-if="item.type === 2" :src="item.url" class="media-content" preload="metadata" muted
-            @loadeddata="onVideoLoaded"></video>
+            @loadeddata="onVideoLoaded" :style="{ borderRadius: props.borderRadius + 'px' }"></video>
         </div>
       </template>
 
@@ -266,10 +268,8 @@ function onResizeMouseDown(dir: string, e: MouseEvent) {
 <style scoped>
 .media-asset-board-wrapper {
   background: #f9fbfd;
-  border-radius: inherit;
   border: 2px dashed #b3c7e6;
-  border-radius: 0px;
-  transition: border-color 0.2s;
+  transition: all 0.2s;
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
@@ -292,7 +292,6 @@ function onResizeMouseDown(dir: string, e: MouseEvent) {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: inherit;
   overflow: hidden;
 }
 

smsb-plus-ui/src/views/smsb/itemProgram/component/WebPageBoard.vue

@@ -75,9 +75,9 @@ function onResizeMouseDown(dir: string, e: MouseEvent) {
 .web-page-board-wrapper {
   background: #f9fbfd;
   border: 2px dashed #b3c7e6;
-  border-radius: 10px;
-  transition: border-color 0.2s;
+  transition: all 0.2s;
   position: relative;
+  overflow: hidden;
 }
 
 .web-page-board-wrapper.selected {