Merge branch 'tenant-dev' into dev

src/views/login/components/account/index.vue

@@ -8,6 +8,9 @@
     size="large"
     @submit="handleLogin"
   >
+    <a-form-item v-if="tenantStore.needInputTenantCode" field="tenantCode" hide-label>
+      <a-input v-model="tenantCode" placeholder="请输入租户编码（不输入时为默认租户）" allow-clear />
+    </a-form-item>
     <a-form-item field="username" hide-label>
       <a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
     </a-form-item>
@@ -41,7 +44,7 @@
 import { type FormInstance, Message } from '@arco-design/web-vue'
 import { useStorage } from '@vueuse/core'
 import { getImageCaptcha } from '@/apis/common'
-import { useTabsStore, useUserStore } from '@/stores'
+import { useTabsStore, useTenantStore, useUserStore } from '@/stores'
 import { encryptByRsa } from '@/utils/encrypt'
 
 const loginConfig = useStorage('login-config', {
@@ -55,7 +58,7 @@ const loginConfig = useStorage('login-config', {
 const isCaptchaEnabled = ref(true)
 // 验证码图片
 const captchaImgBase64 = ref()
-
+const tenantCode = ref()
 const formRef = ref<FormInstance>()
 const form = reactive({
   username: loginConfig.value.username,
@@ -64,6 +67,7 @@ const form = reactive({
   uuid: '',
   expired: false,
 })
+// 校验规则部分
 const rules: FormInstance['rules'] = {
   username: [{ required: true, message: '请输入用户名' }],
   password: [{ required: true, message: '请输入密码' }],
@@ -104,6 +108,7 @@ const getCaptcha = () => {
   })
 }
 
+const tenantStore = useTenantStore()
 const userStore = useUserStore()
 const tabsStore = useTabsStore()
 const router = useRouter()
@@ -114,12 +119,13 @@ const handleLogin = async () => {
     const isInvalid = await formRef.value?.validate()
     if (isInvalid) return
     loading.value = true
+
     await userStore.accountLogin({
       username: form.username,
       password: encryptByRsa(form.password) || '',
       captcha: form.captcha,
       uuid: form.uuid,
-    })
+    }, tenantCode.value)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
     const { rememberMe } = loginConfig.value

src/views/login/components/email/index.vue

@@ -8,6 +8,9 @@
     size="large"
     @submit="handleLogin"
   >
+    <a-form-item v-if="tenantStore.needInputTenantCode" field="tenantCode" hide-label>
+      <a-input v-model="tenantCode" placeholder="请输入租户编码（不输入时为默认租户）" allow-clear />
+    </a-form-item>
     <a-form-item field="email" hide-label>
       <a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
     </a-form-item>
@@ -42,7 +45,7 @@
 import { type FormInstance, Message } from '@arco-design/web-vue'
 import type { BehaviorCaptchaReq } from '@/apis'
 // import { type BehaviorCaptchaReq, getEmailCaptcha } from '@/apis'
-import { useTabsStore, useUserStore } from '@/stores'
+import { useTabsStore, useTenantStore, useUserStore } from '@/stores'
 import * as Regexp from '@/utils/regexp'
 
 const formRef = ref<FormInstance>()
@@ -50,6 +53,7 @@ const form = reactive({
   email: '',
   captcha: '',
 })
+const tenantCode = ref()
 
 const rules: FormInstance['rules'] = {
   email: [
@@ -59,6 +63,7 @@ const rules: FormInstance['rules'] = {
   captcha: [{ required: true, message: '请输入验证码' }],
 }
 
+const tenantStore = useTenantStore()
 const userStore = useUserStore()
 const tabsStore = useTabsStore()
 const router = useRouter()
@@ -69,7 +74,7 @@ const handleLogin = async () => {
     const isInvalid = await formRef.value?.validate()
     if (isInvalid) return
     loading.value = true
-    await userStore.emailLogin(form)
+    await userStore.emailLogin(form, tenantCode.value)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
 

src/views/login/components/phone/index.vue

@@ -8,6 +8,9 @@
     size="large"
     @submit="handleLogin"
   >
+    <a-form-item v-if="tenantStore.needInputTenantCode" field="tenantCode" hide-label>
+      <a-input v-model="tenantCode" placeholder="请输入租户编码（不输入时为默认租户）" allow-clear />
+    </a-form-item>
     <a-form-item field="phone" hide-label>
       <a-input v-model="form.phone" placeholder="请输入手机号" :max-length="11" allow-clear />
     </a-form-item>
@@ -42,7 +45,7 @@
 import { type FormInstance, Message } from '@arco-design/web-vue'
 // import type { BehaviorCaptchaReq } from '@/apis'
 import { type BehaviorCaptchaReq, getSmsCaptcha } from '@/apis'
-import { useTabsStore, useUserStore } from '@/stores'
+import { useTabsStore, useTenantStore, useUserStore } from '@/stores'
 import * as Regexp from '@/utils/regexp'
 
 const formRef = ref<FormInstance>()
@@ -50,6 +53,7 @@ const form = reactive({
   phone: '',
   captcha: '',
 })
+const tenantCode = ref()
 
 const rules: FormInstance['rules'] = {
   phone: [
@@ -59,6 +63,7 @@ const rules: FormInstance['rules'] = {
   captcha: [{ required: true, message: '请输入验证码' }],
 }
 
+const tenantStore = useTenantStore()
 const userStore = useUserStore()
 const tabsStore = useTabsStore()
 const router = useRouter()
@@ -69,7 +74,7 @@ const handleLogin = async () => {
   if (isInvalid) return
   try {
     loading.value = true
-    await userStore.phoneLogin(form)
+    await userStore.phoneLogin(form, tenantCode.value)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
 

src/views/login/index.vue

@@ -78,10 +78,10 @@
       <div class="list">
         <div v-if="isEmailLogin" class="mode item" @click="toggleLoginMode"><icon-user /> 账号/手机号登录</div>
         <div v-else class="mode item" @click="toggleLoginMode"><icon-email /> 邮箱登录</div>
-        <a class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
+        <a v-if="!tenantStore.isTenantConfigured" class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
           <GiSvgIcon name="gitee" :size="24" />
         </a>
-        <a class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
+        <a v-if="tenantStore.isTenantConfigured" class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
           <GiSvgIcon name="github" :size="24" />
         </a>
       </div>
@@ -97,12 +97,16 @@ import PhoneLogin from './components/phone/index.vue'
 import EmailLogin from './components/email/index.vue'
 import { socialAuth } from '@/apis/auth'
 import { useAppStore } from '@/stores'
+import { useTenantStore } from '@/stores/modules/tenant'
 import { useDevice } from '@/hooks'
+import { getTenantIdByDomain, getTenantStatus } from '@/apis'
 
 defineOptions({ name: 'Login' })
 
-const { isDesktop } = useDevice()
 const appStore = useAppStore()
+const tenantStore = useTenantStore()
+
+const { isDesktop } = useDevice()
 const title = computed(() => appStore.getTitle())
 const logo = computed(() => appStore.getLogo())
 
@@ -119,6 +123,21 @@ const onOauth = async (source: string) => {
   const { data } = await socialAuth(source)
   window.location.href = data.authorizeUrl
 }
+
+// 查询租户状态和租户编码
+const onGetTenant = async () => {
+  const { data } = await getTenantStatus()
+  tenantStore.setTenantEnable(data)
+  // 开启租户 根据地址(域名)查询租户code
+  if (data) {
+    const domain = window.location.hostname
+    const { data: tenantId } = await getTenantIdByDomain(domain)
+    tenantStore.setTenantId(tenantId)
+  }
+}
+onMounted(() => {
+  onGetTenant()
+})
 </script>
 
 <style scoped lang="scss">

src/views/open/app/index.vue

@@ -105,7 +105,7 @@ import has from '@/utils/has'
 defineOptions({ name: 'OpenApp' })
 
 const queryForm = reactive<AppQuery>({
-  sort: ['id,desc'],
+  sort: ['createTime,desc'],
 })
 
 const {

src/views/system/config/index.vue

@@ -56,7 +56,7 @@ const data = [
   { name: '登录配置', key: 'login', icon: 'lock', permissions: ['system:loginConfig:get'], value: LoginConfig },
   { name: '邮件配置', key: 'mail', icon: 'email', permissions: ['system:mailConfig:get'], value: MailConfig },
   { name: '短信配置', key: 'sms', icon: 'message', permissions: ['system:smsConfig:list'], value: SmsConfig },
-  { name: '存储配置', key: 'storage', icon: 'storage', permissions: ['system:storage:list'], value: StorageConfig },
+  { name: '存储配置', key: 'storage', icon: 'block-storage', permissions: ['system:storage:list'], value: StorageConfig },
   { name: '客户端配置', key: 'client', icon: 'mobile', permissions: ['system:client:list'], value: ClientConfig },
 ]
 

src/views/system/notice/add/index.vue

@@ -75,7 +75,7 @@ import { Message } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
 import AiEditor from './components/index.vue'
 import { addNotice, getNotice, updateNotice } from '@/apis/system/notice'
-import { listUserDict } from '@/apis'
+import { listUserDict } from '@/apis/system'
 import { type ColumnItem, GiForm } from '@/components/GiForm'
 import type { LabelValueState } from '@/types/global'
 import { useTabsStore } from '@/stores'

src/views/tenant/management/AddModal.vue

@@ -0,0 +1,184 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 500 ? 500 : '100%'"
+    draggable
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addTenant, getTenant, updateTenant } from '@/apis/tenant/management'
+import { type ColumnItem, GiForm } from '@/components/GiForm'
+import { useResetReactive } from '@/hooks'
+import { encryptByRsa } from '@/utils/encrypt'
+import { listTenantPackageDict } from '@/apis/tenant'
+import type { LabelValueState } from '@/types/global'
+
+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 packageList = ref<LabelValueState[]>([])
+// 查询租户套餐
+const getPackageList = async () => {
+  const { data } = await listTenantPackageDict()
+  packageList.value = data
+}
+
+const [form, resetForm] = useResetReactive({
+  isolationLevel: 1,
+  status: 1,
+})
+
+const columns: ColumnItem[] = reactive([
+  {
+    label: '名称',
+    field: 'name',
+    type: 'input',
+    span: 24,
+    required: true,
+    props: {
+      maxLength: 30,
+    },
+  },
+  {
+    label: '套餐',
+    field: 'packageId',
+    type: 'select',
+    span: 24,
+    required: true,
+    hide: () => {
+      return isUpdate.value
+    },
+    props: {
+      options: packageList,
+    },
+  },
+  {
+    label: '过期时间',
+    field: 'expireTime',
+    type: 'date-picker',
+    span: 24,
+    props: {
+      showTime: true,
+    },
+  },
+  {
+    label: '域名',
+    field: 'domain',
+    type: 'input',
+    span: 24,
+  },
+  {
+    label: '管理员用户',
+    field: 'username',
+    type: 'input',
+    span: 24,
+    required: true,
+    props: {
+      maxLength: 64,
+    },
+    hide: () => {
+      return isUpdate.value
+    },
+  },
+  {
+    label: '管理员密码',
+    field: 'password',
+    type: 'input-password',
+    span: 24,
+    required: true,
+    props: {
+      maxLength: 32,
+    },
+    hide: () => {
+      return isUpdate.value
+    },
+  },
+  {
+    label: '描述',
+    field: 'description',
+    type: 'textarea',
+    span: 24,
+  },
+  {
+    label: '状态',
+    field: 'status',
+    type: 'switch',
+    span: 24,
+    props: {
+      type: 'round',
+      checkedValue: 1,
+      uncheckedValue: 2,
+      checkedText: '启用',
+      uncheckedText: '禁用',
+    },
+  },
+])
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+  getPackageList()
+}
+
+// 保存
+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 {
+      await addTenant({
+        ...form,
+        password: encryptByRsa(form.password),
+      })
+      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>

src/views/tenant/management/AdminUserPwdUpdateModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="修改租户管理员密码"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 500 ? 500 : '100%'"
+    draggable
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { updateTenantAdminUserPwd } from '@/apis/tenant/management'
+import { type ColumnItem, GiForm } 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 [form, resetForm] = useResetReactive({
+  password: undefined,
+})
+
+const columns: ColumnItem[] = reactive([
+  {
+    label: '新密码',
+    field: 'password',
+    type: 'input-password',
+    span: 24,
+    required: true,
+    props: {
+      maxLength: 32,
+    },
+  },
+])
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    await updateTenantAdminUserPwd({
+      password: encryptByRsa(form.password) || '',
+    }, dataId.value)
+    Message.success('修改成功')
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+const open = async (id: string) => {
+  reset()
+  dataId.value = id
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss"></style>

src/views/tenant/management/DetailDrawer.vue

@@ -0,0 +1,66 @@
+<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" :span="2">
+        <a-typography-paragraph copyable>{{ dataDetail?.id }}</a-typography-paragraph>
+      </a-descriptions-item>
+      <a-descriptions-item label="编码">
+        <a-typography-paragraph copyable>{{ dataDetail?.code }}</a-typography-paragraph>
+      </a-descriptions-item>
+      <a-descriptions-item label="名称">{{ dataDetail?.name }}</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">
+          <span>永不过期</span>
+        </span>
+        <span v-else>{{ dataDetail?.expireTime }}</span>
+      </a-descriptions-item>
+      <a-descriptions-item label="域名">
+        <a v-if="dataDetail?.domain" style="color: rgb(var(--arcoblue-7))">{{ dataDetail?.domain }}</a>
+        <span v-else style="color: red" class="text-red-4">未设置</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-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { type TenantResp, getTenant as getDetail } from '@/apis/tenant/management'
+import { useMenu } from '@/hooks/app'
+
+const { menuList, getTenantPackageMenuList } = useMenu()
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const dataDetail = ref<TenantResp>()
+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
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss"></style>

src/views/tenant/management/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <GiPageLayout>
+    <GiTable
+      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-search v-model="queryForm.description" placeholder="搜索名称/描述" allow-clear @search="search" />
+        <a-select
+          v-model="queryForm.packageId"
+          :options="packageList"
+          placeholder="请选择套餐"
+          style="width: 200px"
+          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:management:create']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+      </template>
+
+      <template #code="{ record }">
+        <CellCopy :content="record.code" />
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #expireTime="{ record }">
+        <span v-if="!record.expireTime">
+          <span>永不过期</span>
+        </span>
+        <span v-else>{{ record.expireTime }}</span>
+      </template>
+      <template #domain="{ record }">
+        <a v-if="record.domain" style="color: rgb(var(--arcoblue-7))" :href="record.domain">{{ record.domain }}</a>
+        <span v-else style="color: red" class="text-red-4">未设置</span>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['tenant:management:get']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['tenant:management:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-dropdown>
+            <a-button v-if="has.hasPermOr(['tenant:management:updateAdminUserPwd', 'tenant:management:delete'])" type="text" size="mini" title="更多">
+              <template #icon>
+                <icon-more :size="16" />
+              </template>
+            </a-button>
+            <template #content>
+              <a-doption v-permission="['tenant:management:updateAdminUserPwd']" title="修改管理员密码" @click="onUpdateAdminUserPwd(record)">修改管理员密码</a-doption>
+              <a-doption
+                v-permission="['tenant:management:delete']"
+                :disabled="record.disabled"
+                :title="record.disabled ? '禁止删除' : '删除'"
+                @click="onDelete(record)"
+              >
+                删除
+              </a-doption>
+            </template>
+          </a-dropdown>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <AddModal ref="AddModalRef" @save-success="search" />
+    <DetailDrawer ref="DetailDrawerRef" />
+    <AdminUserPwdUpdateModal ref="AdminUserPwdUpdateModalRef" @save-success="search" />
+  </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
+import AddModal from './AddModal.vue'
+import AdminUserPwdUpdateModal from './AdminUserPwdUpdateModal.vue'
+import DetailDrawer from './DetailDrawer.vue'
+import { type TenantQuery, type TenantResp, deleteTenant, listTenant } from '@/apis/tenant/management'
+import { useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+import { listTenantPackageDict } from '@/apis/tenant'
+import type { LabelValueState } from '@/types/global'
+
+defineOptions({ name: 'TenantManagement' })
+
+const queryForm = reactive<TenantQuery>({
+  description: undefined,
+  packageId: undefined,
+  status: undefined,
+  sort: ['createTime,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listTenant({ ...queryForm, ...page }), { immediate: true })
+const columns: TableInstance['columns'] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  { title: '编码', dataIndex: 'code', slotName: 'code', width: 150 },
+  { title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true },
+  { title: '套餐', dataIndex: 'packageName', slotName: 'packageName' },
+  { title: '状态', dataIndex: 'status', slotName: 'status' },
+  { title: '过期时间', dataIndex: 'expireTime', slotName: 'expireTime', width: 180 },
+  { title: '域名', dataIndex: 'domain', slotName: 'domain', ellipsis: true, tooltip: true },
+  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 160,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['tenant:management:get', 'tenant:management:update', 'tenant:management:delete', 'tenant:management:updateAdminUserPwd']),
+  },
+]
+
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.packageId = undefined
+  queryForm.status = undefined
+  search()
+}
+
+// 删除
+const onDelete = (record: TenantResp) => {
+  return handleDelete(() => deleteTenant(record.id), {
+    content: `是否确定删除租户「${record.name}(${record.code})」？`,
+    showModal: true,
+  })
+}
+
+const AddModalRef = ref<InstanceType<typeof AddModal>>()
+// 新增
+const onAdd = () => {
+  AddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: TenantResp) => {
+  AddModalRef.value?.onUpdate(record.id)
+}
+
+const DetailDrawerRef = ref<InstanceType<typeof DetailDrawer>>()
+// 详情
+const onDetail = (record: TenantResp) => {
+  DetailDrawerRef.value?.onOpen(record.id)
+}
+
+const AdminUserPwdUpdateModalRef = ref<InstanceType<typeof AdminUserPwdUpdateModal>>()
+// 修改管理员密码
+const onUpdateAdminUserPwd = (record: TenantResp) => {
+  AdminUserPwdUpdateModalRef.value?.open(record.id)
+}
+
+const packageList = ref<LabelValueState[]>([])
+// 查询套餐列表
+const getPackageList = async () => {
+  const { data } = await listTenantPackageDict()
+  packageList.value = data
+}
+
+onMounted(() => {
+  getPackageList()
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/tenant/package/AddModal.vue

@@ -0,0 +1,170 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 500 ? 500 : '100%'"
+    draggable
+    @before-ok="save"
+    @close="reset"
+  >
+    <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 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>
+      <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, TreeNodeData } from '@arco-design/web-vue'
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addTenantPackage, getTenantPackage, updateTenantPackage } from '@/apis/tenant/package'
+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({
+  sort: 999,
+  menuCheckStrictly: true,
+  status: 1,
+})
+
+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>

src/views/tenant/package/DetailDrawer.vue

@@ -0,0 +1,72 @@
+<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" :span="2">
+        <a-typography-paragraph copyable>{{ dataDetail?.id }}</a-typography-paragraph>
+      </a-descriptions-item>
+      <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
+      <a-descriptions-item label="排序">{{ dataDetail?.sort }}</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-item label="描述" :span="2">{{ dataDetail?.description }}</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 TenantPackageResp, getTenantPackage as getDetail } from '@/apis/tenant/package'
+import { useMenu } from '@/hooks/app'
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const dataDetail = ref<TenantPackageResp>()
+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>

src/views/tenant/package/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <GiPageLayout>
+    <GiTable
+      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-search v-model="queryForm.description" placeholder="搜索名称/描述" allow-clear @search="search" />
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['tenant:package:create']" 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:get']" 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>
+
+    <AddModal ref="AddModalRef" @save-success="search" />
+    <DetailDrawer ref="DetailDrawerRef" />
+  </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
+import AddModal from './AddModal.vue'
+import DetailDrawer from './DetailDrawer.vue'
+import {
+  type TenantPackageQuery,
+  type TenantPackageResp,
+  deleteTenantPackage,
+  listTenantPackage,
+} from '@/apis/tenant/package'
+import { useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+
+defineOptions({ name: 'TenantPackage' })
+
+const queryForm = reactive<TenantPackageQuery>({
+  description: undefined,
+  status: undefined,
+  sort: ['createTime,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listTenantPackage({ ...queryForm, ...page }), { immediate: true })
+const columns: TableInstance['columns'] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  { title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true, fixed: !isMobile() ? 'left' : undefined },
+  { title: '状态', dataIndex: 'status', slotName: 'status' },
+  { title: '排序', dataIndex: 'sort', align: 'center' },
+  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 160,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['tenant:package:get', 'tenant:package:update', 'tenant:package:delete']),
+  },
+]
+
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.status = undefined
+  search()
+}
+
+// 删除
+const onDelete = (record: TenantPackageResp) => {
+  return handleDelete(() => deleteTenantPackage(record.id), {
+    content: `是否确定删除套餐「${record.name}」？`,
+    showModal: true,
+  })
+}
+
+const AddModalRef = ref<InstanceType<typeof AddModal>>()
+// 新增
+const onAdd = () => {
+  AddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: TenantPackageResp) => {
+  AddModalRef.value?.onUpdate(record.id)
+}
+
+const DetailDrawerRef = ref<InstanceType<typeof DetailDrawer>>()
+// 详情
+const onDetail = (record: TenantPackageResp) => {
+  DetailDrawerRef.value?.onOpen(record.id)
+}
+</script>
+
+<style scoped lang="scss"></style>