Admin 元件

Overlay

程式化開啟 Dialog、Drawer 等浮層。可動態更新 props；結果以 Promise 回傳。

安裝

Terminal

pnpm dlx shadcn-vue add @admin/overlay

import { AdminOverlayProvider, useOverlay } from '@/components/admin/overlay'

於 app root（通常是 app.vue）掛載 admin-overlay-provider 一次；後續以共用 useOverlay() 建立的 overlay 會自動註冊到此 provider：

app.vue

<script setup lang="ts">import { AdminOverlayProvider } from '@/components/admin/overlay'</script><template>  <nuxt-layout>    <nuxt-page />  </nuxt-layout>  <admin-overlay-provider /></template>

用法

<script setup lang="ts">import { useOverlay } from '@/components/admin/overlay'import PublishReleaseDialog from '~/components/publish-release-dialog.vue'const overlay = useOverlay()const confirmDialog = overlay.create(PublishReleaseDialog, {  props: {    title: 'Publish this release?',    message: 'Confirm before shipping changes to production.',  },})async function handlePublish() {  const result = await confirmDialog.open()  if (result === 'confirmed') {    // continue the workflow  }}</script>

場景

基本開啟流程

觸發 overlay 並在當下根據回傳值處理。

<script setup lang="ts">import { ref } from 'vue'import { AdminButton } from '@/components/admin/button'import { useOverlay } from '@/components/admin/overlay'import OverlayConfirmDialog from './dialog/overlay-confirm-dialog.vue'const overlay = useOverlay()const lastResult = ref('No result yet.')const confirmDialog = overlay.create(OverlayConfirmDialog, {  props: {    title: 'Publish this release?',    message: 'Confirm or cancel to see the value resolved by the overlay.'  }})function openOverlay() {  lastResult.value = 'Waiting for a response...'  confirmDialog.open().then((value) => {    lastResult.value = value ?? 'dismissed'  })}</script><template>  <div class="flex w-full max-w-md flex-col gap-4">    <admin-button class="self-start" @click="openOverlay">Open overlay</admin-button>    <p class="text-sm text-text-60">Last result: {{ lastResult }}</p>  </div></template>

等待結果回傳

呼叫端需要等使用者 confirm／cancel 後再繼續。

<script setup lang="ts">import { ref } from 'vue'import { AdminButton } from '@/components/admin/button'import { useOverlay } from '@/components/admin/overlay'import OverlayConfirmDialog from './dialog/overlay-confirm-dialog.vue'const overlay = useOverlay()const resolution = ref('No promise resolved yet.')const confirmDialog = overlay.create(OverlayConfirmDialog, {  props: {    title: 'Archive this item?',    message: 'Await the overlay result to continue the workflow in the same action handler.'  }})async function openWithPromise() {  resolution.value = 'Awaiting user input...'  const result = await confirmDialog.open()  resolution.value = result ?? 'dismissed'}</script><template>  <div class="flex w-full max-w-md flex-col gap-4">    <admin-button class="self-start" variant="outline" @click="openWithPromise">      Await overlay promise    </admin-button>    <p class="text-sm text-text-60">Resolved value: {{ resolution }}</p>  </div></template>

重用同一個 overlay 並覆寫 props

多個按鈕共用同一個 overlay component、每次 open() 直接傳入要覆寫的 props 即可替換文案。

<script setup lang="ts">import { ref } from 'vue'import { AdminButton } from '@/components/admin/button'import { useOverlay } from '@/components/admin/overlay'import OverlayConfirmDialog from './dialog/overlay-confirm-dialog.vue'const overlay = useOverlay()const activeScenario = ref('Choose a scenario to patch the dialog props before opening it.')const confirmDialog = overlay.create(OverlayConfirmDialog, {  props: {    title: 'Default confirmation',    message: 'Patch the dialog props before each open call to reuse one overlay instance.'  }})function openDangerScenario() {  activeScenario.value = 'Danger scenario is active.'  confirmDialog.open({    title: 'Delete this member?',    message: 'This action cannot be undone once the overlay closes.'  })}function openSafeScenario() {  activeScenario.value = 'Safe scenario is active.'  confirmDialog.open({    title: 'Save a draft instead?',    message: 'Reuse the same overlay instance with calmer copy for a lower-risk path.'  })}</script><template>  <div class="flex w-full max-w-md flex-col gap-4">    <div class="flex flex-wrap gap-3">      <admin-button class="self-start" @click="openDangerScenario"        >Open danger scenario</admin-button      >      <admin-button class="self-start" variant="outline" @click="openSafeScenario">        Open safe scenario      </admin-button>    </div>    <p class="text-sm text-text-60">{{ activeScenario }}</p>  </div></template>

API 參考

組成

<template>  <admin-overlay-provider /></template>

admin-overlay-provider 須在 app root 掛載一次；

admin-overlay-provider

Props

名稱	型別	預設值	說明
`class`	`unknown`	—	—

更新紀錄

此元件尚無更新紀錄。

Number Field

數字輸入。含增減控制。

Pagination

分頁導覽。頁碼、資訊區、每頁筆數選擇。