@opentiny/vue-docs 3.16.0 → 3.16.2

package/demos/apis/action-menu.js

@@ -165,11 +165,11 @@ export default {
       type: 'interface',
       code: `
 interface IItemData {
-  label: string           // 菜单项文本
-  disabled: boolean       // 是否禁用
-  divided: boolean        // 是否显示分割线
-  children: IItemData[]   // 菜单项子集
-  icon: Component      // 菜单项图标
+  label?: string           // 菜单项文本
+  disabled?: boolean       // 是否禁用
+  divided?: boolean        // 是否显示分割线
+  children?: IItemData[]   // 菜单项子集
+  icon?: Component      // 菜单项图标
 }
 `
     },

package/demos/pc/app/action-menu/basic-usage-composition-api.vue

@@ -17,7 +17,8 @@ const options = ref([
     label: '关机'
   },
   {
-    label: '重启'
+    label: '重启',
+    divided: true
   },
   {
     label: '网络设置',

package/demos/pc/app/action-menu/basic-usage.vue

@@ -22,7 +22,8 @@ export default {
           label: '关机'
         },
         {
-          label: '重启'
+          label: '重启',
+          divided: true
         },
         {
           label: '网络设置',

package/demos/pc/app/action-menu/webdoc/action-menu.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ActionMenu 菜单按钮
+title: ActionMenu 动作菜单
 ---
 
-# ActionMenu 菜单按钮
+# ActionMenu 动作菜单
 
 提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中。

package/demos/pc/app/autocomplete/webdoc/autocomplete.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Autocomplete 自动完成
+title: AutoComplete 自动完成
 ---
 
-# Autocomplete 自动完成
+# AutoComplete 自动完成
 
 <div>根据输入内容提供对应的输入建议。</div>

package/demos/pc/app/autocomplete/webdoc/autocomplete.en.md

@@ -1,7 +1,7 @@
 ---
-title: Autocomplete
+title: AutoComplete
 ---
 
-# Autocomplete
+# AutoComplete
 
 <div>Provide input suggestions based on the input content.</div>

package/demos/pc/app/checkbox/webdoc/checkbox.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Checkbox 复选框
+title: Checkbox 多选框
 ---
 
-# Checkbox 复选框
+# Checkbox 多选框
 
 <div>用于配置不同场景的选项，提供用户可在一组选项中进行多选。</div>

package/demos/pc/app/checkbox/webdoc/checkbox.en.md

@@ -1,7 +1,7 @@
 ---
-title: Checkbox check box
+title: Checkbox
 ---
 
-# Checkbox check box
+# Checkbox
 
 <div>Used to configure options for different scenarios. Users can select multiple options from a group of options.</div>

package/demos/pc/app/color-picker/webdoc/color-picker.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ColorPicker 色彩选择器
+title: ColorPicker 颜色选择器
 ---
 
-# ColorPicker 色彩选择器
+# ColorPicker 颜色选择器
 
-<div>ColorPicker 色彩选择器</div>
+<div>ColorPicker 颜色选择器</div>

package/demos/pc/app/color-select-panel/webdoc/color-select-panel.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ColorSelectPanel 色彩选择面板
+title: ColorSelectPanel 颜色选择面板
 ---
 
-# ColorSelectPanel 色彩选择面板
+# ColorSelectPanel 颜色选择面板
 
-<div>ColorSelectPanel 色彩选择面板</div>
+<div>ColorSelectPanel 颜色选择面板</div>

package/demos/pc/app/config-provider/webdoc/config-provider.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ConfigProvider 组件
+title: ConfigProvider 全局配置
 ---
 
-# ConfigProvider 组件
+# ConfigProvider 全局配置
 
 <div></div>

package/demos/pc/app/config-provider/webdoc/config-provider.en.md

@@ -1,7 +1,7 @@
 ---
-title: ConfigProvide Assembly
+title: ConfigProvider
 ---
 
-# ConfigProvide Assembly
+# ConfigProvider
 
 <div></div>

package/demos/pc/app/container/webdoc/container.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Container 版型
+title: Container 容器布局
 ---
 
-# Container 版型
+# Container 容器布局
 
 <div> 内置5种常见布局版型，方便快速搭建页面。</div>

package/demos/pc/app/container/webdoc/container.en.md

@@ -1,7 +1,7 @@
 ---
-title: Container dimension
+title: Container
 ---
 
-# Container dimension
+# Container
 
 <div>Container component for layout, which facilitates page layout creation.</div>

package/demos/pc/app/divider/webdoc/divider.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Divider 分隔线
+title: Divider 分割线
 ---
 
-# Divider 分隔线
+# Divider 分割线
 
-<div>Divider 分隔线组件，用于对不同内容的分隔。</div>
+<div>Divider 分割线组件，用于对不同内容的分隔。</div>

package/demos/pc/app/drop-times/webdoc/drop-times.cn.md

@@ -1,7 +1,7 @@
 ---
-title: dropTimes 下拉时间
+title: DropTimes 下拉时间
 ---
 
-# dropTimes 下拉时间
+# DropTimes 下拉时间
 
 <div>时间选值框是下拉框的特例，按时分格式（不支持自定义格式）展示下拉列表以供用户选择，并能扩展下拉框部分参数。</div>

package/demos/pc/app/floatbar/webdoc/floatbar.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Floatbar 浮动块
+title: FloatBar 浮动块
 ---
 
-# Floatbar 浮动块
+# FloatBar 浮动块
 
 <div>始终浮动在屏幕某一位置，不会因网页滚动使此模块离开屏幕。</div>

package/demos/pc/app/floatbar/webdoc/floatbar.en.md

@@ -1,7 +1,7 @@
 ---
-title: Floatbar floating block
+title: FloatBar
 ---
 
-# Floatbar floating block
+# FloatBar
 
 <div>The module always floats at a certain position on the screen and does not leave the screen due to web page scrolling.</div>

package/demos/pc/app/flowchart/webdoc/flowchart.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Flowchart 流程图
+title: FlowChart 流程图
 ---
 
-# Flowchart 流程图
+# FlowChart 流程图
 
 <div>该组件可以用来定制流程图，不依赖其它库或组件。默认的实现支持有状态的节点和连线，支持节点和连线以及空白区域的点击事件。也支持通过插槽个性化定制节点，支持通过配置项控制连线的样式等。</div>

package/demos/pc/app/flowchart/webdoc/flowchart.en.md

@@ -1,7 +1,7 @@
 ---
-title: Flowchart flow chart
+title: FlowChart
 ---
 
-# Flowchart flow chart
+# FlowChart
 
 <div>The module always floats at a certain position on the screen and does not leave the screen due to web page scrolling.</div>

package/demos/pc/app/fullscreen/webdoc/fullscreen.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Fullscreen 全屏显示
+title: Fullscreen 全屏
 ---
 
-# Fullscreen 全屏显示
+# Fullscreen 全屏
 
-<div>Fullscreen 全屏显示</div>
+<div>Fullscreen 全屏</div>

package/demos/pc/app/image/webdoc/image.cn.md

@@ -1,8 +1,8 @@
 ---
-title: Image 图片预览
+title: Image 图片
 ---
 
-# Image 图片预览
+# Image 图片
 
 <div>
 图片组件，支持懒加载以及自适应容器大小等，同时还支持点击全屏浏览图册的功能。

package/demos/pc/app/image/webdoc/image.en.md

@@ -1,8 +1,8 @@
 ---
-title: Image preview
+title: Image
 ---
 
-# Image preview
+# Image
 
 <div>
 Image components, support lazy loading and adaptive container size, etc., but also support the function of clicking full-screen browse album.

package/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Infinite Scroll 无限滚动
+title: InfiniteScroll 无限滚动
 ---
 
-# Infinite Scroll 无限滚动
+# InfiniteScroll 无限滚动
 
 <div>滚动至容器底部时，加载更多数据。</div>

package/demos/pc/app/layout/webdoc/layout.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Layout 布局
+title: Layout 栅格布局
 ---
 
-# Layout 布局
+# Layout 栅格布局
 
 <div>支持 12/24 栅格布局，可使页面布局变得非常简单与清晰。</div>

package/demos/pc/app/link/webdoc/link.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Link 文字链接
+title: Link 链接
 ---
 
-# Link 文字链接
+# Link 链接
 
 <div>文字超链接。</div>

package/demos/pc/app/link/webdoc/link.en.md

@@ -1,7 +1,7 @@
 ---
-title: Link Text Link
+title: Link
 ---
 
-# Link Text Link
+# Link
 
 <div>Text hyperlink.</div>

package/demos/pc/app/numeric/webdoc/numeric.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Numeric 计数器
+title: Numeric 数字输入框
 ---
 
-# Numeric 计数器
+# Numeric 数字输入框
 
-<div>Numeric 计数器可用于输入数字，可自定义数值范围与步进大小，并支持鼠标键盘增减。</div>
+<div>Numeric 数字输入框可用于输入数字，可自定义数值范围与步进大小，并支持鼠标键盘增减。</div>

package/demos/pc/app/numeric/webdoc/numeric.en.md

@@ -1,7 +1,7 @@
 ---
-title: Numeric counter
+title: Numeric
 ---
 
-# Numeric counter
+# Numeric
 
-<div>The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.</div>
+<div>The Numeric can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.</div>

package/demos/pc/app/pager/webdoc/pager.cn.md

@@ -4,4 +4,4 @@ title: Pager 分页
 
 # Pager 分页
 
-<div>当数据量过多时，使用分页分解数据，常用于 Grid 和 Repeater 组件。</div>
+<div>当数据量过多时，使用分页分解数据，常用于 Grid 表格组件。</div>

package/demos/pc/app/pager/webdoc/pager.en.md

@@ -1,7 +1,7 @@
 ---
-title: Pager Pagination
+title: Pagination
 ---
 
-# Pager Pagination
+# Pagination
 
-<div>When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.</div>
+<div>When there is a large amount of data, data is split by page. This function is usually used in Grid components.</div>

package/demos/pc/app/pop-upload/webdoc/pop-upload.cn.md

@@ -1,7 +1,7 @@
 ---
-title: PopUpload 弹出框上传
+title: PopUpload 弹出上传
 ---
 
-# PopUpload 弹出框上传
+# PopUpload 弹出上传
 
 <div>在弹出的对话框里，实现上传操作和展示。</div>

package/demos/pc/app/popconfirm/webdoc/popconfirm.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Popconfirm 气泡确认框组件
+title: PopConfirm 气泡确认框
 ---
 
-# Popconfirm 气泡确认框组件
+# PopConfirm 气泡确认框
 
 <div>使用说明文字及操作按钮对较简单的操作进行二次确认。</div>

package/demos/pc/app/popover/webdoc/popover.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Popover 弹出框
+title: Popover 气泡卡片
 ---
 
-# Popover 弹出框
+# Popover 气泡卡片
 
 <div>Popover可通过对一个触发源操作触发弹出框，多用于信息提示和说明。</div>

package/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Rich Text Editor 富文本编辑器
+title: RichTextEditor 富文本编辑器
 ---
 
-# Rich Text Editor 富文本编辑器
+# RichTextEditor 富文本编辑器
 
 <div>富文本编辑器可以让用户在编辑器中不仅可以编辑常规文本，同时还可以添加图像、视频、链接、表格、列表等元素，并对文本进行格式化，如加粗、斜体、下划线、字体、颜色等。</div>

package/demos/pc/app/statistic/webdoc/statistic.cn.md

@@ -1,7 +1,7 @@
 ---
-title: Statistic 统计组件
+title: Statistic 统计数值
 ---
 
-# Statistic 统计组件
+# Statistic 统计数值
 
 显示统计数据。

package/demos/pc/app/time-line/webdoc/time-line.cn.md

@@ -1,7 +1,7 @@
 ---
-title: TimeLine 时间线
+title: Timeline 时间线
 ---
 
-# TimeLine 时间线
+# Timeline 时间线
 
 <div>可视化时间流信息</div>

package/demos/pc/app/time-select/webdoc/time-select.cn.md

@@ -1,7 +1,7 @@
 ---
-title: TimeSelect 时间选择器
+title: TimeSelect 时间选择
 ---
 
-# TimeSelect 时间选择器
+# TimeSelect 时间选择
 
-<div>时间选值框是下拉框的特例，按时分格式（不支持自定义格式）展示下拉列表以供用户选择，并能扩展下拉框部分参数。</div>
+<div>时间选择框是下拉框的特例，按时分格式（不支持自定义格式）展示下拉列表以供用户选择，并能扩展下拉框部分参数。</div>

package/demos/pc/menus.js

@@ -75,80 +75,64 @@ export const docMenus = [
 
 export const cmpMenus = [
   {
-    'label': '框架风格',
-    'labelEn': 'Frame Style',
+    'label': '基础',
+    'labelEn': 'Basic',
     'key': 'cmp_frame_style',
     'children': [
+      { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
+      { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
       { 'nameCn': '色彩', 'name': 'Color', 'key': 'color' },
-      { 'nameCn': '版型', 'name': 'Container', 'key': 'container' },
+      { 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' },
       { 'nameCn': '字体', 'name': 'Font', 'key': 'font' },
       { 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' },
-      { 'nameCn': '布局', 'name': 'Layout', 'key': 'layout' }
+      { 'nameCn': '栅格布局', 'name': 'Layout', 'key': 'layout' },
+      { 'nameCn': '链接', 'name': 'Link', 'key': 'link' },
+      { 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' }
     ]
   },
   {
-    'label': '导航组件',
-    'labelEn': 'Navigation Components',
+    'label': '导航',
+    'labelEn': 'Navigation',
     'key': 'cmp_navigation_components',
     'children': [
+      { 'nameCn': '动作菜单', 'name': 'ActionMenu', 'key': 'action-menu' },
       { 'nameCn': '锚点', 'name': 'Anchor', 'key': 'anchor' },
-      { 'nameCn': '引导', 'name': 'Guide', 'key': 'guide' },
       { 'nameCn': '面包屑', 'name': 'Breadcrumb', 'key': 'breadcrumb' },
+      { 'nameCn': '下拉菜单', 'name': 'Dropdown', 'key': 'dropdown' },
       { 'nameCn': '瀑布菜单', 'name': 'FallMenu', 'key': 'fall-menu' },
-      { 'nameCn': '浮动块', 'name': 'Floatbar', 'key': 'floatbar' },
-      { 'nameCn': '收缩菜单', 'name': 'ToggleMenu', 'key': 'toggle-menu' },
       { 'nameCn': '收藏夹菜单', 'name': 'LinkMenu', 'key': 'link-menu' },
-      { 'nameCn': '里程碑', 'name': 'Milestone', 'key': 'milestone' },
       { 'nameCn': '导航菜单', 'name': 'NavMenu', 'key': 'nav-menu' },
+      { 'nameCn': '分页', 'name': 'Pager', 'key': 'pager' },
       { 'nameCn': '步骤条', 'name': 'Steps', 'key': 'steps' },
       { 'nameCn': '页签', 'name': 'Tabs', 'key': 'tabs' },
-      { 'nameCn': '时间线', 'name': 'TimeLine', 'key': 'time-line' },
-      { 'nameCn': '树型菜单', 'name': 'TreeMenu', 'key': 'tree-menu' },
-      { 'nameCn': '流程图', 'name': 'Wizard', 'key': 'wizard' },
-      { 'nameCn': '下拉菜单', 'name': 'Dropdown', 'key': 'dropdown' },
-      { 'nameCn': '菜单按钮', 'name': 'ActionMenu', 'key': 'action-menu' },
-      { 'nameCn': '流程图', 'name': 'Flowchart', 'key': 'flowchart' }
-    ]
-  },
-  {
-    'label': '容器组件',
-    'labelEn': 'Container Components',
-    'key': 'cmp_container_components',
-    'children': [
-      { 'nameCn': '走马灯', 'name': 'Carousel', 'key': 'carousel' },
-      { 'nameCn': '折叠面板', 'name': 'Collapse', 'key': 'collapse' },
-      { 'nameCn': '对话框', 'name': 'DialogBox', 'key': 'dialog-box' },
-      { 'nameCn': '弹窗选择 ', 'name': 'DialogSelect ', 'key': 'dialog-select' },
-      { 'nameCn': '抽屉', 'name': 'Drawer', 'key': 'drawer' },
-      { 'nameCn': '过滤器面板', 'name': 'FilterPanel', 'key': 'filter-panel' },
-      { 'nameCn': '面板分割', 'name': 'Split', 'key': 'split' },
-      { 'nameCn': '卡片', 'name': 'Card', 'key': 'card', 'mark': { 'text': 'New' } }
+      { 'nameCn': '收缩菜单', 'name': 'ToggleMenu', 'key': 'toggle-menu' },
+      { 'nameCn': '树型菜单', 'name': 'TreeMenu', 'key': 'tree-menu' }
     ]
   },
   {
-    'label': '表单组件',
-    'labelEn': 'Form Components',
+    'label': '表单',
+    'labelEn': 'Form',
     'key': 'cmp_form_components',
     'children': [
-      { 'nameCn': '自动完成', 'name': 'Autocomplete', 'key': 'autocomplete' },
-      { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
-      { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
+      { 'nameCn': '自动完成', 'name': 'AutoComplete', 'key': 'autocomplete' },
       { 'nameCn': '级联选择器', 'name': 'Cascader', 'key': 'cascader' },
       { 'nameCn': '级联面板', 'name': 'CascaderPanel', 'key': 'cascader-panel' },
-      { 'nameCn': '复选框', 'name': 'Checkbox', 'key': 'checkbox' },
+      { 'nameCn': '多选框', 'name': 'Checkbox', 'key': 'checkbox' },
+      { 'nameCn': '颜色选择器', 'name': 'ColorPicker', 'key': 'color-picker' },
+      { 'nameCn': '颜色选择面板', 'name': 'ColorSelectPanel', 'key': 'color-select-panel' },
       { 'nameCn': '日期选择器', 'name': 'DatePicker', 'key': 'date-picker' },
       { 'nameCn': '下拉时间', 'name': 'DropTimes', 'key': 'drop-times' },
       { 'nameCn': '文件上传', 'name': 'FileUpload', 'key': 'file-upload' },
       { 'nameCn': '表单', 'name': 'Form', 'key': 'form' },
       { 'nameCn': '输入框', 'name': 'Input', 'key': 'input' },
       { 'nameCn': ' IP地址输入框', 'name': 'IpAddress', 'key': 'ip-address' },
-      { 'nameCn': '文字链接', 'name': 'Link', 'key': 'link' },
-      { 'nameCn': '计数器', 'name': 'Numeric', 'key': 'numeric' },
+      { 'nameCn': '数字输入框', 'name': 'Numeric', 'key': 'numeric' },
       { 'nameCn': '弹出编辑', 'name': 'PopEditor', 'key': 'popeditor' },
-      { 'nameCn': '弹出框上传', 'name': 'PopUpload', 'key': 'pop-upload' },
+      { 'nameCn': '弹出上传', 'name': 'PopUpload', 'key': 'pop-upload' },
       { 'nameCn': '单选框', 'name': 'Radio', 'key': 'radio' },
+      { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
       {
-        'nameCn': '富文本',
+        'nameCn': '富文本编辑器',
         'name': 'RichTextEditor',
         'key': 'rich-text-editor',
         'mark': {
@@ -162,13 +146,12 @@ export const cmpMenus = [
       { 'nameCn': '开关', 'name': 'Switch', 'key': 'switch' },
       { 'nameCn': '时间选择器', 'name': 'TimePicker', 'key': 'time-picker' },
       { 'nameCn': '时间选择', 'name': 'TimeSelect', 'key': 'time-select' },
-      { 'nameCn': '颜色选择器', 'name': 'ColorPicker', 'key': 'color-picker' },
-      { 'nameCn': '颜色选择面板', 'name': 'ColorSelectPanel', 'key': 'color-select-panel' }
+      { 'nameCn': '穿梭框', 'name': 'Transfer', 'key': 'transfer' }
     ]
   },
   {
-    'label': '表格组件',
-    'labelEn': 'Table Components',
+    'label': '表格',
+    'labelEn': 'Table',
     'key': 'cmp_table_components',
     'children': [
       { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
@@ -211,8 +194,58 @@ export const cmpMenus = [
     ]
   },
   {
-    'label': '图表组件',
-    'labelEn': 'Chart Components',
+    'label': '数据展示',
+    'labelEn': 'Data Display',
+    'key': 'cmp_data_components',
+    'children': [
+      { 'nameCn': '标记', 'name': 'Badge', 'key': 'badge' },
+      { 'nameCn': '日历', 'name': 'Calendar', 'key': 'calendar' },
+      { 'nameCn': '日历视图', 'name': 'CalendarView', 'key': 'calendar-view' },
+      { 'nameCn': '卡片', 'name': 'Card', 'key': 'card', 'mark': { 'text': 'New' } },
+      { 'nameCn': '走马灯', 'name': 'Carousel', 'key': 'carousel' },
+      { 'nameCn': '折叠面板', 'name': 'Collapse', 'key': 'collapse' },
+      { 'nameCn': '流程图', 'name': 'FlowChart', 'key': 'flowchart' },
+      { 'nameCn': '引导', 'name': 'Guide', 'key': 'guide' },
+      { 'nameCn': '图片', 'name': 'Image', 'key': 'image' },
+      { 'nameCn': '无限滚动', 'name': 'InfiniteScroll', 'key': 'infinite-scroll' },
+      { 'nameCn': '里程碑', 'name': 'Milestone', 'key': 'milestone' },
+      {
+        'nameCn': '思维导图',
+        'name': 'MindMap',
+        'key': 'mind-map',
+        'mark': { 'text': 'New' }
+      },
+      { 'nameCn': '二维码', 'name': 'QrCode', 'key': 'qr-code' },
+      { 'nameCn': '统计数值', 'name': 'Statistic', 'key': 'statistic' },
+      { 'nameCn': '标签', 'name': 'Tag', 'key': 'tag' },
+      { 'nameCn': '标签组', 'name': 'TagGroup', 'key': 'tag-group' },
+      { 'nameCn': '时间线', 'name': 'Timeline', 'key': 'time-line' },
+      { 'nameCn': '树形控件', 'name': 'Tree', 'key': 'tree' },
+      { 'nameCn': '用户头像', 'name': 'UserHead', 'key': 'user-head' },
+      { 'nameCn': '流程图', 'name': 'Wizard', 'key': 'wizard' }
+    ]
+  },
+  {
+    'label': '反馈',
+    'labelEn': 'Feedback',
+    'key': 'cmp_tips_components',
+    'children': [
+      { 'nameCn': '警告', 'name': 'Alert', 'key': 'alert' },
+      { 'nameCn': '对话框', 'name': 'DialogBox', 'key': 'dialog-box' },
+      { 'nameCn': '抽屉', 'name': 'Drawer', 'key': 'drawer' },
+      { 'nameCn': '加载', 'name': 'Loading', 'key': 'loading' },
+      { 'nameCn': '模态框', 'name': 'Modal', 'key': 'modal' },
+      { 'nameCn': '通知', 'name': 'Notify', 'key': 'notify' },
+      { 'nameCn': '气泡确认框', 'name': 'PopConfirm', 'key': 'popconfirm' },
+      { 'nameCn': '进度条', 'name': 'Progress', 'key': 'progress' },
+      { 'nameCn': '气泡卡片', 'name': 'Popover', 'key': 'popover' },
+      { 'nameCn': '骨架屏', 'name': 'Skeleton', 'key': 'skeleton', 'mark': { 'text': 'New' } },
+      { 'nameCn': '文字提示', 'name': 'Tooltip', 'key': 'tooltip' }
+    ]
+  },
+  {
+    'label': '图表',
+    'labelEn': 'Chart',
     'key': 'cmp_chart_components',
     'children': [
       { 'nameCn': '基本用法', 'name': 'Basic Usage', 'key': 'chart' },
@@ -245,62 +278,22 @@ export const cmpMenus = [
     ]
   },
   {
-    'label': '数据组件',
-    'labelEn': 'Data Components',
-    'key': 'cmp_data_components',
-    'children': [
-      { 'nameCn': '分页', 'name': 'Pager', 'key': 'pager' },
-      { 'nameCn': '进度条', 'name': 'Progress', 'key': 'progress' },
-      { 'nameCn': '树形控件', 'name': 'Tree', 'key': 'tree' },
-      { 'nameCn': '穿梭框', 'name': 'Transfer', 'key': 'transfer' },
-      { 'nameCn': '无限滚动', 'name': 'InfiniteScroll', 'key': 'infinite-scroll' },
-      { 'nameCn': '骨架屏', 'name': 'Skeleton', 'key': 'skeleton', 'mark': { 'text': 'New' } },
-      { 'nameCn': '统计', 'name': 'Statistic', 'key': 'statistic' }
-    ]
-  },
-  {
-    'label': '提示组件',
-    'labelEn': 'Tips Components',
-    'key': 'cmp_tips_components',
-    'children': [
-      { 'nameCn': '警告', 'name': 'Alert', 'key': 'alert' },
-      { 'nameCn': '标记', 'name': 'Badge', 'key': 'badge' },
-      { 'nameCn': '加载', 'name': 'Loading', 'key': 'loading' },
-      { 'nameCn': '文字提示', 'name': 'Tooltip', 'key': 'tooltip' },
-      { 'nameCn': '弹出框', 'name': 'Popover', 'key': 'popover' },
-      { 'nameCn': '气泡确认框组件', 'name': 'Popconfirm', 'key': 'popconfirm' },
-      { 'nameCn': '模态框', 'name': 'Modal', 'key': 'modal' },
-      { 'nameCn': '通知', 'name': 'Notify', 'key': 'notify' }
-    ]
-  },
-  {
-    'label': '其他组件',
-    'labelEn': 'Other Components',
+    'label': '其他',
+    'labelEn': 'Other',
     'key': 'cmp_other_components',
     'children': [
       { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
-      { 'nameCn': '日历', 'name': 'Calendar', 'key': 'calendar' },
-      { 'nameCn': '日历视图', 'name': 'CalendarView', 'key': 'calendar-view' },
+      { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
-      { 'nameCn': '图片预览', 'name': 'Image', 'key': 'image' },
-      { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
+      { 'nameCn': '弹窗选择 ', 'name': 'DialogSelect ', 'key': 'dialog-select' },
+      { 'nameCn': '过滤器面板', 'name': 'FilterPanel', 'key': 'filter-panel' },
+      { 'nameCn': '浮动块', 'name': 'FloatBar', 'key': 'floatbar' },
+      { 'nameCn': '全屏', 'name': 'Fullscreen', 'key': 'fullscreen' },
       { 'nameCn': '文字滚动', 'name': 'ScrollText', 'key': 'scroll-text' },
-      { 'nameCn': '标签', 'name': 'Tag', 'key': 'tag' },
-      { 'nameCn': '标签组', 'name': 'TagGroup', 'key': 'tag-group' },
+      { 'nameCn': '面板分割', 'name': 'Split', 'key': 'split' },
       { 'nameCn': '输入框', 'name': 'TextPopup', 'key': 'text-popup' },
       { 'nameCn': '联系人', 'name': 'UserContact', 'key': 'user-contact' },
-      { 'nameCn': '用户头像', 'name': 'UserHead', 'key': 'user-head' },
-      { 'nameCn': '全屏显示', 'name': 'Fullscreen', 'key': 'fullscreen' },
-      { 'nameCn': '全局设置', 'name': 'ConfigProvider', 'key': 'config-provider' },
-      { 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' },
-      { 'nameCn': '二维码', 'name': 'QrCode', 'key': 'qr-code' },
-      { 'nameCn': '水印', 'name': 'Watermark', 'key': 'watermark' },
-      {
-        'nameCn': '脑图',
-        'name': 'MindMap',
-        'key': 'mind-map',
-        'mark': { 'text': 'New' }
-      }
+      { 'nameCn': '水印', 'name': 'Watermark', 'key': 'watermark' }
     ]
   }
 ]
@@ -322,7 +315,7 @@ if (envTarget === 'inner' || showBusiness) {
       { 'nameCn': '部门', 'name': 'Dept', 'key': 'dept' },
       { 'nameCn': '下拉角色', 'name': 'DropRoles', 'key': 'drop-roles' },
       { 'nameCn': '消息弹框', 'name': 'Espace', 'key': 'espace' },
-      { 'nameCn': '权签人', 'name': 'Hrapprover', 'key': 'hrapprover' },
+      { 'nameCn': '权签人', 'name': 'HrApprover', 'key': 'hrapprover' },
       { 'nameCn': '语言选择', 'name': 'Locales', 'key': 'locales' },
       { 'nameCn': '登录用户', 'name': 'LogonUser', 'key': 'logon-user' },
       { 'nameCn': '注销', 'name': 'Logout', 'key': 'logout' },

package/demos/pc/webdoc/import-components.md

@@ -22,7 +22,7 @@ Vite
 import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
 
 export default {
-  plugins: [autoImportPlugin()]
+  plugins: [autoImportPlugin('vite')]
 }
 ```
 
@@ -33,13 +33,53 @@ Webpack
 
 const autoImportPlugin = require('@opentiny/unplugin-tiny-vue')
 
-module.exports = {
-  plugins: [autoImportPlugin()]
-}
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [autoImportPlugin('webpack')]
+  }
+})
 ```
 
 这样你就能直接在项目中使用 TinyVue 的组件，这些组件都是自动按需导入的，无需手动导入，且不用担心项目体积变得太大。
 
+你也可以只使用 TinyVueResolver，这样就可以和其他组件库一起使用。
+
+Vite
+
+```ts
+// vite.config.ts
+
+import Components from 'unplugin-vue-components/vite'
+import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
+
+export default {
+  plugins: [
+    Components({
+      resolvers: [TinyVueResolver]
+    })
+  ]
+}
+```
+
+Webpack
+
+```js
+// webpack.config.js
+
+const Components = require('unplugin-vue-components/webpack').default
+const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver
+
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [TinyVueResolver]
+      })
+    ]
+  }
+})
+```
+
 想了解更多自动按需导入的信息，请参考：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。
 
 ### 多组件引入

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.16.0",
+  "version": "3.16.2",
   "license": "MIT",
   "dependencies": {
     "@unocss/reset": "0.38.2",
@@ -15,18 +15,18 @@
     "vue-router": "4.1.5",
     "marked": "^4.3.0",
     "sortablejs": "1.15.0",
-    "@opentiny/vue-repl": "^1.1.0",
+    "@opentiny/vue-repl": "^1.1.2",
+    "@opentiny/vue": "~3.16.0",
     "@opentiny/vue-common": "~3.16.0",
+    "@opentiny/vue-design-smb": "~3.16.0",
+    "@opentiny/vue-design-aurora": "~3.16.0",
+    "@opentiny/vue-theme": "~3.16.2",
     "@opentiny/vue-icon-saas": "~3.16.0",
     "@opentiny/vue-icon": "~3.16.0",
-    "@opentiny/vue": "~3.16.0",
-    "@opentiny/vue-design-smb": "~3.16.0",
     "@opentiny/vue-design-saas": "~3.16.0",
-    "@opentiny/vue-theme": "~3.16.1",
-    "@opentiny/vue-design-aurora": "~3.16.0",
     "@opentiny/vue-theme-mobile": "~3.16.0",
-    "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme-saas": "~3.16.0"
+    "@opentiny/vue-theme-saas": "~3.16.0",
+    "@opentiny/vue-vite-import": "~1.1.5"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground/App.vue

@@ -17,7 +17,7 @@ import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.14'
+const VERSION = 'tiny-vue-version-3.16'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,27 +28,35 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
 const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
 const cdnHost = localStorage.getItem('setting-cdn')
+
+const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
+const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
+
 const getRuntime = (version) => {
   const useVersion = import.meta.env.VITE_PLAYGROUND_VERIOSN || version
-  return `${cdnHost}/@opentiny/vue@${useVersion}/runtime/`
+  return `${cdnHost}/@opentiny/vue${versionDelimiter}${useVersion}/${fileDelimiter}runtime/`
 }
 
 const createImportMap = (version) => {
   const imports = {
+    'vue': `${cdnHost}/vue${versionDelimiter}3.4.27/${fileDelimiter}dist/vue.runtime.esm-browser.js`,
+    '@vue/compiler-sfc': `${cdnHost}/@vue/compiler-sfc${versionDelimiter}3.4.27/${fileDelimiter}dist/compiler-sfc.esm-browser.js`,
     '@opentiny/vue': `${getRuntime(version)}tiny-vue.mjs`,
     '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
-    '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`,
-    '@opentiny/vue-theme-mobile/': `${cdnHost}/@opentiny/vue-theme-mobile@${version}/`,
-    '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless@${version}/`,
-    'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
+    '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}`,
+    '@opentiny/vue-theme-mobile/': `${cdnHost}/@opentiny/vue-theme-mobile${versionDelimiter}${version}/${fileDelimiter}`,
+    '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless${versionDelimiter}${version}/${fileDelimiter}`,
+    'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
   if (['aurora', 'smb', 'saas'].includes(tinyTheme)) {
-    imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}@${version}/index.js`
+    imports[
+      `@opentiny/vue-design-${tinyTheme}`
+    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
   if (isSaas) {
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
@@ -67,10 +75,10 @@ const getTinyTheme = (version) => {
     theme = 'default'
   }
   const tinyThemeMap = {
-    default: `${cdnHost}/@opentiny/vue-theme@${version}/index.css`,
-    smb: `${cdnHost}/@opentiny/vue-theme@${version}/index.css`,
-    aurora: `${cdnHost}/@opentiny/vue-theme@${version}/index.css`,
-    saas: `${cdnHost}/@opentiny/vue-theme-saas@${version}/index.css`
+    default: `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}index.css`,
+    smb: `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}index.css`,
+    aurora: `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}index.css`,
+    saas: `${cdnHost}/@opentiny/vue-theme-saas${versionDelimiter}${version}/${fileDelimiter}index.css`
   }
   return tinyThemeMap[theme]
 }
@@ -163,7 +171,7 @@ function insertStyleDom(version) {
 
       // 增加mobile支持，增加mobile的样式表
       const mobileLink = link.cloneNode(true)
-      mobileLink.href = `${cdnHost}/@opentiny/vue-theme-mobile@${version}/index.css`
+      mobileLink.href = `${cdnHost}/@opentiny/vue-theme-mobile${versionDelimiter}${version}/${fileDelimiter}index.css`
       iframeWin.document.head.append(mobileLink)
     })
   })

package/playground.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
     <script>
-      const cdnHost = 'https://npm.onmicrosoft.cn'
+      const cdnHost = 'https://registry.npmmirror.com'
       window.localStorage.setItem('setting-cdn', cdnHost)
     </script>
   </head>
@@ -14,4 +14,4 @@
     <div id="app"></div>
     <script type="module" src="/playground/main.js"></script>
   </body>
-</html>
+</html>