feat: 闲置应用看板 (#1432)

webfe/package_vue/src/language/lang/en.js

@@ -1509,7 +1509,6 @@ export default {
   查看更多应用: 'View more APP',
   资源使用量: 'Resource usage',
   对象储存: 'Object Storag',
-  了解我们的服务: 'Discover our services',
   我的应用分布: 'My APP distribution',
   '单位（个）': 'Unit (pcs)',
   '访问量 Top 5 (最近 30 天)': 'Top 5 visits (last 30 days)',
@@ -2652,4 +2651,9 @@ export default {
   '点击“开始迁移”后，应用服务将不会受到任何影响': 'After clicking "Start Migration", the application services will not be affected',
   '可搜索应用代码、环境变量中是否有以下内容来确认': 'You can search the application code and environment variables for the following content to confirm',
   '将您的自定义域名解析到表格中的 IP': 'Map your custom domain to the IP in the table',
+  闲置应用: 'Idle Application',
+  闲置模块: 'Idle Module',
+  '更新于 {t}之前': 'Updated before {t}',
+  资源配额: 'Resource Quota',
+  '近 30 天内没有访问记录，CPU 使用率低于 1% 且近 7 天无使用波动的模块，请尽快下架。': 'Modules with no access records in the past 30 days, CPU usage below 1%, and no usage fluctuations in the past 7 days should be taken offline as soon as possible.',
 };

webfe/package_vue/src/language/lang/zh.js

@@ -1596,7 +1596,6 @@ export default {
   查看更多应用: '查看更多应用',
   资源使用量: '资源使用量',
   对象储存: '对象储存',
-  了解我们的服务: '了解我们的服务',
   我的应用分布: '我的应用分布',
   '单位（个）': '单位（个）',
   '访问量 Top 5 (最近 30 天)': '访问量 Top 5 (最近 30 天)',
@@ -2791,4 +2790,9 @@ export default {
   '点击“开始迁移”后，应用服务将不会受到任何影响': '点击“开始迁移”后，应用服务将不会受到任何影响',
   '可搜索应用代码、环境变量中是否有以下内容来确认': '可搜索应用代码、环境变量中是否有以下内容来确认',
   '将您的自定义域名解析到表格中的 IP': '将您的自定义域名解析到表格中的 IP',
+  闲置应用: '闲置应用',
+  闲置模块: '闲置模块',
+  '更新于 {t}之前': '更新于 {t}之前',
+  资源配额: '资源配额',
+  '近 30 天内没有访问记录，CPU 使用率低于 1% 且近 7 天无使用波动的模块，请尽快下架。': '近 30 天内没有访问记录，CPU 使用率低于 1% 且近 7 天无使用波动的模块，请尽快下架。',
 };

webfe/package_vue/src/store/modules/base-info.js

@@ -21,6 +21,7 @@
  */
 
 import Vue from 'vue';
+import http from '@/api';
 
 // store
 const state = {
@@ -39,55 +40,55 @@ const mutations = {};
 // actions
 const actions = {
   /**
-     * 获取各环境网关获取情况
-     *
-     * @param {Function} commit store commit mutation handler
-     * @param {Object} state store state
-     * @param {String} appCode 应用code
-     * @return {String} env 环境
-     */
+   * 获取各环境网关获取情况
+   *
+   * @param {Function} commit store commit mutation handler
+   * @param {Object} state store state
+   * @param {String} appCode 应用code
+   * @return {String} env 环境
+   */
   getGatewayInfos({}, { appCode, env, moduleName }) {
     const url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/modules/${moduleName}/envs/${env}/egress_gateway_infos/default/`;
 
     return Vue.http.get(url).then(resp => resp);
   },
 
   /**
-     * 获取相应环境出口网关信息
-     *
-     * @param {Function} commit store commit mutation handler
-     * @param {Object} state store state
-     * @param {String} appCode 应用code
-     * @return {String} env 环境
-     */
+   * 获取相应环境出口网关信息
+   *
+   * @param {Function} commit store commit mutation handler
+   * @param {Object} state store state
+   * @param {String} appCode 应用code
+   * @return {String} env 环境
+   */
   enableGatewayInfos({}, { appCode, env, moduleName }) {
     const url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/modules/${moduleName}/envs/${env}/egress_gateway_infos/`;
 
     return Vue.http.post(url).then(resp => resp);
   },
 
   /**
-     * 清除当前已获取的的出口网关信息
-     *
-     * @param {Function} commit store commit mutation handler
-     * @param {Object} state store state
-     * @param {String} appCode 应用code
-     * @return {String} env 环境
-     */
+   * 清除当前已获取的的出口网关信息
+   *
+   * @param {Function} commit store commit mutation handler
+   * @param {Object} state store state
+   * @param {String} appCode 应用code
+   * @return {String} env 环境
+   */
   clearGatewayInfos({}, { appCode, env, moduleName }) {
     const url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/modules/${moduleName}/envs/${env}/egress_gateway_infos/default/`;
 
     return Vue.http.delete(url).then(resp => resp);
   },
 
   /**
-     * 获取lessCode应用列表信息地址
-     *
-     * @param {Function} commit store commit mutation handler
-     * @param {Object} state store state
-     * @param {String} appCode 应用code
-     * @return {String} env 环境
-     */
+   * 获取lessCode应用列表信息地址
+   *
+   * @param {Function} commit store commit mutation handler
+   * @param {Object} state store state
+   * @param {String} appCode 应用code
+   * @return {String} env 环境
+   */
   gitLessCodeAddress({}, { appCode, moduleName }) {
     const url = `${BACKEND_URL}/api/bkapps/lesscode/${appCode}/modules/${moduleName}/`;
 
@@ -112,6 +113,14 @@ const actions = {
     const url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/`;
     return Vue.http.delete(url, {}, config);
   },
+
+  /**
+   * 获取闲置应用看板数据
+   */
+  getIdleAppList() {
+    const url = `${BACKEND_URL}/api/bkapps/applications/lists/idle/`;
+    return http.get(url, {});
+  },
 };
 
 export default {

webfe/package_vue/src/views/dev-center/home/comps/tag-box.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="box"
+    ref="tagsRef"
+  >
+    <i class="paasng-icon paasng-user user-icon"></i>
+    <div
+      v-for="(tag, index) in visibleTags"
+      :key="index"
+      class="tag"
+    >
+      {{ tag }}
+    </div>
+    <div
+      v-if="hiddenCount > 0"
+      class="more"
+      v-bk-tooltips="{ content: hiddenTags.join(', ') }"
+    >
+      +{{ hiddenCount }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tags: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visibleTags: [],
+      hiddenTags: [],
+      hiddenCount: 0,
+    };
+  },
+  watch: {
+    tags: {
+      immediate: true,
+      handler() {
+        this.$nextTick(() => {
+          this.updateTags();
+        });
+      },
+    },
+  },
+  mounted() {
+    this.updateTags();
+    window.addEventListener('resize', this.updateTags);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateTags);
+  },
+  methods: {
+    updateTags() {
+      const box = this.$refs.tagsRef;
+      const tempDiv = document.createElement('div');
+      tempDiv.style.position = 'absolute';
+      tempDiv.style.visibility = 'hidden';
+      tempDiv.style.whiteSpace = 'nowrap';
+      document.body.appendChild(tempDiv);
+
+      let totalWidth = 0;
+      const reservedWidth = 140; // 预留值
+      const marginRight = 4;
+      this.visibleTags = [];
+      this.hiddenTags = [];
+      this.hiddenCount = 0;
+
+      this.tags.forEach((tag) => {
+        tempDiv.textContent = tag;
+        tempDiv.className = 'tag';
+        const tagWidth = tempDiv.offsetWidth + marginRight;
+
+        // 包括 more 标签占用的宽度进行判断
+        if (totalWidth + tagWidth + reservedWidth <= box?.clientWidth) {
+          this.visibleTags.push(tag);
+          totalWidth += tagWidth;
+        } else {
+          this.hiddenTags.push(tag);
+          this.hiddenCount += 1;
+        }
+      });
+      document.body.removeChild(tempDiv);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+}
+.tag,
+.more {
+  display: inline-block;
+  margin-right: 4px;
+  padding: 4px 8px;
+  background: #fafbfd;
+  border-radius: 2px;
+  white-space: nowrap;
+}
+.more {
+  &:hover {
+    background: #dcdee5;
+  }
+}
+.user-icon {
+  font-size: 16px;
+  color: #979BA5;
+  margin-right: 6px;
+  transform: translateY(1px);
+}
+</style>