sprintfix: 文本省略规范补充(closed #1445)

TencentBlueKing · Jul 12, 2023 · a1464e7 · a1464e7
1 parent 5f4e60b
commit a1464e7
Show file tree

Hide file tree

Showing 43 changed files with 636 additions and 818 deletions.
diff --git a/frontend/src/components/common/filter-dialog.vue b/frontend/src/components/common/filter-dialog.vue
@@ -9,8 +9,8 @@
     @cancel="cancel">
     <template #default>
       <bk-table :data="data" max-height="464" v-if="data.length && value" ref="table">
-        <bk-table-column label="IP" prop="ip" width="180"></bk-table-column>
-        <bk-table-column :label="$t('过滤原因')" prop="msg" show-overflow-tooltip></bk-table-column>
+        <NmColumn label="IP" prop="ip" width="180" />
+        <NmColumn :label="$t('过滤原因')" prop="msg" />
       </bk-table>
     </template>
     <template #footer>

diff --git a/frontend/src/components/common/filter-header.vue b/frontend/src/components/common/filter-header.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
     <div class="filter-header" :class="{ 'default': filterList.length === 0 }" @click.stop="handleShow($event)">
-      {{ name }}
+      <div class="text-ellipsis" v-bk-overflow-tips>{{ name }}</div>
       <i
         class="header-icon nodeman-icon nc-filter-fill"
         :class="{ 'is-selected': isSelected }"
@@ -188,13 +188,18 @@ export default class FilterHeader extends Vue {
 @import "@/css/mixins/nodeman.css";
 
 .filter-header {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
   cursor: pointer;
   outline: 0;
   &.default {
     cursor: default;
   }
   .header-icon {
+    flex-shrink: 0;
     position: relative;
+    margin-left: 4px;
     font-size: 13px;
     color: #c4c6cc;
     outline: 0;

diff --git a/frontend/src/components/common/nm-column.tsx b/frontend/src/components/common/nm-column.tsx
@@ -0,0 +1,33 @@
+import { IColumn } from '@/types';
+
+export default {
+  name: 'NmColumn',
+  props: {
+    renderHeader: {
+      type: Function,
+    },
+    showOverflowTooltip: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    defaultRender(h: CreateElement, { column }: IColumn) {
+      console.log(column);
+      return <div v-bk-overflow-tips>{ column.label }</div>;
+    },
+  },
+  render() {
+    console.log(this.$attrs, this.props);
+    return <bk-table-column
+      show-overflow-tooltip={ this.showOverflowTooltip }
+      renderHeader={ this.renderHeader || this.defaultRender}
+      attrs={this.$attrs}
+      scopedSlots={{
+        default: proxy => this.$scopedSlots.default(proxy),
+      }} />;
+  },
+};
diff --git a/frontend/src/components/common/nm-column.vue b/frontend/src/components/common/nm-column.vue
@@ -0,0 +1,44 @@
+<template>
+  <bk-table-column
+    :prop="prop"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :render-header="renderHeader || defaultRender"
+    v-bind="$attrs"
+    v-on="$listeners">
+    <template #default="{ row }">
+      <slot :row="row">{{ prop ? row[prop] : null }}</slot>
+    </template>
+  </bk-table-column>
+</template>
+
+<script>
+export default {
+  name: 'NmColumn',
+  props: {
+    prop: {
+      type: String,
+      default: '',
+    },
+    renderHeader: {
+      type: Function,
+    },
+    showOverflowTooltip: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    defaultRender(h, { column }) {
+      return h('div', {
+        class: 'text-ellipsis',
+        directives: [
+          { name: 'bk-overflow-tips' },
+        ],
+      }, column.label);
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/common/strategy-table.vue b/frontend/src/components/common/strategy-table.vue
@@ -1,6 +1,6 @@
 <template>
-  <bk-table show-overflow-tooltip :data="guideTable">
-    <bk-table-column width="260" prop="source" :label="$t('源地址')" show-overflow-tooltip>
+  <bk-table :data="guideTable">
+    <NmColumn width="260" prop="source" :label="$t('源地址')">
       <template #default="{ row }">
         <div class="cell-wrapper" v-if="row.sourceKey === 'agent'">
           <span>{{ row.source }}：</span>
@@ -41,8 +41,8 @@
           </bk-popover>
         </div>
       </template>
-    </bk-table-column>
-    <bk-table-column width="300" prop="targetAdress" :label="$t('目标地址')" show-overflow-tooltip>
+    </NmColumn>
+    <NmColumn width="300" prop="targetAdress" :label="$t('目标地址')">
       <template #default="{ row }">
         <div class="cell-wrapper">
           <template v-if="row.targetKey === 'agent'">
@@ -87,8 +87,8 @@
           </template>
         </div>
       </template>
-    </bk-table-column>
-    <bk-table-column width="120" prop="port" :label="$t('端口')" show-overflow-tooltip>
+    </NmColumn>
+    <NmColumn width="120" prop="port" :label="$t('端口')">
       <template #default="{ row }">
         <div v-if="row.portKey">
           <span v-if="row.portKey === 'bt_range'" :class="{ 'cell-placeholder': !area.bt_port_start }">
@@ -119,9 +119,9 @@
         </div>
         <span v-else-if="row.port">{{ row.port }}</span>
       </template>
-    </bk-table-column>
-    <bk-table-column width="110" prop="protocol" :label="$t('协议')" show-overflow-tooltip></bk-table-column>
-    <bk-table-column prop="use" :label="$t('用途')" show-overflow-tooltip></bk-table-column>
+    </NmColumn>
+    <NmColumn width="110" prop="protocol" :label="$t('协议')" />
+    <NmColumn prop="use" :label="$t('用途')" />
   </bk-table>
 </template>
 
@@ -596,9 +596,12 @@ export default class StrategyTable extends Vue {
 </script>
 <style lang="scss" scoped>
   .cell-wrapper {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     line-height: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
   .cell-flex {
     display: flex;

diff --git a/frontend/src/components/ip-select-nm/node-preview-table.vue b/frontend/src/components/ip-select-nm/node-preview-table.vue
@@ -7,12 +7,12 @@
     @page-change="handlePagetionChage(arguments, 'page')"
     @page-limit-change="handlePagetionChage(arguments, 'limit')"
     class="preview-table">
-    <bk-table-column>
+    <NmColumn>
       <template #default="{ row }">
         {{ row.path || row.name || '--' }}
       </template>
-    </bk-table-column>
-    <bk-table-column>
+    </NmColumn>
+    <NmColumn>
       <template #default="{ row }">
         <i18n path="节点统计">
           <span class="total">{{ row.total || 0 }}</span>
@@ -21,12 +21,12 @@
           <span class="not_installed">{{ row.NOT_INSTALLED || 0 }}</span>
         </i18n>
       </template>
-    </bk-table-column>
-    <bk-table-column width="80" v-if="operate">
+    </NmColumn>
+    <NmColumn width="80" v-if="operate">
       <template #default="{ row }">
         <bk-button text @click="handleRemove(row)">{{ $t('移除') }}</bk-button>
       </template>
-    </bk-table-column>
+    </NmColumn>
   </bk-table>
 </template>
 <script lang="ts">

diff --git a/frontend/src/components/ip-select-nm/static-content-table.vue b/frontend/src/components/ip-select-nm/static-content-table.vue
@@ -32,41 +32,41 @@
         </div>
       </template>
     </bk-table-column>
-    <bk-table-column :label="$t('主机IP')" prop="inner_ip">
+    <NmColumn :label="$t('主机IP')" prop="inner_ip">
       <template #default="{ row }">
         <span v-bk-tooltips="{
           content: row.disabled_msg,
           disabled: !row.disabled
         }">{{ row.inner_ip }}</span>
       </template>
-    </bk-table-column>
-    <bk-table-column :label="$t('Agent状态')" prop="status">
+    </NmColumn>
+    <NmColumn :label="$t('Agent状态')" prop="status">
       <template #default="{ row }">
         <div class="col-status">
           <span :class="'status-mark status-' + row.status.toLocaleLowerCase()"></span>
           <span>{{ statusMap[row.status] }}</span>
         </div>
       </template>
-    </bk-table-column>
-    <bk-table-column :label="$t('管控区域')" prop="bk_cloud_name"></bk-table-column>
-    <!-- <bk-table-column :label="$t('主机名')" prop="bk_host_name"></bk-table-column> -->
-    <bk-table-column :label="$t('操作系统')" prop="os_type">
+    </NmColumn>
+    <NmColumn :label="$t('管控区域')" prop="bk_cloud_name"></NmColumn>
+    <!-- <NmColumn :label="$t('主机名')" prop="bk_host_name"></NmColumn> -->
+    <NmColumn :label="$t('操作系统')" prop="os_type">
       <template #default="{ row }">
         <span>{{ osMap[row.os_type] || '--' }}</span>
       </template>
-    </bk-table-column>
-    <bk-table-column width="80" :label="$t('操作')" v-if="operate">
+    </NmColumn>
+    <NmColumn width="80" :label="$t('操作')" v-if="operate">
       <template #default="{ row }">
         <bk-button text @click="handleRemove(row)">{{ $t('移除') }}</bk-button>
       </template>
-    </bk-table-column>
+    </NmColumn>
   </bk-table>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
 import ColumnCheck from '@/views/agent/components/column-check.vue';
 import { CreateElement } from 'vue';
-import { IPagination } from '@/types/plugin/plugin-type';
+import { IPagination } from '@/types';
 
 @Component({ name: 'static-content-table' })
 export default class StaticContentTable extends Vue {

diff --git a/frontend/src/components/ip-selector/components/ip-selector-table.vue b/frontend/src/components/ip-selector/components/ip-selector-table.vue
@@ -11,7 +11,7 @@
       :cell-class-name="handleCellClass"
       :header-cell-class-name="handleCellClass"
       class="topo-table">
-      <bk-table-column
+      <NmColumn
         :render-header="renderHeader"
         width="50"
         :resizable="false"
@@ -27,8 +27,8 @@
             @change="handleRowCheckChange(row, $event)">
           </bk-checkbox>
         </template>
-      </bk-table-column>
-      <bk-table-column
+      </NmColumn>
+      <NmColumn
         v-for="item in config.filter(item => !item.hidden)"
         :key="item.prop"
         :label="item.label"
@@ -47,7 +47,7 @@
             {{ row[item.prop] | filterEmpty }}
           </span>
         </template>
-      </bk-table-column>
+      </NmColumn>
     </bk-table>
     <bk-pagination class="mt10" v-bind="pagination" @change="handlePageChange" @limit-change="handlePageLimitChange" />
   </div>