feat: 续期增加展示逻辑 && 选择租户需求开发

src/bk-login/pages/src/language/en.json

@@ -29,5 +29,6 @@
   "请输入密码": "Please enter your password",
   "登录失败": "login failure",
   "当前": "current ",
-  "协同": "co-"
+  "协同": "co-",
+  "隐藏租户": "Hidden tenant"
 }

src/bk-login/pages/src/language/zh.json

@@ -29,5 +29,6 @@
   "请输入密码": "请输入密码",
   "登录失败": "登录失败",
   "当前": "当前",
-  "协同": "协同"
+  "协同": "协同",
+  "隐藏租户": "隐藏租户"
 }

src/bk-login/pages/src/views/home.vue

@@ -10,25 +10,26 @@
 
       <bk-form-item>
         <bk-select
+          ref="selectRef"
           size="large"
           filterable
           input-search
           allow-create
           :placeholder="$t('请选择租户或输入租户ID')"
           @change="handleTenantChange">
           <bk-option
-            v-for="item in allTenantList"
+            v-for="item in showOptions"
             class="tenant-option"
             :id="item.id"
             :key="item.id"
-            :name="item.name">
-            {{ item.name }}
+            :name="`${item.name} (${item.id})`">
+              <div class="options-show">
+                <span>{{ `${item.name} (${item.id})` }}</span>
+                <bk-tag v-if="inputTenant?.name" size="small">{{ $t('隐藏租户') }}</bk-tag>
+              </div>
           </bk-option>
         </bk-select>
-        <span v-if="inputTenant !== null">
-          <span v-if="inputTenant?.name">{{ `${$t('匹配到以下租户: ')} ${inputTenant?.name}`}}</span>
-          <span v-else>{{ $t('暂无匹配租户') }}</span>
-        </span>
+        <span v-if="inputTenant !== null && !inputTenant?.name">{{ $t('暂无匹配租户') }}</span>
       </bk-form-item>
 
       <bk-form-item>
@@ -96,7 +97,8 @@
                 v-for="item in storageTenantList"
                 :key="item.id"
                 @click="handleChangeStorageTenant(item)">
-                {{ item.name }} / {{ getUserGroupName(item) }}
+                <span class="item-name">{{ item.name }} / {{ getUserGroupName(item) }}</span>
+                <close class="delete-icon" @click.stop="deleteStorageTenant(item)"/>
               </div>
               <div class="add" @click="addTenant">{{ $t('其他租户或用户来源') }}</div>
             </section>
@@ -166,7 +168,7 @@
 
 <script setup lang="ts">
 import { getGlobalSettings, getIdpList, getTenantList } from '@/http/api';
-import { Transfer } from 'bkui-vue/lib/icon';
+import { Transfer, Close} from 'bkui-vue/lib/icon';
 import { type Ref, onBeforeMount, ref, watch, computed } from 'vue';
 import Password from './components/password.vue';
 import Protocol from './components/protocol.vue';
@@ -218,7 +220,7 @@ const inputTenant = ref(null);
  * @param id 租户ID
  */
 const handleTenantChange = async (id: string) => {
-  // 清空时清空输入租户名称
+  // 清空时清空输入租户名称 
   if (!id) {
     inputTenant.value = null;
     return;
@@ -449,6 +451,26 @@ const getUserGroupName = (tenant: Tenant) => {
  */
 const isAdminShow = ref(false);
 
+/**
+ * 删除快捷切换项
+ */
+const deleteStorageTenant = (item: any) => {
+  const obj = storageTenantList.value.find(i => i.id === item.id);
+  tenantMap.value = Object.fromEntries(Object.entries(tenantMap.value).filter(([key]) => key !== obj.id));
+  localStorage.setItem('tenantMap', JSON.stringify(tenantMap.value));
+}
+
+const selectRef = ref()
+
+/**
+ * 下拉框中的值展示
+ */
+
+const showOptions = computed(() => {
+  const options = inputTenant.value?.name ? [inputTenant.value]:allTenantList.value
+  inputTenant.value?.name && selectRef.value?.showPopover()
+  return options
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -605,6 +627,7 @@ const isAdminShow = ref(false);
   min-width: 120px;
 
   .item {
+    position: relative;
     line-height: 36px;
     cursor: pointer;
     margin: 0 -14px;
@@ -613,6 +636,19 @@ const isAdminShow = ref(false);
     &:hover {
       color: #3A84FF;
       background: #F5F6F9;
+      .delete-icon {
+        display: inline-block !important;
+      }
+    }
+    .item-name {
+      margin-right: 10px;
+    }
+    .delete-icon {
+      color: #d9dadf;
+      display: none !important;
+      cursor: pointer;
+      position: absolute;
+      right: 5px;
     }
   }
 
@@ -674,4 +710,10 @@ const isAdminShow = ref(false);
   color: #63656E;
   margin-bottom: 24px;
 }
+.options-show {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
 </style>

src/pages/src/app.vue

@@ -5,14 +5,15 @@ import zhCn from 'bkui-vue/dist/locale/zh-cn.esm';
 import { computed, ref, watch  } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { getPlatformConfig, setDocumentTitle, setShortcutIcon } from '@blueking/platform-config';
+
 import HeaderBox from './views/Header.vue';
 
 import { currentUser } from '@/http';
 import { locale as i18nLocal, t } from '@/language/index';
-import { useUser, platformConfig} from '@/store';
+import { platformConfig, useUser } from '@/store';
 import Password from '@/views/reset-password/index.vue';
 import ResetPassword from '@/views/reset-password/newPassword.vue';
-import { getPlatformConfig, setShortcutIcon, setDocumentTitle} from '@blueking/platform-config';
 
 const route = useRoute();
 
@@ -50,24 +51,24 @@ const localeData = {
 const locale = computed(() => localeData[currentLang.value]);
 
 const platformConfigData = platformConfig();
-const url = `${window.BK_SHARED_RES_URL}/bk_user/base.js`  // url 远程配置文件地址
+const url = `${window.BK_SHARED_RES_URL}/bk_user/base.js`;  // url 远程配置文件地址
 const defaults = {
-    name: '蓝鲸用户管理',
-    nameEn: 'BK USER',
-    brandName: '腾讯蓝鲸智云',
-    brandNameEn: 'BlueKing',
-    appLogo: '/static/images/logo.png',
-    favicon: '/static/favicon.ico',
-    version: '3.0',
-  }
+  name: '蓝鲸用户管理',
+  nameEn: 'BK USER',
+  brandName: '腾讯蓝鲸智云',
+  brandNameEn: 'BlueKing',
+  appLogo: 'defaultsAppLogo',
+  favicon: '/static/favicon.ico',
+  version: '3.0',
+};
 
-const getConfigData = async() => {
-    const config =  await getPlatformConfig(url, defaults)
-    setShortcutIcon(config.favicon); // 设置favicon
-    setDocumentTitle(config.i18n); // 设置document.title
-    platformConfigData.update(config);
-  }
- getConfigData()
+const getConfigData = async () => {
+  const config =  await getPlatformConfig(url, defaults);
+  setShortcutIcon(config.favicon); // 设置favicon
+  setDocumentTitle(config.i18n); // 设置document.title
+  platformConfigData.update(config);
+};
+getConfigData();
 </script>
 
 <template>

src/pages/src/css/index.css

@@ -80,3 +80,7 @@
   }
 
 }
+
+.message-fix-fixed .overview .tools .tool.fix {
+  position: static;
+}

src/pages/src/http/fetch/index.ts

@@ -5,6 +5,7 @@ import qs from 'query-string';
 
 import { showLoginModal } from '@blueking/login-modal';
 
+import '../../css/index.css';
 import { getLoginUrl } from '@/common/auth';
 
 type Methods = 'delete' | 'get' | 'head' | 'options' | 'post' | 'put' | 'patch';
@@ -85,7 +86,7 @@ const handleResponse = <T>({
 
 const handleReject = (error: AxiosError, config: Record<string, any>) => {
   const { status } = error.response;
-  const { message, data } = error.response.data.error;
+  const { message, data, code, details } = error.response.data.error;
 
   if (status === 401) {
     if (error.config.url === '/api/v1/web/basic/current-user/') {
@@ -104,7 +105,16 @@ const handleReject = (error: AxiosError, config: Record<string, any>) => {
 
   // 全局捕获错误给出提示
   if (config.globalError) {
-    Message({ theme: 'error', message, delay: 10000 });
+    details[0].message = JSON.parse(details[0].message);
+    const config = {
+      overview: '',
+      code,
+      suggestion: message,
+      details: details[0],
+      assistant: 'wxwork://message/?username=BK助手',
+
+    };
+    Message({ theme: 'error', message: config, delay: 10000,  extCls: 'message-fix-fixed' });
   }
 
   return Promise.reject(error);

src/pages/src/views/Header.vue

@@ -16,7 +16,7 @@
           class="cursor-pointer"
           @click="onGoBack"
         >
-          <div class="w-[28px]"><img :src="appLogo"/></div>
+          <div class="w-[28px]"><img :src="appLogo" /></div>
           <span class="title-desc">{{ appName}}</span>
         </div>
         <div class="tenant-style" v-if="!isTenant && role !== 'natural_user'">
@@ -138,13 +138,15 @@ import { useRoute } from 'vue-router';
 import NoticeComponent from '@blueking/notice-component';
 import ReleaseNote from '@blueking/release-note';
 
+import logo from '../../static/images/logo.png';
+
 import '@blueking/notice-component/dist/style.css';
 import '@blueking/release-note/vue3/vue3.css';
 import { logout } from '@/common/auth';
 import { getTenantInfo, getVersionLogs } from '@/http';
 import I18n, { t } from '@/language/index';
 import router from '@/router';
-import { useUser, platformConfig} from '@/store';
+import { platformConfig, useUser } from '@/store';
 import { logoConvert } from '@/utils';
 
 const state = reactive({
@@ -154,11 +156,11 @@ const state = reactive({
 });
 
 const userStore = useUser();
-const  platformConfigData = platformConfig()
+const  platformConfigData = platformConfig();
 const headerNav = ref([]);
 const role = computed(() => userStore.user.role);
 const appName = computed(() => platformConfigData.i18n.name);
-const appLogo = computed(() => platformConfigData.appLogo);
+const appLogo = computed(() => (platformConfigData.appLogo === 'defaultsAppLogo' ? logo : platformConfigData.appLogo));
 const userInfo = computed(() => {
   const baseNav = [
     { name: t('组织架构'), path: 'organization' },
@@ -167,9 +169,9 @@ const userInfo = computed(() => {
   ];
 
   // 根据变量开启或隐藏虚拟账号页面
-  if (window.ENABLE_VIRTUAL_USER === 'False') { 
+  if (window.ENABLE_VIRTUAL_USER === 'False') {
     baseNav?.splice(1, 1);
-}
+  }
   if (role.value === 'super_manager' && !isTenant.value) {
     headerNav.value = baseNav;
   } else if (role.value === 'tenant_manager') {