useLoginDialog()

提供一個全域共享的登入彈窗顯隱狀態。任意元件可以打開彈窗，登入彈窗 UI 元件（如 <SwLoginDialog>）透過 v-model="visible" 與該狀態雙向綁定。

基本用法

第一步：在版面配置或根元件裡掛載一次登入彈窗 UI，綁定 visible：

<script setup lang="ts">
const { visible } = useLoginDialog()
</script>

<template>
  <SwLoginDialog v-model="visible" />
</template>

第二步：業務元件裡互動前檢查登入狀態。配合 useLoginCheck 的 dialog 模式最簡潔——未登入時自動打開登入彈窗：

<script setup lang="ts">
const { open } = useLoginDialog()

async function handleComment() {
  // 未登入：自動打開登入彈窗並返回 false；已登入：返回 true
  if (!(await useLoginCheck({ mode: 'dialog', openDialog: open }))) return
  // 已登入，繼續評論邏輯
}
</script>

<template>
  <SwButton @click="handleComment">發表評論</SwButton>
</template>

若只想手動打開彈窗、不做登入判斷，直接呼叫 open() 即可。

回傳值

名稱	類型	說明
`visible`	`Ref<boolean>`	登入彈窗顯示標誌（可讀寫，也可配合 `v-model` 綁定）
`open`	`() => void`	打開彈窗（等價 `visible.value = true`）
`close`	`() => void`	關閉彈窗（等價 `visible.value = false`）

與 useLoginCheck 的區別

useLoginCheck() —— async 登入斷言，await 後返回是否已登入的布林值；未登入時按 mode 跳轉登入頁（'page'）或觸發彈窗（'dialog'）。適合互動 / 提交前做登入檢查。
useLoginDialog().open() —— 只負責打開登入彈窗本身，不做登入判斷。適合已確定要彈登入框的場景。

實戰中兩者常配合：useLoginCheck({ mode: 'dialog', openDialog }) 由 useLoginCheck 判斷登入狀態，未登入時呼叫 useLoginDialog 的 open 彈出登入框。

注意事項

它只切彈窗顯隱，不做登入判斷（Rule ULD-001）—— 實作就是 useState('loginDialogVisible') + open / close：無 isLoggedIn 判斷、非 async、不回傳登入結果。拿它當登入守衛會有兩個後果：① 已登入使用者也被彈登入框 ② 以為 open() 會 await 登入成敗，實際拿不到結果。
要「未登入才攔截 + 等待結果」用 useLoginCheck() —— if (!(await useLoginCheck())) return（Rule UL-001）。本 composable 只用於純控制彈窗顯隱的場景（如自訂觸發時機），或作為 useLoginCheck({ mode: 'dialog', openDialog: open }) 的 openDialog 實參傳進去。