From 77ffe2f52b57de6d669105b11abdfbf6166bab6d Mon Sep 17 00:00:00 2001
From: "jlj05024111@163.com" <jlj05024111@163.com>
Date: Wed, 10 Sep 2025 21:05:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-dv-1/custom-dv-1.scss              |  12 +-
 src/custom-border/custom-dv-1/custom-dv-1.tsx |   3 +-
 .../custom-dv-10/custom-dv-10.scss            |   3 +-
 .../custom-dv-10/custom-dv-10.tsx             |   3 +-
 .../custom-dv-11/custom-dv-11.scss            |   8 +
 .../custom-dv-11/custom-dv-11.tsx             |   3 +-
 .../custom-dv-12/custom-dv-12.scss            |   2 +-
 .../custom-dv-12/custom-dv-12.tsx             |   3 +-
 .../custom-dv-13/custom-dv-13.scss            |   2 +-
 .../custom-dv-13/custom-dv-13.tsx             |   3 +-
 .../custom-dv-2/custom-dv-2.scss              |   3 +-
 src/custom-border/custom-dv-2/custom-dv-2.tsx |   3 +-
 .../custom-dv-3/custom-dv-3.scss              |   2 +-
 src/custom-border/custom-dv-3/custom-dv-3.tsx |   3 +-
 .../custom-dv-4/custom-dv-4.scss              |   2 +-
 src/custom-border/custom-dv-4/custom-dv-4.tsx |   3 +-
 .../custom-dv-5/custom-dv-5.scss              |   2 +-
 src/custom-border/custom-dv-5/custom-dv-5.tsx |   3 +-
 .../custom-dv-6/custom-dv-6.scss              |   2 +-
 src/custom-border/custom-dv-6/custom-dv-6.tsx |   3 +-
 .../custom-dv-7/custom-dv-7.scss              |   2 +-
 .../custom-dv-8/custom-dv-8.scss              |   2 +-
 src/custom-border/custom-dv-8/custom-dv-8.tsx |   5 +-
 .../custom-dv-9/custom-dv-9.scss              |   2 +-
 src/custom-border/custom-dv-9/custom-dv-9.tsx |   3 +-
 src/custom-button/custom-button.scss          |  12 +-
 src/custom-button/custom-button.tsx           |   9 +-
 src/percent-pond/percent-pond.scss            | 162 ++++++++++--------
 src/screen-portlet/screen-portlet.scss        |   7 +-
 .../screen-radio-list.controller.ts           |  13 +-
 src/screen-radio-list/screen-radio-list.scss  |  12 ++
 src/screen-radio-list/screen-radio-list.tsx   |  11 +-
 src/screen-real-time/screen-real-time.scss    |   1 -
 33 files changed, 178 insertions(+), 131 deletions(-)

diff --git a/src/custom-border/custom-dv-1/custom-dv-1.scss b/src/custom-border/custom-dv-1/custom-dv-1.scss
index a7c8dc5..de4a7de 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.scss
+++ b/src/custom-border/custom-dv-1/custom-dv-1.scss
@@ -1,5 +1,5 @@
 $style-1: (
-    'offsetY': 0,
+  'offsetY': 0,
 );
 
 @include b(custom-border) {
@@ -8,14 +8,16 @@ $style-1: (
     position: relative;
     width: 100%;
     height: 100%;
-    @include e(wrapper){
+    @include e(wrapper) {
       position: absolute;
+      top: getCssVar(style-1, 'offsetY');
       width: 100%;
-      height: calc(100% - getCssVar(style-1,'offsetY'));
+      height: calc(100% - getCssVar(style-1, 'offsetY'));
     }
     @include e(border-box) {
-    z-index: 100;
-    height: 0;
+      position: relative;
+      z-index: 100;
+      height: 100%;
     }
     @include e(border) {
       position: absolute;
diff --git a/src/custom-border/custom-dv-1/custom-dv-1.tsx b/src/custom-border/custom-dv-1/custom-dv-1.tsx
index d0dfc1b..c8e05ef 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.tsx
+++ b/src/custom-border/custom-dv-1/custom-dv-1.tsx
@@ -43,8 +43,7 @@ export const CustomDV1 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框svg
      */
diff --git a/src/custom-border/custom-dv-10/custom-dv-10.scss b/src/custom-border/custom-dv-10/custom-dv-10.scss
index 23d5707..3b0db3a 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.scss
+++ b/src/custom-border/custom-dv-10/custom-dv-10.scss
@@ -12,6 +12,7 @@ $style-10: (
     height: 100%;
     @include e(wrapper){
       position: absolute;
+      top: getCssVar(style-10, 'offsetY');
       width: 100%;
       height: calc(100% - getCssVar(style-10, 'offsetY'));
     }
@@ -21,7 +22,7 @@ $style-10: (
     }
     @include e(mask) {
       position: absolute;
-      top: getCssVar(style-10, 'padding');
+      top: calc(getCssVar(style-10, 'padding') + getCssVar(style-10, 'offsetY'));
       left: getCssVar(style-10, 'padding');
       width:  calc(100% - 2 * getCssVar(style-10, 'padding'));
       height: calc(100% - 2 * getCssVar(style-10, 'padding') - getCssVar(style-10, 'offsetY'));
diff --git a/src/custom-border/custom-dv-10/custom-dv-10.tsx b/src/custom-border/custom-dv-10/custom-dv-10.tsx
index 4bab586..053bec1 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.tsx
+++ b/src/custom-border/custom-dv-10/custom-dv-10.tsx
@@ -43,8 +43,7 @@ export const CustomDV10 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    const offsety = ref(props.offsetY);
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    const offsety = ref(props.offsetY);
     const padding = ref(8);
     /**
      * 绘制边框svg
diff --git a/src/custom-border/custom-dv-11/custom-dv-11.scss b/src/custom-border/custom-dv-11/custom-dv-11.scss
index b4b5bfc..e3ac4e6 100644
--- a/src/custom-border/custom-dv-11/custom-dv-11.scss
+++ b/src/custom-border/custom-dv-11/custom-dv-11.scss
@@ -3,6 +3,7 @@
     position: relative;
     width: 100%;
     height: 100%;
+
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
@@ -10,6 +11,7 @@
         left: 0;
         width: 100%;
         height: 100%;
+        transform: translateY(0);
   
         & > polyline {
           fill: none;
@@ -21,5 +23,11 @@
       width: 100%;
       height: 100%;
     }
+    .#{bem(portlet-layout-header,left)} {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 }
diff --git a/src/custom-border/custom-dv-11/custom-dv-11.tsx b/src/custom-border/custom-dv-11/custom-dv-11.tsx
index 343be4e..893b4d1 100644
--- a/src/custom-border/custom-dv-11/custom-dv-11.tsx
+++ b/src/custom-border/custom-dv-11/custom-dv-11.tsx
@@ -54,8 +54,7 @@ export const CustomDV11 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框svg
      */
diff --git a/src/custom-border/custom-dv-12/custom-dv-12.scss b/src/custom-border/custom-dv-12/custom-dv-12.scss
index e5452d7..c59572e 100644
--- a/src/custom-border/custom-dv-12/custom-dv-12.scss
+++ b/src/custom-border/custom-dv-12/custom-dv-12.scss
@@ -14,7 +14,7 @@ $style-12: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-12,'offsetY'));
diff --git a/src/custom-border/custom-dv-12/custom-dv-12.tsx b/src/custom-border/custom-dv-12/custom-dv-12.tsx
index f479d01..7f76a27 100644
--- a/src/custom-border/custom-dv-12/custom-dv-12.tsx
+++ b/src/custom-border/custom-dv-12/custom-dv-12.tsx
@@ -44,8 +44,7 @@ export const CustomDV12 = defineComponent({
     let domObserver: MutationObserver | null;
     const id = createUUID();
     const filterId = `borderr-box-12-filterId-${id}`;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      *  初始化宽高
      * @param resize
diff --git a/src/custom-border/custom-dv-13/custom-dv-13.scss b/src/custom-border/custom-dv-13/custom-dv-13.scss
index 8853391..c7ef8c6 100644
--- a/src/custom-border/custom-dv-13/custom-dv-13.scss
+++ b/src/custom-border/custom-dv-13/custom-dv-13.scss
@@ -11,7 +11,7 @@ $style-13: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
         height: calc(100% - getCssVar(style-13,'offsetY'));
diff --git a/src/custom-border/custom-dv-13/custom-dv-13.tsx b/src/custom-border/custom-dv-13/custom-dv-13.tsx
index 8e86b86..4936a46 100644
--- a/src/custom-border/custom-dv-13/custom-dv-13.tsx
+++ b/src/custom-border/custom-dv-13/custom-dv-13.tsx
@@ -42,8 +42,7 @@ export const CustomDV13 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框svg
      */
diff --git a/src/custom-border/custom-dv-2/custom-dv-2.scss b/src/custom-border/custom-dv-2/custom-dv-2.scss
index 65c5a83..886d8fe 100644
--- a/src/custom-border/custom-dv-2/custom-dv-2.scss
+++ b/src/custom-border/custom-dv-2/custom-dv-2.scss
@@ -12,10 +12,9 @@ $style-2: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
-        height: 100%;
         height: calc(100% - getCssVar(style-2,'offsetY'));
   
         & > polyline {
diff --git a/src/custom-border/custom-dv-2/custom-dv-2.tsx b/src/custom-border/custom-dv-2/custom-dv-2.tsx
index e043199..cf0845a 100644
--- a/src/custom-border/custom-dv-2/custom-dv-2.tsx
+++ b/src/custom-border/custom-dv-2/custom-dv-2.tsx
@@ -42,8 +42,7 @@ export const CustomDV2 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框svg
      */
diff --git a/src/custom-border/custom-dv-3/custom-dv-3.scss b/src/custom-border/custom-dv-3/custom-dv-3.scss
index 5328999..4ccf9c4 100644
--- a/src/custom-border/custom-dv-3/custom-dv-3.scss
+++ b/src/custom-border/custom-dv-3/custom-dv-3.scss
@@ -13,7 +13,7 @@ $style-3: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
         height: calc(100% - getCssVar(style-3,'offsetY'));
diff --git a/src/custom-border/custom-dv-3/custom-dv-3.tsx b/src/custom-border/custom-dv-3/custom-dv-3.tsx
index a1f3be1..fa45ece 100644
--- a/src/custom-border/custom-dv-3/custom-dv-3.tsx
+++ b/src/custom-border/custom-dv-3/custom-dv-3.tsx
@@ -42,8 +42,7 @@ export const CustomDV3 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`; /**
      * 绘制边框svg
      */
     const renderBorder = () => {
diff --git a/src/custom-border/custom-dv-4/custom-dv-4.scss b/src/custom-border/custom-dv-4/custom-dv-4.scss
index 4c77d8b..19fa78c 100644
--- a/src/custom-border/custom-dv-4/custom-dv-4.scss
+++ b/src/custom-border/custom-dv-4/custom-dv-4.scss
@@ -15,7 +15,7 @@ $style-4: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-4,'offsetY'));
diff --git a/src/custom-border/custom-dv-4/custom-dv-4.tsx b/src/custom-border/custom-dv-4/custom-dv-4.tsx
index dc483c9..a324cf1 100644
--- a/src/custom-border/custom-dv-4/custom-dv-4.tsx
+++ b/src/custom-border/custom-dv-4/custom-dv-4.tsx
@@ -45,8 +45,7 @@ export const CustomDV4 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      *  初始化宽高
      * @param resize
      * @returns
diff --git a/src/custom-border/custom-dv-5/custom-dv-5.scss b/src/custom-border/custom-dv-5/custom-dv-5.scss
index 4b9d332..d88c096 100644
--- a/src/custom-border/custom-dv-5/custom-dv-5.scss
+++ b/src/custom-border/custom-dv-5/custom-dv-5.scss
@@ -13,7 +13,7 @@ $style-5: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-5,'offsetY'));
diff --git a/src/custom-border/custom-dv-5/custom-dv-5.tsx b/src/custom-border/custom-dv-5/custom-dv-5.tsx
index d93b9ea..56f5cd3 100644
--- a/src/custom-border/custom-dv-5/custom-dv-5.tsx
+++ b/src/custom-border/custom-dv-5/custom-dv-5.tsx
@@ -45,8 +45,7 @@ export const CustomDV5 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      *  初始化宽高
      * @param resize
      * @returns
diff --git a/src/custom-border/custom-dv-6/custom-dv-6.scss b/src/custom-border/custom-dv-6/custom-dv-6.scss
index 784dd02..c8be170 100644
--- a/src/custom-border/custom-dv-6/custom-dv-6.scss
+++ b/src/custom-border/custom-dv-6/custom-dv-6.scss
@@ -12,7 +12,7 @@ $style-6: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-6,'offsetY'));
diff --git a/src/custom-border/custom-dv-6/custom-dv-6.tsx b/src/custom-border/custom-dv-6/custom-dv-6.tsx
index 4fc7885..5c6b878 100644
--- a/src/custom-border/custom-dv-6/custom-dv-6.tsx
+++ b/src/custom-border/custom-dv-6/custom-dv-6.tsx
@@ -45,8 +45,7 @@ export const CustomDV6 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      *  初始化宽高
      * @param resize
      * @returns
diff --git a/src/custom-border/custom-dv-7/custom-dv-7.scss b/src/custom-border/custom-dv-7/custom-dv-7.scss
index 89c7f4f..2f7c605 100644
--- a/src/custom-border/custom-dv-7/custom-dv-7.scss
+++ b/src/custom-border/custom-dv-7/custom-dv-7.scss
@@ -12,7 +12,7 @@ $style-7: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-7,'offsetY'));
diff --git a/src/custom-border/custom-dv-8/custom-dv-8.scss b/src/custom-border/custom-dv-8/custom-dv-8.scss
index 2e992f1..869dc76 100644
--- a/src/custom-border/custom-dv-8/custom-dv-8.scss
+++ b/src/custom-border/custom-dv-8/custom-dv-8.scss
@@ -10,7 +10,7 @@ $style-8: (
   
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: 100%;
diff --git a/src/custom-border/custom-dv-8/custom-dv-8.tsx b/src/custom-border/custom-dv-8/custom-dv-8.tsx
index 0c31b20..7d91b4e 100644
--- a/src/custom-border/custom-dv-8/custom-dv-8.tsx
+++ b/src/custom-border/custom-dv-8/custom-dv-8.tsx
@@ -57,8 +57,7 @@ export const CustomDV8 = defineComponent({
     const path = `border-box-8-path-${id}`;
     const gradient = `border-box-8-gradient-${id}`;
     const mask = `border-box-8-mask-${id}`;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    const length = computed(() => {
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    const length = computed(() => {
       return (width.value + height.value - props.offsetY - 5) * 2;
     });
 
@@ -179,7 +178,7 @@ export const CustomDV8 = defineComponent({
     const renderBorder = () => {
       const _width = width.value - props.offsetX;
       const _height = height.value - props.offsetY;
-      const padding = 2;
+      const padding = 8;
       return (
         <svg
           class={[ns.e('svg-container')]}
diff --git a/src/custom-border/custom-dv-9/custom-dv-9.scss b/src/custom-border/custom-dv-9/custom-dv-9.scss
index bbfdc87..47c0318 100644
--- a/src/custom-border/custom-dv-9/custom-dv-9.scss
+++ b/src/custom-border/custom-dv-9/custom-dv-9.scss
@@ -13,7 +13,7 @@ $style-9: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
         height: calc(100% - getCssVar(style-9,'offsetY'));
diff --git a/src/custom-border/custom-dv-9/custom-dv-9.tsx b/src/custom-border/custom-dv-9/custom-dv-9.tsx
index d59688a..4c5ee81 100644
--- a/src/custom-border/custom-dv-9/custom-dv-9.tsx
+++ b/src/custom-border/custom-dv-9/custom-dv-9.tsx
@@ -46,8 +46,7 @@ export const CustomDV9 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      * 绘制边框svg
      */
     const renderBorder = () => {
diff --git a/src/custom-button/custom-button.scss b/src/custom-button/custom-button.scss
index aa3fde3..877f80d 100644
--- a/src/custom-button/custom-button.scss
+++ b/src/custom-button/custom-button.scss
@@ -5,7 +5,7 @@
   }
   @include e('raw-item') {
     position: relative;
-    color: var(--svgColor, getCssVar(screen-dashboard, primary-color));
+    color: var(#{getCssVarName(panel-button-svg-color)}, getCssVar(screen-dashboard, primary-color));
   }
 }
 @include b('panel-button-custon-btn') {
@@ -13,7 +13,7 @@
   width: 100%;
   height: 100%;
   padding: getCssVar(spacing-tight);
-  color: var(--svgColor, getCssVar(screen-dashboard, text-color));
+  color: var(#{getCssVarName(panel-button-svg-color)}, getCssVar(screen-dashboard, text-color));
   text-align: center;
   cursor: pointer;
 
@@ -30,20 +30,20 @@
     width: 100%;
     height: 100%;
     filter: drop-shadow(
-      var(--svgBorderColor, getCssVar(screen-dashboard, primary-color)) 0 0 2px
+      var(#{getCssVarName(panel-button-svg-border-color)}, getCssVar(screen-dashboard, primary-color)) 0 0 2px
     );
   }
 
   .dv-button-svg-bg {
-    opacity: var(--svgBgOpacity);
-    fill: var(--svgBgColor, getCssVar(screen-dashboard, primary-color));
+    opacity: getCssVar(panel-button-svg-bg-opacity);
+    fill: var(#{getCssVarName(panel-button-svg-bg-color)}, getCssVar(screen-dashboard, primary-color));
     stroke: transparent;
     stroke-width: 0;
   }
 
   .dv-button-svg-line {
     fill: transparent;
-    stroke: var(--svgColor, getCssVar(screen-dashboard, primary-color));
+    stroke: var(#{getCssVarName(panel-button-svg-color)}, getCssVar(screen-dashboard, primary-color));
     stroke-width: 2;
     vector-effect: non-scaling-stroke;
   }
diff --git a/src/custom-button/custom-button.tsx b/src/custom-button/custom-button.tsx
index 3df4361..aeb5343 100644
--- a/src/custom-button/custom-button.tsx
+++ b/src/custom-button/custom-button.tsx
@@ -86,11 +86,12 @@ export const CustomButton = defineComponent({
     });
 
     Object.assign(svgStyle.value, {
-      '--svgBorderColor': svgBorderColor.value,
-      '--svgColor': svgColor.value,
-      '--svgBgColor': svgBgColor.value,
-      '--svgBgOpacity': svgBgOpacity.value,
+      [ns.cssVarBlockName('svg-border-color')]: svgBorderColor.value,
+      [ns.cssVarBlockName('svg-color')]: svgColor.value,
+      [ns.cssVarBlockName('svg-bg-color')]: svgBgColor.value,
+      [ns.cssVarBlockName('svg-bg-opacity')]: svgBgOpacity.value,
     });
+    console.log('svgStyle', ns, svgStyle.value);
 
     watch(
       () => c.data,
diff --git a/src/percent-pond/percent-pond.scss b/src/percent-pond/percent-pond.scss
index 3e68f9e..d720ee5 100644
--- a/src/percent-pond/percent-pond.scss
+++ b/src/percent-pond/percent-pond.scss
@@ -1,75 +1,95 @@
-@include b('percent-pond'){
-    display: flex;
-    gap: 10px;
-    align-items: end;
-    width: 100%;
-    @include e('slider'){
-        flex: 1;
-        @include m('line'){
-            position: relative;
-            width: 100%;
-            height: 1px;
-            overflow: visible;
-            background-color: getCssVar(color, border);
-            opacity: 0.6;
+$cover-slider: (
+  height: 8px,
+  color: #000,
+  bgColor: #fff,
+  use-cover-color: getCssVar(color, primary),
+);
+@include b('percent-pond') {
+  @include set-component-css-var('cover-slider', $cover-slider);
+
+  display: flex;
+  gap: 10px;
+  align-items: end;
+  width: 100%;
+  @include e('slider') {
+    flex: 1;
+    @include m('line') {
+      position: relative;
+      width: 100%;
+      height: 1px;
+      overflow: visible;
+      background-color: getCssVar(color, border);
+      opacity: 0.6;
 
-            &::before {
-                position: absolute;
-                top: -2px;
-                left: 0;
-                width: 4px;
-                height: 4px;
-                content: "";
-                background-color: getCssVar(color, primary);
-            }
+      &::before {
+        position: absolute;
+        top: -2px;
+        left: 0;
+        width: 4px;
+        height: 4px;
+        content: '';
+        background-color: getCssVar(color, primary);
+      }
 
-            &::after {
-                position: absolute;
-                top: -2px;
-                right: 0;
-                width: 4px;
-                height: 4px;
-                content: "";
-                background-color: getCssVar(color, primary);
-            }
-        }
-        @include m('cover-slider'){
-            position: relative;
-            width: 100%;
-            height: 5px;
-            margin-top: 16px;
-            background-color: getCssVar(color,fill,0);
-        }
-        @include m('use-cover'){
-            position: absolute;
-            left: 0;
-            width: 0;
-            height: 100%;
-            background-color: getCssVar(color, primary);
-            opacity: 0.5;
-        }
-        @include m('slider-arrow'){
-            position: absolute;
-            top: -28px;
-            left: 0;
-            color: getCssVar(color, primary);
-            opacity: 0.5;
-        }
+      &::after {
+        position: absolute;
+        top: -2px;
+        right: 0;
+        width: 4px;
+        height: 4px;
+        content: '';
+        background-color: getCssVar(color, primary);
+      }
+    }
+    @include m('cover-slider') {
+      position: relative;
+      width: 100%;
+      height: getCssVar(cover-slider, height);
+      margin-top: 16px;
+      color: getCssVar(cover-slider, color);
+      background-color: getCssVar(cover-slider, bgcolor);
+      background-image: linear-gradient(
+        315deg,
+        currentcolor 25%,
+        transparent 25%,
+        transparent 50%,
+        currentcolor 50%,
+        currentcolor 75%,
+        transparent 75%,
+        transparent
+      );
+      background-size: 20px 20px;
+    }
+    @include m('use-cover') {
+      position: absolute;
+      left: 0;
+      width: 0;
+      height: 100%;
+      background-color: getCssVar(cover-slider, use-cover-color);
+      opacity: 0.5;
+    }
+    @include m('slider-arrow') {
+      position: absolute;
+      top: -28px;
+      left: 0;
+      color: getCssVar(cover-slider, use-cover-color);
+      opacity: 0.5;
+    }
+  }
+  @include e('value') {
+    display: flex;
+    flex: 0;
+    align-items: end;
+    color: getCssVar(color, primary, light, active);
+    @include m('current') {
+      display: inline-block;
+      font-size: 32px;
+      line-height: 1;
     }
-    @include e('value'){
-        display: flex;
-        flex: 0;
-        align-items: end;
-        color: getCssVar(color,primary,light,active);
-        @include m('current'){
-            display: inline-block;
-            font-size: 32px;
-            line-height: 1;
-        }
-        @include m('total'){
-            display: inline-block;
-            font-size: 16px;
-            font-weight: 600;
-        }
+    @include m('total') {
+      display: inline-block;
+      font-size: 16px;
+      font-weight: 600;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/screen-portlet/screen-portlet.scss b/src/screen-portlet/screen-portlet.scss
index 224a776..8591633 100644
--- a/src/screen-portlet/screen-portlet.scss
+++ b/src/screen-portlet/screen-portlet.scss
@@ -7,9 +7,6 @@
     .#{bem(portlet-layout-header)} {
       position: relative;
     }
-    .#{bem(portlet-layout-content)} {
-      padding-top: getCssVar(spacing, tight);
-    }
 
     .#{bem(portlet-layout-header, left)} {
       position: unset;
@@ -78,8 +75,8 @@
   }
 
   @include when(full-border) {
-    .#{bem(custom-border, wrapper)} {
-      bottom: 0;
+    > svg {
+      transform: translateY(50px);
     }
   }
 }
diff --git a/src/screen-radio-list/screen-radio-list.controller.ts b/src/screen-radio-list/screen-radio-list.controller.ts
index 7c42821..d78a542 100644
--- a/src/screen-radio-list/screen-radio-list.controller.ts
+++ b/src/screen-radio-list/screen-radio-list.controller.ts
@@ -15,6 +15,14 @@ export class ScreenRadioListEditorController extends CodeListEditorController<IR
    */
   speed: number = 3000;
 
+  /**
+   * 按钮间隔
+   *
+   * @type {number}
+   * @memberof ScreenRadioListEditorController
+   */
+  btnSpace: number = 0;
+
   /**
    * @description 绘制模式(button: 按钮模式, radio: 单选框模式)
    * @type {('button' | 'radio')}
@@ -24,12 +32,15 @@ export class ScreenRadioListEditorController extends CodeListEditorController<IR
 
   protected async onInit(): Promise<void> {
     super.onInit();
-    const { speed, renderMode } = this.editorParams;
+    const { speed, renderMode, btnSpace } = this.editorParams;
     if (speed) {
       this.speed = Number(speed);
     }
     if (renderMode) {
       this.renderMode = renderMode;
     }
+    if (btnSpace) {
+      this.btnSpace = Number(btnSpace);
+    }
   }
 }
diff --git a/src/screen-radio-list/screen-radio-list.scss b/src/screen-radio-list/screen-radio-list.scss
index 1814e71..91e6cd2 100644
--- a/src/screen-radio-list/screen-radio-list.scss
+++ b/src/screen-radio-list/screen-radio-list.scss
@@ -5,6 +5,7 @@ $screen-radio-list: (
   'radio-border': 1px solid getCssVar(screen-dashboard, border-color),
   'radio-checked-font-weight': 600,
   'radio-label-padding-left': 0,
+  'button-space': 16px,
 );
 /* stylelint-disable no-descending-specificity */
 @include b(screen-radio-list) {
@@ -47,6 +48,17 @@ $screen-radio-list: (
     line-height: getCssVar(editor, default, line-height);
     color: getCssVar(form-item, readonly-color);
   }
+
+  @include e('button') {
+    @include when('space') {
+      margin-right: getCssVar(screen-radio-list, button-space);
+      border-radius: 4px;
+
+      .el-radio-button__inner {
+        border-left: 1px;
+      }
+    }
+  }
 }
 
 @include b(form-item) {
diff --git a/src/screen-radio-list/screen-radio-list.tsx b/src/screen-radio-list/screen-radio-list.tsx
index fcfd0ef..7f8d874 100644
--- a/src/screen-radio-list/screen-radio-list.tsx
+++ b/src/screen-radio-list/screen-radio-list.tsx
@@ -62,6 +62,7 @@ export const ScreenRadioList = defineComponent({
       timer = setInterval(() => {
         loopSelect();
       }, c.speed);
+      loopSelect();
     });
 
     onBeforeMount(() => {
@@ -127,6 +128,7 @@ export const ScreenRadioList = defineComponent({
     return {
       timer,
       ns,
+      c,
       editorModel,
       items,
       valueText,
@@ -168,7 +170,14 @@ export const ScreenRadioList = defineComponent({
                 <el-radio-button
                   key={index}
                   border
-                  class={[this.ns.e('button')]}
+                  class={[
+                    this.ns.e('button'),
+                    this.ns.is('space', this.c.btnSpace !== 0),
+                  ]}
+                  style={{
+                    [this.ns.cssVarBlockName('button-space')]:
+                      `${this.c.btnSpace}px`,
+                  }}
                   label={notNilEmpty(item.value) ? String(item.value) : ''}
                   disabled={this.disabled || item.disableSelect === true}
                 >
diff --git a/src/screen-real-time/screen-real-time.scss b/src/screen-real-time/screen-real-time.scss
index 23b8cd0..c089af8 100644
--- a/src/screen-real-time/screen-real-time.scss
+++ b/src/screen-real-time/screen-real-time.scss
@@ -13,7 +13,6 @@ $screen-real-time: (
   display: flex;
   align-items: getCssVar('screen-real-time', 'align-items');
   height: getCssVar('screen-real-time', 'height');
-  padding-left: getCssVar('screen-real-time', 'padding-left');
   font-size: getCssVar('screen-real-time', 'font-size');
   color: getCssVar('screen-dashboard', 'primary-text-color');
   white-space: getCssVar('screen-real-time', 'white-space');
-- 
Gitee