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

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

@@ -0,0 +1,100 @@
+<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: {} });
+
+const message = useMessage();
+const dialog = useDialog();
+
+const messageTypes = ['info', 'success', 'warning', 'error', 'loading'] satisfies MessageType[];
+const dialogTypes = ['info', 'success', 'warning', 'error'] as const;
+
+const openAllMessages = () => {
+  messageTypes.forEach((type, index) => {
+    setTimeout(() => {
+      message[type](`${index + 1}. 消息内容`, {
+        duration: 3000,
+        closable: true,
+      });
+    }, index * 500);
+  });
+};
+
+const openDialog = (type: (typeof dialogTypes)[number]) => {
+  dialog[type]({
+    title: `${type.charAt(0).toUpperCase() + type.slice(1)} 弹窗`,
+    content: '这是一个命令式 API 创建的弹窗示例。',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      message.success('点击了确定');
+    },
+    onNegativeClick: () => {
+      message.error('点击了取消');
+    },
+  });
+};
+
+const openModal = () => {
+  window.$nModal!.create({
+    title: '命令式 Modal 示例',
+    content: '这是一个命令式 API 创建的 Modal 示例，使用 preset="dialog"。',
+    preset: 'dialog',
+    onPositiveClick: () => {
+      message.success('点击了确定');
+    },
+    onNegativeClick: () => {
+      message.error('点击了取消');
+    },
+    positiveText: '确定',
+    negativeText: '取消',
+  });
+};
+</script>
+
+<template>
+  <div class="naive-ui-demo-page">
+    <NCard>
+      <template #header>Naive UI 组件演示</template>
+      <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
+            v-for="(type, index) in messageTypes"
+            :key="type"
+            @click="
+              message[type](`${index + 1}. 消息内容`, {
+                duration: 3000,
+                closable: true,
+              })
+            "
+          >
+            {{ `${index + 1}. ${type}` }}
+          </NButton>
+          <NButton @click="openAllMessages"> 一键打开所有 </NButton>
+        </NSpace>
+      </NCard>
+
+      <NCard title="Dialog 弹窗 (命令式 API)" class="mt-4">
+        <NSpace>
+          <NButton v-for="type in dialogTypes" :key="type" @click="openDialog(type)">
+            {{ type }}
+          </NButton>
+        </NSpace>
+      </NCard>
+
+      <NCard title="Modal 弹窗 (命令式 API)" class="mt-4">
+        <NSpace>
+          <NButton @click="openModal"> 打开 Modal </NButton>
+        </NSpace>
+      </NCard>
+    </NCard>
+  </div>
+</template>

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>