Merge pull request #9055 from vhwweng/hw-master

feat: turbo文本溢出、空状态规范落地 issue #8774
TencentBlueKing · Jul 18, 2023 · 57e4c8c · 57e4c8c
2 parents a0fb820 + b9d3e02
commit 57e4c8c
Show file tree

Hide file tree

Showing 52 changed files with 1,097 additions and 179 deletions.
diff --git a/src/frontend/devops-atomstore/src/assets/scss/devops-common.scss b/src/frontend/devops-atomstore/src/assets/scss/devops-common.scss
@@ -213,7 +213,7 @@ input[disabled="disabled"] {
     font-size: 14px;
     color: $fontGray;
     text-align: center;
-    background: url('../../images/box.png') center top no-repeat;
+    background: url('../../images/search-empty.svg') center top no-repeat;
 }
 
 .g-confirm-buttom {

diff --git a/src/frontend/devops-atomstore/src/assets/scss/index.scss b/src/frontend/devops-atomstore/src/assets/scss/index.scss
@@ -73,4 +73,9 @@
              }
          }
      }
- }
+ }
+
+.tippy-tooltip.bk-overflow-tips-theme {
+    font-size: 12px !important;
+    padding: 7px 14px !important;
+}
diff --git a/src/frontend/devops-atomstore/src/components/common/card/atom.vue b/src/frontend/devops-atomstore/src/components/common/card/atom.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="atom-card">
         <honer-img class="card-pic atom-logo" :detail="atom" />
-        <p :class="[{ 'not-recommend': atom.recommendFlag === false }, 'card-name', 'text-overflow']">{{ atom.name }}</p>
+        <p v-bk-overflow-tips :class="[{ 'not-recommend': atom.recommendFlag === false }, 'card-name', 'text-overflow']">{{ atom.name }}</p>
         <h5 class="card-detail">
             <honer-tag :detail="atom" :max-num="1"></honer-tag>
             <img

diff --git a/src/frontend/devops-atomstore/src/components/common/card/index.vue b/src/frontend/devops-atomstore/src/components/common/card/index.vue
@@ -3,7 +3,7 @@
         <atom v-if="storeType === 'atom'" :atom="atom" :has-summary="hasSummary" />
         <template v-else>
             <img class="card-pic atom-logo" :src="atom.logoUrl">
-            <p :class="[{ 'not-recommend': atom.recommendFlag === false }, 'card-name', 'text-overflow']">{{ atom.name }}</p>
+            <p v-bk-overflow-tips :class="[{ 'not-recommend': atom.recommendFlag === false }, 'card-name', 'text-overflow']">{{ atom.name }}</p>
             <h5 class="card-detail">
                 <span class="text-overflow">{{ atom.publisher }}</span>
                 <span>{{ displayNum }} <i class="devops-icon icon-heat-2"></i></span>

diff --git a/src/frontend/devops-atomstore/src/components/empty-table-status.vue b/src/frontend/devops-atomstore/src/components/empty-table-status.vue
@@ -0,0 +1,44 @@
+<template>
+    <bk-exception :type="type" scene="part">
+        <div style="font-size: 14px;">{{ typeMap[type] }}</div>
+        <template v-if="type === 'search-empty'">
+            <div class="empty-tips">
+                {{ $t('store.可以尝试 调整关键词 或') }}
+                <button class="bk-text-button" @click="handleClear">{{$t('store.清空筛选条件')}}</button>
+            </div>
+        </template>
+    </bk-exception>
+</template>
+
+<script>
+    export default {
+        name: 'EmptyTableStatus',
+        props: {
+            type: {
+                type: String,
+                default: 'empty'
+            }
+        },
+        data () {
+            return {
+                typeMap: {
+                    empty: this.$t('store.暂无数据'),
+                    'search-empty': this.$t('store.搜索结果为空')
+                }
+            }
+        },
+        methods: {
+            handleClear () {
+                this.$emit('clear')
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .empty-tips {
+        margin-top: 8px;
+        font-size: 12px;
+        color: #979BA5;
+    }
+</style>
diff --git a/src/frontend/devops-atomstore/src/components/manage/release-manage/version/atom.vue b/src/frontend/devops-atomstore/src/components/manage/release-manage/version/atom.vue
@@ -13,14 +13,14 @@
             @page-change="(page) => $emit('pageChanged', page)"
             @page-limit-change="(currentLimit, prevLimit) => $emit('pageLimitChanged', currentLimit, prevLimit)"
         >
-            <bk-table-column :label="$t('store.版本')">
+            <bk-table-column :label="$t('store.版本')" show-overflow-tooltip>
                 <template slot-scope="props">
                     <span>{{ props.row.version || 'init' }}</span>
                 </template>
             </bk-table-column>
-            <bk-table-column :label="$t('store.状态')" prop="atomStatus" :formatter="statusFormatter"></bk-table-column>
-            <bk-table-column :label="$t('store.创建人')" prop="creator"></bk-table-column>
-            <bk-table-column :label="$t('store.创建时间')" prop="createTime"></bk-table-column>
+            <bk-table-column :label="$t('store.状态')" prop="atomStatus" :formatter="statusFormatter" show-overflow-tooltip></bk-table-column>
+            <bk-table-column :label="$t('store.创建人')" prop="creator" show-overflow-tooltip></bk-table-column>
+            <bk-table-column :label="$t('store.创建时间')" prop="createTime" show-overflow-tooltip></bk-table-column>
             <bk-table-column :label="$t('store.操作')" width="150" class-name="handler-btn">
                 <template slot-scope="props">
                     <section v-show="!index">

diff --git a/src/frontend/devops-atomstore/src/components/manage/release-manage/version/image.vue b/src/frontend/devops-atomstore/src/components/manage/release-manage/version/image.vue
@@ -18,15 +18,15 @@
             @page-change="(page) => $emit('pageChanged', page)"
             @page-limit-change="(currentLimit, prevLimit) => $emit('pageLimitChanged', currentLimit, prevLimit)"
         >
-            <bk-table-column :label="$t('store.版本')">
+            <bk-table-column :label="$t('store.版本')" show-overflow-tooltip>
                 <template slot-scope="props">
                     <span>{{ props.row.version || 'init' }}</span>
                 </template>
             </bk-table-column>
-            <bk-table-column :label="$t('store.镜像Tag')" prop="imageTag"></bk-table-column>
-            <bk-table-column :label="$t('store.状态')" prop="imageStatus" :formatter="statusFormatter"></bk-table-column>
-            <bk-table-column :label="$t('store.创建人')" prop="creator"></bk-table-column>
-            <bk-table-column :label="$t('store.创建时间')" prop="createTime" :formatter="convertTime"></bk-table-column>
+            <bk-table-column :label="$t('store.镜像Tag')" prop="imageTag" show-overflow-tooltip></bk-table-column>
+            <bk-table-column :label="$t('store.状态')" prop="imageStatus" :formatter="statusFormatter" show-overflow-tooltip></bk-table-column>
+            <bk-table-column :label="$t('store.创建人')" prop="creator" show-overflow-tooltip></bk-table-column>
+            <bk-table-column :label="$t('store.创建时间')" prop="createTime" :formatter="convertTime" show-overflow-tooltip></bk-table-column>
             <bk-table-column :label="$t('store.操作')" width="150" class-name="handler-btn">
                 <template slot-scope="props">
                     <section v-show="!index">

diff --git a/src/frontend/devops-atomstore/src/images/search-empty.svg b/src/frontend/devops-atomstore/src/images/search-empty.svg
diff --git a/src/frontend/devops-atomstore/src/index.js b/src/frontend/devops-atomstore/src/index.js
@@ -22,11 +22,13 @@ import store from './store'
 import './assets/scss/index.scss'
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
-
+import EmptyTableStatus from '@/components/empty-table-status.vue'
 const Vue = window.Vue
+Vue.component('EmptyTableStatus', EmptyTableStatus)
 Vue.use(mavonEditor)
 
 window.Pages = window.Pages || {}
+window.changeFlag = false
 window.Pages.store = {
     title: '研发商店',
     routes,

diff --git a/src/frontend/devops-atomstore/src/utils/eventBus.js b/src/frontend/devops-atomstore/src/utils/eventBus.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue()
diff --git a/src/frontend/devops-atomstore/src/views/manage/approval.vue b/src/frontend/devops-atomstore/src/views/manage/approval.vue
@@ -16,20 +16,20 @@
                     :header-border="false"
                     :header-cell-style="{ background: '#fff' }"
                 >
-                    <bk-table-column :label="$t('store.申请人')" prop="applicant"></bk-table-column>
-                    <bk-table-column :label="$t('store.审批状态')" prop="approveStatus" :formatter="statusFormatter"></bk-table-column>
-                    <bk-table-column :label="$t('store.申请原因')">
+                    <bk-table-column :label="$t('store.申请人')" prop="applicant" show-overflow-tooltip></bk-table-column>
+                    <bk-table-column :label="$t('store.审批状态')" prop="approveStatus" :formatter="statusFormatter" show-overflow-tooltip></bk-table-column>
+                    <bk-table-column :label="$t('store.申请原因')" show-overflow-tooltip>
                         <template slot-scope="props">
                             <span class="table-text" :title="props.row.content">{{props.row.content}}</span>
                         </template>
                     </bk-table-column>
-                    <bk-table-column :label="$t('store.审批结果说明')">
+                    <bk-table-column :label="$t('store.审批结果说明')" show-overflow-tooltip>
                         <template slot-scope="props">
                             <span class="table-text" :title="props.row.approveMsg">{{props.row.approveMsg}}</span>
                         </template>
                     </bk-table-column>
-                    <bk-table-column :label="$t('store.创建日期')" prop="createTime" :formatter="timeFormatter"></bk-table-column>
-                    <bk-table-column :label="$t('store.更新日期')" prop="updateTime" :formatter="timeFormatter"></bk-table-column>
+                    <bk-table-column :label="$t('store.创建日期')" prop="createTime" :formatter="timeFormatter" show-overflow-tooltip></bk-table-column>
+                    <bk-table-column :label="$t('store.更新日期')" prop="updateTime" :formatter="timeFormatter" show-overflow-tooltip></bk-table-column>
                     <bk-table-column :label="$t('store.操作')" width="120" class-name="handler-btn">
                         <template slot-scope="props">
                             <span class="update-btn" @click="approve(props.row)" v-if="props.row.approveStatus === 'WAIT'"> {{ $t('store.审批') }} </span>

diff --git a/src/frontend/devops-atomstore/src/views/manage/detail/edit.vue b/src/frontend/devops-atomstore/src/views/manage/detail/edit.vue
@@ -27,7 +27,7 @@
         created () {
             window.onbeforeunload = () => {
                 const vm = this.$refs.edit
-                if (vm.hasChange) return this.$t('store.有修改的数据未保存，是否离开当前页面')
+                if (vm.hasChange) return this.$t('store.离开将会导致未保存信息丢失')
             }
         },
 
@@ -39,8 +39,8 @@
             const vm = this.$refs.edit
             if (vm.hasChange) {
                 this.$bkInfo({
-                    title: this.$t('store.确定离开？'),
-                    subTitle: this.$t('store.有修改的数据未保存，是否离开当前页面'),
+                    title: this.$t('store.确认离开当前页？'),
+                    subTitle: this.$t('store.离开将会导致未保存信息丢失'),
                     confirmFn: () => next(),
                     onClose: () => next(false)
                 })