feat: update site design style (#1752)

CONTRIBUTING.md

@@ -135,3 +135,14 @@ If you have submitted Issue or PR to OpenTiny, you can comment on Issue or Pull
 ```
 
 For detailed rules, please refer to [https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
+
+## Contributors
+
+We sincerely thank all the contributors who have participated in the TinyVue project!
+In recognition of the contributions of our contributors, we have added a 'Contributors' section at the bottom of each component documentation, displaying the GitHub information of each contributor, including their profile picture, username, and GitHub personal page.
+Due to the current manpower constraints, only information of internal members (or former members) of the TinyVue team is currently being recorded. Open source contributors are welcome to supplement their own information.
+The file that record contributors info is:
+
+```
+/examples/sites/src/data/contributorMap.js
+```

CONTRIBUTING.zh-CN.md

@@ -135,3 +135,13 @@ pnpm dev:vue2
 ```
 
 详细规则可以参考：[https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
+
+## 贡献者
+
+我们诚挚感谢每位参与过TinyVue项目的贡献者们！
+为彰显贡献者们的付出，我们在每个组件文档底部增加“贡献者”模块，陈列各位贡献者的github信息，包括头像、昵称、github个人主页等。由于当前团队人力较为紧张，目前只录入TinyVue团队内部成员（或前组员）信息，欢迎各位开源贡献者自行补充信息。
+贡献者信息记录的文件路径为：
+
+```
+/examples/sites/src/data/contributorMap.js
+```

examples/react-site/src/tools/utils.js

@@ -17,13 +17,13 @@ const $split = (target, splitor = '/', pos = 0) => target.split(splitor).slice(p
 
 /**
  * 延时函数
- * @example $delay(300).then(()=>{   })
+ * @example $delay(300).then(() =>{   })
  */
 const $delay = time => new Promise(resolve => setTimeout(resolve, time));
 
 /**
  * 空闲函数
- * @example $idle().then(()=>{   })
+ * @example $idle().then(() =>{   })
  */
 const $idle = () => new Promise(resolve => (window.requestIdleCallback || window.requestAnimationFrame)(resolve));
 

examples/sites/demos/apis/autocomplete.js

@@ -319,6 +319,7 @@ export default {
     {
       name: 'IAutocompleteFetchSuggestions',
       type: 'type',
+      depTypes: ['IAutocompleteSuggestionItem'],
       code: `type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void`
     }
   ]

examples/sites/demos/apis/base-select.js

@@ -880,8 +880,8 @@ interface ICacheOp {
   highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
   highlightNum?: number // 高亮个性化的条数,默认：Infinity
   cacheNum?: number // 存储个性化的条数,默认：Infinity
-  serialize?: ()=> string  // 本地存储序列化方法,默认：JSON.stringify
-  deserialize?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
+  serialize?: () => string  // 本地存储序列化方法,默认：JSON.stringify
+  deserialize?: () => ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
 }        
 `
     },

examples/sites/demos/apis/breadcrumb.js

@@ -170,6 +170,7 @@ interface IOptionsItemTo {
     {
       name: 'IOptionsItem',
       type: 'interface',
+      depTypes: ['IOptionsItemTo'],
       code: `
 interface IOptionsItem {
   label?: string
@@ -181,6 +182,7 @@ interface IOptionsItem {
     {
       name: 'ISelectValue',
       type: 'interface',
+      depTypes: ['IOptionsItem', 'IOptionsItemTo'],
       code: `
 interface ISelectValue {
   event: Event

examples/sites/demos/apis/calendar.js

@@ -7,8 +7,8 @@ export default {
       props: [
         {
           name: 'events',
-          typeAnchorName: 'eventLists',
-          type: 'eventLists[]',
+          typeAnchorName: 'ICalendarEvent',
+          type: 'ICalendarEvent[]',
           defaultValue: '',
           desc: {
             'zh-CN': '事件列表',
@@ -90,15 +90,17 @@ export default {
   ],
   types: [
     {
-      name: 'eventLists',
+      name: 'ICalendarEvent',
       type: 'interface',
       code: `
-      interface eventLists [{
-        time: 1534297845236, // 指定需要展示事件的日期
-        title: '消息', // 指定事件标题
-        content: '这是一条消息', // 指定事件的具体内容
-        type: 'info' // 事件主题类型，包括 warning、error、info、success。
-      }]`
+type ICalendarEventType = 'info' | 'warning' | 'error' | 'info' | 'success'
+
+interface ICalendarEvent {
+    time: number, // 指定需要展示事件的日期的时间戳
+    title: string, // 指定事件标题
+    content: string, // 指定事件的具体内容
+    type: ICalendarEventType // 事件主题类型
+}`
     }
   ]
 }

examples/sites/demos/apis/cascader-panel.js

@@ -252,6 +252,7 @@ export default {
     {
       name: 'ICascaderPanelNodePropValue',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNodePropValue =
   | ICascaderPanelNodeValue
@@ -261,6 +262,7 @@ type ICascaderPanelNodePropValue =
     {
       name: 'ICascaderPanelData',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelData = {
   value?: ICascaderPanelNodeValue
@@ -274,6 +276,7 @@ type ICascaderPanelData = {
     {
       name: 'ICascaderPanelConfig',
       type: 'interface',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 interface ICascaderPanelConfig {
   emitPath: boolean
@@ -296,6 +299,7 @@ interface ICascaderPanelConfig {
     {
       name: 'ICascaderPanelNode',
       type: 'type',
+      depTypes: ['ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNode = {
   parent: ICascaderPanelNode | null
@@ -320,6 +324,7 @@ type ICascaderPanelNode = {
     {
       name: 'ICascaderPanelLazyLoad',
       type: 'type',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
       `

examples/sites/demos/apis/cascader.js

@@ -536,6 +536,7 @@ export default {
     {
       name: 'ICascaderPanelNodePropValue',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNodePropValue =
   | ICascaderPanelNodeValue
@@ -545,6 +546,7 @@ type ICascaderPanelNodePropValue =
     {
       name: 'ICascaderPanelData',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelData = {
   value?: ICascaderPanelNodeValue
@@ -558,6 +560,7 @@ type ICascaderPanelData = {
     {
       name: 'ICascaderPanelConfig',
       type: 'interface',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 interface ICascaderPanelConfig {
   emitPath: boolean
@@ -580,6 +583,7 @@ interface ICascaderPanelConfig {
     {
       name: 'ICascaderPanelNode',
       type: 'type',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNode = {
   parent: ICascaderPanelNode | null
@@ -604,6 +608,7 @@ type ICascaderPanelNode = {
     {
       name: 'ICascaderPanelLazyLoad',
       type: 'type',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
       `

examples/sites/demos/apis/color-picker.js

@@ -65,7 +65,7 @@ export default {
       events: [
         {
           name: 'cancel',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '按下取消或点击外部的时触发该事件',

examples/sites/demos/apis/color-select-panel.js

@@ -52,7 +52,7 @@ export default {
       events: [
         {
           name: 'cancel',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '按下取消或点击外部的时触发该事件',

examples/sites/demos/apis/dialog-select.js

@@ -502,6 +502,7 @@ interface IDialogOption {
     {
       name: 'IGridOption',
       type: 'interface',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IGridOption {
   // 表格列配置

examples/sites/demos/apis/directives.js

@@ -0,0 +1,3 @@
+export default {
+  apis: []
+}

examples/sites/demos/apis/dropdown.js

@@ -486,6 +486,7 @@ export default {
     {
       name: 'IMenuOption',
       type: 'interface',
+      depTypes: ['IItemData'],
       code: `
 interface IMenuOption {
   options: IItemData[]
@@ -498,6 +499,7 @@ interface IMenuOption {
     {
       name: 'IItemClickParam',
       type: 'interface',
+      depTypes: ['IItemData'],
       code: `        
 interface IItemClickParam {
   itemData: IItemData

examples/sites/demos/apis/file-upload.js

@@ -177,7 +177,7 @@ export default {
           type: 'Object',
           defaultValue: '',
           desc: {
-            'zh-CN': '配置 EDM 下载功能所需的参数,例如：edm:{download:{token:()=>{}}},token为鉴权token',
+            'zh-CN': '配置 EDM 下载功能所需的参数,例如：edm:{download:{token:() =>{}}},token为鉴权token',
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -369,7 +369,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN':
-              '配置为 true,启用 EDM 上传文件夹的功能，最多只能上传 5 层;{edm:upload:{isFolder:true,token:()=>{}}}',
+              '配置为 true,启用 EDM 上传文件夹的功能，最多只能上传 5 层;{edm:upload:{isFolder:true,token:() =>{}}}',
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -524,7 +524,7 @@ export default {
           type: 'Function',
           defaultValue: '',
           desc: {
-            'zh-CN': '配置 EDM 批量打包下载的 token；配置结构为 edm:{download:packageToken:()=>{}},返回一个 Promise',
+            'zh-CN': '配置 EDM 批量打包下载的 token；配置结构为 edm:{download:packageToken:() =>{}},返回一个 Promise',
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -559,7 +559,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN':
-              "配置 EDM 预览功能所需的参数,例如：edm:{preview:{plugin：util.default,previewUrl:./_index.html?appid=应用Id,packageName: 'jslib',token:()=>{}}}",
+              "配置 EDM 预览功能所需的参数,例如：edm:{preview:{plugin：util.default,previewUrl:./_index.html?appid=应用Id,packageName: 'jslib',token:() =>{}}}",
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -718,7 +718,7 @@ export default {
           type: 'Object',
           defaultValue: '',
           desc: {
-            'zh-CN': '配置 EDM 上传功能所需的参数,例如：edm:{upload:{token:()=>{}}}',
+            'zh-CN': '配置 EDM 上传功能所需的参数,例如：edm:{upload:{token:() =>{}}}',
             'en-US': ''
           },
           mode: ['mobile-first'],

examples/sites/demos/apis/form.js

@@ -170,7 +170,7 @@ export default {
         },
         {
           name: 'popper-options',
-          typeAnchorName: 'popover#IPopperOption',
+          linkTo: 'popover#IPopperOption',
           type: 'Popover.IPopperOption',
           defaultValue: '',
           desc: {
@@ -679,6 +679,7 @@ interface IFormErrorField {
     {
       name: 'IFormValidateMethod',
       type: 'function',
+      depTypes: ['IFormError'],
       code: `
 function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
 `
@@ -686,6 +687,7 @@ function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) =>
     {
       name: 'IFormValidateFieldMethod',
       type: 'function',
+      depTypes: ['IFormError'],
       code: `
 function IFormValidateFieldMethod(
   prop: string | string[],

examples/sites/demos/apis/grid.js

@@ -148,16 +148,7 @@ export default {
           type: 'string[]',
           defaultValue: "['TinyGridColumn']",
           metaData: {
-            experimental: {
-              version: '3.17.0'
-            }
-          },
-          versionTipOption: {
-            extendTip: {
-              'zh-CN': '该属性于3.17版本新增，封装 grid-column 时需要配置此字段，提供给表格收集配置',
-              'en-US':
-                'This field needs to be configured when encapsulating grid-column and is provided for table collection configuration'
-            }
+            new: '3.17.0'
           },
           desc: {
             'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
@@ -699,7 +690,7 @@ export default {
         },
         {
           name: 'render-empty',
-          type: '()=> string | VNode',
+          type: '() => string | VNode',
           defaultValue: '',
           desc: {
             'zh-CN': '空数据渲染',
@@ -1305,7 +1296,7 @@ export default {
         },
         {
           name: 'fullscreen',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '全屏时或关闭全屏时触发的时间',
@@ -1422,8 +1413,7 @@ export default {
         },
         {
           name: 'select-change',
-          typeAnchorName: 'ISelectChangeArgs',
-          type: '(args: ISelectChangeArgs, event: Event)=> void',
+          type: '(args: object, event: Event)=> void',
           defaultValue: '',
           desc: {
             'zh-CN': '只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件',
@@ -1462,17 +1452,10 @@ export default {
         },
         {
           name: 'toggle-group-change',
-          typeAnchorName: 'IToggleGroupChangeArgs',
-          type: '(row: IRow)=> void',
+          type: '(row: IRow) => void',
           defaultValue: '',
           metaData: {
-            experimental: '3.17.0'
-          },
-          versionTipOption: {
-            extendTip: {
-              'zh-CN': '该特性于3.17版本新增',
-              'en-US': 'This feature was added in version 3.17'
-            }
+            new: '3.17.0'
           },
           desc: {
             'zh-CN': '当分组的展开和收起时会触发该事件',
@@ -1526,7 +1509,7 @@ export default {
       methods: [
         {
           name: 'clearActived',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清除单元格激活状态',
@@ -1548,7 +1531,7 @@ export default {
         },
         {
           name: 'clearAll',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -1573,7 +1556,7 @@ export default {
         },
         {
           name: 'clearCurrentColumn',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于当前列，手动清空当前高亮的状态',
@@ -1595,7 +1578,7 @@ export default {
         },
         {
           name: 'clearCurrentRow',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于当前行，手动清空当前高亮的状态',
@@ -1666,7 +1649,7 @@ export default {
         },
         {
           name: 'clearRadioRow',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于单选行，手动清空用户的选择',
@@ -1688,7 +1671,7 @@ export default {
         },
         {
           name: 'clearRowExpand',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清空展开行状态，数据会恢复成未展开的状态',
@@ -1710,7 +1693,7 @@ export default {
         },
         {
           name: 'clearScroll',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清除滚动相关信息，还原到初始状态',
@@ -1732,7 +1715,7 @@ export default {
         },
         {
           name: 'clearSelected',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清除单元格选中状态',
@@ -1754,7 +1737,7 @@ export default {
         },
         {
           name: 'clearSelection',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于多选行，手动清空用户的选择',
@@ -1776,7 +1759,7 @@ export default {
         },
         {
           name: 'clearSort',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清空排序条件，数据会恢复成未排序的状态',
@@ -1798,7 +1781,7 @@ export default {
         },
         {
           name: 'clearTreeExpand',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清空树形节点的展开状态，数据会恢复成未展开的状态',
@@ -1821,7 +1804,7 @@ export default {
         },
         {
           name: 'closeFilter',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动关闭筛选面板（某些特殊场景可能会用到）',
@@ -1843,7 +1826,7 @@ export default {
         },
         {
           name: 'closeMenu',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动关闭快捷菜单（某些特殊场景可能会用到）',
@@ -1925,7 +1908,7 @@ export default {
         {
           name: 'fullValidate',
           typeAnchorName: 'IRow',
-          type: '(rows: IRow[], callback: ()=> void)=> Promise',
+          type: '(rows: IRow[], callback: () => void)=> Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '表格完整校验函数，和 validate 的区别就是会对全量数据的所有规则进行完整校验',
@@ -1949,7 +1932,7 @@ export default {
         {
           name: 'getActiveRow',
           typeAnchorName: 'IRow',
-          type: '()=> IRow',
+          type: '() => IRow',
           defaultValue: '',
           desc: {
             'zh-CN': '获取已激活的行数据',
@@ -2087,7 +2070,7 @@ export default {
         {
           name: 'getCurrentRow',
           typeAnchorName: 'IRow',
-          type: '()=> IRow',
+          type: '() => IRow',
           defaultValue: '',
           desc: {
             'zh-CN': '用于当前行，获取当前行的数据',
@@ -2134,7 +2117,7 @@ export default {
         {
           name: 'getInsertRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取新增的数据',
@@ -2157,7 +2140,7 @@ export default {
         {
           name: 'getRadioRow',
           typeAnchorName: 'IRow',
-          type: '()=> IRow',
+          type: '() => IRow',
           defaultValue: '',
           desc: {
             'zh-CN': '用于单选行，获取当已选中的数据',
@@ -2180,7 +2163,7 @@ export default {
         {
           name: 'getRecordset',
           typeAnchorName: 'IRecordset',
-          type: '()=> IRecordset',
+          type: '() => IRecordset',
           defaultValue: '',
           desc: {
             'zh-CN': '获取表格数据集（获取新增、删除、更改的数据，对于增删改查表格非常方便）',
@@ -2204,7 +2187,7 @@ export default {
         {
           name: 'getRemoveRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取已删除的数据',
@@ -2296,7 +2279,7 @@ export default {
         {
           name: 'getSelectRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '用于多选行，获取已选中的数据',
@@ -2319,7 +2302,7 @@ export default {
         {
           name: 'getTableColumn',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取当前表格的列（完整的全量表头列、处理条件之后的全量表头列、当前渲染中的表头列）',
@@ -2343,7 +2326,7 @@ export default {
         {
           name: 'getTableData',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -2369,7 +2352,7 @@ export default {
         {
           name: 'getUpdateRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取已修改的数据',
@@ -2391,7 +2374,7 @@ export default {
         },
         {
           name: 'handleFetch',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '触发表格的 fetch-data ',
@@ -2626,7 +2609,7 @@ export default {
         },
         {
           name: 'recalculate',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '重新计算表格（对于某些特殊场景可能会用到，比如隐藏的表格、更新列宽...等）',
@@ -2649,7 +2632,7 @@ export default {
         },
         {
           name: 'refreshColumn',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '刷新列配置（对于显示/隐藏列场景下可能会用到）',
@@ -2672,7 +2655,7 @@ export default {
         },
         {
           name: 'refreshData',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -2746,7 +2729,7 @@ export default {
         },
         {
           name: 'removeSelecteds',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '删除已选中的所有行数据',
@@ -2768,7 +2751,7 @@ export default {
         },
         {
           name: 'resetAll',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动重置列的所有操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
@@ -2791,7 +2774,7 @@ export default {
         },
         {
           name: 'resetCustoms',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '手动重置列的显示/隐藏操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
@@ -2814,7 +2797,7 @@ export default {
         },
         {
           name: 'resetResizable',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '手动重置列宽拖动的操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
@@ -3202,7 +3185,7 @@ export default {
         },
         {
           name: 'toggleAllSelection',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '用于多选行，切换所有行的选中状态',
@@ -3294,7 +3277,7 @@ export default {
         {
           name: 'validate',
           typeAnchorName: 'IRow',
-          type: '(rows: IRow | IRow[], callback: ()=> void)=> Promise',
+          type: '(rows: IRow | IRow[], callback: () => void)=> Promise',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -3810,7 +3793,7 @@ export default {
       props: [
         {
           name: 'before-close-full-screen',
-          type: '()=> boolean',
+          type: '() => boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭全屏前的拦截方法，返回 false 则阻止关闭全屏，返回 true 则不阻止',
@@ -3822,7 +3805,7 @@ export default {
         },
         {
           name: 'before-open-full-screen',
-          type: '()=> boolean',
+          type: '() => boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '全屏前的拦截方法，返回 false 则阻止全屏，返回 true 则不阻止',
@@ -3942,7 +3925,7 @@ export default {
         },
         {
           name: 'reset-setting',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '点击个性化面板的重置按钮触发该事件',
@@ -4004,6 +3987,7 @@ interface IRow {
     {
       name: 'IColumnConfig',
       type: 'interface',
+      depTypes: ['IValidRules'],
       code: `
 interface IColumnConfig {
   type: 'index' | 'radio' | 'checkbox'
@@ -4053,7 +4037,7 @@ interface IPagerConfig {
       type: 'type',
       code: `
 interface IDataHandler {
-  api: ()=> Promise
+  api: () => Promise
 }
       `
     },
@@ -4099,7 +4083,7 @@ interface IToolTipConfig {
   type?: 'normal' | 'warning' | 'error' | 'info' | 'success'
   effect?: 'dark' | 'light'
   // 自定义提示内容
-  contentMethod?: ()=> string | VNode
+  contentMethod?: () => string | VNode
 }
       `
     },
@@ -4121,7 +4105,7 @@ interface IContextMenuConfig {
   footer?: { 
     options: IMenuOptions
   }
-  visibleMethod?: ()=> boolean
+  visibleMethod?: () => boolean
 }
       `
     },
@@ -4230,7 +4214,7 @@ interface IRadioConfig {
   // 默认选中指定行（只会在初始化时被触发一次，需要有 row-id）
   checkRowKey?: string
   // 是否允许选中的方法，该方法的返回值用来决定这一行的 Radio 是否可以选中
-  checkMethod?: ()=> boolean
+  checkMethod?: () => boolean
 }
       `
     },
@@ -4246,7 +4230,7 @@ interface ISelectConfig {
   // 默认勾选开指定行（只会在初始化时被触发一次，需要有 row-id）
   checkRowKeys?: string[] 
   // 是否允许选中的方法，该方法的返回值用来决定这一行的 checkbox 是否可以勾选
-  checkMethod?: ()=> boolean 
+  checkMethod?: () => boolean 
   // 默认勾选所有（只会在初始化时被触发一次）}
   checkAll?: boolean
   // 是否显示全选按钮（如果 checkStrictly=true 则默认为 false）
@@ -4333,7 +4317,7 @@ interface IScrollLoadConfig {
       type: 'type',
       code: `
 interface IEventsConfig {
-  [field: string]: ()=> void
+  [field: string]: () => void
 }
       `
     },
@@ -4349,7 +4333,7 @@ interface IDropConfig {
   // 开启列拖拽
   column: boolean
   // 拖拽前函数，返回 false 取消拖动
-  onBeforeMove?: ()=> boolean
+  onBeforeMove?: () => boolean
   // 拖拽触发源选择器一般是class类名
   trigger?: string
   // 根据行的类名来控制是否可以拖动
@@ -4420,9 +4404,9 @@ interface IBeforePageChangeArgs {
   //当前的页大小
   currentPageSize: number
   //生效回调
-  callback: ()=> void
+  callback: () => void
   //失效回调
-  rollback: ()=> void
+  rollback: () => void
 }
       `
     },
@@ -4446,6 +4430,7 @@ interface IToolbarButtonClickArgs {
     {
       name: 'ICellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ICellClickArgs {
   // 当前行
@@ -4472,6 +4457,7 @@ interface ICellContextMenuArgs {
     {
       name: 'ICellArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ICellArgs {
   //当前行
@@ -4498,6 +4484,7 @@ interface ICurrentChangeArgs {
     {
       name: 'IEditActivedArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditActivedArgs {
   // 当前行
@@ -4510,6 +4497,7 @@ interface IEditActivedArgs {
     {
       name: 'IEditClosedArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditClosedArgs {
   // 当前行
@@ -4522,6 +4510,7 @@ interface IEditClosedArgs {
     {
       name: 'IEditDisabledArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditDisabledArgs {
   //当前行
@@ -4546,6 +4535,7 @@ interface IFilterChangeArgs {
     {
       name: 'IFooterCellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFooterCellClickArgs {
   $columnIndex: number
@@ -4563,6 +4553,7 @@ interface IFooterCellClickArgs {
     {
       name: 'IContextMenuArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IContextMenuArgs {
   $columnIndex: number
@@ -4584,6 +4575,7 @@ interface IContextMenuArgs {
     {
       name: 'IFooterCellDblClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFooterCellDblClickArgs {
   $columnIndex: number
@@ -4601,6 +4593,7 @@ interface IFooterCellDblClickArgs {
     {
       name: 'IHeaderCellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IHeaderCellClickArgs {
   $columnIndex: number
@@ -4622,6 +4615,7 @@ interface IHeaderCellClickArgs {
     {
       name: 'IHeaderCellDblClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IHeaderCellDblClickArgs {
   // 列数据
@@ -4638,6 +4632,7 @@ interface IHeaderCellDblClickArgs {
     {
       name: 'IResizableChangeArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IResizableChangeArgs {
   // table组件的vue 实例 
@@ -4674,6 +4669,7 @@ interface IScrollArgs {
     {
       name: 'ISelectAllArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISelectAllArgs {
   $columnIndex: number
@@ -4733,6 +4729,7 @@ interface IToggleTreeChangeArgs {
     {
       name: 'IValidErrorArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IValidErrorArgs { 
   // 校验的单元格信息对象
@@ -4749,6 +4746,7 @@ interface IValidErrorArgs {
     {
       name: 'ISortChangeArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISortChangeArgs { 
   // 表格实例对象信息
@@ -4767,6 +4765,7 @@ interface ISortChangeArgs {
     {
       name: 'IClassNameArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IClassNameArgs {
   seq: number
@@ -4782,6 +4781,7 @@ interface IClassNameArgs {
     {
       name: 'IIndexMethodArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IIndexMethodArgs {
   row: IRow
@@ -4794,6 +4794,7 @@ interface IIndexMethodArgs {
     {
       name: 'IFormatConfig',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFormatConfig {
   // 列数据源
@@ -4845,6 +4846,7 @@ interface ISettingConfigs {
     {
       name: 'ISpanMethodArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISpanMethodArgs {
   // 行标
@@ -4860,6 +4862,7 @@ interface ISpanMethodArgs {
     },
     {
       name: 'IExportCsvOptions',
+      depTypes: ['IRow'],
       type: 'type',
       code: `
 interface IExportCsvOptions {
@@ -4879,7 +4882,7 @@ interface IEditorConfig {
   component: 'input' | 'select' | Component
   // 传递给组件的事件集合
   events?: {
-    [event]: ()=> void
+    [event]: () => void
   }
   // 传递给编辑器组件的属性集合
   attrs?: {
@@ -4909,19 +4912,7 @@ interface IFilterConfig {
     label: string
     // 设置枚举数据的实际值属性字段， 默认'value'
     value: string 
-  }[] | ()=> Promise
-}
-      `
-    },
-    {
-      name: 'IOPConfig',
-      type: 'type',
-      code: `
-interface IOPConfig {
-  editConfig?: IEditConfig
-  pagerConfig?: IPagerConfig
-  columns: IColumnConfig[]
-  data: IRow[]
+  }[] | () => Promise
 }
       `
     },

examples/sites/demos/apis/mind-map.js

@@ -60,7 +60,7 @@ export default {
         {
           name: 'expandNode',
           typeAnchorName: 'IMindExpandNode',
-          type: 'IMindnExpandNode',
+          type: 'IMindExpandNode',
           desc: {
             'zh-CN': '展开节点时会触发该事件',
             'en-US': 'This event will be triggered when expanding a node'

examples/sites/demos/apis/modal.js

@@ -18,7 +18,7 @@ export default {
         },
         {
           name: 'cancel-btn-props',
-          typeAnchorName: 'button#API',
+          linkTo: 'button#API',
           type: 'Button.props',
           defaultValue: '{}',
           desc: {
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'confirm-btn-props',
-          typeAnchorName: 'button#API',
+          linkTo: 'button#API',
           type: 'Button.props',
           defaultValue: '{}',
           desc: {

examples/sites/demos/apis/multi-select.js

@@ -161,6 +161,7 @@ export default {
     {
       name: 'IMultiSelectMenu',
       type: 'interface',
+      depTypes: ['IMultiSelectOption'],
       code: `
 interface IMultiSelectMenu {
   title: string, // 菜单项标题

examples/sites/demos/apis/pop-upload.js

@@ -29,7 +29,7 @@ export default {
         },
         {
           name: 'before-remove',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'before-upload',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -227,7 +227,7 @@ export default {
       events: [
         {
           name: 'error',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -239,7 +239,7 @@ export default {
         },
         {
           name: 'exceed',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(files: File | File[], fileList: IFile[]) => void',
           defaultValue: '',
           desc: {
@@ -251,7 +251,7 @@ export default {
         },
         {
           name: 'progress',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -263,7 +263,7 @@ export default {
         },
         {
           name: 'remove',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile, fileList: IFile[]) => void',
           defaultValue: '',
           desc: {
@@ -276,7 +276,7 @@ export default {
         },
         {
           name: 'success',
-          typeAnchorName: 'IFile',
+          linkTo: 'file-upload#IFile',
           type: '(res: ProgressEvent, file: IFile) => void',
           defaultValue: '',
           desc: {

examples/sites/demos/apis/popconfirm.js

@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'placement',
-          typeAnchorName: 'popover#IPopperPlacement',
+          linkTo: 'popover#IPopperPlacement',
           type: 'IPopperPlacement',
           defaultValue: "'top'",
           desc: {

examples/sites/demos/apis/popeditor.js

@@ -96,7 +96,7 @@ export default {
         },
         {
           name: 'grid-op',
-          typeAnchorName: 'grid#API',
+          linkTo: 'grid#API',
           type: `InstanceType&#60typeof TinyGrid&#62['$props']`,
           defaultValue: '',
           desc: {
@@ -141,8 +141,8 @@ export default {
         },
         {
           name: 'pager-op',
-          typeAnchorName: 'pager#API',
-          type: `InstanceType&#60typeof TinyPager&#62['$props']`,
+          linkTo: 'pager#API',
+          type: `InstanceType<typeof TinyPager>['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置分页配置',
@@ -221,7 +221,7 @@ export default {
         },
         {
           name: 'selected-box-op',
-          typeAnchorName: 'dialog-select#ISelectedBoxOption',
+          linkTo: 'dialog-select#ISelectedBoxOption',
           type: 'ISelectedBoxOption',
           defaultValue: '',
           desc: {

examples/sites/demos/apis/popover.js

@@ -169,7 +169,8 @@ export default {
         },
         {
           name: 'popper-options',
-          type: 'object',
+          type: 'IPopperOption',
+          typeAnchorName: 'IPopperOption',
           defaultValue: '{}',
           desc: {
             'zh-CN': '弹出层参数',
@@ -283,7 +284,7 @@ export default {
       events: [
         {
           name: 'after-enter',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '进入的动画播放完毕后触发',
@@ -296,7 +297,7 @@ export default {
         },
         {
           name: 'after-leave',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '离开的动画播放完毕后触发',
@@ -309,7 +310,7 @@ export default {
         },
         {
           name: 'hide',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '隐藏时触发',
@@ -322,7 +323,7 @@ export default {
         },
         {
           name: 'show',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '显示时触发',

examples/sites/demos/apis/qr-code.js

@@ -86,7 +86,7 @@ export default {
       events: [
         {
           name: 'change',
-          type: '()=> void',
+          type: '() => void',
           desc: {
             'zh-CN': '二维码发生变化后的回调',
             'en-US': 'chang callback'

examples/sites/demos/apis/select.js

@@ -936,8 +936,8 @@ interface ICacheOp {
   highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
   highlightNum?: number // 高亮个性化的条数,默认：Infinity
   cacheNum?: number // 存储个性化的条数,默认：Infinity
-  serialize?: ()=> string  // 本地存储序列化方法,默认：JSON.stringify
-  deserialize?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
+  serialize?: () => string  // 本地存储序列化方法,默认：JSON.stringify
+  deserialize?: () => ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
 }        
 `
     },

examples/sites/demos/apis/split.js

@@ -114,7 +114,7 @@ export default {
       events: [
         {
           name: 'left-top-click',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '左箭头收起时触发',
@@ -125,7 +125,7 @@ export default {
         },
         {
           name: 'moveend',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '拖拽结束的事件',
@@ -136,7 +136,7 @@ export default {
         },
         {
           name: 'movestart',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '拖拽开始的事件',

examples/sites/demos/apis/steps.js

@@ -225,6 +225,7 @@ export default {
     {
       name: 'IStepsItem',
       type: 'interface',
+      depTypes: ['IStepsStatus'],
       code: `
 interface IStepsItem {
   // 节点数据

examples/sites/demos/apis/tag-group.js

@@ -70,6 +70,7 @@ export default {
     },
     {
       name: 'ITagGroupItemClick',
+      depTypes: ['ITagGroupDataItem'],
       type: 'type',
       code: `type ITagGroupItemClick = (item: ITagGroupDataItem, index: number, event: Event) => void`
     }

examples/sites/demos/apis/transfer.js

@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -102,7 +102,7 @@ export default {
         },
         {
           name: 'left-columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -173,7 +173,7 @@ export default {
         },
         {
           name: 'right-columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -267,7 +267,7 @@ export default {
         },
         {
           name: 'tree-op',
-          typeAnchorName: 'tree#API',
+          linkTo: 'tree#API',
           type: 'Tree props',
           defaultValue: '',
           desc: {

examples/sites/demos/apis/tree.js

@@ -546,7 +546,7 @@ export default {
         },
         {
           name: 'close-edit',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭编辑的事件',
@@ -741,7 +741,7 @@ export default {
         },
         {
           name: 'open-edit',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '进入编辑的事件',

examples/sites/demos/mobile-first/app/grid/basic-usage.vue

@@ -43,6 +43,7 @@
             :image="row.logo"
             :flex-grow="[0, 0]"
             :flex-basis="['50%', '50%']"
+            operate-flex-basis="80px"
             :options="listOptions"
             class="mb-3"
           >
@@ -176,7 +177,12 @@ export default {
       },
       operationConfig: {
         buttons: [
-          { name: '操作1', icon: IconAreaChart(), click: this.clickHandler, disabled: true },
+          {
+            name: '操作',
+            icon: IconAreaChart(),
+            click: this.clickHandler,
+            disabled: true
+          },
           { name: '操作2', icon: IconBarChart(), click: this.clickHandler, disabled: (row) => row.id === '1' },
           { name: '操作3', icon: IconDotChart(), click: this.clickHandler, hidden: true },
           { name: '操作4', icon: IconLineChart(), click: this.clickHandler, hidden: (row) => row.id === '2' },

examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex justify-between">
+    <tiny-time-line :data="data">
+      <template #left="data">
+        <div class="ml-1.5 -mt-1.5">
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
+        </div>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data.slotScope.title }}
+        </span>
+      </template>
+    </tiny-time-line>
+
+    <tiny-time-line :data="data1">
+      <template #left="data1">
+        <div class="ml-1.5 -mt-1.5">
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
+        </div>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data1.slotScope.title }}
+        </span>
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script>
+import { TimeLineNew, UserHead } from '@opentiny/vue'
+import { IconLoading } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew,
+    TinyUserHead: UserHead
+  },
+  data() {
+    return {
+      imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
+      data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
+      data1: [
+        { title: '节点标题1' },
+        { title: '节点标题2' },
+        { title: '节点标题3' },
+        { title: '节点标题4' },
+        { title: '节点标题5', autoColor: IconLoading() }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-time-line :data="data"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical :limited-nodes="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/many-status.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-time-line :data="data" :show-number="false"> </tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'error' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/node-max.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-time-line :data="data" vertical :node-max="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue

@@ -0,0 +1,32 @@
+<template>
+  <tiny-time-line :data="data" :show-number="false">
+    <template #icon="{ slotScope }">
+      <icon-loading v-if="slotScope.type === 'loading'"></icon-loading>
+      <icon-time v-if="slotScope.type === 'time'"></icon-time>
+    </template>
+  </tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+import { IconLoading, IconTime } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    IconLoading: IconLoading(),
+    IconTime: IconTime(),
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconLoading() },
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: IconTime() },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/single-status.vue

@@ -0,0 +1,40 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <tiny-time-line :data="data1" show-icon> </tiny-time-line>
+    <tiny-time-line :data="data2" show-icon>
+      <template #show-icon>
+        <icon-copy />
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+import { IconCopy, IconLoading } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew,
+    IconCopy: IconCopy()
+  },
+  data() {
+    return {
+      data1: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconLoading() }
+      ],
+      data2: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconCopy() }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-time-line :data="data" sub-field></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', tips: '这是节点内容描述' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', tips: '这是节点内容描述' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', tips: '这是节点内容描述' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', tips: '这是节点内容描述' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.cn.md

@@ -0,0 +1,9 @@
+---
+title: TimeLine 时间线
+---
+
+# TimeLine 时间线
+
+<div>
+
+</div>

examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.en.md

@@ -0,0 +1,9 @@
+---
+title: TimeLine 时间线
+---
+
+# TimeLine 时间线
+
+<div>
+
+</div>

examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.js

@@ -0,0 +1,120 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `data` 属性设置时间线步骤条数据</p>',
+        'en-US': '<p>Set the timeline step bar data through the `data` property.</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'sub-field',
+      name: {
+        'zh-CN': '两侧分布',
+        'en-US': 'Bilateral distribution'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `sub-field` 属性设置时间线两侧展示。</p>',
+        'en-US': '<p>Use the `sub-field` attribute to set the display on both sides of the timeline.</p>'
+      },
+      codeFiles: ['sub-field.vue']
+    },
+    {
+      demoId: 'single-status',
+      name: {
+        'zh-CN': '单状态时间轴',
+        'en-US': 'Single-state timeline'
+      },
+      desc: {
+        'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
+        'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
+      },
+      codeFiles: ['single-status.vue']
+    },
+    {
+      demoId: 'many-status',
+      name: {
+        'zh-CN': '多状态时间轴',
+        'en-US': 'Multi-state timeline'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过在`data`里面的属性`autoColor`设置自定义状态。对应场景： `success` ：成功  `error` ：失败 `info` ：等待 </p>',
+        'en-US':
+          '<p>Set the user-defined state through the `autoColor` attribute in `data`. Scenario: `success`: success; error`: failure; info`: waiting</p>'
+      },
+      codeFiles: ['many-status.vue']
+    },
+    {
+      demoId: 'node-toset',
+      name: {
+        'zh-CN': '节点配置图标',
+        'en-US': 'Node configuration icon'
+      },
+      desc: {
+        'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
+        'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
+      },
+      codeFiles: ['node-toset.vue']
+    },
+    {
+      demoId: 'fold-time',
+      name: {
+        'zh-CN': '折叠时间轴',
+        'en-US': 'Collapse Timeline'
+      },
+      desc: {
+        'zh-CN': '<p>当节点个数达到七项时，自动折叠节点，仅展示最近三项，点击后展开。</p>',
+        'en-US':
+          '<p>When there are more than seven nodes, the system automatically collapses the nodes and displays only the latest three nodes.</p>'
+      },
+      codeFiles: ['fold-time.vue']
+    },
+    {
+      demoId: 'node-max',
+      name: {
+        'zh-CN': '触发折叠节点数',
+        'en-US': 'Number of Nodes Triggering Folding'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>node-max</code> 属性可以配置节点达到指定个数后自动折叠节点。</p>',
+        'en-US':
+          '<p>Use <code>node-max</code> to automatically collapse nodes after reaching a specified number of nodes.</p>'
+      },
+      codeFiles: ['node-max.vue']
+    },
+    {
+      demoId: 'limited-nodes',
+      name: {
+        'zh-CN': '折叠后节点数',
+        'en-US': 'Number of Nodes After Folding'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>limited-nodes</code> 属性可以设置折叠后展示的节点个数。</p>',
+        'en-US': '<p>Use <code>node-max</code> to set the number of nodes displayed after folding.</p>'
+      },
+      codeFiles: ['limited-nodes.vue']
+    },
+    {
+      demoId: 'auto-slot',
+      name: {
+        'zh-CN': '自定义插槽',
+        'en-US': 'Custom Slots'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 `slot` 为 `left` 可以自定义步骤条右侧内容。`data`中自定义属性名应避免`name`(正标题)、`tips`(副标题)、`time`(时间)属性</p>',
+        'en-US':
+          '<p>You can set `slot` to `left` to customize the content on the right of the step bar. User-defined attribute names in `data` should avoid `name` (head title), `tips` (subtitle), and `time` (time) attributes.</p>'
+      },
+      codeFiles: ['auto-slot.vue']
+    }
+  ]
+}

examples/sites/demos/mobile-first/menus.js

@@ -11,7 +11,7 @@ export const cmpMenus = [
   {
     label: '导航组件',
     labelEn: 'Navigation',
-    key: 'cmp_navigation_components',
+    key: 'cmp-navigation-components',
     children: [
       { name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
       { name: 'CalendarBar', nameCn: '日历栏', key: 'calendar-bar' },
@@ -21,6 +21,8 @@ export const cmpMenus = [
       { name: 'Tabs ', nameCn: '标签页', key: 'tabs' },
       { name: 'Menu ', nameCn: '菜单', key: 'menu' },
       { name: 'TimeLine ', nameCn: '时间线', key: 'time-line' },
+      //  测试时打开该行---------------
+      // { name: 'TimeLineNew ', nameCn: '时间线AUI', key: 'time-line-new' },
       { name: 'Dropdown ', nameCn: '下拉菜单', key: 'dropdown' },
       { name: 'Flowchart ', nameCn: '流程图', key: 'flowchart' }
     ]
@@ -28,7 +30,7 @@ export const cmpMenus = [
   {
     label: '容器组件',
     labelEn: 'Container',
-    key: 'cmp_container_components',
+    key: 'cmp-container-components',
     children: [
       { name: 'Cell', nameCn: '单元格', key: 'cell' },
       { name: 'ActionSheet', nameCn: '动作面板', key: 'action-sheet' },
@@ -46,7 +48,7 @@ export const cmpMenus = [
   {
     label: '表单组件',
     labelEn: 'Form',
-    key: 'cmp_form_components',
+    key: 'cmp-form-components',
     children: [
       { name: 'DatePickerMobile', nameCn: '日期选择器', key: 'date-picker-mobile' },
       { name: 'DatePicker', nameCn: '日期选择器多端', key: 'date-picker' },
@@ -74,7 +76,7 @@ export const cmpMenus = [
   {
     label: '数据组件',
     labelEn: 'Data',
-    key: 'cmp_data_components',
+    key: 'cmp-data-components',
     children: [
       { name: 'ColumnListItem', nameCn: '分区列表项', key: 'column-list-item' },
       { name: 'StandardListItem', nameCn: '标准列表项', key: 'standard-list-item' },
@@ -86,13 +88,13 @@ export const cmpMenus = [
   {
     'label': '表格组件',
     'labelEn': 'Table Components',
-    'key': 'cmp_table_components',
+    'key': 'cmp-table-components',
     'children': [{ 'nameCn': '基本用法', 'name': 'Grid', 'key': 'grid' }]
   },
   {
     label: '提示组件',
     labelEn: 'Tooltip',
-    key: 'cmp_tips_components',
+    key: 'cmp-tips-components',
     children: [
       { name: 'Alert', nameCn: '警告', key: 'alert' },
       { name: 'Badge', nameCn: '标记', key: 'badge' },
@@ -108,7 +110,7 @@ export const cmpMenus = [
   {
     label: '其它组件',
     labelEn: 'Others',
-    key: 'cmp_other_components',
+    key: 'cmp-other-components',
     children: [
       { name: 'Exception', nameCn: '缺省页', key: 'exception' },
       { name: 'Image', nameCn: '图片预览', key: 'image' },

examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-top mb10">
     <tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
-    <span>当前类型：{{ type }}</span>
+    <span class="demo-anchor">当前类型：{{ type }}</span>
   </div>
   <tiny-anchor :links="links" :type="type"></tiny-anchor>
 </template>
@@ -53,4 +53,8 @@ const type = ref('dot')
   display: flex;
   align-items: center;
 }
+.demo-anchor {
+  margin-left: 8px;
+  font-size: 14px;
+}
 </style>

examples/sites/demos/pc/app/anchor/basic-usage.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="demo-top mb10">
       <tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
-      <span>当前类型：{{ type }}</span>
+      <span class="demo-anchor">当前类型：{{ type }}</span>
     </div>
     <tiny-anchor :links="links" :type="type"></tiny-anchor>
   </div>
@@ -63,4 +63,8 @@ export default {
   display: flex;
   align-items: center;
 }
+.demo-anchor {
+  margin-left: 8px;
+  font-size: 14px;
+}
 </style>

examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="demo-top mb10">
       <tiny-switch v-model="isAffix"></tiny-switch>
-      <span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
+      <span class="demo-anchor">{{ isAffix ? '固定模式' : '非固定模式' }}</span>
     </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>
@@ -57,4 +57,8 @@ const links = ref([
   display: flex;
   align-items: center;
 }
+.demo-anchor {
+  margin-left: 8px;
+  font-size: 14px;
+}
 </style>

examples/sites/demos/pc/app/anchor/is-affix.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="demo-top mb10">
       <tiny-switch v-model="isAffix"></tiny-switch>
-      <span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
+      <span class="demo-anchor">{{ isAffix ? '固定模式' : '非固定模式' }}</span>
     </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>
@@ -66,4 +66,8 @@ export default {
   display: flex;
   align-items: center;
 }
+.demo-anchor {
+  margin-left: 8px;
+  font-size: 14px;
+}
 </style>

examples/sites/demos/pc/app/badge/offset-composition-api.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>使用字符串：</p>
+    <br />
     <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
+    <br /><br />
     <p>使用数字：</p>
+    <br />
     <tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
   </div>
 </template>

examples/sites/demos/pc/app/badge/offset.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>使用字符串：</p>
+    <br />
     <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
+    <br /><br />
     <p>使用数字：</p>
+    <br />
     <tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
   </div>
 </template>

examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue

@@ -44,6 +44,7 @@ const handleFocus2 = () => {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 .tiny-button {
   margin-right: 10px;

examples/sites/demos/pc/app/base-select/automatic-dropdown.vue

@@ -52,6 +52,7 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 .tiny-button {
   margin-right: 10px;

examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue

@@ -30,5 +30,6 @@ const value = ref({ val: '选项3', id: 3 })
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/binding-obj.vue

@@ -39,5 +39,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue

@@ -39,5 +39,6 @@ const multiVal = ref(['选项2', '11'])
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/clear-no-match-value.vue

@@ -47,5 +47,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue

@@ -40,5 +40,6 @@ const copyValue = ref('')
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/copy-multi.vue

@@ -50,5 +50,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue

@@ -146,5 +146,6 @@ onMounted(() => {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/copy-single.vue

@@ -152,5 +152,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue

@@ -68,5 +68,6 @@ const customFilterMethod = (searchValue) => {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/filter-method.vue

@@ -78,5 +78,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue

@@ -39,5 +39,6 @@ const value3 = ref([])
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/input-box-type.vue

@@ -48,5 +48,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue

@@ -35,5 +35,6 @@ const value = ref('')
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue

@@ -44,5 +44,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/map-field-composition-api.vue

@@ -29,5 +29,6 @@ const options = ref([
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/map-field.vue

@@ -61,5 +61,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue

@@ -47,5 +47,6 @@ const clickItem = (value) => {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/memoize-usage.vue

@@ -61,5 +61,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="demo-box">
     <tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
+    <br /><br />
     <p>边框为表单范围</p>
     <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
       <tiny-form-item label="label 垂直布局">

examples/sites/demos/pc/app/base-select/multiple-mix.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="demo-box">
     <tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
+    <br /><br />
     <p>边框为表单范围</p>
     <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
       <tiny-form-item label="label 垂直布局">
@@ -82,7 +83,7 @@
 </template>
 
 <script>
-import { Form, FormItem, Option, Button } from '@opentiny/vue'
+import { Form, FormItem, Option, Button, BaseSelect } from '@opentiny/vue'
 
 export default {
   components: {

examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue

@@ -30,5 +30,6 @@ const value = ref('')
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/no-data-text.vue

@@ -39,5 +39,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/optimization-composition-api.vue

@@ -41,5 +41,6 @@ const onChange = (value) => {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/optimization.vue

@@ -50,5 +50,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/size-composition-api.vue

@@ -35,5 +35,6 @@ const value4 = ref(['选项1', '选项2'])
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/size.vue

@@ -43,5 +43,6 @@ export default {
 p {
   font-size: 14px;
   line-height: 1.5;
+  padding: 16px 0;
 }
 </style>

examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue

@@ -74,6 +74,11 @@ const value2 = ref('选项1')
     margin: 6px;
   }
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
 
 <style lang="less">

examples/sites/demos/pc/app/base-select/slot-default.vue

@@ -78,6 +78,11 @@ export default {
     margin: 6px;
   }
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
 
 <style lang="less">

examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>场景1：下拉树单选</div>
+  <p>场景1：下拉树单选</p>
   <tiny-base-select v-model="value">
     <template #panel="{ methods: { updateSelectedData, hidePanel } }">
       <tiny-tree
@@ -24,7 +24,7 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
-  <div>场景2：下拉树多选</div>
+  <p>场景2：下拉树多选</p>
   <tiny-base-select v-model="value2" multiple>
     <template #panel="{ methods: { updateSelectedData } }">
       <tiny-tree
@@ -49,7 +49,7 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
-  <div>场景3：下拉树可搜索</div>
+  <p>场景3：下拉树可搜索</p>
   <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
     <template #panel="{ methods: { updateSelectedData, hidePanel } }">
       <tiny-tree
@@ -140,4 +140,9 @@ const filter = (value, data) => {
 .tiny-base-select {
   width: 280px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>

examples/sites/demos/pc/app/base-select/slot-panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>场景1：下拉树单选</div>
+  <p>场景1：下拉树单选</p>
   <tiny-base-select v-model="value">
     <template #panel="{ methods: { updateSelectedData, hidePanel } }">
       <tiny-tree
@@ -24,7 +24,7 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
-  <div>场景2：下拉树多选</div>
+  <p>场景2：下拉树多选</p>
   <tiny-base-select v-model="value2" multiple>
     <template #panel="{ methods: { updateSelectedData } }">
       <tiny-tree
@@ -49,7 +49,7 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
-  <div>场景3：下拉树可搜索</div>
+  <p>场景3：下拉树可搜索</p>
   <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
     <template #panel="{ methods: { updateSelectedData, hidePanel } }">
       <tiny-tree
@@ -146,4 +146,9 @@ export default {
 .tiny-base-select {
   width: 280px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>

examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-bulletin-board :tab-title="tabTitle" :data="data" :icon="IconShare"></tiny-bulletin-board>
+  <div class="demo-bulletin-board">
+    <tiny-bulletin-board :tab-title="tabTitle" :data="data" :icon="IconShare"></tiny-bulletin-board>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -91,3 +93,9 @@ const data = ref([
   ]
 ])
 </script>
+
+<style scoped>
+.demo-bulletin-board ::v-deep .tiny-svg {
+  fill: white;
+}
+</style>

examples/sites/demos/pc/app/bulletin-board/icon.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-bulletin-board :tab-title="tabTitle" :data="data" :icon="IconShare"></tiny-bulletin-board>
+  <div class="demo-bulletin-board">
+    <tiny-bulletin-board :tab-title="tabTitle" :data="data" :icon="IconShare"></tiny-bulletin-board>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -99,3 +101,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-bulletin-board ::v-deep .tiny-svg {
+  fill: white;
+}
+</style>

examples/sites/demos/pc/app/button-group/sup-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-button">
     <tiny-button-group :data="groupData" v-model="checkedVal">
       <template #button4="{ sup }">
         <tiny-icon-plus-circle></tiny-icon-plus-circle>
@@ -20,7 +20,7 @@ const TinyIconPlusCircle = iconPlusCircle()
 const checkedVal = ref('Button1')
 const groupData = ref([
   {
-    text: 'Button1',
+    text: '1年',
     value: 'Button1',
     sup: {
       class: ['success-bg'],
@@ -28,7 +28,7 @@ const groupData = ref([
     }
   },
   {
-    text: 'Button2',
+    text: '2年',
     value: 'Button2',
     sup: {
       class: 'sup-icon',
@@ -36,20 +36,20 @@ const groupData = ref([
     }
   },
   {
-    text: 'Button3',
+    text: '3年',
     value: 'Button3',
     sup: {
       class: 'sup-text',
-      text: '8.8折'
+      text: '8折'
     }
   },
   {
-    text: 'Button4',
+    text: '4年',
     value: 'Button4',
     sup: {
       slot: 'button4',
       class: 'sup-slot',
-      text: '8.8折'
+      text: '8折'
     }
   }
 ])
@@ -75,3 +75,9 @@ const groupData = ref([
   vertical-align: middle;
 }
 </style>
+
+<style>
+.demo-button button {
+  width: 124px;
+}
+</style>

examples/sites/demos/pc/app/button-group/sup.spec.ts

@@ -21,12 +21,12 @@ test('测试选块角标', async ({ page }) => {
 
   // 测试文字角标
   const sup3 = getSup(item.nth(2))
-  await expect(sup3).toHaveText('8.8折')
+  await expect(sup3).toHaveText('8折')
   await expect(sup3).toHaveClass(/tiny-group-item__sup-text/)
 
   // 测试自定义角标
   const sup4 = getSup(item.nth(3))
   await expect(sup4.locator('svg')).toBeVisible()
-  await expect(sup4).toHaveText('8.8折')
+  await expect(sup4).toHaveText('8折')
   await expect(sup4).toHaveClass(/sup-slot/)
 })

examples/sites/demos/pc/app/button-group/sup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-button">
     <tiny-button-group :data="groupData" v-model="checkedVal">
       <template #button4="{ sup }">
         <icon-plus-circle></icon-plus-circle>
@@ -26,7 +26,7 @@ export default {
       checkedVal: 'Button1',
       groupData: [
         {
-          text: 'Button1',
+          text: '1年',
           value: 'Button1',
           sup: {
             class: ['success-bg'],
@@ -34,7 +34,7 @@ export default {
           }
         },
         {
-          text: 'Button2',
+          text: '2年',
           value: 'Button2',
           sup: {
             class: 'sup-icon',
@@ -42,20 +42,20 @@ export default {
           }
         },
         {
-          text: 'Button3',
+          text: '3年',
           value: 'Button3',
           sup: {
             class: 'sup-text',
-            text: '8.8折'
+            text: '8折'
           }
         },
         {
-          text: 'Button4',
+          text: '4年',
           value: 'Button4',
           sup: {
             slot: 'button4',
             class: 'sup-slot',
-            text: '8.8折'
+            text: '8折'
           }
         }
       ]
@@ -84,3 +84,9 @@ export default {
   vertical-align: middle;
 }
 </style>
+
+<style>
+.demo-button button {
+  width: 124px;
+}
+</style>

examples/sites/demos/pc/app/button/autofocus-composition-api.vue

@@ -8,3 +8,11 @@
 <script setup>
 import { Button as TinyButton } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
+</style>

examples/sites/demos/pc/app/button/autofocus.vue

@@ -14,3 +14,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
+</style>

examples/sites/demos/pc/app/button/basic-usage-composition-api.vue

@@ -54,6 +54,6 @@ const IconSearch = iconSearch()
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/basic-usage.vue

@@ -65,6 +65,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue

@@ -45,6 +45,6 @@ const TinyIconSearch = iconSearch()
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/dynamic-disabled.vue

@@ -55,6 +55,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/ghost-composition-api.vue

@@ -15,12 +15,12 @@ import { Button as TinyButton } from '@opentiny/vue'
 
 <style scoped>
 .gray-bg {
-  background: #ccc;
+  background: #fafafa;
   padding: 20px 10px 10px;
 }
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/ghost.vue

@@ -21,12 +21,12 @@ export default {
 
 <style scoped>
 .gray-bg {
-  background: #ccc;
+  background: #fafafa;
   padding: 20px 10px 10px;
 }
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/icon-composition-api.vue

@@ -40,6 +40,6 @@ const TinyIconSearch = iconSearch()
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/icon.vue

@@ -51,6 +51,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/loading-composition-api.vue

@@ -17,6 +17,6 @@ import { Button as TinyButton } from '@opentiny/vue'
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

examples/sites/demos/pc/app/button/loading.vue

@@ -23,6 +23,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>