Merge branch 'tenant-dev' into dev

src/apis/auth/index.ts

@@ -5,19 +5,29 @@ export type * from './type'
 
 const BASE_URL = '/auth'
 
-/** @desc 账号登录 */
-export function accountLogin(req: T.AccountLoginReq) {
-  return http.post<T.LoginResp>(`${BASE_URL}/login`, req)
+const login = (req: T.AccountLoginReq | T.PhoneLoginReq | T.EmailLoginReq, tenantCode?: string) => {
+  const headers = {}
+  if (tenantCode) {
+    headers['X-Tenant-Code'] = tenantCode
+  }
+  return http.post<T.LoginResp>(`${BASE_URL}/login`, req, {
+    headers,
+  })
 }
 
-/** @desc 手机号登录 */
-export function phoneLogin(req: T.PhoneLoginReq) {
-  return http.post<T.LoginResp>(`${BASE_URL}/login`, req)
+/** @desc 账号登录 */
+export function accountLogin(req: T.AccountLoginReq, tenantCode?: string) {
+  return login(req, tenantCode)
 }
 
 /** @desc 邮箱登录 */
-export function emailLogin(req: T.EmailLoginReq) {
-  return http.post<T.LoginResp>(`${BASE_URL}/login`, req)
+export function emailLogin(req: T.EmailLoginReq, tenantCode?: string) {
+  return login(req, tenantCode)
+}
+
+/** @desc 手机号登录 */
+export function phoneLogin(req: T.PhoneLoginReq, tenantCode?: string) {
+  return login(req, tenantCode)
 }
 
 /** @desc 三方账号登录 */

src/apis/auth/type.ts

@@ -80,6 +80,7 @@ export interface EmailLoginReq extends AuthReq {
 /** 登录响应类型 */
 export interface LoginResp {
   token: string
+  tenantId: string
 }
 
 /** 第三方登录授权类型 */

src/apis/common/index.ts

@@ -1,3 +1,2 @@
-export * from './common'
 export * from './captcha'
 export * from './dashboard'

src/apis/index.ts

@@ -3,13 +3,17 @@ export * from './auth'
 export * from './common'
 export * from './monitor'
 export * from './system'
-export * from './code'
+export * from './open'
+export * from './tenant'
 export * from './schedule'
+export * from './code'
 
 export * from './area/type'
 export * from './auth/type'
 export * from './common/type'
 export * from './monitor/type'
 export * from './system/type'
-export * from './code/type'
+export * from './open/type'
+export * from './tenant/type'
 export * from './schedule/type'
+export * from './code/type'

src/apis/open/index.ts

@@ -0,0 +1 @@
+export * from './app'

src/apis/system/common.ts

@@ -2,7 +2,7 @@ import type { TreeNodeData } from '@arco-design/web-vue'
 import http from '@/utils/http'
 import type { LabelValueState } from '@/types/global'
 
-const BASE_URL = '/common'
+const BASE_URL = '/system/common'
 
 /** @desc 查询部门树 */
 export function listDeptTree(query: { description: string | unknown }) {
@@ -35,6 +35,11 @@ export function listSiteOptionDict() {
 }
 
 /** @desc 上传文件 */
-export function uploadFile(data: FormData) {
+export function upload(data: FormData) {
   return http.post(`${BASE_URL}/file`, data)
 }
+
+/** @desc 查询租户开启状态 */
+export function getTenantStatus() {
+  return http.get<boolean>(`${BASE_URL}/dict/option/tenant`)
+}

src/apis/system/index.ts

@@ -1,3 +1,4 @@
+export * from './common'
 export * from './user'
 export * from './role'
 export * from './menu'

src/apis/tenant/common.ts

@@ -0,0 +1,14 @@
+import http from '@/utils/http'
+import type { LabelValueState } from '@/types/global'
+
+const BASE_URL = '/tenant/common'
+
+/** @desc 查询租户套餐列表 */
+export function listTenantPackageDict(query?: { description: string, status: number }) {
+  return http.get<LabelValueState[]>(`${BASE_URL}/dict/package`, query)
+}
+
+/** @desc 根据域名查询租户 ID */
+export function getTenantIdByDomain(domain: string) {
+  return http.get<string>(`${BASE_URL}/id`, { domain })
+}

src/apis/tenant/index.ts

@@ -0,0 +1,3 @@
+export * from './common'
+export * from './management'
+export * from './package'

src/apis/tenant/management.ts

@@ -0,0 +1,36 @@
+import type * as T from './type'
+import http from '@/utils/http'
+
+export type * from './type'
+
+const BASE_URL = '/tenant/management'
+
+/** @desc 查询租户列表 */
+export function listTenant(query: T.TenantPageQuery) {
+  return http.get<PageRes<T.TenantResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询租户详情 */
+export function getTenant(id: string) {
+  return http.get<T.TenantResp>(`${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 const updateTenantAdminUserPwd = (data: any, id: string) => {
+  return http.put(`${BASE_URL}/${id}/admin/pwd`, data)
+}

src/apis/tenant/package.ts

@@ -0,0 +1,41 @@
+import type * as T from './type'
+import http from '@/utils/http'
+
+export type * from './type'
+
+const BASE_URL = '/tenant/package'
+
+/** @desc 查询租户套餐列表 */
+export function listTenantPackage(query: T.TenantPackagePageQuery) {
+  return http.get<PageRes<T.TenantPackageResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询租户套餐详情 */
+export function getTenantPackage(id: string) {
+  return http.get<T.TenantPackageResp>(`${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 listAllTenantPackage() {
+  return http.get<T.TenantPackageResp[]>(`${BASE_URL}/list`)
+}
+
+/** @desc 查询套餐菜单 */
+export function listTenantPackageMenu() {
+  return http.get<any>(`${BASE_URL}/menu/tree`)
+}

src/apis/tenant/type.ts

@@ -0,0 +1,48 @@
+/** 租户 */
+export interface TenantResp {
+  id: string
+  name: string
+  code: string
+  domain: string
+  expireTime: string
+  description: number
+  status: string
+  packageId: string
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+  packageName: string
+}
+export interface TenantQuery {
+  description?: string
+  packageId?: string
+  status?: string
+  sort: Array<string>
+}
+export interface TenantPageQuery extends TenantQuery, PageQuery {}
+
+/** 租户套餐 */
+export interface TenantPackageResp {
+  id: string
+  name: string
+  sort: number
+  menuCheckStrictly: string
+  description: string
+  status: string
+  menuIds: []
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface TenantPackageQuery {
+  description?: string
+  status?: string
+  sort: Array<string>
+}
+export interface TenantPackagePageQuery extends TenantPackageQuery, PageQuery {}

src/assets/icons/block-storage.svg

@@ -0,0 +1 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="#000000"><path fill-rule="evenodd" clip-rule="evenodd" d="M45 25a1 1 0 011 1v16a1 1 0 01-1 1H23a1 1 0 01-1-1V26a1 1 0 011-1h22zM28 6c9.62 0 17.477 7.546 17.975 17.042h-4.007C41.475 15.757 35.41 10 28 10a14.007 14.007 0 00-13.312 9.65l-.673 2.06-2.094.562A8.005 8.005 0 006 30a8 8 0 008 8h4.999v4H14C7.373 42 2 36.627 2 30c0-5.55 3.768-10.22 8.886-11.592C13.238 11.205 20.01 6 28 6zm14 23H26v10h16V29zm-9 3v4h-4v-4h4zm7 0v4h-4v-4h4z" fill="#000000"/></svg>

src/assets/icons/project.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.958 3.522l19.433 10.6a1 1 0 010 1.756l-19.433 10.6a2 2 0 01-1.916 0L3.61 15.878a1 1 0 010-1.756l19.433-10.6a2 2 0 011.916 0zM5.93 22.23l-.14-.067a2 2 0 00-1.723 3.607l18.991 9.995.146.07.143.056.138.042.145.033.11.017.187.016.108.001.128-.006.172-.022.135-.028.078-.02.175-.06.103-.043c.039-.017.077-.036.115-.056l18.99-9.995a2 2 0 00-1.864-3.54L24 31.74 5.93 22.23zm0 9l-.14-.067a2 2 0 00-1.723 3.607l19 10 .142.067c.42.182.873.207 1.29.1.465.12.974.074 1.431-.167l19-10a2 2 0 00-1.862-3.54l-18.57 9.772L5.932 31.23zM10.353 15L24 7.556 37.647 15 24 22.444 10.353 15z" fill="currentColor"/></svg>

src/assets/icons/user-management.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 26a1 1 0 011 1v2a1 1 0 01-1 1h-7c-3.73 0-6.86 2.55-7.75 6A8.226 8.226 0 008 38v2h15a1 1 0 011 1v2a1 1 0 01-1 1H6c-1.1 0-2-.895-2-2v-4c0-6.627 5.37-12 12-12h7zm11.5 0c.672 0 1.326.075 1.955.218l.971 2.23a1.2 1.2 0 001.231.712l2.386-.262A9.014 9.014 0 0143 32.32l-1.431 1.976a1.2 1.2 0 000 1.408L43 37.68a9.014 9.014 0 01-1.957 3.422l-2.386-.262a1.2 1.2 0 00-1.23.713l-.972 2.23a8.838 8.838 0 01-3.91 0l-.971-2.23a1.2 1.2 0 00-1.232-.713l-2.385.262A9.014 9.014 0 0126 37.68l1.431-1.976a1.2 1.2 0 000-1.408L26 32.32a9.014 9.014 0 011.957-3.422l2.386.262a1.2 1.2 0 001.23-.713l.972-2.23A8.838 8.838 0 0134.5 26zm0 5.727c-1.788 0-3.238 1.466-3.238 3.273 0 1.807 1.45 3.273 3.238 3.273s3.238-1.466 3.238-3.273c0-1.807-1.45-3.273-3.238-3.273zM21 3c5.52 0 10 4.477 10 10s-4.48 10-10 10-10-4.477-10-10S15.48 3 21 3zm0 4c-3.31 0-6 2.686-6 6s2.69 6 6 6 6-2.686 6-6-2.69-6-6-6z" fill="currentColor"/></svg>

src/hooks/app/useDept.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import type { TreeNodeData } from '@arco-design/web-vue'
-import { listDeptTree } from '@/apis'
+import { listDeptTree } from '@/apis/system'
 
 /** 部门模块 */
 export function useDept(options?: { onSuccess?: () => void }) {

src/hooks/app/useDict.ts

@@ -1,5 +1,5 @@
 import { ref, toRefs } from 'vue'
-import { listCommonDict } from '@/apis'
+import { listCommonDict } from '@/apis/system'
 import { useDictStore } from '@/stores'
 
 const pendingRequests = new Map<string, Promise<any>>()

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 { listMenuTree } from '@/apis/system'
+import { listTenantPackageMenu } from '@/apis/tenant/package'
 
 /** 菜单模块 */
 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 }
 }

src/hooks/app/useRole.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { listRoleDict } from '@/apis'
+import { listRoleDict } from '@/apis/system'
 import type { LabelValueState } from '@/types/global'
 
 /** 角色模块 */

src/stores/index.ts

@@ -6,6 +6,7 @@ export * from './modules/route'
 export * from './modules/tabs'
 export * from './modules/dict'
 export * from './modules/user'
+export * from './modules/tenant'
 
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)

src/stores/modules/app.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, reactive, toRefs } from 'vue'
 import { generate, getRgbStr } from '@arco-design/color'
-import { type BasicConfig, listSiteOptionDict } from '@/apis'
+import { type BasicConfig, listSiteOptionDict } from '@/apis/system'
 import { getSettings } from '@/config/setting'
 
 const storeSetup = () => {

src/stores/modules/tenant.ts

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useTenantStore = defineStore('tenant', () => {
+  const tenantEnabled = ref<boolean>(false)
+  const tenantId = ref<string>()
+
+  const setTenantEnable = (status: boolean) => {
+    tenantEnabled.value = status
+  }
+  const setTenantId = (id: string) => {
+    tenantId.value = id
+  }
+
+  // 判断是否需要用户输入租户编码
+  const needInputTenantCode = computed(() => {
+    return tenantEnabled.value && !tenantId.value
+  })
+
+  // 判断租户是否已正确配置
+  const isTenantConfigured = computed(() => {
+    return tenantEnabled.value && !!tenantId.value
+  })
+
+  // 清空租户ID
+  const resetTenantId = () => {
+    tenantId.value = undefined
+  }
+  return {
+    tenantEnabled,
+    tenantId,
+    setTenantEnable,
+    setTenantId,
+    needInputTenantCode,
+    isTenantConfigured,
+    resetTenantId,
+  }
+}, {
+  persist: { paths: ['tenantEnabled', 'tenantId'], storage: localStorage },
+})

src/stores/modules/user.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, reactive, ref } from 'vue'
+import { useTenantStore } from './tenant'
 import { resetRouter } from '@/router'
 import {
   type AccountLoginReq,
@@ -18,6 +19,7 @@ import { clearToken, getToken, setToken } from '@/utils/auth'
 import { resetHasRouteFlag } from '@/router/guard'
 
 const storeSetup = () => {
+  const tenantStore = useTenantStore()
   const userInfo = reactive<UserInfo>({
     id: '',
     username: '',
@@ -41,7 +43,6 @@ const storeSetup = () => {
   const pwdExpiredShow = ref<boolean>(true)
   const roles = ref<string[]>([]) // 当前用户角色
   const permissions = ref<string[]>([]) // 当前角色权限标识集合
-
   // 重置token
   const resetToken = () => {
     token.value = ''
@@ -50,30 +51,34 @@ const storeSetup = () => {
   }
 
   // 登录
-  const accountLogin = async (req: AccountLoginReq) => {
-    const res = await accountLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.ACCOUNT })
+  const accountLogin = async (req: AccountLoginReq, tenantCode?: string) => {
+    const res = await accountLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.ACCOUNT }, tenantCode)
     setToken(res.data.token)
+    tenantStore.setTenantId(res.data.tenantId)
     token.value = res.data.token
   }
 
   // 邮箱登录
-  const emailLogin = async (req: EmailLoginReq) => {
-    const res = await emailLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.EMAIL })
+  const emailLogin = async (req: EmailLoginReq, tenantCode?: string) => {
+    const res = await emailLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.EMAIL }, tenantCode)
     setToken(res.data.token)
+    tenantStore.setTenantId(res.data.tenantId)
     token.value = res.data.token
   }
 
   // 手机号登录
-  const phoneLogin = async (req: PhoneLoginReq) => {
-    const res = await phoneLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.PHONE })
+  const phoneLogin = async (req: PhoneLoginReq, tenantCode?: string) => {
+    const res = await phoneLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.PHONE }, tenantCode)
     setToken(res.data.token)
+    tenantStore.setTenantId(res.data.tenantId)
     token.value = res.data.token
   }
 
   // 三方账号登录
   const socialLogin = async (source: string, req: any) => {
-    const res = await socialLoginApi({ ...req, source, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.SOCIAL })
+    const res: any = await socialLoginApi({ ...req, source, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeConstants.SOCIAL })
     setToken(res.data.token)
+    tenantStore.setTenantId(res.data.tenantId)
     token.value = res.data.token
   }
 
@@ -84,6 +89,7 @@ const storeSetup = () => {
     pwdExpiredShow.value = true
     resetToken()
     resetRouter()
+    tenantStore.resetTenantId()
   }
 
   // 退出登录

src/types/components.d.ts

@@ -56,6 +56,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']

src/utils/http.ts

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import qs from 'query-string'
 import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { useTenantStore } from '@/stores/modules/tenant'
 import { useUserStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import modalErrorWrapper from '@/utils/modal-error-wrapper'
@@ -51,12 +52,16 @@ const handleError = (msg: string) => {
 http.interceptors.request.use(
   (config: AxiosRequestConfig) => {
     const token = getToken()
+    if (!config.headers) {
+      config.headers = {}
+    }
     if (token) {
-      if (!config.headers) {
-        config.headers = {}
-      }
       config.headers.Authorization = `Bearer ${token}`
     }
+    const tenantStore = useTenantStore()
+    if (tenantStore.tenantEnabled && tenantStore.tenantId) {
+      config.headers['X-Tenant-Id'] = tenantStore.tenantId
+    }
     return config
   },
   (error) => Promise.reject(error),

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>