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 实参传进去。