From 73ed8dc9c544be19318db4e36379f08c4a91a39b Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Sat, 19 Apr 2025 11:40:35 +0800 Subject: [PATCH] feat(theme): add badge support for navbar and sidebar (#559) --- cli/package.json | 4 +- docs/.vuepress/navbar.ts | 1 + docs/.vuepress/notes/zh/theme-guide.ts | 2 +- docs/notes/theme/config/frontmatter/basic.md | 1 - docs/notes/theme/config/markdown.md | 3 - docs/notes/theme/config/navbar.md | 26 ++++++- docs/notes/theme/config/notes.md | 20 +++++- .../theme/guide/components/card-masonry.md | 2 - docs/notes/theme/guide/components/swiper.md | 1 - docs/notes/theme/guide/features/bulletin.md | 3 - docs/notes/theme/guide/features/changelog.md | 3 - .../theme/guide/features/contributors.md | 3 - docs/notes/theme/guide/features/copyright.md | 3 - .../theme/guide/features/replace-assets.md | 4 +- docs/notes/theme/guide/markdown/chat.md | 3 - docs/notes/theme/guide/markdown/collapse.md | 3 - docs/notes/theme/guide/markdown/timeline.md | 3 - .../notes/theme/guide/quick-start/document.md | 68 +++++++++++++++++-- docs/notes/theme/guide/repl/frontend.md | 2 - theme/src/client/components/Nav/VPNav.vue | 10 +++ .../components/Nav/VPNavBarMenuGroup.vue | 1 + .../components/Nav/VPNavBarMenuLink.vue | 10 +++ .../client/components/Nav/VPNavScreenMenu.vue | 1 + .../components/Nav/VPNavScreenMenuGroup.vue | 9 ++- .../Nav/VPNavScreenMenuGroupLink.vue | 6 ++ .../components/Nav/VPNavScreenMenuLink.vue | 6 ++ theme/src/client/components/VPFlyout.vue | 10 ++- theme/src/client/components/VPMenuLink.vue | 10 +++ theme/src/client/components/VPSidebarItem.vue | 37 +++++++++- .../src/client/components/global/VPBadge.vue | 10 +-- theme/src/client/composables/sidebar.ts | 2 + theme/src/client/utils/resolveNavLink.ts | 4 +- theme/src/node/pages/extendsPage.ts | 4 ++ theme/src/shared/common/base.ts | 11 +++ theme/src/shared/features/navbar.ts | 17 ++++- theme/src/shared/features/sidebar.ts | 7 +- theme/src/shared/frontmatter/page.ts | 9 +-- theme/src/shared/resolved/navbar.ts | 5 +- theme/src/shared/resolved/sidebar.ts | 7 +- 39 files changed, 264 insertions(+), 67 deletions(-) diff --git a/cli/package.json b/cli/package.json index de7aca8b..6d41d865 100644 --- a/cli/package.json +++ b/cli/package.json @@ -39,11 +39,11 @@ "picocolors": "catalog:prod" }, "plume-deps": { - "vuepress": "2.0.0-rc.20", + "vuepress": "2.0.0-rc.21", "vue": "^3.5.13", "sass-embedded": "^1.86.3", "sass-loader": "^16.0.5", "http-server": "^14.1.1", - "typescript": "^5.8.2" + "typescript": "^5.8.3" } } diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts index 5cec6420..61175400 100644 --- a/docs/.vuepress/navbar.ts +++ b/docs/.vuepress/navbar.ts @@ -46,6 +46,7 @@ export const zhNavbar = defineNavbarConfig([ { text: `${version}`, icon: 'codicon:versions', + badge: '新', items: [ { text: '更新日志', link: '/changelog/' }, { text: '参与贡献', link: '/contributing/' }, diff --git a/docs/.vuepress/notes/zh/theme-guide.ts b/docs/.vuepress/notes/zh/theme-guide.ts index 136926b6..ac85c5c0 100644 --- a/docs/.vuepress/notes/zh/theme-guide.ts +++ b/docs/.vuepress/notes/zh/theme-guide.ts @@ -80,7 +80,7 @@ export const themeGuide = defineNoteConfig({ 'jsFiddle', 'codeSandbox', 'replit', - { link: 'frontend-deprecated', text: '前端（弃用）' }, + 'frontend-deprecated', ], }, { diff --git a/docs/notes/theme/config/frontmatter/basic.md b/docs/notes/theme/config/frontmatter/basic.md index 1f6ec185..d14ba7aa 100644 --- a/docs/notes/theme/config/frontmatter/basic.md +++ b/docs/notes/theme/config/frontmatter/basic.md @@ -2,7 +2,6 @@ title: 通用配置 createTime: 2024/03/02 20:01:09 permalink: /config/frontmatter/basic/ -badge: 徽章 badge --- ## 概述 diff --git a/docs/notes/theme/config/markdown.md b/docs/notes/theme/config/markdown.md index 93be6a43..e0a5bea5 100644 --- a/docs/notes/theme/config/markdown.md +++ b/docs/notes/theme/config/markdown.md @@ -2,9 +2,6 @@ title: Markdown 配置 createTime: 2025/03/15 14:54:19 permalink: /config/markdown/ -badge: - type: tip - text: 1.0.0-rc.136 + --- ## 概述 diff --git a/docs/notes/theme/config/navbar.md b/docs/notes/theme/config/navbar.md index 80ed738c..1c0b9021 100644 --- a/docs/notes/theme/config/navbar.md +++ b/docs/notes/theme/config/navbar.md @@ -97,6 +97,19 @@ export default defineUserConfig({ 类型: `NavItem[]` ```ts +interface ThemeBadge { + /* 徽章文本 */ + text?: string + /* 徽章类型，内置： 'info' | 'tip' | 'danger' | 'warning' */ + type?: string + /* 文本颜色 */ + color?: string + /* 背景颜色 */ + bgColor?: string + /* 边框颜色 */ + borderColor?: string +} + type NavItem = string | { /** * 导航栏文本 @@ -110,13 +123,18 @@ type NavItem = string | { */ link: string /** - * - 支持 iconify 图标，直接使用 iconify name 即可自动加载 + * 支持 iconify 图标，直接使用 iconify name 即可自动加载 * @see https://icon-sets.iconify.design/ * * - 如果 iconify 图标不满足您的需求，也可以支持传入 svg 字符串。 * - 还支持使用 本地图片 或 远程图片，本地图片的路径需要以 `/` 开头。 */ icon?: string | { svg: string } + + /** + * 徽章，支持自定义徽章样式 + */ + badge?: string | ThemeBadge /** * 控制元素何时被激活 */ @@ -156,12 +174,14 @@ export default defineUserConfig({ text: 'vuepress-theme-plume', link: '/vuepress-theme-plume/', icon: 'mdi:paper-airplane', + badge: '徽章' }, ], }, { text: 'Vuepress Plugin', icon: 'mingcute:plugin-2-fill', + badge: { text: '徽章', type: 'warning' }, items: [ { text: 'caniuse', @@ -184,8 +204,8 @@ export default defineUserConfig({ icon: 'material-symbols:note-alt-rounded', }, { - text: 'shikiji', - link: '/vuepress-plugin/shikiji/', + text: 'shiki', + link: '/vuepress-plugin/shiki/', icon: 'material-symbols-light:code-blocks-outline-rounded', }, ], diff --git a/docs/notes/theme/config/notes.md b/docs/notes/theme/config/notes.md index ac5df591..b21af02f 100644 --- a/docs/notes/theme/config/notes.md +++ b/docs/notes/theme/config/notes.md @@ -103,7 +103,20 @@ interface NoteItem { sidebar?: 'auto' | (string | SidebarItem)[] } -export interface SidebarItem { +interface ThemeBadge { + /* 徽章文本 */ + text?: string + /* 徽章类型，内置： 'info' | 'tip' | 'danger' | 'warning' */ + type?: string + /* 文本颜色 */ + color?: string + /* 背景颜色 */ + bgColor?: string + /* 边框颜色 */ + borderColor?: string +} + +interface SidebarItem { /** * 侧边栏文本 */ @@ -119,6 +132,11 @@ export interface SidebarItem { */ icon?: ThemeIcon + /** + * 徽章 + */ + badge?: string | ThemeBadge + /** * 次级侧边栏分组 * 不超过 3 层 diff --git a/docs/notes/theme/guide/components/card-masonry.md b/docs/notes/theme/guide/components/card-masonry.md index fca9f1e8..97e1ba9e 100644 --- a/docs/notes/theme/guide/components/card-masonry.md +++ b/docs/notes/theme/guide/components/card-masonry.md @@ -3,8 +3,6 @@ title: 瀑布流容器 icon: ri:layout-masonry-line createTime: 2024/12/14 17:17:06 permalink: /guide/components/card-masonry/ -badge: - text: v1.0.0-rc.121 + --- ## 概述 diff --git a/docs/notes/theme/guide/components/swiper.md b/docs/notes/theme/guide/components/swiper.md index 12df449c..ca2f19ec 100644 --- a/docs/notes/theme/guide/components/swiper.md +++ b/docs/notes/theme/guide/components/swiper.md @@ -3,7 +3,6 @@ title: 轮播图 icon: dashicons:images-alt2 createTime: 2024/09/12 22:00:22 permalink: /guide/components/swiper/ -badge: v1.0.0-rc.98 + --- ## 概述 diff --git a/docs/notes/theme/guide/features/bulletin.md b/docs/notes/theme/guide/features/bulletin.md index 3252fc74..457e8f08 100644 --- a/docs/notes/theme/guide/features/bulletin.md +++ b/docs/notes/theme/guide/features/bulletin.md @@ -1,9 +1,6 @@ --- title: 公告板 icon: mingcute:announcement-line -badge: - type: tip - text: v1.0.0-rc.112 + createTime: 2024/10/19 21:51:22 permalink: /guide/features/bulletin/ --- diff --git a/docs/notes/theme/guide/features/changelog.md b/docs/notes/theme/guide/features/changelog.md index 8a7f7d57..bfe5c191 100644 --- a/docs/notes/theme/guide/features/changelog.md +++ b/docs/notes/theme/guide/features/changelog.md @@ -1,9 +1,6 @@ --- title: 文章变更历史 icon: radix-icons:activity-log -badge: - type: tip - text: v1.0.0-rc.115 + createTime: 2024/11/07 18:16:25 permalink: /guide/features/changelog/ --- diff --git a/docs/notes/theme/guide/features/contributors.md b/docs/notes/theme/guide/features/contributors.md index 1d0cfe47..c475ec08 100644 --- a/docs/notes/theme/guide/features/contributors.md +++ b/docs/notes/theme/guide/features/contributors.md @@ -1,9 +1,6 @@ --- title: 文章贡献者 icon: simple-icons:contributorcovenant -badge: - type: tip - text: v1.0.0-rc.115 + createTime: 2024/11/07 16:26:54 permalink: /guide/features/contributors/ --- diff --git a/docs/notes/theme/guide/features/copyright.md b/docs/notes/theme/guide/features/copyright.md index e42c1701..529d02c9 100644 --- a/docs/notes/theme/guide/features/copyright.md +++ b/docs/notes/theme/guide/features/copyright.md @@ -1,9 +1,6 @@ --- title: 文章版权所有 icon: lucide:creative-commons -badge: - type: tip - text: v1.0.0-rc.118 + createTime: 2024/11/20 10:52:49 permalink: /guide/features/copyright/ --- diff --git a/docs/notes/theme/guide/features/replace-assets.md b/docs/notes/theme/guide/features/replace-assets.md index da02fcc4..ea3cb2ff 100644 --- a/docs/notes/theme/guide/features/replace-assets.md +++ b/docs/notes/theme/guide/features/replace-assets.md @@ -3,9 +3,7 @@ title: 资源链接替换 icon: lucide:replace createTime: 2025/04/03 11:45:17 permalink: /guide/features/replace-assets/ -badge: - type: tip - text: 1.0.0-rc.139 + +badge: 新 --- ## 概述 diff --git a/docs/notes/theme/guide/markdown/chat.md b/docs/notes/theme/guide/markdown/chat.md index c8a5b25a..96d97faa 100644 --- a/docs/notes/theme/guide/markdown/chat.md +++ b/docs/notes/theme/guide/markdown/chat.md @@ -3,9 +3,6 @@ title: 对话记录 icon: cil:chat-bubble createTime: 2025/03/24 21:40:18 permalink: /guide/markdown/chat/ -badge: - type: tip - text: 1.0.0-rc.138 --- ## 前言 diff --git a/docs/notes/theme/guide/markdown/collapse.md b/docs/notes/theme/guide/markdown/collapse.md index 7d85d057..28accb05 100644 --- a/docs/notes/theme/guide/markdown/collapse.md +++ b/docs/notes/theme/guide/markdown/collapse.md @@ -3,9 +3,6 @@ title: 折叠面板 icon: carbon:collapse-categories createTime: 2025/03/22 22:27:22 permalink: /guide/markdown/collapse/ -badge: - type: tip - text: 1.0.0-rc.137 + --- ## 概述 diff --git a/docs/notes/theme/guide/markdown/timeline.md b/docs/notes/theme/guide/markdown/timeline.md index 601a2010..e57a0e0c 100644 --- a/docs/notes/theme/guide/markdown/timeline.md +++ b/docs/notes/theme/guide/markdown/timeline.md @@ -3,9 +3,6 @@ title: 时间线 icon: mdi:timeline-text-outline createTime: 2025/03/20 18:05:29 permalink: /guide/markdown/timeline/ -badge: - text: 1.0.0-rc.137 + - type: tip --- ## 概述 diff --git a/docs/notes/theme/guide/quick-start/document.md b/docs/notes/theme/guide/quick-start/document.md index abc48c70..426571ae 100644 --- a/docs/notes/theme/guide/quick-start/document.md +++ b/docs/notes/theme/guide/quick-start/document.md @@ -279,6 +279,21 @@ export default defineNoteConfig({ 以下是 侧边栏的 类型定义： ```ts +interface ThemeBadge { + /* 徽章文本 */ + text?: string + /* 徽章类型，内置： 'info' | 'tip' | 'danger' | 'warning' */ + type?: string + /* 文本颜色 */ + color?: string + /* 背景颜色 */ + bgColor?: string + /* 边框颜色 */ + borderColor?: string +} + +type ThemeIcon = string | { svg: string } + type Sidebar = (string | SidebarItem)[] interface SidebarItem { @@ -297,6 +312,11 @@ interface SidebarItem { */ icon?: ThemeIcon + /** + * 侧边栏徽章 + */ + badge?: string | ThemeBadge + /** * 当前分组的链接前缀，链接前缀会拼接在 `items` 内的 `link` 之前 * 当且仅当 `items` 内的 `link` 为 相对路径时，才会拼接 @@ -461,7 +481,7 @@ const typescript = defineNoteConfig({ ### 侧边栏图标 -为侧边栏添加 图标 有助于 侧边栏更好的呈现。得益于 [iconify](https://iconify.design/) 这个强大的开源图标库， +为侧边栏添加 ==图标== 有助于 侧边栏更好的呈现。得益于 [iconify](https://iconify.design/) 这个强大的开源图标库， 你可以使用超过 `200k` 的图标，仅需要添加 `icon` 配置即可。 ```ts title=".vuepress/notes.ts" twoslash @@ -519,16 +539,56 @@ const typescript = defineNoteConfig({ - … ::: -你可能已经注意到，`sidebar: auto` 时，该如何配置 侧边栏图标，事实上很简单，直接在 文件的 `frontmatter` 部分， -添加 一个 `icon` 字段即可。 +当 `sidebar: auto` 时，可在 md 文件的 `frontmatter` 部分，添加 一个 `icon` 字段： -```md title="typescript/guide/intro.md" +```md title="intro.md" --- title: 介绍 icon: ep:guide --- ``` +### 侧边栏徽章 + +主题支持为侧边栏添加徽章，徽章可以用于辅助提供更多的信息。 + +```ts title=".vuepress/notes.ts" twoslash +import { defineNoteConfig } from 'vuepress-theme-plume' + +const typescript = defineNoteConfig({ + dir: 'typescript', + link: '/typescript/', + sidebar: [ + { + text: '指南', + prefix: '/guide', + badge: { text: '徽章', type: 'danger' }, // [!code hl] + items: [ + { text: '介绍', link: 'intro', badge: '徽章' }, // [!code hl] + ], + }, + ] +}) +``` + +当 `sidebar: auto` 时，可在 md 文件的 `frontmatter` 部分，添加 一个 `badge` 字段： + +```md title="intro.md" +--- +title: 介绍 +badge: + text: 徽章 + type: danger +--- +``` + +```md title="intro.md" +--- +title: 介绍 +badge: 徽章 +--- +``` + ### 侧边栏组内分隔 在组内对 项 进行分隔 是一个相对小众的需求，它在组的项比较多，但又不适合拆分为多个组，或者组内拆分多组的情况下， diff --git a/docs/notes/theme/guide/repl/frontend.md b/docs/notes/theme/guide/repl/frontend.md index cd8afccc..fbcd436c 100644 --- a/docs/notes/theme/guide/repl/frontend.md +++ b/docs/notes/theme/guide/repl/frontend.md @@ -3,8 +3,6 @@ title: 前端演示 icon: icon-park-outline:html-five createTime: 2025/01/08 21:34:26 permalink: /guide/repl/frontend/ -badge: - text: 1.0.0-rc.127 + --- ::: important [旧的前端代码演示](./frontend-deprecated.md) 已弃用，请迁移至此新的方案。 diff --git a/theme/src/client/components/Nav/VPNav.vue b/theme/src/client/components/Nav/VPNav.vue index e1c1d7c0..33b856cd 100644 --- a/theme/src/client/components/Nav/VPNav.vue +++ b/theme/src/client/components/Nav/VPNav.vue @@ -94,4 +94,14 @@ watchEffect(() => { position: fixed; } } + +.vp-nav :deep(.vp-menu-badge) { + padding: 3px 4px; + margin-left: 4px; + font-size: 10px; + font-weight: 600; + line-height: 1; + letter-spacing: 0.2px; + border-radius: 6px; +} diff --git a/theme/src/client/components/Nav/VPNavBarMenuGroup.vue b/theme/src/client/components/Nav/VPNavBarMenuGroup.vue index fd815b01..88ceae10 100644 --- a/theme/src/client/components/Nav/VPNavBarMenuGroup.vue +++ b/theme/src/client/components/Nav/VPNavBarMenuGroup.vue @@ -41,5 +41,6 @@ const childrenActive = computed(() => isChildActive(props.item)) :button="item.text" :items="item.items" :prefix-icon="item.icon" + :badge="item.badge" /> diff --git a/theme/src/client/components/Nav/VPNavBarMenuLink.vue b/theme/src/client/components/Nav/VPNavBarMenuLink.vue index 4ec26229..ee4c93b7 100644 --- a/theme/src/client/components/Nav/VPNavBarMenuLink.vue +++ b/theme/src/client/components/Nav/VPNavBarMenuLink.vue @@ -1,5 +1,6 @@