From 499a4e8d9cad4880df9968b8d2a4ef9764e912a1 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Mon, 6 Apr 2026 02:29:06 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=20FaModal=20=E4=B8=AD=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component_example/dropdown/_demo3.vue     | 52 +++++++++++++++++++
 .../component_example/dropdown/index.vue      |  6 +++
 .../image_preview/_demo3.vue                  | 23 ++++++++
 .../component_example/image_preview/index.vue |  6 +++
 .../views/component_example/select/_demo4.vue | 40 ++++++++++++++
 .../views/component_example/select/index.vue  |  6 +++
 6 files changed, 133 insertions(+)
 create mode 100644 apps/example/src/views/component_example/dropdown/_demo3.vue
 create mode 100644 apps/example/src/views/component_example/image_preview/_demo3.vue
 create mode 100644 apps/example/src/views/component_example/select/_demo4.vue

diff --git a/apps/example/src/views/component_example/dropdown/_demo3.vue b/apps/example/src/views/component_example/dropdown/_demo3.vue
new file mode 100644
index 00000000..fd6f908f
--- /dev/null
+++ b/apps/example/src/views/component_example/dropdown/_demo3.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const modal = shallowRef(false)
+
+function handleClick(text: string) {
+  faToast(text)
+}
+
+const items = [
+  [
+    { label: 'Preview', icon: 'i-lucide:eye', handle: () => handleClick('Preview') },
+    { label: 'Duplicate', icon: 'i-lucide:copy', handle: () => handleClick('Duplicate') },
+  ],
+  [
+    {
+      label: 'More',
+      items: [
+        [
+          { label: 'Share', handle: () => handleClick('Share') },
+        ],
+        [
+          { label: 'Delete', variant: 'destructive' as const, handle: () => handleClick('Delete') },
+        ],
+      ],
+    },
+  ],
+]
+</script>
+
+<template>
+  <div>
+    <FaButton @click="modal = true">
+      打开
+    </FaButton>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的下拉菜单"
+      description="在模态框内容区内触发 FaDropdown"
+      :footer="false"
+      class="sm:max-w-2xl"
+      content-class="min-h-auto"
+    >
+      <div class="py-6 flex-center">
+        <FaDropdown :items="items">
+          <FaButton>
+            Actions
+            <FaIcon name="i-ep:caret-bottom" />
+          </FaButton>
+        </FaDropdown>
+      </div>
+    </FaModal>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/dropdown/index.vue b/apps/example/src/views/component_example/dropdown/index.vue
index 919b75a4..2b6407fa 100755
--- a/apps/example/src/views/component_example/dropdown/index.vue
+++ b/apps/example/src/views/component_example/dropdown/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
+import Demo3 from './_demo3.vue'
 </script>
 
 <template>
@@ -16,5 +17,10 @@ import Demo2 from './_demo2.vue'
         <Demo2 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo3 />
+      </div>
+    </FaPageMain>
   </div>
 </template>
diff --git a/apps/example/src/views/component_example/image_preview/_demo3.vue b/apps/example/src/views/component_example/image_preview/_demo3.vue
new file mode 100644
index 00000000..4ba65c10
--- /dev/null
+++ b/apps/example/src/views/component_example/image_preview/_demo3.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const modal = ref(false)
+</script>
+
+<template>
+  <div>
+    <FaButton @click="modal = true">
+      打开
+    </FaButton>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的图片预览"
+      description="点击图片后仍可继续进入全屏预览"
+      :footer="false"
+      class="sm:max-w-3xl"
+      content-class="min-h-auto"
+    >
+      <div class="py-4 flex-center">
+        <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" />
+      </div>
+    </FaModal>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/image_preview/index.vue b/apps/example/src/views/component_example/image_preview/index.vue
index d9e4ac06..7c8787e0 100755
--- a/apps/example/src/views/component_example/image_preview/index.vue
+++ b/apps/example/src/views/component_example/image_preview/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
+import Demo3 from './_demo3.vue'
 </script>
 
 <template>
@@ -16,5 +17,10 @@ import Demo2 from './_demo2.vue'
         <Demo2 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo3 />
+      </div>
+    </FaPageMain>
   </div>
 </template>
diff --git a/apps/example/src/views/component_example/select/_demo4.vue b/apps/example/src/views/component_example/select/_demo4.vue
new file mode 100644
index 00000000..a08119b8
--- /dev/null
+++ b/apps/example/src/views/component_example/select/_demo4.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const modal = shallowRef(false)
+const cityInFaModal = shallowRef('shanghai')
+
+const options = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="flex gap-2">
+      <FaButton @click="modal = true">
+        打开 FaModal
+      </FaButton>
+    </div>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的选择器"
+      description="在模态框内容区内使用 FaSelect"
+      :footer="false"
+      class="sm:max-w-lg"
+      content-class="min-h-auto"
+    >
+      <div class="py-4 flex flex-col gap-4">
+        <FaSelect
+          v-model="cityInFaModal"
+          :options="options"
+          placeholder="请选择城市"
+          class="w-full"
+        />
+        <div class="text-sm text-muted-foreground">
+          当前值：{{ cityInFaModal }}
+        </div>
+      </div>
+    </FaModal>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/select/index.vue b/apps/example/src/views/component_example/select/index.vue
index 18a12e0c..7bf222ce 100755
--- a/apps/example/src/views/component_example/select/index.vue
+++ b/apps/example/src/views/component_example/select/index.vue
@@ -2,6 +2,7 @@
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
 import Demo3 from './_demo3.vue'
+import Demo4 from './_demo4.vue'
 </script>
 
 <template>
@@ -22,5 +23,10 @@ import Demo3 from './_demo3.vue'
         <Demo3 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo4 />
+      </div>
+    </FaPageMain>
   </div>
 </template>