feat(docs): 添加api表格，更新文档

docs/.press/components/doc-card/index.ts

@@ -0,0 +1,3 @@
+import DocCard from './src/doc-card.vue'
+
+export {DocCard}

docs/.press/components/doc-card/src/doc-card.vue

@@ -0,0 +1,50 @@
+<template>
+    <h2>Props : {{ api.propsExtends?.join(',') }}</h2>
+    <table data-fill-width>
+        <thead>
+        <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认</th>
+        </tr>
+        </thead>
+        <tr v-for="p in api.props">
+            <td>{{ p.name }}</td>
+            <td>{{ p.description }}</td>
+            <td>{{ p.type }}</td>
+            <td></td>
+        </tr>
+    </table>
+</template>
+
+<style lang="scss" scoped>
+table {
+    border-collapse: collapse;
+}
+
+td, th {
+    border-bottom: 1px solid var(--h-color-primary);
+    border-left: 1px solid grey;
+    border-right: 1px solid grey;
+    border-top: 1px solid var(--h-color-primary);
+
+    &:first-child {
+        border-left: none;
+    }
+
+    &:last-child {
+        border-right: none;
+    }
+
+}
+
+</style>
+
+<script lang="ts" setup>
+import type {VueComponent} from '../../../../../packages/build-utils/webtypes'
+
+defineProps<{
+    api: VueComponent
+}>()
+</script>

docs/.press/components/index.ts

@@ -1,5 +1,6 @@
 export * from './case-card'
 export * from './code-box'
+export * from './doc-card'
 export * from './page-header'
 export * from './side-bar'
 export * from './statistics-chart'

docs/.press/plugin/press/md-doc-card.ts

@@ -0,0 +1,34 @@
+import MarkdownIt from 'markdown-it'
+
+import {getVueComponent, setPathRoot} from '../../../../packages/build-utils/webtypes'
+
+import {filter} from './utils'
+import {VueMdEnv} from './vue-tool'
+
+const CASE_REG = /\[:api=(?<name>.+?)]/
+
+setPathRoot('../packages')
+
+export function mdDocCardPlugin(md: MarkdownIt): void {
+    md.core.ruler.push('doc-card', (state) => {
+        let {imports, components, codes} = state.env as VueMdEnv
+        filter(state.tokens, 'text').forEach((t) => {
+            if (t.content.includes('[:api=')) {
+                let parts = t.content.split(CASE_REG)
+                if (parts.length > 1) {
+                    t.type = 'doc-card'
+                    t.block = true
+                    t.children = []
+                    components.add('DocCard')
+                    let c = getVueComponent(parts[1])
+                    imports.add('const api=' + JSON.stringify(c))
+                }
+            }
+        })
+    })
+
+    md.renderer.rules['doc-card'] = (tokens, idx, options, env, self) => {
+        return `<doc-card :api="api"/>`
+    }
+
+}

docs/.press/plugin/press/vue-tool.ts

@@ -7,6 +7,7 @@ import {mdCodePlugin} from './md-code'
 import {mdLinkPlugin} from './md-link'
 import {mdVueComponentPlugin} from './md-vue-component'
 import {convertToBigCamel, exists, readText} from './utils'
+import {mdDocCardPlugin} from './md-doc-card'
 
 
 export declare interface VueMdEnv {
@@ -106,5 +107,6 @@ md.use(md => {
 
 md.use(mdLinkPlugin)
 md.use(mdVueComponentPlugin)
+md.use(mdDocCardPlugin)
 md.use(mdCaseCardPlugin)
 md.use(mdCodePlugin)

docs/components/button/index.md

@@ -50,3 +50,5 @@ title: H-UI-Button
 禁用只需加上`disabled`属性即可。
 
 [.shadows]
+
+[:api=button]

docs/components/check-box/index.md

@@ -23,3 +23,5 @@ title: H-UI-Checkbox
 - `xlarge`
 
 [.sizes]
+
+[:api=check-box]

docs/components/switch/index.md

@@ -18,3 +18,5 @@ title: H-UI-Switch
 ## 大小
 
 [.sizes]
+
+[:api=switch]