✨ feat(单选/多选控件): 样式和默认值调整优化

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 11:06:05
+ * @LastEditTime: 2023-02-01 11:18:31
  * @FilePath: /data-table/src/components/GenderField/index.vue
  * @Description: 性别选择控件
 -->
 <template>
-  <div v-if="HideShow" class="radio-field-page">
+  <div v-if="HideShow" class="gender-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
-    <van-field :name="item.name" :rules="item.rules">
+    <van-field
+      :name="item.name"
+      :rules="item.rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.disabled"
+    >
       <template #input>
         <van-radio-group v-model="item.value" direction="horizontal">
-          <van-radio name="男">男</van-radio>
-          <van-radio name="女">女</van-radio>
+          <van-radio name="男" :checked-color="themeVars.radioColor">男</van-radio>
+          <van-radio name="女" :checked-color="themeVars.radioColor">女</van-radio>
         </van-radio-group>
       </template>
     </van-field>
@@ -40,11 +45,12 @@ const HideShow = computed(() => {
 })
 
 onMounted(() => {
+  props.item.value = props.item.component_props.default;
 })
 </script>
 
 <style lang="less" scoped>
-.radio-field-page {
+.gender-field-page {
   .label {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
@@ -61,11 +67,4 @@ onMounted(() => {
     white-space: pre;
   }
 }
-
-:deep(.van-radio) {
-  border: 1px solid #eaeaea;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  // width: 100vw;
-}
 </style>

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 10:53:53
+ * @LastEditTime: 2023-02-01 11:21:00
  * @FilePath: /data-table/src/components/NameField/index.vue
  * @Description: 姓名输入框
 -->
 <template>
-  <div v-if="HideShow" class="text-field-page">
+  <div v-if="HideShow" class="name-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -33,10 +33,13 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+onMounted(() => {
+  props.item.value = props.item.component_props.default;
+})
 </script>
 
 <style lang="less" scoped>
-.text-field-page {
+.name-field-page {
   .label {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 00:19:00
+ * @LastEditTime: 2023-02-01 11:22:51
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -50,6 +50,22 @@
             {{ PCommit.text ? PCommit.text : '提交' }}
           </van-button>
         </div>
+        <!-- <van-cell-group :border="false">
+          <component
+            v-for="(item, index) in mockData"
+            :id="item.key"
+            :ref="(el) => setRefMap(el, item)"
+            :key="index"
+            :is="item.component"
+            :item="item"
+            @active="onActive"
+          />
+        </van-cell-group>
+        <div v-if="mockData.length && PCommit.visible" style="margin: 16px">
+          <van-button round block type="primary" native-type="submit">
+            {{ PCommit.text ? PCommit.text : '提交' }}
+          </van-button>
+        </div> -->
       </van-form>
     </van-config-provider>
   </div>
@@ -223,10 +239,20 @@ onMounted(async () => {
       value: "",
       component: "",
       component_props: {
-        name: "datetime",
-        tag: "datetime",
-        label: "时间日期",
-        data_dateformat: "YYYY-MM-DD HH:mm:ss",
+        name: "name",
+        tag: "name",
+        label: "姓名",
+        required: true,
+      },
+    },
+    {
+      key: "222",
+      value: "",
+      component: "",
+      component_props: {
+        name: "gender",
+        tag: "gender",
+        label: "性别",
         required: true,
       },
     },