bd
/
official
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新文档

master
yutent 2023-04-21 14:48:53 +08:00
parent 1ae58175a9
commit 8f1548e52b
9 changed files with 205 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -12,7 +12,7 @@
<script type="importmap">{{importmap}}</script> <script type="importmap">{{importmap}}</script>
</head> </head>
<body> <body>
<div class="app noselect"></div> <div id="app"></div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

1
public/docset/ui/logs.md Normal file
View File

@ -0,0 +1 @@
## 0.1.3 - 2023/4/21

52
src/pages/@wcui/docs/app.vue
View File

@ -1,12 +1,41 @@
<template> <template>
<Topbar nav="docs" /> <Topbar nav="docs" />
<main class="body">
<Menu />
<wc-scroll class="content" ref="detail">
<wc-markd class="detail" :code="docset"></wc-markd>
</wc-scroll>
</main>
</template> </template>
<script> <script>
import Topbar from '../index/components/topbar.vue' import Topbar from '../index/components/topbar.vue'
import Menu from './components/aside.vue'
import fetch from 'fetch'
export default { export default {
components: { components: {
Topbar Topbar,
Menu
},
data() {
return {
docset: ''
}
},
mounted() {
let key = location.search.slice(1)
fetch(`/docset/ui/${key}.md`)
.then(r => r.text())
.then(r => {
this.docset = r
})
.catch(r => {
this.docset = 'Oops!!! 你要浏览的文档, 被外星人吃了~~'
})
} }
} }
</script> </script>
@ -21,4 +50,25 @@ a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
#app {
display: flex;
flex-direction: column;
height: 100vh;
}
</style>
<style scoped>
.body {
flex: 1;
display: flex;
}
.content {
flex: 1;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
</style> </style>

146
src/pages/@wcui/docs/components/aside.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<wc-scroll class="tree-box noselect">
<dl class="chapters">
<dt class="title">
<a
v-for="it in menu.base"
:class="{ a: id === it.id }"
:href="'?' + it.id"
>
<span>{{ it.name }}</span>
<em>{{ it.id }}</em>
</a>
</dt>
<dt class="title">表单组件</dt>
<dd class="subtitle">
<a
class="text-ell"
v-for="it in menu.form"
:class="{ a: id === it.id }"
:href="'?' + it.id"
>
<span>{{ it.name }}</span>
<em>{{ it.id }}</em>
</a>
</dd>
<dt class="title">数据组件</dt>
<dd class="subtitle">
<a
class="text-ell"
v-for="it in menu.data"
:class="{ a: id === it.id }"
:href="'?' + it.id"
>
<span>{{ it.name }}</span>
<em>{{ it.id }}</em>
</a>
</dd>
<dt class="title">其他组件</dt>
<dd class="subtitle">
<a
class="text-ell"
v-for="it in menu.other"
:class="{ a: id === it.id }"
:href="'?' + it.id"
>
<span>{{ it.name }}</span>
<em>{{ it.id }}</em>
</a>
</dd>
</dl>
</wc-scroll>
</template>
<script>
export default {
data() {
return {
id: 'logs',
menu: {
base: [
{ id: 'logs', name: '更新日志' },
{ id: 'install', name: '安装' },
{ id: 'colors', name: '配色' },
{ id: 'icons', name: '图标' }
],
form: [
{ id: 'wc-button', name: '按钮' },
{ id: 'wc-link', name: '超连接' },
{ id: 'wc-input', name: '文本框' },
{ id: 'wc-passwd', name: '密码框' },
{ id: 'wc-number', name: '数字文本框' },
{ id: 'wc-textarea', name: '文本域' },
{ id: 'wc-select', name: '选择框' },
{ id: 'wc-switch', name: '开关' },
{ id: 'wc-radio', name: '单选框' },
{ id: 'wc-checkbox', name: '复选框' },
{ id: 'wc-star', name: '评分条' },
{ id: 'wc-slider', name: '滑块' },
{ id: 'wc-color', name: '取色器' }
],
data: [
{ id: 'wc-progress', name: '进度条' },
{ id: 'wc-table', name: '表格' },
{ id: 'wc-tree', name: '树形菜单' },
{ id: 'wc-pager', name: '分页' },
{ id: 'wc-dropdown', name: '下拉菜单' }
],
other: [
{ id: 'wc-layer', name: '弹层' },
{ id: 'wc-scroll', name: '滚动条' },
{ id: 'wc-code', name: '代码块' },
{ id: 'wc-markd', name: 'MD渲染组件' },
{ id: 'wc-meditor', name: 'MD编辑器' },
{ id: 'wc-editor', name: '富文本编辑器' },
{ id: 'wc-badge', name: '标记' }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.tree-box {
width: 220px;
height: 100%;
.chapters {
padding: 32px;
line-height: 2;
border-right: 1px solid var(--color-plain-2);
background: #fff;
color: var(--color-grey-3);
.title {
a {
color: var(--color-dark-2);
}
}
.subtitle {
padding-left: 12px;
color: var(--color-dark-2);
}
a {
display: block;
span {
}
em {
margin-left: 8px;
font-style: normal;
font-size: 12px;
color: var(--color-grey-2);
}
&:hover,
&:hover em,
&.a,
&.a em {
color: var(--color-red-1);
}
}
}
}
</style>

2
src/pages/@wcui/docs/main.js
View File

@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
const app = createApp(App) const app = createApp(App)
app.mount('.app') app.mount('#app')

2
src/pages/@wcui/index/main.js
View File

@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
const app = createApp(App) const app = createApp(App)
app.mount('.app') app.mount('#app')

2
src/pages/index/app.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<h1>it works!</h1> <h1>it works!</h1>
<div> <div>
<wc-link to="/@wcui/index.html">@wcui</wc-link>
<wc-link to="/@wcui/docs.html">@wcui/docs</wc-link>
<wc-link to="/playground.html">plyaground</wc-link> <wc-link to="/playground.html">plyaground</wc-link>
</div> </div>
</template> </template>

2
src/pages/index/main.js
View File

@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
const app = createApp(App) const app = createApp(App)
app.mount('.app') app.mount('#app')

2
src/pages/playground/main.js
View File

@ -5,4 +5,4 @@ import store from './store'
const app = createApp(App) const app = createApp(App)
app.use(store).mount('.app') app.use(store).mount('#app')