@yh-ui/components 0.1.10 → 0.1.12

package/dist/form/src/form-schema.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, watch, reactive } from "vue";
+import { ref, watch, reactive, toRaw } from "vue";
 import YhForm from "./form.vue";
 import YhFormItem from "./form-item.vue";
+import YhButton from "../../button/src/button.vue";
 import { formSchemaProps } from "./form-schema";
 import { useNamespace } from "@yh-ui/hooks";
 import { get, set } from "@yh-ui/utils";
@@ -9,14 +10,24 @@ defineOptions({
   name: "YhFormSchema"
 });
 const props = defineProps(formSchemaProps);
-const emit = defineEmits(["update:modelValue", "submit", "change"]);
+const emit = defineEmits(["update:modelValue", "submit", "change", "validate"]);
 const ns = useNamespace("form-schema");
 const formRef = ref();
-const localModel = ref({ ...props.modelValue });
+const localModel = reactive({ ...props.modelValue });
 watch(
   () => props.modelValue,
   (val) => {
-    localModel.value = { ...val };
+    if (!val) return;
+    for (const key of Object.keys(val)) {
+      if (localModel[key] !== val[key]) {
+        localModel[key] = val[key];
+      }
+    }
+    for (const key of Object.keys(localModel)) {
+      if (!(key in val)) {
+        delete localModel[key];
+      }
+    }
   },
   { deep: true }
 );
@@ -25,6 +36,23 @@ const isGroup = (item) => {
 };
 const optionMap = reactive({});
 const collapsedMap = reactive({});
+const loadingMap = reactive({});
+const initDefaultValues = () => {
+  const traverse = (items) => {
+    for (const item of items) {
+      if (isGroup(item)) {
+        traverse(item.items);
+      } else {
+        const schemaItem = item;
+        if (schemaItem.defaultValue !== void 0 && get(localModel, schemaItem.field) === void 0) {
+          set(localModel, schemaItem.field, schemaItem.defaultValue);
+          emit("update:modelValue", { ...toRaw(localModel) });
+        }
+      }
+    }
+  };
+  traverse(props.schema);
+};
 const initAsyncOptions = async () => {
   const traverse = async (items) => {
     for (const item of items) {
@@ -32,13 +60,14 @@ const initAsyncOptions = async () => {
         await traverse(item.items);
       } else {
         const schemaItem = item;
-        if (schemaItem.asyncOptions) {
+        if (schemaItem.asyncOptions && !optionMap[schemaItem.field]) {
           try {
-            if (!optionMap[schemaItem.field]) {
-              optionMap[schemaItem.field] = await schemaItem.asyncOptions();
-            }
+            loadingMap[schemaItem.field] = true;
+            optionMap[schemaItem.field] = await schemaItem.asyncOptions();
           } catch (e) {
             console.error(`[YhFormSchema] Failed to load options for ${schemaItem.field}`, e);
+          } finally {
+            loadingMap[schemaItem.field] = false;
           }
         }
       }
@@ -56,6 +85,7 @@ watch(
         }
       }
     });
+    initDefaultValues();
     initAsyncOptions();
   },
   { immediate: true, deep: true }
@@ -68,7 +98,7 @@ const toggleCollapse = (title) => {
 const resolveProps = (item) => {
   let finalProps = {};
   if (typeof item.props === "function") {
-    finalProps = { ...item.props(localModel.value) };
+    finalProps = { ...item.props(localModel) };
   } else {
     finalProps = { ...item.props || {} };
   }
@@ -76,48 +106,146 @@ const resolveProps = (item) => {
     const propName = item.optionProp || "options";
     finalProps[propName] = optionMap[item.field];
   }
+  if (item.asyncOptions) {
+    finalProps.loading = loadingMap[item.field] ?? false;
+  }
+  if (item.disabled !== void 0) {
+    finalProps.disabled = typeof item.disabled === "function" ? item.disabled(localModel) : item.disabled;
+  }
+  if (props.formProps?.disabled) {
+    finalProps.disabled = true;
+  }
   return finalProps;
 };
+const resolveRequired = (item) => {
+  if (typeof item.required === "function") {
+    return !!item.required(localModel);
+  }
+  return !!item.required;
+};
+const resolveRules = (item) => {
+  let sourceRules = [];
+  if (typeof item.rules === "function") {
+    sourceRules = item.rules(localModel) || [];
+  } else {
+    sourceRules = item.rules || [];
+  }
+  const rules = [...sourceRules];
+  const isRequired = resolveRequired(item);
+  if (isRequired && !rules.some((r) => r.required)) {
+    const isBoolean = typeof item.defaultValue === "boolean" || item.component === "switch";
+    rules.unshift({
+      required: true,
+      type: isBoolean ? "boolean" : void 0,
+      message: `${item.label || item.field} \u4E0D\u80FD\u4E3A\u7A7A`,
+      trigger: ["blur", "change"]
+    });
+  }
+  return rules.length > 0 ? rules : void 0;
+};
 const getComponent = (comp) => {
   if (typeof comp === "string") {
     const map = {
       input: "yh-input",
       "input-number": "yh-input-number",
       "input-tag": "yh-input-tag",
+      autocomplete: "yh-autocomplete",
       checkbox: "yh-checkbox",
+      "checkbox-group": "yh-checkbox-group",
       radio: "yh-radio",
+      "radio-group": "yh-radio-group",
       select: "yh-select",
+      cascader: "yh-cascader",
       switch: "yh-switch",
-      tag: "yh-tag"
+      slider: "yh-slider",
+      rate: "yh-rate",
+      "date-picker": "yh-date-picker",
+      "time-picker": "yh-time-picker",
+      "color-picker": "yh-color-picker",
+      "time-select": "yh-time-select",
+      transfer: "yh-transfer",
+      "tree-select": "yh-tree-select",
+      mention: "yh-mention",
+      tag: "yh-tag",
+      upload: "yh-upload"
     };
     return map[comp] || comp;
   }
   return comp;
 };
 const isItemHidden = (item) => {
-  if (isGroup(item)) return false;
-  const schemaItem = item;
-  if (typeof schemaItem.hidden === "function") {
-    return schemaItem.hidden(localModel.value);
+  if (typeof item.hidden === "function") {
+    return item.hidden(localModel);
   }
-  return schemaItem.hidden || false;
+  return item.hidden === true;
 };
-const handleUpdate = (field, val) => {
-  set(localModel.value, field, val);
-  emit("update:modelValue", { ...localModel.value });
-  emit("change", field, val);
+const getEmptyValue = (item) => {
+  const val = get(localModel, item.field);
+  if (val === null || val === void 0 || val === "") {
+    return item.emptyValue ?? "-";
+  }
+  return val;
+};
+const handleAddListItem = (item) => {
+  const currentList = get(localModel, item.field) || [];
+  const max = item.listProps?.max;
+  if (max !== void 0 && currentList.length >= max) return;
+  const canAdd = item.listProps?.allowAdd;
+  if (canAdd !== void 0) {
+    const allow = typeof canAdd === "function" ? canAdd(localModel) : canAdd;
+    if (!allow) return;
+  }
+  const newItem = {};
+  item.listSchema?.forEach((sub) => {
+    if (sub.defaultValue !== void 0) {
+      newItem[sub.field] = sub.defaultValue;
+    }
+  });
+  const newList = [...currentList, newItem];
+  handleUpdate(item.field, newList);
 };
-const RenderComponent = (item) => {
-  if (item.render) {
-    return item.render(localModel.value);
+const handleDeleteListItem = (item, index) => {
+  const currentList = get(localModel, item.field) || [];
+  const min = item.listProps?.min;
+  if (min !== void 0 && currentList.length <= min) return;
+  const canDelete = item.listProps?.allowDelete;
+  if (canDelete !== void 0) {
+    const allow = typeof canDelete === "function" ? canDelete(localModel, index) : canDelete;
+    if (!allow) return;
   }
-  return null;
+  const newList = [...currentList];
+  newList.splice(index, 1);
+  handleUpdate(item.field, newList);
+};
+const handleUpdate = (field, val) => {
+  set(localModel, field, val);
+  const snapshot = { ...toRaw(localModel) };
+  emit("update:modelValue", snapshot);
+  emit("change", field, val, snapshot);
+};
+const handleSubmit = () => {
+  emit("submit", { ...toRaw(localModel) });
+};
+const footerFormRef = {
+  validate: (...args) => formRef.value?.validate(...args),
+  resetFields: (...args) => formRef.value?.resetFields(...args),
+  clearValidate: (...args) => formRef.value?.clearValidate(...args),
+  scrollToField: (field) => formRef.value?.scrollToField(field)
 };
 defineExpose({
-  validate: (props2, callback) => formRef.value?.validate(props2, callback),
-  resetFields: (props2) => formRef.value?.resetFields(props2),
-  clearValidate: (props2) => formRef.value?.clearValidate(props2),
-  scrollToField: (prop) => formRef.value?.scrollToField(prop),
+  /** 触发校验，支持指定字段 */
+  validate: (fields, callback) => formRef.value?.validate(fields, callback),
+  /** 重置字段（恢复初始值并清除校验），支持指定字段 */
+  resetFields: (fields) => formRef.value?.resetFields(fields),
+  /** 清除指定字段校验结果 */
+  clearValidate: (fields) => formRef.value?.clearValidate(fields),
+  /** 滚动到指定字段 */
+  scrollToField: (field) => formRef.value?.scrollToField(field),
+  /** 获取当前表单数据快照 */
+  getModel: () => ({ ...toRaw(localModel) }),
+  /** 动态更新单个字段值 */
+  setFieldValue: (field, val) => handleUpdate(field, val),
+  /** 底层 form 实例 */
   formRef
 });
 </script>
@@ -127,158 +255,320 @@ defineExpose({
     v-bind="formProps"
     :model="localModel"
     ref="formRef"
-    :class="[ns.b(), {
-  'yh-form--grid': true
-}]"
+    :class="[ns.b()]"
+    @submit.prevent="handleSubmit"
   >
-    <div class="yh-form-schema__body">
+    <div class="yh-form--grid">
       <template v-for="(item, index) in schema" :key="index">
-        <!-- 分组渲染 -->
-        <fieldset
-          v-if="isGroup(item)"
-          :class="[ns.e('group'), {
+        <!-- ===== 分组渲染 ===== -->
+        <template v-if="isGroup(item)">
+          <div class="yh-form-col yh-form-col--24">
+            <fieldset
+              :class="[ns.e('group'), {
   'is-collapsed': collapsedMap[item.title || '']
 }]"
-          v-bind="item.props"
-        >
-          <legend
-            v-if="item.title"
-            :class="ns.e('group-title')"
-            @click="item.collapsible && toggleCollapse(item.title)"
-          >
-            {{ item.title }}
-            <span v-if="item.collapsible" :class="['yh-form-schema__collapse-icon']">
-              {{ collapsedMap[item.title] ? "\u25BC" : "\u25B2" }}
-            </span>
-          </legend>
+              v-bind="item.props"
+            >
+              <legend
+                v-if="(item as FormSchemaGroup).title"
+                :class="ns.e('group-title')"
+                @click="item.collapsible && toggleCollapse(item.title)"
+              >
+                <span class="yh-form-schema__group-title-text">{{
+                  (item as FormSchemaGroup).title
+                }}</span>
+                <span
+                  v-if="item.collapsible"
+                  :class="['yh-form-schema__collapse-icon', {
+  'is-collapsed': collapsedMap[item.title]
+}]"
+                >
+                  <svg viewBox="0 0 1024 1024" width="12" height="12">
+                    <path
+                      fill="currentColor"
+                      d="M512 714.667L85.333 288l60.267-60.267L512 594.133l366.4-366.4L938.667 288z"
+                    />
+                  </svg>
+                </span>
+              </legend>
 
-          <div v-show="!collapsedMap[item.title || '']" :class="['yh-form--grid']">
-            <template v-for="subItem in item.items" :key="subItem.field">
               <div
-                v-if="!isItemHidden(subItem)"
-                :class="['yh-form-col', subItem.col ? `yh-form-col--${subItem.col}` : 'yh-form-col--24']"
+                v-show="!collapsedMap[item.title || '']"
+                class="yh-form--grid"
               >
-                <yh-form-item
-                  v-bind="subItem.formItemProps"
-                  :label="subItem.label"
-                  :prop="subItem.field"
-                  :required="subItem.required"
-                  :rules="subItem.rules"
-                >
-                  <!-- Label 插槽 -->
-                  <template
-                    #label
-                    v-if="!$slots[`field-${subItem.field}`] && (subItem.slots?.label || $slots[`label-${subItem.field}`])"
+                <template v-for="subItem in item.items" :key="subItem.field">
+                  <div
+                    v-if="!isItemHidden(subItem)"
+                    :class="['yh-form-col', subItem.col ? `yh-form-col--${subItem.col}` : 'yh-form-col--24']"
+                    :style="subItem.span ? {
+  gridColumn: `span ${subItem.span}`
+} : void 0"
                   >
-                    <slot :name="`label-${subItem.field}`" :model="localModel" :item="subItem">
-                      <component
-                        :is="subItem.slots?.label"
-                        :model="localModel"
-                        :field="subItem.field"
-                      />
-                    </slot>
-                  </template>
+                    <!-- 分隔线类型 -->
+                    <template v-if="subItem.type === 'divider'">
+                      <div :class="ns.e('divider')">
+                        <span v-if="subItem.label" :class="ns.e('divider-label')">{{
+                          subItem.label
+                        }}</span>
+                      </div>
+                    </template>
 
-                  <!-- 字段插槽: 优先级最高 -->
-                  <template v-if="$slots[`field-${subItem.field}`]">
-                    <slot
-                      :name="`field-${subItem.field}`"
-                      :model="localModel"
-                      :item="subItem"
-                      :handle-update="handleUpdate"
-                    />
-                  </template>
+                    <!-- 纯文本展示 -->
+                    <template v-else-if="subItem.type === 'text'">
+                      <yh-form-item :label="subItem.label" v-bind="subItem.formItemProps">
+                        <span :class="ns.e('text-value')">{{
+                          get(localModel, subItem.field)
+                        }}</span>
+                      </yh-form-item>
+                    </template>
 
-                  <!-- 默认渲染 & Render -->
-                  <template v-else>
-                    <component v-if="subItem.render" :is="RenderComponent(subItem)" />
-                    <component
-                      v-else
-                      :is="getComponent(subItem.component)"
-                      v-bind="resolveProps(subItem)"
-                      :model-value="get(localModel, subItem.field)"
-                      @update:model-value="val => handleUpdate(subItem.field, val)"
-                    >
-                      <template
-                        v-for="(slotContent, slotName) in subItem.slots"
-                        :key="slotName"
-                        #[slotName]="slotProps"
+                    <!-- 普通字段 -->
+                    <template v-else>
+                      <yh-form-item
+                        v-bind="subItem.formItemProps"
+                        :label="subItem.label"
+                        :prop="subItem.field"
+                        :required="resolveRequired(subItem)"
+                        :rules="resolveRules(subItem)"
                       >
-                        <component
-                          v-if="String(slotName) !== 'label'"
-                          :is="slotContent"
-                          v-bind="slotProps"
-                        />
-                      </template>
-                    </component>
-                  </template>
-                </yh-form-item>
+                        <!-- 自定义标签插槽 -->
+                        <template
+                          #label
+                          v-if="!$slots[`field-${subItem.field}`] && (subItem.slots?.label || $slots[`label-${subItem.field}`])"
+                        >
+                          <slot
+                            :name="`label-${subItem.field}`"
+                            :model="localModel"
+                            :item="subItem"
+                          >
+                            <component
+                              :is="subItem.slots?.label"
+                              :model="localModel"
+                              :field="subItem.field"
+                            />
+                          </slot>
+                          <span
+                            v-if="subItem.tooltip"
+                            :class="ns.e('tooltip')"
+                            :title="subItem.tooltip"
+                            >?</span
+                          >
+                        </template>
+
+                        <!-- 字段自定义插槽（最高优先级） -->
+                        <template v-if="$slots[`field-${subItem.field}`]">
+                          <slot
+                            :name="`field-${subItem.field}`"
+                            :model="localModel"
+                            :item="subItem"
+                            :handle-update="handleUpdate"
+                          />
+                        </template>
+
+                        <!-- render 函数 -->
+                        <template v-else-if="subItem.render">
+                          <component :is="() => subItem.render(localModel)" />
+                        </template>
+
+                        <!-- 默认组件渲染 -->
+                        <template v-else-if="subItem.component">
+                          <component
+                            :is="getComponent(subItem.component)"
+                            v-bind="resolveProps(subItem)"
+                            :model-value="get(localModel, subItem.field)"
+                            @update:model-value="val => handleUpdate(subItem.field, val)"
+                          >
+                            <template
+                              v-for="(slotContent, slotName) in subItem.slots"
+                              :key="slotName"
+                              #[slotName]="slotProps"
+                            >
+                              <component
+                                v-if="String(slotName) !== 'label'"
+                                :is="slotContent"
+                                v-bind="slotProps"
+                              />
+                            </template>
+                          </component>
+                        </template>
+                      </yh-form-item>
+                    </template>
+                  </div>
+                </template>
               </div>
-            </template>
+            </fieldset>
           </div>
-        </fieldset>
+        </template>
 
-        <!-- 普通项渲染 -->
-        <div
-          v-else
-          :class="['yh-form-col', item.col ? `yh-form-col--${item.col}` : 'yh-form-col--24']"
-        >
-          <div v-if="!isItemHidden(item)">
-            <yh-form-item
-              v-bind="item.formItemProps"
-              :label="item.label"
-              :prop="item.field"
-              :required="item.required"
-              :rules="item.rules"
-            >
-              <template
-                #label
-                v-if="!$slots[`field-${item.field}`] && (item.slots?.label || $slots[`label-${item.field}`])"
+        <!-- ===== 顶层普通项渲染 ===== -->
+        <template v-else>
+          <div
+            v-if="!isItemHidden(item)"
+            :class="['yh-form-col', item.col ? `yh-form-col--${item.col}` : 'yh-form-col--24']"
+          >
+            <!-- 分隔线类型 -->
+            <template v-if="item.type === 'divider'">
+              <div :class="ns.e('divider')">
+                <span v-if="item.label" :class="ns.e('divider-label')">
+                  {{ item.label }}
+                </span>
+              </div>
+            </template>
+
+            <!-- 纯文本展示 -->
+            <template v-else-if="item.type === 'text'">
+              <yh-form-item
+                :label="item.label"
+                v-bind="item.formItemProps"
+              >
+                <span :class="ns.e('text-value')">
+                  {{ getEmptyValue(item) }}
+                </span>
+              </yh-form-item>
+            </template>
+
+            <!-- 动态列表 -->
+            <template v-else-if="item.type === 'list'">
+              <yh-form-item
+                :label="item.label"
+                v-bind="item.formItemProps"
               >
-                <slot :name="`label-${item.field}`" :model="localModel" :item="item">
-                  <component :is="item.slots?.label" :model="localModel" :field="item.field" />
-                </slot>
-              </template>
+                <div :class="ns.e('list')">
+                  <div
+                    v-for="(row, rowIdx) in get(localModel, item.field) || []"
+                    :key="rowIdx"
+                    :class="ns.e('list-row')"
+                  >
+                    <div class="yh-form--grid" style="flex: 1">
+                      <template v-for="sub in item.listSchema" :key="sub.field">
+                        <div
+                          :class="['yh-form-col', sub.col ? `yh-form-col--${sub.col}` : 'yh-form-col--24']"
+                        >
+                          <yh-form-item
+                            :label="sub.label"
+                            :prop="`${item.field}.${rowIdx}.${sub.field}`"
+                            :required="resolveRequired(sub)"
+                            :rules="resolveRules(sub)"
+                          >
+                            <component
+                              v-if="sub.component"
+                              :is="getComponent(sub.component)"
+                              v-bind="resolveProps(sub)"
+                              :model-value="row[sub.field]"
+                              @update:model-value="val => handleUpdate(`${item.field}.${rowIdx}.${sub.field}`, val)"
+                            />
+                            <slot
+                              v-else
+                              :name="`field-${item.field}-${sub.field}`"
+                              :row="row"
+                              :index="rowIdx"
+                              :item="sub"
+                            />
+                          </yh-form-item>
+                        </div>
+                      </template>
+                    </div>
+                    <yh-button
+                      type="danger"
+                      text
+                      :class="ns.e('list-delete')"
+                      :disabled="item.listProps?.min !== void 0 && (get(localModel, item.field) || []).length <= item.listProps.min"
+                      @click="handleDeleteListItem(item, rowIdx)"
+                    >
+                      {{ item.listProps?.addButtonText ? "\u5220\u9664" : "\u5220\u9664" }}
+                    </yh-button>
+                  </div>
+
+                  <yh-button
+                    :class="ns.e('list-add')"
+                    :disabled="item.listProps?.max !== void 0 && (get(localModel, item.field) || []).length >= item.listProps.max"
+                    @click="handleAddListItem(item)"
+                  >
+                    + {{ item.listProps?.addButtonText ?? "\u6DFB\u52A0\u4E00\u9879" }}
+                  </yh-button>
 
-              <template v-if="$slots[`field-${item.field}`]">
-                <slot
-                  :name="`field-${item.field}`"
-                  :model="localModel"
-                  :item="item"
-                  :handle-update="handleUpdate"
-                />
-              </template>
+                  <slot
+                    :name="`list-footer-${item.field}`"
+                    :model="localModel"
+                    :item="item"
+                  />
+                </div>
+              </yh-form-item>
+            </template>
 
-              <template v-else>
-                <component v-if="item.render" :is="RenderComponent(item)" />
-                <component
-                  v-else
-                  :is="getComponent(item.component)"
-                  v-bind="resolveProps(item)"
-                  :model-value="get(localModel, item.field)"
-                  @update:model-value="val => handleUpdate(item.field, val)"
+            <!-- 普通字段 -->
+            <template v-else>
+              <yh-form-item
+                v-bind="item.formItemProps"
+                :label="item.label"
+                :prop="item.field"
+                :required="resolveRequired(item)"
+                :rules="resolveRules(item)"
+              >
+                <!-- 自定义 label 插槽 -->
+                <template
+                  #label
+                  v-if="!$slots[`field-${item.field}`] && (item.slots?.label || $slots[`label-${item.field}`])"
                 >
-                  <template
-                    v-for="(slotContent, slotName) in item.slots"
-                    :key="slotName"
-                    #[slotName]="slotProps"
+                  <slot
+                    :name="`label-${item.field}`"
+                    :model="localModel"
+                    :item="item"
                   >
                     <component
-                      v-if="String(slotName) !== 'label'"
-                      :is="slotContent"
-                      v-bind="slotProps"
+                      :is="item.slots?.label"
+                      :model="localModel"
+                      :field="item.field"
                     />
-                  </template>
-                </component>
-              </template>
-            </yh-form-item>
+                  </slot>
+                </template>
+
+                <!-- 字段自定义插槽 -->
+                <template v-if="$slots[`field-${item.field}`]">
+                  <slot
+                    :name="`field-${item.field}`"
+                    :model="localModel"
+                    :item="item"
+                    :handle-update="handleUpdate"
+                  />
+                </template>
+
+                <!-- render 函数 -->
+                <template v-else-if="item.render">
+                  <component :is="() => item.render(localModel)" />
+                </template>
+
+                <!-- 默认组件渲染 -->
+                <template v-else-if="item.component">
+                  <component
+                    :is="getComponent(item.component)"
+                    v-bind="resolveProps(item)"
+                    :model-value="get(localModel, item.field)"
+                    @update:model-value="val => handleUpdate(item.field, val)"
+                  >
+                    <template
+                      v-for="(slotContent, slotName) in item.slots"
+                      :key="slotName"
+                      #[slotName]="slotProps"
+                    >
+                      <component
+                        v-if="String(slotName) !== 'label'"
+                        :is="slotContent"
+                        v-bind="slotProps"
+                      />
+                    </template>
+                  </component>
+                </template>
+              </yh-form-item>
+            </template>
           </div>
-        </div>
+        </template>
       </template>
     </div>
 
+    <!-- Footer 插槽 -->
     <div v-if="$slots.footer" :class="ns.e('footer')">
-      <slot name="footer" :model="localModel" :form-ref="formRef" />
+      <slot name="footer" :model="localModel" :form-ref="footerFormRef" />
     </div>
   </yh-form>
 </template>
@@ -294,27 +584,99 @@ defineExpose({
 }
 .yh-form-schema__group.is-collapsed {
   padding-bottom: 0;
-  border-bottom: none;
 }
 .yh-form-schema__group-title {
   font-weight: 600;
-  font-size: 16px;
+  font-size: 15px;
   padding: 0 10px;
   color: var(--yh-text-color-primary, #303133);
   display: flex;
   align-items: center;
-  cursor: pointer;
-  user-select: none;
+  justify-content: space-between;
+  cursor: default;
+}
+.yh-form-schema__group-title-text {
+  flex: 1;
 }
 .yh-form-schema__collapse-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-left: 8px;
-  font-size: 12px;
-  opacity: 0.6;
-  transition: transform 0.3s;
+  color: var(--yh-text-color-secondary, #909399);
+  transition: transform 0.25s ease;
+  cursor: pointer;
+}
+.yh-form-schema__collapse-icon.is-collapsed {
+  transform: rotate(-90deg);
 }
 .yh-form-schema__footer {
   padding-top: 12px;
   border-top: 1px solid var(--yh-border-color-lighter, #f2f6fc);
   margin-top: 12px;
 }
+.yh-form-schema__divider {
+  display: flex;
+  align-items: center;
+  margin: 8px 0 16px;
+}
+.yh-form-schema__divider::before, .yh-form-schema__divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--yh-border-color-light, #ebeef5);
+}
+.yh-form-schema__divider-label {
+  padding: 0 12px;
+  font-size: 13px;
+  color: var(--yh-text-color-secondary, #909399);
+  white-space: nowrap;
+}
+.yh-form-schema__text-value {
+  font-size: 14px;
+  color: var(--yh-text-color-primary, #303133);
+  line-height: 1.5;
+}
+.yh-form-schema__tooltip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--yh-color-info-light-7, #d9ecff);
+  color: var(--yh-color-primary, #409eff);
+  font-size: 11px;
+  font-weight: bold;
+  margin-left: 4px;
+  cursor: help;
+  flex-shrink: 0;
+}
+.yh-form-schema__list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.yh-form-schema__list-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  background: var(--yh-fill-color-light, #f5f7fa);
+  border-radius: 6px;
+  border: 1px solid var(--yh-border-color-lighter, #ebeef5);
+  transition: border-color 0.2s;
+}
+.yh-form-schema__list-row:hover {
+  border-color: var(--yh-border-color, #dcdfe6);
+}
+.yh-form-schema__list-delete {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.yh-form-schema__list-add {
+  align-self: flex-start;
+  margin-top: 4px;
+}
 </style>