Menu,Breadcrumb,Steps,Tabs: update doc and fix style

examples/docs/breadcrumb.md

@@ -1,5 +1,5 @@
 ## Breadcrumb 面包屑
-显示当前页面的路径，快速返回之前的任意页面
+显示当前页面的路径，快速返回之前的任意页面。
 
 ### 基础用法
 
@@ -9,10 +9,10 @@
 
 ```html
 <el-breadcrumb separator="/">
-  <el-breadcrumb-item>Home</el-breadcrumb-item>
+  <el-breadcrumb-item>首页</el-breadcrumb-item>
-  <el-breadcrumb-item>Page 1</el-breadcrumb-item>
+  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
-  <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
-  <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
 </el-breadcrumb>
 ```
 :::

examples/docs/menu.md

@@ -52,7 +52,7 @@
 
 ## NavMenu 导航菜单
 
-为网站提供导航功能的菜单
+为网站提供导航功能的菜单。
 
 ### 顶栏
 

examples/docs/steps.md

@@ -15,11 +15,11 @@
 </script>
 
 ## Steps 步骤条
-引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步
+引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
 
-### 基础步骤条
+### 基础用法
 
-下两例分别展示了定宽的步骤条和自适应的步骤条：
+简单的步骤条。
 
 :::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
 ```html
@@ -29,7 +29,7 @@
   <el-step title="步骤 3"></el-step>
 </el-steps>
 
-<el-button @click.native="next">下一步</el-button>
+<el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
 
 <script>
   export default {
@@ -49,19 +49,9 @@
 ```
 :::
 
-:::demo Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
+### 含状态步骤条
-```html
-<el-steps :active="1" process-status="error">
-  <el-step title="步骤 1"></el-step>
-  <el-step title="步骤 2"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
-```
-:::
 
-### 状态与描述
+每一步骤显示出该步骤的状态。
-
-Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 
 :::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
 ```html
@@ -73,7 +63,9 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 ```
 :::
 
-除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
+### 有描述的步骤条
+
+每个步骤有其对应的步骤状态描述。
 
 :::demo
 ```html
@@ -86,6 +78,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 :::
 
 ### 带图标的步骤条
+步骤条内可以启用各种自定义的图标。
 
 :::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
 ```html
@@ -99,7 +92,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 
 ### 竖式步骤条
 
-默认情况下，步骤条为横向显示，也可以显示竖向显示的步骤条。
+竖直方向的步骤条。
 
 :::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
 ```html

examples/docs/tabs.md

@@ -2,20 +2,7 @@
   export default {
     data() {
       return {
-        tabs: [{
+        activeName: 'first',
-          title: '选项卡一',
-          content: '选项卡一内容'
-        },{
-          title: '选项卡二',
-          content: '选项卡二内容'
-        },{
-          title: '选项卡三',
-          content: '选项卡三内容'
-        },{
-          title: '选项卡四',
-          content: '选项卡四内容'
-        }],
-        activeName: 'two',
         activeName2: ''
       }
     },
@@ -35,7 +22,7 @@
   }
 </style>
 ## Tabs 标签页
-分隔内容上有关联但属于不同类别的数据集合
+分隔内容上有关联但属于不同类别的数据集合。
 
 ### 基础用法
 
@@ -46,17 +33,17 @@
 ```html
 <template>
   <el-tabs :active-name="activeName">
-    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane name="first" label="用户管理"></el-tab-pane>
-    <el-tab-pane name="two" label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="配置管理"></el-tab-pane>
-    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="角色管理"></el-tab-pane>
-    <el-tab-pane label="选项卡四"></el-tab-pane>
+    <el-tab-pane label="定时任务补偿"></el-tab-pane>
   </el-tabs>
 </template>
 <script>
   export default {
     data() {
       return {
-        activeName: 'two'
+        activeName: 'first'
       };
     }
   };
@@ -73,10 +60,10 @@
 ```html
 <template>
   <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane label="用户管理"></el-tab-pane>
-    <el-tab-pane label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="配置管理"></el-tab-pane>
-    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="角色管理"></el-tab-pane>
-    <el-tab-pane label="选项卡四"></el-tab-pane>
+    <el-tab-pane label="定时任务补偿"></el-tab-pane>
   </el-tabs>
 </template>
 <script>
@@ -96,17 +83,17 @@
 
 ### 可关闭
 
-可以关闭标签页
+可以关闭标签页。
 
 :::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
 
 ```html
 <template>
   <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane label="用户管理"></el-tab-pane>
-    <el-tab-pane label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="配置管理"></el-tab-pane>
-    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="角色管理"></el-tab-pane>
-    <el-tab-pane label="选项卡四"></el-tab-pane>
+    <el-tab-pane label="定时任务补偿"></el-tab-pane>
   </el-tabs>
 </template>
 <script>
@@ -131,10 +118,10 @@
 :::demo 将`type`设置为`border-card`。
 ```html
 <el-tabs type="border-card">
-  <el-tab-pane label="选项卡一"></el-tab-pane>
+  <el-tab-pane label="用户管理"></el-tab-pane>
-  <el-tab-pane label="选项卡二"></el-tab-pane>
+  <el-tab-pane label="配置管理"></el-tab-pane>
-  <el-tab-pane label="选项卡三"></el-tab-pane>
+  <el-tab-pane label="角色管理"></el-tab-pane>
-  <el-tab-pane label="选项卡四"></el-tab-pane>
+  <el-tab-pane label="定时任务补偿"></el-tab-pane>
 </el-tabs>
 ```
 :::

packages/steps/src/step.vue

@@ -112,7 +112,9 @@ export default {
       this.style = { width: space };
       // this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
     } else {
-      this.style = { height: space };
+      if (parent.steps[parent.steps.length - 1] !== this) {
+        this.style = { height: space };
+      }
     }
 
     const unwatch = this.$watch('index', val => {

packages/theme-default/src/step.css

@@ -19,6 +19,10 @@
       & .el-step__main {
         padding-left: 10px;
       }
+
+      & .el-step__description {
+        width: 300px;
+      }
     }
 
     @e line {

packages/theme-default/src/tooltip.css

@@ -16,7 +16,7 @@
       padding: var(--tooltip-padding);
       z-index: var(--index-popper);
       font-size: var(--tooltip-font-size);
-      line-height: 1;
+      line-height: 1.2;
 
       .popper__arrow,
       .popper__arrow::after {