From 224aec7c8a7401b7b02f417faaffd0e0aa2e5cd1 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Fri, 22 Mar 2024 15:50:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6):=20ra?=
 =?UTF-8?q?dio=E6=A8=A1=E5=BC=8F=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/widget/deWidget/DeRadio.vue    | 15 +++----
 core/frontend/src/lang/en.js                  |  6 +++
 core/frontend/src/lang/tw.js                  |  6 +++
 core/frontend/src/lang/zh.js                  |  6 +++
 core/frontend/src/views/background/index.vue  | 39 ++++++++++---------
 5 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/core/frontend/src/components/widget/deWidget/DeRadio.vue b/core/frontend/src/components/widget/deWidget/DeRadio.vue
index 7e9d7262c7..3135d48509 100644
--- a/core/frontend/src/components/widget/deWidget/DeRadio.vue
+++ b/core/frontend/src/components/widget/deWidget/DeRadio.vue
@@ -89,7 +89,7 @@ export default {
         this.init();
       });
     },
-    'element.style': {
+    radioStyle: {
       handler() {
         this.setPlaceholderColor()
       },
@@ -103,6 +103,12 @@ export default {
       this.setPlaceholderColor();
     });
   },
+  beforeDestroy() {
+    let styleEle = document.querySelector(`#radio-style${this.id}`)
+    if (styleEle) {
+      styleEle. parentElement.removeChild(styleEle)
+    }
+  },
   methods: {
     setPlaceholderColor() {
       let styleEle = document.querySelector(`#radio-style${this.id}`)
@@ -121,18 +127,13 @@ export default {
       }
       this.options = this.newList.slice(0, this.maxLength);
     },
-    customInputStyle() {},
     init() {
       if (this.defaultFirst && this.list.length > 0) {
         this.selectValue = this.list[0].value;
       }
-      if (!this.list || !this.list.length) {
-        this.customInputStyle();
-        return;
-      }
     },
     visualChange(val) {
-      this.$emit("visual-change", val);
+      this.$emit("change", val);
     },
   },
 };
diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 077ac68f1c..80d44e924f 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -68,6 +68,12 @@ export default {
     at_the_beginning_of_the_month: 'At the beginning of the month',
     at_the_beginning_of_the_year: 'At the beginning of the year',
     custom: 'custom',
+    dropdown_display: 'Dropdown display',
+    tile_display: 'Tile display',
+    display_format: 'Display format',
+    radio: 'Radio',
+    tab_switching: 'Tab switching',
+    number_of_display_options: 'Number of display options'
   },
   track: {
     upload_limit_format: 'The image format is incorrect. It supports JPG and PNG',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index d65f9e383f..29a8ee5cc3 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -68,6 +68,12 @@ export default {
     at_the_beginning_of_the_month: '月初',
     at_the_beginning_of_the_year: '年初',
     custom: '自定義',
+    dropdown_display: '下拉展示',
+    tile_display: '平鋪展示',
+    display_format: '展示形式',
+    radio: '單選框',
+    tab_switching: 'Tab切換',
+    number_of_display_options: '展示選項數'
   },
   track: {
     upload_limit_format: '圖片格式錯誤，支持JPG，PNG',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index 41b2190dcb..5d7f34c70a 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -72,6 +72,12 @@ export default {
     at_the_beginning_of_the_month: '月初',
     at_the_beginning_of_the_year: '年初',
     custom: '自定义',
+    dropdown_display: '下拉展示',
+    tile_display: '平铺展示',
+    display_format: '展示形式',
+    radio: '单选框',
+    tab_switching: 'Tab切换',
+    number_of_display_options: '展示选项数'
   },
   route: {
     dashboard: '首页',
diff --git a/core/frontend/src/views/background/index.vue b/core/frontend/src/views/background/index.vue
index 060c3e273c..5f09dd7895 100644
--- a/core/frontend/src/views/background/index.vue
+++ b/core/frontend/src/views/background/index.vue
@@ -254,19 +254,20 @@
             v-model="curComponent.style.showMode"
             size="mini"
           >
-            <el-radio label="select">{{ $t('下拉展示') }}</el-radio>
-            <el-radio label="radio">{{ $t('平铺展示') }}</el-radio>
+            <el-radio label="select">{{ $t('time.dropdown_display') }}</el-radio>
+            <el-radio label="radio">{{ $t('time.tile_display') }}</el-radio>
           </el-radio-group>
           </el-col>
         </el-row>
         <el-row
+          v-if="curComponent.style.showMode === 'radio'"
           style="height: 40px;overflow: hidden;"
         >
         <el-col
             :span="3"
             style="padding-left: 10px;padding-top: 8px"
           >
-          {{ $t('展示形式') }}
+          {{ $t('time.display_format') }}
         </el-col>
         <el-col
             :span="20"
@@ -276,31 +277,32 @@
             v-model="curComponent.style.showStyle"
             size="mini"
           >
-            <el-radio label="single">{{ $t('单选框') }}</el-radio>
-            <el-radio label="tab">{{ $t('Tab切换') }}</el-radio>
+            <el-radio label="single">{{ $t('time.radio') }}</el-radio>
+            <el-radio label="tab">{{ $t('time.tab_switching') }}</el-radio>
           </el-radio-group>
         </el-col>
         </el-row>
         <el-row
+          v-if="curComponent.style.showMode === 'radio'"
           style="height: 40px;overflow: hidden;"
         >
         <el-col
-            :span="3"
-            style="padding-left: 10px;padding-top: 8px"
-          >
-          {{$t('展示选项数')}}
+          :span="3"
+          style="padding-left: 10px;padding-top: 8px"
+        >
+          {{$t('time.number_of_display_options')}}
         </el-col>
         <el-col
-            :span="8"
-            style="padding-left: 10px;padding-top: 8px"
-          >
+          :span="8"
+          style="padding-left: 10px;padding-top: 8px"
+        >
           <el-input-number
-                v-model="curComponent.style.showNum"
-                :min="1"
-                :max="10"
-                controls-position="right"
-                size="small"
-              />
+            v-model="curComponent.style.showNum"
+            :min="1"
+            :max="10"
+            controls-position="right"
+            size="small"
+          />
           </el-col>
         </el-row>
       </template>
@@ -524,6 +526,7 @@ span {
 
 .main-content {
   border: 1px solid #E6E6E6;
+  padding-bottom: 16px;
 }
 
 .params-title {