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`)
+> 一条华丽丽的虚线。
+
+
+### 使用
+
+
+
+import '//jscdn.ink/@bd/ui/latest/divider/index.js'
+
+
+
+
+
+
+
+### 分割线内容
+
+可以给分割线加任意内容, 也可以通过`align=left/right`指定内容的对齐方式(默认居中)。
+
+
+
+import '//jscdn.ink/@bd/ui/latest/divider/index.js'
+import '//jscdn.ink/@bd/ui/latest/icon/index.js'
+
+
+我是一条华丽丽的分割线
+文字在左边
+文字在右边
+我还有个小图标
+
+
\ 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 开始。
+
+
+
+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
+})
+
+
+
+
+
+
+
+
+下一步
+重置
+
+
+
+
+### 竖向的步骤条
+
+只需要加个`vertical`属性,即可一键调整为纵向布局。
+
+
+
+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
+})
+
+
+
+
+
+
+
+
+下一步
+重置
+
+
+
+
+### 特殊功能
+
+默认步骤的序号是自动生成的数字, 如果有需要, 可以自行换成图标, 只需要设置`icon`属性即可。
+
+
+
+import '//jscdn.ink/@bd/ui/latest/steps/index.js'
+
+
+
+
+
+
+
+
+
\ 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 @@
+
+ 我是有底线的
+
+
+ 文档最后更新于: {{ lastModified }}
+
@@ -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);
+ }
+}