feat(demo): 添加 Naive UI 组件表单演示功能

src/pages/demos/naive-ui-demo/index.page.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useDialog, useMessage, useModal } from 'naive-ui';
 import type { MessageType } from 'naive-ui';
+import { useDialog, useMessage } from 'naive-ui';
+import UseSafeNForm from './use-safe-n-form.vue';
 
 definePage({ meta: {} });
 
 const message = useMessage();
 const dialog = useDialog();
-const modal = useModal();
 
 const messageTypes = ['info', 'success', 'warning', 'error', 'loading'] satisfies MessageType[];
 const dialogTypes = ['info', 'success', 'warning', 'error'] as const;
@@ -38,11 +38,10 @@ const openDialog = (type: (typeof dialogTypes)[number]) => {
 };
 
 const openModal = () => {
-  modal.create({
+  window.$nModal!.create({
     title: '命令式 Modal 示例',
     content: '这是一个命令式 API 创建的 Modal 示例，使用 preset="dialog"。',
     preset: 'dialog',
-    maskClosable: false,
     onPositiveClick: () => {
       message.success('点击了确定');
     },
@@ -62,7 +61,9 @@ const openModal = () => {
       <NAlert title="信息" type="info" :bordered="false">
         演示 Naive UI 各种组件的使用方法和功能特性
       </NAlert>
-
+      <n-card title="SafeNForm" mt-4>
+        <UseSafeNForm />
+      </n-card>
       <NCard title="Message 消息" class="mt-4">
         <NSpace>
           <NButton

src/pages/demos/naive-ui-demo/use-safe-n-form.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const { formValue, SafeNForm, SafeNFormItem, formRef } = useSafeNForm({
+  initialFormValue: {
+    /* ⚠️:
+      如果没使用`SafeNFormItem`，
+      这里`user`对象没有手动初始化的话，将会报错：
+      `can't access property "name", $setup.formValue.user is undefined`
+    */
+    user: {
+      name: '',
+      age: 0,
+    },
+    phone: '',
+  },
+});
+
+function handleValidateClick() {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      window.$nMessage!.success('Valid');
+    } else {
+      console.log(errors);
+      window.$nMessage!.error('Invalid');
+    }
+  });
+}
+</script>
+
+<template>
+  <div border>
+    <pre>formValue: {{ JSON.stringify(formValue, null, 2) }}</pre>
+  </div>
+
+  <SafeNForm inline label-placement="left" label-width="auto" mt-4>
+    <n-form-item
+      label="姓名"
+      path="user.name"
+      :rule="{ required: true, message: '请输入姓名', trigger: ['input'] }"
+    >
+      <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+    </n-form-item>
+
+    <SafeNFormItem
+      #default="{ value, setValue }"
+      :rule="{ required: true, message: '请输入姓名', trigger: ['input'] }"
+      label="姓名"
+      path="user.name"
+    >
+      <NInput :value="value" placeholder="SafeNFormItem" @update:value="setValue" />
+    </SafeNFormItem>
+
+    <n-form-item
+      label="电话号码"
+      path="phone"
+      :rule="{ required: true, message: '请输入电话号码', trigger: ['blur'] }"
+    >
+      <n-input v-model:value="formValue.phone" placeholder="电话号码" />
+    </n-form-item>
+
+    <SafeNFormItem
+      label="电话号码"
+      path="phone"
+      :rule="{ required: true, message: '请输入电话号码', trigger: ['blur'] }"
+    >
+      <!-- 如果没有提供插槽，会默认渲染一个`<NInput>` -->
+    </SafeNFormItem>
+
+    <n-form-item>
+      <n-button attr-type="button" @click="handleValidateClick"> 验证 </n-button>
+    </n-form-item>
+  </SafeNForm>
+</template>

src/utils/use-safe-n-form-auto-imports.tsx

@@ -0,0 +1,121 @@
+/**
+ * https://www.naiveui.com/zh-CN/os-theme/components/form
+ *
+ * FIXME: `NForm` 和 `NFormItem` 的 slots 还没有实现。`NFormItemGi`组件。
+ */
+
+import { get, set } from 'lodash-es';
+import type { FormInst, FormItemProps, FormProps } from 'naive-ui';
+import { NForm, NFormItem, formItemProps, NInput, formProps } from 'naive-ui';
+import type { Get, Paths } from 'type-fest';
+import type { SlotsType } from 'vue';
+import { Comment } from 'vue';
+
+type UseSafeNFormOptions<FormValue> = {
+  initialFormValue?: FormValue;
+};
+
+export function useSafeNForm<T extends Record<string, any> = Record<string, unknown>>(
+  options: UseSafeNFormOptions<T> = {},
+) {
+  const formRef = ref<FormInst | null>(null);
+  const formValue = ref<T>(structuredClone(toRaw(options.initialFormValue)) || ({} as T));
+
+  // 创建类型安全的 Form 组件
+  type SafeNFormProps = FormProps;
+
+  type SafeNFormSlots = SlotsType<{
+    default?: { count?: number };
+  }>;
+
+  const SafeNForm = defineComponent<SafeNFormProps, /* Emits */ [], /* EE */ never, SafeNFormSlots>(
+    (props, ctx) => {
+      return () => (
+        <NForm
+          {...props}
+          model={formValue.value}
+          ref={(inst) => {
+            formRef.value = inst as unknown as FormInst;
+          }}
+        >
+          {ctx.slots.default?.({})}
+        </NForm>
+      );
+    },
+    {
+      name: 'SafeNForm',
+      inheritAttrs: true,
+      props: formProps,
+    },
+  );
+  // <<<<<
+
+  // >>>>> 创建类型安全的 FormItem 组件
+  type SafeNFormItemProps<P extends Paths<T> & string> = FormItemProps & {
+    path: P;
+  };
+
+  type SafeNFormItemDefaultSlot<P extends Paths<T> & string> = {
+    value: Get<T, P>;
+    setValue: (val: Get<T, P>) => void;
+  };
+
+  const SafeNFormItemImpl = defineComponent<
+    SafeNFormItemProps<Paths<T> & string>,
+    /* Emits */ [],
+    /* EE */ never,
+    SlotsType<{ default: SafeNFormItemDefaultSlot<Paths<T> & string> }>
+  >(
+    (props, ctx) => {
+      return () => {
+        const value = get(formValue.value, props.path);
+        function setValue(val: typeof value) {
+          set(formValue.value, props.path, val);
+        }
+
+        const defaultSlotContent = ctx.slots.default?.({
+          value,
+          setValue,
+        });
+
+        // 如果没有提供默认 slot 内容，则渲染一个 NInput 作为默认输入组件
+        const renderDefaultNInput = defaultSlotContent?.some((v) => v.type !== Comment) ? null : (
+          <NInput value={value} onUpdate:value={setValue} />
+        );
+
+        return (
+          <NFormItem {...props} path={props.path}>
+            {defaultSlotContent}
+            {renderDefaultNInput}
+          </NFormItem>
+        );
+      };
+    },
+    {
+      name: 'SafeNFormItem',
+      inheritAttrs: false,
+      props: Object.keys(formItemProps) as unknown as [keyof FormItemProps],
+    },
+  );
+
+  // Expose a generic constructor so template literals narrow `path`.
+  type SafeNFormItemComponent = {
+    new <P extends Paths<T> & string>(
+      props: SafeNFormItemProps<P>,
+    ): {
+      $props: SafeNFormItemProps<P>;
+      $slots: {
+        default?: (scope: SafeNFormItemDefaultSlot<P>) => VNode[];
+      };
+    };
+  };
+  const SafeNFormItem = SafeNFormItemImpl as SafeNFormItemComponent;
+  // <<<<<
+
+  return {
+    formValue,
+    SafeNForm,
+    SafeNFormItem,
+    formRef,
+  };
+}