feat(frontend): 统一业务选择框 #9905

dbm-ui/frontend/src/components/db-app-select/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <AppSelect
     v-bind="{ ...attrs, ...props }"
-    :data="withFavorBizList"
+    :data="dataList"
     :generate-key="(item: IAppItem) => item.bk_biz_id"
     :generate-name="(item: IAppItem) => item.display_name"
     :search-extension-method="searchExtensionMethod"
@@ -25,6 +25,21 @@
         <span style="color: #979ba5">
           (#{{ data.bk_biz_id }}{{ data.english_name ? `, ${data.english_name}` : '' }})
         </span>
+        <template
+          v-if="data.bk_biz_id !== publicBiz.bk_biz_id"
+          #append>
+          <DbIcon
+            v-if="favorBizIdMap[data.bk_biz_id]"
+            class="unfavor-btn ml-4"
+            style="color: #ffb848"
+            type="star-fill"
+            @click.stop="handleUnfavor(data.bk_biz_id)" />
+          <DbIcon
+            v-else
+            class="favor-btn ml-4"
+            type="star"
+            @click.stop="handleFavor(data.bk_biz_id)" />
+        </template>
       </TextOverflowLayout>
     </template>
   </AppSelect>
@@ -38,7 +53,7 @@
 
   import { getBizs } from '@services/source/cmdb';
 
-  import { useUserProfile } from '@stores';
+  import { useGlobalBizs, useUserProfile } from '@stores';
 
   import { UserPersonalSettings } from '@common/const';
 
@@ -52,11 +67,14 @@
 
   interface Props {
     list: IAppItem[];
+    showPublicBiz?: boolean;
   }
 
   type Emits = (e: 'change', value?: IAppItem) => void;
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    showPublicBiz: true,
+  });
 
   const emits = defineEmits<Emits>();
 
@@ -68,10 +86,18 @@
 
   const attrs = useAttrs();
   const userProfile = useUserProfile();
+  const { publicBiz } = useGlobalBizs();
 
-  const favorBizIdMap = makeMap(userProfile.profile[UserPersonalSettings.APP_FAVOR] || []);
+  const favorBizIdMap = shallowRef(makeMap(userProfile.profile[UserPersonalSettings.APP_FAVOR] || []));
 
-  const withFavorBizList = computed(() => _.sortBy(props.list, (item) => favorBizIdMap[item.bk_biz_id]));
+  const dataList = computed(() => {
+    const sortedList = _.sortBy(props.list, (item) => favorBizIdMap.value[item.bk_biz_id]);
+
+    if (props.showPublicBiz) {
+      sortedList.unshift(publicBiz);
+    }
+    return sortedList;
+  });
 
   const searchExtensionMethod = (data: IAppItem, keyword: string) => {
     const rule = new RegExp(encodeRegexp(keyword), 'i');
@@ -83,6 +109,28 @@
     modelValue.value = appInfo;
     emits('change', appInfo);
   };
+
+  const handleUnfavor = (bizId: number) => {
+    const lastFavorBizIdMap = { ...favorBizIdMap.value };
+    delete lastFavorBizIdMap[bizId];
+    favorBizIdMap.value = lastFavorBizIdMap;
+
+    userProfile.updateProfile({
+      label: UserPersonalSettings.APP_FAVOR,
+      values: Object.keys(lastFavorBizIdMap),
+    });
+  };
+
+  const handleFavor = (bizId: number) => {
+    favorBizIdMap.value = {
+      ...favorBizIdMap.value,
+      [bizId]: true,
+    };
+    userProfile.updateProfile({
+      label: UserPersonalSettings.APP_FAVOR,
+      values: Object.keys(favorBizIdMap.value),
+    });
+  };
 </script>
 
 <style lang="less">
@@ -98,9 +146,26 @@
 
   .tippy-box[data-theme='bk-app-select-menu'] {
     .db-select-no-permission-item {
+      width: 100%;
+
+      .layout-content {
+        width: 100%;
+      }
+
       & span {
         display: inline !important;
       }
+
+      &:hover {
+        .favor-btn {
+          opacity: 100%;
+        }
+      }
+
+      .favor-btn {
+        opacity: 0%;
+        transition: all 0.1s;
+      }
     }
   }
 </style>

dbm-ui/frontend/src/stores/globalBizs.ts

@@ -51,6 +51,7 @@ export const useGlobalBizs = defineStore('GlobalBizs', {
       return [PUBLIC_BIZ_INFO].concat(state.bizs);
     },
     currentBizInfo: (state): BizItem | undefined => state.bizs.find((item) => item.bk_biz_id === state.currentBizId),
+    publicBiz: () => PUBLIC_BIZ_INFO,
   },
   actions: {
     changeBizId(id: number) {

dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/batch-assign/components/FormPanel.vue

@@ -37,8 +37,9 @@
         required>
         <DbAppSelect
           :disabled="isBusiness"
-          :list="globalBizsStore.bizListWithPublic"
+          :list="globalBizsStore.bizs"
           :model-value="currentApp"
+          :show-public-biz="!isBusiness"
           @change="handleAppChange">
         </DbAppSelect>
       </BkFormItem>

dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/import-host/components/FormPanel.vue

@@ -99,8 +99,9 @@
           required>
           <DbAppSelect
             :disabled="isBusiness"
-            :list="globalBizsStore.bizListWithPublic"
+            :list="globalBizsStore.bizs"
             :model-value="currentApp"
+            :show-public-biz="!isBusiness"
             @change="handleAppChange">
           </DbAppSelect>
         </BkFormItem>

dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/search-box/components/com-factory/components/ForBiz.vue

@@ -14,7 +14,7 @@
 <template>
   <DbAppSelect
     clearable
-    :list="globalBizsStore.bizListWithPublic"
+    :list="globalBizsStore.bizs"
     :model-value="currentApp"
     @change="handleChange">
   </DbAppSelect>

dbm-ui/frontend/src/views/resource-manage/pool/components/summary-view/components/list/components/search-box/Index.vue

@@ -6,7 +6,7 @@
       :label="t('所属业务')"
       required>
       <DbAppSelect
-        :list="globalBizsStore.bizListWithPublic"
+        :list="globalBizsStore.bizs"
         :model-value="currentApp"
         @change="handleAppChange">
       </DbAppSelect>

dbm-ui/frontend/src/views/tag-manage/Index.vue

@@ -24,7 +24,7 @@
         </BkTag>
         <span class="title-divider">|</span>
         <DbAppSelect
-          :list="bizListWithPublic"
+          :list="bizs"
           :model-value="curBiz"
           type="text"
           @change="handleBizChange">
@@ -109,7 +109,7 @@
   type IAppItem = ServiceReturnType<typeof getBizs>[number];
 
   const { t } = useI18n();
-  const { bizListWithPublic, currentBizInfo } = useGlobalBizs();
+  const { bizs, currentBizInfo } = useGlobalBizs();
   const route = useRoute();
   const router = useRouter();