fix: devtools warning

packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible-params.vue

@@ -42,12 +42,17 @@ const { b } = useNamespace('collapsible-params');
 
 const open = ref(props.defaultOpen);
 
+// 最小可见为1
+const finalVisibleCount = computed(() =>
+  Math.max(1, Math.floor(props.visibleCount)),
+);
+
 const visibleRows = computed(() => {
-  return props.params.slice(0, props.visibleCount);
+  return props.params.slice(0, finalVisibleCount.value);
 });
 
 const collapsibleRows = computed(() => {
-  return props.params.slice(props.visibleCount);
+  return props.params.slice(finalVisibleCount.value);
 });
 
 const bodyStyle = computed(() => {

packages/@core/ui-kit/shadcn-ui/src/components/collapsible/type.ts

@@ -1,3 +1,10 @@
+export interface CollapsibleParamsProps {
+  defaultOpen?: boolean;
+  maxHeight?: number | string;
+  params: CollapsibleParamSchema[];
+  visibleCount?: number;
+}
+
 export interface CollapsibleParamOption {
   [key: string]: any;
   max?: number;

playground/src/adapter/component/index.ts

@@ -42,6 +42,8 @@ import type { Sortable } from '@vben/hooks';
 import type { TipTapProps } from '@vben/plugins/tiptap';
 import type { Recordable } from '@vben/types';
 
+import type { CollapsibleParamsProps } from '@vben-core/shadcn-ui';
+
 import {
   computed,
   defineAsyncComponent,
@@ -68,8 +70,9 @@ import { $t } from '@vben/locales';
 import { VbenTiptap } from '@vben/plugins/tiptap';
 import { isEmpty } from '@vben/utils';
 
-import { message, Modal, notification } from 'ant-design-vue';
+import { VbenCollapsibleParams } from '@vben-core/shadcn-ui';
 
+import { message, Modal, notification } from 'ant-design-vue';
 type AdapterUploadProps = UploadProps & {
   aspectRatio?: string;
   crop?: boolean;
@@ -606,6 +609,7 @@ export type ComponentType =
   | 'Cascader'
   | 'Checkbox'
   | 'CheckboxGroup'
+  | 'CollapsibleParams'
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
@@ -640,6 +644,7 @@ export interface ComponentPropsMap {
   Cascader: CascaderProps;
   Checkbox: CheckboxProps;
   CheckboxGroup: CheckboxGroupProps;
+  CollapsibleParams: CollapsibleParamsProps;
   DatePicker: DatePickerProps;
   DefaultButton: ButtonProps;
   Divider: DividerProps;
@@ -725,6 +730,7 @@ async function initComponentAdapter() {
     TimePicker,
     TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
     Upload: withPreviewUpload(),
+    CollapsibleParams: VbenCollapsibleParams,
   };
 
   // 将组件注册到全局共享状态中

playground/src/views/examples/form/collapsible.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { RadioGroupProps } from 'ant-design-vue';
+
 import type { FormLayout } from '@vben/common-ui';
 
 import type { CollapsibleParamSchema } from '@vben-core/shadcn-ui';
@@ -15,12 +17,12 @@ import { useVbenForm, z } from '#/adapter/form';
 
 import DocButton from '../doc-button.vue';
 
-const layouts: { label: string; value: FormLayout }[] = [
+const layouts: RadioGroupProps['options'] = [
   { label: 'Vertical', value: 'vertical' },
   { label: 'Horizontal', value: 'horizontal' },
 ];
 
-const layout = ref(layouts[0]?.value ?? 'vertical');
+const layout = ref<FormLayout>('vertical');
 
 function getNumberValidator(key: string, limit?: [number?, number?]) {
   let validator = z.number({
@@ -144,13 +146,16 @@ const [BaseForm, baseFormApi] = useVbenForm({
         class: 'w-auto',
       },
       label: 'QAT',
+      formItemClass: 'col-span-2',
       defaultValue: false,
     },
     {
-      component: VbenCollapsibleParams,
+      component: 'CollapsibleParams',
       componentProps: {
         params: paramsSchema,
         // maxHeight: 200, //限制最大高度，展开后可滚动
+        // defaultOpen: true, // 默认false折叠
+        // visibleCount: 0 // 默认3，最小可见为1，小于1取1
       },
       modelPropName: 'value',
       fieldName: 'params',
@@ -194,7 +199,6 @@ const [BaseForm, baseFormApi] = useVbenForm({
           } else {
             paramsRef?.updateValues?.({
               calib_steps: null,
-              micro_batch_size: 8,
             });
           }
         },
@@ -208,9 +212,15 @@ const [BaseForm, baseFormApi] = useVbenForm({
         },
       },
       rules: paramsValidator,
-      // defaultValue: {
-      //   micro_batch_size: 24,
-      // },
+      defaultValue: {
+        micro_batch_size: 8,
+        learning_rate: 1e-5,
+        eval_steps: 50,
+        num_train_epochs: 3,
+        max_length: 32_768,
+        warmup_ratio: 0.05,
+        save_steps: 50,
+      },
     },
     {
       component: 'RichEditor',
@@ -230,21 +240,21 @@ function onSubmit(values: Record<string, any>) {
   });
 }
 
-function onLayoutChange(layout: FormLayout) {
+function onLayoutChange() {
   baseFormApi.setState({
-    layout,
+    layout: layout.value,
   });
 }
 
 function handleSetFormValue() {
   baseFormApi.setFieldValue('params', {
-    micro_batch_size: 8,
+    micro_batch_size: 1024,
     learning_rate: 1e-5,
-    eval_steps: 50,
-    num_train_epochs: 3,
-    max_length: 32_768,
+    eval_steps: 150,
+    num_train_epochs: 13,
+    max_length: 131_072,
     warmup_ratio: 0.05,
-    save_steps: 50,
+    save_steps: 150,
   });
 }
 
@@ -282,7 +292,7 @@ async function handleSubmitFormValue() {
             :options="layouts"
             option-type="button"
             v-model:value="layout"
-            @update:value="onLayoutChange"
+            @change="onLayoutChange"
           />
           <Button type="primary" @click="handleSetFormValue">
             设置表单值