docs: 更换 demo 展示插件

packages/ccui/docs/.vitepress/config.ts

@@ -1,3 +1,55 @@
-import config from './config/index'
+import { fileURLToPath, URL } from 'node:url'
+import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'
+import nav from './config/nav'
+import sidebar from './config/sidebar'
 
-export default config
+export default ({ mode }) => {
+  const basePath = mode === 'development' ? '/' : '/ccui/'
+
+  return {
+    base: basePath,
+    lang: 'en-ZH',
+    title: 'vue3-ccui',
+    description: 'vue3-ccui 组件库',
+    lastUpdated: true,
+    ignoreDeadLinks: true, // 忽略死链接
+    head: [
+      // 这里的路径没有被自动更改 手动更改路径
+      [
+        'link',
+        { rel: 'icon', type: 'image/svg+xml', href: `${basePath}logo.svg` },
+      ],
+      [
+        'link',
+        {
+          rel: 'stylesheet',
+          href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css',
+        },
+      ],
+    ],
+    markdown: {
+      config(md) {
+        const docRoot = fileURLToPath(new URL('../', import.meta.url))
+        md.use(demoPreviewPlugin, { docRoot })
+      },
+    },
+    themeConfig: {
+      sidebar,
+      nav,
+      logo: '/logo.svg',
+      algolia: {
+        appId: 'K0NNJA38K6',
+        apiKey: '0b6d20552d2073390d2bbb0a84fb49dd',
+        indexName: 'ccui',
+      },
+      socialLinks: [
+        { icon: 'github', link: 'https://github.com/vaebe/ccui.git' },
+      ],
+      outlineTitle: '快速前往',
+      footer: {
+        message: 'Released under the MIT License.',
+        copyright: 'Copyright © 2022-present vaebe',
+      },
+    },
+  }
+}

packages/ccui/docs/.vitepress/theme/index.ts

@@ -1,14 +1,16 @@
+import DemoPreview, { useComponents } from '@vitepress-code-preview/container'
 import DefaultTheme from 'vitepress/theme'
 import ccui from '../../../ui/vue-ccui'
-import { useComponents } from './useComponents'
-import 'vitepress-theme-demoblock/dist/theme/styles/index.css'
 import './styles/index.scss'
+import '@vitepress-code-preview/container/dist/style.css'
 
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
+
     ctx.app.use(ccui)
-    useComponents(ctx.app)
+
+    useComponents(ctx.app, DemoPreview)
   },
 }

packages/ccui/docs/components/avatar/index.md

@@ -1,16 +1,16 @@
 # Avatar 头像
 
-- Avatar 头像组件可以用来代表人物或对象， 支持使用图片、文字作为 Avatar。
+Avatar 头像组件可以用来代表人物或对象， 支持使用图片、文字作为 Avatar。
 
 ## 何时使用
 
-- 展示用户头像
+展示用户头像
 
 ## 基本用法
 
-- 已经提供 `width、height` 属性，所以不在提供 `size` 默认值属性。
+已经提供 `width、height` 属性，所以不在提供 `size` 默认值属性。
 
-:::demo 基本使用示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/button/index.md

@@ -1,14 +1,14 @@
 # Button 按钮
 
-- 常用的操作按钮。
+常用的操作按钮。
 
 ## 何时使用
 
-- 按钮用于开始一个即时操作。
+按钮用于开始一个即时操作。
 
 ## 基本用法
 
-:::demo Button 示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/calendar/index.md

@@ -1,14 +1,14 @@
 # Calendar 日历
 
-- 日历组件
+日历组件
 
 ## 何时使用
 
-- 显示日期
+显示日期
 
 ## 基本用法
 
-:::demo Calendar 示例
+:::demo
 
 ```vue
 <script>
@@ -42,7 +42,7 @@ export default defineComponent({
 
 ## 自定义header
 
-:::demo Calendar 示例
+:::demo
 
 ```vue
 <script>
@@ -93,7 +93,7 @@ export default defineComponent({
 
 ## 自定义日期内容
 
-:::demo Calendar 示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/card/index.md

@@ -1,14 +1,14 @@
 # Card 卡片
 
-- 将信息聚合在卡片容器中展示。
+将信息聚合在卡片容器中展示。
 
 ## 何时使用
 
-- 基础卡片容器，其中可包含文字，列表，图片，段落，用于概览展示时。
+基础卡片容器，其中可包含文字，列表，图片，段落，用于概览展示时。
 
 ## 基本用法
 
-:::demo Card 示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/check-box/index.md

@@ -1,15 +1,16 @@
 # CheckBox 多选框
 
-- 一组备选项中进行多选
+一组备选项中进行多选
 
 ## 何时使用
 
-- 在一组选项中进行多项选择；
-- 单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
+在一组选项中进行多项选择；
+
+单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
 
 ## CheckBox基本用法
 
-:::demo CheckBox示例
+:::demo
 
 ```vue
 <script>
@@ -77,7 +78,7 @@ export default defineComponent({
 
 ## CheckBoxGroup基本用法
 
-:::demo CheckBoxGroup 示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/divider/index.md

@@ -1,14 +1,14 @@
 # Divider 分隔线
 
-- 区隔内容的分隔线
+区隔内容的分隔线
 
 ## 何时使用
 
-- 对不同段落的文本进行分隔。
+对不同段落的文本进行分隔。
 
 ## Divider基本用法
 
-:::demo Divider 示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/radio/index.md

@@ -1,14 +1,14 @@
 # Radio 单选框
 
-- 单选框组件
+单选框组件
 
 ## 何时使用
 
-- 用于在多个备选项中选中单个状态。
+用于在多个备选项中选中单个状态。
 
 ## Radio基本用法
 
-:::demo Radio 示例
+:::demo
 
 ```vue
 <script>
@@ -50,9 +50,9 @@ export default defineComponent({
 
 ## RadioGroup基本用法
 
-- 用于展示一组多个 radio 单选框
+用于展示一组多个 radio 单选框
 
-:::demo RadioGroup 示例
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/status/index.md

@@ -8,7 +8,7 @@
 
 ## 基本用法
 
-:::demo 基本用法
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/tabs/index.md

@@ -1,14 +1,14 @@
 # Tabs 选项卡
 
-- 选项卡切换组件。
+选项卡切换组件。
 
 ## 何时使用
 
-- 用户需要通过平级的区域将大块内容进行收纳和展现，保持界面整洁。
+用户需要通过平级的区域将大块内容进行收纳和展现，保持界面整洁。
 
 ## Tabs基本用法
 
-:::demo Tabs 基本用法
+:::demo
 
 ```vue
 <script>
@@ -53,7 +53,7 @@ export default defineComponent({
 
 ## Tabs卡片风格的标签
 
-:::demo Tabs 卡片风格的标签
+:::demo
 
 ```vue
 <script>
@@ -98,7 +98,7 @@ export default defineComponent({
 
 ## Tabs带有边框的卡片风格
 
-:::demo Tabs 带有边框的卡片风格
+:::demo
 
 ```vue
 <script>
@@ -143,7 +143,7 @@ export default defineComponent({
 
 ## Tabs自定义标签页标题
 
-:::demo Tabs 自定义标签页标题
+:::demo
 
 ```vue
 <script>
@@ -191,7 +191,7 @@ export default defineComponent({
 
 ## Tabs标签位置的设置
 
-:::demo Tabs 标签位置的设置
+:::demo
 
 ```vue
 <script>

packages/ccui/docs/components/tree/index.md

@@ -1,14 +1,14 @@
 # Tree 树
 
-- 用清晰的层级结构展示信息，可展开或折叠。
+用清晰的层级结构展示信息，可展开或折叠。
 
 ## 何时使用
 
-- 需要展示层级结构。
+需要展示层级结构。
 
 ## 基本用法
 
-:::demo 渲染一棵基本树
+:::demo
 
 ```vue
 <script lang="ts">