u

code/g3soft-libs/docs/examples/modal/basic.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// 受控用法：v-model:open 控制显隐，confirm / cancel / closed 三个事件区分关闭来源
+import { ref } from 'vue'
+import { G3Button, G3Input, G3Modal, G3Space } from '@g3soft/ui'
+
+const open = ref(false)
+const name = ref('')
+const log = ref('暂无')
+
+function onConfirm() {
+  log.value = `confirm：提交 ${name.value || '（空）'}`
+  open.value = false
+}
+
+function onCancel() {
+  log.value = 'cancel：取消按钮 / 遮罩 / Esc / 右上角关闭'
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <div>
+      <G3Button @click="open = true">打开对话框</G3Button>
+    </div>
+
+    <G3Modal v-model:open="open" title="新建项目" @confirm="onConfirm" @cancel="onCancel" @closed="log = `${log}｜closed：退场动画结束`">
+      <G3Input v-model="name" placeholder="项目名称" />
+    </G3Modal>
+
+    <span style="font-size: 12px; color: #6b7280">{{ log }}</span>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/modal/confirm-async.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// 异步确认：onConfirm 返回 Promise 时按钮进入 loading
+// resolve → 关闭；reject → 保持打开，让用户重试或取消
+import { G3Button, G3Message, G3Modal, G3Space } from '@g3soft/ui'
+
+function openSuccess() {
+  G3Modal.confirm({
+    title: '提交审批',
+    content: 'onConfirm 返回 Promise，等待期间按钮显示 loading。',
+    onConfirm: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1200))
+      G3Message.success('审批已提交')
+    },
+  })
+}
+
+function openFailure() {
+  G3Modal.confirm({
+    title: '可能失败的提交',
+    content: '这次会 reject：弹窗保持打开，按钮恢复可点。',
+    onConfirm: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      G3Message.error('服务不可用，请重试')
+      throw new Error('failed')
+    },
+  })
+}
+</script>
+
+<template>
+  <G3Space :size="12" wrap>
+    <G3Button @click="openSuccess">异步成功</G3Button>
+    <G3Button type="outline" @click="openFailure">异步失败</G3Button>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/modal/confirm.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// 命令式确认框：G3Modal.confirm(options) 返回 { destroy }
+import { G3Button, G3Message, G3Modal, G3Space } from '@g3soft/ui'
+
+function openConfirm() {
+  G3Modal.confirm({
+    title: '确定删除该分支？',
+    content: '删除后不可恢复，关联的构建记录会一并清理。',
+    confirmText: '删除',
+    cancelText: '再想想',
+    confirmButtonProps: { danger: true },
+    onConfirm: () => G3Message.success('已删除'),
+    onCancel: () => G3Message.info('已取消'),
+  })
+}
+
+// destroy：不等退场动画直接卸载（例如路由切换时清理）
+let handle: ReturnType<typeof G3Modal.confirm> | null = null
+
+function openAndDestroy() {
+  handle = G3Modal.confirm({
+    title: '3 秒后强制销毁',
+    content: 'destroy() 会立即关闭并卸载容器，不播放退场动画。',
+  })
+  setTimeout(() => handle?.destroy(), 3000)
+}
+</script>
+
+<template>
+  <G3Space :size="12" wrap>
+    <G3Button type="danger-outline" @click="openConfirm">删除确认</G3Button>
+    <G3Button type="outline" @click="openAndDestroy">演示 destroy()</G3Button>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/modal/footer-slot.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// #footer 完全自定义底部；#header-extra 放标题右侧的额外动作
+import { ref } from 'vue'
+import { G3Button, G3Modal, G3Space } from '@g3soft/ui'
+
+const open = ref(false)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <div>
+      <G3Button @click="open = true">自定义底部</G3Button>
+    </div>
+
+    <G3Modal v-model:open="open" title="发布向导">
+      <template #header-extra>
+        <G3Button size="small" type="ghost">帮助</G3Button>
+      </template>
+
+      <p style="margin: 0">底部可以放多个按钮、步骤指示器或协议勾选。</p>
+
+      <template #footer>
+        <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
+          <span style="font-size: 12px; color: #6b7280">第 1 / 3 步</span>
+          <G3Space :size="8">
+            <G3Button type="outline" @click="open = false">取消</G3Button>
+            <G3Button @click="open = false">下一步</G3Button>
+          </G3Space>
+        </div>
+      </template>
+    </G3Modal>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/modal/form.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// 表单弹窗：confirmLoading 阻止一切关闭，异步提交期间按钮显示加载
+import { reactive, ref } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3Modal } from '@g3soft/ui'
+
+const open = ref(false)
+const saving = ref(false)
+const model = reactive({ name: '', code: '' })
+const rules = { name: [{ required: true }] }
+
+async function handleConfirm() {
+  saving.value = true
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    G3Message.success(`已保存 ${model.name}`)
+    open.value = false
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <G3Button @click="open = true">新建（表单弹窗）</G3Button>
+
+    <G3Modal
+      v-model:open="open"
+      title="新建项目"
+      :width="480"
+      :confirm-loading="saving"
+      @confirm="handleConfirm"
+    >
+      <G3Form :model="model" :rules="rules" :label-width="72" validate-trigger="blur" @submit="handleConfirm">
+        <G3FormItem name="name" label="名称">
+          <G3Input v-model="model.name" placeholder="必填" />
+        </G3FormItem>
+        <G3FormItem name="code" label="标识">
+          <G3Input v-model="model.code" placeholder="可选" />
+        </G3FormItem>
+      </G3Form>
+    </G3Modal>
+  </div>
+</template>

code/g3soft-libs/docs/examples/modal/mask.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// mask / maskClosable / keyboard / closable / footer：控制关闭入口
+import { ref } from 'vue'
+import { G3Button, G3Modal, G3Space, G3Switch } from '@g3soft/ui'
+
+const open = ref(false)
+const maskClosable = ref(false)
+const keyboard = ref(true)
+const closable = ref(true)
+const showFooter = ref(true)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <G3Space :size="[16, 8]" wrap>
+      <G3Switch v-model="maskClosable">点击遮罩关闭</G3Switch>
+      <G3Switch v-model="keyboard">Esc 关闭</G3Switch>
+      <G3Switch v-model="closable">显示关闭按钮</G3Switch>
+      <G3Switch v-model="showFooter">显示底部按钮</G3Switch>
+    </G3Space>
+
+    <div>
+      <G3Button @click="open = true">打开</G3Button>
+    </div>
+
+    <G3Modal
+      v-model:open="open"
+      title="关闭入口可控"
+      :mask-closable="maskClosable"
+      :keyboard="keyboard"
+      :closable="closable"
+      :footer="showFooter"
+    >
+      强制用户做出选择时，把 maskClosable / keyboard / closable 都设为 false。
+    </G3Modal>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/modal/resize.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// 拖动标题栏移动、拖拽四边缩放、全屏切换；centered 让面板垂直居中
+import { ref } from 'vue'
+import { G3Button, G3Modal, G3Space } from '@g3soft/ui'
+
+const open = ref(false)
+const fullscreen = ref(false)
+</script>
+
+<template>
+  <G3Space :size="12" wrap>
+    <G3Button type="outline" @click="open = true; fullscreen = false">可拖动 / 缩放</G3Button>
+    <G3Button type="outline" @click="open = true; fullscreen = true">居中显示</G3Button>
+
+    <G3Modal
+      v-model:open="open"
+      :title="fullscreen ? '居中且禁止拖动' : '拖动标题栏可移动，拖拽四边可缩放'"
+      :width="560"
+      :centered="fullscreen"
+      :fullscreen="!fullscreen"
+      :resizable="!fullscreen"
+    >
+      <p style="margin: 0">面板默认贴顶显示；开启 centered 后垂直居中，适合确认类与短表单。</p>
+      <p style="margin: 8px 0 0; color: #6b7280">
+        右上角的全屏按钮与拖动/缩放互斥：全屏时会自动复位位置。
+      </p>
+    </G3Modal>
+  </G3Space>
+</template>