diff --git a/docs/notes/theme/guide/components/badge.md b/docs/notes/theme/guide/components/badge.md index dca7fcb9..3664a005 100644 --- a/docs/notes/theme/guide/components/badge.md +++ b/docs/notes/theme/guide/components/badge.md @@ -13,13 +13,29 @@ permalink: /guide/components/badge/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| ------------ | -------- | ------------------ | ------------------------------------------------------------------ | -| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 | -| text | `string` | `''` | 文本 | -| color | `string` | `''` | 文本颜色 | -| bg-color | `string` | `''` | 背景颜色 | -| border-color | `string` | `'transparent'` | 边框颜色 | +:::: field-group + +::: field name="type" type="'info' | 'tip' | 'warning' | 'danger' | string" default="'tip'" optional +徽章类型，不同的类型使用不同的颜色方案。支持自定义类型 +::: + +::: field name="text" type="string" default="''" optional +徽章文本 +::: + +::: field name="color" type="string" optional +自定义徽章文本颜色 +::: + +::: field name="bgColor" type="string" optional +自定义徽章背景颜色 +::: + +::: field name="borderColor" type="string" optional +自定义徽章边框颜色 +::: + +:::: ## 示例 diff --git a/docs/notes/theme/guide/components/card-grid.md b/docs/notes/theme/guide/components/card-grid.md index 11f407c9..d7d06697 100644 --- a/docs/notes/theme/guide/components/card-grid.md +++ b/docs/notes/theme/guide/components/card-grid.md @@ -11,9 +11,10 @@ permalink: /guide/components/card-grid/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| :--- | :----------------------------------------------- | :----- | :------------- | -| cols | `number \| Record<'sm' \| 'md' \| 'lg', number>` | `2` | 卡片排列列数。 | +:::: field-group +::: field name="cols" type="number | { sm: number, md: number, lg: number }" default="2" + +卡片排列列数。 组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示双列，小屏幕下显示单列。 @@ -26,6 +27,9 @@ permalink: /guide/components/card-grid/ 建议传入的 `number` 不超过 `3`。 +::: +:::: + ## 示例 **输入：** diff --git a/docs/notes/theme/guide/components/card-masonry.md b/docs/notes/theme/guide/components/card-masonry.md index 97e1ba9e..eb7f6fa2 100644 --- a/docs/notes/theme/guide/components/card-masonry.md +++ b/docs/notes/theme/guide/components/card-masonry.md @@ -31,10 +31,10 @@ permalink: /guide/components/card-masonry/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| :--- | :----------------------------------------------- | :----- | :------------- | -| cols | `number \| Record<'sm' \| 'md' \| 'lg', number>` | `3` | 列数 | -| gap | `number` | `16` | 列之间的间距 | +:::: field-group + +::: field name="cols" type="number | { sm: number, md: number, lg: number }" optional +列数。 组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示三列，小屏幕下显示双列。 @@ -44,6 +44,13 @@ permalink: /guide/components/card-masonry/ - `sm` : `< 640px` - `md` : `>= 640px < 960px` - `lg` : `>= 960px` +::: + +::: field name="gap" type="number" optional default="16" +列之间的间距。 +::: + +:::: ## Markdown 语法支持 diff --git a/docs/notes/theme/guide/components/card.md b/docs/notes/theme/guide/components/card.md index 4646e090..03d94a6a 100644 --- a/docs/notes/theme/guide/components/card.md +++ b/docs/notes/theme/guide/components/card.md @@ -13,10 +13,17 @@ permalink: /guide/components/card/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| ----- | --------------------------- | ------ | ---------------------------------------------------------------- | -| title | `string` | `''` | 标题 | -| icon | `string \| { svg: string }` | `''` | 显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 | +:::: field-group + +::: field name="title" type="string" default="''" optional +卡片标题 +::: + +::: field name="icon" type="string | { svg: string }" default="''" optional +显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 +::: + +:::: ## 插槽 diff --git a/docs/notes/theme/guide/components/home-box.md b/docs/notes/theme/guide/components/home-box.md index 6764fc4f..6a335696 100644 --- a/docs/notes/theme/guide/components/home-box.md +++ b/docs/notes/theme/guide/components/home-box.md @@ -11,9 +11,22 @@ permalink: /guide/components/home-box/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| --------------------- | ------------------ | --------- | ---------------- | -| type | string | `''` | 区域类型 | -| full | boolean | `false` | 是否全屏 | -| background-image | string | `''` | 区域背景图片 | -| background-attachment | `'fixed'\|'local'` | `'local'` | 区域背景定位方式 | +:::: field-group + +::: field name="type" type="string" default="''" optional +区域类型 +::: + +::: field name="full" type="boolean" default="false" optional +是否全屏 +::: + +::: field name="background-image" type="string" default="''" optional +区域背景图片 +::: + +::: field name="background-attachment" type="'fixed' | 'local'" default="'local'" optional +区域背景定位方式 +::: + +:::: diff --git a/docs/notes/theme/guide/components/icon.md b/docs/notes/theme/guide/components/icon.md index 0f21843b..a5e88f65 100644 --- a/docs/notes/theme/guide/components/icon.md +++ b/docs/notes/theme/guide/components/icon.md @@ -13,11 +13,21 @@ permalink: /guide/components/icon/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| ----- | ------ | ---------------- | -------- | -| name | string | `''` | 图标名 | -| color | string | `'currentcolor'` | 图标颜色 | -| size | string | `'1em'` | 图标大小 | +:::: field-group + +::: field name="name" type="string" default="''" optional +图标名称 +::: + +::: field name="color" type="string" default="'currentcolor'" optional +图标颜色 +::: + +::: field name="size" type="string" default="'1em'" optional +图标大小 +::: + +:::: ## 示例 diff --git a/docs/notes/theme/guide/components/image-card.md b/docs/notes/theme/guide/components/image-card.md index 12e73bf9..7f259d66 100644 --- a/docs/notes/theme/guide/components/image-card.md +++ b/docs/notes/theme/guide/components/image-card.md @@ -14,16 +14,41 @@ permalink: /guide/components/image-card/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| ----------- | -------------------------- | ------- | --------------------------------------- | -| image | `string` | `''` | 必填，图片链接 | -| title | `string` | `''` | 可选，标题 (展示其它信息需要依赖此属性) | -| description | `string` | `''` | 可选，描述 | -| author | `string` | `''` | 可选，作者 | -| href | `string` | `''` | 可选，链接 | -| date | `string \| Date \| number` | `''` | 可选，日期 | -| width | `string \| number` | `''` | 可选，宽度 | -| center | `boolean` | `false` | 可选，是否居中 | +:::: field-group + +::: field name="image" type="string" required +图片链接地址，本地图片必须使用绝对路径，即以 `/` 开头的路径，指向 `/public` 目录 +::: + +::: field name="title" type="string" optional +图片标题 +::: + +::: field name="description" type="string" optional +图片描述信息 +::: + +::: field name="author" type="string" optional +图片作者 +::: + +::: field name="href" type="string" optional +点击图片标题后的跳转链接 +::: + +::: field name="date" type="string | Date | number" optional +图片 创作日期 +::: + +::: field name="width" type="string | number" optional +图片宽度 +::: + +::: field name="center" type="boolean" optional +图片宽度不满屏时是否居中 +::: + +:::: ## 示例 diff --git a/docs/notes/theme/guide/components/link-card.md b/docs/notes/theme/guide/components/link-card.md index 2c6fc317..8cd5ea05 100644 --- a/docs/notes/theme/guide/components/link-card.md +++ b/docs/notes/theme/guide/components/link-card.md @@ -11,13 +11,29 @@ permalink: /guide/components/link-card/ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| ----------- | --------------------------- | ------ | ---------------------------------------------------------------- | -| title | `string` | `''` | 标题 | -| icon | `string \| { svg: string }` | `''` | 显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 | -| href | `string` | `''` | 链接 | -| description | `string` | `''` | 详情 | -| target | `string` | `''` | 链接打开方式 | +:::: field-group + +::: field name="title" type="string" default="''" optional +链接卡片标题 +::: + +::: field name="icon" type="string | { svg: string }" default="''" optional +显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 +::: + +::: field name="href" type="string" default="''" optional +链接卡片跳转地址 +::: + +::: field name="description" type="string" default="''" optional +链接卡片描述，建议使用组件默认插槽添加描述内容 +::: + +::: field name="target" type="string" default="''" optional +链接跳转方式 +::: + +:::: ## 插槽 diff --git a/docs/notes/theme/guide/components/npm-badge.md b/docs/notes/theme/guide/components/npm-badge.md index 1f10ec8f..5e0465d8 100644 --- a/docs/notes/theme/guide/components/npm-badge.md +++ b/docs/notes/theme/guide/components/npm-badge.md @@ -44,17 +44,45 @@ import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue' ### Props -| 名称 | 类型 | 必填 | 默认值 | 说明 | -| ---------- | --------------- | --------------- | ----------- | --------------------------------------- | -| name | `string` | 否 | `''` | npm 包名，为空则从 `repo` 中获取 | -| repo | `string` | name 为空时必填 | `''` | 包 github 仓库地址, 格式为 `owner/repo` | -| type | `NpmBadgeType` | 是 | - | 徽章类型 | -| theme | `NpmBadgeTheme` | 否 | `'flat'` | 徽章主题 | -| label | `string` | 否 | `''` | 徽章标签 | -| color | `string` | 否 | `'#32A9C3'` | 徽章颜色 | -| labelColor | `string` | 否 | `'#1B3C4A'` | 徽章标签颜色 | -| branch | `string` | 否 | `'main'` | 仓库分支 | -| dir | `string` | 否 | `''` | 包所在仓库目录，适用于 monorepo 项目 | +:::: field-group + +::: field name="name" type="string" optional +npm 包名，为空则从 `repo` 中获取 +::: + +::: field name="repo" type="string" +包 github 仓库地址，格式为 `owner/repo`，当 `name` 为空时必填 +::: + +::: field name="type" type="NpmBadgeType" +徽章类型 +::: + +::: field name="theme" type="NpmBadgeTheme" optional default="'flat'" +徽章主题 +::: + +::: field name="label" type="string" optional +徽章标签 +::: + +::: field name="color" type="string" optional default="'#32A9C3'" +徽章颜色 +::: + +::: field name="labelColor" type="string" optional default="'#1B3C4A'" +徽章标签颜色 +::: + +::: field name="branch" type="string" optional default="'main'" +仓库分支 +::: + +::: field name="dir" type="string" optional +包所在仓库目录，适用于 monorepo 项目 +::: + +:::: ### Types @@ -95,16 +123,41 @@ type NpmBadgeTheme = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'soc ### Props -| 名称 | 类型 | 必填 | 默认值 | 说明 | -| ---------- | --------------- | --------------- | ------ | --------------------------------------- | -| name | `string` | 否 | `''` | npm 包名，为空则从 `repo` 中获取 | -| repo | `string` | name 为空时必填 | `''` | 包 github 仓库地址, 格式为 `owner/repo` | -| items | `string \| NpmBadgeType[]` | 否 | - | 徽章类型列表, 传入 `string` 时用 `','`分隔，会自动转换为 `NpmBadgeType[]` | -| theme | `NpmBadgeTheme` | 否 | `''` | 徽章主题 | -| color | `string` | 否 | `''` | 徽章颜色 | -| labelColor | `string` | 否 | `''` | 徽章标签颜色 | -| branch | `string` | 否 | `''` | 仓库分支 | -| dir | `string` | 否 | `''` | 包所在仓库目录，适用于 monorepo 项目 | +:::: field-group + +::: field name="name" type="string" optional +npm 包名，为空则从 `repo` 中获取 +::: + +::: field name="repo" type="string" +包 github 仓库地址，格式为 `owner/repo`，当 `name` 为空时必填 +::: + +::: field name="items" type="string | NpmBadgeType[]" optional default="[]" +徽章类型列表, 传入 `string` 时用 `','`分隔，会自动转换为 `NpmBadgeType[]` +::: + +::: field name="theme" type="NpmBadgeTheme" optional +徽章主题 +::: + +::: field name="color" type="string" optional +徽章颜色 +::: + +::: field name="labelColor" type="string" optional +徽章标签颜色 +::: + +::: field name="branch" type="string" optional +仓库分支 +::: + +::: field name="dir" type="string" optional +包所在仓库目录，适用于 monorepo 项目 +::: + +:::: ### Slots diff --git a/docs/notes/theme/guide/components/plot.md b/docs/notes/theme/guide/components/plot.md index c8411dae..afb99d0a 100644 --- a/docs/notes/theme/guide/components/plot.md +++ b/docs/notes/theme/guide/components/plot.md @@ -23,11 +23,21 @@ export default defineUserConfig({ ## Props -| 名称 | 类型 | 默认值 | 说明 | -| ------- | ------------------------------------------- | --------- | -------------------------- | -| trigger | `'hover' \| 'click'` | `'hover'` | 鼠标悬停触发，或者点击触发 | -| mask | `string \| { light: string, dark: string }` | `#000` | 遮罩颜色 | -| color | `string \| { light: string, dark: string }` | `#fff` | 文本颜色 | +:::: field-group + +::: field name="trigger" type="'hover' | 'click'" default="'hover'" optional +鼠标悬停触发，或者点击触发 +::: + +::: field name="mask" type="string | { light: string, dark: string }" default="'#000'" optional +遮罩颜色 +::: + +::: field name="color" type="string | { light: string, dark: string }" default="'#fff'" optional +文本颜色 +::: + +:::: ## 示例 diff --git a/docs/notes/theme/guide/components/repo-card.md b/docs/notes/theme/guide/components/repo-card.md index dea4dd77..053574aa 100644 --- a/docs/notes/theme/guide/components/repo-card.md +++ b/docs/notes/theme/guide/components/repo-card.md @@ -48,7 +48,13 @@ export default defineClientConfig({ ### Props -`RepoCard` 组件的 接收一个 `repo` 参数，传入的是仓库的地址，格式为 `owner/repo`。 +:::: field-group + +::: field name="repo" type="string" required +仓库地址，格式为 `owner/repo` +::: + +:::: ## 示例 diff --git a/docs/notes/theme/guide/markdown/card.md b/docs/notes/theme/guide/markdown/card.md index 033f472a..93c42985 100644 --- a/docs/notes/theme/guide/markdown/card.md +++ b/docs/notes/theme/guide/markdown/card.md @@ -36,7 +36,16 @@ permalink: /guide/markdown/card/ :::: ``` -卡片 支持 可选的 `title` 和 `icon`。 其中， icon 支持传入 图片链接，也可以传入 iconify 图标名。 +## Props + +:::: field-group +::: field name="title" type="string" optional default="''" +卡片标题 +::: + +::: field name="icon" type="string" optional +卡片图标 支持传入图片链接，还可以传入 [iconify](https://icon-sets.iconify.design/) 图标名。 +:::: ## 示例 diff --git a/docs/notes/theme/guide/markdown/field.md b/docs/notes/theme/guide/markdown/field.md index 6604569e..c0e4a179 100644 --- a/docs/notes/theme/guide/markdown/field.md +++ b/docs/notes/theme/guide/markdown/field.md @@ -52,12 +52,13 @@ export default defineUserConfig({ ## 属性 +:::: field-group ::: field name="name" required type="string" 字段名称 ::: ::: field name="type" type="string" optional -字段类型 +字段的类型 ::: ::: field name="required" type="boolean" optional @@ -69,8 +70,9 @@ export default defineUserConfig({ ::: ::: field name="default" type="string" optional -默认值 +默认值， 如果为空字符串，应该使用 `default="''"` ::: +:::: ## 示例 diff --git a/docs/notes/theme/guide/markdown/file-tree.md b/docs/notes/theme/guide/markdown/file-tree.md index 59241d38..f0aa4407 100644 --- a/docs/notes/theme/guide/markdown/file-tree.md +++ b/docs/notes/theme/guide/markdown/file-tree.md @@ -106,7 +106,7 @@ permalink: /guide/markdown/file-tree/ ## 配置 -你可以在 `plugins.mdPower.fileTree` 选项中配置 文件树的图标默认类型： +你可以在 `markdown.fileTree` 选项中配置 文件树的图标默认类型： ::: code-tabs @tab .vuepress/config.ts diff --git a/docs/notes/theme/guide/markdown/timeline.md b/docs/notes/theme/guide/markdown/timeline.md index e57a0e0c..42f0e36a 100644 --- a/docs/notes/theme/guide/markdown/timeline.md +++ b/docs/notes/theme/guide/markdown/timeline.md @@ -123,91 +123,68 @@ __时间线__ 支持非常灵活且灵活的配置项，配置主要分为两个 ### 容器配置 -#### horizontal +:::: field-group -- __类型:__ `boolean` -- __默认值:__ `false` +::: field name="horizontal" type="boolean" default="false" optional +渲染为 水平方向 的时间线 +::: -渲染为 水平方向的时间线。 +::: field name="card" type="boolean" default="false" optional +每个时间节点默认渲染为卡片样式（可在列表项配置中覆盖） +::: -#### card - -- __类型:__ `boolean` -- __默认值:__ `false` - -每个时间节点默认渲染为卡片样式（可在列表项配置中覆盖）。 - -#### placement - -- __类型:__ `'left' | 'right' | 'between'` -- __默认值:__ `'left'` +::: field name="placement" type="'left' | 'right' | 'between'" default="'left'" optional 时间节点的对齐方式。==仅在垂直方向时生效=={.warning} - `left` : 时间轴左侧对齐 - `right` : 时间轴右侧对齐 - `between` : 时间轴两端对齐 (通过列表项配置中的 `placement` 定义位置，默认为 `left`) +::: -#### line - -- __类型:__ `'solid' | 'dashed' | 'dotted'` -- __默认值:__ `'solid'` - +::: field name="line" type="'solid' | 'dashed' | 'dotted'" default="'solid'" optional 线条样式（可在列表项配置中覆盖） +::: + +:::: ### 列表项配置 -#### time - -- __类型:__ `string` -- __默认值:__ `''` +:::: field-group +::: field name="time" type="string" default="''" optional 时间点，可以是任何字符串，比如 `2025-03-20`， `Q1` 等。 +::: -#### type - -- __类型:__ `'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important'` -- __默认值:__ `'info'` - +::: field name="type" type="'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important'" default="'info'" optional 时间节点的类型。 +::: -#### card +::: field name="card" type="boolean" default="false" optional +当前 时间节点渲染为卡片样式。默认值从 容器配置 `card` 中继承 +::: -- __类型:__ `boolean` -- __默认值:__ `false` 从 容器配置 `card` 中继承 - -当前 时间节点渲染为卡片样式。 - -#### line - -- __类型:__ `'solid' | 'dashed' | 'dotted'` -- __默认值:__ `'solid'` 从 容器配置 `line` 中继承 - -线条样式 - -#### icon - -- __类型:__ `string` -- __默认值:__ `''` +::: field name="line" type="'solid' | 'dashed' | 'dotted'" default="'solid'" optional +线条样式。 默认值从 容器配置 `line` 中继承 +::: +::: field name="icon" type="string" default="''" optional 时间节点的图标，支持所有的 [iconify](https://icon-sets.iconify.design/) 图标。 +::: -#### placement +::: field name="placement" type="'left' | 'right'" default="'left'" optional -- __类型:__ `'left' | 'right'` -- __默认值:__ `'left'` - -当 容器配置为 `between` 时，定义当前时间节点的位置。 +当 容器配置 `placement` 为 `between` 时，定义当前时间节点的位置。 - `left` : 在时间轴左侧 - `right` : 在时间轴右侧 +::: -#### color - -- __类型:__ `string` -- __默认值:__ `''` - +::: field name="color" type="string" default="''" optional 时间节点线条颜色，可以是任何有效的颜色值。 +::: + +:::: ## 示例