From 66419d22d4106a88e828bf23f7fa170c4288a647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 31 Oct 2025 12:53:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E6=9C=AA?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=20RouterView=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=20a2use=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E6=9D=BF=E5=92=8C=20SafeNFormItem=20?=
 =?UTF-8?q?=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |  1 -
 src/utils/a2use.vue                        | 23 +++++----
 src/utils/use-safe-n-form-auto-imports.tsx | 59 +++++++++++++---------
 3 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 64c7aae..63ca459 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router';
 import AppNaiveUIProvider from './AppNaiveUIProvider.vue';
 import A2use from './utils/a2use.vue';
 </script>
diff --git a/src/utils/a2use.vue b/src/utils/a2use.vue
index b165370..692e20f 100644
--- a/src/utils/a2use.vue
+++ b/src/utils/a2use.vue
@@ -35,7 +35,9 @@ function handleValidateClick() {
 <template>
   <div p-4>
     <div border>
-      <div>formValue: {{ JSON.stringify(formValue) }}</div>
+      <div>
+        <pre>formValue: {{ JSON.stringify(formValue, null, 2) }}</pre>
+      </div>
       <div>get(formValue, 'user.name'): {{ get(formValue, 'user.name') }}</div>
     </div>
     <n-space mt-4>
@@ -44,7 +46,7 @@ function handleValidateClick() {
 
     <n-space item-class="flex-1">
       <n-card title="SafeForm" mt-4>
-        <SafeNForm>
+        <SafeNForm label-placement="left" label-width="auto">
           <n-form-item
             label="姓名"
             path="user.name"
@@ -53,6 +55,15 @@ function handleValidateClick() {
             <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"
@@ -61,14 +72,6 @@ function handleValidateClick() {
             <n-input v-model:value="formValue.phone" placeholder="电话号码" />
           </n-form-item>
 
-          <SafeNFormItem #default="slotProps" path="user.name">
-            <div class="border">
-              <!-- <pre>{{ JSON.stringify({ slotProps: toRaw(slotProps) }, null, 2) }}</pre> -->
-              <div>v: {{ slotProps.value }}</div>
-            </div>
-            <NInput v-model:value="slotProps.value" placeholder="SafeNFormItem" />
-          </SafeNFormItem>
-
           <n-form-item>
             <n-button attr-type="button" @click="handleValidateClick"> 验证 </n-button>
           </n-form-item>
diff --git a/src/utils/use-safe-n-form-auto-imports.tsx b/src/utils/use-safe-n-form-auto-imports.tsx
index 9be4132..f988152 100644
--- a/src/utils/use-safe-n-form-auto-imports.tsx
+++ b/src/utils/use-safe-n-form-auto-imports.tsx
@@ -1,13 +1,18 @@
-// https://www.naiveui.com/zh-CN/os-theme/components/form
-// initialFormValue
+/**
+ * https://www.naiveui.com/zh-CN/os-theme/components/form
+ *
+ * FIXME: `NForm` 和 `NFormItem` 的 slots 还没有实现。`NFormItemGi`组件。
+ */
 
 import { get, set } from 'lodash-es';
-import type { FormInst } from 'naive-ui';
+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<T> = {
-  initialFormValue?: T;
+type UseSafeNFormOptions<FormValue> = {
+  initialFormValue?: FormValue;
 };
 
 export function useSafeNForm<T extends Record<string, any> = Record<string, unknown>>(
@@ -17,9 +22,8 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
   const formValue = ref<T>(structuredClone(toRaw(options.initialFormValue)) || ({} as T));
 
   // 创建类型安全的 Form 组件
-  interface SafeNFormProps {
-    disabled?: boolean;
-  }
+  type SafeNFormProps = FormProps;
+
   type SafeNFormSlots = SlotsType<{
     default?: { count?: number };
   }>;
@@ -28,8 +32,7 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
     (props, ctx) => {
       return () => (
         <NForm
-          inline={!true}
-          label-width="auto"
+          {...props}
           model={formValue.value}
           ref={(inst) => {
             formRef.value = inst as unknown as FormInst;
@@ -42,20 +45,19 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
     {
       name: 'SafeNForm',
       inheritAttrs: false,
-      props: ['disabled'],
+      props: formProps,
     },
   );
   // <<<<<
 
   // >>>>> 创建类型安全的 FormItem 组件
-  type SafeNFormItemProps<P extends Paths<T> & string> = {
-    label?: string;
+  type SafeNFormItemProps<P extends Paths<T> & string> = FormItemProps & {
     path: P;
-    placeholder?: string;
   };
 
   type SafeNFormItemDefaultSlot<P extends Paths<T> & string> = {
     value: Get<T, P>;
+    setValue: (val: Get<T, P>) => void;
   };
 
   const SafeNFormItemImpl = defineComponent<
@@ -66,18 +68,25 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
   >(
     (props, ctx) => {
       return () => {
-        // const value = get(formValue.value, props.path) as Get<T, typeof props.path>;
-        const value = computed({
-          get() {
-            return get(formValue.value, props.path) as Get<T, typeof props.path>;
-          },
-          set(v) {
-            set(formValue.value, props.path, v);
-          },
+        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 path={props.path} label={props.label}>
-            {ctx.slots.default?.({ value: value.value })}
+          <NFormItem {...props} path={props.path}>
+            {defaultSlotContent}
+            {renderDefaultNInput}
           </NFormItem>
         );
       };
@@ -85,7 +94,7 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
     {
       name: 'SafeNFormItem',
       inheritAttrs: false,
-      props: ['label', 'path', 'placeholder'],
+      props: Object.keys(formItemProps) as unknown as [keyof FormItemProps],
     },
   );