更新网站架构

src/api/domain.js

@@ -0,0 +1,110 @@
+import request from '@/utils/request'
+
+// ==================== 主域名池管理 ====================
+
+// 获取域名池列表
+export function getDomainPoolList(params) {
+  return request({
+    url: '/admin/domain/pool/index',
+    method: 'get',
+    params
+  })
+}
+
+// 获取启用的主域名列表
+export function getEnabledDomains() {
+  return request({
+    url: '/admin/domain/pool/getEnabledDomains',
+    method: 'get'
+  })
+}
+
+// 创建主域名
+export function createDomainPool(data) {
+  return request({
+    url: '/admin/domain/pool/create',
+    method: 'post',
+    data
+  })
+}
+
+// 更新主域名
+export function updateDomainPool(data) {
+  return request({
+    url: '/admin/domain/pool/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除主域名
+export function deleteDomainPool(id) {
+  return request({
+    url: `/admin/domain/pool/delete/${id}`,
+    method: 'delete'
+  })
+}
+
+// 切换主域名状态
+export function toggleDomainPoolStatus(id) {
+  return request({
+    url: '/admin/domain/pool/toggleStatus',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// ==================== 租户域名管理 ====================
+
+// 获取租户域名列表（管理员）
+export function getTenantDomainList(params) {
+  return request({
+    url: '/admin/domain/tenant/index',
+    method: 'get',
+    params
+  })
+}
+
+// 获取当前租户的域名列表
+export function getMyDomains(params) {
+  return request({
+    url: '/admin/domain/tenant/myDomains',
+    method: 'get',
+    params
+  })
+}
+
+// 申请二级域名
+export function applyTenantDomain(data) {
+  return request({
+    url: '/admin/domain/tenant/apply',
+    method: 'post',
+    data
+  })
+}
+
+// 审核租户域名
+export function auditTenantDomain(data) {
+  return request({
+    url: '/admin/domain/tenant/audit',
+    method: 'post',
+    data
+  })
+}
+
+// 禁用/启用租户域名
+export function toggleTenantDomainStatus(id) {
+  return request({
+    url: '/admin/domain/tenant/toggleStatus',
+    method: 'post',
+    data: { id }
+  })
+}
+
+// 删除租户域名
+export function deleteTenantDomain(id) {
+  return request({
+    url: `/admin/domain/tenant/delete/${id}`,
+    method: 'delete'
+  })
+}

src/views/apps/cms/domain/audit.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="container-box">
+    <div class="header-bar">
+      <h2>租户域名审核</h2>
+      <el-button @click="fetchData" :loading="loading">
+        <el-icon><Refresh /></el-icon>
+        刷新
+      </el-button>
+    </div>
+
+    <el-divider></el-divider>
+
+    <!-- 搜索区域 -->
+    <div class="search-box">
+      <el-input
+        v-model="searchForm.sub_domain"
+        placeholder="搜索二级域名"
+        clearable
+        style="width: 200px; margin-right: 10px;"
+        @keyup.enter="handleSearch"
+      />
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 120px; margin-right: 10px;">
+        <el-option label="审核中" :value="0" />
+        <el-option label="已生效" :value="1" />
+        <el-option label="已禁用" :value="2" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      border
+      v-loading="loading"
+      element-loading-text="正在加载..."
+    >
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="tenant_name" label="租户名称" min-width="150" />
+      <el-table-column prop="sub_domain" label="二级域名前缀" width="150" />
+      <el-table-column prop="main_domain" label="主域名" min-width="150" />
+      <el-table-column prop="full_domain" label="完整域名" min-width="200" />
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 0" type="warning">审核中</el-tag>
+          <el-tag v-else-if="scope.row.status === 1" type="success">已生效</el-tag>
+          <el-tag v-else type="danger">已禁用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="申请时间" width="180" />
+      <el-table-column label="操作" width="200" fixed="right" align="center">
+        <template #default="scope">
+          <template v-if="scope.row.status === 0">
+            <el-button size="small" type="success" @click="handleAudit(scope.row, 'approve')">
+              通过
+            </el-button>
+            <el-button size="small" type="danger" @click="handleAudit(scope.row, 'reject')">
+              拒绝
+            </el-button>
+          </template>
+          <template v-else-if="scope.row.status === 1">
+            <el-button size="small" text type="danger" @click="handleDisable(scope.row)">
+              禁用
+            </el-button>
+          </template>
+          <span v-else style="color: #999;">-</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-wrap">
+      <el-pagination
+        v-model:current-page="pagination.page"
+        v-model:page-size="pagination.pageSize"
+        :total="pagination.total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="fetchData"
+        @current-change="fetchData"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh } from '@element-plus/icons-vue'
+import { getTenantDomainList, auditTenantDomain, toggleTenantDomainStatus } from '@/api/domain'
+
+const loading = ref(false)
+
+const searchForm = reactive({
+  sub_domain: '',
+  status: ''
+})
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const tableData = ref<any[]>([])
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getTenantDomainList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      ...searchForm
+    })
+    if (res.code === 200) {
+      tableData.value = res.data.list || []
+      pagination.total = res.data.total || 0
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => {
+  pagination.page = 1
+  fetchData()
+}
+
+const handleAudit = async (row: any, action: string) => {
+  const msg = action === 'approve' ? '确定要通过该域名申请吗？' : '确定要拒绝该域名申请吗？'
+  await ElMessageBox.confirm(msg, '提示', { type: 'warning' })
+  
+  const res = await auditTenantDomain({ id: row.id, action })
+  if (res.code === 200) {
+    ElMessage.success(res.msg)
+    fetchData()
+  } else {
+    ElMessage.error(res.msg || '操作失败')
+  }
+}
+
+const handleDisable = async (row: any) => {
+  await ElMessageBox.confirm('确定要禁用该域名吗？', '提示', { type: 'warning' })
+  
+  const res = await toggleTenantDomainStatus(row.id)
+  if (res.code === 200) {
+    ElMessage.success(res.msg)
+    fetchData()
+  } else {
+    ElMessage.error(res.msg || '操作失败')
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  padding: 20px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.search-box {
+  margin-bottom: 20px;
+}
+
+.pagination-wrap {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/apps/cms/domain/index.vue

@@ -0,0 +1,5 @@
+<template></template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped></style>

src/views/apps/cms/domain/pool.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="container-box">
+    <div class="header-bar">
+      <h2>主域名池管理</h2>
+      <div class="header-actions">
+        <el-button type="primary" @click="handleAdd">
+          <el-icon><Plus /></el-icon>
+          添加主域名
+        </el-button>
+        <el-button @click="fetchData" :loading="loading">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+      </div>
+    </div>
+
+    <el-divider></el-divider>
+
+    <!-- 搜索区域 -->
+    <div class="search-box">
+      <el-input
+        v-model="searchForm.main_domain"
+        placeholder="搜索主域名"
+        clearable
+        style="width: 200px; margin-right: 10px;"
+        @keyup.enter="handleSearch"
+      />
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 120px; margin-right: 10px;">
+        <el-option label="禁用" :value="0" />
+        <el-option label="启用" :value="1" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      border
+      v-loading="loading"
+      element-loading-text="正在加载..."
+    >
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="main_domain" label="主域名" min-width="200" />
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+            {{ scope.row.status === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="创建时间" width="180" />
+      <el-table-column label="操作" width="240" fixed="right" align="center">
+        <template #default="scope">
+          <el-button size="small" text @click="handleEdit(scope.row)">
+            <el-icon><Edit /></el-icon>
+            <span>编辑</span>
+          </el-button>
+          <el-button size="small" text @click="handleToggleStatus(scope.row)">
+            <el-icon><Switch /></el-icon>
+            <span>{{ scope.row.status === 1 ? '禁用' : '启用' }}</span>
+          </el-button>
+          <el-button size="small" text type="danger" @click="handleDelete(scope.row)">
+            <el-icon><Delete /></el-icon>
+            <span>删除</span>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-wrap">
+      <el-pagination
+        v-model:current-page="pagination.page"
+        v-model:page-size="pagination.pageSize"
+        :total="pagination.total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="fetchData"
+        @current-change="fetchData"
+      />
+    </div>
+
+    <!-- 添加/编辑弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑主域名' : '添加主域名'"
+      width="500px"
+    >
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+        <el-form-item label="主域名" prop="main_domain">
+          <el-input v-model="form.main_domain" placeholder="请输入主域名，如: example.com" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete, Refresh, Switch } from '@element-plus/icons-vue'
+import {
+  getDomainPoolList,
+  createDomainPool,
+  updateDomainPool,
+  deleteDomainPool,
+  toggleDomainPoolStatus
+} from '@/api/domain'
+
+const loading = ref(false)
+const submitLoading = ref(false)
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const formRef = ref()
+
+// 搜索表单
+const searchForm = reactive({
+  main_domain: '',
+  status: ''
+})
+
+// 分页
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 表格数据
+const tableData = ref<any[]>([])
+
+// 表单数据
+const form = reactive({
+  id: 0,
+  main_domain: '',
+  status: 1
+})
+
+// 表单验证规则
+const rules = {
+  main_domain: [
+    { required: true, message: '请输入主域名', trigger: 'blur' }
+  ]
+}
+
+// 获取数据
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getDomainPoolList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      ...searchForm
+    })
+    if (res.code === 200) {
+      tableData.value = res.data.list || []
+      pagination.total = res.data.total || 0
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.page = 1
+  fetchData()
+}
+
+// 添加
+const handleAdd = () => {
+  isEdit.value = false
+  form.id = 0
+  form.main_domain = ''
+  form.status = 1
+  dialogVisible.value = true
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  isEdit.value = true
+  form.id = row.id
+  form.main_domain = row.main_domain
+  form.status = row.status
+  dialogVisible.value = true
+}
+
+// 提交
+const handleSubmit = async () => {
+  await formRef.value.validate()
+  submitLoading.value = true
+  try {
+    if (isEdit.value) {
+      const res = await updateDomainPool(form)
+      if (res.code === 200) {
+        ElMessage.success('更新成功')
+        dialogVisible.value = false
+        fetchData()
+      } else {
+        ElMessage.error(res.msg || '更新失败')
+      }
+    } else {
+      const res = await createDomainPool(form)
+      if (res.code === 200) {
+        ElMessage.success('创建成功')
+        dialogVisible.value = false
+        fetchData()
+      } else {
+        ElMessage.error(res.msg || '创建失败')
+      }
+    }
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm('确定要删除该主域名吗？', '提示', {
+    type: 'warning'
+  }).then(async () => {
+    const res = await deleteDomainPool(row.id)
+    if (res.code === 200) {
+      ElMessage.success('删除成功')
+      fetchData()
+    } else {
+      ElMessage.error(res.msg || '删除失败')
+    }
+  })
+}
+
+// 切换状态
+const handleToggleStatus = async (row: any) => {
+  const res = await toggleDomainPoolStatus(row.id)
+  if (res.code === 200) {
+    ElMessage.success('状态更新成功')
+    fetchData()
+  } else {
+    ElMessage.error(res.msg || '操作失败')
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  padding: 20px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 10px;
+  }
+}
+
+.search-box {
+  margin-bottom: 20px;
+}
+
+.pagination-wrap {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/apps/cms/templates/index.vue

@@ -35,7 +35,7 @@
       <div v-else class="template-grid">
         <div v-for="item in templateList" :key="item.key" class="template-card" :class="{ active: item.key === currentTheme }">
           <div class="card-preview">
-            <img :src="item.preview" alt="preview" @error="handleImageError($event)" />
+            <img :src="getPreviewUrl(item.preview)" alt="preview" @error="handleImageError($event)" />
             <div v-if="item.key === currentTheme" class="current-tag">
               <el-tag type="success" size="small">使用中</el-tag>
             </div>
@@ -61,44 +61,11 @@
               <el-button v-else type="info" size="small" disabled>
                 当前使用
               </el-button>
-              <el-button size="small" @click="handlePreview(item)">预览</el-button>
-              <el-button size="small" @click="handleEdit(item)">编辑数据</el-button>
             </div>
           </div>
         </div>
       </div>
     </main>
-
-    <!-- 预览弹窗 -->
-    <el-dialog v-model="previewVisible" title="模板预览" width="90%" top="5vh">
-      <iframe :src="previewUrl" class="preview-iframe" frameborder="0"></iframe>
-    </el-dialog>
-
-    <!-- 编辑数据弹窗 -->
-    <el-dialog v-model="editVisible" title="编辑模板数据" width="800px">
-      <el-form :model="editForm" label-width="100px">
-        <el-form-item label="模板">
-          <el-input v-model="editForm.theme_key" disabled />
-        </el-form-item>
-        <el-form-item label="选择字段">
-          <el-select v-model="selectedField" placeholder="选择要编辑的字段" @change="handleFieldChange">
-            <el-option v-for="(label, key) in editForm.fields" :key="key" :label="label" :value="key" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="selectedField" label="字段值">
-          <el-input
-            v-model="fieldValue"
-            type="textarea"
-            :rows="10"
-            placeholder="输入 JSON 格式或普通文本"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="editVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSaveData" :loading="saving">保存</el-button>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -106,20 +73,22 @@
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Refresh, Loading } from '@element-plus/icons-vue'
-import { getThemeList, switchTheme, getThemeData, saveThemeData } from '@/api/theme'
+import { getThemeList, switchTheme } from '@/api/theme'
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
 
 // 状态
 const loading = ref(false)
 const switching = ref('')
-const saving = ref(false)
 const templateList = ref<any[]>([])
 const currentTheme = ref('default')
-const previewVisible = ref(false)
+
-const previewUrl = ref('')
+// 获取完整预览图URL
-const editVisible = ref(false)
+const getPreviewUrl = (path: string) => {
-const editForm = ref<any>({})
+  if (!path) return ''
-const selectedField = ref('')
+  if (path.startsWith('http')) return path
-const fieldValue = ref('')
+  return API_BASE_URL + path
+}
 
 // 获取模板列表
 const fetchTemplates = async () => {
@@ -157,75 +126,6 @@ const handleUse = async (item: any) => {
   }
 }
 
-// 预览模板
-const handlePreview = (item: any) => {
-  previewUrl.value = item.path
-  previewVisible.value = true
-}
-
-// 编辑模板数据
-const handleEdit = async (item: any) => {
-  editForm.value = { ...item, fields: item.fields || {} }
-  selectedField.value = ''
-  fieldValue.value = ''
-
-  // 获取已保存的数据
-  try {
-    const res = await getThemeData({ theme_key: item.key })
-    if (res.code === 200 && res.data.data) {
-      // 预填充已有数据
-      const savedData = res.data.data
-      // 找到第一个有值的字段
-      for (const key in savedData) {
-        if (savedData[key]) {
-          selectedField.value = key
-          fieldValue.value = typeof savedData[key] === 'object'
-            ? JSON.stringify(savedData[key], null, 2)
-            : savedData[key]
-          break
-        }
-      }
-    }
-  } catch (error) {
-    console.error('获取模板数据失败', error)
-  }
-
-  editVisible.value = true
-}
-
-// 字段变更
-const handleFieldChange = (field: string) => {
-  fieldValue.value = ''
-}
-
-// 保存数据
-const handleSaveData = async () => {
-  if (!selectedField.value) {
-    ElMessage.warning('请选择要编辑的字段')
-    return
-  }
-
-  saving.value = true
-  try {
-    const res = await saveThemeData({
-      theme_key: editForm.value.key,
-      field_key: selectedField.value,
-      field_value: fieldValue.value
-    })
-
-    if (res.code === 200) {
-      ElMessage.success('保存成功')
-      editVisible.value = false
-    } else {
-      ElMessage.error(res.msg || '保存失败')
-    }
-  } catch (error) {
-    ElMessage.error('保存失败')
-  } finally {
-    saving.value = false
-  }
-}
-
 // 图片加载失败处理
 const handleImageError = (event: Event) => {
   const img = event.target as HTMLImageElement
@@ -370,10 +270,4 @@ onMounted(() => {
     }
   }
 }
-
-.preview-iframe {
-  width: 100%;
-  height: 70vh;
-  border: none;
-}
 </style>

src/views/basicSettings/tenants/domain.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="container-box">
+    <div class="header-bar">
+      <h2>我的域名</h2>
+      <el-button type="primary" @click="dialogVisible = true">
+        <el-icon><Plus /></el-icon>
+        申请二级域名
+      </el-button>
+    </div>
+
+    <el-divider></el-divider>
+
+    <!-- 我的域名列表 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      border
+      v-loading="loading"
+      element-loading-text="正在加载..."
+    >
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="sub_domain" label="二级域名前缀" width="150" />
+      <el-table-column prop="main_domain" label="主域名" min-width="150" />
+      <el-table-column prop="full_domain" label="完整域名" min-width="200">
+        <template #default="scope">
+          <el-link type="primary" :href="'http://' + scope.row.full_domain" target="_blank">
+            {{ scope.row.full_domain }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 0" type="warning">审核中</el-tag>
+          <el-tag v-else-if="scope.row.status === 1" type="success">已生效</el-tag>
+          <el-tag v-else type="danger">已禁用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="申请时间" width="180" />
+      <el-table-column label="操作" width="100" fixed="right" align="center">
+        <template #default="scope">
+          <el-button size="small" text type="primary" @click="handleCopy(scope.row.full_domain)">
+            复制
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 申请域名弹窗 -->
+    <el-dialog v-model="dialogVisible" title="申请二级域名" width="500px">
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+        <el-form-item label="选择主域名" prop="main_domain">
+          <el-select v-model="form.main_domain" placeholder="请选择主域名" style="width: 100%;">
+            <el-option
+              v-for="item in domainList"
+              :key="item.main_domain"
+              :label="item.main_domain"
+              :value="item.main_domain"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="二级前缀" prop="sub_domain">
+          <el-input v-model="form.sub_domain" placeholder="请输入二级域名前缀">
+            <template #append>{{ form.main_domain ? '.' + form.main_domain : '' }}</template>
+          </el-input>
+          <div class="form-tip">只能包含字母、数字和连字符，不能以连字符开头或结尾</div>
+        </el-form-item>
+        <el-form-item label="预览">
+          <div class="domain-preview">
+            {{ form.sub_domain ? form.sub_domain + '.' + (form.main_domain || 'example.com') : '请填写上方信息' }}
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交申请</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { getMyDomains, applyTenantDomain, getEnabledDomains } from '@/api/domain'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const loading = ref(false)
+const submitLoading = ref(false)
+const dialogVisible = ref(false)
+const formRef = ref()
+
+const tableData = ref<any[]>([])
+const domainList = ref<any[]>([])
+
+const form = reactive({
+  main_domain: '',
+  sub_domain: ''
+})
+
+const rules = {
+  main_domain: [
+    { required: true, message: '请选择主域名', trigger: 'change' }
+  ],
+  sub_domain: [
+    { required: true, message: '请输入二级域名前缀', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]$/, message: '格式不正确', trigger: 'blur' }
+  ]
+}
+
+const fetchDomains = async () => {
+  loading.value = true
+  try {
+    // 获取我的域名列表
+    const res = await getMyDomains({ tid: authStore.user.tenant_id })
+    if (res.code === 200) {
+      tableData.value = res.data || []
+    }
+    
+    // 获取可选主域名
+    const domainRes = await getEnabledDomains()
+    if (domainRes.code === 200) {
+      domainList.value = domainRes.data || []
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSubmit = async () => {
+  await formRef.value.validate()
+  submitLoading.value = true
+  try {
+    const res = await applyTenantDomain({
+      tenant_id: authStore.user.tenant_id,
+      main_domain: form.main_domain,
+      sub_domain: form.sub_domain
+    })
+    if (res.code === 200) {
+      ElMessage.success(res.msg)
+      dialogVisible.value = false
+      form.sub_domain = ''
+      fetchDomains()
+    } else {
+      ElMessage.error(res.msg || '申请失败')
+    }
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+const handleCopy = (domain: string) => {
+  navigator.clipboard.writeText('http://' + domain)
+  ElMessage.success('链接已复制到剪贴板')
+}
+
+onMounted(() => {
+  fetchDomains()
+})
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  padding: 20px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #999;
+  margin-top: 5px;
+}
+
+.domain-preview {
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #409eff;
+}
+</style>