feature: 交互规范 - 文本溢出、表格空状态 (closed TencentBlueKing#1445)

GONGONGONG · Feb 27, 2023 · 406d3df · 406d3df
1 parent a53a5da
commit 406d3df
Show file tree

Hide file tree

Showing 25 changed files with 304 additions and 49 deletions.
diff --git a/frontend/src/components/common/bk-biz-select.vue b/frontend/src/components/common/bk-biz-select.vue
@@ -43,7 +43,7 @@
         @click="close">
       </auth-component>
       <div class="select-item">
-        <span class="select-item-name">
+        <span class="select-item-name" v-bk-overflow-tips>
           {{ `[${option.bk_biz_id}] ${option.bk_biz_name}` }}
         </span>
         <!-- <span class="select-item-id" v-show="searchValue">{{ `(#${option.bk_biz_id})` }}</span> -->

diff --git a/frontend/src/components/common/nm-exception.vue b/frontend/src/components/common/nm-exception.vue
@@ -0,0 +1,60 @@
+<template>
+  <bk-exception :scene="scene" :type="type">
+    <template v-if="['search-empty', '500'].includes(type)" #default>
+      <template v-if="type === 'search-empty'">
+        <p class="empty-title">{{ $t('搜索结果为空') }}</p>
+        <i18n tag="p" class="empty-desc" path="可以尝试调整关键词或清空筛选条件">
+          <bk-link theme="primary" class="empty-btn" @click="() => handleClick('clear')">
+            {{ $t('清空筛选条件') }}
+          </bk-link>
+        </i18n>
+      </template>
+      <template v-if="type === '500'">
+        <div class="empty">
+          <p class="empty-title">{{ $t('获取数据异常') }}</p>
+          <p class="empty-desc">
+            <bk-link theme="primary" class="empty-btn" @click="() => handleClick('refresh')">
+              {{ $t('刷新') }}
+            </bk-link>
+          </p>
+        </div>
+      </template>
+    </template>
+  </bk-exception>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({ name: 'NmException' })
+export default class CopyDropdown extends Vue {
+  @Prop({ type: String, default: 'empty' }) protected readonly type!: string;
+  @Prop({ type: String, default: 'part' }) protected readonly scene!: string;
+
+  public handleClick(clickType: string) {
+    this.$emit(`empty-${clickType}`);
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+  .empty-title {
+    line-height: 22px;
+    font-size: 14px;
+    color: #63656e;
+  }
+
+  .empty-desc {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+    line-height: 20px;
+    font-size: 12px;
+    color: #979ba5;
+  }
+  .empty-btn {
+    margin-left: 4px;
+    .bk-link-text {
+      font-size: 12px;
+    }
+  }
+</style>
diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
@@ -735,6 +735,12 @@ export default {
   页面找不到了: 'The page cannot be found!',
   服务器维护中: 'Server maintenance, please try again later',
   功能正在建设中: 'Function under construction ...',
+  可以尝试调整关键词或清空筛选条件: 'You can try to adjust keywords or {0}',
+  清空筛选条件: 'Clear filter',
+  搜索结果为空: 'Search result is empty',
+  获取数据异常: 'Get data exception',
+  获取数据异常: 'Get data exception',
+  刷新: 'To refresh',
 
   // auth
   申请业务权限: 'Apply authority',

diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
@@ -735,6 +735,11 @@ export default {
   页面找不到了: '页面找不到了！',
   服务器维护中: '服务器维护中，请稍后重试',
   功能正在建设中: '功能正在建设中···',
+  可以尝试调整关键词或清空筛选条件: '可以尝试 调整关键词 或 {0}',
+  清空筛选条件: '清空筛选条件',
+  搜索结果为空: '搜索结果为空',
+  获取数据异常: '获取数据异常',
+  刷新: '刷新',
 
   // auth
   申请业务权限: '申请业务权限',

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -7,6 +7,7 @@ import router from '@/router';
 import store from '@/store/index';
 import { bus } from '@/common/bus';
 import LoadingIcon from '@/components/common/loading-icon.vue';
+import NmException from '@/components/common/nm-exception.vue';
 // import '@icon-cool/bk-icon-node-manager';
 import '@/bk_icon_font/style.css';
 import 'github-markdown-css';
@@ -16,6 +17,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 Vue.component('LoadingIcon', LoadingIcon);
+Vue.component('NmException', NmException);
 
 global.bus = bus;
 global.mainComponent = new Vue({

diff --git a/frontend/src/setup/index.ts b/frontend/src/setup/index.ts
@@ -7,6 +7,7 @@ import './filters';
 import { RSA } from './encrypt';
 import { textTool } from './text-tool';
 import { setIpProp, initIpProp } from './ipv6';
+import './mixins';
 
 Vue.prototype.$filters = function (filterName: string, value: any) {
   return this._f(filterName)(value);

diff --git a/frontend/src/setup/mixins.ts b/frontend/src/setup/mixins.ts
@@ -0,0 +1,13 @@
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component({ EmptyMixin })
+class EmptyMixin extends Vue {
+  public emptySearchClear(): void {
+    this.$emit('empty-clear');
+  }
+  public emptyRefresh(): void {
+    this.$emit('empty-refresh');
+  }
+}
+
+Vue.mixin(EmptyMixin);
diff --git a/frontend/src/views/agent/agent-list.vue b/frontend/src/views/agent/agent-list.vue
@@ -284,6 +284,7 @@
           key="biz"
           :label="$t('归属业务')"
           prop="bk_biz_name"
+          :min-width="columnMinWidth['bk_biz_name']"
           v-if="filter['bk_biz_name'].mockChecked"
           show-overflow-tooltip>
         </bk-table-column>
@@ -344,6 +345,7 @@
           key="version"
           :label="$t('Agent版本')"
           prop="version"
+          show-overflow-tooltip
           :min-width="columnMinWidth['agent_version']"
           :render-header="renderFilterHeader"
           v-if="filter['agent_version'].mockChecked">
@@ -435,6 +437,7 @@
                  }"
                  v-if="row.topology.length">
               <span :class="{ 'col-topo': row.topology.length > 1 }"
+                    v-bk-overflow-tips
                     :title="row.topology.length === 1 ? row.topology.join('') : ''">
                 {{ row.topology.join(', ') }}
               </span>
@@ -554,6 +557,11 @@
           :resizable="false"
           fixed="right">
         </bk-table-column>
+        <NmException
+          slot="empty"
+          :type="tableEmptyType"
+          @empty-clear="searchClear"
+          @empty-refresh="initAgentListDebounce" />
       </bk-table>
       <bk-pagination
         ext-cls="pagination"
@@ -971,6 +979,9 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
   private get windowHeight() {
     return MainStore.windowHeight;
   }
+  private get tableEmptyType() {
+    return (this.search.topo.length || this.searchSelectValue.length) ? 'search-empty' : 'empty';
+  }
 
   @Watch('searchSelectValue', { deep: true })
   private handleValueChange() {
@@ -1103,6 +1114,10 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
       }
     }
   }
+  public searchClear() {
+    this.topoSelect.clearData();
+    this.searchSelectValue = [];
+  }
   /**
    * 初始化agent列表
    * @param {Boolean} spreadChecked 是否是跨页操作

diff --git a/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-table.vue b/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-table.vue
@@ -32,7 +32,7 @@
       <bk-table
         v-test="'proxyTable'"
         :class="`head-customize-table ${ fontSize }`" :data="proxyData" :span-method="colspanHandle">
-        <bk-table-column :label="$t('内网IPv4')" show-overflow-tooltip>
+        <bk-table-column :label="$t('内网IPv4')" show-overflow-tooltip width="125">
           <template #default="{ row }">
             <bk-button v-if="row.inner_ip" v-test="'view'" text @click="handleViewProxy(row, false)" class="row-btn">
               {{ row.inner_ip }}
@@ -42,6 +42,7 @@
         </bk-table-column>
         <bk-table-column
           v-if="filter['inner_ipv6'] && filter['inner_ipv6'].mockChecked"
+          :width="innerIPv6Width"
           :label="$t('内网IPv6')"
           show-overflow-tooltip>
           <template #default="{ row }">
@@ -55,7 +56,8 @@
           :label="$t('出口IP')"
           v-if="filter['outer_ip'].mockChecked"
           show-overflow-tooltip
-          :render-header="renderTipHeader">
+          :render-header="renderTipHeader"
+          width="125">
           <template #default="{ row }">
             <span>{{ row.outer_ip | filterEmpty }}</span>
           </template>
@@ -65,20 +67,26 @@
           :label="$t('登录IP')"
           prop="login_ip"
           show-overflow-tooltip
-          v-if="filter['login_ip'].mockChecked">
+          v-if="filter['login_ip'].mockChecked"
+          width="125">
           <template #default="{ row }">
             {{ row.login_ip | filterEmpty }}
           </template>
         </bk-table-column>
         <bk-table-column
           :label="$t('归属业务')"
           prop="bk_biz_name"
+          min-width="130"
           v-if="filter['bk_biz_name'].mockChecked" show-overflow-tooltip>
           <template #default="{ row }">
             <span>{{ row.bk_biz_name | filterEmpty }}</span>
           </template>
         </bk-table-column>
-        <bk-table-column :label="$t('Proxy状态')" prop="status" v-if="filter['proxy_status'].mockChecked">
+        <bk-table-column
+          :label="$t('Proxy状态')"
+          prop="status"
+          v-if="filter['proxy_status'].mockChecked"
+          :min-width="columnMinWidth['proxy_status']">
           <template #default="{ row }">
             <div class="col-status" v-if="statusMap[row.status]">
               <span :class="'status-mark status-' + row.status"></span>
@@ -90,19 +98,31 @@
             </div>
           </template>
         </bk-table-column>
-        <bk-table-column :label="$t('密码密钥')" prop="re_certification" v-if="filter['re_certification'].mockChecked">
+        <bk-table-column
+          :label="$t('密码密钥')"
+          prop="re_certification"
+          v-if="filter['re_certification'].mockChecked"
+          :min-width="columnMinWidth['re_certification']">
           <template #default="{ row }">
             <span :class="['tag-switch', { 'tag-enable': !row.re_certification }]">
               {{ row.re_certification ? $t('过期') : $t('有效') }}
             </span>
           </template>
         </bk-table-column>
-        <bk-table-column :label="$t('Proxy版本')" prop="version" v-if="filter['proxy_version'].mockChecked">
+        <bk-table-column
+          :label="$t('Proxy版本')"
+          prop="version"
+          v-if="filter['proxy_version'].mockChecked"
+          :min-width="columnMinWidth['proxy_version']">
           <template #default="{ row }">
             <span>{{ row.version | filterEmpty }}</span>
           </template>
         </bk-table-column>
-        <bk-table-column :label="$t('Agent数量')" prop="pagent_count" v-if="filter['pagent_count'].mockChecked">
+        <bk-table-column
+          :label="$t('Agent数量')"
+          prop="pagent_count"
+          v-if="filter['pagent_count'].mockChecked"
+          :min-width="columnMinWidth['pagent_count']">
           <template #default="{ row }">
             <span
               class="link-pointer"
@@ -113,7 +133,7 @@
             <span v-else>0</span>
           </template>
         </bk-table-column>
-        <bk-table-column :label="$t('安装方式')" prop="is_manual" v-if="filter['is_manual'].mockChecked">
+        <bk-table-column :label="$t('安装方式')" prop="is_manual" v-if="filter['is_manual'].mockChecked" min-width="105">
           <template #default="{ row }">
             {{ row.is_manual ? $t('手动') : $t('远程') }}
           </template>
@@ -335,6 +355,7 @@ export default class CloudDetailTable extends Vue {
     { key: 'speedLimit', value: [false, false, false, 'bt_speed_limit', this.$t('传输限速')] },
   ];
   private localMark = '_proxy';
+  private columnMinWidth: Dictionary = {};
 
   private get fontSize() {
     return MainStore.fontSize;
@@ -359,12 +380,31 @@ export default class CloudDetailTable extends Vue {
         : !this.proxyData.some(proxy => proxy.inner_ip),
     }));
   }
+  private get innerIPv6Width() {
+    return this.proxyData.some(row => !!row.inner_ipv6) ? 270 : 100;
+  }
 
   private created() {
     this.initCustomColStatus();
+    this.computedColumnWidth();
   }
   // ...mapActions('cloud', ['setupProxy', 'operateJob', 'removeHost']),
 
+  public computedColumnWidth() {
+    const widthMap: { [key: string]: number } = {};
+    Object.keys(this.filter).reduce((obj, key) => {
+      const column = this.filter[key];
+      const config = { filter: column.filter };
+      let name = this.filter[key]?.name || '';
+      if (key === 'speedLimit') {
+        name = `${name}(MB/s)`;
+      }
+      obj[key] = this.$textTool.getHeadWidth(name, config);
+      return obj;
+    }, widthMap);
+    this.columnMinWidth = widthMap;
+  }
+
   // 设置表格展示column的配置 filter
   public initCustomColStatus() {
     const columnsFilter = {};

diff --git a/frontend/src/views/cloud/cloud-manager.vue b/frontend/src/views/cloud/cloud-manager.vue
@@ -268,6 +268,12 @@
             width="42"
             :resizable="false">
           </bk-table-column>
+
+          <NmException
+            slot="empty"
+            :type="tableEmptyType"
+            @empty-clear="searchClear"
+            @empty-refresh="handleValueChange" />
         </bk-table>
       </div>
     </section>
@@ -405,6 +411,9 @@ export default class CloudManager extends Vue {
       },
     ];
   }
+  private get tableEmptyType() {
+    return this.searchValue.length ? 'search-empty' : 'empty';
+  }
 
   private created() {
     this.handleInit();
@@ -682,6 +691,10 @@ export default class CloudManager extends Vue {
     this.sortOrder = order;
     this.handleSearch(this.pagination.current);
   }
+  public searchClear() {
+    this.searchValue = '';
+    this.handleValueChange();
+  }
 }
 </script>
 <style lang="postcss" scoped>

diff --git a/frontend/src/views/plugin/plugin-list/node-detail-table.vue b/frontend/src/views/plugin/plugin-list/node-detail-table.vue
@@ -88,6 +88,12 @@
           </div>
         </template>
       </bk-table-column>
+
+      <NmException
+        slot="empty"
+        :type="tableEmptyType"
+        @empty-clear="() => handleValueChange('')"
+        @empty-refresh="emptyRefresh" />
     </bk-table>
     <SelectMenu
       :show="showSelectMenu"
@@ -139,6 +145,9 @@ export default class PluginRuleTable extends Vue {
     });
     return lastKey;
   }
+  private get tableEmptyType() {
+    return this.searchValue.length ? 'search-empty' : 'empty';
+  }
 
   private created() {
     this.statusMap = {
@@ -259,6 +268,7 @@ export default class PluginRuleTable extends Vue {
     }
   }
   public handleValueChange(v: string) {
+    this.searchValue = v;
     if (!v.trim()) {
       this.filterData = this.data;
     } else {