增加分割线和步骤条的文档; 文档显示最后更新时间

public/docset/ui/wc-divider.md

@@ -0,0 +1,32 @@
+## 分割线 (`wc-divider`)
+> 一条华丽丽的虚线。
+
+
+### 使用
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/divider/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-divider></wc-divider>
+  </wc-lang>
+</wc-sandbox>
+
+
+### 分割线内容
+
+可以给分割线加任意内容, 也可以通过`align=left/right`指定内容的对齐方式(默认居中)。
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/divider/index.js'
+import '//jscdn.ink/@bd/ui/latest/icon/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-divider>我是一条华丽丽的分割线</wc-divider>
+<wc-divider align="left">文字在左边</wc-divider>
+<wc-divider align="right">文字在右边</wc-divider>
+<wc-divider>我还有个小图标<wc-icon name="star" size="s"></wc-icon></wc-divider>
+  </wc-lang>
+</wc-sandbox>

public/docset/ui/wc-steps.md

@@ -0,0 +1,88 @@
+## 步骤条 (`wc-steps`)
+> 引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。
+
+
+### 基础用法
+
+设置 `active` 属性，接受一个 `Number`，表明步骤的序号，从 0 开始。 
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/steps/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+import { $, bind } from '@bd/core'
+
+let next = $('.next')
+let reset = $('.reset')
+let steps = $('wc-steps')
+
+bind(next, 'click', ev => {
+  steps.active += 1
+})
+bind(reset, 'click', ev => {
+  steps.active = 0
+})
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-steps>
+  <wc-step title="步骤1" description="步骤1 的说明"></wc-step>
+  <wc-step title="步骤2" description="步骤2 的说明"></wc-step>
+  <wc-step title="步骤3" description="步骤3 的说明"></wc-step>
+</wc-steps>
+
+<wc-button class="next">下一步</wc-button>
+<wc-button class="reset">重置</wc-button>
+  </wc-lang>
+</wc-sandbox>
+
+
+### 竖向的步骤条
+
+只需要加个`vertical`属性,即可一键调整为纵向布局。
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/steps/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+import { $, bind } from '@bd/core'
+
+let next = $('.next')
+let reset = $('.reset')
+let steps = $('wc-steps')
+
+bind(next, 'click', ev => {
+  steps.active += 1
+})
+bind(reset, 'click', ev => {
+  steps.active = 0
+})
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-steps vertical>
+  <wc-step title="步骤1" description="步骤1 的说明"></wc-step>
+  <wc-step title="步骤2" description="步骤2 的说明"></wc-step>
+  <wc-step title="步骤3" description="步骤3 的说明"></wc-step>
+</wc-steps>
+
+<wc-button class="next">下一步</wc-button>
+<wc-button class="reset">重置</wc-button>
+  </wc-lang>
+</wc-sandbox>
+
+
+### 特殊功能
+
+默认步骤的序号是自动生成的数字, 如果有需要, 可以自行换成图标, 只需要设置`icon`属性即可。
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/steps/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-steps>
+  <wc-step icon="home" title="步骤1" description="步骤1 的说明"></wc-step>
+  <wc-step icon="fly" title="步骤2" description="步骤2 的说明"></wc-step>
+  <wc-step icon="headset" title="步骤3" description="步骤3 的说明"></wc-step>
+</wc-steps>
+  </wc-lang>
+</wc-sandbox>

src/pages/@wcui/docs/app.vue

@@ -4,6 +4,14 @@
     <Menu :nav="nav" />
     <wc-scroll class="content" ref="detail">
       <wc-markd class="detail" :code="docset"></wc-markd>
+
+      <wc-divider>我是有底线的</wc-divider>
+      <section class="last-modified noselect" v-show="lastModified">
+        <wc-icon size="s" name="time"></wc-icon>
+        <span
+          >文档最后更新于: <i>{{ lastModified }}</i></span
+        >
+      </section>
     </wc-scroll>
   </main>
 </template>
@@ -22,7 +30,8 @@ export default {
   data() {
     return {
       nav: 'logs',
-      docset: ''
+      docset: '',
+      lastModified: ''
     }
   },
 
@@ -31,7 +40,12 @@ export default {
     this.nav = key
 
     fetch(`/docset/ui/${key}.md`)
-      .then(r => r.text())
+      .then(r => {
+        this.lastModified = new Date(
+          r.headers.get('last-modified')
+        ).toLocaleString()
+        return r.text()
+      })
       .then(r => {
         this.docset = r
       })
@@ -57,6 +71,16 @@ a {
   flex-direction: column;
   height: 100vh;
 }
+.last-modified {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  padding: 0 32px;
+
+  i {
+    color: var(--color-red-1);
+  }
+}
 </style>
 
 <style scoped>

src/pages/@wcui/docs/main.js

@@ -4,6 +4,8 @@ import App from './app.vue'
 import '//jscdn.ink/@bd/ui/latest/scroll/index.js'
 import '//jscdn.ink/@bd/ui/latest/markd/index.js'
 import '//jscdn.ink/@bd/ui/latest/sandbox/index.js'
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/divider/index.js'
 // import '//127.0.0.1:8090/dist/scroll/index.js'
 // import '//127.0.0.1:8090/dist/markd/index.js'
 // import '//127.0.0.1:8090/dist/sandbox/index.js'