From 7c503b096e59b7653ccf8dc32ea03db1f11152af Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 6 Jul 2025 18:54:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(demo):=20=E6=96=B0=E5=A2=9E=20NovaDialog?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E6=BC=94=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建弹框组件功能演示页面
- 展示 NovaDialog 组件的各种使用场景
- 提供基础弹框、表单弹框、确认弹框等示例
- 演示自定义标题、按钮文字、宽高等配置
- 为开发者提供组件使用参考和最佳实践
---
 src/views/demo/dialog/index.vue | 221 ++++++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 src/views/demo/dialog/index.vue

diff --git a/src/views/demo/dialog/index.vue b/src/views/demo/dialog/index.vue
new file mode 100644
index 0000000..439aeed
--- /dev/null
+++ b/src/views/demo/dialog/index.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import NovaDialog from '@/components/common/NovaDialog.vue'
+import { coiMsgInfo, coiMsgSuccess } from '@/utils/coi'
+
+// 弹框引用
+const basicDialogRef = ref()
+const customDialogRef = ref()
+const fullscreenDialogRef = ref()
+const noFooterDialogRef = ref()
+
+// 表单数据
+const formData = reactive({
+  name: '',
+  email: '',
+  description: '',
+})
+
+// 基础弹框
+function openBasicDialog() {
+  basicDialogRef.value?.novaOpen()
+}
+
+function handleBasicConfirm() {
+  coiMsgSuccess('基础弹框确认操作')
+  basicDialogRef.value?.novaClose()
+}
+
+function handleBasicCancel() {
+  coiMsgInfo('基础弹框取消操作')
+  basicDialogRef.value?.novaClose()
+}
+
+// 自定义内容弹框
+function openCustomDialog() {
+  // 重置表单数据
+  Object.assign(formData, {
+    name: '',
+    email: '',
+    description: '',
+  })
+  customDialogRef.value?.novaOpen()
+}
+
+function handleCustomConfirm() {
+  if (!formData.name) {
+    coiMsgInfo('请输入姓名')
+    return
+  }
+  coiMsgSuccess(`表单提交成功！姓名：${formData.name}`)
+  customDialogRef.value?.novaClose()
+}
+
+function handleCustomCancel() {
+  customDialogRef.value?.novaClose()
+}
+
+// 全屏弹框
+function openFullscreenDialog() {
+  fullscreenDialogRef.value?.novaOpen()
+}
+
+function handleFullscreenConfirm() {
+  coiMsgSuccess('全屏弹框确认操作')
+  fullscreenDialogRef.value?.novaClose()
+}
+
+function handleFullscreenCancel() {
+  fullscreenDialogRef.value?.novaClose()
+}
+
+// 无底部按钮弹框
+function openNoFooterDialog() {
+  noFooterDialogRef.value?.novaOpen()
+}
+
+function handleNoFooterClose() {
+  coiMsgInfo('无底部按钮弹框关闭')
+}
+
+function closeNoFooterDialog() {
+  noFooterDialogRef.value?.novaClose()
+}
+
+function handleCustomAction() {
+  coiMsgSuccess('执行自定义操作')
+  noFooterDialogRef.value?.novaClose()
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <n-card title="NovaDialog 弹框组件示例">
+      <div class="flex flex-wrap gap-4">
+        <n-button type="primary" @click="openBasicDialog">
+          基础弹框
+        </n-button>
+        <n-button type="info" @click="openCustomDialog">
+          自定义内容弹框
+        </n-button>
+        <n-button type="warning" @click="openFullscreenDialog">
+          全屏弹框
+        </n-button>
+        <n-button type="success" @click="openNoFooterDialog">
+          无底部按钮弹框
+        </n-button>
+      </div>
+    </n-card>
+
+    <!-- 基础弹框 -->
+    <NovaDialog
+      ref="basicDialogRef"
+      title="基础弹框"
+      :width="500"
+      :height="300"
+      @nova-confirm="handleBasicConfirm"
+      @nova-cancel="handleBasicCancel"
+    >
+      <template #content>
+        <div class="p-4">
+          <p class="text-base">
+            这是一个基础的弹框示例。
+          </p>
+          <p class="text-sm text-gray-500 mt-2">
+            点击确定或取消按钮来关闭弹框。
+          </p>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 自定义内容弹框 -->
+    <NovaDialog
+      ref="customDialogRef"
+      title="自定义表单弹框"
+      :width="600"
+      :height="400"
+      @nova-confirm="handleCustomConfirm"
+      @nova-cancel="handleCustomCancel"
+    >
+      <template #content>
+        <div class="p-4">
+          <n-form :model="formData" label-placement="left" label-width="80px">
+            <n-form-item label="姓名">
+              <n-input v-model:value="formData.name" placeholder="请输入姓名" />
+            </n-form-item>
+            <n-form-item label="邮箱">
+              <n-input v-model:value="formData.email" placeholder="请输入邮箱" />
+            </n-form-item>
+            <n-form-item label="描述">
+              <n-input
+                v-model:value="formData.description"
+                type="textarea"
+                placeholder="请输入描述"
+                :rows="4"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 全屏弹框 -->
+    <NovaDialog
+      ref="fullscreenDialogRef"
+      title="全屏弹框"
+      :fullscreen="true"
+      @nova-confirm="handleFullscreenConfirm"
+      @nova-cancel="handleFullscreenCancel"
+    >
+      <template #content>
+        <div class="p-6">
+          <h3 class="text-lg font-semibold mb-4">
+            全屏弹框内容
+          </h3>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <n-card title="卡片1">
+              <p>这是全屏弹框中的内容区域。</p>
+              <p>可以放置任何复杂的内容和组件。</p>
+            </n-card>
+            <n-card title="卡片2">
+              <p>全屏模式下可以展示更多信息。</p>
+              <p>适用于复杂的表单或详细信息展示。</p>
+            </n-card>
+          </div>
+        </div>
+      </template>
+    </NovaDialog>
+
+    <!-- 无底部按钮弹框 -->
+    <NovaDialog
+      ref="noFooterDialogRef"
+      title="无底部按钮弹框"
+      :width="500"
+      :height="300"
+      :footer-hidden="true"
+      @nova-close="handleNoFooterClose"
+    >
+      <template #content>
+        <div class="p-4">
+          <p class="text-base mb-4">
+            这是一个没有底部按钮的弹框。
+          </p>
+          <p class="text-sm text-gray-500 mb-4">
+            需要自定义关闭逻辑。
+          </p>
+          <div class="flex justify-end gap-2">
+            <n-button type="default" @click="closeNoFooterDialog">
+              自定义关闭
+            </n-button>
+            <n-button type="primary" @click="handleCustomAction">
+              自定义操作
+            </n-button>
+          </div>
+        </div>
+      </template>
+    </NovaDialog>
+  </div>
+</template>
+
+<style scoped>
+</style>