feat(tenant): 新增多租户模块 (#75)

2025-09-08 22:57:11 +08:00 · 2025-07-10 20:39:02 +08:00
parent 8090861bc6
commit e66256581e
24 changed files with 2405 additions and 1 deletions
--- a/src/apis/common/captcha.ts
+++ b/src/apis/common/captcha.ts
@@ -5,6 +5,11 @@ export type * from './type'

 const BASE_URL = '/captcha'

+/** @desc 获取图片验证码 */
+export function getCaptchaConfig() {
+  return http.get<boolean>(`${BASE_URL}/config`)
+}
+
 /** @desc 获取图片验证码 */
 export function getImageCaptcha() {
  return http.get<T.ImageCaptchaResp>(`${BASE_URL}/image`)
--- a/src/apis/tenant/tenant.ts
+++ b/src/apis/tenant/tenant.ts
@@ -0,0 +1,94 @@
+import http from '@/utils/http'
+import type { TenantCommon } from '@/utils/tenant'
+
+const BASE_URL = '/tenant/user'
+
+export interface TenantResp {
+  id: string
+  name: string
+  domain: string
+  packageId: string
+  status: string
+  expireTime: string
+  createTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface TenantDetailResp {
+  id: string
+  name: string
+  domain: string
+  packageId: string
+  status: string
+  expireTime: string
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+  packageName: string
+  menuIds: []
+}
+export interface TenantQuery {
+  name: string
+  packageId: string
+  status: string
+  sort: Array<string>
+}
+export interface TenantPageQuery extends TenantQuery, PageQuery {}
+
+/** @desc 查询租户列表 */
+export function listTenant(query: TenantPageQuery) {
+  return http.get<PageRes<TenantResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询租户详情 */
+export function getTenant(id: string) {
+  return http.get<TenantDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增租户 */
+export function addTenant(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改租户 */
+export function updateTenant(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除租户 */
+export function deleteTenant(id: string) {
+  return http.del(`${BASE_URL}/${id}`)
+}
+
+/** @desc 导出租户 */
+export function exportTenant(query: TenantQuery) {
+  return http.download<any>(`${BASE_URL}/export`, query)
+}
+
+/** @desc 多租户通用信息查询 */
+export const getTenantCommon = () => {
+  return http.get<TenantCommon>(`${BASE_URL}/common`)
+}
+
+/** @desc 获取租户管理账号用户名 */
+export const getTenantLoginUser = (tenantId: string) => {
+  return http.get<string>(`${BASE_URL}/loginUser/${tenantId}`)
+}
+
+/** @desc 租户管理账号信息更新 */
+export const updateTenantLoginUser = (data: any) => {
+  return http.put(`${BASE_URL}/loginUser`, data)
+}
+
+/** @desc 获取套餐列表 */
+export const listAllPackage = () => {
+  return http.get<any>(`${BASE_URL}/all/package`)
+}
+
+/** @desc 获取数据连接列表 */
+export const listAllDbConnect = () => {
+  return http.get<any>(`${BASE_URL}/all/dbConnect`)
+}
--- a/src/apis/tenant/tenantDbConnect.ts
+++ b/src/apis/tenant/tenantDbConnect.ts
@@ -0,0 +1,65 @@
+import http from '@/utils/http'
+
+const BASE_URL = '/tenant/dbConnect'
+
+export interface TenantDbConnectResp {
+  id: string
+  connectName: string
+  type: string
+  host: string
+  port: string
+  username: string
+  password: string
+  createUserString: string
+  updateUserString: string
+}
+export interface TenantDbConnectDetailResp {
+  id: string
+  connectName: string
+  type: string
+  host: string
+  port: string
+  username: string
+  password: string
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface TenantDbConnectQuery {
+  connectName: string
+  sort: Array<string>
+}
+export interface TenantDbConnectPageQuery extends TenantDbConnectQuery, PageQuery {}
+
+/** @desc 查询租户数据连接列表 */
+export function listTenantDbConnect(query: TenantDbConnectPageQuery) {
+  return http.get<PageRes<TenantDbConnectResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询租户数据连接详情 */
+export function getTenantDbConnect(id: string) {
+  return http.get<TenantDbConnectDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增租户数据连接 */
+export function addTenantDbConnect(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改租户数据连接 */
+export function updateTenantDbConnect(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除租户数据连接 */
+export function deleteTenantDbConnect(id: string) {
+  return http.del(`${BASE_URL}/${id}`)
+}
+
+/** @desc 导出租户数据连接 */
+export function exportTenantDbConnect(query: TenantDbConnectQuery) {
+  return http.download<any>(`${BASE_URL}/export`, query)
+}
--- a/src/apis/tenant/tenantPackage.ts
+++ b/src/apis/tenant/tenantPackage.ts
@@ -0,0 +1,73 @@
+import http from '@/utils/http'
+
+const BASE_URL = '/tenant/package'
+
+export interface TenantPackageResp {
+  id: string
+  name: string
+  menuIds: string
+  menuCheckStrictly: string
+  status: string
+  createTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface TenantPackageDetailResp {
+  id: string
+  name: string
+  menuIds: []
+  menuCheckStrictly: string
+  status: string
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface TenantPackageQuery {
+  name: string
+  status: string
+  sort: Array<string>
+}
+export interface TenantPackagePageQuery extends TenantPackageQuery, PageQuery {}
+
+/** @desc 查询租户套餐列表 */
+export function listTenantPackage(query: TenantPackagePageQuery) {
+  return http.get<PageRes<TenantPackageResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询租户套餐详情 */
+export function getTenantPackage(id: string) {
+  return http.get<TenantPackageDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增租户套餐 */
+export function addTenantPackage(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改租户套餐 */
+export function updateTenantPackage(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除租户套餐 */
+export function deleteTenantPackage(id: string) {
+  return http.del(`${BASE_URL}/${id}`)
+}
+
+/** @desc 导出租户套餐 */
+export function exportTenantPackage(query: TenantPackageQuery) {
+  return http.download<any>(`${BASE_URL}/export`, query)
+}
+
+/** @desc 查询所有套餐 */
+export function listAllTenantPackage() {
+  return http.get<TenantPackageResp[]>(`${BASE_URL}/list`)
+}
+
+/** @desc 查询套餐菜单 */
+export function listTenantPackageMenu() {
+  return http.get<any>(`${BASE_URL}/menuTree`)
+}
--- a/src/components/GiLeftRightPane/index.vue
+++ b/src/components/GiLeftRightPane/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <a-row align="stretch" :gutter="14" class="gi-left-right-pane">
+    <a-col
+      :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" v-bind="props.leftColProps"
+      class="h-full overflow-hidden"
+    >
+      <div class="gi-left-right-pane__left">
+        <slot name="left"></slot>
+      </div>
+    </a-col>
+
+    <a-col
+      :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps"
+      class="h-full overflow-hidden"
+    >
+      <div class="gi-left-right-pane__right">
+        <slot></slot>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang='ts' setup>
+import type { ColProps } from '@arco-design/web-vue'
+
+interface Props {
+  leftColProps?: ColProps
+  rightColProps?: ColProps
+}
+
+defineOptions({ name: 'GiLeftRightPane' })
+
+const props = withDefaults(defineProps<Props>(), {
+  leftColProps: () => ({}),
+  rightColProps: () => ({}),
+})
+
+// 一般用于左树右表结构页面
+
+defineSlots<{
+  left: () => void
+}>()
+</script>
+
+<style lang='scss' scoped>
+.gi-left-right-pane {
+  flex: 1;
+  overflow: hidden;
+  padding: $margin;
+  box-sizing: border-box;
+
+  &__left,
+  &__right {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+</style>
--- a/src/components/SelectTenant/index.vue
+++ b/src/components/SelectTenant/index.vue
@@ -0,0 +1,168 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="选择租户"
+    hide-cancel
+    :closable="false"
+    :mask-closable="false"
+    :ok-loading="okLoading"
+    draggable
+    :width="width >= 500 ? 500 : '90%'"
+    @before-ok="confirm"
+  >
+    <div class="scrollable-container">
+      <a-radio-group v-model="tenantId" direction="vertical" class="scrollable-container-radio-group" @change="value => { setTenantId(value) }">
+        <a-radio :value="0" class="scrollable-container-radio">
+          <template #radio="{ checked }">
+            <a-space
+              align="start"
+              class="custom-radio-card"
+              :class="{ 'custom-radio-card-checked': checked }"
+            >
+              <div className="custom-radio-card-mask">
+                <div className="custom-radio-card-mask-dot" />
+              </div>
+              系统默认租户
+            </a-space>
+          </template>
+        </a-radio>
+        <template v-for="item in tenantList" :key="item.id">
+          <a-radio :value="item.id" class="scrollable-container-radio">
+            <template #radio="{ checked }">
+              <a-space
+                align="start"
+                class="custom-radio-card"
+                :class="{ 'custom-radio-card-checked': checked }"
+              >
+                <div className="custom-radio-card-mask">
+                  <div className="custom-radio-card-mask-dot" />
+                </div>
+                {{ item.name }}
+              </a-space>
+            </template>
+          </a-radio>
+        </template>
+      </a-radio-group>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { Message } from '@arco-design/web-vue'
+import { getTenantId, setTenantId } from '@/utils/tenant'
+import { getTenantCommon } from '@/apis/tenant/tenant'
+
+const { width } = useWindowSize()
+const visible = ref(false)
+const okLoading = ref(false)
+const tenantList = ref()
+const tenantId = ref(getTenantId())
+
+const confirm = async () => {
+  if (!getTenantId()) {
+    Message.error('请确认需要登录的租户')
+    return false
+  } else {
+    visible.value = true
+  }
+}
+
+onMounted(async () => {
+  const tenantCommon = await getTenantCommon()
+  // 需要开启了多租户才显示租户选择款
+  if (tenantCommon && tenantCommon.data.isEnabled) {
+    if (tenantCommon.data.availableList.length > 0) {
+      const hostname = window.location.hostname
+      for (const item of tenantCommon.data.availableList) {
+        // 如果有域名匹配则直接设置对应租户
+        if (item.domain === hostname) {
+          setTenantId(item.id)
+          return false
+        }
+      }
+    } else {
+      // 如果后台没有配置租户则是默认系统租户
+      setTenantId(0)
+      return false
+    }
+    tenantList.value = tenantCommon.data.availableList
+    visible.value = true
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.tenant-select{
+  width: 100%;
+  padding: 10px 0;
+}
+
+.scrollable-container {
+  height: 300px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  text-align: center;
+  &-radio-group{
+    width: 90%
+  }
+  &-radio{
+    padding: 7px 0
+  }
+}
+
+.custom-radio-card {
+  padding: 10px 16px;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.custom-radio-card-mask {
+  height: 14px;
+  width: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  border: 1px solid var(--color-border-2);
+  box-sizing: border-box;
+}
+
+.custom-radio-card-mask-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+}
+
+.custom-radio-card-title {
+  color: var(--color-text-1);
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.custom-radio-card:hover,
+.custom-radio-card-checked,
+.custom-radio-card:hover .custom-radio-card-mask,
+.custom-radio-card-checked  .custom-radio-card-mask{
+  border-color: rgb(var(--primary-6));
+}
+
+.custom-radio-card-checked {
+  background-color: var(--color-primary-light-1);
+}
+
+.custom-radio-card:hover .custom-radio-card-title,
+.custom-radio-card-checked .custom-radio-card-title {
+  color: rgb(var(--primary-6));
+}
+
+.custom-radio-card-checked .custom-radio-card-mask-dot {
+  background-color: rgb(var(--primary-6));
+}
+</style>
--- a/src/hooks/app/useMenu.ts
+++ b/src/hooks/app/useMenu.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import type { TreeNodeData } from '@arco-design/web-vue'
 import { listMenuTree } from '@/apis'
+import { listTenantPackageMenu } from '@/apis/tenant/tenantPackage'

 /** 菜单模块 */
 export function useMenu(options?: { onSuccess?: () => void }) {
@@ -17,5 +18,18 @@ export function useMenu(options?: { onSuccess?: () => void }) {
      loading.value = false
    }
  }
-  return { menuList, getMenuList, loading }
+
+  // 获取租户套餐菜单
+  const getTenantPackageMenuList = async () => {
+    try {
+      loading.value = true
+      const res = await listTenantPackageMenu()
+      menuList.value = res.data
+      options?.onSuccess && options.onSuccess()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { menuList, getMenuList, loading, getTenantPackageMenuList }
 }
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
    GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
    GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
    GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
+    GiLeftRightPane: typeof import('./../components/GiLeftRightPane/index.vue')['default']
    GiOption: typeof import('./../components/GiOption/index.vue')['default']
    GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
    GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
@@ -56,6 +57,7 @@ declare module 'vue' {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
+    SelectTenant: typeof import('./../components/SelectTenant/index.vue')['default']
    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -7,6 +7,7 @@ import modalErrorWrapper from '@/utils/modal-error-wrapper'
 import messageErrorWrapper from '@/utils/message-error-wrapper'
 import notificationErrorWrapper from '@/utils/notification-error-wrapper'
 import router from '@/router'
+import { getTenantId } from '@/utils/tenant'

 interface ICodeMessage {
  [propName: number]: string
@@ -57,6 +58,13 @@ http.interceptors.request.use(
      }
      config.headers.Authorization = `Bearer ${token}`
    }
+    const tenantId = getTenantId()
+    if (tenantId) {
+      if (!config.headers) {
+        config.headers = {}
+      }
+      config.headers['X-Tenant-Id'] = tenantId
+    }
    return config
  },
  (error) => Promise.reject(error),
--- a/src/utils/tenant.ts
+++ b/src/utils/tenant.ts
@@ -0,0 +1,14 @@
+const CURRENT_TENANT = 'current_tenant'
+
+export interface TenantCommon {
+  isEnabled: boolean
+  availableList: any[]
+}
+
+export const getTenantId = () => {
+  return localStorage.getItem(CURRENT_TENANT)
+}
+
+export const setTenantId = (tenantId: string) => {
+  localStorage.setItem(CURRENT_TENANT, tenantId)
+}
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -87,6 +87,7 @@
      </div>
    </div>
  </div>
+  <SelectTenant />
 </template>

 <script setup lang="ts">
--- a/src/views/setting/message/index.vue
+++ b/src/views/setting/message/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="gi_table_page">
+    <GiTable
+      row-key="id"
+      title="消息中心"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size', 'setting']"
+      :disabled-column-keys="['name']"
+      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
+      :selected-keys="selectedKeys"
+      @select-all="selectAll"
+      @select="select"
+      @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input v-model="queryForm.title" placeholder="请输入标题" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.isRead"
+          placeholder="请选择状态"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        >
+          <a-option :value="false">未读</a-option>
+          <a-option :value="true">已读</a-option>
+        </a-select>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button type="primary" status="danger" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onDelete">
+          <template #icon><icon-delete /></template>
+          <template #default>删除</template>
+        </a-button>
+        <a-button type="primary" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onRead">
+          <template #default>标记为已读</template>
+        </a-button>
+        <a-button type="primary" :disabled="selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onReadAll">
+          <template #default>全部已读</template>
+        </a-button>
+      </template>
+      <template #title="{ record }">
+        <a-tooltip :content="record.content"><span>{{ record.title }}</span></a-tooltip>
+      </template>
+      <template #isRead="{ record }">
+        <a-tag :color="record.isRead ? '' : 'arcoblue'">
+          {{ record.isRead ? '已读' : '未读' }}
+        </a-tag>
+      </template>
+      <template #type="{ record }">
+        <GiCellTag :value="record.type" :dict="message_type" />
+      </template>
+    </GiTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Message, Modal } from '@arco-design/web-vue'
+import { type MessageQuery, deleteMessage, listMessage, readMessage } from '@/apis'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useTable } from '@/hooks'
+import { useDict } from '@/hooks/app'
+
+defineOptions({ name: 'SystemMessage' })
+
+const { message_type } = useDict('message_type')
+
+const queryForm = reactive<MessageQuery>({
+  sort: ['createTime,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  selectedKeys,
+  select,
+  selectAll,
+  search,
+  handleDelete,
+} = useTable((page) => listMessage({ ...queryForm, ...page }), { immediate: true })
+
+const columns: TableInstanceColumns[] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+  },
+  { title: '标题', dataIndex: 'title', slotName: 'title', minWidth: 100, ellipsis: true, tooltip: true },
+  { title: '状态', dataIndex: 'isRead', slotName: 'isRead', align: 'center' },
+  { title: '时间', dataIndex: 'createTime', width: 180 },
+  { title: '类型', dataIndex: 'type', slotName: 'type', width: 180, ellipsis: true, tooltip: true },
+]
+
+// 重置
+const reset = () => {
+  queryForm.title = undefined
+  queryForm.type = undefined
+  queryForm.isRead = undefined
+  search()
+}
+
+// 删除
+const onDelete = () => {
+  if (!selectedKeys.value.length) {
+    return Message.warning('请选择数据')
+  }
+  return handleDelete(() => deleteMessage(selectedKeys.value), { showModal: false })
+}
+
+// 标记为已读
+const onRead = async () => {
+  if (!selectedKeys.value.length) {
+    return Message.warning('请选择数据')
+  }
+  await readMessage(selectedKeys.value)
+  Message.success('操作成功')
+  search()
+}
+
+// 全部已读
+const onReadAll = async () => {
+  Modal.warning({
+    title: '全部已读',
+    content: '确定要标记全部消息为已读吗？',
+    hideCancel: false,
+    maskClosable: false,
+    onOk: async () => {
+      await readMessage([])
+      Message.success('操作成功')
+      search()
+    },
+  })
+}
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/system/config/components/CaptchaSetting.vue
+++ b/src/views/system/config/components/CaptchaSetting.vue
@@ -0,0 +1,151 @@
+<template>
+  <a-spin :loading="loading">
+    <a-form
+        ref="formRef"
+        :model="form"
+        auto-label-width
+        label-align="left"
+        :layout="width >= 500 ? 'horizontal' : 'vertical'"
+        :disabled="!isUpdate"
+        scroll-to-first-error>
+      <a-form-item
+          field="NEED_CAPTCHA"
+          :label="captchaSetting.NEED_CAPTCHA.name"
+      >
+        <a-switch v-model="form.NEED_CAPTCHA" type="round" :checked-value="1" :unchecked-value="0">
+          <template #checked>是</template>
+          <template #unchecked>否</template>
+        </a-switch>
+      </a-form-item>
+
+      <a-space style="margin-bottom: 16px">
+        <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
+          <template #icon>
+            <icon-edit/>
+          </template>
+          修改
+        </a-button>
+        <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+          <template #icon>
+            <icon-undo/>
+          </template>
+          恢复默认
+        </a-button>
+        <a-button v-if="isUpdate" type="primary" @click="handleSave">
+          <template #icon>
+            <icon-save/>
+          </template>
+          保存
+        </a-button>
+        <a-button v-if="isUpdate" @click="reset">
+          <template #icon>
+            <icon-refresh/>
+          </template>
+          重置
+        </a-button>
+        <a-button v-if="isUpdate" @click="handleCancel">
+          <template #icon>
+            <icon-undo/>
+          </template>
+          取消
+        </a-button>
+      </a-space>
+    </a-form>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+import {useWindowSize} from '@vueuse/core'
+import {type FormInstance, Message, Modal} from '@arco-design/web-vue'
+import {type CaptchaSetting, listOption, type OptionResp, resetOptionValue, updateOption} from '@/apis/system'
+import {useResetReactive} from '@/hooks'
+
+defineOptions({name: 'CaptchaSetting'})
+const {width} = useWindowSize()
+
+const loading = ref<boolean>(false)
+const formRef = ref<FormInstance>()
+const [form] = useResetReactive({
+  NEED_CAPTCHA: 1,
+})
+
+const captchaSetting = ref<CaptchaSetting>({
+  NEED_CAPTCHA: {},
+})
+// 重置
+const reset = () => {
+  formRef.value?.resetFields()
+  form.NEED_CAPTCHA = captchaSetting.value.NEED_CAPTCHA.value
+}
+
+const isUpdate = ref(false)
+// 修改
+const onUpdate = () => {
+  isUpdate.value = true
+}
+
+// 取消
+const handleCancel = () => {
+  reset()
+  isUpdate.value = false
+}
+
+const queryForm = {
+  category: 'CAPTCHA',
+}
+// 查询列表数据
+const getDataList = async () => {
+  loading.value = true
+  const {data} = await listOption(queryForm)
+  captchaSetting.value = data.reduce((obj: CaptchaSetting, option: OptionResp) => {
+    obj[option.code] = {...option, value: Number.parseInt(option.value)}
+    return obj
+  }, {})
+
+  handleCancel()
+  loading.value = false
+}
+
+// 保存
+const handleSave = async () => {
+  const isInvalid = await formRef.value?.validate()
+  if (isInvalid) return false
+  await updateOption(
+      Object.entries(form).map(([key, value]) => {
+        return {id: captchaSetting.value[key].id, code: key, value}
+      }),
+  )
+  await getDataList()
+  Message.success('保存成功')
+}
+
+// 恢复默认
+const handleResetValue = async () => {
+  await resetOptionValue(queryForm)
+  Message.success('恢复成功')
+  await getDataList()
+}
+const onResetValue = () => {
+  Modal.warning({
+    title: '警告',
+    content: '确认恢复安全配置为默认值吗？',
+    hideCancel: false,
+    maskClosable: false,
+    onOk: handleResetValue,
+  })
+}
+
+onMounted(() => {
+  getDataList()
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.arco-form-item.arco-form-item-has-help) {
+  margin-bottom: 5px;
+}
+
+.input-width {
+  width: 200px;
+}
+</style>
--- a/src/views/system/role/RoleAddModal.vue
+++ b/src/views/system/role/RoleAddModal.vue
@@ -0,0 +1,299 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="新增角色"
+    :mask-closable="false"
+    :esc-to-close="true"
+    draggable
+    :width="width >= 600 ? 600 : '100%'"
+    @close="reset"
+  >
+    <a-steps :current="current" class="mb-15" @change="onChangeCurrent">
+      <a-step>基础信息</a-step>
+      <a-step>功能权限</a-step>
+      <a-step>数据权限</a-step>
+    </a-steps>
+    <a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
+      <fieldset v-show="current === 1">
+        <a-form-item label="名称" field="name">
+          <a-input v-model.trim="form.name" placeholder="请输入名称" />
+        </a-form-item>
+        <a-form-item label="编码" field="code">
+          <a-input v-model.trim="form.code" placeholder="请输入编码" />
+        </a-form-item>
+        <a-form-item label="排序" field="sort">
+          <a-input-number v-model="form.sort" placeholder="请输入排序" :min="1" mode="button" />
+        </a-form-item>
+        <a-form-item label="描述" field="description">
+          <a-textarea
+            v-model.trim="form.description"
+            placeholder="请输入描述"
+            show-word-limit
+            :max-length="200"
+            :auto-size="{ minRows: 3, maxRows: 5 }"
+          />
+        </a-form-item>
+      </fieldset>
+      <fieldset v-show="current === 2">
+        <a-form-item hide-label :disabled="form.isSystem" class="w-full">
+          <a-space>
+            <a-checkbox v-model="isMenuExpanded" @change="onExpanded('menu')">展开/折叠</a-checkbox>
+            <a-checkbox v-model="isMenuCheckAll" @change="onCheckAll('menu')">全选/全不选</a-checkbox>
+            <a-checkbox v-model="form.menuCheckStrictly">父子联动</a-checkbox>
+          </a-space>
+          <template #extra>
+            <a-tree
+              ref="menuTreeRef"
+              v-model:checked-keys="form.menuIds"
+              class="w-full menu-tree"
+              :data="menuList"
+              :default-expand-all="isMenuExpanded"
+              :check-strictly="!form.menuCheckStrictly"
+              :virtual-list-props="{ height: 400 }"
+              checkable
+            />
+          </template>
+        </a-form-item>
+      </fieldset>
+      <fieldset v-show="current === 3">
+        <a-form-item hide-label field="dataScope">
+          <a-select
+            v-model.trim="form.dataScope"
+            :options="data_scope_enum"
+            placeholder="请选择数据权限"
+            :disabled="form.isSystem"
+          />
+        </a-form-item>
+        <a-form-item v-if="form.dataScope === 5" hide-label :disabled="form.isSystem">
+          <a-space>
+            <a-checkbox v-model="isDeptExpanded" @change="onExpanded('dept')">展开/折叠</a-checkbox>
+            <a-checkbox v-model="isDeptCheckAll" @change="onCheckAll('dept')">全选/全不选</a-checkbox>
+            <a-checkbox v-model="form.deptCheckStrictly">父子联动</a-checkbox>
+          </a-space>
+          <template #extra>
+            <a-tree
+              ref="deptTreeRef"
+              v-model:checked-keys="form.deptIds"
+              class="w-full"
+              :data="deptList"
+              :default-expand-all="isDeptExpanded"
+              :check-strictly="!form.deptCheckStrictly"
+              :virtual-list-props="{ height: 350 }"
+              checkable
+            />
+          </template>
+        </a-form-item>
+      </fieldset>
+    </a-form>
+    <template #footer>
+      <a-space size="large">
+        <a-button :disabled="current === 1" type="secondary" @click="onPrev">
+          <IconLeft />
+          上一步
+        </a-button>
+        <a-button v-if="current !== 3" :disabled="current === 3" type="primary" @click="onNext">
+          下一步
+          <IconRight />
+        </a-button>
+        <a-button v-if="current === 3" type="primary" @click="onClickOk">确定</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addRole } from '@/apis/system/role'
+import { useResetReactive } from '@/hooks'
+import { useDept, useDict, useMenu } from '@/hooks/app'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const visible = ref(false)
+const formRef = ref<FormInstance>()
+const { data_scope_enum } = useDict('data_scope_enum')
+const { deptList, getDeptList } = useDept()
+const { menuList, getMenuList } = useMenu()
+
+const rules: FormInstance['rules'] = {
+  name: [{ required: true, message: '请输入名称' }],
+  code: [{ required: true, message: '请输入编码' }],
+  dataScope: [{ required: true, message: '请选择数据权限' }],
+}
+
+const [form, resetForm] = useResetReactive({
+  menuCheckStrictly: true,
+  deptCheckStrictly: true,
+  sort: 999,
+  dataScope: 4,
+})
+
+const menuTreeRef = ref()
+const deptTreeRef = ref()
+const isMenuExpanded = ref(false)
+const isDeptExpanded = ref(true)
+const isMenuCheckAll = ref(false)
+const isDeptCheckAll = ref(false)
+const current = ref<number>(1)
+// 重置
+const reset = () => {
+  isMenuExpanded.value = false
+  isMenuCheckAll.value = false
+  isDeptExpanded.value = true
+  isDeptCheckAll.value = false
+  menuTreeRef.value?.expandAll(isMenuExpanded.value)
+  deptTreeRef.value?.expandAll(isDeptExpanded.value)
+  current.value = 1
+  formRef.value?.resetFields()
+  resetForm()
+}
+
+// 上一步
+const onPrev = () => {
+  current.value = Math.max(1, current.value - 1)
+}
+// 下一步
+const onNext = async () => {
+  try {
+    if (current.value === 1) {
+      const isInvalid = await formRef.value?.validateField(['name', 'code', 'sort', 'description'])
+      if (isInvalid) return
+    }
+    current.value = Math.min(3, current.value + 1)
+  } catch (error) {
+    console.error(error)
+  }
+}
+// 当前页
+const onChangeCurrent = (page: number) => {
+  current.value = page
+}
+
+// 获取所有选中的菜单
+const getMenuAllCheckedKeys = () => {
+  // 获取目前被选中的菜单
+  const checkedNodes = menuTreeRef.value?.getCheckedNodes()
+  const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
+  // 获取半选中的菜单
+  const halfCheckedNodes = menuTreeRef.value?.getHalfCheckedNodes()
+  const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
+  checkedKeys.unshift(...halfCheckedKeys)
+  return checkedKeys
+}
+
+// 获取所有选中的部门
+const getDeptAllCheckedKeys = () => {
+  if (!deptTreeRef.value) {
+    return []
+  }
+  // 获取目前被选中的部门
+  const checkedNodes = deptTreeRef.value?.getCheckedNodes()
+  const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
+  // 获取半选中的部门
+  const halfCheckedNodes = deptTreeRef.value?.getHalfCheckedNodes()
+  const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
+  checkedKeys.unshift(...halfCheckedKeys)
+  return checkedKeys
+}
+
+// 操作树
+const handleTreeAction = (type, action) => {
+  const refMap = {
+    menu: menuTreeRef,
+    dept: deptTreeRef,
+  }
+  const ref = refMap[type]
+  if (ref && action === 'expand') {
+    ref.value?.expandAll(type === 'menu' ? isMenuExpanded.value : isDeptExpanded.value)
+  } else if (ref && action === 'check') {
+    ref.value?.checkAll(type === 'menu' ? isMenuCheckAll.value : isDeptCheckAll.value)
+  }
+}
+
+// 调用时
+const onExpanded = (type) => handleTreeAction(type, 'expand')
+const onCheckAll = (type) => handleTreeAction(type, 'check')
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.validate()
+    if (isInvalid) return false
+    form.menuIds = getMenuAllCheckedKeys()
+    form.deptIds = getDeptAllCheckedKeys()
+    await addRole(form)
+    Message.success('新增成功')
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 确认
+const onClickOk = () => {
+  if (unref(current) === 3) {
+    save()
+    visible.value = false
+  }
+}
+
+// 打开
+const onOpen = async () => {
+  reset()
+  if (!menuList.value.length) {
+    await getMenuList()
+  }
+  if (!deptList.value.length) {
+    await getDeptList()
+  }
+  dataId.value = ''
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss">
+fieldset {
+  padding: 15px 15px 0 15px;
+  margin-bottom: 10px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+  height: 440px;
+}
+
+fieldset legend {
+  color: rgb(var(--gray-10));
+  padding: 2px 5px 2px 5px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+
+.mb-15 {
+  margin-bottom: 15px
+}
+
+:deep(.arco-form-item-extra) {
+  width: 100%;
+}
+
+:deep(.arco-modal-footer){
+  margin-top: -20px;
+}
+
+.menu-tree{
+  :deep(.arco-tree-node-is-leaf) {
+    display: inline-flex;
+  }
+  :deep(.arco-tree-node-indent-block){
+    width: 10px;
+  }
+}
+</style>
--- a/src/views/tenant/package/TenantPackageAddModal.vue
+++ b/src/views/tenant/package/TenantPackageAddModal.vue
@@ -0,0 +1,155 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :esc-to-close="false"
+    :mask-closable="false"
+    :title="title"
+    :width="width >= 500 ? 500 : '100%'"
+    :hi
+    draggable
+    @close="reset"
+    @before-ok="save"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width size="large">
+      <a-form-item field="name" label="套餐名称">
+        <a-input v-model.trim="form.name" placeholder="请输入套餐名称" />
+      </a-form-item>
+      <a-form-item field="status" label="套餐状态">
+        <a-switch
+          v-model="form.status" type="round" :checked-value="1" :unchecked-value="2" checked-text="启用"
+          unchecked-text="禁用"
+        />
+      </a-form-item>
+      <a-form-item field="menuIds" label="关联菜单">
+        <a-space>
+          <a-checkbox v-model="isMenuExpanded" @change="onExpanded">展开/折叠</a-checkbox>
+          <a-checkbox v-model="isMenuCheckAll" @change="onCheckAll">全选/全不选</a-checkbox>
+          <a-checkbox v-model="form.menuCheckStrictly">父子联动</a-checkbox>
+        </a-space>
+        <template #extra>
+          <a-tree
+            ref="menuTreeRef"
+            :data="menuList"
+            class="scrollable-container"
+            :default-expand-all="isMenuExpanded"
+            :check-strictly="!form.menuCheckStrictly"
+            checkable
+          />
+        </template>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { type FormInstance, Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addTenantPackage, getTenantPackage, updateTenantPackage } from '@/apis/tenant/tenantPackage'
+import { useResetReactive } from '@/hooks'
+import { useMenu } from '@/hooks/app'
+
+const emit = defineEmits<{ (e: 'save-success'): void }>()
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const visible = ref(false)
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改租户套餐' : '新增租户套餐'))
+const formRef = ref<FormInstance>()
+const { menuList, getTenantPackageMenuList } = useMenu()
+const rules: FormInstance['rules'] = {
+  name: [{ required: true, message: '请输入套餐名称' }],
+  status: [{ required: true, message: '请选择套餐状态' }],
+}
+
+const [form, resetForm] = useResetReactive({
+  menuCheckStrictly: true,
+  status: 2,
+})
+
+const menuTreeRef = ref()
+const isMenuExpanded = ref(false)
+const isMenuCheckAll = ref(false)
+
+// 重置
+const reset = () => {
+  isMenuExpanded.value = false
+  isMenuCheckAll.value = false
+  menuTreeRef.value?.expandAll(isMenuExpanded.value)
+  menuTreeRef.value?.checkAll(false)
+  formRef.value?.resetFields()
+  resetForm()
+}
+
+// 获取所有选中的菜单
+const getMenuAllCheckedKeys = () => {
+  // 获取目前被选中的菜单
+  const checkedNodes = menuTreeRef.value?.getCheckedNodes()
+  const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
+  // 获取半选中的菜单
+  const halfCheckedNodes = menuTreeRef.value?.getHalfCheckedNodes()
+  const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
+  checkedKeys.unshift(...halfCheckedKeys)
+  return checkedKeys
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.validate()
+    if (isInvalid) return false
+    form.menuIds = getMenuAllCheckedKeys()
+    if (isUpdate.value) {
+      await updateTenantPackage(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      await addTenantPackage(form)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 新增
+const onAdd = async () => {
+  reset()
+  await getTenantPackageMenuList()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  await getTenantPackageMenuList()
+  dataId.value = id
+  const { data } = await getTenantPackage(id)
+  Object.assign(form, data)
+  menuTreeRef.value?.checkNode(form.menuIds, true, true)
+  visible.value = true
+}
+
+// 展开/折叠
+const onExpanded = () => {
+  menuTreeRef.value?.expandAll(isMenuExpanded.value)
+}
+
+// 全选/全不选
+const onCheckAll = () => {
+  menuTreeRef.value?.checkAll(isMenuCheckAll.value)
+}
+
+defineExpose({ onAdd, onUpdate })
+</script>
+
+<style lang="scss" scoped>
+.scrollable-container {
+  height: 280px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+</style>
--- a/src/views/tenant/package/TenantPackageDetailDrawer.vue
+++ b/src/views/tenant/package/TenantPackageDetailDrawer.vue
@@ -0,0 +1,67 @@
+<template>
+  <a-drawer v-model:visible="visible" title="租户套餐详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
+    <a-descriptions title="基础信息" :column="2" size="large" class="general-description">
+      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="套餐名称">{{ dataDetail?.name }}</a-descriptions-item>
+      <a-descriptions-item label="状态">
+        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
+        <a-tag v-else color="red">禁用</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item />
+      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
+      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
+    </a-descriptions>
+
+    <a-descriptions
+      title="套餐权限"
+      :column="2"
+      size="large"
+      class="permission general-description"
+      style="margin-top: 20px; position: relative"
+    >
+      <a-descriptions-item :span="2">
+        <a-tree
+          :checked-keys="dataDetail?.menuIds"
+          :data="menuList"
+          default-expand-all
+          check-strictly
+          checkable
+        />
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { type TenantPackageDetailResp, getTenantPackage as getDetail } from '@/apis/tenant/tenantPackage'
+import { useMenu } from '@/hooks/app'
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const dataDetail = ref<TenantPackageDetailResp>()
+const visible = ref(false)
+const { menuList, getTenantPackageMenuList } = useMenu()
+// 查询详情
+const getDataDetail = async () => {
+  const { data } = await getDetail(dataId.value)
+  dataDetail.value = data
+}
+
+// 打开
+const onOpen = async (id: string) => {
+  dataId.value = id
+  if (!menuList.value.length) {
+    await getTenantPackageMenuList()
+  }
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/package/index.vue
+++ b/src/views/tenant/package/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="gi_table_page">
+    <GiTable
+      title="租户套餐管理"
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input v-model="queryForm.name" placeholder="请输入套餐名称" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['tenant:package:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['tenant:package:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['tenant:package:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['tenant:package:delete']"
+            status="danger"
+            :disabled="record.disabled"
+            :title="record.disabled ? '不可删除' : '删除'"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <TenantPackageAddModal ref="TenantPackageAddModalRef" @save-success="search" />
+    <TenantPackageDetailDrawer ref="TenantPackageDetailDrawerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TenantPackageAddModal from './TenantPackageAddModal.vue'
+import TenantPackageDetailDrawer from './TenantPackageDetailDrawer.vue'
+import {
+  type TenantPackageQuery,
+  type TenantPackageResp,
+  deleteTenantPackage,
+  listTenantPackage,
+} from '@/apis/tenant/tenantPackage'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+
+defineOptions({ name: 'TenantPackage' })
+
+const queryForm = reactive<TenantPackageQuery>({
+  name: undefined,
+  status: undefined,
+  sort: ['id,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listTenantPackage({ ...queryForm, ...page }), { immediate: true })
+const columns: TableInstanceColumns[] = [
+  { title: '套餐ID', dataIndex: 'id', slotName: 'id' },
+  { title: '套餐名称', dataIndex: 'name', slotName: 'name' },
+  { title: '套餐状态', dataIndex: 'status', slotName: 'status' },
+  { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 160,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['tenant:package:detail', 'tenant:package:update', 'tenant:package:delete']),
+  },
+]
+
+// 重置
+const reset = () => {
+  queryForm.name = undefined
+  queryForm.status = undefined
+  search()
+}
+
+// 删除
+const onDelete = (record: TenantPackageResp) => {
+  return handleDelete(() => deleteTenantPackage(record.id), {
+    content: `是否确定删除该条数据？`,
+    showModal: true,
+  })
+}
+
+const TenantPackageAddModalRef = ref<InstanceType<typeof TenantPackageAddModal>>()
+// 新增
+const onAdd = () => {
+  TenantPackageAddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: TenantPackageResp) => {
+  TenantPackageAddModalRef.value?.onUpdate(record.id)
+}
+
+const TenantPackageDetailDrawerRef = ref<InstanceType<typeof TenantPackageDetailDrawer>>()
+// 详情
+const onDetail = (record: TenantPackageResp) => {
+  TenantPackageDetailDrawerRef.value?.onOpen(record.id)
+}
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/tenantDbConnect/TenantDbConnectAddModal.vue
+++ b/src/views/tenant/tenantDbConnect/TenantDbConnectAddModal.vue
@@ -0,0 +1,142 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    draggable
+    :width="width >= 500 ? 500 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addTenantDbConnect, getTenantDbConnect, updateTenantDbConnect } from '@/apis/tenant/tenantDbConnect'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { useResetReactive } from '@/hooks'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const visible = ref(false)
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改租户数据连接' : '新增租户数据连接'))
+const formRef = ref<InstanceType<typeof GiForm>>()
+
+const options: Options = {
+  form: { size: 'large' },
+  btns: { hide: true },
+}
+
+const [form, resetForm] = useResetReactive({
+  type: 0,
+})
+
+const columns: Columns = reactive([
+  {
+    label: '连接名称',
+    field: 'connectName',
+    type: 'input',
+    span: 24,
+    rules: [{ required: true, message: '请输入连接名称' }],
+  },
+  {
+    label: '连接类型',
+    field: 'type',
+    type: 'radio-group',
+    span: 24,
+    rules: [{ required: true, message: '请选择连接类型' }],
+    props: {
+      type: 'button',
+      size: 'small',
+      options: [
+        { label: 'mysql', value: 0 },
+        { label: 'postgresql(暂未支持)', disabled: true },
+      ],
+    },
+
+  },
+  {
+    label: '主机连接地址',
+    field: 'host',
+    type: 'input',
+    span: 24,
+    rules: [{ required: true, message: '请输入主机连接地址' }],
+  },
+  {
+    label: '连接端口',
+    field: 'port',
+    type: 'input-number',
+    span: 24,
+    rules: [{ required: true, message: '请输入连接端口' }],
+  },
+  {
+    label: '连接用户名',
+    field: 'username',
+    type: 'input',
+    span: 24,
+    rules: [{ required: true, message: '请输入连接用户名' }],
+  },
+  {
+    label: '连接密码',
+    field: 'password',
+    type: 'input-password',
+    span: 24,
+    rules: [{ required: true, message: '请输入连接密码' }],
+  },
+])
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    if (isUpdate.value) {
+      await updateTenantDbConnect(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      await addTenantDbConnect(form)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 新增
+const onAdd = async () => {
+  reset()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  const { data } = await getTenantDbConnect(id)
+  Object.assign(form, data)
+  visible.value = true
+}
+
+defineExpose({ onAdd, onUpdate })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/tenantDbConnect/TenantDbConnectDetailDrawer.vue
+++ b/src/views/tenant/tenantDbConnect/TenantDbConnectDetailDrawer.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-drawer v-model:visible="visible" title="租户数据连接详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
+    <a-descriptions :column="2" size="large" class="general-description">
+      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="连接名称">{{ dataDetail?.connectName }}</a-descriptions-item>
+      <a-descriptions-item label="连接类型">{{ dataDetail?.type }}</a-descriptions-item>
+      <a-descriptions-item label="主机连接地址">{{ dataDetail?.host }}</a-descriptions-item>
+      <a-descriptions-item label="连接端口">{{ dataDetail?.port }}</a-descriptions-item>
+      <a-descriptions-item label="连接用户名">{{ dataDetail?.username }}</a-descriptions-item>
+      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
+      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { type TenantDbConnectDetailResp, getTenantDbConnect as getDetail } from '@/apis/tenant/tenantDbConnect'
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const dataDetail = ref<TenantDbConnectDetailResp>()
+const visible = ref(false)
+
+// 查询详情
+const getDataDetail = async () => {
+  const { data } = await getDetail(dataId.value)
+  dataDetail.value = data
+}
+
+// 打开
+const onOpen = async (id: string) => {
+  dataId.value = id
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/tenantDbConnect/index.vue
+++ b/src/views/tenant/tenantDbConnect/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="gi_table_page">
+    <GiTable
+      title="租户数据连接管理"
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input v-model="queryForm.connectName" placeholder="请输入连接名称" allow-clear @change="search">
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-button @click="reset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['tenant:tenantDbConnect:add']" type="primary" @click="onAdd">
+          <template #icon>
+            <icon-plus />
+          </template>
+          <template #default>新增</template>
+        </a-button>
+      </template>
+
+      <template #type="{ record }">
+        <a-tag v-if="record.type === 0" color="green" size="small">
+          <template #default>MYSQL</template>
+        </a-tag>
+      </template>
+
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['tenant:tenantDbConnect:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['tenant:tenantDbConnect:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['tenant:tenantDbConnect:delete']"
+            status="danger"
+            :disabled="record.disabled"
+            :title="record.disabled ? '不可删除' : '删除'"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <TenantDbConnectAddModal ref="TenantDbConnectAddModalRef" @save-success="search" />
+    <TenantDbConnectDetailDrawer ref="TenantDbConnectDetailDrawerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TenantDbConnectAddModal from './TenantDbConnectAddModal.vue'
+import TenantDbConnectDetailDrawer from './TenantDbConnectDetailDrawer.vue'
+import {
+  type TenantDbConnectQuery,
+  type TenantDbConnectResp,
+  deleteTenantDbConnect,
+  listTenantDbConnect,
+} from '@/apis/tenant/tenantDbConnect'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+
+defineOptions({ name: 'TenantDbConnect' })
+
+const queryForm = reactive<TenantDbConnectQuery>({
+  connectName: undefined,
+  sort: ['id,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listTenantDbConnect({ ...queryForm, ...page }), { immediate: true })
+const columns: TableInstanceColumns[] = [
+  { title: '连接ID', dataIndex: 'id', slotName: 'id' },
+  { title: '连接名称', dataIndex: 'connectName', slotName: 'connectName', align: 'center' },
+  { title: '连接类型', dataIndex: 'type', slotName: 'type', align: 'center' },
+  { title: '主机连接地址', dataIndex: 'host', slotName: 'host', align: 'center' },
+  { title: '连接端口', dataIndex: 'port', slotName: 'port', align: 'center' },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 160,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['tenant:tenantDbConnect:detail', 'tenant:tenantDbConnect:update', 'tenant:tenantDbConnect:delete']),
+  },
+]
+
+// 重置
+const reset = () => {
+  queryForm.connectName = undefined
+  search()
+}
+
+// 删除
+const onDelete = (record: TenantDbConnectResp) => {
+  return handleDelete(() => deleteTenantDbConnect(record.id), {
+    content: `是否确定删除该条数据？`,
+    showModal: true,
+  })
+}
+
+const TenantDbConnectAddModalRef = ref<InstanceType<typeof TenantDbConnectAddModal>>()
+// 新增
+const onAdd = () => {
+  TenantDbConnectAddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: TenantDbConnectResp) => {
+  TenantDbConnectAddModalRef.value?.onUpdate(record.id)
+}
+
+const TenantDbConnectDetailDrawerRef = ref<InstanceType<typeof TenantDbConnectDetailDrawer>>()
+// 详情
+const onDetail = (record: TenantDbConnectResp) => {
+  TenantDbConnectDetailDrawerRef.value?.onOpen(record.id)
+}
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/user/TenantAddModal.vue
+++ b/src/views/tenant/user/TenantAddModal.vue
@@ -0,0 +1,230 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    draggable
+    :width="width >= 500 ? 500 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addTenant, getTenant, listAllDbConnect, listAllPackage, updateTenant } from '@/apis/tenant/tenant'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { useResetReactive } from '@/hooks'
+import { useDict } from '@/hooks/app'
+import { encryptByRsa } from '@/utils/encrypt'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const visible = ref(false)
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改租户' : '新增租户'))
+const formRef = ref<InstanceType<typeof GiForm>>()
+const { dis_enable_status_enum } = useDict('dis_enable_status_enum')
+
+const options: Options = {
+  form: { size: 'large' },
+  btns: { hide: true },
+}
+
+const tenantListOptions = ref([])
+const dbConnectListOptions = ref([])
+
+const getListAllTenantPackage = async () => {
+  const data = await listAllPackage()
+  tenantListOptions.value = []
+  data.data.forEach((item: any) => {
+    tenantListOptions.value.push({ label: item.name, value: item.id, disabled: item.status != 1 })
+  })
+}
+
+const getListAllDbConnect = async () => {
+  const data = await listAllDbConnect()
+  dbConnectListOptions.value = []
+  data.data.forEach((item: any) => {
+    dbConnectListOptions.value.push({ label: item.connectName, value: item.id })
+  })
+}
+
+const [form, resetForm] = useResetReactive({
+  status: 2,
+  plaintextPwd: undefined,
+})
+
+const columns: Columns = reactive([
+  {
+    label: '租户名称',
+    field: 'name',
+    type: 'input',
+    span: 24,
+    rules: [{ required: true, message: '请输入租户名称' }],
+  },
+  {
+    label: '登陆用户',
+    field: 'username',
+    type: 'input',
+    span: 24,
+    props: {
+      placeholder: '请输入用户名',
+      maxLength: 64,
+      showWordLimit: true,
+    },
+    rules: [{ required: true, message: '请输入登陆用户名' }],
+    hide: () => {
+      return isUpdate.value
+    },
+  },
+  {
+    label: '登陆密码',
+    field: 'plaintextPwd',
+    span: 24,
+    type: 'input-password',
+    props: {
+      placeholder: '请输入密码',
+      maxLength: 32,
+      showWordLimit: true,
+    },
+    rules: [{ required: true, message: '请输入登陆密码' }],
+    hide: () => {
+      return isUpdate.value
+    },
+  },
+  {
+    label: '绑定域名',
+    field: 'domain',
+    span: 24,
+    type: 'input',
+  },
+  {
+    label: '租户套餐',
+    field: 'packageId',
+    span: 24,
+    type: 'select',
+    rules: [{ required: true, message: '请选择租户套餐' }],
+    hide: () => {
+      return isUpdate.value
+    },
+    props: {
+      options: tenantListOptions,
+    },
+  },
+
+  {
+    label: '隔离级别',
+    field: 'isolationLevel',
+    type: 'radio-group',
+    span: 24,
+    rules: [{ required: true, message: '请选择隔离级别' }],
+    props: {
+      type: 'button',
+      size: 'small',
+      options: [
+        { label: '行级', value: 0 },
+        { label: '数据源级', value: 1 },
+      ],
+    },
+    hide: () => {
+      return isUpdate.value
+    },
+  },
+  {
+    label: '数据连接',
+    field: 'dbConnectId',
+    type: 'select',
+    span: 24,
+    rules: [{ required: true, message: '请选择数据连接' }],
+    hide: () => {
+      return isUpdate.value || form.isolationLevel !== 1
+    },
+    props: {
+      options: dbConnectListOptions,
+    },
+  },
+  {
+    label: '状态',
+    field: 'status',
+    type: 'switch',
+    span: 24,
+    options: dis_enable_status_enum,
+    props: {
+      type: 'round',
+      checkedValue: 1,
+      uncheckedValue: 2,
+      checkedText: '启用',
+      uncheckedText: '禁用',
+    },
+  },
+  {
+    label: '过期时间',
+    field: 'expireTime',
+    type: 'date-picker',
+    span: 24,
+    props: {
+      placeholder: '请选择过期时间',
+      showTime: true,
+    },
+  },
+])
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  getListAllTenantPackage()
+  getListAllDbConnect()
+  resetForm()
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    if (isUpdate.value) {
+      await updateTenant(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      const data = form
+      data.password = encryptByRsa(form.plaintextPwd) || ''
+      await addTenant(data)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 新增
+const onAdd = async () => {
+  reset()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  const { data } = await getTenant(id)
+  Object.assign(form, data)
+  visible.value = true
+}
+
+defineExpose({ onAdd, onUpdate })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/user/TenantDetailDrawer.vue
+++ b/src/views/tenant/user/TenantDetailDrawer.vue
@@ -0,0 +1,87 @@
+<template>
+  <a-drawer v-model:visible="visible" title="租户详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
+    <a-descriptions title="基础信息" :column="2" size="large" class="general-description">
+      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="租户名称">{{ dataDetail?.name }}</a-descriptions-item>
+      <a-descriptions-item label="绑定的域名">
+        <a v-if="dataDetail?.domain" style="color: rgb(var(--arcoblue-7))" :text="dataDetail?.domain" :href="formatDomain(dataDetail?.domain)" />
+        <span v-else style="color: red" class="text-red-4">未设置</span>
+      </a-descriptions-item>
+      <a-descriptions-item label="租户套餐">{{ dataDetail?.packageName }}</a-descriptions-item>
+      <a-descriptions-item label="状态">
+        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
+        <a-tag v-else color="red">禁用</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="过期时间">
+        <span v-if="!dataDetail?.expireTime">
+          <icon-check-circle-fill class="success" />
+          <span>永不过期</span>
+        </span>
+        <span v-else>{{ dataDetail?.expireTime }}</span>
+      </a-descriptions-item>
+      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
+      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
+    </a-descriptions>
+
+    <a-descriptions
+      title="租户权限"
+      :column="2"
+      size="large"
+      class="permission general-description"
+      style="margin-top: 20px; position: relative"
+    >
+      <a-descriptions-item :span="2">
+        <a-tree
+          :checked-keys="dataDetail?.menuIds"
+          :data="menuList"
+          default-expand-all
+          check-strictly
+          checkable
+        />
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { type TenantDetailResp, getTenant as getDetail } from '@/apis/tenant/tenant'
+import { useMenu } from '@/hooks/app'
+
+const { menuList, getTenantPackageMenuList } = useMenu()
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const dataDetail = ref<TenantDetailResp>()
+const visible = ref(false)
+
+// 查询详情
+const getDataDetail = async () => {
+  const { data } = await getDetail(dataId.value)
+  dataDetail.value = data
+}
+
+// 打开
+const onOpen = async (id: string) => {
+  dataId.value = id
+  if (!menuList.value.length) {
+    await getTenantPackageMenuList()
+  }
+  await getDataDetail()
+  visible.value = true
+}
+
+const formatDomain = (domain: string): string => {
+  if (domain.startsWith('http')) {
+    return domain
+  } else {
+    return `http://${domain}`
+  }
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/user/TenantUserEditModal.vue
+++ b/src/views/tenant/user/TenantUserEditModal.vue
@@ -0,0 +1,104 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="修改租户登录信息"
+    :mask-closable="false"
+    :esc-to-close="false"
+    draggable
+    :width="width >= 500 ? 500 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { getTenantLoginUser, updateTenantLoginUser } from '@/apis/tenant/tenant'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { useResetReactive } from '@/hooks'
+import { encryptByRsa } from '@/utils/encrypt'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const visible = ref(false)
+const formRef = ref<InstanceType<typeof GiForm>>()
+
+const options: Options = {
+  form: { size: 'large' },
+  btns: { hide: true },
+}
+
+const [form, resetForm] = useResetReactive({
+  plaintextPwd: undefined,
+})
+
+const columns: Columns = reactive([
+  {
+    label: '登陆用户',
+    field: 'username',
+    type: 'input',
+    span: 24,
+    props: {
+      placeholder: '请输入用户名',
+      maxLength: 64,
+      showWordLimit: true,
+    },
+    rules: [{ required: true, message: '请输入登陆用户名' }],
+  },
+  {
+    label: '登陆密码',
+    field: 'plaintextPwd',
+    type: 'input-password',
+    span: 24,
+    props: {
+      placeholder: '请输入密码',
+      maxLength: 32,
+      showWordLimit: true,
+    },
+  },
+])
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    await updateTenantLoginUser({
+      tenantId: dataId.value,
+      username: form.username,
+      password: encryptByRsa(form.plaintextPwd) || '',
+    })
+    Message.success('修改成功')
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+const open = async (id: string) => {
+  reset()
+  dataId.value = id
+  const { data } = await getTenantLoginUser(id)
+  Object.assign(form, { username: data })
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/tenant/user/index.vue
+++ b/src/views/tenant/user/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="gi_table_page">
+    <GiTable
+      title="租户管理"
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input v-model="queryForm.name" placeholder="请输入租户名称" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.packageId"
+          style="width: 200px"
+          :options="tenantListOptions"
+          placeholder="请选择套餐"
+          allow-clear
+          @change="search"
+        />
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['tenant:user:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #domain="{ record }">
+        <a v-if="record.domain" style="color: rgb(var(--arcoblue-7))" :text="record.domain" :href="formatDomain(record.domain)" />
+        <span v-else style="color: red" class="text-red-4">未设置</span>
+      </template>
+      <template #expireTime="{ record }">
+        <span v-if="!record.expireTime">
+          <icon-check-circle-fill class="success" />
+          <span>永不过期</span>
+        </span>
+        <span v-else>{{ record.expireTime }}</span>
+      </template>
+
+      <template #isolationLevel="{ record }">
+        <a-tag v-if="record.isolationLevel === 0" color="arcoblue">行级租户</a-tag>
+        <a-tag v-if="record.isolationLevel === 1" color="green">数据源级</a-tag>
+      </template>
+
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['tenant:user:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['tenant:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['tenant:user:delete']"
+            status="danger"
+            :disabled="record.disabled"
+            :title="record.disabled ? '不可删除' : '删除'"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+
+          <a-dropdown>
+            <a-button v-if="has.hasPermOr(['tenant:user:editLoginUserInfo'])" type="text" size="mini" title="更多">
+              <template #icon>
+                <icon-more :size="16" />
+              </template>
+            </a-button>
+            <template #content>
+              <a-doption v-permission="['tenant:user:editLoginUserInfo']" title="修改登录信息" @click="editLoginUserInfo(record)">修改登录信息</a-doption>
+            </template>
+          </a-dropdown>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <TenantAddModal ref="TenantAddModalRef" @save-success="search" />
+    <TenantDetailDrawer ref="TenantDetailDrawerRef" />
+    <TenantUserEditModal ref="TenantUserEditModalRef" @save-success="search" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TenantAddModal from './TenantAddModal.vue'
+import TenantUserEditModal from './TenantUserEditModal.vue'
+import TenantDetailDrawer from './TenantDetailDrawer.vue'
+import { type TenantQuery, type TenantResp, deleteTenant, listTenant } from '@/apis/tenant/tenant'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+import { listAllTenantPackage } from '@/apis/tenant/tenantPackage'
+
+defineOptions({ name: 'Tenant' })
+
+const queryForm = reactive<TenantQuery>({
+  name: undefined,
+  packageId: undefined,
+  status: undefined,
+  sort: ['id,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listTenant({ ...queryForm, ...page }), { immediate: true })
+const columns: TableInstanceColumns[] = [
+  { title: '租户编码', dataIndex: 'tenantSn', slotName: 'tenantSn' },
+  { title: '租户名称', dataIndex: 'name', slotName: 'name' },
+  { title: '隔离级别', dataIndex: 'isolationLevel', slotName: 'isolationLevel', align: 'center' },
+  { title: '绑定域名', dataIndex: 'domain', slotName: 'domain' },
+  { title: '绑定套餐', dataIndex: 'packageName', slotName: 'packageName' },
+  { title: '租户状态', dataIndex: 'status', slotName: 'status' },
+  { title: '租户过期时间', dataIndex: 'expireTime', slotName: 'expireTime' },
+  { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 190,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['tenant:user:detail', 'tenant:user:update', 'tenant:user:delete']),
+  },
+]
+
+// 重置
+const reset = () => {
+  queryForm.name = undefined
+  queryForm.packageId = undefined
+  queryForm.status = undefined
+  search()
+}
+
+// 删除
+const onDelete = (record: TenantResp) => {
+  return handleDelete(() => deleteTenant(record.id), {
+    content: `是否确定删除该条数据？`,
+    showModal: true,
+  })
+}
+
+const TenantAddModalRef = ref<InstanceType<typeof TenantAddModal>>()
+const TenantUserEditModalRef = ref<InstanceType<typeof TenantUserEditModal>>()
+// 新增
+const onAdd = () => {
+  TenantAddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: TenantResp) => {
+  TenantAddModalRef.value?.onUpdate(record.id)
+}
+
+// 修改登录信息
+const editLoginUserInfo = (record: TenantResp) => {
+  TenantUserEditModalRef.value?.open(record.id)
+}
+
+const TenantDetailDrawerRef = ref<InstanceType<typeof TenantDetailDrawer>>()
+// 详情
+const onDetail = (record: TenantResp) => {
+  TenantDetailDrawerRef.value?.onOpen(record.id)
+}
+
+const tenantListOptions = ref([])
+
+const getListAllTenantPackage = async () => {
+  const data = await listAllTenantPackage()
+  data.data.forEach((item: any) => {
+    tenantListOptions.value.push({ label: item.name, value: item.id })
+  })
+}
+
+const formatDomain = (domain: string): string => {
+  if (domain.startsWith('http')) {
+    return domain
+  } else {
+    return `http://${domain}`
+  }
+}
+
+onMounted(() => {
+  getListAllTenantPackage()
+})
+</script>
+
+<style scoped lang="scss"></style>