refactor(docs): refactor all the documentation

- The latest version of `vitepress-theme-demoblock` does not support `:::demo <comment>
- With `<script setup>` tag, the vitepress will give a 404 error when trying to load the demo code.

Related Issue: #1879

Author: fu050409

packages/devui-vue/docs/.vitepress/theme/useComponents.js

@@ -1,8 +1,6 @@
 // Don't remove this file, because it registers the demo components.
 import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue'
 import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue'
-// import Demo from '../demo/Demo.vue';
-// import DemoBlock from '../demo/DemoBlock.vue';
 
 export function useComponents(app) {
   app.component('Demo', Demo)

packages/devui-vue/docs/components/accordion/index.md

@@ -2,9 +2,9 @@
 
 为页面提供导航的组件。
 
-#### 何时使用
-
+:::tip 何时使用
 需要通过分组组织菜单的时候使用。
+:::
 
 ### 基本用法
 

packages/devui-vue/docs/components/badge/index.md

@@ -2,13 +2,17 @@
 
 图标右上角的圆形徽标数字。
 
-#### 何时使用
-
+:::tip 何时使用
 出现在图标右上角或列表项右方，通过不同的状态色加数字提示用户有消息需要处理时。
+:::
+
+## 用法
 
 ### 基本徽章
 
-::: demo 基本徽章类型，当有包裹元素时在右上角显示徽章和数目。
+基本徽章类型，当有包裹元素时在右上角显示徽章和数目。
+
+::: demo
 
 ```vue
 <template>
@@ -34,7 +38,9 @@
 
 ### 点状徽章
 
-:::demo 点状徽章类型，当有包裹元素且 `show-dot` 参数为 true 时为点状徽章，默认在右上角展示小点不显示数目。
+点状徽章类型，当有包裹元素且 `show-dot` 参数为 true 时为点状徽章，默认在右上角展示小点不显示数目。
+
+:::demo
 
 ```vue
 <template>
@@ -63,7 +69,9 @@
 
 ### 计数徽章
 
-:::demo 当徽章独立使用且不包裹任何元素时，只展示徽章状态色和数目。
+当徽章独立使用且不包裹任何元素时，只展示徽章状态色和数目。
+
+:::demo
 
 ```vue
 <template>
@@ -99,7 +107,9 @@
 
 ### 状态徽章
 
-:::demo 当徽章独立使用、不包裹任何元素且 `show-dot` 参数为 true 时为状态徽章，不同状态展示不同色点。
+当徽章独立使用、不包裹任何元素且 `show-dot` 参数为 true 时为状态徽章，不同状态展示不同色点。
+
+:::demo
 
 ```vue
 <template>
@@ -125,7 +135,9 @@
 
 ### 徽章位置
 
-:::demo 通过 `position` 参数设置徽章位置。
+通过 `position` 参数设置徽章位置。
+
+:::demo
 
 ```vue
 <template>
@@ -144,7 +156,9 @@
 
 ### 自定义
 
-:::demo 通过 `bg-color` 参数设置徽章展示状态色(此时 `status` 参数设置的徽章状态色失效)，通过 `offset` 参数可设置相对于 position 的徽章偏移量。通过 ` text-color``、bgColor ` 自定义文字、背景颜色。
+通过 `bg-color` 参数设置徽章展示状态色(此时 `status` 参数设置的徽章状态色失效)，通过 `offset` 参数可设置相对于 position 的徽章偏移量。通过 ` text-color``、bgColor ` 自定义文字、背景颜色。
+
+:::demo
 
 ```vue
 <template>
@@ -164,7 +178,7 @@
 
 ### 隐藏徽章
 
-通过 `hidden` 属性设置徽章是否可见
+通过 `hidden` 属性设置徽章是否可见。
 
 ::: demo
 

packages/devui-vue/docs/components/card/index.md

@@ -30,7 +30,6 @@
   </d-card>
 </template>
 <style lang="scss">
-
 .card-demo-basic {
   cursor: pointer;
 
@@ -123,7 +122,6 @@
   </d-card>
 </template>
 <style lang="scss">
-
 .card-demo-use-img {
   cursor: pointer;
 
@@ -187,7 +185,6 @@
   </d-card>
 </template>
 <style lang="scss">
-
 .card-demo-custom-area {
   cursor: pointer;
 
@@ -238,8 +235,8 @@
 
 ### Card 参数
 
-| 参数   | 类型                          | 默认      | 说明                                                         | 跳转 Demo                 |
-| :----- |:----------------------------| :-------- | :----------------------------------------------------------- | :------------------------ |
+| 参数   | 类型                        | 默认      | 说明                                                         | 跳转 Demo                 |
+| :----- | :-------------------------- | :-------- | :----------------------------------------------------------- | :------------------------ |
 | src    | `string`                    | ''        | 可选，图片路径                                               | [使用图片](#使用图片)     |
 | align  | [IAlignType](#ialigntype)   | `'start'` | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [自定义区域](#自定义区域) |
 | shadow | [IShadowType](#ishadowtype) | `'hover'` | 可选，设置增强阴影显示时机                                   | [阴影效果](#阴影效果)     |
@@ -254,7 +251,7 @@
 | title    | 卡片的主要内容描述，一般定义为卡片名称 |
 | subtitle | 对标题的补充，可包含标签等信息         |
 | actions  | 决策作用，可以包含操作文本或者操作图标 |
-|default|自定义卡片内所有内容|
+| default  | 自定义卡片内所有内容                   |
 
 ### Card 类型定义
 

packages/devui-vue/docs/components/category-search/index.md

@@ -2,6 +2,8 @@
 
 按类型进行搜索，目前支持的类型包括：`radio`、`checkbox`、`label`、`textInput`，`numberRange`，`keyword`。
 
+## 用法
+
 ### 基本用法
 
 :::demo
@@ -142,7 +144,9 @@ export default defineComponent({
 
 ### 自定义展示模板
 
-:::demo 自定义分类下拉展示模板和选中后的标签展示模板。分类下拉展示模板的插槽名为`${field}Menu`，标签展示模板的插槽名为`${field}Tag`，`field`为分类的字段名；插槽参数为`category`参数中对应分类的数据。
+自定义分类下拉展示模板和选中后的标签展示模板。分类下拉展示模板的插槽名为`${field}Menu`，标签展示模板的插槽名为`${field}Tag`，`field`为分类的字段名；插槽参数为`category`参数中对应分类的数据。
+
+:::demo
 
 ```vue
 <template>
@@ -241,7 +245,9 @@ export default defineComponent({
 
 ### 自定义扩展按钮
 
-:::demo 自定义分类下拉展示模板和选中后的标签展示模板。分类下拉展示模板的插槽名为`${field}Menu`，标签展示模板的插槽名为`${field}Tag`，`field`为分类的字段名；插槽参数为`category`参数中对应分类的数据。
+自定义分类下拉展示模板和选中后的标签展示模板。分类下拉展示模板的插槽名为`${field}Menu`，标签展示模板的插槽名为`${field}Tag`，`field`为分类的字段名；插槽参数为`category`参数中对应分类的数据。
+
+:::demo
 
 ```vue
 <template>
@@ -395,13 +401,13 @@ export default defineComponent({
 
 ### CategorySearch 方法
 
-| 方法名              | 说明                                                                       | 参数                                                          |
-| :------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------------ |
-| chooseItem          | 调用组件方法处理选中数据，针对`radio`类型，参数为当前 tag 和选中项         | (tag: ICategorySearchTagItem, chooseItem: ITagOption) => void |
-| chooseItems         | 调用组件方法处理选中数据，针对`checkbox \| label`类型，参数为当前 tag      | (tag: ICategorySearchTagItem) => void                         |
-| getTextInputValue   | 调用组件方法处理选中数据，针对`textInput`类型，参数为当前 tag 和输入内容   | (tag: ICategorySearchTagItem, inputValue: string) => void     |
-| getNumberRangeValue | 调用组件方法处理选中数据，针对`numberRange`类型，参数为当前 tag 和输入内容 | (tag: ICategorySearchTagItem, rangeValue: number[]) => void   |
-|toggleTagMenu|控制某个已选择tag所对应下拉框的展开收起状态，可通过`status`参数指定展开收起状态|`(field: string, status?: boolean) => void`|
+| 方法名              | 说明                                                                              | 参数                                                          |
+| :------------------ | :-------------------------------------------------------------------------------- | :------------------------------------------------------------ |
+| chooseItem          | 调用组件方法处理选中数据，针对`radio`类型，参数为当前 tag 和选中项                | (tag: ICategorySearchTagItem, chooseItem: ITagOption) => void |
+| chooseItems         | 调用组件方法处理选中数据，针对`checkbox \| label`类型，参数为当前 tag             | (tag: ICategorySearchTagItem) => void                         |
+| getTextInputValue   | 调用组件方法处理选中数据，针对`textInput`类型，参数为当前 tag 和输入内容          | (tag: ICategorySearchTagItem, inputValue: string) => void     |
+| getNumberRangeValue | 调用组件方法处理选中数据，针对`numberRange`类型，参数为当前 tag 和输入内容        | (tag: ICategorySearchTagItem, rangeValue: number[]) => void   |
+| toggleTagMenu       | 控制某个已选择 tag 所对应下拉框的展开收起状态，可通过`status`参数指定展开收起状态 | `(field: string, status?: boolean) => void`                   |
 
 ### 类型定义
 

packages/devui-vue/docs/components/code-editor/index.md

@@ -4,9 +4,13 @@
 
 由于 monaco editor 对语法处理是通过 web Worker 实现的，所以需要加载处理语法的 Worker, 配置方式参考[官方教程](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md).
 
+## 用法
+
 ### 基本用法
 
-:::demo `v-model`双向绑定编辑器内容，`options`参数[参考 monaco editor 定义](https://github.com/microsoft/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html)。
+`v-model`双向绑定编辑器内容，`options`参数[参考 monaco editor 定义](https://github.com/microsoft/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html)。
+
+:::demo
 
 ```vue
 <template>
@@ -40,7 +44,9 @@ export default defineComponent({
 
 ### 代码高亮
 
-:::demo 对一个代码块进行高亮
+对一个代码块进行高亮。
+
+:::demo
 
 ```vue
 <template>