From 18cb623730981053c62bdf450c1cbf12ad6cfdff 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 11:14:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20SafeNFormItem?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E7=9A=84=E7=B1=BB=E5=9E=8B=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=92=8C=E6=8F=92=E6=A7=BD=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/a2use.vue                        |  4 +-
 src/utils/use-safe-n-form-auto-imports.tsx | 49 ++++++++++++----------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/utils/a2use.vue b/src/utils/a2use.vue
index fe5a8d3..b165370 100644
--- a/src/utils/a2use.vue
+++ b/src/utils/a2use.vue
@@ -63,10 +63,10 @@ function handleValidateClick() {
 
           <SafeNFormItem #default="slotProps" path="user.name">
             <div class="border">
-              <pre>{{ JSON.stringify({ slotProps }, null, 2) }}</pre>
+              <!-- <pre>{{ JSON.stringify({ slotProps: toRaw(slotProps) }, null, 2) }}</pre> -->
               <div>v: {{ slotProps.value }}</div>
             </div>
-            <NInput :value="slotProps.value" placeholder="SafeNFormItem" />
+            <NInput v-model:value="slotProps.value" placeholder="SafeNFormItem" />
           </SafeNFormItem>
 
           <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 d91702b..9be4132 100644
--- a/src/utils/use-safe-n-form-auto-imports.tsx
+++ b/src/utils/use-safe-n-form-auto-imports.tsx
@@ -1,7 +1,7 @@
 // https://www.naiveui.com/zh-CN/os-theme/components/form
 // initialFormValue
 
-import { get } from 'lodash-es';
+import { get, set } from 'lodash-es';
 import type { FormInst } from 'naive-ui';
 import type { Get, Paths } from 'type-fest';
 import type { SlotsType } from 'vue';
@@ -48,45 +48,36 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
   // <<<<<
 
   // >>>>> 创建类型安全的 FormItem 组件
-
   type SafeNFormItemProps<P extends Paths<T> & string> = {
     label?: string;
     path: P;
     placeholder?: string;
   };
 
-  type SafeNFormItemSlotScope<P extends Paths<T> & string> = {
+  type SafeNFormItemDefaultSlot<P extends Paths<T> & string> = {
     value: Get<T, P>;
   };
 
-  type SafeNFormItemSlotsDefinition<P extends Paths<T> & string> = SlotsType<{
-    default: SafeNFormItemSlotScope<P>;
-  }>;
-
-  type SafeNFormItemSlotFns<P extends Paths<T> & string> = {
-    default?: (scope: SafeNFormItemSlotScope<P>) => any;
-  };
-
-  type SafeNFormItemComponent = new <P extends Paths<T> & string>(
-    props: SafeNFormItemProps<P>,
-  ) => {
-    $props: SafeNFormItemProps<P>;
-    $slots: SafeNFormItemSlotFns<P>;
-  };
-
   const SafeNFormItemImpl = defineComponent<
     SafeNFormItemProps<Paths<T> & string>,
     /* Emits */ [],
     /* EE */ never,
-    SafeNFormItemSlotsDefinition<Paths<T> & string>
+    SlotsType<{ default: SafeNFormItemDefaultSlot<Paths<T> & string> }>
   >(
     (props, ctx) => {
       return () => {
-        const value = get(formValue.value, props.path) as Get<T, typeof props.path>;
-        const slots = ctx.slots;
+        // 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);
+          },
+        });
         return (
           <NFormItem path={props.path} label={props.label}>
-            {slots.default?.({ value })}
+            {ctx.slots.default?.({ value: value.value })}
           </NFormItem>
         );
       };
@@ -97,7 +88,19 @@ export function useSafeNForm<T extends Record<string, any> = Record<string, unkn
       props: ['label', 'path', 'placeholder'],
     },
   );
-  const SafeNFormItem = SafeNFormItemImpl as unknown as SafeNFormItemComponent;
+
+  // 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 {