From d57ec7b24bfacd7360628e71f20b585a00310d28 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 28 Apr 2023 19:00:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E5=89=B2=E7=BA=BF?=
 =?UTF-8?q?=E5=92=8C=E6=AD=A5=E9=AA=A4=E6=9D=A1=E7=9A=84=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?;=20=E6=96=87=E6=A1=A3=E6=98=BE=E7=A4=BA=E6=9C=80=E5=90=8E?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/docset/ui/wc-divider.md | 32 +++++++++++++
 public/docset/ui/wc-steps.md   | 88 ++++++++++++++++++++++++++++++++++
 src/pages/@wcui/docs/app.vue   | 28 ++++++++++-
 src/pages/@wcui/docs/main.js   |  2 +
 4 files changed, 148 insertions(+), 2 deletions(-)
 create mode 100644 public/docset/ui/wc-divider.md
 create mode 100644 public/docset/ui/wc-steps.md

diff --git a/public/docset/ui/wc-divider.md b/public/docset/ui/wc-divider.md
new file mode 100644
index 0000000..543ca0c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/docset/ui/wc-steps.md b/public/docset/ui/wc-steps.md
new file mode 100644
index 0000000..64153a0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/@wcui/docs/app.vue b/src/pages/@wcui/docs/app.vue
index de4e370..162d2f2 100644
--- a/src/pages/@wcui/docs/app.vue
+++ b/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>
diff --git a/src/pages/@wcui/docs/main.js b/src/pages/@wcui/docs/main.js
index eb4061b..7c61d5e 100644
--- a/src/pages/@wcui/docs/main.js
+++ b/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'