docs: optimize feature list page (#3137)
* docs: optimize feature list page * docs(feature-page): add isCloud popover * docs: add interface IComponentConfig * docs: add badge feature list
This commit is contained in:
GitHub
parent
11a5e37e82
commit
f231b598d1
|
|
@ -130,5 +130,112 @@ export default {
|
||||||
},
|
},
|
||||||
codeFiles: ['offset.vue']
|
codeFiles: ['offset.vue']
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
features: [
|
||||||
|
{
|
||||||
|
id: 'basic',
|
||||||
|
name: '基础',
|
||||||
|
description:
|
||||||
|
'通过 value 设置角标内容（一般是数字），通过 default 插槽或者 data 属性设置需要显示角标的元素或文本。',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
apis: ['value', 'data', '#default'],
|
||||||
|
demos: ['basic-usage', 'slot-default']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'type',
|
||||||
|
name: '类型',
|
||||||
|
description: '支持 primary / success / warning / danger(默认) / info 5种类型。',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
apis: ['type'],
|
||||||
|
demos: ['type']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'dot',
|
||||||
|
name: '小圆点',
|
||||||
|
description: '只显示一个小圆点，不显示数字',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
apis: ['is-dot'],
|
||||||
|
demos: ['is-dot']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'max',
|
||||||
|
name: '最大值',
|
||||||
|
description: '超出最大值会显示 {max}+',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
apis: ['max'],
|
||||||
|
demos: ['max']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'link',
|
||||||
|
name: '超链接',
|
||||||
|
description: '可以设置 href / target 进行超链接跳转，效果同 <a> 标签',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
apis: ['href', 'target'],
|
||||||
|
demos: ['link']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'custom',
|
||||||
|
name: '自定义标记',
|
||||||
|
description: '自定义标记内容和类型',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
apis: ['badge-class', '#content'],
|
||||||
|
demos: ['badge-class', 'slot-content']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'hidden',
|
||||||
|
name: '隐藏标记',
|
||||||
|
description: '动态隐藏标记',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
apis: ['hidden'],
|
||||||
|
demos: ['dynamic-hidden']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'offset',
|
||||||
|
name: '标记位置',
|
||||||
|
description: '标记位置的偏移量，可以设置x、y轴的偏移量，支持字符串、数字、百分比，格式：[0, -8]',
|
||||||
|
support: {
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
cloud: {
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
apis: ['offset'],
|
||||||
|
demos: ['offset']
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -144,8 +144,8 @@ export default {
|
||||||
codeFiles: ['click.vue']
|
codeFiles: ['click.vue']
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
show: true, // 是否展示在官网文档中
|
show: true,
|
||||||
cloud: true, // 是否是规范内的组件
|
cloud: true,
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
id: 'type',
|
id: 'type',
|
||||||
|
|
@ -154,15 +154,12 @@ export default {
|
||||||
value: true
|
value: true
|
||||||
},
|
},
|
||||||
description: '支持主要按钮、次要按钮、成功按钮、警告按钮、危险按钮、信息按钮、文字按钮7种类型。',
|
description: '支持主要按钮、次要按钮、成功按钮、警告按钮、危险按钮、信息按钮、文字按钮7种类型。',
|
||||||
|
|
||||||
// 是否是规范内的特性
|
|
||||||
cloud: {
|
cloud: {
|
||||||
value: true,
|
value: true,
|
||||||
remark: '规范只支持主要按钮、次要按钮、危险按钮、文本按钮4种，不支持成功按钮、警告按钮、信息按钮。' // 有些特性并非全部在规范内，所以需要进行备注
|
remark: '规范只支持主要按钮、次要按钮、危险按钮、文本按钮4种，不支持成功按钮、警告按钮、信息按钮。'
|
||||||
},
|
},
|
||||||
|
apis: ['type'],
|
||||||
apis: ['type'], // 该特性涉及到哪些 API
|
demos: ['basic-usage']
|
||||||
demos: ['basic-usage'] // 该特性在哪些 Demo 中体现
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'round',
|
id: 'round',
|
||||||
|
|
@ -172,7 +169,7 @@ export default {
|
||||||
},
|
},
|
||||||
description: '按钮两边都是半圆形。',
|
description: '按钮两边都是半圆形。',
|
||||||
cloud: {
|
cloud: {
|
||||||
value: true // 规范默认就是圆角
|
value: true
|
||||||
},
|
},
|
||||||
apis: ['round'],
|
apis: ['round'],
|
||||||
demos: ['round']
|
demos: ['round']
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
export interface IComponentConfig {
|
||||||
|
/**
|
||||||
|
* 组件示例通过多少列呈现
|
||||||
|
*/
|
||||||
|
column: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件责任人
|
||||||
|
*/
|
||||||
|
owner: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否展示在官网文档中
|
||||||
|
*/
|
||||||
|
show: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否是规范内的组件
|
||||||
|
*/
|
||||||
|
cloud: boolean
|
||||||
|
|
||||||
|
meta: {
|
||||||
|
/**
|
||||||
|
* 不推荐使用，未来会移除
|
||||||
|
*/
|
||||||
|
deprecated: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 实验性版本
|
||||||
|
*/
|
||||||
|
experimental: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 稳定版本
|
||||||
|
*/
|
||||||
|
stable: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 即将在未来三个 Minor 版本后移除
|
||||||
|
*/
|
||||||
|
toBeRemoved: string
|
||||||
|
}
|
||||||
|
demos: {
|
||||||
|
demoId: string
|
||||||
|
name: {
|
||||||
|
'zh-CN': string
|
||||||
|
'en-US': string
|
||||||
|
}
|
||||||
|
desc: {
|
||||||
|
'zh-CN': string
|
||||||
|
'en-US': string
|
||||||
|
}
|
||||||
|
codeFiles: string[]
|
||||||
|
}[]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件特性列表
|
||||||
|
*/
|
||||||
|
features: {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前是否支持该特性，用于记录正在开发或者计划开发的新特性
|
||||||
|
*/
|
||||||
|
support: {
|
||||||
|
value: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否是规范内的特性
|
||||||
|
*/
|
||||||
|
cloud: {
|
||||||
|
value: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 有些特性并非全部在规范内，所以需要进行备注
|
||||||
|
*/
|
||||||
|
remark: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 该特性涉及到哪些 API
|
||||||
|
*/
|
||||||
|
apis: string[]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 该特性在哪些 Demo 中体现
|
||||||
|
*/
|
||||||
|
demos: string[]
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ti-pt48 ti-pl48 ti-pr48">
|
<div class="ti-pt48 ti-pl48 ti-pr48">
|
||||||
<div class="markdown-body">
|
<div class="w1000 !mx-auto markdown-body">
|
||||||
<h1 class="flex-center">
|
<h1 class="ti-f-r ti-f-box-center">
|
||||||
组件特性列表
|
组件特性列表
|
||||||
<span class="component-count" :title="`${componentCount} components`">{{ componentCount }}</span>
|
<tiny-tag size="small" type="success" :title="`${componentCount} components`" class="ml8">{{
|
||||||
<span class="component-count" :title="`${featureCount} features`">{{ featureCount }}</span>
|
componentCount
|
||||||
|
}}</tiny-tag>
|
||||||
|
<tiny-tag size="small" type="success" :title="`${featureCount} features`" class="ml8">{{
|
||||||
|
featureCount
|
||||||
|
}}</tiny-tag>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p>TinyVue 组件库包含 {{ componentCount }} 个灵活、易用、功能强大的组件。</p>
|
<p>TinyVue 组件库包含 {{ componentCount }} 个灵活、易用、功能强大的组件。</p>
|
||||||
|
|
@ -15,9 +19,34 @@
|
||||||
v-for="(component, componentIndex) of isCloud ? components.filter((item) => item.config.cloud) : components"
|
v-for="(component, componentIndex) of isCloud ? components.filter((item) => item.config.cloud) : components"
|
||||||
:key="component.name"
|
:key="component.name"
|
||||||
>
|
>
|
||||||
<h3 class="flex-center">
|
<h3 class="ti-f-r ti-f-box-center">
|
||||||
{{ componentIndex + 1 }}. {{ toUpperCamelCase(component.name) }}
|
{{ componentIndex + 1 }}. {{ toUpperCamelCase(component.name) }}
|
||||||
<span class="component-count mr-xs">{{ component.config.features?.length || 0 }}</span>
|
<tiny-tag
|
||||||
|
size="small"
|
||||||
|
type="success"
|
||||||
|
class="ml8"
|
||||||
|
:title="`${component.config.features?.length || 0} features`"
|
||||||
|
>
|
||||||
|
{{ component.config.features?.length || 0 }}
|
||||||
|
</tiny-tag>
|
||||||
|
<tiny-popover trigger="hover" placement="top">
|
||||||
|
<p>
|
||||||
|
{{
|
||||||
|
component.config.features?.every((feature) => feature.cloud.value)
|
||||||
|
? '全部特性在规范内'
|
||||||
|
: '部分特性在规范内'
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<template #reference>
|
||||||
|
<i
|
||||||
|
:class="[
|
||||||
|
component.config.features?.every((feature) => feature.cloud.value) ? 'i-ti-cloud-full' : 'i-ti-cloud',
|
||||||
|
'ml4'
|
||||||
|
]"
|
||||||
|
v-if="component.config.cloud"
|
||||||
|
></i>
|
||||||
|
</template>
|
||||||
|
</tiny-popover>
|
||||||
</h3>
|
</h3>
|
||||||
<tiny-layout v-if="component.config.features" :cols="24">
|
<tiny-layout v-if="component.config.features" :cols="24">
|
||||||
<tiny-row
|
<tiny-row
|
||||||
|
|
@ -26,8 +55,40 @@
|
||||||
:style="{ marginTop: index === 0 ? '20px' : '0' }"
|
:style="{ marginTop: index === 0 ? '20px' : '0' }"
|
||||||
:gutter="8"
|
:gutter="8"
|
||||||
>
|
>
|
||||||
<tiny-col v-for="feature of groupFeature" :key="feature.id" :span="8">
|
<tiny-col v-for="feature of groupFeature" :key="feature.id" :span="8" class="ti-f-r ti-f-box-center">
|
||||||
{{ feature.name }}
|
{{ feature.name }}
|
||||||
|
<tiny-popover trigger="hover" placement="top">
|
||||||
|
<p>{{ feature.description }}</p>
|
||||||
|
<div>
|
||||||
|
Demos:
|
||||||
|
<span v-for="(demo, demoIndex) of feature.demos" :key="demoIndex">
|
||||||
|
<a
|
||||||
|
:href="origin + '/tiny-vue/zh-CN/os-theme/components/' + component.name + '#' + demo"
|
||||||
|
target="'_blank'"
|
||||||
|
>{{ demo }}</a
|
||||||
|
><tiny-divider direction="vertical" v-if="demoIndex !== feature.demos.length - 1"></tiny-divider>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
APIs:
|
||||||
|
<span v-for="(api, apiIndex) of feature.apis" :key="apiIndex">
|
||||||
|
<a
|
||||||
|
:href="origin + '/tiny-vue/zh-CN/os-theme/components/' + component.name + '#api'"
|
||||||
|
target="'_blank'"
|
||||||
|
>{{ api }}</a
|
||||||
|
><tiny-divider direction="vertical" v-if="apiIndex !== feature.apis.length - 1"></tiny-divider>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<template #reference>
|
||||||
|
<tiny-icon-info-circle class="ti-ml4"></tiny-icon-info-circle>
|
||||||
|
</template>
|
||||||
|
</tiny-popover>
|
||||||
|
<tiny-popover trigger="hover" placement="top" v-if="feature.cloud.value">
|
||||||
|
<p>{{ feature.cloud.remark || '规范内的特性' }}</p>
|
||||||
|
<template #reference>
|
||||||
|
<i :class="[feature.cloud.remark ? 'i-ti-cloud' : 'i-ti-cloud-full', 'ml4']"></i>
|
||||||
|
</template>
|
||||||
|
</tiny-popover>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
</tiny-row>
|
</tiny-row>
|
||||||
</tiny-layout>
|
</tiny-layout>
|
||||||
|
|
@ -36,16 +97,23 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import { TinyLayout, TinyRow, TinyCol, TinySwitch } from '@opentiny/vue'
|
import { TinyLayout, TinyRow, TinyCol, TinySwitch, TinyPopover, TinyDivider, TinyTag } from '@opentiny/vue'
|
||||||
|
import { IconInfoCircle } from '@opentiny/vue-icon'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
const TinyIconInfoCircle = IconInfoCircle()
|
||||||
|
|
||||||
|
const origin = ref('')
|
||||||
|
|
||||||
const componentCount = ref(0)
|
const componentCount = ref(0)
|
||||||
const featureCount = ref(0)
|
const featureCount = ref(0)
|
||||||
const components = ref([])
|
const components = ref([])
|
||||||
const isCloud = ref(false)
|
const isCloud = ref(false)
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
origin.value = location.origin
|
||||||
|
|
||||||
const componentDocs = import.meta.glob(`@demos/app/**/webdoc/*.js`)
|
const componentDocs = import.meta.glob(`@demos/app/**/webdoc/*.js`)
|
||||||
|
|
||||||
for (const item in componentDocs) {
|
for (const item in componentDocs) {
|
||||||
|
|
@ -84,33 +152,3 @@ const toUpperCamelCase = (str) =>
|
||||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||||
.join('')
|
.join('')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.flex-center {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-count {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: 8px;
|
|
||||||
padding: 0 2px;
|
|
||||||
min-width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
border: 1px solid #dfe1e6;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #cfd0d3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-body {
|
|
||||||
width: 1000px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,11 @@ export default {
|
||||||
check:
|
check:
|
||||||
'<svg viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>',
|
'<svg viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>',
|
||||||
playground:
|
playground:
|
||||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M14.854 1.854a.5.5 0 1 0-.708-.708l-8 8L6 10l.854-.146l8-8z" fill="currentColor"></path><path d="M4.5 2A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-5a.5.5 0 0 0-1 0v5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5v-7A1.5 1.5 0 0 1 4.5 3h5.005a.5.5 0 0 0 0-1H4.5z" fill="currentColor"></path></g></svg>'
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M14.854 1.854a.5.5 0 1 0-.708-.708l-8 8L6 10l.854-.146l8-8z" fill="currentColor"></path><path d="M4.5 2A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-5a.5.5 0 0 0-1 0v5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5v-7A1.5 1.5 0 0 1 4.5 3h5.005a.5.5 0 0 0 0-1H4.5z" fill="currentColor"></path></g></svg>',
|
||||||
|
cloud:
|
||||||
|
'<svg class="ti-mr4" viewBox="0 0 1024 1024" width="16" height="16"><path d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3z m36.3 281c-23.4 23.4-54.5 36.3-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3-23.4-23.4-36.3-54.6-36.3-87.7 0-28 9.1-54.3 26.2-76.3 16.7-21.3 40.2-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4 14.9-19.2 32.6-35.9 52.4-49.9 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"></path></svg>',
|
||||||
|
'cloud-full':
|
||||||
|
'<svg t="1742260979776" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6563" width="200" height="200"><path d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3z m36.3 281c-23.4 23.4-54.5 36.3-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3-23.4-23.4-36.3-54.6-36.3-87.7 0-28 9.1-54.3 26.2-76.3 16.7-21.3 40.2-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4 14.9-19.2 32.6-35.9 52.4-49.9 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z" p-id="6564" fill="#5cb300"></path></svg>'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue