feat(frontend): 添加全局及业务下的资源标签管理功能 TencentBlueKing#7285

# Reviewed, transaction id: 22784
royalpioneer · Nov 4, 2024 · fe3c2bf · fe3c2bf
1 parent 45b92b5
commit fe3c2bf
Show file tree

Hide file tree

Showing 84 changed files with 7,580 additions and 4,069 deletions.
diff --git a/dbm-ui/frontend/lib/bk-icon/demo.html b/dbm-ui/frontend/lib/bk-icon/demo.html
@@ -117,6 +117,10 @@ <h2 class="page-title">
     </div>
     <section class="tab-content single-color active" data-type="singleColor">
       <ul class="icon-list">
+        <li class="icon-item" title="tags">
+          <span class="icon bk-dbm-icon db-icon-tags"></span>
+          <p class="icon-text">tags</p>
+        </li>
         <li class="icon-item" title="check-circle-fill">
           <span class="icon bk-dbm-icon db-icon-check-circle-fill"></span>
           <p class="icon-text">check-circle-fill</p>
@@ -749,6 +753,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-backup-2"></span>
           <p class="icon-text">backup-2</p>
         </li>
+        <li class="icon-item" title="loading-tubiao">
+          <span class="icon bk-dbm-icon db-icon-loading-tubiao"></span>
+          <p class="icon-text">loading-tubiao</p>
+        </li>
         <li class="icon-item" title="host-select">
           <span class="icon bk-dbm-icon db-icon-host-select"></span>
           <p class="icon-text">host-select</p>
@@ -829,6 +837,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-dirty-host"></span>
           <p class="icon-text">dirty-host</p>
         </li>
+        <li class="icon-item" title="tag-3">
+          <span class="icon bk-dbm-icon db-icon-tag-3"></span>
+          <p class="icon-text">tag-3</p>
+        </li>
         <li class="icon-item" title="saoba">
           <span class="icon bk-dbm-icon db-icon-saoba"></span>
           <p class="icon-text">saoba</p>
@@ -990,6 +1002,12 @@ <h3 class="describe-title">如何使用</h3>
     </section>
     <section class="tab-content multiple-color"  data-type="multipleColor">
       <ul class="icon-list">
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-tags"></use>
+          </svg>
+          <p class="icon-text">tags</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-check-circle-fill"></use>
@@ -1938,6 +1956,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">backup-2</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-loading-tubiao"></use>
+          </svg>
+          <p class="icon-text">loading-tubiao</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-host-select"></use>
@@ -2058,6 +2082,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">dirty-host</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-tag-3"></use>
+          </svg>
+          <p class="icon-text">tag-3</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-saoba"></use>

diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.eot b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.eot
diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.ttf b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.ttf
diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.woff b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.woff
diff --git a/dbm-ui/frontend/src/components/disk-pop-info/DiskPopInfo.vue b/dbm-ui/frontend/src/components/disk-pop-info/DiskPopInfo.vue
@@ -2,7 +2,7 @@
   <BkPopover
     :popover-delay="[0, 300]"
     theme="light"
-    trigger="hover"
+    :trigger="trigger"
     :width="430">
     <span style="padding: 0 10px">
       <slot />
@@ -26,9 +26,12 @@
 
   interface Props {
     data: DbResourceModel['storage_device'];
+    trigger?: 'hover' | 'click' | 'manual';
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    trigger: 'hover',
+  });
 
   const { t } = useI18n();
 

diff --git a/dbm-ui/frontend/src/layout/Index.vue b/dbm-ui/frontend/src/layout/Index.vue
@@ -138,6 +138,8 @@
     ],
     [menuEnum.observableManage]: ['DBHASwitchEvents', 'inspectionManage'],
     [menuEnum.configManage]: [
+      'BizResourcePool',
+      'BizResourceTag',
       'DbConfigure',
       'DBMonitorStrategy',
       'DBMonitorAlarmGroup',

diff --git a/dbm-ui/frontend/src/layout/components/ConfigManage.vue b/dbm-ui/frontend/src/layout/components/ConfigManage.vue
@@ -9,6 +9,36 @@
         :active-key="currentActiveKey"
         :opened-keys="[parentKey]"
         @click="handleMenuChange">
+        <BkMenuGroup :name="t('资源管理')">
+          <BkMenuItem
+            key="BizResourcePool"
+            v-db-console="'bizConfigManage.businessResourcePool'">
+            <template #icon>
+              <DbIcon
+                svg
+                type="list" />
+            </template>
+            <span
+              v-overflow-tips.right
+              class="text-overflow">
+              {{ t('资源池') }}
+            </span>
+          </BkMenuItem>
+          <BkMenuItem
+            key="BizResourceTag"
+            v-db-console="'bizConfigManage.businessResourceTag'">
+            <template #icon>
+              <DbIcon
+                svg
+                type="tag-3" />
+            </template>
+            <span
+              v-overflow-tips.right
+              class="text-overflow">
+              {{ t('资源标签') }}
+            </span>
+          </BkMenuItem>
+        </BkMenuGroup>
         <BkMenuGroup :name="t('业务配置')">
           <BkMenuItem
             key="DbConfigure"
@@ -99,7 +129,7 @@
     parentKey,
     key: currentActiveKey,
     routeLocation: handleMenuChange,
-  } = useActiveKey(menuRef as Ref<InstanceType<typeof Menu>>, 'DbConfigure');
+  } = useActiveKey(menuRef as Ref<InstanceType<typeof Menu>>, 'BizResourcePool');
 
   const styles = useMenuStyles(menuBoxRef);
 </script>
diff --git a/dbm-ui/frontend/src/layout/components/ResourceManage.vue b/dbm-ui/frontend/src/layout/components/ResourceManage.vue
@@ -41,6 +41,18 @@
           {{ t('污点主机处理') }}
         </span>
       </BkMenuItem>
+      <BkMenuItem
+        key="resourceTagsManagement"
+        v-db-console="'resourceManage.resourceTagsManagement'">
+        <template #icon>
+          <DbIcon type="tag-3" />
+        </template>
+        <span
+          v-overflow-tips.right
+          class="text-overflow">
+          {{ t('资源标签管理') }}
+        </span>
+      </BkMenuItem>
       <BkMenuItem
         key="resourcePoolOperationRecord"
         v-db-console="'resourceManage.resourceOperationRecord'">