jmash-core-mp 0.1.76 → 0.1.78

package/src/components/common/jmash-form-cell.mpx

@@ -1,525 +1,491 @@
-<template>
-    <!-- 表单基础单元：左侧标题 + 右侧内容/输入/开关 -->
-    <view
-        class="form-cell {{ required ? 'form-cell-required' : '' }} {{ border ? 'form-cell-border' : '' }} {{ type === 'textarea' ? 'form-cell-textarea-main' : '' }}">
-        <!-- 标题容器 -->
-        <view class="form-cell-label-container" wx:if="{{ label }}">
-            <view class="form-cell-label">
-                <text class="form-cell-label-required" wx:if="{{ required }}">*</text>
-                {{ label }}
-            </view>
-            <view wx:if="{{ subLabel }}" class="form-cell-sub-label">{{ subLabel }}</view>
-        </view>
-
-        <!-- 内容容器 -->
-        <view class="form-cell-content">
-            <!-- 输入框类型 -->
-            <block wx:if="{{ type === 'input' }}">
-                <input class="form-cell-input" style="{{ label ? 'text-align: right;' : 'text-align: left;' }}"
-                    disabled="{{ readonly }}" type="{{ inputType }}" value="{{ value }}" placeholder="{{ placeholder }}"
-                    placeholder-class="form-cell-placeholder" maxlength="{{ maxLength }}" data-field="{{ field }}"
-                    bind:input="handleInput" />
-            </block>
-
-            <!-- 数字输入框类型 -->
-            <block wx:if="{{ type === 'number' }}">
-                <input class="form-cell-input" style="{{ label ? 'text-align: right;' : 'text-align: left;' }}"
-                    disabled="{{ readonly }}" type="{{ inputType }}" value="{{ value }}" placeholder="{{ placeholder }}"
-                    placeholder-class="form-cell-placeholder" maxlength="{{ maxLength }}" data-field="{{ field }}"
-                    bind:input="handleInput" />
-            </block>
-
-            <!-- 文本域类型 -->
-            <block wx:elif="{{ type === 'textarea' }}">
-                <textarea class="form-cell-textarea" disabled="{{ readonly }}" value="{{ value }}"
-                    placeholder="{{ placeholder }}" placeholder-class="form-cell-placeholder"
-                    maxlength="{{ maxLength }}" data-field="{{ field }}" bind:input="handleInput" />
-            </block>
-
-            <!-- 开关类型 -->
-            <block wx:elif="{{ type === 'switch' }}">
-                <switch class="form-cell-switch" disabled="{{ readonly }}" checked="{{ value }}" color="#FC8E24"
-                    data-field="{{ field }}" bind:change="handleSwitch" />
-            </block>
-
-            <!-- 选择器类型 -->
-            <block wx:elif="{{ type === 'picker' }}">
-                <view class="form-cell-picker"
-                    style="{{ label ? 'justify-content: flex-end;' : 'justify-content: flex-start;' }}"
-                    data-field="{{ field }}" bind:tap="{{ readonly ? '' : 'handlePicker' }}">
-                    <view class="form-cell-picker-text {{ value ? '' : 'form-cell-picker-empty' }}"
-                        style="{{ label ? '' : 'margin-right: auto;' }}">
-                        {{ value || placeholder }}
-                    </view>
-                    <text class="form-cell-arrow">›</text>
-                </view>
-            </block>
-
-            <!-- 单选类型 -->
-            <block wx:elif="{{ type === 'radio' }}">
-                <cube-radio-group class="form-cell-radio-group" inline>
-                    <cube-radio class="form-cell-radio" wx:for="{{ radioOptionList }}" wx:key="index"
-                        wx:for-item="option" option="{{ option }}" value="{{ radioInnerValue }}"
-                        data-field="{{ field }}" bind:input="handleRadioChange" />
-                </cube-radio-group>
-            </block>
-
-            <!-- 选择器选项类型 -->
-            <block wx:elif="{{ type === 'picker-option' }}">
-                <!-- 展示区 -->
-                <view class="form-cell-picker"
-                    style="{{ label ? 'justify-content: flex-end;' : 'justify-content: flex-start;' }}"
-                    data-field="{{ field }}" bind:tap="{{ readonly ? '' : 'handlePickerOptTap' }}">
-                    <view class="form-cell-picker-text {{ pickerOptDisplayText ? '' : 'form-cell-picker-empty' }}"
-                        style="{{ label ? '' : 'margin-right: auto;' }}">
-                        {{ pickerOptDisplayText || placeholder }}
-                    </view>
-                    <text class="form-cell-arrow">›</text>
-                </view>
-                <!-- 弹出选择列表 -->
-                <cube-picker-popup wx:ref="pickerOption" show="{{ pickerOptShow }}" list="{{ pickerOptList }}"
-                    selectedIndex="{{ pickerOptSelectedIndex }}" fullyStop="true" bind:change="handlePickerOptChange"
-                    bind:confirm="handlePickerOptConfirm" bind:cancel="handlePickerOptClose" />
-            </block>
-
-            <!-- 上传图片类型 -->
-            <block wx:elif="{{ type === 'upload' }}">
-                <jmash-upload-picture limit="1" value="{{ value }}" bind:getImageArray="handleImageChange" />
-            </block>
-
-            <!-- 插槽类型 -->
-            <block wx:elif="{{ type === 'slot' }}">
-                <slot />
-            </block>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-import { createComponent, ref, computed, watch } from "@mpxjs/core";
-import { EventBase } from "../../api/types";
-
-createComponent({
-    options: {
-        styleIsolation: "apply-shared",
-    },
-    properties: {
-        // 表单字段名
-        field: {
-            type: String,
-            value: "",
-        },
-        // 左侧标题
-        label: {
-            type: String,
-            value: "",
-        },
-        // 是否必填
-        required: {
-            type: Boolean,
-            value: false,
-        },
-        // 类型：number / input / textarea / radio / switch / picker / picker-option / upload / slot
-        type: {
-            type: String,
-            value: "input",
-        },
-        // 单选选项（type 为 radio 时有效）
-        radioData: {
-            type: Array as any,
-            value: [],
-        },
-        // 单选选项映射：{ valueLable: "显示字段", valueKey: "值字段" }
-        radioOptions: {
-            type: Object,
-            value: {
-                valueLable: "value",
-                valueKey: "key",
-            },
-        },
-        // 输入类型
-        inputType: {
-            type: String,
-            value: "text",
-        },
-        // 当前值
-        value: {
-            type: null,
-            value: "",
-        },
-        // 占位文本
-        placeholder: {
-            type: String,
-            value: "",
-        },
-        // 最大长度（textarea 有效）
-        maxLength: {
-            type: Number,
-            value: 500,
-        },
-        // 是否显示底边框
-        border: {
-            type: Boolean,
-            value: true,
-        },
-        // 子标题
-        subLabel: {
-            type: String,
-            value: "",
-        },
-        // 是否只读
-        readonly: {
-            type: Boolean,
-            value: false,
-        },
-        // 自动选择器数据列表
-        pickerData: {
-            type: Array as any,
-            value: [],
-        },
-        // 自动选择器选项映射：{ valueLable: "显示字段", valueKey: "值字段" }
-        pickerOptions: {
-            type: Object,
-            value: {
-                valueLable: "value",
-                valueKey: "key",
-            },
-        },
-    },
-    setup(props) {
-        // 自动选择器弹框显隐
-        let pickerOptShow = ref(false);
-        // 自动选择器当前选中索引
-        let pickerOptSelectedIndex = ref([0]);
-        // 自动选择器展示文本
-        let pickerOptDisplayText = ref("");
-        // 自动选择器数据转 cube-picker-popup 格式（二维数组）
-        let pickerOptList = computed(() => {
-            const { pickerData, pickerOptions } = props;
-            if (!pickerData || !pickerData.length) return [[]];
-            return [
-                pickerData.map((item: any) => ({
-                    text: item[pickerOptions.valueLable],
-                    value: item[pickerOptions.valueKey],
-                    ...item,
-                })),
-            ];
-        });
-
-        // 单选选项 value 是否为 boolean 类型
-        let isBooleanRadio = computed(() => {
-            const { radioData, radioOptions } = props;
-            if (!radioData || !radioData.length) return false;
-            return radioData.some((item) => typeof item[radioOptions.valueKey] === "boolean");
-        });
-        // 单选选项转 cube-radio 格式
-        let radioOptionList = computed(() => {
-            const { radioData, radioOptions } = props;
-            if (!radioData || !radioData.length) return [];
-            return radioData.map((item: any) => ({
-                text: item[radioOptions.valueLable],
-                value: isBooleanRadio.value ? String(item[radioOptions.valueKey]) : item[radioOptions.valueKey],
-                disabled: props.readonly,
-            }));
-        });
-        // 传给 cube-radio 的 value（boolean 时转字符串）
-        let radioInnerValue = ref<string | number | boolean>("");
-
-        watch(() => props.value, (val) => {
-            if (isBooleanRadio.value) {
-                radioInnerValue.value = val ? "true" : "false";
-            } else {
-                radioInnerValue.value = val;
-            }
-        }, { immediate: true });
-
-        return {
-            pickerOptShow,
-            pickerOptSelectedIndex,
-            pickerOptDisplayText,
-            pickerOptList,
-            isBooleanRadio,
-            radioOptionList,
-            radioInnerValue,
-        };
-    },
-    observers: {
-        // 当 value、data 或 options 变化时，刷新展示文本和选中索引
-        "value, pickerData, pickerOptions"(value: any, pickerData: any[], pickerOptions: any) {
-            if (!pickerData || !pickerData.length || !pickerOptions || !pickerOptions.valueKey) {
-                this.pickerOptSelectedIndex = [0];
-                this.pickerOptDisplayText = "";
-                return;
-            }
-            const index = pickerData.findIndex((item) => item[pickerOptions.valueKey] === value);
-            const selectedIndex = index >= 0 ? index : 0;
-            const displayText = index >= 0 ? pickerData[index][pickerOptions.valueLable] : "";
-            this.pickerOptSelectedIndex = [selectedIndex];
-            this.pickerOptDisplayText = displayText;
-        },
-    },
-    methods: {
-        // 输入框内容变化
-        handleInput(e: EventBase) {
-            const field = e.currentTarget.dataset.field;
-            this.triggerEvent("change", { field, value: e.detail.value });
-        },
-
-        // switch 状态变化
-        handleSwitch(e: EventBase) {
-            const field = e.currentTarget.dataset.field;
-            this.triggerEvent("change", { field, value: e.detail.value });
-        },
-
-        // 单选变化
-        handleRadioChange(e: EventBase) {
-            const field = e.currentTarget.dataset.field;
-            let value = e.detail.value;
-            // boolean 类型时转回 boolean
-            if (this.isBooleanRadio) {
-                value = value === "true";
-            }
-            this.triggerEvent("change", { field, value });
-        },
-
-        // 选择器点击
-        handlePicker(e: EventBase) {
-            const field = e.currentTarget.dataset.field;
-            this.triggerEvent("picker", { field });
-        },
-
-        // 上传图片变化
-        handleImageChange(e: EventBase) {
-            const imageArr = e.detail as string[];
-            this.triggerEvent("change", { field: this.field, value: imageArr[0] || "" });
-        },
-
-        // === 自动选择器方法 ===
-
-        // 点击展示区，打开选择弹框
-        handlePickerOptTap() {
-            // 同步当前 value 对应的索引
-            this._feedbackPickerOpt();
-            this.pickerOptShow = true;
-            if (this.$refs.pickerOption) this.$refs.pickerOption.show();
-        },
-        // 关闭弹框（未确认，索引回滚到当前值对应项）
-        handlePickerOptClose() {
-            this.pickerOptShow = false;
-            if (this.$refs.pickerOption) this.$refs.pickerOption.hide();
-            this._feedbackPickerOpt();
-        },
-        // 滚动选择（仅记录索引，显示文本保持已确认值，避免未确认关闭时显示与数据不一致）
-        handlePickerOptChange(e: EventBase) {
-            const index = e.detail.selectedIndex as number[];
-            this.pickerOptSelectedIndex = index;
-        },
-        // 确认选择
-        handlePickerOptConfirm(e: EventBase) {
-            const index = e.detail.selectedIndex as number[];
-            const item = this.pickerData[index[0]];
-            this.pickerOptSelectedIndex = index;
-            this.pickerOptDisplayText = item[this.pickerOptions.valueLable];
-            // 关闭弹框
-            this.handlePickerOptClose();
-            this.triggerEvent("change", {
-                field: this.field,
-                value: item[this.pickerOptions.valueKey],
-                name: item[this.pickerOptions.valueLable],
-                info: item,
-            });
-        },
-        // 同步 value 到选中索引
-        _feedbackPickerOpt() {
-            if (!this.pickerData || !this.pickerData.length || !this.pickerOptions || !this.pickerOptions.valueKey) {
-                this.pickerOptSelectedIndex = [0];
-                return;
-            }
-            const index = this.pickerData.findIndex(
-                (item: any) => item[this.pickerOptions.valueKey] === this.value
-            );
-            this.pickerOptSelectedIndex = [index >= 0 ? index : 0];
-        },
-    },
-});
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-.form-cell {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 100rpx;
-    padding: 20rpx 30rpx;
-    box-sizing: border-box;
-    background: $background-white-color;
-}
-
-// 标题容器
-.form-cell-label-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10rpx;
-
-    // 标题
-    .form-cell-label {
-        font-weight: 400;
-        font-size: 30rpx;
-        color: $font-color;
-        line-height: 42rpx;
-        margin-right: 30rpx;
-
-        .form-cell-label-required {
-            color: $red-color;
-            margin-right: 6rpx;
-        }
-    }
-
-    // 副标题
-    .form-cell-sub-label {
-        font-weight: 400;
-        font-size: $font-size-mini;
-        color: $font-color-grey-opacity;
-    }
-}
-
-// 内容容器
-.form-cell-content {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    // 输入框
-    .form-cell-input {
-        flex: 1;
-        font-weight: 400;
-        font-size: 30rpx;
-        color: $font-color;
-        line-height: 42rpx;
-    }
-
-    // 占位符
-    .form-cell-placeholder {
-        color: $font-color-grey-opacity;
-    }
-
-    // 开关
-    .form-cell-switch {
-        transform: scale(0.8);
-    }
-
-    // 单选框组
-    .form-cell-radio-group {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        .form-cell-radio {
-            margin-left: 40rpx;
-        }
-    }
-
-    // 自动选择器
-    .form-cell-picker {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: 10rpx;
-
-        .form-cell-picker-text {
-            font-weight: 400;
-            font-size: 30rpx;
-            color: $font-color;
-            line-height: 42rpx;
-        }
-
-        .form-cell-picker-empty {
-            color: $font-color-grey-opacity;
-        }
-
-        .form-cell-arrow {
-            color: $font-color-grey-opacity;
-            font-size: 32rpx;
-        }
-    }
-}
-
-// 必填项
-.form-cell-required {
-    .form-cell-label {
-        text {
-            color: $red-color;
-        }
-    }
-}
-
-// 边框
-.form-cell-border {
-    border-bottom: 1rpx solid $border-line;
-
-    :last-child {
-        border-bottom: none;
-    }
-}
-
-// 文本域主容器 垂直分布
-.form-cell-textarea-main {
-    display: flex;
-    flex-direction: column;
-    gap: 10rpx;
-    align-items: flex-start;
-
-    .form-cell-content {
-        display: block;
-        width: 100%;
-
-        // 文本域
-        .form-cell-textarea {
-            width: 100%;
-            height: 160rpx;
-            text-align: left;
-            font-weight: 400;
-            font-size: 28rpx;
-            color: $font-color;
-            line-height: 40rpx;
-            padding: 20rpx;
-            box-sizing: border-box;
-            border-radius: $border-mini-radius;
-            background-color: $background-color;
-        }
-    }
-}
-
-// 上传图片组件穿透样式
-.upload-picture-box {
-    .upload-box {
-        width: 90rpx !important;
-        height: 90rpx !important;
-        flex: auto !important;
-    }
-
-    .image_box {
-        width: 90rpx !important;
-        height: 90rpx !important;
-        flex: auto !important;
-        margin: 0 !important;
-    }
-}
-</style>
-
-<script type="application/json">
-{
-    "component": true,
-    "usingComponents": {
-        "jmash-upload-picture": "./jmash-upload-picture",
-        "cube-popup": "@mpxjs/mpx-cube-ui/lib/components/popup/index",
-        "cube-picker-popup": "@mpxjs/mpx-cube-ui/lib/components/picker-popup/index",
-        "cube-radio-group": "@mpxjs/mpx-cube-ui/lib/components/radio-group/index",
-        "cube-radio": "@mpxjs/mpx-cube-ui/lib/components/radio/index",
-    }
-}
-</script>
+<template>
+    <!-- 表单基础单元：左侧标题 + 右侧内容/输入/开关 -->
+    <view
+        class="form-cell {{ required ? 'form-cell-required' : '' }} {{ border ? 'form-cell-border' : '' }} {{ type === 'textarea' ? 'form-cell-textarea-main' : '' }}">
+        <!-- 标题容器 -->
+        <view class="form-cell-label-container" wx:if="{{ label }}">
+            <view class="form-cell-label">
+                <text class="form-cell-label-required" wx:if="{{ required }}">*</text>
+                {{ label }}
+            </view>
+            <view wx:if="{{ subLabel }}" class="form-cell-sub-label">{{ subLabel }}</view>
+        </view>
+
+        <!-- 内容容器 -->
+        <view class="form-cell-content">
+            <!-- 输入框类型 -->
+            <block wx:if="{{ type === 'input' }}">
+                <input class="form-cell-input" style="{{ label ? 'text-align: right;' : 'text-align: left;' }}"
+                    disabled="{{ readonly }}" type="{{ inputType }}" value="{{ value }}" placeholder="{{ placeholder }}"
+                    placeholder-class="form-cell-placeholder" maxlength="{{ maxLength }}" data-field="{{ field }}"
+                    bind:input="handleInput" />
+            </block>
+
+            <!-- 数字输入框类型 -->
+            <block wx:if="{{ type === 'number' }}">
+                <input class="form-cell-input" style="{{ label ? 'text-align: right;' : 'text-align: left;' }}"
+                    disabled="{{ readonly }}" type="{{ inputType }}" value="{{ value }}" placeholder="{{ placeholder }}"
+                    placeholder-class="form-cell-placeholder" maxlength="{{ maxLength }}" data-field="{{ field }}"
+                    bind:input="handleInput" />
+            </block>
+
+            <!-- 文本域类型 -->
+            <block wx:elif="{{ type === 'textarea' }}">
+                <textarea class="form-cell-textarea" disabled="{{ readonly }}" value="{{ value }}"
+                    placeholder="{{ placeholder }}" placeholder-class="form-cell-placeholder"
+                    maxlength="{{ maxLength }}" data-field="{{ field }}" bind:input="handleInput" />
+            </block>
+
+            <!-- 开关类型 -->
+            <block wx:elif="{{ type === 'switch' }}">
+                <switch class="form-cell-switch" disabled="{{ readonly }}" checked="{{ value }}" color="#FC8E24"
+                    data-field="{{ field }}" bind:change="handleSwitch" />
+            </block>
+
+            <!-- 选择器类型 -->
+            <block wx:elif="{{ type === 'picker' }}">
+                <view class="form-cell-picker"
+                    style="{{ label ? 'justify-content: flex-end;' : 'justify-content: flex-start;' }}"
+                    data-field="{{ field }}" bind:tap="{{ readonly ? '' : 'handlePicker' }}">
+                    <view class="form-cell-picker-text {{ value ? '' : 'form-cell-picker-empty' }}"
+                        style="{{ label ? '' : 'margin-right: auto;' }}">
+                        {{ value || placeholder }}
+                    </view>
+                    <text class="form-cell-arrow">›</text>
+                </view>
+            </block>
+
+            <!-- 单选类型 -->
+            <block wx:elif="{{ type === 'radio' }}">
+                <cube-radio-group class="form-cell-radio-group" inline>
+                    <cube-radio class="form-cell-radio" wx:for="{{ radioOptionList }}" wx:key="index"
+                        wx:for-item="option" option="{{ option }}" value="{{ radioInnerValue }}"
+                        data-field="{{ field }}" bind:input="handleRadioChange" />
+                </cube-radio-group>
+            </block>
+
+            <!-- 选择器选项类型 -->
+            <block wx:elif="{{ type === 'picker-option' }}">
+                <!-- 原生选择器：点击展示区唤起系统选择器，取消不触发 change，无需手动管理显隐 -->
+                <picker class="form-cell-picker-wrap" mode="selector" range="{{ pickerOptList }}" range-key="text"
+                    value="{{ pickerOptSelectedIndex }}" disabled="{{ readonly }}" bind:change="handlePickerOptChange"
+                    style="{{ label ? 'justify-content: flex-end;' : 'justify-content: flex-start;' }}">
+                    <view class="form-cell-picker">
+                        <view class="form-cell-picker-text {{ pickerOptDisplayText ? '' : 'form-cell-picker-empty' }}"
+                            style="{{ label ? '' : 'margin-right: auto;' }}">
+                            {{ pickerOptDisplayText || placeholder }}
+                        </view>
+                        <text class="form-cell-arrow">›</text>
+                    </view>
+                </picker>
+            </block>
+
+            <!-- 上传图片类型 -->
+            <block wx:elif="{{ type === 'upload' }}">
+                <jmash-upload-picture limit="1" value="{{ value }}" bind:getImageArray="handleImageChange" />
+            </block>
+
+            <!-- 插槽类型 -->
+            <block wx:elif="{{ type === 'slot' }}">
+                <slot />
+            </block>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+import { createComponent, ref, computed, watch } from "@mpxjs/core";
+import { EventBase } from "../../api/types";
+
+createComponent({
+    options: {
+        styleIsolation: "apply-shared",
+    },
+    properties: {
+        // 表单字段名
+        field: {
+            type: String,
+            value: "",
+        },
+        // 左侧标题
+        label: {
+            type: String,
+            value: "",
+        },
+        // 是否必填
+        required: {
+            type: Boolean,
+            value: false,
+        },
+        // 类型：number / input / textarea / radio / switch / picker / picker-option / upload / slot
+        type: {
+            type: String,
+            value: "input",
+        },
+        // 单选选项（type 为 radio 时有效）
+        radioData: {
+            type: Array as any,
+            value: [],
+        },
+        // 单选选项映射：{ valueLable: "显示字段", valueKey: "值字段" }
+        radioOptions: {
+            type: Object,
+            value: {
+                valueLable: "value",
+                valueKey: "key",
+            },
+        },
+        // 输入类型
+        inputType: {
+            type: String,
+            value: "text",
+        },
+        // 当前值
+        value: {
+            type: null,
+            value: "",
+        },
+        // 占位文本
+        placeholder: {
+            type: String,
+            value: "",
+        },
+        // 最大长度（textarea 有效）
+        maxLength: {
+            type: Number,
+            value: 500,
+        },
+        // 是否显示底边框
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        // 子标题
+        subLabel: {
+            type: String,
+            value: "",
+        },
+        // 是否只读
+        readonly: {
+            type: Boolean,
+            value: false,
+        },
+        // 自动选择器数据列表
+        pickerData: {
+            type: Array as any,
+            value: [],
+        },
+        // 自动选择器选项映射：{ valueLable: "显示字段", valueKey: "值字段" }
+        pickerOptions: {
+            type: Object,
+            value: {
+                valueLable: "value",
+                valueKey: "key",
+            },
+        },
+    },
+    setup(props) {
+        // 自动选择器当前选中索引
+        let pickerOptSelectedIndex = ref(0);
+        // 自动选择器展示文本
+        let pickerOptDisplayText = ref("");
+        // 自动选择器数据转原生 picker range 格式
+        let pickerOptList = computed(() => {
+            const { pickerData, pickerOptions } = props;
+            if (!pickerData || !pickerData.length) return [];
+            return pickerData.map((item: any) => ({
+                text: item[pickerOptions.valueLable],
+                value: item[pickerOptions.valueKey],
+                ...item,
+            }));
+        });
+
+        // 单选选项 value 是否为 boolean 类型
+        let isBooleanRadio = computed(() => {
+            const { radioData, radioOptions } = props;
+            if (!radioData || !radioData.length) return false;
+            return radioData.some((item) => typeof item[radioOptions.valueKey] === "boolean");
+        });
+        // 单选选项转 cube-radio 格式
+        let radioOptionList = computed(() => {
+            const { radioData, radioOptions } = props;
+            if (!radioData || !radioData.length) return [];
+            return radioData.map((item: any) => ({
+                text: item[radioOptions.valueLable],
+                value: isBooleanRadio.value ? String(item[radioOptions.valueKey]) : item[radioOptions.valueKey],
+                disabled: props.readonly,
+            }));
+        });
+        // 传给 cube-radio 的 value（boolean 时转字符串）
+        let radioInnerValue = ref<string | number | boolean>("");
+
+        watch(() => props.value, (val) => {
+            if (isBooleanRadio.value) {
+                radioInnerValue.value = val ? "true" : "false";
+            } else {
+                radioInnerValue.value = val;
+            }
+        }, { immediate: true });
+
+        return {
+            pickerOptSelectedIndex,
+            pickerOptDisplayText,
+            pickerOptList,
+            isBooleanRadio,
+            radioOptionList,
+            radioInnerValue,
+        };
+    },
+    observers: {
+        // 当 value、data 或 options 变化时，刷新展示文本和选中索引
+        "value, pickerData, pickerOptions"(value: any, pickerData: any[], pickerOptions: any) {
+            if (!pickerData || !pickerData.length || !pickerOptions || !pickerOptions.valueKey) {
+                this.pickerOptSelectedIndex = 0;
+                this.pickerOptDisplayText = "";
+                return;
+            }
+            const index = pickerData.findIndex((item) => item[pickerOptions.valueKey] === value);
+            this.pickerOptSelectedIndex = index >= 0 ? index : 0;
+            this.pickerOptDisplayText = index >= 0 ? pickerData[index][pickerOptions.valueLable] : "";
+        },
+    },
+    methods: {
+        // 输入框内容变化
+        handleInput(e: EventBase) {
+            const field = e.currentTarget.dataset.field;
+            this.triggerEvent("change", { field, value: e.detail.value });
+        },
+
+        // switch 状态变化
+        handleSwitch(e: EventBase) {
+            const field = e.currentTarget.dataset.field;
+            this.triggerEvent("change", { field, value: e.detail.value });
+        },
+
+        // 单选变化
+        handleRadioChange(e: EventBase) {
+            const field = e.currentTarget.dataset.field;
+            let value = e.detail.value;
+            // boolean 类型时转回 boolean
+            if (this.isBooleanRadio) {
+                value = value === "true";
+            }
+            this.triggerEvent("change", { field, value });
+        },
+
+        // 选择器点击
+        handlePicker(e: EventBase) {
+            const field = e.currentTarget.dataset.field;
+            this.triggerEvent("picker", { field });
+        },
+
+        // 上传图片变化
+        handleImageChange(e: EventBase) {
+            const imageArr = e.detail as string[];
+            this.triggerEvent("change", { field: this.field, value: imageArr[0] || "" });
+        },
+
+        // === 自动选择器方法 ===
+
+        // 确认选择（原生 picker 的 change 在点击确定后触发，取消不触发任何回调，无需回滚索引）
+        handlePickerOptChange(e: EventBase) {
+            const index = e.detail.value as number;
+            const item = this.pickerData[index];
+            if (!item) return;
+            this.pickerOptSelectedIndex = index;
+            this.pickerOptDisplayText = item[this.pickerOptions.valueLable];
+            this.triggerEvent("change", {
+                field: this.field,
+                value: item[this.pickerOptions.valueKey],
+                name: item[this.pickerOptions.valueLable],
+                info: item,
+            });
+        },
+    },
+});
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+.form-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 100rpx;
+    padding: 20rpx 30rpx;
+    box-sizing: border-box;
+    background: $background-white-color;
+}
+
+// 标题容器
+.form-cell-label-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+
+    // 标题
+    .form-cell-label {
+        font-weight: 400;
+        font-size: 30rpx;
+        color: $font-color;
+        line-height: 42rpx;
+        margin-right: 30rpx;
+
+        .form-cell-label-required {
+            color: $red-color;
+            margin-right: 6rpx;
+        }
+    }
+
+    // 副标题
+    .form-cell-sub-label {
+        font-weight: 400;
+        font-size: $font-size-mini;
+        color: $font-color-grey-opacity;
+    }
+}
+
+// 内容容器
+.form-cell-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    // 输入框
+    .form-cell-input {
+        flex: 1;
+        font-weight: 400;
+        font-size: 30rpx;
+        color: $font-color;
+        line-height: 42rpx;
+    }
+
+    // 占位符
+    .form-cell-placeholder {
+        color: $font-color-grey-opacity;
+    }
+
+    // 开关
+    .form-cell-switch {
+        transform: scale(0.8);
+    }
+
+    // 单选框组
+    .form-cell-radio-group {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        .form-cell-radio {
+            margin-left: 40rpx;
+        }
+    }
+
+    // 原生选择器包裹层
+    .form-cell-picker-wrap {
+        flex: 1;
+        display: flex;
+    }
+
+    // 自动选择器
+    .form-cell-picker {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 10rpx;
+
+        .form-cell-picker-text {
+            font-weight: 400;
+            font-size: 30rpx;
+            color: $font-color;
+            line-height: 42rpx;
+        }
+
+        .form-cell-picker-empty {
+            color: $font-color-grey-opacity;
+        }
+
+        .form-cell-arrow {
+            color: $font-color-grey-opacity;
+            font-size: 32rpx;
+        }
+    }
+}
+
+// 必填项
+.form-cell-required {
+    .form-cell-label {
+        text {
+            color: $red-color;
+        }
+    }
+}
+
+// 边框
+.form-cell-border {
+    border-bottom: 1rpx solid $border-line;
+
+    :last-child {
+        border-bottom: none;
+    }
+}
+
+// 文本域主容器 垂直分布
+.form-cell-textarea-main {
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+    align-items: flex-start;
+
+    .form-cell-content {
+        display: block;
+        width: 100%;
+
+        // 文本域
+        .form-cell-textarea {
+            width: 100%;
+            height: 160rpx;
+            text-align: left;
+            font-weight: 400;
+            font-size: 28rpx;
+            color: $font-color;
+            line-height: 40rpx;
+            padding: 20rpx;
+            box-sizing: border-box;
+            border-radius: $border-mini-radius;
+            background-color: $background-color;
+        }
+    }
+}
+
+// 上传图片组件穿透样式
+.upload-picture-box {
+    .upload-box {
+        width: 90rpx !important;
+        height: 90rpx !important;
+        flex: auto !important;
+    }
+
+    .image_box {
+        width: 90rpx !important;
+        height: 90rpx !important;
+        flex: auto !important;
+        margin: 0 !important;
+    }
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {
+        "jmash-upload-picture": "./jmash-upload-picture",
+        "cube-popup": "@mpxjs/mpx-cube-ui/lib/components/popup/index",
+        "cube-radio-group": "@mpxjs/mpx-cube-ui/lib/components/radio-group/index",
+        "cube-radio": "@mpxjs/mpx-cube-ui/lib/components/radio/index",
+    }
+}
+</script>