feat: 多租户前端逻辑 (#1145)

src/dashboard-front/.bk.development.env

@@ -15,7 +15,8 @@ BK_LOGIN_URL = ''
 BK_APP_HOST = 'dev-apigw.example.com'
 
 # 开发 port
-BK_APP_PORT = 8888
+#BK_APP_PORT = 8888
+BK_APP_PORT = 80
 
 BK_DASHBOARD_CSRF_COOKIE_NAME  = 'bk_apigw_dashboard_csrftoken'
 

src/dashboard-front/.gitignore

@@ -78,3 +78,4 @@ dist/
 .prettierrc
 
 bkcodeai.json
+.bk.local.tenant.env

src/dashboard-front/bk.config.js

@@ -15,11 +15,13 @@ module.exports = {
     return {
       devServer: {
         setupMiddlewares: mockServer,
-        host: 'dev-t.paas3-dev.bktencent.com',
+        // host: 'dev-t.paas3-dev.bktencent.com',
+        host: 'dev-t.paasv3-dev.woa.com',
         client: {
           overlay: false,
         },
-        https: !process.env.BK_HTTPS,
+        // https: !process.env.BK_HTTPS,
+        https: false,
       },
     };
   },

src/dashboard-front/src/app.vue

@@ -205,7 +205,7 @@ const headerList = computed(() => ([
     name: t('组件管理'),
     id: 2,
     url: 'componentsMain',
-    enabled: user.featureFlags?.MENU_ITEM_ESB_API,
+    enabled: user.featureFlags?.MENU_ITEM_ESB_API && !user.featureFlags?.ENABLE_MULTI_TENANT_MODE,
     link: '',
   },
   {

src/dashboard-front/src/components/user-info.vue

@@ -19,7 +19,7 @@ const userInfo = ref(user.user);
     disable-outside-click
   >
     <div class="user-name">
-      {{ userInfo.username }}
+      {{ userInfo.display_name || userInfo.username }}
       <angle-down-line class="pl5" />
     </div>
     <template #content>

src/dashboard-front/src/css/common.css

@@ -355,6 +355,9 @@
 .pt20 {
   padding-top: 20px !important;
 }
+.pt24 {
+  padding-top: 24px !important;
+}
 .pt25 {
   padding-top: 25px !important;
 }

src/dashboard-front/src/language/lang.ts

@@ -1674,6 +1674,10 @@ const lang: ILANG = {
   '默认分类': ['Default'],
   '请选择有效的资源名称': ['Please choose a valid resource name'],
   '表单校验失败': ['Form Validation Failed'],
+  '租户模式': ['Tenant Mode'],
+  '租户 ID': ['Tenant ID'],
+  '全租户（Global）': ['Global Tenant (Global)'],
+  '单租户（Single）': ['Single Tenant (Single)'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

src/dashboard-front/src/store/user.ts

@@ -8,7 +8,9 @@ export const useUser = defineStore('user', {
   } => ({
     user: {
       username: '',
+      display_name: '',
       avatar_url: '',
+      tenant_id: '',
     },
     featureFlags: {},
   }),
@@ -18,6 +20,7 @@ export const useUser = defineStore('user', {
     },
     setFeatureFlags(data: IFeatureFlags) {
       this.featureFlags = data;
+      // this.featureFlags.ENABLE_MULTI_TENANT_MODE = true;
     },
   },
 });

src/dashboard-front/src/types/store.ts

@@ -1,6 +1,8 @@
 export interface IUser {
   username: string;
+  display_name?: string;
   avatar_url: string;
+  tenant_id: string;
 }
 
 export interface IFeatureFlags {

src/dashboard-front/src/views/apiDocs/components/doc-detail-side-content.vue

@@ -26,6 +26,14 @@
           <header class="content-title">{{ t('网关负责人') }}</header>
           <main class="content-main">{{ basics.maintainers.join(', ') }}</main>
         </article>
+        <article>
+          <header class="content-title">{{ t('租户模式') }}</header>
+          <main class="content-main">{{ basics.tenant_mode }}</main>
+        </article>
+        <article>
+          <header class="content-title">{{ t('租户 ID') }}</header>
+          <main class="content-main">{{ basics.tenant_id || '--' }}</main>
+        </article>
         <article>
           <header class="content-title">{{ t('网关访问地址') }}</header>
           <main class="content-main">{{ basics.api_url }}</main>

src/dashboard-front/src/views/apiDocs/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="docs-main" ref="docsMain">
     <!--  顶部 网关 / 组件 Tab  -->
-    <header class="page-tabs">
+    <header class="page-tabs" v-if="!user.featureFlags?.ENABLE_MULTI_TENANT_MODE">
       <nav class="tabs-group">
         <section
           class="page-tab"
@@ -18,7 +18,7 @@
       </nav>
     </header>
     <!--  正文  -->
-    <main class="docs-main-content">
+    <main class="docs-main-content" :class="{ 'pt24': user.featureFlags?.ENABLE_MULTI_TENANT_MODE }">
       <!--  当选中 网关API文档 时  -->
       <div v-if="curTab === 'apigw'" class="content-of-apigw">
         <!--  搜索栏和 SDK使用说明  -->
@@ -58,6 +58,26 @@
                   </bk-tag>
                 </template>
               </bk-table-column>
+              <template v-if="user.featureFlags?.ENABLE_MULTI_TENANT_MODE">
+                <bk-table-column
+                  :label="t('租户模式')"
+                  field="tenant_mode"
+                  :width="120"
+                >
+                  <template #default="{ row }">
+                    {{ row.tenant_mode || '--' }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('租户 ID')"
+                  field="tenant_id"
+                  :width="120"
+                >
+                  <template #default="{ row }">
+                    {{ row.tenant_id || '--' }}
+                  </template>
+                </bk-table-column>
+              </template>
               <bk-table-column
                 :label="t('网关描述')"
                 field="description"
@@ -262,10 +282,12 @@ import {
 } from '@/views/apiDocs/types';
 import { AngleUpFill } from 'bkui-vue/lib/icon';
 import { useTemplateRefsList } from '@vueuse/core';
+import { useUser } from '@/store';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const user = useUser();
 
 const filterData = ref({ keyword: '' });
 
@@ -401,6 +423,11 @@ const isActiveNavPanel = (panelName: string) => {
 
 onBeforeMount(() => {
   const { params } = route;
+  // 如果是多租户模式，直接跳转到网关API文档
+  if (user.featureFlags?.ENABLE_MULTI_TENANT_MODE) {
+    curTab.value = 'apigw';
+    return;
+  }
   // 记录返回到此页时选中的 tab
   curTab.value = params.curTab as TabType || 'apigw';
 });

src/dashboard-front/src/views/apiDocs/types.d.ts

@@ -16,6 +16,8 @@ interface IApiGatewayBasics {
   is_official: boolean;
   api_url: string;
   sdks?: IApiGatewaySdk[];
+  tenant_mode?: string;
+  tenant_id?: string;
 }
 
 interface IApiGatewaySdkDoc {

src/dashboard-front/src/views/basic-info/common/type.ts

@@ -17,6 +17,8 @@ export interface BasicInfoParams {
   public_key: string
   is_official: boolean
   publish_validate_msg?: string
+  tenant_mode?: string
+  tenant_id?: string
 }
 
 export interface DialogParams {

src/dashboard-front/src/views/basic-info/index.vue

@@ -71,6 +71,21 @@
         <div class="basic-info-detail-item">
           <div class="detail-item-title">{{ t('基础信息') }}</div>
           <div class="detail-item-content">
+            <template v-if="user.featureFlags?.ENABLE_MULTI_TENANT_MODE">
+              <div class="detail-item-content-item">
+                <div class="label">{{ `${t('租户模式')}：` }}</div>
+                <div class="value">
+                  <span>{{ basicInfoData.tenant_mode || '是' }}</span>
+                </div>
+              </div>
+              <div class="detail-item-content-item">
+                <div class="label">{{ `${t('租户 ID')}：` }}</div>
+                <div class="value url">
+                  <span>{{ basicInfoData.tenant_id || '--' }}</span>
+                  <i class="apigateway-icon icon-ag-copy-info" @click.self.stop="copy(basicInfoData.tenant_id)"></i>
+                </div>
+              </div>
+            </template>
             <div class="detail-item-content-item">
               <div class="label">{{ `${t('是否公开')}：` }}</div>
               <div class="value">
@@ -367,6 +382,8 @@ const basicInfoData = ref<BasicInfoParams>({
   developers: [],
   is_public: true,
   is_official: false,
+  tenant_mode: '',
+  tenant_id: '',
 });
 const basicInfoDetailData = ref(_.cloneDeep(basicInfoData.value));
 const delApigwDialog = ref<DialogParams>({

src/dashboard-front/src/views/home.vue

@@ -30,9 +30,17 @@
     <div class="table-container" v-bkloading="{ loading: isLoading, opacity: 1, color: '#f5f7fb' }">
       <section v-if="gatewaysList.length">
         <div class="table-header flex-row">
-          <div class="flex-1 of3">{{ t('网关名') }}</div>
+          <div class="flex-1" :class="user.featureFlags?.ENABLE_MULTI_TENANT_MODE ? 'of2' : 'of3'">
+            {{ t('网关名') }}
+          </div>
+          <template v-if="user.featureFlags?.ENABLE_MULTI_TENANT_MODE">
+            <div class="flex-1 of1">{{ t('租户模式') }}</div>
+            <div class="flex-1 of1">{{ t('租户 ID') }}</div>
+          </template>
           <div class="flex-1 of1">{{ t('创建者') }}</div>
-          <div class="flex-1 of3">{{ t('环境列表') }}</div>
+          <div class="flex-1" :class="user.featureFlags?.ENABLE_MULTI_TENANT_MODE ? 'of2' : 'of3'">
+            {{ t('环境列表') }}
+          </div>
           <div class="flex-1 of1 text-c">{{ t('资源数量') }}</div>
           <div class="flex-1 of2">{{ t('操作') }}</div>
         </div>
@@ -41,7 +49,10 @@
             class="table-item flex-row align-items-center"
             v-for="item in gatewaysList" :key="item.id"
             :class="item.is24HoursAgo ? '' : 'newly-item'">
-            <div class="flex-1 flex-row align-items-center  of3">
+            <div
+              class="flex-1 flex-row align-items-center"
+              :class="user.featureFlags?.ENABLE_MULTI_TENANT_MODE ? 'of2' : 'of3'"
+            >
               <div
                 class="name-logo mr10" :class="item.status ? '' : 'deact'"
                 @click="handleGoPage('apigwResource', item.id)">
@@ -55,8 +66,14 @@
               <bk-tag theme="info" v-if="item.is_official">{{ t('官方') }}</bk-tag>
               <bk-tag v-if="item.status === 0">{{ t('已停用') }}</bk-tag>
             </div>
+            <template v-if="user.featureFlags?.ENABLE_MULTI_TENANT_MODE">
+              <div class="flex-1 of1">
+                {{ item.tenant_mode || '是' }}
+              </div>
+              <div class="flex-1 of1">{{ item.tenant_id || '--' }}</div>
+            </template>
             <div class="flex-1 of1">{{ item.created_by }}</div>
-            <div class="flex-1 of3 env">
+            <div class="flex-1 env" :class="user.featureFlags?.ENABLE_MULTI_TENANT_MODE ? 'of2' : 'of3'">
               <div class="flex-row">
                 <span
                   v-for="(envItem, index) in item.stages" :key="envItem.id">
@@ -199,6 +216,38 @@
           <bk-switcher theme="primary" v-model="formData.is_public" />
           <span class="common-form-tips">{{ $t('公开，则用户可查看资源文档、申请资源权限；不公开，则网关对用户隐藏') }}</span>
         </bk-form-item>
+        <template v-if="user.featureFlags?.ENABLE_MULTI_TENANT_MODE">
+          <template v-if="user.user.tenant_id === 'system'">
+            <bk-form-item
+              :label="t('租户模式')"
+              property="tenant_mode"
+            >
+              <bk-select
+                v-model="formData.tenant_mode"
+                :clearable="false"
+                :filterable="false"
+                :input-search="false"
+                @change="handleTenantModeChange"
+              >
+                <bk-option
+                  value="global"
+                  :label="t('全租户（Global）')"
+                />
+                <bk-option
+                  value="single"
+                  :label="t('单租户（Single）')"
+                />
+              </bk-select>
+            </bk-form-item>
+            <bk-form-item
+              v-if="formData.tenant_mode === 'single'"
+              :label="t('租户 ID')"
+              property="tenant_id"
+            >
+              <bk-input v-model="formData.tenant_id" disabled />
+            </bk-form-item>
+          </template>
+        </template>
       </bk-form>
     </bk-dialog>
   </div>
@@ -244,6 +293,8 @@ interface IinitDialogData {
   maintainers: string[]
   description?: string
   is_public: boolean
+  tenant_mode: string
+  tenant_id: string
 }
 
 // const globalProperties = useGetGlobalProperties();
@@ -255,6 +306,8 @@ const initDialogData: IinitDialogData = {
   maintainers: [user.user.username],   // 默认当前填入当前用户
   description: '',
   is_public: true,
+  tenant_mode: 'global',
+  tenant_id: '',
 };
 
 const tableEmptyConf = ref<{keyword: string, isAbnormal: boolean}>({
@@ -346,6 +399,28 @@ watch(() => dataList.value, (val: any[]) => {
   gatewaysList.value = handleGatewaysList(val);
 });
 
+watch(() => user.featureFlags?.ENABLE_MULTI_TENANT_MODE, (value) => {
+  if (value) {
+    if (user.user.tenant_id === 'system') {
+      formData.value.tenant_mode = 'global';
+      formData.value.tenant_id = '';
+    } else {
+      formData.value.tenant_mode = 'single';
+      formData.value.tenant_id = user.user.tenant_id;
+    }
+  } else {
+    formData.value.tenant_mode = 'single';
+    formData.value.tenant_id = 'default';
+  }
+}, { immediate: true });
+
+const handleTenantModeChange = (tenant_mode: string) => {
+  if (tenant_mode === 'global') {
+    formData.value.tenant_id = '';
+  } else if (tenant_mode === 'single') {
+    formData.value.tenant_id = user.user.tenant_id || 'system';
+  }
+};
 
 // 页面初始化
 const init = async () => {