ai-kefu-admin/admin/src/views/tenants/list/index.vue

<!--
  租户管理与站点管理（Phase 3 Task 6，仅超管——菜单 roles:['super'] 已挡）
  - 列表：slug/名称/状态/域名数/版本号/管理员概要 + 状态筛选 + 行操作
    （详情抽屉 / 改名 / 停用 / 复启用）
  - 创建向导（ElSteps 四步）：①名称+slug（^[a-z0-9-]+$ + 对现列表撞车提示）
    → ②绑定域名（可多填，进 main 站点）→ ③出厂档案 auto/jiancai/blank
    （blank=墙与提示词取建材出厂档案；同档案第二个租户会撞 push.prefix
    全局唯一 → 400 引导改 blank 或先改占用方）→ ④管理员账号 → 创建
    （201 后列表刷新 + 提示"租户已创建，管理员首登需改密"）
  - 站点管理（详情抽屉内）：站点列表/新建（门面覆盖层表单，留空=继承租户
    默认）/编辑门面（Task 7a：PATCH brand_overlay 整字典，留空剔除，共用
    SiteOverlayFields 组件）/停用复启用/域名绑定解绑（撞车 400 的归属信息
    内联展示）
  - 停用后果文案（Phase 2 语义）：租户停用=官网挂件 503 服务暂停页；
    站点停用=该站点域名 404（不是服务暂停）——确认框写明
  - slug 不可变（后端 PATCH 带 slug 键 400）——界面不提供改 slug 入口
-->
<template>
  <div class="tenants-page">
    <!-- 头部：标题 + 新建入口 -->
    <div class="page-header">
      <div>
        <h2 class="page-title">租户管理</h2>
        <p class="page-sub">租户生命周期与站点 / 域名管理（仅超级管理员）</p>
      </div>
      <ElButton type="primary" @click="openWizard">新建租户</ElButton>
    </div>

    <!-- 租户列表 -->
    <ElCard shadow="never" class="section-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">租户列表</span>
          <ElRadioGroup v-model="statusFilter">
            <ElRadioButton value="">全部</ElRadioButton>
            <ElRadioButton value="active">启用</ElRadioButton>
            <ElRadioButton value="disabled">停用</ElRadioButton>
          </ElRadioGroup>
        </div>
      </template>

      <ElAlert
        v-if="listError"
        type="error"
        :closable="false"
        :title="listError"
        class="load-error"
      >
        <ElButton size="small" :loading="listLoading" @click="loadList">重试</ElButton>
      </ElAlert>
      <template v-else>
        <ElEmpty
          v-if="!listLoading && tenants.length === 0"
          description="暂无租户——点击右上角「新建租户」走创建向导"
        />
        <ElEmpty
          v-else-if="!listLoading && filteredTenants.length === 0"
          :description="`没有${statusFilter === 'active' ? '启用' : '停用'}状态的租户`"
        />
        <ElTable v-else v-loading="listLoading" :data="filteredTenants" row-key="slug">
          <ElTableColumn label="名称" min-width="170" show-overflow-tooltip>
            <template #default="{ row }">
              <span class="tenant-name">{{ row.name }}</span>
              <span class="tenant-slug">@{{ row.slug }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="slug" label="slug" width="120" show-overflow-tooltip />
          <ElTableColumn label="状态" width="84">
            <template #default="{ row }">
              <ElTag :type="row.status === 'active' ? 'success' : 'info'" size="small">
                {{ row.status === 'active' ? '启用' : '停用' }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn label="域名数" width="80" align="center">
            <template #default="{ row }">
              <span>{{ row.domain_count }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="版本" width="70" align="center">
            <template #default="{ row }">
              <span>{{ row.current_version ?? '—' }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="管理员" min-width="150" show-overflow-tooltip>
            <template #default="{ row }">
              <span v-if="row.admins.length > 0">{{ adminNames(row.admins) }}</span>
              <span v-else class="muted">—</span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" width="216" fixed="right">
            <template #default="{ row }">
              <ElButton type="primary" link size="small" @click="openDetail(row)"> 详情 </ElButton>
              <ElButton type="primary" link size="small" @click="openRename(row)"> 改名 </ElButton>
              <ElButton
                :type="row.status === 'active' ? 'danger' : 'success'"
                link
                size="small"
                @click="onToggleTenant(row)"
              >
                {{ row.status === 'active' ? '停用' : '复启用' }}
              </ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </template>
    </ElCard>

    <!-- ==================== 租户详情抽屉（站点管理） ==================== -->
    <ElDrawer v-model="detailVisible" size="780px" @closed="onDetailClosed">
      <template #header>
        <div class="drawer-header">
          <span class="drawer-title">
            租户详情：{{ detail?.name ?? detailSlug }}
            <ElTag
              v-if="detail"
              :type="detail.status === 'active' ? 'success' : 'info'"
              size="small"
            >
              {{ detail.status === 'active' ? '启用' : '停用' }}
            </ElTag>
          </span>
          <ElButton
            v-if="detail"
            size="small"
            :disabled="detail.status !== 'active'"
            :title="detail.status !== 'active' ? '租户已停用，复启用后可新建站点' : ''"
            @click="openSiteDialog"
          >
            新建站点
          </ElButton>
        </div>
      </template>

      <div v-loading="detailLoading" class="detail-body">
        <ElAlert
          v-if="detailError"
          type="error"
          :closable="false"
          :title="detailError"
          class="load-error"
        >
          <ElButton size="small" :loading="detailLoading" @click="loadDetail">重试</ElButton>
        </ElAlert>

        <template v-else-if="detail">
          <!-- 租户元信息 -->
          <ElDescriptions :column="2" border size="small" class="detail-section">
            <ElDescriptionsItem label="slug">
              <span class="mono">{{ detail.slug }}</span>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="当前版本">
              v{{ detail.current_version ?? '—' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="管理员" :span="2">
              <span v-if="detail.admins.length > 0">
                {{ detail.admins.map((a) => a.username).join('、') }}
              </span>
              <span v-else class="muted">—</span>
            </ElDescriptionsItem>
          </ElDescriptions>

          <!-- 站点列表 -->
          <section class="detail-section">
            <h4 class="section-title">站点（{{ detail.sites.length }}）</h4>
            <ElTable :data="detail.sites" row-key="slug" size="small">
              <ElTableColumn label="站点" width="110" show-overflow-tooltip>
                <template #default="{ row }">
                  <span class="mono">{{ row.slug }}</span>
                </template>
              </ElTableColumn>
              <ElTableColumn prop="name" label="名称" min-width="110" show-overflow-tooltip />
              <ElTableColumn label="状态" width="76">
                <template #default="{ row }">
                  <ElTag :type="row.status === 'active' ? 'success' : 'info'" size="small">
                    {{ row.status === 'active' ? '启用' : '停用' }}
                  </ElTag>
                </template>
              </ElTableColumn>
              <ElTableColumn label="域名" min-width="180">
                <template #default="{ row }">
                  <div v-if="row.domains.length > 0" class="domain-tags">
                    <ElTag
                      v-for="domain in row.domains"
                      :key="domain"
                      closable
                      size="small"
                      @close="onUnbindDomain(row, domain)"
                    >
                      {{ domain }}
                    </ElTag>
                  </div>
                  <span v-else class="muted">—</span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="门面" width="120">
                <template #default="{ row }">
                  <ElTooltip
                    v-if="overlayKeys(row).length > 0"
                    :content="overlayKeys(row).map(overlayKeyLabel).join('、')"
                    placement="top"
                  >
                    <span class="overlay-hint">覆盖 {{ overlayKeys(row).length }} 项</span>
                  </ElTooltip>
                  <span v-else class="muted">继承租户默认</span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="操作" width="216" fixed="right">
                <template #default="{ row }">
                  <ElButton type="primary" link size="small" @click="openOverlayEdit(row)">
                    编辑门面
                  </ElButton>
                  <ElButton
                    :type="row.status === 'active' ? 'danger' : 'success'"
                    link
                    size="small"
                    @click="onToggleSite(row)"
                  >
                    {{ row.status === 'active' ? '停用' : '复启用' }}
                  </ElButton>
                  <ElButton
                    type="primary"
                    link
                    size="small"
                    :disabled="row.status !== 'active'"
                    @click="openDomainDialog(row)"
                  >
                    绑定域名
                  </ElButton>
                </template>
              </ElTableColumn>
            </ElTable>
            <p class="section-tip">
              域名标签上的 × 可解绑；站点停用 = 该站点全部域名访问 404（区别于租户停用的 503
              服务暂停页）。
            </p>
          </section>
        </template>
      </div>
    </ElDrawer>

    <!-- ==================== 改名弹窗（slug 不可变） ==================== -->
    <ElDialog v-model="renameVisible" title="租户改名" width="460px">
      <ElForm label-width="90px" @submit.prevent>
        <ElFormItem label="slug">
          <span class="mono">{{ renameSlug }}</span>
        </ElFormItem>
        <ElFormItem label="新名称" required>
          <ElInput v-model="renameName" maxlength="128" placeholder="1-128 字符" />
        </ElFormItem>
      </ElForm>
      <p class="dialog-tip">slug 不可修改（后端约束）；仅更新租户显示名称。</p>
      <template #footer>
        <ElButton @click="renameVisible = false">取消</ElButton>
        <ElButton type="primary" :loading="renaming" @click="onRename">保存</ElButton>
      </template>
    </ElDialog>

    <!-- ==================== 创建向导 ==================== -->
    <ElDialog
      v-model="wizardVisible"
      title="新建租户（创建向导）"
      width="640px"
      :close-on-click-modal="false"
    >
      <ElSteps :active="wizardStep" align-center finish-status="success" class="wizard-steps">
        <ElStep title="基本信息" />
        <ElStep title="绑定域名" />
        <ElStep title="出厂档案" />
        <ElStep title="管理员账号" />
      </ElSteps>

      <div class="wizard-body">
        <!-- 步骤 1：名称 + slug -->
        <template v-if="wizardStep === 0">
          <ElForm label-width="90px" @submit.prevent>
            <ElFormItem label="租户名称" required>
              <ElInput v-model="wizard.name" maxlength="128" placeholder="1-128 字符" />
            </ElFormItem>
            <ElFormItem label="slug" required>
              <ElInput
                v-model="wizard.slug"
                maxlength="64"
                placeholder="小写字母、数字、连字符（如 jiancai）"
              />
            </ElFormItem>
          </ElForm>
          <p class="dialog-tip">
            slug 创建后不可修改，且全局唯一（与现有租户撞车会在本步拦截）。
          </p>
        </template>

        <!-- 步骤 2：绑定域名（可多填，进 main 站点） -->
        <template v-else-if="wizardStep === 1">
          <div v-for="(_, index) in wizard.domains" :key="index" class="domain-row">
            <ElInput
              v-model="wizard.domains[index]"
              placeholder="example.com（入库自动归一：小写 / 去端口 / 去尾点）"
            />
            <ElButton
              v-if="wizard.domains.length > 1"
              type="danger"
              link
              @click="wizard.domains.splice(index, 1)"
            >
              删除
            </ElButton>
          </div>
          <ElButton size="small" @click="wizard.domains.push('')">+ 添加域名</ElButton>
          <p class="dialog-tip">
            可全部留空（创建后在站点管理中随时绑定）；域名全局唯一，撞车会在提交时报出归属。
          </p>
        </template>

        <!-- 步骤 3：出厂档案 -->
        <template v-else-if="wizardStep === 2">
          <ElRadioGroup v-model="wizard.profile" class="profile-group">
            <ElRadio v-for="item in PROFILE_OPTIONS" :key="item.value" :value="item.value">
              <span class="profile-label">{{ item.label }}</span>
              <span class="profile-desc">{{ item.desc }}</span>
            </ElRadio>
          </ElRadioGroup>
          <ElAlert
            v-if="wizard.profile === 'auto' || wizard.profile === 'jiancai'"
            type="warning"
            :closable="false"
            class="profile-alert"
            title="push.prefix 全局唯一：同一档案的第二个租户会被 400 拒绝"
            description="届时改选 blank（创建后经配置中心改前缀），或先修改占用方租户的前缀。"
          />
          <ElAlert
            v-else-if="wizard.profile === 'blank'"
            type="info"
            :closable="false"
            class="profile-alert"
            title="blank：墙与提示词取建材出厂档案"
            description="品牌 / 推送等身份组取出厂默认（push.prefix 为空，不占全局唯一位）；上线前建议到配置中心按业务改写。"
          />
        </template>

        <!-- 步骤 4：管理员账号 -->
        <template v-else>
          <ElForm label-width="100px" @submit.prevent>
            <ElFormItem label="管理员用户名" required>
              <ElInput v-model="wizard.adminUsername" maxlength="64" placeholder="全局唯一" />
            </ElFormItem>
            <ElFormItem label="初始密码" required>
              <ElInput
                v-model="wizard.adminPassword"
                type="password"
                show-password
                autocomplete="new-password"
                placeholder="管理员首次登录将被强制修改密码"
              />
            </ElFormItem>
          </ElForm>
          <p class="dialog-tip"> 创建成功后管理员首登需改密（must_change_password 强制门）。 </p>
        </template>

        <!-- 内联错误：步骤校验 / 后端 400（含撞车与 prefix 引导文案）常驻展示 -->
        <ElAlert
          v-if="wizardError"
          type="error"
          :closable="false"
          class="wizard-error"
          :title="wizardError"
        />
      </div>

      <template #footer>
        <ElButton v-if="wizardStep > 0" :disabled="wizardCreating" @click="wizardPrev">
          上一步
        </ElButton>
        <ElButton v-if="wizardStep < 3" type="primary" @click="wizardNext">下一步</ElButton>
        <ElButton v-else type="primary" :loading="wizardCreating" @click="wizardCreate">
          创建租户
        </ElButton>
      </template>
    </ElDialog>

    <!-- ==================== 新建站点弹窗 ==================== -->
    <ElDialog
      v-model="siteDialogVisible"
      title="新建站点"
      width="620px"
      append-to-body
      :close-on-click-modal="false"
    >
      <ElForm label-position="top" @submit.prevent>
        <div class="site-basic-row">
          <ElFormItem label="站点 slug" required>
            <ElInput
              v-model="siteForm.slug"
              maxlength="64"
              placeholder="小写字母、数字、连字符（创建后不可改）"
            />
          </ElFormItem>
          <ElFormItem label="站点名称">
            <ElInput v-model="siteForm.name" maxlength="128" placeholder="留空则同 slug" />
          </ElFormItem>
        </div>

        <SiteOverlayFields :form="siteForm" />
      </ElForm>
      <p class="dialog-tip">
        站点创建后，域名经站点列表的「绑定域名」挂载；覆盖层可随时经「编辑门面」整组更新。
      </p>
      <template #footer>
        <ElButton @click="siteDialogVisible = false">取消</ElButton>
        <ElButton type="primary" :loading="siteCreating" @click="onCreateSite"> 创建站点 </ElButton>
      </template>
    </ElDialog>

    <!-- ==================== 编辑门面覆盖层弹窗（Task 7a 顺手项） ==================== -->
    <ElDialog
      v-model="overlayEditVisible"
      :title="`编辑门面覆盖层（站点 ${overlayEditSiteSlug}）`"
      width="620px"
      append-to-body
      :close-on-click-modal="false"
    >
      <ElForm label-position="top" @submit.prevent>
        <SiteOverlayFields :form="overlayEditForm" />
      </ElForm>
      <ElAlert
        v-if="overlayUnknownKeys.length > 0"
        type="warning"
        :closable="false"
        class="overlay-edit-alert"
        :title="`覆盖层含未支持编辑的键：${overlayUnknownKeys.join('、')}——保存将整组替换，未识别键会被移除`"
      />
      <p class="dialog-tip">
        保存按整组替换提交：留空字段即剔除覆盖、恢复继承租户默认品牌（与新建站点同一语义）。
      </p>
      <template #footer>
        <ElButton @click="overlayEditVisible = false">取消</ElButton>
        <ElButton type="primary" :loading="overlayEditSaving" @click="onSaveOverlay">
          保存
        </ElButton>
      </template>
    </ElDialog>

    <!-- ==================== 绑定域名弹窗 ==================== -->
    <ElDialog
      v-model="domainDialogVisible"
      :title="`绑定域名（站点 ${domainSiteSlug}）`"
      width="520px"
      append-to-body
      :close-on-click-modal="false"
      @closed="domainInput = ''"
    >
      <ElForm label-width="80px" @submit.prevent>
        <ElFormItem label="域名" required>
          <ElInput
            v-model="domainInput"
            placeholder="example.com（入库自动归一：小写 / 去端口 / 去尾点）"
            @keyup.enter="onBindDomain"
          />
        </ElFormItem>
      </ElForm>
      <!-- 撞车 400 的归属信息（后端 detail：已绑定租户 x 的站点 y）内联常驻 -->
      <ElAlert
        v-if="domainError"
        type="error"
        :closable="false"
        class="wizard-error"
        :title="domainError"
      />
      <p class="dialog-tip">域名全局唯一（跨租户也不可重复绑定）；绑定成功立即生效。</p>
      <template #footer>
        <ElButton @click="domainDialogVisible = false">取消</ElButton>
        <ElButton type="primary" :loading="domainBinding" @click="onBindDomain"> 绑定 </ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessageBox } from 'element-plus'
  import SiteOverlayFields from '@/components/business/SiteOverlayFields/index.vue'
  import {
    OVERLAY_LABELS,
    blankOverlayForm,
    buildOverlay,
    overlayToForm,
    type OverlayFormState
  } from '@/components/business/SiteOverlayFields/model'
  import {
    addSiteDomain,
    createSite,
    createTenant,
    deleteSiteDomain,
    fetchTenantDetail,
    fetchTenantList,
    patchSite,
    patchTenant,
    type SiteSummary,
    type TenantAdminSummary,
    type TenantDetailResponse,
    type TenantListItem
  } from '@/api/tenants'

  defineOptions({ name: 'TenantList' })

  /** slug 规则（与后端 SLUG_RE 同一事实源文案） */
  const SLUG_RE = /^[a-z0-9-]+$/

  /** 出厂档案选项（Phase 2 创建向导语义；撞车引导文案照 tenant_routes.py） */
  const PROFILE_OPTIONS = [
    {
      value: 'auto',
      label: 'auto',
      desc: '通用外贸出厂档案（品牌 / 推送 / 提示词全套，push.prefix=ai-kefu）'
    },
    {
      value: 'jiancai',
      label: 'jiancai',
      desc: '建材行业出厂档案（西班牙语墙 / 建材词表，push.prefix=ai-kefu-jc）'
    },
    {
      value: 'blank',
      label: 'blank',
      desc: '空白档案——品牌 / 推送等身份组取出厂默认，不携带对方业务身份'
    }
  ] as const

  function overlayKeyLabel(key: string): string {
    return OVERLAY_LABELS[key] ?? key
  }

  /** 管理员概要 → 用户名串（模板不写带类型注解的内联箭头） */
  function adminNames(admins: TenantAdminSummary[]): string {
    return admins.map((a) => a.username).join('、')
  }

  // ---- 租户列表 -------------------------------------------------------------------

  const tenants = ref<TenantListItem[]>([])
  const listLoading = ref(false)
  const listError = ref('')
  const listSeq = ref(0)
  const statusFilter = ref<'active' | 'disabled' | ''>('')

  const filteredTenants = computed(() =>
    statusFilter.value
      ? tenants.value.filter((t) => t.status === statusFilter.value)
      : tenants.value
  )

  async function loadList(): Promise<void> {
    const seq = ++listSeq.value
    listLoading.value = true
    listError.value = ''
    try {
      const res = await fetchTenantList()
      if (seq !== listSeq.value) return
      tenants.value = res.items
    } catch (error) {
      if (seq !== listSeq.value) return
      listError.value = error instanceof Error ? error.message : '租户列表加载失败'
    } finally {
      if (seq === listSeq.value) listLoading.value = false
    }
  }

  /** 详情开着时的联动刷新帮助（站点/域名操作会改变域名数） */
  function refreshAfterMutation(): void {
    loadList()
    if (detailVisible.value && detailSlug.value) loadDetail()
  }

  // ---- 停用 / 复启用（确认框写明 Phase 2 语义后果） ---------------------------------

  async function onToggleTenant(row: TenantListItem): Promise<void> {
    const disabling = row.status === 'active'
    const tip = disabling
      ? '停用后该租户官网挂件将进入 503 服务暂停页，全部域名服务暂停（后台数据与列表仍可见）。'
      : '复启用后该租户全部域名立即恢复服务。'
    try {
      await ElMessageBox.confirm(
        `${disabling ? '停用' : '复启用'}租户「${row.name}」（@${row.slug}）？${tip}`,
        disabling ? '停用租户' : '复启用租户',
        {
          type: 'warning',
          confirmButtonText: disabling ? '停用' : '复启用',
          cancelButtonText: '取消'
        }
      )
    } catch {
      return // 用户取消
    }
    try {
      await patchTenant(row.slug, { status: disabling ? 'disabled' : 'active' })
      ElMessage.success(disabling ? '租户已停用（官网挂件 503 服务暂停）' : '租户已复启用')
      refreshAfterMutation()
    } catch {
      // 失败提示由 client 全局拦截器统一弹出
    }
  }

  // ---- 改名（slug 不可变——不提供改 slug 入口） --------------------------------------

  const renameVisible = ref(false)
  const renameSlug = ref('')
  const renameName = ref('')
  const renaming = ref(false)

  function openRename(row: TenantListItem): void {
    renameSlug.value = row.slug
    renameName.value = row.name
    renameVisible.value = true
  }

  async function onRename(): Promise<void> {
    const name = renameName.value.trim()
    if (!name) {
      ElMessage.warning('名称不能为空')
      return
    }
    renaming.value = true
    try {
      await patchTenant(renameSlug.value, { name })
      ElMessage.success('已改名')
      renameVisible.value = false
      refreshAfterMutation()
    } catch {
      // 全局拦截器已提示（如 400 名称长度）
    } finally {
      renaming.value = false
    }
  }

  // ---- 详情抽屉 + 站点管理 -----------------------------------------------------------

  const detailVisible = ref(false)
  const detailSlug = ref('')
  const detail = ref<TenantDetailResponse | null>(null)
  const detailLoading = ref(false)
  const detailError = ref('')
  const detailSeq = ref(0)

  function openDetail(row: TenantListItem): void {
    detailSlug.value = row.slug
    detail.value = null
    detailError.value = ''
    detailVisible.value = true
    loadDetail()
  }

  async function loadDetail(): Promise<void> {
    if (!detailSlug.value) return
    const seq = ++detailSeq.value
    detailLoading.value = true
    detailError.value = ''
    try {
      const res = await fetchTenantDetail(detailSlug.value)
      if (seq !== detailSeq.value || !detailVisible.value) return
      detail.value = res
    } catch (error) {
      if (seq !== detailSeq.value) return
      detailError.value = error instanceof Error ? error.message : '详情加载失败'
    } finally {
      if (seq === detailSeq.value) detailLoading.value = false
    }
  }

  function onDetailClosed(): void {
    detailSeq.value++ // 使在途请求作废
    detail.value = null
    detailError.value = ''
  }

  /** 站点覆盖键列表（空值键也计入——展示实际落库形状） */
  function overlayKeys(site: SiteSummary): string[] {
    return Object.keys(site.brand_overlay ?? {})
  }

  // ---- 站点停用 / 复启用 -------------------------------------------------------------

  async function onToggleSite(site: SiteSummary): Promise<void> {
    const disabling = site.status === 'active'
    const tip = disabling
      ? '站点停用后，该站点全部域名的访问将返回 404（区别于租户停用的 503 服务暂停页）。'
      : '复启用后该站点域名恢复服务。'
    try {
      await ElMessageBox.confirm(
        `${disabling ? '停用' : '复启用'}站点「${site.name}」（${detailSlug.value}/${site.slug}）？${tip}`,
        disabling ? '停用站点' : '复启用站点',
        {
          type: 'warning',
          confirmButtonText: disabling ? '停用' : '复启用',
          cancelButtonText: '取消'
        }
      )
    } catch {
      return
    }
    try {
      await patchSite(detailSlug.value, site.slug, {
        status: disabling ? 'disabled' : 'active'
      })
      ElMessage.success(disabling ? '站点已停用（该站点域名 404）' : '站点已复启用')
      refreshAfterMutation()
    } catch {
      // 全局拦截器已提示
    }
  }

  // ---- 域名绑定 / 解绑 ----------------------------------------------------------------

  const domainDialogVisible = ref(false)
  const domainSiteSlug = ref('')
  const domainInput = ref('')
  const domainBinding = ref(false)
  const domainError = ref('')

  function openDomainDialog(site: SiteSummary): void {
    domainSiteSlug.value = site.slug
    domainInput.value = ''
    domainError.value = ''
    domainDialogVisible.value = true
  }

  async function onBindDomain(): Promise<void> {
    const value = domainInput.value.trim()
    if (!value) {
      domainError.value = '域名不能为空'
      return
    }
    domainBinding.value = true
    domainError.value = ''
    try {
      await addSiteDomain(
        detailSlug.value,
        domainSiteSlug.value,
        { domain: value },
        { showErrorMessage: false }
      )
      ElMessage.success(`域名已绑定到站点 ${domainSiteSlug.value}`)
      domainDialogVisible.value = false
      refreshAfterMutation()
    } catch (error) {
      // 撞车 400 detail 带归属（"已绑定租户 x 的站点 y"）——内联常驻展示
      domainError.value = error instanceof Error ? error.message : '绑定失败'
    } finally {
      domainBinding.value = false
    }
  }

  async function onUnbindDomain(site: SiteSummary, domain: string): Promise<void> {
    try {
      await ElMessageBox.confirm(
        `解绑域名 ${domain}（站点 ${site.slug}）？解绑后该域名立即 404。`,
        '解绑域名',
        { type: 'warning', confirmButtonText: '解绑', cancelButtonText: '取消' }
      )
    } catch {
      return
    }
    try {
      await deleteSiteDomain(detailSlug.value, site.slug, domain)
      ElMessage.success('域名已解绑')
      refreshAfterMutation()
    } catch {
      // 全局拦截器已提示（如 404 已被他人解绑）
    }
  }

  // ---- 新建站点（门面覆盖层：留空=继承租户默认） ---------------------------------------

  const siteDialogVisible = ref(false)
  const siteCreating = ref(false)

  function blankSiteForm(): OverlayFormState & { slug: string; name: string } {
    return { slug: '', name: '', ...blankOverlayForm() }
  }

  const siteForm = reactive(blankSiteForm())

  function openSiteDialog(): void {
    Object.assign(siteForm, blankSiteForm())
    siteDialogVisible.value = true
  }

  async function onCreateSite(): Promise<void> {
    const slug = siteForm.slug.trim()
    if (!SLUG_RE.test(slug)) {
      ElMessage.warning('站点 slug 只允许小写字母、数字和连字符')
      return
    }
    siteCreating.value = true
    try {
      await createSite(detailSlug.value, {
        slug,
        name: siteForm.name.trim() || undefined,
        brand_overlay: buildOverlay(siteForm)
      })
      ElMessage.success('站点已创建')
      siteDialogVisible.value = false
      refreshAfterMutation()
    } catch {
      // 全局拦截器已提示（如 400 站点 slug 已存在）
    } finally {
      siteCreating.value = false
    }
  }

  // ---- 编辑门面覆盖层（Task 7a 顺手项：PATCH sites 的 brand_overlay 整字典） ----------

  const overlayEditVisible = ref(false)
  const overlayEditSaving = ref(false)
  const overlayEditSiteSlug = ref('')
  const overlayEditForm = reactive(blankOverlayForm())
  /** 落库 overlay 中未支持编辑的键（保存整组替换会丢弃——弹窗内警示） */
  const overlayUnknownKeys = ref<string[]>([])

  function openOverlayEdit(site: SiteSummary): void {
    overlayEditSiteSlug.value = site.slug
    const { form, unknownKeys } = overlayToForm(site.brand_overlay)
    Object.assign(overlayEditForm, form)
    overlayUnknownKeys.value = unknownKeys
    overlayEditVisible.value = true
  }

  async function onSaveOverlay(): Promise<void> {
    overlayEditSaving.value = true
    try {
      await patchSite(detailSlug.value, overlayEditSiteSlug.value, {
        brand_overlay: buildOverlay(overlayEditForm)
      })
      ElMessage.success('门面覆盖层已更新（热生效）')
      overlayEditVisible.value = false
      refreshAfterMutation()
    } catch {
      // 全局拦截器已提示
    } finally {
      overlayEditSaving.value = false
    }
  }

  // ---- 创建向导（四步） -----------------------------------------------------------------

  const wizardVisible = ref(false)
  const wizardStep = ref(0)
  const wizardCreating = ref(false)
  const wizardError = ref('')
  const wizard = reactive({
    name: '',
    slug: '',
    domains: [''] as string[],
    profile: '',
    adminUsername: '',
    adminPassword: ''
  })

  function openWizard(): void {
    wizardStep.value = 0
    wizardError.value = ''
    Object.assign(wizard, {
      name: '',
      slug: '',
      domains: [''],
      profile: '',
      adminUsername: '',
      adminPassword: ''
    })
    wizardVisible.value = true
  }

  function wizardPrev(): void {
    wizardError.value = ''
    wizardStep.value -= 1
  }

  /** 当前步骤校验：空串=通过；错误文案进向导内联 alert */
  function validateWizardStep(): string {
    if (wizardStep.value === 0) {
      if (!wizard.name.trim()) return '请填写租户名称'
      if (!SLUG_RE.test(wizard.slug)) {
        return 'slug 只允许小写字母、数字和连字符（如 jiancai）'
      }
      if (tenants.value.some((t) => t.slug === wizard.slug)) {
        return `slug 已存在：${wizard.slug}（与现有租户撞车，请换一个）`
      }
      return ''
    }
    if (wizardStep.value === 2) {
      if (!wizard.profile) return '请选出厂档案'
      return ''
    }
    return ''
  }

  function wizardNext(): void {
    const error = validateWizardStep()
    if (error) {
      wizardError.value = error
      return
    }
    wizardError.value = ''
    wizardStep.value += 1
  }

  async function wizardCreate(): Promise<void> {
    if (!wizard.adminUsername.trim()) {
      wizardError.value = '请填写管理员用户名'
      return
    }
    if (!wizard.adminPassword) {
      wizardError.value = '请填写管理员初始密码'
      return
    }
    wizardCreating.value = true
    wizardError.value = ''
    try {
      await createTenant(
        {
          name: wizard.name.trim(),
          slug: wizard.slug,
          profile: wizard.profile,
          admin_username: wizard.adminUsername.trim(),
          admin_password: wizard.adminPassword,
          domains: wizard.domains.map((d) => d.trim()).filter(Boolean)
        },
        { showErrorMessage: false }
      )
      wizardVisible.value = false
      ElMessage.success('租户已创建，管理员首登需改密')
      refreshAfterMutation()
    } catch (error) {
      // 400 预检撞车 detail（slug 已存在 / 用户名被占 / 域名归属 /
      // prefix 引导改 blank 文案）在向导内联常驻展示
      wizardError.value = error instanceof Error ? error.message : '创建失败'
    } finally {
      wizardCreating.value = false
    }
  }

  // ---- 装配 ---------------------------------------------------------------------------

  onMounted(loadList)
</script>

<style scoped lang="scss">
  .tenants-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    .page-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }

    .page-sub {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--art-gray-500);
    }
  }

  .section-card {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .card-title {
      font-weight: 600;
    }
  }

  .load-error {
    margin-bottom: 12px;
  }

  .muted {
    color: var(--art-gray-400);
  }

  .mono {
    font-family: var(--art-font-family-mono, monospace);
    font-size: 12px;
  }

  // ---- 列表行 -----------------------------------------------------------------------

  .tenant-name {
    font-weight: 600;
  }

  .tenant-slug {
    margin-left: 6px;
    font-size: 12px;
    color: var(--art-gray-400);
  }

  // ---- 详情抽屉 ---------------------------------------------------------------------

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    .drawer-title {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .detail-body {
    min-height: 120px;
  }

  .detail-section {
    margin-bottom: 20px;
  }

  .section-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
  }

  .section-tip {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--art-gray-400);
  }

  .domain-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .overlay-hint {
    color: var(--el-color-primary);
    cursor: help;
  }

  // ---- 弹窗通用 ---------------------------------------------------------------------

  .dialog-tip {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--art-gray-400);
  }

  // ---- 创建向导 ---------------------------------------------------------------------

  .wizard-steps {
    margin-bottom: 20px;
  }

  .wizard-body {
    min-height: 180px;
  }

  .domain-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .profile-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;

    .el-radio {
      align-items: flex-start;
      height: auto;
      margin-right: 0;
      padding: 8px 0;

      .profile-label {
        font-weight: 600;
      }

      .profile-desc {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        color: var(--art-gray-500);
        white-space: normal;
      }
    }
  }

  .profile-alert {
    margin-top: 12px;
  }

  .wizard-error {
    margin-top: 12px;
  }

  // ---- 新建站点 ---------------------------------------------------------------------

  .site-basic-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  // ---- 编辑门面 ---------------------------------------------------------------------

  .overlay-edit-alert {
    margin-bottom: 8px;
  }
</style>