feat(projects): 添加 pro-naive-ui 表单和表格示例

src/views/pro-naive/form/step/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { createProForm } from 'pro-naive-ui';
+
+const step = ref(1);
+const submiting = ref(false);
+const message = useMessage();
+const form = createProForm();
+
+const form2 = createProForm({
+  onSubmit: async values => {
+    submiting.value = true;
+    await delay(1000);
+    message.success(
+      JSON.stringify({
+        ...form.values.value,
+        ...values
+      })
+    );
+    submiting.value = false;
+  }
+});
+
+function toNextStepAfterValidated() {
+  form.validate()?.then(() => {
+    step.value += 1;
+  });
+}
+
+function delay(time: number) {
+  return new Promise<void>(resolve => {
+    setTimeout(resolve, time);
+  });
+}
+</script>
+
+<template>
+  <div class="color-#fff">
+    <ProCard title="分步表单" :segmented="{ content: true }" :show-collapse="false">
+      <div class="flex flex-col items-center justify-center">
+        <NSteps :current="step" class="mb-50px ml-200px w-60%">
+          <NStep title="表单1" />
+          <NStep title="表单2" />
+        </NSteps>
+        <template v-if="step === 1">
+          <ProForm :form="form" label-placement="left">
+            <ProInput title="表单1字段" path="form1Field" required />
+            <NButton @click="toNextStepAfterValidated">下一步</NButton>
+          </ProForm>
+        </template>
+        <template v-if="step === 2">
+          <ProForm :form="form2" :loading="submiting" label-placement="left">
+            <ProInput title="表单2字段" path="form2Field" required />
+            <NFlex>
+              <NButton :disabled="submiting" @click="step -= 1">上一步</NButton>
+              <NButton type="primary" attr-type="submit" :loading="submiting">提交</NButton>
+            </NFlex>
+          </ProForm>
+        </template>
+      </div>
+    </ProCard>
+  </div>
+</template>