From 6f22e519081590a045710a1407601a7426c64b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Tue, 13 Oct 2026 18:27:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=9F=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=B8=8E=E7=AB=99=E7=82=B9=E7=AE=A1=E7=90=86=EF=BC=88=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E5=90=91=E5=AF=BC/=E5=81=9C=E7=94=A8/=E5=9F=9F?=
 =?UTF-8?q?=E5=90=8D/=E9=97=A8=E9=9D=A2=E8=A6=86=E7=9B=96=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API 层实装（api/tenants.ts）：创建/详情/PATCH 租户、建站/改站、
  域名绑定解绑——400 撞车 detail（slug/域名归属/prefix 引导）经
  showErrorMessage:false 关全局 toast、由向导与绑域名弹窗内联常驻展示
- 租户列表：slug/名称/状态/域名数/版本/管理员概要 + 状态筛选 +
  行操作（详情/停用复启用/改名）；停用确认框写明 503 服务暂停语义
- 创建向导（ElSteps 四步）：名称+slug（^[a-z0-9-]+$ 与撞车内联拦截）
  → 域名多填 → 出厂档案（auto/jiancai 提示 prefix 全局唯一撞车引导
  改 blank；blank 提示墙与提示词取建材出厂档案）→ 管理员账号；
  201 后列表刷新并提示首登需改密
- 站点管理（详情抽屉）：站点表/新建站（门面覆盖层表单——brand 组
  子集字段留空=继承租户默认）/停用复启用（404 语义提示）/域名绑定
  （撞车归属内联）与解绑（标签 × 确认）
- vitest +9（API 层 URL/方法/请求体契约）；页面仅超管（菜单 roles 已挡）

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 admin/src/api/__tests__/tenants.test.ts |  218 +++++
 admin/src/api/tenants.ts                |  126 ++-
 admin/src/types/import/components.d.ts  |    3 +
 admin/src/views/tenants/list/index.vue  | 1130 ++++++++++++++++++++++-
 4 files changed, 1464 insertions(+), 13 deletions(-)
 create mode 100644 admin/src/api/__tests__/tenants.test.ts

diff --git a/admin/src/api/__tests__/tenants.test.ts b/admin/src/api/__tests__/tenants.test.ts
new file mode 100644
index 0000000..3928084
--- /dev/null
+++ b/admin/src/api/__tests__/tenants.test.ts
@@ -0,0 +1,218 @@
+/**
+ * 租户/站点/域名 API 单元测试（Phase 3 Task 6）
+ *
+ * 钉住 API 层契约：端点 URL / 方法 / 请求体形状（事实源
+ * app/platform/routes/tenant_routes.py）；HTTP 层行为已在 client.test.ts
+ * 覆盖，此处 mock http 只断言调用形态：
+ * - 列表/详情：GET /api/platform/tenants[/{slug}]
+ * - 创建向导：POST 全量六字段（domains 进 main 站点）
+ * - PATCH 租户：只发 name 或 status（slug 键绝不出现在 body——后端 400）
+ * - 站点：POST sites（brand_overlay 只含显式覆盖字段）/ PATCH sites/{site}
+ * - 域名：POST domains {domain} / DELETE domains/{domain}（路径段直拼）
+ * - RequestOptions 透传（向导/绑域名内联错误关全局 toast）
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/api/client', () => ({
+  http: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), del: vi.fn() }
+}))
+
+import { http } from '@/api/client'
+import {
+  addSiteDomain,
+  createSite,
+  createTenant,
+  deleteSiteDomain,
+  fetchTenantDetail,
+  fetchTenantList,
+  patchSite,
+  patchTenant
+} from '@/api/tenants'
+
+describe('租户与站点管理 API（src/api/tenants.ts）', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('fetchTenantList：GET /api/platform/tenants', async () => {
+    const body = {
+      items: [
+        {
+          slug: 'jiancai',
+          name: '建材租户',
+          status: 'active',
+          domain_count: 1,
+          current_version: 1,
+          admins: [{ username: 'jc-admin', status: 'active' }]
+        }
+      ]
+    }
+    vi.mocked(http.get).mockResolvedValue(body)
+
+    const res = await fetchTenantList()
+
+    expect(res).toEqual(body)
+    expect(http.get).toHaveBeenCalledWith('/api/platform/tenants')
+  })
+
+  it('fetchTenantDetail：GET /api/platform/tenants/{slug}', async () => {
+    const body = {
+      slug: 'jiancai',
+      name: '建材租户',
+      status: 'active',
+      current_version: 1,
+      sites: [
+        {
+          slug: 'main',
+          name: 'main',
+          status: 'active',
+          domains: ['chat2.agent.hnxinyouhe.com'],
+          brand_overlay: {}
+        }
+      ],
+      admins: [{ username: 'jc-admin', status: 'active' }]
+    }
+    vi.mocked(http.get).mockResolvedValue(body)
+
+    const res = await fetchTenantDetail('jiancai')
+
+    expect(res).toEqual(body)
+    expect(http.get).toHaveBeenCalledWith('/api/platform/tenants/jiancai', undefined)
+  })
+
+  it('createTenant：POST 全量六字段（向导提交形态）', async () => {
+    const body = {
+      name: '新租户',
+      slug: 'new-tenant',
+      profile: 'blank',
+      admin_username: 'nt-admin',
+      admin_password: 'initial-pass',
+      domains: ['a.example.com', 'b.example.com']
+    }
+    const created = {
+      slug: 'new-tenant',
+      name: '新租户',
+      status: 'active',
+      profile: 'blank',
+      version: 1,
+      site: { slug: 'main', domains: ['a.example.com', 'b.example.com'] },
+      admin_username: 'nt-admin'
+    }
+    vi.mocked(http.post).mockResolvedValue(created)
+
+    const res = await createTenant(body, { showErrorMessage: false })
+
+    expect(res).toEqual(created)
+    expect(http.post).toHaveBeenCalledWith('/api/platform/tenants', body, {
+      showErrorMessage: false
+    })
+  })
+
+  it('patchTenant 改名：PATCH {slug} 只发 name（slug 键不可出现）', async () => {
+    vi.mocked(http.patch).mockResolvedValue({
+      slug: 'jiancai',
+      name: '建材租户改',
+      status: 'active'
+    })
+
+    await patchTenant('jiancai', { name: '建材租户改' })
+
+    expect(http.patch).toHaveBeenCalledWith(
+      '/api/platform/tenants/jiancai',
+      { name: '建材租户改' },
+      undefined
+    )
+  })
+
+  it('patchTenant 停用：PATCH {slug} 只发 status=disabled', async () => {
+    vi.mocked(http.patch).mockResolvedValue({
+      slug: 'jiancai',
+      name: '建材租户',
+      status: 'disabled'
+    })
+
+    await patchTenant('jiancai', { status: 'disabled' })
+
+    expect(http.patch).toHaveBeenCalledWith(
+      '/api/platform/tenants/jiancai',
+      { status: 'disabled' },
+      undefined
+    )
+  })
+
+  it('createSite：POST sites 带 brand_overlay 覆盖子集（留空字段不进 overlay）', async () => {
+    const body = {
+      slug: 'shop1',
+      name: '西班牙站',
+      brand_overlay: { title: 'HESUPIPE ES', color: '#ff6600' }
+    }
+    const created = {
+      slug: 'shop1',
+      name: '西班牙站',
+      status: 'active',
+      domains: [],
+      brand_overlay: body.brand_overlay
+    }
+    vi.mocked(http.post).mockResolvedValue(created)
+
+    const res = await createSite('jiancai', body)
+
+    expect(res).toEqual(created)
+    expect(http.post).toHaveBeenCalledWith('/api/platform/tenants/jiancai/sites', body, undefined)
+  })
+
+  it('patchSite 停用：PATCH sites/{siteSlug} 只发 status', async () => {
+    vi.mocked(http.patch).mockResolvedValue({
+      slug: 'shop1',
+      name: '西班牙站',
+      status: 'disabled',
+      domains: [],
+      brand_overlay: {}
+    })
+
+    await patchSite('jiancai', 'shop1', { status: 'disabled' })
+
+    expect(http.patch).toHaveBeenCalledWith(
+      '/api/platform/tenants/jiancai/sites/shop1',
+      { status: 'disabled' },
+      undefined
+    )
+  })
+
+  it('addSiteDomain：POST sites/{siteSlug}/domains {domain}', async () => {
+    vi.mocked(http.post).mockResolvedValue({
+      domain: 'es.hesupipe.com',
+      site: 'shop1'
+    })
+
+    const res = await addSiteDomain(
+      'jiancai',
+      'shop1',
+      { domain: 'es.hesupipe.com' },
+      { showErrorMessage: false }
+    )
+
+    expect(res).toEqual({ domain: 'es.hesupipe.com', site: 'shop1' })
+    expect(http.post).toHaveBeenCalledWith(
+      '/api/platform/tenants/jiancai/sites/shop1/domains',
+      { domain: 'es.hesupipe.com' },
+      { showErrorMessage: false }
+    )
+  })
+
+  it('deleteSiteDomain：DELETE sites/{siteSlug}/domains/{domain}（路径直拼）', async () => {
+    vi.mocked(http.del).mockResolvedValue({
+      ok: true,
+      domain: 'es.hesupipe.com',
+      site: 'shop1'
+    })
+
+    const res = await deleteSiteDomain('jiancai', 'shop1', 'es.hesupipe.com')
+
+    expect(res).toEqual({ ok: true, domain: 'es.hesupipe.com', site: 'shop1' })
+    expect(http.del).toHaveBeenCalledWith(
+      '/api/platform/tenants/jiancai/sites/shop1/domains/es.hesupipe.com',
+      undefined
+    )
+  })
+})
diff --git a/admin/src/api/tenants.ts b/admin/src/api/tenants.ts
index f9241d6..e034dbc 100644
--- a/admin/src/api/tenants.ts
+++ b/admin/src/api/tenants.ts
@@ -1,11 +1,17 @@
 /**
- * 租户与站点管理 API（Phase 3 Task 3 骨架；Task 4 增列表函数）
+ * 租户与站点管理 API（Phase 3 Task 3 骨架；Task 4 列表函数；Task 6 实装全部调用函数）
  *
  * 端点事实源：app/platform/routes/tenant_routes.py
  * （/api/platform/tenants，require_super / require_tenant(slug) 鉴权）。
- * 其余调用函数在 Task 6（租户管理与站点管理）实装。
+ *
+ * 错误语义（页面交互消费）：
+ * - 400 预检撞车带中文 detail：slug 已存在 / 域名已绑定（含归属租户与站点）/
+ *   出厂 push.prefix 被占（引导改 blank 或先改占用方）——向导与绑域名
+ *   弹窗用 showErrorMessage:false 关全局 toast、改内联常驻展示；
+ * - 409 并发竞态（提交瞬间被抢先）；
+ * - PATCH 带 slug 键一律 400（slug 不可变——界面不提供改 slug 入口）。
  */
-import { http } from './client'
+import { http, type RequestOptions } from './client'
 
 /** 租户状态（Tenant.status） */
 export type TenantStatus = 'active' | 'disabled'
@@ -75,11 +81,49 @@ export interface CreateSiteRequest {
   domains?: string[]
 }
 
-/** 绑定域名请求（POST .../sites/{siteSlug}/domains，201；409=域名已被占用） */
+/** 创建租户响应（create_tenant：201 返回概要；管理员凭据绝不回传） */
+export interface TenantCreatedResponse {
+  slug: string
+  name: string
+  status: TenantStatus
+  profile: string
+  version: number
+  site: { slug: string; domains: string[] }
+  admin_username: string
+}
+
+/** 改名/改状态响应（patch_tenant / patch_site 返回形状） */
+export interface TenantPatchResponse {
+  slug: string
+  name: string
+  status: TenantStatus
+}
+
+/** 改站点请求（PATCH .../sites/{siteSlug}；slug 不可变——后端 400） */
+export interface PatchSiteRequest {
+  name?: string
+  status?: TenantStatus
+  brand_overlay?: Record<string, unknown>
+}
+
+/** 绑定域名请求（POST .../sites/{siteSlug}/domains，201；400=撞车带归属） */
 export interface AddDomainRequest {
   domain: string
 }
 
+/** 绑定域名响应 */
+export interface DomainBindResponse {
+  domain: string
+  site: string
+}
+
+/** 解绑域名响应 */
+export interface DomainUnbindResponse {
+  ok: boolean
+  domain: string
+  site: string
+}
+
 /** 租户管理端点（鉴权与 409 并发冲突语义见 tenant_routes.py） */
 export const TENANT_ENDPOINTS = {
   list: '/api/platform/tenants',
@@ -87,8 +131,7 @@ export const TENANT_ENDPOINTS = {
   detail: (slug: string) => `/api/platform/tenants/${slug}`,
   patch: (slug: string) => `/api/platform/tenants/${slug}`,
   createSite: (slug: string) => `/api/platform/tenants/${slug}/sites`,
-  patchSite: (slug: string, siteSlug: string) =>
-    `/api/platform/tenants/${slug}/sites/${siteSlug}`,
+  patchSite: (slug: string, siteSlug: string) => `/api/platform/tenants/${slug}/sites/${siteSlug}`,
   addDomain: (slug: string, siteSlug: string) =>
     `/api/platform/tenants/${slug}/sites/${siteSlug}/domains`,
   deleteDomain: (slug: string, siteSlug: string, domain: string) =>
@@ -102,3 +145,74 @@ export const TENANT_ENDPOINTS = {
 export function fetchTenantList(): Promise<TenantListResponse> {
   return http.get<TenantListResponse>(TENANT_ENDPOINTS.list)
 }
+
+/** 租户详情（含 sites/domains/brand_overlay/admins；本租户管理员亦可读） */
+export function fetchTenantDetail(
+  slug: string,
+  config?: RequestOptions
+): Promise<TenantDetailResponse> {
+  return http.get<TenantDetailResponse>(TENANT_ENDPOINTS.detail(slug), config)
+}
+
+/**
+ * 创建租户（创建向导提交；201）。向导调用建议传
+ * `{ showErrorMessage: false }`——400 预检撞车 detail（slug 已存在 /
+ * 出厂 push.prefix 被占的改 blank 引导）在向导内联常驻展示。
+ */
+export function createTenant(
+  body: CreateTenantRequest,
+  config?: RequestOptions
+): Promise<TenantCreatedResponse> {
+  return http.post<TenantCreatedResponse>(TENANT_ENDPOINTS.create, body, config)
+}
+
+/** 改名 / 停用 / 复启用（PATCH；slug 不可变，body 不含 slug 键） */
+export function patchTenant(
+  slug: string,
+  body: PatchTenantRequest,
+  config?: RequestOptions
+): Promise<TenantPatchResponse> {
+  return http.patch<TenantPatchResponse>(TENANT_ENDPOINTS.patch(slug), body, config)
+}
+
+/** 新建站点（brand_overlay 只放显式覆盖的字段——留空=继承租户默认） */
+export function createSite(
+  slug: string,
+  body: CreateSiteRequest,
+  config?: RequestOptions
+): Promise<SiteSummary> {
+  return http.post<SiteSummary>(TENANT_ENDPOINTS.createSite(slug), body, config)
+}
+
+/** 改站点（停用/复启用/改名/改覆盖层；整字典赋值——旧键不残留） */
+export function patchSite(
+  slug: string,
+  siteSlug: string,
+  body: PatchSiteRequest,
+  config?: RequestOptions
+): Promise<SiteSummary> {
+  return http.patch<SiteSummary>(TENANT_ENDPOINTS.patchSite(slug, siteSlug), body, config)
+}
+
+/** 绑定域名（全局唯一；400 detail 带现有归属"租户 x 的站点 y"） */
+export function addSiteDomain(
+  slug: string,
+  siteSlug: string,
+  body: AddDomainRequest,
+  config?: RequestOptions
+): Promise<DomainBindResponse> {
+  return http.post<DomainBindResponse>(TENANT_ENDPOINTS.addDomain(slug, siteSlug), body, config)
+}
+
+/** 解绑域名（只解本站点的该域名；不存在 404） */
+export function deleteSiteDomain(
+  slug: string,
+  siteSlug: string,
+  domain: string,
+  config?: RequestOptions
+): Promise<DomainUnbindResponse> {
+  return http.del<DomainUnbindResponse>(
+    TENANT_ENDPOINTS.deleteDomain(slug, siteSlug, domain),
+    config
+  )
+}
diff --git a/admin/src/types/import/components.d.ts b/admin/src/types/import/components.d.ts
index 2ef5b87..3f71ccc 100644
--- a/admin/src/types/import/components.d.ts
+++ b/admin/src/types/import/components.d.ts
@@ -90,11 +90,14 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
diff --git a/admin/src/views/tenants/list/index.vue b/admin/src/views/tenants/list/index.vue
index 91f2993..612396a 100644
--- a/admin/src/views/tenants/list/index.vue
+++ b/admin/src/views/tenants/list/index.vue
@@ -1,25 +1,1141 @@
-<!-- 租户管理（骨架占位页，仅超管可见） -->
+<!--
+  租户管理与站点管理（Phase 3 Task 6，仅超管——菜单 roles:['super'] 已挡）
+  - 列表：slug/名称/状态/域名数/版本号/管理员概要 + 状态筛选 + 行操作
+    （详情抽屉 / 改名 / 停用 / 复启用）
+  - 创建向导（ElSteps 四步）：①名称+slug（^[a-z0-9-]+$ + 对现列表撞车提示）
+    → ②绑定域名（可多填，进 main 站点）→ ③出厂档案 auto/jiancai/blank
+    （blank=墙与提示词取建材出厂档案；同档案第二个租户会撞 push.prefix
+    全局唯一 → 400 引导改 blank 或先改占用方）→ ④管理员账号 → 创建
+    （201 后列表刷新 + 提示"租户已创建，管理员首登需改密"）
+  - 站点管理（详情抽屉内）：站点列表/新建（门面覆盖层表单，留空=继承租户
+    默认）/停用复启用/域名绑定解绑（撞车 400 的归属信息内联展示）
+  - 停用后果文案（Phase 2 语义）：租户停用=官网挂件 503 服务暂停页；
+    站点停用=该站点域名 404（不是服务暂停）——确认框写明
+  - slug 不可变（后端 PATCH 带 slug 键 400）——界面不提供改 slug 入口
+-->
 <template>
-  <div class="page-placeholder">
-    <ElCard shadow="never">
+  <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>
-        <span class="card-title">租户管理</span>
+        <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>
-      <ElEmpty description="租户创建向导 / 站点 / 域名管理（后续任务实现）" />
     </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="150" fixed="right">
+                <template #default="{ row }">
+                  <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>
+
+        <div class="overlay-header">
+          <span class="overlay-title">门面覆盖层</span>
+          <span class="overlay-sub">以下字段留空 = 继承租户默认品牌（brand 组）</span>
+        </div>
+        <div class="overlay-grid">
+          <ElFormItem v-for="field in OVERLAY_FIELDS" :key="field.key" :label="field.label">
+            <ElInput
+              v-model="siteForm[field.key]"
+              :placeholder="field.key === 'color' ? '#066fc0（留空继承）' : '留空=继承租户默认'"
+            />
+          </ElFormItem>
+        </div>
+        <ElFormItem label="快捷话题 topics">
+          <ElSelect
+            v-model="siteForm.topics"
+            multiple
+            filterable
+            allow-create
+            default-first-option
+            :reserve-keyword="false"
+            placeholder="输入后回车添加；留空 = 继承租户默认"
+            class="overlay-topics"
+          />
+        </ElFormItem>
+      </ElForm>
+      <p class="dialog-tip">
+        站点创建后，域名经站点列表的「绑定域名」挂载；覆盖层可随时整组更新。
+      </p>
+      <template #footer>
+        <ElButton @click="siteDialogVisible = false">取消</ElButton>
+        <ElButton type="primary" :loading="siteCreating" @click="onCreateSite"> 创建站点 </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 {
+    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
+
+  /** 门面覆盖层字符串字段（brand 组子集；留空=不写入 overlay=继承租户默认） */
+  const OVERLAY_FIELDS = [
+    { key: 'title', label: '标题 title' },
+    { key: 'color', label: '主题色 color' },
+    { key: 'avatar', label: '头像路径 avatar' },
+    { key: 'welcome', label: '欢迎语 welcome' },
+    { key: 'placeholder', label: '输入框占位 placeholder' },
+    { key: 'whatsapp', label: 'WhatsApp' },
+    { key: 'email', label: '邮箱 email' },
+    { key: 'privacy_url', label: '隐私政策 URL' }
+  ] as const
+
+  /** 覆盖层字段中文标签（站点表 tooltip 用；topics 单列） */
+  const OVERLAY_LABELS: Record<string, string> = Object.fromEntries(
+    OVERLAY_FIELDS.map((f) => [f.key, f.label] as [string, string]).concat([
+      ['topics', '快捷话题 topics']
+    ])
+  )
+
+  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() {
+    return {
+      slug: '',
+      name: '',
+      title: '',
+      color: '',
+      avatar: '',
+      welcome: '',
+      placeholder: '',
+      whatsapp: '',
+      email: '',
+      privacy_url: '',
+      topics: [] as string[]
+    }
+  }
+
+  const siteForm = reactive(blankSiteForm())
+
+  function openSiteDialog(): void {
+    Object.assign(siteForm, blankSiteForm())
+    siteDialogVisible.value = true
+  }
+
+  /** 只收集非空字段进 brand_overlay——留空=不覆盖=继承租户默认 */
+  function buildOverlay(): Record<string, unknown> {
+    const overlay: Record<string, unknown> = {}
+    for (const field of OVERLAY_FIELDS) {
+      const value = siteForm[field.key].trim()
+      if (value) overlay[field.key] = value
+    }
+    const topics = siteForm.topics.map((t) => t.trim()).filter(Boolean)
+    if (topics.length > 0) overlay.topics = topics
+    return overlay
+  }
+
+  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()
+      })
+      ElMessage.success('站点已创建')
+      siteDialogVisible.value = false
+      refreshAfterMutation()
+    } catch {
+      // 全局拦截器已提示（如 400 站点 slug 已存在）
+    } finally {
+      siteCreating.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">
-  .page-placeholder {
+  .tenants-page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
     padding: 16px;
   }
 
-  .card-title {
+  .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-header {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin: 4px 0 8px;
+    padding-top: 8px;
+    border-top: 1px dashed var(--art-card-border);
+
+    .overlay-title {
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .overlay-sub {
+      font-size: 12px;
+      color: var(--art-gray-400);
+    }
+  }
+
+  .overlay-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0 16px;
+  }
+
+  .overlay-topics {
+    width: 100%;
+  }
 </style>