From 98fba09b11398cf98a9a876a53f15ed8d606e43c Mon Sep 17 00:00:00 2001
From: vincenttgao <gaoyaqi411@126.com>
Date: Tue, 30 May 2023 11:20:48 +0800
Subject: [PATCH 1/6] =?UTF-8?q?bugfix(sideslide):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=AE=BD=E5=BA=A6=E4=BB=85=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=95=B0=E5=AD=97=E7=9A=84=E9=97=AE=E9=A2=98=20#399?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sideslider/sideslider.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/sideslider/sideslider.vue b/src/components/sideslider/sideslider.vue
index 6ba64db..83af563 100644
--- a/src/components/sideslider/sideslider.vue
+++ b/src/components/sideslider/sideslider.vue
@@ -29,7 +29,7 @@
 <template>
   <transition name="slide">
     <article :data-transfer="transfer" v-transfer-dom class="bk-sideslider" :class="extCls" :style="{ zIndex: localZIndex }" v-if="isShow" @mousedown.self="handleQuickClose">
-      <section class="bk-sideslider-wrapper" :class="[{ left: direction === 'left', right: direction === 'right' }]" :style="{ width: width + 'px' }">
+      <section class="bk-sideslider-wrapper" :class="[{ left: direction === 'left', right: direction === 'right' }]" :style="{ width: calcWidth }">
         <div class="bk-sideslider-header">
           <div class="bk-sideslider-closer" @click="handleClose" :style="{ float: calcDirection }">
             <i class="bk-icon" :class="'icon-angle-' + direction"></i>
@@ -102,7 +102,7 @@ export default {
       default: true
     },
     width: {
-      type: Number,
+      type: [String, Number],
       default: 400
     },
     beforeClose: {
@@ -156,6 +156,12 @@ export default {
     }
   },
   computed: {
+    calcWidth () {
+      if (/^\d+$/.test(this.width)) {
+        return `${this.width}px`
+      }
+      return this.width
+    },
     calcDirection () {
       return this.direction === 'left' ? 'right' : 'left'
     }

From 814875fd0d8a2a8c6580121dda7639618ab8a767 Mon Sep 17 00:00:00 2001
From: israelli <li18566230175@gmail.com>
Date: Thu, 1 Jun 2023 10:15:59 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0isMaskShown?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=8C=E7=94=A8=E4=BA=8E=E6=A3=80=E6=B5=8B?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E9=A1=B5=E9=9D=A2=E9=81=AE=E7=BD=A9=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E5=BC=B9=E5=87=BA=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/pop-manager.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/utils/pop-manager.js b/src/utils/pop-manager.js
index 0d172db..7b12bc8 100644
--- a/src/utils/pop-manager.js
+++ b/src/utils/pop-manager.js
@@ -178,6 +178,13 @@ import { uuid } from '@/utils/util'
             instance.ins.remove()
           }
         }
+      },
+      isMaskShown: function () {
+        const mask = document.querySelector('[data-bkpop-mask]')
+        if (mask) {
+          return mask.classList.contains('show-active')
+        }
+        return false
       }
     }
 

From dcface2fe28f75673afe619c19ad678146f4d1ab Mon Sep 17 00:00:00 2001
From: ielgnaw <wuji0223@gmail.com>
Date: Mon, 5 Jun 2023 21:12:14 +0800
Subject: [PATCH 3/6] feat: bump to 2.5.6-beta.2

---
 example/App.vue                           | 12 ++++++------
 example/components/changelog/readme.md    | 14 ++++++++++++++
 package.json                              |  4 ++--
 src/components/date-picker/panel/date.vue |  1 +
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/example/App.vue b/example/App.vue
index add2385..01849dc 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -29,12 +29,12 @@
 <template>
   <div id="app">
     <app-header
-      :root-domain="'tencent.com'"
-      :login-url="'https://login.bk.tencent.com'"
-      :avatar-host="'https://q1.qlogo.cn'"
-      :less-code-url="'https://github.com/TencentBlueKing/bk-lesscode/blob/master/readme.md'"
-      :design-url="'https://bkdesign.bk.tencent.com/'"
-      :region="'tencent'">
+      root-domain="tencent.com"
+      login-url="https://login.bk.tencent.com"
+      avatar-host="https://q1.qlogo.cn"
+      less-code-url="https://github.com/TencentBlueKing/bk-lesscode/blob/master/readme.md"
+      design-url="https://bkdesign.bk.tencent.com"
+      region="tencent">
     </app-header>
     <div class="app-container">
       <div class="app-side-nav">
diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
index a550dba..9ea16b3 100644
--- a/example/components/changelog/readme.md
+++ b/example/components/changelog/readme.md
@@ -8,6 +8,20 @@
 
 <div class="changelog-wrapper">
 
+### 2.5.6-beta.2 {page=#/changelog}
+
+* **[add]**:
+    - 添加 isMaskShown 方法，用于检测当前页面遮罩是否弹出
+
+---
+
+### 2.5.6-beta.1 {page=#/changelog}
+
+* **[fix]**:
+    - [Sideslider 侧栏](#/sideslider) 修复侧边栏宽度仅支持数字的问题
+
+---
+
 ### 2.5.5 {page=#/changelog}
 ###### 2023.05.29
 
diff --git a/package.json b/package.json
index dd97af0..705c70f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bk-magic-vue",
-  "version": "2.5.5",
+  "version": "2.5.6-beta.2",
   "description": "基于蓝鲸 Magicbox 和 Vue 的前端组件库",
   "main": "dist/bk-magic-vue.min.js",
   "files": [
@@ -58,7 +58,7 @@
     "@babel/register": "~7.4.4",
     "@babel/runtime": "~7.4.5",
     "@babel/runtime-corejs2": "~7.4.5",
-    "@blueking/magicbox-header": "~1.1.57",
+    "@blueking/magicbox-header": "~1.1.59",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@vue/babel-helper-vue-jsx-merge-props": "~1.0.0",
diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue
index 2a518d1..9d7890b 100644
--- a/src/components/date-picker/panel/date.vue
+++ b/src/components/date-picker/panel/date.vue
@@ -73,6 +73,7 @@
       </div>
       <div class="bk-picker-panel-content">
         <!-- eslint-disable-next-line vue/require-component-is -->
+        <!-- {{ pickerTable }}--{{dates}}--{{selectionMode}} -->
         <component
           :is="pickerTable"
           v-if="currentView !== 'time'"

From 4f943795d48e9a665983aad9ad3aee7363e89cfc Mon Sep 17 00:00:00 2001
From: ielgnaw <wuji0223@gmail.com>
Date: Wed, 7 Jun 2023 18:02:00 +0800
Subject: [PATCH 4/6] feat: bump to 2.5.6-beta.3

---
 example/components/changelog/readme.md         | 7 +++++++
 package.json                                   | 2 +-
 src/components/search-select/search-select.vue | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
index 9ea16b3..1c8e58f 100644
--- a/example/components/changelog/readme.md
+++ b/example/components/changelog/readme.md
@@ -8,6 +8,13 @@
 
 <div class="changelog-wrapper">
 
+### 2.5.6-beta.3 {page=#/changelog}
+
+* **[fix]**:
+    - [SearchSelect 查询选择器](#/searchselect) 修复 window 系统中，中文输入法的情况下，输入后直接回车数据展示问题
+
+---
+
 ### 2.5.6-beta.2 {page=#/changelog}
 
 * **[add]**:
diff --git a/package.json b/package.json
index 705c70f..99acae1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bk-magic-vue",
-  "version": "2.5.6-beta.2",
+  "version": "2.5.6-beta.3",
   "description": "基于蓝鲸 Magicbox 和 Vue 的前端组件库",
   "main": "dist/bk-magic-vue.min.js",
   "files": [
diff --git a/src/components/search-select/search-select.vue b/src/components/search-select/search-select.vue
index a0d4d00..3934179 100644
--- a/src/components/search-select/search-select.vue
+++ b/src/components/search-select/search-select.vue
@@ -824,7 +824,7 @@ export default {
               }, false, needShowPopover)
             }
             resolve()
-          }, 0)
+          }, 10)
         }
       })
       needEmitKeyEnter && this.$emit('key-enter', e)

From e30b0fb5784f3813766bb604cb246c8a3df1b5a4 Mon Sep 17 00:00:00 2001
From: Vincenttgao <gaoyaqi411@126.com>
Date: Mon, 19 Jun 2023 14:35:31 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat(tag-input):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=88=97=E8=A1=A8=E7=9A=84=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=20#409?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(tag-input): 添加动态列表的功能 #409

feat(tag-input): 添加动态列表的功能 #409
---
 example/components/tag-input/readme.md | 60 +++++++++++++++++++++++++-
 src/components/tag-input/tag-input.vue | 47 +++++++++++---------
 2 files changed, 85 insertions(+), 22 deletions(-)

diff --git a/example/components/tag-input/readme.md b/example/components/tag-input/readme.md
index 9cd8c75..2c7a127 100644
--- a/example/components/tag-input/readme.md
+++ b/example/components/tag-input/readme.md
@@ -11,6 +11,7 @@
         },
         data () {
             return {
+                dnyamicList: [],
                 allowCreate: true,
                 hasDeleteIcon: true,
                 maxData: 5,
@@ -29,6 +30,7 @@
                 placeholder: '请输入城市',
                 tag1: ['shenzhen'],
                 tags: ['shenzhen', 'guangzhou'],
+                dynamicTags: [],
                 tagsWithDisabled: [],
                 tagList: ['3-1', '3-2'],
                 sports: [],
@@ -158,6 +160,15 @@
             }
         },
         methods: {
+            inputHandle(value) {
+                const common = ['@qq.com', '@gmail.com', '@126.com']
+                if (value) {
+                    this.dnyamicList = common.map(item => ({id: `${value}${item}`, name: `${value}${item}` }));
+                    return;
+                }
+                this.dnyamicList = []
+                
+            },
             change (tags) {
                 console.log(tags)
             },
@@ -274,7 +285,8 @@
     <bk-tag-input
         :placeholder="placeholder"
         v-model="tags"
-        :list="list">
+        @inputchange="inputHandle"
+        :list="dnyamicList">
     </bk-tag-input>
     <p>请输入<code>州</code>来体验下搜索效果</p>
 </template>
@@ -307,6 +319,51 @@
 ```
 :::
 
+### 动态列表提示 {page=#/tag-input}
+
+:::demo 可以通过 `inputchange`回调对list进行动态修改来实现动态提示的用法，比如常见邮箱提示
+
+```html
+<template>
+    <bk-tag-input
+        :placeholder="placeholder"
+        v-model="dynamicTags"
+        @inputchange="inputHandle"
+        :list="dnyamicList">
+    </bk-tag-input>
+    <p>请输入<code>邮箱地址</code>来体验下动态提示效果</p>
+</template>
+<script>
+    import { bkTagInput } from '{{BASE_LIB_NAME}}'
+
+    export default {
+        components: {
+            bkTagInput
+        },
+        data () {
+            return {
+                placeholder: '请输入邮箱',
+                dnyamicList: [],
+                dynamicTags: []
+            }
+        },
+        methods: {
+            inputHandle(value) {
+                // 存储常见的邮箱后缀
+                const common = ['@qq.com', '@gmail.com', '@126.com']
+                if (value) {
+                    this.dnyamicList = common.map(item => ({id: `${value}${item}`, name: `${value}${item}` }));
+                    return;
+                }
+                // 如果输入的值不存在，将动态列表清空
+                this.dnyamicList = []
+            }
+        }
+    }
+</script>
+```
+:::
+
 ### hover 时才显示 clear 按钮 {page=#/tag-input}
 
 :::demo 设置 `show-clear-only-hover` 为`true`，则其 clear 按钮在 hover 时才会显示。 可以比较与上一例子交互的不同之处
@@ -1240,3 +1297,4 @@
 | remove | 删除数据后的回调函数 | |
 | removeAll | 一键清空数据后的回调函数 | |
 | blur | 输入状态时失焦点的回调函数 | input, tags |
+| inputchange | 输入框input事件的回调函数 | value
diff --git a/src/components/tag-input/tag-input.vue b/src/components/tag-input/tag-input.vue
index 1ac5d3a..924f941 100644
--- a/src/components/tag-input/tag-input.vue
+++ b/src/components/tag-input/tag-input.vue
@@ -624,30 +624,35 @@ export default {
       this.$refs.input.style.width = this.INPUT_MIN_WIDTH + 'px'
     },
     handleInput (event) {
-      if (this.maxData === -1 || this.maxData > this.tagList.length) {
-        const { value } = event.target
-        const charLen = this.getCharLength(value)
-
-        this.cacheVal = value
-        if (charLen) {
-          this.isCanRemoveTag = false
-          this.filterData(value)
-          this.$refs.input.style.width = (charLen * this.INPUT_MIN_WIDTH) + 'px'
-        } else {
-          this.isCanRemoveTag = true
-          if (this.trigger === 'focus') {
-            this.filterData()
+      // 获取输入框的值
+      const { value } = event.target
+      this.$emit('inputchange', value)
+      // 在下一次DOM更新后执行回调函数, 以进行动态List的支持
+      this.$nextTick(() => {
+        if (this.maxData === -1 || this.maxData > this.tagList.length) {
+          const charLen = this.getCharLength(value)
+
+          this.cacheVal = value
+          if (charLen) {
+            this.isCanRemoveTag = false
+            this.filterData(value)
+            this.$refs.input.style.width = (charLen * this.INPUT_MIN_WIDTH) + 'px'
+          } else {
+            this.isCanRemoveTag = true
+            if (this.trigger === 'focus') {
+              this.filterData()
+            }
           }
+        } else {
+          this.handleBlur()
+          this.curInputValue = ''
+          this.showList = false
         }
-      } else {
-        this.handleBlur()
-        this.curInputValue = ''
-        this.showList = false
-      }
 
-      this.isEdit = true
-      // 重置下拉菜单选中信息
-      this.focusItemIndex = this.allowCreate ? -1 : 0
+        this.isEdit = true
+        // 重置下拉菜单选中信息
+        this.focusItemIndex = this.allowCreate ? -1 : 0
+      })
     },
     handleFocus (event) {
       this.isCanRemoveTag = true

From 78dec09df0f281a6292c97e48a9b00e30a7d4372 Mon Sep 17 00:00:00 2001
From: ielgnaw <wuji0223@gmail.com>
Date: Wed, 21 Jun 2023 17:35:39 +0800
Subject: [PATCH 6/6] feat: bump to 2.5.6

---
 example/components/button/example.vue  |  31 +++
 example/components/button/readme.md    |   3 +
 example/components/changelog/readme.md |  19 +-
 example/components/install/readme.md   |   2 +-
 example/components/table/example.vue   | 259 ++++++++++++++++---------
 package.json                           |   2 +-
 single.html                            |   3 +-
 src/components/table/table-layout.js   |  25 ++-
 src/ui/button.css                      |   6 +-
 src/ui/mixins/create-button.css        |  39 +++-
 10 files changed, 256 insertions(+), 133 deletions(-)

diff --git a/example/components/button/example.vue b/example/components/button/example.vue
index 3aec546..ff4247d 100644
--- a/example/components/button/example.vue
+++ b/example/components/button/example.vue
@@ -124,6 +124,37 @@
         user
       </bk-button>
     </div>
+    <div class="example-item">
+      <bk-button theme="default" title="loading 按钮" :loading="true" :outline="true">
+        loading 按钮
+      </bk-button>
+      <div style="height: 30px" />
+      <bk-button theme="primary" title="loading 按钮" :loading="true" :outline="true">
+        loading 按钮
+      </bk-button>
+      <div style="height: 30px" />
+      <bk-button theme="success" title="loading 按钮" :loading="true" :outline="true">
+        loading 按钮
+      </bk-button>
+      <div style="height: 30px" />
+      <bk-button theme="warning" title="loading 按钮" :loading="true" :outline="true">
+        loading 按钮
+      </bk-button>
+      <div style="height: 30px" />
+      <bk-button theme="danger" title="loading 按钮" :loading="true" :outline="true">
+        loading 按钮
+      </bk-button>
+      <div style="height: 30px" />
+      <bk-button theme="primary" title="loading 按钮" :hover-theme="'warning'" :loading="true">
+        111
+      </bk-button>
+      <bk-button theme="primary" title="loading 按钮" :loading="true">
+        222
+      </bk-button>
+      <bk-button theme="primary" title="loading 按钮">
+        333
+      </bk-button>
+    </div>
   </section>
 </template>
 
diff --git a/example/components/button/readme.md b/example/components/button/readme.md
index 973ed6d..2e8799f 100644
--- a/example/components/button/readme.md
+++ b/example/components/button/readme.md
@@ -315,6 +315,9 @@
     <bk-button theme="primary" title="反色按钮" :outline="true">
         反色按钮
     </bk-button>
+    <bk-button theme="primary" title="反色按钮" :outline="true" :loading="true">
+        反色按钮
+    </bk-button>
 </template>
 <script>
     import { bkButton } from '{{BASE_LIB_NAME}}'
diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
index 1c8e58f..175bd3b 100644
--- a/example/components/changelog/readme.md
+++ b/example/components/changelog/readme.md
@@ -8,24 +8,17 @@
 
 <div class="changelog-wrapper">
 
-### 2.5.6-beta.3 {page=#/changelog}
-
-* **[fix]**:
-    - [SearchSelect 查询选择器](#/searchselect) 修复 window 系统中，中文输入法的情况下，输入后直接回车数据展示问题
-
----
-
-### 2.5.6-beta.2 {page=#/changelog}
+### 2.5.6 {page=#/changelog}
+###### 2023.06.21
 
 * **[add]**:
+    - [TagInput 标签输入框](#/tag-input): 添加动态列表的功能
     - 添加 isMaskShown 方法，用于检测当前页面遮罩是否弹出
-
----
-
-### 2.5.6-beta.1 {page=#/changelog}
-
 * **[fix]**:
+    - [SearchSelect 查询选择器](#/searchselect) 修复 window 系统中，中文输入法的情况下，输入后直接回车数据展示问题
     - [Sideslider 侧栏](#/sideslider) 修复侧边栏宽度仅支持数字的问题
+    - [ Table表格](#/table) 修复设置 fixed 属性时，页面宽度变化不能及时响应重新绘制的问题 [#387](https://github.com/TencentBlueKing/bkui-vue2/issues/387)
+    - [Button 基础按钮](#/button) 修复 outline 与 loading 同时为 true 时, loading 指示器不可见的问题 [#404](https://github.com/TencentBlueKing/bkui-vue2/issues/404)
 
 ---
 
diff --git a/example/components/install/readme.md b/example/components/install/readme.md
index d2ce5bb..1f2d825 100644
--- a/example/components/install/readme.md
+++ b/example/components/install/readme.md
@@ -55,7 +55,7 @@
             </bk-popover>
         </div>
         <!-- 引入 Vue -->
-        <script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
+        <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-5-y/vue/2.5.22/vue.js"></script>
         <!-- 引入 bk-magic-vue 组件库 -->
         <script src="https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/bk-magic-vue.js"></script>
         <script type="text/javascript">
diff --git a/example/components/table/example.vue b/example/components/table/example.vue
index d54215c..5fd2e94 100644
--- a/example/components/table/example.vue
+++ b/example/components/table/example.vue
@@ -27,125 +27,190 @@
 -->
 
 <template>
-  <bk-table class="my-table" ref="filterTable" :data="tableData" style="width: 100%"
-    auto-scroll-to-top
-    :max-height="400"
-    @page-change="handlePageChange"
-    @page-limit-change="handlePageLimitChange">
-    <bk-table-column type="expand" width="30" :before-expand-change="beforeExpand"></bk-table-column>
-    <bk-table-column prop="date" label="日期" sortable width="180" column-key="date"
-      :filters="dateFilters" :filter-method="filterHandler">
-    </bk-table-column>
-    <bk-table-column prop="name" label="姓名" width="180">
-    </bk-table-column>
-    <bk-table-column prop="address" label="地址" :formatter="formatter">
-    </bk-table-column>
-  </bk-table>
+  <div>
+    <bk-table :row-auto-height="true" style="margin-top: 15px;" :data="data" :size="size" :pagination="pagination"
+      @page-change="handlePageChange" @page-limit-change="handlePageLimitChange">
+      <bk-table-column type="selection" width="60" fixed="left"></bk-table-column>
+      <bk-table-column type="index" label="序列" width="60"></bk-table-column>
+      <bk-table-column label="名称/内网IP" width="130" prop="ip"></bk-table-column>
+      <bk-table-column label="来源" width="130" prop="source"></bk-table-column>
+      <bk-table-column label="状态" width="130" prop="status"></bk-table-column>
+      <bk-table-column label="创建时间" width="130" prop="create_time"></bk-table-column>
+      <bk-table-column label="操作" width="130" fixed="right">
+        <template slot-scope="props">
+          <bk-button class="mr10" theme="primary" text :disabled="props.row.status === '创建中'"
+            @click="reset(props.row)">重置</bk-button>
+          <bk-button class="mr10" theme="primary" text @click="remove(props.row)">移除</bk-button>
+          <bk-popover class="dot-menu" placement="bottom-start" theme="dot-menu light" trigger="click"
+            :arrow="false" offset="15" :distance="0">
+            <span class="dot-menu-trigger"></span>
+            <ul class="dot-menu-list" slot="content">
+              <li class="dot-menu-item">导入</li>
+              <li class="dot-menu-item">导出</li>
+            </ul>
+          </bk-popover>
+        </template>
+      </bk-table-column>
+    </bk-table>
+  </div>
 </template>
 <script>
-import { bkTable, bkTableColumn } from '@'
+import { bkTable, bkTableColumn, bkButton, bkPopover } from '@'
+
 export default {
   components: {
     bkTable,
-    bkTableColumn
+    bkTableColumn,
+    bkButton,
+    bkPopover
   },
   data () {
     return {
-      dateFilters: [
-        { text: '2016-05-01', value: '2016-05-01' },
-        { text: '2016-05-02', value: '2016-05-02' },
-        { text: '2016-05-03', value: '2016-05-03' },
-        { text: '2016-05-04', value: '2016-05-04' }
+      size: 'small',
+      data: [
+        {
+          ip: '192.168.0.1',
+          source: 'QQ',
+          status: '创建中',
+          create_time: '2018-05-25 15:02:24',
+          children: [
+            {
+              name: '用户管理',
+              count: '23',
+              creator: 'person2',
+              create_time: '2017-10-10 11:12',
+              desc: '用户管理'
+            },
+            {
+              name: '模块管理',
+              count: '2',
+              creator: 'person1',
+              create_time: '2017-10-10 11:12',
+              desc: '无数据测试'
+            }
+          ]
+        },
+        {
+          ip: '192.168.0.2',
+          source: '微信',
+          status: '正常',
+          create_time: '2018-05-25 15:02:24',
+          children: [
+            {
+              name: '用户管理',
+              count: '23',
+              creator: 'person2',
+              create_time: '2017-10-10 11:12',
+              desc: '用户管理'
+            },
+            {
+              name: '模块管理',
+              count: '2',
+              creator: 'person1',
+              create_time: '2017-10-10 11:12',
+              desc: '无数据测试'
+            }
+          ]
+        },
+        {
+          ip: '192.168.0.3',
+          source: 'QQ',
+          status: '创建中',
+          create_time: '2018-05-25 15:02:24',
+          children: [
+            {
+              name: '用户管理',
+              count: '23',
+              creator: 'person2',
+              create_time: '2017-10-10 11:12',
+              desc: '用户管理'
+            },
+            {
+              name: '模块管理',
+              count: '2',
+              creator: 'person1',
+              create_time: '2017-10-10 11:12',
+              desc: '无数据测试'
+            }
+          ]
+        }
       ],
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-        tag: '家'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄',
-        tag: '公司'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄',
-        tag: '家'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄',
-        tag: '公司'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄',
-        tag: '公司'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄',
-        tag: '公司'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄',
-        tag: '公司'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄',
-        tag: '公司'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄',
-        tag: '公司'
-      }],
       pagination: {
         current: 1,
-        count: 100,
-        limit: 10,
-        small: false
+        count: 500,
+        limit: 20
       }
     }
   },
   methods: {
-    resetDateFilter () {
-      this.$refs.filterTable.clearFilter('date')
-    },
-    clearFilter () {
-      this.$refs.filterTable.clearFilter()
-    },
-    formatter (row, column) {
-      return row.address
+    handlePageLimitChange () {
+      console.log('handlePageLimitChange', arguments)
     },
-    filterTag (value, row) {
-      return row.tag === value
-    },
-    filterHandler (value, row, column) {
-      const property = column['property']
-      return row[property] === value
-    },
-    beforeExpand ({ row, $index }) {
-      return !!$index
+    toggleTableSize () {
+      const size = ['small', 'medium', 'large']
+      const index = (size.indexOf(this.size) + 1) % 3
+      this.size = size[index]
     },
     handlePageChange (page) {
       this.pagination.current = page
-    },
-    handlePageLimitChange (limit) {
-      this.pagination.current = 1
-      this.pagination.limit = limit
     }
   }
 }
 </script>
+
 <style lang="postcss">
-    .my-table {
-        th {
-            background-color: #f0f1f5;
-            /* background-color: #fafbfd; */
-        }
-    }
+  .dot-menu {
+      display: inline-block;
+      vertical-align: middle;
+  }
+
+  .tippy-tooltip.dot-menu-theme {
+      padding: 0;
+  }
+
+  .dot-menu-trigger {
+      display: block;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 50%;
+      text-align: center;
+      font-size: 0;
+      color: #979BA5;
+      cursor: pointer;
+  }
+
+  .dot-menu-trigger:hover {
+      color: #3A84FF;
+      background-color: #EBECF0;
+  }
+
+  .dot-menu-trigger:before {
+      content: "";
+      display: inline-block;
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      background-color: currentColor;
+      box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
+  }
+
+  .dot-menu-list {
+      margin: 0;
+      padding: 5px 0;
+      min-width: 50px;
+      list-style: none;
+  }
+
+  .dot-menu-list .dot-menu-item {
+      padding: 0 10px;
+      font-size: 12px;
+      line-height: 26px;
+      cursor: pointer;
+
+      &:hover {
+          background-color: #eaf3ff;
+          color: #3a84ff;
+      }
+  }
 </style>
diff --git a/package.json b/package.json
index 99acae1..aeda918 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bk-magic-vue",
-  "version": "2.5.6-beta.3",
+  "version": "2.5.6",
   "description": "基于蓝鲸 Magicbox 和 Vue 的前端组件库",
   "main": "dist/bk-magic-vue.min.js",
   "files": [
diff --git a/single.html b/single.html
index 1a017aa..038e8d2 100644
--- a/single.html
+++ b/single.html
@@ -78,7 +78,7 @@
             }
         </style>
         <!-- 引入 Vue -->
-        <script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
+        <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-5-y/vue/2.5.22/vue.js"></script>
         <!-- 引入 bk-magic-vue 组件库 -->
         <script src="./dist/bk-magic-vue.js"></script>
     </head>
@@ -263,7 +263,6 @@
 
             bkMagicVue.locale.use(bkMagicVue.lang['enUS'])
 
-
             Vue.mixin(bkMagicVue.locale.mixin)
 
             const remoteLen = 50
diff --git a/src/components/table/table-layout.js b/src/components/table/table-layout.js
index d96e065..086fabc 100644
--- a/src/components/table/table-layout.js
+++ b/src/components/table/table-layout.js
@@ -131,16 +131,21 @@ class TableLayout {
     ) {
       return Vue.nextTick(() => this.updateElsHeight())
     }
-    const tableHeight = (this.tableHeight = this.table.$el.offsetHeight - this.paginationHeight)
-    const footerHeight = (this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0)
-    this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0)
-    this.fixedBodyHeight = this.scrollX ? this.bodyHeight - this.gutterWidth : this.bodyHeight
-
-    const noData = !this.table.data || this.table.data.length === 0
-    this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight
-    this.syncRowHeight()
-    this.updateScrollY()
-    this.notifyObservers('scrollable')
+
+    // setTimeout 0 for https://github.com/TencentBlueKing/bkui-vue2/issues/387
+    setTimeout(() => {
+      const tableHeight = (this.tableHeight = this.table.$el.offsetHeight - this.paginationHeight)
+      console.warn(`this.table.$el.offsetHeight: ${this.table.$el.offsetHeight} --- this.paginationHeight: ${this.paginationHeight} --- tableHeight: ${tableHeight}`)
+      const footerHeight = (this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0)
+      this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0)
+      this.fixedBodyHeight = this.scrollX ? this.bodyHeight - this.gutterWidth : this.bodyHeight
+
+      const noData = !this.table.data || this.table.data.length === 0
+      this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight
+      this.syncRowHeight()
+      this.updateScrollY()
+      this.notifyObservers('scrollable')
+    }, 0)
   }
 
   getFlattenColumns () {
diff --git a/src/ui/button.css b/src/ui/button.css
index 0968150..9f2a4de 100644
--- a/src/ui/button.css
+++ b/src/ui/button.css
@@ -208,7 +208,7 @@
     outline: none;
     height: 22px;
     padding: 0;
-    
+
     .bk-loading-wrapper {
         display: inline-block;
     }
@@ -447,6 +447,10 @@
     transition: background-color ease 0.3s;
     min-width: 68px;
 
+    .bk-loading-wrapper {
+        opacity: 0;
+    }
+
     .bk-button-loading {
         width: 58px;
         display: inline-block;
diff --git a/src/ui/mixins/create-button.css b/src/ui/mixins/create-button.css
index a13dfbc..65d1b04 100644
--- a/src/ui/mixins/create-button.css
+++ b/src/ui/mixins/create-button.css
@@ -34,18 +34,41 @@
     }
 
     &.is-loading {
-        cursor: default;
+      cursor: default;
+      &:hover,
+      &.hover {
+          background-color: $color;
+          border-color: $color;
+          opacity: 1;
+      }
+      &:active,
+      &.active {
+          background-color: $color;
+          border-color: $color;
+      }
+      &.is-outline {
+        .bk-button-loading {
+          div {
+            background-color: $color;
+          }
+        }
         &:hover,
         &.hover {
-            background-color: $color;
-            border-color: $color;
-            opacity: 1;
+          .bk-button-loading {
+            div {
+              background-color: #fff;
+            }
+          }
         }
-        &:active,
-        &.active {
-            background-color: $color;
-            border-color: $color;
+        &.active,
+        &:active {
+          .bk-button-loading {
+            div {
+              background-color: #fff;
+            }
+          }
         }
+      }
     }
 
     &.is-outline {