From 133d5e7c830fea4fbe94a63d542d46bc2625462d Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 4 Jul 2025 13:57:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E9=A2=84=E8=A7=88=E5=A4=96?=
 =?UTF-8?q?=E5=B1=82=E7=BB=84=E4=BB=B6=E3=80=81radio=E5=A2=9E=E5=8A=A0opti?=
 =?UTF-8?q?ons=E6=8E=A5=E5=8F=97=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipRadio.vue  |  80 ++++++++++++++++++----------
 src/components/PreviewTab.vue | 120 ++++++++++++++++++++++++++++++++++++++++++
 src/views/elementGroups.vue   |  31 +++++++++--
 3 files changed, 197 insertions(+), 34 deletions(-)
 create mode 100644 src/components/PreviewTab.vue

diff --git a/src/components/GuipRadio.vue b/src/components/GuipRadio.vue
index e5b286c..018e88b 100644
--- a/src/components/GuipRadio.vue
+++ b/src/components/GuipRadio.vue
@@ -1,13 +1,10 @@
 <template>
-  <el-form-item :class="[{'column':column},'form-item']" :label="label" :prop="prop" :rules="rules" :required="required">
+  <el-form-item :class="[{ 'column': column }, 'form-item']" :label="label" :prop="prop" :rules="rules"
+    :required="required">
     <el-radio-group v-model="selectedValue" v-bind="$attrs" @change="handleChange">
-      <el-radio
-        v-for="option in processedOptions"
-        :key="getValue(option)"
-        :label="getValue(option)"
-        :disabled="option.disabled"
-      >
-        {{ getLabel(option) }}
+      <el-radio v-for="(optionValue, optionKey) in normalizedOptions" :key="optionKey"
+        :label="getValue(optionValue)" :disabled="isDisabled(optionValue[valueKey])">
+        {{ getLabel(optionValue) }}
       </el-radio>
     </el-radio-group>
   </el-form-item>
@@ -18,17 +15,19 @@ export default {
   name: 'MyRadioGroup',
   props: {
     // 是否是纵向排列
-    column:{
-      type:String,
-      default:''
+    column: {
+      type: String,
+      default: ''
     },
-    required:{
-      type:Boolean,
-      default:false
+    required: {
+      type: Boolean,
+      default: false
     },
-    // 选项列表，格式为 [{ label: '显示文本', value: '值', disabled: false }]
+    // 选项列表，支持多种格式:
+    // 1. 数组格式: [{ label: '显示文本', value: '值', disabled: false }]
+    // 2. 对象格式: { key1: 'value1', key2: 'value2' }
     options: {
-      type: Array,
+      type: [Array, Object],
       required: true,
     },
     // 当前选中的值，使用 v-model 绑定
@@ -64,19 +63,27 @@ export default {
     formatter: {
       type: Function,
       default: null
+    },
+    // 禁用选项的key数组
+    disabledKeys: {
+      type: Array,
+      default: () => []
     }
   },
   computed: {
-    processedOptions() {
-      return this.options.map(option => {
-        if (this.formatter) {
-          return {
-            ...option,
-            formattedLabel: this.formatter(option)
-          }
-        }
-        return option
-      })
+    // 统一处理数组和对象格式
+    normalizedOptions() {
+      // 数组
+      if (Array.isArray(this.options)) {
+        return this.options;
+      } else if (typeof this.options === 'object' && this.options !== null) {
+        // 将对象格式统一转换为数组
+        return Object.keys(this.options).map(key => ({
+          key,
+          value: this.options[key]
+        }));
+      }
+      return [];
     }
   },
   data() {
@@ -97,12 +104,27 @@ export default {
       this.$emit('change', value); // 触发 change 事件
     },
     getLabel(option) {
-      if (this.formatter) return option.formattedLabel || this.formatter(option)
-      return option[this.labelKey]
+      if (this.formatter) return this.formatter(option);
+
+      // 处理对象格式的选项
+      if (typeof option === 'object' && 'key' in option && 'value' in option) {
+        return option.value;
+      }
+
+      return option[this.labelKey] || option;
     },
     getValue(option) {
-      return option[this.valueKey]
+      // 处理对象格式的选项
+      if (typeof option === 'object' && 'key' in option && 'value' in option) {
+        return option.key;
+      }
+
+      return option[this.valueKey] || option;
     },
+    // 判断选项是否禁用
+    isDisabled(key) {
+      return this.disabledKeys.includes(key);
+    }
   },
 };
 </script>
diff --git a/src/components/PreviewTab.vue b/src/components/PreviewTab.vue
new file mode 100644
index 0000000..1c317d3
--- /dev/null
+++ b/src/components/PreviewTab.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="preview-container">
+        <div class="preview_top flex-between">
+            <b class="preview-title">实时预览</b>
+            <div class="toggle-container">
+                <div class="toggle-button" v-if="showPc" :class="{ active: activeView === 'desktop' }"
+                    @click="switchView('desktop')">
+                    电脑端
+                </div>
+                <div class="toggle-button" v-if="showMobile" :class="{ active: activeView === 'mobile' }"
+                    @click="switchView('mobile')">
+                    手机端
+                </div>
+            </div>
+        </div>
+
+        <div class="content-container">
+            <!-- 电脑端内容 -->
+            <div v-show="activeView === 'desktop'" class="desktop-view">
+                <slot name="desktop"></slot>
+            </div>
+
+            <!-- 手机端内容 -->
+            <div v-show="activeView === 'mobile'" class="mobile-view">
+                <slot name="mobile"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DevicePreview',
+    props:{
+        showMobile:{
+            type:Boolean,
+            default:true
+        },
+        showPc:{
+            type:Boolean,
+            default:true
+        },
+    },
+    data() {
+        return {
+            activeView: 'desktop' // 默认显示电脑端
+        }
+    },
+    methods: {
+        switchView(view) {
+            this.activeView = view;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.preview-container {
+    max-width: 800px;
+    min-width: 300px;
+    margin: 0 auto;
+    padding: 24px;
+    border-radius: 4px;
+    background: #FAFAFA;
+}
+.preview_top{
+    margin-bottom: 20px;
+}
+
+.preview-title {
+    text-align: center;
+    color: #1E2226;
+}
+
+.toggle-container {
+    display: flex;
+    height: 26px;
+    justify-content: center;
+    align-items: center;
+    padding: 3px 6px;
+    border-radius: 4px;
+    background: #F2F3F5;
+}
+
+.toggle-button {
+    padding: 1px 12px;
+    border-radius: 2px;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all 0.3s ease; 
+}
+
+.toggle-button.active {
+    color: #006AFF;
+    background: #FFFFFF;
+}
+
+.toggle-button.active:after {
+    /* content: '';
+    position: absolute;
+    bottom: -11px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #1890ff; */
+}
+
+.content-container {
+    /* min-height: 300px;
+    padding: 20px;
+    border: 2px solid #ffd700;
+    border-radius: 4px;
+    background-color: #fff; */
+}
+
+.desktop-view,
+.mobile-view {
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 28e52b7..ffd18af 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -5,18 +5,33 @@
             <PromptText text='这是一个提示框' :type="2"/>
             <PromptText text='这是一个提示框' :type="3"/>
 
+            <div class="ele-item">
+                    <label for="">实时预览外层嵌套</label>
+                    <!-- 默认 显示电脑端、手机端 -->
+                    <!--  :showMobile="false"  :showPc="false" -->
+                    <DevicePreview >
+                        <template #desktop>
+                            电脑端内容-内容自定义
+                        </template>
+                        <template #mobile>
+                            内容自定义
+                            手机端端内容-- 手机端端内容
+                        </template>
+                    </DevicePreview>
+                </div>
+
             <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
             <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
 
                 <div class="ele-item">
-                    <label for="">单选框11：</label>
+                    <label for="">单选框(对象格式)：</label>
                     <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
                         @change="radioChange" :rules="rules.language" />
                 </div>
                 <div class="ele-item">
-                    <label for="">单选框11：</label>
-                    <GuipRadio v-model="form.language" :options="languageOptions" label="自定义属性" prop="language"
-                        @change="radioChange" :rules="rules.language" label-key="name"  :formatter="formatLabel"
+                    <label for="">单选框2（数组格式 + 自定义取值）：</label>
+                    <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
+                        @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
                         value-key="id" />
                 </div>
                 <div class="ele-item">
@@ -516,6 +531,7 @@ import HoverButton from '@/components/HoverButton.vue'
 import GuipFormItem from '@/components/GuipFormItem.vue'
 import SvgIcon from '@/components/SvgIcon.vue';
 import PromptText from "@/components/PromptText.vue";
+import DevicePreview from "@/components/PreviewTab.vue";
 
 
 export default {
@@ -534,6 +550,7 @@ export default {
         HoverButton,
         SvgIcon,
         GuipFormItem,
+        DevicePreview,
         CustomDropdown
     },
     data() {
@@ -614,12 +631,16 @@ export default {
                 input2: '',
                 input3: '',
             },
-            languageOptions: [
+            languageOptions1: [
                 { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh',id:'1',name:'麻辣烫' },
                 { label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh',id:'10',name:'易烊千玺' },
                 { label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh',id:'11',name:'王鹤di' }, // 禁用选项
                 { label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh',id:'12',name:'王俊凯' },
             ],
+            languageOptions:{
+                '20':'查重站',
+                '31':'AI站'
+            },
             rules: {
                 username: [
                     { required: true, message: '请输入用户名', trigger: 'blur' }