From 9376f8e68e8b564b5ad4223b9608dd562e2ed8b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <h_mini2024@oo1.dev>
Date: Mon, 10 Nov 2025 00:07:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(demos):=20=E7=A7=BB=E9=99=A4=20Naive=20UI?=
 =?UTF-8?q?=20Demo=20=E4=B8=AD=E7=9A=84=20SafeNForm=20=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=20[skip=20ci]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/demos/naive-ui-demo/index.page.vue  |  4 --
 .../demos/naive-ui-demo/use-safe-n-form.vue   | 72 -------------------
 2 files changed, 76 deletions(-)
 delete mode 100644 src/pages/demos/naive-ui-demo/use-safe-n-form.vue

diff --git a/src/pages/demos/naive-ui-demo/index.page.vue b/src/pages/demos/naive-ui-demo/index.page.vue
index bab7462..eef63f1 100644
--- a/src/pages/demos/naive-ui-demo/index.page.vue
+++ b/src/pages/demos/naive-ui-demo/index.page.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MessageType } from 'naive-ui';
 import { useDialog, useMessage } from 'naive-ui';
-import UseSafeNForm from './use-safe-n-form.vue';
 
 definePage({ meta: {} });
 
@@ -61,9 +60,6 @@ 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
diff --git a/src/pages/demos/naive-ui-demo/use-safe-n-form.vue b/src/pages/demos/naive-ui-demo/use-safe-n-form.vue
deleted file mode 100644
index 28d08a1..0000000
--- a/src/pages/demos/naive-ui-demo/use-safe-n-form.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-const { formInst, formValue, SafeNForm, SafeNFormItem } = useSafeNForm({
-  initialFormValue: {
-    /* ⚠️:
-      如果没使用`SafeNFormItem`，
-      这里`user`对象没有手动初始化的话，将会报错：
-      `can't access property "name", $setup.formValue.user is undefined`
-    */
-    user: {
-      name: '',
-      age: 0,
-    },
-    phone: '',
-  },
-});
-
-function handleValidateClick() {
-  formInst.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>