diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7629e4196e..d5df99d7ea 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -66,8 +66,8 @@ The commit message should be in the form of a `type(scope): description of the m
 3. Example title:
 
 - Supplement alert component document: `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
-- Supplement alet component test case: `test(alert): [alert] xxxxxxxxxxxxxx`
-- Fixed bug in alet component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
+- Supplement alert component test case: `test(alert): [alert] xxxxxxxxxxxxxx`
+- Fixed bug in alert component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
 
 #### Pull Request Description
 
@@ -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
+```
diff --git a/CONTRIBUTING.zh-CN.md b/CONTRIBUTING.zh-CN.md
index a8627d6124..0eaf7a7d99 100644
--- a/CONTRIBUTING.zh-CN.md
+++ b/CONTRIBUTING.zh-CN.md
@@ -66,8 +66,8 @@ commit 信息要以 `type(scope): 描述信息` 的形式填写，例如 `fix(vu
 3. 标题示例:
 
 - 补充 alert 组件文档： `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
-- 补充 alet 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
-- 修复 alet 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
+- 补充 alert 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
+- 修复 alert 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
 
 #### Pull Request 的描述
 
@@ -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
+```
diff --git a/examples/docs/newsrc/mobile-first.vue b/examples/docs/newsrc/mobile-first.vue
index 025e2a55ab..90c04c79ab 100644
--- a/examples/docs/newsrc/mobile-first.vue
+++ b/examples/docs/newsrc/mobile-first.vue
@@ -23,11 +23,9 @@
           <div v-html="state.currDemo?.desc['zh-CN']"></div>
         </div>
         <!-- 预览 -->
-        <!-- modeState.demoId === 'preview-in-dialog' 修复preview-in-dialog demo弹窗内容被遮罩层遮挡 -->
         <div
           :id="state.currDemo?.demoId"
           class="rel px20 minh200"
-          :style="{ transform: modeState.demoId === 'preview-in-dialog' ? '' : 'translateX(0)' }"
         >
           <config-provider :design="design">
             <component :is="state.comp"></component>
diff --git a/examples/react-site/src/tools/utils.js b/examples/react-site/src/tools/utils.js
index 1bb0016f82..42f41b6cac 100644
--- a/examples/react-site/src/tools/utils.js
+++ b/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));
 
diff --git a/examples/sites/demos/apis/action-sheet.js b/examples/sites/demos/apis/action-sheet.js
index df09070c19..0ce53952f1 100644
--- a/examples/sites/demos/apis/action-sheet.js
+++ b/examples/sites/demos/apis/action-sheet.js
@@ -132,7 +132,7 @@ export default {
             'en-US': 'Panel Title'
           },
           mode: ['mobile-first'],
-          mfDemo: 'actoin'
+          mfDemo: 'action'
         },
         {
           name: 'type',
diff --git a/examples/sites/demos/apis/autocomplete.js b/examples/sites/demos/apis/autocomplete.js
index 3ab4467eb6..07a4cda39e 100644
--- a/examples/sites/demos/apis/autocomplete.js
+++ b/examples/sites/demos/apis/autocomplete.js
@@ -22,7 +22,7 @@ export default {
           defaultValue: '300',
           desc: {
             'zh-CN': '获取输入建议的去抖延时',
-            'en-US': 'Obtain the recommended input dejitter delay.'
+            'en-US': 'Obtain the recommended input debounce delay'
           },
           mode: ['pc'],
           pcDemo: 'debounce'
@@ -90,7 +90,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '等价于原生 input aria-label 属性',
-            'en-US': 'Equiphorus input aria-label attribute'
+            'en-US': 'Equals input aria-label attribute'
           },
           mode: ['pc'],
           pcDemo: ''
@@ -319,6 +319,7 @@ export default {
     {
       name: 'IAutocompleteFetchSuggestions',
       type: 'type',
+      depTypes: ['IAutocompleteSuggestionItem'],
       code: `type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void`
     }
   ]
diff --git a/examples/sites/demos/apis/base-select.js b/examples/sites/demos/apis/base-select.js
index a9f77350af..bb73a348fb 100644
--- a/examples/sites/demos/apis/base-select.js
+++ b/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
 }        
 `
     },
diff --git a/examples/sites/demos/apis/breadcrumb.js b/examples/sites/demos/apis/breadcrumb.js
index 67c67368c7..cd932d69fb 100644
--- a/examples/sites/demos/apis/breadcrumb.js
+++ b/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
diff --git a/examples/sites/demos/apis/button-group.js b/examples/sites/demos/apis/button-group.js
index 431fd9a59a..502f094497 100644
--- a/examples/sites/demos/apis/button-group.js
+++ b/examples/sites/demos/apis/button-group.js
@@ -181,6 +181,9 @@ export default {
             'zh-CN': '自定义数据为空时展示内容',
             'en-US': 'customize content when data is empty'
           },
+          metaData: {
+            new: '3.17.0'
+          },
           mode: ['pc'],
           pcDemo: 'slot-empty'
         }
diff --git a/examples/sites/demos/apis/calendar.js b/examples/sites/demos/apis/calendar.js
index 84becc5835..f8785f8c8b 100644
--- a/examples/sites/demos/apis/calendar.js
+++ b/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 // 事件主题类型
+}`
     }
   ]
 }
diff --git a/examples/sites/demos/apis/cascader-panel.js b/examples/sites/demos/apis/cascader-panel.js
index 7a6a391a37..3d7b6cfe17 100644
--- a/examples/sites/demos/apis/cascader-panel.js
+++ b/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
       `
diff --git a/examples/sites/demos/apis/cascader.js b/examples/sites/demos/apis/cascader.js
index b5e6e8f62f..e0aa1c1def 100644
--- a/examples/sites/demos/apis/cascader.js
+++ b/examples/sites/demos/apis/cascader.js
@@ -59,7 +59,7 @@ export default {
           defaultValue: '300',
           desc: {
             'zh-CN': '搜索关键词输入的去抖延迟，单位毫秒',
-            'en-US': 'Dejitter delay of the search keyword, in milliseconds.'
+            'en-US': 'Debounce delay of the search keyword, in milliseconds.'
           },
           mode: ['pc'],
           pcDemo: 'filterable'
@@ -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
       `
diff --git a/examples/sites/demos/apis/color-picker.js b/examples/sites/demos/apis/color-picker.js
index f9b2fa9d47..49302ed02c 100644
--- a/examples/sites/demos/apis/color-picker.js
+++ b/examples/sites/demos/apis/color-picker.js
@@ -65,7 +65,7 @@ export default {
       events: [
         {
           name: 'cancel',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '按下取消或点击外部的时触发该事件',
diff --git a/examples/sites/demos/apis/color-select-panel.js b/examples/sites/demos/apis/color-select-panel.js
index a41c53d956..024dfdefb0 100644
--- a/examples/sites/demos/apis/color-select-panel.js
+++ b/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': '按下取消或点击外部的时触发该事件',
diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js
index f39dbd9d89..0782c04090 100644
--- a/examples/sites/demos/apis/dialog-box.js
+++ b/examples/sites/demos/apis/dialog-box.js
@@ -227,7 +227,7 @@ export default {
         {
           name: 'visible',
           type: 'boolean',
-          defaultValue: 'true',
+          defaultValue: 'false',
           desc: {
             'zh-CN': '控制弹出框显示与关闭',
             'en-US': 'Control pop-up display and closing'
diff --git a/examples/sites/demos/apis/dialog-select.js b/examples/sites/demos/apis/dialog-select.js
index 18e49ad0c2..652492222e 100644
--- a/examples/sites/demos/apis/dialog-select.js
+++ b/examples/sites/demos/apis/dialog-select.js
@@ -502,6 +502,7 @@ interface IDialogOption {
     {
       name: 'IGridOption',
       type: 'interface',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IGridOption {
   // 表格列配置
diff --git a/examples/sites/demos/apis/directives.js b/examples/sites/demos/apis/directives.js
new file mode 100644
index 0000000000..f1bd8639ea
--- /dev/null
+++ b/examples/sites/demos/apis/directives.js
@@ -0,0 +1,3 @@
+export default {
+  apis: []
+}
diff --git a/examples/sites/demos/apis/dropdown.js b/examples/sites/demos/apis/dropdown.js
index cf2a6975bf..eb85d50922 100644
--- a/examples/sites/demos/apis/dropdown.js
+++ b/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
diff --git a/examples/sites/demos/apis/file-upload.js b/examples/sites/demos/apis/file-upload.js
index 8605b18526..0b4fa48a18 100644
--- a/examples/sites/demos/apis/file-upload.js
+++ b/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'],
diff --git a/examples/sites/demos/apis/fluent-editor.js b/examples/sites/demos/apis/fluent-editor.js
new file mode 100644
index 0000000000..5a27195b83
--- /dev/null
+++ b/examples/sites/demos/apis/fluent-editor.js
@@ -0,0 +1,58 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'fluent-editor',
+      type: 'component',
+      props: [
+        {
+          name: 'data-type',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '初始化的富文本数据格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'data-switch'
+        },
+        {
+          name: 'data-upgrade',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '富文本数据输出格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'data-switch'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否为不可编辑状态',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'string',
+          defaultValue: "''",
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Bound Value'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ]
+}
diff --git a/examples/sites/demos/apis/form.js b/examples/sites/demos/apis/form.js
index 18b3d9a4bc..7b27cd8f2e 100644
--- a/examples/sites/demos/apis/form.js
+++ b/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: {
@@ -639,7 +639,7 @@ interface IFormRules {
   trigger?: IFormTrigger | IFormTrigger[] 
   // 同步检验函数，调用回调传递错误信息。
   validator?: (
-    rule: IFormInnerRule, // from内部处理后的rule
+    rule: IFormInnerRule, // form内部处理后的rule
     value: any, // 表单model对应的值，根据表单项prop获取
     callback: (e: Error) => void
     data: object, // prop和value构造的对象
@@ -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[],
diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js
index 67d4286f99..f883c38d6f 100644
--- a/examples/sites/demos/apis/grid.js
+++ b/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':
@@ -3408,6 +3391,17 @@ export default {
           mode: ['pc'],
           pcDemo: 'grid-editor#editor-custom-editor-select'
         },
+        {
+          name: 'filed',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置表格列的单元格显示字段',
+            'en-US': 'Set the cell display field for table columns'
+          },
+          mode: ['pc'],
+          pcDemo: 'grid#base-basic-usage'
+        },
         {
           name: 'filter',
           type: 'boolean | IFilterConfig',
@@ -3810,7 +3804,7 @@ export default {
       props: [
         {
           name: 'before-close-full-screen',
-          type: '()=> boolean',
+          type: '() => boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭全屏前的拦截方法，返回 false 则阻止关闭全屏，返回 true 则不阻止',
@@ -3822,7 +3816,7 @@ export default {
         },
         {
           name: 'before-open-full-screen',
-          type: '()=> boolean',
+          type: '() => boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '全屏前的拦截方法，返回 false 则阻止全屏，返回 true 则不阻止',
@@ -3942,7 +3936,7 @@ export default {
         },
         {
           name: 'reset-setting',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '点击个性化面板的重置按钮触发该事件',
@@ -4004,6 +3998,7 @@ interface IRow {
     {
       name: 'IColumnConfig',
       type: 'interface',
+      depTypes: ['IValidRules'],
       code: `
 interface IColumnConfig {
   type: 'index' | 'radio' | 'checkbox'
@@ -4053,7 +4048,7 @@ interface IPagerConfig {
       type: 'type',
       code: `
 interface IDataHandler {
-  api: ()=> Promise
+  api: () => Promise
 }
       `
     },
@@ -4099,7 +4094,7 @@ interface IToolTipConfig {
   type?: 'normal' | 'warning' | 'error' | 'info' | 'success'
   effect?: 'dark' | 'light'
   // 自定义提示内容
-  contentMethod?: ()=> string | VNode
+  contentMethod?: () => string | VNode
 }
       `
     },
@@ -4121,7 +4116,7 @@ interface IContextMenuConfig {
   footer?: { 
     options: IMenuOptions
   }
-  visibleMethod?: ()=> boolean
+  visibleMethod?: () => boolean
 }
       `
     },
@@ -4230,7 +4225,7 @@ interface IRadioConfig {
   // 默认选中指定行（只会在初始化时被触发一次，需要有 row-id）
   checkRowKey?: string
   // 是否允许选中的方法，该方法的返回值用来决定这一行的 Radio 是否可以选中
-  checkMethod?: ()=> boolean
+  checkMethod?: () => boolean
 }
       `
     },
@@ -4246,7 +4241,7 @@ interface ISelectConfig {
   // 默认勾选开指定行（只会在初始化时被触发一次，需要有 row-id）
   checkRowKeys?: string[] 
   // 是否允许选中的方法，该方法的返回值用来决定这一行的 checkbox 是否可以勾选
-  checkMethod?: ()=> boolean 
+  checkMethod?: () => boolean 
   // 默认勾选所有（只会在初始化时被触发一次）}
   checkAll?: boolean
   // 是否显示全选按钮（如果 checkStrictly=true 则默认为 false）
@@ -4333,7 +4328,7 @@ interface IScrollLoadConfig {
       type: 'type',
       code: `
 interface IEventsConfig {
-  [field: string]: ()=> void
+  [field: string]: () => void
 }
       `
     },
@@ -4349,7 +4344,7 @@ interface IDropConfig {
   // 开启列拖拽
   column: boolean
   // 拖拽前函数，返回 false 取消拖动
-  onBeforeMove?: ()=> boolean
+  onBeforeMove?: () => boolean
   // 拖拽触发源选择器一般是class类名
   trigger?: string
   // 根据行的类名来控制是否可以拖动
@@ -4420,9 +4415,9 @@ interface IBeforePageChangeArgs {
   //当前的页大小
   currentPageSize: number
   //生效回调
-  callback: ()=> void
+  callback: () => void
   //失效回调
-  rollback: ()=> void
+  rollback: () => void
 }
       `
     },
@@ -4446,6 +4441,7 @@ interface IToolbarButtonClickArgs {
     {
       name: 'ICellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ICellClickArgs {
   // 当前行
@@ -4472,6 +4468,7 @@ interface ICellContextMenuArgs {
     {
       name: 'ICellArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ICellArgs {
   //当前行
@@ -4498,6 +4495,7 @@ interface ICurrentChangeArgs {
     {
       name: 'IEditActivedArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditActivedArgs {
   // 当前行
@@ -4510,6 +4508,7 @@ interface IEditActivedArgs {
     {
       name: 'IEditClosedArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditClosedArgs {
   // 当前行
@@ -4522,6 +4521,7 @@ interface IEditClosedArgs {
     {
       name: 'IEditDisabledArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditDisabledArgs {
   //当前行
@@ -4546,6 +4546,7 @@ interface IFilterChangeArgs {
     {
       name: 'IFooterCellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFooterCellClickArgs {
   $columnIndex: number
@@ -4563,6 +4564,7 @@ interface IFooterCellClickArgs {
     {
       name: 'IContextMenuArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IContextMenuArgs {
   $columnIndex: number
@@ -4584,6 +4586,7 @@ interface IContextMenuArgs {
     {
       name: 'IFooterCellDblClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFooterCellDblClickArgs {
   $columnIndex: number
@@ -4601,6 +4604,7 @@ interface IFooterCellDblClickArgs {
     {
       name: 'IHeaderCellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IHeaderCellClickArgs {
   $columnIndex: number
@@ -4622,6 +4626,7 @@ interface IHeaderCellClickArgs {
     {
       name: 'IHeaderCellDblClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IHeaderCellDblClickArgs {
   // 列数据
@@ -4638,6 +4643,7 @@ interface IHeaderCellDblClickArgs {
     {
       name: 'IResizableChangeArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IResizableChangeArgs {
   // table组件的vue 实例 
@@ -4674,6 +4680,7 @@ interface IScrollArgs {
     {
       name: 'ISelectAllArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISelectAllArgs {
   $columnIndex: number
@@ -4733,6 +4740,7 @@ interface IToggleTreeChangeArgs {
     {
       name: 'IValidErrorArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IValidErrorArgs { 
   // 校验的单元格信息对象
@@ -4749,6 +4757,7 @@ interface IValidErrorArgs {
     {
       name: 'ISortChangeArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISortChangeArgs { 
   // 表格实例对象信息
@@ -4767,6 +4776,7 @@ interface ISortChangeArgs {
     {
       name: 'IClassNameArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IClassNameArgs {
   seq: number
@@ -4782,6 +4792,7 @@ interface IClassNameArgs {
     {
       name: 'IIndexMethodArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IIndexMethodArgs {
   row: IRow
@@ -4794,6 +4805,7 @@ interface IIndexMethodArgs {
     {
       name: 'IFormatConfig',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFormatConfig {
   // 列数据源
@@ -4845,6 +4857,7 @@ interface ISettingConfigs {
     {
       name: 'ISpanMethodArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISpanMethodArgs {
   // 行标
@@ -4860,6 +4873,7 @@ interface ISpanMethodArgs {
     },
     {
       name: 'IExportCsvOptions',
+      depTypes: ['IRow'],
       type: 'type',
       code: `
 interface IExportCsvOptions {
@@ -4879,7 +4893,7 @@ interface IEditorConfig {
   component: 'input' | 'select' | Component
   // 传递给组件的事件集合
   events?: {
-    [event]: ()=> void
+    [event]: () => void
   }
   // 传递给编辑器组件的属性集合
   attrs?: {
@@ -4909,19 +4923,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
 }
       `
     },
diff --git a/examples/sites/demos/apis/mind-map.js b/examples/sites/demos/apis/mind-map.js
index 0f973574ec..a6b8c54d91 100644
--- a/examples/sites/demos/apis/mind-map.js
+++ b/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'
diff --git a/examples/sites/demos/apis/modal.js b/examples/sites/demos/apis/modal.js
index 203f0b4bf6..e5807647d3 100644
--- a/examples/sites/demos/apis/modal.js
+++ b/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: {
diff --git a/examples/sites/demos/apis/multi-select.js b/examples/sites/demos/apis/multi-select.js
index db6558ae48..40b4c1a045 100644
--- a/examples/sites/demos/apis/multi-select.js
+++ b/examples/sites/demos/apis/multi-select.js
@@ -161,6 +161,7 @@ export default {
     {
       name: 'IMultiSelectMenu',
       type: 'interface',
+      depTypes: ['IMultiSelectOption'],
       code: `
 interface IMultiSelectMenu {
   title: string, // 菜单项标题
diff --git a/examples/sites/demos/apis/numeric.js b/examples/sites/demos/apis/numeric.js
index 06f7a134d7..1a741fcbf9 100644
--- a/examples/sites/demos/apis/numeric.js
+++ b/examples/sites/demos/apis/numeric.js
@@ -281,7 +281,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '计数器尺寸，该属性的可选值为 medium | small | mini',
-            'en-US': 'Counter size.The optional values of this attribute are medium | small | mini'
+            'en-US': 'Counter size,The optional values of this attribute are medium | small | mini'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'numeric-size',
diff --git a/examples/sites/demos/apis/pop-upload.js b/examples/sites/demos/apis/pop-upload.js
index c4374ffcbd..7f0969a1da 100644
--- a/examples/sites/demos/apis/pop-upload.js
+++ b/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: {
diff --git a/examples/sites/demos/apis/popconfirm.js b/examples/sites/demos/apis/popconfirm.js
index 000c070e19..bd5376c8f6 100644
--- a/examples/sites/demos/apis/popconfirm.js
+++ b/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: {
diff --git a/examples/sites/demos/apis/popeditor.js b/examples/sites/demos/apis/popeditor.js
index 0f5a9a72a0..2c8e9e4c0f 100644
--- a/examples/sites/demos/apis/popeditor.js
+++ b/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: {
diff --git a/examples/sites/demos/apis/popover.js b/examples/sites/demos/apis/popover.js
index 1a77b73df3..6a41240fd2 100644
--- a/examples/sites/demos/apis/popover.js
+++ b/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': '显示时触发',
diff --git a/examples/sites/demos/apis/qr-code.js b/examples/sites/demos/apis/qr-code.js
index ea01d0ec69..98049c1606 100644
--- a/examples/sites/demos/apis/qr-code.js
+++ b/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'
diff --git a/examples/sites/demos/apis/search.js b/examples/sites/demos/apis/search.js
index 01c8099365..8a794fa46d 100644
--- a/examples/sites/demos/apis/search.js
+++ b/examples/sites/demos/apis/search.js
@@ -62,6 +62,17 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置是否禁用【3.18.0新增】',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-prefix'
+        },
         {
           name: 'is-enter-search',
           type: 'boolean',
diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index e206acd281..3805102820 100644
--- a/examples/sites/demos/apis/select.js
+++ b/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
 }        
 `
     },
diff --git a/examples/sites/demos/apis/split.js b/examples/sites/demos/apis/split.js
index cee3d0f4bf..7ee7ed4460 100644
--- a/examples/sites/demos/apis/split.js
+++ b/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': '拖拽开始的事件',
diff --git a/examples/sites/demos/apis/steps.js b/examples/sites/demos/apis/steps.js
index 3cd02a7b55..669f3be30f 100644
--- a/examples/sites/demos/apis/steps.js
+++ b/examples/sites/demos/apis/steps.js
@@ -225,6 +225,7 @@ export default {
     {
       name: 'IStepsItem',
       type: 'interface',
+      depTypes: ['IStepsStatus'],
       code: `
 interface IStepsItem {
   // 节点数据
diff --git a/examples/sites/demos/apis/switch.js b/examples/sites/demos/apis/switch.js
index 5c1b26ea04..1626bbdc2e 100644
--- a/examples/sites/demos/apis/switch.js
+++ b/examples/sites/demos/apis/switch.js
@@ -175,6 +175,30 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-open-close',
           mfDemo: ''
+        },
+        {
+          name: 'active-icon',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '开启时开关的图标',
+            'en-US': 'Icon of the switch when turned on'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close-icon',
+          mfDemo: ''
+        },
+        {
+          name: 'inactive-icon',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭时开关的图标',
+            'en-US': 'Icon of the switch when turned off'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close-icon',
+          mfDemo: ''
         }
       ]
     }
diff --git a/examples/sites/demos/apis/tabs.js b/examples/sites/demos/apis/tabs.js
index f4ed92bca3..b12370d640 100644
--- a/examples/sites/demos/apis/tabs.js
+++ b/examples/sites/demos/apis/tabs.js
@@ -178,13 +178,11 @@ export default {
           type: "'small' | 'large'",
           defaultValue: '',
           desc: {
-            'zh-CN':
-              '设置 tabs 页签尺寸,该属性可选值为 large 或 small，其中 small 在 tabStyle 为 card 或者 border-card 时生效',
-            'en-US':
-              'Sets the tab size. The value can be large or small. This parameter is valid only when tabStyle is set to card or border-card'
+            'zh-CN': '设置 tabs 页签尺寸,该属性可选值为 large 或 small',
+            'en-US': 'Sets the tab size. The value can be large or small'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'tab-style-card',
+          pcDemo: 'size',
           mfDemo: ''
         },
         {
diff --git a/examples/sites/demos/apis/tag-group.js b/examples/sites/demos/apis/tag-group.js
index ba385d9826..600b34b433 100644
--- a/examples/sites/demos/apis/tag-group.js
+++ b/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`
     }
diff --git a/examples/sites/demos/apis/transfer.js b/examples/sites/demos/apis/transfer.js
index c5357e78f3..35aaa0d950 100644
--- a/examples/sites/demos/apis/transfer.js
+++ b/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: {
diff --git a/examples/sites/demos/apis/tree-menu.js b/examples/sites/demos/apis/tree-menu.js
index ec0e59e7a3..3b70c20a43 100644
--- a/examples/sites/demos/apis/tree-menu.js
+++ b/examples/sites/demos/apis/tree-menu.js
@@ -283,17 +283,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'only-check-children'
         },
-        {
-          name: 'prefix-icon',
-          type: 'Component',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '自定义前置图标',
-            'en-US': 'Customize the front icon'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-icon'
-        },
         {
           name: 'props',
           typeAnchorName: 'IProps',
@@ -381,8 +370,8 @@ export default {
           type: 'Component',
           defaultValue: '',
           desc: {
-            'zh-CN': '自定义后置图标',
-            'en-US': 'Customize the post icon'
+            'zh-CN': '全局设置带图标树形菜单',
+            'en-US': 'Global settings with icon tree menu'
           },
           mode: ['pc'],
           pcDemo: 'custom-icon'
diff --git a/examples/sites/demos/apis/tree-select.js b/examples/sites/demos/apis/tree-select.js
index 9b8c4e66f1..da57527e2e 100644
--- a/examples/sites/demos/apis/tree-select.js
+++ b/examples/sites/demos/apis/tree-select.js
@@ -6,37 +6,109 @@ export default {
       type: 'component',
       props: [
         {
-          name: 'clearable',
+          name: 'autocomplete',
+          type: 'string',
+          defaultValue: "'off'",
+          desc: {
+            'zh-CN': '输入框的原生 autocomplete 属性',
+            'en-US': 'The native autocomplete attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'click-expand',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
+            'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
+          },
+          pcDemo: 'collapse-tags'
+        },
+        {
+          name: 'collapse-tags',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否将多个标签折叠显示。仅适用多选',
+            'en-US': 'Whether to collapse multiple labels for display. Only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
+        },
+        {
+          name: 'copyable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键复制的功能。点击复制按钮一键复制所有标签的文本内容并以逗号分隔，仅适用于多选',
+            'en-US':
+              'Is the one click copy function enabled. Click the copy button to copy the text content of all labels with one click, separated by commas, only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'disabled',
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否启用一键清除的功能',
-            'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled',
+          mfDemo: 'disabled'
+        },
+        {
+          name: 'dropdown-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉图标',
+            'en-US': 'Custom drop-down icon'
           },
           mode: ['pc'],
-          pcDemo: 'filter'
+          pcDemo: 'multiple'
         },
         {
-          name: 'filter-method',
-          type: '(query: string) => void',
+          name: 'drop-style',
+          type: 'String',
           defaultValue: '',
           desc: {
-            'zh-CN': '自定义过滤方法',
-            'en-US': 'Custom filtering method'
+            'zh-CN': '自定义下拉选项样式',
+            'en-US': 'Custom drop-down options style'
           },
           mode: ['pc'],
-          pcDemo: 'filter'
+          pcDemo: 'multiple'
         },
         {
-          name: 'filterable',
-          type: 'boolean',
-          defaultValue: 'false',
+          name: 'input-box-type',
+          type: "'input' | 'underline'",
+          defaultValue: "'input'",
+          desc: {
+            'zh-CN': '输入框的显示类型',
+            'en-US': 'Display type of input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'input-box-type',
+          mfDemo: 'input-box-type'
+        },
+        {
+          name: 'max-visible-rows',
+          type: 'number',
+          defaultValue: '1',
           desc: {
-            'zh-CN': '是否可搜索',
-            'en-US': 'Is it searchable'
+            'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
+            'en-US':
+              'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
           },
           mode: ['pc'],
-          pcDemo: 'filter'
+          pcDemo: 'collapse-tags'
         },
         {
           name: 'modelValue / v-model',
@@ -60,6 +132,92 @@ export default {
           mode: ['pc'],
           pcDemo: 'multiple'
         },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框的原生 name 属性',
+            'en-US': 'The native name attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: "'请选择'",
+          desc: {
+            'zh-CN': '占位符',
+            'en-US': 'Placeholder'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placement',
+          typeAnchorName: 'IPlacement',
+          type: 'IPlacement',
+          defaultValue: "'bottom-start'",
+          desc: {
+            'zh-CN': '下拉弹框相对于触发源的弹出位置',
+            'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-append-to-body',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否将弹出框的 dom 元素插入至 body 元素',
+            'en-US': 'Whether to insert the dom element of the pop-up box into the body element'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉框的类名，用于自定义样式',
+            'en-US': 'The class name of the custom dropdown box, used for customizing styles'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'size',
+          type: "'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框尺寸。',
+            'en-US': 'Text box size'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'size',
+          mfDemo: 'size'
+        },
+        {
+          name: 'tag-type',
+          type: "'success' | 'info' | 'warning' | 'danger'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
+            'en-US':
+              'Label type, only applicable for multiple choices. Set this property to info when using the aurora theme'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-type',
+          mfDemo: 'tag-type'
+        },
         {
           name: 'text-field',
           type: 'string',
@@ -71,6 +229,18 @@ export default {
           mode: ['pc'],
           pcDemo: 'map-field'
         },
+        {
+          name: 'text-split',
+          type: 'string',
+          defaultValue: "','",
+          desc: {
+            'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
+            'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
         {
           name: 'tree-op',
           typeAnchorName: 'ITreeOption',
@@ -112,6 +282,13 @@ interface ITreeNode {
 interface ITreeOption {
   data: ITreeNode[] // 树数据，用法同 Tree
 }
+`
+    },
+    {
+      name: 'IPlacement',
+      type: 'type',
+      code: `
+type IPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
 `
     }
   ]
diff --git a/examples/sites/demos/apis/tree.js b/examples/sites/demos/apis/tree.js
index 4fd2f2e740..bd9ada2b55 100644
--- a/examples/sites/demos/apis/tree.js
+++ b/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': '进入编辑的事件',
diff --git a/examples/sites/demos/mobile-first/app/fluent-editor/basic-usage.vue b/examples/sites/demos/mobile-first/app/fluent-editor/basic-usage.vue
new file mode 100644
index 0000000000..d08482596d
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/fluent-editor/basic-usage.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :zIndex="2"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.cn.md b/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.cn.md
new file mode 100644
index 0000000000..487b3e2f16
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.cn.md
@@ -0,0 +1,9 @@
+---
+title: FluentEditor 富文本
+---
+
+# FluentEditor 富文本
+
+<div>
+用于创建和编辑富文本内容。
+</div>
diff --git a/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.en.md b/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.en.md
new file mode 100644
index 0000000000..d4ee24a5a1
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.en.md
@@ -0,0 +1,9 @@
+---
+title: FluentEditor
+---
+
+# FluentEditor
+
+<div>
+FluentEditor is a rich text component used to create and edit rich text content.
+</div>
diff --git a/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js b/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js
new file mode 100644
index 0000000000..6b8c7cc4de
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js
@@ -0,0 +1,18 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '通过 <code>v-model</code> 设置绑定值，默认数据保存格式为 Delta 数据格式。',
+        'en-US': 'You can refer to component label.'
+      },
+      codeFiles: ['basic-usage.vue']
+    }
+  ]
+}
diff --git a/examples/sites/demos/mobile-first/app/grid/basic-usage.vue b/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
index dae1ef2308..98ce58af1c 100644
--- a/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
+++ b/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' },
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue b/examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue
new file mode 100644
index 0000000000..320417ac9d
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue b/examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue
new file mode 100644
index 0000000000..5f3378235c
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue b/examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue
new file mode 100644
index 0000000000..2516d125ba
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue b/examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue
new file mode 100644
index 0000000000..d0002f78eb
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/many-status.vue b/examples/sites/demos/mobile-first/app/time-line-new/many-status.vue
new file mode 100644
index 0000000000..a9db0ac72f
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/node-max.vue b/examples/sites/demos/mobile-first/app/time-line-new/node-max.vue
new file mode 100644
index 0000000000..f9d67946b0
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue b/examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue
new file mode 100644
index 0000000000..1fb93923b8
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/single-status.vue b/examples/sites/demos/mobile-first/app/time-line-new/single-status.vue
new file mode 100644
index 0000000000..e3e7c73ab4
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue b/examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue
new file mode 100644
index 0000000000..bec6907eef
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.cn.md b/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.cn.md
new file mode 100644
index 0000000000..3cee5f4486
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.cn.md
@@ -0,0 +1,9 @@
+---
+title: TimeLine 时间线
+---
+
+# TimeLine 时间线
+
+<div>
+
+</div>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.en.md b/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.en.md
new file mode 100644
index 0000000000..3cee5f4486
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.en.md
@@ -0,0 +1,9 @@
+---
+title: TimeLine 时间线
+---
+
+# TimeLine 时间线
+
+<div>
+
+</div>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.js b/examples/sites/demos/mobile-first/app/time-line-new/webdoc/time-line-new.js
new file mode 100644
index 0000000000..cf7fbab3d5
--- /dev/null
+++ b/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']
+    }
+  ]
+}
diff --git a/examples/sites/demos/mobile-first/menus.js b/examples/sites/demos/mobile-first/menus.js
index 8633f318fc..937c8edc1f 100644
--- a/examples/sites/demos/mobile-first/menus.js
+++ b/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,13 +48,14 @@ 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' },
       { name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' },
       { name: 'Button', nameCn: '按钮', key: 'button' },
       { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
+      { name: 'FluentEditor', nameCn: '富文本', key: 'fluent-editor' },
       { name: 'Form', nameCn: '表单', key: 'form' },
       { name: 'Input', nameCn: '输入框', key: 'input' },
       { name: 'Numeric', nameCn: '计数器', key: 'numeric' },
@@ -74,7 +77,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 +89,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 +111,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' },
diff --git a/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue
index e18fc638a3..e42653844f 100644
--- a/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/anchor/basic-usage.vue b/examples/sites/demos/pc/app/anchor/basic-usage.vue
index 61fc732908..fb9b859ee6 100644
--- a/examples/sites/demos/pc/app/anchor/basic-usage.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue b/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue
index 5453906eec..d3fee640b1 100644
--- a/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/anchor/is-affix.vue b/examples/sites/demos/pc/app/anchor/is-affix.vue
index 6ea7357774..00e0cb6662 100644
--- a/examples/sites/demos/pc/app/anchor/is-affix.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/badge/offset-composition-api.vue b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
index a695a54dd5..80890cce32 100644
--- a/examples/sites/demos/pc/app/badge/offset-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/badge/offset.vue b/examples/sites/demos/pc/app/badge/offset.vue
index 109b42eaf1..80217124cd 100644
--- a/examples/sites/demos/pc/app/badge/offset.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue b/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue
index e86522b7b1..8fac27b319 100644
--- a/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue
+++ b/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;
diff --git a/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue b/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue
index 8ce56e852a..4c98f18e35 100644
--- a/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue
+++ b/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;
diff --git a/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue b/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue
index 991904adc7..e2626f811e 100644
--- a/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/binding-obj.vue b/examples/sites/demos/pc/app/base-select/binding-obj.vue
index 342d16d4fa..0539b406d1 100644
--- a/examples/sites/demos/pc/app/base-select/binding-obj.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue b/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue
index 08e422df27..b4854e5696 100644
--- a/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue b/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue
index ec76936c92..8af03b11e2 100644
--- a/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue b/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue
index 691d263b1c..1cc595d44f 100644
--- a/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/copy-multi.vue b/examples/sites/demos/pc/app/base-select/copy-multi.vue
index 2bb4a5e16e..bd5e0f37b4 100644
--- a/examples/sites/demos/pc/app/base-select/copy-multi.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue b/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue
index 6fd7094350..7720f50384 100644
--- a/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/copy-single.vue b/examples/sites/demos/pc/app/base-select/copy-single.vue
index 340ed0cd89..bcced5d5cd 100644
--- a/examples/sites/demos/pc/app/base-select/copy-single.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue b/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue
index 0236ec70e9..0b1b13878a 100644
--- a/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/filter-method.vue b/examples/sites/demos/pc/app/base-select/filter-method.vue
index 4703e0f769..e4fa323aeb 100644
--- a/examples/sites/demos/pc/app/base-select/filter-method.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue b/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue
index 171756ec40..ee42905564 100644
--- a/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/input-box-type.vue b/examples/sites/demos/pc/app/base-select/input-box-type.vue
index 70b81ad97e..66d7752d5b 100644
--- a/examples/sites/demos/pc/app/base-select/input-box-type.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue b/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue
index ef88543db5..a3925d81ae 100644
--- a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue b/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue
index 05a57af408..36628dc703 100644
--- a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue b/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue
index 8e3a90d928..764e66d7a5 100644
--- a/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/map-field.vue b/examples/sites/demos/pc/app/base-select/map-field.vue
index e88c886f47..e34cb89db5 100644
--- a/examples/sites/demos/pc/app/base-select/map-field.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue b/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue
index ed7b8e6248..20472b3368 100644
--- a/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/memoize-usage.vue b/examples/sites/demos/pc/app/base-select/memoize-usage.vue
index d004cfb645..c14abf8bde 100644
--- a/examples/sites/demos/pc/app/base-select/memoize-usage.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue b/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue
index c2777a2151..a4b37bb82c 100644
--- a/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue
+++ b/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 垂直布局">
diff --git a/examples/sites/demos/pc/app/base-select/multiple-mix.vue b/examples/sites/demos/pc/app/base-select/multiple-mix.vue
index 248db9f069..c6ec1f117d 100644
--- a/examples/sites/demos/pc/app/base-select/multiple-mix.vue
+++ b/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: {
diff --git a/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue b/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue
index d6bd3d2f7a..f6e89a4220 100644
--- a/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/no-data-text.vue b/examples/sites/demos/pc/app/base-select/no-data-text.vue
index 3a04eeb495..f6ff66fc9c 100644
--- a/examples/sites/demos/pc/app/base-select/no-data-text.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue b/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue
index 849b0f4191..b6180f6321 100644
--- a/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/optimization.vue b/examples/sites/demos/pc/app/base-select/optimization.vue
index da98bc48f5..bdba747cb5 100644
--- a/examples/sites/demos/pc/app/base-select/optimization.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/size-composition-api.vue b/examples/sites/demos/pc/app/base-select/size-composition-api.vue
index 4698dce084..e00eafb0ea 100644
--- a/examples/sites/demos/pc/app/base-select/size-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/size.vue b/examples/sites/demos/pc/app/base-select/size.vue
index 4d75c40b4a..f97e973a04 100644
--- a/examples/sites/demos/pc/app/base-select/size.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue
index 47bda37e5f..b45f7410aa 100644
--- a/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue
+++ b/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">
diff --git a/examples/sites/demos/pc/app/base-select/slot-default.vue b/examples/sites/demos/pc/app/base-select/slot-default.vue
index 88555da48b..1a386dabe7 100644
--- a/examples/sites/demos/pc/app/base-select/slot-default.vue
+++ b/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">
diff --git a/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
index 03acee479c..7e8fae58c0 100644
--- a/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/base-select/slot-panel.vue b/examples/sites/demos/pc/app/base-select/slot-panel.vue
index b7b2d09345..c88515648c 100644
--- a/examples/sites/demos/pc/app/base-select/slot-panel.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue
index 8fd8fcdf6a..e80a19c644 100644
--- a/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/bulletin-board/icon.vue b/examples/sites/demos/pc/app/bulletin-board/icon.vue
index 6abb28b731..8149e565ec 100644
--- a/examples/sites/demos/pc/app/bulletin-board/icon.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button-group/sup-composition-api.vue b/examples/sites/demos/pc/app/button-group/sup-composition-api.vue
index 8473b76236..2f861d5f55 100644
--- a/examples/sites/demos/pc/app/button-group/sup-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button-group/sup.spec.ts b/examples/sites/demos/pc/app/button-group/sup.spec.ts
index 2c6b45c3e9..d89ce7ce60 100644
--- a/examples/sites/demos/pc/app/button-group/sup.spec.ts
+++ b/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/)
 })
diff --git a/examples/sites/demos/pc/app/button-group/sup.vue b/examples/sites/demos/pc/app/button-group/sup.vue
index dd72309b1f..c8cc58f64c 100644
--- a/examples/sites/demos/pc/app/button-group/sup.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/autofocus-composition-api.vue b/examples/sites/demos/pc/app/button/autofocus-composition-api.vue
index 382f1b3f8f..290578a364 100644
--- a/examples/sites/demos/pc/app/button/autofocus-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/autofocus.vue b/examples/sites/demos/pc/app/button/autofocus.vue
index ac2e364bdc..7c315e072f 100644
--- a/examples/sites/demos/pc/app/button/autofocus.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
index bd0ee31feb..22afd88538 100644
--- a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
index 05fe958344..a8c021efbc 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue b/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
index 870665f7f6..fb756e6f9a 100644
--- a/examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/dynamic-disabled.vue b/examples/sites/demos/pc/app/button/dynamic-disabled.vue
index 4ff466443b..d0a246474b 100644
--- a/examples/sites/demos/pc/app/button/dynamic-disabled.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/ghost-composition-api.vue b/examples/sites/demos/pc/app/button/ghost-composition-api.vue
index db5cb58a12..f5558de888 100644
--- a/examples/sites/demos/pc/app/button/ghost-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/ghost.vue b/examples/sites/demos/pc/app/button/ghost.vue
index 73da3562f2..5ee34287eb 100644
--- a/examples/sites/demos/pc/app/button/ghost.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/icon-composition-api.vue b/examples/sites/demos/pc/app/button/icon-composition-api.vue
index 529763e592..b7bb7b68be 100644
--- a/examples/sites/demos/pc/app/button/icon-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/icon.vue b/examples/sites/demos/pc/app/button/icon.vue
index d54ea6f1b0..8bb0dc4f3c 100644
--- a/examples/sites/demos/pc/app/button/icon.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/loading-composition-api.vue b/examples/sites/demos/pc/app/button/loading-composition-api.vue
index b989ea36cb..e009a2212f 100644
--- a/examples/sites/demos/pc/app/button/loading-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/loading.vue b/examples/sites/demos/pc/app/button/loading.vue
index 7efe9ca8c7..f42c398401 100644
--- a/examples/sites/demos/pc/app/button/loading.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/button/reset-time-composition-api.vue b/examples/sites/demos/pc/app/button/reset-time-composition-api.vue
index 738352e4eb..6bca3330a9 100644
--- a/examples/sites/demos/pc/app/button/reset-time-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/reset-time-composition-api.vue
@@ -9,3 +9,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>
diff --git a/examples/sites/demos/pc/app/button/reset-time.vue b/examples/sites/demos/pc/app/button/reset-time.vue
index d6369b7d64..5b4836f78e 100644
--- a/examples/sites/demos/pc/app/button/reset-time.vue
+++ b/examples/sites/demos/pc/app/button/reset-time.vue
@@ -15,3 +15,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/button/size-composition-api.vue b/examples/sites/demos/pc/app/button/size-composition-api.vue
index e0f29f3f6a..b471f816e3 100644
--- a/examples/sites/demos/pc/app/button/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/size-composition-api.vue
@@ -69,6 +69,6 @@ const TinyIconEdit = iconEdit()
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/button/size.vue b/examples/sites/demos/pc/app/button/size.vue
index fb48904157..84479dad4b 100644
--- a/examples/sites/demos/pc/app/button/size.vue
+++ b/examples/sites/demos/pc/app/button/size.vue
@@ -80,6 +80,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/button/text-composition-api.vue b/examples/sites/demos/pc/app/button/text-composition-api.vue
index a4d9d7816b..cb68db2267 100644
--- a/examples/sites/demos/pc/app/button/text-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/text-composition-api.vue
@@ -24,8 +24,13 @@ const TinyIconMail = iconMail()
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 0;
+  padding: 10px 0 10px 0;
   font-size: 16px;
   font-weight: bold;
 }
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/button/text.vue b/examples/sites/demos/pc/app/button/text.vue
index 333de62603..45e9e97f68 100644
--- a/examples/sites/demos/pc/app/button/text.vue
+++ b/examples/sites/demos/pc/app/button/text.vue
@@ -33,8 +33,13 @@ export default {
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 0;
+  padding: 10px 0 10px 0;
   font-size: 16px;
   font-weight: bold;
 }
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
index 14c0732a73..29e45e8170 100644
--- a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
@@ -13,7 +13,7 @@
 import { Card as TinyCard } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`)
+const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/card/basic-usage.vue b/examples/sites/demos/pc/app/card/basic-usage.vue
index ba435a4f8e..2b28289b03 100644
--- a/examples/sites/demos/pc/app/card/basic-usage.vue
+++ b/examples/sites/demos/pc/app/card/basic-usage.vue
@@ -18,7 +18,7 @@ export default {
   },
   data() {
     return {
-      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
+      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
index 2f2d8e83bf..769d9662b3 100644
--- a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
@@ -69,11 +69,6 @@ const dataArr = ref([
     title: 'TinyNG',
     content: '^16.0.01',
     imageSrc: ''
-  },
-  {
-    title: 'TinyEngine',
-    content: '^14.0.01',
-    imageSrc: ''
   }
 ])
 </script>
@@ -83,13 +78,17 @@ const dataArr = ref([
   width: 100%;
   background: #f5f5f5;
   padding: 16px;
+}
+.card-wrap :deep(.tiny-card-group) {
+  margin: 20px 10px;
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  height: 150px;
 }
 .my-card {
-  width: 80%;
   cursor: pointer;
   padding: 20px;
+  margin: 0 20px;
 }
 .content {
   display: flex;
diff --git a/examples/sites/demos/pc/app/card/check-mode.vue b/examples/sites/demos/pc/app/card/check-mode.vue
index 1cd5eacbfe..18ded77f15 100644
--- a/examples/sites/demos/pc/app/card/check-mode.vue
+++ b/examples/sites/demos/pc/app/card/check-mode.vue
@@ -75,11 +75,6 @@ export default {
           title: 'TinyNG',
           content: '^16.0.01',
           imageSrc: ''
-        },
-        {
-          title: 'TinyEngine',
-          content: '^14.0.01',
-          imageSrc: ''
         }
       ]
     }
@@ -92,13 +87,17 @@ export default {
   width: 100%;
   background: #f5f5f5;
   padding: 16px;
+}
+.card-wrap :deep(.tiny-card-group) {
+  margin: 20px 10px;
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  height: 150px;
 }
 .my-card {
-  width: 80%;
   cursor: pointer;
-  padding: 10px;
+  padding: 20px;
+  margin: 0 20px;
 }
 .content {
   display: flex;
diff --git a/examples/sites/demos/pc/app/chart/base-composition-api.vue b/examples/sites/demos/pc/app/chart/base-composition-api.vue
index 570924d41e..2d2234348f 100644
--- a/examples/sites/demos/pc/app/chart/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/base-composition-api.vue
@@ -12,6 +12,7 @@
     </div>
 
     <h3 class="title">饼图</h3>
+    <br />
     <tiny-button style="margin-bottom: 20px" @click="switchColorMode">color-mode切换</tiny-button>
     <div class="content">
       <tiny-chart
@@ -124,3 +125,10 @@ function handleColor(color) {
   console.log('handle-color', color)
 }
 </script>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  font-weight: 500;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/chart/base.vue b/examples/sites/demos/pc/app/chart/base.vue
index 9c3ff21b66..62574b087c 100644
--- a/examples/sites/demos/pc/app/chart/base.vue
+++ b/examples/sites/demos/pc/app/chart/base.vue
@@ -12,6 +12,7 @@
     </div>
 
     <h3 class="title">饼图</h3>
+    <br />
     <tiny-button style="margin-bottom: 20px" @click="switchColorMode">color-mode切换</tiny-button>
     <div class="content">
       <tiny-chart
@@ -129,3 +130,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  font-weight: 500;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue b/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue
index c8b181fb4a..76bef49e77 100644
--- a/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue
@@ -22,16 +22,13 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem, Modal } from '@opentiny/vue'
+import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
 
 const activeName = ref('1')
-
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/accordion.vue b/examples/sites/demos/pc/app/collapse/accordion.vue
index 847fb5a81e..4b0c4aaf84 100644
--- a/examples/sites/demos/pc/app/collapse/accordion.vue
+++ b/examples/sites/demos/pc/app/collapse/accordion.vue
@@ -37,9 +37,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue
index 3e660e2812..2998f1f87a 100644
--- a/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue
@@ -28,9 +28,7 @@ const activeNames = ref(['1', '3'])
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/basic-usage.vue b/examples/sites/demos/pc/app/collapse/basic-usage.vue
index 11aabc24b8..0ff81e0599 100644
--- a/examples/sites/demos/pc/app/collapse/basic-usage.vue
+++ b/examples/sites/demos/pc/app/collapse/basic-usage.vue
@@ -37,9 +37,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue b/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue
index 81a6d68bf8..929d362d91 100644
--- a/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue
@@ -33,9 +33,7 @@ function beforeClose(item, activeNames) {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/before-close.vue b/examples/sites/demos/pc/app/collapse/before-close.vue
index 8536eef056..770b4abd8a 100644
--- a/examples/sites/demos/pc/app/collapse/before-close.vue
+++ b/examples/sites/demos/pc/app/collapse/before-close.vue
@@ -43,9 +43,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/disable-composition-api.vue b/examples/sites/demos/pc/app/collapse/disable-composition-api.vue
index 81b8df11ae..32b05e2783 100644
--- a/examples/sites/demos/pc/app/collapse/disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/disable-composition-api.vue
@@ -28,9 +28,7 @@ const activeNames = ref(['1'])
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/disable.vue b/examples/sites/demos/pc/app/collapse/disable.vue
index 5a6bd15055..d2b934c3e8 100644
--- a/examples/sites/demos/pc/app/collapse/disable.vue
+++ b/examples/sites/demos/pc/app/collapse/disable.vue
@@ -37,9 +37,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/events-composition-api.vue b/examples/sites/demos/pc/app/collapse/events-composition-api.vue
index 1f97c97722..49a6741167 100644
--- a/examples/sites/demos/pc/app/collapse/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/events-composition-api.vue
@@ -35,9 +35,7 @@ function change(activeNames) {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/events.vue b/examples/sites/demos/pc/app/collapse/events.vue
index 2ae6a62331..fc2c4e5788 100644
--- a/examples/sites/demos/pc/app/collapse/events.vue
+++ b/examples/sites/demos/pc/app/collapse/events.vue
@@ -45,9 +45,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
index d90587ba8f..52e1fb6ab2 100644
--- a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
@@ -36,10 +36,8 @@ const IconDeltaRightO = iconDeltaRightO()
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 
 .icon-delta-right {
diff --git a/examples/sites/demos/pc/app/collapse/icon.vue b/examples/sites/demos/pc/app/collapse/icon.vue
index 9eae12d7d8..0a4cf20218 100644
--- a/examples/sites/demos/pc/app/collapse/icon.vue
+++ b/examples/sites/demos/pc/app/collapse/icon.vue
@@ -45,10 +45,8 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 
 .icon-delta-right {
diff --git a/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue b/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue
index de8dd3aeb1..e1d5316cc4 100644
--- a/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue
@@ -139,9 +139,7 @@ const data = ref([
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/nested-content.vue b/examples/sites/demos/pc/app/collapse/nested-content.vue
index 49961c1fc3..026e6968d6 100644
--- a/examples/sites/demos/pc/app/collapse/nested-content.vue
+++ b/examples/sites/demos/pc/app/collapse/nested-content.vue
@@ -159,9 +159,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/collapse/title-composition-api.vue b/examples/sites/demos/pc/app/collapse/title-composition-api.vue
index cfff81594f..59450d01ce 100644
--- a/examples/sites/demos/pc/app/collapse/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/title-composition-api.vue
@@ -41,10 +41,8 @@ const TinyIconSetting = iconSetting()
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 
 .title {
diff --git a/examples/sites/demos/pc/app/collapse/title.vue b/examples/sites/demos/pc/app/collapse/title.vue
index 578b82f71a..40866da412 100644
--- a/examples/sites/demos/pc/app/collapse/title.vue
+++ b/examples/sites/demos/pc/app/collapse/title.vue
@@ -49,10 +49,8 @@ export default {
 </script>
 
 <style scoped lang="less">
-.demo-collapse-wrap {
-  .tiny-collapse-item__content > * {
-    line-height: 1.8;
-  }
+.demo-collapse-wrap ::v-deep .tiny-collapse-item__content > * {
+  line-height: 1.6;
 }
 
 .title {
diff --git a/examples/sites/demos/pc/app/color-picker/base.vue b/examples/sites/demos/pc/app/color-picker/base.vue
index ecf2f0a5fa..aeacfc3d8c 100644
--- a/examples/sites/demos/pc/app/color-picker/base.vue
+++ b/examples/sites/demos/pc/app/color-picker/base.vue
@@ -6,6 +6,7 @@
 
 <script>
 import { ColorPicker } from '@opentiny/vue'
+
 export default {
   components: {
     TinyColorPicker: ColorPicker
diff --git a/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue b/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue
index 9292db81f7..a9d43516f4 100644
--- a/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue
@@ -1,5 +1,6 @@
 <template>
   <tiny-color-picker v-model="color" />
+  <br />
   <tiny-button @click="changeColor"> 切换 </tiny-button>
 </template>
 
diff --git a/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue b/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue
index 5286a17068..732604d90e 100644
--- a/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue
+++ b/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-color-picker v-model="color" />
+    <br />
     <tiny-button @click="changeColor"> 切换 </tiny-button>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
index e20272d3c7..e06c7e353f 100644
--- a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
@@ -1,23 +1,27 @@
 <template>
   <div>
     <ColorPicker v-model="color" :history="history" />
+    <br />
     <Button @click="addHistoryColor">Append history color</Button>
     <Button @click="popHistoryColor">Pop history color</Button>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { ColorPicker, Button } from '@opentiny/vue';
-const color = ref('#66ccff');
-const history = ref(['#66ccff']);
-const randomHex = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
+import { ref } from 'vue'
+import { ColorPicker, Button } from '@opentiny/vue'
+
+const color = ref('#66ccff')
+const history = ref(['#66ccff'])
+const randomHex = () =>
+  '#' +
+  Math.floor(Math.random() * 0xffffff)
+    .toString(16)
+    .padEnd(6, '0')
 const addHistoryColor = () => {
-  history.value.push(
-    randomHex()
-  );
+  history.value.push(randomHex())
 }
 const popHistoryColor = () => {
-  history.value.pop();
+  history.value.pop()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/sites/demos/pc/app/color-picker/history.vue b/examples/sites/demos/pc/app/color-picker/history.vue
index 769bc0a387..61de531986 100644
--- a/examples/sites/demos/pc/app/color-picker/history.vue
+++ b/examples/sites/demos/pc/app/color-picker/history.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-color-picker v-model="color" :history="history" />
+    <br />
     <tiny-button @click="addHistoryColor">Append history color</tiny-button>
     <tiny-button @click="popHistoryColor">Pop history color</tiny-button>
   </div>
diff --git a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
index d58182245e..9e7128d42d 100644
--- a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
@@ -1,23 +1,27 @@
 <template>
   <div>
     <ColorPicker v-model="color" :predefine="predefine" />
+    <br />
     <Button @click="addPredefineColor">Append predefine color</Button>
     <Button @click="popPredefineColor">Pop predefine color</Button>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { ColorPicker, Button } from '@opentiny/vue';
-const color = ref('#66ccff');
-const randomHex = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
+import { ref } from 'vue'
+import { ColorPicker, Button } from '@opentiny/vue'
+
+const color = ref('#66ccff')
+const randomHex = () =>
+  '#' +
+  Math.floor(Math.random() * 0xffffff)
+    .toString(16)
+    .padEnd(6, '0')
 const predefine = ref(new Array(8).fill(0).map(() => randomHex()))
 const addPredefineColor = () => {
-  predefine.value.push(
-    randomHex()
-  );
+  predefine.value.push(randomHex())
 }
 const popPredefineColor = () => {
-  predefine.value.pop();
+  predefine.value.pop()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/sites/demos/pc/app/color-picker/predefine.vue b/examples/sites/demos/pc/app/color-picker/predefine.vue
index e136a65b6c..801fbf7bfd 100644
--- a/examples/sites/demos/pc/app/color-picker/predefine.vue
+++ b/examples/sites/demos/pc/app/color-picker/predefine.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-color-picker v-model="color" :predefine="predefine" />
+    <br />
     <tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
     <tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
   </div>
diff --git a/examples/sites/demos/pc/app/color-picker/size-composition-api.vue b/examples/sites/demos/pc/app/color-picker/size-composition-api.vue
index cf8ab5fa00..6b8131ec5d 100644
--- a/examples/sites/demos/pc/app/color-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/size-composition-api.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <tiny-color-picker v-model="color" size="large" />
-    <tiny-color-picker v-model="color" size="medium" />
-    <tiny-color-picker v-model="color" size="small" />
+    <tiny-color-picker v-model="color" size="medium" class="demo-margin" />
+    <tiny-color-picker v-model="color" size="small" class="demo-margin" />
     <tiny-color-picker v-model="color" size="mini" />
   </div>
 </template>
@@ -10,5 +10,12 @@
 <script setup>
 import { ColorPicker as TinyColorPicker } from '@opentiny/vue'
 import { ref } from 'vue'
+
 const color = ref('#66ccff')
 </script>
+
+<style scoped>
+.demo-margin {
+  margin: 8px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/color-picker/size.vue b/examples/sites/demos/pc/app/color-picker/size.vue
index 9bb9705f92..4a7a9c8bf7 100644
--- a/examples/sites/demos/pc/app/color-picker/size.vue
+++ b/examples/sites/demos/pc/app/color-picker/size.vue
@@ -1,22 +1,29 @@
 <template>
   <div>
     <tiny-color-picker v-model="color" size="large" />
-    <tiny-color-picker v-model="color" size="medium" />
-    <tiny-color-picker v-model="color" size="small" />
+    <tiny-color-picker v-model="color" size="medium" class="demo-margin" />
+    <tiny-color-picker v-model="color" size="small" class="demo-margin" />
     <tiny-color-picker v-model="color" size="mini" />
   </div>
 </template>
 
 <script>
 import { ColorPicker } from '@opentiny/vue'
+
 export default {
   components: {
     TinyColorPicker: ColorPicker
   },
   data() {
     return {
-      color: '#66ccff',
+      color: '#66ccff'
     }
   }
 }
 </script>
+
+<style scoped>
+.demo-margin {
+  margin: 8px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
index 3081907fb4..9e93c96b97 100644
--- a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
@@ -30,3 +30,11 @@ function change(value) {
   Modal.message({ message: `change:${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/basic-usage.vue b/examples/sites/demos/pc/app/company/basic-usage.vue
index 862e891885..a56e48d9c1 100644
--- a/examples/sites/demos/pc/app/company/basic-usage.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage.vue
@@ -37,3 +37,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue b/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue
index 4ca8a1aa5c..c7cf8ec41c 100644
--- a/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue
+++ b/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <tiny-config-provider :direction="direction">
-      <h1>Text</h1>
+      <h1 class="demo-provider">Text</h1>
       <h1>المعرفة نور والجهل ظلام</h1>
-      <div>
+      <div class="demo-provider">
         <span>ما هو مكتوب في الكتب هو مجرد كلمات ، وما يتم تذكره هو المعرفة</span>
       </div>
       <hr />
-      <h1>Input</h1>
-      <tiny-input v-model="input" placeholder="الرجاء إدخال المحتوى"></tiny-input>
-      <h1>Container</h1>
+      <h1 class="demo-provider">Input</h1>
+      <tiny-input v-model="input" placeholder="الرجاء إدخال المحتوى" class="demo-provider"></tiny-input>
+      <h1 class="demo-provider">Container</h1>
       <div class="content">
         <tiny-layout>
           <tiny-row>
@@ -93,4 +93,7 @@ function changeDirect(direct) {
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
+.demo-provider {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/config-provider/text-direct.vue b/examples/sites/demos/pc/app/config-provider/text-direct.vue
index a712788d34..baa1bd86c2 100644
--- a/examples/sites/demos/pc/app/config-provider/text-direct.vue
+++ b/examples/sites/demos/pc/app/config-provider/text-direct.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <tiny-config-provider :direction="direction">
-      <h1>Text</h1>
+      <h1 class="demo-provider">Text</h1>
       <h1>المعرفة نور والجهل ظلام</h1>
-      <div>
+      <div class="demo-provider">
         <span>ما هو مكتوب في الكتب هو مجرد كلمات ، وما يتم تذكره هو المعرفة</span>
       </div>
       <hr />
-      <h1>Input</h1>
-      <tiny-input v-model="input" placeholder="الرجاء إدخال المحتوى"></tiny-input>
-      <h1>Container</h1>
+      <h1 class="demo-provider">Input</h1>
+      <tiny-input v-model="input" placeholder="الرجاء إدخال المحتوى" class="demo-provider"></tiny-input>
+      <h1 class="demo-provider">Container</h1>
       <div class="content">
         <tiny-layout>
           <tiny-row>
@@ -100,4 +100,7 @@ export default {
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
+.demo-provider {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/container/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/container/basic-usage-composition-api.vue
index 819440ddfb..3366471d7a 100644
--- a/examples/sites/demos/pc/app/container/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/container/basic-usage-composition-api.vue
@@ -11,15 +11,15 @@
       </tiny-radio-group>
     </div>
     <tiny-container :pattern="pattern">
-      <div>Main</div>
+      <div class="demo-center">Main</div>
       <template #header>
-        <div>Header</div>
+        <div class="demo-center">Header</div>
       </template>
       <template #aside>
-        <div>Aside</div>
+        <div class="demo-center">Aside</div>
       </template>
       <template #footer>
-        <div>Footer</div>
+        <div class="demo-center">Footer</div>
       </template>
     </tiny-container>
   </div>
@@ -80,4 +80,11 @@ const pattern = ref('default')
   border: 3px solid #ffffff;
   color: #84a18a;
 }
+.demo-center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/container/basic-usage.vue b/examples/sites/demos/pc/app/container/basic-usage.vue
index 4535606c1e..6f292aa1e8 100644
--- a/examples/sites/demos/pc/app/container/basic-usage.vue
+++ b/examples/sites/demos/pc/app/container/basic-usage.vue
@@ -11,15 +11,15 @@
       </tiny-radio-group>
     </div>
     <tiny-container :pattern="pattern">
-      <div>Main</div>
+      <div class="demo-center">Main</div>
       <template #header>
-        <div>Header</div>
+        <div class="demo-center">Header</div>
       </template>
       <template #aside>
-        <div>Aside</div>
+        <div class="demo-center">Aside</div>
       </template>
       <template #footer>
-        <div>Footer</div>
+        <div class="demo-center">Footer</div>
       </template>
     </tiny-container>
   </div>
@@ -71,6 +71,7 @@ export default {
   background-color: #ecf8ff;
   border: 3px solid #ffffff;
   color: #5b90af;
+  line-height: 48px;
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
@@ -90,4 +91,11 @@ export default {
   border: 3px solid #ffffff;
   color: #84a18a;
 }
+.demo-center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/container/custom-with-height-composition-api.vue b/examples/sites/demos/pc/app/container/custom-with-height-composition-api.vue
index 85340e733a..21d96829f5 100644
--- a/examples/sites/demos/pc/app/container/custom-with-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/container/custom-with-height-composition-api.vue
@@ -7,14 +7,14 @@
       :header-height="headerHeight"
     >
       <template #header>
-        <tiny-layout>header-height：80px</tiny-layout>
+        <tiny-layout class="demo-center">header-height：80px</tiny-layout>
       </template>
       <template #aside>
-        <tiny-layout>aside-width：200px</tiny-layout>
+        <tiny-layout class="demo-center">aside-width：200px</tiny-layout>
       </template>
-      <tiny-layout>Main 自动填充空间</tiny-layout>
+      <tiny-layout class="demo-center">Main 自动填充空间</tiny-layout>
       <template #footer>
-        <tiny-layout>footer-height：80px</tiny-layout>
+        <tiny-layout class="demo-center">footer-height：80px</tiny-layout>
       </template>
     </tiny-container>
   </div>
@@ -68,4 +68,11 @@ const headerHeight = ref(80)
   font-size: 16px;
   margin: 0 7px;
 }
+.demo-center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/container/custom-with-height.vue b/examples/sites/demos/pc/app/container/custom-with-height.vue
index cfcdf0aa92..98047438b7 100644
--- a/examples/sites/demos/pc/app/container/custom-with-height.vue
+++ b/examples/sites/demos/pc/app/container/custom-with-height.vue
@@ -7,14 +7,14 @@
       :header-height="headerHeight"
     >
       <template #header>
-        <tiny-layout>header-height：80px</tiny-layout>
+        <tiny-layout class="demo-center">header-height：80px</tiny-layout>
       </template>
       <template #aside>
-        <tiny-layout>aside-width：200px</tiny-layout>
+        <tiny-layout class="demo-center">aside-width：200px</tiny-layout>
       </template>
-      <tiny-layout>Main 自动填充空间</tiny-layout>
+      <tiny-layout class="demo-center">Main 自动填充空间</tiny-layout>
       <template #footer>
-        <tiny-layout>footer-height：80px</tiny-layout>
+        <tiny-layout class="demo-center">footer-height：80px</tiny-layout>
       </template>
     </tiny-container>
   </div>
@@ -77,4 +77,11 @@ export default {
   font-size: 16px;
   margin: 0 7px;
 }
+.demo-center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
index 0d255e6015..2e79b57cab 100644
--- a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
@@ -15,3 +15,11 @@ function change(value) {
   Modal.message({ message: '当前选中国家：' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/basic-usage.vue b/examples/sites/demos/pc/app/country/basic-usage.vue
index 98a462d8de..24806c0c43 100644
--- a/examples/sites/demos/pc/app/country/basic-usage.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage.vue
@@ -24,3 +24,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
index 4cfcd7b248..ed335e64e4 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
@@ -15,3 +15,11 @@ function change(value) {
   Modal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/basic-usage.vue b/examples/sites/demos/pc/app/currency/basic-usage.vue
index 7e72e1fa95..80fbd84597 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage.vue
@@ -24,3 +24,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/size-composition-api.vue b/examples/sites/demos/pc/app/currency/size-composition-api.vue
index 53a97eb1ac..bd5b4527ad 100644
--- a/examples/sites/demos/pc/app/currency/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/size-composition-api.vue
@@ -15,3 +15,11 @@ function change(value) {
   Modal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/size.vue b/examples/sites/demos/pc/app/currency/size.vue
index e7e33a85b1..163c1eb4fa 100644
--- a/examples/sites/demos/pc/app/currency/size.vue
+++ b/examples/sites/demos/pc/app/currency/size.vue
@@ -24,3 +24,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
index 58de323e3d..c1886c7178 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
@@ -16,7 +16,7 @@ const value = ref('022471')
 function beforeConfirm() {
   return new Promise((resolve, reject) => {
     Modal.confirm('确定关闭弹框？').then((res) => {
-      res === 'confirm' ? resolve() : reject(new Error())
+      res === 'confirm' ? resolve() : reject(new Error('已取消关闭'))
     })
   })
 }
@@ -26,4 +26,9 @@ function beforeConfirm() {
 .demo-dept .tiny-dept {
   width: 270px;
 }
+.title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dept/before-confirm.vue b/examples/sites/demos/pc/app/dept/before-confirm.vue
index e18c460d68..934a948863 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm.vue
@@ -23,7 +23,7 @@ export default {
     beforeConfirm() {
       return new Promise((resolve, reject) => {
         Modal.confirm('确定关闭弹框？').then((res) => {
-          res === 'confirm' ? resolve() : reject(new Error())
+          res === 'confirm' ? resolve() : reject(new Error('已取消关闭'))
         })
       })
     }
@@ -35,4 +35,9 @@ export default {
 .demo-dept .tiny-dept {
   width: 270px;
 }
+.title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
index 08a9ab5fc0..290a062963 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
@@ -22,4 +22,9 @@ function cancel() {
 .demo-dept .tiny-dept {
   width: 270px;
 }
+.title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel.vue b/examples/sites/demos/pc/app/dept/dept-cancel.vue
index 9b3dceb765..c3eafaae74 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel.vue
@@ -31,4 +31,9 @@ export default {
 .demo-dept .tiny-dept {
   width: 270px;
 }
+.title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
index 1535db63ac..00a7e7b806 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
@@ -22,4 +22,9 @@ function confirm() {
 .demo-dept .tiny-dept {
   width: 270px;
 }
+.title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm.vue b/examples/sites/demos/pc/app/dept/dept-confirm.vue
index be5cff9b75..977c2c2047 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm.vue
@@ -31,4 +31,9 @@ export default {
 .demo-dept .tiny-dept {
   width: 270px;
 }
+.title {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js b/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
index 551d615ea1..fbad4a45f8 100644
--- a/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
+++ b/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
@@ -141,8 +141,10 @@ export default {
         'en-US': 'Disable the mask layer'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>modal</code>属性设置<code>false</code>不启用遮罩层。</p>\n',
-        'en-US': '<p>Set the<code>modal</code>attribute to<code>false</code>to not enable mask layers.</p>\n'
+        'zh-CN':
+          '<p>可通过<code>modal</code>属性设置<code>false</code>不启用遮罩层。无遮罩层时，单击弹窗外部区域仍然可以关闭弹窗。</p>\n',
+        'en-US':
+          '<p>Set the<code>modal</code>attribute to<code>false</code>to not enable mask layers.When there is no masked layer, clicking on the outer area of the pop-up window can still close it.</p>\n'
       },
       codeFiles: ['no-modal.vue']
     },
diff --git a/examples/sites/demos/pc/app/directives/auto-tip/always-show-composition-api.vue b/examples/sites/demos/pc/app/directives/auto-tip/always-show-composition-api.vue
new file mode 100644
index 0000000000..8670b09b68
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/auto-tip/always-show-composition-api.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="title">待办事项：</div>
+    <div
+      v-for="item in options"
+      :key="item.title"
+      :class="{
+        is_disabled: item.disabled,
+        list: true
+      }"
+      v-auto-tip="item.disabled ? { always: true, content: item.tip } : false"
+    >
+      {{ item.text }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
+
+const options = [
+  { text: '去游泳馆游泳', disabled: false },
+  { text: '去羽毛球馆打羽毛球', disabled: true, tip: '自定义提示内容' }
+]
+</script>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  font-weight: bolder;
+  margin-bottom: 20px;
+}
+.list {
+  width: 260px;
+  height: 30px;
+  line-height: 30px;
+  border-bottom: 1px solid #ccc;
+  margin-top: 10px;
+}
+.is_disabled {
+  cursor: not-allowed;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/directives/auto-tip/always-show.spec.js b/examples/sites/demos/pc/app/directives/auto-tip/always-show.spec.js
new file mode 100644
index 0000000000..0a7d3cef53
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/auto-tip/always-show.spec.js
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('常显提示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('directives-auto-tip#auto-tip-always-show')
+
+  await page.getByText('去游泳馆游泳').hover()
+  await expect(page.getByRole('tooltip', { name: '自定义提示内容' })).not.toBeVisible()
+
+  await page.getByText('去羽毛球馆打羽毛球').hover()
+  await expect(page.getByRole('tooltip', { name: '自定义提示内容' })).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/directives/auto-tip/always-show.vue b/examples/sites/demos/pc/app/directives/auto-tip/always-show.vue
new file mode 100644
index 0000000000..226fe96752
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/auto-tip/always-show.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="title">待办事项：</div>
+    <div
+      v-for="item in options"
+      :key="item.title"
+      :class="{
+        is_disabled: item.disabled,
+        list: true
+      }"
+      v-auto-tip="item.disabled ? { always: true, content: item.tip } : false"
+    >
+      {{ item.text }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { AutoTip } from '@opentiny/vue-directive'
+
+export default {
+  directives: { AutoTip },
+  data() {
+    return {
+      options: [
+        { text: '去游泳馆游泳', disabled: false },
+        { text: '去羽毛球馆打羽毛球', disabled: true, tip: '自定义提示内容' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  font-weight: bolder;
+  margin-bottom: 20px;
+}
+.list {
+  width: 260px;
+  height: 30px;
+  line-height: 30px;
+  border-bottom: 1px solid #ccc;
+  margin-top: 10px;
+}
+.is_disabled {
+  cursor: not-allowed;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/directives/auto-tip/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/directives/auto-tip/basic-usage-composition-api.vue
new file mode 100644
index 0000000000..fe0e1341aa
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/auto-tip/basic-usage-composition-api.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="auto-tip" v-auto-tip>超出省略隐藏，鼠标移入是会有ToolTip提示</div>
+</template>
+
+<script setup>
+import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
+</script>
+
+<style scoped>
+.auto-tip {
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/directives/auto-tip/basic-usage.spec.js b/examples/sites/demos/pc/app/directives/auto-tip/basic-usage.spec.js
new file mode 100644
index 0000000000..db3a0ae143
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/auto-tip/basic-usage.spec.js
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('directives-auto-tip#auto-tip-basic-usage')
+
+  await page.getByText('超出省略隐藏，鼠标移入是会有ToolTip提示').hover()
+  await expect(page.getByRole('tooltip', { name: '超出省略隐藏，鼠标移入是会有ToolTip提示' })).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/directives/auto-tip/basic-usage.vue b/examples/sites/demos/pc/app/directives/auto-tip/basic-usage.vue
new file mode 100644
index 0000000000..81e941e20c
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/auto-tip/basic-usage.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="auto-tip" v-auto-tip>超出省略隐藏，鼠标移入是会有ToolTip提示</div>
+</template>
+
+<script>
+import { AutoTip } from '@opentiny/vue-directive'
+
+export default {
+  directives: { AutoTip }
+}
+</script>
+
+<style scoped>
+.auto-tip {
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.cn.md b/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.cn.md
new file mode 100644
index 0000000000..75dd9d8cb0
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.cn.md
@@ -0,0 +1,7 @@
+---
+title: AutoTip 超出隐藏提示指令
+---
+
+# AutoTip 超出隐藏提示指令
+
+<div>AutoTip 超出隐藏提示指令，用于在超出省略隐藏时可以配置tooltip提示。</div>
diff --git a/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.en.md b/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.en.md
new file mode 100644
index 0000000000..0c3e37f58a
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.en.md
@@ -0,0 +1,7 @@
+---
+title: AutoTip exceeds hidden prompt instruction
+---
+
+# AutoTip exceeds the hidden prompt command.
+
+<div>AutoTip is used to configure the tooltip prompt when the limit is exceeded. </div>
diff --git a/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.js b/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.js
new file mode 100644
index 0000000000..a6efa547f9
--- /dev/null
+++ b/examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.js
@@ -0,0 +1,46 @@
+export default {
+  column: '2',
+  owner: '',
+  metaData: {
+    stable: '3.17.0'
+  },
+  versionTipOption: {
+    stages: ['stable']
+  },
+  demos: [
+    {
+      demoId: 'auto-tip-basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN':
+          '通过配置 <code>v-auto-tip</code> 自定义指令可以在鼠标移入时自动添加tip提示，注意：需要用户自己写超出省略隐藏相关样式。',
+        'en-US':
+          'You can configure the <code>v-auto-tip</code> custom command to automatically add a tip when you move the cursor. Note: You need to write the style beyond or omit to hide the style.'
+      },
+      codeFiles: ['auto-tip/basic-usage.vue']
+    },
+    {
+      demoId: 'auto-tip-always-show',
+      name: {
+        'zh-CN': '自定义提示内容',
+        'en-US': 'Constantly Displaying Prompts'
+      },
+      desc: {
+        'zh-CN': `
+        通过配置 <code>v-auto-tip</code> 自定义指令的值可以分为以下两种情况： 
+        <p>如果配置为 <code>{ always: true, content: '自定义内容', effect: 'dark' }</code> ，<code>always: true</code> 可以正常触发提示无论是否超出隐藏省略；<code>content</code> 可以定义提示内容；<code>effect</code> 可以配置主题，可选值有： <code>light</code> 和 <code>dark</code> ，默认是亮色主题。</p>
+        <p>如果配置为 <code>false</code> 则不处理任何 <code>tip</code> 相关逻辑。</p>
+        `,
+        'en-US': `
+        You can configure <code>v-auto-tip</code> to customize the command value to:
+        <p>If this parameter is set to {always: true, content:'customized content'}</code> ,<code>always: true</code>, the prompt is displayed long regardless of whether the value exceeds the threshold or not. <code>content</code> can define the prompt content. </p>
+        <p>If this parameter is set to <code>false</code>, no <code>tip</code> logic is processed. </p>
+        `
+      },
+      codeFiles: ['auto-tip/always-show.vue']
+    }
+  ]
+}
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
index 26ea5ef8c5..c9488fcf0f 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
@@ -24,3 +24,11 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
index ad30fb273b..e22d8113fd 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
@@ -32,3 +32,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
index 434776e766..28b5109b2c 100644
--- a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
@@ -24,3 +24,11 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/size.vue b/examples/sites/demos/pc/app/drop-roles/size.vue
index e69692582a..44db58dbe5 100644
--- a/examples/sites/demos/pc/app/drop-roles/size.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size.vue
@@ -32,3 +32,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue
index 29c46934d8..1103066895 100644
--- a/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/drop-times/basic-usage.vue b/examples/sites/demos/pc/app/drop-times/basic-usage.vue
index 117561e694..7661d5c551 100644
--- a/examples/sites/demos/pc/app/drop-times/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drop-times/basic-usage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue b/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
index fe454b1c54..021e0020f6 100644
--- a/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：下拉菜单禁用</p>
+    <p class="demo-dropdown">场景1：下拉菜单禁用</p>
     <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -12,7 +12,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：按钮类型禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：按钮类型禁用</p>
     <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -24,7 +25,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景3：菜单项禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景3：菜单项禁用</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -46,3 +48,9 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.demo-dropdown {
+  margin-bottom: 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/disabled.vue b/examples/sites/demos/pc/app/dropdown/disabled.vue
index 30c9b8cab4..9564c467d4 100644
--- a/examples/sites/demos/pc/app/dropdown/disabled.vue
+++ b/examples/sites/demos/pc/app/dropdown/disabled.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：下拉菜单禁用</p>
+    <p class="demo-dropdown">场景1：下拉菜单禁用</p>
     <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -12,7 +12,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：按钮类型禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：按钮类型禁用</p>
     <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -24,7 +25,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景3：菜单项禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景3：菜单项禁用</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -56,4 +58,7 @@ p {
   line-height: 1.5;
   font-size: 14px;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
index 42c2db97b0..88aa33106a 100644
--- a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+    <p class="demo-dropdown">场景1：按钮类型 + 循环 tiny-dropdown-item</p>
 
     <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
       <template #dropdown>
@@ -17,8 +17,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <p>场景2：配置式</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：配置式</p>
     <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
@@ -64,7 +64,7 @@ const itemClick = (data, vm) => {
   Notify({
     type: 'info',
     title: 'itemClick 回调事件',
-    message: `使用 dropdown-item 的label属性：${data.vm.label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
+    message: `使用 dropdown-item 的label属性：${label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
     position: 'top-right',
     duration: 2000
   })
@@ -87,4 +87,7 @@ p {
   line-height: 1.5;
   font-size: 14px;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/events.vue b/examples/sites/demos/pc/app/dropdown/events.vue
index ac06df54cd..ec3b6cc333 100644
--- a/examples/sites/demos/pc/app/dropdown/events.vue
+++ b/examples/sites/demos/pc/app/dropdown/events.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+    <p class="demo-dropdown">场景1：按钮类型 + 循环 tiny-dropdown-item</p>
     <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -16,8 +16,9 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+    <br /><br />
 
-    <p>场景2：配置式</p>
+    <p class="demo-dropdown">场景2：配置式</p>
     <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
@@ -91,4 +92,7 @@ p {
   line-height: 1.5;
   font-size: 14px;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
index 7b1bdb2bce..67e3e8b161 100644
--- a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <p>场景1：默认</p>
+  <div class="demo-drop">
+    <p class="demo-dropdown">场景1：默认</p>
     <tiny-dropdown split-button type="success">
       更多菜单
       <template #dropdown>
@@ -13,7 +13,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：设置 inherit-width</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：设置 inherit-width</p>
     <tiny-dropdown split-button type="success" :inherit-width="true">
       更多菜单
       <template #dropdown>
@@ -42,4 +43,14 @@ p {
   font-size: 14px;
   line-height: 1.5;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
+</style>
+
+<style>
+.demo-drop .tiny-dropdown .tiny-dropdown__trigger.tiny-dropdown__caret-button {
+  padding-left: 14px;
+  padding-right: 14px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width.vue b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
index c14857cd3e..79254e8f38 100644
--- a/examples/sites/demos/pc/app/dropdown/inherit-width.vue
+++ b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <p>场景1：默认</p>
+  <div class="demo-drop">
+    <p class="demo-dropdown">场景1：默认</p>
     <tiny-dropdown split-button type="success">
       更多菜单
       <template #dropdown>
@@ -13,7 +13,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：设置 inherit-width</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：设置 inherit-width</p>
     <tiny-dropdown split-button type="success" :inherit-width="true">
       更多菜单
       <template #dropdown>
@@ -46,4 +47,14 @@ p {
   font-size: 14px;
   line-height: 1.5;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
+</style>
+
+<style>
+.demo-drop .tiny-dropdown .tiny-dropdown__trigger.tiny-dropdown__caret-button {
+  padding-left: 14px;
+  padding-right: 14px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
index 267597e534..fd748fd987 100644
--- a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <p>默认：</p>
+  <div class="demo-drop">
+    <p class="demo-dropdown">默认：</p>
     <tiny-dropdown split-button type="primary">
       默认尺寸
       <template #dropdown>
@@ -13,7 +13,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>其他尺寸：</p>
+    <p class="demo-dropdown">其他尺寸：</p>
     <tiny-dropdown size="medium" split-button type="primary">
       中等尺寸
       <template #dropdown>
@@ -72,4 +72,14 @@ p {
 .tiny-dropdown {
   margin: 0 10px 10px 0;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
+</style>
+
+<style>
+.demo-drop .tiny-dropdown .tiny-dropdown__trigger.tiny-dropdown__caret-button {
+  padding-left: 14px;
+  padding-right: 14px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/size.vue b/examples/sites/demos/pc/app/dropdown/size.vue
index 12379cf0c2..797440b52f 100644
--- a/examples/sites/demos/pc/app/dropdown/size.vue
+++ b/examples/sites/demos/pc/app/dropdown/size.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <p>默认：</p>
+  <div class="demo-drop">
+    <p class="demo-dropdown">默认：</p>
     <tiny-dropdown split-button type="primary">
       默认尺寸
       <template #dropdown>
@@ -13,7 +13,7 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>其他尺寸：</p>
+    <p class="demo-dropdown">其他尺寸：</p>
     <tiny-dropdown size="medium" split-button type="primary">
       中等尺寸
       <template #dropdown>
@@ -76,4 +76,14 @@ p {
 .tiny-dropdown {
   margin: 0 10px 10px 0;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
+</style>
+
+<style>
+.demo-drop .tiny-dropdown .tiny-dropdown__trigger.tiny-dropdown__caret-button {
+  padding-left: 14px;
+  padding-right: 14px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue b/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
index f608da0fc1..31797212ff 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop">
     <div>场景1：设置按钮类型</div>
     <br />
     <tiny-dropdown split-button>
@@ -40,3 +40,10 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style>
+.demo-drop .tiny-dropdown .tiny-dropdown__trigger.tiny-dropdown__caret-button {
+  padding-left: 14px;
+  padding-right: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/split-button.vue b/examples/sites/demos/pc/app/dropdown/split-button.vue
index 578114f2ea..0d0bc0fb28 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button.vue
+++ b/examples/sites/demos/pc/app/dropdown/split-button.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop">
     <div>场景1：设置按钮类型</div>
     <br />
     <tiny-dropdown split-button>
@@ -44,3 +44,10 @@ export default {
   }
 }
 </script>
+
+<style>
+.demo-drop .tiny-dropdown .tiny-dropdown__trigger.tiny-dropdown__caret-button {
+  padding-left: 14px;
+  padding-right: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue b/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue
index 6b56b2e4f9..99018fb1c2 100644
--- a/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
+  <div class="tiny-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   <tiny-file-upload drag :action="action" multiple accept=".png,.jpeg,.jpg" @drop-error="dropErrorHandler">
     <tiny-icon-fileupload class="tiny-svg-size icon-fileupload"></tiny-icon-fileupload>
-    <div class="tiny-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   </tiny-file-upload>
 </template>
 
@@ -18,3 +18,11 @@ function dropErrorHandler(files) {
   Modal.message(`有${files.length}个文件拖拽失败`)
 }
 </script>
+
+<style scoped>
+.tiny-upload__text {
+  color: #595959;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/file-upload/drag-upload.vue b/examples/sites/demos/pc/app/file-upload/drag-upload.vue
index 9842f76200..673ced84e0 100644
--- a/examples/sites/demos/pc/app/file-upload/drag-upload.vue
+++ b/examples/sites/demos/pc/app/file-upload/drag-upload.vue
@@ -1,7 +1,7 @@
 <template>
+  <div class="tiny-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   <tiny-file-upload drag :action="action" multiple accept=".png,.jpeg,.jpg" @drop-error="dropErrorHandler">
     <tiny-icon-fileupload-pro class="tiny-svg-size icon-fileupload"></tiny-icon-fileupload-pro>
-    <div class="tiny-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   </tiny-file-upload>
 </template>
 
@@ -26,3 +26,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-upload__text {
+  color: #595959;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/fluent-editor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/fluent-editor/basic-usage-composition-api.vue
new file mode 100644
index 0000000000..a77399d444
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/basic-usage-composition-api.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/basic-usage.vue b/examples/sites/demos/pc/app/fluent-editor/basic-usage.vue
new file mode 100644
index 0000000000..ffd04f5859
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/basic-usage.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/data-switch-composition-api.vue b/examples/sites/demos/pc/app/fluent-editor/data-switch-composition-api.vue
new file mode 100644
index 0000000000..db7dd31624
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/data-switch-composition-api.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
+    内容：<br />
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+const value = ref('<p>Hello <strong>FluentEditor</strong>!</p>')
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/data-switch.vue b/examples/sites/demos/pc/app/fluent-editor/data-switch.vue
new file mode 100644
index 0000000000..1355772ee3
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/data-switch.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: ''
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/disabled-composition-api.vue b/examples/sites/demos/pc/app/fluent-editor/disabled-composition-api.vue
new file mode 100644
index 0000000000..575fbbc140
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/disabled-composition-api.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/disabled.vue b/examples/sites/demos/pc/app/fluent-editor/disabled.vue
new file mode 100644
index 0000000000..1355772ee3
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/disabled.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: ''
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/fluent-editor-composition-api.vue b/examples/sites/demos/pc/app/fluent-editor/fluent-editor-composition-api.vue
new file mode 100644
index 0000000000..ce0b08a6ec
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/fluent-editor-composition-api.vue
@@ -0,0 +1,35 @@
+<template>
+  <div id="editor">
+    <p>Hello <strong>FluentEditor</strong>!</p> 
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  ['undo', 'redo', 'clean'],
+  ['bold', 'italic', 'underline', 'strike'],
+  [{ header: [] }],
+  [{ font: [] }, { size: [] }],
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }, { list: 'bullet' }, { list: 'ordered' }, { list: 'check' }],
+  ['code', 'code-block', 'blockquote'],
+  ['image', 'file', 'better-table', 'link', 'global-link'],
+  ['fullscreen', 'emoji', 'help', 'screenshot'],
+]
+
+onMounted(() => {
+  editor = new FluentEditor('#editor', {
+    theme: 'snow',
+    modules: {
+      toolbar: {
+        container: TOOLBAR_CONFIG
+      }
+    }
+  })
+})
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/fluent-editor.vue b/examples/sites/demos/pc/app/fluent-editor/fluent-editor.vue
new file mode 100644
index 0000000000..1fa4ff01b1
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/fluent-editor.vue
@@ -0,0 +1,40 @@
+<template>
+  <div id="editor">
+    <p>Hello <strong>FluentEditor</strong>!</p> 
+  </div>
+</template>
+
+<script>
+import FluentEditor from '@opentiny/fluent-editor'
+
+const TOOLBAR_CONFIG = [
+  ['undo', 'redo', 'clean'],
+  ['bold', 'italic', 'underline', 'strike'],
+  [{ header: [] }],
+  [{ font: [] }, { size: [] }],
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }, { list: 'bullet' }, { list: 'ordered' }, { list: 'check' }],
+  ['code', 'code-block', 'blockquote'],
+  ['image', 'file', 'better-table', 'link', 'global-link'],
+  ['fullscreen', 'emoji', 'help', 'screenshot'],
+]
+
+export default {
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}',
+      editor: null,
+    }
+  },
+  mounted() {
+    this.editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        }
+      }
+    })
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.cn.md b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.cn.md
new file mode 100644
index 0000000000..67a5c6aeaf
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.cn.md
@@ -0,0 +1,7 @@
+---
+title: FluentEditor 富文本
+---
+
+# FluentEditor 富文本
+
+<div>用于创建和编辑富文本内容。</div>
diff --git a/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.en.md b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.en.md
new file mode 100644
index 0000000000..70185272f7
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.en.md
@@ -0,0 +1,7 @@
+---
+title: FluentEditor
+---
+
+# FluentEditor
+
+<div>FluentEditor is a rich text component used to create and edit rich text content.</div>
diff --git a/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js
new file mode 100644
index 0000000000..ae98ffcf1b
--- /dev/null
+++ b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js
@@ -0,0 +1,60 @@
+export default {
+  column: '2',
+  owner: '',
+  metaData: {
+    experimental: '3.17.0'
+  },
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '通过 <code>v-model</code> 设置绑定值，默认数据保存格式为 Delta 数据格式。',
+        'en-US': 'You can refer to component label.'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'data-switch',
+      name: {
+        'zh-CN': '数据格式转换',
+        'en-US': 'Vertical divider line'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
+        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
+      },
+      codeFiles: ['data-switch.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用态',
+        'en-US': 'The position of the separator copy'
+      },
+      desc: {
+        'zh-CN': '<p>通过属性 <code>disabled</code> 可设置编辑器为不可编辑状态。</p>',
+        'en-US':
+          '<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'fluent-editor',
+      name: {
+        'zh-CN': '框架无关版本',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>new FluentEditor(\'#editor\', options)</code> 初始化一个富文本编辑器，用法和 Quill 一样，第一个参数是需要挂载富文本编辑器的 DOM 节点，第二个参数是配置项。</p>',
+        'en-US':
+          '<p></p>'
+      },
+      codeFiles: ['fluent-editor.vue']
+    }
+  ]
+}
diff --git a/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue b/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue
index 48dc76685c..54ecded8d9 100644
--- a/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue
+++ b/examples/sites/demos/pc/app/font/Font-usage-specifications-composition-api.vue
@@ -37,7 +37,7 @@ import { Col as TinyCol, Row as TinyRow, Layout as TinyLayout } from '@opentiny/
 
 <style scoped>
 .row-font-css {
-  margin: 5px 0;
+  margin: 16px 0;
   display: block;
 }
 
diff --git a/examples/sites/demos/pc/app/font/Font-usage-specifications.vue b/examples/sites/demos/pc/app/font/Font-usage-specifications.vue
index 2126bfbe20..8b202dc0e7 100644
--- a/examples/sites/demos/pc/app/font/Font-usage-specifications.vue
+++ b/examples/sites/demos/pc/app/font/Font-usage-specifications.vue
@@ -45,7 +45,7 @@ export default {
 
 <style scoped>
 .row-font-css {
-  margin: 5px 0;
+  margin: 16px 0;
   display: block;
 }
 
diff --git a/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue b/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue
index 0ef520750f..67bb0a5c37 100644
--- a/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue
+++ b/examples/sites/demos/pc/app/font/chinese-font-set-composition-api.vue
@@ -1,10 +1,21 @@
 <template>
   <tiny-layout class="tiny-font">
-    <h1>用户体验</h1>
-    <h5>微软雅黑</h5>
+    <span>用户体验</span>
+    <p>微软雅黑</p>
   </tiny-layout>
 </template>
 
 <script setup lang="jsx">
 import { Layout as TinyLayout } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-font span {
+  font-size: 14px;
+  line-height: 20px;
+}
+.tiny-font p {
+  font-size: 24px;
+  line-height: 48px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/font/chinese-font-set.vue b/examples/sites/demos/pc/app/font/chinese-font-set.vue
index 52bb74ca1f..a1a3fa8aa0 100644
--- a/examples/sites/demos/pc/app/font/chinese-font-set.vue
+++ b/examples/sites/demos/pc/app/font/chinese-font-set.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-layout class="tiny-font">
-    <h1>用户体验</h1>
-    <h5>微软雅黑</h5>
+    <span>用户体验</span>
+    <p>微软雅黑</p>
   </tiny-layout>
 </template>
 
@@ -14,3 +14,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-font span {
+  font-size: 14px;
+  line-height: 20px;
+}
+.tiny-font p {
+  font-size: 24px;
+  line-height: 48px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue b/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue
index fadaee78af..2194e1f65f 100644
--- a/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue
+++ b/examples/sites/demos/pc/app/font/english-fonts-composition-api.vue
@@ -1,10 +1,21 @@
 <template>
   <tiny-layout class="tiny-font">
-    <h1>User Experience Design</h1>
-    <h5>Helvetica</h5>
+    <span>User Experience Design</span>
+    <p>Helvetica</p>
   </tiny-layout>
 </template>
 
 <script setup lang="jsx">
 import { Layout as TinyLayout } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-font span {
+  font-size: 14px;
+  line-height: 20px;
+}
+.tiny-font p {
+  font-size: 24px;
+  line-height: 48px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/font/english-fonts.vue b/examples/sites/demos/pc/app/font/english-fonts.vue
index 9819ffdb2c..00a1edbcba 100644
--- a/examples/sites/demos/pc/app/font/english-fonts.vue
+++ b/examples/sites/demos/pc/app/font/english-fonts.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-layout class="tiny-font">
-    <h1>User Experience Design</h1>
-    <h5>Helvetica</h5>
+    <span>User Experience Design</span>
+    <p>Helvetica</p>
   </tiny-layout>
 </template>
 
@@ -14,3 +14,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-font span {
+  font-size: 14px;
+  line-height: 20px;
+}
+.tiny-font p {
+  font-size: 24px;
+  line-height: 48px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue b/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
index f44cb040c3..2d8ebec673 100644
--- a/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
@@ -21,7 +21,7 @@ const formData = reactive({
 </script>
 
 <style scoped>
-#form .tiny-input {
-  width: 300px;
+.tiny-form-item {
+  width: 400px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-in-row.spec.js b/examples/sites/demos/pc/app/form/form-in-row.spec.js
index ddd89e364c..0bbe8384cf 100644
--- a/examples/sites/demos/pc/app/form/form-in-row.spec.js
+++ b/examples/sites/demos/pc/app/form/form-in-row.spec.js
@@ -11,7 +11,7 @@ test('测试行内表单', async ({ page }) => {
 
   // 测试单行情况
   await page.setViewportSize({
-    width: 1400,
+    width: 1600,
     height: 700
   })
   await page.waitForTimeout(200)
diff --git a/examples/sites/demos/pc/app/form/form-in-row.vue b/examples/sites/demos/pc/app/form/form-in-row.vue
index 66b0c9682f..855de31820 100644
--- a/examples/sites/demos/pc/app/form/form-in-row.vue
+++ b/examples/sites/demos/pc/app/form/form-in-row.vue
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style scoped>
-#form .tiny-input {
-  width: 300px;
+.tiny-form-item {
+  width: 400px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
index 093afc2143..bf8334de9c 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
@@ -72,6 +72,6 @@ async function validateField() {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 450px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field.vue b/examples/sites/demos/pc/app/form/form-validate-field.vue
index c2ede97fa6..32421de5a6 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field.vue
@@ -73,6 +73,6 @@ export default {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 450px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
index a84ba33e81..74cfc720da 100644
--- a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
@@ -125,7 +125,7 @@ function resetForm() {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 450px;
 }
 .title {
   margin-bottom: 20px;
diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue
index 51ed105901..e1d9d3f959 100644
--- a/examples/sites/demos/pc/app/form/form-validation.vue
+++ b/examples/sites/demos/pc/app/form/form-validation.vue
@@ -135,7 +135,7 @@ export default {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 450px;
 }
 .title {
   margin-bottom: 20px;
diff --git a/examples/sites/demos/pc/app/form/message-type-composition-api.vue b/examples/sites/demos/pc/app/form/message-type-composition-api.vue
index 61b3629847..3fcc289ac2 100644
--- a/examples/sites/demos/pc/app/form/message-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/message-type-composition-api.vue
@@ -66,7 +66,7 @@ function handleSubmit() {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 400px;
 }
 
 .demo-form :deep(.tiny-date-container) {
diff --git a/examples/sites/demos/pc/app/form/message-type.vue b/examples/sites/demos/pc/app/form/message-type.vue
index 21aac949c0..4b18d388a1 100644
--- a/examples/sites/demos/pc/app/form/message-type.vue
+++ b/examples/sites/demos/pc/app/form/message-type.vue
@@ -71,7 +71,7 @@ export default {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 400px;
 }
 
 .demo-form :deep(.tiny-date-container) {
diff --git a/examples/sites/demos/pc/app/form/webdoc/form.js b/examples/sites/demos/pc/app/form/webdoc/form.js
index 073d77f37d..1b81ef2a10 100644
--- a/examples/sites/demos/pc/app/form/webdoc/form.js
+++ b/examples/sites/demos/pc/app/form/webdoc/form.js
@@ -127,9 +127,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>validate-position</code> 可自定义错误提示出现的位置，在 <code>form</code> 组件上设置后，子组件 <code>form-item</code> 会继承父组件设置。单独在 <code>form-item</code> 组件上进行设置优先级高于在 <code>from</code> 上的设置。</p>',
+          '<p>通过 <code>validate-position</code> 可自定义错误提示出现的位置，在 <code>form</code> 组件上设置后，子组件 <code>form-item</code> 会继承父组件设置。单独在 <code>form-item</code> 组件上进行设置优先级高于在 <code>form</code> 上的设置。</p>',
         'en-US':
-          '<p>You can use <code>validate-position</code> to customize the position where the error message appears. After this parameter is set on the <code>form</code> component, the subcomponent <code>form-item</code> inherits the setting of the parent component. The setting on the <code>form-item</code> component takes precedence over the setting on the <code>From</code> component. </p>'
+          '<p>You can use <code>validate-position</code> to customize the position where the error message appears. After this parameter is set on the <code>form</code> component, the subcomponent <code>form-item</code> inherits the setting of the parent component. The setting on the <code>form-item</code> component takes precedence over the setting on the <code>Form</code> component. </p>'
       },
       codeFiles: ['validation-position.vue']
     },
diff --git a/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue b/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue
index fd6767549e..3548ef3800 100644
--- a/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="tiny-fullscreen-demo">
-    <label class="checkbox">
-      <input v-model="pageOnly" type="checkbox" name="button" />
-      pageOnly
-    </label>
-    <label class="checkbox">
-      <input v-model="teleport" type="checkbox" name="button" />
-      teleport
-    </label>
+    <div class="demo-fullscreen">
+      <label class="checkbox">
+        <input v-model="pageOnly" type="checkbox" name="button" />
+        pageOnly
+      </label>
+      <label class="checkbox">
+        <input v-model="teleport" type="checkbox" name="button" />
+        teleport
+      </label>
+    </div>
     <tiny-fullscreen
       :teleport="teleport"
       :page-only="pageOnly"
@@ -55,3 +57,9 @@ function toggle() {
   fullscreen.value = !fullscreen.value
 }
 </script>
+
+<style scoped>
+.demo-fullscreen {
+  margin-bottom: 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/fullscreen/before-change.vue b/examples/sites/demos/pc/app/fullscreen/before-change.vue
index 16a6a3dd20..0a0d928ee1 100644
--- a/examples/sites/demos/pc/app/fullscreen/before-change.vue
+++ b/examples/sites/demos/pc/app/fullscreen/before-change.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="tiny-fullscreen-demo">
-    <label class="checkbox">
-      <input v-model="pageOnly" type="checkbox" name="button" />
-      pageOnly
-    </label>
-    <label class="checkbox">
-      <input v-model="teleport" type="checkbox" name="button" />
-      teleport
-    </label>
+    <div class="demo-fullscreen">
+      <label class="checkbox">
+        <input v-model="pageOnly" type="checkbox" name="button" />
+        pageOnly
+      </label>
+      <label class="checkbox">
+        <input v-model="teleport" type="checkbox" name="button" />
+        teleport
+      </label>
+    </div>
     <tiny-fullscreen
       :teleport="teleport"
       :page-only="pageOnly"
@@ -66,3 +68,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-fullscreen {
+  margin-bottom: 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue b/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue
index dba49fcb0c..1ad97a7c74 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="tiny-fullscreen-demo">
-    <label class="checkbox"> <input v-model="pageOnly" type="checkbox" name="button" /> pageOnly </label>
-    <label class="checkbox"> <input v-model="teleport" type="checkbox" name="button" /> teleport </label>
+    <div class="demo-fullscreen">
+      <label class="checkbox"> <input v-model="pageOnly" type="checkbox" name="button" /> pageOnly </label>
+      <label class="checkbox"> <input v-model="teleport" type="checkbox" name="button" /> teleport </label>
+    </div>
     <div
       class="tiny-fullscreen-wrapper"
       style="
@@ -52,4 +54,7 @@ async function toggle() {
 img {
   width: 100%;
 }
+.demo-fullscreen {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/fullscreen/example-api.vue b/examples/sites/demos/pc/app/fullscreen/example-api.vue
index c25e87388f..5438c601ff 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-api.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="tiny-fullscreen-demo">
-    <label class="checkbox"> <input v-model="pageOnly" type="checkbox" name="button" /> pageOnly </label>
-    <label class="checkbox"> <input v-model="teleport" type="checkbox" name="button" /> teleport </label>
+    <div class="demo-fullscreen">
+      <label class="checkbox"> <input v-model="pageOnly" type="checkbox" name="button" /> pageOnly </label>
+      <label class="checkbox"> <input v-model="teleport" type="checkbox" name="button" /> teleport </label>
+    </div>
     <div
       class="tiny-fullscreen-wrapper"
       style="
@@ -58,4 +60,7 @@ export default {
 img {
   width: 100%;
 }
+.demo-fullscreen {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue b/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue
index 4cd0c8bb59..bb2e909293 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="tiny-fullscreen-demo">
-    <label class="checkbox">
-      <input v-model="pageOnly" type="checkbox" name="button" />
-      pageOnly
-    </label>
-    <label class="checkbox">
-      <input v-model="teleport" type="checkbox" name="button" />
-      teleport
-    </label>
+    <div class="demo-fullscreen">
+      <label class="checkbox">
+        <input v-model="pageOnly" type="checkbox" name="button" />
+        pageOnly
+      </label>
+      <label class="checkbox">
+        <input v-model="teleport" type="checkbox" name="button" />
+        teleport
+      </label>
+    </div>
     <tiny-fullscreen
       :teleport="teleport"
       :page-only="pageOnly"
@@ -56,4 +58,7 @@ function toggle() {
 img {
   width: 100%;
 }
+.demo-fullscreen {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/fullscreen/example-component.vue b/examples/sites/demos/pc/app/fullscreen/example-component.vue
index 0f222e8fac..315f898622 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-component.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-component.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="tiny-fullscreen-demo">
-    <label class="checkbox">
-      <input v-model="pageOnly" type="checkbox" name="button" />
-      pageOnly
-    </label>
-    <label class="checkbox">
-      <input v-model="teleport" type="checkbox" name="button" />
-      teleport
-    </label>
+    <div class="demo-fullscreen">
+      <label class="checkbox">
+        <input v-model="pageOnly" type="checkbox" name="button" />
+        pageOnly
+      </label>
+      <label class="checkbox">
+        <input v-model="teleport" type="checkbox" name="button" />
+        teleport
+      </label>
+    </div>
     <tiny-fullscreen
       :teleport="teleport"
       :page-only="pageOnly"
@@ -66,4 +68,7 @@ export default {
 img {
   width: 100%;
 }
+.demo-fullscreen {
+  margin-bottom: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/grid/custom/page-size.spec.js b/examples/sites/demos/pc/app/grid/custom/page-size.spec.js
index 33d5a0bf24..ec6bf31229 100644
--- a/examples/sites/demos/pc/app/grid/custom/page-size.spec.js
+++ b/examples/sites/demos/pc/app/grid/custom/page-size.spec.js
@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('分页条数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-custom#custom-page-size')
-  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(10)
-  await page.locator('.tiny-grid-custom__setting-btn').click()
+  const demo = page.locator('#custom-page-size')
+  await expect(demo.locator('.tiny-grid-body__row')).toHaveCount(10)
+  await demo.locator('.tiny-grid-custom__setting-btn').click()
   await page.getByText('其他设置', { exact: true }).click()
   await page.locator('label').filter({ hasText: '5' }).locator('path').nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(5)
+  await expect(demo.locator('.tiny-grid-body__row')).toHaveCount(5)
 })
diff --git a/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js b/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js
index 7191ffd0b0..5c52e5e9b5 100644
--- a/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js
+++ b/examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js
@@ -5,6 +5,6 @@ test('自动加载数据', async ({ page }) => {
   await page.goto('grid-data-source#data-source-auto-load')
   // 判断auto-load 为 false时不加载数据
   await page.getByRole('paragraph').nth(1).click()
-
-  await expect(page.getByText('暂无数据')).toHaveText('暂无数据')
+  const demo = page.locator('#data-source-auto-load')
+  await expect(demo.getByText('暂无数据')).toHaveText('暂无数据')
 })
diff --git a/examples/sites/demos/pc/app/grid/expand/has-row-expand.spec.js b/examples/sites/demos/pc/app/grid/expand/has-row-expand.spec.js
index 5dd230b5d3..8dc63ef24a 100644
--- a/examples/sites/demos/pc/app/grid/expand/has-row-expand.spec.js
+++ b/examples/sites/demos/pc/app/grid/expand/has-row-expand.spec.js
@@ -4,7 +4,8 @@ test('检查当前行是否展开', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-expand#expand-has-row-expand')
   await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').click()
-  await page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1).click()
-
-  await expect(page.locator('div:nth-child(2) > svg')).toBeVisible()
+  await expect(page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1)).toBeVisible()
+  await expect(page.locator('.tiny-grid-body__expanded-cell')).toHaveText(
+    '公司名称：GFD科技YX公司区域：华东区员工数：800公司简介：公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  )
 })
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue
index 79fe227e5c..6bc7d58356 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue
@@ -115,7 +115,7 @@ const nameFilter = ref({
     searchConfig: {
       component: Input,
       // 搜索框默认值
-      serachValue: 'WWW'
+      searchValue: 'WWW'
     }
   }
 })
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter.vue b/examples/sites/demos/pc/app/grid/filter/simple-filter.vue
index 42474a1d5f..65d7926455 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-filter.vue
@@ -121,7 +121,7 @@ export default {
           searchConfig: {
             component: Input,
             // 搜索框默认值
-            serachValue: 'WWW'
+            searchValue: 'WWW'
           }
         }
       }
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
index 684f4ac62c..4487877a57 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
@@ -1,66 +1,69 @@
 <template>
-  <tiny-grid
-    :data="tableData"
-    column-min-width="100"
-    auto-resize
-    :column-anchor="columnAnchor"
-    :optimization="{ scrollX: { gt: 20 } }"
-  >
-    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
-    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
-    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
-    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
-    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
-    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
-    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
-    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
-    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
-    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
-    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
-    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
-    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
-    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
-    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
-    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
-    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
-    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
-    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
-    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
-    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
-    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
-    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
-    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
-    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
-    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
-    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
-    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
-    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
-    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
-    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
-    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
-    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
-    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
-    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
-    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
-    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
-    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
-    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
-    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
-    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
-    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
-    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
-    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
-    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
-    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
-    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
-    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
-    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
-    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
-  </tiny-grid>
+  <div class="grid-box">
+    <tiny-grid
+      :data="tableData"
+      column-min-width="100"
+      auto-resize
+      :column-anchor="columnAnchor"
+      :optimization="{ scrollX: { gt: 20 } }"
+      height="auto"
+    >
+      <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+      <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+      <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+      <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+      <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+      <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+      <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+      <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+      <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+      <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+      <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+      <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+      <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+      <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+      <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+      <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+      <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+      <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+      <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+      <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+      <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+      <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+      <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+      <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+      <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+      <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+      <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+      <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+      <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+      <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+      <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+      <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+      <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+      <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+      <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+      <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+      <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+      <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+      <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+      <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+      <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+      <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+      <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+      <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+      <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
 <script setup>
@@ -122,3 +125,10 @@ const tableData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.grid-box {
+  height: 240px;
+  overflow: hidden;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor.spec.js b/examples/sites/demos/pc/app/grid/large-data/column-anchor.spec.js
new file mode 100644
index 0000000000..fc0d5ba208
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor.spec.js
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('表格列锚点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-large-data#large-data-column-anchor')
+  const demo = page.locator('#large-data-column-anchor')
+  // 配置了表格锚点和height='auto'，验证表格整体高度是否正常
+  await expect(demo.locator('.tiny-grid__wrapper.tiny-grid')).toHaveCSS('height', '240px')
+
+  const targetTh = demo.locator('.tiny-grid-header__row .tiny-grid-header__column').filter({ hasText: '公司简介' })
+  await expect(targetTh).not.toBeVisible()
+  const introduction = demo.locator('.tiny-grid__column-anchor-item').filter({ hasText: '简单介绍' })
+  await introduction.click()
+  await expect(targetTh).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
index 6061d7bda4..9e714bb3de 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
@@ -1,66 +1,69 @@
 <template>
-  <tiny-grid
-    :data="tableData"
-    column-min-width="100"
-    auto-resize
-    :column-anchor="columnAnchor"
-    :optimization="{ scrollX: { gt: 20 } }"
-  >
-    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
-    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
-    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
-    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
-    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
-    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
-    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
-    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
-    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
-    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
-    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
-    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
-    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
-    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
-    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
-    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
-    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
-    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
-    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
-    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
-    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
-    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
-    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
-    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
-    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
-    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
-    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
-    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
-    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
-    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
-    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
-    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
-    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
-    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
-    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
-    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
-    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
-    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
-    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
-    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
-    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
-    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
-    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
-    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
-    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
-    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
-    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
-    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
-    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
-    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
-  </tiny-grid>
+  <div class="grid-box">
+    <tiny-grid
+      :data="tableData"
+      column-min-width="100"
+      auto-resize
+      :column-anchor="columnAnchor"
+      :optimization="{ scrollX: { gt: 20 } }"
+      height="auto"
+    >
+      <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+      <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+      <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+      <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+      <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+      <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+      <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+      <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+      <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+      <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+      <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+      <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+      <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+      <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+      <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+      <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+      <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+      <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+      <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+      <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+      <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+      <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+      <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+      <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+      <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+      <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+      <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+      <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+      <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+      <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+      <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+      <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+      <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+      <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+      <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+      <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+      <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+      <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+      <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+      <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+      <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+      <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+      <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+      <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+      <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
 <script>
@@ -130,3 +133,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.grid-box {
+  height: 240px;
+  overflow: hidden;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.spec.js b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.spec.js
index 4cea854d03..be91c4a161 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.spec.js
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.spec.js
@@ -4,6 +4,7 @@ test('键盘按键配置项测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-mouse-keyboard#mouse-keyboard-keyboard-config')
   await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
-  await page.locator('body').press('ArrowDown')
+  await page.waitForTimeout(500)
+  await page.keyboard.press('ArrowDown')
   await expect(page.getByRole('cell', { name: 'WWWW科技YX公司' })).toHaveClass(/col__selected/)
 })
diff --git a/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
index f51877555b..3e458a4006 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-grid ref="mytableRef" :radio-config="radioConfigData" :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="100"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue b/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
index 26a7e630bf..fb13e12222 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-grid ref="mytable" :radio-config="radioConfigData" :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="100"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.spec.js b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.spec.js
index a51a8f62f2..60ca335996 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.spec.js
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.spec.js
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('日期渲染器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-renderer#renderer-inner-renderer-date')
-  await expect(page.getByText('-07-02')).toBeVisible()
+  await expect(page.getByText('-07-02').first()).toBeVisible()
   await expect(page.getByText('-02-15').first()).toBeVisible()
   await expect(page.getByText('-02-15').nth(1)).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
index 08a8cf0562..0ba0be1b0b 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
@@ -134,5 +134,6 @@ const renderOp = ref({
   text-align: center;
   background-color: #f5222d;
   border-radius: 50%;
+  margin-left: 4px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
index 4c66c140c4..65eec1c5af 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
@@ -144,5 +144,6 @@ export default {
   text-align: center;
   background-color: #f5222d;
   border-radius: 50%;
+  margin-left: 4px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/tip/column-header-tip.spec.js b/examples/sites/demos/pc/app/grid/tip/column-header-tip.spec.js
index ac9448a512..c12d4440b4 100644
--- a/examples/sites/demos/pc/app/grid/tip/column-header-tip.spec.js
+++ b/examples/sites/demos/pc/app/grid/tip/column-header-tip.spec.js
@@ -3,9 +3,6 @@ import { test, expect } from '@playwright/test'
 test('列头提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-tip#tip-column-header-tip')
-  await page
-    .getByRole('cell', { name: '创建日期过长隐藏时显示为省略号并用 tooltip 显示' })
-    .getByText('创建日期过长隐藏时显示为省略号并用 tooltip 显示')
-    .hover()
+  await page.getByRole('cell', { name: '创建日期过长隐藏时显示为省略号并用 tooltip 显示' }).hover()
   await expect(page.getByRole('tooltip', { name: '创建日期过长隐藏时显示为省略号并用 tooltip 显示' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js b/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
index 62c448fd0a..02b9a9bd9e 100644
--- a/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
+++ b/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
@@ -18,9 +18,9 @@ test('校验提示跟随单元格移动', async ({ page }) => {
     .getByRole('textbox')
     .fill('x')
   const { y: top } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox()
-
   const scrollDom = page.getByRole('cell', { name: 'YHN科技有限公司' })
   await scrollDom.scrollIntoViewIfNeeded()
+  await page.waitForTimeout(200)
   const { y: topLater } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox()
   await expect(top).toBeGreaterThan(topLater)
 })
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-pager.js b/examples/sites/demos/pc/app/grid/webdoc/grid-pager.js
index e431f28e3b..3e01f663e1 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-pager.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-pager.js
@@ -45,7 +45,7 @@ export default {
       'name': { 'zh-CN': '自定义分页', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>表格内置分页组件需要和 <code>fetch-data</code> 属性配合使用，若使用 <code>data</code> 设置表格数据源，则需要使用自动义分页。</p>\n',
+          '<p>表格内置分页组件需要和 <code>fetch-data</code> 属性配合使用，若使用 <code>data</code> 设置表格数据源，则需要使用自定义分页。</p>\n',
         'en-US': ''
       },
       'codeFiles': ['pager/pager-in-grid.vue']
diff --git a/examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue
index 5120df741e..1f4d613db6 100644
--- a/examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue
@@ -20,9 +20,8 @@ const TinyIconClockWork = iconClockWork()
 
 <style scoped>
 .icon-demo .tiny-svg {
-  fill: #8994aa;
-  margin: 20px 50px;
+  margin: 20px 83px;
   vertical-align: middle;
-  font-size: 48px;
+  font-size: 24px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/icon/basic-usage.vue b/examples/sites/demos/pc/app/icon/basic-usage.vue
index 479b329e27..64eb957b60 100644
--- a/examples/sites/demos/pc/app/icon/basic-usage.vue
+++ b/examples/sites/demos/pc/app/icon/basic-usage.vue
@@ -24,9 +24,8 @@ export default {
 
 <style scoped>
 .icon-demo .tiny-svg {
-  fill: #8994aa;
-  margin: 20px 50px;
+  margin: 20px 83px;
   vertical-align: middle;
-  font-size: 48px;
+  font-size: 24px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/icon/show-title-composition-api.vue b/examples/sites/demos/pc/app/icon/show-title-composition-api.vue
index 2fb98ae0a3..d598871bfd 100644
--- a/examples/sites/demos/pc/app/icon/show-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/icon/show-title-composition-api.vue
@@ -12,8 +12,7 @@ const TinyIconCopy = iconCopy()
 
 <style scoped>
 .icon-demo .tiny-svg {
-  fill: #8994aa;
-  margin: 20px 50px;
+  margin: 20px 83px;
   font-size: 24px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/icon/show-title.vue b/examples/sites/demos/pc/app/icon/show-title.vue
index 11e13e22fa..881008f659 100644
--- a/examples/sites/demos/pc/app/icon/show-title.vue
+++ b/examples/sites/demos/pc/app/icon/show-title.vue
@@ -16,8 +16,7 @@ export default {
 
 <style scoped>
 .icon-demo .tiny-svg {
-  fill: #8994aa;
-  margin: 20px 50px;
+  margin: 20px 83px;
   font-size: 24px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue b/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue
index f2daede6b8..180dad5ec9 100644
--- a/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue
@@ -31,4 +31,9 @@ const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountai
 .placeholder-default {
   margin-right: 30px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/image/custom-placeholder.vue b/examples/sites/demos/pc/app/image/custom-placeholder.vue
index 45d35d94b9..ccf78a7979 100644
--- a/examples/sites/demos/pc/app/image/custom-placeholder.vue
+++ b/examples/sites/demos/pc/app/image/custom-placeholder.vue
@@ -39,4 +39,9 @@ export default {
 .placeholder-default {
   margin-right: 30px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/image/slot-composition-api.vue b/examples/sites/demos/pc/app/image/slot-composition-api.vue
index 7458048d03..d51df4d34a 100644
--- a/examples/sites/demos/pc/app/image/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/slot-composition-api.vue
@@ -53,4 +53,9 @@ const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountai
 .err-pic span {
   color: red;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/image/slot.vue b/examples/sites/demos/pc/app/image/slot.vue
index 60c8c530b0..92854da1ba 100644
--- a/examples/sites/demos/pc/app/image/slot.vue
+++ b/examples/sites/demos/pc/app/image/slot.vue
@@ -62,4 +62,9 @@ export default {
 .err-pic span {
   color: red;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/display-only-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
index 8966336b14..ab7f0bb255 100644
--- a/examples/sites/demos/pc/app/input/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="display-only">
+    <p class="demp-input">输入框</p>
     <p>
       <label>display-only & display-only-content：</label>
       <tiny-input v-model="input" display-only display-only-content="display-only-content 的内容"></tiny-input>
@@ -8,6 +9,17 @@
       <label>display-only：</label>
       <tiny-input v-model="input1" display-only></tiny-input>
     </p>
+    <br />
+
+    <p class="demp-input">文本域</p>
+    <p class="demp-input">
+      <label>display-only：</label>
+      <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
+    </p>
+    <p>
+      <label>display-only&autosize：</label>
+      <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
+    </p>
   </div>
 </template>
 
@@ -24,4 +36,10 @@ const input1 = ref('value 的内容')
   display: inline-block;
   width: auto;
 }
+.demp-input {
+  margin-bottom: 8px;
+}
+.demp-input-dis {
+  margin-top: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index 677b99768d..f70e093e57 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="display-only">
-    <p>输入框</p>
+    <p class="demp-input">输入框</p>
     <p>
       <label>display-only & display-only-content：</label>
       <tiny-input v-model="input" display-only display-only-content="display-only-content 的内容"></tiny-input>
@@ -9,15 +9,16 @@
       <label>display-only：</label>
       <tiny-input v-model="input1" display-only></tiny-input>
     </p>
+    <br />
 
-    <p>文本域</p>
-    <p>
+    <p class="demp-input">文本域</p>
+    <p class="demp-input">
       <label>display-only：</label>
-      <tiny-input v-model="input1" type="textarea" display-only></tiny-input>
+      <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
       <label>display-only&autosize：</label>
-      <tiny-input v-model="input1" type="textarea" display-only autosize></tiny-input>
+      <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
 </template>
@@ -43,4 +44,10 @@ export default {
   display: inline-block;
   width: auto;
 }
+.demp-input {
+  margin-bottom: 8px;
+}
+.demp-input-dis {
+  margin-top: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/input/native-composition-api.vue b/examples/sites/demos/pc/app/input/native-composition-api.vue
index ac1dbf3cd8..c51e2d70b6 100644
--- a/examples/sites/demos/pc/app/input/native-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/native-composition-api.vue
@@ -1,25 +1,31 @@
 <template>
   <div class="demo-input">
     <p><span>disabled</span><tiny-input v-model="input" disabled></tiny-input></p>
+    <br />
     <p><span>readonly</span><tiny-input v-model="input" readonly></tiny-input></p>
+    <br />
     <p>
       <span>step=2</span>
       <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
     </p>
+    <br />
     <p>
       <span>min=2;max=11</span>
       <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
     </p>
+    <br />
     <p>
       <span>maxlength=5</span>
       <tiny-input v-model="input" :maxlength="5"></tiny-input>
     </p>
-    <p>
+    <br />
+    <div>
       <span>autocomplete="on"</span>
+      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
-    </p>
+    </div>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/input/native.vue b/examples/sites/demos/pc/app/input/native.vue
index 16b15daa5f..d3d4da85fa 100644
--- a/examples/sites/demos/pc/app/input/native.vue
+++ b/examples/sites/demos/pc/app/input/native.vue
@@ -1,25 +1,31 @@
 <template>
   <div class="demo-input">
     <p><span>disabled</span><tiny-input v-model="input" disabled></tiny-input></p>
+    <br />
     <p><span>readonly</span><tiny-input v-model="input" readonly></tiny-input></p>
+    <br />
     <p>
       <span>step=2</span>
       <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
     </p>
+    <br />
     <p>
       <span>min=2;max=11</span>
       <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
     </p>
+    <br />
     <p>
       <span>maxlength=5</span>
       <tiny-input v-model="input" :maxlength="5"></tiny-input>
     </p>
-    <p>
+    <br />
+    <div>
       <span>autocomplete="on"</span>
+      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
-    </p>
+    </div>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue b/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue
index 8f6235eef3..01c35f00ab 100644
--- a/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="demo-input">
     <tiny-input v-model="text" :maxlength="10" show-word-limit></tiny-input>
+    <br />
     <tiny-input type="textarea" v-model="textarea" :maxlength="20" show-word-limit></tiny-input>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/input/show-word-limit.vue b/examples/sites/demos/pc/app/input/show-word-limit.vue
index 7be1968c20..7f068bdb04 100644
--- a/examples/sites/demos/pc/app/input/show-word-limit.vue
+++ b/examples/sites/demos/pc/app/input/show-word-limit.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="demo-input">
     <tiny-input v-model="text" :maxlength="10" show-word-limit></tiny-input>
+    <br />
     <tiny-input type="textarea" v-model="textarea" :maxlength="20" show-word-limit></tiny-input>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
index ccf242540c..b7ba3b4826 100644
--- a/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div v-for="cols in [12, 24]" :key="cols">
-      <div>每行 {{ cols }} 栅格布局示例：</div>
+      <div class="demo-layout">每行 {{ cols }} 栅格布局示例：</div>
       <tiny-layout :cols="cols">
         <tiny-row>
           <tiny-col :span="12">
@@ -65,4 +65,7 @@ import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
+.demo-layout {
+  font-size: 14px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/layout/basic-usage.vue b/examples/sites/demos/pc/app/layout/basic-usage.vue
index 815ce3a116..1e3c1b3210 100644
--- a/examples/sites/demos/pc/app/layout/basic-usage.vue
+++ b/examples/sites/demos/pc/app/layout/basic-usage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div v-for="cols in [12, 24]" :key="cols">
-      <div>每行 {{ cols }} 栅格布局示例：</div>
+      <div class="demo-layout">每行 {{ cols }} 栅格布局示例：</div>
       <tiny-layout :cols="cols">
         <tiny-row>
           <tiny-col :span="12">
@@ -73,4 +73,7 @@ export default {
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
+.demo-layout {
+  font-size: 14px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/loading/size-composition-api.vue b/examples/sites/demos/pc/app/loading/size-composition-api.vue
index 6ca628a918..3129f2285f 100644
--- a/examples/sites/demos/pc/app/loading/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/size-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tiny-deom-size-loading">
     <div id="tiny-size-loading1"></div>
-    <div id="tiny-size-loading2"></div>
+    <div id="tiny-size-loading2" class="demo-loading"></div>
     <div id="tiny-size-loading3"></div>
   </div>
 </template>
@@ -27,8 +27,8 @@ onMounted(() => {
   })
 })
 </script>
-<style>
 
+<style>
 .tiny-deom-size-loading {
   display: flex;
 }
@@ -37,4 +37,7 @@ onMounted(() => {
   width: 100px;
   height: 100px;
 }
-</style>
\ No newline at end of file
+.demo-loading {
+  margin: 0 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
index 51aecdecb1..365b492662 100644
--- a/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="status">是否登录：{{ isLogin }}</p>
+    <p class="demo-logout">是否登录：{{ isLogin }}</p>
     <tiny-logout v-bind="service" :is-local="false" :is-mock="false" :before-logout="beforeLogout"></tiny-logout>
   </div>
 </template>
@@ -50,3 +50,10 @@ function showLogin() {
   })
 }
 </script>
+
+<style scoped>
+.demo-logout {
+  line-height: 1.5px;
+  padding-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/logout/basic-usage.vue b/examples/sites/demos/pc/app/logout/basic-usage.vue
index 8c9619e9a6..7a466cd354 100644
--- a/examples/sites/demos/pc/app/logout/basic-usage.vue
+++ b/examples/sites/demos/pc/app/logout/basic-usage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="status">是否登录：{{ isLogin }}</p>
+    <p class="demo-logout">是否登录：{{ isLogin }}</p>
     <tiny-logout v-bind="service" :is-local="false" :is-mock="false" :before-logout="beforeLogout"></tiny-logout>
   </div>
 </template>
@@ -54,3 +54,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-logout {
+  line-height: 1.5px;
+  padding-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
index e61f685d13..164ac31323 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -75,3 +77,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.vue b/examples/sites/demos/pc/app/milestone/basic-usage.vue
index 63e48174b4..981bb49c88 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage.vue
+++ b/examples/sites/demos/pc/app/milestone/basic-usage.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -83,3 +85,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
index 868e050038..e6b71e2e9f 100644
--- a/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #top="data">
-      <span class="f18 ml50">{{ data.slotScope.status }}</span>
-    </template>
-    <template #bottom="data">
-      <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #top="data">
+        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+      </template>
+      <template #bottom="data">
+        <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -48,3 +50,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue b/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
index 60282a9931..4bfb318353 100644
--- a/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #top="data">
-      <span class="f18 ml50">{{ data.slotScope.status }}</span>
-    </template>
-    <template #bottom="data">
-      <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #top="data">
+        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+      </template>
+      <template #bottom="data">
+        <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -56,3 +58,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
index 760f29d680..00379676ef 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #flag="data">
-      <span style="font-size: 12px">{{ data.slotScope.content }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #flag="data">
+        <span style="font-size: 12px">{{ data.slotScope.content }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -75,3 +77,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag.vue b/examples/sites/demos/pc/app/milestone/custom-flag.vue
index da60f4b461..b59648f791 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #flag="data">
-      <span style="font-size: 12px">{{ data.slotScope.content }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #flag="data">
+        <span style="font-size: 12px">{{ data.slotScope.content }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -83,3 +85,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
index b4f8e75b72..5736a3f15f 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #icon="data">
-      <component :is="data.slotScope.icon" class="custom"> </component>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #icon="data">
+        <component :is="data.slotScope.icon" class="custom"> </component>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -77,3 +79,9 @@ const milestoneData = ref([
   z-index: 15;
 }
 </style>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
index fbd379b47f..c4d3e10a4e 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #icon="data">
-      <component :is="data.slotScope.icon" class="custom"> </component>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #icon="data">
+        <component :is="data.slotScope.icon" class="custom"> </component>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -90,3 +92,9 @@ export default {
   z-index: 15;
 }
 </style>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
index 3788b89b57..c9dbe7ad87 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
@@ -1,16 +1,18 @@
 <template>
-  <tiny-milestone
-    :data="milestoneData"
-    :milestones-status="statusMap"
-    time-field="date"
-    name-field="name"
-    status-field="progress"
-    flag-status-field="progress"
-    flag-name-field="title"
-    completed-field="completed"
-    flag-content-field="describe"
-    flag-field="flags"
-  ></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone
+      :data="milestoneData"
+      :milestones-status="statusMap"
+      time-field="date"
+      name-field="name"
+      status-field="progress"
+      flag-status-field="progress"
+      flag-name-field="title"
+      completed-field="completed"
+      flag-content-field="describe"
+      flag-field="flags"
+    ></tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -87,3 +89,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
index 10a9f978ae..bca4471fdb 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
@@ -1,16 +1,18 @@
 <template>
-  <tiny-milestone
-    :data="milestoneData"
-    :milestones-status="statusMap"
-    time-field="date"
-    name-field="name"
-    status-field="progress"
-    flag-status-field="progress"
-    flag-name-field="title"
-    completed-field="completed"
-    flag-content-field="describe"
-    flag-field="flags"
-  ></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone
+      :data="milestoneData"
+      :milestones-status="statusMap"
+      time-field="date"
+      name-field="name"
+      status-field="progress"
+      flag-status-field="progress"
+      flag-name-field="title"
+      completed-field="completed"
+      flag-content-field="describe"
+      flag-field="flags"
+    ></tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -95,3 +97,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
index 4b2518662e..00e7b4688d 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-milestone">
     <tiny-button @click="handleClick(!isBefore)" style="max-width: unset"
       >设置flag-before值为{{ !isBefore }}</tiny-button
     >
@@ -78,3 +78,9 @@ function handleClick(value) {
   isBefore.value = value
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.vue b/examples/sites/demos/pc/app/milestone/flag-before.vue
index ff8522605a..31228660ee 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-milestone">
     <tiny-button @click="handleClick(!isBefore)" style="max-width: unset"
       >设置flag-before值为{{ !isBefore }}</tiny-button
     >
@@ -88,3 +88,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue b/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue
index 5a29404549..381dc7ba90 100644
--- a/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap" line-style="#f00" :space="88"></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone
+      :data="milestoneData"
+      :milestones-status="statusMap"
+      line-style="#f00"
+      :space="150"
+    ></tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -46,3 +53,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/line-style.spec.ts b/examples/sites/demos/pc/app/milestone/line-style.spec.ts
index d0ec9f053e..93236fcf78 100644
--- a/examples/sites/demos/pc/app/milestone/line-style.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/line-style.spec.ts
@@ -19,7 +19,7 @@ test('线条颜色和间距', async ({ page }) => {
   await expect(nodeLines).toHaveCount(nodeCount)
   await expect(nodes).toHaveCount(nodeCount)
   for (let i = 0; i < nodeCount; i++) {
-    await expect(nodes.nth(i)).toHaveCSS('width', '88px')
+    await expect(nodes.nth(i)).toHaveCSS('width', '150px')
     await expect(nodeLines.nth(i)).toHaveCSS('background-color', lineColors[i])
   }
 })
diff --git a/examples/sites/demos/pc/app/milestone/line-style.vue b/examples/sites/demos/pc/app/milestone/line-style.vue
index 17cd5f4ca6..a888085cd5 100644
--- a/examples/sites/demos/pc/app/milestone/line-style.vue
+++ b/examples/sites/demos/pc/app/milestone/line-style.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap" line-style="#f00" :space="88"></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone
+      :data="milestoneData"
+      :milestones-status="statusMap"
+      line-style="#f00"
+      :space="150"
+    ></tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -54,3 +61,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
index dd8a66c253..dc9911c38f 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-milestone
-    :data="milestoneData"
-    :milestones-status="statusMap"
-    @click="nodeClick"
-    @flag-click="flagClick"
-  ></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone
+      :data="milestoneData"
+      :milestones-status="statusMap"
+      @click="nodeClick"
+      @flag-click="flagClick"
+    ></tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -92,3 +94,9 @@ function flagClick() {
   })
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events.vue b/examples/sites/demos/pc/app/milestone/milestone-events.vue
index 644b84963b..5d91509b3d 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-milestone
-    :data="milestoneData"
-    :milestones-status="statusMap"
-    @click="nodeClick"
-    @flag-click="flagClick"
-  ></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone
+      :data="milestoneData"
+      :milestones-status="statusMap"
+      @click="nodeClick"
+      @flag-click="flagClick"
+    ></tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -100,3 +102,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue b/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
index 93cec90cdd..66e14a5a38 100644
--- a/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-milestone">
     <tiny-button @click="handleClick(!showNum)" style="max-width: unset"
       >设置 show-number 值为 {{ !showNum }}</tiny-button
     >
@@ -61,3 +61,9 @@ function handleClick(value) {
   showNum.value = value
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/show-number.vue b/examples/sites/demos/pc/app/milestone/show-number.vue
index c587432dac..9ff0e8af1c 100644
--- a/examples/sites/demos/pc/app/milestone/show-number.vue
+++ b/examples/sites/demos/pc/app/milestone/show-number.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-milestone">
     <tiny-button @click="handleClick(!showNum)" style="max-width: unset"
       >设置 show-number 值为 {{ !showNum }}</tiny-button
     >
@@ -71,3 +71,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue b/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
index 92ab0c2360..5083ff2ab9 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-milestone">
     <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为 {{ !isSolid }}</tiny-button>
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :solid="isSolid"></tiny-milestone>
   </div>
@@ -54,3 +54,9 @@ function handleClick(value) {
   isSolid.value = value
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.vue b/examples/sites/demos/pc/app/milestone/solid-style.vue
index 6a539ff360..70fabb9a78 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style.vue
+++ b/examples/sites/demos/pc/app/milestone/solid-style.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-milestone">
     <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为 {{ !isSolid }}</tiny-button>
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :solid="isSolid"></tiny-milestone>
   </div>
@@ -64,3 +64,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue b/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue
index 7547486801..429fe147b5 100644
--- a/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue
@@ -1,7 +1,8 @@
 <template>
-  <div style="display: flex">
-    <tiny-numeric :change-compat="false" v-model="value" @change="onChange"></tiny-numeric>
+  <div>
     <tiny-button @click="clickChange">修改</tiny-button>
+    <br /><br />
+    <tiny-numeric :change-compat="false" v-model="value" @change="onChange"></tiny-numeric>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/numeric/change-event.vue b/examples/sites/demos/pc/app/numeric/change-event.vue
index 764840929e..8216a1207a 100644
--- a/examples/sites/demos/pc/app/numeric/change-event.vue
+++ b/examples/sites/demos/pc/app/numeric/change-event.vue
@@ -1,7 +1,8 @@
 <template>
-  <div style="display: flex">
-    <tiny-numeric :change-compat="false" v-model="value" @change="onChange"></tiny-numeric>
+  <div>
     <tiny-button @click="clickChange">修改</tiny-button>
+    <br /><br />
+    <tiny-numeric :change-compat="false" v-model="value" @change="onChange"></tiny-numeric>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/numeric/controls-composition-api.vue b/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
index bfc7e5bea3..24d9d7d08d 100644
--- a/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
@@ -20,4 +20,9 @@ const value2 = ref(2)
 .numeric-class {
   margin: 4px 0px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/numeric/controls.vue b/examples/sites/demos/pc/app/numeric/controls.vue
index 17adb0e317..5aca8c9cb7 100644
--- a/examples/sites/demos/pc/app/numeric/controls.vue
+++ b/examples/sites/demos/pc/app/numeric/controls.vue
@@ -28,4 +28,9 @@ export default {
 .numeric-class {
   margin: 4px 0px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue b/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
index e3797ac19f..51253d6ff5 100644
--- a/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
@@ -5,6 +5,8 @@
     <tiny-numeric v-model="value" size="small"></tiny-numeric>
     <br /><br />
     <tiny-numeric v-model="value" size="mini"></tiny-numeric>
+    <br /><br />
+    <tiny-numeric v-model="value"></tiny-numeric>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/numeric/numeric-size.vue b/examples/sites/demos/pc/app/numeric/numeric-size.vue
index 8729358eb8..d37db0be8b 100644
--- a/examples/sites/demos/pc/app/numeric/numeric-size.vue
+++ b/examples/sites/demos/pc/app/numeric/numeric-size.vue
@@ -5,6 +5,8 @@
     <tiny-numeric v-model="value" size="small"></tiny-numeric>
     <br /><br />
     <tiny-numeric v-model="value" size="mini"></tiny-numeric>
+    <br /><br />
+    <tiny-numeric v-model="value"></tiny-numeric>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/numeric/precision-composition-api.vue b/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
index bcc67547ec..6b62e1c9cc 100644
--- a/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
@@ -31,4 +31,9 @@ const format = reactive({
 .numeric-class {
   margin: 4px 0px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/numeric/precision.vue b/examples/sites/demos/pc/app/numeric/precision.vue
index 87ca4ec95c..cdfff41f76 100644
--- a/examples/sites/demos/pc/app/numeric/precision.vue
+++ b/examples/sites/demos/pc/app/numeric/precision.vue
@@ -41,4 +41,9 @@ export default {
 .numeric-class {
   margin: 4px 0px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
index e57bf5a8db..3ea5663c0d 100644
--- a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
+++ b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
@@ -101,9 +101,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。',
+          '可通过 <code>size</code> 属性设置计数器尺寸，可选值有 <code>medium</code><code>small</code><code>mini</code>。',
         'en-US':
-          'You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. '
+          'You can set the counter size through the<code>size</code>attribute,the value can be <code>medium</code><code>small</code><code>mini</code>. '
       },
       codeFiles: ['numeric-size.vue']
     },
diff --git a/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue b/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
index fb9768155e..34a5f98996 100644
--- a/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
-    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
+    <p class="demo-pop">组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
+    <br /><br />
+    <p class="demo-pop">如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"
@@ -106,3 +107,10 @@ const gridOp = ref({
   data: dataset
 })
 </script>
+
+<style scoped>
+.demo-pop {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/popeditor/draggable.vue b/examples/sites/demos/pc/app/popeditor/draggable.vue
index 53dc2353a8..6bfed8da2a 100644
--- a/examples/sites/demos/pc/app/popeditor/draggable.vue
+++ b/examples/sites/demos/pc/app/popeditor/draggable.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
-    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
+    <p class="demo-pop">组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
+    <br /><br />
+    <p class="demo-pop">如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"
@@ -114,3 +115,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-pop {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue b/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
index 15b53c821f..d6e816d0e4 100644
--- a/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
@@ -10,6 +10,7 @@
       suggest
       :conditions="conditions"
     ></tiny-popeditor>
+    <br />
     <p>value值：{{ value }}</p>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/popeditor/suggest.vue b/examples/sites/demos/pc/app/popeditor/suggest.vue
index 98b83de873..7e96ced4a3 100644
--- a/examples/sites/demos/pc/app/popeditor/suggest.vue
+++ b/examples/sites/demos/pc/app/popeditor/suggest.vue
@@ -10,6 +10,7 @@
       suggest
       :conditions="conditions"
     ></tiny-popeditor>
+    <br />
     <p>value值：{{ value }}</p>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue b/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
index 29f9d8b4a5..673dcbd87d 100644
--- a/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
@@ -177,8 +177,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -210,8 +211,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -269,8 +271,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -320,8 +323,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
diff --git a/examples/sites/demos/pc/app/progress/custom-status.vue b/examples/sites/demos/pc/app/progress/custom-status.vue
index 3bac043e14..667160a874 100644
--- a/examples/sites/demos/pc/app/progress/custom-status.vue
+++ b/examples/sites/demos/pc/app/progress/custom-status.vue
@@ -180,8 +180,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -213,8 +214,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -272,8 +274,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -323,8 +326,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
diff --git a/examples/sites/demos/pc/app/radio/display-only-composition-api.vue b/examples/sites/demos/pc/app/radio/display-only-composition-api.vue
index fc27975dc3..fd1e85bfef 100644
--- a/examples/sites/demos/pc/app/radio/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/display-only-composition-api.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <span>单选组实现只读：</span>
+    <span class="demo-radio">单选组实现只读：</span>
     <tiny-radio-group display-only v-model="value1" :options="options"></tiny-radio-group>
     <br />
     <br />
-    <span>每个单选项实现只读：</span>
+    <span class="demo-radio">每个单选项实现只读：</span>
     <tiny-radio display-only v-model="value" label="1">选项一</tiny-radio>
     <tiny-radio display-only v-model="value" label="2" text="选项二"></tiny-radio>
   </div>
@@ -21,3 +21,9 @@ const options = ref([
   { label: 'B', text: '一般' }
 ])
 </script>
+
+<style scoped>
+.demo-radio {
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/radio/display-only.vue b/examples/sites/demos/pc/app/radio/display-only.vue
index 6188ceb055..546839cbde 100644
--- a/examples/sites/demos/pc/app/radio/display-only.vue
+++ b/examples/sites/demos/pc/app/radio/display-only.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <span>单选组实现只读：</span>
+    <span class="demo-radio">单选组实现只读：</span>
     <tiny-radio-group display-only v-model="value1" :options="options"></tiny-radio-group>
     <br />
     <br />
-    <span>每个单选项实现只读：</span>
+    <span class="demo-radio">每个单选项实现只读：</span>
     <tiny-radio display-only v-model="value" label="1">选项一</tiny-radio>
     <tiny-radio display-only v-model="value" label="2" text="选项二"></tiny-radio>
   </div>
@@ -30,3 +30,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-radio {
+  font-size: 14px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue
index 60c18789fa..072dd426b0 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue
@@ -19,7 +19,7 @@ const value = ref('你好 Opentiny!')
 .result {
   margin-top: 16px;
   font-size: 14px;
-  line-height: 1.3;
+  line-height: 1.5;
   word-break: break-all;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue
index 9f5972eba0..917c5db725 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue
@@ -2,6 +2,8 @@
   <div>
     <tiny-rich-text-editor v-model="value"></tiny-rich-text-editor>
     <div class="result">
+      <hr />
+      <textarea v-model="value" style="width: 100%" rows="5" />
       <hr />
       <pre>{{ value }}</pre>
     </div>
diff --git a/examples/sites/demos/pc/app/search/events-composition-api.vue b/examples/sites/demos/pc/app/search/events-composition-api.vue
index 16ffdf851a..463de51eb4 100644
--- a/examples/sites/demos/pc/app/search/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/events-composition-api.vue
@@ -1,12 +1,19 @@
 <template>
   <div>
     <p>搜索事件</p>
+    <br />
     <tiny-search @search="search" is-enter-search></tiny-search>
+    <br /><br />
     <p>值变化事件</p>
+    <br />
     <tiny-search @change="change" @input="input"></tiny-search>
+    <br /><br />
     <p>值清空事件</p>
+    <br />
     <tiny-search @clear="clear" clearable></tiny-search>
+    <br /><br />
     <p>类型选中事件</p>
+    <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/search/events.vue b/examples/sites/demos/pc/app/search/events.vue
index 6484a0a600..bcca4240ec 100644
--- a/examples/sites/demos/pc/app/search/events.vue
+++ b/examples/sites/demos/pc/app/search/events.vue
@@ -1,12 +1,19 @@
 <template>
   <div>
     <p>搜索事件</p>
+    <br />
     <tiny-search @search="search" is-enter-search></tiny-search>
+    <br /><br />
     <p>值变化事件</p>
+    <br />
     <tiny-search @change="change" @input="input"></tiny-search>
+    <br /><br />
     <p>值清空事件</p>
+    <br />
     <tiny-search @clear="clear" clearable></tiny-search>
+    <br /><br />
     <p>类型选中事件</p>
+    <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue b/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue
index cecc45d561..51d1396c4c 100644
--- a/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue
@@ -1,20 +1,28 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键字搜索" clearable>
+    <tiny-button class="mb10" @click="changeDisabled"
+      >点击切换为“{{ disabled ? '非禁用状态' : '禁用状态' }}”</tiny-button
+    >
+    <tiny-search class="mb10" v-model="value" placeholder="请输入关键字搜索" :disabled="disabled" clearable>
       <template #prefix>
         <tiny-icon-search />
       </template>
     </tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :disabled="disabled"></tiny-search>
     <div class="mt10">{{ value }}</div>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { Search as TinySearch, Button as TinyButton } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 const value = ref('')
+const disabled = ref(false)
 
 const TinyIconSearch = iconSearch()
+const changeDisabled = () => {
+  disabled.value = !disabled.value
+}
 </script>
diff --git a/examples/sites/demos/pc/app/search/slot-prefix.spec.ts b/examples/sites/demos/pc/app/search/slot-prefix.spec.ts
index a11236ce36..24dbcd4b59 100644
--- a/examples/sites/demos/pc/app/search/slot-prefix.spec.ts
+++ b/examples/sites/demos/pc/app/search/slot-prefix.spec.ts
@@ -4,7 +4,7 @@ test('左侧插槽是否正常显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#slot-prefix')
 
-  const search = page.locator('.tiny-search')
+  const search = page.locator('.tiny-search').first()
   const prefix = search.locator('.tiny-search__prefix > svg')
 
   await expect(prefix).toBeVisible()
diff --git a/examples/sites/demos/pc/app/search/slot-prefix.vue b/examples/sites/demos/pc/app/search/slot-prefix.vue
index 7ab8a9914c..361e160a59 100644
--- a/examples/sites/demos/pc/app/search/slot-prefix.vue
+++ b/examples/sites/demos/pc/app/search/slot-prefix.vue
@@ -1,26 +1,37 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键字搜索" clearable>
+    <tiny-button class="mb10" @click="changeDisabled"
+      >点击切换为“{{ disabled ? '非禁用状态' : '禁用状态' }}”</tiny-button
+    >
+    <tiny-search class="mb10" v-model="value" placeholder="请输入关键字搜索" :disabled="disabled" clearable>
       <template #prefix>
-        <icon-search />
+        <tiny-icon-search />
       </template>
     </tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :disabled="disabled"></tiny-search>
     <div class="mt10">{{ value }}</div>
   </div>
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { Search, Button } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinySearch: Search,
-    IconSearch: iconSearch()
+    TinyButton: Button,
+    TinyIconSearch: iconSearch()
   },
   data() {
     return {
-      value: ''
+      value: '',
+      disabled: false
+    }
+  },
+  methods: {
+    changeDisabled() {
+      this.disabled = !this.disabled
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/search/webdoc/search.js b/examples/sites/demos/pc/app/search/webdoc/search.js
index b1d6b66d2d..98297a9bee 100644
--- a/examples/sites/demos/pc/app/search/webdoc/search.js
+++ b/examples/sites/demos/pc/app/search/webdoc/search.js
@@ -92,12 +92,13 @@ export default {
     {
       demoId: 'slot-prefix',
       name: {
-        'zh-CN': '左侧插槽',
-        'en-US': 'Left slot'
+        'zh-CN': '左侧插槽与禁用',
+        'en-US': 'Left slot and Disabled'
       },
       desc: {
-        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容。',
-        'en-US': 'Customize the left content through the <code>prefix</code> slot.'
+        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容, <code>disabled</code> 控制禁用状态。',
+        'en-US':
+          'Customize the left content through the <code>prefix</code> slot, <code>disabled</code>Control the disabled state.'
       },
       codeFiles: ['slot-prefix.vue']
     },
diff --git a/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue b/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue
index 5e7ed91960..a6d0b7f8ac 100644
--- a/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue
@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
     <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectOnlyFocusRef">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <br />
     <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
diff --git a/examples/sites/demos/pc/app/select/automatic-dropdown.vue b/examples/sites/demos/pc/app/select/automatic-dropdown.vue
index e8b53b670f..c44ce11377 100644
--- a/examples/sites/demos/pc/app/select/automatic-dropdown.vue
+++ b/examples/sites/demos/pc/app/select/automatic-dropdown.vue
@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
     <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectOnlyFocusRef">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <br />
     <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
diff --git a/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue b/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue
index 54f9a7dda5..537b4a9c74 100644
--- a/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue
@@ -3,6 +3,7 @@
     <tiny-select v-model="value" value-key="val">
       <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="value">
       {{ value }}
     </p>
diff --git a/examples/sites/demos/pc/app/select/binding-obj.vue b/examples/sites/demos/pc/app/select/binding-obj.vue
index 85cf82a37b..964dc0fa29 100644
--- a/examples/sites/demos/pc/app/select/binding-obj.vue
+++ b/examples/sites/demos/pc/app/select/binding-obj.vue
@@ -3,6 +3,7 @@
     <tiny-select v-model="value" value-key="val">
       <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="value">
       {{ value }}
     </p>
diff --git a/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue b/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
index 0990205c1f..9a49aa91b2 100644
--- a/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
@@ -3,13 +3,16 @@
     <p>
       场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
     </p>
+    <br />
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
 
     <p>
       场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
+    <br />
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/clear-no-match-value.vue b/examples/sites/demos/pc/app/select/clear-no-match-value.vue
index cf4343c4bc..aaeacfb568 100644
--- a/examples/sites/demos/pc/app/select/clear-no-match-value.vue
+++ b/examples/sites/demos/pc/app/select/clear-no-match-value.vue
@@ -3,13 +3,16 @@
     <p>
       场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
     </p>
+    <br />
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
 
     <p>
       场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
+    <br />
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
index a7e9552732..7cec68ac98 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-collapse">
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
@@ -45,4 +45,7 @@ const value3 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])
 .tiny-select {
   width: 280px;
 }
+.demo-collapse {
+  margin-bottom: 50px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/select/collapse-tags.vue b/examples/sites/demos/pc/app/select/collapse-tags.vue
index be1f7dd1fb..6a0e18652b 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-collapse">
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
@@ -53,4 +53,7 @@ export default {
 .tiny-select {
   width: 280px;
 }
+.demo-collapse {
+  margin-bottom: 50px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue b/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue
index 46ad6b207a..67745bd6e1 100644
--- a/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue
@@ -1,17 +1,23 @@
 <template>
   <div>
     <p>场景1：多选复制单个标签</p>
+    <br />
     <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：多选一键复制所有标签</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：多选设置复制文本分隔符</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>复制到此处：</p>
     <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>
diff --git a/examples/sites/demos/pc/app/select/copy-multi.vue b/examples/sites/demos/pc/app/select/copy-multi.vue
index f24ac9846d..d46a1c2d66 100644
--- a/examples/sites/demos/pc/app/select/copy-multi.vue
+++ b/examples/sites/demos/pc/app/select/copy-multi.vue
@@ -1,18 +1,25 @@
 <template>
   <div>
     <p>场景1：多选复制单个标签</p>
+    <br />
     <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：多选一键复制所有标签</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：多选设置复制文本分隔符</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>复制到此处：</p>
+    <br />
     <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/select/copy-single-composition-api.vue b/examples/sites/demos/pc/app/select/copy-single-composition-api.vue
index 6e86db3aea..fc709e5687 100644
--- a/examples/sites/demos/pc/app/select/copy-single-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/copy-single-composition-api.vue
@@ -1,12 +1,17 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
+    <br />
     <tiny-select v-model="value1" :options="options1"> </tiny-select>
+    <br /><br />
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
+    <br />
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>
+    <br /><br />
 
     <p>场景3：单选远程搜索配置 allow-copy 可复制</p>
+    <br />
     <tiny-select
       v-model="value2"
       filterable
@@ -19,7 +24,9 @@
     >
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="font-style">粘贴至此处：</p>
+    <br />
     <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/select/copy-single.vue b/examples/sites/demos/pc/app/select/copy-single.vue
index ddd326706f..0e6428bfb7 100644
--- a/examples/sites/demos/pc/app/select/copy-single.vue
+++ b/examples/sites/demos/pc/app/select/copy-single.vue
@@ -1,12 +1,17 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
+    <br />
     <tiny-select v-model="value1" :options="options1"> </tiny-select>
+    <br /><br />
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
+    <br />
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>
+    <br /><br />
 
     <p>场景3：单选远程搜索配置 allow-copy 可复制</p>
+    <br />
     <tiny-select
       v-model="value2"
       filterable
@@ -19,7 +24,9 @@
     >
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="font-style">粘贴至此处：</p>
+    <br />
     <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/select/disabled-composition-api.vue b/examples/sites/demos/pc/app/select/disabled-composition-api.vue
index 09a55ec8d9..a1eadb3e16 100644
--- a/examples/sites/demos/pc/app/select/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/disabled-composition-api.vue
@@ -63,6 +63,7 @@
       <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />
+    <br />
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/select/disabled.vue b/examples/sites/demos/pc/app/select/disabled.vue
index 6e17532788..62aa0abdab 100644
--- a/examples/sites/demos/pc/app/select/disabled.vue
+++ b/examples/sites/demos/pc/app/select/disabled.vue
@@ -63,6 +63,7 @@
       <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />
+    <br />
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/select/events-composition-api.vue b/examples/sites/demos/pc/app/select/events-composition-api.vue
index 51a34f414c..da17ac6e03 100644
--- a/examples/sites/demos/pc/app/select/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/events-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>单选</p>
+    <br />
     <tiny-select
       v-model="value1"
       clearable
@@ -13,8 +14,10 @@
     >
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
 
     <p>多选</p>
+    <br />
     <tiny-select
       v-model="value2"
       multiple
diff --git a/examples/sites/demos/pc/app/select/filter-method-composition-api.vue b/examples/sites/demos/pc/app/select/filter-method-composition-api.vue
index c0210a0ba5..186fab69ce 100644
--- a/examples/sites/demos/pc/app/select/filter-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/filter-method-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：组件默认过滤</p>
+    <br />
     <tiny-select v-model="value1" ref="selectRef" filterable no-match-text="No Match">
       <tiny-option
         v-for="item in options"
@@ -11,7 +12,9 @@
       >
       </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：自定义过滤</p>
+    <br />
     <tiny-select
       v-model="value2"
       ref="customFilterRef"
diff --git a/examples/sites/demos/pc/app/select/filter-method.vue b/examples/sites/demos/pc/app/select/filter-method.vue
index 0a8cc04bff..18b848f03c 100644
--- a/examples/sites/demos/pc/app/select/filter-method.vue
+++ b/examples/sites/demos/pc/app/select/filter-method.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：组件默认过滤</p>
+    <br />
     <tiny-select v-model="value1" ref="selectRef" filterable no-match-text="No Match">
       <tiny-option
         v-for="item in options"
@@ -11,7 +12,9 @@
       >
       </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：自定义过滤</p>
+    <br />
     <tiny-select
       v-model="value2"
       ref="customFilterRef"
diff --git a/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue b/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue
index c1759da791..4ccf200f87 100644
--- a/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue
@@ -1,15 +1,21 @@
 <template>
   <div>
     <p>设置为下划线类型：</p>
+    <br />
     <p class="font-style">场景1：下划线默认</p>
+    <br />
     <tiny-select v-model="value1" input-box-type="underline" clearable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="font-style">场景2：下划线禁用</p>
+    <br />
     <tiny-select v-model="value2" input-box-type="underline" disabled>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br />
     <p class="font-style">场景3：下划线多选</p>
+    <br />
     <tiny-select v-model="value3" input-box-type="underline" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/input-box-type.vue b/examples/sites/demos/pc/app/select/input-box-type.vue
index 22bfd70b0f..fae6683175 100644
--- a/examples/sites/demos/pc/app/select/input-box-type.vue
+++ b/examples/sites/demos/pc/app/select/input-box-type.vue
@@ -1,15 +1,21 @@
 <template>
   <div>
     <p>设置为下划线类型</p>
+    <br />
     <p>场景1：下划线默认</p>
+    <br />
     <tiny-select v-model="value1" input-box-type="underline" clearable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：下划线禁用</p>
+    <br />
     <tiny-select v-model="value2" input-box-type="underline" disabled>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：下划线多选</p>
+    <br />
     <tiny-select v-model="value3" input-box-type="underline" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue b/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
index 9729470137..d4537afbc0 100644
--- a/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
@@ -1,10 +1,13 @@
 <template>
   <div>
     <p>场景1：默认下拉弹框宽度由内容撑开：</p>
+    <br />
     <tiny-select v-model="value">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：下拉弹框宽度与输入框一致：</p>
+    <br />
     <tiny-select v-model="value" is-drop-inherit-width>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue b/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
index 8277208d4a..246b365918 100644
--- a/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
+++ b/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
@@ -1,10 +1,13 @@
 <template>
   <div>
     <p>场景1：默认下拉弹框宽度由内容撑开：</p>
+    <br />
     <tiny-select v-model="value">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：下拉弹框宽度与输入框一致：</p>
+    <br />
     <tiny-select v-model="value" is-drop-inherit-width>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/map-field-composition-api.vue b/examples/sites/demos/pc/app/select/map-field-composition-api.vue
index 943bac52a1..dbcbae315c 100644
--- a/examples/sites/demos/pc/app/select/map-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/map-field-composition-api.vue
@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>场景1：配置式配置映射字段</p>
+    <br />
     <tiny-select v-model="value1" multiple :options="options" value-field="val" text-field="text"> </tiny-select>
+    <br /><br />
     <p>场景2：嵌套表格配置映射字段</p>
+    <br />
     <tiny-select
       v-model="value2"
       multiple
diff --git a/examples/sites/demos/pc/app/select/map-field.vue b/examples/sites/demos/pc/app/select/map-field.vue
index e88c886f47..c6938e6747 100644
--- a/examples/sites/demos/pc/app/select/map-field.vue
+++ b/examples/sites/demos/pc/app/select/map-field.vue
@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>场景1：配置式配置映射字段</p>
+    <br />
     <tiny-select v-model="value1" multiple :options="options" value-field="val" text-field="text"> </tiny-select>
+    <br /><br />
     <p>场景2：嵌套表格配置映射字段</p>
+    <br />
     <tiny-select
       v-model="value2"
       multiple
diff --git a/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue b/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue
index bf7bdfdd77..18b873814b 100644
--- a/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue
@@ -10,6 +10,7 @@
         :highlight-class="item._highlightClass"
       ></tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="cache-value">
       {{ cacheValue }}
     </p>
diff --git a/examples/sites/demos/pc/app/select/memoize-usage.vue b/examples/sites/demos/pc/app/select/memoize-usage.vue
index c8118c41d0..43af736d3b 100644
--- a/examples/sites/demos/pc/app/select/memoize-usage.vue
+++ b/examples/sites/demos/pc/app/select/memoize-usage.vue
@@ -10,6 +10,7 @@
         :highlight-class="item._highlightClass"
       ></tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="cache-value">
       {{ cacheValue }}
     </p>
diff --git a/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue b/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue
index 3925ba76e2..fe1e35e148 100644
--- a/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="demo-box">
     <tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
+    <br />
+    <br />
     <p>边框为表单范围</p>
+    <br />
     <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
       <tiny-form-item label="label 垂直布局">
         <div>
diff --git a/examples/sites/demos/pc/app/select/multiple-mix.vue b/examples/sites/demos/pc/app/select/multiple-mix.vue
index 7764ef6739..6b652aad9a 100644
--- a/examples/sites/demos/pc/app/select/multiple-mix.vue
+++ b/examples/sites/demos/pc/app/select/multiple-mix.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="demo-box">
     <tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
+    <br />
+    <br />
     <p>边框为表单范围</p>
+    <br />
     <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
       <tiny-form-item label="label 垂直布局">
         <div>
diff --git a/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue
index 6bb1414227..09dc09d4bb 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="demo-select">
     <p>场景1：嵌套表格（单选）</p>
+    <br />
     <tiny-select
       v-model="value1"
       value-field="id"
@@ -8,7 +9,9 @@
       render-type="grid"
       :grid-op="gridOpSingle"
     ></tiny-select>
+    <br /><br />
     <p>场景2：嵌套表格（多选）</p>
+    <br />
     <tiny-select
       v-model="value2"
       multiple
@@ -17,7 +20,9 @@
       render-type="grid"
       :grid-op="gridOpMulti"
     ></tiny-select>
+    <br /><br />
     <p>场景3：嵌套表格 + 可搜索 + 可清除</p>
+    <br />
     <tiny-select
       ref="select"
       v-model="value3"
diff --git a/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue
index bf39ab01e6..03c3807b97 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：嵌套表格禁用某项（单选）</p>
+    <br />
     <tiny-select
       v-model="value1"
       value-field="id"
@@ -9,7 +10,9 @@
       :grid-op="gridOpRadio"
       :radio-config="radioConfig"
     ></tiny-select>
+    <br /><br />
     <p>场景2：嵌套表格禁用某项（多选）</p>
+    <br />
     <tiny-select
       v-model="value2"
       value-field="id"
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue
index ccde0b4d2a..fa0f9d229b 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：单选，下拉表格远程搜索基础用法</p>
+    <br />
     <tiny-select
       v-model="value1"
       placeholder="请输入关键词"
@@ -10,8 +11,10 @@
       :remote-method="remoteMethod"
       :grid-op="gridOpRadio"
     ></tiny-select>
+    <br /><br />
 
     <p>场景2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
     <tiny-select
       v-model="value2"
       placeholder="请输入关键词"
@@ -22,8 +25,10 @@
       :grid-op="gridOpRadio"
       :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
     ></tiny-select>
+    <br /><br />
 
     <p>场景3：多选，下拉表格远程搜索基础用法</p>
+    <br />
     <tiny-select
       v-model="value3"
       placeholder="请输入关键词"
@@ -35,8 +40,10 @@
       :remote-method="remoteMethod"
       :grid-op="gridOpMultiple"
     ></tiny-select>
+    <br /><br />
 
     <p>场景4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
     <tiny-select
       v-model="value4"
       placeholder="请输入关键词"
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.vue b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
index d6880d6cea..692895baf6 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：单选，下拉表格远程搜索基础用法</p>
+    <br />
     <tiny-select
       v-model="value1"
       placeholder="请输入关键词"
@@ -10,8 +11,10 @@
       :remote-method="remoteMethod"
       :grid-op="gridOpRadio"
     ></tiny-select>
+    <br /><br />
 
     <p>场景2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
     <tiny-select
       v-model="value2"
       placeholder="请输入关键词"
@@ -22,8 +25,10 @@
       :grid-op="gridOpRadio"
       :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
     ></tiny-select>
+    <br /><br />
 
     <p>场景3：多选，下拉表格远程搜索基础用法</p>
+    <br />
     <tiny-select
       v-model="value3"
       placeholder="请输入关键词"
@@ -35,8 +40,10 @@
       :remote-method="remoteMethod"
       :grid-op="gridOpMultiple"
     ></tiny-select>
+    <br /><br />
 
     <p>场景4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <br />
     <tiny-select
       v-model="value4"
       placeholder="请输入关键词"
diff --git a/examples/sites/demos/pc/app/select/nest-grid.vue b/examples/sites/demos/pc/app/select/nest-grid.vue
index dcf1e614e0..95acacf52c 100644
--- a/examples/sites/demos/pc/app/select/nest-grid.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="demo-select">
     <p>场景1：嵌套表格（单选）</p>
+    <br />
     <tiny-select
       v-model="value1"
       value-field="id"
@@ -8,7 +9,9 @@
       render-type="grid"
       :grid-op="gridOpSingle"
     ></tiny-select>
+    <br /><br />
     <p>场景2：嵌套表格（多选）</p>
+    <br />
     <tiny-select
       v-model="value2"
       multiple
@@ -17,7 +20,9 @@
       render-type="grid"
       :grid-op="gridOpMulti"
     ></tiny-select>
+    <br /><br />
     <p>场景3：嵌套表格 + 可搜索 + 可清除</p>
+    <br />
     <tiny-select
       ref="select"
       v-model="value3"
diff --git a/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue b/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue
index fb1651e335..404e2e279f 100644
--- a/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="demo-select">
     <p>场景1：下拉树单选</p>
+    <br />
     <tiny-select
       v-model="treeValue1"
       value-field="id"
@@ -8,7 +9,9 @@
       render-type="tree"
       :tree-op="treeOp"
     ></tiny-select>
+    <br /><br />
     <p>场景2：下拉树多选</p>
+    <br />
     <tiny-select
       v-model="treeValue2"
       multiple
@@ -17,7 +20,9 @@
       render-type="tree"
       :tree-op="treeOp"
     ></tiny-select>
+    <br /><br />
     <p>场景3：下拉树可搜索</p>
+    <br />
     <tiny-select
       v-model="treeValue3"
       filterable
diff --git a/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue b/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
index b837d9211b..e17f402312 100644
--- a/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
@@ -1,14 +1,19 @@
 <template>
   <div>
     <p>场景1：默认</p>
+    <br />
     <tiny-select v-model="value">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：自定义空数据文本</p>
+    <br />
     <tiny-select v-model="value" no-data-text="暂无数据">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：显示空数据图片</p>
+    <br />
     <tiny-select v-model="value" no-data-text="None" :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/no-data-text.vue b/examples/sites/demos/pc/app/select/no-data-text.vue
index 9fdb82c538..ca0bfce810 100644
--- a/examples/sites/demos/pc/app/select/no-data-text.vue
+++ b/examples/sites/demos/pc/app/select/no-data-text.vue
@@ -1,14 +1,19 @@
 <template>
   <div>
     <p>场景1：默认</p>
+    <br />
     <tiny-select v-model="value">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：自定义空数据文本</p>
+    <br />
     <tiny-select v-model="value" no-data-text="暂无数据">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：显示空数据图片</p>
+    <br />
     <tiny-select v-model="value" no-data-text="None" :show-empty-image="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/optimization-composition-api.vue b/examples/sites/demos/pc/app/select/optimization-composition-api.vue
index 8efa9979dc..7902a155db 100644
--- a/examples/sites/demos/pc/app/select/optimization-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/optimization-composition-api.vue
@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>单选：</p>
+    <br />
     <tiny-select v-model="value1" :options="options" optimization @change="onChange"></tiny-select>
+    <br /><br />
     <p>多选：</p>
+    <br />
     <tiny-select
       v-model="value2"
       optimization
diff --git a/examples/sites/demos/pc/app/select/optimization.vue b/examples/sites/demos/pc/app/select/optimization.vue
index e0c639193b..08e617a8a5 100644
--- a/examples/sites/demos/pc/app/select/optimization.vue
+++ b/examples/sites/demos/pc/app/select/optimization.vue
@@ -1,8 +1,11 @@
 <template>
   <div>
     <p>单选：</p>
+    <br />
     <tiny-select v-model="value1" :options="options" optimization @change="onChange"></tiny-select>
+    <br /><br />
     <p>多选：</p>
+    <br />
     <tiny-select
       v-model="value2"
       optimization
diff --git a/examples/sites/demos/pc/app/select/size-composition-api.vue b/examples/sites/demos/pc/app/select/size-composition-api.vue
index 0135047d48..fbbcbe2a2e 100644
--- a/examples/sites/demos/pc/app/select/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/size-composition-api.vue
@@ -1,12 +1,22 @@
 <template>
   <div>
     <p>默认</p>
+    <br />
     <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>medium</p>
+    <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
+    <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
+    <br />
+    <br />
     <p>mini</p>
+    <br />
     <tiny-select v-model="value4" size="mini" multiple :options="options"> </tiny-select>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/select/size.vue b/examples/sites/demos/pc/app/select/size.vue
index bda1c727ae..0bef09ba94 100644
--- a/examples/sites/demos/pc/app/select/size.vue
+++ b/examples/sites/demos/pc/app/select/size.vue
@@ -1,12 +1,22 @@
 <template>
   <div>
     <p>默认</p>
+    <br />
     <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>medium</p>
+    <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
+    <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
+    <br />
+    <br />
     <p>mini</p>
+    <br />
     <tiny-select v-model="value4" size="mini" multiple :options="options"> </tiny-select>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/select/slot-default-composition-api.vue b/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
index 76ee7cf0ba..f68fe675ee 100644
--- a/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：带标签和提示信息</p>
+    <br />
     <tiny-select v-model="value1" popper-class="slot-default">
       <template v-for="item in options1">
         <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
@@ -15,8 +16,10 @@
         </tiny-option>
       </template>
     </tiny-select>
+    <br /><br />
 
     <p>场景2：选项双行</p>
+    <br />
     <tiny-select v-model="value2" popper-class="double-row">
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
         <div>
diff --git a/examples/sites/demos/pc/app/select/slot-default.vue b/examples/sites/demos/pc/app/select/slot-default.vue
index ba44e31b00..0fdfe162a8 100644
--- a/examples/sites/demos/pc/app/select/slot-default.vue
+++ b/examples/sites/demos/pc/app/select/slot-default.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：带标签和提示信息</p>
+    <br />
     <tiny-select v-model="value1" popper-class="slot-default">
       <template v-for="item in options1">
         <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
@@ -15,8 +16,10 @@
         </tiny-option>
       </template>
     </tiny-select>
+    <br /><br />
 
     <p>场景2：选项双行</p>
+    <br />
     <tiny-select v-model="value2" popper-class="double-row">
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
         <div>
diff --git a/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue
index c22bbb2982..cc5358c190 100644
--- a/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue
@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/basic-usage.vue b/examples/sites/demos/pc/app/split/basic-usage.vue
index ce14680d21..e0925ca6b0 100644
--- a/examples/sites/demos/pc/app/split/basic-usage.vue
+++ b/examples/sites/demos/pc/app/split/basic-usage.vue
@@ -33,6 +33,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue b/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue
index 2cb1e4bbb1..55a1c41c17 100644
--- a/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue
@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/disabled-drag.vue b/examples/sites/demos/pc/app/split/disabled-drag.vue
index 1ea4805541..d8ce9966f8 100644
--- a/examples/sites/demos/pc/app/split/disabled-drag.vue
+++ b/examples/sites/demos/pc/app/split/disabled-drag.vue
@@ -33,6 +33,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/event-click-composition-api.vue b/examples/sites/demos/pc/app/split/event-click-composition-api.vue
index e9e3df3908..772cc0759f 100644
--- a/examples/sites/demos/pc/app/split/event-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/event-click-composition-api.vue
@@ -39,7 +39,10 @@ function rightBottomClick() {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s
diff --git a/examples/sites/demos/pc/app/split/event-click.vue b/examples/sites/demos/pc/app/split/event-click.vue
index 902d3a9fa7..5463c89d48 100644
--- a/examples/sites/demos/pc/app/split/event-click.vue
+++ b/examples/sites/demos/pc/app/split/event-click.vue
@@ -48,7 +48,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue b/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue
index 49438bb7a5..a76d7bc7f6 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue
@@ -25,7 +25,10 @@ const split1 = ref(0.5)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue
index 904a4e8235..ef89d99163 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue
@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue
index dd6a1bf9a2..60c043289f 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue
@@ -33,6 +33,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse.vue b/examples/sites/demos/pc/app/split/horizontal-collapse.vue
index 23070ae1a8..668ac23427 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse.vue
@@ -33,7 +33,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s
diff --git a/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue b/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue
index 978bd13aeb..7fc1fe223b 100644
--- a/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue
@@ -26,6 +26,10 @@ const split2 = ref(0.4)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/left-right-slot.vue b/examples/sites/demos/pc/app/split/left-right-slot.vue
index d77c7cb61d..4b1b37b005 100644
--- a/examples/sites/demos/pc/app/split/left-right-slot.vue
+++ b/examples/sites/demos/pc/app/split/left-right-slot.vue
@@ -34,6 +34,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue b/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue
index 30e9ee0f56..4bf9d0578f 100644
--- a/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue
@@ -30,6 +30,10 @@ function moveend() {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/moveend-event.vue b/examples/sites/demos/pc/app/split/moveend-event.vue
index 15e5b66709..6fe8a1b01b 100644
--- a/examples/sites/demos/pc/app/split/moveend-event.vue
+++ b/examples/sites/demos/pc/app/split/moveend-event.vue
@@ -39,6 +39,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue b/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue
index 7b598286f9..46f2016847 100644
--- a/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue
@@ -30,6 +30,10 @@ function movestart() {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/movestart-event.vue b/examples/sites/demos/pc/app/split/movestart-event.vue
index 3b5104aeb1..efebcfb37b 100644
--- a/examples/sites/demos/pc/app/split/movestart-event.vue
+++ b/examples/sites/demos/pc/app/split/movestart-event.vue
@@ -39,6 +39,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/moving-event-composition-api.vue b/examples/sites/demos/pc/app/split/moving-event-composition-api.vue
index eb19db2310..38084e1b5e 100644
--- a/examples/sites/demos/pc/app/split/moving-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/moving-event-composition-api.vue
@@ -30,6 +30,10 @@ function moving() {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/moving-event.vue b/examples/sites/demos/pc/app/split/moving-event.vue
index 9aaaa3525d..64d33096a0 100644
--- a/examples/sites/demos/pc/app/split/moving-event.vue
+++ b/examples/sites/demos/pc/app/split/moving-event.vue
@@ -39,6 +39,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/nested-use-composition-api.vue b/examples/sites/demos/pc/app/split/nested-use-composition-api.vue
index cb3b315acc..11ded903ff 100644
--- a/examples/sites/demos/pc/app/split/nested-use-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/nested-use-composition-api.vue
@@ -35,7 +35,11 @@ const split4 = ref(0.5)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 
 .demo-split-pane.no-padding {
diff --git a/examples/sites/demos/pc/app/split/nested-use.vue b/examples/sites/demos/pc/app/split/nested-use.vue
index a2e12869b4..41cf19b2cd 100644
--- a/examples/sites/demos/pc/app/split/nested-use.vue
+++ b/examples/sites/demos/pc/app/split/nested-use.vue
@@ -43,7 +43,11 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 
 .demo-split-pane.no-padding {
diff --git a/examples/sites/demos/pc/app/split/split-mode-composition-api.vue b/examples/sites/demos/pc/app/split/split-mode-composition-api.vue
index 855110f8e1..a6b44f2e01 100644
--- a/examples/sites/demos/pc/app/split/split-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/split-mode-composition-api.vue
@@ -39,7 +39,11 @@ function moveend() {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 
 .line {
diff --git a/examples/sites/demos/pc/app/split/split-mode.vue b/examples/sites/demos/pc/app/split/split-mode.vue
index 4c1b1a691a..4fa0b5a687 100644
--- a/examples/sites/demos/pc/app/split/split-mode.vue
+++ b/examples/sites/demos/pc/app/split/split-mode.vue
@@ -46,7 +46,11 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 
 .line {
diff --git a/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue b/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue
index 51f0245729..9d254dc872 100644
--- a/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue
@@ -26,6 +26,10 @@ const split1 = ref(0.3)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/split-threshold.vue b/examples/sites/demos/pc/app/split/split-threshold.vue
index 81d48b9379..3162d7fe10 100644
--- a/examples/sites/demos/pc/app/split/split-threshold.vue
+++ b/examples/sites/demos/pc/app/split/split-threshold.vue
@@ -34,6 +34,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue b/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue
index 07c3647bfd..2408722520 100644
--- a/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue
@@ -26,6 +26,10 @@ const split1 = ref(0.3)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/top-bottom-slot.vue b/examples/sites/demos/pc/app/split/top-bottom-slot.vue
index 847c9cdefb..87bb5f997f 100644
--- a/examples/sites/demos/pc/app/split/top-bottom-slot.vue
+++ b/examples/sites/demos/pc/app/split/top-bottom-slot.vue
@@ -34,6 +34,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue b/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue
index 29d719ee26..0fb19ba140 100644
--- a/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue
@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/trigger-simple.vue b/examples/sites/demos/pc/app/split/trigger-simple.vue
index 97c53bca9c..36b040b126 100644
--- a/examples/sites/demos/pc/app/split/trigger-simple.vue
+++ b/examples/sites/demos/pc/app/split/trigger-simple.vue
@@ -33,6 +33,10 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue b/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue
index e2a06d6746..9592aa6093 100644
--- a/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue
@@ -29,7 +29,11 @@ const split2 = ref(0.4)
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 
 .trigger-line {
diff --git a/examples/sites/demos/pc/app/split/trigger-slot.vue b/examples/sites/demos/pc/app/split/trigger-slot.vue
index defe5077d6..625d82f08c 100644
--- a/examples/sites/demos/pc/app/split/trigger-slot.vue
+++ b/examples/sites/demos/pc/app/split/trigger-slot.vue
@@ -37,7 +37,11 @@ export default {
 }
 
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 
 .trigger-line {
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
index abc7bc5357..c838ee5d74 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="demo-steps">
     <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
+    <br /><br />
 
     <p>通过 <code>advanced</code> 属性启用高级向导功能:</p>
+    <br />
     <tiny-steps advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps.vue b/examples/sites/demos/pc/app/steps/advanced-steps.vue
index db03829ea4..46f17f0a05 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps.vue
+++ b/examples/sites/demos/pc/app/steps/advanced-steps.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="demo-steps">
     <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
+    <br /><br />
 
     <p>通过 <code>advanced</code> 属性启用高级向导功能:</p>
+    <br />
     <tiny-steps advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/steps/node-width-composition-api.vue b/examples/sites/demos/pc/app/steps/node-width-composition-api.vue
index b55af3de6f..cad2da84a3 100644
--- a/examples/sites/demos/pc/app/steps/node-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/node-width-composition-api.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="tiny-steps-demo-space">
     <p>设置节点宽度为200像素：</p>
-    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
     <br />
+    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+    <br /><br />
     <p>宽度自适应：</p>
+    <br />
     <tiny-steps advanced flex :data="stepsData" :active="active" @click="onClick"></tiny-steps>
   </div>
 </template>
@@ -36,3 +38,9 @@ const onClick = (index, node) => {
   node.status = 'doing'
 }
 </script>
+
+<style scoped>
+.tiny-steps-demo-space p {
+  margin: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/steps/node-width.vue b/examples/sites/demos/pc/app/steps/node-width.vue
index 8751ede78a..bd19bb5c42 100644
--- a/examples/sites/demos/pc/app/steps/node-width.vue
+++ b/examples/sites/demos/pc/app/steps/node-width.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="tiny-steps-demo-space">
     <p>设置节点宽度为200像素：</p>
-    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
     <br />
+    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+    <br /><br />
     <p>宽度自适应：</p>
+    <br />
     <tiny-steps advanced flex :data="stepsData" :active="active" @click="onClick"></tiny-steps>
   </div>
 </template>
@@ -45,3 +47,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-steps-demo-space p {
+  margin: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/steps/size-composition-api.vue b/examples/sites/demos/pc/app/steps/size-composition-api.vue
index e41258fcf4..e4ce2b4cba 100644
--- a/examples/sites/demos/pc/app/steps/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/size-composition-api.vue
@@ -1,20 +1,33 @@
 <template>
   <div class="demo-steps">
     <h3>单链型步骤条：</h3>
+    <br /><br />
     <p>mini 尺寸</p>
+    <br />
     <tiny-steps vertical line size="mini" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>small 尺寸</p>
+    <br />
     <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps vertical line size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps vertical line size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
     <br />
+    <br /><br />
 
     <h3 class="title">条形步骤条：</h3>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps vertical advanced size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps vertical advanced size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
   </div>
 </template>
@@ -47,6 +60,7 @@ const normalClick = (index, node) => {
 .demo-steps h3 {
   font-size: 16px;
   font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .demo-steps .title {
@@ -55,5 +69,7 @@ const normalClick = (index, node) => {
 
 .demo-steps p {
   text-indent: 20px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/steps/size.vue b/examples/sites/demos/pc/app/steps/size.vue
index 4d53fd6737..cb2d204db3 100644
--- a/examples/sites/demos/pc/app/steps/size.vue
+++ b/examples/sites/demos/pc/app/steps/size.vue
@@ -1,19 +1,32 @@
 <template>
   <div class="demo-steps">
     <h3>单链型步骤条：</h3>
+    <br /><br />
     <p>mini 尺寸</p>
+    <br />
     <tiny-steps vertical line size="mini" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>small 尺寸</p>
+    <br />
     <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps vertical line size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps vertical line size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
 
     <h3 class="title">条形步骤条：</h3>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps advanced size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps advanced size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
   </div>
 </template>
@@ -55,6 +68,7 @@ export default {
 .demo-steps h3 {
   font-size: 16px;
   font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .demo-steps .title {
@@ -63,5 +77,7 @@ export default {
 
 .demo-steps p {
   text-indent: 20px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue b/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue
new file mode 100644
index 0000000000..421d7a9601
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue
@@ -0,0 +1,20 @@
+<template>
+  <tiny-switch>
+    <template #active-icon>
+      <TinyIconArrowLeft />
+    </template>
+    <template #inactive-icon>
+      <TinyIconArrowRight />
+    </template>
+  </tiny-switch>
+</template>
+
+<script setup>
+import { Switch } from '@opentiny/vue'
+import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
+
+const TinyIconArrowLeft = IconArrowLeft()
+const TinyIconArrowRight = IconArrowRight()
+
+const TinySwitch = Switch
+</script>
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close-icon.spec.ts b/examples/sites/demos/pc/app/switch/custom-open-close-icon.spec.ts
new file mode 100644
index 0000000000..199124b38e
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/custom-open-close-icon.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义开关图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('switch#custom-open-close-icon')
+
+  const demo = page.locator('#custom-open-close-icon')
+  const switchContainer = demo.locator('.tiny-switch')
+
+  const switchBtn = switchContainer.locator('.tiny-switch__button').first()
+
+  const switchIcon = switchBtn.locator('.tiny-svg').first()
+
+  await expect(switchIcon).not.toBeNull()
+})
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue b/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue
new file mode 100644
index 0000000000..1e10f7528c
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <tiny-switch>
+    <template #active-icon>
+      <TinyIconArrowLeft />
+    </template>
+    <template #inactive-icon>
+      <TinyIconArrowRight />
+    </template>
+  </tiny-switch>
+</template>
+
+<script>
+import { Switch } from '@opentiny/vue'
+import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySwitch: Switch,
+    TinyIconArrowLeft: IconArrowLeft(),
+    TinyIconArrowRight: IconArrowRight()
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/switch/webdoc/switch.js b/examples/sites/demos/pc/app/switch/webdoc/switch.js
index 4bc5b60df3..337c579b00 100644
--- a/examples/sites/demos/pc/app/switch/webdoc/switch.js
+++ b/examples/sites/demos/pc/app/switch/webdoc/switch.js
@@ -79,6 +79,19 @@ export default {
       },
       codeFiles: ['dynamic-disable.vue']
     },
+    {
+      demoId: 'custom-open-close-icon',
+      name: {
+        'zh-CN': '自定义开关图标',
+        'en-US': 'Custom switch icon'
+      },
+      desc: {
+        'zh-CN': '<p>通过具名插槽 <code>active-icon</code> 和 <code>inactive-icon</code> 自定义开关图标。</p>',
+        'en-US':
+          '<p>Customize switch icons through named slots<code>active icon</code>and<code>inactive icon</code> .</p>'
+      },
+      codeFiles: ['custom-open-close-icon.vue']
+    },
     {
       demoId: 'event-change',
       name: {
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
index a8fc03c203..fdf506ef94 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
@@ -16,8 +16,8 @@ import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 const activeName = ref('second')
 </script>
 
-<style>
+<style scoped>
 .pc-demo .tiny-tabs__content {
-  line-height: 1.5;
+  line-height: 2;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage.vue b/examples/sites/demos/pc/app/tabs/basic-usage.vue
index 9de794bfd7..903119123c 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tabs/basic-usage.vue
@@ -25,8 +25,8 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .pc-demo .tiny-tabs__content {
-  line-height: 1.5;
+  line-height: 2;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue b/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
index 6c288f3b16..7bc23e0b57 100644
--- a/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
@@ -5,7 +5,7 @@
       <tiny-tab-item name="first">
         <template #title>
           <div class="slot-content">
-            <tiny-icon-calendar style="vertical-align: top" class="tiny-svg-size"></tiny-icon-calendar>
+            <tiny-icon-calendar class="demp-tabs-icon"></tiny-icon-calendar>
             <span class="slot-message">表单组件</span>
           </div>
         </template>
@@ -14,7 +14,7 @@
       <tiny-tab-item name="second">
         <template #title>
           <div class="slot-content">
-            <tiny-icon-replies style="fill: red; vertical-align: top" class="tiny-svg-size"></tiny-icon-replies>
+            <tiny-icon-replies class="demp-tabs-icon icon-color"></tiny-icon-replies>
             <span class="slot-message">数据组件</span>
           </div>
         </template>
@@ -50,4 +50,11 @@ const handleClick = () => {
 .slot-message {
   display: inline-block;
 }
+.demp-tabs-icon {
+  vertical-align: top;
+  margin-right: 4px;
+}
+.icon-color {
+  fill: red;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/tabs/custom-tab-title.vue b/examples/sites/demos/pc/app/tabs/custom-tab-title.vue
index 3f86e7dd87..a7ccc3aacb 100644
--- a/examples/sites/demos/pc/app/tabs/custom-tab-title.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-tab-title.vue
@@ -5,7 +5,7 @@
       <tiny-tab-item name="first">
         <template #title>
           <div class="slot-content">
-            <icon-calendar style="vertical-align: top" class="tiny-svg-size"></icon-calendar>
+            <icon-calendar class="demp-tabs-icon"></icon-calendar>
             <span class="slot-message">表单组件</span>
           </div>
         </template>
@@ -14,7 +14,7 @@
       <tiny-tab-item name="second">
         <template #title>
           <div class="slot-content">
-            <icon-replies style="fill: red; vertical-align: top" class="tiny-svg-size"></icon-replies>
+            <icon-replies class="demp-tabs-icon icon-color"></icon-replies>
             <span class="slot-message">数据组件</span>
           </div>
         </template>
@@ -61,4 +61,11 @@ export default {
 .slot-message {
   display: inline-block;
 }
+.demp-tabs-icon {
+  vertical-align: top;
+  margin-right: 4px;
+}
+.icon-color {
+  fill: red;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/tabs/size-composition-api.vue b/examples/sites/demos/pc/app/tabs/size-composition-api.vue
new file mode 100644
index 0000000000..6b19e37c07
--- /dev/null
+++ b/examples/sites/demos/pc/app/tabs/size-composition-api.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" separator size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, reactive } from 'vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+
+const activeName = ref('1')
+const Tabs = reactive([])
+
+// 创建tabs
+for (let i = 1; i < 5; i++) {
+  const title = `Tab ${i}`
+  Tabs.push({
+    title,
+    name: i + '',
+    content: `${title} content `
+  })
+}
+</script>
diff --git a/examples/sites/demos/pc/app/tabs/size.spec.ts b/examples/sites/demos/pc/app/tabs/size.spec.ts
new file mode 100644
index 0000000000..32958135e5
--- /dev/null
+++ b/examples/sites/demos/pc/app/tabs/size.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('小尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tabs#size')
+
+  const headerBox = page.locator('.tiny-tabs .tiny-tabs__nav-scroll')
+
+  await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
+  await expect(headerBox.nth(0)).toHaveCSS('font-size', '16px')
+  await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
+  await expect(headerBox.nth(1)).toHaveCSS('font-size', '14px')
+  await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
+  await expect(headerBox.nth(2)).toHaveCSS('font-size', '12px')
+})
diff --git a/examples/sites/demos/pc/app/tabs/size.vue b/examples/sites/demos/pc/app/tabs/size.vue
new file mode 100644
index 0000000000..cde3622ae6
--- /dev/null
+++ b/examples/sites/demos/pc/app/tabs/size.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" separator size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      activeName: '1',
+      Tabs: []
+    }
+  },
+  created() {
+    // 创建tabs
+    for (let i = 1; i < 5; i++) {
+      const title = `Tab ${i}`
+      this.Tabs.push({
+        title,
+        name: i + '',
+        content: `${title} content `
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue
index a500d4e8b7..3d732ad211 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue
@@ -90,7 +90,6 @@ const tabs = ref([
 
 <style scoped>
 .item {
-  width: 14px;
   padding: 0 8px;
   text-align: center;
   font-weight: normal;
diff --git a/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue b/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue
index 95dea5d1a0..d9b1dbf050 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue
@@ -99,7 +99,6 @@ export default {
 
 <style scoped>
 .item {
-  width: 14px;
   padding: 0 8px;
   text-align: center;
   font-weight: normal;
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
index 38df09cffb..823054394e 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
@@ -8,7 +8,9 @@
         数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
       <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth" disabled>
+        业务组件,与业务紧密相关实现某种业务功能的组件集。
+      </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs v-model="activeName2" separator size="large">
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator.vue b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
index 0f0db3ce9c..f9e8a814d5 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
@@ -8,7 +8,9 @@
         数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
       <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth" disabled>
+        业务组件,与业务紧密相关实现某种业务功能的组件集。
+      </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs v-model="activeName2" separator size="large">
diff --git a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
index bceb93bb10..6d8767dbae 100644
--- a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
+++ b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
@@ -56,6 +56,18 @@ export default {
       },
       codeFiles: ['tabs-separator.vue']
     },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code> 改变尺寸。</p>\n',
+        'en-US': '<p>Use <code>size</code> to set the size.</p>\n'
+      },
+      codeFiles: ['size.vue']
+    },
     {
       demoId: 'custom-more-icon',
       name: {
diff --git a/examples/sites/demos/pc/app/tag/color-border-composition-api.vue b/examples/sites/demos/pc/app/tag/color-border-composition-api.vue
new file mode 100644
index 0000000000..745b9ee98e
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag/color-border-composition-api.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="tiny-tag-demo">
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
+    <tiny-tag type="success" hit>标签二</tiny-tag>
+    <tiny-tag type="info" hit>标签三</tiny-tag>
+    <tiny-tag type="warning" hit>标签四</tiny-tag>
+    <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { Tag as TinyTag } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+.tiny-tag-demo > * {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/color-border.spec.ts b/examples/sites/demos/pc/app/tag/color-border.spec.ts
new file mode 100644
index 0000000000..39e238b3ac
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag/color-border.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('边框和自定义背景色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#color3')
+
+  const tags = page.locator('.all-demos-container').locator('.tiny-tag')
+  const first = tags.getByText('标签一')
+  const red = tags.getByText('red标签')
+  const custom = tags.getByText('自定义背景色', { exact: true })
+
+  await expect(first).toHaveClass(/is-hit/)
+  await expect(red).toHaveClass(/tiny-tag--red/)
+  await expect(custom).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
+  await expect(custom).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+})
diff --git a/examples/sites/demos/pc/app/tag/color-border.vue b/examples/sites/demos/pc/app/tag/color-border.vue
new file mode 100644
index 0000000000..3a03b890a1
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag/color-border.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="tiny-tag-demo">
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
+    <tiny-tag type="success" hit>标签二</tiny-tag>
+    <tiny-tag type="info" hit>标签三</tiny-tag>
+    <tiny-tag type="warning" hit>标签四</tiny-tag>
+    <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+.tiny-tag-demo > * {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
index d790689905..5cb7b624a6 100644
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -27,7 +27,7 @@ export default {
       codeFiles: ['content.vue']
     },
     {
-      demoId: 'color3',
+      demoId: 'color-border',
       name: {
         'zh-CN': '颜色与边框',
         'en-US': 'Color and border'
@@ -36,7 +36,7 @@ export default {
         'zh-CN': `通过 <code>hit</code> 设置边框；<code>color</code> 设置颜色，可使用预设值，也可自定义颜色值；当自定义颜色值为字符串则只能设置背景色；若为数组则第一个值为背景色，第二个为文本色。`,
         'en-US': `Use <code>hit</code> to set the border. <code>color</code> Set the color. You can use the preset value or customize the color value. If the value of Custom Color is a character string, only the background color can be set. If it is an array, the first value is the background color and the second is the text color.`
       },
-      codeFiles: ['color3.vue']
+      codeFiles: ['color-border.vue']
     },
     {
       demoId: 'effect',
diff --git a/examples/sites/demos/pc/app/time-line-new/basic-usage.vue b/examples/sites/demos/pc/app/time-line-new/basic-usage.vue
new file mode 100644
index 0000000000..0f6b3910c8
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/basic-usage.vue
@@ -0,0 +1,32 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click"></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue b/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue
new file mode 100644
index 0000000000..7a9f9e5080
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue
@@ -0,0 +1,39 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click">
+    <template #top="data">
+      <p style="text-align: center">{{ data.slotScope.name }}</p>
+    </template>
+    <template #bottom="data">
+      <p>{{ data.slotScope.time }}</p>
+    </template>
+  </aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue b/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue
new file mode 100644
index 0000000000..73a59801e5
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue
@@ -0,0 +1,39 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" vertical>
+    <template #left="data">
+      <span style="text-align: right; float: left; padding-right: 16px">
+        {{ data.slotScope.name }}
+      </span>
+    </template>
+    <template #right="data">
+      <span style="margin-left: 15px; float: left">
+        {{ data.slotScope.time }}
+      </span>
+    </template>
+  </aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/different-data1.vue b/examples/sites/demos/pc/app/time-line-new/different-data1.vue
new file mode 100644
index 0000000000..bf5991a512
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/different-data1.vue
@@ -0,0 +1,44 @@
+<template>
+  <aui-time-line
+    :data="data"
+    :active="active"
+    @click="click"
+    name-field="content"
+    time-field="timestamp"
+    vertical
+  ></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        {
+          content: '提交审批',
+          timestamp: '2018-04-15'
+        },
+        {
+          content: '通过审核',
+          timestamp: '2018-04-13'
+        },
+        {
+          content: '创建成功',
+          timestamp: '2018-04-11'
+        }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/different-data2.vue b/examples/sites/demos/pc/app/time-line-new/different-data2.vue
new file mode 100644
index 0000000000..bd8d0c8006
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/different-data2.vue
@@ -0,0 +1,36 @@
+<template>
+  <aui-time-line :data="data" auto-color-field="color1" vertical :active="active" @click="click"></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+import { IconLoading } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    AuiTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 6,
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', color1: 'success' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', color1: IconLoading() },
+        { name: '节点标题', time: '2022-11-14 20:45:50', color1: 'error' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', color1: 'warning' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/event.vue b/examples/sites/demos/pc/app/time-line-new/event.vue
new file mode 100644
index 0000000000..1db99f2409
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/event.vue
@@ -0,0 +1,29 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" vertical reverse></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      Modal.message({ message: `触发了click事件：${index}`, status: 'info' })
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/node-toset1.vue b/examples/sites/demos/pc/app/time-line-new/node-toset1.vue
new file mode 100644
index 0000000000..e9e9ad623c
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/node-toset1.vue
@@ -0,0 +1,35 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click"> </aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 6,
+      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: 'warning' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/node-toset2.vue b/examples/sites/demos/pc/app/time-line-new/node-toset2.vue
new file mode 100644
index 0000000000..433bdbdb69
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/node-toset2.vue
@@ -0,0 +1,36 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click"></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+import { IconLoading, IconTime } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    AuiTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 6,
+      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: 'warning' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/set-start-value.vue b/examples/sites/demos/pc/app/time-line-new/set-start-value.vue
new file mode 100644
index 0000000000..9d59179ab4
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/set-start-value.vue
@@ -0,0 +1,32 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" :start="2"></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/show-number.vue b/examples/sites/demos/pc/app/time-line-new/show-number.vue
new file mode 100644
index 0000000000..d7a6957efb
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/show-number.vue
@@ -0,0 +1,28 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" :show-number="false"></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/show-status.vue b/examples/sites/demos/pc/app/time-line-new/show-status.vue
new file mode 100644
index 0000000000..da31792cee
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/show-status.vue
@@ -0,0 +1,32 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" show-status></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/vertical1.vue b/examples/sites/demos/pc/app/time-line-new/vertical1.vue
new file mode 100644
index 0000000000..3c78ca90dd
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/vertical1.vue
@@ -0,0 +1,28 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" vertical></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/vertical2.vue b/examples/sites/demos/pc/app/time-line-new/vertical2.vue
new file mode 100644
index 0000000000..1db99f2409
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/vertical2.vue
@@ -0,0 +1,29 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" vertical reverse></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      Modal.message({ message: `触发了click事件：${index}`, status: 'info' })
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.cn.md b/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.cn.md
new file mode 100644
index 0000000000..1ea36f9022
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.cn.md
@@ -0,0 +1,7 @@
+---
+title: Timeline 时间线
+---
+
+# Timeline 时间线
+
+<div>可视化时间流信息</div>
diff --git a/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.en.md b/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.en.md
new file mode 100644
index 0000000000..93235ce817
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.en.md
@@ -0,0 +1,7 @@
+---
+title: TimeLine
+---
+
+# TimeLine
+
+<div>Visualize time flow information.</div>
diff --git a/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.js b/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.js
new file mode 100644
index 0000000000..279c9099e1
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/webdoc/time-line-new.js
@@ -0,0 +1,184 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '通过 data 属性设置时间线步骤条数据，通过 active 属性设置步骤条的选中步骤。',
+        'en-US':
+          '<p>Use the <code>data</code> attribute to set data,  the <code>active</code> attribute to set the selected node, and <code>click</code> to listen to click event on node. </p>\n'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'vertical1',
+      name: {
+        'zh-CN': '竖向时间线1',
+        'en-US': 'Timeline Node Component'
+      },
+      desc: {
+        'zh-CN': '通过 vertical 属性设置竖向时间线。',
+        'en-US':
+          '<p>Customize the attributes, events, and slots of individual nodes through the <code>timeline-item</code> component of the Timeline node component.</p>\n'
+      },
+      codeFiles: ['vertical1.vue']
+    },
+    {
+      demoId: 'vertical2',
+      name: {
+        'zh-CN': '竖向时间线2',
+        'en-US': 'Vertical Timeline'
+      },
+      desc: {
+        'zh-CN': '通过 reverse 属性设置竖向步骤条的方向。',
+        'en-US':
+          '<p>Use the <code>vertical</code> attribute to set the vertical timeline and <code>reverse</code> to set whether display data in reverse order.</p>\n'
+      },
+      codeFiles: ['vertical2.vue']
+    },
+    {
+      demoId: 'width',
+      name: {
+        'zh-CN': '宽度设置',
+        'en-US': 'Status of Node'
+      },
+      desc: {
+        'zh-CN': '通过 space属性设置步骤条的宽度。',
+        'en-US':
+          '<p>Specify the state of timeline nodes by setting the <code>autoColor</code> or <code>type</code> attribute, and use the <code>disabled</code> attribute to enable or disable them.</p>'
+      },
+      codeFiles: ['width.vue']
+    },
+    {
+      demoId: 'different-data1',
+      name: {
+        'zh-CN': '数据映射1',
+        'en-US': 'Node name position'
+      },
+      desc: {
+        'zh-CN':
+          '通过 name-field 属性设置节点信息中名称对应的字段名，通过 time-field 属性设置节点时间信息对应的字段名。',
+        'en-US':
+          '<p>Set the position of the node name using the <code>text-position</code> attribute, which applies only to horizontal timelines.</p>'
+      },
+      codeFiles: ['different-data1.vue']
+    },
+    {
+      demoId: 'different-data2',
+      name: {
+        'zh-CN': '数据映射2',
+        'en-US': 'Appearance of Node'
+      },
+      desc: {
+        'zh-CN': '通过 auto-color-field 属性设置节点信息图标对应的字段名。',
+        'en-US': '<p>Use the <code>shape</code> attribute to set the appearance of a vertical time line node. </p>'
+      },
+      codeFiles: ['different-data2.vue']
+    },
+    {
+      demoId: 'set-start-value',
+      name: {
+        'zh-CN': '设置序号起始值',
+        'en-US': 'Width Setting'
+      },
+      desc: {
+        'zh-CN': '通过 start 属性设置步骤条序号起始值。',
+        'en-US': '<p>Use the <code>space</code> attribute to set the width of timeline node. </p>\n'
+      },
+      codeFiles: ['set-start-value.vue']
+    },
+    {
+      demoId: 'show-status',
+      name: {
+        'zh-CN': '显示组件内部状态',
+        'en-US': 'Custom Icon'
+      },
+      desc: {
+        'zh-CN': '通过 show-status 属性设置是否显示组件内部状态。默认为 false，表示不显示。',
+        'en-US': '<p>Customize icon by using the <code>auto-color</code> attribute.</p>'
+      },
+      codeFiles: ['show-status.vue']
+    },
+    {
+      demoId: 'node-toset1',
+      name: {
+        'zh-CN': '节点配置图标1',
+        'en-US': 'Custom Field'
+      },
+      desc: {
+        'zh-CN': '通过在data里面的属性autoColor设置自定义状态',
+        'en-US':
+          '<p>The <code>name-field</code> attribute is used to set the field name corresponding to the node name in the node information, the <code>time-field</code> attribute is used to set the field name corresponding to the node time information and the <code>auto-color-field</code> attribute is used to set the field name corresponding to the icon. </p>'
+      },
+      codeFiles: ['node-toset1.vue']
+    },
+    {
+      demoId: 'node-toset2',
+      name: {
+        'zh-CN': '节点配置图标2',
+        'en-US': 'Start value of the sequence number'
+      },
+      desc: {
+        'zh-CN': '通过在data里面的属性autoColor设置自定义图标',
+        'en-US': '<p>Set the start sequence number through the <code>start</code> attribute. </p>\n'
+      },
+      codeFiles: ['node-toset2.vue']
+    },
+    {
+      demoId: 'show-number',
+      name: {
+        'zh-CN': '未完成的序号显示',
+        'en-US': 'Bottom indicator triangle'
+      },
+      desc: {
+        'zh-CN': '通过 show-number 属性设置未完成的状态是否显示序号。',
+        'en-US':
+          'The <code>show-divider</code> attribute is used to set whether to display the indicator triangle at the bottom. This parameter is valid only when the node text is on the right of the sequence number.'
+      },
+      codeFiles: ['show-number.vue']
+    },
+    {
+      demoId: 'custom-normal-step',
+      name: {
+        'zh-CN': '自定义横向时间线',
+        'en-US': 'Customizing a Horizontal Timeline'
+      },
+      desc: {
+        'zh-CN': 'slot 为 top可以自定义步骤条顶部内容，slot 为 bottom 可以自定义步骤条底部内容。',
+        'en-US':
+          'If <p><code>slot</code> is <code>top</code>, you can customize the top content of the timeline. If <p><code>slot</code> is <code>slot</code>, you can customize the bottom content of the timeline. </p>\n'
+      },
+      codeFiles: ['custom-normal-step.vue']
+    },
+    {
+      demoId: 'custom-vertical-step',
+      name: {
+        'zh-CN': '自定义竖向时间线',
+        'en-US': 'Customized Vertical Timeline'
+      },
+      desc: {
+        'zh-CN': 'slot 为 left可以自定义步骤条左侧内容，slot 为 right 可以自定义步骤条右侧内容。',
+        'en-US':
+          'If <p><code>slot</code> is set to <code>left</code>, you can customize the content on the left of the timeline. If <p><code>slot</code> is set to <code>right</code>, you can customize the content on the right of the timeline. </p>\n'
+      },
+      codeFiles: ['custom-vertical-step.vue']
+    },
+    {
+      demoId: 'event',
+      name: {
+        'zh-CN': 'click 事件',
+        'en-US': 'Node Description'
+      },
+      desc: {
+        'zh-CN': '单击时触发 click 事件',
+        'en-US': '<p>Add description information for a single node through the <code>description</code> slot.</p>'
+      },
+      codeFiles: ['event.vue']
+    }
+  ]
+}
diff --git a/examples/sites/demos/pc/app/time-line-new/width.vue b/examples/sites/demos/pc/app/time-line-new/width.vue
new file mode 100644
index 0000000000..bc55eb35d4
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line-new/width.vue
@@ -0,0 +1,28 @@
+<template>
+  <aui-time-line :data="data" :active="active" @click="click" :space="200"></aui-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    AuiTimeLine: 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' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      this.active = index
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
index fcdee7f564..c800afd50e 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
@@ -2,11 +2,12 @@
   <tiny-time-line
     :data="data"
     :active="active"
-    @click="click"
+    class="demo-timeline-custom"
     name-field="content"
     time-field="timestamp"
     auto-color-field="icon"
     vertical
+    @click="click"
   ></tiny-time-line>
 </template>
 
@@ -36,3 +37,9 @@ function click(index) {
   active.value = index
 }
 </script>
+
+<style>
+.demo-timeline-custom .tiny-timeline-item__content {
+  line-height: 28px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/time-line/custom-field.vue b/examples/sites/demos/pc/app/time-line/custom-field.vue
index 07e43ba679..caf13abe8b 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-field.vue
@@ -2,11 +2,12 @@
   <tiny-time-line
     :data="data"
     :active="active"
-    @click="click"
+    class="demo-timeline-custom"
     name-field="content"
     time-field="timestamp"
     auto-color-field="icon"
     vertical
+    @click="click"
   ></tiny-time-line>
 </template>
 
@@ -45,3 +46,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.demo-timeline-custom .tiny-timeline-item__content {
+  line-height: 28px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue
index ed756a196c..d876811c0b 100644
--- a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue
@@ -34,6 +34,7 @@ function click(index, node) {
 <style scoped>
 .custom-top {
   text-align: center;
+  margin-bottom: 8px;
 }
 
 .custom-bottom {
diff --git a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue
index c12196c76a..876f3cdd0a 100644
--- a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue
@@ -43,6 +43,7 @@ export default {
 <style scoped>
 .custom-top {
   text-align: center;
+  margin-bottom: 8px;
 }
 
 .custom-bottom {
diff --git a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue
index 1832a57cb3..9bc2d29423 100644
--- a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue
@@ -33,10 +33,12 @@ function click(index) {
 .custom-left {
   padding-right: 16px;
   text-align: right;
+  line-height: 28px;
 }
 
 .custom-right {
   margin-left: 15px;
   margin-bottom: 50px;
+  line-height: 28px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue
index 070dd339f2..f387d2eb9b 100644
--- a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue
@@ -42,10 +42,12 @@ export default {
 .custom-left {
   padding-right: 16px;
   text-align: right;
+  line-height: 28px;
 }
 
 .custom-right {
   margin-left: 15px;
   margin-bottom: 50px;
+  line-height: 28px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue b/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
index fe00950520..ba4c6edda2 100644
--- a/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
@@ -49,5 +49,7 @@ code {
 .timeline-box {
   width: 800px;
   height: 100px;
+  margin-top: 16px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/set-node-width.vue b/examples/sites/demos/pc/app/time-line/set-node-width.vue
index 2d967b9e09..e506983a88 100644
--- a/examples/sites/demos/pc/app/time-line/set-node-width.vue
+++ b/examples/sites/demos/pc/app/time-line/set-node-width.vue
@@ -56,5 +56,7 @@ code {
 .timeline-box {
   width: 800px;
   height: 100px;
+  margin-top: 16px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/status-composition-api.vue b/examples/sites/demos/pc/app/time-line/status-composition-api.vue
index 4fbf61cc89..a206c84ea8 100644
--- a/examples/sites/demos/pc/app/time-line/status-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/status-composition-api.vue
@@ -5,13 +5,15 @@
       <code>autoColor</code>
       可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
     </p>
-    <tiny-time-line :data="data1"></tiny-time-line>
     <br />
+    <tiny-time-line :data="data1"></tiny-time-line>
+    <br /><br />
 
-    <p>
+    <p class="demo-line">
       (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
       <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
     </p>
+    <br />
     <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
   </div>
 </template>
@@ -46,4 +48,7 @@ code {
   border-radius: 3px;
   background-color: rgba(27, 31, 35, 0.05);
 }
+.demo-line {
+  line-height: 24px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/status.vue b/examples/sites/demos/pc/app/time-line/status.vue
index 53df4ca4ad..0682b08944 100644
--- a/examples/sites/demos/pc/app/time-line/status.vue
+++ b/examples/sites/demos/pc/app/time-line/status.vue
@@ -5,13 +5,15 @@
       <code>autoColor</code>
       可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
     </p>
-    <tiny-time-line :data="data1"></tiny-time-line>
     <br />
+    <tiny-time-line :data="data1"></tiny-time-line>
+    <br /><br />
 
-    <p>
+    <p class="demo-line">
       (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
       <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
     </p>
+    <br />
     <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
   </div>
 </template>
@@ -54,4 +56,7 @@ code {
   background-color: rgba(27, 31, 35, 0.05);
   border-radius: 3px;
 }
+.demo-line {
+  line-height: 24px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue b/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue
index d75e74c691..b34a859ef4 100644
--- a/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue
@@ -2,10 +2,12 @@
   <div class="demo-timeline-vertical">
     <div class="demo-content">
       <p>竖式时间线 正向</p>
+      <br />
       <tiny-time-line :data="data" :active="active" @click="click" vertical></tiny-time-line>
     </div>
     <div class="demo-content">
       <p>竖式时间线 逆向</p>
+      <br />
       <tiny-time-line :data="data" :active="active" @click="click" vertical reverse></tiny-time-line>
     </div>
   </div>
@@ -33,6 +35,12 @@ function click(index) {
 }
 
 .demo-content {
-  margin-right: 20px;
+  margin-right: 40px;
+}
+</style>
+
+<style>
+.demo-timeline-vertical .tiny-timeline-item__content {
+  line-height: 28px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-line/vertical-timeline.vue b/examples/sites/demos/pc/app/time-line/vertical-timeline.vue
index 89f2a426a4..b95872e08e 100644
--- a/examples/sites/demos/pc/app/time-line/vertical-timeline.vue
+++ b/examples/sites/demos/pc/app/time-line/vertical-timeline.vue
@@ -2,11 +2,13 @@
   <div class="demo-timeline-vertical">
     <div class="demo-content">
       <p>竖向时间线 正向</p>
+      <br />
       <tiny-time-line :data="data" :active="active" @click="click" vertical></tiny-time-line>
     </div>
 
     <div class="demo-content">
       <p>竖向时间线 反向</p>
+      <br />
       <tiny-time-line :data="data" :active="active" @click="click" vertical reverse></tiny-time-line>
     </div>
   </div>
@@ -43,6 +45,12 @@ export default {
 }
 
 .demo-content {
-  margin-right: 20px;
+  margin-right: 40px;
+}
+</style>
+
+<style>
+.demo-timeline-vertical .tiny-timeline-item__content {
+  line-height: 28px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
index 95e395c133..95577765ae 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
@@ -23,4 +23,9 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
index 9f84608337..3ba2d42009 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -31,4 +31,9 @@ export default {
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
index e71a85d755..b3988ee96d 100644
--- a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
@@ -2,23 +2,15 @@
   <div>
     <p>默认显示清除按钮</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="value1"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="value1"></tiny-time-picker>
     </div>
     <p>隐藏清除按钮</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="value1"
-        :clearable="false"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="value1" :clearable="false"></tiny-time-picker>
     </div>
     <p>自定义清除按钮图标</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="value1"
-        :clear-icon="IconError"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="value1" :clear-icon="IconError"></tiny-time-picker>
     </div>
   </div>
 </template>
@@ -36,4 +28,9 @@ const IconError = iconError()
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/clearable.vue b/examples/sites/demos/pc/app/time-picker/clearable.vue
index 26280a4418..6ebf93badc 100644
--- a/examples/sites/demos/pc/app/time-picker/clearable.vue
+++ b/examples/sites/demos/pc/app/time-picker/clearable.vue
@@ -2,23 +2,15 @@
   <div>
     <p>默认显示清除按钮</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="value1"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="value1"></tiny-time-picker>
     </div>
     <p>隐藏清除按钮</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="value1"
-        :clearable="false"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="value1" :clearable="false"></tiny-time-picker>
     </div>
     <p>自定义清除按钮图标</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="value1"
-        :clear-icon="IconError"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="value1" :clear-icon="IconError"></tiny-time-picker>
     </div>
   </div>
 </template>
@@ -44,4 +36,9 @@ export default {
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
index 9cd03a7864..b80014b6a3 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
@@ -27,4 +27,9 @@ const rangeValue = ref('')
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/default-value.vue b/examples/sites/demos/pc/app/time-picker/default-value.vue
index 404ae96f10..b34fe5c17a 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/time-picker/default-value.vue
@@ -33,4 +33,9 @@ export default {
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
index ce20bf4f36..4ac3490d76 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
@@ -25,9 +25,10 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 <style scoped lang="less">
 .demo-date-picker-wrap {
   width: 182px;
-
-  & > * {
-    margin-top: 12px;
-  }
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/disabled.vue b/examples/sites/demos/pc/app/time-picker/disabled.vue
index a1b39f05d0..d32772a359 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/time-picker/disabled.vue
@@ -33,9 +33,10 @@ export default {
 <style scoped lang="less">
 .demo-date-picker-wrap {
   width: 182px;
-
-  & > * {
-    margin-top: 12px;
-  }
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
index ec20cb2447..2b7a82707f 100644
--- a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
@@ -11,10 +11,7 @@
 
     <p>选中值的格式：</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="selectedValue"
-        value-format="timestamp"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="selectedValue" value-format="timestamp"></tiny-time-picker>
     </div>
     <span class="select-time">当前选中时间：{{ selectedValue }}</span>
 
@@ -52,4 +49,9 @@ const pickerValue = ref(new Date(2016, 9, 10, 18, 40))
   display: inline-block;
   margin-top: 12px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding-top: 16px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/format.vue b/examples/sites/demos/pc/app/time-picker/format.vue
index 0a04d2fe21..8319be5017 100644
--- a/examples/sites/demos/pc/app/time-picker/format.vue
+++ b/examples/sites/demos/pc/app/time-picker/format.vue
@@ -11,10 +11,7 @@
 
     <p>选中值的格式：</p>
     <div class="demo-date-picker-wrap">
-      <tiny-time-picker
-        v-model="selectedValue"
-        value-format="timestamp"
-      ></tiny-time-picker>
+      <tiny-time-picker v-model="selectedValue" value-format="timestamp"></tiny-time-picker>
     </div>
     <span class="select-time">当前选中时间：{{ selectedValue }}</span>
 
@@ -64,4 +61,9 @@ export default {
   display: inline-block;
   margin-top: 12px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding-top: 16px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
index cd4a526cea..91db7b0995 100644
--- a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
@@ -29,4 +29,9 @@ const rangeValue = ref(['', ''])
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder.vue b/examples/sites/demos/pc/app/time-picker/placeholder.vue
index ba1f9b6585..727c8061d6 100644
--- a/examples/sites/demos/pc/app/time-picker/placeholder.vue
+++ b/examples/sites/demos/pc/app/time-picker/placeholder.vue
@@ -37,4 +37,9 @@ export default {
 .demo-date-picker-wrap {
   width: 182px;
 }
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue
index 8927cba723..ff77c750bd 100644
--- a/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue
@@ -1,14 +1,17 @@
 <template>
   <div>
-    <p>场景1：通过 setCurrentKey(key:string|number) 设置当前节点</p>
+    <p class="demo-node">场景1：通过 setCurrentKey(key:string|number) 设置当前节点</p>
     <tiny-button @click="setCurrentKey" title="点击设置当前节点">setCurrentKey</tiny-button>
-    <p>场景2：通过 setCurrentNode(node:ITreeNode) 设置当前节点</p>
+    <br />
+    <p class="demo-node">场景2：通过 setCurrentNode(node:ITreeNode) 设置当前节点</p>
     <tiny-button @click="setCurrentNode" title="点击设置当前节点">setCurrentNode</tiny-button>
-    <p>
+    <br />
+    <p class="demo-node">
       场景3：通过 getCurrentKey() 获取当前节点的 key 为：<span class="current-node-key">{{ currentKey }}</span>
     </p>
     <tiny-button @click="getCurrentKey" title="点击获取当前节点的 key">getCurrentKey</tiny-button>
-    <p>
+    <br />
+    <p class="demo-node">
       场景4：通过 getCurrentNode() 获取当前节点的数据为：<span class="current-node">{{ currentNode }}</span>
     </p>
     <tiny-button @click="getCurrentNode" title="点击获取当前节点数据">getCurrentNode</tiny-button>
@@ -161,4 +164,7 @@ p {
   font-size: 14px;
   line-height: 1.5;
 }
+.demo-node {
+  margin-bottom: 4px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/current-node.vue b/examples/sites/demos/pc/app/tree-menu/current-node.vue
index 3c929a1d6f..51f326041c 100644
--- a/examples/sites/demos/pc/app/tree-menu/current-node.vue
+++ b/examples/sites/demos/pc/app/tree-menu/current-node.vue
@@ -1,14 +1,17 @@
 <template>
   <div>
-    <p>场景1：通过 setCurrentKey(key:string|number) 设置当前节点</p>
+    <p class="demo-node">场景1：通过 setCurrentKey(key:string|number) 设置当前节点</p>
     <tiny-button @click="setCurrentKey" title="点击设置当前节点">setCurrentKey</tiny-button>
-    <p>场景2：通过 setCurrentNode(node:ITreeNode) 设置当前节点</p>
+    <br />
+    <p class="demo-node">场景2：通过 setCurrentNode(node:ITreeNode) 设置当前节点</p>
     <tiny-button @click="setCurrentNode" title="点击设置当前节点">setCurrentNode</tiny-button>
-    <p>
+    <br />
+    <p class="demo-node">
       场景3：通过 getCurrentKey() 获取当前节点的 key 为：<span class="current-node-key">{{ currentKey }}</span>
     </p>
     <tiny-button @click="getCurrentKey" title="点击获取当前节点的 key">getCurrentKey</tiny-button>
-    <p>
+    <br />
+    <p class="demo-node">
       场景4：通过 getCurrentNode() 获取当前节点的数据为：<span class="current-node">{{ currentNode }}</span>
     </p>
     <tiny-button @click="getCurrentNode" title="点击获取当前节点数据">getCurrentNode</tiny-button>
@@ -170,4 +173,7 @@ p {
   font-size: 14px;
   line-height: 1.5;
 }
+.demo-node {
+  margin-bottom: 4px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue
index 53b5af91da..5436e92d16 100644
--- a/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu :search-icon="tinyIconCalendar" :prefix-icon="tinyIconDoubleRight"></tiny-tree-menu>
+  <tiny-tree-menu :search-icon="tinyIconCalendar" :suffix-icon="tinyIconDoubleRight"></tiny-tree-menu>
 </template>
 
 <script setup>
diff --git a/examples/sites/demos/pc/app/tree-menu/custom-icon.vue b/examples/sites/demos/pc/app/tree-menu/custom-icon.vue
index 34ab18a193..20d72c4086 100644
--- a/examples/sites/demos/pc/app/tree-menu/custom-icon.vue
+++ b/examples/sites/demos/pc/app/tree-menu/custom-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu :search-icon="tinyIconCalendar" :prefix-icon="tinyIconDoubleRight"></tiny-tree-menu>
+  <tiny-tree-menu :search-icon="tinyIconCalendar" :suffix-icon="tinyIconDoubleRight"></tiny-tree-menu>
 </template>
 
 <script>
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
index bc220ae175..74b38c2895 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：静态数据</p>
     <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <br />
     <p>场景2：服务端数据</p>
     <tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource.vue b/examples/sites/demos/pc/app/tree-menu/data-resource.vue
index 39cd2d4fa1..71a93618b0 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：静态数据</p>
     <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <br />
     <p>场景2：服务端数据</p>
     <tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
index cba4e7615a..60eb8dd0fe 100644
--- a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：默认点击文字展开菜单</p>
     <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <br /><br />
     <p>场景2：点击展开按钮才可展开菜单</p>
     <tiny-tree-menu :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
index 083cbeab5f..5a038d41c3 100644
--- a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
+++ b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：默认点击文字展开菜单</p>
     <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <br /><br />
     <p>场景2：点击展开按钮才可展开菜单</p>
     <tiny-tree-menu :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
index c2525d5118..3765ea92b4 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：节点可勾选 + 默认选中</p>
     <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <br /><br />
     <p>场景2：节点可勾选 + 父子级不相关联</p>
     <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue b/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
index 48366ac51f..d77f8f6df5 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：节点可勾选 + 默认选中</p>
     <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <br /><br />
     <p>场景2：节点可勾选 + 父子级不相关联</p>
     <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
index 1a3b76c2eb..e8530c0cc9 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：默认 可过滤 + 原生 title 属性提示</p>
     <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <br /><br />
     <p>场景2：不可过滤 + 不设置原生 title 属性</p>
     <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter.vue b/examples/sites/demos/pc/app/tree-menu/show-filter.vue
index dcc996f557..e8dda84a7c 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-filter.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-filter.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：默认 可过滤 + 原生 title 属性提示</p>
     <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <br /><br />
     <p>场景2：不可过滤 + 不设置原生 title 属性</p>
     <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
index 3b08468982..bb2ae7cfe5 100644
--- a/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：文字超长省略显示</p>
     <tiny-tree-menu :data="treeData" ellipsis></tiny-tree-menu>
+    <br />
     <p>场景2：文字超长换行显示</p>
     <tiny-tree-menu :data="treeData" wrap></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue b/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
index 1fdc41efd2..8f80fc8c9a 100644
--- a/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
+++ b/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
@@ -2,6 +2,7 @@
   <div>
     <p>场景1：文字超长点点点</p>
     <tiny-tree-menu :data="treeData" ellipsis></tiny-tree-menu>
+    <br /><br />
     <p>场景2：文字超长换行</p>
     <tiny-tree-menu :data="treeData" wrap></tiny-tree-menu>
   </div>
diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
index 303fc1208a..ba50a319e6 100644
--- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
+++ b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
@@ -156,9 +156,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>search-icon</code> 属性自定义搜索图标， <code>prefix-icon</code> 自定义前置图标。</p>\n',
+          '<p>通过 <code>search-icon</code> 属性设置自定义搜索图标。</p>\n <p>通过 <code>suffix-icon</code> 属性全局设置带图标树形菜单。</p>\n',
         'en-US':
-          '<p>Customize the search icon through the <code>search-icon</code> attribute, and through the <code>prefix-icon</code> attribute customize prefix icon.</p>\n'
+          '<p>Set a custom search icon through the <code>search icon</code> attribute .</p> \n  <code>suffix icon</code> attribute global settings with icon tree menu</p>\n'
       },
       codeFiles: ['custom-icon.vue']
     },
diff --git a/examples/sites/demos/pc/app/tree-select/basic-usage.vue b/examples/sites/demos/pc/app/tree-select/basic-usage.vue
index 322f0e7beb..b6c874348f 100644
--- a/examples/sites/demos/pc/app/tree-select/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree-select/basic-usage.vue
@@ -11,6 +11,7 @@ export default {
   },
   data() {
     return {
+      value: '',
       treeOp: {
         data: [
           {
diff --git a/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue
new file mode 100644
index 0000000000..099396ac3d
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <p>场景1： collapse-tags 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
+    <p>场景2： hover-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景3： click-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/collapse-tags.vue b/examples/sites/demos/pc/app/tree-select/collapse-tags.vue
new file mode 100644
index 0000000000..926c8a8f78
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/collapse-tags.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <p>场景1： collapse-tags 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
+    <p>场景2： hover-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
+    <br />
+    <br />
+    <p>场景3： click-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: [],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue b/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue
new file mode 100644
index 0000000000..101da0ea4b
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <p>场景1：一键复制所有标签</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <p>场景2：设置复制文本分隔符</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <p>粘贴至此处：</p>
+    <tiny-input v-model="inputVal" type="text"></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect, Input as TinyInput } from '@opentiny/vue'
+
+const value = ref('')
+const value2 = ref([])
+const inputVal = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select,
+.tiny-input {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/copy.vue b/examples/sites/demos/pc/app/tree-select/copy.vue
new file mode 100644
index 0000000000..86938c7802
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/copy.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <p>场景1：一键复制所有标签</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <p>场景2：设置复制文本分隔符</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <p>粘贴至此处：</p>
+    <tiny-input v-model="inputVal" type="text"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TreeSelect, Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect,
+    TinyInput: Input
+  },
+  data() {
+    return {
+      value1: '',
+      value2: [],
+      inputVal: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select,
+.tiny-input {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue b/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue
new file mode 100644
index 0000000000..a4c7395161
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <p>场景1： 未选择</p>
+    <tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景2： 单选</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景3： 多选</p>
+    <tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value1 = ref('')
+const value2 = ref(1)
+const value3 = ref([1, 4, 9, 10])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/disabled.vue b/examples/sites/demos/pc/app/tree-select/disabled.vue
new file mode 100644
index 0000000000..99b5c3968c
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/disabled.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>场景1： 未选择</p>
+    <tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景2： 单选</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
+    <p>场景3： 多选</p>
+    <tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value1: '',
+      value2: 1,
+      value3: [1, 4, 9, 10],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue b/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue
new file mode 100644
index 0000000000..2f323ade3f
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue
@@ -0,0 +1,55 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      val: 1,
+      text: '一级 1',
+      children: [
+        {
+          val: 4,
+          text: '二级 1-1',
+          children: [
+            {
+              val: 9,
+              text: '三级 1-1-1'
+            },
+            {
+              val: 10,
+              text: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      val: 2,
+      text: '一级 2',
+      children: [
+        {
+          val: 5,
+          text: '二级 2-1'
+        },
+        {
+          val: 6,
+          text: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/map-field.vue b/examples/sites/demos/pc/app/tree-select/map-field.vue
new file mode 100644
index 0000000000..90ac8fa26d
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/map-field.vue
@@ -0,0 +1,62 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            val: 1,
+            text: '一级 1',
+            children: [
+              {
+                val: 4,
+                text: '二级 1-1',
+                children: [
+                  {
+                    val: 9,
+                    text: '三级 1-1-1'
+                  },
+                  {
+                    val: 10,
+                    text: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            val: 2,
+            text: '一级 2',
+            children: [
+              {
+                val: 5,
+                text: '二级 2-1'
+              },
+              {
+                val: 6,
+                text: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue b/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue
new file mode 100644
index 0000000000..a14520c8be
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue
@@ -0,0 +1,55 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/multiple.vue b/examples/sites/demos/pc/app/tree-select/multiple.vue
new file mode 100644
index 0000000000..3ffd2e52f8
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/multiple.vue
@@ -0,0 +1,62 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: [],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue b/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue
new file mode 100644
index 0000000000..ebe4b34baf
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue
@@ -0,0 +1,61 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    placeholder="请选择一个选项"
+    name="inputName"
+    autocomplete
+  ></tiny-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/native-properties.vue b/examples/sites/demos/pc/app/tree-select/native-properties.vue
new file mode 100644
index 0000000000..de7e9cad82
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/native-properties.vue
@@ -0,0 +1,68 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    placeholder="请选择一个选项"
+    name="inputName"
+    autocomplete
+  ></tiny-tree-select>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue b/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue
new file mode 100644
index 0000000000..8186532efa
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <p>场景1：不挂载在 body 元素上</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" :popper-append-to-body="false"></tiny-tree-select>
+    <p>场景2：自定义类名，修改阴影样式</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
+    <p>场景3：从上方弹出面板</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
+
+<style>
+.drop {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/panel-style.vue b/examples/sites/demos/pc/app/tree-select/panel-style.vue
new file mode 100644
index 0000000000..d01c3253a0
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/panel-style.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <p>场景1：不挂载在 body 元素上</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" :popper-append-to-body="false"></tiny-tree-select>
+    <p>场景2：自定义类名，修改阴影样式</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
+    <p>场景3：从上方弹出面板</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
+
+<style>
+.drop {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue b/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue
new file mode 100644
index 0000000000..7ca9c6bb10
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>场景1：自定义图标 + 自定义样式</p>
+    <tiny-tree-select
+      v-model="value"
+      :tree-op="treeOp"
+      :dropdown-icon="tinyIconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-tree-select>
+    <p>场景2：标签类型</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
+    <p>场景3：下划线类型</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" input-box-type="underline"></tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+const tinyIconPopup = iconPopup()
+const value = ref('')
+const value2 = ref([])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/reference-style.vue b/examples/sites/demos/pc/app/tree-select/reference-style.vue
new file mode 100644
index 0000000000..686f81608f
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/reference-style.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <p>场景1：自定义图标 + 自定义样式</p>
+    <tiny-tree-select
+      v-model="value"
+      :tree-op="treeOp"
+      :dropdown-icon="tinyIconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-tree-select>
+    <p>场景2：标签类型</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
+    <p>场景3：下划线类型</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" input-box-type="underline"></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      tinyIconPopup: iconPopup(),
+      value: '',
+      value2: [],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/size-composition-api.vue b/examples/sites/demos/pc/app/tree-select/size-composition-api.vue
new file mode 100644
index 0000000000..46552bca83
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/size-composition-api.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <p>medium</p>
+    <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
+    <p>默认</p>
+    <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>mini</p>
+    <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/size.vue b/examples/sites/demos/pc/app/tree-select/size.vue
new file mode 100644
index 0000000000..e6c3071267
--- /dev/null
+++ b/examples/sites/demos/pc/app/tree-select/size.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>medium</p>
+    <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
+    <p>默认</p>
+    <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>mini</p>
+    <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: [],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js b/examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js
index 774ed3c8d5..4b566d9c7a 100644
--- a/examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js
+++ b/examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js
@@ -1,6 +1,9 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    experimental: '3.17.0'
+  },
   demos: [
     {
       demoId: 'basic-usage',
@@ -13,6 +16,127 @@ export default {
         'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'multiple',
+      name: {
+        'zh-CN': '多选',
+        'en-US': 'Multiple'
+      },
+      desc: {
+        'zh-CN': `通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组，默认选中值会以标签形式展示。<br>`,
+        'en-US': `Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag.<br>`
+      },
+      codeFiles: ['multiple.vue']
+    },
+    {
+      demoId: 'collapse-tags',
+      name: {
+        'zh-CN': '折叠标签',
+        'en-US': 'Collapse tags'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, <code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
+        'en-US':
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
+      },
+      codeFiles: ['collapse-tags.vue']
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code> 属性设置输入框尺寸，可选值：medium / small / mini 。</p>',
+        'en-US':
+          '<p>Set the input box size through the <code>size</code> attribute, with optional values of medium / small / mini.</p>'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>disabled</code> 属性设置禁用状态。</p>\n',
+        'en-US':
+          '<p>Set the disabled status of the dropdown or dropdown item through the <code>disabled</code> attribute. </p>\n'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'map-field',
+      name: {
+        'zh-CN': '映射字段',
+        'en-US': 'Map Fields'
+      },
+      desc: {
+        'zh-CN': '通过 <code>text-field</code> 设置显示文本字段，<code>value-field</code>设置绑定值字段。',
+        'en-US':
+          '<p>Set the display text field by <code>text-field</code>, and set the binding value field by <code>value-field</code>. </p>\n'
+      },
+      codeFiles: ['map-field.vue']
+    },
+    {
+      demoId: 'reference-style',
+      name: {
+        'zh-CN': '触发源样式',
+        'en-US': 'Reference type'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式，<code>tag-type</code> 属性设置标签类型（同 Tag 组件的 type 属性），<code>input-box-type</code> 属性设置输入框类型。</p>\n',
+        'en-US':
+          '<p>Set the label type through the <code>tag-type</code> attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
+      },
+      codeFiles: ['reference-style.vue']
+    },
+    {
+      demoId: 'panel-style',
+      name: {
+        'zh-CN': '下拉面板样式',
+        'en-US': 'Panel style'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>popper-append-to-body</code> 设置是否将弹框 dom 元素插入至 body 元素，默认为 true，<code>popper-class</code> 属性设置下拉弹框的类名，可自定义样式，<code>placement</code>设置弹出位置。</p>\n',
+        'en-US':
+          '<p>You can customize the style by setting the class name of the dropdown pop-up box through the <code>popper-class</code> attribute <code>placement</code> set the pop-up position <code>popper-append-to-body</code> set whether to insert the pop-up dom element into the body element, default to true. </p>\n'
+      },
+      codeFiles: ['panel-style.vue']
+    },
+    {
+      demoId: 'copy',
+      name: {
+        'zh-CN': '可复制',
+        'en-US': 'Copyable'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>copyable</code> 设置启用一键复制所有标签的文本内容并以逗号分隔，<code>text-split</code> 自定义复制文本的分隔符。</p>\n',
+        'en-US':
+          '<p>When setting radio searchable through the <code>allow-copy</code> attribute, the mouse can slide to select and copy the content of the input box. </p>\n'
+      },
+      codeFiles: ['copy.vue']
+    },
+    {
+      demoId: 'native-properties',
+      name: {
+        'zh-CN': '原生属性',
+        'en-US': 'Native properties'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> 属性设置下拉组件内置 Input 的原生属性。</p>\n',
+        'en-US':
+          '<p>Set the native properties of the built-in Input in the dropdown component through the <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> attribute settings.</p>\n'
+      },
+      codeFiles: ['native-properties.vue']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue
index 93a101af99..5b51f297b8 100644
--- a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue
@@ -2,7 +2,13 @@
   <tiny-grid :data="tableData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="公司员工数" :renderer="renderUserHead"></tiny-grid-column>
+    <tiny-grid-column
+      field="employees"
+      title="公司员工数"
+      :renderer="renderUserHead"
+      class-name="demo-gird"
+      width="230"
+    ></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     <tiny-grid-column
@@ -125,3 +131,14 @@ function renderUserHead(h, { row }) {
   margin-right: 10px;
 }
 </style>
+
+<style>
+.demo-gird .tiny-grid-cell span {
+  display: flex;
+  align-items: center;
+  margin: 8px 4px;
+}
+.demo-gird .demo-user-head {
+  margin-right: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue
index c32947701c..c24b09b88b 100644
--- a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue
+++ b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue
@@ -2,7 +2,13 @@
   <tiny-grid :data="tableData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="公司员工数" :renderer="renderUserHead"></tiny-grid-column>
+    <tiny-grid-column
+      field="employees"
+      title="公司员工数"
+      :renderer="renderUserHead"
+      class-name="demo-gird"
+      width="230"
+    ></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     <tiny-grid-column
@@ -134,3 +140,14 @@ export default {
   margin-right: 10px;
 }
 </style>
+
+<style>
+.demo-gird .tiny-grid-cell span {
+  display: flex;
+  align-items: center;
+  margin: 8px 4px;
+}
+.demo-gird .demo-user-head {
+  margin-right: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/batch-composition-api.vue b/examples/sites/demos/pc/app/user/batch-composition-api.vue
index 72cb9cedf8..87dd67120f 100644
--- a/examples/sites/demos/pc/app/user/batch-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/batch-composition-api.vue
@@ -1,13 +1,22 @@
 <template>
   <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
+  <br />
   <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
+  <br />
 </template>
 
 <script setup>
diff --git a/examples/sites/demos/pc/app/user/batch.vue b/examples/sites/demos/pc/app/user/batch.vue
index b0885e5e71..138c7a447c 100644
--- a/examples/sites/demos/pc/app/user/batch.vue
+++ b/examples/sites/demos/pc/app/user/batch.vue
@@ -1,13 +1,21 @@
 <template>
   <div>
     <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
+    <br />
     <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
index 6edda50f7b..19d828716d 100644
--- a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
@@ -20,3 +20,11 @@ import { User as TinyUser } from '@opentiny/vue'
 const user1 = ref('test1,test2,test3')
 const user2 = ref('test1,test10')
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/cache-users.vue b/examples/sites/demos/pc/app/user/cache-users.vue
index adba865fce..8f6eae4fa6 100644
--- a/examples/sites/demos/pc/app/user/cache-users.vue
+++ b/examples/sites/demos/pc/app/user/cache-users.vue
@@ -28,3 +28,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
index 911aae3769..416d4f21e5 100644
--- a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
@@ -14,7 +14,7 @@ import { User as TinyUser, Modal } from '@opentiny/vue'
 const user = ref('441047913162396')
 const service = ref({
   fetchSuggestUser: getSuggestUser,
-  fetchW3Accounts: fetchW3Accounts
+  fetchW3Accounts
 })
 
 function getSuggestUser(userCN) {
@@ -150,3 +150,11 @@ function fetchW3Accounts(userId) {
   })
 }
 </script>
+
+<style scoped>
+.user-value {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-service.vue b/examples/sites/demos/pc/app/user/custom-service.vue
index e0257b3384..3234032959 100644
--- a/examples/sites/demos/pc/app/user/custom-service.vue
+++ b/examples/sites/demos/pc/app/user/custom-service.vue
@@ -158,3 +158,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.user-value {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-sort.vue b/examples/sites/demos/pc/app/user/custom-sort.vue
index 40e191a061..22819c653d 100644
--- a/examples/sites/demos/pc/app/user/custom-sort.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort.vue
@@ -181,3 +181,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
index 8c563bd0ce..8b1b0ee769 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
+    <br />
     {{ user }}
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
index 1561e50092..d6e976758a 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
+    <br />
     {{ user }}
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
index 926772c3d6..75886f578c 100644
--- a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
@@ -15,3 +15,11 @@ import { User as TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-select-size.vue b/examples/sites/demos/pc/app/user/user-select-size.vue
index efdf8034b2..0cfffdb7ab 100644
--- a/examples/sites/demos/pc/app/user/user-select-size.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size.vue
@@ -23,3 +23,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/value-field-composition-api.vue b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
index 79308b7c6c..237fff0985 100644
--- a/examples/sites/demos/pc/app/user/value-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
@@ -11,3 +11,11 @@ import { User as TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/value-field.vue b/examples/sites/demos/pc/app/user/value-field.vue
index 9d7e754515..69ba30be60 100644
--- a/examples/sites/demos/pc/app/user/value-field.vue
+++ b/examples/sites/demos/pc/app/user/value-field.vue
@@ -19,3 +19,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/value-split-composition-api.vue b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
index a9ccbebec5..a34c6c812a 100644
--- a/examples/sites/demos/pc/app/user/value-split-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
@@ -11,3 +11,11 @@ import { User as TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/value-split.vue b/examples/sites/demos/pc/app/user/value-split.vue
index 589a7c8247..a949b396f9 100644
--- a/examples/sites/demos/pc/app/user/value-split.vue
+++ b/examples/sites/demos/pc/app/user/value-split.vue
@@ -19,3 +19,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index 42ca28db9a..5bdb21718f 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -28,7 +28,6 @@ const docMenusChildren = [
       target: ['inner']
     }
   },
-  { 'title': '创建项目', 'titleEn': 'tinyStage', 'key': 'tiny-stage' },
   { 'title': '国际化', 'titleEn': 'i18n', 'key': 'i18n' },
   {
     'title': '主题配置',
@@ -61,7 +60,7 @@ export const docMenus = [
   {
     'label': '使用指南',
     'labelEn': 'Usage Guidelines',
-    'key': 'docs_usage_guidelines',
+    'key': 'docs-usage-guidelines',
     'children': docMenusChildren.filter((item) => {
       if (!item.showScene) {
         return true
@@ -77,7 +76,7 @@ export const cmpMenus = [
   {
     'label': '基础',
     'labelEn': 'Basic',
-    'key': 'cmp_frame_style',
+    'key': 'cmp-frame-style',
     'children': [
       { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
       { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
@@ -93,7 +92,7 @@ export const cmpMenus = [
   {
     'label': '导航',
     'labelEn': 'Navigation',
-    'key': 'cmp_navigation_components',
+    'key': 'cmp-navigation-components',
     'children': [
       { 'nameCn': '动作菜单', 'name': 'ActionMenu', 'key': 'action-menu' },
       { 'nameCn': '锚点', 'name': 'Anchor', 'key': 'anchor' },
@@ -112,7 +111,7 @@ export const cmpMenus = [
   {
     'label': '表单',
     'labelEn': 'Form',
-    'key': 'cmp_form_components',
+    'key': 'cmp-form-components',
     'children': [
       { 'nameCn': '自动完成', 'name': 'AutoComplete', 'key': 'autocomplete' },
       {
@@ -129,6 +128,12 @@ export const cmpMenus = [
       { 'nameCn': '日期选择器', 'name': 'DatePicker', 'key': 'date-picker' },
       { 'nameCn': '下拉时间', 'name': 'DropTimes', 'key': 'drop-times' },
       { 'nameCn': '文件上传', 'name': 'FileUpload', 'key': 'file-upload' },
+      {
+        'nameCn': '富文本',
+        'name': 'FluentEditor',
+        'key': 'fluent-editor',
+        'mark': { 'type': 'warning', 'text': 'Beta' }
+      },
       { 'nameCn': '表单', 'name': 'Form', 'key': 'form' },
       { 'nameCn': '输入框', 'name': 'Input', 'key': 'input' },
       { 'nameCn': ' IP地址输入框', 'name': 'IpAddress', 'key': 'ip-address' },
@@ -164,7 +169,7 @@ export const cmpMenus = [
   {
     'label': '表格',
     'labelEn': 'Table',
-    'key': 'cmp_table_components',
+    'key': 'cmp-table-components',
     'children': [
       { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
       { 'nameCn': '序号列', 'name': '', 'key': 'grid-serial-column' },
@@ -208,12 +213,12 @@ export const cmpMenus = [
   {
     'label': '数据展示',
     'labelEn': 'Data Display',
-    'key': 'cmp_data_components',
+    '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': 'Card', 'key': 'card', 'mark': { 'type': 'danger', 'text': 'New' } },
       { 'nameCn': '走马灯', 'name': 'Carousel', 'key': 'carousel' },
       { 'nameCn': '折叠面板', 'name': 'Collapse', 'key': 'collapse' },
       { 'nameCn': '流程图', 'name': 'FlowChart', 'key': 'flowchart' },
@@ -225,13 +230,15 @@ export const cmpMenus = [
         'nameCn': '思维导图',
         'name': 'MindMap',
         'key': 'mind-map',
-        'mark': { 'text': 'New' }
+        'mark': { 'type': 'danger', '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': '时间线AUI', 'name': 'TimelineNew', 'key': 'time-line-new' },
       { 'nameCn': '树形控件', 'name': 'Tree', 'key': 'tree' },
       { 'nameCn': '用户头像', 'name': 'UserHead', 'key': 'user-head' },
       { 'nameCn': '流程图', 'name': 'Wizard', 'key': 'wizard' }
@@ -240,7 +247,7 @@ export const cmpMenus = [
   {
     'label': '反馈',
     'labelEn': 'Feedback',
-    'key': 'cmp_tips_components',
+    'key': 'cmp-tips-components',
     'children': [
       { 'nameCn': '警告', 'name': 'Alert', 'key': 'alert' },
       { 'nameCn': '对话框', 'name': 'DialogBox', 'key': 'dialog-box' },
@@ -251,14 +258,14 @@ export const cmpMenus = [
       { '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': 'Skeleton', 'key': 'skeleton', 'mark': { 'type': 'danger', 'text': 'New' } },
       { 'nameCn': '文字提示', 'name': 'Tooltip', 'key': 'tooltip' }
     ]
   },
   {
     'label': '图表',
     'labelEn': 'Chart',
-    'key': 'cmp_chart_components',
+    'key': 'cmp-chart-components',
     'children': [
       { 'nameCn': '基本用法', 'name': 'Basic Usage', 'key': 'chart' },
       { 'nameCn': '事件监听', 'name': 'Event Listening', 'key': 'chart-events' },
@@ -292,7 +299,7 @@ export const cmpMenus = [
   {
     'label': '其他',
     'labelEn': 'Other',
-    'key': 'cmp_other_components',
+    'key': 'cmp-other-components',
     'children': [
       { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
       { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
@@ -307,6 +314,12 @@ export const cmpMenus = [
       { 'nameCn': '联系人', 'name': 'UserContact', 'key': 'user-contact' },
       { 'nameCn': '水印', 'name': 'Watermark', 'key': 'watermark' }
     ]
+  },
+  {
+    'label': '自定义指令',
+    'labelEn': 'Custom Instruction',
+    'key': 'directives-custom-instruction',
+    'children': [{ 'nameCn': '超出隐藏', 'name': 'AutoTip', 'key': 'directives-auto-tip' }]
   }
 ]
 
@@ -317,7 +330,7 @@ if (envTarget === 'inner' || showBusiness) {
   cmpMenus.splice(8, 0, {
     'label': '业务组件',
     'labelEn': 'Business Components',
-    'key': 'cmp_business_components',
+    'key': 'cmp-business-components',
     'children': [
       { 'nameCn': '金额', 'name': 'Amount', 'key': 'amount' },
       { 'nameCn': '片区', 'name': 'Area', 'key': 'area' },
diff --git a/examples/sites/demos/pc/overviewimage/accordion.svg b/examples/sites/demos/pc/overviewimage/accordion.svg
deleted file mode 100644
index b8cf678257..0000000000
--- a/examples/sites/demos/pc/overviewimage/accordion.svg
+++ /dev/null
@@ -1,120 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Accordion 手风琴</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="53.8833127%" x2="128.792906%" y2="40.1095556%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.0131093%" x2="128.792906%" y2="44.8727936%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.0131093%" x2="128.792906%" y2="44.8727936%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <polygon id="path-13" points="85 55 97 55 91 62"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-15">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <polygon id="path-16" points="85 33 97 33 91 40"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-17">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-18">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.4081846%" x2="128.792906%" y2="48.960391%" id="linearGradient-19">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1873.000000, -2967.000000)">
-            <g id="Accordion-手风琴" transform="translate(1873.000000, 2967.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M26,71 L99,71 C100.104569,71 101,71.8954305 101,73 L101,94 C101,95.1045695 100.104569,96 99,96 L26,96 C24.8954305,96 24,95.1045695 24,94 L24,73 C24,71.8954305 24.8954305,71 26,71 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <rect id="矩形-2" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="24" y="49" width="77" height="18" rx="4"></rect>
-                <rect id="矩形-2备份-2" fill="url(#linearGradient-11)" opacity="0.303770519" x="24" y="27" width="77" height="18" rx="4"></rect>
-                <g id="形状结合" transform="translate(91.000000, 58.500000) rotate(-180.000000) translate(-91.000000, -58.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                    <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M92.5602428,57.0419994 L91,58.8622826 L89.4397572,57.0419994 L92.5602428,57.0419994 Z" stroke-linejoin="square"></path>
-                </g>
-                <g id="形状结合备份-37" opacity="0.602809361" transform="translate(91.000000, 36.500000) rotate(-180.000000) translate(-91.000000, -36.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-16"></use>
-                    <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M91,36.1377174 L92.5602428,37.9580006 L89.4397572,37.9580006 L91,36.1377174 Z" stroke-linejoin="square"></path>
-                </g>
-                <path d="M32,77 L86,77 C87.1045695,77 88,77.8954305 88,79 C88,80.1045695 87.1045695,81 86,81 L32,81 C30.8954305,81 30,80.1045695 30,79 C30,77.8954305 30.8954305,77 32,77 Z" id="形状结合备份" fill="#5073E5"></path>
-                <path d="M32,86 L66,86 C67.1045695,86 68,86.8954305 68,88 C68,89.1045695 67.1045695,90 66,90 L32,90 C30.8954305,90 30,89.1045695 30,88 C30,86.8954305 30.8954305,86 32,86 Z" id="形状结合备份-35" fill="url(#linearGradient-19)" opacity="0.303770519"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/action-menu.svg b/examples/sites/demos/pc/overviewimage/action-menu.svg
index 6ef441ba5a..7b260fcda1 100644
--- a/examples/sites/demos/pc/overviewimage/action-menu.svg
+++ b/examples/sites/demos/pc/overviewimage/action-menu.svg
@@ -2,56 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Actionmenu 菜单按钮</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="64.7763948%" x2="128.792906%" y2="12.3658657%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="64.7763948%" x2="128.792906%" y2="12.3658657%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-13" points="84 39 96 39 90 46"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
+        <polygon id="path-5" points="84 39 96 39 90 46"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -59,55 +27,45 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-15">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-7">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <path d="M44,56 L100,56 C101.104569,56 102,56.8954305 102,58 C102,59.1045695 101.104569,60 100,60 L44,60 C42.8954305,60 42,59.1045695 42,58 C42,56.8954305 42.8954305,56 44,56 Z" id="path-16"></path>
-        <filter x="-6.7%" y="-50.0%" width="113.3%" height="300.0%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M44,56 L100,56 C101.104569,56 102,56.8954305 102,58 C102,59.1045695 101.104569,60 100,60 L44,60 C42.8954305,60 42,59.1045695 42,58 C42,56.8954305 42.8954305,56 44,56 Z" id="path-8"></path>
+        <filter x="-6.7%" y="-50.0%" width="113.3%" height="300.0%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="50.876195%" x2="128.792906%" y2="47.768411%" id="linearGradient-18">
+        <linearGradient x1="44.0988019%" y1="50.876195%" x2="128.792906%" y2="47.768411%" id="linearGradient-10">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.3187769%" x2="128.792906%" y2="49.1881042%" id="linearGradient-19">
+        <linearGradient x1="44.0988019%" y1="50.3187769%" x2="128.792906%" y2="49.1881042%" id="linearGradient-11">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1481.000000, -2967.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1481.000000, -2967.000000)">
             <g id="Actionmenu-菜单按钮" transform="translate(1481.000000, 2967.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M44,56 L100,56 C101.104569,56 102,56.8954305 102,58 L102,92 C102,93.1045695 101.104569,94 100,94 L44,94 C42.8954305,94 42,93.1045695 42,92 L42,58 C42,56.8954305 42.8954305,56 44,56 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <rect id="矩形-2" fill="url(#linearGradient-10)" opacity="0.303770519" x="24" y="32" width="36" height="18" rx="4"></rect>
-                <rect id="矩形-2备份" stroke="url(#linearGradient-10)" fill="url(#linearGradient-11)" x="66" y="32" width="36" height="18" rx="4"></rect>
+                <g id="编组"></g>
+                <path d="M44,56 L100,56 C101.104569,56 102,56.8954305 102,58 L102,92 C102,93.1045695 101.104569,94 100,94 L44,94 C42.8954305,94 42,93.1045695 42,92 L42,58 C42,56.8954305 42.8954305,56 44,56 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                <rect id="矩形-2" fill="url(#linearGradient-2)" opacity="0.303770519" x="24" y="32" width="36" height="18" rx="4"></rect>
+                <rect id="矩形-2备份" stroke="url(#linearGradient-2)" fill="url(#linearGradient-3)" x="66" y="32" width="36" height="18" rx="4"></rect>
                 <g id="形状结合" transform="translate(90.000000, 42.500000) rotate(-360.000000) translate(-90.000000, -42.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                    <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M91.5602428,41.0419994 L90,42.8622826 L88.4397572,41.0419994 L91.5602428,41.0419994 Z" stroke-linejoin="square"></path>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
+                    <path stroke="url(#linearGradient-4)" stroke-width="4.0839988" d="M91.5602428,41.0419994 L90,42.8622826 L88.4397572,41.0419994 L91.5602428,41.0419994 Z" stroke-linejoin="square"></path>
                 </g>
                 <g id="形状结合备份">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                 </g>
-                <path d="M52,67 L74,67 C75.1045695,67 76,67.8954305 76,69 C76,70.1045695 75.1045695,71 74,71 L52,71 C50.8954305,71 50,70.1045695 50,69 C50,67.8954305 50.8954305,67 52,67 Z" id="形状结合备份-35" fill="url(#linearGradient-18)" opacity="0.604724702"></path>
-                <path d="M52,78 L91,78 C92.1045695,78 93,78.8954305 93,80 C93,81.1045695 92.1045695,82 91,82 L52,82 C50.8954305,82 50,81.1045695 50,80 C50,78.8954305 50.8954305,78 52,78 Z" id="形状结合备份-36" fill="url(#linearGradient-19)" opacity="0.604724702"></path>
+                <path d="M52,67 L74,67 C75.1045695,67 76,67.8954305 76,69 C76,70.1045695 75.1045695,71 74,71 L52,71 C50.8954305,71 50,70.1045695 50,69 C50,67.8954305 50.8954305,67 52,67 Z" id="形状结合备份-35" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                <path d="M52,78 L91,78 C92.1045695,78 93,78.8954305 93,80 C93,81.1045695 92.1045695,82 91,82 L52,82 C50.8954305,82 50,81.1045695 50,80 C50,78.8954305 50.8954305,78 52,78 Z" id="形状结合备份-36" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
             </g>
         </g>
     </g>
diff --git a/examples/sites/demos/pc/overviewimage/actionmenu.svg b/examples/sites/demos/pc/overviewimage/actionmenu.svg
deleted file mode 100644
index 0d6f6b7a7e..0000000000
--- a/examples/sites/demos/pc/overviewimage/actionmenu.svg
+++ /dev/null
@@ -1,114 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Actionmenu 菜单按钮</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="64.7763948%" x2="128.792906%" y2="12.3658657%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <polygon id="path-13" points="84 39 96 39 90 46"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-15">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <path d="M44,56 L100,56 C101.104569,56 102,56.8954305 102,58 C102,59.1045695 101.104569,60 100,60 L44,60 C42.8954305,60 42,59.1045695 42,58 C42,56.8954305 42.8954305,56 44,56 Z" id="path-16"></path>
-        <filter x="-6.7%" y="-50.0%" width="113.3%" height="300.0%" filterUnits="objectBoundingBox" id="filter-17">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.876195%" x2="128.792906%" y2="47.768411%" id="linearGradient-18">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.3187769%" x2="128.792906%" y2="49.1881042%" id="linearGradient-19">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1481.000000, -2967.000000)">
-            <g id="Actionmenu-菜单按钮" transform="translate(1481.000000, 2967.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M44,56 L100,56 C101.104569,56 102,56.8954305 102,58 L102,92 C102,93.1045695 101.104569,94 100,94 L44,94 C42.8954305,94 42,93.1045695 42,92 L42,58 C42,56.8954305 42.8954305,56 44,56 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <rect id="矩形-2" fill="url(#linearGradient-10)" opacity="0.303770519" x="24" y="32" width="36" height="18" rx="4"></rect>
-                <rect id="矩形-2备份" stroke="url(#linearGradient-10)" fill="url(#linearGradient-11)" x="66" y="32" width="36" height="18" rx="4"></rect>
-                <g id="形状结合" transform="translate(90.000000, 42.500000) rotate(-360.000000) translate(-90.000000, -42.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                    <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M91.5602428,41.0419994 L90,42.8622826 L88.4397572,41.0419994 L91.5602428,41.0419994 Z" stroke-linejoin="square"></path>
-                </g>
-                <g id="形状结合备份">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
-                </g>
-                <path d="M52,67 L74,67 C75.1045695,67 76,67.8954305 76,69 C76,70.1045695 75.1045695,71 74,71 L52,71 C50.8954305,71 50,70.1045695 50,69 C50,67.8954305 50.8954305,67 52,67 Z" id="形状结合备份-35" fill="url(#linearGradient-18)" opacity="0.604724702"></path>
-                <path d="M52,78 L91,78 C92.1045695,78 93,78.8954305 93,80 C93,81.1045695 92.1045695,82 91,82 L52,82 C50.8954305,82 50,81.1045695 50,80 C50,78.8954305 50.8954305,78 52,78 Z" id="形状结合备份-36" fill="url(#linearGradient-19)" opacity="0.604724702"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/alert.svg b/examples/sites/demos/pc/overviewimage/alert.svg
index 9765eb75f3..7bad8a1223 100644
--- a/examples/sites/demos/pc/overviewimage/alert.svg
+++ b/examples/sites/demos/pc/overviewimage/alert.svg
@@ -2,86 +2,44 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Alert 警告</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-10" x="31" y="89" width="64" height="4" rx="2"></rect>
-        <filter x="-5.5%" y="-62.5%" width="110.9%" height="275.0%" filterUnits="objectBoundingBox" id="filter-11">
+        <rect id="path-2" x="31" y="89" width="64" height="4" rx="2"></rect>
+        <filter x="-5.5%" y="-62.5%" width="110.9%" height="275.0%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="55.2196589%" x2="128.792906%" y2="36.7060033%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="55.2196589%" x2="128.792906%" y2="36.7060033%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="55.2196589%" x2="128.792906%" y2="36.7060033%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="55.2196589%" x2="128.792906%" y2="36.7060033%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="80.7401014%" x2="128.792906%" y2="-28.2922439%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="80.7401014%" x2="128.792906%" y2="-28.2922439%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="80.7401014%" x2="128.792906%" y2="-28.2922439%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="80.7401014%" x2="128.792906%" y2="-28.2922439%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】" transform="translate(-1873.000000, -332.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1873.000000, -332.000000)">
             <g id="Alert-警告" transform="translate(1873.000000, 332.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="矩形">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
                 </g>
                 <g id="编组-20" transform="translate(37.000000, 30.000000)">
-                    <path d="M2.33518607,12.2679045 L2.60234337,12.4318712 L7.6115427,16.1583883 C8.33193126,16.6927437 8.5673309,17.7525653 8.15396569,18.6004974 C7.74060047,19.4484296 6.81535551,19.8036811 6.02195678,19.4190908 L5.75479948,19.2588506 L0.745600154,15.5323335 C0.0252115967,14.9979781 -0.210188043,13.9381565 0.203177172,13.0902243 C0.616542387,12.2422922 1.54178734,11.8870407 2.33518607,12.271631 L2.33518607,12.2679045 Z M51.7196723,12.9481013 C52.1664605,13.6963773 52.070854,14.6936824 51.4923202,15.3196927 L51.2582812,15.5322409 L46.2431605,19.2611582 L45.9756874,19.4215016 C45.2348752,19.7772388 44.371954,19.4923121 43.9241768,18.7441164 C43.4763996,17.9959206 43.5714642,16.9978272 44.1501835,16.3712473 L44.3842224,16.158699 L49.3993431,12.4297818 L49.6668162,12.2694383 C50.4082626,11.9131081 51.2721022,12.1986887 51.7196723,12.9481013 L51.7196723,12.9481013 Z M13.4179627,4.2575966 L13.6256534,4.49209713 L17.3344152,9.51710857 C17.8628275,10.2377594 17.6973705,11.2032512 16.9524713,11.7458672 C16.2075722,12.2884833 15.1278949,12.23 14.4601248,11.6108633 L14.2487254,11.3763628 L10.5399635,6.35135137 C9.9917184,5.63000182 10.15051,4.64902798 10.9044482,4.09965761 C11.6583865,3.55028723 12.7534252,3.61763553 13.4179627,4.25424659 L13.4179627,4.2575966 Z M40.9588818,4.00927892 C41.7044816,4.45785634 41.9886094,5.32364019 41.634092,6.06675529 L41.4745643,6.33483039 L37.7646184,11.3612385 L37.5568614,11.5958042 C36.9357374,12.186065 35.9346762,12.2874636 35.1842303,11.8361307 C34.4337845,11.3847977 34.1512984,10.5114484 34.5147057,9.76619163 L34.6779433,9.49811653 L38.3878893,4.47170846 L38.5993562,4.23714275 C39.2221816,3.65730679 40.2144128,3.56148515 40.9588818,4.00927892 L40.9588818,4.00927892 Z M26.4642845,9.61563087e-08 C27.1370125,-0.000274869375 27.7137638,0.589191313 27.8348548,1.40078576 L27.8571429,1.70827528 L27.8571429,8.54137561 C27.8584686,9.42622479 27.3086571,10.1658576 26.590138,10.245808 C25.8716189,10.3257584 25.2222507,9.7195597 25.0937143,8.84886513 L25.0714286,8.54137561 L25.0714286,1.70827528 C25.0714286,0.764820999 25.6950314,9.61563087e-08 26.4642845,9.61563087e-08 L26.4642845,9.61563087e-08 Z" id="形状" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
-                    <path d="M47.3571429,35.2326259 L47.3571429,53 L4.64285714,53 L4.64285714,35.2326259 C4.64285714,23.4957879 14.2047757,13.9812008 26,13.9812008 C37.7952243,13.9812008 47.3571429,23.4957879 47.3571429,35.2326259 Z" id="路径" stroke="url(#linearGradient-15)" fill="url(#linearGradient-14)"></path>
+                    <path d="M2.33518607,12.2679045 L2.60234337,12.4318712 L7.6115427,16.1583883 C8.33193126,16.6927437 8.5673309,17.7525653 8.15396569,18.6004974 C7.74060047,19.4484296 6.81535551,19.8036811 6.02195678,19.4190908 L5.75479948,19.2588506 L0.745600154,15.5323335 C0.0252115967,14.9979781 -0.210188043,13.9381565 0.203177172,13.0902243 C0.616542387,12.2422922 1.54178734,11.8870407 2.33518607,12.271631 L2.33518607,12.2679045 Z M51.7196723,12.9481013 C52.1664605,13.6963773 52.070854,14.6936824 51.4923202,15.3196927 L51.2582812,15.5322409 L46.2431605,19.2611582 L45.9756874,19.4215016 C45.2348752,19.7772388 44.371954,19.4923121 43.9241768,18.7441164 C43.4763996,17.9959206 43.5714642,16.9978272 44.1501835,16.3712473 L44.3842224,16.158699 L49.3993431,12.4297818 L49.6668162,12.2694383 C50.4082626,11.9131081 51.2721022,12.1986887 51.7196723,12.9481013 L51.7196723,12.9481013 Z M13.4179627,4.2575966 L13.6256534,4.49209713 L17.3344152,9.51710857 C17.8628275,10.2377594 17.6973705,11.2032512 16.9524713,11.7458672 C16.2075722,12.2884833 15.1278949,12.23 14.4601248,11.6108633 L14.2487254,11.3763628 L10.5399635,6.35135137 C9.9917184,5.63000182 10.15051,4.64902798 10.9044482,4.09965761 C11.6583865,3.55028723 12.7534252,3.61763553 13.4179627,4.25424659 L13.4179627,4.2575966 Z M40.9588818,4.00927892 C41.7044816,4.45785634 41.9886094,5.32364019 41.634092,6.06675529 L41.4745643,6.33483039 L37.7646184,11.3612385 L37.5568614,11.5958042 C36.9357374,12.186065 35.9346762,12.2874636 35.1842303,11.8361307 C34.4337845,11.3847977 34.1512984,10.5114484 34.5147057,9.76619163 L34.6779433,9.49811653 L38.3878893,4.47170846 L38.5993562,4.23714275 C39.2221816,3.65730679 40.2144128,3.56148515 40.9588818,4.00927892 L40.9588818,4.00927892 Z M26.4642845,9.61563087e-08 C27.1370125,-0.000274869375 27.7137638,0.589191313 27.8348548,1.40078576 L27.8571429,1.70827528 L27.8571429,8.54137561 C27.8584686,9.42622479 27.3086571,10.1658576 26.590138,10.245808 C25.8716189,10.3257584 25.2222507,9.7195597 25.0937143,8.84886513 L25.0714286,8.54137561 L25.0714286,1.70827528 C25.0714286,0.764820999 25.6950314,9.61563087e-08 26.4642845,9.61563087e-08 L26.4642845,9.61563087e-08 Z" id="形状" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)"></path>
+                    <path d="M47.3571429,35.2326259 L47.3571429,53 L4.64285714,53 L4.64285714,35.2326259 C4.64285714,23.4957879 14.2047757,13.9812008 26,13.9812008 C37.7952243,13.9812008 47.3571429,23.4957879 47.3571429,35.2326259 Z" id="路径" stroke="url(#linearGradient-7)" fill="url(#linearGradient-6)"></path>
                     <polygon id="路径" fill="#FFFFFF" fill-rule="nonzero" points="29.9464286 25.0375986 19.5 35.7565191 24.7232143 35.7565191 22.9821429 46.4754397 33.4285714 35.7565191 28.2053571 35.7529462"></polygon>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/amount.svg b/examples/sites/demos/pc/overviewimage/amount.svg
index 070722e658..ab4ef474f0 100644
--- a/examples/sites/demos/pc/overviewimage/amount.svg
+++ b/examples/sites/demos/pc/overviewimage/amount.svg
@@ -2,66 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Amount 金额</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="54.2092971%" x2="128.792906%" y2="39.279303%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="54.2092971%" x2="128.792906%" y2="39.279303%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="62.7226918%" y1="1.13686838e-11%" x2="38.9532509%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="62.7226918%" y1="1.13686838e-11%" x2="38.9532509%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1092.000000, -334.000000)">
             <g id="编组-17备份" transform="translate(994.000000, 301.000000)">
                 <g id="Amount-金额" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M30,49.22 L97,49.22 L97,49.22 L97,73.22 L30,73.22 C27.790861,73.22 26,71.429139 26,69.22 L26,53.22 C26,51.010861 27.790861,49.22 30,49.22 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                    <g id="编组"></g>
+                    <path d="M30,49.22 L97,49.22 L97,49.22 L97,73.22 L30,73.22 C27.790861,73.22 26,71.429139 26,69.22 L26,53.22 C26,51.010861 27.790861,49.22 30,49.22 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                     <path d="M91,73.22 L30.6428571,73.22 C28.0786779,73.22 26,71.429139 26,69.22 L26,53.22 C26,51.010861 28.0786779,49.22 30.6428571,49.22 L91,49.22 L91,49.22" id="路径" stroke="#5073E5" stroke-width="4"></path>
                     <path d="M91,49.22 L94.8051747,49.22 C97.0143137,49.22 98.8051747,51.010861 98.8051747,53.22 L98.8051747,69.22 C98.8051747,71.429139 97.0143137,73.22 94.8051747,73.22 L91,73.22 L91,73.22" id="路径" stroke="#5073E5" stroke-width="4"></path>
-                    <path d="M81.6408207,43.0135369 L81.6408207,46.4308307 C84.0761107,46.8193269 85.6320867,47.7261089 86.9062583,48.4325936 L86.9062583,48.4325936 L84.8328162,56.8939215 C83.9933778,56.0786623 83.1724754,55.6614567 82.6531468,55.3911172 C81.9337627,55.0166377 80.6516155,54.3297905 78.6913205,54.3297905 C78.3405066,54.3297905 78.0519329,54.3426735 77.8444865,54.4300356 C78.4892812,54.8172658 79.3718574,55.2058036 80.6066331,55.6882807 C83.0192885,56.6125627 84.6646427,57.7245706 85.7460212,59.0515197 C86.9366733,60.5125575 87.5108815,62.2567609 87.5108815,64.462397 C87.5108815,66.6551291 86.7685359,68.6740476 85.3734055,70.2455102 C84.406162,71.3350048 83.1161862,72.219785 81.5059605,72.7713911 L81.5059605,72.7713911 L81.5059605,77.0135369 L74.1461905,77.0135369 L74.1461905,73.3081192 C71.2557334,72.8138454 68.7857094,71.6081781 68.155762,70.6459133 L68.155762,70.6459133 L70.1752476,62.1089037 C70.8853943,62.8853349 71.6862959,63.4862805 72.415135,63.9182409 C73.5827348,64.6102412 75.2195584,65.256261 77.0276662,65.256261 C77.5373857,65.256261 77.9910642,65.2059437 78.2956127,64.9951109 C77.7101239,64.3236831 76.9887431,64.0132161 76.0040186,63.6574208 C73.7101267,62.8212237 71.8426097,61.7678415 70.5738014,60.3699314 C69.3193977,58.9878915 68.5821884,57.2751075 68.5821884,55.0502026 C68.5821884,52.8805002 69.3051152,50.9670035 70.613168,49.4739967 C71.5449171,48.4105015 72.7856057,47.5515342 74.3150629,46.994659 L74.3150629,46.994659 L74.3150628,43.0135369 L81.6408207,43.0135369 Z" id="路径" stroke="#FAFCFE" stroke-width="4" fill="url(#linearGradient-10)"></path>
+                    <path d="M81.6408207,43.0135369 L81.6408207,46.4308307 C84.0761107,46.8193269 85.6320867,47.7261089 86.9062583,48.4325936 L86.9062583,48.4325936 L84.8328162,56.8939215 C83.9933778,56.0786623 83.1724754,55.6614567 82.6531468,55.3911172 C81.9337627,55.0166377 80.6516155,54.3297905 78.6913205,54.3297905 C78.3405066,54.3297905 78.0519329,54.3426735 77.8444865,54.4300356 C78.4892812,54.8172658 79.3718574,55.2058036 80.6066331,55.6882807 C83.0192885,56.6125627 84.6646427,57.7245706 85.7460212,59.0515197 C86.9366733,60.5125575 87.5108815,62.2567609 87.5108815,64.462397 C87.5108815,66.6551291 86.7685359,68.6740476 85.3734055,70.2455102 C84.406162,71.3350048 83.1161862,72.219785 81.5059605,72.7713911 L81.5059605,72.7713911 L81.5059605,77.0135369 L74.1461905,77.0135369 L74.1461905,73.3081192 C71.2557334,72.8138454 68.7857094,71.6081781 68.155762,70.6459133 L68.155762,70.6459133 L70.1752476,62.1089037 C70.8853943,62.8853349 71.6862959,63.4862805 72.415135,63.9182409 C73.5827348,64.6102412 75.2195584,65.256261 77.0276662,65.256261 C77.5373857,65.256261 77.9910642,65.2059437 78.2956127,64.9951109 C77.7101239,64.3236831 76.9887431,64.0132161 76.0040186,63.6574208 C73.7101267,62.8212237 71.8426097,61.7678415 70.5738014,60.3699314 C69.3193977,58.9878915 68.5821884,57.2751075 68.5821884,55.0502026 C68.5821884,52.8805002 69.3051152,50.9670035 70.613168,49.4739967 C71.5449171,48.4105015 72.7856057,47.5515342 74.3150629,46.994659 L74.3150629,46.994659 L74.3150628,43.0135369 L81.6408207,43.0135369 Z" id="路径" stroke="#FAFCFE" stroke-width="4" fill="url(#linearGradient-2)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/anchor.svg b/examples/sites/demos/pc/overviewimage/anchor.svg
index 9f0091e01b..27f26a272b 100644
--- a/examples/sites/demos/pc/overviewimage/anchor.svg
+++ b/examples/sites/demos/pc/overviewimage/anchor.svg
@@ -2,78 +2,36 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Anchor 锚点</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="45.4160185%" y1="86.8386573%" x2="111.205406%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="45.4160185%" y1="86.8386573%" x2="111.205406%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.4160185%" y1="86.8386573%" x2="111.205406%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="45.4160185%" y1="86.8386573%" x2="111.205406%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-12" x="20" y="30" width="22" height="7" rx="3.5"></rect>
-        <filter x="-15.9%" y="-35.7%" width="131.8%" height="200.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <rect id="path-4" x="20" y="30" width="22" height="7" rx="3.5"></rect>
+        <filter x="-15.9%" y="-35.7%" width="131.8%" height="200.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1089.000000, -3451.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -3451.000000)">
             <g id="Anchor-锚点" transform="translate(1089.000000, 3451.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-19" transform="translate(32.000000, 28.000000)">
-                    <g id="anchor" transform="translate(5.000000, 5.000000)" fill="url(#linearGradient-9)" stroke="url(#linearGradient-10)">
+                    <g id="anchor" transform="translate(5.000000, 5.000000)" fill="url(#linearGradient-1)" stroke="url(#linearGradient-2)">
                         <path d="M11.7,28.2173913 C11.7,29.6282609 10.53,30.7826087 9.10000003,30.7826087 L5.33000002,30.7826087 C6.11000002,41.6847826 11.57,43.8652174 17.42,46.3021739 C19.37,47.0717391 21.58,47.9695652 23.4,49.2521739 L23.4,30.7826087 L18.2,30.7826087 C16.77,30.7826087 15.6,29.6282608 15.6,28.2173913 C15.6,26.8065218 16.77,25.6521739 18.2,25.6521739 L23.4,25.6521739 L23.4,20.1369565 C18.98,18.9826087 15.6,15.0065218 15.6,10.2608696 C15.6,4.6173913 20.28,0 26,0 C31.72,0 36.4,4.6173913 36.4,10.2608696 C36.4,15.0065217 33.02,18.9826087 28.6,20.1369565 L28.6,25.6521739 L33.8,25.6521739 C35.23,25.6521739 36.4,26.8065217 36.4,28.2173913 C36.4,29.6282609 35.23,30.7826087 33.8,30.7826087 L28.6,30.7826087 L28.6,49.2521739 C30.55,47.9695652 32.63,47.2 34.58,46.3021739 C40.43,43.9934783 45.89,41.6847826 46.67,30.7826087 L42.9,30.7826087 C41.4699999,30.7826087 40.2999999,29.6282608 40.3,28.2173913 C40.3000001,26.8065218 41.47,25.6521739 42.9,25.6521739 L49.4,25.6521739 C50.83,25.6521739 52,26.8065217 52,28.2173913 C52,44.7630435 43.42,48.226087 36.53,51.0478261 C32.24,52.8434783 29.51,53.9978261 28.47,57.2043478 L28.47,57.3326087 C28.34,57.5891304 28.34,57.7173913 28.21,57.973913 C28.08,58.1021739 27.95,58.3586956 27.69,58.4869565 C27.69,58.4869565 27.56,58.4869565 27.56,58.6152174 C27.43,58.7434782 27.17,58.8717392 26.91,58.8717391 C26.52,59 26.39,59 26.13,59 L25.74,59 C25.61,59 25.48,59 25.48,58.8717391 L25.35,58.8717391 C25.09,58.7434782 24.96,58.7434782 24.7,58.6152174 C24.7,58.6152174 24.57,58.6152174 24.57,58.4869565 C24.44,58.3586956 24.18,58.2304347 24.05,57.973913 C24.05,57.973913 24.05,57.8456522 23.92,57.8456522 C23.79,57.5891304 23.66,57.4608696 23.53,57.2043478 C22.49,53.9978261 19.76,52.7152174 15.47,51.0478261 C8.57999999,48.226087 0,44.7630435 0,28.2173913 C0,26.8065217 1.17,25.6521739 2.60000002,25.6521739 L9.10000003,25.6521739 C10.5300001,25.6521739 11.7000001,26.8065217 11.7,28.2173913 Z M20.8,10.2608696 C20.8,13.0826087 23.14,15.3913043 26,15.3913043 C28.86,15.3913043 31.2,13.0826087 31.2,10.2608696 C31.2,7.43913047 28.86,5.13043482 26,5.13043482 C23.14,5.13043482 20.8,7.43913047 20.8,10.2608696 Z" id="形状"></path>
                     </g>
                     <g id="矩形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="url(#linearGradient-11)" fill-rule="evenodd" xlink:href="#path-12"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                        <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/angular.svg b/examples/sites/demos/pc/overviewimage/angular.svg
deleted file mode 100644
index df73c9f99d..0000000000
--- a/examples/sites/demos/pc/overviewimage/angular.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="31px" height="34px" viewBox="0 0 31 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>angular</title>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="弹出2" transform="translate(-67.000000, -114.000000)">
-            <g id="编组-20" transform="translate(24.000000, 14.000000)">
-                <g id="angular" transform="translate(42.000000, 100.000000)">
-                    <rect id="矩形" fill-opacity="0" fill="#FFFFFF" x="0" y="0" width="34" height="34"></rect>
-                    <polygon id="路径" fill="#DD0533" fill-rule="nonzero" points="16.5 0 16.5 0 16.5 0 1 5.644 3.3641246 26.571 16.5 34 16.5 34 16.5 34 29.6358754 26.571 32 5.644"></polygon>
-                    <polygon id="路径" fill="#C40430" fill-rule="nonzero" points="16.5 0 16.5 3.774 16.5 3.757 16.5 20.978 16.5 20.978 16.5 34 16.5 34 29.6358754 26.571 32 5.644"></polygon>
-                    <path d="M16.5171014,4.74418605 L6.56410256,26.8837209 L6.56410256,26.8837209 L10.2751004,26.8837209 L10.2751004,26.8837209 L12.275961,21.929894 L20.724039,21.929894 L22.7248996,26.8837209 L22.7248996,26.8837209 L26.4358974,26.8837209 L26.4358974,26.8837209 L16.5171014,4.74418605 L16.5171014,4.74418605 L16.5171014,4.74418605 L16.5171014,4.74418605 L16.5171014,4.74418605 Z M19.4243347,18.876165 L13.609868,18.876165 L16.5171014,11.9374142 L19.4243347,18.876165 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/area.svg b/examples/sites/demos/pc/overviewimage/area.svg
index 7437738aff..d47d61cf62 100644
--- a/examples/sites/demos/pc/overviewimage/area.svg
+++ b/examples/sites/demos/pc/overviewimage/area.svg
@@ -2,69 +2,27 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Area 片区</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="60.7384399%" x2="128.792906%" y2="22.6501696%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="60.7384399%" x2="128.792906%" y2="22.6501696%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.1730292%" y1="86.8386573%" x2="87.7457667%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="47.1730292%" y1="86.8386573%" x2="87.7457667%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.1730292%" y1="86.8386573%" x2="87.7457667%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="47.1730292%" y1="86.8386573%" x2="87.7457667%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1479.000000, -334.000000)">
             <g id="编组-25备份-2" transform="translate(1380.000000, 301.000000)">
                 <g id="Area-片区" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="区域icon" transform="translate(33.000000, 33.000000)">
-                        <path d="M37.6485008,40.8770818 L4.35036772,39.0746909 L8.23401848,25.3507714 C8.39605208,24.6746289 8.98349864,24.1904077 9.67094098,24.1663431 L26.8319819,23.6055993 C27.6126721,25.971595 29.6124835,30.028405 30.9504054,32.2399101 C31.8102961,33.6703791 34.0505374,36.5542046 37.6485008,40.8742209 L37.6485008,40.8770818 Z M26.8319819,56 L1.69715256,55.8512312 C1.17669244,55.8512312 0.647746559,55.722489 0.3875165,55.1960764 C0,54.938592 0,54.4064575 0,53.880045 L3.39430511,41.9098805 L35.7533472,44.0870543 L26.8319819,56 Z M57.8955308,46.0067436 L47.8823308,45.068356 C50.0066,42.4305712 52.0856119,39.761316 54.1193664,37.0491468 C54.2466528,36.5284561 54.6398265,36.2652498 54.9000566,35.7388372 L57.8955308,46.0096046 L57.8955308,46.0067436 Z M59.8670564,53.6168387 C59.8670564,53.7427199 60,54.0059262 60,54.1403903 C59.9847807,55.0810335 59.2328998,55.8389786 58.3028474,55.8512312 L29.4059966,55.8512312 L38.5225344,44.6477981 L58.4357911,48.3612956 L59.8670564,53.6139777 L59.8670564,53.6168387 Z" id="形状" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                        <path d="M44.0863662,0 C52.3967566,0 59.2221384,7.00643711 59.1005091,15.5062838 C59.1005091,22.003474 55.0047143,29.384694 51.5283802,34.3827526 C49.4193938,37.3894588 47.1404717,40.2704525 44.7029983,43.0113416 C44.581369,43.2545213 44.2136526,43.3832635 44.0891948,43.3832635 C43.8402791,43.3832635 43.594192,43.1372228 43.4669055,43.0113416 C42.222327,41.5064882 39.3739393,38.2621845 36.6415237,34.3827526 C33.1651895,29.384694 29.0750519,22.0006131 29.0750519,15.5062838 C29.0750519,7.00643711 35.651518,0 44.0863662,0 Z M44.5588235,10.6666667 C41.8786181,10.6666667 39.7058824,12.8554968 39.7058824,15.5555556 C39.7058824,18.2556143 41.8786181,20.4444444 44.5588235,20.4444444 C47.2390289,20.4444444 49.4117647,18.2556143 49.4117647,15.5555556 C49.4117647,12.8554968 47.2390289,10.6666667 44.5588235,10.6666667 Z" id="形状结合" stroke="url(#linearGradient-11)" stroke-width="0.882352941" fill="url(#linearGradient-10)"></path>
+                        <path d="M37.6485008,40.8770818 L4.35036772,39.0746909 L8.23401848,25.3507714 C8.39605208,24.6746289 8.98349864,24.1904077 9.67094098,24.1663431 L26.8319819,23.6055993 C27.6126721,25.971595 29.6124835,30.028405 30.9504054,32.2399101 C31.8102961,33.6703791 34.0505374,36.5542046 37.6485008,40.8742209 L37.6485008,40.8770818 Z M26.8319819,56 L1.69715256,55.8512312 C1.17669244,55.8512312 0.647746559,55.722489 0.3875165,55.1960764 C0,54.938592 0,54.4064575 0,53.880045 L3.39430511,41.9098805 L35.7533472,44.0870543 L26.8319819,56 Z M57.8955308,46.0067436 L47.8823308,45.068356 C50.0066,42.4305712 52.0856119,39.761316 54.1193664,37.0491468 C54.2466528,36.5284561 54.6398265,36.2652498 54.9000566,35.7388372 L57.8955308,46.0096046 L57.8955308,46.0067436 Z M59.8670564,53.6168387 C59.8670564,53.7427199 60,54.0059262 60,54.1403903 C59.9847807,55.0810335 59.2328998,55.8389786 58.3028474,55.8512312 L29.4059966,55.8512312 L38.5225344,44.6477981 L58.4357911,48.3612956 L59.8670564,53.6139777 L59.8670564,53.6168387 Z" id="形状" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                        <path d="M44.0863662,0 C52.3967566,0 59.2221384,7.00643711 59.1005091,15.5062838 C59.1005091,22.003474 55.0047143,29.384694 51.5283802,34.3827526 C49.4193938,37.3894588 47.1404717,40.2704525 44.7029983,43.0113416 C44.581369,43.2545213 44.2136526,43.3832635 44.0891948,43.3832635 C43.8402791,43.3832635 43.594192,43.1372228 43.4669055,43.0113416 C42.222327,41.5064882 39.3739393,38.2621845 36.6415237,34.3827526 C33.1651895,29.384694 29.0750519,22.0006131 29.0750519,15.5062838 C29.0750519,7.00643711 35.651518,0 44.0863662,0 Z M44.5588235,10.6666667 C41.8786181,10.6666667 39.7058824,12.8554968 39.7058824,15.5555556 C39.7058824,18.2556143 41.8786181,20.4444444 44.5588235,20.4444444 C47.2390289,20.4444444 49.4117647,18.2556143 49.4117647,15.5555556 C49.4117647,12.8554968 47.2390289,10.6666667 44.5588235,10.6666667 Z" id="形状结合" stroke="url(#linearGradient-3)" stroke-width="0.882352941" fill="url(#linearGradient-2)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/autocomplete.svg b/examples/sites/demos/pc/overviewimage/autocomplete.svg
index bee760ddc2..e473a99b76 100644
--- a/examples/sites/demos/pc/overviewimage/autocomplete.svg
+++ b/examples/sites/demos/pc/overviewimage/autocomplete.svg
@@ -2,104 +2,62 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Autocomplete 自动补全</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="58.7051225%" x2="128.792906%" y2="27.8288442%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="58.7051225%" x2="128.792906%" y2="27.8288442%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.1533347%" x2="128.792906%" y2="49.6094705%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="50.1533347%" x2="128.792906%" y2="49.6094705%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="100%" y1="47.3372781%" x2="6.58643108%" y2="52.6627219%" id="linearGradient-12">
+        <linearGradient x1="100%" y1="47.3372781%" x2="6.58643108%" y2="52.6627219%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M49.5,44 L59.5,44 C60.3284271,44 61,44.6715729 61,45.5 C61,46.3284271 60.3284271,47 59.5,47 L49.5,47 C48.6715729,47 48,46.3284271 48,45.5 C48,44.6715729 48.6715729,44 49.5,44 Z" id="path-13"></path>
-        <filter x="-26.9%" y="-83.3%" width="153.8%" height="333.3%" filterUnits="objectBoundingBox" id="filter-14">
+        <path d="M49.5,44 L59.5,44 C60.3284271,44 61,44.6715729 61,45.5 C61,46.3284271 60.3284271,47 59.5,47 L49.5,47 C48.6715729,47 48,46.3284271 48,45.5 C48,44.6715729 48.6715729,44 49.5,44 Z" id="path-5"></path>
+        <filter x="-26.9%" y="-83.3%" width="153.8%" height="333.3%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M1,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,14 C25,14.5522847 24.5522847,15 24,15 L1,15 C0.44771525,15 6.76353751e-17,14.5522847 0,14 L0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 Z" id="path-15"></path>
-        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-16">
+        <path d="M1,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,14 C25,14.5522847 24.5522847,15 24,15 L1,15 C0.44771525,15 6.76353751e-17,14.5522847 0,14 L0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 Z" id="path-7"></path>
+        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M1,0 L24,0 C24.5522847,-1.01453063e-16 25,0.44771525 25,1 L25,4 C25,4.55228475 24.5522847,5 24,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="path-17"></path>
-        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-18">
+        <path d="M1,0 L24,0 C24.5522847,-1.01453063e-16 25,0.44771525 25,1 L25,4 C25,4.55228475 24.5522847,5 24,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="path-9"></path>
+        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-10">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1481.000000, -1350.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1481.000000, -1350.000000)">
             <g id="Autocomplete-自动补全" transform="translate(1481.000000, 1350.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="26" y="37" width="72" height="18" rx="4"></rect>
-                <rect id="矩形备份-6" fill="url(#linearGradient-10)" opacity="0.303770519" x="26" y="59" width="72" height="35" rx="4"></rect>
+                <g id="编组"></g>
+                <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="26" y="37" width="72" height="18" rx="4"></rect>
+                <rect id="矩形备份-6" fill="url(#linearGradient-2)" opacity="0.303770519" x="26" y="59" width="72" height="35" rx="4"></rect>
                 <path d="M33,66 L60,66 C61.1045695,66 62,66.8954305 62,68 C62,69.1045695 61.1045695,70 60,70 L33,70 C31.8954305,70 31,69.1045695 31,68 C31,66.8954305 31.8954305,66 33,66 Z" id="形状结合备份" fill="#5073E5"></path>
                 <path d="M33,75 L47,75 C48.1045695,75 49,75.8954305 49,77 C49,78.1045695 48.1045695,79 47,79 L33,79 C31.8954305,79 31,78.1045695 31,77 C31,75.8954305 31.8954305,75 33,75 Z" id="形状结合备份-17" fill="#5073E5"></path>
-                <path d="M33,84 L91,84 C92.1045695,84 93,84.8954305 93,86 C93,87.1045695 92.1045695,88 91,88 L33,88 C31.8954305,88 31,87.1045695 31,86 C31,84.8954305 31.8954305,84 33,84 Z" id="形状结合备份-18" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
+                <path d="M33,84 L91,84 C92.1045695,84 93,84.8954305 93,86 C93,87.1045695 92.1045695,88 91,88 L33,88 C31.8954305,88 31,87.1045695 31,86 C31,84.8954305 31.8954305,84 33,84 Z" id="形状结合备份-18" fill="url(#linearGradient-3)" opacity="0.303770519"></path>
                 <g id="形状结合备份-19" transform="translate(54.500000, 45.500000) rotate(-90.000000) translate(-54.500000, -45.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="url(#linearGradient-12)" fill-rule="evenodd" xlink:href="#path-13"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="url(#linearGradient-4)" fill-rule="evenodd" xlink:href="#path-5"></use>
                 </g>
                 <g id="编组-12" transform="translate(26.000000, 27.000000)">
                     <g id="形状结合备份-16" transform="translate(12.500000, 12.500000) rotate(-90.000000) translate(-12.500000, -12.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-15"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-7"></use>
                     </g>
                     <g id="形状结合备份-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-17"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/avatar.svg b/examples/sites/demos/pc/overviewimage/avatar.svg
deleted file mode 100644
index d49668071e..0000000000
--- a/examples/sites/demos/pc/overviewimage/avatar.svg
+++ /dev/null
@@ -1,100 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Avatar 头像</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="45.9796323%" y1="86.8386573%" x2="103.680025%" y2="-43.8247114%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.258895%" x2="128.792906%" y2="26.418436%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <polygon id="path-12" points="22.7407655 41.2755004 29.2592345 41.2755004 29.2592345 47.7928503 22.7407655 47.7928503"></polygon>
-        <filter x="-61.4%" y="-30.7%" width="222.7%" height="222.7%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M22.7407655,42.1444804 L18.3951195,36.9306005 L13.1195053,36.9306005 C13.084287,36.9306005 13.0513739,36.9481164 13.0315881,36.9772464 C13.0118024,37.0063765 13.0077044,37.0434043 13.0206418,37.0761546 L17.308708,47.7928503 L22.7407655,44.1724625 L22.7407655,42.1444804 Z M38.8804947,36.9305999 L33.6048805,36.9305999 L29.2592345,42.1444804 L29.2592345,44.1724625 L34.691292,47.7928503 L38.9782718,37.0761546 C38.9917122,37.0435893 38.987985,37.0064625 38.9683395,36.9772174 C38.9486939,36.9479724 38.9157296,36.9304791 38.8804947,36.9305999 L38.8804947,36.9305999 Z" id="path-14"></path>
-        <filter x="-15.4%" y="-18.4%" width="130.8%" height="173.6%" filterUnits="objectBoundingBox" id="filter-15">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="57.9337126%" x2="128.792906%" y2="29.7935553%" id="linearGradient-16">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】" transform="translate(-1481.000000, -1597.000000)">
-            <g id="Avatar-头像" transform="translate(1481.000000, 1597.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="男头像" transform="translate(28.000000, 28.000000)">
-                    <path d="M0,34 C0,52.7776815 15.2223185,68 34,68 C52.7776815,68 68,52.7776815 68,34 C68,15.2223185 52.7776815,0 34,0 C15.2223185,0 0,15.2223185 0,34 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                    <g id="编组" transform="translate(8.000000, 5.000000)">
-                        <path d="M52,49.2874958 C51.2862277,42.3454321 45.420692,36.9306005 38.2884005,36.9306005 L31.8285977,36.9306005 C31.4352945,36.9306005 31.0580999,36.7743882 30.7799925,36.4963286 C30.5018851,36.2182689 30.345646,35.8411391 30.345646,35.4479034 L30.345646,34.7472883 C30.345646,34.1140191 30.757396,33.5719929 31.3505766,33.3493168 C37.656109,30.9791739 41.9735083,20.6361396 41.0967742,13.3269317 C40.2689286,6.4283169 34.6586996,0.869017425 27.7534681,0.0967115012 C27.1997105,0.0348982616 26.6430215,0.00298930894 26.0858265,0.0011236521 L26.0336787,0 C17.6183353,-0.0184283912 10.790239,6.79654714 10.790239,15.2061009 C10.790239,21.7495202 14.9262075,31.2333505 20.7254722,33.3775586 C21.2936654,33.5872 21.654354,34.152037 21.654354,34.7581505 L21.654354,35.4479034 C21.654354,36.2669171 20.9905566,36.9306005 20.1714023,36.9306005 L13.7115995,36.9306005 C6.57930803,36.9306005 0.713772338,42.345432 0,49.2874958 C5.67650009,57.5667027 15.2021561,63 26,63 C36.7978439,63 46.3234999,57.5667027 52,49.2874958 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                        <path d="M52,49.2874958 C51.2862277,42.3454321 45.4196056,36.9306005 38.2884005,36.9306005 L36.864115,36.9306005 L30.345646,43.4479504 L21.654354,43.4479504 L18.3951195,41.2755004 L14.6698145,36.9306005 L13.7115995,36.9306005 C6.58039444,36.9306005 0.713772338,42.345432 0,49.2874958 C5.67650009,57.5667027 15.2021561,63 26,63 C36.7978439,63 46.3234999,57.5667027 52,49.2874958 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
-                        <g id="路径">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                        </g>
-                        <path d="M21.611984,62.6893397 C23.0460472,62.8892051 24.5105299,63 26,63 C27.5014207,63 28.9756811,62.8881188 30.4206084,62.6849948 L28.172823,47.7928503 L23.827177,47.7928503 L21.611984,62.6893397 Z" id="路径" fill="#5073E5"></path>
-                        <g id="形状">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
-                        </g>
-                        <path d="M41.1500083,14.0460127 C41.1326257,13.805957 41.1250209,13.5604701 41.0967742,13.3258455 C40.2689286,6.4283169 34.6586996,0.869017425 27.7534681,0.0967115012 C27.1997105,0.0348982616 26.6430215,0.00298930894 26.0858265,0.0011236521 L26.0336787,9.47448143e-07 C18.5157112,-0.0162559624 12.2797091,5.42573119 11.0325088,12.5817814 L10.8831955,13.7122682 C11.0907,13.9762209 11.7832191,13.2085332 11.8614407,13.1162041 C14.0342637,10.5309886 17.6639646,9.93247867 20.751546,11.3011221 C22.637539,12.1336524 24.7807819,12.1649302 26.6902739,11.38779 C28.5997659,10.6106498 30.1118649,9.09169197 30.8801604,7.17889836 C34.9161792,8.28793406 38.7164466,10.7699581 41.1500083,14.0460127 Z" id="路径" fill="url(#linearGradient-16)"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/badge.svg b/examples/sites/demos/pc/overviewimage/badge.svg
index 474f1f25e9..8b82fb4fb8 100644
--- a/examples/sites/demos/pc/overviewimage/badge.svg
+++ b/examples/sites/demos/pc/overviewimage/badge.svg
@@ -2,82 +2,42 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Badge 标记</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.5523497%" x2="128.792906%" y2="48.5932155%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.5523497%" x2="128.792906%" y2="48.5932155%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.3380666%" x2="128.792906%" y2="46.5920661%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="51.3380666%" x2="128.792906%" y2="46.5920661%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-11" cx="15.5" cy="15.5" r="15.5"></circle>
-        <filter x="-12.9%" y="-6.5%" width="125.8%" height="125.8%" filterUnits="objectBoundingBox" id="filter-12">
+        <circle id="path-3" cx="15.5" cy="15.5" r="15.5"></circle>
+        <filter x="-12.9%" y="-6.5%" width="125.8%" height="125.8%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -1983.000000)">
-            <g id="编组-14备份-8" transform="translate(1380.000000, 1950.000000)">
-                <g id="Badge-标记" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-22" transform="translate(26.000000, 33.000000)">
-                        <g id="编组-15" transform="translate(0.000000, 13.000000)">
-                            <path d="M4,0 L15.7174137,0 L15.7174137,0 L69,0 C71.209139,-4.05812251e-16 73,1.790861 73,4 L73,38 C73,40.209139 71.209139,42 69,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="#C8D4F8"></path>
-                            <rect id="矩形备份-6" fill="url(#linearGradient-9)" opacity="0.204287574" x="11" y="26" width="49" height="6" rx="3"></rect>
-                            <rect id="矩形备份-21" fill="url(#linearGradient-10)" opacity="0.604724702" x="11" y="12" width="31.4821429" height="6" rx="3"></rect>
-                        </g>
-                        <g id="编组-16" transform="translate(48.000000, 0.000000)">
-                            <g id="椭圆形">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -2034.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-8" transform="translate(784.000000, 1690.000000)">
+                    <g id="Badge-标记" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-22" transform="translate(26.000000, 33.000000)">
+                            <g id="编组-15" transform="translate(0.000000, 13.000000)">
+                                <path d="M4,0 L15.7174137,0 L15.7174137,0 L69,0 C71.209139,-4.05812251e-16 73,1.790861 73,4 L73,38 C73,40.209139 71.209139,42 69,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="#C8D4F8"></path>
+                                <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="11" y="26" width="49" height="6" rx="3"></rect>
+                                <rect id="矩形备份-21" fill="url(#linearGradient-2)" opacity="0.604724702" x="11" y="12" width="31.4821429" height="6" rx="3"></rect>
+                            </g>
+                            <g id="编组-16" transform="translate(48.000000, 0.000000)">
+                                <g id="椭圆形">
+                                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
+                                </g>
+                                <text id="9" font-family="PingFangSC-Semibold, PingFang SC" font-size="22" font-weight="500" letter-spacing="1.04761905" fill="#FFFFFF">
+                                    <tspan x="8.87619048" y="23">9</tspan>
+                                </text>
                             </g>
-                            <text id="9" font-family="PingFangSC-Semibold, PingFang SC" font-size="22" font-weight="500" letter-spacing="1.04761905" fill="#FFFFFF">
-                                <tspan x="8.87619048" y="23">9</tspan>
-                            </text>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/breadcrumb.svg b/examples/sites/demos/pc/overviewimage/breadcrumb.svg
index 9d63839324..a2ee571e2f 100644
--- a/examples/sites/demos/pc/overviewimage/breadcrumb.svg
+++ b/examples/sites/demos/pc/overviewimage/breadcrumb.svg
@@ -2,78 +2,36 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>面包屑 breadcrumb</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="63.7576467%" x2="128.792906%" y2="14.9605244%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="63.7576467%" x2="128.792906%" y2="14.9605244%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M62.1247709,48.6505293 L68.3743128,55.1558219 C68.8047299,55.6038531 69.0128201,56.0518843 68.9985832,56.4999155 C69.0138629,56.9474485 68.8057835,57.3958133 68.3750458,57.8441781 L62.1255039,64.3494707 C61.3338953,65.1734745 60.5422867,65.2146747 59.750678,64.4730713 L59.6256872,64.3494707 C58.7924149,63.4820984 58.7924149,62.614726 59.6256872,61.7473537 L64.666,56.5 L59.6249542,51.2526463 C58.8333456,50.4286426 58.7937651,49.6046389 59.5062129,48.7806351 L59.6249542,48.6505293 C60.4582264,47.7831569 61.2914987,47.7831569 62.1247709,48.6505293 Z" id="path-11"></path>
-        <filter x="-35.0%" y="-14.7%" width="170.0%" height="141.2%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M62.1247709,48.6505293 L68.3743128,55.1558219 C68.8047299,55.6038531 69.0128201,56.0518843 68.9985832,56.4999155 C69.0138629,56.9474485 68.8057835,57.3958133 68.3750458,57.8441781 L62.1255039,64.3494707 C61.3338953,65.1734745 60.5422867,65.2146747 59.750678,64.4730713 L59.6256872,64.3494707 C58.7924149,63.4820984 58.7924149,62.614726 59.6256872,61.7473537 L64.666,56.5 L59.6249542,51.2526463 C58.8333456,50.4286426 58.7937651,49.6046389 59.5062129,48.7806351 L59.6249542,48.6505293 C60.4582264,47.7831569 61.2914987,47.7831569 62.1247709,48.6505293 Z" id="path-3"></path>
+        <filter x="-35.0%" y="-14.7%" width="170.0%" height="141.2%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="63.7576467%" x2="128.792906%" y2="14.9605244%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="63.7576467%" x2="128.792906%" y2="14.9605244%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1869.000000, -334.000000)">
-            <g id="编组-25备份-3" transform="translate(1771.000000, 301.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1869.000000, -385.000000)">
+            <g id="编组-25备份-3" transform="translate(1771.000000, 352.000000)">
                 <g id="Crumb-面包屑" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形-2" fill="url(#linearGradient-9)" opacity="0.604724702" x="16" y="45" width="36" height="22" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="矩形-2" fill="url(#linearGradient-1)" opacity="0.604724702" x="16" y="45" width="36" height="22" rx="4"></rect>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
-                    <rect id="矩形-2备份" fill="url(#linearGradient-13)" x="74" y="45" width="36" height="22" rx="4"></rect>
+                    <rect id="矩形-2备份" fill="url(#linearGradient-5)" x="74" y="45" width="36" height="22" rx="4"></rect>
                     <path d="M18,77 L108,77 C109.104569,77 110,77.8954305 110,79 C110,80.1045695 109.104569,81 108,81 L18,81 C16.8954305,81 16,80.1045695 16,79 C16,77.8954305 16.8954305,77 18,77 Z" id="形状结合备份" fill="#5073E5"></path>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/browser.svg b/examples/sites/demos/pc/overviewimage/browser.svg
deleted file mode 100644
index 059c663966..0000000000
--- a/examples/sites/demos/pc/overviewimage/browser.svg
+++ /dev/null
@@ -1,126 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Browser 浏览器信息</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="76.8004419%" x2="128.792906%" y2="-18.2582892%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M68.2083333,37 C69.5890452,37 70.7083333,38.1192881 70.7083333,39.5 C70.7083333,40.8807119 69.5890452,42 68.2083333,42 C66.8276215,42 65.7083333,40.8807119 65.7083333,39.5 C65.7083333,38.1192881 66.8276215,37 68.2083333,37 Z" id="path-10"></path>
-        <filter x="-40.0%" y="-20.0%" width="180.0%" height="180.0%" filterUnits="objectBoundingBox" id="filter-11">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M77.2083333,37 C78.5890452,37 79.7083333,38.1192881 79.7083333,39.5 C79.7083333,40.8807119 78.5890452,42 77.2083333,42 C75.8276215,42 74.7083333,40.8807119 74.7083333,39.5 C74.7083333,38.1192881 75.8276215,37 77.2083333,37 Z" id="path-12"></path>
-        <filter x="-40.0%" y="-20.0%" width="180.0%" height="180.0%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M29.5208333,44.625 L93.8958333,44.625 C94.8968494,44.625 95.7083333,45.4364839 95.7083333,46.4375 C95.7083333,47.4385161 94.8968494,48.25 93.8958333,48.25 L29.5208333,48.25 C28.5198172,48.25 27.7083333,47.4385161 27.7083333,46.4375 C27.7083333,45.4364839 28.5198172,44.625 29.5208333,44.625 Z" id="path-14"></path>
-        <filter x="-5.9%" y="-55.2%" width="111.8%" height="320.7%" filterUnits="objectBoundingBox" id="filter-15">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-16">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <path d="M87.2083333,37 C88.5890452,37 89.7083333,38.1192881 89.7083333,39.5 C89.7083333,40.8807119 88.5890452,42 87.2083333,42 C85.8276215,42 84.7083333,40.8807119 84.7083333,39.5 C84.7083333,38.1192881 85.8276215,37 87.2083333,37 Z" id="path-17"></path>
-        <filter x="-70.0%" y="-50.0%" width="240.0%" height="240.0%" filterUnits="objectBoundingBox" id="filter-18">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M2.35252101,11.4896867 C1.81542421,12.021654 0,13.7375132 0,14.4729336 C0.0189011333,14.757948 0.248240551,14.9852534 0.536727741,15.0049009 C1.27869656,15.0049009 3.25949488,11.4492149 4.78699088,11.4492149 C5.11737004,11.4492149 5.48835445,11.8171073 5.19931881,12.5517984 L2.31154662,19.7437495 C2.02177271,20.4394273 0.618676515,23.7909312 0.618676515,25.752538 C0.618676515,27.3061453 1.65041925,28 3.13657163,28 C7.30451686,28 12.132482,22.9319078 12.132482,21.7461929 C12.1485275,21.4476429 11.9360651,21.1843827 11.6378362,21.1332819 C11.0601341,21.1332819 8.78956191,24.6076596 7.55147068,24.6076597 C7.40747556,24.6007683 7.27275546,24.5354406 7.17917094,24.4271261 C7.08558643,24.3188117 7.0414479,24.1771289 7.05719389,24.0355851 C7.05719389,23.3818376 7.51086535,22.3583747 7.75855746,21.7461929 L10.7279093,13.7779851 C12.2140618,9.81211166 10.3152122,8.75 8.54039324,8.75 C6.14726698,8.75 4.00109447,9.93571484 2.35104445,11.4882283 L2.35252101,11.4896867 Z" id="path-19"></path>
-        <filter x="-49.5%" y="-15.6%" width="198.9%" height="162.3%" filterUnits="objectBoundingBox" id="filter-20">
-            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M10.2259662,0.00576499223 C8.43580664,0.00689502284 6.97391643,1.47487213 6.93333333,3.3121074 C6.93333333,5.00823488 8.01770756,6.1239918 9.66492189,6.1239918 C10.5360077,6.14595731 11.3792589,5.80822965 12.0057056,5.18649252 C12.6321523,4.56475538 12.9894121,3.71099747 12.997424,2.81654322 C13.0302844,2.0547979 12.7475354,1.31436413 12.2191492,0.778478016 C11.690763,0.242591905 10.9661131,-0.0386723462 10.2245294,0.00429009301 L10.2259662,0.00576499223 Z" id="path-21"></path>
-        <filter x="-98.9%" y="-49.0%" width="297.8%" height="295.9%" filterUnits="objectBoundingBox" id="filter-22">
-            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】" transform="translate(-697.000000, -1893.000000)">
-            <g id="Browser-浏览器信息" transform="translate(697.000000, 1893.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M92,33 C94.209139,33 96,34.790861 96,37 L96,87 C96,89.209139 94.209139,91 92,91 L32,91 C29.790861,91 28,89.209139 28,87 L28,37 C28,34.790861 29.790861,33 32,33 L92,33 Z M87,45 L36,45 C34.8954305,45 34,45.8954305 34,47 L34,47 L34,83 C34,84.1045695 34.8954305,85 36,85 L36,85 L87,85 C88.1045695,85 89,84.1045695 89,83 L89,83 L89,47 C89,45.8954305 88.1045695,45 87,45 L87,45 Z" id="形状结合" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                <g id="路径">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
-                </g>
-                <g id="路径">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                </g>
-                <g id="路径">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
-                </g>
-                <g id="路径">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                    <use fill="url(#linearGradient-16)" fill-rule="evenodd" xlink:href="#path-17"></use>
-                </g>
-                <g id="编组-4" transform="translate(55.000000, 53.000000)">
-                    <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-19"></use>
-                    </g>
-                    <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-21"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/bulletin-board.svg b/examples/sites/demos/pc/overviewimage/bulletin-board.svg
index c7f531a658..626a1a9fa3 100644
--- a/examples/sites/demos/pc/overviewimage/bulletin-board.svg
+++ b/examples/sites/demos/pc/overviewimage/bulletin-board.svg
@@ -2,72 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>BulletinBoard 公告牌</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <path d="M49.697763,12.00909 L40.8680421,12.00909 L29.453868,0.567804529 C29.4283473,0.542160819 29.4021402,0.517642929 29.3755588,0.493750497 C29.3073824,0.432499956 29.2349427,0.376191674 29.1587889,0.325252554 C29.1477445,0.317809623 29.1365129,0.310804512 29.1253437,0.30367431 C29.0799071,0.274431618 29.0332765,0.247096387 28.9855727,0.221739527 C28.9837008,0.220738797 28.9816417,0.219863158 28.9797698,0.218862428 C28.950942,0.203788929 28.9217398,0.189528525 28.8924129,0.176018667 C28.3216605,-0.0861726377 27.6498861,-0.0555252762 27.1029697,0.268461117 C26.9626534,0.351650471 26.8333642,0.452246208 26.7181627,0.567867075 L15.3039886,12.00909 L6.30217456,12.00909 C2.82156467,12.00909 0,14.8373411 0,18.3261992 L0,49.6828908 C0,53.1716864 2.82156467,56 6.30217456,56 L49.6978254,56 C53.1783729,56 56,53.1716864 56,49.6828908 L56,18.3261992 C56,14.8373411 53.1783729,12.00909 49.697763,12.00909 Z M28.0860465,4.68105572 L35.3967562,12.00909 L20.7753368,12.00909 L28.0860465,4.68105572 Z M51.9952489,49.1154768 C51.9952489,50.6353983 50.7660752,51.8674848 49.2497471,51.8674848 L6.80840765,51.8674848 C5.29207949,51.8674848 4.06290586,50.6353983 4.06290586,49.1154768 L4.06290586,18.7044127 C4.06290586,17.1844912 5.29207949,15.9524047 6.80840765,15.9524047 L11.3699965,15.9524047 L11.2951805,15.9622869 C10.5397307,16.7195269 10.5397307,17.9471727 11.2951805,18.7044127 C12.0506303,19.4616527 13.2754361,19.4616527 14.0308858,18.7044127 L16.8413448,15.9524047 L39.3306859,15.9524047 L42.0839416,18.7044127 C42.839329,19.4615902 44.0641348,19.4615902 44.8195846,18.7044127 C45.5750343,17.9471727 45.5750343,16.7194644 44.8196469,15.9622869 L44.8020966,15.9524047 L49.2497471,15.9524047 C50.7660752,15.9524047 51.9952489,17.1844912 51.9952489,18.7044127 L51.9952489,49.1154768 Z" id="path-9"></path>
-        <filter x="-7.1%" y="-3.6%" width="114.3%" height="114.3%" filterUnits="objectBoundingBox" id="filter-10">
+        <path d="M49.697763,12.00909 L40.8680421,12.00909 L29.453868,0.567804529 C29.4283473,0.542160819 29.4021402,0.517642929 29.3755588,0.493750497 C29.3073824,0.432499956 29.2349427,0.376191674 29.1587889,0.325252554 C29.1477445,0.317809623 29.1365129,0.310804512 29.1253437,0.30367431 C29.0799071,0.274431618 29.0332765,0.247096387 28.9855727,0.221739527 C28.9837008,0.220738797 28.9816417,0.219863158 28.9797698,0.218862428 C28.950942,0.203788929 28.9217398,0.189528525 28.8924129,0.176018667 C28.3216605,-0.0861726377 27.6498861,-0.0555252762 27.1029697,0.268461117 C26.9626534,0.351650471 26.8333642,0.452246208 26.7181627,0.567867075 L15.3039886,12.00909 L6.30217456,12.00909 C2.82156467,12.00909 0,14.8373411 0,18.3261992 L0,49.6828908 C0,53.1716864 2.82156467,56 6.30217456,56 L49.6978254,56 C53.1783729,56 56,53.1716864 56,49.6828908 L56,18.3261992 C56,14.8373411 53.1783729,12.00909 49.697763,12.00909 Z M28.0860465,4.68105572 L35.3967562,12.00909 L20.7753368,12.00909 L28.0860465,4.68105572 Z M51.9952489,49.1154768 C51.9952489,50.6353983 50.7660752,51.8674848 49.2497471,51.8674848 L6.80840765,51.8674848 C5.29207949,51.8674848 4.06290586,50.6353983 4.06290586,49.1154768 L4.06290586,18.7044127 C4.06290586,17.1844912 5.29207949,15.9524047 6.80840765,15.9524047 L11.3699965,15.9524047 L11.2951805,15.9622869 C10.5397307,16.7195269 10.5397307,17.9471727 11.2951805,18.7044127 C12.0506303,19.4616527 13.2754361,19.4616527 14.0308858,18.7044127 L16.8413448,15.9524047 L39.3306859,15.9524047 L42.0839416,18.7044127 C42.839329,19.4615902 44.0641348,19.4615902 44.8195846,18.7044127 C45.5750343,17.9471727 45.5750343,16.7194644 44.8196469,15.9622869 L44.8020966,15.9524047 L49.2497471,15.9524047 C50.7660752,15.9524047 51.9952489,17.1844912 51.9952489,18.7044127 L51.9952489,49.1154768 Z" id="path-1"></path>
+        <filter x="-7.1%" y="-3.6%" width="114.3%" height="114.3%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="68.0509421%" x2="128.792906%" y2="4.02589139%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="68.0509421%" x2="128.792906%" y2="4.02589139%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -2255.000000)">
-            <g id="编组-14备份-11" transform="translate(596.000000, 2225.000000)">
-                <g id="BulletinBoard-公告牌" transform="translate(100.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="公告牌" transform="translate(35.000000, 32.000000)">
-                        <g id="形状结合">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -2306.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-11" transform="translate(0.000000, 1965.000000)">
+                    <g id="BulletinBoard-公告牌" transform="translate(100.000000, 30.000000)">
+                        <g id="编组"></g>
+                        <g id="公告牌" transform="translate(35.000000, 32.000000)">
+                            <g id="形状结合">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-1"></use>
+                            </g>
+                            <rect id="矩形" fill="url(#linearGradient-3)" x="9.42857143" y="22" width="37.1428571" height="26" rx="4"></rect>
+                            <path d="M34.7485748,29.0237124 L16.3701058,29.0237124 C15.6461824,29.0237124 15.0593403,29.6952871 15.0593403,30.5237358 C15.0593403,31.3521846 15.6461824,32.0237124 16.3701058,32.0237124 L34.7485748,32.0237124 C35.4725391,32.0237124 36.0593403,31.3521377 36.0593403,30.5237358 C36.0593403,29.6952871 35.4725391,29.0237124 34.7485748,29.0237124 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            <path d="M39.4364877,37.0170883 L16.6821928,37.0170883 C15.7859067,37.0170883 15.0593403,37.6886629 15.0593403,38.5171117 C15.0593403,39.3455604 15.7859067,40.0170883 16.6821928,40.0170883 L39.4364877,40.0170883 C40.3328245,40.0170883 41.0593403,39.3455136 41.0593403,38.5171117 C41.0593403,37.6886629 40.3328245,37.0170883 39.4364877,37.0170883 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                         </g>
-                        <rect id="矩形" fill="url(#linearGradient-11)" x="9.42857143" y="22" width="37.1428571" height="26" rx="4"></rect>
-                        <path d="M34.7485748,29.0237124 L16.3701058,29.0237124 C15.6461824,29.0237124 15.0593403,29.6952871 15.0593403,30.5237358 C15.0593403,31.3521846 15.6461824,32.0237124 16.3701058,32.0237124 L34.7485748,32.0237124 C35.4725391,32.0237124 36.0593403,31.3521377 36.0593403,30.5237358 C36.0593403,29.6952871 35.4725391,29.0237124 34.7485748,29.0237124 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <path d="M39.4364877,37.0170883 L16.6821928,37.0170883 C15.7859067,37.0170883 15.0593403,37.6886629 15.0593403,38.5171117 C15.0593403,39.3455604 15.7859067,40.0170883 16.6821928,40.0170883 L39.4364877,40.0170883 C40.3328245,40.0170883 41.0593403,39.3455136 41.0593403,38.5171117 C41.0593403,37.6886629 40.3328245,37.0170883 39.4364877,37.0170883 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/button-group.svg b/examples/sites/demos/pc/overviewimage/button-group.svg
index 2dd081880f..2b8b153393 100644
--- a/examples/sites/demos/pc/overviewimage/button-group.svg
+++ b/examples/sites/demos/pc/overviewimage/button-group.svg
@@ -2,76 +2,44 @@
 <svg width="130px" height="125px" viewBox="0 0 130 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Buttongroup选块组</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <text id="text-11" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
+        <text id="text-3" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
             <tspan x="16.72" y="18">1</tspan>
         </text>
-        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-12">
+        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.31372549   0 0 0 0 0.450980392   0 0 0 0 0.898039216  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <text id="text-13" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
+        <text id="text-5" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
             <tspan x="59.2" y="18">2</tspan>
         </text>
-        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-14">
+        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.31372549   0 0 0 0 0.450980392   0 0 0 0 0.898039216  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <text id="text-15" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
+        <text id="text-7" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
             <tspan x="103.2" y="18">3</tspan>
         </text>
-        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-16">
+        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.31372549   0 0 0 0 0.450980392   0 0 0 0 0.898039216  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-18" cx="77" cy="74" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-19">
+        <circle id="path-10" cx="77" cy="74" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -79,58 +47,48 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-20">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-12">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-21" points="76.7129876 72.8022814 75.2754034 86.814413 79.9449685 84.9202277 82.4194729 91.8022814 84.8096817 90.7804537 82.2116343 83.9762941 86.8108161 82.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-22">
+        <polygon id="path-13" points="76.7129876 72.8022814 75.2754034 86.814413 79.9449685 84.9202277 82.4194729 91.8022814 84.8096817 90.7804537 82.2116343 83.9762941 86.8108161 82.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-14">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1480.000000, -574.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1480.000000, -574.000000)">
             <g id="Buttongroup选块组" transform="translate(1481.000000, 574.000000)">
-                <g id="编组" transform="translate(1.000000, 0.000000)">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组" transform="translate(1.000000, 0.000000)"></g>
                 <g id="编组-11" transform="translate(0.000000, 49.000000)">
-                    <rect id="矩形备份" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="88" y="0" width="40" height="24" rx="2"></rect>
-                    <rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="0" y="0" width="40" height="24" rx="2"></rect>
-                    <rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="44" y="0" width="40" height="24" rx="2"></rect>
+                    <rect id="矩形备份" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" x="88" y="0" width="40" height="24" rx="2"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" x="0" y="0" width="40" height="24" rx="2"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" x="44" y="0" width="40" height="24" rx="2"></rect>
                     <g id="1" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-12)" xlink:href="#text-11"></use>
-                        <use xlink:href="#text-11"></use>
+                        <use filter="url(#filter-4)" xlink:href="#text-3"></use>
+                        <use xlink:href="#text-3"></use>
                     </g>
                     <g id="2" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-14)" xlink:href="#text-13"></use>
-                        <use xlink:href="#text-13"></use>
+                        <use filter="url(#filter-6)" xlink:href="#text-5"></use>
+                        <use xlink:href="#text-5"></use>
                     </g>
                     <g id="3" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-16)" xlink:href="#text-15"></use>
-                        <use xlink:href="#text-15"></use>
+                        <use filter="url(#filter-8)" xlink:href="#text-7"></use>
+                        <use xlink:href="#text-7"></use>
                     </g>
                 </g>
                 <g id="椭圆形">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
-                    <circle stroke="url(#linearGradient-17)" stroke-width="4" stroke-linejoin="square" cx="77" cy="74" r="6"></circle>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-10"></use>
+                    <circle stroke="url(#linearGradient-9)" stroke-width="4" stroke-linejoin="square" cx="77" cy="74" r="6"></circle>
                 </g>
                 <g id="路径-2">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-21"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-13"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/button.svg b/examples/sites/demos/pc/overviewimage/button.svg
index 38f0272961..c77eff60c9 100644
--- a/examples/sites/demos/pc/overviewimage/button.svg
+++ b/examples/sites/demos/pc/overviewimage/button.svg
@@ -2,62 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Button按钮</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="53.2030982%" x2="128.792906%" y2="41.8419999%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="53.2030982%" x2="128.792906%" y2="41.8419999%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="54.0931841%" x2="128.792906%" y2="39.5750321%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M14.784,25.576 L14.784,27.176 L18.528,27.176 L18.528,37 L20.4,37 L20.4,27.176 L24.144,27.176 L24.144,25.576 L14.784,25.576 Z M26.576,25.352 C26.224,25.352 25.936,25.464 25.696,25.688 C25.456,25.912 25.344,26.2 25.344,26.552 C25.344,26.904 25.456,27.192 25.696,27.432 C25.936,27.656 26.224,27.768 26.576,27.768 C26.928,27.768 27.216,27.656 27.456,27.432 C27.696,27.208 27.824,26.904 27.824,26.552 C27.824,26.2 27.696,25.912 27.472,25.688 C27.232,25.464 26.928,25.352 26.576,25.352 Z M25.664,28.728 L25.664,37 L27.488,37 L27.488,28.728 L25.664,28.728 Z M33.456,28.504 C32.16,28.504 31.152,28.936 30.432,29.8 C29.76,30.584 29.424,31.608 29.424,32.856 C29.424,34.136 29.76,35.176 30.448,35.976 C31.152,36.808 32.144,37.224 33.424,37.224 C34.496,37.224 35.36,36.952 36,36.424 C36.656,35.88 37.088,35.048 37.28,33.928 L35.472,33.928 C35.328,35.128 34.656,35.736 33.44,35.736 C32.736,35.736 32.208,35.48 31.856,34.984 C31.472,34.472 31.296,33.752 31.296,32.84 C31.296,31.944 31.488,31.24 31.872,30.744 C32.256,30.232 32.784,29.992 33.456,29.992 C34,29.992 34.448,30.12 34.784,30.376 C35.104,30.632 35.328,31.016 35.44,31.544 L37.248,31.544 C37.088,30.504 36.672,29.736 36.016,29.224 C35.376,28.744 34.528,28.504 33.456,28.504 Z M38.72,25.352 L38.72,37 L40.544,37 L40.544,34.104 L41.376,33.32 L44.272,37 L46.608,37 L42.624,32.152 L46.288,28.728 L43.936,28.728 L40.544,32.008 L40.544,25.352 L38.72,25.352 Z M53.056,25.576 L53.056,37 L54.928,37 L54.928,29.128 L54.992,29.128 L58.352,37 L59.968,37 L63.328,29.128 L63.392,29.128 L63.392,37 L65.264,37 L65.264,25.576 L63.072,25.576 L59.2,34.536 L59.136,34.536 L55.248,25.576 L53.056,25.576 Z M70.864,28.504 C69.632,28.504 68.656,28.92 67.952,29.768 C67.216,30.6 66.864,31.624 66.864,32.856 C66.864,34.232 67.248,35.304 68.016,36.088 C68.736,36.84 69.712,37.224 70.944,37.224 C72.048,37.224 72.96,36.904 73.696,36.28 C74.272,35.768 74.656,35.112 74.848,34.344 L73.024,34.344 C72.8,34.808 72.56,35.144 72.288,35.352 C71.936,35.608 71.488,35.736 70.928,35.736 C70.272,35.736 69.76,35.528 69.408,35.128 C69.056,34.728 68.848,34.136 68.784,33.368 L74.976,33.368 C74.976,31.88 74.64,30.712 73.984,29.88 C73.264,28.952 72.224,28.504 70.864,28.504 Z M70.912,29.992 C72.192,29.992 72.912,30.648 73.072,31.992 L68.816,31.992 C68.928,31.336 69.152,30.84 69.488,30.504 C69.84,30.152 70.304,29.992 70.912,29.992 Z" id="path-12"></path>
-        <filter x="-4.2%" y="-21.1%" width="111.6%" height="159.0%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.113026947   0 0 0 0 0.233917621   0 0 0 0 0.627675817  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-14">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-15" cx="76" cy="45" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-16">
+        <circle id="path-5" cx="76" cy="45" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -65,48 +27,35 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-17">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-7">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-18" points="75.7129876 43.8022814 74.2754034 57.814413 78.9449685 55.9202277 81.4194729 62.8022814 83.8096817 61.7804537 81.2116343 54.9762941 85.8108161 53.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-19">
+        <polygon id="path-8" points="75.7129876 43.8022814 74.2754034 57.814413 78.9449685 55.9202277 81.4194729 62.8022814 83.8096817 61.7804537 81.2116343 54.9762941 85.8108161 53.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-697.000000, -327.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-697.000000, -327.000000)">
             <g id="Button按钮" transform="translate(697.000000, 327.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组" transform="translate(17.000000, 38.000000)">
-                    <rect id="矩形备份" fill="url(#linearGradient-9)" opacity="0.303770519" x="7" y="0" width="78" height="23" rx="4"></rect>
-                    <rect id="矩形" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="0" y="16" width="90" height="30" rx="4"></rect>
-                    <g id="形状结合" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="#FFFFFF" xlink:href="#path-12"></use>
-                    </g>
+                    <rect id="矩形备份" fill="url(#linearGradient-1)" opacity="0.303770519" x="7" y="0" width="78" height="23" rx="4"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)" x="0" y="16" width="90" height="30" rx="4"></rect>
+                    <path d="M14.784,25.576 L14.784,27.176 L18.528,27.176 L18.528,37 L20.4,37 L20.4,27.176 L24.144,27.176 L24.144,25.576 L14.784,25.576 Z M26.576,25.352 C26.224,25.352 25.936,25.464 25.696,25.688 C25.456,25.912 25.344,26.2 25.344,26.552 C25.344,26.904 25.456,27.192 25.696,27.432 C25.936,27.656 26.224,27.768 26.576,27.768 C26.928,27.768 27.216,27.656 27.456,27.432 C27.696,27.208 27.824,26.904 27.824,26.552 C27.824,26.2 27.696,25.912 27.472,25.688 C27.232,25.464 26.928,25.352 26.576,25.352 Z M25.664,28.728 L25.664,37 L27.488,37 L27.488,28.728 L25.664,28.728 Z M33.456,28.504 C32.16,28.504 31.152,28.936 30.432,29.8 C29.76,30.584 29.424,31.608 29.424,32.856 C29.424,34.136 29.76,35.176 30.448,35.976 C31.152,36.808 32.144,37.224 33.424,37.224 C34.496,37.224 35.36,36.952 36,36.424 C36.656,35.88 37.088,35.048 37.28,33.928 L35.472,33.928 C35.328,35.128 34.656,35.736 33.44,35.736 C32.736,35.736 32.208,35.48 31.856,34.984 C31.472,34.472 31.296,33.752 31.296,32.84 C31.296,31.944 31.488,31.24 31.872,30.744 C32.256,30.232 32.784,29.992 33.456,29.992 C34,29.992 34.448,30.12 34.784,30.376 C35.104,30.632 35.328,31.016 35.44,31.544 L37.248,31.544 C37.088,30.504 36.672,29.736 36.016,29.224 C35.376,28.744 34.528,28.504 33.456,28.504 Z M38.72,25.352 L38.72,37 L40.544,37 L40.544,34.104 L41.376,33.32 L44.272,37 L46.608,37 L42.624,32.152 L46.288,28.728 L43.936,28.728 L40.544,32.008 L40.544,25.352 L38.72,25.352 Z M53.056,25.576 L53.056,37 L54.928,37 L54.928,29.128 L54.992,29.128 L58.352,37 L59.968,37 L63.328,29.128 L63.392,29.128 L63.392,37 L65.264,37 L65.264,25.576 L63.072,25.576 L59.2,34.536 L59.136,34.536 L55.248,25.576 L53.056,25.576 Z M70.864,28.504 C69.632,28.504 68.656,28.92 67.952,29.768 C67.216,30.6 66.864,31.624 66.864,32.856 C66.864,34.232 67.248,35.304 68.016,36.088 C68.736,36.84 69.712,37.224 70.944,37.224 C72.048,37.224 72.96,36.904 73.696,36.28 C74.272,35.768 74.656,35.112 74.848,34.344 L73.024,34.344 C72.8,34.808 72.56,35.144 72.288,35.352 C71.936,35.608 71.488,35.736 70.928,35.736 C70.272,35.736 69.76,35.528 69.408,35.128 C69.056,34.728 68.848,34.136 68.784,33.368 L74.976,33.368 C74.976,31.88 74.64,30.712 73.984,29.88 C73.264,28.952 72.224,28.504 70.864,28.504 Z M70.912,29.992 C72.192,29.992 72.912,30.648 73.072,31.992 L68.816,31.992 C68.928,31.336 69.152,30.84 69.488,30.504 C69.84,30.152 70.304,29.992 70.912,29.992 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
                     <g id="椭圆形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-15"></use>
-                        <circle stroke="url(#linearGradient-14)" stroke-width="4" stroke-linejoin="square" cx="76" cy="45" r="6"></circle>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
+                        <circle stroke="url(#linearGradient-4)" stroke-width="4" stroke-linejoin="square" cx="76" cy="45" r="6"></circle>
                     </g>
                     <g id="路径-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                        <use fill="#000000" fill-rule="evenodd" xlink:href="#path-18"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                        <use fill="#000000" fill-rule="evenodd" xlink:href="#path-8"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/buttongroup.svg b/examples/sites/demos/pc/overviewimage/buttongroup.svg
deleted file mode 100644
index 7ae7444edd..0000000000
--- a/examples/sites/demos/pc/overviewimage/buttongroup.svg
+++ /dev/null
@@ -1,138 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="130px" height="125px" viewBox="0 0 130 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Buttongroup选块组</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <text id="text-11" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
-            <tspan x="16.72" y="18">1</tspan>
-        </text>
-        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-12">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.31372549   0 0 0 0 0.450980392   0 0 0 0 0.898039216  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <text id="text-13" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
-            <tspan x="59.2" y="18">2</tspan>
-        </text>
-        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.31372549   0 0 0 0 0.450980392   0 0 0 0 0.898039216  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <text id="text-15" font-family="PingFangSC-Semibold, PingFang SC" font-size="16" font-weight="500" fill="#FFFFFF">
-            <tspan x="103.2" y="18">3</tspan>
-        </text>
-        <filter x="-5.0%" y="-5.3%" width="110.0%" height="121.1%" filterUnits="objectBoundingBox" id="filter-16">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.31372549   0 0 0 0 0.450980392   0 0 0 0 0.898039216  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <circle id="path-18" cx="77" cy="74" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-19">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-20">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <polygon id="path-21" points="76.7129876 72.8022814 75.2754034 86.814413 79.9449685 84.9202277 82.4194729 91.8022814 84.8096817 90.7804537 82.2116343 83.9762941 86.8108161 82.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-22">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1480.000000, -574.000000)">
-            <g id="Buttongroup选块组" transform="translate(1481.000000, 574.000000)">
-                <g id="编组" transform="translate(1.000000, 0.000000)">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="编组-11" transform="translate(0.000000, 49.000000)">
-                    <rect id="矩形备份" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="88" y="0" width="40" height="24" rx="2"></rect>
-                    <rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="0" y="0" width="40" height="24" rx="2"></rect>
-                    <rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="44" y="0" width="40" height="24" rx="2"></rect>
-                    <g id="1" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-12)" xlink:href="#text-11"></use>
-                        <use xlink:href="#text-11"></use>
-                    </g>
-                    <g id="2" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-14)" xlink:href="#text-13"></use>
-                        <use xlink:href="#text-13"></use>
-                    </g>
-                    <g id="3" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-16)" xlink:href="#text-15"></use>
-                        <use xlink:href="#text-15"></use>
-                    </g>
-                </g>
-                <g id="椭圆形">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
-                    <circle stroke="url(#linearGradient-17)" stroke-width="4" stroke-linejoin="square" cx="77" cy="74" r="6"></circle>
-                </g>
-                <g id="路径-2">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-21"></use>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/calendar-view.svg b/examples/sites/demos/pc/overviewimage/calendar-view.svg
index 77060ae0fc..2710a405f8 100644
--- a/examples/sites/demos/pc/overviewimage/calendar-view.svg
+++ b/examples/sites/demos/pc/overviewimage/calendar-view.svg
@@ -2,67 +2,25 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>CalendarView 日历视图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="51.023296%" x2="128.792906%" y2="47.393758%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="51.023296%" x2="128.792906%" y2="47.393758%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="64.6040768%" x2="128.792906%" y2="12.804744%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="64.6040768%" x2="128.792906%" y2="12.804744%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -2534.000000)">
             <g id="编组-17备份-16" transform="translate(598.000000, 2501.000000)">
                 <g id="CalendarView-日历视图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="我的任务" transform="translate(35.500000, 36.000000)">
-                        <path d="M1.92857143,6 L52.0714286,6 C53.1365492,6 54,6.67157288 54,7.5 L54,15 L0,15 L0,7.5 C0,6.67157288 0.86345084,6 1.92857143,6 Z" id="路径" fill="url(#linearGradient-9)"></path>
+                        <path d="M1.92857143,6 L52.0714286,6 C53.1365492,6 54,6.67157288 54,7.5 L54,15 L0,15 L0,7.5 C0,6.67157288 0.86345084,6 1.92857143,6 Z" id="路径" fill="url(#linearGradient-1)"></path>
                         <path d="M13.326,-1 C14.4124041,-1 15.138795,-0.733212494 15.622888,-0.326610015 C16.1850677,0.145579546 16.5,0.837499354 16.5,1.826 L16.5,1.826 L16.5,8.174 C16.5,9.116 16.212075,9.78913861 15.7506068,10.2506068 C15.2891386,10.712075 14.616,11 13.674,11 C12.2772843,11 11.6790227,10.6802363 11.2493932,10.2506068 C10.787925,9.78913861 10.5,9.116 10.5,8.174 L10.5,8.174 L10.5,1.826 C10.5,0.884 10.787925,0.210861392 11.2493932,-0.250606781 C11.7108614,-0.712074955 12.384,-1 13.326,-1 L13.326,-1 Z" id="路径" stroke="#F8FBFE" stroke-width="2" fill="#96ACEE"></path>
                         <path d="M41.326,-1 C42.4124041,-1 43.138795,-0.733212494 43.622888,-0.326610015 C44.1850677,0.145579546 44.5,0.837499354 44.5,1.826 L44.5,1.826 L44.5,8.174 C44.5,9.116 44.212075,9.78913861 43.7506068,10.2506068 C43.2891386,10.712075 42.616,11 41.674,11 C40.2772843,11 39.6790227,10.6802363 39.2493932,10.2506068 C38.787925,9.78913861 38.5,9.116 38.5,8.174 L38.5,8.174 L38.5,1.826 C38.5,0.884 38.787925,0.210861392 39.2493932,-0.250606781 C39.7108614,-0.712074955 40.384,-1 41.326,-1 L41.326,-1 Z" id="路径" stroke="#F8FBFE" stroke-width="2" fill="#96ACEE"></path>
-                        <path d="M0,15 L0,46.6818182 C0,47.9621146 1.29517626,49 2.89285714,49 L51.1071429,49 C52.7048237,49 54,47.9621146 54,46.6818182 L54,15 L0,15 Z M16.3214288,20.899 C16.3214288,20.7510333 16.387988,20.6091269 16.5064641,20.5044987 C16.6249402,20.3998704 16.7856283,20.3410909 16.9531788,20.3410909 L31.4396777,20.3410909 C31.6072282,20.3410909 31.7679163,20.3998704 31.8863924,20.5044987 C32.0048685,20.6091269 32.0714277,20.7510333 32.0714277,20.899 L32.0714277,23.4938182 C32.0714277,23.6416432 32.0048134,23.7833911 31.8862867,23.8877741 C31.76776,23.9921571 31.6070671,24.0505924 31.4396777,24.050184 L16.9531788,24.050184 C16.7857894,24.0505924 16.6250965,23.9921571 16.5065698,23.8877741 C16.3880431,23.7833911 16.3214288,23.6416432 16.3214288,23.4938182 L16.3214288,20.899 Z M10.9464286,42.6729091 C9.8862391,42.6729091 9.02678571,41.8080046 9.02678571,40.7410909 C9.02678571,39.6741772 9.8862391,38.8092727 10.9464286,38.8092727 C12.006618,38.8092727 12.8660714,39.6741772 12.8660714,40.7410909 C12.8660714,41.8080046 12.006618,42.6729091 10.9464286,42.6729091 Z M10.9464286,33.4001818 C9.8862391,33.4001818 9.02678571,32.5352774 9.02678571,31.4683636 C9.02678571,30.4014499 9.8862391,29.5365455 10.9464286,29.5365455 C12.006618,29.5365455 12.8660714,30.4014499 12.8660714,31.4683636 C12.8660714,32.5352774 12.006618,33.4001818 10.9464286,33.4001818 Z M10.9464286,24.1274545 C9.8862391,24.1274545 9.02678571,23.2625501 9.02678571,22.1956364 C9.02678571,21.1287226 9.8862391,20.2638182 10.9464286,20.2638182 C12.006618,20.2638182 12.8660714,21.1287226 12.8660714,22.1956364 C12.8660714,23.2625501 12.006618,24.1274545 10.9464286,24.1274545 Z M39.0714292,41.9264545 C39.0714292,42.2960335 38.732171,42.5956364 38.3136772,42.5956364 L17.0791788,42.5956364 C16.660685,42.5956364 16.3214268,42.2960335 16.3214268,41.9264545 L16.3214268,39.5572727 C16.320964,39.3795271 16.4005929,39.2089207 16.542749,39.0830904 C16.6849051,38.95726 16.8779074,38.8865455 17.0791788,38.8865455 L38.3136772,38.8865455 C38.5149486,38.8865455 38.7079509,38.95726 38.850107,39.0830904 C38.9922631,39.2089207 39.071892,39.3795271 39.0714292,39.5572727 L39.0714292,41.9264545 Z M44.3214288,32.5795455 C44.3214288,32.9900939 43.9445625,33.3229091 43.4796769,33.3229091 L17.1631788,33.3229091 C16.6982931,33.3229091 16.3214288,32.9900939 16.3214288,32.5795455 L16.3214288,30.3571818 C16.3214288,29.9466334 16.6982931,29.6138182 17.1631788,29.6138182 L43.4796769,29.6138182 C43.7029228,29.6138182 43.9170252,29.6921366 44.0748839,29.8315444 C44.2327427,29.9709521 44.3214288,30.1600295 44.3214288,30.3571818 L44.3214288,32.5795455 Z" id="形状" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                        <path d="M0,15 L0,46.6818182 C0,47.9621146 1.29517626,49 2.89285714,49 L51.1071429,49 C52.7048237,49 54,47.9621146 54,46.6818182 L54,15 L0,15 Z M16.3214288,20.899 C16.3214288,20.7510333 16.387988,20.6091269 16.5064641,20.5044987 C16.6249402,20.3998704 16.7856283,20.3410909 16.9531788,20.3410909 L31.4396777,20.3410909 C31.6072282,20.3410909 31.7679163,20.3998704 31.8863924,20.5044987 C32.0048685,20.6091269 32.0714277,20.7510333 32.0714277,20.899 L32.0714277,23.4938182 C32.0714277,23.6416432 32.0048134,23.7833911 31.8862867,23.8877741 C31.76776,23.9921571 31.6070671,24.0505924 31.4396777,24.050184 L16.9531788,24.050184 C16.7857894,24.0505924 16.6250965,23.9921571 16.5065698,23.8877741 C16.3880431,23.7833911 16.3214288,23.6416432 16.3214288,23.4938182 L16.3214288,20.899 Z M10.9464286,42.6729091 C9.8862391,42.6729091 9.02678571,41.8080046 9.02678571,40.7410909 C9.02678571,39.6741772 9.8862391,38.8092727 10.9464286,38.8092727 C12.006618,38.8092727 12.8660714,39.6741772 12.8660714,40.7410909 C12.8660714,41.8080046 12.006618,42.6729091 10.9464286,42.6729091 Z M10.9464286,33.4001818 C9.8862391,33.4001818 9.02678571,32.5352774 9.02678571,31.4683636 C9.02678571,30.4014499 9.8862391,29.5365455 10.9464286,29.5365455 C12.006618,29.5365455 12.8660714,30.4014499 12.8660714,31.4683636 C12.8660714,32.5352774 12.006618,33.4001818 10.9464286,33.4001818 Z M10.9464286,24.1274545 C9.8862391,24.1274545 9.02678571,23.2625501 9.02678571,22.1956364 C9.02678571,21.1287226 9.8862391,20.2638182 10.9464286,20.2638182 C12.006618,20.2638182 12.8660714,21.1287226 12.8660714,22.1956364 C12.8660714,23.2625501 12.006618,24.1274545 10.9464286,24.1274545 Z M39.0714292,41.9264545 C39.0714292,42.2960335 38.732171,42.5956364 38.3136772,42.5956364 L17.0791788,42.5956364 C16.660685,42.5956364 16.3214268,42.2960335 16.3214268,41.9264545 L16.3214268,39.5572727 C16.320964,39.3795271 16.4005929,39.2089207 16.542749,39.0830904 C16.6849051,38.95726 16.8779074,38.8865455 17.0791788,38.8865455 L38.3136772,38.8865455 C38.5149486,38.8865455 38.7079509,38.95726 38.850107,39.0830904 C38.9922631,39.2089207 39.071892,39.3795271 39.0714292,39.5572727 L39.0714292,41.9264545 Z M44.3214288,32.5795455 C44.3214288,32.9900939 43.9445625,33.3229091 43.4796769,33.3229091 L17.1631788,33.3229091 C16.6982931,33.3229091 16.3214288,32.9900939 16.3214288,32.5795455 L16.3214288,30.3571818 C16.3214288,29.9466334 16.6982931,29.6138182 17.1631788,29.6138182 L43.4796769,29.6138182 C43.7029228,29.6138182 43.9170252,29.6921366 44.0748839,29.8315444 C44.2327427,29.9709521 44.3214288,30.1600295 44.3214288,30.3571818 L44.3214288,32.5795455 Z" id="形状" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/calendar.svg b/examples/sites/demos/pc/overviewimage/calendar.svg
index cf765abef1..1a9a158264 100644
--- a/examples/sites/demos/pc/overviewimage/calendar.svg
+++ b/examples/sites/demos/pc/overviewimage/calendar.svg
@@ -2,88 +2,48 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Calendar 日历</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="53.3546948%" x2="128.792906%" y2="41.4558973%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="53.3546948%" x2="128.792906%" y2="41.4558973%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.3546948%" x2="128.792906%" y2="41.4558973%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="53.3546948%" x2="128.792906%" y2="41.4558973%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.8692111%" x2="128.792906%" y2="22.3171074%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="60.8692111%" x2="128.792906%" y2="22.3171074%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1084.000000, -2255.000000)">
-            <g id="编组-14备份-12" transform="translate(986.000000, 2225.000000)">
-                <g id="Calendar-日历" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1084.000000, -2306.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-12" transform="translate(390.000000, 1965.000000)">
+                    <g id="Calendar-日历" transform="translate(98.000000, 30.000000)">
+                        <g id="编组"></g>
+                        <g id="日期" transform="translate(31.000000, 35.000000)">
+                            <path d="M42.009879,5.61290323 L42.009879,9.76480833 C42.0263977,11.7577176 43.6573488,13.3608375 45.6548184,13.3475489 C47.6724455,13.3475489 49.2997579,11.7299235 49.2997579,9.75282588 L49.2997579,9.75282588 L49.2997579,5.61290323 L54.0435835,5.61290323 C58.4331235,5.61290323 62,9.12374936 62,13.437417 L62,13.437417 L62,18.7096774 L0.228184037,18.7096774 C0.152140216,18.7073736 0.0760438204,18.7073736 0,18.7096774 L0,18.7096774 L0,13.437417 C0,9.12374936 3.56687658,5.61889441 7.9624213,5.6248856 L7.9624213,5.6248856 L11.8895884,5.6248856 L11.8895884,9.76480833 C11.9061071,11.7577176 13.5370582,13.3608375 15.5345278,13.3475489 C17.5461502,13.3475489 19.1794674,11.7299235 19.1794674,9.75282588 L19.1794674,9.75282588 L19.1794674,5.61290323 L42.009879,5.61290323 Z M15.5,0 C16.2782194,-1.42956588e-16 16.9090909,0.630871489 16.9090909,1.40909091 L16.9090909,8.88123167 C16.9090909,9.65945109 16.2782194,10.2903226 15.5,10.2903226 C14.7217806,10.2903226 14.0909091,9.65945109 14.0909091,8.88123167 L14.0909091,1.40909091 C14.0909091,0.630871489 14.7217806,1.42956588e-16 15.5,0 Z M45.5606061,0 C46.3388255,-1.42956588e-16 46.969697,0.630871489 46.969697,1.40909091 L46.969697,8.88123167 C46.969697,9.65945109 46.3388255,10.2903226 45.5606061,10.2903226 C44.7823866,10.2903226 44.1515152,9.65945109 44.1515152,8.88123167 L44.1515152,1.40909091 C44.1515152,0.630871489 44.7823866,1.42956588e-16 45.5606061,0 Z" id="形状" stroke="url(#linearGradient-2)" stroke-width="0.939393939" fill="url(#linearGradient-1)"></path>
+                            <path d="M62,24.3282618 L0.228206139,24.3282618 L0,24.3225806 L0,50.5861956 C0,54.6765705 3.57322741,58 7.95718716,58 L54.0368074,58 C58.4267726,58 61.9939946,54.6708894 61.9939946,50.5861956 L61.9939946,24.3282618 L62,24.3282618 Z" id="形状备份" fill="url(#linearGradient-3)" opacity="0.303770519"></path>
+                            <rect id="矩形" fill="url(#linearGradient-4)" opacity="0.303770519" x="6" y="32" width="8" height="8" rx="4"></rect>
+                            <rect id="矩形备份-18" fill="url(#linearGradient-4)" opacity="0.303770519" x="18" y="32" width="8" height="8" rx="4"></rect>
+                            <rect id="矩形备份-14" fill="url(#linearGradient-4)" opacity="0.303770519" x="6" y="44" width="8" height="8" rx="4"></rect>
+                            <rect id="矩形备份-19" fill="url(#linearGradient-4)" opacity="0.303770519" x="18" y="44" width="8" height="8" rx="4"></rect>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="日期" transform="translate(31.000000, 35.000000)">
-                        <path d="M42.009879,5.61290323 L42.009879,9.76480833 C42.0263977,11.7577176 43.6573488,13.3608375 45.6548184,13.3475489 C47.6724455,13.3475489 49.2997579,11.7299235 49.2997579,9.75282588 L49.2997579,9.75282588 L49.2997579,5.61290323 L54.0435835,5.61290323 C58.4331235,5.61290323 62,9.12374936 62,13.437417 L62,13.437417 L62,18.7096774 L0.228184037,18.7096774 C0.152140216,18.7073736 0.0760438204,18.7073736 0,18.7096774 L0,18.7096774 L0,13.437417 C0,9.12374936 3.56687658,5.61889441 7.9624213,5.6248856 L7.9624213,5.6248856 L11.8895884,5.6248856 L11.8895884,9.76480833 C11.9061071,11.7577176 13.5370582,13.3608375 15.5345278,13.3475489 C17.5461502,13.3475489 19.1794674,11.7299235 19.1794674,9.75282588 L19.1794674,9.75282588 L19.1794674,5.61290323 L42.009879,5.61290323 Z M15.5,0 C16.2782194,-1.42956588e-16 16.9090909,0.630871489 16.9090909,1.40909091 L16.9090909,8.88123167 C16.9090909,9.65945109 16.2782194,10.2903226 15.5,10.2903226 C14.7217806,10.2903226 14.0909091,9.65945109 14.0909091,8.88123167 L14.0909091,1.40909091 C14.0909091,0.630871489 14.7217806,1.42956588e-16 15.5,0 Z M45.5606061,0 C46.3388255,-1.42956588e-16 46.969697,0.630871489 46.969697,1.40909091 L46.969697,8.88123167 C46.969697,9.65945109 46.3388255,10.2903226 45.5606061,10.2903226 C44.7823866,10.2903226 44.1515152,9.65945109 44.1515152,8.88123167 L44.1515152,1.40909091 C44.1515152,0.630871489 44.7823866,1.42956588e-16 45.5606061,0 Z" id="形状" stroke="url(#linearGradient-10)" stroke-width="0.939393939" fill="url(#linearGradient-9)"></path>
-                        <path d="M62,24.3282618 L0.228206139,24.3282618 L0,24.3225806 L0,50.5861956 C0,54.6765705 3.57322741,58 7.95718716,58 L54.0368074,58 C58.4267726,58 61.9939946,54.6708894 61.9939946,50.5861956 L61.9939946,24.3282618 L62,24.3282618 Z" id="形状备份" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
-                        <rect id="矩形" fill="url(#linearGradient-12)" opacity="0.303770519" x="6" y="32" width="8" height="8" rx="4"></rect>
-                        <rect id="矩形备份-18" fill="url(#linearGradient-12)" opacity="0.303770519" x="18" y="32" width="8" height="8" rx="4"></rect>
-                        <rect id="矩形备份-14" fill="url(#linearGradient-12)" opacity="0.303770519" x="6" y="44" width="8" height="8" rx="4"></rect>
-                        <rect id="矩形备份-19" fill="url(#linearGradient-12)" opacity="0.303770519" x="18" y="44" width="8" height="8" rx="4"></rect>
+                        <rect id="矩形备份-10" fill="#5073E5" transform="translate(74.415445, 86.054252) rotate(-270.000000) translate(-74.415445, -86.054252) " x="73.4154448" y="73.5542522" width="2" height="25" rx="1"></rect>
+                        <path d="M63,75.6373169 C63.0150239,76.443315 63.1453104,77.1758242 63.3904291,77.835119 C63.6351171,78.4944597 63.9911444,79.0586996 64.4583196,79.5274267 C64.9252077,79.9965201 65.50688,80.3591575 66.2037671,80.6153846 C66.9003194,80.8715659 67.7156271,80.9999542 68.6496904,80.9999542 C69.415094,80.9999542 70.1425074,80.8901098 70.8314999,80.6702839 C71.5204923,80.4505036 72.1251789,80.1393773 72.6458946,79.7362637 C73.1662274,79.3334249 73.5796229,78.8427198 73.886081,78.2637362 C74.1921563,77.6850732 74.3454093,77.0295329 74.3454093,76.2967033 C74.3454093,75.3004579 74.0888553,74.4543498 73.5760344,73.7582417 C73.0628785,73.0625458 72.3473311,72.6263736 71.4286745,72.4505494 L71.4286745,72.4065934 C72.2095326,72.1428113 72.7836931,71.7218406 73.1511557,71.1428113 C73.5186184,70.5641941 73.7023496,69.88663 73.7023497,69.1098901 C73.7023497,68.4361263 73.5566565,67.8389652 73.2660356,67.3186813 C72.9749841,66.7987637 72.5885263,66.3701923 72.1062316,66.032967 C71.6239369,65.6961081 71.0803027,65.4395605 70.4756161,65.2637363 C69.8705468,65.0879121 69.2544727,65 68.6268197,65 C67.8150526,65 67.0880219,65.1318681 66.4449623,65.3956044 C65.8019027,65.6593406 65.2542972,66.0257784 64.8028636,66.4945055 C64.3510951,66.9635989 63.9951157,67.5164835 63.7349732,68.1538462 C63.4744479,68.7912088 63.3290896,69.4835165 63.2986113,70.2307235 L65.9167826,70.2307235 C65.901376,69.835119 65.9473088,69.4505037 66.0545811,69.0768773 C66.1615185,68.7032967 66.3262547,68.3663919 66.5483591,68.0659341 C66.7701285,67.7657967 67.0496968,67.5274725 67.3866332,67.3516483 C67.7232348,67.1758242 68.1215585,67.0879121 68.5808868,67.0879121 C69.3158121,67.0879121 69.9165275,67.2857143 70.3837983,67.6813187 C70.8506386,68.0769231 71.084274,68.6043956 71.084274,69.2637363 C71.084274,69.7328297 70.9809251,70.1284799 70.7742752,70.4505495 C70.5675775,70.7730312 70.295569,71.0257326 69.9589674,71.208837 C69.6219831,71.3922161 69.2391138,71.5203297 68.8106467,71.5934066 C68.3864274,71.6665236 67.9552528,71.6960106 67.5244796,71.6813645 L67.5244796,73.5494964 C68.0448603,73.5350733 68.5540449,73.5494964 69.0517941,73.5934524 C69.5491605,73.6374084 69.9970056,73.7510531 70.3953294,73.9340659 C70.7932704,74.117445 71.1148002,74.3846611 71.359871,74.7363095 C71.6046068,75.0879579 71.7273815,75.5642399 71.7273815,76.164881 C71.7273815,77.0440018 71.4324066,77.7218864 70.8431745,78.1978022 C70.2536074,78.67413 69.5226056,78.9121337 68.6498818,78.9121337 C67.6239528,78.9121337 66.8545779,78.6010073 66.341757,77.9780678 C65.8286012,77.3554487 65.5874538,76.5752289 65.6183149,75.6374084 L63,75.6374084 L63,75.6373169 Z M76.9291789,78.3076923 C77.3346797,79.0917124 77.9012803,79.7362637 78.6286937,80.2417582 C79.3557243,80.7472527 80.2938066,81 81.4421274,81 C82.5904482,81 83.5281,80.7472528 84.2555133,80.2417582 C84.982496,79.7362637 85.5491445,79.0917124 85.9550281,78.3076923 C86.3605767,77.5240384 86.6361258,76.663141 86.7818191,75.7252747 C86.9271295,74.7877747 87,73.8791667 87,73 C87,72.1208333 86.9271773,71.2125458 86.7818191,70.2746795 C86.6361259,69.3371795 86.3605289,68.476282 85.9550281,67.6923077 C85.5491924,66.9086538 84.9825439,66.2637363 84.2555133,65.7582417 C83.5281,65.2527472 82.5904482,65 81.4421274,65 C80.2938067,65 79.3557721,65.2527472 78.6286937,65.7582417 C77.9013281,66.2637362 77.3346797,66.9086538 76.9291789,67.6923077 C76.5233432,68.476282 76.2477462,69.3372252 76.102388,70.2746795 C75.9566948,71.2125 75.884207,72.1208333 75.884207,73 C75.884207,73.8791667 75.9566947,74.7877747 76.102388,75.7252747 C76.2476984,76.663141 76.5232954,77.5240385 76.9291789,78.3076923 Z M78.640129,70.7252289 C78.7319947,70.0147436 78.8887883,69.38837 79.1109405,68.846108 C79.3327579,68.3042582 79.6312734,67.8756868 80.0066786,67.5604395 C80.3816532,67.2455128 80.8600245,67.0879121 81.4420795,67.0879121 C82.0083452,67.0879121 82.4830802,67.2455128 82.8659973,67.5604395 C83.2485317,67.8756868 83.5510185,68.3042582 83.7731707,68.846108 C83.9949402,69.3883699 84.1521166,70.0147436 84.2439823,70.7252289 C84.3358479,71.4360806 84.3817808,72.1943223 84.3817808,73 C84.3817808,73.8059982 84.3358479,74.5679945 84.2439823,75.2857143 C84.1521166,76.0038003 83.9949402,76.6301282 83.7731707,77.1648352 C83.5510185,77.6998626 83.2485317,78.1246795 82.8659973,78.4395604 C82.4830802,78.7548077 82.0083452,78.9120879 81.4420795,78.9120879 C80.8600244,78.9120879 80.3816532,78.7547619 80.0066786,78.4395604 C79.6312734,78.1246795 79.3327579,77.6998626 79.1109405,77.1648352 C78.8887883,76.6301282 78.7319947,76.0038004 78.640129,75.2857143 C78.5482633,74.5679945 78.5023305,73.8059982 78.5023305,73 C78.5023305,72.1943223 78.5482633,71.4361264 78.640129,70.7252289 Z" id="形状备份-2" stroke="url(#linearGradient-6)" stroke-width="0.857142857" fill="url(#linearGradient-5)"></path>
                     </g>
-                    <rect id="矩形备份-10" fill="#5073E5" transform="translate(74.415445, 86.054252) rotate(-270.000000) translate(-74.415445, -86.054252) " x="73.4154448" y="73.5542522" width="2" height="25" rx="1"></rect>
-                    <path d="M63,75.6373169 C63.0150239,76.443315 63.1453104,77.1758242 63.3904291,77.835119 C63.6351171,78.4944597 63.9911444,79.0586996 64.4583196,79.5274267 C64.9252077,79.9965201 65.50688,80.3591575 66.2037671,80.6153846 C66.9003194,80.8715659 67.7156271,80.9999542 68.6496904,80.9999542 C69.415094,80.9999542 70.1425074,80.8901098 70.8314999,80.6702839 C71.5204923,80.4505036 72.1251789,80.1393773 72.6458946,79.7362637 C73.1662274,79.3334249 73.5796229,78.8427198 73.886081,78.2637362 C74.1921563,77.6850732 74.3454093,77.0295329 74.3454093,76.2967033 C74.3454093,75.3004579 74.0888553,74.4543498 73.5760344,73.7582417 C73.0628785,73.0625458 72.3473311,72.6263736 71.4286745,72.4505494 L71.4286745,72.4065934 C72.2095326,72.1428113 72.7836931,71.7218406 73.1511557,71.1428113 C73.5186184,70.5641941 73.7023496,69.88663 73.7023497,69.1098901 C73.7023497,68.4361263 73.5566565,67.8389652 73.2660356,67.3186813 C72.9749841,66.7987637 72.5885263,66.3701923 72.1062316,66.032967 C71.6239369,65.6961081 71.0803027,65.4395605 70.4756161,65.2637363 C69.8705468,65.0879121 69.2544727,65 68.6268197,65 C67.8150526,65 67.0880219,65.1318681 66.4449623,65.3956044 C65.8019027,65.6593406 65.2542972,66.0257784 64.8028636,66.4945055 C64.3510951,66.9635989 63.9951157,67.5164835 63.7349732,68.1538462 C63.4744479,68.7912088 63.3290896,69.4835165 63.2986113,70.2307235 L65.9167826,70.2307235 C65.901376,69.835119 65.9473088,69.4505037 66.0545811,69.0768773 C66.1615185,68.7032967 66.3262547,68.3663919 66.5483591,68.0659341 C66.7701285,67.7657967 67.0496968,67.5274725 67.3866332,67.3516483 C67.7232348,67.1758242 68.1215585,67.0879121 68.5808868,67.0879121 C69.3158121,67.0879121 69.9165275,67.2857143 70.3837983,67.6813187 C70.8506386,68.0769231 71.084274,68.6043956 71.084274,69.2637363 C71.084274,69.7328297 70.9809251,70.1284799 70.7742752,70.4505495 C70.5675775,70.7730312 70.295569,71.0257326 69.9589674,71.208837 C69.6219831,71.3922161 69.2391138,71.5203297 68.8106467,71.5934066 C68.3864274,71.6665236 67.9552528,71.6960106 67.5244796,71.6813645 L67.5244796,73.5494964 C68.0448603,73.5350733 68.5540449,73.5494964 69.0517941,73.5934524 C69.5491605,73.6374084 69.9970056,73.7510531 70.3953294,73.9340659 C70.7932704,74.117445 71.1148002,74.3846611 71.359871,74.7363095 C71.6046068,75.0879579 71.7273815,75.5642399 71.7273815,76.164881 C71.7273815,77.0440018 71.4324066,77.7218864 70.8431745,78.1978022 C70.2536074,78.67413 69.5226056,78.9121337 68.6498818,78.9121337 C67.6239528,78.9121337 66.8545779,78.6010073 66.341757,77.9780678 C65.8286012,77.3554487 65.5874538,76.5752289 65.6183149,75.6374084 L63,75.6374084 L63,75.6373169 Z M76.9291789,78.3076923 C77.3346797,79.0917124 77.9012803,79.7362637 78.6286937,80.2417582 C79.3557243,80.7472527 80.2938066,81 81.4421274,81 C82.5904482,81 83.5281,80.7472528 84.2555133,80.2417582 C84.982496,79.7362637 85.5491445,79.0917124 85.9550281,78.3076923 C86.3605767,77.5240384 86.6361258,76.663141 86.7818191,75.7252747 C86.9271295,74.7877747 87,73.8791667 87,73 C87,72.1208333 86.9271773,71.2125458 86.7818191,70.2746795 C86.6361259,69.3371795 86.3605289,68.476282 85.9550281,67.6923077 C85.5491924,66.9086538 84.9825439,66.2637363 84.2555133,65.7582417 C83.5281,65.2527472 82.5904482,65 81.4421274,65 C80.2938067,65 79.3557721,65.2527472 78.6286937,65.7582417 C77.9013281,66.2637362 77.3346797,66.9086538 76.9291789,67.6923077 C76.5233432,68.476282 76.2477462,69.3372252 76.102388,70.2746795 C75.9566948,71.2125 75.884207,72.1208333 75.884207,73 C75.884207,73.8791667 75.9566947,74.7877747 76.102388,75.7252747 C76.2476984,76.663141 76.5232954,77.5240385 76.9291789,78.3076923 Z M78.640129,70.7252289 C78.7319947,70.0147436 78.8887883,69.38837 79.1109405,68.846108 C79.3327579,68.3042582 79.6312734,67.8756868 80.0066786,67.5604395 C80.3816532,67.2455128 80.8600245,67.0879121 81.4420795,67.0879121 C82.0083452,67.0879121 82.4830802,67.2455128 82.8659973,67.5604395 C83.2485317,67.8756868 83.5510185,68.3042582 83.7731707,68.846108 C83.9949402,69.3883699 84.1521166,70.0147436 84.2439823,70.7252289 C84.3358479,71.4360806 84.3817808,72.1943223 84.3817808,73 C84.3817808,73.8059982 84.3358479,74.5679945 84.2439823,75.2857143 C84.1521166,76.0038003 83.9949402,76.6301282 83.7731707,77.1648352 C83.5510185,77.6998626 83.2485317,78.1246795 82.8659973,78.4395604 C82.4830802,78.7548077 82.0083452,78.9120879 81.4420795,78.9120879 C80.8600244,78.9120879 80.3816532,78.7547619 80.0066786,78.4395604 C79.6312734,78.1246795 79.3327579,77.6998626 79.1109405,77.1648352 C78.8887883,76.6301282 78.7319947,76.0038004 78.640129,75.2857143 C78.5482633,74.5679945 78.5023305,73.8059982 78.5023305,73 C78.5023305,72.1943223 78.5482633,71.4361264 78.640129,70.7252289 Z" id="形状备份-2" stroke="url(#linearGradient-14)" stroke-width="0.857142857" fill="url(#linearGradient-13)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/card.svg b/examples/sites/demos/pc/overviewimage/card.svg
index b4fc7b8d88..2b51a878cc 100644
--- a/examples/sites/demos/pc/overviewimage/card.svg
+++ b/examples/sites/demos/pc/overviewimage/card.svg
@@ -2,173 +2,87 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Card 卡片</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="65.3334682%" x2="128.792906%" y2="10.9470504%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="65.3334682%" x2="128.792906%" y2="10.9470504%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="65.3334682%" x2="128.792906%" y2="10.9470504%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="65.3334682%" x2="128.792906%" y2="10.9470504%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M9.5,8 L52.5,8 C53.3284271,8 54,8.67157288 54,9.5 C54,10.3284271 53.3284271,11 52.5,11 L9.5,11 C8.67157288,11 8,10.3284271 8,9.5 C8,8.67157288 8.67157288,8 9.5,8 Z" id="path-11"></path>
-        <filter x="-9.8%" y="-83.3%" width="119.6%" height="400.0%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M9.5,8 L52.5,8 C53.3284271,8 54,8.67157288 54,9.5 C54,10.3284271 53.3284271,11 52.5,11 L9.5,11 C8.67157288,11 8,10.3284271 8,9.5 C8,8.67157288 8.67157288,8 9.5,8 Z" id="path-3"></path>
+        <filter x="-9.8%" y="-83.3%" width="119.6%" height="400.0%" filterUnits="objectBoundingBox" id="filter-4">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M10,19 L37,19 C37.5522847,19 38,19.4477153 38,20 C38,20.5522847 37.5522847,21 37,21 L10,21 C9.44771525,21 9,20.5522847 9,20 C9,19.4477153 9.44771525,19 10,19 Z" id="path-13"></path>
-        <filter x="-15.5%" y="-125.0%" width="131.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-14">
+        <path d="M10,19 L37,19 C37.5522847,19 38,19.4477153 38,20 C38,20.5522847 37.5522847,21 37,21 L10,21 C9.44771525,21 9,20.5522847 9,20 C9,19.4477153 9.44771525,19 10,19 Z" id="path-5"></path>
+        <filter x="-15.5%" y="-125.0%" width="131.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M10,29 L17,29 C17.5522847,29 18,29.4477153 18,30 C18,30.5522847 17.5522847,31 17,31 L10,31 C9.44771525,31 9,30.5522847 9,30 C9,29.4477153 9.44771525,29 10,29 Z" id="path-15"></path>
-        <filter x="-50.0%" y="-125.0%" width="200.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-16">
+        <path d="M10,29 L17,29 C17.5522847,29 18,29.4477153 18,30 C18,30.5522847 17.5522847,31 17,31 L10,31 C9.44771525,31 9,30.5522847 9,30 C9,29.4477153 9.44771525,29 10,29 Z" id="path-7"></path>
+        <filter x="-50.0%" y="-125.0%" width="200.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-8">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M23,29 L30,29 C30.5522847,29 31,29.4477153 31,30 C31,30.5522847 30.5522847,31 30,31 L23,31 C22.4477153,31 22,30.5522847 22,30 C22,29.4477153 22.4477153,29 23,29 Z" id="path-17"></path>
-        <filter x="-50.0%" y="-125.0%" width="200.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-18">
+        <path d="M23,29 L30,29 C30.5522847,29 31,29.4477153 31,30 C31,30.5522847 30.5522847,31 30,31 L23,31 C22.4477153,31 22,30.5522847 22,30 C22,29.4477153 22.4477153,29 23,29 Z" id="path-9"></path>
+        <filter x="-50.0%" y="-125.0%" width="200.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-10">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-19" x="0" y="0" width="62" height="40" rx="4"></rect>
-        <filter x="-7.3%" y="-6.2%" width="114.5%" height="122.5%" filterUnits="objectBoundingBox" id="filter-20">
+        <rect id="path-11" x="0" y="0" width="62" height="40" rx="4"></rect>
+        <filter x="-7.3%" y="-6.2%" width="114.5%" height="122.5%" filterUnits="objectBoundingBox" id="filter-12">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M9.5,8 L52.5,8 C53.3284271,8 54,8.67157288 54,9.5 C54,10.3284271 53.3284271,11 52.5,11 L9.5,11 C8.67157288,11 8,10.3284271 8,9.5 C8,8.67157288 8.67157288,8 9.5,8 Z" id="path-21"></path>
-        <filter x="-9.8%" y="-83.3%" width="119.6%" height="400.0%" filterUnits="objectBoundingBox" id="filter-22">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M10,19 L37,19 C37.5522847,19 38,19.4477153 38,20 C38,20.5522847 37.5522847,21 37,21 L10,21 C9.44771525,21 9,20.5522847 9,20 C9,19.4477153 9.44771525,19 10,19 Z" id="path-23"></path>
-        <filter x="-15.5%" y="-125.0%" width="131.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-24">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M10,29 L17,29 C17.5522847,29 18,29.4477153 18,30 C18,30.5522847 17.5522847,31 17,31 L10,31 C9.44771525,31 9,30.5522847 9,30 C9,29.4477153 9.44771525,29 10,29 Z" id="path-25"></path>
-        <filter x="-50.0%" y="-125.0%" width="200.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-26">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M23,29 L30,29 C30.5522847,29 31,29.4477153 31,30 C31,30.5522847 30.5522847,31 30,31 L23,31 C22.4477153,31 22,30.5522847 22,30 C22,29.4477153 22.4477153,29 23,29 Z" id="path-27"></path>
-        <filter x="-50.0%" y="-125.0%" width="200.0%" height="550.0%" filterUnits="objectBoundingBox" id="filter-28">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】" transform="translate(-1089.000000, -1350.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1089.000000, -1350.000000)">
             <g id="Card-卡片" transform="translate(1089.000000, 1350.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-34" opacity="0.3" transform="translate(22.000000, 48.000000)">
-                    <rect id="形状结合" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="0" y="0" width="62" height="40" rx="4"></rect>
+                    <rect id="形状结合" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" x="0" y="0" width="62" height="40" rx="4"></rect>
                     <g id="形状结合备份-44" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-3"></use>
                     </g>
                     <g id="形状结合备份-17" opacity="0.699016753" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-13"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-5"></use>
                     </g>
                     <g id="形状结合备份-47" opacity="0.699016753" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-15"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-7"></use>
                     </g>
                     <g id="形状结合备份-48" opacity="0.699016753" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-17"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-9"></use>
                     </g>
                 </g>
                 <g id="编组-34" transform="translate(38.000000, 38.000000)">
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                        <use stroke="url(#linearGradient-10)" stroke-width="1" fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-19"></use>
-                    </g>
-                    <g id="形状结合备份-44" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-21"></use>
-                    </g>
-                    <g id="形状结合备份-17" opacity="0.699016753" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-24)" xlink:href="#path-23"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-23"></use>
-                    </g>
-                    <g id="形状结合备份-47" opacity="0.699016753" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-26)" xlink:href="#path-25"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-25"></use>
-                    </g>
-                    <g id="形状结合备份-48" opacity="0.699016753" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-27"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-27"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                        <use stroke="url(#linearGradient-2)" stroke-width="1" fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-11"></use>
                     </g>
+                    <path d="M9.5,8 L52.5,8 C53.3284271,8 54,8.67157288 54,9.5 C54,10.3284271 53.3284271,11 52.5,11 L9.5,11 C8.67157288,11 8,10.3284271 8,9.5 C8,8.67157288 8.67157288,8 9.5,8 Z" id="形状结合备份-44" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero"></path>
+                    <path d="M10,19 L37,19 C37.5522847,19 38,19.4477153 38,20 C38,20.5522847 37.5522847,21 37,21 L10,21 C9.44771525,21 9,20.5522847 9,20 C9,19.4477153 9.44771525,19 10,19 Z" id="形状结合备份-17" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
+                    <path d="M10,29 L17,29 C17.5522847,29 18,29.4477153 18,30 C18,30.5522847 17.5522847,31 17,31 L10,31 C9.44771525,31 9,30.5522847 9,30 C9,29.4477153 9.44771525,29 10,29 Z" id="形状结合备份-47" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
+                    <path d="M23,29 L30,29 C30.5522847,29 31,29.4477153 31,30 C31,30.5522847 30.5522847,31 30,31 L23,31 C22.4477153,31 22,30.5522847 22,30 C22,29.4477153 22.4477153,29 23,29 Z" id="形状结合备份-48" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/carousel.svg b/examples/sites/demos/pc/overviewimage/carousel.svg
index b0e790a86e..c5a7b40970 100644
--- a/examples/sites/demos/pc/overviewimage/carousel.svg
+++ b/examples/sites/demos/pc/overviewimage/carousel.svg
@@ -2,94 +2,54 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Carousel 走马灯</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.7518093%" x2="128.792906%" y2="48.08521%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.7518093%" x2="128.792906%" y2="48.08521%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="78.5896382%" x2="128.792906%" y2="-22.8152097%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="78.5896382%" x2="128.792906%" y2="-22.8152097%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="78.5896382%" x2="128.792906%" y2="-22.8152097%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="78.5896382%" x2="128.792906%" y2="-22.8152097%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1479.000000, -1159.000000)">
-            <g id="编组-25备份-17" transform="translate(1380.000000, 1126.000000)">
-                <g id="Carousel-走马灯" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1479.000000, -1210.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-17" transform="translate(784.000000, 866.000000)">
+                    <g id="Carousel-走马灯" transform="translate(99.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-8" transform="translate(35.000000, 86.000000)">
+                            <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="0" y="0" width="56" height="8" rx="4"></rect>
+                            <g id="编组-7" transform="translate(12.000000, 2.000000)">
+                                <circle id="椭圆形" fill="url(#linearGradient-2)" opacity="0.604724702" cx="2" cy="2" r="2"></circle>
+                                <rect id="矩形" fill="url(#linearGradient-3)" x="8" y="0" width="8" height="4" rx="2"></rect>
+                                <circle id="椭圆形备份-4" fill="url(#linearGradient-2)" opacity="0.604724702" cx="22" cy="2" r="2"></circle>
+                                <circle id="椭圆形备份-5" fill="url(#linearGradient-2)" opacity="0.604724702" cx="30" cy="2" r="2"></circle>
+                            </g>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-8" transform="translate(35.000000, 86.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="0" y="0" width="56" height="8" rx="4"></rect>
-                        <g id="编组-7" transform="translate(12.000000, 2.000000)">
-                            <circle id="椭圆形" fill="url(#linearGradient-10)" opacity="0.604724702" cx="2" cy="2" r="2"></circle>
-                            <rect id="矩形" fill="url(#linearGradient-11)" x="8" y="0" width="8" height="4" rx="2"></rect>
-                            <circle id="椭圆形备份-4" fill="url(#linearGradient-10)" opacity="0.604724702" cx="22" cy="2" r="2"></circle>
-                            <circle id="椭圆形备份-5" fill="url(#linearGradient-10)" opacity="0.604724702" cx="30" cy="2" r="2"></circle>
+                        <g id="轮播图管理" transform="translate(18.285714, 53.000000)">
+                            <rect id="矩形" fill="url(#linearGradient-2)" opacity="0.303770519" x="71.4285714" y="0" width="16" height="16" rx="2.26829267"></rect>
+                            <rect id="矩形备份-2" fill="url(#linearGradient-2)" opacity="0.303770519" x="0" y="0" width="16" height="16" rx="2.26829267"></rect>
+                            <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" points="81.7142857 7 79.2142857 10 76.7142857 7"></polyline>
+                            <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" points="10.7142857 7 8.21428571 10 5.71428571 7"></polyline>
+                        </g>
+                        <path d="M77.276619,34 L41.2881078,34 C39.6327703,34 38.2857143,35.1863136 38.2857143,36.6441219 L38.2857143,68.3558781 C38.2857143,69.8195885 39.6327703,71 41.2881078,71 L77.2833208,71 C78.9386583,71 80.2857143,69.8195885 80.2857143,68.3558781 L80.2857143,36.6441219 C80.2790125,35.1863136 78.9386583,34 77.276619,34 Z" id="路径备份-2" fill="url(#linearGradient-4)" opacity="0.303770519"></path>
+                        <g id="编组-32" transform="translate(44.285714, 42.000000)">
+                            <path d="M38.9909047,0 L3.00239349,0 C1.34705601,0 0,1.18631361 0,2.64412187 L0,34.3558781 C0,35.8195885 1.34705601,37 3.00239349,37 L38.9976065,37 C40.652944,37 42,35.8195885 42,34.3558781 L42,2.64412187 C41.9932982,1.18631361 40.652944,0 38.9909047,0 Z" id="路径" fill="url(#linearGradient-5)"></path>
+                            <path d="M13.4572455,18.4789554 C16.9282896,18.4789554 16.5151831,21.4239884 19.1220275,21.4239884 C21.7336201,21.4239884 22.8114956,12.3478032 26.3157782,12.3478032 C29.8200607,12.3478032 33.7516948,29.0252935 33.7516948,29.0252935 L8.24830524,29.0252935 C8.24830524,29.0205664 9.99094981,18.4789554 13.4572455,18.4789554 Z" id="路径" stroke="#FFFFFF" stroke-width="0.807692308" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            <path d="M13.5617092,8.11225006 C15.3233472,8.11225006 16.7478523,9.53040401 16.7478523,11.2889149 C16.7478523,13.0474258 15.3233472,14.4655797 13.5617092,14.4655797 C11.8000713,14.4655797 10.3755662,13.0474258 10.3755662,11.2889149 C10.3755662,9.53040401 11.8000713,8.11225006 13.5617092,8.11225006 Z" id="路径" stroke="#FFFFFF" stroke-width="0.743610195" fill="#FFFFFF" fill-rule="nonzero"></path>
                         </g>
-                    </g>
-                    <g id="轮播图管理" transform="translate(18.285714, 53.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-10)" opacity="0.303770519" x="71.4285714" y="0" width="16" height="16" rx="2.26829267"></rect>
-                        <rect id="矩形备份-2" fill="url(#linearGradient-10)" opacity="0.303770519" x="0" y="0" width="16" height="16" rx="2.26829267"></rect>
-                        <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" points="81.7142857 7 79.2142857 10 76.7142857 7"></polyline>
-                        <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" points="10.7142857 7 8.21428571 10 5.71428571 7"></polyline>
-                    </g>
-                    <path d="M77.276619,34 L41.2881078,34 C39.6327703,34 38.2857143,35.1863136 38.2857143,36.6441219 L38.2857143,68.3558781 C38.2857143,69.8195885 39.6327703,71 41.2881078,71 L77.2833208,71 C78.9386583,71 80.2857143,69.8195885 80.2857143,68.3558781 L80.2857143,36.6441219 C80.2790125,35.1863136 78.9386583,34 77.276619,34 Z" id="路径备份-2" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
-                    <g id="编组-32" transform="translate(44.285714, 42.000000)">
-                        <path d="M38.9909047,0 L3.00239349,0 C1.34705601,0 0,1.18631361 0,2.64412187 L0,34.3558781 C0,35.8195885 1.34705601,37 3.00239349,37 L38.9976065,37 C40.652944,37 42,35.8195885 42,34.3558781 L42,2.64412187 C41.9932982,1.18631361 40.652944,0 38.9909047,0 Z" id="路径" fill="url(#linearGradient-13)"></path>
-                        <path d="M13.4572455,18.4789554 C16.9282896,18.4789554 16.5151831,21.4239884 19.1220275,21.4239884 C21.7336201,21.4239884 22.8114956,12.3478032 26.3157782,12.3478032 C29.8200607,12.3478032 33.7516948,29.0252935 33.7516948,29.0252935 L8.24830524,29.0252935 C8.24830524,29.0205664 9.99094981,18.4789554 13.4572455,18.4789554 Z" id="路径" stroke="#FFFFFF" stroke-width="0.807692308" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <path d="M13.5617092,8.11225006 C15.3233472,8.11225006 16.7478523,9.53040401 16.7478523,11.2889149 C16.7478523,13.0474258 15.3233472,14.4655797 13.5617092,14.4655797 C11.8000713,14.4655797 10.3755662,13.0474258 10.3755662,11.2889149 C10.3755662,9.53040401 11.8000713,8.11225006 13.5617092,8.11225006 Z" id="路径" stroke="#FFFFFF" stroke-width="0.743610195" fill="#FFFFFF" fill-rule="nonzero"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/cascader-panel.svg b/examples/sites/demos/pc/overviewimage/cascader-panel.svg
index 311ec8b74d..e1d1ce74bc 100644
--- a/examples/sites/demos/pc/overviewimage/cascader-panel.svg
+++ b/examples/sites/demos/pc/overviewimage/cascader-panel.svg
@@ -2,48 +2,16 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>CascaderPanel 级联面板</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.4301394%" y1="86.8386573%" x2="97.6648446%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.4301394%" y1="86.8386573%" x2="97.6648446%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-11" points="22.9981685 5 32.9981685 5 27.9981685 11"></polygon>
-        <filter x="-35.0%" y="-41.7%" width="170.0%" height="216.7%" filterUnits="objectBoundingBox" id="filter-12">
+        <polygon id="path-3" points="22.9981685 5 32.9981685 5 27.9981685 11"></polygon>
+        <filter x="-35.0%" y="-41.7%" width="170.0%" height="216.7%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="3.23076923" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -51,22 +19,22 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.0%" y="-58.3%" width="190.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <filter x="-45.0%" y="-58.3%" width="190.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-3" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.8966314%" x2="128.792906%" y2="37.5287249%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="54.8966314%" x2="128.792906%" y2="37.5287249%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-16" points="76.9981685 49.5 86.9981685 49.5 81.9981685 55.5"></polygon>
-        <filter x="-35.0%" y="-41.7%" width="170.0%" height="216.7%" filterUnits="objectBoundingBox" id="filter-17">
+        <polygon id="path-8" points="76.9981685 49.5 86.9981685 49.5 81.9981685 55.5"></polygon>
+        <filter x="-35.0%" y="-41.7%" width="170.0%" height="216.7%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="3.23076923" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -74,49 +42,41 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.0%" y="-58.3%" width="190.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-18">
+        <filter x="-45.0%" y="-58.3%" width="190.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-10">
             <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-3" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -1434.000000)">
-            <g id="编组-23备份" transform="translate(989.000000, 1401.000000)">
-                <g id="CascaderPanel-级联面板" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -1485.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-23备份" transform="translate(393.000000, 1141.000000)">
+                    <g id="CascaderPanel-级联面板" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-12" transform="translate(23.000000, 36.000000)">
+                            <path d="M2,0 L26,0 C27.1045695,0 28,1.0745166 28,2.4 L28,33.6 C28,34.9254834 27.1045695,36 26,36 L2,36 C0.8954305,36 0,34.9254834 0,33.6 L0,2.4 C0,1.0745166 0.8954305,0 2,0 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                            <g id="形状结合备份-8" transform="translate(27.998168, 8.000000) rotate(-90.000000) translate(-27.998168, -8.000000) ">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                                <path stroke="url(#linearGradient-2)" stroke-width="3.23076923" d="M29.5492551,6.61538462 L27.9981685,8.47668857 L26.4470819,6.61538462 L29.5492551,6.61538462 Z" stroke-linejoin="square"></path>
+                            </g>
+                            <path d="M24.5714286,9 L55.4285714,9 C56.8487322,9 58,9.91489638 58,11.0434783 L58,53.9565217 C58,55.0851036 56.8487322,56 55.4285714,56 L24.5714286,56 C23.1512678,56 22,55.0851036 22,53.9565217 L22,11.0434783 C22,9.91489638 23.1512678,9 24.5714286,9 Z" id="路径" fill="#5073E5"></path>
+                            <path d="M30,15 L50,15 C51.1045695,15 52,15.8954305 52,17 C52,18.1045695 51.1045695,19 50,19 L30,19 C28.8954305,19 28,18.1045695 28,17 C28,15.8954305 28.8954305,15 30,15 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            <path d="M8,6 L20,6 C21.1045695,6 22,6.8954305 22,8 C22,9.1045695 21.1045695,10 20,10 L8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 Z" id="形状结合备份-12" fill="url(#linearGradient-6)" opacity="0.604724702"></path>
+                            <path d="M30,25 L42,25 C43.1045695,25 44,25.8954305 44,27 C44,28.1045695 43.1045695,29 42,29 L30,29 C28.8954305,29 28,28.1045695 28,27 C28,25.8954305 28.8954305,25 30,25 Z" id="形状结合备份-10" fill="#FFFFFF" fill-rule="nonzero" opacity="0.398656936"></path>
+                            <path d="M30,35 L42,35 C43.1045695,35 44,35.8954305 44,37 C44,38.1045695 43.1045695,39 42,39 L30,39 C28.8954305,39 28,38.1045695 28,37 C28,35.8954305 28.8954305,35 30,35 Z" id="形状结合备份-20" fill="#FFFFFF" fill-rule="nonzero" opacity="0.398656936"></path>
+                            <path d="M8,15 L15,15 C16.1045695,15 17,15.8954305 17,17 C17,18.1045695 16.1045695,19 15,19 L8,19 C6.8954305,19 6,18.1045695 6,17 C6,15.8954305 6.8954305,15 8,15 Z" id="形状结合备份-13" fill="url(#linearGradient-7)" opacity="0.204287574"></path>
+                            <path d="M54,24 L78,24 C79.1045695,24 80,24.7163444 80,25.6 L80,46.4 C80,47.2836556 79.1045695,48 78,48 L54,48 C52.8954305,48 52,47.2836556 52,46.4 L52,25.6 C52,24.7163444 52.8954305,24 54,24 Z" id="路径备份" fill="#AABDF0"></path>
+                            <path d="M60,29 L73,29 C74.1045695,29 75,29.8954305 75,31 C75,32.1045695 74.1045695,33 73,33 L60,33 C58.8954305,33 58,32.1045695 58,31 C58,29.8954305 58.8954305,29 60,29 Z" id="形状结合备份-16" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            <path d="M60,38 L68,38 C69.1045695,38 70,38.8954305 70,40 C70,41.1045695 69.1045695,42 68,42 L60,42 C58.8954305,42 58,41.1045695 58,40 C58,38.8954305 58.8954305,38 60,38 Z" id="形状结合备份-19" fill="#FFFFFF" fill-rule="nonzero" opacity="0.398656936"></path>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-12" transform="translate(23.000000, 36.000000)">
-                        <path d="M2,0 L26,0 C27.1045695,0 28,1.0745166 28,2.4 L28,33.6 C28,34.9254834 27.1045695,36 26,36 L2,36 C0.8954305,36 0,34.9254834 0,33.6 L0,2.4 C0,1.0745166 0.8954305,0 2,0 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <g id="形状结合备份-8" transform="translate(27.998168, 8.000000) rotate(-90.000000) translate(-27.998168, -8.000000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
-                            <path stroke="url(#linearGradient-10)" stroke-width="3.23076923" d="M29.5492551,6.61538462 L27.9981685,8.47668857 L26.4470819,6.61538462 L29.5492551,6.61538462 Z" stroke-linejoin="square"></path>
+                        <g id="形状结合备份-14" transform="translate(81.998168, 52.500000) rotate(-90.000000) translate(-81.998168, -52.500000) ">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-8"></use>
+                            <path stroke="url(#linearGradient-2)" stroke-width="3.23076923" d="M83.5492551,51.1153846 L81.9981685,52.9766886 L80.4470819,51.1153846 L83.5492551,51.1153846 Z" stroke-linejoin="square"></path>
                         </g>
-                        <path d="M24.5714286,9 L55.4285714,9 C56.8487322,9 58,9.91489638 58,11.0434783 L58,53.9565217 C58,55.0851036 56.8487322,56 55.4285714,56 L24.5714286,56 C23.1512678,56 22,55.0851036 22,53.9565217 L22,11.0434783 C22,9.91489638 23.1512678,9 24.5714286,9 Z" id="路径" fill="#5073E5"></path>
-                        <path d="M30,15 L50,15 C51.1045695,15 52,15.8954305 52,17 C52,18.1045695 51.1045695,19 50,19 L30,19 C28.8954305,19 28,18.1045695 28,17 C28,15.8954305 28.8954305,15 30,15 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <path d="M8,6 L20,6 C21.1045695,6 22,6.8954305 22,8 C22,9.1045695 21.1045695,10 20,10 L8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 Z" id="形状结合备份-12" fill="url(#linearGradient-14)" opacity="0.604724702"></path>
-                        <path d="M30,25 L42,25 C43.1045695,25 44,25.8954305 44,27 C44,28.1045695 43.1045695,29 42,29 L30,29 C28.8954305,29 28,28.1045695 28,27 C28,25.8954305 28.8954305,25 30,25 Z" id="形状结合备份-10" fill="#FFFFFF" fill-rule="nonzero" opacity="0.398656936"></path>
-                        <path d="M30,35 L42,35 C43.1045695,35 44,35.8954305 44,37 C44,38.1045695 43.1045695,39 42,39 L30,39 C28.8954305,39 28,38.1045695 28,37 C28,35.8954305 28.8954305,35 30,35 Z" id="形状结合备份-20" fill="#FFFFFF" fill-rule="nonzero" opacity="0.398656936"></path>
-                        <path d="M8,15 L15,15 C16.1045695,15 17,15.8954305 17,17 C17,18.1045695 16.1045695,19 15,19 L8,19 C6.8954305,19 6,18.1045695 6,17 C6,15.8954305 6.8954305,15 8,15 Z" id="形状结合备份-13" fill="url(#linearGradient-15)" opacity="0.204287574"></path>
-                        <path d="M54,24 L78,24 C79.1045695,24 80,24.7163444 80,25.6 L80,46.4 C80,47.2836556 79.1045695,48 78,48 L54,48 C52.8954305,48 52,47.2836556 52,46.4 L52,25.6 C52,24.7163444 52.8954305,24 54,24 Z" id="路径备份" fill="#AABDF0"></path>
-                        <path d="M60,29 L73,29 C74.1045695,29 75,29.8954305 75,31 C75,32.1045695 74.1045695,33 73,33 L60,33 C58.8954305,33 58,32.1045695 58,31 C58,29.8954305 58.8954305,29 60,29 Z" id="形状结合备份-16" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <path d="M60,38 L68,38 C69.1045695,38 70,38.8954305 70,40 C70,41.1045695 69.1045695,42 68,42 L60,42 C58.8954305,42 58,41.1045695 58,40 C58,38.8954305 58.8954305,38 60,38 Z" id="形状结合备份-19" fill="#FFFFFF" fill-rule="nonzero" opacity="0.398656936"></path>
-                    </g>
-                    <g id="形状结合备份-14" transform="translate(81.998168, 52.500000) rotate(-90.000000) translate(-81.998168, -52.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-16"></use>
-                        <path stroke="url(#linearGradient-10)" stroke-width="3.23076923" d="M83.5492551,51.1153846 L81.9981685,52.9766886 L80.4470819,51.1153846 L83.5492551,51.1153846 Z" stroke-linejoin="square"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/cascader.svg b/examples/sites/demos/pc/overviewimage/cascader.svg
index fb5fbeae16..de4a5b3e03 100644
--- a/examples/sites/demos/pc/overviewimage/cascader.svg
+++ b/examples/sites/demos/pc/overviewimage/cascader.svg
@@ -2,52 +2,20 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Cascader级联选择</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.5069786%" x2="128.792906%" y2="43.6149535%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.5069786%" x2="128.792906%" y2="43.6149535%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.5069786%" x2="128.792906%" y2="43.6149535%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="52.5069786%" x2="128.792906%" y2="43.6149535%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-12" points="48.0018315 6 60.0018315 6 54.0018315 13"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <polygon id="path-4" points="48.0018315 6 60.0018315 6 54.0018315 13"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -55,14 +23,14 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-14">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-6">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-15" points="23.0018315 33 35.0018315 33 29.0018315 40"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-16">
+        <polygon id="path-7" points="23.0018315 33 35.0018315 33 29.0018315 40"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -70,69 +38,59 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-17">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-9">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <path d="M1.5018315,24 L73.5018315,24 C74.3302586,24 75.0018315,24.6715729 75.0018315,25.5 C75.0018315,26.3284271 74.3302586,27 73.5018315,27 L1.5018315,27 C0.673404377,27 0.00183150183,26.3284271 0.00183150183,25.5 C0.00183150183,24.6715729 0.673404377,24 1.5018315,24 Z" id="path-18"></path>
-        <filter x="-5.3%" y="-66.7%" width="110.7%" height="366.7%" filterUnits="objectBoundingBox" id="filter-19">
+        <path d="M1.5018315,24 L73.5018315,24 C74.3302586,24 75.0018315,24.6715729 75.0018315,25.5 C75.0018315,26.3284271 74.3302586,27 73.5018315,27 L1.5018315,27 C0.673404377,27 0.00183150183,26.3284271 0.00183150183,25.5 C0.00183150183,24.6715729 0.673404377,24 1.5018315,24 Z" id="path-10"></path>
+        <filter x="-5.3%" y="-66.7%" width="110.7%" height="366.7%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M1,33 L19.1923077,33 C19.7445924,33 20.1923077,33.4477153 20.1923077,34 L20.1923077,38.5625 C20.1923077,39.1147847 19.7445924,39.5625 19.1923077,39.5625 L1,39.5625 C0.44771525,39.5625 -2.66453526e-14,39.1147847 -2.67008637e-14,38.5625 L-2.67008637e-14,34 C-2.67563749e-14,33.4477153 0.44771525,33 1,33 Z" id="path-20"></path>
-        <filter x="-21.0%" y="-33.3%" width="141.0%" height="242.7%" filterUnits="objectBoundingBox" id="filter-21">
+        <path d="M1,33 L19.1923077,33 C19.7445924,33 20.1923077,33.4477153 20.1923077,34 L20.1923077,38.5625 C20.1923077,39.1147847 19.7445924,39.5625 19.1923077,39.5625 L1,39.5625 C0.44771525,39.5625 -2.66453526e-14,39.1147847 -2.67008637e-14,38.5625 L-2.67008637e-14,34 C-2.67563749e-14,33.4477153 0.44771525,33 1,33 Z" id="path-12"></path>
+        <filter x="-21.0%" y="-33.3%" width="141.0%" height="242.7%" filterUnits="objectBoundingBox" id="filter-13">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="53.8910832%" x2="128.792906%" y2="40.0897649%" id="linearGradient-22">
+        <linearGradient x1="44.0988019%" y1="53.8910832%" x2="128.792906%" y2="40.0897649%" id="linearGradient-14">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="72.960382%" x2="128.792906%" y2="-8.47800575%" id="linearGradient-23">
+        <linearGradient x1="44.0988019%" y1="72.960382%" x2="128.792906%" y2="-8.47800575%" id="linearGradient-15">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-697.000000, -1061.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-697.000000, -1061.000000)">
             <g id="Cascader级联选择" transform="translate(697.000000, 1061.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-3" transform="translate(23.998168, 29.000000)">
-                    <rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="0.00183150183" y="0" width="69" height="18" rx="4"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" x="0.00183150183" y="0" width="69" height="18" rx="4"></rect>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-12"></use>
-                        <path stroke="url(#linearGradient-11)" stroke-width="4" d="M55.6533902,8 L54.0018315,9.92681851 L52.3502728,8 L55.6533902,8 Z" stroke-linejoin="square"></path>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-4"></use>
+                        <path stroke="url(#linearGradient-3)" stroke-width="4" d="M55.6533902,8 L54.0018315,9.92681851 L52.3502728,8 L55.6533902,8 Z" stroke-linejoin="square"></path>
                     </g>
                     <g id="形状结合备份-8" transform="translate(29.001832, 36.500000) rotate(-90.000000) translate(-29.001832, -36.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-15"></use>
-                        <path stroke="url(#linearGradient-11)" stroke-width="4" d="M30.6533902,35 L29.0018315,36.9268185 L27.3502728,35 L30.6533902,35 Z" stroke-linejoin="square"></path>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-7"></use>
+                        <path stroke="url(#linearGradient-3)" stroke-width="4" d="M30.6533902,35 L29.0018315,36.9268185 L27.3502728,35 L30.6533902,35 Z" stroke-linejoin="square"></path>
                     </g>
                     <g id="形状结合备份">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
                     </g>
                     <g id="形状结合备份-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-20"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-20"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
                     </g>
-                    <path d="M1,44.8660714 L19.1923077,44.8660714 C19.7445924,44.8660714 20.1923077,45.3137867 20.1923077,45.8660714 L20.1923077,50.4285714 C20.1923077,50.9808562 19.7445924,51.4285714 19.1923077,51.4285714 L1,51.4285714 C0.44771525,51.4285714 5.58162771e-16,50.9808562 0,50.4285714 L0,45.8660714 C-6.76353751e-17,45.3137867 0.44771525,44.8660714 1,44.8660714 Z" id="形状结合备份-3" fill="url(#linearGradient-22)" opacity="0.303770519"></path>
-                    <path d="M39.0018315,32 L73.0018315,32 C74.106401,32 75.0018315,32.8954305 75.0018315,34 L75.0018315,60 C75.0018315,61.1045695 74.106401,62 73.0018315,62 L39.0018315,62 C37.897262,62 37.0018315,61.1045695 37.0018315,60 L37.0018315,34 C37.0018315,32.8954305 37.897262,32 39.0018315,32 Z" id="形状结合备份-6" fill="url(#linearGradient-23)" opacity="0.204287574"></path>
+                    <path d="M1,44.8660714 L19.1923077,44.8660714 C19.7445924,44.8660714 20.1923077,45.3137867 20.1923077,45.8660714 L20.1923077,50.4285714 C20.1923077,50.9808562 19.7445924,51.4285714 19.1923077,51.4285714 L1,51.4285714 C0.44771525,51.4285714 5.58162771e-16,50.9808562 0,50.4285714 L0,45.8660714 C-6.76353751e-17,45.3137867 0.44771525,44.8660714 1,44.8660714 Z" id="形状结合备份-3" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
+                    <path d="M39.0018315,32 L73.0018315,32 C74.106401,32 75.0018315,32.8954305 75.0018315,34 L75.0018315,60 C75.0018315,61.1045695 74.106401,62 73.0018315,62 L39.0018315,62 C37.897262,62 37.0018315,61.1045695 37.0018315,60 L37.0018315,34 C37.0018315,32.8954305 37.897262,32 39.0018315,32 Z" id="形状结合备份-6" fill="url(#linearGradient-15)" opacity="0.204287574"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-attributes-demo.svg b/examples/sites/demos/pc/overviewimage/chart-attributes-demo.svg
index 6c3a868c9d..af76028881 100644
--- a/examples/sites/demos/pc/overviewimage/chart-attributes-demo.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-attributes-demo.svg
@@ -2,52 +2,40 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>chart-attributes-demo 属性配置示例</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="63.8452469%" x2="128.792906%" y2="14.7374146%" id="linearGradient-1">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-3">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="77.6602946%" x2="128.792906%" y2="-20.4482559%" id="linearGradient-4">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="77.6602946%" x2="128.792906%" y2="-20.4482559%" id="linearGradient-5">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1478.000000, -334.000000)">
             <g id="编组-25备份-2" transform="translate(1379.000000, 301.000000)">
-                <g id="编组" transform="translate(99.000000, 33.000000)">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+                <g id="chart-attributes-demo-属性配置示例" transform="translate(99.000000, 33.000000)">
+                    <g id="编组"></g>
+                    <g id="图表-(3)" transform="translate(36.000000, 41.000000)">
+                        <path d="M41.1357143,46.4285714 L8.72857144,46.4285714 C6.68571428,46.4285714 5.01428571,44.7571429 5.01428571,42.7142857 L5.01428571,25.7214286 C5.01428571,23.6785714 6.68571428,22.0071428 8.72857144,22.0071428 L41.1357143,22.0071428 C43.1785715,22.0071428 44.85,23.6785714 44.85,25.7214286 L44.85,42.7142857 C44.85,44.7571429 43.2714286,46.4285714 41.1357143,46.4285714 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M50.6071429,52 L1.39285714,52 C0.650000018,52 0,51.35 0,50.6071429 L0,1.39285714 C0,0.650000018 0.650000018,0 1.39285714,0 C2.13571427,0 2.78571428,0.650000018 2.78571428,1.39285714 L2.78571428,49.2142857 L50.6071429,49.2142857 C51.35,49.2142857 52,49.8642857 52,50.6071429 C52,51.35 51.35,52 50.6071429,52 Z" id="路径" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)"></path>
+                        <path d="M17.8285714,41.0428571 L12.35,41.0428571 C11.6071429,41.0428571 10.9571429,40.3928571 10.9571429,39.65 C10.9571429,38.9071429 11.6071429,38.2571428 12.35,38.2571428 L17.8285714,38.2571428 C18.5714285,38.2571428 19.2214286,38.9071429 19.2214286,39.65 C19.2214286,40.3928571 18.5714285,41.0428571 17.8285714,41.0428571 Z M28.6928571,30.0857143 L12.35,30.0857143 C11.6071429,30.0857143 10.9571429,29.4357142 10.9571429,28.6928571 C10.9571429,27.95 11.6071429,27.3 12.35,27.3 L28.7857143,27.3 C29.5285714,27.3 30.1785714,27.95 30.1785714,28.6928571 C30.1785714,29.4357142 29.5285714,30.0857143 28.6928571,30.0857143 L28.6928571,30.0857143 Z M50.6071429,19.2214286 L12.35,19.2214286 C11.6071429,19.2214286 10.9571429,18.5714285 10.9571429,17.8285714 C10.9571429,17.0857143 11.6071429,16.4357143 12.35,16.4357143 L50.6071429,16.4357143 C51.35,16.4357143 52,17.0857143 52,17.8285714 C52,18.5714285 51.35,19.2214286 50.6071429,19.2214286 Z M39.65,8.26428574 L12.35,8.26428574 C11.6071429,8.26428574 10.9571429,7.61428573 10.9571429,6.8714286 C10.9571429,6.12857148 11.6071429,5.47857146 12.35,5.47857146 L39.65,5.47857146 C40.3928571,5.47857146 41.0428571,6.12857148 41.0428571,6.8714286 C41.0428571,7.61428573 40.4857143,8.26428574 39.65,8.26428574 Z" id="形状" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)"></path>
+                        <path d="M44.0379842,45.0015043 C44.0379842,46.6365497 45.3634503,47.9620158 46.9984957,47.9620158 C48.633541,47.9620158 49.9590071,46.6365497 49.9590071,45.0015043 C49.9590071,43.366459 48.633541,42.0409929 46.9984957,42.0409929 C45.3634503,42.0409929 44.0379842,43.366459 44.0379842,45.0015043 L44.0379842,45.0015043 Z" id="路径" fill="#5073E5"></path>
+                        <path d="M41,58 C49.836556,58 57,50.836556 57,42 C57,41.0703154 56.9207084,40.1591503 56.768519,39.2728985 C49.8227886,34.9496263 45.835918,32.1177148 44.8079072,30.777164 L44.8079072,26.4559035 C43.5874837,26.1579604 42.3121887,26 41,26 C32.163444,26 25,33.163444 25,42 C25,50.836556 32.163444,58 41,58 Z" id="椭圆形" fill="#EAF3FC" fill-rule="nonzero"></path>
+                        <path d="M40.9984957,30 C34.3824746,30 29,35.3824746 29,42.0015043 C29,48.6175254 34.3824746,54 40.9984957,54 C47.6145167,54 53,48.6175254 53,42.0015043 C52.9969914,35.3854833 47.6145167,30 40.9984957,30 Z M48.4449041,43.5990974 C47.5272659,43.6321926 46.6487401,44.1226025 46.1553215,44.977059 C45.661903,45.828507 45.6769462,46.8364047 46.1071832,47.6457315 C45.3159082,48.3617901 44.3742008,48.9123731 43.3362166,49.2463332 C42.8488153,48.4701015 41.9853328,47.9526138 40.9984957,47.9526138 C40.0146672,47.9526138 39.148176,48.4701015 38.6607747,49.2463332 C37.6227905,48.9123731 36.6810831,48.3587815 35.8898082,47.6457315 C36.3170365,46.833396 36.3320797,45.828507 35.8416698,44.977059 C35.3482512,44.1226025 34.4697255,43.6352012 33.5520873,43.5990974 C33.4407672,43.0846183 33.3836029,42.5490786 33.3836029,41.9984957 C33.3836029,41.4509214 33.4407672,40.9153817 33.5520873,40.3978939 C34.4697255,40.3647988 35.3482512,39.8743889 35.8416698,39.0199323 C36.3350884,38.1684844 36.3200451,37.1605867 35.8898082,36.3512599 C36.6810831,35.6352012 37.6227905,35.0846183 38.6607747,34.7506581 C39.148176,35.5268898 40.0116585,36.0443776 40.9984957,36.0443776 C41.9823242,36.0443776 42.8458067,35.5268898 43.3362166,34.7506581 C44.3742008,35.0846183 45.3159082,35.6352012 46.1071832,36.3512599 C45.6799549,37.1635953 45.6649116,38.1684844 46.1553215,39.0199323 C46.6487401,39.8743889 47.5272659,40.3617901 48.4449041,40.3978939 C48.5562241,40.9123731 48.6133885,41.4479127 48.6133885,41.9984957 C48.6133885,42.5490786 48.5532155,43.0846183 48.4449041,43.5990974 L48.4449041,43.5990974 Z" id="形状" fill="#5073E5"></path>
                     </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-autonavi-map.svg b/examples/sites/demos/pc/overviewimage/chart-autonavi-map.svg
index f7394ea7fd..09fd1f9111 100644
--- a/examples/sites/demos/pc/overviewimage/chart-autonavi-map.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-autonavi-map.svg
@@ -2,74 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Gaud Map 高德地图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="58.1378867%" x2="128.792906%" y2="29.2735423%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="58.1378867%" x2="128.792906%" y2="29.2735423%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.2883803%" x2="128.792906%" y2="41.6247942%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="53.2883803%" x2="128.792906%" y2="41.6247942%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.0270698%" y1="86.8386573%" x2="103.046638%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="46.0270698%" y1="86.8386573%" x2="103.046638%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="70.4792283%" x2="128.792906%" y2="-2.15873289%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="70.4792283%" x2="128.792906%" y2="-2.15873289%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-697.000000, -1984.000000)">
             <g id="编组-17备份-10" transform="translate(598.000000, 1951.000000)">
                 <g id="Gaud-Map-高德地图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M39.0900313,67.1295986 C39.7697189,65.1057303 41.6785082,63.7396193 43.8251882,63.7396193 L45.7736259,63.7396193 C47.1499933,63.7396193 48.2714778,64.847125 48.2714778,66.2188579 C48.2714778,67.5905908 47.1556574,68.6980965 45.7736259,68.6980965 L43.8251882,68.6980965 L37.9968671,86.0471447 L85.999803,86.0471447 L80.177146,68.6980965 L78.2287082,68.6980965 C76.8523409,68.6980965 75.7308563,67.5905908 75.7308563,66.2188579 C75.7308563,64.847125 76.8466768,63.7396193 78.2287082,63.7396193 L80.177146,63.7396193 C82.3238259,63.7396193 84.2326152,65.1057303 84.9123028,67.1295986 L90.7406239,84.4786468 C91.8167959,87.6887267 89.409569,91 86.005467,91 L37.9968671,91 C34.5871011,91 32.1798742,87.6831048 33.2617103,84.4786468 L39.0900313,67.1295986 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                    <polygon id="矩形" fill="url(#linearGradient-10)" opacity="0.204287574" points="47.9616278 72 76.4892244 72 80.5893915 83 43.7719539 83"></polygon>
-                    <path d="M75.3740169,41.9564275 C72.5251472,38.6072421 68.9977897,36.7413738 64.6042687,36.1541818 C64.3826467,36.1248222 64.183295,36.0959007 63.9463216,36.0713614 C63.2717259,35.9979624 62.6697789,35.9749567 61.9592912,36.0319231 C60.4898832,36.1909908 59.1411242,36.5211767 57.6410135,37.0156888 C51.4624083,39.0520181 47.0931035,45.2427308 47.0018601,51.844697 C46.9380762,56.4576598 48.51516,60.4067451 51.6606789,63.6678517 C55.254631,67.3936726 58.9497725,71.019145 62.602968,74.6862467 C62.7121574,74.7960165 62.8418873,74.8849717 62.9826443,75 C63.1151851,74.9029381 63.2276177,74.8418087 63.3134557,74.7548254 C67.2209218,70.7941278 71.2135773,66.9151549 75.0105569,62.8477548 C80.2202955,57.2661443 80.3130525,47.7643699 75.3740169,41.9564275 L75.3740169,41.9564275 Z M62.9104279,64.0431726 C56.383714,64.0431726 51.0926779,58.6690511 51.0926779,52.0396973 C51.0926779,45.4101243 56.383714,40.036222 62.9104279,40.036222 C69.4371419,40.036222 74.7279618,45.4103434 74.7279618,52.0396973 C74.7279618,58.6690512 69.4369256,64.0431726 62.9104279,64.0431726 Z" id="形状" fill="url(#linearGradient-11)"></path>
-                    <path d="M72.9999588,50.7467794 L72.9999588,51.1915554 C71.7474161,52.1453042 70.4702247,53.0692552 69.258547,54.0738355 C68.9415734,54.3365382 68.7106541,54.8310503 68.6408162,55.253478 C68.4384375,56.4780362 68.3381129,57.7201226 68.1688154,59.2093554 C67.1655704,58.6804444 66.3930285,58.206747 65.5668649,57.867797 C65.19454,57.7153024 64.5995119,57.6548304 64.3052412,57.8550891 C62.8619954,58.8388548 61.4864255,59.9240645 60.0864231,60.9733415 L59.8676119,60.9733415 C59.587179,60.555515 59.242746,60.1679244 59.0373402,59.7152608 C57.1117153,55.4723604 55.2098742,51.2182858 53.3011141,46.9677168 C53.1374382,45.8502992 53.9876018,46.4495418 54.3956025,46.3005528 C55.1512795,46.5203116 55.8991727,46.7746884 56.6637145,46.9534752 C62.1071833,48.2264549 67.5541116,49.4845357 72.9999588,50.7467794 L72.9999588,50.7467794 Z M66.8165968,56.6800478 C66.8488131,56.1044682 66.823732,55.7394451 66.896597,55.3954557 C67.1430839,54.2329032 66.6626506,53.6224865 65.6235137,53.1080361 C62.5523733,51.5874718 59.5396114,49.9457443 56.5017683,48.3552866 C56.2926869,48.2457359 56.0676054,48.1675166 55.8498753,48.0746176 C55.8217672,48.1258873 55.7943076,48.1771571 55.7666319,48.2284268 L66.8165968,56.6798287 L66.8165968,56.6800478 Z" id="形状" fill="url(#linearGradient-12)"></path>
+                    <g id="编组"></g>
+                    <path d="M39.0900313,67.1295986 C39.7697189,65.1057303 41.6785082,63.7396193 43.8251882,63.7396193 L45.7736259,63.7396193 C47.1499933,63.7396193 48.2714778,64.847125 48.2714778,66.2188579 C48.2714778,67.5905908 47.1556574,68.6980965 45.7736259,68.6980965 L43.8251882,68.6980965 L37.9968671,86.0471447 L85.999803,86.0471447 L80.177146,68.6980965 L78.2287082,68.6980965 C76.8523409,68.6980965 75.7308563,67.5905908 75.7308563,66.2188579 C75.7308563,64.847125 76.8466768,63.7396193 78.2287082,63.7396193 L80.177146,63.7396193 C82.3238259,63.7396193 84.2326152,65.1057303 84.9123028,67.1295986 L90.7406239,84.4786468 C91.8167959,87.6887267 89.409569,91 86.005467,91 L37.9968671,91 C34.5871011,91 32.1798742,87.6831048 33.2617103,84.4786468 L39.0900313,67.1295986 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                    <polygon id="矩形" fill="url(#linearGradient-2)" opacity="0.204287574" points="47.9616278 72 76.4892244 72 80.5893915 83 43.7719539 83"></polygon>
+                    <path d="M75.3740169,41.9564275 C72.5251472,38.6072421 68.9977897,36.7413738 64.6042687,36.1541818 C64.3826467,36.1248222 64.183295,36.0959007 63.9463216,36.0713614 C63.2717259,35.9979624 62.6697789,35.9749567 61.9592912,36.0319231 C60.4898832,36.1909908 59.1411242,36.5211767 57.6410135,37.0156888 C51.4624083,39.0520181 47.0931035,45.2427308 47.0018601,51.844697 C46.9380762,56.4576598 48.51516,60.4067451 51.6606789,63.6678517 C55.254631,67.3936726 58.9497725,71.019145 62.602968,74.6862467 C62.7121574,74.7960165 62.8418873,74.8849717 62.9826443,75 C63.1151851,74.9029381 63.2276177,74.8418087 63.3134557,74.7548254 C67.2209218,70.7941278 71.2135773,66.9151549 75.0105569,62.8477548 C80.2202955,57.2661443 80.3130525,47.7643699 75.3740169,41.9564275 L75.3740169,41.9564275 Z M62.9104279,64.0431726 C56.383714,64.0431726 51.0926779,58.6690511 51.0926779,52.0396973 C51.0926779,45.4101243 56.383714,40.036222 62.9104279,40.036222 C69.4371419,40.036222 74.7279618,45.4103434 74.7279618,52.0396973 C74.7279618,58.6690512 69.4369256,64.0431726 62.9104279,64.0431726 Z" id="形状" fill="url(#linearGradient-3)"></path>
+                    <path d="M72.9999588,50.7467794 L72.9999588,51.1915554 C71.7474161,52.1453042 70.4702247,53.0692552 69.258547,54.0738355 C68.9415734,54.3365382 68.7106541,54.8310503 68.6408162,55.253478 C68.4384375,56.4780362 68.3381129,57.7201226 68.1688154,59.2093554 C67.1655704,58.6804444 66.3930285,58.206747 65.5668649,57.867797 C65.19454,57.7153024 64.5995119,57.6548304 64.3052412,57.8550891 C62.8619954,58.8388548 61.4864255,59.9240645 60.0864231,60.9733415 L59.8676119,60.9733415 C59.587179,60.555515 59.242746,60.1679244 59.0373402,59.7152608 C57.1117153,55.4723604 55.2098742,51.2182858 53.3011141,46.9677168 C53.1374382,45.8502992 53.9876018,46.4495418 54.3956025,46.3005528 C55.1512795,46.5203116 55.8991727,46.7746884 56.6637145,46.9534752 C62.1071833,48.2264549 67.5541116,49.4845357 72.9999588,50.7467794 L72.9999588,50.7467794 Z M66.8165968,56.6800478 C66.8488131,56.1044682 66.823732,55.7394451 66.896597,55.3954557 C67.1430839,54.2329032 66.6626506,53.6224865 65.6235137,53.1080361 C62.5523733,51.5874718 59.5396114,49.9457443 56.5017683,48.3552866 C56.2926869,48.2457359 56.0676054,48.1675166 55.8498753,48.0746176 C55.8217672,48.1258873 55.7943076,48.1771571 55.7666319,48.2284268 L66.8165968,56.6798287 L66.8165968,56.6800478 Z" id="形状" fill="url(#linearGradient-4)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-baidu-map.svg b/examples/sites/demos/pc/overviewimage/chart-baidu-map.svg
index e7fc97f3fc..3696e7bf8f 100644
--- a/examples/sites/demos/pc/overviewimage/chart-baidu-map.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-baidu-map.svg
@@ -2,60 +2,18 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Baidu Map 百度地图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="45.3865015%" y1="86.8386573%" x2="111.599517%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="45.3865015%" y1="86.8386573%" x2="111.599517%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1870.000000, -1709.000000)">
             <g id="编组-17备份-9" transform="translate(1771.000000, 1676.000000)">
                 <g id="Baidu-Map-百度地图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="百度地图-(1)" transform="translate(33.000000, 34.000000)">
-                        <path d="M38.3391692,27.3581038 C37.5282992,26.0283985 37.0284701,24.3136372 36.0764145,23.6385808 C32.2898301,20.9533924 31.3604941,17.2387028 31.3604941,14.6856257 C31.3604941,9.35015632 36.364195,5.01894744 42.5265907,5.01894744 C48.6889864,5.01894744 53.6921463,9.35015632 53.6921463,14.6856257 C53.6921463,16.8332393 52.9483529,19.5152055 51.6582095,21.9517455 C52.8455742,21.3529484 53.6921463,20.7165588 53.6921463,22.1123197 L53.6921463,51.6875217 C53.6909526,53.8100771 51.9580744,55.5304523 49.8200932,55.5316374 L12.9008949,55.5316374 C10.763125,55.5301561 9.03057622,53.8098676 9.02938279,51.6875217 L9.02938279,22.1123197 C9.02997981,19.9897285 10.7628777,18.2690933 12.9008949,18.268204 L29.9280833,18.268204 L34.9945333,24.1756185 L38.3397102,27.3581038 L38.3391692,27.3581038 Z M43.2682203,28.6405497 L41.4858209,30.3515518 L39.9701052,28.9096056 C40.9221607,29.2377356 41.7995665,28.6486053 42.9420331,28.6486053 C43.051844,28.6486053 43.1605731,28.6459201 43.2687612,28.6405497 L43.2682203,28.6405497 Z" id="形状" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                        <path d="M38.3391692,27.3581038 C37.5282992,26.0283985 37.0284701,24.3136372 36.0764145,23.6385808 C32.2898301,20.9533924 31.3604941,17.2387028 31.3604941,14.6856257 C31.3604941,9.35015632 36.364195,5.01894744 42.5265907,5.01894744 C48.6889864,5.01894744 53.6921463,9.35015632 53.6921463,14.6856257 C53.6921463,16.8332393 52.9483529,19.5152055 51.6582095,21.9517455 C52.8455742,21.3529484 53.6921463,20.7165588 53.6921463,22.1123197 L53.6921463,51.6875217 C53.6909526,53.8100771 51.9580744,55.5304523 49.8200932,55.5316374 L12.9008949,55.5316374 C10.763125,55.5301561 9.03057622,53.8098676 9.02938279,51.6875217 L9.02938279,22.1123197 C9.02997981,19.9897285 10.7628777,18.2690933 12.9008949,18.268204 L29.9280833,18.268204 L34.9945333,24.1756185 L38.3397102,27.3581038 L38.3391692,27.3581038 Z M43.2682203,28.6405497 L41.4858209,30.3515518 L39.9701052,28.9096056 C40.9221607,29.2377356 41.7995665,28.6486053 42.9420331,28.6486053 C43.051844,28.6486053 43.1605731,28.6459201 43.2687612,28.6405497 L43.2682203,28.6405497 Z" id="形状" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                         <path d="M56.0836449,13.792532 C56.3162493,14.1743658 56.4720402,14.5846626 56.6256674,14.9815334 C56.8442074,15.7140528 57.0000009,16.4777204 57.0000009,17.2252768 L57.0000009,50.28102 C57.0000009,52.3937263 56.0517294,54.3447842 54.5592741,55.7550451 C53.0987344,57.1346949 51.0604701,57.9999318 48.7917651,57.9999318 L8.18010599,57.9999318 C6.02990286,58.0085148 3.95662988,57.2061505 2.37959956,55.7550451 C0.862257406,54.3326407 0.00162574678,52.3528443 8.52907291e-07,50.28102 L8.52907291e-07,17.2252768 C-0.000989787857,15.1620073 0.861021233,13.1909639 2.3801405,11.782937 C3.94645125,10.3117476 6.0239112,9.49691585 8.18010599,9.5080454 L27.9568956,9.5080454 C28.6395627,7.39533917 29.885349,5.53181843 31.4854514,4.0205944 L31.5628059,3.96259433 C37.2859578,-1.34333793 46.177399,-1.31756013 51.8697173,4.0205944 C54.4824606,6.48667142 56.0841858,9.86141619 56.0841858,13.6314207 L56.0841858,13.792532 L56.0836449,13.792532 Z M27.2715238,13.6448461 L8.18010599,13.6448461 C7.18518279,13.6443374 6.22789219,14.0223768 5.50515455,14.7011998 C4.79239974,15.349802 4.38622461,16.2653814 4.385269,17.2252768 L4.385269,50.28102 C4.3766385,51.2387199 4.7848207,52.1535378 5.50515455,52.7905971 C6.17375717,53.4511535 7.15285972,53.846956 8.18010599,53.846956 L48.792306,53.846956 C49.7964544,53.848662 50.7636389,53.4709924 51.4975502,52.7905971 C52.2064108,52.1452948 52.6122077,51.2358227 52.6172973,50.28102 L52.6172973,22.5081165 C51.0974201,24.1742812 49.1994901,25.4568873 47.0807699,26.249658 L42.696987,31.310164 C42.2315101,31.8573985 41.4137223,31.9418121 40.8448062,31.5013495 C40.7773169,31.448386 40.7199668,31.3838097 40.6754918,31.3107011 L40.6441173,31.295664 L36.2597934,26.249658 C33.6859806,25.2765162 31.4507398,23.5848573 29.8236817,21.3787262 C28.1658116,19.1360326 27.2719281,16.4266965 27.2720648,13.6448461 L27.2715238,13.6448461 Z M32.7766767,29.3156061 C33.2970466,28.8171838 34.1214701,28.8171838 34.64184,29.3156061 C35.1384235,29.770477 35.1384235,30.5626076 34.64184,31.0464785 L31.0343069,34.4657974 L38.5436448,41.5520096 L46.9260608,33.6435928 C47.4636352,33.1883362 48.2547317,33.1883362 48.792306,33.6435928 C49.0443287,33.8680018 49.1883172,34.188237 49.1883172,34.5243345 C49.1883172,34.8604321 49.0443287,35.1806673 48.792306,35.4050763 L40.3947436,43.3124191 L43.2244041,45.9680704 C43.7209876,46.4514043 43.7209876,47.273072 43.2244041,47.7284799 C42.6986193,48.2134047 41.8850256,48.2134047 41.3592408,47.7284799 L37.6894995,44.266198 L37.6570431,44.251161 L37.6570431,44.222698 L37.6262095,44.2076609 L37.5948349,44.1791979 L37.5488549,44.1646979 L37.5488549,44.1330127 L29.1686026,36.2256699 L14.0563441,50.4716684 C13.5425272,50.9562659 12.7363723,50.9562659 12.2225554,50.4716684 C11.6767463,49.9732974 11.6767463,49.1951299 12.2225554,48.7117959 L27.3045212,34.4657974 L21.0680166,28.6110127 L10.977851,38.1471907 C10.4801856,38.6036728 9.64010476,38.6036728 9.1121467,38.1471907 C8.61448132,37.6343197 8.61448132,36.8566892 9.1121467,36.3867812 L19.2033942,26.8495291 L12.8121806,20.805707 C12.3145153,20.3223731 12.3145153,19.5291685 12.8121806,19.0753716 C13.3423025,18.5603525 14.1791376,18.5603525 14.6621976,19.0753716 L21.9546183,25.9258243 L22.0162856,25.9558984 L22.0476601,25.9843614 L22.0476601,26.0144355 L29.1686026,32.7053879 L32.7766767,29.3156061 Z M50.0348467,5.78100391 C47.783243,3.66556101 44.799504,2.48905824 41.6994924,2.49431565 C38.4662903,2.49431565 35.5289826,3.7284459 33.4139047,5.72300384 L33.3360093,5.78100391 C31.206326,7.80671003 29.9149208,10.5654726 29.9149208,13.6314207 C29.9017424,15.911964 30.6327933,18.1354544 31.998804,19.9690023 C33.320322,21.8040601 35.2650036,23.2406359 37.5196441,24.0628406 C37.7452164,24.1288962 37.9453644,24.2620815 38.0935822,24.4446744 L41.6994924,28.5814756 L45.2615865,24.4446744 C45.4114645,24.2639971 45.6116595,24.1311853 45.8371474,24.0628406 C48.0561139,23.2689385 49.9912901,21.8453954 51.4023446,19.9690023 C52.7436013,18.1238497 53.4668337,15.906873 53.4698197,13.6314207 C53.4698197,10.5654726 52.1499246,7.80671003 50.0348467,5.78100391 Z M46.5495662,15.9643124 C46.5495662,15.9643124 44.7347103,14.5706996 43.6771714,13.0680682 C42.2420559,10.8490285 40.2032506,11.7523259 39.5227473,12.8774198 C38.842244,14.0137915 37.7847051,14.7248294 37.6354054,14.9149407 C37.4839421,15.1023669 35.4473006,16.1941645 35.9011498,18.1855002 C36.3566218,20.177373 37.9432007,20.1408544 37.9432007,20.1408544 C37.9432007,20.1408544 39.1100096,20.2552434 40.4715572,19.9539653 C41.8331048,19.6521501 43.0004547,20.0264654 43.0004547,20.0264654 C43.0004547,20.0264654 46.1649574,21.0822814 47.0412812,19.0549642 C47.9067862,17.0212025 46.5490252,15.9712939 46.5490252,15.9712939 L46.5495662,15.9643124 L46.5495662,15.9643124 Z M48.3119508,12.0203077 C48.3119508,11.5702701 47.9392427,10.2142499 46.5430749,10.2142499 C45.1485299,10.2142499 44.9570369,11.4934737 44.9570369,12.3989192 C44.9570369,13.2619388 45.0284411,14.462755 46.7713518,14.4262365 C48.5066894,14.3843475 48.3168192,12.4714193 48.3168192,12.0186965 L48.3119508,12.0203077 Z M36.9532793,13.4482908 C38.5393172,13.108883 38.3207772,11.2249549 38.2758792,10.813584 C38.1979837,10.1798795 37.4455353,9.07089673 36.4258622,9.16004498 C35.142751,9.27228586 34.9555855,11.1153992 34.9555855,11.1153992 C34.7814027,11.9660669 35.370487,13.7860875 36.9532793,13.4477538 L36.9532793,13.4482908 L36.9532793,13.4482908 Z M43.6723029,10.4338984 C44.8461441,10.5907134 45.594265,9.34800817 45.7462693,8.40658112 C45.8982736,7.47106148 45.138793,6.37926388 44.3116948,6.19183773 C43.4791871,6.00118936 42.4519409,7.32283909 42.3486212,8.18317345 C42.2393512,9.23952656 42.5006255,10.2894352 43.6674345,10.4381947 L43.6728439,10.4338984 L43.6723029,10.4338984 Z M39.8981601,10.285676 C40.7734021,10.285676 41.4804115,9.28410069 41.4804115,8.04676588 C41.4804115,6.81587552 40.7755658,5.81430025 39.9008648,5.81430025 C39.0250819,5.81430025 38.3132041,6.81050514 38.3132041,8.04730291 C38.3132041,9.28463773 39.024541,10.286213 39.8997829,10.286213 L39.8981601,10.285676 L39.8981601,10.285676 Z" id="形状" fill="#5073E5"></path>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-bar.svg b/examples/sites/demos/pc/overviewimage/chart-bar.svg
index c72f929583..e086abfa09 100644
--- a/examples/sites/demos/pc/overviewimage/chart-bar.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-bar.svg
@@ -2,75 +2,33 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Rank chart 条形图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="49.1491494%" y1="86.8386573%" x2="61.3605726%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="49.1491494%" y1="86.8386573%" x2="61.3605726%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.6153135%" y1="86.8386573%" x2="55.1363416%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="49.6153135%" y1="86.8386573%" x2="55.1363416%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.8106989%" y1="86.8386573%" x2="52.5275515%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.8106989%" y1="86.8386573%" x2="52.5275515%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.1637274%" x2="128.792906%" y2="49.5830013%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="50.1637274%" x2="128.792906%" y2="49.5830013%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1478.000000, -609.000000)">
             <g id="编组-25备份-7" transform="translate(1380.000000, 576.000000)">
                 <g id="Rank-chart-条形图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="图表-(3)" transform="translate(62.510629, 63.088828) rotate(-270.000000) translate(-62.510629, -63.088828) translate(32.510629, 28.643217)">
-                        <path d="M11.423077,35.4185208 L16.2692307,35.4185208 C18.2447108,35.4185208 19.8461538,37.0199639 19.8461538,38.995444 L19.8461538,67.0212578 L19.8461538,67.0212578 L7.84615385,67.0212578 L7.84615385,38.995444 C7.84615385,37.0199639 9.44759688,35.4185208 11.423077,35.4185208 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M43.423077,20.0212578 L48.2692307,20.0212578 C50.2447108,20.0212578 51.8461538,21.6227008 51.8461538,23.5981809 L51.8461538,67.0212578 L51.8461538,67.0212578 L39.8461538,67.0212578 L39.8461538,23.5981809 C39.8461538,21.6227008 41.4475969,20.0212578 43.423077,20.0212578 Z" id="矩形备份-12" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <path d="M27.423077,0 L32.2692307,0 C34.2447108,-3.62889807e-16 35.8461538,1.60144303 35.8461538,3.57692313 L35.8461538,67 L35.8461538,67 L23.8461538,67 L23.8461538,3.57692313 C23.8461538,1.60144303 25.4475969,3.62889807e-16 27.423077,0 Z" id="矩形备份-11" fill="url(#linearGradient-11)" opacity="0.204287574"></path>
-                        <rect id="矩形" fill="url(#linearGradient-12)" x="0" y="64.8912223" width="60" height="4" rx="2"></rect>
+                        <path d="M11.423077,35.4185208 L16.2692307,35.4185208 C18.2447108,35.4185208 19.8461538,37.0199639 19.8461538,38.995444 L19.8461538,67.0212578 L19.8461538,67.0212578 L7.84615385,67.0212578 L7.84615385,38.995444 C7.84615385,37.0199639 9.44759688,35.4185208 11.423077,35.4185208 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M43.423077,20.0212578 L48.2692307,20.0212578 C50.2447108,20.0212578 51.8461538,21.6227008 51.8461538,23.5981809 L51.8461538,67.0212578 L51.8461538,67.0212578 L39.8461538,67.0212578 L39.8461538,23.5981809 C39.8461538,21.6227008 41.4475969,20.0212578 43.423077,20.0212578 Z" id="矩形备份-12" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                        <path d="M27.423077,0 L32.2692307,0 C34.2447108,-3.62889807e-16 35.8461538,1.60144303 35.8461538,3.57692313 L35.8461538,67 L35.8461538,67 L23.8461538,67 L23.8461538,3.57692313 C23.8461538,1.60144303 25.4475969,3.62889807e-16 27.423077,0 Z" id="矩形备份-11" fill="url(#linearGradient-3)" opacity="0.204287574"></path>
+                        <rect id="矩形" fill="url(#linearGradient-4)" x="0" y="64.8912223" width="60" height="4" rx="2"></rect>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-boxplot.svg b/examples/sites/demos/pc/overviewimage/chart-boxplot.svg
index ee541b7289..8fde8bf868 100644
--- a/examples/sites/demos/pc/overviewimage/chart-boxplot.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-boxplot.svg
@@ -2,104 +2,62 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Box diagram 箱形图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.418594%" y1="86.8386573%" x2="97.8189992%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.418594%" y1="86.8386573%" x2="97.8189992%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.3168542%" y1="86.8386573%" x2="59.1213752%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="49.3168542%" y1="86.8386573%" x2="59.1213752%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.3168542%" y1="86.8386573%" x2="59.1213752%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.3168542%" y1="86.8386573%" x2="59.1213752%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.4189887%" y1="86.8386573%" x2="57.7576734%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="49.4189887%" y1="86.8386573%" x2="57.7576734%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.4189887%" y1="86.8386573%" x2="57.7576734%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="49.4189887%" y1="86.8386573%" x2="57.7576734%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.9784944%" y1="86.8386573%" x2="76.9911798%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="47.9784944%" y1="86.8386573%" x2="76.9911798%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-18">
+        <linearGradient x1="44.0988019%" y1="82.9973815%" x2="128.792906%" y2="-34.0413311%" id="linearGradient-10">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1087.000000, -1984.000000)">
             <g id="编组-17备份-11" transform="translate(988.000000, 1951.000000)">
                 <g id="Box-diagram-箱形图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="箱形图" transform="translate(44.514868, 44.159211)">
-                        <polygon id="路径" fill="url(#linearGradient-9)" opacity="0.204287574" points="0 6.48901314 9.84684209 6.48901314 9.84684209 19.1288158 0 19.1288158"></polygon>
-                        <path d="M9.84684209,19.1288158 L9.84684209,6.48552632 L5.27210527,6.48552632 L5.27210527,0.697368378 L6.3181579,0.697368378 L6.3181579,0 L3.52868419,0 L3.52868419,0.697368378 L4.57473682,0.697368378 L4.57473682,6.48552632 L0,6.48552632 L0,19.1288158 L4.57473682,19.1288158 L4.57473682,28.2434211 L3.52868419,28.2434211 L3.52868419,28.9407895 L6.3181579,28.9407895 L6.3181579,28.2434211 L5.27210527,28.2434211 L5.27210527,19.1288158 L9.84684209,19.1288158 Z M9.14947365,7.1828947 L9.14947365,14.1217105 L0.697368378,14.1217105 L0.697368378,7.1828947 L9.14947365,7.1828947 Z M0.697368378,14.8190789 L9.14947365,14.8190789 L9.14947365,18.4314474 L0.697368378,18.4314474 L0.697368378,14.8190789 Z" id="形状" stroke="url(#linearGradient-11)" stroke-width="1.5" fill="url(#linearGradient-10)"></path>
-                        <polygon id="路径" fill="url(#linearGradient-9)" opacity="0.204287574" points="29.0767763 9.72131578 38.9236185 9.72131578 38.9236185 22.3611184 29.0767763 22.3611184"></polygon>
-                        <path d="M38.9236185,22.3611184 L38.9236185,9.72131578 L34.3488816,9.72131578 L34.3488816,1.48888156 L35.3949342,1.48888156 L35.3949342,0.791513115 L32.6054606,0.791513115 L32.6054606,1.48888156 L33.6515132,1.48888156 L33.6515132,9.72131578 L29.0767763,9.72131578 L29.0767763,22.3611184 L33.6515132,22.3611184 L33.6515132,31.4757237 L32.6054606,31.4757237 L32.6054606,32.1730921 L35.3949342,32.1730921 L35.3949342,31.4757237 L34.3488816,31.4757237 L34.3488816,22.3611184 L38.9236185,22.3611184 Z M38.22625,10.4186842 L38.22625,17.3540132 L29.7741447,17.3540132 L29.7741447,10.4186842 L38.22625,10.4186842 Z M29.7741447,18.0513816 L38.22625,18.0513816 L38.22625,21.66375 L29.7741447,21.66375 L29.7741447,18.0513816 Z" id="形状" stroke="url(#linearGradient-13)" stroke-width="1.5" fill="url(#linearGradient-12)"></path>
-                        <polygon id="路径" fill="url(#linearGradient-14)" opacity="0.204287574" points="14.5401316 12.0400658 24.3869737 12.0400658 24.3869737 28.8640789 14.5401316 28.8640789"></polygon>
-                        <path d="M24.3869737,28.8640789 L24.3869737,12.0400658 L19.8122369,12.0400658 L19.8122369,7.64315786 L20.8582895,7.64315786 L20.8582895,6.94578948 L18.0688158,6.94578948 L18.0688158,7.64315786 L19.1148684,7.64315786 L19.1148684,12.0400658 L14.5401316,12.0400658 L14.5401316,28.8640789 L19.1148684,28.8640789 L19.1148684,37.63 L18.0688158,37.63 L18.0688158,38.3273685 L20.8582895,38.3273685 L20.8582895,37.63 L19.8122369,37.63 L19.8122369,28.8640789 L24.3869737,28.8640789 Z M23.6896052,12.7374342 L23.6896052,23.8569737 L15.2375,23.8569737 L15.2375,12.7374342 L23.6896052,12.7374342 Z M15.2375,24.5543421 L23.6896052,24.5543421 L23.6896052,28.1667105 L15.2375,28.1667105 L15.2375,24.5543421 Z" id="形状" stroke="url(#linearGradient-13)" stroke-width="1.5" fill="url(#linearGradient-12)"></path>
+                        <polygon id="路径" fill="url(#linearGradient-1)" opacity="0.204287574" points="0 6.48901314 9.84684209 6.48901314 9.84684209 19.1288158 0 19.1288158"></polygon>
+                        <path d="M9.84684209,19.1288158 L9.84684209,6.48552632 L5.27210527,6.48552632 L5.27210527,0.697368378 L6.3181579,0.697368378 L6.3181579,0 L3.52868419,0 L3.52868419,0.697368378 L4.57473682,0.697368378 L4.57473682,6.48552632 L0,6.48552632 L0,19.1288158 L4.57473682,19.1288158 L4.57473682,28.2434211 L3.52868419,28.2434211 L3.52868419,28.9407895 L6.3181579,28.9407895 L6.3181579,28.2434211 L5.27210527,28.2434211 L5.27210527,19.1288158 L9.84684209,19.1288158 Z M9.14947365,7.1828947 L9.14947365,14.1217105 L0.697368378,14.1217105 L0.697368378,7.1828947 L9.14947365,7.1828947 Z M0.697368378,14.8190789 L9.14947365,14.8190789 L9.14947365,18.4314474 L0.697368378,18.4314474 L0.697368378,14.8190789 Z" id="形状" stroke="url(#linearGradient-3)" stroke-width="1.5" fill="url(#linearGradient-2)"></path>
+                        <polygon id="路径" fill="url(#linearGradient-1)" opacity="0.204287574" points="29.0767763 9.72131578 38.9236185 9.72131578 38.9236185 22.3611184 29.0767763 22.3611184"></polygon>
+                        <path d="M38.9236185,22.3611184 L38.9236185,9.72131578 L34.3488816,9.72131578 L34.3488816,1.48888156 L35.3949342,1.48888156 L35.3949342,0.791513115 L32.6054606,0.791513115 L32.6054606,1.48888156 L33.6515132,1.48888156 L33.6515132,9.72131578 L29.0767763,9.72131578 L29.0767763,22.3611184 L33.6515132,22.3611184 L33.6515132,31.4757237 L32.6054606,31.4757237 L32.6054606,32.1730921 L35.3949342,32.1730921 L35.3949342,31.4757237 L34.3488816,31.4757237 L34.3488816,22.3611184 L38.9236185,22.3611184 Z M38.22625,10.4186842 L38.22625,17.3540132 L29.7741447,17.3540132 L29.7741447,10.4186842 L38.22625,10.4186842 Z M29.7741447,18.0513816 L38.22625,18.0513816 L38.22625,21.66375 L29.7741447,21.66375 L29.7741447,18.0513816 Z" id="形状" stroke="url(#linearGradient-5)" stroke-width="1.5" fill="url(#linearGradient-4)"></path>
+                        <polygon id="路径" fill="url(#linearGradient-6)" opacity="0.204287574" points="14.5401316 12.0400658 24.3869737 12.0400658 24.3869737 28.8640789 14.5401316 28.8640789"></polygon>
+                        <path d="M24.3869737,28.8640789 L24.3869737,12.0400658 L19.8122369,12.0400658 L19.8122369,7.64315786 L20.8582895,7.64315786 L20.8582895,6.94578948 L18.0688158,6.94578948 L18.0688158,7.64315786 L19.1148684,7.64315786 L19.1148684,12.0400658 L14.5401316,12.0400658 L14.5401316,28.8640789 L19.1148684,28.8640789 L19.1148684,37.63 L18.0688158,37.63 L18.0688158,38.3273685 L20.8582895,38.3273685 L20.8582895,37.63 L19.8122369,37.63 L19.8122369,28.8640789 L24.3869737,28.8640789 Z M23.6896052,12.7374342 L23.6896052,23.8569737 L15.2375,23.8569737 L15.2375,12.7374342 L23.6896052,12.7374342 Z M15.2375,24.5543421 L23.6896052,24.5543421 L23.6896052,28.1667105 L15.2375,28.1667105 L15.2375,24.5543421 Z" id="形状" stroke="url(#linearGradient-5)" stroke-width="1.5" fill="url(#linearGradient-4)"></path>
                     </g>
-                    <polyline id="路径" stroke="url(#linearGradient-16)" fill="url(#linearGradient-15)" points="36.0263158 36.5230263 36.0263158 87.0822369 89.4473684 87.0822369 89.4473684 88.4769737 34.5526316 88.4769737 34.5526316 36.5230263 36.0263158 36.5230263"></polyline>
-                    <polygon id="路径" stroke="url(#linearGradient-18)" fill="url(#linearGradient-17)" points="36.5789473 36 34 36 34 89 90 89 90 86.5592105 36.5789473 86.5592105"></polygon>
+                    <polyline id="路径" stroke="url(#linearGradient-8)" fill="url(#linearGradient-7)" points="36.0263158 36.5230263 36.0263158 87.0822369 89.4473684 87.0822369 89.4473684 88.4769737 34.5526316 88.4769737 34.5526316 36.5230263 36.0263158 36.5230263"></polyline>
+                    <polygon id="路径" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" points="36.5789473 36 34 36 34 89 90 89 90 86.5592105 36.5789473 86.5592105"></polygon>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-candle.svg b/examples/sites/demos/pc/overviewimage/chart-candle.svg
index 0f5143361c..dda33be91b 100644
--- a/examples/sites/demos/pc/overviewimage/chart-candle.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-candle.svg
@@ -2,80 +2,38 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>K-line chart K线图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.0940302%" x2="128.792906%" y2="49.7605136%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.0940302%" x2="128.792906%" y2="49.7605136%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.7687894%" y1="86.8386573%" x2="66.4391471%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="48.7687894%" y1="86.8386573%" x2="66.4391471%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.6670806%" y1="86.8386573%" x2="54.4451454%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.6670806%" y1="86.8386573%" x2="54.4451454%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.2800187%" y1="86.8386573%" x2="59.6132037%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="49.2800187%" y1="86.8386573%" x2="59.6132037%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -1434.000000)">
             <g id="编组-17备份-2" transform="translate(598.000000, 1401.000000)">
                 <g id="K-line-chart-K线图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="K线图" transform="translate(32.000000, 37.000000)">
-                        <polygon id="路径" fill="url(#linearGradient-9)" points="3.44444445 49.8676267 0 49.8676267 0 53 62 53 62 49.8676267"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-10)" opacity="0.303770519" points="21.4615385 33.0639401 24.9059829 33.0639401 24.9059829 27.843318 28.3504274 27.843318 28.3504274 13.921659 24.9059829 13.921659 24.9059829 10.4412443 21.4615385 10.4412443 21.4615385 13.921659 18.0170941 13.921659 18.0170941 27.843318 21.4615385 27.843318"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-11)" points="36.9615385 43.5051844 40.4059829 43.5051844 40.4059829 27.843318 43.8504274 27.843318 43.8504274 6.9608295 40.4059829 6.9608295 40.4059829 0 36.9615385 0 36.9615385 6.9608295 33.5170941 6.9608295 33.5170941 27.843318 36.9615385 27.843318"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-12)" opacity="0.604724702" points="52.4615385 38.2845622 55.9059829 38.2845622 55.9059829 29.5835254 59.3504274 29.5835254 59.3504274 17.4020738 55.9059829 17.4020738 55.9059829 8.70103691 52.4615385 8.70103691 52.4615385 17.4020738 49.0170941 17.4020738 49.0170941 29.5835254 52.4615385 29.5835254"></polygon>
-                        <polygon id="路径备份" fill="url(#linearGradient-13)" points="5.96153846 43.1268784 9.40598291 43.1268784 9.40598291 34.4258415 12.8504274 34.4258415 12.8504274 22.2443899 9.40598291 22.2443899 9.40598291 13.5433531 5.96153846 13.5433531 5.96153846 22.2443899 2.51709407 22.2443899 2.51709407 34.4258415 5.96153846 34.4258415"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-1)" points="3.44444445 49.8676267 0 49.8676267 0 53 62 53 62 49.8676267"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-2)" opacity="0.303770519" points="21.4615385 33.0639401 24.9059829 33.0639401 24.9059829 27.843318 28.3504274 27.843318 28.3504274 13.921659 24.9059829 13.921659 24.9059829 10.4412443 21.4615385 10.4412443 21.4615385 13.921659 18.0170941 13.921659 18.0170941 27.843318 21.4615385 27.843318"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-3)" points="36.9615385 43.5051844 40.4059829 43.5051844 40.4059829 27.843318 43.8504274 27.843318 43.8504274 6.9608295 40.4059829 6.9608295 40.4059829 0 36.9615385 0 36.9615385 6.9608295 33.5170941 6.9608295 33.5170941 27.843318 36.9615385 27.843318"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-4)" opacity="0.604724702" points="52.4615385 38.2845622 55.9059829 38.2845622 55.9059829 29.5835254 59.3504274 29.5835254 59.3504274 17.4020738 55.9059829 17.4020738 55.9059829 8.70103691 52.4615385 8.70103691 52.4615385 17.4020738 49.0170941 17.4020738 49.0170941 29.5835254 52.4615385 29.5835254"></polygon>
+                        <polygon id="路径备份" fill="url(#linearGradient-5)" points="5.96153846 43.1268784 9.40598291 43.1268784 9.40598291 34.4258415 12.8504274 34.4258415 12.8504274 22.2443899 9.40598291 22.2443899 9.40598291 13.5433531 5.96153846 13.5433531 5.96153846 22.2443899 2.51709407 22.2443899 2.51709407 34.4258415 5.96153846 34.4258415"></polygon>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-dev.svg b/examples/sites/demos/pc/overviewimage/chart-dev.svg
deleted file mode 100644
index 756f565a09..0000000000
--- a/examples/sites/demos/pc/overviewimage/chart-dev.svg
+++ /dev/null
@@ -1,83 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>开发中图表组件</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="82.2386168%" x2="128.792906%" y2="-32.1088266%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.4956023%" x2="128.792906%" y2="15.6279277%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览2" transform="translate(-696.000000, -1434.000000)">
-            <g id="编组-17备份-2" transform="translate(598.000000, 1401.000000)">
-                <g id="开发中图表组件" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-2" transform="translate(29.000000, 36.000000)">
-                        <path d="M7,0 L16.3490363,0 L16.3490363,0 L61,0 C63.209139,-4.05812251e-16 65,1.790861 65,4 L65,54 C65,56.209139 63.209139,58 61,58 L7,58 C4.790861,58 3,56.209139 3,54 L3,4 C3,1.790861 4.790861,4.05812251e-16 7,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M3,5 L49,5 C50.1045695,5 51,5.8954305 51,7 L51,20 C51,21.1045695 50.1045695,22 49,22 L0,22 L0,22 L0,8.69218242 L3,5 Z" id="矩形" fill="#5073E5"></path>
-                        <polygon id="矩形备份-32" fill="#3E5DC0" points="0 8.98530819 3 5 3 22 0 24.9853082"></polygon>
-                        <polygon id="矩形备份-33" fill="#243D8C" transform="translate(1.500000, 24.096418) scale(-1, 1) translate(-1.500000, -24.096418) " points="0 26.9957245 3 24.0301261 0 21.1971118"></polygon>
-                        <text id="开发中" font-family="PingFangSC-Semibold, PingFang SC" font-size="12" font-weight="500" fill="#FFFFFF">
-                            <tspan x="10.7588235" y="18">开发中</tspan>
-                        </text>
-                    </g>
-                    <g id="图表-饼图" transform="translate(44.000000, 63.000000)">
-                        <polygon id="路径" fill="url(#linearGradient-10)" opacity="0.303770519" points="2.71428571 2 0 2 0 25 38 25 38 22.5313943 2.71428571 22.5313943"></polygon>
-                        <path d="M18.375,1.25 C13.1982839,1.25 9,5.44828391 9,10.625 C9,15.8017161 13.1982839,20 18.375,20 C23.5517161,20 27.75,15.8017161 27.75,10.625 L18.375,10.625 L18.375,1.25 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <path d="M20.25,0 L20.25,8.75 L29,8.75 C29,3.91683329 25.0809798,0 20.25,0 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/chart-events.svg b/examples/sites/demos/pc/overviewimage/chart-events.svg
index e9e7987adb..753447e8e0 100644
--- a/examples/sites/demos/pc/overviewimage/chart-events.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-events.svg
@@ -2,74 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Event Listening 事件监听</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="45.6307517%" y1="86.8386573%" x2="108.338285%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="45.6307517%" y1="86.8386573%" x2="108.338285%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.6666837%" y1="86.8386573%" x2="107.85852%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="45.6666837%" y1="86.8386573%" x2="107.85852%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.1014361%" y1="86.8386573%" x2="128.757735%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="44.1014361%" y1="86.8386573%" x2="128.757735%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1092.000000, -334.000000)">
             <g id="编组-17备份" transform="translate(994.000000, 301.000000)">
                 <g id="Event-Listening-事件监听" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <polygon id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" points="45.3023256 46 68.415003 46 73.6976744 51.4732821 73.6976744 79 45.3023256 79"></polygon>
-                    <path d="M66.4178571,82.5714286 L44.1428571,82.5714286 C43.1946429,82.5714286 42.4285714,81.8053571 42.4285714,80.8571429 L42.4285714,43.1428571 C42.4285714,42.1946429 43.1946429,41.4285714 44.1428571,41.4285714 L64.7089286,41.4285714 L64.7089286,50 C64.7089286,51.8910714 66.2410714,53.4285714 68.1375,53.4285714 L76.7035714,53.4285714 L76.7035714,62 C76.7035714,62.9482143 77.4696429,63.7142857 78.4178571,63.7142857 C79.3660714,63.7142857 80.1321429,62.9482143 80.1321429,62 L80.1321429,49.0464286 C80.1321429,48.5910714 79.9553571,48.1571429 79.6339286,47.8357143 L70.35,38.5035714 C70.0285714,38.1821429 69.5892857,38 69.1339286,38 L42.4285714,38 C40.5375,38 39,39.5375 39,41.4285714 L39,82.5714286 C39,84.4625 40.5321429,86 42.4285714,86 L66.4232143,86 C67.3714286,86 68.1375,85.2339286 68.1375,84.2857143 C68.1321429,83.3375 67.3660714,82.5714286 66.4178571,82.5714286 Z M69.8464286,50 C68.8982143,50 68.1321429,49.2339286 68.1321429,48.2857143 L68.1321429,41.4285714 L76.6982143,50 L69.8464286,50 Z" id="形状" fill="url(#linearGradient-10)"></path>
-                    <path d="M65.7035714,70.5714286 L48.5178571,70.5714286 C47.5696429,70.5714286 46.8035714,71.3375 46.8035714,72.2857143 C46.8035714,73.2339286 47.5696429,74 48.5178571,74 L65.7089286,74 C66.6571429,74 67.4232143,73.2339286 67.4232143,72.2857143 C67.4178571,71.3375 66.6517857,70.5714286 65.7035714,70.5714286 Z M69.0785714,60.2857143 L48.5178571,60.2857143 C47.5696429,60.2857143 46.8035714,61.0517857 46.8035714,62 C46.8035714,62.9482143 47.5696429,63.7142857 48.5178571,63.7142857 L69.0839286,63.7142857 C70.0321429,63.7142857 70.7982143,62.9482143 70.7982143,62 C70.7928571,61.0517857 70.0267857,60.2857143 69.0785714,60.2857143 Z M48.5178571,53.4285714 L58.7982143,53.4285714 C59.7464286,53.4285714 60.5125,52.6625 60.5125,51.7142857 C60.5125,50.7660714 59.7464286,50 58.7982143,50 L48.5178571,50 C47.5696429,50 46.8035714,50.7660714 46.8035714,51.7142857 C46.8035714,52.6625 47.5696429,53.4285714 48.5178571,53.4285714 Z" id="形状" fill="url(#linearGradient-11)"></path>
-                    <path d="M75.1071429,73.3571429 C76.0553571,73.3571429 76.8214286,74.1232143 76.8214286,75.0714286 L76.8214286,84.2321429 C76.8214286,85.1803571 76.0553571,85.9464286 75.1071429,85.9464286 C74.1589286,85.9464286 73.3928571,85.1803571 73.3928571,84.2321429 L73.3928571,75.0714286 C73.3928571,74.1232143 74.1589286,73.3571429 75.1071429,73.3571429 Z M80.2392857,64.3357143 C82.2,65.0535714 83.8821429,66.3339286 85.0982143,68.0428571 C86.3410714,69.7892857 87,71.8464286 87,74 C87,75.5428571 86.6678571,77.0214286 86.0089286,78.4089286 C85.7142857,79.025 85.1035714,79.3839286 84.4607143,79.3839286 C84.2142857,79.3839286 83.9625,79.3303571 83.7267857,79.2178571 C82.8696429,78.8107143 82.5053571,77.7875 82.9125,76.9357143 C83.3517857,76.0142857 83.5714286,75.0285714 83.5714286,74 C83.5714286,71.1285714 81.7607143,68.5410714 79.0660714,67.5553571 C78.1767857,67.2285714 77.7160714,66.2482143 78.0428571,65.3589286 C78.3696429,64.4696429 79.35,64.0089286 80.2392857,64.3357143 Z M77.6785714,68.9482143 C80.0142857,69.8 81.5892857,72.0446429 81.5892857,74.5357143 C81.5892857,75.425 81.3964286,76.2821429 81.0160714,77.0857143 C80.7214286,77.7017857 80.1053571,78.0607143 79.4678571,78.0607143 C79.2214286,78.0607143 78.9696429,78.0071429 78.7339286,77.8946429 C77.8767857,77.4875 77.5125,76.4642857 77.9196429,75.6125 C78.0803571,75.275 78.1607143,74.9107143 78.1607143,74.5357143 C78.1607143,73.4803571 77.4964286,72.5321429 76.5053571,72.1678571 C75.6160714,71.8410714 75.1553571,70.8607143 75.4821429,69.9714286 C75.8089286,69.0821429 76.7892857,68.6214286 77.6785714,68.9482143 Z" id="形状结合" fill="url(#linearGradient-12)"></path>
+                    <g id="编组"></g>
+                    <polygon id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" points="45.3023256 46 68.415003 46 73.6976744 51.4732821 73.6976744 79 45.3023256 79"></polygon>
+                    <path d="M66.4178571,82.5714286 L44.1428571,82.5714286 C43.1946429,82.5714286 42.4285714,81.8053571 42.4285714,80.8571429 L42.4285714,43.1428571 C42.4285714,42.1946429 43.1946429,41.4285714 44.1428571,41.4285714 L64.7089286,41.4285714 L64.7089286,50 C64.7089286,51.8910714 66.2410714,53.4285714 68.1375,53.4285714 L76.7035714,53.4285714 L76.7035714,62 C76.7035714,62.9482143 77.4696429,63.7142857 78.4178571,63.7142857 C79.3660714,63.7142857 80.1321429,62.9482143 80.1321429,62 L80.1321429,49.0464286 C80.1321429,48.5910714 79.9553571,48.1571429 79.6339286,47.8357143 L70.35,38.5035714 C70.0285714,38.1821429 69.5892857,38 69.1339286,38 L42.4285714,38 C40.5375,38 39,39.5375 39,41.4285714 L39,82.5714286 C39,84.4625 40.5321429,86 42.4285714,86 L66.4232143,86 C67.3714286,86 68.1375,85.2339286 68.1375,84.2857143 C68.1321429,83.3375 67.3660714,82.5714286 66.4178571,82.5714286 Z M69.8464286,50 C68.8982143,50 68.1321429,49.2339286 68.1321429,48.2857143 L68.1321429,41.4285714 L76.6982143,50 L69.8464286,50 Z" id="形状" fill="url(#linearGradient-2)"></path>
+                    <path d="M65.7035714,70.5714286 L48.5178571,70.5714286 C47.5696429,70.5714286 46.8035714,71.3375 46.8035714,72.2857143 C46.8035714,73.2339286 47.5696429,74 48.5178571,74 L65.7089286,74 C66.6571429,74 67.4232143,73.2339286 67.4232143,72.2857143 C67.4178571,71.3375 66.6517857,70.5714286 65.7035714,70.5714286 Z M69.0785714,60.2857143 L48.5178571,60.2857143 C47.5696429,60.2857143 46.8035714,61.0517857 46.8035714,62 C46.8035714,62.9482143 47.5696429,63.7142857 48.5178571,63.7142857 L69.0839286,63.7142857 C70.0321429,63.7142857 70.7982143,62.9482143 70.7982143,62 C70.7928571,61.0517857 70.0267857,60.2857143 69.0785714,60.2857143 Z M48.5178571,53.4285714 L58.7982143,53.4285714 C59.7464286,53.4285714 60.5125,52.6625 60.5125,51.7142857 C60.5125,50.7660714 59.7464286,50 58.7982143,50 L48.5178571,50 C47.5696429,50 46.8035714,50.7660714 46.8035714,51.7142857 C46.8035714,52.6625 47.5696429,53.4285714 48.5178571,53.4285714 Z" id="形状" fill="url(#linearGradient-3)"></path>
+                    <path d="M75.1071429,73.3571429 C76.0553571,73.3571429 76.8214286,74.1232143 76.8214286,75.0714286 L76.8214286,84.2321429 C76.8214286,85.1803571 76.0553571,85.9464286 75.1071429,85.9464286 C74.1589286,85.9464286 73.3928571,85.1803571 73.3928571,84.2321429 L73.3928571,75.0714286 C73.3928571,74.1232143 74.1589286,73.3571429 75.1071429,73.3571429 Z M80.2392857,64.3357143 C82.2,65.0535714 83.8821429,66.3339286 85.0982143,68.0428571 C86.3410714,69.7892857 87,71.8464286 87,74 C87,75.5428571 86.6678571,77.0214286 86.0089286,78.4089286 C85.7142857,79.025 85.1035714,79.3839286 84.4607143,79.3839286 C84.2142857,79.3839286 83.9625,79.3303571 83.7267857,79.2178571 C82.8696429,78.8107143 82.5053571,77.7875 82.9125,76.9357143 C83.3517857,76.0142857 83.5714286,75.0285714 83.5714286,74 C83.5714286,71.1285714 81.7607143,68.5410714 79.0660714,67.5553571 C78.1767857,67.2285714 77.7160714,66.2482143 78.0428571,65.3589286 C78.3696429,64.4696429 79.35,64.0089286 80.2392857,64.3357143 Z M77.6785714,68.9482143 C80.0142857,69.8 81.5892857,72.0446429 81.5892857,74.5357143 C81.5892857,75.425 81.3964286,76.2821429 81.0160714,77.0857143 C80.7214286,77.7017857 80.1053571,78.0607143 79.4678571,78.0607143 C79.2214286,78.0607143 78.9696429,78.0071429 78.7339286,77.8946429 C77.8767857,77.4875 77.5125,76.4642857 77.9196429,75.6125 C78.0803571,75.275 78.1607143,74.9107143 78.1607143,74.5357143 C78.1607143,73.4803571 77.4964286,72.5321429 76.5053571,72.1678571 C75.6160714,71.8410714 75.1553571,70.8607143 75.4821429,69.9714286 C75.8089286,69.0821429 76.7892857,68.6214286 77.6785714,68.9482143 Z" id="形状结合" fill="url(#linearGradient-4)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-funnel.svg b/examples/sites/demos/pc/overviewimage/chart-funnel.svg
index 25cb23b876..512c536992 100644
--- a/examples/sites/demos/pc/overviewimage/chart-funnel.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-funnel.svg
@@ -2,84 +2,42 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Funnel diagram 漏斗图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.8157653%" x2="128.792906%" y2="47.9223198%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.8157653%" x2="128.792906%" y2="47.9223198%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.8307653%" x2="128.792906%" y2="47.8841163%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.8307653%" x2="128.792906%" y2="47.8841163%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.7999308%" x2="128.792906%" y2="45.4157398%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="51.7999308%" x2="128.792906%" y2="45.4157398%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.7999308%" x2="128.792906%" y2="45.4157398%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="51.7999308%" x2="128.792906%" y2="45.4157398%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.9463952%" x2="128.792906%" y2="39.9488901%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="53.9463952%" x2="128.792906%" y2="39.9488901%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-14">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1478.000000, -884.000000)">
             <g id="编组-25备份-11" transform="translate(1380.000000, 850.000000)">
                 <g id="Funnel-diagram-漏斗图" transform="translate(98.000000, 34.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-5" transform="translate(41.000000, 44.000000)">
-                        <polygon id="路径" fill="url(#linearGradient-9)" points="0 0 44 0 44 6.54761905 0 6.54761905"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-10)" opacity="0.204287574" points="43.8004837 9.54761905 39.0785973 16.0952381 4.92140266 16.0952381 0.199516324 9.54761905"></polygon>
-                        <polygon id="路径" stroke="url(#linearGradient-12)" fill="url(#linearGradient-11)" points="36.8107618 19.0952381 32.095526 25.6428571 11.904474 25.6428571 7.18923821 19.0952381"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-13)" opacity="0.303770519" points="11.9975816 28.6428571 32.0024184 28.6428571 32.0024184 35.1904762 11.9975816 35.1904762"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-14)" points="32.0024184 38.1904762 32.0024184 41.1172619 11.9975816 44.7380952 11.9975816 38.1904762"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-1)" points="0 0 44 0 44 6.54761905 0 6.54761905"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-2)" opacity="0.204287574" points="43.8004837 9.54761905 39.0785973 16.0952381 4.92140266 16.0952381 0.199516324 9.54761905"></polygon>
+                        <polygon id="路径" stroke="url(#linearGradient-4)" fill="url(#linearGradient-3)" points="36.8107618 19.0952381 32.095526 25.6428571 11.904474 25.6428571 7.18923821 19.0952381"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-5)" opacity="0.303770519" points="11.9975816 28.6428571 32.0024184 28.6428571 32.0024184 35.1904762 11.9975816 35.1904762"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-6)" points="32.0024184 38.1904762 32.0024184 41.1172619 11.9975816 44.7380952 11.9975816 38.1904762"></polygon>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-gauge.svg b/examples/sites/demos/pc/overviewimage/chart-gauge.svg
index 3142b03df4..6867a0f1cf 100644
--- a/examples/sites/demos/pc/overviewimage/chart-gauge.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-gauge.svg
@@ -2,81 +2,39 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Dashboard 仪表盘</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.1879523%" x2="128.792906%" y2="49.5213025%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.1879523%" x2="128.792906%" y2="49.5213025%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="61.7031239%" x2="128.792906%" y2="20.1932074%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="61.7031239%" x2="128.792906%" y2="20.1932074%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.3891536%" x2="128.792906%" y2="23.5397701%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="60.3891536%" x2="128.792906%" y2="23.5397701%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.4255734%" y1="86.8386573%" x2="84.3737922%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="47.4255734%" y1="86.8386573%" x2="84.3737922%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1086.000000, -1434.000000)">
             <g id="编组-17备份-3" transform="translate(988.000000, 1401.000000)">
                 <g id="Dashboard-仪表盘" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="仪表盘" transform="translate(36.000000, 38.000000)">
-                        <path d="M4.2,44 L51.8,44 C54.6,44 56,44.1 56,44.3 L56,47.7 C56,47.9 54.6,48 51.8,48 L4.2,48 C1.4,48 0,47.9 0,47.7 L0,44.3 C0,44.1 1.4,44 4.2,44 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M29.4989573,4 C44.6874076,4 57,17.2998611 57,33.7083333 C57,34.1410417 56.9916581,34.57375 56.9749744,35 L2.02294013,35 C2.00834186,34.57375 2,34.1410417 2,33.7083333 C2,17.2998611 14.3125924,4 29.4989573,4 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.204287574"></path>
-                        <path d="M48.339375,7.54626871 C54.2682639,12.9700259 58,20.8479988 58,29.6164392 C58,30.0132995 57.9919444,30.4081854 57.9778472,30.8010968 L53.1404861,30.8010968 C53.1586111,30.4101598 53.1666667,30.0132995 53.1666667,29.6164392 C53.1666667,28.2143961 53.0540333,26.8394591 52.8375613,25.5006963 L50,25.5 C49.1715729,25.5 48.5,24.8284271 48.5,24 C48.5,23.1715729 49.1715729,22.5 50,22.5 L52.1636532,22.5001743 C51.0161145,18.5356242 48.9342523,14.9857144 46.1804861,12.1210214 L48.339375,7.54626871 Z M29,0 C32.4880556,0 35.8311111,0.627868511 38.9284722,1.78093521 L36.0365278,5.80877094 C34.3986876,5.29685086 32.7096984,4.96637126 31.0011125,4.82213073 L31,7.5 C31,8.32842712 30.3284271,9 29.5,9 C28.6715729,9 28,8.32842712 28,7.5 L28.0004167,4.75952633 C17.4960181,5.19950823 8.71900986,12.5424184 5.83643185,22.5005294 L8,22.5 C8.82842712,22.5 9.5,23.1715729 9.5,24 C9.5,24.8284271 8.82842712,25.5 8,25.5 L5.16265245,25.49986 C4.94604596,26.8388969 4.83333333,28.2141147 4.83333333,29.6164392 C4.83333333,30.0132995 4.84138889,30.4101598 4.85951389,30.8010968 L0.0221527778,30.8010968 C0.00805555556,30.4081854 0,30.0132995 0,29.6164392 C0,13.2602671 12.9835417,0 29,0 Z" id="形状结合" fill="url(#linearGradient-11)"></path>
-                        <path d="M46.5208333,0.32972969 L34.945,31.1466219 C34.4644137,33.7116989 32.3291367,35.6667987 29.6860933,35.9617761 C27.0430499,36.2567534 24.5141973,34.8221946 23.4578615,32.4286461 C22.4015258,30.0350976 23.0662823,27.2458059 25.0950694,25.558987 L46.5208333,0.32972969 Z" id="路径" fill="url(#linearGradient-12)"></path>
-                        <path d="M15,28 C15,29.1045695 15.8954305,30 17,30 C18.1045695,30 19,29.1045695 19,28 C19,26.8954305 18.1045695,26 17,26 C15.8954305,26 15,26.8954305 15,28 L15,28 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
-                        <path d="M41,28 C41,28.7145311 41.3811978,29.3747852 42,29.7320508 C42.6188021,30.0893164 43.3811979,30.0893164 44,29.7320508 C44.6188022,29.3747852 45,28.7145311 45,28 C45,26.8954305 44.1045695,26 43,26 C41.8954305,26 41,26.8954305 41,28 L41,28 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
+                    <g id="编组"></g>
+                    <g id="仪表盘" transform="translate(34.000000, 38.000000)">
+                        <path d="M4.2,44 L51.8,44 C54.6,44 56,44.1 56,44.3 L56,47.7 C56,47.9 54.6,48 51.8,48 L4.2,48 C1.4,48 0,47.9 0,47.7 L0,44.3 C0,44.1 1.4,44 4.2,44 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M29.4989573,4 C44.6874076,4 57,17.2998611 57,33.7083333 C57,34.1410417 56.9916581,34.57375 56.9749744,35 L2.02294013,35 C2.00834186,34.57375 2,34.1410417 2,33.7083333 C2,17.2998611 14.3125924,4 29.4989573,4 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
+                        <path d="M48.339375,7.54626871 C54.2682639,12.9700259 58,20.8479988 58,29.6164392 C58,30.0132995 57.9919444,30.4081854 57.9778472,30.8010968 L53.1404861,30.8010968 C53.1586111,30.4101598 53.1666667,30.0132995 53.1666667,29.6164392 C53.1666667,28.2143961 53.0540333,26.8394591 52.8375613,25.5006963 L50,25.5 C49.1715729,25.5 48.5,24.8284271 48.5,24 C48.5,23.1715729 49.1715729,22.5 50,22.5 L52.1636532,22.5001743 C51.0161145,18.5356242 48.9342523,14.9857144 46.1804861,12.1210214 L48.339375,7.54626871 Z M29,0 C32.4880556,0 35.8311111,0.627868511 38.9284722,1.78093521 L36.0365278,5.80877094 C34.3986876,5.29685086 32.7096984,4.96637126 31.0011125,4.82213073 L31,7.5 C31,8.32842712 30.3284271,9 29.5,9 C28.6715729,9 28,8.32842712 28,7.5 L28.0004167,4.75952633 C17.4960181,5.19950823 8.71900986,12.5424184 5.83643185,22.5005294 L8,22.5 C8.82842712,22.5 9.5,23.1715729 9.5,24 C9.5,24.8284271 8.82842712,25.5 8,25.5 L5.16265245,25.49986 C4.94604596,26.8388969 4.83333333,28.2141147 4.83333333,29.6164392 C4.83333333,30.0132995 4.84138889,30.4101598 4.85951389,30.8010968 L0.0221527778,30.8010968 C0.00805555556,30.4081854 0,30.0132995 0,29.6164392 C0,13.2602671 12.9835417,0 29,0 Z" id="形状结合" fill="url(#linearGradient-3)"></path>
+                        <path d="M46.5208333,0.32972969 L34.945,31.1466219 C34.4644137,33.7116989 32.3291367,35.6667987 29.6860933,35.9617761 C27.0430499,36.2567534 24.5141973,34.8221946 23.4578615,32.4286461 C22.4015258,30.0350976 23.0662823,27.2458059 25.0950694,25.558987 L46.5208333,0.32972969 Z" id="路径" fill="url(#linearGradient-4)"></path>
+                        <path d="M15,28 C15,29.1045695 15.8954305,30 17,30 C18.1045695,30 19,29.1045695 19,28 C19,26.8954305 18.1045695,26 17,26 C15.8954305,26 15,26.8954305 15,28 L15,28 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
+                        <path d="M41,28 C41,28.7145311 41.3811978,29.3747852 42,29.7320508 C42.6188021,30.0893164 43.3811979,30.0893164 44,29.7320508 C44.6188022,29.3747852 45,28.7145311 45,28 C45,26.8954305 44.1045695,26 43,26 C41.8954305,26 41,26.8954305 41,28 L41,28 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-graph.svg b/examples/sites/demos/pc/overviewimage/chart-graph.svg
index 21ed1dc3a1..c7f6484211 100644
--- a/examples/sites/demos/pc/overviewimage/chart-graph.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-graph.svg
@@ -2,85 +2,43 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Topology Diagram  </title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="74.8813561%" x2="128.792906%" y2="-13.3705524%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="74.8813561%" x2="128.792906%" y2="-13.3705524%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.7272892%" x2="128.792906%" y2="-35.9003397%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="83.7272892%" x2="128.792906%" y2="-35.9003397%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.1167583%" y1="86.8386573%" x2="75.1450776%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="48.1167583%" y1="86.8386573%" x2="75.1450776%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="64.4995858%" x2="128.792906%" y2="13.070873%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="64.4995858%" x2="128.792906%" y2="13.070873%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="79.8350455%" x2="128.792906%" y2="-25.9871489%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="79.8350455%" x2="128.792906%" y2="-25.9871489%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.0130903%" x2="128.792906%" y2="-34.0813402%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="83.0130903%" x2="128.792906%" y2="-34.0813402%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1479.000000, -1709.000000)">
             <g id="编组-17备份-8" transform="translate(1380.000000, 1676.000000)">
                 <g id="Topology-Diagram--" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-7" transform="translate(36.000000, 32.000000)">
-                        <path d="M41.7384208,47.0570005 C40.734282,49.2631041 41.2363514,51.9739941 43.2632241,53.4883534 C45.2900968,55.0214085 47.9863954,55.0214085 49.994673,53.6566156 C52.0215457,52.1235605 52.6909716,49.5996285 51.8541892,47.3935248 C50.8500505,45.1874213 48.4884648,43.8413242 45.9595227,44.1778484 C44.955384,44.3461106 43.93265,44.6826349 43.0958677,45.5239455 L36.6805365,40.6256478 C36.3458236,40.4573856 36.0111107,40.2891235 35.5090413,40.4573856 C35.1743283,40.6256477 34.8396155,40.962172 34.8396155,41.2986963 C34.8396155,41.6352206 35.0069719,42.140007 35.3416848,42.3082691 L41.7384208,47.0570005 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                        <path d="M16.9696641,40.6256478 C16.4675947,40.2891235 15.7981689,40.2891235 15.4448608,40.6256478 L8.54605542,47.2252627 C6.35182624,45.8791656 3.65552767,46.0474277 1.81460659,47.7300491 C-0.0449096597,49.4313663 -0.546979101,52.1422563 0.643111322,54.161402 C1.81460659,56.3675056 4.34354871,57.3770784 6.87249078,56.872292 C9.23407647,56.1992434 11.0935927,54.161402 11.0935927,51.6187741 C11.0935927,50.6092013 10.7588798,49.5809326 10.2568104,48.7396219 L17.1742109,42.140007 C17.4717335,41.6352206 17.4717335,40.962172 16.9696641,40.6256478 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <path d="M20.3353886,5.26322985 C20.3353886,7.80585772 22.1949048,10.0119613 24.7238469,10.5167477 L24.7238469,18.321509 C24.7238469,18.6580333 24.8912034,19.1628197 25.2259163,19.3310818 C25.5606293,19.499344 26.0626987,19.499344 26.3974116,19.3310818 C26.7321245,19.1628197 26.899481,18.8262954 26.899481,18.321509 L26.899481,10.5167477 C29.7817312,10.0119613 31.6226523,7.30107125 31.2879393,4.59018127 C30.9532264,1.87929128 28.4242843,-0.158550191 25.3932728,0.00971192366 C22.5296178,0.00971192366 20.3353886,2.38407768 20.3353886,5.26322985 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.204287574"></path>
-                        <path d="M42.9285112,27.5759841 L37.7032705,29.4455635 C37.2012011,29.6138256 36.8664881,30.2868742 37.0338446,30.7916606 C37.2012011,31.296447 37.870627,31.6329713 38.5586479,31.4647091 L43.7838886,29.5951298 C45.308692,31.9694955 48.3397035,32.8108062 50.8686456,31.6329713 C53.3975878,30.4551363 54.569083,27.5759842 53.7323007,25.0333562 C52.7281619,22.4907284 50.0318633,20.9763691 47.3355647,21.6494177 C44.2673629,22.1542041 42.5752031,24.696832 42.9285112,27.5759841 L42.9285112,27.5759841 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
-                        <path d="M9.55019425,12.675437 C7.690678,11.1423819 4.99437937,10.9741198 2.81874535,12.3389127 C0.791872602,13.6850098 -0.21226616,16.2276377 0.624516162,18.4337413 C1.46129848,20.808107 3.65552767,22.1542041 6.1844698,21.985942 C7.18860856,21.985942 8.21134254,21.4811556 9.0481248,20.9763691 L13.2692267,24.5285698 C13.6039397,24.8650941 13.9386526,24.8650941 14.440722,24.8650941 C14.7754349,24.696832 15.1101479,24.3603077 15.2775043,24.0237834 C15.2775043,23.6872591 15.1101479,23.1824727 14.7754349,23.0142106 L10.554333,19.4620099 C11.0564024,18.6206992 11.3911153,17.5924306 11.2237589,16.4145956 C11.4097105,14.8815405 10.7402847,13.5167476 9.55019425,12.675437 L9.55019425,12.675437 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
-                        <path d="M24.389134,45.206117 C16.4675947,45.206117 10.0708588,39.1112885 10.0708588,31.651667 C10.0708588,24.1920456 16.4675947,18.097217 24.389134,18.097217 C32.3106733,18.097217 38.7074093,24.1920455 38.7074093,31.651667 C38.7074093,39.1112886 32.3106733,45.206117 24.389134,45.206117 Z" id="路径" fill="url(#linearGradient-14)"></path>
+                        <path d="M41.7384208,47.0570005 C40.734282,49.2631041 41.2363514,51.9739941 43.2632241,53.4883534 C45.2900968,55.0214085 47.9863954,55.0214085 49.994673,53.6566156 C52.0215457,52.1235605 52.6909716,49.5996285 51.8541892,47.3935248 C50.8500505,45.1874213 48.4884648,43.8413242 45.9595227,44.1778484 C44.955384,44.3461106 43.93265,44.6826349 43.0958677,45.5239455 L36.6805365,40.6256478 C36.3458236,40.4573856 36.0111107,40.2891235 35.5090413,40.4573856 C35.1743283,40.6256477 34.8396155,40.962172 34.8396155,41.2986963 C34.8396155,41.6352206 35.0069719,42.140007 35.3416848,42.3082691 L41.7384208,47.0570005 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                        <path d="M16.9696641,40.6256478 C16.4675947,40.2891235 15.7981689,40.2891235 15.4448608,40.6256478 L8.54605542,47.2252627 C6.35182624,45.8791656 3.65552767,46.0474277 1.81460659,47.7300491 C-0.0449096597,49.4313663 -0.546979101,52.1422563 0.643111322,54.161402 C1.81460659,56.3675056 4.34354871,57.3770784 6.87249078,56.872292 C9.23407647,56.1992434 11.0935927,54.161402 11.0935927,51.6187741 C11.0935927,50.6092013 10.7588798,49.5809326 10.2568104,48.7396219 L17.1742109,42.140007 C17.4717335,41.6352206 17.4717335,40.962172 16.9696641,40.6256478 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                        <path d="M20.3353886,5.26322985 C20.3353886,7.80585772 22.1949048,10.0119613 24.7238469,10.5167477 L24.7238469,18.321509 C24.7238469,18.6580333 24.8912034,19.1628197 25.2259163,19.3310818 C25.5606293,19.499344 26.0626987,19.499344 26.3974116,19.3310818 C26.7321245,19.1628197 26.899481,18.8262954 26.899481,18.321509 L26.899481,10.5167477 C29.7817312,10.0119613 31.6226523,7.30107125 31.2879393,4.59018127 C30.9532264,1.87929128 28.4242843,-0.158550191 25.3932728,0.00971192366 C22.5296178,0.00971192366 20.3353886,2.38407768 20.3353886,5.26322985 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.204287574"></path>
+                        <path d="M42.9285112,27.5759841 L37.7032705,29.4455635 C37.2012011,29.6138256 36.8664881,30.2868742 37.0338446,30.7916606 C37.2012011,31.296447 37.870627,31.6329713 38.5586479,31.4647091 L43.7838886,29.5951298 C45.308692,31.9694955 48.3397035,32.8108062 50.8686456,31.6329713 C53.3975878,30.4551363 54.569083,27.5759842 53.7323007,25.0333562 C52.7281619,22.4907284 50.0318633,20.9763691 47.3355647,21.6494177 C44.2673629,22.1542041 42.5752031,24.696832 42.9285112,27.5759841 L42.9285112,27.5759841 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.604724702"></path>
+                        <path d="M9.55019425,12.675437 C7.690678,11.1423819 4.99437937,10.9741198 2.81874535,12.3389127 C0.791872602,13.6850098 -0.21226616,16.2276377 0.624516162,18.4337413 C1.46129848,20.808107 3.65552767,22.1542041 6.1844698,21.985942 C7.18860856,21.985942 8.21134254,21.4811556 9.0481248,20.9763691 L13.2692267,24.5285698 C13.6039397,24.8650941 13.9386526,24.8650941 14.440722,24.8650941 C14.7754349,24.696832 15.1101479,24.3603077 15.2775043,24.0237834 C15.2775043,23.6872591 15.1101479,23.1824727 14.7754349,23.0142106 L10.554333,19.4620099 C11.0564024,18.6206992 11.3911153,17.5924306 11.2237589,16.4145956 C11.4097105,14.8815405 10.7402847,13.5167476 9.55019425,12.675437 L9.55019425,12.675437 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
+                        <path d="M24.389134,45.206117 C16.4675947,45.206117 10.0708588,39.1112885 10.0708588,31.651667 C10.0708588,24.1920456 16.4675947,18.097217 24.389134,18.097217 C32.3106733,18.097217 38.7074093,24.1920455 38.7074093,31.651667 C38.7074093,39.1112886 32.3106733,45.206117 24.389134,45.206117 Z" id="路径" fill="url(#linearGradient-6)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-heatmap.svg b/examples/sites/demos/pc/overviewimage/chart-heatmap.svg
index 594976ecd2..d2634c0785 100644
--- a/examples/sites/demos/pc/overviewimage/chart-heatmap.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-heatmap.svg
@@ -2,69 +2,27 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Heat map 热力图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="84.3418636%" x2="128.792906%" y2="-37.465605%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="84.3418636%" x2="128.792906%" y2="-37.465605%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.9329056%" y1="86.8386573%" x2="77.599883%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="47.9329056%" y1="86.8386573%" x2="77.599883%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1479.000000, -1159.000000)">
             <g id="Heat-map-热力图" transform="translate(1479.000000, 1159.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="chartheat" transform="translate(33.000000, 36.000000)">
-                    <path d="M54.5699096,32.909779 C45.1386261,23.2539448 46.0966425,19.578624 47.4818825,15.7279786 C48.8735956,11.8773333 45.5011188,-5.09018156 33.0080666,1.50721419 C20.5085413,8.10460993 24.2305646,16.9292761 15.3171278,16.5331726 C6.40369109,16.1435626 -4.54876714,20.9357654 1.98257468,38.6240587 C4.53944288,45.5331425 9.39425592,52.2409277 16.9095065,53.2084592 C24.4247571,54.1759906 36.7689284,51.7149542 44.284179,55.4617036 C51.8059027,59.2019594 63.99472,42.5656131 54.5699096,32.909779 L54.5699096,32.909779 Z M42.2581037,51.0136562 C35.9144813,48.0526204 25.5381276,49.7928783 19.1621398,49.0850868 C12.786152,48.3772954 7.87308117,43.9227545 5.78227502,38.3383447 C0.422561418,24.0656323 10.785969,20.033169 18.3530043,20.266935 C25.9135664,20.4942074 22.7093898,11.6565543 33.3770324,6.1890275 C44.051148,0.721500717 44.7308218,14.8838237 43.513882,18.020184 C42.1027497,21.6435569 42.2257383,25.0851118 50.4789204,33.1565319 C58.3955022,40.8902901 48.6081992,53.9811856 42.2581037,51.0136562 Z" id="形状" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                    <path d="M39.0409809,24.8838133 C38.7626383,18.1435605 42.1156958,8.03318143 35.4548923,9.75395886 C31.3574301,10.8123993 27.499472,17.7020026 29.1565816,20.7734279 C30.8136911,23.8318663 34.3803604,29.2734191 33.2087322,33.2149734 C32.043577,37.1500343 32.9109703,41.9292501 36.81424,43.344833 C40.7239828,44.760416 49.0742612,44.2863905 49.1843036,40.1565247 C49.287873,36.0266588 39.3257966,31.6305595 39.0409809,24.8838133 L39.0409809,24.8838133 Z" id="形状" fill="url(#linearGradient-10)"></path>
-                    <path d="M23.9975336,27.2474472 C18.2947465,29.9227691 17.5568149,23.5981003 10.5594111,29.6370551 C7.1286765,32.598091 10.0739297,39.6110707 14.4950462,41.0461341 C18.9226357,42.4876911 23.2919674,40.8967836 26.729175,37.9032803 C30.1599096,34.8967899 29.7067937,24.5591383 23.9975336,27.2474472 Z" id="路径" fill="url(#linearGradient-11)"></path>
+                    <path d="M54.5699096,32.909779 C45.1386261,23.2539448 46.0966425,19.578624 47.4818825,15.7279786 C48.8735956,11.8773333 45.5011188,-5.09018156 33.0080666,1.50721419 C20.5085413,8.10460993 24.2305646,16.9292761 15.3171278,16.5331726 C6.40369109,16.1435626 -4.54876714,20.9357654 1.98257468,38.6240587 C4.53944288,45.5331425 9.39425592,52.2409277 16.9095065,53.2084592 C24.4247571,54.1759906 36.7689284,51.7149542 44.284179,55.4617036 C51.8059027,59.2019594 63.99472,42.5656131 54.5699096,32.909779 L54.5699096,32.909779 Z M42.2581037,51.0136562 C35.9144813,48.0526204 25.5381276,49.7928783 19.1621398,49.0850868 C12.786152,48.3772954 7.87308117,43.9227545 5.78227502,38.3383447 C0.422561418,24.0656323 10.785969,20.033169 18.3530043,20.266935 C25.9135664,20.4942074 22.7093898,11.6565543 33.3770324,6.1890275 C44.051148,0.721500717 44.7308218,14.8838237 43.513882,18.020184 C42.1027497,21.6435569 42.2257383,25.0851118 50.4789204,33.1565319 C58.3955022,40.8902901 48.6081992,53.9811856 42.2581037,51.0136562 Z" id="形状" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                    <path d="M39.0409809,24.8838133 C38.7626383,18.1435605 42.1156958,8.03318143 35.4548923,9.75395886 C31.3574301,10.8123993 27.499472,17.7020026 29.1565816,20.7734279 C30.8136911,23.8318663 34.3803604,29.2734191 33.2087322,33.2149734 C32.043577,37.1500343 32.9109703,41.9292501 36.81424,43.344833 C40.7239828,44.760416 49.0742612,44.2863905 49.1843036,40.1565247 C49.287873,36.0266588 39.3257966,31.6305595 39.0409809,24.8838133 L39.0409809,24.8838133 Z" id="形状" fill="url(#linearGradient-2)"></path>
+                    <path d="M23.9975336,27.2474472 C18.2947465,29.9227691 17.5568149,23.5981003 10.5594111,29.6370551 C7.1286765,32.598091 10.0739297,39.6110707 14.4950462,41.0461341 C18.9226357,42.4876911 23.2919674,40.8967836 26.729175,37.9032803 C30.1599096,34.8967899 29.7067937,24.5591383 23.9975336,27.2474472 Z" id="路径" fill="url(#linearGradient-3)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-histogram.svg b/examples/sites/demos/pc/overviewimage/chart-histogram.svg
index 0b82411d47..9b7f25e5db 100644
--- a/examples/sites/demos/pc/overviewimage/chart-histogram.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-histogram.svg
@@ -2,82 +2,40 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>chart-histogram 柱状图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="49.2449784%" y1="86.8386573%" x2="60.0810628%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="49.2449784%" y1="86.8386573%" x2="60.0810628%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.8050884%" y1="86.8386573%" x2="52.6024637%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="49.8050884%" y1="86.8386573%" x2="52.6024637%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.64056%" y1="86.8386573%" x2="54.7992497%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.64056%" y1="86.8386573%" x2="54.7992497%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.7468289%" y1="86.8386573%" x2="53.3803447%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="49.7468289%" y1="86.8386573%" x2="53.3803447%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.1136996%" x2="128.792906%" y2="49.7104176%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="50.1136996%" x2="128.792906%" y2="49.7104176%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1088.000000, -609.000000)">
             <g id="编组-25备份-4" transform="translate(989.000000, 576.000000)">
                 <g id="chart-histogram-柱状图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="图表-(3)" transform="translate(26.000000, 46.189995)">
-                        <path d="M17.5769231,19.8699645 C19.5524031,19.8699645 21.1538462,21.4714075 21.1538462,23.4468875 L21.1538462,39.8699645 L21.1538462,39.8699645 L14,39.8699645 L14,23.4468875 C14,21.4714075 15.601443,19.8699645 17.5769231,19.8699645 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                        <path d="M40.5769231,19.8699645 C42.5524031,19.8699645 44.1538462,21.4714075 44.1538462,23.4468875 L44.1538462,39.8699645 L44.1538462,39.8699645 L37,39.8699645 L37,23.4468875 C37,21.4714075 38.601443,19.8699645 40.5769231,19.8699645 Z" id="矩形备份-12" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M63.5769231,19.8699645 C65.5524031,19.8699645 67.1538462,21.4714075 67.1538462,23.4468875 L67.1538462,39.8699645 L67.1538462,39.8699645 L60,39.8699645 L60,23.4468875 C60,21.4714075 61.601443,19.8699645 63.5769231,19.8699645 Z" id="矩形备份-13" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M8.57692308,0 C10.5524031,-3.62889801e-16 12.1538462,1.60144301 12.1538462,3.57692308 L12.1538462,39.3632379 L12.1538462,39.3632379 L5,39.3632379 L5,3.57692308 C5,1.60144301 6.60144301,3.62889801e-16 8.57692308,0 Z" id="矩形备份-10" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <path d="M31.5769231,10.8699645 C33.5524031,10.8699645 35.1538462,12.4714075 35.1538462,14.4468875 L35.1538462,39.8565113 L35.1538462,39.8565113 L28,39.8565113 L28,14.4468875 C28,12.4714075 29.601443,10.8699645 31.5769231,10.8699645 Z" id="矩形备份-11" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <path d="M54.5769231,4.86996447 C56.5524031,4.86996447 58.1538462,6.47140748 58.1538462,8.44688754 L58.1538462,39.4083998 L58.1538462,39.4083998 L51,39.4083998 L51,8.44688754 C51,6.47140748 52.601443,4.86996447 54.5769231,4.86996447 Z" id="矩形备份-14" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
-                        <rect id="矩形" fill="url(#linearGradient-13)" x="0" y="35.8699645" width="72" height="4" rx="2"></rect>
+                        <path d="M17.5769231,19.8699645 C19.5524031,19.8699645 21.1538462,21.4714075 21.1538462,23.4468875 L21.1538462,39.8699645 L21.1538462,39.8699645 L14,39.8699645 L14,23.4468875 C14,21.4714075 15.601443,19.8699645 17.5769231,19.8699645 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                        <path d="M40.5769231,19.8699645 C42.5524031,19.8699645 44.1538462,21.4714075 44.1538462,23.4468875 L44.1538462,39.8699645 L44.1538462,39.8699645 L37,39.8699645 L37,23.4468875 C37,21.4714075 38.601443,19.8699645 40.5769231,19.8699645 Z" id="矩形备份-12" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M63.5769231,19.8699645 C65.5524031,19.8699645 67.1538462,21.4714075 67.1538462,23.4468875 L67.1538462,39.8699645 L67.1538462,39.8699645 L60,39.8699645 L60,23.4468875 C60,21.4714075 61.601443,19.8699645 63.5769231,19.8699645 Z" id="矩形备份-13" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M8.57692308,0 C10.5524031,-3.62889801e-16 12.1538462,1.60144301 12.1538462,3.57692308 L12.1538462,39.3632379 L12.1538462,39.3632379 L5,39.3632379 L5,3.57692308 C5,1.60144301 6.60144301,3.62889801e-16 8.57692308,0 Z" id="矩形备份-10" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                        <path d="M31.5769231,10.8699645 C33.5524031,10.8699645 35.1538462,12.4714075 35.1538462,14.4468875 L35.1538462,39.8565113 L35.1538462,39.8565113 L28,39.8565113 L28,14.4468875 C28,12.4714075 29.601443,10.8699645 31.5769231,10.8699645 Z" id="矩形备份-11" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
+                        <path d="M54.5769231,4.86996447 C56.5524031,4.86996447 58.1538462,6.47140748 58.1538462,8.44688754 L58.1538462,39.4083998 L58.1538462,39.4083998 L51,39.4083998 L51,8.44688754 C51,6.47140748 52.601443,4.86996447 54.5769231,4.86996447 Z" id="矩形备份-14" fill="url(#linearGradient-4)" opacity="0.604724702"></path>
+                        <rect id="矩形" fill="url(#linearGradient-5)" x="0" y="35.8699645" width="72" height="4" rx="2"></rect>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-line.svg b/examples/sites/demos/pc/overviewimage/chart-line.svg
index 24baa298bf..b768ca060d 100644
--- a/examples/sites/demos/pc/overviewimage/chart-line.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-line.svg
@@ -2,76 +2,34 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>chart-line 折线图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="71.5399436%" x2="128.792906%" y2="-4.86027843%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="71.5399436%" x2="128.792906%" y2="-4.86027843%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="69.1023393%" x2="128.792906%" y2="1.34807812%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="69.1023393%" x2="128.792906%" y2="1.34807812%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="69.1023393%" x2="128.792906%" y2="1.34807812%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="69.1023393%" x2="128.792906%" y2="1.34807812%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -610.000000)">
             <g id="编组-25备份" transform="translate(598.000000, 576.000000)">
                 <g id="chart-line-折线图" transform="translate(98.000000, 34.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-11" transform="translate(31.000000, 42.000000)">
-                        <g id="地球-3" transform="translate(0.000000, 4.927549)" fill="url(#linearGradient-9)" opacity="0.204287574">
+                        <g id="地球-3" transform="translate(0.000000, 4.927549)" fill="url(#linearGradient-1)" opacity="0.204287574">
                             <rect id="矩形" x="0" y="0" width="57.6363965" height="44.0724511" rx="3.76425951"></rect>
                         </g>
-                        <path d="M62.1451684,21.691834 C62.3339987,21.9156208 62.4254873,22.2047033 62.3994969,22.4954518 C62.3735064,22.7862003 62.2321671,23.0547836 62.0065891,23.2420841 L53.1120144,30.624751 C52.8001716,30.8838299 52.3704264,30.9526602 51.9922935,30.8040915 L40.0412135,26.0961285 L34.1255398,30.9955347 C33.6555439,31.3845141 32.9568571,31.3219701 32.5645824,30.8558032 L31.8550563,30.0119127 C31.6663552,29.7879874 31.5750545,29.4988185 31.6012534,29.2080644 C31.6274523,28.9173103 31.769003,28.6488067 31.9947442,28.4616626 L38.9226013,22.7227668 C39.2346636,22.4640622 39.6643884,22.3956574 40.0423221,22.5445266 L51.9911849,27.2513894 L59.8735763,20.7104125 C60.3429851,20.3209043 61.0416084,20.3824579 61.4345337,20.8479435 L62.1451684,21.691834 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M9.69718147,0.238990221 L9.70715918,38.1975609 L64,38.1975609 L64,41.4983062 L8.5996333,41.4983062 C7.3757008,41.4983062 6.38236426,40.5135839 6.38236426,39.2978093 L6.37127793,0.238990221 L9.69718147,0.238990221 Z M48.0565402,0.900739603 C48.5412944,1.27076918 48.6325681,1.96048252 48.260529,2.44218765 L38.3570969,15.2303751 C38.1102458,15.5493731 37.7076725,15.7092688 37.30722,15.6473693 L25.5213265,13.8209569 L17.7165396,25.2888462 C17.4019635,25.7514621 16.7882102,25.9070502 16.2886183,25.650828 L16.1777549,25.5848131 L15.2586969,24.9686739 C14.7515726,24.6285943 14.6180801,23.9450035 14.9604742,23.4415291 L23.5535003,10.8150782 C23.7943002,10.4613838 24.2195076,10.2778349 24.6443967,10.3441718 L36.5200895,12.182687 L45.6219789,0.429833311 C45.8012515,0.198314589 46.0659007,0.0470110239 46.3576399,0.00924592998 C46.6493791,-0.0285191639 46.94428,0.0503516854 47.1773931,0.228487849 L48.0565402,0.900739603 Z" id="形状" stroke="url(#linearGradient-12)" stroke-width="0.941064877" fill="url(#linearGradient-11)"></path>
+                        <path d="M62.1451684,21.691834 C62.3339987,21.9156208 62.4254873,22.2047033 62.3994969,22.4954518 C62.3735064,22.7862003 62.2321671,23.0547836 62.0065891,23.2420841 L53.1120144,30.624751 C52.8001716,30.8838299 52.3704264,30.9526602 51.9922935,30.8040915 L40.0412135,26.0961285 L34.1255398,30.9955347 C33.6555439,31.3845141 32.9568571,31.3219701 32.5645824,30.8558032 L31.8550563,30.0119127 C31.6663552,29.7879874 31.5750545,29.4988185 31.6012534,29.2080644 C31.6274523,28.9173103 31.769003,28.6488067 31.9947442,28.4616626 L38.9226013,22.7227668 C39.2346636,22.4640622 39.6643884,22.3956574 40.0423221,22.5445266 L51.9911849,27.2513894 L59.8735763,20.7104125 C60.3429851,20.3209043 61.0416084,20.3824579 61.4345337,20.8479435 L62.1451684,21.691834 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M9.69718147,0.238990221 L9.70715918,38.1975609 L64,38.1975609 L64,41.4983062 L8.5996333,41.4983062 C7.3757008,41.4983062 6.38236426,40.5135839 6.38236426,39.2978093 L6.37127793,0.238990221 L9.69718147,0.238990221 Z M48.0565402,0.900739603 C48.5412944,1.27076918 48.6325681,1.96048252 48.260529,2.44218765 L38.3570969,15.2303751 C38.1102458,15.5493731 37.7076725,15.7092688 37.30722,15.6473693 L25.5213265,13.8209569 L17.7165396,25.2888462 C17.4019635,25.7514621 16.7882102,25.9070502 16.2886183,25.650828 L16.1777549,25.5848131 L15.2586969,24.9686739 C14.7515726,24.6285943 14.6180801,23.9450035 14.9604742,23.4415291 L23.5535003,10.8150782 C23.7943002,10.4613838 24.2195076,10.2778349 24.6443967,10.3441718 L36.5200895,12.182687 L45.6219789,0.429833311 C45.8012515,0.198314589 46.0659007,0.0470110239 46.3576399,0.00924592998 C46.6493791,-0.0285191639 46.94428,0.0503516854 47.1773931,0.228487849 L48.0565402,0.900739603 Z" id="形状" stroke="url(#linearGradient-4)" stroke-width="0.941064877" fill="url(#linearGradient-3)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-liquidfill.svg b/examples/sites/demos/pc/overviewimage/chart-liquidfill.svg
index 3d8e02ed9b..4a68afe4fb 100644
--- a/examples/sites/demos/pc/overviewimage/chart-liquidfill.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-liquidfill.svg
@@ -2,70 +2,28 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Treemap 树图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="54.6885246%" x2="128.792906%" y2="38.058754%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="54.6885246%" x2="128.792906%" y2="38.058754%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="68.1285804%" x2="128.792906%" y2="3.82815352%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="68.1285804%" x2="128.792906%" y2="3.82815352%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1869.000000, -1434.000000)">
             <g id="编组-17备份-5" transform="translate(1771.000000, 1401.000000)">
                 <g id="Treemap-树图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="水球图" transform="translate(37.000000, 37.000000)">
-                        <path d="M12.484994,28.3409364 L44.8835534,28.3409364 L44.8835534,22.6290516 L39.6710684,22.6290516 C38.3601441,23.0348139 37.0804322,23.1596639 35.6446579,23.1596639 C31.7430972,23.1596639 28.3721489,21.8487395 26.4057623,19.9135654 C26.4057623,19.7887155 26.2809124,19.7887155 26.1560624,19.6638655 C26.0312125,19.5390156 25.9063625,19.2581032 25.6254502,19.0084034 C24.0648259,17.3229292 21.4741897,16.1368547 18.4777911,16.1368547 C15.1068427,16.1368547 12.1104442,17.697479 10.6746699,19.7887155 L10.6746699,25.6566627 C10.9243697,26.1872749 11.3301321,26.5618247 11.8607443,27.092437 C12.0792317,27.5606242 12.3601441,27.9663866 12.484994,28.3409364 L12.484994,28.3409364 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                        <path d="M42.7923169,20.5378151 C41.4813926,20.9435774 40.4513806,21.7238896 39.7959184,22.6290516 C39.5462185,22.7539016 39.3901561,22.8787515 39.1404562,23.0348139 C37.0492197,24.7202881 33.9279712,25.9063625 30.5570228,25.9063625 C26.4057623,25.9063625 22.8787515,24.3457383 20.787515,22.0048019 C20.787515,21.879952 20.6626651,21.755102 20.5378151,21.755102 C20.4129652,21.5054022 20.1320528,21.2244898 20.0072029,21.0996399 C18.3217287,19.0084034 15.57503,17.7286915 12.4537815,17.7286915 C9.9879952,17.7286915 7.8967587,18.5090036 6.21128451,19.819928 C5.55582233,21.6302521 5.18127251,23.8463385 5.18127251,26.062425 C5.18127251,29.0588235 5.83673469,31.9303721 6.99159664,34.3961585 C9.58223289,39.6086435 13.8895558,43.635054 19.0708283,45.5702281 C19.1956783,45.5702281 19.3205282,45.695078 19.4765906,45.695078 C19.7262905,45.819928 19.8511405,45.819928 20.1320528,45.9447779 C21.942377,46.4753902 24.0336134,46.84994 26,46.84994 C28.0912365,46.84994 30.1512605,46.6002401 32.1176471,45.9447779 C32.242497,45.9447779 32.3673469,45.819928 32.5234094,45.819928 C32.7731092,45.695078 33.1788715,45.5702281 33.4285714,45.4141657 C38.1104442,43.4477791 42.0120048,39.8271309 44.6026411,35.1452581 C45.9135654,32.4297719 46.6938776,29.3085234 46.6938776,26.0312125 C46.6938776,24.0648259 46.4441777,22.2545018 45.9135654,20.4441777 C45.1332533,20.1632653 43.9471789,20.1632653 42.7923169,20.5378151 L42.7923169,20.5378151 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M26,0 C11.7046819,0 0,11.7046819 0,26 C0,40.2953181 11.7046819,52 26,52 C40.2953181,52 52,40.2953181 52,26 C52,11.7046819 40.2953181,0 26,0 Z M26,49.4093637 C13.1092437,49.4093637 2.59063625,38.8595438 2.59063625,26 C2.59063625,13.1404562 13.1092437,2.59063625 26,2.59063625 C38.8907563,2.59063625 49.4093637,13.1092437 49.4093637,26 C49.4093637,38.8907563 38.8907563,49.4093637 26,49.4093637 Z" id="形状" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
+                        <path d="M12.484994,28.3409364 L44.8835534,28.3409364 L44.8835534,22.6290516 L39.6710684,22.6290516 C38.3601441,23.0348139 37.0804322,23.1596639 35.6446579,23.1596639 C31.7430972,23.1596639 28.3721489,21.8487395 26.4057623,19.9135654 C26.4057623,19.7887155 26.2809124,19.7887155 26.1560624,19.6638655 C26.0312125,19.5390156 25.9063625,19.2581032 25.6254502,19.0084034 C24.0648259,17.3229292 21.4741897,16.1368547 18.4777911,16.1368547 C15.1068427,16.1368547 12.1104442,17.697479 10.6746699,19.7887155 L10.6746699,25.6566627 C10.9243697,26.1872749 11.3301321,26.5618247 11.8607443,27.092437 C12.0792317,27.5606242 12.3601441,27.9663866 12.484994,28.3409364 L12.484994,28.3409364 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                        <path d="M42.7923169,20.5378151 C41.4813926,20.9435774 40.4513806,21.7238896 39.7959184,22.6290516 C39.5462185,22.7539016 39.3901561,22.8787515 39.1404562,23.0348139 C37.0492197,24.7202881 33.9279712,25.9063625 30.5570228,25.9063625 C26.4057623,25.9063625 22.8787515,24.3457383 20.787515,22.0048019 C20.787515,21.879952 20.6626651,21.755102 20.5378151,21.755102 C20.4129652,21.5054022 20.1320528,21.2244898 20.0072029,21.0996399 C18.3217287,19.0084034 15.57503,17.7286915 12.4537815,17.7286915 C9.9879952,17.7286915 7.8967587,18.5090036 6.21128451,19.819928 C5.55582233,21.6302521 5.18127251,23.8463385 5.18127251,26.062425 C5.18127251,29.0588235 5.83673469,31.9303721 6.99159664,34.3961585 C9.58223289,39.6086435 13.8895558,43.635054 19.0708283,45.5702281 C19.1956783,45.5702281 19.3205282,45.695078 19.4765906,45.695078 C19.7262905,45.819928 19.8511405,45.819928 20.1320528,45.9447779 C21.942377,46.4753902 24.0336134,46.84994 26,46.84994 C28.0912365,46.84994 30.1512605,46.6002401 32.1176471,45.9447779 C32.242497,45.9447779 32.3673469,45.819928 32.5234094,45.819928 C32.7731092,45.695078 33.1788715,45.5702281 33.4285714,45.4141657 C38.1104442,43.4477791 42.0120048,39.8271309 44.6026411,35.1452581 C45.9135654,32.4297719 46.6938776,29.3085234 46.6938776,26.0312125 C46.6938776,24.0648259 46.4441777,22.2545018 45.9135654,20.4441777 C45.1332533,20.1632653 43.9471789,20.1632653 42.7923169,20.5378151 L42.7923169,20.5378151 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M26,0 C11.7046819,0 0,11.7046819 0,26 C0,40.2953181 11.7046819,52 26,52 C40.2953181,52 52,40.2953181 52,26 C52,11.7046819 40.2953181,0 26,0 Z M26,49.4093637 C13.1092437,49.4093637 2.59063625,38.8595438 2.59063625,26 C2.59063625,13.1404562 13.1092437,2.59063625 26,2.59063625 C38.8907563,2.59063625 49.4093637,13.1092437 49.4093637,26 C49.4093637,38.8907563 38.8907563,49.4093637 26,49.4093637 Z" id="形状" fill="url(#linearGradient-3)" opacity="0.303770519"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-map.svg b/examples/sites/demos/pc/overviewimage/chart-map.svg
index 43850e9e90..84b236a879 100644
--- a/examples/sites/demos/pc/overviewimage/chart-map.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-map.svg
@@ -2,69 +2,27 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Map 地图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="71.9824922%" x2="128.792906%" y2="-5.98740936%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="71.9824922%" x2="128.792906%" y2="-5.98740936%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4141053%" y1="86.8386573%" x2="97.8789325%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="46.4141053%" y1="86.8386573%" x2="97.8789325%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4141053%" y1="86.8386573%" x2="97.8789325%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="46.4141053%" y1="86.8386573%" x2="97.8789325%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -1159.000000)">
             <g id="编组-25备份-13" transform="translate(598.000000, 1126.000000)">
                 <g id="Map-地图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="Customer-Map" transform="translate(38.000000, 37.000000)">
-                        <path d="M0,18.832391 L0,53.9968195 L14.5996218,50.540943 L14.5996218,31.5077241 C11.3613223,27.5611369 8.13938694,22.5381664 6.95343467,17.1862379 L0,18.832391 Z M43.0824757,17.0149435 C41.9283428,22.4313914 38.6732245,27.51979 35.4003782,31.5090872 L35.4003782,54 L50,50.5441236 L50,15.3760602 L43.0824757,17.0149435 Z M28.1892069,38.9274535 L25.0009091,41.6945174 L21.8121568,38.9274535 C20.3831265,37.6809016 19.0113655,36.3702368 17.7010983,34.9994952 L17.7010983,50.5418518 L32.30072,53.9977282 L32.30072,34.9990408 C30.9903365,36.3696799 29.6184219,37.680195 28.1892069,38.9265448 L28.1892069,38.9274535 Z" id="形状" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M25.0009091,0 C17.4247245,0.255805723 11.3640496,5.9684976 11.3640496,12.9974758 C11.3640496,22.3000808 21.3189571,31.9366418 24.5313466,34.8068457 C24.7977231,35.0480168 25.2036407,35.0480168 25.4700171,34.8068457 C28.6833158,31.9384592 38.6377687,22.3018983 38.6377687,12.9974758 C38.6377687,5.9684976 32.5766392,0.254442691 25.0009091,0 Z M25.0009091,18.8015624 C22.6232201,18.8129003 20.4732931,17.3900483 19.5554308,15.1976001 C18.6375685,13.005152 19.1329298,10.4758323 20.810115,8.79117071 C22.4873003,7.10650916 25.0152824,6.59900835 27.2131565,7.50573885 C29.4110306,8.41246935 30.8450011,10.5544693 30.8452299,12.9311389 C30.8530046,16.1652945 28.2364885,18.7934741 25.0009091,18.8015624 L25.0009091,18.8015624 Z" id="形状" stroke="url(#linearGradient-11)" stroke-width="0.888817095" fill="url(#linearGradient-10)"></path>
+                        <path d="M0,18.832391 L0,53.9968195 L14.5996218,50.540943 L14.5996218,31.5077241 C11.3613223,27.5611369 8.13938694,22.5381664 6.95343467,17.1862379 L0,18.832391 Z M43.0824757,17.0149435 C41.9283428,22.4313914 38.6732245,27.51979 35.4003782,31.5090872 L35.4003782,54 L50,50.5441236 L50,15.3760602 L43.0824757,17.0149435 Z M28.1892069,38.9274535 L25.0009091,41.6945174 L21.8121568,38.9274535 C20.3831265,37.6809016 19.0113655,36.3702368 17.7010983,34.9994952 L17.7010983,50.5418518 L32.30072,53.9977282 L32.30072,34.9990408 C30.9903365,36.3696799 29.6184219,37.680195 28.1892069,38.9265448 L28.1892069,38.9274535 Z" id="形状" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M25.0009091,0 C17.4247245,0.255805723 11.3640496,5.9684976 11.3640496,12.9974758 C11.3640496,22.3000808 21.3189571,31.9366418 24.5313466,34.8068457 C24.7977231,35.0480168 25.2036407,35.0480168 25.4700171,34.8068457 C28.6833158,31.9384592 38.6377687,22.3018983 38.6377687,12.9974758 C38.6377687,5.9684976 32.5766392,0.254442691 25.0009091,0 Z M25.0009091,18.8015624 C22.6232201,18.8129003 20.4732931,17.3900483 19.5554308,15.1976001 C18.6375685,13.005152 19.1329298,10.4758323 20.810115,8.79117071 C22.4873003,7.10650916 25.0152824,6.59900835 27.2131565,7.50573885 C29.4110306,8.41246935 30.8450011,10.5544693 30.8452299,12.9311389 C30.8530046,16.1652945 28.2364885,18.7934741 25.0009091,18.8015624 L25.0009091,18.8015624 Z" id="形状" stroke="url(#linearGradient-3)" stroke-width="0.888817095" fill="url(#linearGradient-2)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-pie.svg b/examples/sites/demos/pc/overviewimage/chart-pie.svg
index be3a007644..c2fb1c0c30 100644
--- a/examples/sites/demos/pc/overviewimage/chart-pie.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-pie.svg
@@ -2,74 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Pie Chart 饼图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="62.5593211%" x2="128.792906%" y2="18.0125507%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="62.5593211%" x2="128.792906%" y2="18.0125507%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4177118%" y1="86.8386573%" x2="97.8307794%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="46.4177118%" y1="86.8386573%" x2="97.8307794%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.9574541%" y1="86.8386573%" x2="77.2721105%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="47.9574541%" y1="86.8386573%" x2="77.2721105%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.9574541%" y1="86.8386573%" x2="77.2721105%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="47.9574541%" y1="86.8386573%" x2="77.2721105%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1869.000000, -609.000000)">
             <g id="编组-25备份-5" transform="translate(1770.000000, 576.000000)">
                 <g id="Pie-Chart-饼图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="chart-(1)" transform="translate(38.000000, 37.000000)">
-                        <path d="M48,34.1666667 C45.0782609,43.3333334 36.5217392,50 26.3652174,50 C20.4521739,50 15.0956522,47.7777778 11.1304348,44.0972223 L26.7130435,28.4722222 L48,34.1666667 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M47.5826088,30.5555556 L28.5217392,25.4166667 L28.5217392,5.55555557 C39.3739131,6.31944449 48,15.3472223 48,26.4583333 C48,27.8472222 47.8608696,29.2361111 47.5826088,30.5555556 L47.5826088,30.5555556 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.204287574"></path>
-                        <path d="M6.67826086,43.75 C2.5043478,39.0972222 0,33.0555555 0,26.3888889 C0,12.2222222 11.4086956,0.624999976 25.7391305,0 L25.7391305,25 L6.67826086,43.75 Z" id="路径" stroke="url(#linearGradient-12)" stroke-width="1.04347826" fill="url(#linearGradient-11)"></path>
+                        <path d="M48,34.1666667 C45.0782609,43.3333334 36.5217392,50 26.3652174,50 C20.4521739,50 15.0956522,47.7777778 11.1304348,44.0972223 L26.7130435,28.4722222 L48,34.1666667 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M47.5826088,30.5555556 L28.5217392,25.4166667 L28.5217392,5.55555557 C39.3739131,6.31944449 48,15.3472223 48,26.4583333 C48,27.8472222 47.8608696,29.2361111 47.5826088,30.5555556 L47.5826088,30.5555556 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
+                        <path d="M6.67826086,43.75 C2.5043478,39.0972222 0,33.0555555 0,26.3888889 C0,12.2222222 11.4086956,0.624999976 25.7391305,0 L25.7391305,25 L6.67826086,43.75 Z" id="路径" stroke="url(#linearGradient-4)" stroke-width="1.04347826" fill="url(#linearGradient-3)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-question.svg b/examples/sites/demos/pc/overviewimage/chart-question.svg
index 08dcaab7b3..1c9dd65fe8 100644
--- a/examples/sites/demos/pc/overviewimage/chart-question.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-question.svg
@@ -2,101 +2,59 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>chart-question 常见问题示例</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="66.9233409%" x2="128.792906%" y2="6.89778899%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="66.9233409%" x2="128.792906%" y2="6.89778899%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.4202665%" x2="128.792906%" y2="15.8198012%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="63.4202665%" x2="128.792906%" y2="15.8198012%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.4202665%" x2="128.792906%" y2="15.8198012%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="63.4202665%" x2="128.792906%" y2="15.8198012%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.8544011%" x2="128.792906%" y2="37.6362817%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="54.8544011%" x2="128.792906%" y2="37.6362817%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.691571%" x2="128.792906%" y2="45.6917224%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="51.691571%" x2="128.792906%" y2="45.6917224%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.7400654%" x2="128.792906%" y2="43.0213025%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="52.7400654%" x2="128.792906%" y2="43.0213025%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M42.6829268,0 C44.8920658,3.51840692e-15 46.6829268,1.790861 46.6829268,4 L46.6829268,17 C46.6829268,19.209139 44.8920658,21 42.6829268,21 L15.778,21 L11.6213203,25.1568542 L7.464,21 L4,21 C1.790861,21 2.23265109e-15,19.209139 0,17 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L42.6829268,0 Z" id="path-16"></path>
-        <filter x="-8.6%" y="-8.0%" width="117.1%" height="131.8%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M42.6829268,0 C44.8920658,3.51840692e-15 46.6829268,1.790861 46.6829268,4 L46.6829268,17 C46.6829268,19.209139 44.8920658,21 42.6829268,21 L15.778,21 L11.6213203,25.1568542 L7.464,21 L4,21 C1.790861,21 2.23265109e-15,19.209139 0,17 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L42.6829268,0 Z" id="path-8"></path>
+        <filter x="-8.6%" y="-8.0%" width="117.1%" height="131.8%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1869.000000, -334.000000)">
             <g id="编组-25备份-3" transform="translate(1771.000000, 301.000000)">
                 <g id="chart-question-常见问题示例" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="图表-(3)" transform="translate(34.000000, 53.614286)">
-                        <path d="M42.1357143,28.3928571 L9.72857144,28.3928571 C7.68571428,28.3928571 6.01428571,26.5449484 6.01428571,24.2863932 L6.01428571,5.49932103 C6.01428571,3.24076588 7.68571428,1.39285714 9.72857144,1.39285714 L42.1357143,1.39285714 C44.1785715,1.39285714 45.85,3.24076588 45.85,5.49932103 L45.85,24.2863932 C45.85,26.5449484 44.2714286,28.3928571 42.1357143,28.3928571 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M50.6071429,31.3857143 L1.39285714,31.3857143 C0.650000018,31.3857143 0,30.7357143 0,29.9928572 L0,1.39285714 C0,0.650000018 0.650000018,0 1.39285714,0 C2.13571427,0 2.78571428,0.650000018 2.78571428,1.39285714 L2.78571428,28.6 L50.6071429,28.6 C51.35,28.6 52,29.25 52,29.9928572 C52,30.7357143 51.35,31.3857143 50.6071429,31.3857143 Z" id="路径" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)"></path>
-                        <path d="M24.6142857,23.6428571 L19.1357143,23.6428571 C18.3928572,23.6428571 17.7428572,22.9428571 17.7428572,22.1428571 C17.7428572,21.3428572 18.3928572,20.6428571 19.1357143,20.6428571 L24.6142857,20.6428571 C25.3571428,20.6428571 26.0071428,21.3428572 26.0071428,22.1428571 C26.0071428,22.9428571 25.3571428,23.6428571 24.6142857,23.6428571 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.604724702" transform="translate(21.875000, 22.142857) rotate(-90.000000) translate(-21.875000, -22.142857) "></path>
-                        <circle id="椭圆形" fill="url(#linearGradient-13)" cx="21.5" cy="15.5" r="1.5"></circle>
-                        <path d="M19.0071601,20.775 L7.10377847,20.775 C6.56271568,20.775 6.08928571,20.075 6.08928571,19.275 C6.08928571,18.475 6.56271568,17.775 7.10377847,17.775 L19.074793,17.775 C19.6158557,17.775 20.0892857,18.475 20.0892857,19.275 C20.0892857,20.075 19.6158557,20.775 19.0071601,20.775 L19.0071601,20.775 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.604724702" transform="translate(13.089286, 19.275000) rotate(-90.000000) translate(-13.089286, -19.275000) "></path>
-                        <path d="M42.1857143,23.6428571 L36.7071429,23.6428571 C35.9642857,23.6428571 35.3142857,22.9428571 35.3142857,22.1428571 C35.3142857,21.3428572 35.9642857,20.6428571 36.7071429,20.6428571 L42.1857143,20.6428571 C42.9285714,20.6428571 43.5785714,21.3428572 43.5785714,22.1428571 C43.5785714,22.9428571 42.9285714,23.6428571 42.1857143,23.6428571 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.303770519" transform="translate(39.446429, 22.142857) rotate(-90.000000) translate(-39.446429, -22.142857) "></path>
-                        <path d="M35.3104727,22.275 L25.9578157,22.275 C25.532695,22.275 25.1607143,21.575 25.1607143,20.775 C25.1607143,19.975 25.532695,19.275 25.9578157,19.275 L35.3636128,19.275 C35.7887336,19.275 36.1607143,19.975 36.1607143,20.775 C36.1607143,21.575 35.7887336,22.275 35.3104727,22.275 L35.3104727,22.275 Z" id="路径" fill="url(#linearGradient-15)" opacity="0.303770519" transform="translate(30.660714, 20.775000) rotate(-90.000000) translate(-30.660714, -20.775000) "></path>
+                        <path d="M42.1357143,28.3928571 L9.72857144,28.3928571 C7.68571428,28.3928571 6.01428571,26.5449484 6.01428571,24.2863932 L6.01428571,5.49932103 C6.01428571,3.24076588 7.68571428,1.39285714 9.72857144,1.39285714 L42.1357143,1.39285714 C44.1785715,1.39285714 45.85,3.24076588 45.85,5.49932103 L45.85,24.2863932 C45.85,26.5449484 44.2714286,28.3928571 42.1357143,28.3928571 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M50.6071429,31.3857143 L1.39285714,31.3857143 C0.650000018,31.3857143 0,30.7357143 0,29.9928572 L0,1.39285714 C0,0.650000018 0.650000018,0 1.39285714,0 C2.13571427,0 2.78571428,0.650000018 2.78571428,1.39285714 L2.78571428,28.6 L50.6071429,28.6 C51.35,28.6 52,29.25 52,29.9928572 C52,30.7357143 51.35,31.3857143 50.6071429,31.3857143 Z" id="路径" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)"></path>
+                        <path d="M24.6142857,23.6428571 L19.1357143,23.6428571 C18.3928572,23.6428571 17.7428572,22.9428571 17.7428572,22.1428571 C17.7428572,21.3428572 18.3928572,20.6428571 19.1357143,20.6428571 L24.6142857,20.6428571 C25.3571428,20.6428571 26.0071428,21.3428572 26.0071428,22.1428571 C26.0071428,22.9428571 25.3571428,23.6428571 24.6142857,23.6428571 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.604724702" transform="translate(21.875000, 22.142857) rotate(-90.000000) translate(-21.875000, -22.142857) "></path>
+                        <circle id="椭圆形" fill="url(#linearGradient-5)" cx="21.5" cy="15.5" r="1.5"></circle>
+                        <path d="M19.0071601,20.775 L7.10377847,20.775 C6.56271568,20.775 6.08928571,20.075 6.08928571,19.275 C6.08928571,18.475 6.56271568,17.775 7.10377847,17.775 L19.074793,17.775 C19.6158557,17.775 20.0892857,18.475 20.0892857,19.275 C20.0892857,20.075 19.6158557,20.775 19.0071601,20.775 L19.0071601,20.775 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.604724702" transform="translate(13.089286, 19.275000) rotate(-90.000000) translate(-13.089286, -19.275000) "></path>
+                        <path d="M42.1857143,23.6428571 L36.7071429,23.6428571 C35.9642857,23.6428571 35.3142857,22.9428571 35.3142857,22.1428571 C35.3142857,21.3428572 35.9642857,20.6428571 36.7071429,20.6428571 L42.1857143,20.6428571 C42.9285714,20.6428571 43.5785714,21.3428572 43.5785714,22.1428571 C43.5785714,22.9428571 42.9285714,23.6428571 42.1857143,23.6428571 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.303770519" transform="translate(39.446429, 22.142857) rotate(-90.000000) translate(-39.446429, -22.142857) "></path>
+                        <path d="M35.3104727,22.275 L25.9578157,22.275 C25.532695,22.275 25.1607143,21.575 25.1607143,20.775 C25.1607143,19.975 25.532695,19.275 25.9578157,19.275 L35.3636128,19.275 C35.7887336,19.275 36.1607143,19.975 36.1607143,20.775 C36.1607143,21.575 35.7887336,22.275 35.3104727,22.275 L35.3104727,22.275 Z" id="路径" fill="url(#linearGradient-7)" opacity="0.303770519" transform="translate(30.660714, 20.775000) rotate(-90.000000) translate(-30.660714, -20.775000) "></path>
                     </g>
                     <g id="编组-8" transform="translate(44.000000, 37.000000)">
                         <g id="形状结合">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                         </g>
                         <path d="M9.41463415,6 L25.5327343,6 C26.3140151,6 26.9473684,6.63335328 26.9473684,7.41463415 C26.9473684,8.19591501 26.3140151,8.82926829 25.5327343,8.82926829 L9.41463415,8.82926829 C8.63335328,8.82926829 8,8.19591501 8,7.41463415 C8,6.63335328 8.63335328,6 9.41463415,6 Z" id="矩形" fill="#FFFFFF"></path>
                         <path d="M9.41463415,12 L36.5853659,12 C37.3666467,12 38,12.6333533 38,13.4146341 C38,14.195915 37.3666467,14.8292683 36.5853659,14.8292683 L9.41463415,14.8292683 C8.63335328,14.8292683 8,14.195915 8,13.4146341 C8,12.6333533 8.63335328,12 9.41463415,12 Z" id="矩形" fill="#FFFFFF" opacity="0.6"></path>
diff --git a/examples/sites/demos/pc/overviewimage/chart-radar.svg b/examples/sites/demos/pc/overviewimage/chart-radar.svg
index 920735377c..11fe0666b8 100644
--- a/examples/sites/demos/pc/overviewimage/chart-radar.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-radar.svg
@@ -2,85 +2,43 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Radar chart 雷达图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="82.8591727%" x2="128.792906%" y2="-33.6893259%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="82.8591727%" x2="128.792906%" y2="-33.6893259%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.6450228%" y1="86.8386573%" x2="108.147737%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="45.6450228%" y1="86.8386573%" x2="108.147737%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="77.8895516%" x2="128.792906%" y2="-21.0321527%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="77.8895516%" x2="128.792906%" y2="-21.0321527%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="76.7845619%" x2="128.792906%" y2="-18.2178445%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="76.7845619%" x2="128.792906%" y2="-18.2178445%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.9101501%" y1="86.8386573%" x2="104.607753%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="45.9101501%" y1="86.8386573%" x2="104.607753%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.2918946%" y1="86.8386573%" x2="112.862711%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="45.2918946%" y1="86.8386573%" x2="112.862711%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1869.000000, -884.000000)">
             <g id="编组-25备份-12" transform="translate(1771.000000, 851.000000)">
                 <g id="Radar-chart-雷达图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-4" transform="translate(36.000000, 37.000000)">
-                        <path d="M27,0 L0,19.4780515 L10.3505294,51 L43.6494706,51 L54,19.4780515 L27,0 Z M28.4992941,11.1512317 L41.4005294,22.0064827 L28.4992941,26.1691054 L28.4992941,11.1512317 Z M42.7505294,24.3853491 L34.6505294,36.1316911 L29.2505294,28.6975366 L42.7505294,24.3837748 L42.7505294,24.3853491 Z M32.2507059,37.4699018 L18.2996471,42.3771995 L27.1492941,30.4812928 L32.2507059,37.4699018 L32.2507059,37.4699018 Z M24.7494706,28.9950917 L16.0507059,40.7398592 L12.0007059,25.4260048 L24.7494706,28.9950917 Z M12.9012353,22.7495833 L25.65,12.043897 L25.65,26.3186701 L12.8996471,22.7495833 L12.9012353,22.7495833 Z M28.4992941,4.46017781 L49.2003529,19.3300611 L44.4007059,20.965827 L28.4992941,7.43415447 L28.4992941,4.46017781 Z M25.65,4.46017781 L25.65,8.47481015 L9.59929412,21.8569179 L3.60052941,20.2211521 L25.65,4.46175218 L25.65,4.46017781 Z M11.8498235,46.3918318 L4.19929412,23.3431191 L8.84964706,24.6813299 L13.8001765,43.7154103 L11.8498235,46.3918318 Z M13.9494706,48.1755881 L15.2994706,46.3918318 L33.8992941,39.8487683 L40.0505294,48.1755881 L13.9494706,48.1755881 L13.9494706,48.1755881 Z M42.2994706,46.3918318 L36.45,38.5089831 L46.9498235,23.045564 L46.8005294,22.8959993 L50.2501765,21.7073532 L42.2994706,46.3902575 L42.2994706,46.3918318 Z" id="形状" fill="url(#linearGradient-9)"></path>
-                        <polygon id="路径" fill="url(#linearGradient-10)" opacity="0.204287574" points="28.4992941 11.1512317 41.4005294 22.0064827 28.4992941 26.1691054"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-11)" opacity="0.604724702" points="42.7505294 24.3853491 34.6505294 36.1316911 29.2505294 28.6975366"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-12)" opacity="0.204287574" points="32.2507059 37.4699018 18.2996471 42.3771995 27.1492941 30.4812928"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-13)" opacity="0.204287574" points="24.7494706 28.9950917 16.0507059 40.7398592 12.0007059 25.4260048"></polygon>
-                        <polygon id="路径" fill="url(#linearGradient-14)" opacity="0.604724702" points="12.8996471 22.7495833 25.65 12.043897 25.65 26.3186701"></polygon>
+                        <path d="M27,0 L0,19.4780515 L10.3505294,51 L43.6494706,51 L54,19.4780515 L27,0 Z M28.4992941,11.1512317 L41.4005294,22.0064827 L28.4992941,26.1691054 L28.4992941,11.1512317 Z M42.7505294,24.3853491 L34.6505294,36.1316911 L29.2505294,28.6975366 L42.7505294,24.3837748 L42.7505294,24.3853491 Z M32.2507059,37.4699018 L18.2996471,42.3771995 L27.1492941,30.4812928 L32.2507059,37.4699018 L32.2507059,37.4699018 Z M24.7494706,28.9950917 L16.0507059,40.7398592 L12.0007059,25.4260048 L24.7494706,28.9950917 Z M12.9012353,22.7495833 L25.65,12.043897 L25.65,26.3186701 L12.8996471,22.7495833 L12.9012353,22.7495833 Z M28.4992941,4.46017781 L49.2003529,19.3300611 L44.4007059,20.965827 L28.4992941,7.43415447 L28.4992941,4.46017781 Z M25.65,4.46017781 L25.65,8.47481015 L9.59929412,21.8569179 L3.60052941,20.2211521 L25.65,4.46175218 L25.65,4.46017781 Z M11.8498235,46.3918318 L4.19929412,23.3431191 L8.84964706,24.6813299 L13.8001765,43.7154103 L11.8498235,46.3918318 Z M13.9494706,48.1755881 L15.2994706,46.3918318 L33.8992941,39.8487683 L40.0505294,48.1755881 L13.9494706,48.1755881 L13.9494706,48.1755881 Z M42.2994706,46.3918318 L36.45,38.5089831 L46.9498235,23.045564 L46.8005294,22.8959993 L50.2501765,21.7073532 L42.2994706,46.3902575 L42.2994706,46.3918318 Z" id="形状" fill="url(#linearGradient-1)"></path>
+                        <polygon id="路径" fill="url(#linearGradient-2)" opacity="0.204287574" points="28.4992941 11.1512317 41.4005294 22.0064827 28.4992941 26.1691054"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-3)" opacity="0.604724702" points="42.7505294 24.3853491 34.6505294 36.1316911 29.2505294 28.6975366"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-4)" opacity="0.204287574" points="32.2507059 37.4699018 18.2996471 42.3771995 27.1492941 30.4812928"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-5)" opacity="0.204287574" points="24.7494706 28.9950917 16.0507059 40.7398592 12.0007059 25.4260048"></polygon>
+                        <polygon id="路径" fill="url(#linearGradient-6)" opacity="0.604724702" points="12.8996471 22.7495833 25.65 12.043897 25.65 26.3186701"></polygon>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-ring.svg b/examples/sites/demos/pc/overviewimage/chart-ring.svg
index 959f08d0db..3193891ae0 100644
--- a/examples/sites/demos/pc/overviewimage/chart-ring.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-ring.svg
@@ -2,84 +2,42 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Ring diagram 环图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.5403065%" y1="86.8386573%" x2="96.1938916%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.5403065%" y1="86.8386573%" x2="96.1938916%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.5403065%" y1="86.8386573%" x2="96.1938916%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="46.5403065%" y1="86.8386573%" x2="96.1938916%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.7066298%" x2="128.792906%" y2="15.0904598%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="63.7066298%" x2="128.792906%" y2="15.0904598%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.3944299%" y1="86.8386573%" x2="98.1416386%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="46.3944299%" y1="86.8386573%" x2="98.1416386%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4298892%" y1="86.8386573%" x2="97.6681852%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="46.4298892%" y1="86.8386573%" x2="97.6681852%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4298892%" y1="86.8386573%" x2="97.6681852%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="46.4298892%" y1="86.8386573%" x2="97.6681852%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -884.000000)">
             <g id="编组-25备份-9" transform="translate(598.000000, 851.000000)">
                 <g id="Ring-diagram-环图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="NBcharts-PIE" transform="translate(36.000000, 35.000000)">
                         <path d="M11.9432141,13.1541593 C15.2567071,10.6884796 19.2867415,9.35567349 23.4284757,9.35567349 L23.4284757,14.1752629 C20.3376858,14.1752279 17.3302465,15.1698405 14.8575089,17.0098308 L11.9432141,13.1541593 L11.9432141,13.1541593 Z" id="路径" fill="#F9BE47" fill-rule="nonzero"></path>
-                        <path d="M23.4284757,0 C32.6124471,0 41.2365283,4.38073519 46.6065533,11.7734888 C51.9765784,19.1662424 53.4378291,28.6697482 50.5338102,37.3151074 L36.981143,32.8333011 C38.4333472,28.510561 37.7028167,23.7586548 35.0177803,20.0621489 C32.3327438,16.3656431 28.0205809,14.1752432 23.4284757,14.1752629 L23.4284757,0 Z" id="路径" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)"></path>
-                        <path d="M48.90792,36.7771743 C46.5155207,43.897816 41.2081509,49.6874238 34.2900479,52.7232546 C27.3721388,55.7589151 19.4848127,55.7589151 12.5669035,52.7232546 L17.6511684,41.3151969 C21.3310457,42.9297305 25.526468,42.9296017 29.2062446,41.3148419 C32.8860211,39.7000822 35.7089348,36.6204245 36.981143,32.8328165 L48.90792,36.7776589 L48.90792,36.7771743 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <path d="M13.9534768,49.6119661 C5.02836498,45.69523 -0.515458345,36.6993376 0.0379268453,27.0313782 L9.16616035,27.5460493 C8.82857721,33.4409061 12.2087553,38.9260598 17.65068,41.3142276 L13.9534768,49.6124508 L13.9534768,49.6119661 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
-                        <path d="M2.60496775,27.1762809 C2.95390564,21.0838076 5.99469965,15.4546596 10.9146395,11.7933341 L14.8575089,17.0103154 C11.4876321,19.5178249 9.40478155,23.3732337 9.1656719,27.5460493 L2.60496775,27.1762809 L2.60496775,27.1762809 Z" id="路径" stroke="url(#linearGradient-14)" fill="url(#linearGradient-13)"></path>
+                        <path d="M23.4284757,0 C32.6124471,0 41.2365283,4.38073519 46.6065533,11.7734888 C51.9765784,19.1662424 53.4378291,28.6697482 50.5338102,37.3151074 L36.981143,32.8333011 C38.4333472,28.510561 37.7028167,23.7586548 35.0177803,20.0621489 C32.3327438,16.3656431 28.0205809,14.1752432 23.4284757,14.1752629 L23.4284757,0 Z" id="路径" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)"></path>
+                        <path d="M48.90792,36.7771743 C46.5155207,43.897816 41.2081509,49.6874238 34.2900479,52.7232546 C27.3721388,55.7589151 19.4848127,55.7589151 12.5669035,52.7232546 L17.6511684,41.3151969 C21.3310457,42.9297305 25.526468,42.9296017 29.2062446,41.3148419 C32.8860211,39.7000822 35.7089348,36.6204245 36.981143,32.8328165 L48.90792,36.7776589 L48.90792,36.7771743 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
+                        <path d="M13.9534768,49.6119661 C5.02836498,45.69523 -0.515458345,36.6993376 0.0379268453,27.0313782 L9.16616035,27.5460493 C8.82857721,33.4409061 12.2087553,38.9260598 17.65068,41.3142276 L13.9534768,49.6124508 L13.9534768,49.6119661 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.303770519"></path>
+                        <path d="M2.60496775,27.1762809 C2.95390564,21.0838076 5.99469965,15.4546596 10.9146395,11.7933341 L14.8575089,17.0103154 C11.4876321,19.5178249 9.40478155,23.3732337 9.1656719,27.5460493 L2.60496775,27.1762809 L2.60496775,27.1762809 Z" id="路径" stroke="url(#linearGradient-6)" fill="url(#linearGradient-5)"></path>
                     </g>
                     <g id="编组-6" transform="translate(68.500000, 58.500000)"></g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-sankey.svg b/examples/sites/demos/pc/overviewimage/chart-sankey.svg
index b64d51c50e..d7c588a725 100644
--- a/examples/sites/demos/pc/overviewimage/chart-sankey.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-sankey.svg
@@ -2,77 +2,35 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Sankitu 桑基图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="63.5650455%" x2="128.792906%" y2="15.4510622%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="63.5650455%" x2="128.792906%" y2="15.4510622%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="65.7490709%" x2="128.792906%" y2="9.88854792%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="65.7490709%" x2="128.792906%" y2="9.88854792%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="57.0002885%" x2="128.792906%" y2="32.1709015%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="57.0002885%" x2="128.792906%" y2="32.1709015%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="57.0002885%" x2="128.792906%" y2="32.1709015%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="57.0002885%" x2="128.792906%" y2="32.1709015%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="70.7217447%" x2="128.792906%" y2="-2.77640019%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="70.7217447%" x2="128.792906%" y2="-2.77640019%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1087.000000, -1159.000000)">
             <g id="Sankitu-桑基图" transform="translate(1087.000000, 1159.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M35,57.19674 C56.8684099,57.19674 65.6698877,76.2702805 88.5569135,77.0185747 C89.368623,69.3206975 88.4295865,70.4351781 88.5569135,64.1383624 C67.5002132,64.1383624 64.7945147,44.3165277 35,44.3165277 C35.0636635,49.8968916 35.0954952,49.9924186 35,57.19674 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <path d="M36,68.6068259 C57.2309807,68.6068259 65.7759096,47.6962457 87.9958152,47 C88.0267191,53.4286689 87.8721996,53.3358362 87.9958152,59.3931741 C67.552884,59.3931741 64.9260523,81 36,81 C36.0618078,75.6389078 36.0927117,75.5770194 36,68.6068259 L36,68.6068259 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                <path d="M35,63.6527673 C56.5103027,63.2945413 58.9931789,82.0735406 88.5569135,84 C88.5887452,77.1539045 88.4295865,87.45489 88.5569135,80.9988628 C60.5847663,78.4275967 58.2690067,60.6516301 35,60.6516301 C35.0636635,66.3912055 35.0954952,56.2494314 35,63.6527673 Z" id="路径" stroke="url(#linearGradient-12)" fill="url(#linearGradient-11)"></path>
-                <path d="M35,84 L37.4430865,84 L37.4430865,42 L35,42 L35,84 Z M88.5569135,84 L91,84 L91,42 L88.5569135,42 L88.5569135,84 Z" id="形状" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
+                <g id="编组"></g>
+                <path d="M35,57.19674 C56.8684099,57.19674 65.6698877,76.2702805 88.5569135,77.0185747 C89.368623,69.3206975 88.4295865,70.4351781 88.5569135,64.1383624 C67.5002132,64.1383624 64.7945147,44.3165277 35,44.3165277 C35.0636635,49.8968916 35.0954952,49.9924186 35,57.19674 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                <path d="M36,68.6068259 C57.2309807,68.6068259 65.7759096,47.6962457 87.9958152,47 C88.0267191,53.4286689 87.8721996,53.3358362 87.9958152,59.3931741 C67.552884,59.3931741 64.9260523,81 36,81 C36.0618078,75.6389078 36.0927117,75.5770194 36,68.6068259 L36,68.6068259 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                <path d="M35,63.6527673 C56.5103027,63.2945413 58.9931789,82.0735406 88.5569135,84 C88.5887452,77.1539045 88.4295865,87.45489 88.5569135,80.9988628 C60.5847663,78.4275967 58.2690067,60.6516301 35,60.6516301 C35.0636635,66.3912055 35.0954952,56.2494314 35,63.6527673 Z" id="路径" stroke="url(#linearGradient-4)" fill="url(#linearGradient-3)"></path>
+                <path d="M35,84 L37.4430865,84 L37.4430865,42 L35,42 L35,84 Z M88.5569135,84 L91,84 L91,42 L88.5569135,42 L88.5569135,84 Z" id="形状" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
             </g>
         </g>
     </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-scatter.svg b/examples/sites/demos/pc/overviewimage/chart-scatter.svg
index ba6440e7b5..803c236b1b 100644
--- a/examples/sites/demos/pc/overviewimage/chart-scatter.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-scatter.svg
@@ -2,93 +2,51 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Scatter chart 散点图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.3810513%" x2="128.792906%" y2="-42.6592307%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.3810513%" x2="128.792906%" y2="-42.6592307%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.3978381%" x2="128.792906%" y2="-42.701985%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.3978381%" x2="128.792906%" y2="-42.701985%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.3978381%" x2="128.792906%" y2="-42.701985%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="86.3978381%" x2="128.792906%" y2="-42.701985%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.4469745%" x2="128.792906%" y2="-42.8271311%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="86.4469745%" x2="128.792906%" y2="-42.8271311%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.4683424%" x2="128.792906%" y2="-42.881553%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="86.4683424%" x2="128.792906%" y2="-42.881553%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.1667113%" x2="128.792906%" y2="49.5754016%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="50.1667113%" x2="128.792906%" y2="49.5754016%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1869.000000, -1159.000000)">
             <g id="编组-25备份-6" transform="translate(1771.000000, 1126.000000)">
                 <g id="Scatter-chart-散点图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M57.9509421,69.6348871 C57.9509421,70.8389014 58.5940462,71.9498217 59.6429925,72.5456226 C60.6919389,73.1476297 61.978147,73.1476297 63.0270933,72.5456226 C64.0760397,71.9436155 64.7191437,70.8326951 64.7191437,69.6348871 C64.7191437,67.7792156 63.2019177,66.2710947 61.3350429,66.2710947 C59.4681681,66.2710947 57.9509421,67.7792156 57.9509421,69.6348871 L57.9509421,69.6348871 Z" id="路径" fill="url(#linearGradient-9)"></path>
-                    <path d="M41.311406,69.8831375 C38.6765526,69.8831375 36.5349537,72.0118843 36.5349537,74.6309257 C36.5349537,77.249967 38.6765526,79.3787139 41.311406,79.3787139 C43.9462593,79.3787139 46.0878582,77.249967 46.0878582,74.6309257 C46.0878582,72.0118843 43.9462593,69.8831375 41.311406,69.8831375 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                    <path d="M36.1698071,53.6824244 C36.1698071,55.4822395 37.6370833,56.9407104 39.4477645,56.9407104 C41.2584458,56.9407104 42.7257219,55.4822395 42.7257219,53.6824244 C42.7257219,51.8826093 41.2584458,50.4241384 39.4477645,50.4241384 C37.6370833,50.4241384 36.1698071,51.8826093 36.1698071,53.6824244 Z" id="路径" fill="url(#linearGradient-11)"></path>
-                    <path d="M67.5038466,56.8624059 C67.5038466,59.4814472 69.6454454,61.6101941 72.2802988,61.6101941 C74.9213959,61.6101941 77.056751,59.4814472 77.056751,56.8624059 C77.056751,54.2371583 74.9151522,52.1146177 72.2802988,52.1146177 C69.6392017,52.1146177 67.5038466,54.2433646 67.5038466,56.8624059 Z" id="路径" fill="url(#linearGradient-12)"></path>
-                    <path d="M83.1506299,42.2901096 C80.5157766,42.2901096 78.3741777,44.4188565 78.3741777,47.0378978 C78.3741777,49.6569391 80.5157766,51.785686 83.1506299,51.785686 C85.7854833,51.785686 87.9270822,49.6569391 87.9270822,47.0378978 C87.9270822,44.4188565 85.7854833,42.2901096 83.1506299,42.2901096 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                    <path d="M46.4562382,67.9778159 C46.4562382,68.7970421 46.8995429,69.560412 47.6113279,69.9700251 C48.3293567,70.3796382 49.2097224,70.3796382 49.9277511,69.9700251 C50.6457799,69.560412 51.0828409,68.7970421 51.0828409,67.9778159 C51.0828409,66.7055328 50.046382,65.6752938 48.7664177,65.6752938 C47.4926971,65.6815001 46.4562382,66.7117391 46.4562382,67.9778159 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.204287574"></path>
-                    <path d="M47.4052849,58.1719266 C47.4052849,60.7971742 49.5468837,62.9197148 52.1817371,62.9197148 C54.8228342,62.9197148 56.9581893,60.7909679 56.9581893,58.1719266 C56.9581893,55.5528853 54.8165905,53.4241384 52.1817371,53.4241384 C49.5468837,53.4241384 47.4052849,55.5528853 47.4052849,58.1719266 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                    <path d="M57.9509421,57.942295 C57.9509421,59.0904529 58.5690712,60.145517 59.5618241,60.7226991 C60.5608206,61.2936749 61.7908351,61.2936749 62.7898316,60.7226991 C63.7888282,60.1517232 64.4007136,59.0904529 64.4007136,57.942295 C64.4007136,56.1735112 62.9584123,54.7336591 61.172706,54.7336591 C59.3932434,54.7336591 57.9509421,56.1735112 57.9509421,57.942295 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
-                    <path d="M54.9851711,44.7477882 C54.9851711,47.3730358 57.12677,49.4955764 59.7616234,49.4955764 C62.3964768,49.4955764 64.5380756,47.3668295 64.5380756,44.7477882 C64.5380756,42.1225406 62.3964768,40 59.7616234,40 C57.12677,40 54.9851711,42.1287469 54.9851711,44.7477882 L54.9851711,44.7477882 Z" id="路径" stroke="url(#linearGradient-10)" fill="url(#linearGradient-12)"></path>
-                    <path d="M73.4353886,68.9770236 C73.4353886,71.6022712 75.5769874,73.7248118 78.2118408,73.7248118 C80.8466942,73.7248118 82.988293,71.596065 82.988293,68.9770236 C82.988293,66.3579823 80.8466942,64.2292354 78.2118408,64.2292354 C75.5707437,64.2292354 73.4353886,66.3579823 73.4353886,68.9770236 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.204287574"></path>
-                    <polygon id="路径" fill="url(#linearGradient-15)" points="34 83.2328007 90 83.2328007 90 87 34 87"></polygon>
+                    <g id="编组"></g>
+                    <path d="M57.9509421,69.6348871 C57.9509421,70.8389014 58.5940462,71.9498217 59.6429925,72.5456226 C60.6919389,73.1476297 61.978147,73.1476297 63.0270933,72.5456226 C64.0760397,71.9436155 64.7191437,70.8326951 64.7191437,69.6348871 C64.7191437,67.7792156 63.2019177,66.2710947 61.3350429,66.2710947 C59.4681681,66.2710947 57.9509421,67.7792156 57.9509421,69.6348871 L57.9509421,69.6348871 Z" id="路径" fill="url(#linearGradient-1)"></path>
+                    <path d="M41.311406,69.8831375 C38.6765526,69.8831375 36.5349537,72.0118843 36.5349537,74.6309257 C36.5349537,77.249967 38.6765526,79.3787139 41.311406,79.3787139 C43.9462593,79.3787139 46.0878582,77.249967 46.0878582,74.6309257 C46.0878582,72.0118843 43.9462593,69.8831375 41.311406,69.8831375 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                    <path d="M36.1698071,53.6824244 C36.1698071,55.4822395 37.6370833,56.9407104 39.4477645,56.9407104 C41.2584458,56.9407104 42.7257219,55.4822395 42.7257219,53.6824244 C42.7257219,51.8826093 41.2584458,50.4241384 39.4477645,50.4241384 C37.6370833,50.4241384 36.1698071,51.8826093 36.1698071,53.6824244 Z" id="路径" fill="url(#linearGradient-3)"></path>
+                    <path d="M67.5038466,56.8624059 C67.5038466,59.4814472 69.6454454,61.6101941 72.2802988,61.6101941 C74.9213959,61.6101941 77.056751,59.4814472 77.056751,56.8624059 C77.056751,54.2371583 74.9151522,52.1146177 72.2802988,52.1146177 C69.6392017,52.1146177 67.5038466,54.2433646 67.5038466,56.8624059 Z" id="路径" fill="url(#linearGradient-4)"></path>
+                    <path d="M83.1506299,42.2901096 C80.5157766,42.2901096 78.3741777,44.4188565 78.3741777,47.0378978 C78.3741777,49.6569391 80.5157766,51.785686 83.1506299,51.785686 C85.7854833,51.785686 87.9270822,49.6569391 87.9270822,47.0378978 C87.9270822,44.4188565 85.7854833,42.2901096 83.1506299,42.2901096 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                    <path d="M46.4562382,67.9778159 C46.4562382,68.7970421 46.8995429,69.560412 47.6113279,69.9700251 C48.3293567,70.3796382 49.2097224,70.3796382 49.9277511,69.9700251 C50.6457799,69.560412 51.0828409,68.7970421 51.0828409,67.9778159 C51.0828409,66.7055328 50.046382,65.6752938 48.7664177,65.6752938 C47.4926971,65.6815001 46.4562382,66.7117391 46.4562382,67.9778159 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.204287574"></path>
+                    <path d="M47.4052849,58.1719266 C47.4052849,60.7971742 49.5468837,62.9197148 52.1817371,62.9197148 C54.8228342,62.9197148 56.9581893,60.7909679 56.9581893,58.1719266 C56.9581893,55.5528853 54.8165905,53.4241384 52.1817371,53.4241384 C49.5468837,53.4241384 47.4052849,55.5528853 47.4052849,58.1719266 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                    <path d="M57.9509421,57.942295 C57.9509421,59.0904529 58.5690712,60.145517 59.5618241,60.7226991 C60.5608206,61.2936749 61.7908351,61.2936749 62.7898316,60.7226991 C63.7888282,60.1517232 64.4007136,59.0904529 64.4007136,57.942295 C64.4007136,56.1735112 62.9584123,54.7336591 61.172706,54.7336591 C59.3932434,54.7336591 57.9509421,56.1735112 57.9509421,57.942295 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
+                    <path d="M54.9851711,44.7477882 C54.9851711,47.3730358 57.12677,49.4955764 59.7616234,49.4955764 C62.3964768,49.4955764 64.5380756,47.3668295 64.5380756,44.7477882 C64.5380756,42.1225406 62.3964768,40 59.7616234,40 C57.12677,40 54.9851711,42.1287469 54.9851711,44.7477882 L54.9851711,44.7477882 Z" id="路径" stroke="url(#linearGradient-2)" fill="url(#linearGradient-4)"></path>
+                    <path d="M73.4353886,68.9770236 C73.4353886,71.6022712 75.5769874,73.7248118 78.2118408,73.7248118 C80.8466942,73.7248118 82.988293,71.596065 82.988293,68.9770236 C82.988293,66.3579823 80.8466942,64.2292354 78.2118408,64.2292354 C75.5707437,64.2292354 73.4353886,66.3579823 73.4353886,68.9770236 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
+                    <polygon id="路径" fill="url(#linearGradient-7)" points="34 83.2328007 90 83.2328007 90 87 34 87"></polygon>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-sunburst.svg b/examples/sites/demos/pc/overviewimage/chart-sunburst.svg
index 3663ca202e..21f4a74dbc 100644
--- a/examples/sites/demos/pc/overviewimage/chart-sunburst.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-sunburst.svg
@@ -2,84 +2,42 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Rising Sun Map 旭日图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="55.6744324%" x2="128.792906%" y2="35.5477365%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="55.6744324%" x2="128.792906%" y2="35.5477365%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.1471269%" y1="86.8386573%" x2="101.443634%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="46.1471269%" y1="86.8386573%" x2="101.443634%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.1471269%" y1="86.8386573%" x2="101.443634%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="46.1471269%" y1="86.8386573%" x2="101.443634%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.0922098%" y1="86.8386573%" x2="75.4728499%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="48.0922098%" y1="86.8386573%" x2="75.4728499%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1087.000000, -1709.000000)">
             <g id="编组-17备份-7" transform="translate(988.000000, 1676.000000)">
                 <g id="Rising-Sun-Map-旭日图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="旭日图" transform="translate(34.000000, 34.000000)">
-                        <path d="M41.5666667,42.7368421 C38.6666667,45.3799743 34.9487179,47.1296534 30.8217949,47.5391528 L30.8217949,58 C37.8115385,57.5532734 44.1320513,54.6495507 48.9282051,50.1078306 L41.5666667,42.7368421 Z M17.325641,43.4441592 L10.0384615,50.8896021 C14.8717949,55.0962773 21.0807692,57.7021823 27.8846154,57.9627728 L27.8846154,47.5391528 C23.8692308,47.3157895 20.225641,45.8267009 17.325641,43.4441592 L17.325641,43.4441592 Z" id="形状" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M13.7564103,29 C13.7564103,32.648267 15.0205128,35.9614891 17.1397436,38.6046213 L23.6089744,32.127086 C23.125641,31.2708601 22.8653846,30.2657253 22.8653846,29.1861361 C22.8653846,26.3196406 24.8358974,23.9370988 27.475641,23.2297818 L27.475641,13.8112965 C19.7794872,14.593068 13.7564103,21.0706033 13.7564103,29 L13.7564103,29 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M0,29 C0,36.4454429 2.78846154,43.2207959 7.39871795,48.3581515 L14.7602564,40.987163 C12.0461538,37.7483954 10.4102564,33.5789474 10.4102564,29 C10.4102564,19.2464698 17.9205128,11.2426187 27.475641,10.4608472 L27.475641,0 C12.1576923,0.818998716 0,13.4762516 0,29 L0,29 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.400798979"></path>
-                        <path d="M30.8217949,13.8485237 L30.8217949,23.3042362 C33.3128205,24.0860077 35.1346154,26.4313222 35.1346154,29.1861361 C35.1346154,32.5738126 32.3833333,35.3286264 29,35.3286264 C27.9217949,35.3286264 26.9179487,35.0308087 26.025641,34.5468549 L19.6679487,41.0616175 C22.2333333,43.071887 25.5051282,44.2631579 29,44.2631579 C37.4025641,44.2631579 44.2435897,37.4133504 44.2435897,29 C44.2435897,21.182285 38.3692308,14.7419769 30.8217949,13.8485237 L30.8217949,13.8485237 Z" id="路径" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
-                        <path d="M30.8217949,0.0372272144 L30.8217949,10.4980745 C40.2282051,11.4287548 47.5897436,19.3581515 47.5897436,29.0372272 C47.5897436,33.3183569 46.1397436,37.3016688 43.6858974,40.4287548 L51.0846154,47.8369705 C55.3974359,42.7740693 58,36.2220796 58,29.0372272 C58,13.5879332 45.9910256,0.967907574 30.8217949,0.0372272144 L30.8217949,0.0372272144 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
+                        <path d="M41.5666667,42.7368421 C38.6666667,45.3799743 34.9487179,47.1296534 30.8217949,47.5391528 L30.8217949,58 C37.8115385,57.5532734 44.1320513,54.6495507 48.9282051,50.1078306 L41.5666667,42.7368421 Z M17.325641,43.4441592 L10.0384615,50.8896021 C14.8717949,55.0962773 21.0807692,57.7021823 27.8846154,57.9627728 L27.8846154,47.5391528 C23.8692308,47.3157895 20.225641,45.8267009 17.325641,43.4441592 L17.325641,43.4441592 Z" id="形状" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M13.7564103,29 C13.7564103,32.648267 15.0205128,35.9614891 17.1397436,38.6046213 L23.6089744,32.127086 C23.125641,31.2708601 22.8653846,30.2657253 22.8653846,29.1861361 C22.8653846,26.3196406 24.8358974,23.9370988 27.475641,23.2297818 L27.475641,13.8112965 C19.7794872,14.593068 13.7564103,21.0706033 13.7564103,29 L13.7564103,29 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M0,29 C0,36.4454429 2.78846154,43.2207959 7.39871795,48.3581515 L14.7602564,40.987163 C12.0461538,37.7483954 10.4102564,33.5789474 10.4102564,29 C10.4102564,19.2464698 17.9205128,11.2426187 27.475641,10.4608472 L27.475641,0 C12.1576923,0.818998716 0,13.4762516 0,29 L0,29 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.400798979"></path>
+                        <path d="M30.8217949,13.8485237 L30.8217949,23.3042362 C33.3128205,24.0860077 35.1346154,26.4313222 35.1346154,29.1861361 C35.1346154,32.5738126 32.3833333,35.3286264 29,35.3286264 C27.9217949,35.3286264 26.9179487,35.0308087 26.025641,34.5468549 L19.6679487,41.0616175 C22.2333333,43.071887 25.5051282,44.2631579 29,44.2631579 C37.4025641,44.2631579 44.2435897,37.4133504 44.2435897,29 C44.2435897,21.182285 38.3692308,14.7419769 30.8217949,13.8485237 L30.8217949,13.8485237 Z" id="路径" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)"></path>
+                        <path d="M30.8217949,0.0372272144 L30.8217949,10.4980745 C40.2282051,11.4287548 47.5897436,19.3581515 47.5897436,29.0372272 C47.5897436,33.3183569 46.1397436,37.3016688 43.6858974,40.4287548 L51.0846154,47.8369705 C55.3974359,42.7740693 58,36.2220796 58,29.0372272 C58,13.5879332 45.9910256,0.967907574 30.8217949,0.0372272144 L30.8217949,0.0372272144 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-tree.svg b/examples/sites/demos/pc/overviewimage/chart-tree.svg
index 35bcee5ac2..555480cfa9 100644
--- a/examples/sites/demos/pc/overviewimage/chart-tree.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-tree.svg
@@ -2,131 +2,89 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Treemap 树图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.3098106%" y1="86.8386573%" x2="85.919459%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="47.3098106%" y1="86.8386573%" x2="85.919459%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="64.0685441%" x2="128.792906%" y2="14.168697%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="64.0685441%" x2="128.792906%" y2="14.168697%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="58.1974452%" x2="128.792906%" y2="29.1218522%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="58.1974452%" x2="128.792906%" y2="29.1218522%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.5319454%" y1="86.8386573%" x2="82.9535107%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="47.5319454%" y1="86.8386573%" x2="82.9535107%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.802806%" y1="86.8386573%" x2="52.6329379%" y2="-43.8247114%" id="linearGradient-15">
+        <linearGradient x1="49.802806%" y1="86.8386573%" x2="52.6329379%" y2="-43.8247114%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.3806306%" y1="86.8386573%" x2="84.9738685%" y2="-43.8247114%" id="linearGradient-16">
+        <linearGradient x1="47.3806306%" y1="86.8386573%" x2="84.9738685%" y2="-43.8247114%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="64.965597%" x2="128.792906%" y2="11.8839849%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="64.965597%" x2="128.792906%" y2="11.8839849%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.6632462%" y1="86.8386573%" x2="81.2003801%" y2="-43.8247114%" id="linearGradient-18">
+        <linearGradient x1="47.6632462%" y1="86.8386573%" x2="81.2003801%" y2="-43.8247114%" id="linearGradient-10">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="67.6335933%" x2="128.792906%" y2="5.08884068%" id="linearGradient-19">
+        <linearGradient x1="44.0988019%" y1="67.6335933%" x2="128.792906%" y2="5.08884068%" id="linearGradient-11">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.1935068%" x2="128.792906%" y2="46.9602468%" id="linearGradient-20">
+        <linearGradient x1="44.0988019%" y1="51.1935068%" x2="128.792906%" y2="46.9602468%" id="linearGradient-12">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-21">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1478.000000, -1434.000000)">
             <g id="编组-17备份-4" transform="translate(1380.000000, 1401.000000)">
                 <g id="Treemap-树图" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <circle id="椭圆形" fill="url(#linearGradient-9)" opacity="0.204287574" cx="62" cy="67" r="15"></circle>
+                    <g id="编组"></g>
+                    <circle id="椭圆形" fill="url(#linearGradient-1)" opacity="0.204287574" cx="62" cy="67" r="15"></circle>
                     <g id="环形树图" transform="translate(36.000000, 41.000000)">
-                        <path d="M3.09523808,14.6095238 C3.09523808,16.6608671 4.75818043,18.3238095 6.80952379,18.3238095 C8.86086715,18.3238095 10.5238095,16.6608671 10.5238095,14.6095238 C10.5238095,12.5581804 8.86086715,10.8952381 6.80952379,10.8952381 C4.75818043,10.8952381 3.09523808,12.5581804 3.09523808,14.6095238 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M22.2857143,3.71428571 C22.2857143,5.76562907 23.9486566,7.42857143 26,7.42857143 C28.0513434,7.42857143 29.7142857,5.76562907 29.7142857,3.71428571 C29.7142857,1.66294236 28.0513434,0 26,0 C23.9486566,0 22.2857143,1.66294236 22.2857143,3.71428571 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M11.1428571,6.80952379 C11.1428571,8.86086715 12.8057995,10.5238095 14.8571429,10.5238095 C16.9084862,10.5238095 18.5714286,8.86086715 18.5714286,6.80952379 C18.5714286,4.75818043 16.9084862,3.09523808 14.8571429,3.09523808 C12.8057995,3.09523808 11.1428571,4.75818043 11.1428571,6.80952379 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M33.4285714,45.1904762 C33.4285714,47.2418196 35.0915138,48.9047619 37.1428571,48.9047619 C39.1942005,48.9047619 40.8571429,47.2418196 40.8571429,45.1904762 C40.8571429,43.1391329 39.1942005,41.4761905 37.1428571,41.4761905 C35.0915138,41.4761905 33.4285714,43.1391329 33.4285714,45.1904762 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M44.5714286,26 C44.5714286,28.0513434 46.2343709,29.7142857 48.2857143,29.7142857 C50.3370576,29.7142857 52,28.0513434 52,26 C52,23.9486566 50.3370576,22.2857143 48.2857143,22.2857143 C46.2343709,22.2857143 44.5714286,23.9486566 44.5714286,26 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M0,26 C0,28.0513434 1.66294236,29.7142857 3.71428571,29.7142857 C5.76562907,29.7142857 7.42857143,28.0513434 7.42857143,26 C7.42857143,23.9486566 5.76562907,22.2857143 3.71428571,22.2857143 C1.66294236,22.2857143 0,23.9486566 0,26 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M22.2857143,48.2857143 C22.2857143,50.3370576 23.9486566,52 26,52 C28.0513434,52 29.7142857,50.3370576 29.7142857,48.2857143 C29.7142857,46.2343709 28.0513434,44.5714286 26,44.5714286 C23.9486566,44.5714286 22.2857143,46.2343709 22.2857143,48.2857143 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M41.3523809,14.6095238 C41.3523809,16.6608671 43.0153233,18.3238095 45.0666666,18.3238095 C47.11801,18.3238095 48.7809524,16.6608671 48.7809524,14.6095238 C48.7809524,12.5581804 47.11801,10.8952381 45.0666666,10.8952381 C43.0153233,10.8952381 41.3523809,12.5581804 41.3523809,14.6095238 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M33.4285714,6.80952379 C33.4285714,8.86086715 35.0915138,10.5238095 37.1428571,10.5238095 C39.1942005,10.5238095 40.8571429,8.86086715 40.8571429,6.80952379 C40.8571429,4.75818043 39.1942005,3.09523808 37.1428571,3.09523808 C35.0915138,3.09523808 33.4285714,4.75818043 33.4285714,6.80952379 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M3.09523808,37.1428571 C3.09523808,39.1942005 4.75818043,40.8571429 6.80952379,40.8571429 C8.86086715,40.8571429 10.5238095,39.1942005 10.5238095,37.1428571 C10.5238095,35.0915138 8.86086715,33.4285714 6.80952379,33.4285714 C4.75818043,33.4285714 3.09523808,35.0915138 3.09523808,37.1428571 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M11.1428571,45.1904762 C11.1428571,47.2418196 12.8057995,48.9047619 14.8571429,48.9047619 C16.9084862,48.9047619 18.5714286,47.2418196 18.5714286,45.1904762 C18.5714286,43.1391329 16.9084862,41.4761905 14.8571429,41.4761905 C12.8057995,41.4761905 11.1428571,43.1391329 11.1428571,45.1904762 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M41.3523809,37.1428571 C41.3523809,39.1942005 43.0153233,40.8571429 45.0666666,40.8571429 C47.11801,40.8571429 48.7809524,39.1942005 48.7809524,37.1428571 C48.7809524,35.0915138 47.11801,33.4285714 45.0666666,33.4285714 C43.0153233,33.4285714 41.3523809,35.0915138 41.3523809,37.1428571 Z" id="路径" fill="url(#linearGradient-10)"></path>
-                        <path d="M26.9904762,2.97142857 L26.6190476,2.4761905 L24.6380952,3.96190478 L25.0095238,4.45714286 C30.3333333,10.8952381 26.7428571,21.0476191 25.5047619,24.2666666 C13.9904762,17.2095238 15.8476191,8.17142857 16.0952381,7.05714286 L16.2190476,6.43809522 L14.1142857,5.81904764 L13.8666666,6.06666665 C13.4952381,6.43809522 13.1238095,8.79047615 13.4952381,11.5142857 C14.1142857,15.8476191 16.5904762,22.0380952 25.3809524,26.9904762 L26.4952381,27.7333334 L27.2380952,26.4952381 C27.8571429,25.0095238 34.1714286,11.7619047 26.9904762,2.97142857 L26.9904762,2.97142857 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <path d="M26.2476191,25.0095238 C8.91428571,22.1619048 7.42857143,14.7333334 7.42857143,14.7333334 L7.42857143,13.9904762 L5.44761907,14.3619048 L4.82857143,14.6095238 L4.95238093,15.2285714 C5.57142857,17.3333334 8.66666665,24.6380952 25.7523809,27.4857143 L26.3714286,27.6095238 L26.8666666,25.1333334 L26.2476191,25.0095238 L26.2476191,25.0095238 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
-                        <path d="M26,25.1333334 C14.3619048,21.2952381 5.69523808,24.0190476 3.34285714,24.8857143 L2.7238095,25.1333334 L3.59047621,27.2380952 L3.96190478,27.2380952 C4.08571429,27.2380952 4.08571429,27.2380952 4.33333335,27.1142857 C6.56190478,26.3714286 12.0095238,24.8857143 19.4380952,26 C15.4761904,27.3619048 10.4,30.2095238 5.81904764,36.2761905 L5.44761907,36.7714286 L7.42857143,38.3809524 L7.8,37.8857143 C15.7238095,27.2380952 25.3809524,27.4857143 25.5047619,27.4857143 L35.0380952,27.9809524 L26,25.1333334 L26,25.1333334 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
-                        <path d="M26.1238095,25.2571429 L25.5047619,25.5047619 C14.8571429,29.0952381 13.6190476,44.9428571 13.6190476,45.0666666 L13.6190476,45.6857143 L16.0952381,45.9333334 L16.0952381,45.3142857 C16.0952381,45.1904762 17.4571429,30.9523809 26.3714286,27.7333334 L26.9904762,27.4857143 L26.1238095,25.2571429 L26.1238095,25.2571429 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
-                        <path d="M26.7428571,24.8857143 L26.4952381,24.2666666 L24.2666666,25.0095238 L24.5142857,25.6285714 C27.7333334,34.9142857 25.6285714,44.3238095 24.8857143,47.0476191 L24.8857143,47.9142857 L27.1142857,48.5333334 L27.3619048,47.9142857 C27.2380953,47.9142857 30.8285714,36.6476191 26.7428571,24.8857143 L26.7428571,24.8857143 Z" id="路径" fill="url(#linearGradient-15)" opacity="0.303770519"></path>
-                        <path d="M26.1238095,25.2571429 L25.6285714,24.8857143 L24.3904762,27.1142857 L24.8857143,27.3619048 C35.5333334,33.4285714 36.0285714,42.3428571 35.9047619,44.9428571 L35.9047619,45.6857143 L38.3809524,45.9333334 L38.3809524,45.3142857 C38.5047619,44.0761905 38.8761904,32.4380952 26.1238095,25.2571429 Z" id="路径" fill="url(#linearGradient-16)" opacity="0.604724702"></path>
-                        <path d="M25.8761905,24.6380952 L25.2571429,24.6380952 L25.0095238,27.1142857 L25.6285714,27.1142857 C37.5142857,27.7333334 43.2095238,36.4 43.8285714,37.2666666 L43.8285714,38.1333334 L46.1809524,36.7714286 L46.1809524,36.4 C46.3047619,35.9047619 39.7428571,25.3809524 25.8761905,24.6380952 L25.8761905,24.6380952 Z" id="路径" fill="url(#linearGradient-17)" opacity="0.303770519"></path>
-                        <path d="M38.3809524,6.68571429 L38.3809524,5.94285714 L36.5238095,6.19047621 L35.9047619,6.31428571 L35.9047619,6.93333335 C36.0285714,7.92380956 36.4,17.4571429 25.2571429,25.2571429 L24.7619048,25.6285714 L26.2476191,27.6095238 L26.7428571,27.2380952 C38.1333334,19.1904762 38.5047619,9.53333329 38.3809524,6.68571429 L38.3809524,6.68571429 Z" id="路径" fill="url(#linearGradient-18)" opacity="0.303770519"></path>
-                        <path d="M43.9523809,13.9904762 C43.9523809,14.1142857 39.7428571,21.6666667 25.6285714,25.5047619 L25.0095238,25.6285714 L25.7523809,28.1047619 L26.3714286,27.9809524 C42.2190476,23.7714286 46.1809524,15.2285714 46.1809524,15.2285714 L46.3047619,14.7333334 L44.2,13.3714286 L43.9523809,13.9904762 Z" id="路径" fill="url(#linearGradient-19)" opacity="0.303770519"></path>
-                        <path d="M49.0285714,24.8857143 C48.4095238,24.2666666 41.8476191,21.6666666 26.3714286,24.5142857 L25.7523809,24.6380952 L26.2476191,27.1142857 L26.8666666,26.9904762 C42.2190476,24.2666667 47.7904762,26.9904762 47.9142857,27.1142857 L48.5333334,27.4857143 L49.5238095,25.3809524 L49.0285714,24.8857143 Z" id="路径" fill="url(#linearGradient-20)" opacity="0.303770519"></path>
-                        <path d="M21.0476191,26 C21.0476191,28.7351245 23.2648755,30.9523809 26,30.9523809 C28.7351245,30.9523809 30.9523809,28.7351245 30.9523809,26 C30.9523809,24.2306847 30.0084625,22.5957699 28.4761905,21.7111122 C26.9439185,20.8264545 25.0560815,20.8264545 23.5238095,21.7111122 C21.9915375,22.5957699 21.0476191,24.2306847 21.0476191,26 L21.0476191,26 Z" id="路径" fill="url(#linearGradient-21)"></path>
+                        <path d="M3.09523808,14.6095238 C3.09523808,16.6608671 4.75818043,18.3238095 6.80952379,18.3238095 C8.86086715,18.3238095 10.5238095,16.6608671 10.5238095,14.6095238 C10.5238095,12.5581804 8.86086715,10.8952381 6.80952379,10.8952381 C4.75818043,10.8952381 3.09523808,12.5581804 3.09523808,14.6095238 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M22.2857143,3.71428571 C22.2857143,5.76562907 23.9486566,7.42857143 26,7.42857143 C28.0513434,7.42857143 29.7142857,5.76562907 29.7142857,3.71428571 C29.7142857,1.66294236 28.0513434,0 26,0 C23.9486566,0 22.2857143,1.66294236 22.2857143,3.71428571 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M11.1428571,6.80952379 C11.1428571,8.86086715 12.8057995,10.5238095 14.8571429,10.5238095 C16.9084862,10.5238095 18.5714286,8.86086715 18.5714286,6.80952379 C18.5714286,4.75818043 16.9084862,3.09523808 14.8571429,3.09523808 C12.8057995,3.09523808 11.1428571,4.75818043 11.1428571,6.80952379 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M33.4285714,45.1904762 C33.4285714,47.2418196 35.0915138,48.9047619 37.1428571,48.9047619 C39.1942005,48.9047619 40.8571429,47.2418196 40.8571429,45.1904762 C40.8571429,43.1391329 39.1942005,41.4761905 37.1428571,41.4761905 C35.0915138,41.4761905 33.4285714,43.1391329 33.4285714,45.1904762 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M44.5714286,26 C44.5714286,28.0513434 46.2343709,29.7142857 48.2857143,29.7142857 C50.3370576,29.7142857 52,28.0513434 52,26 C52,23.9486566 50.3370576,22.2857143 48.2857143,22.2857143 C46.2343709,22.2857143 44.5714286,23.9486566 44.5714286,26 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M0,26 C0,28.0513434 1.66294236,29.7142857 3.71428571,29.7142857 C5.76562907,29.7142857 7.42857143,28.0513434 7.42857143,26 C7.42857143,23.9486566 5.76562907,22.2857143 3.71428571,22.2857143 C1.66294236,22.2857143 0,23.9486566 0,26 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M22.2857143,48.2857143 C22.2857143,50.3370576 23.9486566,52 26,52 C28.0513434,52 29.7142857,50.3370576 29.7142857,48.2857143 C29.7142857,46.2343709 28.0513434,44.5714286 26,44.5714286 C23.9486566,44.5714286 22.2857143,46.2343709 22.2857143,48.2857143 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M41.3523809,14.6095238 C41.3523809,16.6608671 43.0153233,18.3238095 45.0666666,18.3238095 C47.11801,18.3238095 48.7809524,16.6608671 48.7809524,14.6095238 C48.7809524,12.5581804 47.11801,10.8952381 45.0666666,10.8952381 C43.0153233,10.8952381 41.3523809,12.5581804 41.3523809,14.6095238 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M33.4285714,6.80952379 C33.4285714,8.86086715 35.0915138,10.5238095 37.1428571,10.5238095 C39.1942005,10.5238095 40.8571429,8.86086715 40.8571429,6.80952379 C40.8571429,4.75818043 39.1942005,3.09523808 37.1428571,3.09523808 C35.0915138,3.09523808 33.4285714,4.75818043 33.4285714,6.80952379 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M3.09523808,37.1428571 C3.09523808,39.1942005 4.75818043,40.8571429 6.80952379,40.8571429 C8.86086715,40.8571429 10.5238095,39.1942005 10.5238095,37.1428571 C10.5238095,35.0915138 8.86086715,33.4285714 6.80952379,33.4285714 C4.75818043,33.4285714 3.09523808,35.0915138 3.09523808,37.1428571 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M11.1428571,45.1904762 C11.1428571,47.2418196 12.8057995,48.9047619 14.8571429,48.9047619 C16.9084862,48.9047619 18.5714286,47.2418196 18.5714286,45.1904762 C18.5714286,43.1391329 16.9084862,41.4761905 14.8571429,41.4761905 C12.8057995,41.4761905 11.1428571,43.1391329 11.1428571,45.1904762 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M41.3523809,37.1428571 C41.3523809,39.1942005 43.0153233,40.8571429 45.0666666,40.8571429 C47.11801,40.8571429 48.7809524,39.1942005 48.7809524,37.1428571 C48.7809524,35.0915138 47.11801,33.4285714 45.0666666,33.4285714 C43.0153233,33.4285714 41.3523809,35.0915138 41.3523809,37.1428571 Z" id="路径" fill="url(#linearGradient-2)"></path>
+                        <path d="M26.9904762,2.97142857 L26.6190476,2.4761905 L24.6380952,3.96190478 L25.0095238,4.45714286 C30.3333333,10.8952381 26.7428571,21.0476191 25.5047619,24.2666666 C13.9904762,17.2095238 15.8476191,8.17142857 16.0952381,7.05714286 L16.2190476,6.43809522 L14.1142857,5.81904764 L13.8666666,6.06666665 C13.4952381,6.43809522 13.1238095,8.79047615 13.4952381,11.5142857 C14.1142857,15.8476191 16.5904762,22.0380952 25.3809524,26.9904762 L26.4952381,27.7333334 L27.2380952,26.4952381 C27.8571429,25.0095238 34.1714286,11.7619047 26.9904762,2.97142857 L26.9904762,2.97142857 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
+                        <path d="M26.2476191,25.0095238 C8.91428571,22.1619048 7.42857143,14.7333334 7.42857143,14.7333334 L7.42857143,13.9904762 L5.44761907,14.3619048 L4.82857143,14.6095238 L4.95238093,15.2285714 C5.57142857,17.3333334 8.66666665,24.6380952 25.7523809,27.4857143 L26.3714286,27.6095238 L26.8666666,25.1333334 L26.2476191,25.0095238 L26.2476191,25.0095238 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.303770519"></path>
+                        <path d="M26,25.1333334 C14.3619048,21.2952381 5.69523808,24.0190476 3.34285714,24.8857143 L2.7238095,25.1333334 L3.59047621,27.2380952 L3.96190478,27.2380952 C4.08571429,27.2380952 4.08571429,27.2380952 4.33333335,27.1142857 C6.56190478,26.3714286 12.0095238,24.8857143 19.4380952,26 C15.4761904,27.3619048 10.4,30.2095238 5.81904764,36.2761905 L5.44761907,36.7714286 L7.42857143,38.3809524 L7.8,37.8857143 C15.7238095,27.2380952 25.3809524,27.4857143 25.5047619,27.4857143 L35.0380952,27.9809524 L26,25.1333334 L26,25.1333334 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
+                        <path d="M26.1238095,25.2571429 L25.5047619,25.5047619 C14.8571429,29.0952381 13.6190476,44.9428571 13.6190476,45.0666666 L13.6190476,45.6857143 L16.0952381,45.9333334 L16.0952381,45.3142857 C16.0952381,45.1904762 17.4571429,30.9523809 26.3714286,27.7333334 L26.9904762,27.4857143 L26.1238095,25.2571429 L26.1238095,25.2571429 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
+                        <path d="M26.7428571,24.8857143 L26.4952381,24.2666666 L24.2666666,25.0095238 L24.5142857,25.6285714 C27.7333334,34.9142857 25.6285714,44.3238095 24.8857143,47.0476191 L24.8857143,47.9142857 L27.1142857,48.5333334 L27.3619048,47.9142857 C27.2380953,47.9142857 30.8285714,36.6476191 26.7428571,24.8857143 L26.7428571,24.8857143 Z" id="路径" fill="url(#linearGradient-7)" opacity="0.303770519"></path>
+                        <path d="M26.1238095,25.2571429 L25.6285714,24.8857143 L24.3904762,27.1142857 L24.8857143,27.3619048 C35.5333334,33.4285714 36.0285714,42.3428571 35.9047619,44.9428571 L35.9047619,45.6857143 L38.3809524,45.9333334 L38.3809524,45.3142857 C38.5047619,44.0761905 38.8761904,32.4380952 26.1238095,25.2571429 Z" id="路径" fill="url(#linearGradient-8)" opacity="0.604724702"></path>
+                        <path d="M25.8761905,24.6380952 L25.2571429,24.6380952 L25.0095238,27.1142857 L25.6285714,27.1142857 C37.5142857,27.7333334 43.2095238,36.4 43.8285714,37.2666666 L43.8285714,38.1333334 L46.1809524,36.7714286 L46.1809524,36.4 C46.3047619,35.9047619 39.7428571,25.3809524 25.8761905,24.6380952 L25.8761905,24.6380952 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                        <path d="M38.3809524,6.68571429 L38.3809524,5.94285714 L36.5238095,6.19047621 L35.9047619,6.31428571 L35.9047619,6.93333335 C36.0285714,7.92380956 36.4,17.4571429 25.2571429,25.2571429 L24.7619048,25.6285714 L26.2476191,27.6095238 L26.7428571,27.2380952 C38.1333334,19.1904762 38.5047619,9.53333329 38.3809524,6.68571429 L38.3809524,6.68571429 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
+                        <path d="M43.9523809,13.9904762 C43.9523809,14.1142857 39.7428571,21.6666667 25.6285714,25.5047619 L25.0095238,25.6285714 L25.7523809,28.1047619 L26.3714286,27.9809524 C42.2190476,23.7714286 46.1809524,15.2285714 46.1809524,15.2285714 L46.3047619,14.7333334 L44.2,13.3714286 L43.9523809,13.9904762 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
+                        <path d="M49.0285714,24.8857143 C48.4095238,24.2666666 41.8476191,21.6666666 26.3714286,24.5142857 L25.7523809,24.6380952 L26.2476191,27.1142857 L26.8666666,26.9904762 C42.2190476,24.2666667 47.7904762,26.9904762 47.9142857,27.1142857 L48.5333334,27.4857143 L49.5238095,25.3809524 L49.0285714,24.8857143 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
+                        <path d="M21.0476191,26 C21.0476191,28.7351245 23.2648755,30.9523809 26,30.9523809 C28.7351245,30.9523809 30.9523809,28.7351245 30.9523809,26 C30.9523809,24.2306847 30.0084625,22.5957699 28.4761905,21.7111122 C26.9439185,20.8264545 25.0560815,20.8264545 23.5238095,21.7111122 C21.9915375,22.5957699 21.0476191,24.2306847 21.0476191,26 L21.0476191,26 Z" id="路径" fill="url(#linearGradient-13)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-waterfall.svg b/examples/sites/demos/pc/overviewimage/chart-waterfall.svg
index 5521963ac9..085ea95589 100644
--- a/examples/sites/demos/pc/overviewimage/chart-waterfall.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-waterfall.svg
@@ -2,75 +2,33 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Waterfall Map 瀑布图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="48.5247005%" y1="86.8386573%" x2="69.6982266%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="48.5247005%" y1="86.8386573%" x2="69.6982266%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.0358438%" y1="86.8386573%" x2="76.2254496%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="48.0358438%" y1="86.8386573%" x2="76.2254496%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.3443113%" y1="86.8386573%" x2="58.7547674%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.3443113%" y1="86.8386573%" x2="58.7547674%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.0920966%" x2="128.792906%" y2="49.7654382%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="50.0920966%" x2="128.792906%" y2="49.7654382%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1087.000000, -884.000000)">
             <g id="编组-25备份-10" transform="translate(988.000000, 851.000000)">
                 <g id="Waterfall-Map-瀑布图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="图表-(3)" transform="translate(62.445611, 61.054389) rotate(-360.000000) translate(-62.445611, -61.054389) translate(22.445611, 31.554389)">
-                        <path d="M14.3461539,15 L22.6538461,15 C24.5018759,15 26,16.4981241 26,18.3461539 L26,45 L26,45 L11,45 L11,18.3461539 C11,16.4981241 12.4981241,15 14.3461539,15 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M57.3461539,24 L65.6538461,24 C67.5018759,24 69,25.4981241 69,27.3461539 L69,50 L69,50 L54,50 L54,27.3461539 C54,25.4981241 55.4981241,24 57.3461539,24 Z" id="矩形备份-12" fill="url(#linearGradient-10)"></path>
-                        <path d="M36.3461539,0 L44.6538461,0 C46.5018759,1.04611649e-16 48,1.49812413 48,3.3461539 L48,45 L48,45 L33,45 L33,3.3461539 C33,1.49812413 34.4981241,-3.21323612e-15 36.3461539,0 Z" id="矩形备份-11" fill="url(#linearGradient-11)" opacity="0.204287574"></path>
-                        <rect id="矩形" fill="url(#linearGradient-12)" x="2.84217094e-14" y="55" width="80" height="4" rx="2"></rect>
+                        <path d="M14.3461539,15 L22.6538461,15 C24.5018759,15 26,16.4981241 26,18.3461539 L26,45 L26,45 L11,45 L11,18.3461539 C11,16.4981241 12.4981241,15 14.3461539,15 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M57.3461539,24 L65.6538461,24 C67.5018759,24 69,25.4981241 69,27.3461539 L69,50 L69,50 L54,50 L54,27.3461539 C54,25.4981241 55.4981241,24 57.3461539,24 Z" id="矩形备份-12" fill="url(#linearGradient-2)"></path>
+                        <path d="M36.3461539,0 L44.6538461,0 C46.5018759,1.04611649e-16 48,1.49812413 48,3.3461539 L48,45 L48,45 L33,45 L33,3.3461539 C33,1.49812413 34.4981241,-3.21323612e-15 36.3461539,0 Z" id="矩形备份-11" fill="url(#linearGradient-3)" opacity="0.204287574"></path>
+                        <rect id="矩形" fill="url(#linearGradient-4)" x="2.84217094e-14" y="55" width="80" height="4" rx="2"></rect>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart-wordcloud.svg b/examples/sites/demos/pc/overviewimage/chart-wordcloud.svg
index b5d3375ee5..f11cf7b6c3 100644
--- a/examples/sites/demos/pc/overviewimage/chart-wordcloud.svg
+++ b/examples/sites/demos/pc/overviewimage/chart-wordcloud.svg
@@ -2,80 +2,38 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Word cloud map 词云图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="68.597902%" x2="128.792906%" y2="2.63283405%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="68.597902%" x2="128.792906%" y2="2.63283405%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M76,34.3651977 C76,45.2089436 67.2212394,53.9999893 56.3920393,53.9999893 L17.1767127,53.9999893 C8.57640646,54.0095095 1.29844634,47.6416979 0.153959605,39.1062093 C-0.990527135,30.5707206 4.35179896,22.505223 12.6499227,20.2422373 C14.5540298,9.54741129 23.2507014,1.37766976 34.0299343,0.15652721 C44.8091673,-1.06461534 55.1089531,4.95234121 59.3508111,14.9508182 C68.9266675,16.4161892 76,24.6639648 76,34.3651977 Z" id="path-10"></path>
-        <linearGradient x1="44.0988019%" y1="62.3925243%" x2="128.792906%" y2="18.4373671%" id="linearGradient-12">
+        <path d="M76,34.3651977 C76,45.2089436 67.2212394,53.9999893 56.3920393,53.9999893 L17.1767127,53.9999893 C8.57640646,54.0095095 1.29844634,47.6416979 0.153959605,39.1062093 C-0.990527135,30.5707206 4.35179896,22.505223 12.6499227,20.2422373 C14.5540298,9.54741129 23.2507014,1.37766976 34.0299343,0.15652721 C44.8091673,-1.06461534 55.1089531,4.95234121 59.3508111,14.9508182 C68.9266675,16.4161892 76,24.6639648 76,34.3651977 Z" id="path-2"></path>
+        <linearGradient x1="44.0988019%" y1="62.3925243%" x2="128.792906%" y2="18.4373671%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.2450582%" x2="128.792906%" y2="41.7351316%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="53.2450582%" x2="128.792906%" y2="41.7351316%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.8834723%" x2="128.792906%" y2="40.1091491%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="53.8834723%" x2="128.792906%" y2="40.1091491%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-697.000000, -1709.000000)">
             <g id="编组-17备份-6" transform="translate(598.000000, 1676.000000)">
                 <g id="Word-cloud-map-词云图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="形状" transform="translate(25.000000, 36.000000)">
-                        <mask id="mask-11" fill="white">
-                            <use xlink:href="#path-10"></use>
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
                         </mask>
-                        <use id="蒙版" fill="url(#linearGradient-9)" opacity="0.303770519" xlink:href="#path-10"></use>
+                        <use id="蒙版" fill="url(#linearGradient-1)" opacity="0.303770519" xlink:href="#path-2"></use>
                     </g>
-                    <path d="M43.8921283,57.3939394 L44.6209913,61.6414141 C44.7667638,62.6666666 45.058309,63.8383838 45.2040816,64.8636364 C45.3498542,63.8383839 45.6413994,62.6666667 45.9329446,61.6414141 L46.9533528,57.3939394 L49.4314869,57.3939394 L50.451895,61.4949495 C50.7434402,62.6666667 51.0349854,63.6919192 51.180758,64.8636364 C51.3265306,63.8383839 51.4723032,62.6666667 51.7638484,61.4949495 L52.638484,57.3939394 L55.5539359,57.3939394 L52.4927114,67.5 L49.5772595,67.5 L48.7026239,63.9848485 C48.4110787,62.959596 48.2653061,62.0808081 48.1195335,60.9090909 C47.973761,62.0808081 47.6822157,63.1060606 47.5364431,63.9848485 L46.516035,67.5 L43.600583,67.5 L40.6851312,57.3939394 L43.8921283,57.3939394 Z M66.1953353,62.3737374 C66.1953353,66.1818182 63.5714286,67.6464646 61.0932944,67.6464646 C58.1778425,67.6464646 56.1370262,65.7424242 56.1370262,62.520202 C56.1370262,59.1515151 58.3236151,57.2474747 61.2390671,57.2474747 C64.3002916,57.2474747 66.1953353,59.2979798 66.1953353,62.3737374 Z M59.3440233,62.520202 C59.3440233,64.2777777 59.9271136,65.5959596 61.2390671,65.5959596 C62.4052478,65.5959596 62.9883382,64.2777777 62.9883382,62.520202 C62.9883382,61.0555555 62.5510204,59.4444444 61.2390671,59.4444444 C59.7813411,59.4444444 59.3440233,61.0555555 59.3440233,62.520202 Z M68.090379,60.6161616 C68.090379,59.2979798 68.090379,58.2727273 67.9446064,57.3939394 L70.5685131,57.3939394 L70.7142857,59.1515152 L70.8600583,59.1515152 C71.4431487,57.8333333 72.4635569,57.2474747 73.483965,57.2474747 L74.212828,57.2474747 L74.212828,60.030303 L73.483965,60.030303 C72.4635569,60.030303 71.5889213,60.6161616 71.4431487,61.4949495 C71.4431487,61.6414141 71.2973761,61.9343434 71.2973761,62.2272727 L71.2973761,67.3535353 L68.2361516,67.3535353 L68.2361516,60.6161616 L68.090379,60.6161616 Z M84.8542274,53 L84.8542274,64.4242424 C84.8542274,65.4494949 84.8542274,66.6212121 85,67.3535353 L82.2303207,67.3535353 L82.0845481,66.0353535 C81.5014577,67.060606 80.3352769,67.6464646 79.1690962,67.6464646 C76.8367347,67.6464646 75.0874635,65.4494949 75.0874635,62.520202 C75.0874635,59.1515151 77.1282799,57.2474747 79.3148688,57.2474747 C80.4810496,57.2474747 81.3556852,57.6868686 81.7930029,58.4191919 L81.7930029,53 L84.8542274,53 Z M81.7930029,61.6414141 L81.7930029,61.0555555 C81.6472304,60.3232323 81.0641399,59.5909091 80.1895044,59.5909091 C78.877551,59.5909091 78.148688,60.9090909 78.148688,62.520202 C78.148688,64.2777777 78.877551,65.3030303 80.0437318,65.3030303 C80.7725948,65.3030303 81.5014577,64.8636364 81.6472303,63.9848485 C81.6472303,63.8383839 81.7930029,63.5454545 81.7930029,63.2525252 L81.7930029,61.6414141 Z M41.2682216,81.5606061 C40.8309038,81.7070707 40.1020408,81.8535353 39.2274052,81.8535353 C36.6034985,81.8535353 35,80.2424242 35,77.4595959 C35,74.9696969 36.6034986,72.9191919 39.664723,72.9191919 C40.2478133,72.9191919 40.9766763,73.0656565 41.4139941,73.2121212 L40.9766763,75.2626262 C40.6851311,75.1161616 40.2478133,74.9696969 39.664723,74.969697 C38.3527696,74.969697 37.4781341,75.9949495 37.4781341,77.4595959 C37.4781341,79.070707 38.3527696,79.9494949 39.664723,79.9494949 C40.2478133,79.9494949 40.6851311,79.8030303 40.9766763,79.6565656 L41.2682216,81.5606061 Z M42.4344023,69.4040404 L45.058309,69.4040404 L45.058309,81.8535353 L42.4344023,81.8535353 L42.4344023,69.4040404 L42.4344023,69.4040404 Z M54.5335277,77.3131313 C54.5335277,80.5353535 52.3469387,81.8535353 50.451895,81.8535353 C48.1195335,81.8535353 46.3702624,80.2424242 46.3702624,77.4595959 C46.3702624,74.530303 48.1195335,72.9191919 50.5976676,72.9191919 C52.9300291,72.9191919 54.5335277,74.6767677 54.5335277,77.3131313 Z M48.9941691,77.4595959 C48.9941691,78.9242424 49.4314869,80.0959596 50.5976676,80.0959596 C51.6180757,80.0959596 52.0553936,78.9242424 52.0553936,77.4595959 C52.0553936,76.2878787 51.6180758,74.8232323 50.5976676,74.8232323 C49.4314868,74.8232323 48.9941691,76.1414141 48.9941691,77.4595959 Z M63.425656,79.070707 L63.425656,81.8535353 L61.3848396,81.8535353 L61.2390671,80.6818182 C60.9475219,81.2676767 60.0728863,82 58.7609329,82 C57.0116618,82 55.9912537,80.8282828 55.9912537,78.3383838 L55.9912537,73.2121212 L58.4693877,73.2121212 L58.4693877,77.8989899 C58.4693877,79.070707 58.7609329,79.8030302 59.6355685,79.8030303 C60.2186589,79.8030303 60.6559766,79.3636364 60.8017493,78.9242424 C60.8017493,78.7777778 60.9475219,78.4848485 60.9475219,78.3383838 L60.9475219,73.0656565 L63.5714286,73.0656565 L63.5714286,79.070707 L63.425656,79.070707 Z M72.9008746,69.4040404 L72.9008746,81.7070707 L70.7142857,81.7070707 L70.5685131,80.5353535 C70.1311953,81.4141414 69.1107872,81.8535353 68.090379,81.8535353 C66.1953353,81.8535353 64.7376093,80.0959596 64.7376093,77.4595959 C64.7376093,74.530303 66.3411079,72.9191919 68.2361516,72.9191919 C69.2565598,72.9191919 69.8396502,73.3585858 70.2769679,73.7979798 L70.2769679,69.2575758 L72.9008746,69.2575758 L72.9008746,69.4040404 Z M70.4227405,76.7272727 L70.4227405,76.2878788 C70.276968,75.5555555 69.8396502,75.1161616 69.1107872,75.1161616 C67.9446064,75.1161616 67.5072886,76.2878788 67.5072886,77.6060606 C67.5072886,79.070707 68.090379,79.9494949 69.1107872,79.9494949 C69.6938775,79.9494949 70.276968,79.510101 70.4227405,78.7777777 L70.4227405,76.7272727 L70.4227405,76.7272727 Z" id="形状" fill="url(#linearGradient-12)"></path>
-                    <path d="M78.5927978,76.0331492 C78.432133,76.0331492 78.1108033,76.1933702 77.7894737,76.1933702 C76.8254848,76.1933702 76.3434903,75.7127072 76.3434903,74.7513812 C76.3434903,73.9502762 76.9861496,73.3093923 77.9501385,73.3093923 C78.1108033,73.3093923 78.432133,73.3093923 78.5927978,73.4696132 L78.432133,74.1104973 L77.9501385,74.1104973 C77.468144,74.1104973 77.1468144,74.4309393 77.1468144,74.9116022 C77.1468144,75.3922651 77.468144,75.7127072 77.9501385,75.7127072 L78.432133,75.7127072 L78.5927978,76.0331492 L78.5927978,76.0331492 Z M79.0747922,72.1878453 L80.0387811,72.1878453 L80.0387811,76.0331492 L79.0747922,76.0331492 L79.0747922,72.1878453 Z M83.4127424,74.5911602 C83.4127424,75.5524862 82.6094182,76.0331492 81.966759,76.0331492 C81.1634348,76.0331492 80.5207756,75.5524862 80.5207756,74.5911602 C80.5207756,73.6298343 81.1634348,73.1491713 81.966759,73.1491713 C82.7700831,73.3093923 83.4127424,73.7900552 83.4127424,74.5911602 Z M81.4847645,74.7513812 C81.4847645,75.2320442 81.6454293,75.5524862 81.966759,75.5524862 C82.2880886,75.5524862 82.4487534,75.2320442 82.4487534,74.7513812 C82.4487534,74.4309392 82.2880886,73.9502762 81.966759,73.9502762 C81.4847645,73.9502762 81.4847645,74.2707182 81.4847645,74.7513812 Z M86.465374,75.2320442 L86.465374,76.0331492 L85.6620499,76.0331492 L85.6620499,75.7127072 C85.5013851,75.8729281 85.3407202,76.1933702 84.8587257,76.1933702 C84.2160665,76.1933702 83.8947368,75.8729281 83.8947368,75.0718232 L83.8947368,73.4696132 L84.8587257,73.4696132 L84.8587257,74.9116022 C84.8587257,75.2320442 85.0193905,75.5524861 85.3407202,75.5524862 C85.501385,75.5524862 85.6620499,75.3922652 85.6620499,75.2320442 L85.6620499,73.4696132 L86.6260388,73.4696132 L86.6260388,75.2320442 L86.465374,75.2320442 Z M89.8393352,72.1878453 L89.8393352,76.0331492 L89.0360111,76.0331492 L89.0360111,75.7127072 C88.8753463,76.0331492 88.5540166,76.1933702 88.232687,76.1933702 C87.5900277,76.1933702 87.1080332,75.5524862 87.1080332,74.7513812 C87.1080332,73.7900552 87.7506925,73.3093923 88.3933518,73.3093923 C88.7146815,73.3093923 89.0360111,73.4696132 89.0360111,73.6298343 L89.0360111,72.1878453 L89.8393352,72.1878453 L89.8393352,72.1878453 Z M89.0360111,74.4309392 C89.0360111,74.1104972 88.8753463,73.9502762 88.5540166,73.9502762 C88.232687,73.9502762 87.9113574,74.2707182 87.9113574,74.7513812 C87.9113574,75.2320442 88.0720222,75.5524862 88.3933518,75.5524862 C88.5540166,75.5524862 88.8753463,75.3922652 88.8753463,75.2320442 L88.8753463,74.4309392 L89.0360111,74.4309392 Z" id="形状" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
-                    <path d="M77.3074792,78.7569061 L77.468144,80.038674 C77.468144,80.359116 77.6288088,80.679558 77.6288088,81 C77.6288088,80.679558 77.7894736,80.359116 77.7894737,80.038674 L78.1108033,78.7569061 L78.9141274,78.7569061 L79.2354571,80.038674 C79.3961219,80.359116 79.3961219,80.679558 79.3961219,81 C79.3961219,80.679558 79.5567867,80.359116 79.5567867,80.038674 L79.8781163,78.7569061 L80.8421053,78.7569061 L79.8781163,81.801105 L79.0747922,81.801105 L78.7534626,80.839779 C78.7534626,80.519337 78.5927978,80.1988951 78.5927978,79.8784531 C78.5927978,80.1988951 78.432133,80.519337 78.432133,80.839779 L78.1108033,81.961326 L77.1468144,81.961326 L76.1828255,78.9171271 L77.3074792,78.9171271 L77.3074792,78.7569061 Z M84.2160665,80.359116 C84.2160665,81.480663 83.4127424,81.961326 82.6094183,81.961326 C81.6454294,81.961326 81.0027701,81.320442 81.0027701,80.359116 C81.0027701,79.3977901 81.6454293,78.7569061 82.6094183,78.7569061 C83.5734073,78.7569061 84.2160665,79.39779 84.2160665,80.359116 Z M81.966759,80.359116 C81.966759,80.839779 82.1274238,81.320442 82.6094183,81.320442 C82.930748,81.320442 83.0914128,80.839779 83.0914128,80.359116 C83.0914128,79.8784531 82.930748,79.3977901 82.6094183,79.3977901 C82.1274238,79.3977901 81.966759,79.8784531 81.966759,80.359116 Z M84.6980609,79.718232 L84.6980609,78.7569061 L85.5013851,78.7569061 L85.5013851,79.237569 C85.6620499,78.7569061 85.9833795,78.5966851 86.3047091,78.5966851 L86.465374,78.5966851 L86.465374,79.3977901 L86.1440443,79.3977901 C85.8227147,79.3977901 85.5013851,79.558011 85.5013851,79.8784531 L85.5013851,81.480663 L84.5373961,81.480663 L84.5373961,79.718232 L84.6980609,79.718232 Z M90,77.4751381 L90,81.961326 L89.1966759,81.961326 L89.1966759,81.480663 C89.0360111,81.801105 88.7146814,81.961326 88.232687,81.961326 C87.4293628,81.961326 86.9473684,81.320442 86.9473684,80.359116 C86.9473684,79.3977901 87.5900277,78.7569061 88.232687,78.7569061 C88.5540166,78.7569061 88.8753462,78.917127 89.0360111,79.0773481 L89.0360111,77.4751381 L90,77.4751381 Z M89.0360111,80.038674 L89.0360111,79.8784531 C89.0360111,79.7182321 88.8753463,79.3977901 88.5540166,79.3977901 C88.0720222,79.3977901 87.9113574,79.7182321 87.9113574,80.198895 C87.9113574,80.6795579 88.0720222,81 88.5540166,81 C88.7146814,81 89.0360111,80.839779 89.0360111,80.679558 L89.0360111,80.038674 Z" id="形状" fill="url(#linearGradient-14)" opacity="0.604724702"></path>
+                    <path d="M43.8921283,57.3939394 L44.6209913,61.6414141 C44.7667638,62.6666666 45.058309,63.8383838 45.2040816,64.8636364 C45.3498542,63.8383839 45.6413994,62.6666667 45.9329446,61.6414141 L46.9533528,57.3939394 L49.4314869,57.3939394 L50.451895,61.4949495 C50.7434402,62.6666667 51.0349854,63.6919192 51.180758,64.8636364 C51.3265306,63.8383839 51.4723032,62.6666667 51.7638484,61.4949495 L52.638484,57.3939394 L55.5539359,57.3939394 L52.4927114,67.5 L49.5772595,67.5 L48.7026239,63.9848485 C48.4110787,62.959596 48.2653061,62.0808081 48.1195335,60.9090909 C47.973761,62.0808081 47.6822157,63.1060606 47.5364431,63.9848485 L46.516035,67.5 L43.600583,67.5 L40.6851312,57.3939394 L43.8921283,57.3939394 Z M66.1953353,62.3737374 C66.1953353,66.1818182 63.5714286,67.6464646 61.0932944,67.6464646 C58.1778425,67.6464646 56.1370262,65.7424242 56.1370262,62.520202 C56.1370262,59.1515151 58.3236151,57.2474747 61.2390671,57.2474747 C64.3002916,57.2474747 66.1953353,59.2979798 66.1953353,62.3737374 Z M59.3440233,62.520202 C59.3440233,64.2777777 59.9271136,65.5959596 61.2390671,65.5959596 C62.4052478,65.5959596 62.9883382,64.2777777 62.9883382,62.520202 C62.9883382,61.0555555 62.5510204,59.4444444 61.2390671,59.4444444 C59.7813411,59.4444444 59.3440233,61.0555555 59.3440233,62.520202 Z M68.090379,60.6161616 C68.090379,59.2979798 68.090379,58.2727273 67.9446064,57.3939394 L70.5685131,57.3939394 L70.7142857,59.1515152 L70.8600583,59.1515152 C71.4431487,57.8333333 72.4635569,57.2474747 73.483965,57.2474747 L74.212828,57.2474747 L74.212828,60.030303 L73.483965,60.030303 C72.4635569,60.030303 71.5889213,60.6161616 71.4431487,61.4949495 C71.4431487,61.6414141 71.2973761,61.9343434 71.2973761,62.2272727 L71.2973761,67.3535353 L68.2361516,67.3535353 L68.2361516,60.6161616 L68.090379,60.6161616 Z M84.8542274,53 L84.8542274,64.4242424 C84.8542274,65.4494949 84.8542274,66.6212121 85,67.3535353 L82.2303207,67.3535353 L82.0845481,66.0353535 C81.5014577,67.060606 80.3352769,67.6464646 79.1690962,67.6464646 C76.8367347,67.6464646 75.0874635,65.4494949 75.0874635,62.520202 C75.0874635,59.1515151 77.1282799,57.2474747 79.3148688,57.2474747 C80.4810496,57.2474747 81.3556852,57.6868686 81.7930029,58.4191919 L81.7930029,53 L84.8542274,53 Z M81.7930029,61.6414141 L81.7930029,61.0555555 C81.6472304,60.3232323 81.0641399,59.5909091 80.1895044,59.5909091 C78.877551,59.5909091 78.148688,60.9090909 78.148688,62.520202 C78.148688,64.2777777 78.877551,65.3030303 80.0437318,65.3030303 C80.7725948,65.3030303 81.5014577,64.8636364 81.6472303,63.9848485 C81.6472303,63.8383839 81.7930029,63.5454545 81.7930029,63.2525252 L81.7930029,61.6414141 Z M41.2682216,81.5606061 C40.8309038,81.7070707 40.1020408,81.8535353 39.2274052,81.8535353 C36.6034985,81.8535353 35,80.2424242 35,77.4595959 C35,74.9696969 36.6034986,72.9191919 39.664723,72.9191919 C40.2478133,72.9191919 40.9766763,73.0656565 41.4139941,73.2121212 L40.9766763,75.2626262 C40.6851311,75.1161616 40.2478133,74.9696969 39.664723,74.969697 C38.3527696,74.969697 37.4781341,75.9949495 37.4781341,77.4595959 C37.4781341,79.070707 38.3527696,79.9494949 39.664723,79.9494949 C40.2478133,79.9494949 40.6851311,79.8030303 40.9766763,79.6565656 L41.2682216,81.5606061 Z M42.4344023,69.4040404 L45.058309,69.4040404 L45.058309,81.8535353 L42.4344023,81.8535353 L42.4344023,69.4040404 L42.4344023,69.4040404 Z M54.5335277,77.3131313 C54.5335277,80.5353535 52.3469387,81.8535353 50.451895,81.8535353 C48.1195335,81.8535353 46.3702624,80.2424242 46.3702624,77.4595959 C46.3702624,74.530303 48.1195335,72.9191919 50.5976676,72.9191919 C52.9300291,72.9191919 54.5335277,74.6767677 54.5335277,77.3131313 Z M48.9941691,77.4595959 C48.9941691,78.9242424 49.4314869,80.0959596 50.5976676,80.0959596 C51.6180757,80.0959596 52.0553936,78.9242424 52.0553936,77.4595959 C52.0553936,76.2878787 51.6180758,74.8232323 50.5976676,74.8232323 C49.4314868,74.8232323 48.9941691,76.1414141 48.9941691,77.4595959 Z M63.425656,79.070707 L63.425656,81.8535353 L61.3848396,81.8535353 L61.2390671,80.6818182 C60.9475219,81.2676767 60.0728863,82 58.7609329,82 C57.0116618,82 55.9912537,80.8282828 55.9912537,78.3383838 L55.9912537,73.2121212 L58.4693877,73.2121212 L58.4693877,77.8989899 C58.4693877,79.070707 58.7609329,79.8030302 59.6355685,79.8030303 C60.2186589,79.8030303 60.6559766,79.3636364 60.8017493,78.9242424 C60.8017493,78.7777778 60.9475219,78.4848485 60.9475219,78.3383838 L60.9475219,73.0656565 L63.5714286,73.0656565 L63.5714286,79.070707 L63.425656,79.070707 Z M72.9008746,69.4040404 L72.9008746,81.7070707 L70.7142857,81.7070707 L70.5685131,80.5353535 C70.1311953,81.4141414 69.1107872,81.8535353 68.090379,81.8535353 C66.1953353,81.8535353 64.7376093,80.0959596 64.7376093,77.4595959 C64.7376093,74.530303 66.3411079,72.9191919 68.2361516,72.9191919 C69.2565598,72.9191919 69.8396502,73.3585858 70.2769679,73.7979798 L70.2769679,69.2575758 L72.9008746,69.2575758 L72.9008746,69.4040404 Z M70.4227405,76.7272727 L70.4227405,76.2878788 C70.276968,75.5555555 69.8396502,75.1161616 69.1107872,75.1161616 C67.9446064,75.1161616 67.5072886,76.2878788 67.5072886,77.6060606 C67.5072886,79.070707 68.090379,79.9494949 69.1107872,79.9494949 C69.6938775,79.9494949 70.276968,79.510101 70.4227405,78.7777777 L70.4227405,76.7272727 L70.4227405,76.7272727 Z" id="形状" fill="url(#linearGradient-4)"></path>
+                    <path d="M78.5927978,76.0331492 C78.432133,76.0331492 78.1108033,76.1933702 77.7894737,76.1933702 C76.8254848,76.1933702 76.3434903,75.7127072 76.3434903,74.7513812 C76.3434903,73.9502762 76.9861496,73.3093923 77.9501385,73.3093923 C78.1108033,73.3093923 78.432133,73.3093923 78.5927978,73.4696132 L78.432133,74.1104973 L77.9501385,74.1104973 C77.468144,74.1104973 77.1468144,74.4309393 77.1468144,74.9116022 C77.1468144,75.3922651 77.468144,75.7127072 77.9501385,75.7127072 L78.432133,75.7127072 L78.5927978,76.0331492 L78.5927978,76.0331492 Z M79.0747922,72.1878453 L80.0387811,72.1878453 L80.0387811,76.0331492 L79.0747922,76.0331492 L79.0747922,72.1878453 Z M83.4127424,74.5911602 C83.4127424,75.5524862 82.6094182,76.0331492 81.966759,76.0331492 C81.1634348,76.0331492 80.5207756,75.5524862 80.5207756,74.5911602 C80.5207756,73.6298343 81.1634348,73.1491713 81.966759,73.1491713 C82.7700831,73.3093923 83.4127424,73.7900552 83.4127424,74.5911602 Z M81.4847645,74.7513812 C81.4847645,75.2320442 81.6454293,75.5524862 81.966759,75.5524862 C82.2880886,75.5524862 82.4487534,75.2320442 82.4487534,74.7513812 C82.4487534,74.4309392 82.2880886,73.9502762 81.966759,73.9502762 C81.4847645,73.9502762 81.4847645,74.2707182 81.4847645,74.7513812 Z M86.465374,75.2320442 L86.465374,76.0331492 L85.6620499,76.0331492 L85.6620499,75.7127072 C85.5013851,75.8729281 85.3407202,76.1933702 84.8587257,76.1933702 C84.2160665,76.1933702 83.8947368,75.8729281 83.8947368,75.0718232 L83.8947368,73.4696132 L84.8587257,73.4696132 L84.8587257,74.9116022 C84.8587257,75.2320442 85.0193905,75.5524861 85.3407202,75.5524862 C85.501385,75.5524862 85.6620499,75.3922652 85.6620499,75.2320442 L85.6620499,73.4696132 L86.6260388,73.4696132 L86.6260388,75.2320442 L86.465374,75.2320442 Z M89.8393352,72.1878453 L89.8393352,76.0331492 L89.0360111,76.0331492 L89.0360111,75.7127072 C88.8753463,76.0331492 88.5540166,76.1933702 88.232687,76.1933702 C87.5900277,76.1933702 87.1080332,75.5524862 87.1080332,74.7513812 C87.1080332,73.7900552 87.7506925,73.3093923 88.3933518,73.3093923 C88.7146815,73.3093923 89.0360111,73.4696132 89.0360111,73.6298343 L89.0360111,72.1878453 L89.8393352,72.1878453 L89.8393352,72.1878453 Z M89.0360111,74.4309392 C89.0360111,74.1104972 88.8753463,73.9502762 88.5540166,73.9502762 C88.232687,73.9502762 87.9113574,74.2707182 87.9113574,74.7513812 C87.9113574,75.2320442 88.0720222,75.5524862 88.3933518,75.5524862 C88.5540166,75.5524862 88.8753463,75.3922652 88.8753463,75.2320442 L88.8753463,74.4309392 L89.0360111,74.4309392 Z" id="形状" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
+                    <path d="M77.3074792,78.7569061 L77.468144,80.038674 C77.468144,80.359116 77.6288088,80.679558 77.6288088,81 C77.6288088,80.679558 77.7894736,80.359116 77.7894737,80.038674 L78.1108033,78.7569061 L78.9141274,78.7569061 L79.2354571,80.038674 C79.3961219,80.359116 79.3961219,80.679558 79.3961219,81 C79.3961219,80.679558 79.5567867,80.359116 79.5567867,80.038674 L79.8781163,78.7569061 L80.8421053,78.7569061 L79.8781163,81.801105 L79.0747922,81.801105 L78.7534626,80.839779 C78.7534626,80.519337 78.5927978,80.1988951 78.5927978,79.8784531 C78.5927978,80.1988951 78.432133,80.519337 78.432133,80.839779 L78.1108033,81.961326 L77.1468144,81.961326 L76.1828255,78.9171271 L77.3074792,78.9171271 L77.3074792,78.7569061 Z M84.2160665,80.359116 C84.2160665,81.480663 83.4127424,81.961326 82.6094183,81.961326 C81.6454294,81.961326 81.0027701,81.320442 81.0027701,80.359116 C81.0027701,79.3977901 81.6454293,78.7569061 82.6094183,78.7569061 C83.5734073,78.7569061 84.2160665,79.39779 84.2160665,80.359116 Z M81.966759,80.359116 C81.966759,80.839779 82.1274238,81.320442 82.6094183,81.320442 C82.930748,81.320442 83.0914128,80.839779 83.0914128,80.359116 C83.0914128,79.8784531 82.930748,79.3977901 82.6094183,79.3977901 C82.1274238,79.3977901 81.966759,79.8784531 81.966759,80.359116 Z M84.6980609,79.718232 L84.6980609,78.7569061 L85.5013851,78.7569061 L85.5013851,79.237569 C85.6620499,78.7569061 85.9833795,78.5966851 86.3047091,78.5966851 L86.465374,78.5966851 L86.465374,79.3977901 L86.1440443,79.3977901 C85.8227147,79.3977901 85.5013851,79.558011 85.5013851,79.8784531 L85.5013851,81.480663 L84.5373961,81.480663 L84.5373961,79.718232 L84.6980609,79.718232 Z M90,77.4751381 L90,81.961326 L89.1966759,81.961326 L89.1966759,81.480663 C89.0360111,81.801105 88.7146814,81.961326 88.232687,81.961326 C87.4293628,81.961326 86.9473684,81.320442 86.9473684,80.359116 C86.9473684,79.3977901 87.5900277,78.7569061 88.232687,78.7569061 C88.5540166,78.7569061 88.8753462,78.917127 89.0360111,79.0773481 L89.0360111,77.4751381 L90,77.4751381 Z M89.0360111,80.038674 L89.0360111,79.8784531 C89.0360111,79.7182321 88.8753463,79.3977901 88.5540166,79.3977901 C88.0720222,79.3977901 87.9113574,79.7182321 87.9113574,80.198895 C87.9113574,80.6795579 88.0720222,81 88.5540166,81 C88.7146814,81 89.0360111,80.839779 89.0360111,80.679558 L89.0360111,80.038674 Z" id="形状" fill="url(#linearGradient-6)" opacity="0.604724702"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/chart.svg b/examples/sites/demos/pc/overviewimage/chart.svg
index 4804630f33..186eb394ef 100644
--- a/examples/sites/demos/pc/overviewimage/chart.svg
+++ b/examples/sites/demos/pc/overviewimage/chart.svg
@@ -2,83 +2,41 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Chart 基本用法</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.6204972%" y1="86.8386573%" x2="95.1231838%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.6204972%" y1="86.8386573%" x2="95.1231838%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.0892284%" y1="86.8386573%" x2="62.1606399%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.0892284%" y1="86.8386573%" x2="62.1606399%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.2232332%" y1="86.8386573%" x2="100.42746%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="46.2232332%" y1="86.8386573%" x2="100.42746%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.4821325%" y1="86.8386573%" x2="56.9145764%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="49.4821325%" y1="86.8386573%" x2="56.9145764%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -334.000000)">
             <g id="编组-17" transform="translate(598.000000, 301.000000)">
                 <g id="Chart-基本用法" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="说明" transform="translate(40.000000, 45.000000)">
-                        <rect id="矩形备份-6" fill="url(#linearGradient-9)" opacity="0.204287574" x="0" y="0" width="28" height="37" rx="4"></rect>
-                        <path d="M11.7752734,20 C8.82473155,20.4956338 6.49506187,22.8260384 6,25.7772097 L11.7752734,25.7772097 L11.7752734,20 Z M14.1268173,20.0002691 L14.1268173,28.1257787 L11.7752734,28.1257787 L6.0000269,28.1257787 C6.55933919,31.460933 9.45886815,34 12.9499153,34 C16.8431734,34 20,30.8460328 20,26.9509022 C20,23.4601526 17.4599021,20.5607029 14.1268173,20.0002691 Z" id="形状" fill="url(#linearGradient-10)"></path>
+                        <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="0" y="0" width="28" height="37" rx="4"></rect>
+                        <path d="M11.7752734,20 C8.82473155,20.4956338 6.49506187,22.8260384 6,25.7772097 L11.7752734,25.7772097 L11.7752734,20 Z M14.1268173,20.0002691 L14.1268173,28.1257787 L11.7752734,28.1257787 L6.0000269,28.1257787 C6.55933919,31.460933 9.45886815,34 12.9499153,34 C16.8431734,34 20,30.8460328 20,26.9509022 C20,23.4601526 17.4599021,20.5607029 14.1268173,20.0002691 Z" id="形状" fill="url(#linearGradient-2)"></path>
                         <rect id="矩形" fill="#5073E5" x="6" y="12" width="22" height="4" rx="2"></rect>
                         <rect id="矩形备份-4" fill="#5073E5" x="6" y="3" width="15" height="4" rx="2"></rect>
                     </g>
-                    <rect id="矩形" fill="url(#linearGradient-11)" opacity="0.204287574" x="75" y="53" width="11" height="28" rx="2"></rect>
-                    <rect id="矩形" stroke="url(#linearGradient-12)" stroke-width="4" x="39" y="40" width="36" height="45" rx="3"></rect>
-                    <path d="M77.894627,53 L79.894627,53 L83,53 C84.6568542,53 86,54.1456243 86,55.5588235 L86,79.4411765 C86,80.8543757 84.6568542,82 83,82 L77.4091284,82 L79.4091284,82" id="路径" stroke="url(#linearGradient-13)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <rect id="矩形" fill="url(#linearGradient-3)" opacity="0.204287574" x="75" y="53" width="11" height="28" rx="2"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-4)" stroke-width="4" x="39" y="40" width="36" height="45" rx="3"></rect>
+                    <path d="M77.894627,53 L79.894627,53 L83,53 C84.6568542,53 86,54.1456243 86,55.5588235 L86,79.4411765 C86,80.8543757 84.6568542,82 83,82 L77.4091284,82 L79.4091284,82" id="路径" stroke="url(#linearGradient-5)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/checkbox-group.svg b/examples/sites/demos/pc/overviewimage/checkbox-group.svg
deleted file mode 100644
index 1a5c1cbfe4..0000000000
--- a/examples/sites/demos/pc/overviewimage/checkbox-group.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>CheckboxGroup复选框</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-10" x="38" y="38" width="11" height="11"></rect>
-        <filter x="-36.4%" y="-18.2%" width="172.7%" height="172.7%" filterUnits="objectBoundingBox" id="filter-11">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-12">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M50.6685,7 C46.7165,9.37717265 43.85,12.3789108 42.5565,13.8829664 L39.3975,11.4548088 L38,12.5573581 L43.4535,18 C44.3895,15.6419467 47.3665,11.0341831 51,7.75840093 L50.6685,7" id="path-13"></path>
-        <filter x="-36.6%" y="-24.7%" width="172.0%" height="187.7%" filterUnits="objectBoundingBox" id="filter-14">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1089.000000, -816.000000)">
-            <g id="CheckboxGroup复选框" transform="translate(1089.000000, 816.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="编组-5" transform="translate(34.000000, 35.000000)">
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.604724702" x="0" y="0" width="25" height="25"></rect>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="31" y="31" width="25" height="25"></rect>
-                    <g id="矩形" transform="translate(43.500000, 43.500000) rotate(-180.000000) translate(-43.500000, -43.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
-                    </g>
-                    <path d="M25,31 L25,56 L0,56 L0,31 L25,31 Z M5,36 L5,51 L20,51 L20,36 L5,36 Z" id="形状结合" stroke="url(#linearGradient-9)" fill="url(#linearGradient-12)"></path>
-                    <rect id="形状结合备份-22" stroke="url(#linearGradient-9)" fill="url(#linearGradient-12)" x="31" y="0" width="25" height="25"></rect>
-                    <g id="路径" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-13"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/checkbox.svg b/examples/sites/demos/pc/overviewimage/checkbox.svg
index 645ba63991..80d0993ea6 100644
--- a/examples/sites/demos/pc/overviewimage/checkbox.svg
+++ b/examples/sites/demos/pc/overviewimage/checkbox.svg
@@ -2,70 +2,38 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Checkbox复选框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <rect id="path-9" x="0" y="0" width="58" height="58" rx="2"></rect>
-        <filter x="-6.9%" y="-3.4%" width="113.8%" height="113.8%" filterUnits="objectBoundingBox" id="filter-10">
+        <rect id="path-1" x="0" y="0" width="58" height="58" rx="2"></rect>
+        <filter x="-6.9%" y="-3.4%" width="113.8%" height="113.8%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="96.7111184%" y1="0%" x2="-21.070424%" y2="129.725191%" id="linearGradient-11">
+        <linearGradient x1="96.7111184%" y1="0%" x2="-21.070424%" y2="129.725191%" id="linearGradient-3">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
             <stop stop-color="#E6ECF5" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-12" x="9" y="9" width="40" height="40" rx="2"></rect>
-        <filter x="-2.5%" y="-2.5%" width="105.0%" height="105.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <rect id="path-4" x="9" y="9" width="40" height="40" rx="2"></rect>
+        <filter x="-2.5%" y="-2.5%" width="105.0%" height="105.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
             <feGaussianBlur stdDeviation="0.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.442176645   0 0 0 0 0.54129612   0 0 0 0 0.871694371  0 0 0 0.509328562 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="79.1871067%" x2="128.792906%" y2="-24.3369076%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="79.1871067%" x2="128.792906%" y2="-24.3369076%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="79.1871067%" x2="128.792906%" y2="-24.3369076%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="79.1871067%" x2="128.792906%" y2="-24.3369076%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-16">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-8">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-17" cx="69" cy="82" r="7"></circle>
-        <filter x="-50.0%" y="-35.7%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-18">
+        <circle id="path-9" cx="69" cy="82" r="7"></circle>
+        <filter x="-50.0%" y="-35.7%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-10">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -73,42 +41,32 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-53.6%" y="-39.3%" width="207.1%" height="207.1%" filterUnits="objectBoundingBox" id="filter-19">
+        <filter x="-53.6%" y="-39.3%" width="207.1%" height="207.1%" filterUnits="objectBoundingBox" id="filter-11">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1873.000000, -328.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1873.000000, -328.000000)">
             <g id="Checkbox复选框" transform="translate(1873.000000, 328.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-6" transform="translate(34.000000, 34.000000)">
                     <g id="矩形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-1"></use>
                     </g>
                     <g id="矩形" transform="translate(29.000000, 29.000000) rotate(-180.000000) translate(-29.000000, -29.000000) ">
-                        <use fill="url(#linearGradient-11)" fill-rule="evenodd" xlink:href="#path-12"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                        <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
                     </g>
-                    <path d="M24.4677469,31.0637312 L17.6427469,25.7495816 L14.6234568,29.0884941 L26.4057099,41 C28.4279321,35.8392773 34.8597222,25.7549461 42.7098765,18.5857259 L41.9936728,16 C33.4554012,21.2025664 27.2623457,27.772027 24.4677469,31.0637312 Z" id="路径" stroke="url(#linearGradient-15)" fill="url(#linearGradient-14)"></path>
+                    <path d="M24.4677469,31.0637312 L17.6427469,25.7495816 L14.6234568,29.0884941 L26.4057099,41 C28.4279321,35.8392773 34.8597222,25.7549461 42.7098765,18.5857259 L41.9936728,16 C33.4554012,21.2025664 27.2623457,27.772027 24.4677469,31.0637312 Z" id="路径" stroke="url(#linearGradient-7)" fill="url(#linearGradient-6)"></path>
                 </g>
                 <g id="椭圆形">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-17"></use>
-                    <circle stroke="url(#linearGradient-16)" stroke-width="4" stroke-linejoin="square" cx="69" cy="82" r="5"></circle>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-9"></use>
+                    <circle stroke="url(#linearGradient-8)" stroke-width="4" stroke-linejoin="square" cx="69" cy="82" r="5"></circle>
                 </g>
                 <polygon id="路径-2" fill="#000000" points="68.7129876 81.8022814 67.2754034 95.814413 71.9449685 93.9202277 74.4194729 100.802281 76.8096817 99.7804537 74.2116343 92.9762941 78.8108161 91.4874666"></polygon>
                 <g id="对勾" transform="translate(48.623457, 50.000000)"></g>
diff --git a/examples/sites/demos/pc/overviewimage/checkgroup.svg b/examples/sites/demos/pc/overviewimage/checkgroup.svg
deleted file mode 100644
index a2593b7149..0000000000
--- a/examples/sites/demos/pc/overviewimage/checkgroup.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Checkgroup复选框</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-10" x="38" y="38" width="11" height="11"></rect>
-        <filter x="-36.4%" y="-18.2%" width="172.7%" height="172.7%" filterUnits="objectBoundingBox" id="filter-11">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-12">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M50.6685,7 C46.7165,9.37717265 43.85,12.3789108 42.5565,13.8829664 L39.3975,11.4548088 L38,12.5573581 L43.4535,18 C44.3895,15.6419467 47.3665,11.0341831 51,7.75840093 L50.6685,7" id="path-13"></path>
-        <filter x="-36.6%" y="-24.7%" width="172.0%" height="187.7%" filterUnits="objectBoundingBox" id="filter-14">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-697.000000, -816.000000)">
-            <g id="Checkgroup复选框" transform="translate(697.000000, 816.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="编组-5" transform="translate(35.000000, 35.000000)">
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.604724702" x="0" y="0" width="25" height="25"></rect>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="31" y="31" width="25" height="25"></rect>
-                    <g id="矩形" transform="translate(43.500000, 43.500000) rotate(-180.000000) translate(-43.500000, -43.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
-                    </g>
-                    <path d="M25,31 L25,56 L0,56 L0,31 L25,31 Z M5,36 L5,51 L20,51 L20,36 L5,36 Z" id="形状结合" stroke="url(#linearGradient-9)" fill="url(#linearGradient-12)"></path>
-                    <rect id="形状结合备份-22" stroke="url(#linearGradient-9)" fill="url(#linearGradient-12)" x="31" y="0" width="25" height="25"></rect>
-                    <g id="路径" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-13"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/collapse.svg b/examples/sites/demos/pc/overviewimage/collapse.svg
index cd3dba4440..dee26bd3cf 100644
--- a/examples/sites/demos/pc/overviewimage/collapse.svg
+++ b/examples/sites/demos/pc/overviewimage/collapse.svg
@@ -2,56 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Collapse 折叠面板</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="60.1784653%" x2="128.792906%" y2="24.0763741%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="60.1784653%" x2="128.792906%" y2="24.0763741%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.9139954%" x2="128.792906%" y2="42.5783187%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="52.9139954%" x2="128.792906%" y2="42.5783187%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.9139954%" x2="128.792906%" y2="42.5783187%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="52.9139954%" x2="128.792906%" y2="42.5783187%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-13" points="68 81 80 81 74 88"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
+        <polygon id="path-5" points="68 81 80 81 74 88"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -59,77 +27,40 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-15">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-7">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <path d="M34,38 L86,38 C87.1045695,38 88,38.8954305 88,40 C88,41.1045695 87.1045695,42 86,42 L34,42 C32.8954305,42 32,41.1045695 32,40 C32,38.8954305 32.8954305,38 34,38 Z" id="path-16"></path>
-        <filter x="-7.1%" y="-50.0%" width="114.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-17">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M34,49 L67,49 C68.1045695,49 69,49.8954305 69,51 C69,52.1045695 68.1045695,53 67,53 L34,53 C32.8954305,53 32,52.1045695 32,51 C32,49.8954305 32.8954305,49 34,49 Z" id="path-18"></path>
-        <filter x="-10.9%" y="-50.0%" width="122.3%" height="300.0%" filterUnits="objectBoundingBox" id="filter-19">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.2668259%" x2="128.792906%" y2="49.3204186%" id="linearGradient-20">
+        <linearGradient x1="44.0988019%" y1="50.2668259%" x2="128.792906%" y2="49.3204186%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M34,60 L77,60 C78.1045695,60 79,60.8954305 79,62 C79,63.1045695 78.1045695,64 77,64 L34,64 C32.8954305,64 32,63.1045695 32,62 C32,60.8954305 32.8954305,60 34,60 Z" id="path-21"></path>
-        <filter x="-8.5%" y="-50.0%" width="117.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-22">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M119.095831,64.1170423 C119.648116,64.1170423 120.095831,64.5647576 120.095831,65.1170423 C120.095831,65.3999726 119.97598,65.6696616 119.765982,65.8592675 L113.144185,71.8380483 C112.734265,72.2081623 112.101923,72.1758934 111.731809,71.7659738 C111.565885,71.5822046 111.474034,71.3434154 111.474034,71.0958232 L111.473958,68.1400423 L75.8829577,68.1403713 C74.7783882,68.1403713 73.8829577,67.2449408 73.8829577,66.1403713 C73.8829577,65.0358018 74.7783882,64.1403713 75.8829577,64.1403713 L111.473958,64.1400423 L111.474034,64.1170423 L119.095831,64.1170423 Z" id="path-23"></path>
-        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-24">
+        <path d="M119.095831,64.1170423 C119.648116,64.1170423 120.095831,64.5647576 120.095831,65.1170423 C120.095831,65.3999726 119.97598,65.6696616 119.765982,65.8592675 L113.144185,71.8380483 C112.734265,72.2081623 112.101923,72.1758934 111.731809,71.7659738 C111.565885,71.5822046 111.474034,71.3434154 111.474034,71.0958232 L111.473958,68.1400423 L75.8829577,68.1403713 C74.7783882,68.1403713 73.8829577,67.2449408 73.8829577,66.1403713 C73.8829577,65.0358018 74.7783882,64.1403713 75.8829577,64.1403713 L111.473958,64.1400423 L111.474034,64.1170423 L119.095831,64.1170423 Z" id="path-9"></path>
+        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-10">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】" transform="translate(-1481.000000, -332.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1481.000000, -332.000000)">
             <g id="Collapse-折叠面板" transform="translate(1481.000000, 332.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M26,30 L100,30 C101.104569,30 102,30.8954305 102,32 L102,69 C102,70.1045695 101.104569,71 100,71 L26,71 C24.8954305,71 24,70.1045695 24,69 L24,32 C24,30.8954305 24.8954305,30 26,30 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <rect id="矩形-2" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="24" y="75" width="64" height="18" rx="4"></rect>
+                <g id="编组"></g>
+                <path d="M26,30 L100,30 C101.104569,30 102,30.8954305 102,32 L102,69 C102,70.1045695 101.104569,71 100,71 L26,71 C24.8954305,71 24,70.1045695 24,69 L24,32 C24,30.8954305 24.8954305,30 26,30 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                <rect id="矩形-2" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)" x="24" y="75" width="64" height="18" rx="4"></rect>
                 <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                    <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M75.5602428,83.0419994 L74,84.8622826 L72.4397572,83.0419994 L75.5602428,83.0419994 Z" stroke-linejoin="square"></path>
-                </g>
-                <g id="形状结合备份">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
-                </g>
-                <g id="形状结合备份-35">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
-                </g>
-                <g id="形状结合备份-36" opacity="0.303770519">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                    <use fill="url(#linearGradient-20)" fill-rule="evenodd" xlink:href="#path-21"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
+                    <path stroke="url(#linearGradient-4)" stroke-width="4.0839988" d="M75.5602428,83.0419994 L74,84.8622826 L72.4397572,83.0419994 L75.5602428,83.0419994 Z" stroke-linejoin="square"></path>
                 </g>
+                <path d="M34,38 L86,38 C87.1045695,38 88,38.8954305 88,40 C88,41.1045695 87.1045695,42 86,42 L34,42 C32.8954305,42 32,41.1045695 32,40 C32,38.8954305 32.8954305,38 34,38 Z" id="形状结合备份" fill="#5073E5"></path>
+                <path d="M34,49 L67,49 C68.1045695,49 69,49.8954305 69,51 C69,52.1045695 68.1045695,53 67,53 L34,53 C32.8954305,53 32,52.1045695 32,51 C32,49.8954305 32.8954305,49 34,49 Z" id="形状结合备份-35" fill="#5073E5"></path>
+                <path d="M34,60 L77,60 C78.1045695,60 79,60.8954305 79,62 C79,63.1045695 78.1045695,64 77,64 L34,64 C32.8954305,64 32,63.1045695 32,62 C32,60.8954305 32.8954305,60 34,60 Z" id="形状结合备份-36" fill="url(#linearGradient-8)" opacity="0.303770519"></path>
                 <g id="形状结合备份-11" transform="translate(96.989394, 68.106437) scale(1, -1) rotate(-90.000000) translate(-96.989394, -68.106437) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-24)" xlink:href="#path-23"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-23"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/color-picker.svg b/examples/sites/demos/pc/overviewimage/color-picker.svg
index 133a57c797..00bbd87cc7 100644
--- a/examples/sites/demos/pc/overviewimage/color-picker.svg
+++ b/examples/sites/demos/pc/overviewimage/color-picker.svg
@@ -2,113 +2,71 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>ColorPicker 色彩选择器</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="72.2851137%" x2="128.792906%" y2="-6.75815877%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="72.2851137%" x2="128.792906%" y2="-6.75815877%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4301394%" y1="86.8386573%" x2="97.6648446%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="46.4301394%" y1="86.8386573%" x2="97.6648446%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.5612396%" y1="86.8386573%" x2="82.5623746%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="47.5612396%" y1="86.8386573%" x2="82.5623746%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.8050074%" y1="86.8386573%" x2="65.9555635%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="48.8050074%" y1="86.8386573%" x2="65.9555635%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="77.065136%" x2="128.792906%" y2="-18.9324411%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="77.065136%" x2="128.792906%" y2="-18.9324411%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M62.9992531,89 C59.1332599,89 55.9992531,85.9049987 55.9992531,82.0871212 C55.9992531,78.2689394 62.9992531,69 62.9992531,69 C62.9992531,69 69.9992531,78.2727273 69.9992531,82.0871212 C69.9992531,85.9049987 66.8652464,89 62.9992531,89 Z" id="path-18"></path>
-        <filter x="-67.9%" y="-42.5%" width="235.7%" height="195.0%" filterUnits="objectBoundingBox" id="filter-19">
+        <path d="M62.9992531,89 C59.1332599,89 55.9992531,85.9049987 55.9992531,82.0871212 C55.9992531,78.2689394 62.9992531,69 62.9992531,69 C62.9992531,69 69.9992531,78.2727273 69.9992531,82.0871212 C69.9992531,85.9049987 66.8652464,89 62.9992531,89 Z" id="path-10"></path>
+        <filter x="-67.9%" y="-42.5%" width="235.7%" height="195.0%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-697.000000, -2259.000000)">
             <g id="编组-17备份-12" transform="translate(598.000000, 2226.000000)">
                 <g id="ColorPicker-色彩选择器" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M47,62.5 C47,71.0604137 53.9395864,78 62.5,78 C71.0604136,78 78,71.0604137 78,62.5 C78,56.9623835 75.0457168,51.8454146 70.2500001,49.0766063 C65.4542833,46.3077979 59.5457167,46.3077979 54.7499999,49.0766063 C49.9542832,51.8454146 47,56.9623835 47,62.5 L47,62.5 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <path d="M47,62.5 C47,71.0604137 53.9395864,78 62.5,78 C71.0604136,78 78,71.0604137 78,62.5 C78,56.9623835 75.0457168,51.8454146 70.2500001,49.0766063 C65.4542833,46.3077979 59.5457167,46.3077979 54.7499999,49.0766063 C49.9542832,51.8454146 47,56.9623835 47,62.5 L47,62.5 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <path d="M54.716434,45 C56.7024926,44.1302527 58.8276522,43.595596 61,43.4191537 L61,38 C57.879252,38.1937359 54.8250235,38.959825 52,40.257461 L52.0837809,40.3977728 L54.716434,45 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                    <path d="M46.4595943,51 C47.7010366,49.2650336 49.2382522,47.7649369 51,46.5692308 L48.5487197,42.1234114 L48.4828733,42 C45.9322264,43.6548764 43.7295851,45.7974295 42,48.3060201 L42.1137346,48.3752508 L46.4595943,51 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <path d="M39.6160791,60 L43.2274291,60 C43.4105887,57.7942622 44.0118692,55.6421017 45,53.6554456 L40.6212382,51.0653466 L40.5068787,51 C39.0503082,53.7968671 38.1967375,56.8612897 38,60 L39.6311264,60 L39.6160791,60 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
-                    <path d="M44.3756277,76.7941513 L47,74.19374 C44.8264827,71.2624605 43.5125669,67.7176234 43.221627,64 L38,64 C38.3057172,69.1271835 40.1182284,74.0235398 43.1824573,78 L43.2909273,77.8944483 L44.3756277,76.7941513 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
-                    <path d="M60,84.2905983 L60,80.6794872 C55.8957512,80.3436397 52.0205509,78.6985724 48.9767734,76 L46.2554928,78.47558 L45.1098556,79.5164835 L45,79.6141636 C49.0814309,83.3786077 54.3873292,85.6374476 60,86 L60,84.2905983 L60,84.2905983 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
-                    <path d="M76.7180536,78.3561151 L74.040687,76 C71.0234703,78.7763191 67.1302306,80.4675737 63,80.7961631 L63,86 C68.6359777,85.6588102 73.9591157,83.350415 78,79.4952039 L77.8558577,79.3663069 L76.7180536,78.3561151 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
-                    <path d="M83.8687304,57.4702145 L80.4313206,58.4233519 C81.3439911,63.667711 80.0984677,69.0707046 77,73.3081811 L77.0304465,73.3367752 L79.6488455,75.7958697 L80.7844999,76.8633836 L80.9306432,77 C84.2188026,72.6798999 86.0058925,67.3239238 86,61.8069897 C85.9996968,60.1930385 85.8477522,58.5830055 85.5463325,57 L85.342341,57.0571882 L83.8687304,57.4702145 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
-                    <path d="M63,39.7742902 L63,43.5260095 C70.1921904,44.1316404 76.3794869,49.0069446 78.830864,56 L83.7936043,54.6288133 L84,54.5716805 C80.9050483,45.1741613 72.6120462,38.6299242 63,38 L63,39.7647681 L63,39.7742902 Z" id="路径" fill="url(#linearGradient-15)" opacity="0.303770519"></path>
+                    <g id="编组"></g>
+                    <path d="M47,62.5 C47,71.0604137 53.9395864,78 62.5,78 C71.0604136,78 78,71.0604137 78,62.5 C78,56.9623835 75.0457168,51.8454146 70.2500001,49.0766063 C65.4542833,46.3077979 59.5457167,46.3077979 54.7499999,49.0766063 C49.9542832,51.8454146 47,56.9623835 47,62.5 L47,62.5 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                    <path d="M47,62.5 C47,71.0604137 53.9395864,78 62.5,78 C71.0604136,78 78,71.0604137 78,62.5 C78,56.9623835 75.0457168,51.8454146 70.2500001,49.0766063 C65.4542833,46.3077979 59.5457167,46.3077979 54.7499999,49.0766063 C49.9542832,51.8454146 47,56.9623835 47,62.5 L47,62.5 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                    <path d="M54.716434,45 C56.7024926,44.1302527 58.8276522,43.595596 61,43.4191537 L61,38 C57.879252,38.1937359 54.8250235,38.959825 52,40.257461 L52.0837809,40.3977728 L54.716434,45 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
+                    <path d="M46.4595943,51 C47.7010366,49.2650336 49.2382522,47.7649369 51,46.5692308 L48.5487197,42.1234114 L48.4828733,42 C45.9322264,43.6548764 43.7295851,45.7974295 42,48.3060201 L42.1137346,48.3752508 L46.4595943,51 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                    <path d="M39.6160791,60 L43.2274291,60 C43.4105887,57.7942622 44.0118692,55.6421017 45,53.6554456 L40.6212382,51.0653466 L40.5068787,51 C39.0503082,53.7968671 38.1967375,56.8612897 38,60 L39.6311264,60 L39.6160791,60 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.303770519"></path>
+                    <path d="M44.3756277,76.7941513 L47,74.19374 C44.8264827,71.2624605 43.5125669,67.7176234 43.221627,64 L38,64 C38.3057172,69.1271835 40.1182284,74.0235398 43.1824573,78 L43.2909273,77.8944483 L44.3756277,76.7941513 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.303770519"></path>
+                    <path d="M60,84.2905983 L60,80.6794872 C55.8957512,80.3436397 52.0205509,78.6985724 48.9767734,76 L46.2554928,78.47558 L45.1098556,79.5164835 L45,79.6141636 C49.0814309,83.3786077 54.3873292,85.6374476 60,86 L60,84.2905983 L60,84.2905983 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
+                    <path d="M76.7180536,78.3561151 L74.040687,76 C71.0234703,78.7763191 67.1302306,80.4675737 63,80.7961631 L63,86 C68.6359777,85.6588102 73.9591157,83.350415 78,79.4952039 L77.8558577,79.3663069 L76.7180536,78.3561151 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
+                    <path d="M83.8687304,57.4702145 L80.4313206,58.4233519 C81.3439911,63.667711 80.0984677,69.0707046 77,73.3081811 L77.0304465,73.3367752 L79.6488455,75.7958697 L80.7844999,76.8633836 L80.9306432,77 C84.2188026,72.6798999 86.0058925,67.3239238 86,61.8069897 C85.9996968,60.1930385 85.8477522,58.5830055 85.5463325,57 L85.342341,57.0571882 L83.8687304,57.4702145 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
+                    <path d="M63,39.7742902 L63,43.5260095 C70.1921904,44.1316404 76.3794869,49.0069446 78.830864,56 L83.7936043,54.6288133 L84,54.5716805 C80.9050483,45.1741613 72.6120462,38.6299242 63,38 L63,39.7647681 L63,39.7742902 Z" id="路径" fill="url(#linearGradient-7)" opacity="0.303770519"></path>
                     <g id="吸管" transform="translate(62.000000, 37.000000)">
                         <path d="M17.9107718,4.96355032 L2.42159851,20.1998982 C1.82279744,20.792671 1.46566277,21.5825904 1.4183069,22.4190036 L0.874666363,22.9564197 C-0.215245593,24.1211729 -0.179814403,25.9290019 0.954917917,27.0511476 C2.08965024,28.1732934 3.91840503,28.2089726 5.09704281,27.131961 L5.64373745,26.5945449 C6.49063343,26.550984 7.29082779,26.197441 7.88854517,25.6027406 L23.3761914,10.3679024 L17.9107718,4.96355032 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <path d="M24.1718001,0 C24.8009571,0 25.4041537,0.24757381 25.848534,0.688375722 L27.3038413,2.12551066 C28.2307789,3.04183517 28.232306,4.52727719 27.3068955,5.44511127 L23.9274672,8.78282703 L24.4802703,9.32930065 L24.608545,9.47120261 C25.0804018,10.0723098 25.0253994,10.9267378 24.4802703,11.4638687 L23.4097871,12.5205856 C22.8144805,13.109734 21.8490142,13.1110849 21.2520229,12.5236048 L21.2169001,12.4888841 L7.88854517,25.6042503 C7.3571213,26.1326087 6.66688112,26.4707581 5.92319311,26.5703914 L5.64373745,26.5960545 L5.09704281,27.1334705 C4.53929664,27.6899768 3.77907688,28.0021113 2.98661811,27.9999893 C1.82515802,27.9992423 0.769326902,27.3333385 0.279184125,26.2924226 C-0.210958652,25.2515067 -0.0466251643,24.0241375 0.700579234,23.1451191 L0.874666363,22.9579292 L1.4183069,22.4220228 C1.45953806,21.6777922 1.7466291,20.9713015 2.23071347,20.4067128 L2.42159851,20.2014078 L15.7530076,7.08302247 L15.6018267,6.93508208 L15.3376418,6.67392206 L15.2093671,6.5305105 C14.7378014,5.92956274 14.7921153,5.07566576 15.3361147,4.53784437 L16.4050708,3.48112748 C17.0013953,2.89180864 17.9680375,2.89180864 18.564362,3.48112748 L19.1156379,4.02760105 L22.4935391,0.688375722 C22.9381393,0.247484176 23.5420512,0 24.1718001,0 L24.1718001,0 Z M16.8311261,8.15181612 L3.50124411,21.2671823 C3.21568013,21.5509862 3.02784928,21.9147987 2.96371191,22.305784 L2.9423328,22.503541 L2.91026412,23.0802065 L1.95583906,24.0237037 C1.42490998,24.5633114 1.40210221,25.4154996 1.90342485,25.9821053 C2.40474748,26.5487109 3.26216841,26.6398205 3.87385166,26.1914829 L4.01892426,26.0646769 L4.97945762,25.1166509 L5.56432931,25.086459 C5.96595136,25.0653246 6.34772139,24.9204035 6.66077279,24.6667914 L6.81195371,24.5324374 L20.1357274,11.4200905 L16.8311261,8.1487969 L16.8311261,8.15181612 Z" id="形状" stroke="url(#linearGradient-9)" fill="url(#linearGradient-16)"></path>
+                        <path d="M24.1718001,0 C24.8009571,0 25.4041537,0.24757381 25.848534,0.688375722 L27.3038413,2.12551066 C28.2307789,3.04183517 28.232306,4.52727719 27.3068955,5.44511127 L23.9274672,8.78282703 L24.4802703,9.32930065 L24.608545,9.47120261 C25.0804018,10.0723098 25.0253994,10.9267378 24.4802703,11.4638687 L23.4097871,12.5205856 C22.8144805,13.109734 21.8490142,13.1110849 21.2520229,12.5236048 L21.2169001,12.4888841 L7.88854517,25.6042503 C7.3571213,26.1326087 6.66688112,26.4707581 5.92319311,26.5703914 L5.64373745,26.5960545 L5.09704281,27.1334705 C4.53929664,27.6899768 3.77907688,28.0021113 2.98661811,27.9999893 C1.82515802,27.9992423 0.769326902,27.3333385 0.279184125,26.2924226 C-0.210958652,25.2515067 -0.0466251643,24.0241375 0.700579234,23.1451191 L0.874666363,22.9579292 L1.4183069,22.4220228 C1.45953806,21.6777922 1.7466291,20.9713015 2.23071347,20.4067128 L2.42159851,20.2014078 L15.7530076,7.08302247 L15.6018267,6.93508208 L15.3376418,6.67392206 L15.2093671,6.5305105 C14.7378014,5.92956274 14.7921153,5.07566576 15.3361147,4.53784437 L16.4050708,3.48112748 C17.0013953,2.89180864 17.9680375,2.89180864 18.564362,3.48112748 L19.1156379,4.02760105 L22.4935391,0.688375722 C22.9381393,0.247484176 23.5420512,0 24.1718001,0 L24.1718001,0 Z M16.8311261,8.15181612 L3.50124411,21.2671823 C3.21568013,21.5509862 3.02784928,21.9147987 2.96371191,22.305784 L2.9423328,22.503541 L2.91026412,23.0802065 L1.95583906,24.0237037 C1.42490998,24.5633114 1.40210221,25.4154996 1.90342485,25.9821053 C2.40474748,26.5487109 3.26216841,26.6398205 3.87385166,26.1914829 L4.01892426,26.0646769 L4.97945762,25.1166509 L5.56432931,25.086459 C5.96595136,25.0653246 6.34772139,24.9204035 6.66077279,24.6667914 L6.81195371,24.5324374 L20.1357274,11.4200905 L16.8311261,8.1487969 L16.8311261,8.15181612 Z" id="形状" stroke="url(#linearGradient-1)" fill="url(#linearGradient-8)"></path>
                     </g>
                     <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                        <use fill="url(#linearGradient-17)" fill-rule="evenodd" xlink:href="#path-18"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                        <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/color-select-panel.svg b/examples/sites/demos/pc/overviewimage/color-select-panel.svg
index 93a195b495..0d29611877 100644
--- a/examples/sites/demos/pc/overviewimage/color-select-panel.svg
+++ b/examples/sites/demos/pc/overviewimage/color-select-panel.svg
@@ -2,128 +2,86 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>ColorSelectPanel 色彩选择面板</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.1026358%" y1="86.8386573%" x2="128.741717%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.1026358%" y1="86.8386573%" x2="128.741717%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M18.3294977,7.8896104 C20.4899885,6.91150771 22.8017972,6.31024211 25.1649386,6.11181817 L25.1649386,0.0175324402 C21.7701007,0.235404452 18.4476244,1.09693491 15.374484,2.55623377 L15.4656232,2.71402598 L18.3294977,7.8896104 Z" id="path-11"></path>
-        <filter x="-35.7%" y="-31.8%" width="171.5%" height="188.9%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M18.3294977,7.8896104 C20.4899885,6.91150771 22.8017972,6.31024211 25.1649386,6.11181817 L25.1649386,0.0175324402 C21.7701007,0.235404452 18.4476244,1.09693491 15.374484,2.55623377 L15.4656232,2.71402598 L18.3294977,7.8896104 Z" id="path-3"></path>
+        <filter x="-35.7%" y="-31.8%" width="171.5%" height="188.9%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M9.9481955,14.7518182 C11.4021452,12.730695 13.2024981,10.9831798 15.265818,9.59025974 L12.3949328,4.41116882 L12.317815,4.26740255 C9.33055396,6.19522615 6.75086936,8.69116136 4.7252176,11.6135065 L4.85842108,11.6941558 L9.9481955,14.7518182 Z" id="path-14"></path>
-        <filter x="-33.2%" y="-23.8%" width="166.4%" height="166.8%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M9.9481955,14.7518182 C11.4021452,12.730695 13.2024981,10.9831798 15.265818,9.59025974 L12.3949328,4.41116882 L12.317815,4.26740255 C9.33055396,6.19522615 6.75086936,8.69116136 4.7252176,11.6135065 L4.85842108,11.6941558 L9.9481955,14.7518182 Z" id="path-6"></path>
+        <filter x="-33.2%" y="-23.8%" width="166.4%" height="166.8%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-16">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-8">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M1.88237525,25.2467533 L6.08880044,25.2467533 C6.30214094,22.6428369 7.00249998,20.1021694 8.1534541,17.7568831 L3.05316359,14.6992208 L2.91996012,14.6220779 C1.22337706,17.9238341 0.229155775,21.5414446 0,25.2467533 L1.89990199,25.2467533 L1.88237525,25.2467533 Z" id="path-17"></path>
-        <filter x="-42.9%" y="-23.5%" width="185.9%" height="165.9%" filterUnits="objectBoundingBox" id="filter-18">
+        <path d="M1.88237525,25.2467533 L6.08880044,25.2467533 C6.30214094,22.6428369 7.00249998,20.1021694 8.1534541,17.7568831 L3.05316359,14.6992208 L2.91996012,14.6220779 C1.22337706,17.9238341 0.229155775,21.5414446 0,25.2467533 L1.89990199,25.2467533 L1.88237525,25.2467533 Z" id="path-9"></path>
+        <filter x="-42.9%" y="-23.5%" width="185.9%" height="165.9%" filterUnits="objectBoundingBox" id="filter-10">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="47.2535272%" y1="86.8386573%" x2="86.6709563%" y2="-43.8247114%" id="linearGradient-19">
+        <linearGradient x1="47.2535272%" y1="86.8386573%" x2="86.6709563%" y2="-43.8247114%" id="linearGradient-11">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="67.3220685%" x2="128.792906%" y2="5.88226608%" id="linearGradient-20">
+        <linearGradient x1="44.0988019%" y1="67.3220685%" x2="128.792906%" y2="5.88226608%" id="linearGradient-12">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="67.1491574%" x2="128.792906%" y2="6.32265508%" id="linearGradient-21">
+        <linearGradient x1="44.0988019%" y1="67.1491574%" x2="128.792906%" y2="6.32265508%" id="linearGradient-13">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.6996006%" y1="86.8386573%" x2="67.3629569%" y2="-43.8247114%" id="linearGradient-22">
+        <linearGradient x1="48.6996006%" y1="86.8386573%" x2="67.3629569%" y2="-43.8247114%" id="linearGradient-14">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="75.510486%" x2="128.792906%" y2="-14.9728889%" id="linearGradient-23">
+        <linearGradient x1="44.0988019%" y1="75.510486%" x2="128.792906%" y2="-14.9728889%" id="linearGradient-15">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1087.000000, -2259.000000)">
             <g id="编组-17备份-14" transform="translate(988.000000, 2226.000000)">
                 <g id="ColorSelectPanel-色彩选择面板" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="人员" transform="translate(36.000000, 36.000000)">
                         <path d="M9.81499203,27 C9.81499203,36.4892562 17.5050549,44.1818182 26.9912282,44.1818182 C36.4774015,44.1818182 44.1674644,36.4892562 44.1674644,27 C44.1674644,20.8615275 40.8936924,15.189345 35.5793464,12.1201087 C30.2650003,9.05087245 23.717456,9.05087245 18.40311,12.1201087 C13.088764,15.189345 9.81499203,20.8615275 9.81499203,27 L9.81499203,27 Z" id="路径" fill="#17284C" fill-rule="nonzero" opacity="0.5"></path>
-                        <path d="M9.81499203,27 C9.81499203,36.4892562 17.5050549,44.1818182 26.9912282,44.1818182 C36.4774015,44.1818182 44.1674644,36.4892562 44.1674644,27 C44.1674644,20.8615275 40.8936924,15.189345 35.5793464,12.1201087 C30.2650003,9.05087245 23.717456,9.05087245 18.40311,12.1201087 C13.088764,15.189345 9.81499203,20.8615275 9.81499203,27 L9.81499203,27 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
+                        <path d="M9.81499203,27 C9.81499203,36.4892562 17.5050549,44.1818182 26.9912282,44.1818182 C36.4774015,44.1818182 44.1674644,36.4892562 44.1674644,27 C44.1674644,20.8615275 40.8936924,15.189345 35.5793464,12.1201087 C30.2650003,9.05087245 23.717456,9.05087245 18.40311,12.1201087 C13.088764,15.189345 9.81499203,20.8615275 9.81499203,27 L9.81499203,27 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
                         <g id="路径">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                            <use fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-11"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
                         </g>
                         <g id="路径">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
                         <g id="路径">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                            <use fill="url(#linearGradient-16)" fill-rule="evenodd" xlink:href="#path-17"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                            <use fill="url(#linearGradient-8)" fill-rule="evenodd" xlink:href="#path-9"></use>
                         </g>
-                        <path d="M7.41732967,42.7792208 L10.4704933,39.9284416 C7.94184906,36.714938 6.41325495,32.8288035 6.074779,28.7532467 L0,28.7532467 C0.355667799,34.3740763 2.46432186,39.7418544 6.02920937,44.1011688 L6.15540212,43.9854546 L7.41732967,42.7792208 Z" id="路径" fill="url(#linearGradient-19)" opacity="0.604724702"></path>
-                        <path d="M25.1649386,52.0363637 L25.1649386,47.8881818 C20.5812893,47.5023847 16.2534429,45.6126509 12.8541342,42.5127273 L9.81499203,45.3564935 L8.53553773,46.5522078 L8.41285033,46.6644156 C12.9710163,50.9887351 18.8966749,53.5835261 25.1649386,54 L25.1649386,52.0363637 L25.1649386,52.0363637 Z" id="路径" fill="url(#linearGradient-20)" opacity="0.604724702"></path>
-                        <path d="M44.3497428,45.0584416 L41.2895685,42.3023377 C37.8409525,45.549982 33.3910606,47.5283545 28.6702929,47.9127273 L28.6702929,54 C35.1120981,53.6008877 41.1963341,50.900605 45.8149808,46.3909091 L45.6502292,46.2401299 L44.3497428,45.0584416 Z" id="路径" fill="url(#linearGradient-21)" opacity="0.303770519"></path>
-                        <path d="M51.5462352,22.2136364 L47.5886901,23.2655844 C48.6394623,29.0536201 47.2054713,35.0167357 43.6381558,39.6935065 L43.6732094,39.725065 L46.6878141,42.4390909 L47.9953112,43.6172727 L48.1635683,43.768052 C51.9492789,39.0000921 54.0067842,33.0888683 54,27 C53.9996509,25.2187324 53.8247147,23.4417892 53.4776854,21.6946753 L53.2428267,21.7577922 L51.5462352,22.2136364 Z" id="路径" fill="url(#linearGradient-22)" opacity="0.303770519"></path>
-                        <path d="M28.6702929,1.96012982 L28.6702929,6.10480517 C36.8543208,6.77387003 43.894875,12.1598148 46.6843087,19.8853246 L52.3314345,18.3705194 L52.5662933,18.3074026 C49.0445329,7.92558485 39.6078862,0.695902617 28.6702929,0 L28.6702929,1.94961038 L28.6702929,1.96012982 Z" id="路径" fill="url(#linearGradient-23)" opacity="0.303770519"></path>
+                        <path d="M7.41732967,42.7792208 L10.4704933,39.9284416 C7.94184906,36.714938 6.41325495,32.8288035 6.074779,28.7532467 L0,28.7532467 C0.355667799,34.3740763 2.46432186,39.7418544 6.02920937,44.1011688 L6.15540212,43.9854546 L7.41732967,42.7792208 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
+                        <path d="M25.1649386,52.0363637 L25.1649386,47.8881818 C20.5812893,47.5023847 16.2534429,45.6126509 12.8541342,42.5127273 L9.81499203,45.3564935 L8.53553773,46.5522078 L8.41285033,46.6644156 C12.9710163,50.9887351 18.8966749,53.5835261 25.1649386,54 L25.1649386,52.0363637 L25.1649386,52.0363637 Z" id="路径" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
+                        <path d="M44.3497428,45.0584416 L41.2895685,42.3023377 C37.8409525,45.549982 33.3910606,47.5283545 28.6702929,47.9127273 L28.6702929,54 C35.1120981,53.6008877 41.1963341,50.900605 45.8149808,46.3909091 L45.6502292,46.2401299 L44.3497428,45.0584416 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
+                        <path d="M51.5462352,22.2136364 L47.5886901,23.2655844 C48.6394623,29.0536201 47.2054713,35.0167357 43.6381558,39.6935065 L43.6732094,39.725065 L46.6878141,42.4390909 L47.9953112,43.6172727 L48.1635683,43.768052 C51.9492789,39.0000921 54.0067842,33.0888683 54,27 C53.9996509,25.2187324 53.8247147,23.4417892 53.4776854,21.6946753 L53.2428267,21.7577922 L51.5462352,22.2136364 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
+                        <path d="M28.6702929,1.96012982 L28.6702929,6.10480517 C36.8543208,6.77387003 43.894875,12.1598148 46.6843087,19.8853246 L52.3314345,18.3705194 L52.5662933,18.3074026 C49.0445329,7.92558485 39.6078862,0.695902617 28.6702929,0 L28.6702929,1.94961038 L28.6702929,1.96012982 Z" id="路径" fill="url(#linearGradient-15)" opacity="0.303770519"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/color.svg b/examples/sites/demos/pc/overviewimage/color.svg
index 828b985364..e0e6f9d896 100644
--- a/examples/sites/demos/pc/overviewimage/color.svg
+++ b/examples/sites/demos/pc/overviewimage/color.svg
@@ -2,65 +2,25 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>色彩 color</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.8327252%" x2="128.792906%" y2="-36.1688756%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="83.8327252%" x2="128.792906%" y2="-36.1688756%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -334.000000)">
-            <g id="编组-17" transform="translate(598.000000, 301.000000)">
-                <g id="色彩-color" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -385.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-17" transform="translate(2.000000, 41.000000)">
+                    <g id="色彩-color" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组" transform="translate(29.000000, 35.000000)">
+                            <path d="M51.9693055,23.5601786 C50.7389468,10.3454464 39.5310758,0 25.9965501,0 C11.6390769,0 0,11.6408036 0,26 C0,40.3591964 11.6390769,52 25.9965501,52 C28.3504816,52 30.2581179,50.0917857 30.2581179,47.7378571 C30.2581179,45.9921429 29.204188,44.4878571 27.7010611,43.8314732 C26.680792,43.1785714 25.9965501,42.0422321 25.9965501,40.7474554 C25.9965501,38.7312946 27.6459271,37.0819196 29.66151,37.0819196 L40.2524606,37.0819196 L40.2524606,37.0720536 C46.4663523,36.9728125 51.5351978,32.1279911 51.9693055,26 C51.9693055,25.8096429 51.973368,25.6216071 51.9693055,25.4318304 C51.9716269,25.3366518 51.9693055,25.2432143 51.9693055,25.1474554 C51.9693055,24.6083036 52.0383681,24.0807589 51.9693055,23.5601786 Z M10.4002926,26.4727273 C7.78953884,26.4727273 5.67272727,24.3563087 5.67272727,21.7454545 C5.67272727,19.1346004 7.78953884,17.0181818 10.4002926,17.0181818 C13.0110464,17.0181818 15.1272727,19.1346004 15.1272727,21.7454545 C15.1272727,24.3563087 13.0110464,26.4727273 10.4002926,26.4727273 Z M18.9090909,15.1272727 C16.2984987,15.1272727 14.1818182,13.0108542 14.1818182,10.4 C14.1818182,7.78914582 16.2979135,5.67272727 18.9090909,5.67272727 C21.5202683,5.67272727 23.6363636,7.78914582 23.6363636,10.4 C23.6363636,13.0108542 21.5196831,15.1272727 18.9090909,15.1272727 L18.9090909,15.1272727 Z M33.0909091,15.1272727 C30.4803169,15.1272727 28.3636364,13.0108542 28.3636364,10.4 C28.3636364,7.78914582 30.4797317,5.67272727 33.0909091,5.67272727 C35.7020865,5.67272727 37.8181818,7.78914582 37.8181818,10.4 C37.8181818,13.0108542 35.7015013,15.1272727 33.0909091,15.1272727 Z M41.6,26.4727273 C38.9894078,26.4727273 36.8727273,24.3563087 36.8727273,21.7454545 C36.8727273,19.1346004 38.9888226,17.0181818 41.6,17.0181818 C44.2111774,17.0181818 46.3272727,19.1346004 46.3272727,21.7454545 C46.3272727,24.3563087 44.2105922,26.4727273 41.6,26.4727273 Z" id="形状" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                            <path d="M30.4006976,36.5068327 C27.7153553,39.2104035 26.6312268,43.1377581 27.5444604,46.853813 C27.5310483,46.9658349 27.5611589,47.0787452 27.6284674,47.1688265 C28.0620457,49.5575544 27.3036011,52.0087213 25.600299,53.7235295 C24.6164733,54.724357 23.3655794,55.4147263 22,55.7105375 C29.8717904,59.8154159 39.4702927,58.3008307 45.7259704,51.9667237 C49.9546136,47.694247 49.9519271,40.7699058 45.7199699,36.5007747 C41.4880127,32.2316437 34.6293409,32.234356 30.4006976,36.5068327 L30.4006976,36.5068327 Z M69.5599497,12.4325353 C68.9951004,11.9103494 68.1465764,11.8549192 67.5197803,12.2992604 L45.7019684,29.043437 C45.4372917,29.2572997 45.2745561,29.5742014 45.2539787,29.9158258 C45.2334013,30.2574503 45.3569018,30.5919249 45.5939594,30.8365905 L51.3424368,36.6401076 C51.5835228,36.9180075 51.9370198,37.0696822 52.3025165,37.0520483 C52.6630345,37.0186783 52.9893655,36.8227858 53.1905903,36.5189486 L69.7039616,14.5043546 C70.1473683,13.8662831 70.0872805,13.0018326 69.5599497,12.4325353 Z" id="形状" fill="url(#linearGradient-2)"></path>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组" transform="translate(29.000000, 35.000000)">
-                        <path d="M51.9693055,23.5601786 C50.7389468,10.3454464 39.5310758,0 25.9965501,0 C11.6390769,0 0,11.6408036 0,26 C0,40.3591964 11.6390769,52 25.9965501,52 C28.3504816,52 30.2581179,50.0917857 30.2581179,47.7378571 C30.2581179,45.9921429 29.204188,44.4878571 27.7010611,43.8314732 C26.680792,43.1785714 25.9965501,42.0422321 25.9965501,40.7474554 C25.9965501,38.7312946 27.6459271,37.0819196 29.66151,37.0819196 L40.2524606,37.0819196 L40.2524606,37.0720536 C46.4663523,36.9728125 51.5351978,32.1279911 51.9693055,26 C51.9693055,25.8096429 51.973368,25.6216071 51.9693055,25.4318304 C51.9716269,25.3366518 51.9693055,25.2432143 51.9693055,25.1474554 C51.9693055,24.6083036 52.0383681,24.0807589 51.9693055,23.5601786 Z M10.4002926,26.4727273 C7.78953884,26.4727273 5.67272727,24.3563087 5.67272727,21.7454545 C5.67272727,19.1346004 7.78953884,17.0181818 10.4002926,17.0181818 C13.0110464,17.0181818 15.1272727,19.1346004 15.1272727,21.7454545 C15.1272727,24.3563087 13.0110464,26.4727273 10.4002926,26.4727273 Z M18.9090909,15.1272727 C16.2984987,15.1272727 14.1818182,13.0108542 14.1818182,10.4 C14.1818182,7.78914582 16.2979135,5.67272727 18.9090909,5.67272727 C21.5202683,5.67272727 23.6363636,7.78914582 23.6363636,10.4 C23.6363636,13.0108542 21.5196831,15.1272727 18.9090909,15.1272727 L18.9090909,15.1272727 Z M33.0909091,15.1272727 C30.4803169,15.1272727 28.3636364,13.0108542 28.3636364,10.4 C28.3636364,7.78914582 30.4797317,5.67272727 33.0909091,5.67272727 C35.7020865,5.67272727 37.8181818,7.78914582 37.8181818,10.4 C37.8181818,13.0108542 35.7015013,15.1272727 33.0909091,15.1272727 Z M41.6,26.4727273 C38.9894078,26.4727273 36.8727273,24.3563087 36.8727273,21.7454545 C36.8727273,19.1346004 38.9888226,17.0181818 41.6,17.0181818 C44.2111774,17.0181818 46.3272727,19.1346004 46.3272727,21.7454545 C46.3272727,24.3563087 44.2105922,26.4727273 41.6,26.4727273 Z" id="形状" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                        <path d="M30.4006976,36.5068327 C27.7153553,39.2104035 26.6312268,43.1377581 27.5444604,46.853813 C27.5310483,46.9658349 27.5611589,47.0787452 27.6284674,47.1688265 C28.0620457,49.5575544 27.3036011,52.0087213 25.600299,53.7235295 C24.6164733,54.724357 23.3655794,55.4147263 22,55.7105375 C29.8717904,59.8154159 39.4702927,58.3008307 45.7259704,51.9667237 C49.9546136,47.694247 49.9519271,40.7699058 45.7199699,36.5007747 C41.4880127,32.2316437 34.6293409,32.234356 30.4006976,36.5068327 L30.4006976,36.5068327 Z M69.5599497,12.4325353 C68.9951004,11.9103494 68.1465764,11.8549192 67.5197803,12.2992604 L45.7019684,29.043437 C45.4372917,29.2572997 45.2745561,29.5742014 45.2539787,29.9158258 C45.2334013,30.2574503 45.3569018,30.5919249 45.5939594,30.8365905 L51.3424368,36.6401076 C51.5835228,36.9180075 51.9370198,37.0696822 52.3025165,37.0520483 C52.6630345,37.0186783 52.9893655,36.8227858 53.1905903,36.5189486 L69.7039616,14.5043546 C70.1473683,13.8662831 70.0872805,13.0018326 69.5599497,12.4325353 Z" id="形状" fill="url(#linearGradient-10)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/company.svg b/examples/sites/demos/pc/overviewimage/company.svg
index e67487f531..ed5fd23e88 100644
--- a/examples/sites/demos/pc/overviewimage/company.svg
+++ b/examples/sites/demos/pc/overviewimage/company.svg
@@ -2,83 +2,41 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Company 公司</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="48.8951548%" y1="86.8386573%" x2="64.7519132%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="48.8951548%" y1="86.8386573%" x2="64.7519132%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.8951548%" y1="86.8386573%" x2="64.7519132%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="48.8951548%" y1="86.8386573%" x2="64.7519132%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.0407382%" y1="86.8386573%" x2="76.1601004%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="48.0407382%" y1="86.8386573%" x2="76.1601004%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.4516567%" y1="86.8386573%" x2="70.673509%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="48.4516567%" y1="86.8386573%" x2="70.673509%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="73.1719973%" x2="128.792906%" y2="-9.01697069%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="73.1719973%" x2="128.792906%" y2="-9.01697069%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="73.1719973%" x2="128.792906%" y2="-9.01697069%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="73.1719973%" x2="128.792906%" y2="-9.01697069%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1869.000000, -334.000000)">
             <g id="编组-25备份-3" transform="translate(1771.000000, 301.000000)">
                 <g id="Company-公司" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-25" transform="translate(34.000000, 44.000000)">
-                        <rect id="矩形-2" stroke="url(#linearGradient-10)" stroke-width="0.935483871" fill="url(#linearGradient-9)" x="11.2258065" y="1.84" width="18.7096774" height="43.24" rx="3.74193548"></rect>
-                        <rect id="矩形-2备份-2" fill="url(#linearGradient-11)" opacity="0.303770519" x="31.8064516" y="14.72" width="15.9032258" height="27.6"></rect>
-                        <path d="M41.6874999,35.3846154 L38.0625,35.3846154 C36.975,35.3846154 36.2499999,34.6769231 36.2499999,33.6153846 C36.2499999,32.553846 36.9749999,31.8461538 38.0625,31.8461538 L41.6874999,31.8461538 C42.7749999,31.8461538 43.5,32.5538461 43.5,33.6153846 C43.5,34.676923 42.775,35.3846154 41.6874999,35.3846154 Z M41.6874999,24.7692308 L38.0625,24.7692308 C36.975,24.7692308 36.2499999,24.0615385 36.2499999,23 C36.2499999,21.9384614 36.9749999,21.2307692 38.0625,21.2307692 L41.6874999,21.2307692 C42.7749999,21.2307692 43.5,21.9384615 43.5,23 C43.5,24.0615384 42.775,24.7692308 41.6874999,24.7692308 Z" id="形状" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
-                        <path d="M32.625,42.4615384 L56.1875,42.4615384 C57.275,42.4615384 58,43.1692307 58,44.2307692 C58,45.2923076 57.275,46 56.1875,46 L1.81249997,46 C0.724999972,46 0,45.2923077 0,44.2307692 C0,43.1692306 0.724999972,42.4615384 1.81249997,42.4615384 L7.24999997,42.4615384 L7.24999997,9.19999997 C7.24999997,6.01538458 7.6125,4.59999994 8.33749997,3.53846156 C8.7,2.4769231 9.7875,1.41538464 10.875,1.06153846 C11.9625,0.353846181 13.4125,0 16.6749999,0 L23.5625,0 C26.825,0 27.9125,0.353846181 29,1.06153846 C30.0875,1.76923074 31.175,2.4769231 31.8999999,3.89230766 C32.6249999,5.30769222 32.6249999,6.01538458 32.625,9.19999997 L32.625,11.6769231 C33.7125,10.9692308 35.1625,10.6153846 38.0625,10.6153846 L41.6874999,10.6153846 C44.5874999,10.6153846 46.0374999,10.9692308 47.1249999,11.6769231 C48.2124999,12.3846153 49.2999999,13.0923077 50.025,14.5076923 C50.75,15.5692307 51.1125,16.9846154 51.1125,19.8153846 L51.1125,37.5076923 C51.1125,38.5692308 50.3875,39.2769231 49.2999999,39.2769231 C48.2124999,39.2769231 47.4875,38.5692308 47.4875,37.5076923 L47.4875,19.8153846 C47.4875,17.6923077 47.4875,16.9846154 47.1249999,16.2769231 C46.7624999,15.5692308 46.4,15.2153846 46.0374999,15.2153846 C45.3125,14.8615385 44.5874999,14.8615385 42.4125,14.8615385 L38.7875,14.8615385 C36.6125,14.8615385 35.8875,14.8615385 35.1624999,15.2153846 C34.4375,15.5692308 34.0749999,15.9230769 34.0749999,16.2769231 C33.7124999,16.9846154 33.7124999,17.6923077 33.7125,19.8153846 L33.7125,42.4615384 L32.625,42.4615384 Z M29,42.4615384 L29,9.19999997 C29,6.72307686 29,6.01538458 28.6374999,5.3076923 C28.2749999,4.60000002 27.9125,4.24615384 27.5499999,4.24615384 C26.4624999,3.53846156 25.7375,3.53846156 23.1999999,3.53846156 L16.6749999,3.53846156 C14.1374999,3.53846156 13.4124999,3.53846156 12.6875,3.89230766 C11.9625,4.24615384 11.6,4.59999994 11.2374999,5.3076923 C10.875,6.01538458 10.875,6.72307695 10.875,9.19999997 L10.875,42.4615384 L29,42.4615384 L29,42.4615384 Z" id="形状" stroke="url(#linearGradient-14)" stroke-width="0.935483871" fill="url(#linearGradient-13)"></path>
+                        <rect id="矩形-2" stroke="url(#linearGradient-2)" stroke-width="0.935483871" fill="url(#linearGradient-1)" x="11.2258065" y="1.84" width="18.7096774" height="43.24" rx="3.74193548"></rect>
+                        <rect id="矩形-2备份-2" fill="url(#linearGradient-3)" opacity="0.303770519" x="31.8064516" y="14.72" width="15.9032258" height="27.6"></rect>
+                        <path d="M41.6874999,35.3846154 L38.0625,35.3846154 C36.975,35.3846154 36.2499999,34.6769231 36.2499999,33.6153846 C36.2499999,32.553846 36.9749999,31.8461538 38.0625,31.8461538 L41.6874999,31.8461538 C42.7749999,31.8461538 43.5,32.5538461 43.5,33.6153846 C43.5,34.676923 42.775,35.3846154 41.6874999,35.3846154 Z M41.6874999,24.7692308 L38.0625,24.7692308 C36.975,24.7692308 36.2499999,24.0615385 36.2499999,23 C36.2499999,21.9384614 36.9749999,21.2307692 38.0625,21.2307692 L41.6874999,21.2307692 C42.7749999,21.2307692 43.5,21.9384615 43.5,23 C43.5,24.0615384 42.775,24.7692308 41.6874999,24.7692308 Z" id="形状" fill="url(#linearGradient-4)" opacity="0.604724702"></path>
+                        <path d="M32.625,42.4615384 L56.1875,42.4615384 C57.275,42.4615384 58,43.1692307 58,44.2307692 C58,45.2923076 57.275,46 56.1875,46 L1.81249997,46 C0.724999972,46 0,45.2923077 0,44.2307692 C0,43.1692306 0.724999972,42.4615384 1.81249997,42.4615384 L7.24999997,42.4615384 L7.24999997,9.19999997 C7.24999997,6.01538458 7.6125,4.59999994 8.33749997,3.53846156 C8.7,2.4769231 9.7875,1.41538464 10.875,1.06153846 C11.9625,0.353846181 13.4125,0 16.6749999,0 L23.5625,0 C26.825,0 27.9125,0.353846181 29,1.06153846 C30.0875,1.76923074 31.175,2.4769231 31.8999999,3.89230766 C32.6249999,5.30769222 32.6249999,6.01538458 32.625,9.19999997 L32.625,11.6769231 C33.7125,10.9692308 35.1625,10.6153846 38.0625,10.6153846 L41.6874999,10.6153846 C44.5874999,10.6153846 46.0374999,10.9692308 47.1249999,11.6769231 C48.2124999,12.3846153 49.2999999,13.0923077 50.025,14.5076923 C50.75,15.5692307 51.1125,16.9846154 51.1125,19.8153846 L51.1125,37.5076923 C51.1125,38.5692308 50.3875,39.2769231 49.2999999,39.2769231 C48.2124999,39.2769231 47.4875,38.5692308 47.4875,37.5076923 L47.4875,19.8153846 C47.4875,17.6923077 47.4875,16.9846154 47.1249999,16.2769231 C46.7624999,15.5692308 46.4,15.2153846 46.0374999,15.2153846 C45.3125,14.8615385 44.5874999,14.8615385 42.4125,14.8615385 L38.7875,14.8615385 C36.6125,14.8615385 35.8875,14.8615385 35.1624999,15.2153846 C34.4375,15.5692308 34.0749999,15.9230769 34.0749999,16.2769231 C33.7124999,16.9846154 33.7124999,17.6923077 33.7125,19.8153846 L33.7125,42.4615384 L32.625,42.4615384 Z M29,42.4615384 L29,9.19999997 C29,6.72307686 29,6.01538458 28.6374999,5.3076923 C28.2749999,4.60000002 27.9125,4.24615384 27.5499999,4.24615384 C26.4624999,3.53846156 25.7375,3.53846156 23.1999999,3.53846156 L16.6749999,3.53846156 C14.1374999,3.53846156 13.4124999,3.53846156 12.6875,3.89230766 C11.9625,4.24615384 11.6,4.59999994 11.2374999,5.3076923 C10.875,6.01538458 10.875,6.72307695 10.875,9.19999997 L10.875,42.4615384 L29,42.4615384 L29,42.4615384 Z" id="形状" stroke="url(#linearGradient-6)" stroke-width="0.935483871" fill="url(#linearGradient-5)"></path>
                         <path d="M23.5625,14.1538462 L16.3125,14.1538462 C15.225,14.1538462 14.4999999,13.4461539 14.4999999,12.3846153 C14.4999999,11.3230768 15.2249999,10.6153846 16.3125,10.6153846 L23.5625,10.6153846 C24.65,10.6153846 25.3749999,11.3230769 25.3749999,12.3846153 C25.3749999,13.4461538 24.65,14.1538462 23.5625,14.1538462 Z M23.5625,24.7692308 L16.3125,24.7692308 C15.225,24.7692308 14.4999999,24.0615385 14.4999999,23 C14.4999999,21.9384614 15.2249999,21.2307692 16.3125,21.2307692 L23.5625,21.2307692 C24.65,21.2307692 25.3749999,21.9384615 25.3749999,23 C25.3749999,24.0615384 24.65,24.7692308 23.5625,24.7692308 Z M23.5625,35.3846154 L16.3125,35.3846154 C15.225,35.3846154 14.4999999,34.6769231 14.4999999,33.6153846 C14.4999999,32.553846 15.2249999,31.8461538 16.3125,31.8461538 L23.5625,31.8461538 C24.65,31.8461538 25.3749999,32.5538461 25.3749999,33.6153846 C25.3749999,34.676923 24.65,35.3846154 23.5625,35.3846154 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.935483871" fill="#FFFFFF" fill-rule="nonzero"></path>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/config-provider.svg b/examples/sites/demos/pc/overviewimage/config-provider.svg
index 30b05c4365..0984096db6 100644
--- a/examples/sites/demos/pc/overviewimage/config-provider.svg
+++ b/examples/sites/demos/pc/overviewimage/config-provider.svg
@@ -2,80 +2,20 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>全局设置 config-provider</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="45.9466109%" y1="86.8386573%" x2="104.120927%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="45.9466109%" y1="86.8386573%" x2="104.120927%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M30.1082987,18.9399939 C30.1413503,18.676825 30.1659927,18.4133202 30.1659927,18.1335867 C30.1659927,17.8535173 30.1413869,17.5903483 30.1082987,17.326881 L31.8476011,15.9689157 C32.0041938,15.8456136 32.0453986,15.623222 31.9464998,15.4422421 L30.2976872,12.5944287 C30.2239061,12.4591881 30.0813164,12.388266 29.9382513,12.388266 C29.8895514,12.388266 29.8408515,12.3964737 29.7947476,12.4131503 L27.7422231,13.2364207 C27.3135764,12.9072916 26.8518416,12.6355419 26.349231,12.4297149 L26.0360089,10.2484794 C26.0113665,10.0509348 25.8382113,9.90278563 25.6319681,9.90278563 L22.3346352,9.90278563 C22.128721,9.90278563 21.9555659,10.0509348 21.9306309,10.2484794 L21.6174088,12.4297149 C21.1145058,12.6355419 20.6530634,12.9152755 20.2243802,13.2364207 L18.1718557,12.4131503 C18.1239664,12.3944331 18.073126,12.3848111 18.021844,12.3847591 C17.8788155,12.3847591 17.7422219,12.4601208 17.6689527,12.5944287 L16.02014,15.4422421 C15.9131246,15.623222 15.9624095,15.8456136 16.1190388,15.9689157 L17.8583411,17.326881 C17.8252895,17.5903483 17.8006105,17.861837 17.8006105,18.1335867 C17.8006105,18.405038 17.825582,18.676825 17.8583411,18.9399939 L16.1190388,20.2979591 C15.9624094,20.4215971 15.9212412,20.6436528 16.02014,20.8249313 L17.6689527,23.6727073 C17.7426972,23.8076868 17.8852138,23.8786835 18.0282057,23.8786835 C18.0771353,23.878767 18.1257186,23.8703131 18.1718557,23.8536872 L20.2243802,23.0304169 C20.6530269,23.3598444 21.1147617,23.631333 21.6174088,23.8371226 L21.9306309,26.0183582 C21.9555659,26.2159028 22.128721,26.3640519 22.3346352,26.3640519 L25.6319681,26.3640519 C25.8382113,26.3640519 26.0110374,26.2159028 26.0360089,26.0183582 L26.349231,23.8371226 C26.8521341,23.6312957 27.3135764,23.3515621 27.7422231,23.0304169 L29.7947476,23.8536872 C29.8439593,23.872938 29.8948163,23.8822277 29.9449055,23.8822277 C30.0877878,23.8822277 30.2242351,23.8067541 30.2976872,23.6727446 L31.9464998,20.8249686 C32.0453986,20.6439886 32.0041938,20.4215971 31.8476011,20.2979965 L30.1082987,18.9399939 L30.1082987,18.9399939 Z M23.9834479,21.0138578 C22.3926583,21.0138578 21.0982359,19.7215542 21.0982359,18.1332509 C21.0982359,16.5449476 22.3926583,15.2523455 23.9834479,15.2523455 C25.57453,15.2523455 26.8686599,16.5446491 26.8686599,18.1332509 C26.8686599,19.72189 25.5745666,21.0138578 23.9834479,21.0138578 Z" id="path-10"></path>
-        <filter x="-24.9%" y="-12.1%" width="149.9%" height="148.6%" filterUnits="objectBoundingBox" id="filter-11">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M20.0527972,24.6476337 L18.6885059,25.194864 L18.6671174,25.2034821 L18.6454365,25.211354 C18.4472992,25.2833089 18.2385168,25.3199814 18.0282057,25.3197704 C17.3726951,25.3197704 16.7693577,24.9665778 16.4475801,24.3962914 L16.0608695,23.7283705 C15.4934355,24.3317116 14.8598617,24.7460889 14.1749191,24.9382985 L14.1749191,20.0069586 C14.3358261,20.0125548 14.4925286,20.0240455 14.6514248,20.0324771 C14.7622426,19.6958864 14.964391,19.3874259 15.2608679,19.1533943 L16.3899227,18.2718865 C16.3896668,18.26006 16.3897034,18.2485692 16.3895205,18.2367799 C15.6753288,18.1557848 14.9360558,18.1025466 14.1749191,18.0784085 L14.1749191,14.4969753 L14.9271348,14.4969753 L16.0436856,12.5684625 L14.1749191,12.5684625 L14.1749191,8.98904395 C15.6982894,8.94084231 17.1384092,8.77691202 18.4594848,8.50307303 C18.6381973,9.32365725 18.7678077,10.2080751 18.8521185,11.1375606 L20.0555027,11.6202857 C20.1456835,11.564923 20.2369725,11.5114621 20.3293116,11.459937 L20.5321181,10.0475771 C20.5456093,9.94811459 20.5699592,9.85264402 20.5984406,9.75918808 C20.5173472,9.16509928 20.4217755,8.58593361 20.3003184,8.03631566 C21.1602442,7.76628209 21.9426962,7.44233879 22.6514038,7.06821654 C22.9429815,7.51124621 23.2011786,7.97804091 23.4304191,8.46169875 L25.5004565,8.46169875 C23.5619672,3.56710697 18.8896305,0.0900982268 13.4226668,0.00962540248 C13.3792684,0.00772269265 13.3395626,0 13.296091,0 C13.2866581,0 13.2790533,0.00194000643 13.2695839,0.00194000643 C13.2564218,0.00194000643 13.2431134,0 13.2299147,0 C5.93458493,0 0,6.05568391 0,13.5 C0,20.9442042 5.93454838,27 13.2299147,27 C13.2430769,27 13.2564218,26.9980227 13.2695839,26.9980227 C13.2790168,26.9980227 13.2866216,27 13.296091,27 C13.3395626,27 13.3793049,26.9902627 13.4226668,26.9902627 C15.9650419,26.9528803 18.3343349,26.1786697 20.3385982,24.8715176 L20.3295675,24.8087287 C20.2362054,24.7570323 20.1439279,24.7033219 20.0527972,24.6476337 L20.0527972,24.6476337 Z M21.434309,5.53501676 C20.9296875,5.7760622 20.3759275,5.98819413 19.780597,6.17529256 C19.4063904,5.05288856 18.9433393,4.05964403 18.3990122,3.21301902 C19.5310737,3.80810397 20.5571184,4.5930267 21.434309,5.53501676 L21.434309,5.53501676 Z M14.1749191,2.06360418 C15.77569,2.51096156 17.0986668,4.16955269 17.9454671,6.63809537 C16.7794121,6.86955273 15.5111312,7.01419492 14.1749191,7.06045652 L14.1749191,2.06360418 Z M12.2849104,2.10020312 L12.2849104,7.06045652 C10.9959357,7.01609759 9.77119954,6.8791781 8.6372089,6.66126348 C9.46130448,4.24666787 10.7389086,2.60165672 12.2849104,2.10020312 Z M12.2849104,8.98904395 L12.2849104,12.5704025 L7.64686832,12.5704025 C7.69600696,11.1123779 7.86046045,9.75665114 8.12505582,8.53004657 C9.4140305,8.78653742 10.8088506,8.94274502 12.2849104,8.98904395 L12.2849104,8.98904395 Z M8.25170477,3.12038385 C7.67524004,3.99405703 7.18765627,5.03546587 6.7982766,6.21577151 C6.15567216,6.01904767 5.56414411,5.79147036 5.02548396,5.53501676 C5.94778364,4.54565224 7.0383392,3.7279034 8.25170477,3.12038385 L8.25170477,3.12038385 Z M3.808316,7.06821654 C4.55109886,7.45968689 5.37512131,7.80105291 6.28232111,8.07683187 C5.98555166,9.44419862 5.80983721,10.9562076 5.75876083,12.5684625 L1.93724613,12.5684625 C2.09599605,10.5454118 2.75940392,8.66700336 3.808316,7.06821654 Z M3.84041697,19.9799478 C2.78397324,18.3888837 2.11109592,16.5162579 1.94101197,14.4969753 L5.76069858,14.4969753 C5.81546768,16.1112076 5.99502104,17.6194111 6.29742098,18.9848379 C5.39778942,19.2586768 4.57753279,19.5942228 3.84041697,19.9799478 L3.84041697,19.9799478 Z M5.06891896,21.5131848 C5.60194865,21.2624767 6.18594504,21.0367647 6.81911662,20.8439209 C7.20655854,21.9991184 7.6865741,23.0193365 8.25170477,23.8795042 C7.05720492,23.2816473 5.98178581,22.4812839 5.06891896,21.5131848 Z M12.2849104,24.8997596 C10.7521438,24.4022233 9.4839726,22.780231 8.65801241,20.4023835 C9.786336,20.1863343 11.0054051,20.0513175 12.2849104,20.0069959 L12.2849104,24.8997596 L12.2849104,24.8997596 Z M12.2868116,18.0784085 C10.8164189,18.1247074 9.42536456,18.2789377 8.14209347,18.5355032 C7.8717945,17.310764 7.70171055,15.9569772 7.64876952,14.4969753 L12.2868116,14.4969753 L12.2868116,18.0784085 L12.2868116,18.0784085 Z" id="path-12"></path>
-        <filter x="-15.7%" y="-7.4%" width="131.4%" height="129.6%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-694.000000, -2808.000000)">
-            <g id="编组-25备份-22" transform="translate(596.000000, 2775.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-694.000000, -2859.000000)">
+            <g id="编组-25备份-22" transform="translate(596.000000, 2826.000000)">
                 <g id="全局设置-config-provider" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M68.6404267,36 C68.94688,36 69.2408533,36.1226971 69.4571733,36.3402057 L83.9942933,50.9572 C84.2113067,51.1754057 84.3333333,51.4709943 84.3333333,51.7791314 L84.3333333,84.8 C84.3333333,86.7255086 82.7816533,88.2857143 80.8666667,88.2857143 L44.4666667,88.2857143 C42.55168,88.2857143 41,86.7255086 41,84.8 L41,39.4857143 C41,37.5602057 42.55168,36 44.4666667,36 L68.6404267,36 Z M67.96304,37.1621371 L67.96304,50.1359657 C67.96304,51.4194057 68.9981867,52.46024 70.27392,52.46024 L70.27392,52.46024 L83.1775467,52.46024 L67.96304,37.1621371 Z" id="形状结合" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <g id="编组-35" transform="translate(47.000000, 55.000000)">
-                        <g id="形状">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
-                        </g>
-                        <g id="形状">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                        </g>
+                    <g id="编组"></g>
+                    <path d="M68.6404267,36 C68.94688,36 69.2408533,36.1226971 69.4571733,36.3402057 L83.9942933,50.9572 C84.2113067,51.1754057 84.3333333,51.4709943 84.3333333,51.7791314 L84.3333333,84.8 C84.3333333,86.7255086 82.7816533,88.2857143 80.8666667,88.2857143 L44.4666667,88.2857143 C42.55168,88.2857143 41,86.7255086 41,84.8 L41,39.4857143 C41,37.5602057 42.55168,36 44.4666667,36 L68.6404267,36 Z M67.96304,37.1621371 L67.96304,50.1359657 C67.96304,51.4194057 68.9981867,52.46024 70.27392,52.46024 L70.27392,52.46024 L83.1775467,52.46024 L67.96304,37.1621371 Z" id="形状结合" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                    <g id="编组-35" transform="translate(47.000000, 55.000000)" fill="#5073E5">
+                        <path d="M30.1082987,18.9399939 C30.1413503,18.676825 30.1659927,18.4133202 30.1659927,18.1335867 C30.1659927,17.8535173 30.1413869,17.5903483 30.1082987,17.326881 L31.8476011,15.9689157 C32.0041938,15.8456136 32.0453986,15.623222 31.9464998,15.4422421 L30.2976872,12.5944287 C30.2239061,12.4591881 30.0813164,12.388266 29.9382513,12.388266 C29.8895514,12.388266 29.8408515,12.3964737 29.7947476,12.4131503 L27.7422231,13.2364207 C27.3135764,12.9072916 26.8518416,12.6355419 26.349231,12.4297149 L26.0360089,10.2484794 C26.0113665,10.0509348 25.8382113,9.90278563 25.6319681,9.90278563 L22.3346352,9.90278563 C22.128721,9.90278563 21.9555659,10.0509348 21.9306309,10.2484794 L21.6174088,12.4297149 C21.1145058,12.6355419 20.6530634,12.9152755 20.2243802,13.2364207 L18.1718557,12.4131503 C18.1239664,12.3944331 18.073126,12.3848111 18.021844,12.3847591 C17.8788155,12.3847591 17.7422219,12.4601208 17.6689527,12.5944287 L16.02014,15.4422421 C15.9131246,15.623222 15.9624095,15.8456136 16.1190388,15.9689157 L17.8583411,17.326881 C17.8252895,17.5903483 17.8006105,17.861837 17.8006105,18.1335867 C17.8006105,18.405038 17.825582,18.676825 17.8583411,18.9399939 L16.1190388,20.2979591 C15.9624094,20.4215971 15.9212412,20.6436528 16.02014,20.8249313 L17.6689527,23.6727073 C17.7426972,23.8076868 17.8852138,23.8786835 18.0282057,23.8786835 C18.0771353,23.878767 18.1257186,23.8703131 18.1718557,23.8536872 L20.2243802,23.0304169 C20.6530269,23.3598444 21.1147617,23.631333 21.6174088,23.8371226 L21.9306309,26.0183582 C21.9555659,26.2159028 22.128721,26.3640519 22.3346352,26.3640519 L25.6319681,26.3640519 C25.8382113,26.3640519 26.0110374,26.2159028 26.0360089,26.0183582 L26.349231,23.8371226 C26.8521341,23.6312957 27.3135764,23.3515621 27.7422231,23.0304169 L29.7947476,23.8536872 C29.8439593,23.872938 29.8948163,23.8822277 29.9449055,23.8822277 C30.0877878,23.8822277 30.2242351,23.8067541 30.2976872,23.6727446 L31.9464998,20.8249686 C32.0453986,20.6439886 32.0041938,20.4215971 31.8476011,20.2979965 L30.1082987,18.9399939 L30.1082987,18.9399939 Z M23.9834479,21.0138578 C22.3926583,21.0138578 21.0982359,19.7215542 21.0982359,18.1332509 C21.0982359,16.5449476 22.3926583,15.2523455 23.9834479,15.2523455 C25.57453,15.2523455 26.8686599,16.5446491 26.8686599,18.1332509 C26.8686599,19.72189 25.5745666,21.0138578 23.9834479,21.0138578 Z" id="形状"></path>
+                        <path d="M20.0527972,24.6476337 L18.6885059,25.194864 L18.6671174,25.2034821 L18.6454365,25.211354 C18.4472992,25.2833089 18.2385168,25.3199814 18.0282057,25.3197704 C17.3726951,25.3197704 16.7693577,24.9665778 16.4475801,24.3962914 L16.0608695,23.7283705 C15.4934355,24.3317116 14.8598617,24.7460889 14.1749191,24.9382985 L14.1749191,20.0069586 C14.3358261,20.0125548 14.4925286,20.0240455 14.6514248,20.0324771 C14.7622426,19.6958864 14.964391,19.3874259 15.2608679,19.1533943 L16.3899227,18.2718865 C16.3896668,18.26006 16.3897034,18.2485692 16.3895205,18.2367799 C15.6753288,18.1557848 14.9360558,18.1025466 14.1749191,18.0784085 L14.1749191,14.4969753 L14.9271348,14.4969753 L16.0436856,12.5684625 L14.1749191,12.5684625 L14.1749191,8.98904395 C15.6982894,8.94084231 17.1384092,8.77691202 18.4594848,8.50307303 C18.6381973,9.32365725 18.7678077,10.2080751 18.8521185,11.1375606 L20.0555027,11.6202857 C20.1456835,11.564923 20.2369725,11.5114621 20.3293116,11.459937 L20.5321181,10.0475771 C20.5456093,9.94811459 20.5699592,9.85264402 20.5984406,9.75918808 C20.5173472,9.16509928 20.4217755,8.58593361 20.3003184,8.03631566 C21.1602442,7.76628209 21.9426962,7.44233879 22.6514038,7.06821654 C22.9429815,7.51124621 23.2011786,7.97804091 23.4304191,8.46169875 L25.5004565,8.46169875 C23.5619672,3.56710697 18.8896305,0.0900982268 13.4226668,0.00962540248 C13.3792684,0.00772269265 13.3395626,0 13.296091,0 C13.2866581,0 13.2790533,0.00194000643 13.2695839,0.00194000643 C13.2564218,0.00194000643 13.2431134,0 13.2299147,0 C5.93458493,0 0,6.05568391 0,13.5 C0,20.9442042 5.93454838,27 13.2299147,27 C13.2430769,27 13.2564218,26.9980227 13.2695839,26.9980227 C13.2790168,26.9980227 13.2866216,27 13.296091,27 C13.3395626,27 13.3793049,26.9902627 13.4226668,26.9902627 C15.9650419,26.9528803 18.3343349,26.1786697 20.3385982,24.8715176 L20.3295675,24.8087287 C20.2362054,24.7570323 20.1439279,24.7033219 20.0527972,24.6476337 L20.0527972,24.6476337 Z M21.434309,5.53501676 C20.9296875,5.7760622 20.3759275,5.98819413 19.780597,6.17529256 C19.4063904,5.05288856 18.9433393,4.05964403 18.3990122,3.21301902 C19.5310737,3.80810397 20.5571184,4.5930267 21.434309,5.53501676 L21.434309,5.53501676 Z M14.1749191,2.06360418 C15.77569,2.51096156 17.0986668,4.16955269 17.9454671,6.63809537 C16.7794121,6.86955273 15.5111312,7.01419492 14.1749191,7.06045652 L14.1749191,2.06360418 Z M12.2849104,2.10020312 L12.2849104,7.06045652 C10.9959357,7.01609759 9.77119954,6.8791781 8.6372089,6.66126348 C9.46130448,4.24666787 10.7389086,2.60165672 12.2849104,2.10020312 Z M12.2849104,8.98904395 L12.2849104,12.5704025 L7.64686832,12.5704025 C7.69600696,11.1123779 7.86046045,9.75665114 8.12505582,8.53004657 C9.4140305,8.78653742 10.8088506,8.94274502 12.2849104,8.98904395 L12.2849104,8.98904395 Z M8.25170477,3.12038385 C7.67524004,3.99405703 7.18765627,5.03546587 6.7982766,6.21577151 C6.15567216,6.01904767 5.56414411,5.79147036 5.02548396,5.53501676 C5.94778364,4.54565224 7.0383392,3.7279034 8.25170477,3.12038385 L8.25170477,3.12038385 Z M3.808316,7.06821654 C4.55109886,7.45968689 5.37512131,7.80105291 6.28232111,8.07683187 C5.98555166,9.44419862 5.80983721,10.9562076 5.75876083,12.5684625 L1.93724613,12.5684625 C2.09599605,10.5454118 2.75940392,8.66700336 3.808316,7.06821654 Z M3.84041697,19.9799478 C2.78397324,18.3888837 2.11109592,16.5162579 1.94101197,14.4969753 L5.76069858,14.4969753 C5.81546768,16.1112076 5.99502104,17.6194111 6.29742098,18.9848379 C5.39778942,19.2586768 4.57753279,19.5942228 3.84041697,19.9799478 L3.84041697,19.9799478 Z M5.06891896,21.5131848 C5.60194865,21.2624767 6.18594504,21.0367647 6.81911662,20.8439209 C7.20655854,21.9991184 7.6865741,23.0193365 8.25170477,23.8795042 C7.05720492,23.2816473 5.98178581,22.4812839 5.06891896,21.5131848 Z M12.2849104,24.8997596 C10.7521438,24.4022233 9.4839726,22.780231 8.65801241,20.4023835 C9.786336,20.1863343 11.0054051,20.0513175 12.2849104,20.0069959 L12.2849104,24.8997596 L12.2849104,24.8997596 Z M12.2868116,18.0784085 C10.8164189,18.1247074 9.42536456,18.2789377 8.14209347,18.5355032 C7.8717945,17.310764 7.70171055,15.9569772 7.64876952,14.4969753 L12.2868116,14.4969753 L12.2868116,18.0784085 L12.2868116,18.0784085 Z" id="形状"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/container.svg b/examples/sites/demos/pc/overviewimage/container.svg
index 83c48e79d2..054a19be5d 100644
--- a/examples/sites/demos/pc/overviewimage/container.svg
+++ b/examples/sites/demos/pc/overviewimage/container.svg
@@ -2,99 +2,59 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>版型 container</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.3445779%" y1="86.8386573%" x2="72.1032265%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="48.3445779%" y1="86.8386573%" x2="72.1032265%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.8206428%" x2="128.792906%" y2="47.9098973%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="50.8206428%" x2="128.792906%" y2="47.9098973%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.6213844%" x2="128.792906%" y2="48.4173905%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="50.6213844%" x2="128.792906%" y2="48.4173905%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.1646166%" x2="128.792906%" y2="44.4869182%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="52.1646166%" x2="128.792906%" y2="44.4869182%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M63.0958313,52.1170423 C63.648116,52.1170423 64.0958313,52.5647576 64.0958313,53.1170423 C64.0958313,53.3999726 63.9759798,53.6696616 63.7659819,53.8592675 L57.1441845,59.8380483 C56.7342649,60.2081623 56.1019227,60.1758934 55.7318088,59.7659738 C55.5658847,59.5822046 55.4740339,59.3434154 55.4740339,59.0958232 L55.4739156,56.1400423 L27.0479156,56.1403713 C25.9433461,56.1403713 25.0479156,55.2449408 25.0479156,54.1403713 C25.0479156,53.0358018 25.9433461,52.1403713 27.0479156,52.1403713 L55.4739156,52.1400423 L55.4740339,52.1170423 L63.0958313,52.1170423 Z" id="path-14"></path>
-        <filter x="-10.2%" y="-25.1%" width="120.5%" height="200.3%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M63.0958313,52.1170423 C63.648116,52.1170423 64.0958313,52.5647576 64.0958313,53.1170423 C64.0958313,53.3999726 63.9759798,53.6696616 63.7659819,53.8592675 L57.1441845,59.8380483 C56.7342649,60.2081623 56.1019227,60.1758934 55.7318088,59.7659738 C55.5658847,59.5822046 55.4740339,59.3434154 55.4740339,59.0958232 L55.4739156,56.1400423 L27.0479156,56.1403713 C25.9433461,56.1403713 25.0479156,55.2449408 25.0479156,54.1403713 C25.0479156,53.0358018 25.9433461,52.1403713 27.0479156,52.1403713 L55.4739156,52.1400423 L55.4740339,52.1170423 L63.0958313,52.1170423 Z" id="path-6"></path>
+        <filter x="-10.2%" y="-25.1%" width="120.5%" height="200.3%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M26.0958313,28.1170423 C26.648116,28.1170423 27.0958313,28.5647576 27.0958313,29.1170423 C27.0958313,29.3999726 26.9759798,29.6696616 26.7659819,29.8592675 L20.1441845,35.8380483 C19.7342649,36.2081623 19.1019227,36.1758934 18.7318088,35.7659738 C18.5658847,35.5822046 18.4740339,35.3434154 18.4740339,35.0958232 L18.4739156,32.1400423 L-9.95208437,32.1403713 C-11.0566539,32.1403713 -11.9520844,31.2449408 -11.9520844,30.1403713 C-11.9520844,29.0358018 -11.0566539,28.1403713 -9.95208437,28.1403713 L18.4739156,28.1400423 L18.4740339,28.1170423 L26.0958313,28.1170423 Z" id="path-16"></path>
-        <filter x="-10.2%" y="-25.1%" width="120.5%" height="200.3%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M26.0958313,28.1170423 C26.648116,28.1170423 27.0958313,28.5647576 27.0958313,29.1170423 C27.0958313,29.3999726 26.9759798,29.6696616 26.7659819,29.8592675 L20.1441845,35.8380483 C19.7342649,36.2081623 19.1019227,36.1758934 18.7318088,35.7659738 C18.5658847,35.5822046 18.4740339,35.3434154 18.4740339,35.0958232 L18.4739156,32.1400423 L-9.95208437,32.1403713 C-11.0566539,32.1403713 -11.9520844,31.2449408 -11.9520844,30.1403713 C-11.9520844,29.0358018 -11.0566539,28.1403713 -9.95208437,28.1403713 L18.4739156,28.1400423 L18.4740339,28.1170423 L26.0958313,28.1170423 Z" id="path-8"></path>
+        <filter x="-10.2%" y="-25.1%" width="120.5%" height="200.3%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -334.000000)">
-            <g id="编组-25" transform="translate(989.000000, 301.000000)">
-                <g id="版型-container" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-2" transform="translate(29.000000, 34.000000)">
-                        <path d="M27,14 L67,14 L67,52 C67,53.1045695 66.1045695,54 65,54 L27,54 L27,54 L27,14 Z" id="形状结合备份-6" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M0,14 L23,14 L23,58 L2,58 C0.8954305,58 -8.67738547e-17,57.1045695 0,56 L0,14 L0,14 Z" id="形状结合备份-31" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                        <path d="M2,0 L65,0 C66.1045695,-2.02906125e-16 67,0.8954305 67,2 L67,10 L67,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="形状结合备份-31" fill="url(#linearGradient-11)"></path>
-                        <path d="M33,34 L60,34 C61.1045695,34 62,34.8954305 62,36 C62,37.1045695 61.1045695,38 60,38 L33,38 C31.8954305,38 31,37.1045695 31,36 C31,34.8954305 31.8954305,34 33,34 Z" id="形状结合备份-32" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
-                        <path d="M33,24 L45,24 C46.1045695,24 47,24.8954305 47,26 C47,27.1045695 46.1045695,28 45,28 L33,28 C31.8954305,28 31,27.1045695 31,26 C31,24.8954305 31.8954305,24 33,24 Z" id="形状结合备份-33" fill="url(#linearGradient-13)"></path>
-                        <g id="形状结合">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
-                        </g>
-                        <g id="形状结合备份-15" transform="translate(7.571873, 32.106437) scale(-1, 1) rotate(-90.000000) translate(-7.571873, -32.106437) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -385.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25" transform="translate(393.000000, 41.000000)">
+                    <g id="版型-container" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-2" transform="translate(29.000000, 34.000000)">
+                            <path d="M27,14 L67,14 L67,52 C67,53.1045695 66.1045695,54 65,54 L27,54 L27,54 L27,14 Z" id="形状结合备份-6" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                            <path d="M0,14 L23,14 L23,58 L2,58 C0.8954305,58 -8.67738547e-17,57.1045695 0,56 L0,14 L0,14 Z" id="形状结合备份-31" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
+                            <path d="M2,0 L65,0 C66.1045695,-2.02906125e-16 67,0.8954305 67,2 L67,10 L67,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="形状结合备份-31" fill="url(#linearGradient-3)"></path>
+                            <path d="M33,34 L60,34 C61.1045695,34 62,34.8954305 62,36 C62,37.1045695 61.1045695,38 60,38 L33,38 C31.8954305,38 31,37.1045695 31,36 C31,34.8954305 31.8954305,34 33,34 Z" id="形状结合备份-32" fill="url(#linearGradient-4)" opacity="0.303770519"></path>
+                            <path d="M33,24 L45,24 C46.1045695,24 47,24.8954305 47,26 C47,27.1045695 46.1045695,28 45,28 L33,28 C31.8954305,28 31,27.1045695 31,26 C31,24.8954305 31.8954305,24 33,24 Z" id="形状结合备份-33" fill="url(#linearGradient-5)"></path>
+                            <g id="形状结合">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
+                            </g>
+                            <g id="形状结合备份-15" transform="translate(7.571873, 32.106437) scale(-1, 1) rotate(-90.000000) translate(-7.571873, -32.106437) ">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
+                            </g>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/country.svg b/examples/sites/demos/pc/overviewimage/country.svg
index b078ecc96f..2059b8d180 100644
--- a/examples/sites/demos/pc/overviewimage/country.svg
+++ b/examples/sites/demos/pc/overviewimage/country.svg
@@ -2,65 +2,23 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Country 国家/地区</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-696.000000, -610.000000)">
             <g id="编组-25备份" transform="translate(598.000000, 576.000000)">
                 <g id="Country-国家/地区" transform="translate(98.000000, 34.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="地球-3" transform="translate(37.000000, 37.000000)">
-                        <path d="M29,8 C17.4020203,8 8,17.4020203 8,29 C8,40.5979797 17.4020203,50 29,50 C40.5979797,50 50,40.5979797 50,29 C50,17.4020203 40.5979797,8 29,8 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M26,0 C11.6405965,0 0,11.6405965 0,26 C0,40.3594035 11.6405965,52 26,52 C40.3594035,52 52,40.3594035 52,26 C52,11.6405965 40.3594035,0 26,0 Z M45.8620459,17.3347808 C47.0214614,19.987975 47.668476,22.9190814 47.668476,26.0021712 C47.668476,29.0852609 47.0214613,32.0163674 45.8620459,34.6695616 L36.091691,34.6695616 C36.5693528,31.9816284 36.8298956,29.0592066 36.8298956,26.0021712 C36.8298955,22.9451357 36.5693528,20.022714 36.091691,17.3347808 L45.8620459,17.3347808 Z M19.5037996,26.0021712 C19.5037996,22.8886848 19.7426304,19.9445511 20.1768685,17.3347808 L31.8187892,17.3347808 C32.2530271,19.9445511 32.4962004,22.8886848 32.4962004,26.0021712 C32.4962004,29.1156576 32.2530271,32.0597912 31.8187892,34.6695616 L20.1812108,34.6695616 C19.7469729,32.0597912 19.5037996,29.1156576 19.5037996,26.0021712 L19.5037996,26.0021712 Z M43.3347808,13.0010856 L35.0842589,13.0010856 C34.0768267,9.61837159 32.6959499,6.83490607 31.0675574,4.93294365 C35.9705203,6.11378822 40.3084827,8.96686224 43.3347808,13.0010856 L43.3347808,13.0010856 Z M26,6.50488516 C27.9236743,6.50488516 29.6562839,9.01912315 30.846096,13.005428 L21.153904,13.005428 C22.3437161,9.01478079 24.0763257,6.50488516 26,6.50488516 Z M20.9324426,4.93728601 C19.3040501,6.83490607 17.9231733,9.62705636 16.9200835,13.005428 L8.66956161,13.005428 C11.6947681,8.97204115 16.0310642,6.11905309 20.9324426,4.93728601 L20.9324426,4.93728601 Z M6.13795406,17.3347808 L15.908309,17.3347808 C15.4306472,20.022714 15.1701044,22.9451357 15.1701044,26.0021712 C15.1701045,29.0592066 15.4306472,31.9816284 15.908309,34.6695616 L6.13795406,34.6695616 C4.94353641,31.9362393 4.32846268,28.9850682 4.33151266,26.0021712 C4.33151266,22.9190814 4.97853866,19.9879749 6.13795406,17.3347808 L6.13795406,17.3347808 Z M8.6652192,39.0032568 L16.9157411,39.0032568 C17.9231733,42.3859708 19.3040501,45.1694363 20.9324426,47.0713987 C16.0294797,45.8905541 11.6915173,43.0374801 8.6652192,39.0032568 Z M26,45.4994572 C24.0763257,45.4994572 22.3437161,42.9852192 21.153904,38.9989144 L30.846096,38.9989144 C29.6475992,42.9895616 27.9236743,45.4994572 26,45.4994572 Z M31.0675574,47.0670564 C32.6959499,45.1694363 34.0768267,42.377286 35.0799165,38.9989144 L43.3304384,38.9989144 C40.3052319,43.0323012 35.9689358,45.8852893 31.0675574,47.0670564 L31.0675574,47.0670564 Z" id="形状" fill="url(#linearGradient-10)"></path>
+                        <path d="M29,8 C17.4020203,8 8,17.4020203 8,29 C8,40.5979797 17.4020203,50 29,50 C40.5979797,50 50,40.5979797 50,29 C50,17.4020203 40.5979797,8 29,8 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M26,0 C11.6405965,0 0,11.6405965 0,26 C0,40.3594035 11.6405965,52 26,52 C40.3594035,52 52,40.3594035 52,26 C52,11.6405965 40.3594035,0 26,0 Z M45.8620459,17.3347808 C47.0214614,19.987975 47.668476,22.9190814 47.668476,26.0021712 C47.668476,29.0852609 47.0214613,32.0163674 45.8620459,34.6695616 L36.091691,34.6695616 C36.5693528,31.9816284 36.8298956,29.0592066 36.8298956,26.0021712 C36.8298955,22.9451357 36.5693528,20.022714 36.091691,17.3347808 L45.8620459,17.3347808 Z M19.5037996,26.0021712 C19.5037996,22.8886848 19.7426304,19.9445511 20.1768685,17.3347808 L31.8187892,17.3347808 C32.2530271,19.9445511 32.4962004,22.8886848 32.4962004,26.0021712 C32.4962004,29.1156576 32.2530271,32.0597912 31.8187892,34.6695616 L20.1812108,34.6695616 C19.7469729,32.0597912 19.5037996,29.1156576 19.5037996,26.0021712 L19.5037996,26.0021712 Z M43.3347808,13.0010856 L35.0842589,13.0010856 C34.0768267,9.61837159 32.6959499,6.83490607 31.0675574,4.93294365 C35.9705203,6.11378822 40.3084827,8.96686224 43.3347808,13.0010856 L43.3347808,13.0010856 Z M26,6.50488516 C27.9236743,6.50488516 29.6562839,9.01912315 30.846096,13.005428 L21.153904,13.005428 C22.3437161,9.01478079 24.0763257,6.50488516 26,6.50488516 Z M20.9324426,4.93728601 C19.3040501,6.83490607 17.9231733,9.62705636 16.9200835,13.005428 L8.66956161,13.005428 C11.6947681,8.97204115 16.0310642,6.11905309 20.9324426,4.93728601 L20.9324426,4.93728601 Z M6.13795406,17.3347808 L15.908309,17.3347808 C15.4306472,20.022714 15.1701044,22.9451357 15.1701044,26.0021712 C15.1701045,29.0592066 15.4306472,31.9816284 15.908309,34.6695616 L6.13795406,34.6695616 C4.94353641,31.9362393 4.32846268,28.9850682 4.33151266,26.0021712 C4.33151266,22.9190814 4.97853866,19.9879749 6.13795406,17.3347808 L6.13795406,17.3347808 Z M8.6652192,39.0032568 L16.9157411,39.0032568 C17.9231733,42.3859708 19.3040501,45.1694363 20.9324426,47.0713987 C16.0294797,45.8905541 11.6915173,43.0374801 8.6652192,39.0032568 Z M26,45.4994572 C24.0763257,45.4994572 22.3437161,42.9852192 21.153904,38.9989144 L30.846096,38.9989144 C29.6475992,42.9895616 27.9236743,45.4994572 26,45.4994572 Z M31.0675574,47.0670564 C32.6959499,45.1694363 34.0768267,42.377286 35.0799165,38.9989144 L43.3304384,38.9989144 C40.3052319,43.0323012 35.9689358,45.8852893 31.0675574,47.0670564 L31.0675574,47.0670564 Z" id="形状" fill="url(#linearGradient-2)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/crop.svg b/examples/sites/demos/pc/overviewimage/crop.svg
index 55734c75e7..c432503edf 100644
--- a/examples/sites/demos/pc/overviewimage/crop.svg
+++ b/examples/sites/demos/pc/overviewimage/crop.svg
@@ -2,71 +2,31 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Crop 图片裁剪</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="74.9773623%" x2="128.792906%" y2="-13.6150714%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="74.9773623%" x2="128.792906%" y2="-13.6150714%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1869.000000, -2255.000000)">
-            <g id="编组-14备份-14" transform="translate(1771.000000, 2225.000000)">
-                <g id="Crop-图片裁剪" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-15" transform="translate(31.000000, 33.000000)">
-                        <path d="M4,0 L11.62658,0 L11.62658,0 L50,0 C52.209139,3.51840692e-15 54,1.790861 54,4 L54,50 C54,52.209139 52.209139,54 50,54 L4,54 C1.790861,54 3.75067146e-15,52.209139 0,50 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <g id="编组-27" transform="translate(11.000000, 14.000000)" fill="url(#linearGradient-10)" opacity="0.204287574">
-                            <path d="M22.3692522,5.26582278 C26.7078877,5.26582278 31.5756251,26 31.5756251,26 L0,26 C0,25.994123 2.15755994,12.8883363 6.44916417,12.8883363 C10.7466473,12.8883363 10.2351821,16.5497288 13.4627037,16.5497288 C14.9324312,16.5497288 16.0098264,14.2183432 17.1553526,11.6750136 L17.4318227,11.0616303 C18.7303216,8.19031279 20.1604923,5.26582278 22.3692522,5.26582278 Z M6.57850019,0 C8.75957576,0 10.5232487,1.76311031 10.5232487,3.94936709 C10.5232487,6.13562387 8.75957576,7.89873418 6.57850019,7.89873418 C4.39742461,7.89873418 2.63375164,6.13562387 2.63375164,3.94936709 C2.63375164,1.76311031 4.39742461,0 6.57850019,0 Z" id="形状结合"></path>
-                        </g>
-                        <g id="编组-26" transform="translate(11.101695, 11.000000)" fill="#5073E5">
-                            <path d="M3.80737376,46.371061 L5.72456199,48.2832843 L1.78217496,52 L0,50.1685749 L3.80737376,46.371061 Z M9.55893846,40.5805256 L11.4761267,42.4927489 L7.506737,46.2902628 L5.58954877,44.3780395 L9.55893846,40.5805256 Z M15.1214846,34.8707884 L17.0386728,36.7830117 L13.231299,40.5805256 L11.3141108,38.6683023 L15.1214846,34.8707884 Z M21.0080625,29.1610512 L22.9252507,31.0732745 L18.955861,34.8707884 L17.0386728,32.9585651 L21.0080625,29.1610512 Z M27.3195769,22.8389489 L29.2367652,24.7511722 L25.531,28.42 L25.5445079,28.4338677 L24.8154363,29.1610512 L22.8982481,27.2488279 L23.498,26.649 L23.4852005,26.6364628 L27.3195769,22.8389489 Z M32.9091257,17.1292116 L34.8263139,19.041435 L31.0189401,22.8389489 L29.1017519,20.9267255 L32.9091257,17.1292116 Z M38.768701,11.5002726 L40.6858892,13.4124959 L36.7435022,17.1292116 L34.9613272,15.2977865 L38.768701,11.5002726 Z M44.5202657,5.70973723 L46.4374539,7.62196055 L42.4680642,11.4194745 L40.550876,9.50725114 L44.5202657,5.70973723 Z M50.0828118,0 L52,1.91222332 L48.1926262,5.70973723 L46.275438,3.79751391 L50.0828118,0 Z" id="形状结合"></path>
-                            <path d="M44.7092842,7.40649875 L44.7092842,47.8055828 C44.7092842,49.293036 43.5003344,50.4988551 42.0090191,50.4988551 C40.5177039,50.4988551 39.308754,49.293036 39.308754,47.8055828 L39.308754,12.7930433 L4.20530759,12.7930433 C2.71399234,12.7930433 1.50504247,11.5872242 1.50504247,10.099771 C1.50504247,8.61231782 2.71399234,7.40649875 4.20530759,7.40649875 L44.7092842,7.40649875 Z" id="路径"></path>
-                            <path d="M47.4095493,45.1123106 L6.90557268,45.1123106 L6.90557268,4.7132265 C6.90557268,3.22577329 8.11452255,2.01995422 9.60583779,2.01995422 C11.097153,2.01995422 12.3061029,3.22577329 12.3061029,4.7132265 L12.3061029,39.725766 L47.4095493,39.725766 C48.9008646,39.725766 50.1098144,40.9315851 50.1098144,42.4190383 C50.1098144,43.9064915 48.9008646,45.1123106 47.4095493,45.1123106 L47.4095493,45.1123106 Z" id="路径"></path>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1869.000000, -2306.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-14" transform="translate(1175.000000, 1965.000000)">
+                    <g id="Crop-图片裁剪" transform="translate(98.000000, 30.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-15" transform="translate(31.000000, 33.000000)">
+                            <path d="M4,0 L11.62658,0 L11.62658,0 L50,0 C52.209139,3.51840692e-15 54,1.790861 54,4 L54,50 C54,52.209139 52.209139,54 50,54 L4,54 C1.790861,54 3.75067146e-15,52.209139 0,50 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                            <g id="编组-27" transform="translate(11.000000, 14.000000)" fill="url(#linearGradient-2)" opacity="0.204287574">
+                                <path d="M22.3692522,5.26582278 C26.7078877,5.26582278 31.5756251,26 31.5756251,26 L0,26 C0,25.994123 2.15755994,12.8883363 6.44916417,12.8883363 C10.7466473,12.8883363 10.2351821,16.5497288 13.4627037,16.5497288 C14.9324312,16.5497288 16.0098264,14.2183432 17.1553526,11.6750136 L17.4318227,11.0616303 C18.7303216,8.19031279 20.1604923,5.26582278 22.3692522,5.26582278 Z M6.57850019,0 C8.75957576,0 10.5232487,1.76311031 10.5232487,3.94936709 C10.5232487,6.13562387 8.75957576,7.89873418 6.57850019,7.89873418 C4.39742461,7.89873418 2.63375164,6.13562387 2.63375164,3.94936709 C2.63375164,1.76311031 4.39742461,0 6.57850019,0 Z" id="形状结合"></path>
+                            </g>
+                            <g id="编组-26" transform="translate(11.101695, 11.000000)" fill="#5073E5">
+                                <path d="M3.80737376,46.371061 L5.72456199,48.2832843 L1.78217496,52 L0,50.1685749 L3.80737376,46.371061 Z M9.55893846,40.5805256 L11.4761267,42.4927489 L7.506737,46.2902628 L5.58954877,44.3780395 L9.55893846,40.5805256 Z M15.1214846,34.8707884 L17.0386728,36.7830117 L13.231299,40.5805256 L11.3141108,38.6683023 L15.1214846,34.8707884 Z M21.0080625,29.1610512 L22.9252507,31.0732745 L18.955861,34.8707884 L17.0386728,32.9585651 L21.0080625,29.1610512 Z M27.3195769,22.8389489 L29.2367652,24.7511722 L25.531,28.42 L25.5445079,28.4338677 L24.8154363,29.1610512 L22.8982481,27.2488279 L23.498,26.649 L23.4852005,26.6364628 L27.3195769,22.8389489 Z M32.9091257,17.1292116 L34.8263139,19.041435 L31.0189401,22.8389489 L29.1017519,20.9267255 L32.9091257,17.1292116 Z M38.768701,11.5002726 L40.6858892,13.4124959 L36.7435022,17.1292116 L34.9613272,15.2977865 L38.768701,11.5002726 Z M44.5202657,5.70973723 L46.4374539,7.62196055 L42.4680642,11.4194745 L40.550876,9.50725114 L44.5202657,5.70973723 Z M50.0828118,0 L52,1.91222332 L48.1926262,5.70973723 L46.275438,3.79751391 L50.0828118,0 Z" id="形状结合"></path>
+                                <path d="M44.7092842,7.40649875 L44.7092842,47.8055828 C44.7092842,49.293036 43.5003344,50.4988551 42.0090191,50.4988551 C40.5177039,50.4988551 39.308754,49.293036 39.308754,47.8055828 L39.308754,12.7930433 L4.20530759,12.7930433 C2.71399234,12.7930433 1.50504247,11.5872242 1.50504247,10.099771 C1.50504247,8.61231782 2.71399234,7.40649875 4.20530759,7.40649875 L44.7092842,7.40649875 Z" id="路径"></path>
+                                <path d="M47.4095493,45.1123106 L6.90557268,45.1123106 L6.90557268,4.7132265 C6.90557268,3.22577329 8.11452255,2.01995422 9.60583779,2.01995422 C11.097153,2.01995422 12.3061029,3.22577329 12.3061029,4.7132265 L12.3061029,39.725766 L47.4095493,39.725766 C48.9008646,39.725766 50.1098144,40.9315851 50.1098144,42.4190383 C50.1098144,43.9064915 48.9008646,45.1123106 47.4095493,45.1123106 L47.4095493,45.1123106 Z" id="路径"></path>
+                            </g>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/currency.svg b/examples/sites/demos/pc/overviewimage/currency.svg
index 8e3c47ff0e..e6c107dd90 100644
--- a/examples/sites/demos/pc/overviewimage/currency.svg
+++ b/examples/sites/demos/pc/overviewimage/currency.svg
@@ -2,64 +2,22 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Currency 币种</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1088.000000, -609.000000)">
             <g id="编组-25备份-4" transform="translate(989.000000, 576.000000)">
                 <g id="Currency-币种" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="31" y="32" width="46" height="46" rx="4"></rect>
-                    <rect id="矩形" fill="url(#linearGradient-10)" x="42" y="44" width="46" height="46" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="31" y="32" width="46" height="46" rx="4"></rect>
+                    <rect id="矩形" fill="url(#linearGradient-2)" x="42" y="44" width="46" height="46" rx="4"></rect>
                     <g id="币种汇率" transform="translate(50.000000, 53.000003)" fill="#FFFFFF" fill-rule="nonzero">
                         <path d="M19,12.9999974 C19.5522847,12.9999974 20,12.5522824 20,11.9999979 C20,11.4477134 19.5522847,10.9999983 19,10.9999983 L16.51,10.9999983 L16.478,10.9659983 L19.678,7.76599968 C20.0578288,7.35334524 20.0446047,6.71455837 19.6480232,6.31797706 C19.2514418,5.92139574 18.6126546,5.90817167 18.2,6.28800031 L15,9.48999894 L11.8,6.29000031 C11.3873454,5.91017167 10.7485582,5.92339574 10.3519768,6.31997706 C9.95539528,6.71655837 9.9421712,7.35534524 10.322,7.76799968 L13.522,10.9679983 L13.49,10.9999983 L11,10.9999983 C10.4477153,10.9999983 10,11.4477134 10,11.9999979 C10,12.5522824 10.4477153,12.9999974 11,12.9999974 L14,12.9999974 L14,14.9999966 L11,14.9999966 C10.4477153,14.9999966 10,15.4477117 10,15.9999962 C10,16.5522807 10.4477153,16.9999957 11,16.9999957 L14,16.9999957 L14,20.999994 C14,21.5522786 14.4477153,21.9999936 15,21.9999936 C15.5522847,21.9999936 16,21.5522786 16,20.999994 L16,16.9999957 L19,16.9999957 C19.5522847,16.9999957 20,16.5522807 20,15.9999962 C20,15.4477117 19.5522847,14.9999966 19,14.9999966 L16,14.9999966 L16,12.9999974 L19,12.9999974 Z M30,17.0000004 C30,15.1379965 28.722,13.5879972 27,13.1419974 L27,9.30799902 C27.276,9.47999895 27.506,9.71799885 27.676,10.0000004 L29.86,10.0000004 C29.4937584,8.60017035 28.4000848,7.50726204 27,7.14199994 L27,7.00000043 C27,6.44771549 26.5522847,6.00000043 26,6.00000043 C25.4477153,6.00000043 25,6.44771549 25,7.00000043 L25,7.14199994 C23.278,7.58799975 22,9.13999909 22,11.0000004 C22,12.8599975 23.278,14.4119968 25,14.8579967 L25,18.691995 C24.7232213,18.5178991 24.4915749,18.28077 24.324,18.0000004 L22.14,18.0000004 C22.504,19.3999947 23.602,20.4939943 25,20.8599941 L25,21.0000004 C25,21.5522786 25.4477153,22.0000004 26,22.0000004 C26.5522847,22.0000004 27,21.5522786 27,21.0000004 L27,20.8599941 C28.7626275,20.4070769 29.996202,18.8198784 30,17.0000004 L30,17.0000004 Z M24.016,10.9999983 C24.016,10.2779986 24.422,9.67199886 25,9.32599901 L25,12.6759976 C24.3986089,12.3307381 24.024419,11.6933987 24.016,10.9999983 Z M27,18.675995 L27,15.3259965 C27.578,15.6719963 27.984,16.2779961 27.984,16.9999957 C27.984,17.7219954 27.578,18.3279952 27,18.675995 Z M5,21 C6.358,21 7.554,19.8099945 8.276,18 L6.19,18 C5.856,18.6219951 5.448,19 5,19 C4.348,19 3.774,18.2079952 3.41,17 L5,17 C5.55228475,17 6,16.5522807 6,16 C6,15.4477117 5.55228475,15 5,15 L3.04,15 C2.98661534,14.3343989 2.98661534,13.6655951 3.04,13 L5,13 C5.55228475,13 6,12.5522824 6,12 C6,11.4477134 5.55228475,11 5,11 L3.41,11 C3.776,9.79199881 4.348,9 5,9 C5.448,9 5.856,9.37999899 6.19,10 L8.276,10 C7.552,8.1899995 6.358,7 5,7 C3.408,7 2.042,8.6419993 1.4,11 L1,11 C0.44771525,11 0,11.4477134 0,12 C0,12.5522824 0.44771525,13 1,13 L1.058,13 C1.03,13.3299973 1,13.6579972 1,14 C1,14.3419969 1.03,14.6699967 1.058,15 L1,15 C0.44771525,15 0,15.4477117 0,16 C0,16.5522807 0.44771525,17 1,17 L1.4,17 C2.042,19.3599947 3.408,21 5,21 Z" id="形状"></path>
                         <path d="M15,2 C16.7302361,2.01140959 18.4369458,2.40190461 20,3.14400165 L20,5 L25.716,5 C23.0604593,1.8289649 19.1361056,-0.00210642006 15,0 C10.863195,-0.0026988145 6.9379896,1.82842814 4.282,5 L7.08,5 C9.26503828,3.06633845 12.0822191,1.99922494 15,2 Z" id="路径" stroke="#FFFFFF" stroke-width="0.5"></path>
diff --git a/examples/sites/demos/pc/overviewimage/date-picker.svg b/examples/sites/demos/pc/overviewimage/date-picker.svg
index 963fbdf8a3..4c55682fc6 100644
--- a/examples/sites/demos/pc/overviewimage/date-picker.svg
+++ b/examples/sites/demos/pc/overviewimage/date-picker.svg
@@ -2,79 +2,37 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Date 日期</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="51.6575704%" x2="128.792906%" y2="45.7783188%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="51.6575704%" x2="128.792906%" y2="45.7783188%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.6575704%" x2="128.792906%" y2="45.7783188%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="51.6575704%" x2="128.792906%" y2="45.7783188%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-697.000000, -2137.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-697.000000, -2137.000000)">
             <g id="Date-日期" transform="translate(697.000000, 2137.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="日期" transform="translate(29.000000, 29.000000)">
                     <g id="编组-2">
-                        <path d="M12.6566586,6.01280875 L8.4761259,6.01280875 C3.79699765,6.00640437 0,9.75297346 0,14.3641354 L0,20 C0.0809498734,19.9975373 0.161955714,19.9975373 0.242905588,20 L66,20 L66,14.3641354 C66,9.75297346 62.2030024,6 57.5302663,6 L52.4803874,6 L52.4803874,10.4254346 C52.4803874,12.5388838 50.7480871,14.2680695 48.6002906,14.2680696 C46.473952,14.2822746 44.7377782,12.5685947 44.7201937,10.4382434 L44.7201937,6 L20.4168524,6 L20.4168524,10.4254346 C20.4168524,12.5388838 18.6781599,14.2680695 16.5367554,14.2680696 C14.4104168,14.2822746 12.674243,12.5685947 12.6566586,10.4382434 L12.6566586,6 L12.6566586,6.01280875 Z" id="形状" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)"></path>
-                        <path d="M66,26.0060729 L0.242929116,26.0060729 L0,26 L0,54.0748988 C0,58.4473684 3.80375821,62 8.47055407,62 L57.5230531,62 C62.1962418,62 65.9936071,58.4412956 65.9936071,54.0748988 L65.9936071,26.0060729 L66,26.0060729 Z" id="形状备份" stroke="url(#linearGradient-12)" fill="url(#linearGradient-11)"></path>
-                        <rect id="矩形" fill="url(#linearGradient-13)" x="15" y="0" width="3" height="11" rx="1.5"></rect>
-                        <rect id="矩形备份-10" fill="url(#linearGradient-13)" x="47" y="0" width="3" height="11" rx="1.5"></rect>
+                        <path d="M12.6566586,6.01280875 L8.4761259,6.01280875 C3.79699765,6.00640437 0,9.75297346 0,14.3641354 L0,20 C0.0809498734,19.9975373 0.161955714,19.9975373 0.242905588,20 L66,20 L66,14.3641354 C66,9.75297346 62.2030024,6 57.5302663,6 L52.4803874,6 L52.4803874,10.4254346 C52.4803874,12.5388838 50.7480871,14.2680695 48.6002906,14.2680696 C46.473952,14.2822746 44.7377782,12.5685947 44.7201937,10.4382434 L44.7201937,6 L20.4168524,6 L20.4168524,10.4254346 C20.4168524,12.5388838 18.6781599,14.2680695 16.5367554,14.2680696 C14.4104168,14.2822746 12.674243,12.5685947 12.6566586,10.4382434 L12.6566586,6 L12.6566586,6.01280875 Z" id="形状" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)"></path>
+                        <path d="M66,26.0060729 L0.242929116,26.0060729 L0,26 L0,54.0748988 C0,58.4473684 3.80375821,62 8.47055407,62 L57.5230531,62 C62.1962418,62 65.9936071,58.4412956 65.9936071,54.0748988 L65.9936071,26.0060729 L66,26.0060729 Z" id="形状备份" stroke="url(#linearGradient-4)" fill="url(#linearGradient-3)"></path>
+                        <rect id="矩形" fill="url(#linearGradient-5)" x="15" y="0" width="3" height="11" rx="1.5"></rect>
+                        <rect id="矩形备份-10" fill="url(#linearGradient-5)" x="47" y="0" width="3" height="11" rx="1.5"></rect>
                     </g>
                     <rect id="矩形" fill="#FFFFFF" fill-rule="nonzero" x="10" y="33" width="8" height="8" rx="4"></rect>
                     <rect id="矩形备份-12" fill="#FFFFFF" fill-rule="nonzero" x="29" y="33" width="8" height="8" rx="4"></rect>
diff --git a/examples/sites/demos/pc/overviewimage/date-range.svg b/examples/sites/demos/pc/overviewimage/date-range.svg
deleted file mode 100644
index b5b0b402f1..0000000000
--- a/examples/sites/demos/pc/overviewimage/date-range.svg
+++ /dev/null
@@ -1,109 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>DateRange 日期范围</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="53.3827968%" x2="128.792906%" y2="41.384324%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.3827968%" x2="128.792906%" y2="41.384324%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-12" x="4" y="30" width="41" height="16" rx="8"></rect>
-        <filter x="-9.8%" y="-12.5%" width="119.5%" height="150.0%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-14">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-15" x="11" y="34" width="8" height="8" rx="4"></rect>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-16">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <rect id="path-17" x="30" y="34" width="8" height="8" rx="4"></rect>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-18">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1089.000000, -2137.000000)">
-            <g id="DateRange-日期范围" transform="translate(1089.000000, 2137.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="日期" transform="translate(29.000000, 29.000000)">
-                    <path d="M44.7201937,6 L44.7201937,10.4382434 C44.7377782,12.5685947 46.473952,14.2822746 48.6002906,14.2680696 C50.7480871,14.2680695 52.4803874,12.5388838 52.4803874,10.4254346 L52.4803874,10.4254346 L52.4803874,6 L57.5302663,6 C62.2030024,6 66,9.75297346 66,14.3641354 L66,14.3641354 L66,20 L0.242905588,20 C0.161955714,19.9975373 0.0809498734,19.9975373 0,20 L0,20 L0,14.3641354 C0,9.75297346 3.79699765,6.00640437 8.4761259,6.01280875 L8.4761259,6.01280875 L12.6566586,6.01280875 L12.6566586,10.4382434 C12.674243,12.5685947 14.4104168,14.2822746 16.5367554,14.2680696 C18.6781599,14.2680695 20.4168524,12.5388838 20.4168524,10.4254346 L20.4168524,10.4254346 L20.4168524,6 L44.7201937,6 Z M16.5,0 C17.3284271,-1.52179594e-16 18,0.671572875 18,1.5 L18,9.5 C18,10.3284271 17.3284271,11 16.5,11 C15.6715729,11 15,10.3284271 15,9.5 L15,1.5 C15,0.671572875 15.6715729,1.52179594e-16 16.5,0 Z M48.5,0 C49.3284271,-1.52179594e-16 50,0.671572875 50,1.5 L50,9.5 C50,10.3284271 49.3284271,11 48.5,11 C47.6715729,11 47,10.3284271 47,9.5 L47,1.5 C47,0.671572875 47.6715729,1.52179594e-16 48.5,0 Z" id="形状" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)"></path>
-                    <path d="M66,26.0060729 L0.242929116,26.0060729 L0,26 L0,54.0748988 C0,58.4473684 3.80375821,62 8.47055407,62 L57.5230531,62 C62.1962418,62 65.9936071,58.4412956 65.9936071,54.0748988 L65.9936071,26.0060729 L66,26.0060729 Z" id="形状备份" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                    <g id="矩形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                    </g>
-                    <rect id="矩形备份-14" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" x="49" y="33" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-11" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" x="11" y="49" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-13" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" x="30" y="49" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-15" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" x="49" y="49" width="8" height="8" rx="4"></rect>
-                    <g id="矩形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="url(#linearGradient-14)" fill-rule="evenodd" xlink:href="#path-15"></use>
-                    </g>
-                    <g id="矩形备份-12">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                        <use fill="url(#linearGradient-14)" fill-rule="evenodd" xlink:href="#path-17"></use>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/date.svg b/examples/sites/demos/pc/overviewimage/date.svg
deleted file mode 100644
index e0f5ba9c2e..0000000000
--- a/examples/sites/demos/pc/overviewimage/date.svg
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Date 日期</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="51.6575704%" x2="128.792906%" y2="45.7783188%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.6575704%" x2="128.792906%" y2="45.7783188%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-12">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-697.000000, -2137.000000)">
-            <g id="Date-日期" transform="translate(697.000000, 2137.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="日期" transform="translate(29.000000, 29.000000)">
-                    <g id="编组-2">
-                        <path d="M12.6566586,6.01280875 L8.4761259,6.01280875 C3.79699765,6.00640437 0,9.75297346 0,14.3641354 L0,20 C0.0809498734,19.9975373 0.161955714,19.9975373 0.242905588,20 L66,20 L66,14.3641354 C66,9.75297346 62.2030024,6 57.5302663,6 L52.4803874,6 L52.4803874,10.4254346 C52.4803874,12.5388838 50.7480871,14.2680695 48.6002906,14.2680696 C46.473952,14.2822746 44.7377782,12.5685947 44.7201937,10.4382434 L44.7201937,6 L20.4168524,6 L20.4168524,10.4254346 C20.4168524,12.5388838 18.6781599,14.2680695 16.5367554,14.2680696 C14.4104168,14.2822746 12.674243,12.5685947 12.6566586,10.4382434 L12.6566586,6 L12.6566586,6.01280875 Z" id="形状" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)"></path>
-                        <path d="M66,26.0060729 L0.242929116,26.0060729 L0,26 L0,54.0748988 C0,58.4473684 3.80375821,62 8.47055407,62 L57.5230531,62 C62.1962418,62 65.9936071,58.4412956 65.9936071,54.0748988 L65.9936071,26.0060729 L66,26.0060729 Z" id="形状备份" stroke="url(#linearGradient-12)" fill="url(#linearGradient-11)"></path>
-                        <rect id="矩形" fill="url(#linearGradient-13)" x="15" y="0" width="3" height="11" rx="1.5"></rect>
-                        <rect id="矩形备份-10" fill="url(#linearGradient-13)" x="47" y="0" width="3" height="11" rx="1.5"></rect>
-                    </g>
-                    <rect id="矩形" fill="#FFFFFF" fill-rule="nonzero" x="10" y="33" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-12" fill="#FFFFFF" fill-rule="nonzero" x="29" y="33" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-14" fill="#FFFFFF" fill-rule="nonzero" x="48" y="33" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-11" fill="#FFFFFF" fill-rule="nonzero" x="10" y="47" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-13" fill="#FFFFFF" fill-rule="nonzero" x="29" y="47" width="8" height="8" rx="4"></rect>
-                    <rect id="矩形备份-15" fill="#FFFFFF" fill-rule="nonzero" x="48" y="46" width="8" height="8" rx="4"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/dept.svg b/examples/sites/demos/pc/overviewimage/dept.svg
index 69c621e5be..f0fad4dfb7 100644
--- a/examples/sites/demos/pc/overviewimage/dept.svg
+++ b/examples/sites/demos/pc/overviewimage/dept.svg
@@ -2,64 +2,22 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Dept 部门</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="83.4137481%" x2="128.792906%" y2="-35.1017791%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="83.4137481%" x2="128.792906%" y2="-35.1017791%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.6230819%" y1="86.8386573%" x2="121.79271%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.6230819%" y1="86.8386573%" x2="121.79271%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1478.000000, -609.000000)">
             <g id="编组-25备份-7" transform="translate(1380.000000, 576.000000)">
                 <g id="Dept-部门" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M34,31 L89,31 C91.209139,31 93,32.790861 93,35 L93,87 C93,89.209139 91.209139,91 89,91 L34,91 C31.790861,91 30,89.209139 30,87 L30,35 C30,32.790861 31.790861,31 34,31 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                    <path d="M46.1230667,70.8297872 C47.5347333,70.8297872 48.6897333,72.0618207 48.6897333,73.5682145 L48.6897333,73.5682145 L48.6897333,74.7847181 C48.6897333,75.8407468 48.1199333,76.7673602 47.2883333,77.2177254 L47.2883333,77.2177254 L49.9012,77.8285655 C50.6917333,77.9993936 51.2564,78.7500023 51.2666667,79.6093197 L51.2666667,79.6093197 L51.2666667,81.7783198 C51.2666667,82.4512792 50.7533333,82.9948234 50.1270667,83 L50.1270667,83 L42.1396,83 C41.5133333,83 41,82.4564558 41,81.7834964 L41,81.7834964 L41,79.6144963 C41,78.7500023 41.5646667,78.0045703 42.3449333,77.8285655 L42.3449333,77.8285655 L44.7165333,77.2746681 L44.9526667,77.2177254 C44.4188,76.9278351 43.9978667,76.4412337 43.7617333,75.8562766 C43.7258,75.7682742 43.695,75.6802719 43.6693333,75.5922695 C43.6539333,75.5405034 43.6436667,75.4939139 43.6334,75.4473244 C43.618,75.3748518 43.6077333,75.3075559 43.5923333,75.2402599 C43.5872,75.198847 43.5769333,75.1626107 43.5718,75.1211978 C43.5615333,75.0073124 43.5512667,74.893427 43.5512667,74.7795415 L43.5512667,74.7795415 L43.5512667,73.5630379 C43.5512667,73.4802121 43.5615333,73.3973863 43.5666667,73.3145606 C43.5666667,73.2679711 43.5769333,73.2265582 43.5820667,73.1799687 C43.5872,73.148909 43.5923333,73.1178493 43.5974667,73.0816131 C43.6077333,73.0194937 43.618,72.962551 43.6334,72.9056083 C43.6385333,72.8900785 43.6385333,72.8797252 43.6436667,72.8641954 C43.9414,71.6994579 44.9424,70.8297872 46.1230667,70.8297872 Z M61.9897333,70.8297872 C63.4014,70.8297872 64.5564,72.0618207 64.5564,73.5682145 L64.5564,73.5682145 L64.5564,74.7847181 C64.5564,75.8407468 63.9866,76.7673602 63.155,77.2177254 L63.155,77.2177254 L65.7678667,77.8285655 C66.5584,77.9993936 67.1230667,78.7500023 67.1333333,79.6093197 L67.1333333,79.6093197 L67.1333333,81.7783198 C67.1333333,82.4512792 66.62,82.9948234 65.9937333,83 L65.9937333,83 L58.0062667,83 C57.38,83 56.8666667,82.4564558 56.8666667,81.7834964 L56.8666667,81.7834964 L56.8666667,79.6144963 C56.8666667,78.7500023 57.4313333,78.0045703 58.2116,77.8285655 L58.2116,77.8285655 L60.5832,77.2746681 L60.8193333,77.2177254 C60.2854667,76.9278351 59.8645333,76.4412337 59.6284,75.8562766 C59.5924667,75.7682742 59.5616667,75.6802719 59.536,75.5922695 C59.5206,75.5405034 59.5103333,75.4939139 59.5000667,75.4473244 C59.4846667,75.3748518 59.4744,75.3075559 59.459,75.2402599 C59.4538667,75.198847 59.4436,75.1626107 59.4384667,75.1211978 C59.4282,75.0073124 59.4179333,74.893427 59.4179333,74.7795415 L59.4179333,74.7795415 L59.4179333,73.5630379 C59.4179333,73.4802121 59.4282,73.3973863 59.4333333,73.3145606 C59.4333333,73.2679711 59.4436,73.2265582 59.4487333,73.1799687 C59.4538666,73.148909 59.459,73.1178493 59.4641333,73.0816131 C59.4744,73.0194937 59.4846667,72.962551 59.5000667,72.9056083 C59.5052,72.8900785 59.5052,72.8797252 59.5103333,72.8641954 C59.8080666,71.6994579 60.8090666,70.8297872 61.9897333,70.8297872 Z M77.8564,70.8297872 C79.2680667,70.8297872 80.4230667,72.0618207 80.4230667,73.5682145 L80.4230667,73.5682145 L80.4230667,74.7847181 C80.4230667,75.8407468 79.8532667,76.7673602 79.0216667,77.2177254 L79.0216667,77.2177254 L81.6345333,77.8285655 C82.4250667,77.9993936 82.9897333,78.7500023 83,79.6093197 L83,79.6093197 L83,81.7783198 C83,82.4512792 82.4866667,82.9948234 81.8604,83 L81.8604,83 L73.8729333,83 C73.2466667,83 72.7333333,82.4564558 72.7333333,81.7834964 L72.7333333,81.7834964 L72.7333333,79.6144963 C72.7333333,78.7500023 73.298,78.0045703 74.0782667,77.8285655 L74.0782667,77.8285655 L76.4498667,77.2746681 L76.686,77.2177254 C76.1521333,76.9278351 75.7312,76.4412337 75.4950667,75.8562766 C75.4591333,75.7682742 75.4283333,75.6802719 75.4026667,75.5922695 C75.3872667,75.5405034 75.377,75.4939139 75.3667333,75.4473244 C75.3513333,75.3748518 75.3410667,75.3075559 75.3256667,75.2402599 C75.3205333,75.198847 75.3102667,75.1626107 75.3051333,75.1211978 C75.2948667,75.0073124 75.2846,74.893427 75.2846,74.7795415 L75.2846,74.7795415 L75.2846,73.5630379 C75.2846,73.4802121 75.2948667,73.3973863 75.3,73.3145606 C75.3,73.2679711 75.3102667,73.2265582 75.3154,73.1799687 C75.3205333,73.148909 75.3256667,73.1178493 75.3308,73.0816131 C75.3410667,73.0194937 75.3513333,72.962551 75.3667333,72.9056083 C75.3718667,72.8900785 75.3718667,72.8797252 75.377,72.8641954 C75.6747333,71.6994579 76.6757333,70.8297872 77.8564,70.8297872 Z M61.7126316,39 C64.0766667,39 66.0108772,41.0516437 66.0108772,43.5601661 L66.0108772,43.5601661 L66.0108772,45.5859488 C66.0108772,47.3445006 65.0566667,48.8875436 63.6640351,49.6375142 L63.6640351,49.6375142 L68.0396491,50.6547157 C69.3635088,50.9391873 70.3091228,52.1891384 70.3263158,53.6201168 L70.3263158,53.6201168 L70.3263158,57.2320442 C70.3263158,58.3526899 69.4666667,59.2578269 68.4178947,59.2664473 L68.4178947,59.2664473 L63.148,59.266 L63.1482114,62.1682719 L76.3991038,62.1682719 C77.8425961,62.1682719 79.0211186,63.2959813 79.0211186,64.6817933 L79.0211186,64.6817933 L79.0211186,69.6969237 L76.5572947,69.6969237 L76.5572947,64.6976765 C76.5414756,64.6738517 76.482154,64.6301728 76.3872395,64.6301728 L76.3872395,64.6301728 L63.1403019,64.6301728 L63.1403019,69.6969237 L60.6922971,69.6969237 L60.6922971,64.6301728 L47.4866836,64.6301728 C47.3917691,64.6301728 47.3324475,64.6738517 47.3166284,64.6976765 L47.3166284,64.6976765 L47.3166284,69.6969237 L44.8686236,69.6969237 L44.8686236,64.6817933 C44.8686236,63.2959813 46.0431913,62.1682719 47.4906384,62.1682719 L47.4906384,62.1682719 L60.6962519,62.1682719 L60.696,59.266 L55.0417544,59.2664473 C54.0406539,59.2664473 53.211874,58.4417253 53.1385988,57.3920793 L53.1333333,57.2406645 L53.1333333,53.6287371 C53.1333333,52.1891384 54.0789473,50.9478077 55.385614,50.6547157 L55.385614,50.6547157 L59.357193,49.7323381 L59.7526316,49.6375142 C58.8585965,49.1547745 58.1536842,48.3444615 57.7582456,47.3703617 C57.6980702,47.2238157 57.6464912,47.0772697 57.6035088,46.9307237 C57.5777193,46.8445202 57.5605263,46.766937 57.5433333,46.6893539 C57.5175439,46.568669 57.5003509,46.4566044 57.4745614,46.3445398 L57.4745614,46.3445398 L57.4401754,46.1462717 C57.4229824,45.956624 57.4057895,45.7669762 57.4057895,45.5773285 L57.4057895,45.5773285 L57.4057895,43.5515458 C57.4057895,43.4136202 57.4229824,43.2756945 57.4315789,43.1377689 C57.4315789,43.0601857 57.4487719,42.9912229 57.4573684,42.9136397 C57.4659649,42.8619176 57.4745614,42.8101955 57.4831579,42.7498531 C57.5003509,42.6464088 57.5175439,42.551585 57.5433333,42.4567611 C57.5519298,42.4309001 57.5519298,42.4136593 57.5605263,42.3877983 C58.0591228,40.4482191 59.7354386,39 61.7126316,39 Z" id="形状结合" fill="url(#linearGradient-10)"></path>
+                    <g id="编组"></g>
+                    <path d="M34,31 L89,31 C91.209139,31 93,32.790861 93,35 L93,87 C93,89.209139 91.209139,91 89,91 L34,91 C31.790861,91 30,89.209139 30,87 L30,35 C30,32.790861 31.790861,31 34,31 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                    <path d="M46.1230667,70.8297872 C47.5347333,70.8297872 48.6897333,72.0618207 48.6897333,73.5682145 L48.6897333,73.5682145 L48.6897333,74.7847181 C48.6897333,75.8407468 48.1199333,76.7673602 47.2883333,77.2177254 L47.2883333,77.2177254 L49.9012,77.8285655 C50.6917333,77.9993936 51.2564,78.7500023 51.2666667,79.6093197 L51.2666667,79.6093197 L51.2666667,81.7783198 C51.2666667,82.4512792 50.7533333,82.9948234 50.1270667,83 L50.1270667,83 L42.1396,83 C41.5133333,83 41,82.4564558 41,81.7834964 L41,81.7834964 L41,79.6144963 C41,78.7500023 41.5646667,78.0045703 42.3449333,77.8285655 L42.3449333,77.8285655 L44.7165333,77.2746681 L44.9526667,77.2177254 C44.4188,76.9278351 43.9978667,76.4412337 43.7617333,75.8562766 C43.7258,75.7682742 43.695,75.6802719 43.6693333,75.5922695 C43.6539333,75.5405034 43.6436667,75.4939139 43.6334,75.4473244 C43.618,75.3748518 43.6077333,75.3075559 43.5923333,75.2402599 C43.5872,75.198847 43.5769333,75.1626107 43.5718,75.1211978 C43.5615333,75.0073124 43.5512667,74.893427 43.5512667,74.7795415 L43.5512667,74.7795415 L43.5512667,73.5630379 C43.5512667,73.4802121 43.5615333,73.3973863 43.5666667,73.3145606 C43.5666667,73.2679711 43.5769333,73.2265582 43.5820667,73.1799687 C43.5872,73.148909 43.5923333,73.1178493 43.5974667,73.0816131 C43.6077333,73.0194937 43.618,72.962551 43.6334,72.9056083 C43.6385333,72.8900785 43.6385333,72.8797252 43.6436667,72.8641954 C43.9414,71.6994579 44.9424,70.8297872 46.1230667,70.8297872 Z M61.9897333,70.8297872 C63.4014,70.8297872 64.5564,72.0618207 64.5564,73.5682145 L64.5564,73.5682145 L64.5564,74.7847181 C64.5564,75.8407468 63.9866,76.7673602 63.155,77.2177254 L63.155,77.2177254 L65.7678667,77.8285655 C66.5584,77.9993936 67.1230667,78.7500023 67.1333333,79.6093197 L67.1333333,79.6093197 L67.1333333,81.7783198 C67.1333333,82.4512792 66.62,82.9948234 65.9937333,83 L65.9937333,83 L58.0062667,83 C57.38,83 56.8666667,82.4564558 56.8666667,81.7834964 L56.8666667,81.7834964 L56.8666667,79.6144963 C56.8666667,78.7500023 57.4313333,78.0045703 58.2116,77.8285655 L58.2116,77.8285655 L60.5832,77.2746681 L60.8193333,77.2177254 C60.2854667,76.9278351 59.8645333,76.4412337 59.6284,75.8562766 C59.5924667,75.7682742 59.5616667,75.6802719 59.536,75.5922695 C59.5206,75.5405034 59.5103333,75.4939139 59.5000667,75.4473244 C59.4846667,75.3748518 59.4744,75.3075559 59.459,75.2402599 C59.4538667,75.198847 59.4436,75.1626107 59.4384667,75.1211978 C59.4282,75.0073124 59.4179333,74.893427 59.4179333,74.7795415 L59.4179333,74.7795415 L59.4179333,73.5630379 C59.4179333,73.4802121 59.4282,73.3973863 59.4333333,73.3145606 C59.4333333,73.2679711 59.4436,73.2265582 59.4487333,73.1799687 C59.4538666,73.148909 59.459,73.1178493 59.4641333,73.0816131 C59.4744,73.0194937 59.4846667,72.962551 59.5000667,72.9056083 C59.5052,72.8900785 59.5052,72.8797252 59.5103333,72.8641954 C59.8080666,71.6994579 60.8090666,70.8297872 61.9897333,70.8297872 Z M77.8564,70.8297872 C79.2680667,70.8297872 80.4230667,72.0618207 80.4230667,73.5682145 L80.4230667,73.5682145 L80.4230667,74.7847181 C80.4230667,75.8407468 79.8532667,76.7673602 79.0216667,77.2177254 L79.0216667,77.2177254 L81.6345333,77.8285655 C82.4250667,77.9993936 82.9897333,78.7500023 83,79.6093197 L83,79.6093197 L83,81.7783198 C83,82.4512792 82.4866667,82.9948234 81.8604,83 L81.8604,83 L73.8729333,83 C73.2466667,83 72.7333333,82.4564558 72.7333333,81.7834964 L72.7333333,81.7834964 L72.7333333,79.6144963 C72.7333333,78.7500023 73.298,78.0045703 74.0782667,77.8285655 L74.0782667,77.8285655 L76.4498667,77.2746681 L76.686,77.2177254 C76.1521333,76.9278351 75.7312,76.4412337 75.4950667,75.8562766 C75.4591333,75.7682742 75.4283333,75.6802719 75.4026667,75.5922695 C75.3872667,75.5405034 75.377,75.4939139 75.3667333,75.4473244 C75.3513333,75.3748518 75.3410667,75.3075559 75.3256667,75.2402599 C75.3205333,75.198847 75.3102667,75.1626107 75.3051333,75.1211978 C75.2948667,75.0073124 75.2846,74.893427 75.2846,74.7795415 L75.2846,74.7795415 L75.2846,73.5630379 C75.2846,73.4802121 75.2948667,73.3973863 75.3,73.3145606 C75.3,73.2679711 75.3102667,73.2265582 75.3154,73.1799687 C75.3205333,73.148909 75.3256667,73.1178493 75.3308,73.0816131 C75.3410667,73.0194937 75.3513333,72.962551 75.3667333,72.9056083 C75.3718667,72.8900785 75.3718667,72.8797252 75.377,72.8641954 C75.6747333,71.6994579 76.6757333,70.8297872 77.8564,70.8297872 Z M61.7126316,39 C64.0766667,39 66.0108772,41.0516437 66.0108772,43.5601661 L66.0108772,43.5601661 L66.0108772,45.5859488 C66.0108772,47.3445006 65.0566667,48.8875436 63.6640351,49.6375142 L63.6640351,49.6375142 L68.0396491,50.6547157 C69.3635088,50.9391873 70.3091228,52.1891384 70.3263158,53.6201168 L70.3263158,53.6201168 L70.3263158,57.2320442 C70.3263158,58.3526899 69.4666667,59.2578269 68.4178947,59.2664473 L68.4178947,59.2664473 L63.148,59.266 L63.1482114,62.1682719 L76.3991038,62.1682719 C77.8425961,62.1682719 79.0211186,63.2959813 79.0211186,64.6817933 L79.0211186,64.6817933 L79.0211186,69.6969237 L76.5572947,69.6969237 L76.5572947,64.6976765 C76.5414756,64.6738517 76.482154,64.6301728 76.3872395,64.6301728 L76.3872395,64.6301728 L63.1403019,64.6301728 L63.1403019,69.6969237 L60.6922971,69.6969237 L60.6922971,64.6301728 L47.4866836,64.6301728 C47.3917691,64.6301728 47.3324475,64.6738517 47.3166284,64.6976765 L47.3166284,64.6976765 L47.3166284,69.6969237 L44.8686236,69.6969237 L44.8686236,64.6817933 C44.8686236,63.2959813 46.0431913,62.1682719 47.4906384,62.1682719 L47.4906384,62.1682719 L60.6962519,62.1682719 L60.696,59.266 L55.0417544,59.2664473 C54.0406539,59.2664473 53.211874,58.4417253 53.1385988,57.3920793 L53.1333333,57.2406645 L53.1333333,53.6287371 C53.1333333,52.1891384 54.0789473,50.9478077 55.385614,50.6547157 L55.385614,50.6547157 L59.357193,49.7323381 L59.7526316,49.6375142 C58.8585965,49.1547745 58.1536842,48.3444615 57.7582456,47.3703617 C57.6980702,47.2238157 57.6464912,47.0772697 57.6035088,46.9307237 C57.5777193,46.8445202 57.5605263,46.766937 57.5433333,46.6893539 C57.5175439,46.568669 57.5003509,46.4566044 57.4745614,46.3445398 L57.4745614,46.3445398 L57.4401754,46.1462717 C57.4229824,45.956624 57.4057895,45.7669762 57.4057895,45.5773285 L57.4057895,45.5773285 L57.4057895,43.5515458 C57.4057895,43.4136202 57.4229824,43.2756945 57.4315789,43.1377689 C57.4315789,43.0601857 57.4487719,42.9912229 57.4573684,42.9136397 C57.4659649,42.8619176 57.4745614,42.8101955 57.4831579,42.7498531 C57.5003509,42.6464088 57.5175439,42.551585 57.5433333,42.4567611 C57.5519298,42.4309001 57.5519298,42.4136593 57.5605263,42.3877983 C58.0591228,40.4482191 59.7354386,39 61.7126316,39 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/dev-chart.svg b/examples/sites/demos/pc/overviewimage/dev-chart.svg
new file mode 100644
index 0000000000..c0e4601871
--- /dev/null
+++ b/examples/sites/demos/pc/overviewimage/dev-chart.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>开发中图表组件</title>
+    <defs>
+        <linearGradient x1="44.0988019%" y1="82.2386168%" x2="128.792906%" y2="-32.1088266%" id="linearGradient-1">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="63.4956023%" x2="128.792906%" y2="15.6279277%" id="linearGradient-2">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-3">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览2" transform="translate(-696.000000, -1434.000000)">
+            <g id="编组-17备份-2" transform="translate(598.000000, 1401.000000)">
+                <g id="开发中图表组件" transform="translate(98.000000, 33.000000)">
+                    <g id="编组"></g>
+                    <g id="编组-2" transform="translate(29.000000, 36.000000)">
+                        <path d="M7,0 L16.3490363,0 L16.3490363,0 L61,0 C63.209139,-4.05812251e-16 65,1.790861 65,4 L65,54 C65,56.209139 63.209139,58 61,58 L7,58 C4.790861,58 3,56.209139 3,54 L3,4 C3,1.790861 4.790861,4.05812251e-16 7,0 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M3,5 L49,5 C50.1045695,5 51,5.8954305 51,7 L51,20 C51,21.1045695 50.1045695,22 49,22 L0,22 L0,22 L0,8.69218242 L3,5 Z" id="矩形" fill="#5073E5"></path>
+                        <polygon id="矩形备份-32" fill="#3E5DC0" points="0 8.98530819 3 5 3 22 0 24.9853082"></polygon>
+                        <polygon id="矩形备份-33" fill="#243D8C" transform="translate(1.500000, 24.096418) scale(-1, 1) translate(-1.500000, -24.096418) " points="0 26.9957245 3 24.0301261 0 21.1971118"></polygon>
+                        <text id="开发中" font-family="PingFangSC-Semibold, PingFang SC" font-size="12" font-weight="500" fill="#FFFFFF">
+                            <tspan x="10.7588235" y="18">开发中</tspan>
+                        </text>
+                    </g>
+                    <g id="图表-饼图" transform="translate(44.000000, 63.000000)">
+                        <polygon id="路径" fill="url(#linearGradient-2)" opacity="0.303770519" points="2.71428571 2 0 2 0 25 38 25 38 22.5313943 2.71428571 22.5313943"></polygon>
+                        <path d="M18.375,1.25 C13.1982839,1.25 9,5.44828391 9,10.625 C9,15.8017161 13.1982839,20 18.375,20 C23.5517161,20 27.75,15.8017161 27.75,10.625 L18.375,10.625 L18.375,1.25 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
+                        <path d="M20.25,0 L20.25,8.75 L29,8.75 C29,3.91683329 25.0809798,0 20.25,0 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/dev.svg b/examples/sites/demos/pc/overviewimage/dev.svg
index fa4b5e668f..84a980441c 100644
--- a/examples/sites/demos/pc/overviewimage/dev.svg
+++ b/examples/sites/demos/pc/overviewimage/dev.svg
@@ -1,74 +1,34 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Modal 弹出框</title>
+    <title>开发中组件</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="76.9198201%" x2="128.792906%" y2="-18.5623347%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="82.2386168%" x2="128.792906%" y2="-32.1088266%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="编组-17备份" transform="translate(-98.000000, -33.000000)">
-            <g id="Modal-弹出框" transform="translate(98.000000, 33.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="编组-2" transform="translate(29.000000, 36.000000)">
-                    <path d="M6.62941176,0 L15.978448,0 L15.978448,0 L60.6294118,0 C62.8385508,3.51840692e-15 64.6294118,1.790861 64.6294118,4 L64.6294118,49 C64.6294118,51.209139 62.8385508,53 60.6294118,53 L6.62941176,53 C4.42027277,53 2.62941176,51.209139 2.62941176,49 L2.62941176,4 C2.62941176,1.790861 4.42027277,4.05812251e-16 6.62941176,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                    <g id="编组-36" transform="translate(20.000000, 24.000000)" fill="url(#linearGradient-10)" opacity="0.303770519">
-                        <path d="M18.4437368,13.7577425 C18.4437368,13.7577425 15.2259452,14.6049856 12.9881281,18.3439942 C13.1341609,18.3730232 18.9409919,24.2443166 18.9409919,24.2443166 C19.9794472,25.2518945 21.6760641,25.2518945 22.7145194,24.2443166 L24.2211585,22.7837505 C25.2596138,21.7761726 25.2596138,20.1404196 24.2211585,19.1325041 L18.4437368,13.7577425 Z M21.0618476,23.2364011 C20.7985153,23.4844982 20.3746146,23.4844982 20.1258181,23.2364011 L15.2844259,18.5482102 C15.0210936,18.2997755 15.0210936,17.8910061 15.2844259,17.6425714 C15.5477581,17.3944744 15.9716588,17.3944744 16.2204554,17.6425714 L21.0618476,22.3307624 C21.3106442,22.5643449 21.3106442,22.9734519 21.0618476,23.2364011 L21.0618476,23.2364011 Z M23.1827032,21.1770265 C22.919371,21.4251236 22.4954703,21.4251236 22.2466737,21.1770265 L17.3907458,16.4888356 C17.1274136,16.240401 17.1274136,15.8316315 17.3907458,15.5831969 C17.6540781,15.3350998 18.0779788,15.3350998 18.3267754,15.5831969 L23.1681676,20.2717254 C23.4460355,20.5053079 23.4460355,20.9140774 23.1827032,21.1770265 L23.1827032,21.1770265 Z M6.21619612,7.85742013 L10.1506301,11.7716157 L12.0375629,9.93130918 L8.10312889,6.03196571 L9.03915842,5.11181246 L3.7735275,0 L0,3.65124639 L5.28016659,8.7627213 L6.21619612,7.85742013 Z" id="形状"></path>
-                        <path d="M19.1460887,11.1222365 C19.2907188,11.1656758 19.4062892,11.209115 19.5509193,11.2669227 C20.2446759,11.4837848 20.9962177,11.5559608 21.7043371,11.4981532 C23.0193683,11.3825379 24.3200367,10.8331983 25.3174162,9.82106358 C26.5025142,8.64987429 27.0660036,7.04529483 26.9938556,5.46911797 C26.9938556,5.41131034 26.9938556,5.35350271 26.9794928,5.29569508 L24.4072156,5.29569508 L23.3811105,6.32219822 L22.600509,7.10276831 L21.8055448,7.89804093 L19.6664897,7.33433299 L19.0883035,5.19444819 L19.8832678,4.39917557 L20.6635352,3.61827132 L21.6896403,2.59176818 L21.6896403,0.0184932199 C21.6318551,0.0184932199 21.5453443,0.00412484915 21.487225,0.00412484915 C19.941053,-0.0536827822 18.3511245,0.495656789 17.1516637,1.68121445 C16.1399214,2.69334922 15.576432,3.98015378 15.4752244,5.29569508 C15.4174392,6.09096769 15.50395,6.88590616 15.7641505,7.63773952 C15.7641505,7.65210789 15.7785133,7.66647626 15.7785133,7.69554715 C15.8506613,7.95584856 15.8653581,8.27395761 15.5473724,8.60643502 C15.1281791,9.01108844 2.74276963,20.7797866 2.74276963,20.7797866 C1.71666451,21.6619377 1.78881252,23.295588 2.74276963,24.2642836 C3.71108953,25.2186107 5.32974363,25.2764183 6.22591552,24.2499152 C6.22591552,24.2499152 17.8888427,11.9028066 18.3945469,11.3969063 C18.6547474,11.1366049 18.9293107,11.0931656 19.1460887,11.1222365 Z M5.09860276,23.07906 C4.76625426,23.4115375 4.26021609,23.4115375 3.92786759,23.07906 C3.59551909,22.7465826 3.59551909,22.2403482 3.92786759,21.9078707 C4.26021609,21.5753933 4.76625426,21.5753933 5.09860276,21.9078707 C5.40188539,22.2393196 5.40188539,22.7476112 5.09860276,23.07906 L5.09860276,23.07906 Z" id="形状"></path>
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览2" transform="translate(-696.000000, -334.000000)">
+            <g id="编组-17" transform="translate(598.000000, 301.000000)">
+                <g id="开发中组件" transform="translate(98.000000, 33.000000)">
+                    <g id="编组"></g>
+                    <g id="编组-2" transform="translate(29.000000, 36.000000)">
+                        <path d="M7,0 L16.3490363,0 L16.3490363,0 L61,0 C63.209139,-4.05812251e-16 65,1.790861 65,4 L65,54 C65,56.209139 63.209139,58 61,58 L7,58 C4.790861,58 3,56.209139 3,54 L3,4 C3,1.790861 4.790861,4.05812251e-16 7,0 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <g id="unite" transform="translate(21.000000, 27.000000)" fill="url(#linearGradient-2)" opacity="0.604724702">
+                            <path d="M20.6273315,14.5791186 L19.5373419,10.5255519 C21.1290727,9.50787225 22.1827293,7.73493708 22.1827293,5.71730141 C22.1827293,2.55963584 19.6007805,0 16.4155888,0 C13.2303971,0 10.6484482,2.55963584 10.6484482,5.71730141 C10.6484482,6.67151902 10.8843243,7.57085053 11.3012886,8.36155331 L8.60342022,11.0361069 C7.76603142,10.5661447 6.79830524,10.2980033 5.76714051,10.2980033 C2.58194881,10.2980033 0,12.8576391 0,16.0153047 C0,19.1729703 2.58194881,21.7326061 5.76714051,21.7326061 C7.77410541,21.7326061 9.54173398,20.7160699 10.5746288,19.173542 L14.4662953,20.2386753 C14.4662953,20.2535402 14.4657186,20.2678335 14.4657186,20.2826985 C14.4657186,23.4403641 17.0476674,26 20.2328591,26 C23.4180508,26 26,23.4403641 26,20.2826985 C26.0005763,17.2565308 23.6285514,14.7797959 20.6273315,14.5791186 Z M8.03189659,16.4555369 C7.88541122,17.1999296 7.37501929,17.8151112 6.69161314,18.1112674 C6.40034929,18.237847 6.08573845,18.3030678 5.76771723,18.3027978 C4.49375589,18.3027978 3.46086102,17.2788283 3.46086102,16.0158764 C3.46086102,14.7529246 4.49375589,13.7289559 5.76771723,13.7289559 C5.80693378,13.7289559 5.84557363,13.7306711 5.88479018,13.732958 C6.67661857,13.7724074 7.36348501,14.2063505 7.74757657,14.8421145 C7.95519363,15.1851525 8.07457343,15.5870788 8.07457343,16.0164482 C8.07457343,16.1662415 8.05957887,16.3131761 8.03189659,16.4555369 L8.03189659,16.4555369 Z M15.5314861,16.9718092 L11.5331276,15.8775177 C11.5129426,15.0427917 11.3122461,14.2526607 10.9691013,13.5437153 L13.7494397,10.7874043 C14.5078146,11.1804 15.3452901,11.4001689 16.2004744,11.4306007 L17.2627817,15.3818277 C16.5818575,15.7885844 15.9925597,16.3297818 15.5314861,16.9718092 L15.5314861,16.9718092 Z M20.2334358,22.5701908 C19.3055029,22.5701908 18.5067539,22.0270471 18.1399638,21.2443486 C18.0032825,20.9521945 17.9265796,20.62688 17.9265796,20.2832702 C17.9265796,19.8487553 18.048843,19.4428269 18.260497,19.0969302 C18.5540445,18.618392 19.0200294,18.2553434 19.5730982,18.0918286 C19.7873934,18.0285052 20.0098234,17.9963497 20.2334358,17.9963497 C20.7824676,17.9963497 21.2865156,18.1867358 21.6827182,18.504046 C22.2057978,18.9231242 22.540292,19.5640337 22.540292,20.2832702 C22.540292,21.5462221 21.5073971,22.5701908 20.2334358,22.5701908 Z" id="形状"></path>
+                        </g>
+                        <g id="编组-36" transform="translate(20.000000, 24.000000)"></g>
+                        <path d="M3,5 L49,5 C50.1045695,5 51,5.8954305 51,7 L51,20 C51,21.1045695 50.1045695,22 49,22 L0,22 L0,22 L0,8.69218242 L3,5 Z" id="矩形" fill="#5073E5"></path>
+                        <polygon id="矩形备份-32" fill="#3E5DC0" points="0 8.98530819 3 5 3 22 0 24.9853082"></polygon>
+                        <polygon id="矩形备份-33" fill="#243D8C" transform="translate(1.500000, 24.096418) scale(-1, 1) translate(-1.500000, -24.096418) " points="0 26.9957245 3 24.0301261 0 21.1971118"></polygon>
+                        <text id="开发中" font-family="PingFangSC-Semibold, PingFang SC" font-size="12" font-weight="500" fill="#FFFFFF">
+                            <tspan x="10.7588235" y="18">开发中</tspan>
+                        </text>
                     </g>
-                    <path d="M3,5 L49,5 C50.1045695,5 51,5.8954305 51,7 L51,20 C51,21.1045695 50.1045695,22 49,22 L0,22 L0,22 L0,8.69218242 L3,5 Z" id="矩形" fill="#5073E5"></path>
-                    <polygon id="矩形备份-32" fill="#3E5DC0" points="0 8.98530819 3 5 3 22 0 24.9853082"></polygon>
-                    <polygon id="矩形备份-33" fill="#243D8C" transform="translate(1.500000, 24.096418) scale(-1, 1) translate(-1.500000, -24.096418) " points="0 26.9957245 3 24.0301261 0 21.1971118"></polygon>
-                    <text id="开发中" font-family="PingFangSC-Semibold, PingFang SC" font-size="12" font-weight="500" fill="#FFFFFF">
-                        <tspan x="10.7588235" y="18">开发中</tspan>
-                    </text>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/dialog-box.svg b/examples/sites/demos/pc/overviewimage/dialog-box.svg
index 83d25b67d6..7cc1f7fdb9 100644
--- a/examples/sites/demos/pc/overviewimage/dialog-box.svg
+++ b/examples/sites/demos/pc/overviewimage/dialog-box.svg
@@ -2,58 +2,26 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>DialogBox 对话框 </title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="65.224139%" x2="128.792906%" y2="11.2255019%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="65.224139%" x2="128.792906%" y2="11.2255019%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.6227686%" x2="128.792906%" y2="15.3040466%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="63.6227686%" x2="128.792906%" y2="15.3040466%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-12" x="0" y="0" width="74" height="45" rx="4"></rect>
-        <filter x="-5.4%" y="-4.4%" width="110.8%" height="117.8%" filterUnits="objectBoundingBox" id="filter-13">
+        <rect id="path-4" x="0" y="0" width="74" height="45" rx="4"></rect>
+        <filter x="-5.4%" y="-4.4%" width="110.8%" height="117.8%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M63.5330808,5.44974747 L63.5327475,8.36574747 L66.4497475,8.36641413 L66.4497475,9.5330808 L63.5327475,9.53274747 L63.5330808,12.4497475 L62.3664141,12.4497475 L62.3657475,9.53274747 L59.4497475,9.5330808 L59.4497475,8.36641413 L62.3657475,8.36574747 L62.3664141,5.44974747 L63.5330808,5.44974747 Z" id="path-14"></path>
-        <filter x="-28.6%" y="-28.6%" width="157.1%" height="157.1%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M63.5330808,5.44974747 L63.5327475,8.36574747 L66.4497475,8.36641413 L66.4497475,9.5330808 L63.5327475,9.53274747 L63.5330808,12.4497475 L62.3664141,12.4497475 L62.3657475,9.53274747 L59.4497475,9.5330808 L59.4497475,8.36641413 L62.3657475,8.36574747 L62.3664141,5.44974747 L63.5330808,5.44974747 Z" id="path-6"></path>
+        <filter x="-28.6%" y="-28.6%" width="157.1%" height="157.1%" filterUnits="objectBoundingBox" id="filter-7">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -61,34 +29,26 @@
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1869.000000, -1159.000000)">
-            <g id="编组-25备份-20" transform="translate(1771.000000, 1126.000000)">
-                <g id="DialogBox-对话框-" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M24,36 L35.0714925,36 L35.0714925,36 L86,36 C88.209139,36 90,37.790861 90,40 L90,77 C90,79.209139 88.209139,81 86,81 L24,81 C21.790861,81 20,79.209139 20,77 L20,40 C20,37.790861 21.790861,36 24,36 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                    <path d="M31,58 L57,58 C58.6568542,58 60,59.3431458 60,61 C60,62.6568542 58.6568542,64 57,64 L31,64 C29.3431458,64 28,62.6568542 28,61 C28,59.3431458 29.3431458,58 31,58 Z M31,44 L65,44 C66.6568542,44 68,45.3431458 68,47 C68,48.6568542 66.6568542,50 65,50 L31,50 C29.3431458,50 28,48.6568542 28,47 C28,45.3431458 29.3431458,44 31,44 Z" id="形状结合备份-41" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                    <g id="编组-10" transform="translate(31.000000, 44.000000)">
-                        <g id="形状结合">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="url(#linearGradient-11)" fill-rule="evenodd" xlink:href="#path-12"></use>
-                        </g>
-                        <g id="形状结合" fill-rule="nonzero" transform="translate(62.949747, 8.949747) rotate(-315.000000) translate(-62.949747, -8.949747) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-14"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1869.000000, -1210.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-20" transform="translate(1175.000000, 866.000000)">
+                    <g id="DialogBox-对话框-" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <path d="M24,36 L35.0714925,36 L35.0714925,36 L86,36 C88.209139,36 90,37.790861 90,40 L90,77 C90,79.209139 88.209139,81 86,81 L24,81 C21.790861,81 20,79.209139 20,77 L20,40 C20,37.790861 21.790861,36 24,36 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M31,58 L57,58 C58.6568542,58 60,59.3431458 60,61 C60,62.6568542 58.6568542,64 57,64 L31,64 C29.3431458,64 28,62.6568542 28,61 C28,59.3431458 29.3431458,58 31,58 Z M31,44 L65,44 C66.6568542,44 68,45.3431458 68,47 C68,48.6568542 66.6568542,50 65,50 L31,50 C29.3431458,50 28,48.6568542 28,47 C28,45.3431458 29.3431458,44 31,44 Z" id="形状结合备份-41" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
+                        <g id="编组-10" transform="translate(31.000000, 44.000000)">
+                            <g id="形状结合">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                                <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
+                            </g>
+                            <g id="形状结合" fill-rule="nonzero" transform="translate(62.949747, 8.949747) rotate(-315.000000) translate(-62.949747, -8.949747) ">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                                <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-6"></use>
+                            </g>
+                            <path d="M12,7 L44,7 C45.1045695,7 46,7.8954305 46,9 C46,10.1045695 45.1045695,11 44,11 L12,11 C10.8954305,11 10,10.1045695 10,9 C10,7.8954305 10.8954305,7 12,7 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            <path d="M12,20 L61,20 C62.1045695,20 63,20.8954305 63,22 L63,34 C63,35.1045695 62.1045695,36 61,36 L12,36 C10.8954305,36 10,35.1045695 10,34 L10,22 C10,20.8954305 10.8954305,20 12,20 Z" id="形状结合备份-17" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                         </g>
-                        <path d="M12,7 L44,7 C45.1045695,7 46,7.8954305 46,9 C46,10.1045695 45.1045695,11 44,11 L12,11 C10.8954305,11 10,10.1045695 10,9 C10,7.8954305 10.8954305,7 12,7 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <path d="M12,20 L61,20 C62.1045695,20 63,20.8954305 63,22 L63,34 C63,35.1045695 62.1045695,36 61,36 L12,36 C10.8954305,36 10,35.1045695 10,34 L10,22 C10,20.8954305 10.8954305,20 12,20 Z" id="形状结合备份-17" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/dialog-select.svg b/examples/sites/demos/pc/overviewimage/dialog-select.svg
index 60370e8a6c..8bc697c3fd 100644
--- a/examples/sites/demos/pc/overviewimage/dialog-select.svg
+++ b/examples/sites/demos/pc/overviewimage/dialog-select.svg
@@ -2,48 +2,16 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>DialogSelect 弹窗选择</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-11" cx="8" cy="8" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-12">
+        <circle id="path-3" cx="8" cy="8" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -51,54 +19,44 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-13">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-5">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-14" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-15">
+        <polygon id="path-6" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="62.3125297%" x2="128.792906%" y2="18.641106%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="62.3125297%" x2="128.792906%" y2="18.641106%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1869.000000, -1434.000000)">
             <g id="编组-17备份-5" transform="translate(1771.000000, 1400.000000)">
                 <g id="DialogSelect-弹窗选择" transform="translate(98.000000, 34.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M50.3275862,71 L89.3275862,71 C92.9174371,71 95.8275862,73.9101491 95.8275862,77.5 C95.8275862,81.0898509 92.9174371,84 89.3275862,84 L50.3275862,84 C46.7377353,84 43.8275862,81.0898509 43.8275862,77.5 C43.8275862,73.9101491 46.7377353,71 50.3275862,71 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                    <g id="编组"></g>
+                    <path d="M50.3275862,71 L89.3275862,71 C92.9174371,71 95.8275862,73.9101491 95.8275862,77.5 C95.8275862,81.0898509 92.9174371,84 89.3275862,84 L50.3275862,84 C46.7377353,84 43.8275862,81.0898509 43.8275862,77.5 C43.8275862,73.9101491 46.7377353,71 50.3275862,71 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
                     <g id="编组-23" transform="translate(70.000000, 74.000000)">
                         <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
-                            <circle stroke="url(#linearGradient-10)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                            <circle stroke="url(#linearGradient-2)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
                         </g>
                         <g id="路径-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
                     </g>
-                    <rect id="矩形" fill="url(#linearGradient-16)" x="31" y="37" width="64" height="37" rx="4"></rect>
+                    <rect id="矩形" fill="url(#linearGradient-8)" x="31" y="37" width="64" height="37" rx="4"></rect>
                     <path d="M66,66 L72,66 C73.1045695,66 74,66.8954305 74,68 C74,69.1045695 73.1045695,70 72,70 L66,70 C64.8954305,70 64,69.1045695 64,68 C64,66.8954305 64.8954305,66 66,66 Z" id="矩形" fill="#FFFFFF"></path>
                     <path d="M79,66 L85,66 C86.1045695,66 87,66.8954305 87,68 C87,69.1045695 86.1045695,70 85,70 L79,70 C77.8954305,70 77,69.1045695 77,68 C77,66.8954305 77.8954305,66 79,66 Z" id="矩形" fill="#FFFFFF" opacity="0.6"></path>
-                    <path d="M41,44 L85,44 C86.1045695,44 87,44.8954305 87,46 L87,59 C87,60.1045695 86.1045695,61 85,61 L41,61 C39.8954305,61 39,60.1045695 39,59 L39,46 C39,44.8954305 39.8954305,44 41,44 Z" id="矩形备份-4" fill="#FFFFFF" opacity="0.4"></path>
+                    <path d="M41,44 L85,44 C86.1045695,44 87,44.8954305 87,46 L87,59 C87,60.1045695 86.1045695,61 85,61 L41,61 C39.8954305,61 39,60.1045695 39,59 L39,46 C39,44.8954305 39.8954305,44 41,44 Z" id="矩形备份-4" fill="#FFFFFF" opacity="0.601463681"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/divider.svg b/examples/sites/demos/pc/overviewimage/divider.svg
index 33a9cbb7d1..2e5504c552 100644
--- a/examples/sites/demos/pc/overviewimage/divider.svg
+++ b/examples/sites/demos/pc/overviewimage/divider.svg
@@ -2,75 +2,33 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Divider 分隔线</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="74.9840029%" x2="128.792906%" y2="-13.6319842%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="74.9840029%" x2="128.792906%" y2="-13.6319842%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.2668259%" x2="128.792906%" y2="49.3204186%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.2668259%" x2="128.792906%" y2="49.3204186%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M41.2028033,61 L48.5464614,61 C50.0169576,61 50.7522057,61.6678201 50.7522057,63 C50.7522057,64.33218 50.0169576,65 48.5464614,65 L41.2028033,65 C39.7352481,65 39,64.3321799 39,63 C39,61.66782 39.7352481,61 41.2057443,61 L41.2028033,61 Z M76.2028033,61 L83.5464614,61 C85.0169576,61 85.7522057,61.6678201 85.7522057,63 C85.7522057,64.33218 85.0169576,65 83.5464614,65 L76.2028033,65 C74.7352481,65 74,64.3321799 74,63 C74,61.66782 74.7352481,61 76.2057443,61 L76.2028033,61 Z M59.2028034,61 L66.5494024,61 C68.0198986,61 68.7522057,61.6678201 68.7522057,63 C68.7522057,64.33218 68.0169576,65 66.5464614,65 L59.2057443,65 C57.7352481,65 57,64.3321799 57,63 C57,61.66782 57.7352481,61 59.2057443,61 L59.2028034,61 Z" id="path-11"></path>
-        <filter x="-8.6%" y="-50.0%" width="117.1%" height="300.0%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M41.2028033,61 L48.5464614,61 C50.0169576,61 50.7522057,61.6678201 50.7522057,63 C50.7522057,64.33218 50.0169576,65 48.5464614,65 L41.2028033,65 C39.7352481,65 39,64.3321799 39,63 C39,61.66782 39.7352481,61 41.2057443,61 L41.2028033,61 Z M76.2028033,61 L83.5464614,61 C85.0169576,61 85.7522057,61.6678201 85.7522057,63 C85.7522057,64.33218 85.0169576,65 83.5464614,65 L76.2028033,65 C74.7352481,65 74,64.3321799 74,63 C74,61.66782 74.7352481,61 76.2057443,61 L76.2028033,61 Z M59.2028034,61 L66.5494024,61 C68.0198986,61 68.7522057,61.6678201 68.7522057,63 C68.7522057,64.33218 68.0169576,65 66.5464614,65 L59.2057443,65 C57.7352481,65 57,64.3321799 57,63 C57,61.66782 57.7352481,61 59.2057443,61 L59.2028034,61 Z" id="path-3"></path>
+        <filter x="-8.6%" y="-50.0%" width="117.1%" height="300.0%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1870.000000, -2259.000000)">
             <g id="编组-17备份-13" transform="translate(1771.000000, 2226.000000)">
                 <g id="Divider-分隔线" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="形状结合" fill="url(#linearGradient-9)" opacity="0.204287574" x="28" y="35" width="68" height="56" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="形状结合" fill="url(#linearGradient-1)" opacity="0.204287574" x="28" y="35" width="68" height="56" rx="4"></rect>
                     <g id="分隔符" transform="translate(39.000000, 48.000000)"></g>
-                    <path d="M41.2028033,48 L83.7942557,48 C85.2647519,48 86,48.6678201 86,50.0034602 C86,51.3356401 85.2647519,52 83.7942557,52 L41.2028033,52 C39.7352481,52 39,51.3356401 39,50.0034602 C39,48.6678201 39.7352481,48.0034602 41.2057443,48.0034602 L41.2028033,48 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                    <path d="M41.2028033,73.6600715 L83.7942557,73.6600715 C85.2647519,73.6600715 86,74.3250066 86,75.6618031 C86,76.9951365 85.2647519,77.6600715 83.7942557,77.6600715 L41.2028033,77.6600715 C39.7352481,77.6600715 39,76.9951365 39,75.6618031 C39,74.3250066 39.7352481,73.6600715 41.2057443,73.6600715 L41.2028033,73.6600715 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                    <path d="M41.2028033,48 L83.7942557,48 C85.2647519,48 86,48.6678201 86,50.0034602 C86,51.3356401 85.2647519,52 83.7942557,52 L41.2028033,52 C39.7352481,52 39,51.3356401 39,50.0034602 C39,48.6678201 39.7352481,48.0034602 41.2057443,48.0034602 L41.2028033,48 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                    <path d="M41.2028033,73.6600715 L83.7942557,73.6600715 C85.2647519,73.6600715 86,74.3250066 86,75.6618031 C86,76.9951365 85.2647519,77.6600715 83.7942557,77.6600715 L41.2028033,77.6600715 C39.7352481,77.6600715 39,76.9951365 39,75.6618031 C39,74.3250066 39.7352481,73.6600715 41.2057443,73.6600715 L41.2028033,73.6600715 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/drawer.svg b/examples/sites/demos/pc/overviewimage/drawer.svg
index c207163243..ec8a3c5cc8 100644
--- a/examples/sites/demos/pc/overviewimage/drawer.svg
+++ b/examples/sites/demos/pc/overviewimage/drawer.svg
@@ -2,70 +2,38 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Halfmodal 半屏弹窗</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="67.0085122%" x2="128.792906%" y2="6.68086548%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="67.0085122%" x2="128.792906%" y2="6.68086548%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="74.3192698%" x2="128.792906%" y2="-11.9389697%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="74.3192698%" x2="128.792906%" y2="-11.9389697%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M63.5,76 C64.0522847,76 64.5,76.4477153 64.5,77 C64.5,77.2829303 64.3801486,77.5526192 64.1701506,77.7422251 L57.5483533,83.721006 C57.1384336,84.09112 56.5060915,84.0588511 56.1359775,83.6489314 C55.9700534,83.4651622 55.8782027,83.2263731 55.8782027,82.9787808 L55.878,80.023 L37,80.023329 C35.8954305,80.023329 35,79.1278985 35,78.023329 C35,76.9187595 35.8954305,76.023329 37,76.023329 L55.878,76.023 L55.8782027,76 L63.5,76 Z" id="path-11"></path>
-        <filter x="-13.6%" y="-25.1%" width="127.1%" height="200.3%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M63.5,76 C64.0522847,76 64.5,76.4477153 64.5,77 C64.5,77.2829303 64.3801486,77.5526192 64.1701506,77.7422251 L57.5483533,83.721006 C57.1384336,84.09112 56.5060915,84.0588511 56.1359775,83.6489314 C55.9700534,83.4651622 55.8782027,83.2263731 55.8782027,82.9787808 L55.878,80.023 L37,80.023329 C35.8954305,80.023329 35,79.1278985 35,78.023329 C35,76.9187595 35.8954305,76.023329 37,76.023329 L55.878,76.023 L55.8782027,76 L63.5,76 Z" id="path-3"></path>
+        <filter x="-13.6%" y="-25.1%" width="127.1%" height="200.3%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="47.7122091%" y1="86.8386573%" x2="80.5466269%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="47.7122091%" y1="86.8386573%" x2="80.5466269%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.7122091%" y1="86.8386573%" x2="80.5466269%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="47.7122091%" y1="86.8386573%" x2="80.5466269%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M0,0 L29,0 C31.209139,-4.05812251e-16 33,1.790861 33,4 L33,49 C33,51.209139 31.209139,53 29,53 L0,53 L0,53 L0,0 Z" id="path-15"></path>
-        <filter x="-13.6%" y="-4.7%" width="127.3%" height="117.0%" filterUnits="objectBoundingBox" id="filter-16">
+        <path d="M0,0 L29,0 C31.209139,-4.05812251e-16 33,1.790861 33,4 L33,49 C33,51.209139 31.209139,53 29,53 L0,53 L0,53 L0,0 Z" id="path-7"></path>
+        <filter x="-13.6%" y="-4.7%" width="127.3%" height="117.0%" filterUnits="objectBoundingBox" id="filter-8">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M28.1240991,3.26493957 L28.1232072,6.02493957 L30.7254504,6.02535623 L30.7254504,7.1295229 L28.1232072,7.12893957 L28.1240991,9.88993957 L27.0835586,9.88993957 L27.0832072,7.12893957 L24.4822072,7.1295229 L24.4822072,6.02535623 L27.0832072,6.02493957 L27.0835586,3.26493957 L28.1240991,3.26493957 Z" id="path-17"></path>
-        <filter x="-32.0%" y="-30.2%" width="164.1%" height="160.4%" filterUnits="objectBoundingBox" id="filter-18">
+        <path d="M28.1240991,3.26493957 L28.1232072,6.02493957 L30.7254504,6.02535623 L30.7254504,7.1295229 L28.1232072,7.12893957 L28.1240991,9.88993957 L27.0835586,9.88993957 L27.0832072,7.12893957 L24.4822072,7.1295229 L24.4822072,6.02535623 L27.0832072,6.02493957 L27.0835586,3.26493957 L28.1240991,3.26493957 Z" id="path-9"></path>
+        <filter x="-32.0%" y="-30.2%" width="164.1%" height="160.4%" filterUnits="objectBoundingBox" id="filter-10">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -73,34 +41,24 @@
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1873.000000, -574.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1873.000000, -574.000000)">
             <g id="Halfmodal-半屏弹窗" transform="translate(1873.000000, 574.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M27.804878,36 L40.7939488,36 L40.7939488,36 L98.195122,36 C100.296498,36 102,37.7035019 102,39.804878 L102,85.195122 C102,87.2964981 100.296498,89 98.195122,89 L27.804878,89 C25.7035019,89 24,87.2964981 24,85.195122 L24,39.804878 C24,37.7035019 25.7035019,36 27.804878,36 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <path d="M32,56 L44,56 C45.1045695,56 46,56.8954305 46,58 C46,59.1045695 45.1045695,60 44,60 L32,60 C30.8954305,60 30,59.1045695 30,58 C30,56.8954305 30.8954305,56 32,56 Z M32,67 L38.24,67 C39.3445695,67 40.24,67.8954305 40.24,69 C40.24,70.1045695 39.3445695,71 38.24,71 L32,71 C30.8954305,71 30,70.1045695 30,69 C30,67.8954305 30.8954305,67 32,67 Z M51,56 L53,56 C54.1045695,56 55,56.8954305 55,58 C55,59.1045695 54.1045695,60 53,60 L51,60 C49.8954305,60 49,59.1045695 49,58 C49,56.8954305 49.8954305,56 51,56 Z M44.16,67 L48.16,67 C49.2645695,67 50.16,67.8954305 50.16,69 C50.16,70.1045695 49.2645695,71 48.16,71 L44.16,71 C43.0554305,71 42.16,70.1045695 42.16,69 C42.16,67.8954305 43.0554305,67 44.16,67 Z M32,45 L60,45 C61.1045695,45 62,45.8954305 62,47 C62,48.1045695 61.1045695,49 60,49 L32,49 C30.8954305,49 30,48.1045695 30,47 C30,45.8954305 30.8954305,45 32,45 Z" id="形状结合备份-41" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                <g id="编组"></g>
+                <path d="M27.804878,36 L40.7939488,36 L40.7939488,36 L98.195122,36 C100.296498,36 102,37.7035019 102,39.804878 L102,85.195122 C102,87.2964981 100.296498,89 98.195122,89 L27.804878,89 C25.7035019,89 24,87.2964981 24,85.195122 L24,39.804878 C24,37.7035019 25.7035019,36 27.804878,36 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                <path d="M32,56 L44,56 C45.1045695,56 46,56.8954305 46,58 C46,59.1045695 45.1045695,60 44,60 L32,60 C30.8954305,60 30,59.1045695 30,58 C30,56.8954305 30.8954305,56 32,56 Z M32,67 L38.24,67 C39.3445695,67 40.24,67.8954305 40.24,69 C40.24,70.1045695 39.3445695,71 38.24,71 L32,71 C30.8954305,71 30,70.1045695 30,69 C30,67.8954305 30.8954305,67 32,67 Z M51,56 L53,56 C54.1045695,56 55,56.8954305 55,58 C55,59.1045695 54.1045695,60 53,60 L51,60 C49.8954305,60 49,59.1045695 49,58 C49,56.8954305 49.8954305,56 51,56 Z M44.16,67 L48.16,67 C49.2645695,67 50.16,67.8954305 50.16,69 C50.16,70.1045695 49.2645695,71 48.16,71 L44.16,71 C43.0554305,71 42.16,70.1045695 42.16,69 C42.16,67.8954305 43.0554305,67 44.16,67 Z M32,45 L60,45 C61.1045695,45 62,45.8954305 62,47 C62,48.1045695 61.1045695,49 60,49 L32,49 C30.8954305,49 30,48.1045695 30,47 C30,45.8954305 30.8954305,45 32,45 Z" id="形状结合备份-41" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
                 <g id="形状结合" transform="translate(49.750000, 79.989394) scale(-1, -1) translate(-49.750000, -79.989394) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
                 </g>
                 <g id="编组-24" transform="translate(69.000000, 36.000000)">
                     <g id="矩形备份-6">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use stroke="url(#linearGradient-14)" stroke-width="1" fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-15"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use stroke="url(#linearGradient-6)" stroke-width="1" fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-7"></use>
                     </g>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(27.603829, 6.577440) rotate(-315.000000) translate(-27.603829, -6.577440) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-17"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-9"></use>
                     </g>
                     <path d="M5.72115385,14 L25.7211538,14 C26.549581,14 27.2211538,14.6715729 27.2211538,15.5 C27.2211538,16.3284271 26.549581,17 25.7211538,17 L5.72115385,17 C4.89272672,17 4.22115385,16.3284271 4.22115385,15.5 C4.22115385,14.6715729 4.89272672,14 5.72115385,14 Z" id="形状结合备份-44" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero"></path>
                     <path d="M6.91789216,23 L16.8345588,23 C17.6629859,23 18.3345588,23.6715729 18.3345588,24.5 C18.3345588,25.3284271 17.6629859,26 16.8345588,26 L6.91789216,26 C6.08946503,26 5.41789216,25.3284271 5.41789216,24.5 C5.41789216,23.6715729 6.08946503,23 6.91789216,23 Z" id="形状结合备份-17" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
diff --git a/examples/sites/demos/pc/overviewimage/drop-roles.svg b/examples/sites/demos/pc/overviewimage/drop-roles.svg
index 7c27087df1..1d64c9bdf4 100644
--- a/examples/sites/demos/pc/overviewimage/drop-roles.svg
+++ b/examples/sites/demos/pc/overviewimage/drop-roles.svg
@@ -2,83 +2,41 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>DropRoles 下拉角色</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="55.9709816%" x2="128.792906%" y2="34.7924527%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="55.9709816%" x2="128.792906%" y2="34.7924527%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.5658014%" x2="128.792906%" y2="-35.4890449%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="83.5658014%" x2="128.792906%" y2="-35.4890449%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.6381185%" x2="128.792906%" y2="43.280952%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="52.6381185%" x2="128.792906%" y2="43.280952%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="78.2496105%" x2="128.792906%" y2="-21.9491901%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="78.2496105%" x2="128.792906%" y2="-21.9491901%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1869.000000, -609.000000)">
             <g id="编组-25备份-5" transform="translate(1770.000000, 576.000000)">
                 <g id="DropRoles-下拉角色" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-5" transform="translate(26.000000, 64.000000)">
-                        <path d="M4,0 L73,0 C75.209139,-4.05812251e-16 77,1.790861 77,4 L77,27 C77,29.209139 75.209139,31 73,31 L4,31 C1.790861,31 2.705415e-16,29.209139 0,27 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M27.4800679,14.5801549 C28.6996346,13.5517006 29.4034751,12.0324165 29.4020356,10.431466 C29.4020356,7.43414782 26.9762511,5 23.99689,5 C21.017529,5 18.5979644,7.44040524 18.5979644,10.431466 C18.5979644,12.0959475 19.3443596,13.5852205 20.5199321,14.5801549 C16.1535199,16.0506556 13,20.1868295 13,25.06764 C13,25.5807509 13.4167374,26 13.9267741,26 L34.0732259,26 C34.5832627,26 35,25.5807509 35,25.06764 C34.99378,20.1868295 31.8402601,16.0506555 27.4800679,14.5801549 L27.4800679,14.5801549 Z" id="形状" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                        <path d="M4,0 L73,0 C75.209139,-4.05812251e-16 77,1.790861 77,4 L77,27 C77,29.209139 75.209139,31 73,31 L4,31 C1.790861,31 2.705415e-16,29.209139 0,27 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M27.4800679,14.5801549 C28.6996346,13.5517006 29.4034751,12.0324165 29.4020356,10.431466 C29.4020356,7.43414782 26.9762511,5 23.99689,5 C21.017529,5 18.5979644,7.44040524 18.5979644,10.431466 C18.5979644,12.0959475 19.3443596,13.5852205 20.5199321,14.5801549 C16.1535199,16.0506556 13,20.1868295 13,25.06764 C13,25.5807509 13.4167374,26 13.9267741,26 L34.0732259,26 C34.5832627,26 35,25.5807509 35,25.06764 C34.99378,20.1868295 31.8402601,16.0506555 27.4800679,14.5801549 L27.4800679,14.5801549 Z" id="形状" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
                     </g>
-                    <path d="M32,43 L99,43 L99,43 L99,62 L32,62 C29.790861,62 28,60.209139 28,58 L28,47 C28,44.790861 29.790861,43 32,43 Z" id="矩形" fill="url(#linearGradient-11)" opacity="0.204287574"></path>
-                    <polygon id="形状结合" fill="url(#linearGradient-12)" transform="translate(82.000000, 51.500000) rotate(-180.000000) translate(-82.000000, -51.500000) " points="76 48 88 48 82 55"></polygon>
+                    <path d="M32,43 L99,43 L99,43 L99,62 L32,62 C29.790861,62 28,60.209139 28,58 L28,47 C28,44.790861 29.790861,43 32,43 Z" id="矩形" fill="url(#linearGradient-3)" opacity="0.204287574"></path>
+                    <polygon id="形状结合" fill="url(#linearGradient-4)" transform="translate(82.000000, 51.500000) rotate(-180.000000) translate(-82.000000, -51.500000) " points="76 48 88 48 82 55"></polygon>
                     <path d="M93,62 L32.6428571,62 C30.0786779,62 28,60.6568542 28,59 L28,47 C28,45.3431458 30.0786779,44 32.6428571,44 L93,44 L93,44" id="路径" stroke="#5073E5" stroke-width="4"></path>
                     <path d="M93,44 L96.8051747,44 C99.0143137,44 100.805175,45.3431458 100.805175,47 L100.805175,59 C100.805175,60.6568542 99.0143137,62 96.8051747,62 L93,62 L93,62" id="路径" stroke="#5073E5" stroke-width="4"></path>
-                    <path d="M73.6723349,78.6630035 L90.152926,78.6630035 C90.2122669,78.6630035 90.2716078,78.6572868 90.3309488,78.6515701 L90.3363434,78.6515701 C90.3956843,78.6458535 90.4496306,78.6344201 90.5089715,78.6229868 L90.5197608,78.6229868 C90.573707,78.6115534 90.6276533,78.5944034 90.6815996,78.5772534 C90.6869943,78.5772534 90.6923889,78.5715367 90.6977835,78.5715367 C90.7463352,78.5543867 90.7948868,78.53152 90.8434385,78.51437 C90.8488331,78.5086534 90.8596224,78.5086534 90.865017,78.5029367 L90.9944881,78.4343366 L91.0268559,78.4171866 C91.0646183,78.3943199 91.1023807,78.3657366 91.1401431,78.3371532 C91.1509323,78.3257199 91.1617216,78.3200032 91.1725108,78.3085699 C91.2048786,78.2799865 91.242641,78.2514032 91.2750088,78.2228198 C91.2857981,78.2113865 91.2965873,78.2056698 91.3073766,78.1942364 L91.4044799,78.0913364 L91.4206638,78.0741864 L91.431453,78.062753 C91.4638208,78.028453 91.4907939,77.9884363 91.5177671,77.9484196 C91.5231617,77.9369863 91.5285564,77.9312696 91.533951,77.9198362 C91.5609241,77.8798195 91.5878973,77.8398029 91.6094758,77.7940695 C91.6148704,77.7883528 91.620265,77.7769195 91.6256597,77.7712028 C91.6472382,77.7254694 91.6688167,77.6854527 91.6903952,77.6397194 C91.6957898,77.6340027 91.6957898,77.628286 91.7011845,77.6168527 C91.722763,77.5711193 91.7389469,77.525386 91.7551308,77.4739359 C91.7551308,77.4682192 91.7605254,77.4625026 91.7605254,77.4567859 C91.7767093,77.4110525 91.7874985,77.3596025 91.7982878,77.3138691 C91.7982878,77.3081525 91.8036824,77.3024358 91.8036824,77.2910024 C91.8144717,77.2452691 91.8198663,77.1995357 91.8252609,77.1480857 C91.8252609,77.1366523 91.8306556,77.1309357 91.8306556,77.1195023 C91.8360502,77.0737689 91.8414448,77.0280356 91.8414448,76.9880189 L91.8414448,76.9480022 L91.8414448,76.9022688 C91.8414448,76.8736855 91.8360502,76.8451021 91.8360502,76.8165188 L91.8360502,76.7765021 C91.8306556,76.7307687 91.8306556,76.6850353 91.8198663,76.639302 C91.8198663,76.6278686 91.8144717,76.6164353 91.8144717,76.6050019 C91.809077,76.5592686 91.7982878,76.5135352 91.7874985,76.4678018 C91.7874985,76.4563685 91.7821039,76.4449351 91.7821039,76.4392185 C91.7713146,76.3934851 91.7605254,76.3477517 91.7443415,76.307735 C91.7389469,76.2963017 91.7389469,76.2848684 91.7335522,76.273435 C91.7173684,76.2334183 91.7011845,76.187685 91.6850006,76.1476683 C91.679606,76.1362349 91.6742113,76.1248016 91.6688167,76.1076516 C91.6526328,76.0676349 91.6310543,76.0333348 91.6094758,75.9990348 C91.6040812,75.9876015 91.5932919,75.9704515 91.5878973,75.9590181 L91.5231617,75.856118 C91.5123725,75.8446847 91.5015832,75.8275347 91.4961886,75.8161013 C91.4746101,75.7818013 91.4476369,75.753218 91.4206638,75.7189179 L91.388296,75.6846179 C91.3613229,75.6503179 91.3289551,75.6217345 91.2965873,75.5931512 L91.2804034,75.5760012 L86.867597,71.4428481 C86.1770846,70.7968643 85.1197373,70.8654643 84.5101442,71.5971982 C83.9005512,72.3289321 83.9652867,73.4493996 84.6557992,74.0953834 L85.7616981,75.1301008 L73.6723349,75.1301008 C72.7498534,75.1301008 72,75.9247181 72,76.9022688 C72.0053946,77.8741029 72.7498534,78.6630035 73.6723349,78.6630035 L73.6723349,78.6630035 Z M90.2284508,80.721005 L73.7424651,80.721005 C73.7208866,80.721005 73.7047027,80.721005 73.6831242,80.7267217 C73.6615457,80.7267217 73.6345725,80.7267217 73.612994,80.7324383 C73.5806262,80.7324383 73.5482585,80.738155 73.5104961,80.7438717 C73.4889176,80.7495884 73.4727337,80.7495884 73.4511552,80.755305 C73.4187874,80.7610217 73.381025,80.7667384 73.3486572,80.7781717 C73.3324733,80.7838884 73.3108948,80.789605 73.2947109,80.7953217 C73.2623431,80.8067551 73.2245807,80.8181884 73.192213,80.8296217 C73.1760291,80.8353384 73.1544506,80.8410551 73.1382667,80.8524884 C73.1058989,80.8639218 73.0735311,80.8810718 73.0411634,80.8925051 C73.0249795,80.9039385 73.003401,80.9096551 72.9872171,80.9210885 C72.9602439,80.9382385 72.9278762,80.9553885 72.900903,80.9725385 C72.8793245,80.9839719 72.8631406,80.9954052 72.8469567,81.0068385 C72.8199836,81.0239886 72.7930104,81.0468552 72.7660373,81.0640053 C72.7498534,81.0754386 72.7282749,81.0925886 72.712091,81.1040219 C72.6851179,81.1268886 72.6581447,81.1497553 72.6365662,81.172622 C72.6203823,81.1840553 72.6041984,81.2012054 72.5934092,81.2183554 C72.566436,81.2469387 72.5394629,81.2755221 72.5178844,81.3041054 C72.5124897,81.3155388 72.5017005,81.3212554 72.4963059,81.3326888 C72.4909112,81.3384055 72.4909112,81.3441221 72.4855166,81.3498388 C72.4585435,81.3784222 72.4369649,81.4127222 72.4153864,81.4470222 C72.4045972,81.4641722 72.3938079,81.4756056 72.3830186,81.4927556 C72.3614401,81.5270556 72.3398616,81.555639 72.3236777,81.589939 C72.3128885,81.607089 72.3020992,81.624239 72.2967046,81.641389 L72.2481529,81.7442891 C72.2373637,81.7614391 72.231969,81.7785891 72.2211798,81.8014558 C72.2049959,81.8357558 72.1942066,81.8700559 72.1834174,81.9043559 C72.1780228,81.9215059 72.1672335,81.9443726 72.1618389,81.9615226 C72.1510496,81.9958226 72.145655,82.0301226 72.1348657,82.0644227 L72.1186818,82.1330227 C72.1132872,82.1673227 72.1078926,82.1959061 72.1024979,82.2302061 C72.0971033,82.2530728 72.0917087,82.2816562 72.0917087,82.3045228 C72.0863141,82.3331062 72.0863141,82.3674062 72.0863141,82.3959896 C72.0863141,82.4245729 72.0809194,82.4531563 72.0809194,82.4817396 L72.0809194,82.5732064 C72.0809194,82.6017897 72.0809194,82.6303731 72.0863141,82.6589564 C72.0863141,82.6875398 72.0917087,82.7218398 72.0971033,82.7504232 C72.1024979,82.7790065 72.1024979,82.8018732 72.1078926,82.8304566 C72.1132872,82.8647566 72.1186818,82.8933399 72.1240765,82.9219233 C72.1294711,82.94479 72.1348657,82.9733733 72.1402603,82.99624 C72.1510496,83.0248234 72.1564442,83.0591234 72.1672335,83.0877068 C72.1780228,83.1105734 72.1834174,83.1391568 72.1942066,83.1620235 C72.2049959,83.1906068 72.2157852,83.2191902 72.2265744,83.2420569 C72.2373637,83.2706402 72.2481529,83.2935069 72.2643368,83.3220903 C72.2751261,83.3449569 72.2859153,83.3678236 72.3020992,83.3906903 C72.3182831,83.4192737 72.334467,83.4421404 72.3506509,83.4707237 C72.3614401,83.4935904 72.377624,83.5107404 72.3884133,83.5336071 C72.4045972,83.5621904 72.4261757,83.5850571 72.4423596,83.6136405 C72.4585435,83.6365072 72.4747273,83.6536572 72.4909112,83.6765239 C72.5124897,83.6993905 72.5286736,83.7222572 72.5502521,83.7451239 C72.566436,83.7679906 72.5880145,83.7851406 72.6095931,83.8080073 L72.6473555,83.848024 L77.0601618,87.9811771 C77.3676557,88.2670106 77.7614636,88.4270774 78.1660607,88.4270774 C78.6461827,88.4270774 79.0993315,88.2098439 79.4176146,87.826827 C80.0272077,87.0950931 79.9624721,85.9746256 79.2719597,85.3286418 L78.1606661,84.265341 L90.2284508,84.265341 C91.1509323,84.265341 91.9007857,83.4707237 91.9007857,82.493173 C91.9007857,81.5156223 91.1509323,80.721005 90.2284508,80.721005 L90.2284508,80.721005 Z" id="形状" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
+                    <path d="M73.6723349,78.6630035 L90.152926,78.6630035 C90.2122669,78.6630035 90.2716078,78.6572868 90.3309488,78.6515701 L90.3363434,78.6515701 C90.3956843,78.6458535 90.4496306,78.6344201 90.5089715,78.6229868 L90.5197608,78.6229868 C90.573707,78.6115534 90.6276533,78.5944034 90.6815996,78.5772534 C90.6869943,78.5772534 90.6923889,78.5715367 90.6977835,78.5715367 C90.7463352,78.5543867 90.7948868,78.53152 90.8434385,78.51437 C90.8488331,78.5086534 90.8596224,78.5086534 90.865017,78.5029367 L90.9944881,78.4343366 L91.0268559,78.4171866 C91.0646183,78.3943199 91.1023807,78.3657366 91.1401431,78.3371532 C91.1509323,78.3257199 91.1617216,78.3200032 91.1725108,78.3085699 C91.2048786,78.2799865 91.242641,78.2514032 91.2750088,78.2228198 C91.2857981,78.2113865 91.2965873,78.2056698 91.3073766,78.1942364 L91.4044799,78.0913364 L91.4206638,78.0741864 L91.431453,78.062753 C91.4638208,78.028453 91.4907939,77.9884363 91.5177671,77.9484196 C91.5231617,77.9369863 91.5285564,77.9312696 91.533951,77.9198362 C91.5609241,77.8798195 91.5878973,77.8398029 91.6094758,77.7940695 C91.6148704,77.7883528 91.620265,77.7769195 91.6256597,77.7712028 C91.6472382,77.7254694 91.6688167,77.6854527 91.6903952,77.6397194 C91.6957898,77.6340027 91.6957898,77.628286 91.7011845,77.6168527 C91.722763,77.5711193 91.7389469,77.525386 91.7551308,77.4739359 C91.7551308,77.4682192 91.7605254,77.4625026 91.7605254,77.4567859 C91.7767093,77.4110525 91.7874985,77.3596025 91.7982878,77.3138691 C91.7982878,77.3081525 91.8036824,77.3024358 91.8036824,77.2910024 C91.8144717,77.2452691 91.8198663,77.1995357 91.8252609,77.1480857 C91.8252609,77.1366523 91.8306556,77.1309357 91.8306556,77.1195023 C91.8360502,77.0737689 91.8414448,77.0280356 91.8414448,76.9880189 L91.8414448,76.9480022 L91.8414448,76.9022688 C91.8414448,76.8736855 91.8360502,76.8451021 91.8360502,76.8165188 L91.8360502,76.7765021 C91.8306556,76.7307687 91.8306556,76.6850353 91.8198663,76.639302 C91.8198663,76.6278686 91.8144717,76.6164353 91.8144717,76.6050019 C91.809077,76.5592686 91.7982878,76.5135352 91.7874985,76.4678018 C91.7874985,76.4563685 91.7821039,76.4449351 91.7821039,76.4392185 C91.7713146,76.3934851 91.7605254,76.3477517 91.7443415,76.307735 C91.7389469,76.2963017 91.7389469,76.2848684 91.7335522,76.273435 C91.7173684,76.2334183 91.7011845,76.187685 91.6850006,76.1476683 C91.679606,76.1362349 91.6742113,76.1248016 91.6688167,76.1076516 C91.6526328,76.0676349 91.6310543,76.0333348 91.6094758,75.9990348 C91.6040812,75.9876015 91.5932919,75.9704515 91.5878973,75.9590181 L91.5231617,75.856118 C91.5123725,75.8446847 91.5015832,75.8275347 91.4961886,75.8161013 C91.4746101,75.7818013 91.4476369,75.753218 91.4206638,75.7189179 L91.388296,75.6846179 C91.3613229,75.6503179 91.3289551,75.6217345 91.2965873,75.5931512 L91.2804034,75.5760012 L86.867597,71.4428481 C86.1770846,70.7968643 85.1197373,70.8654643 84.5101442,71.5971982 C83.9005512,72.3289321 83.9652867,73.4493996 84.6557992,74.0953834 L85.7616981,75.1301008 L73.6723349,75.1301008 C72.7498534,75.1301008 72,75.9247181 72,76.9022688 C72.0053946,77.8741029 72.7498534,78.6630035 73.6723349,78.6630035 L73.6723349,78.6630035 Z M90.2284508,80.721005 L73.7424651,80.721005 C73.7208866,80.721005 73.7047027,80.721005 73.6831242,80.7267217 C73.6615457,80.7267217 73.6345725,80.7267217 73.612994,80.7324383 C73.5806262,80.7324383 73.5482585,80.738155 73.5104961,80.7438717 C73.4889176,80.7495884 73.4727337,80.7495884 73.4511552,80.755305 C73.4187874,80.7610217 73.381025,80.7667384 73.3486572,80.7781717 C73.3324733,80.7838884 73.3108948,80.789605 73.2947109,80.7953217 C73.2623431,80.8067551 73.2245807,80.8181884 73.192213,80.8296217 C73.1760291,80.8353384 73.1544506,80.8410551 73.1382667,80.8524884 C73.1058989,80.8639218 73.0735311,80.8810718 73.0411634,80.8925051 C73.0249795,80.9039385 73.003401,80.9096551 72.9872171,80.9210885 C72.9602439,80.9382385 72.9278762,80.9553885 72.900903,80.9725385 C72.8793245,80.9839719 72.8631406,80.9954052 72.8469567,81.0068385 C72.8199836,81.0239886 72.7930104,81.0468552 72.7660373,81.0640053 C72.7498534,81.0754386 72.7282749,81.0925886 72.712091,81.1040219 C72.6851179,81.1268886 72.6581447,81.1497553 72.6365662,81.172622 C72.6203823,81.1840553 72.6041984,81.2012054 72.5934092,81.2183554 C72.566436,81.2469387 72.5394629,81.2755221 72.5178844,81.3041054 C72.5124897,81.3155388 72.5017005,81.3212554 72.4963059,81.3326888 C72.4909112,81.3384055 72.4909112,81.3441221 72.4855166,81.3498388 C72.4585435,81.3784222 72.4369649,81.4127222 72.4153864,81.4470222 C72.4045972,81.4641722 72.3938079,81.4756056 72.3830186,81.4927556 C72.3614401,81.5270556 72.3398616,81.555639 72.3236777,81.589939 C72.3128885,81.607089 72.3020992,81.624239 72.2967046,81.641389 L72.2481529,81.7442891 C72.2373637,81.7614391 72.231969,81.7785891 72.2211798,81.8014558 C72.2049959,81.8357558 72.1942066,81.8700559 72.1834174,81.9043559 C72.1780228,81.9215059 72.1672335,81.9443726 72.1618389,81.9615226 C72.1510496,81.9958226 72.145655,82.0301226 72.1348657,82.0644227 L72.1186818,82.1330227 C72.1132872,82.1673227 72.1078926,82.1959061 72.1024979,82.2302061 C72.0971033,82.2530728 72.0917087,82.2816562 72.0917087,82.3045228 C72.0863141,82.3331062 72.0863141,82.3674062 72.0863141,82.3959896 C72.0863141,82.4245729 72.0809194,82.4531563 72.0809194,82.4817396 L72.0809194,82.5732064 C72.0809194,82.6017897 72.0809194,82.6303731 72.0863141,82.6589564 C72.0863141,82.6875398 72.0917087,82.7218398 72.0971033,82.7504232 C72.1024979,82.7790065 72.1024979,82.8018732 72.1078926,82.8304566 C72.1132872,82.8647566 72.1186818,82.8933399 72.1240765,82.9219233 C72.1294711,82.94479 72.1348657,82.9733733 72.1402603,82.99624 C72.1510496,83.0248234 72.1564442,83.0591234 72.1672335,83.0877068 C72.1780228,83.1105734 72.1834174,83.1391568 72.1942066,83.1620235 C72.2049959,83.1906068 72.2157852,83.2191902 72.2265744,83.2420569 C72.2373637,83.2706402 72.2481529,83.2935069 72.2643368,83.3220903 C72.2751261,83.3449569 72.2859153,83.3678236 72.3020992,83.3906903 C72.3182831,83.4192737 72.334467,83.4421404 72.3506509,83.4707237 C72.3614401,83.4935904 72.377624,83.5107404 72.3884133,83.5336071 C72.4045972,83.5621904 72.4261757,83.5850571 72.4423596,83.6136405 C72.4585435,83.6365072 72.4747273,83.6536572 72.4909112,83.6765239 C72.5124897,83.6993905 72.5286736,83.7222572 72.5502521,83.7451239 C72.566436,83.7679906 72.5880145,83.7851406 72.6095931,83.8080073 L72.6473555,83.848024 L77.0601618,87.9811771 C77.3676557,88.2670106 77.7614636,88.4270774 78.1660607,88.4270774 C78.6461827,88.4270774 79.0993315,88.2098439 79.4176146,87.826827 C80.0272077,87.0950931 79.9624721,85.9746256 79.2719597,85.3286418 L78.1606661,84.265341 L90.2284508,84.265341 C91.1509323,84.265341 91.9007857,83.4707237 91.9007857,82.493173 C91.9007857,81.5156223 91.1509323,80.721005 90.2284508,80.721005 L90.2284508,80.721005 Z" id="形状" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/drop-times.svg b/examples/sites/demos/pc/overviewimage/drop-times.svg
index d4eb4897e9..0b7da61301 100644
--- a/examples/sites/demos/pc/overviewimage/drop-times.svg
+++ b/examples/sites/demos/pc/overviewimage/drop-times.svg
@@ -2,56 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>dropTimes 下拉时间</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="60.2922698%" x2="128.792906%" y2="23.7865245%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="60.2922698%" x2="128.792906%" y2="23.7865245%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.77429%" x2="128.792906%" y2="37.8403174%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="54.77429%" x2="128.792906%" y2="37.8403174%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-13" points="86 37 98 37 92 44"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
+        <polygon id="path-5" points="86 37 98 37 92 44"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -59,43 +27,35 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-15">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-7">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="51.2178069%" x2="128.792906%" y2="46.8983566%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="51.2178069%" x2="128.792906%" y2="46.8983566%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -1434.000000)">
-            <g id="编组-14备份-3" transform="translate(1380.000000, 1401.000000)">
-                <g id="dropTimes-下拉时间" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -1485.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-3" transform="translate(784.000000, 1141.000000)">
+                    <g id="dropTimes-下拉时间" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <path d="M30,55 L96,55 C97.1045695,55 98,55.8954305 98,57 L98,90 C98,91.1045695 97.1045695,92 96,92 L30,92 C28.8954305,92 28,91.1045695 28,90 L28,57 C28,55.8954305 28.8954305,55 30,55 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                        <path d="M43.5,80 C48.1943375,80 52,76.1943375 52,71.5 C52,66.8056625 48.1943375,63 43.5,63 C38.8056625,63 35,66.8056625 35,71.5 C35,76.1943375 38.8056625,80 43.5,80 Z" id="形状" fill="url(#linearGradient-2)"></path>
+                        <rect id="矩形-2" fill="url(#linearGradient-3)" x="28" y="31" width="50" height="18" rx="2"></rect>
+                        <g id="形状结合" transform="translate(92.000000, 40.500000) rotate(-180.000000) translate(-92.000000, -40.500000) ">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
+                            <path stroke="url(#linearGradient-4)" stroke-width="4.0839988" d="M93.5602428,39.0419994 L92,40.8622826 L90.4397572,39.0419994 L93.5602428,39.0419994 Z" stroke-linejoin="square"></path>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M30,55 L96,55 C97.1045695,55 98,55.8954305 98,57 L98,90 C98,91.1045695 97.1045695,92 96,92 L30,92 C28.8954305,92 28,91.1045695 28,90 L28,57 C28,55.8954305 28.8954305,55 30,55 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <path d="M43.5,80 C48.1943375,80 52,76.1943375 52,71.5 C52,66.8056625 48.1943375,63 43.5,63 C38.8056625,63 35,66.8056625 35,71.5 C35,76.1943375 38.8056625,80 43.5,80 Z" id="形状" fill="url(#linearGradient-10)"></path>
-                    <rect id="矩形-2" fill="url(#linearGradient-11)" x="28" y="31" width="50" height="18" rx="2"></rect>
-                    <g id="形状结合" transform="translate(92.000000, 40.500000) rotate(-180.000000) translate(-92.000000, -40.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                        <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M93.5602428,39.0419994 L92,40.8622826 L90.4397572,39.0419994 L93.5602428,39.0419994 Z" stroke-linejoin="square"></path>
+                        <path d="M61,63 L88,63 C89.6568542,63 91,64.3431458 91,66 C91,67.6568542 89.6568542,69 88,69 L61,69 C59.3431458,69 58,67.6568542 58,66 C58,64.3431458 59.3431458,63 61,63 Z" id="形状结合备份" fill="#5073E5"></path>
+                        <path d="M61,77 L88,77 C89.6568542,77 91,78.3431458 91,80 C91,81.6568542 89.6568542,83 88,83 L61,83 C59.3431458,83 58,81.6568542 58,80 C58,78.3431458 59.3431458,77 61,77 Z" id="形状结合备份-35" fill="url(#linearGradient-8)" opacity="0.604724702"></path>
+                        <path d="M39.8617875,72.2367875 L42.8625,69.2358625 L42.8625,65.675 C42.8625,65.3229185 43.1479185,65.0375 43.5,65.0375 C43.8520815,65.0375 44.1375,65.3229185 44.1375,65.675 L44.1375,69.5 C44.1375,69.6690617 44.0702752,69.8311859 43.9507125,69.9507125 L40.7632125,73.1382125 C40.6031525,73.3039348 40.3661279,73.370398 40.1432391,73.3120569 C39.9203503,73.2537159 39.7462842,73.0796497 39.6879431,72.8567609 C39.629602,72.6338722 39.6960652,72.3968475 39.8617875,72.2367875 L39.8617875,72.2367875 Z" id="路径" stroke="#FFFFFF" fill="#FFFFFF"></path>
                     </g>
-                    <path d="M61,63 L88,63 C89.6568542,63 91,64.3431458 91,66 C91,67.6568542 89.6568542,69 88,69 L61,69 C59.3431458,69 58,67.6568542 58,66 C58,64.3431458 59.3431458,63 61,63 Z" id="形状结合备份" fill="#5073E5"></path>
-                    <path d="M61,77 L88,77 C89.6568542,77 91,78.3431458 91,80 C91,81.6568542 89.6568542,83 88,83 L61,83 C59.3431458,83 58,81.6568542 58,80 C58,78.3431458 59.3431458,77 61,77 Z" id="形状结合备份-35" fill="url(#linearGradient-16)" opacity="0.604724702"></path>
-                    <path d="M39.8617875,72.2367875 L42.8625,69.2358625 L42.8625,65.675 C42.8625,65.3229185 43.1479185,65.0375 43.5,65.0375 C43.8520815,65.0375 44.1375,65.3229185 44.1375,65.675 L44.1375,69.5 C44.1375,69.6690617 44.0702752,69.8311859 43.9507125,69.9507125 L40.7632125,73.1382125 C40.6031525,73.3039348 40.3661279,73.370398 40.1432391,73.3120569 C39.9203503,73.2537159 39.7462842,73.0796497 39.6879431,72.8567609 C39.629602,72.6338722 39.6960652,72.3968475 39.8617875,72.2367875 L39.8617875,72.2367875 Z" id="路径" stroke="#FFFFFF" fill="#FFFFFF"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/dropdown.svg b/examples/sites/demos/pc/overviewimage/dropdown.svg
index 20aacffd75..3c15d92b90 100644
--- a/examples/sites/demos/pc/overviewimage/dropdown.svg
+++ b/examples/sites/demos/pc/overviewimage/dropdown.svg
@@ -2,52 +2,20 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Dropdown 下拉菜单</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="60.2922698%" x2="128.792906%" y2="23.7865245%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="60.2922698%" x2="128.792906%" y2="23.7865245%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.77429%" x2="128.792906%" y2="37.8403174%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="54.77429%" x2="128.792906%" y2="37.8403174%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-12" points="86 37 98 37 92 44"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <polygon id="path-4" points="86 37 98 37 92 44"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -55,40 +23,34 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-14">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-6">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="50.4228927%" x2="128.792906%" y2="48.9229306%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="50.4228927%" x2="128.792906%" y2="48.9229306%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -1159.000000)">
-            <g id="Dropdown-下拉菜单" transform="translate(1087.000000, 1159.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -1210.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-37" transform="translate(393.000000, 866.000000)">
+                    <g id="Dropdown-下拉菜单" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <path d="M30,55 L96,55 C97.1045695,55 98,55.8954305 98,57 L98,90 C98,91.1045695 97.1045695,92 96,92 L30,92 C28.8954305,92 28,91.1045695 28,90 L28,57 C28,55.8954305 28.8954305,55 30,55 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                        <rect id="矩形-2" fill="url(#linearGradient-2)" x="28" y="31" width="50" height="18" rx="2"></rect>
+                        <g id="形状结合" transform="translate(92.000000, 40.500000) rotate(-180.000000) translate(-92.000000, -40.500000) ">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-4"></use>
+                            <path stroke="url(#linearGradient-3)" stroke-width="4.0839988" d="M93.5602428,39.0419994 L92,40.8622826 L90.4397572,39.0419994 L93.5602428,39.0419994 Z" stroke-linejoin="square"></path>
+                        </g>
+                        <path d="M38,63 L87.8417185,63 C89.4985727,63 90.8417185,64.3431458 90.8417185,66 C90.8417185,67.6568542 89.4985727,69 87.8417185,69 L38,69 C36.3431458,69 35,67.6568542 35,66 C35,64.3431458 36.3431458,63 38,63 Z" id="形状结合备份" fill="#5073E5"></path>
+                        <path d="M38,77 L88,77 C89.6568542,77 91,78.3431458 91,80 C91,81.6568542 89.6568542,83 88,83 L38,83 C36.3431458,83 35,81.6568542 35,80 C35,78.3431458 36.3431458,77 38,77 Z" id="形状结合备份-35" fill="url(#linearGradient-7)" opacity="0.604724702"></path>
                     </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M30,55 L96,55 C97.1045695,55 98,55.8954305 98,57 L98,90 C98,91.1045695 97.1045695,92 96,92 L30,92 C28.8954305,92 28,91.1045695 28,90 L28,57 C28,55.8954305 28.8954305,55 30,55 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <rect id="矩形-2" fill="url(#linearGradient-10)" x="28" y="31" width="50" height="18" rx="2"></rect>
-                <g id="形状结合" transform="translate(92.000000, 40.500000) rotate(-180.000000) translate(-92.000000, -40.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-12"></use>
-                    <path stroke="url(#linearGradient-11)" stroke-width="4.0839988" d="M93.5602428,39.0419994 L92,40.8622826 L90.4397572,39.0419994 L93.5602428,39.0419994 Z" stroke-linejoin="square"></path>
                 </g>
-                <path d="M38,63 L87.8417185,63 C89.4985727,63 90.8417185,64.3431458 90.8417185,66 C90.8417185,67.6568542 89.4985727,69 87.8417185,69 L38,69 C36.3431458,69 35,67.6568542 35,66 C35,64.3431458 36.3431458,63 38,63 Z" id="形状结合备份" fill="#5073E5"></path>
-                <path d="M38,77 L88,77 C89.6568542,77 91,78.3431458 91,80 C91,81.6568542 89.6568542,83 88,83 L38,83 C36.3431458,83 35,81.6568542 35,80 C35,78.3431458 36.3431458,77 38,77 Z" id="形状结合备份-35" fill="url(#linearGradient-15)" opacity="0.604724702"></path>
             </g>
         </g>
     </g>
diff --git a/examples/sites/demos/pc/overviewimage/espace.svg b/examples/sites/demos/pc/overviewimage/espace.svg
index 5372542935..ec0f9d190f 100644
--- a/examples/sites/demos/pc/overviewimage/espace.svg
+++ b/examples/sites/demos/pc/overviewimage/espace.svg
@@ -2,48 +2,16 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Espace 消息弹框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.8250237%" x2="128.792906%" y2="42.8049215%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.8250237%" x2="128.792906%" y2="42.8049215%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-11" cx="8" cy="8" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-12">
+        <circle id="path-3" cx="8" cy="8" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -51,51 +19,41 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-13">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-5">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-14" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-15">
+        <polygon id="path-6" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-696.000000, -884.000000)">
             <g id="编组-25备份-9" transform="translate(598.000000, 851.000000)">
                 <g id="Espace-消息弹框" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="29" y="66" width="65" height="18" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="29" y="66" width="65" height="18" rx="4"></rect>
                     <g id="编组-23" transform="translate(79.000000, 69.000000)">
                         <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
-                            <circle stroke="url(#linearGradient-10)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                            <circle stroke="url(#linearGradient-2)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
                         </g>
                         <g id="路径-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
                     </g>
-                    <g id="icon_comment_fill" transform="translate(49.000000, 31.000000)" fill="url(#linearGradient-16)">
+                    <g id="icon_comment_fill" transform="translate(49.000000, 31.000000)" fill="url(#linearGradient-8)">
                         <path d="M19,0 C29.4934104,0 38,8.50658986 38,19 C38,29.4934101 29.4934104,38 19,38 L2.53333335,38 C1.13421198,38 0,36.865788 0,35.4666667 L0,19 C0,8.50658975 8.50658982,0 19,0 Z M24.0666668,21.5333333 L13.9333334,21.5333333 C12.5342121,21.5333333 11.4000001,22.6675453 11.4000001,24.0666667 C11.4000001,25.465788 12.5342121,26.6 13.9333334,26.6 L24.0666668,26.6 C25.4657882,26.6 26.6000002,25.465788 26.6000002,24.0666667 C26.6000002,22.6675453 25.4657882,21.5333333 24.0666668,21.5333333 Z M24.0666668,11.4 L13.9333334,11.4 C12.5342121,11.4 11.4000001,12.534212 11.4000001,13.9333333 C11.4000001,15.3324547 12.5342121,16.4666667 13.9333334,16.4666667 L24.0666668,16.4666667 C25.4657882,16.4666667 26.6000002,15.3324547 26.6000002,13.9333333 C26.6000002,12.534212 25.4657882,11.4 24.0666668,11.4 Z" id="形状"></path>
                     </g>
                     <g id="编组-6" transform="translate(68.500000, 58.500000)"></g>
diff --git a/examples/sites/demos/pc/overviewimage/fall-menu.svg b/examples/sites/demos/pc/overviewimage/fall-menu.svg
index 310406ae34..9b682d8bb7 100644
--- a/examples/sites/demos/pc/overviewimage/fall-menu.svg
+++ b/examples/sites/demos/pc/overviewimage/fall-menu.svg
@@ -2,79 +2,37 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>瀑布菜单 fall-menu</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="67.6563979%" x2="128.792906%" y2="5.0307596%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="67.6563979%" x2="128.792906%" y2="5.0307596%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.255824%" x2="128.792906%" y2="49.3484395%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.255824%" x2="128.792906%" y2="49.3484395%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.1867812%" x2="128.792906%" y2="46.9773762%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="51.1867812%" x2="128.792906%" y2="46.9773762%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M2,0 L74,0 C75.1045695,-2.02906125e-16 76,0.8954305 76,2 L76,18 C76,19.1045695 75.1045695,20 74,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-12"></path>
-        <filter x="-5.3%" y="-10.0%" width="110.5%" height="140.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M2,0 L74,0 C75.1045695,-2.02906125e-16 76,0.8954305 76,2 L76,18 C76,19.1045695 75.1045695,20 74,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-4"></path>
+        <filter x="-5.3%" y="-10.0%" width="110.5%" height="140.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -610.000000)">
-            <g id="编组-25备份" transform="translate(598.000000, 576.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -661.000000)">
+            <g id="编组-25备份" transform="translate(598.000000, 627.000000)">
                 <g id="Nav顶部导航" transform="translate(98.000000, 34.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-3" transform="translate(25.000000, 36.000000)">
-                        <rect id="矩形备份-6" fill="url(#linearGradient-9)" opacity="0.204287574" x="8" y="10" width="65" height="45" rx="4"></rect>
-                        <path d="M18,28 L62,28 C63.1045695,28 64,28.8954305 64,30 C64,31.1045695 63.1045695,32 62,32 L18,32 C16.8954305,32 16,31.1045695 16,30 C16,28.8954305 16.8954305,28 18,28 Z" id="形状结合备份" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <path d="M18,41 L36,41 C37.1045695,41 38,41.8954305 38,43 C38,44.1045695 37.1045695,45 36,45 L18,45 C16.8954305,45 16,44.1045695 16,43 C16,41.8954305 16.8954305,41 18,41 Z" id="形状结合备份-17" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
+                        <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="8" y="10" width="65" height="45" rx="4"></rect>
+                        <path d="M18,28 L62,28 C63.1045695,28 64,28.8954305 64,30 C64,31.1045695 63.1045695,32 62,32 L18,32 C16.8954305,32 16,31.1045695 16,30 C16,28.8954305 16.8954305,28 18,28 Z" id="形状结合备份" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                        <path d="M18,41 L36,41 C37.1045695,41 38,41.8954305 38,43 C38,44.1045695 37.1045695,45 36,45 L18,45 C16.8954305,45 16,44.1045695 16,43 C16,41.8954305 16.8954305,41 18,41 Z" id="形状结合备份-17" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
                         <g id="形状结合备份">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
                         </g>
                         <path d="M10,6 L22,6 C23.1045695,6 24,6.8954305 24,8 L24,12 C24,13.1045695 23.1045695,14 22,14 L10,14 C8.8954305,14 8,13.1045695 8,12 L8,8 C8,6.8954305 8.8954305,6 10,6 Z" id="矩形备份-27" fill="#FFFFFF"></path>
                         <path d="M32,6 L44,6 C45.1045695,6 46,6.8954305 46,8 L46,12 C46,13.1045695 45.1045695,14 44,14 L32,14 C30.8954305,14 30,13.1045695 30,12 L30,8 C30,6.8954305 30.8954305,6 32,6 Z" id="矩形备份-28" fill="#FFFFFF" opacity="0.801619757"></path>
diff --git a/examples/sites/demos/pc/overviewimage/file-upload.svg b/examples/sites/demos/pc/overviewimage/file-upload.svg
index 010feb0e00..897228c6a1 100644
--- a/examples/sites/demos/pc/overviewimage/file-upload.svg
+++ b/examples/sites/demos/pc/overviewimage/file-upload.svg
@@ -2,82 +2,40 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Upload 文件上传</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <path d="M2.9987526,0 C1.35992886,0.0412903351 0.0413836246,1.35986856 0,2.99822083 L0,57.0017598 C-0.00348823381,57.7952674 0.322531222,58.554745 0.900490707,59.0994293 C1.45018519,59.6690832 2.20650613,59.993688 2.9987526,60 L47.0012756,60 C47.7953695,60.0028979 48.555125,59.6769282 49.0995374,59.0997307 C49.6680593,58.548392 49.9922639,57.7930337 50,57.0017598 L50,16.9953431 L32.9980716,0 L2.9987526,0 Z" id="path-9"></path>
-        <filter x="-8.0%" y="-3.3%" width="116.0%" height="113.3%" filterUnits="objectBoundingBox" id="filter-10">
+        <path d="M2.9987526,0 C1.35992886,0.0412903351 0.0413836246,1.35986856 0,2.99822083 L0,57.0017598 C-0.00348823381,57.7952674 0.322531222,58.554745 0.900490707,59.0994293 C1.45018519,59.6690832 2.20650613,59.993688 2.9987526,60 L47.0012756,60 C47.7953695,60.0028979 48.555125,59.6769282 49.0995374,59.0997307 C49.6680593,58.548392 49.9922639,57.7930337 50,57.0017598 L50,16.9953431 L32.9980716,0 L2.9987526,0 Z" id="path-1"></path>
+        <filter x="-8.0%" y="-3.3%" width="116.0%" height="113.3%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M50,16.9953431 L36.0007203,16.9953431 C34.3603872,16.9561624 33.0394271,15.6369814 32.9980716,13.9971222 L32.9980716,0 L50,16.9953431 Z" id="path-11"></path>
-        <filter x="-13.3%" y="-9.6%" width="128.7%" height="128.8%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M50,16.9953431 L36.0007203,16.9953431 C34.3603872,16.9561624 33.0394271,15.6369814 32.9980716,13.9971222 L32.9980716,0 L50,16.9953431 Z" id="path-3"></path>
+        <filter x="-13.3%" y="-9.6%" width="128.7%" height="128.8%" filterUnits="objectBoundingBox" id="filter-4">
             <feMorphology radius="0.2597415" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1481.000000, -2670.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1481.000000, -2670.000000)">
             <g id="Upload-文件上传" transform="translate(1481.000000, 2670.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="上传-1" transform="translate(39.000000, 32.000000)">
                     <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-1"></use>
                     </g>
                     <g id="路径" fill-rule="nonzero">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use stroke-opacity="0.577793788" stroke="#FFFFFF" stroke-width="0.519483" fill="#E0E6FA" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use stroke-opacity="0.577793788" stroke="#FFFFFF" stroke-width="0.519483" fill="#E0E6FA" xlink:href="#path-3"></use>
                     </g>
                     <path d="M15.7492178,31.9511847 L20.9989477,31.9511847 L20.9989477,40.4488562 C21.0130375,40.9957464 21.4534031,41.4359482 22.0011387,41.4506743 L27.9988895,41.4506743 C28.546625,41.4359482 28.9869906,40.9957464 29.0010804,40.4488562 L29.0010804,31.9511847 L34.2505085,31.9511847 C34.4526836,31.9679643 34.6395992,31.842883 34.7008907,31.6497954 C34.7703196,31.4623312 34.7310771,31.2519615 34.5991622,31.1018696 L25.7007931,22.596362 C25.5094643,22.4176021 25.2617071,22.3110243 25.000165,22.2949726 C24.733517,22.2877271 24.4771744,22.3979506 24.2992351,22.596362 L15.4011678,31.0940335 C15.2433117,31.2305742 15.2010876,31.4580004 15.2994394,31.6419592 C15.3724906,31.8258067 15.5514964,31.9460611 15.7495197,31.9433485 L15.7495197,31.9511847 L15.7492178,31.9511847 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
-                    <path d="M37.5000825,44.9501055 L12.4999456,44.9501055 C12.1275616,44.9269418 11.7731331,45.1122969 11.5801638,45.4311228 C11.3869813,45.7502373 11.3869813,46.1499931 11.5801638,46.4691076 C11.7731331,46.7879336 12.1275616,46.9732886 12.4999456,46.950125 L37.5000825,46.950125 C38.0284776,46.9165587 38.4397574,46.4787448 38.4394857,45.9501152 C38.4397574,45.4214857 38.0284776,44.9836717 37.5000825,44.9501055 L37.5000825,44.9501055 Z" id="路径" fill="url(#linearGradient-13)"></path>
+                    <path d="M37.5000825,44.9501055 L12.4999456,44.9501055 C12.1275616,44.9269418 11.7731331,45.1122969 11.5801638,45.4311228 C11.3869813,45.7502373 11.3869813,46.1499931 11.5801638,46.4691076 C11.7731331,46.7879336 12.1275616,46.9732886 12.4999456,46.950125 L37.5000825,46.950125 C38.0284776,46.9165587 38.4397574,46.4787448 38.4394857,45.9501152 C38.4397574,45.4214857 38.0284776,44.9836717 37.5000825,44.9501055 L37.5000825,44.9501055 Z" id="路径" fill="url(#linearGradient-5)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/filter-panel.svg b/examples/sites/demos/pc/overviewimage/filter-panel.svg
index acc98853f8..e0c25e0249 100644
--- a/examples/sites/demos/pc/overviewimage/filter-panel.svg
+++ b/examples/sites/demos/pc/overviewimage/filter-panel.svg
@@ -2,48 +2,16 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>FilterPanel 过滤器面板</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-11" cx="8" cy="8" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-12">
+        <circle id="path-3" cx="8" cy="8" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -51,60 +19,50 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-13">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-5">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-14" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-15">
+        <polygon id="path-6" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="62.3125297%" x2="128.792906%" y2="18.641106%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="62.3125297%" x2="128.792906%" y2="18.641106%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="81.7639443%" x2="128.792906%" y2="-30.8998787%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="81.7639443%" x2="128.792906%" y2="-30.8998787%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1478.000000, -1434.000000)">
             <g id="编组-17备份-4" transform="translate(1380.000000, 1401.000000)">
                 <g id="FilterPanel-过滤器面板" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M50.3275862,71 L89.3275862,71 C92.9174371,71 95.8275862,73.9101491 95.8275862,77.5 C95.8275862,81.0898509 92.9174371,84 89.3275862,84 L50.3275862,84 C46.7377353,84 43.8275862,81.0898509 43.8275862,77.5 C43.8275862,73.9101491 46.7377353,71 50.3275862,71 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                    <g id="编组"></g>
+                    <path d="M50.3275862,71 L89.3275862,71 C92.9174371,71 95.8275862,73.9101491 95.8275862,77.5 C95.8275862,81.0898509 92.9174371,84 89.3275862,84 L50.3275862,84 C46.7377353,84 43.8275862,81.0898509 43.8275862,77.5 C43.8275862,73.9101491 46.7377353,71 50.3275862,71 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
                     <g id="编组-23" transform="translate(70.000000, 74.000000)">
                         <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
-                            <circle stroke="url(#linearGradient-10)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                            <circle stroke="url(#linearGradient-2)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
                         </g>
                         <g id="路径-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
                     </g>
-                    <rect id="矩形" fill="url(#linearGradient-16)" x="31" y="37" width="64" height="37" rx="4"></rect>
+                    <rect id="矩形" fill="url(#linearGradient-8)" x="31" y="37" width="64" height="37" rx="4"></rect>
                     <path d="M70,49 L87,49 C88.1045695,49 89,49.8954305 89,51 C89,52.1045695 88.1045695,53 87,53 L70,53 C68.8954305,53 68,52.1045695 68,51 C68,49.8954305 68.8954305,49 70,49 Z" id="矩形" fill="#FFFFFF"></path>
                     <path d="M70,58 L83,58 C84.1045695,58 85,58.8954305 85,60 C85,61.1045695 84.1045695,62 83,62 L70,62 C68.8954305,62 68,61.1045695 68,60 C68,58.8954305 68.8954305,58 70,58 Z" id="矩形" fill="#FFFFFF" opacity="0.6"></path>
                     <g id="编组-3" transform="translate(39.000000, 44.000000)">
                         <circle id="椭圆形" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" cx="11" cy="11" r="11"></circle>
-                        <path d="M17.9294501,6.49964294 L12.2250734,13.2675337 L12.2250734,17.2041145 C12.2250734,17.2949587 12.1791937,17.3858028 12.1180207,17.4463656 L10.2828325,18.9301538 C10.0840204,19.0967014 9.77815575,18.9452945 9.77815575,18.6879026 L9.77815575,13.2675337 L4.07377904,6.49964294 C3.90555346,6.30281391 4.04319257,6 4.30317757,6 L17.6847583,6 C17.9447433,6 18.0976757,6.30281391 17.9294501,6.49964294 Z" id="路径" fill="url(#linearGradient-17)"></path>
+                        <path d="M17.9294501,6.49964294 L12.2250734,13.2675337 L12.2250734,17.2041145 C12.2250734,17.2949587 12.1791937,17.3858028 12.1180207,17.4463656 L10.2828325,18.9301538 C10.0840204,19.0967014 9.77815575,18.9452945 9.77815575,18.6879026 L9.77815575,13.2675337 L4.07377904,6.49964294 C3.90555346,6.30281391 4.04319257,6 4.30317757,6 L17.6847583,6 C17.9447433,6 18.0976757,6.30281391 17.9294501,6.49964294 Z" id="路径" fill="url(#linearGradient-9)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/floatbar.svg b/examples/sites/demos/pc/overviewimage/floatbar.svg
index 5c6083a678..2857338070 100644
--- a/examples/sites/demos/pc/overviewimage/floatbar.svg
+++ b/examples/sites/demos/pc/overviewimage/floatbar.svg
@@ -2,65 +2,23 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>浮动块 floatbar</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1088.000000, -609.000000)">
-            <g id="编组-25备份-4" transform="translate(989.000000, 576.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1088.000000, -660.000000)">
+            <g id="编组-25备份-4" transform="translate(989.000000, 627.000000)">
                 <g id="浮动块-floatbar" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="三固定" transform="translate(31.000000, 32.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="0" y="0" width="46" height="46" rx="4"></rect>
-                        <rect id="矩形" fill="url(#linearGradient-10)" x="11" y="12" width="46" height="46" rx="4"></rect>
+                        <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="0" y="0" width="46" height="46" rx="4"></rect>
+                        <rect id="矩形" fill="url(#linearGradient-2)" x="11" y="12" width="46" height="46" rx="4"></rect>
                         <g id="编组-4" transform="translate(21.000000, 22.000000)">
                             <path d="M25.9680818,24.1344744 L19.3842376,17.5514611 L17.556198,19.37927 L24.1429439,25.9622833 L26,26 L25.9680818,24.1344744 Z M21.1339326,9.14063895 L18.1597412,8.77217589 L9.13560911,0.51222047 C8.40439326,-0.184087679 7.22922493,-0.166679975 6.52122229,0.54123331 L0.543822902,6.51497697 C-0.169983044,7.22869282 -0.181589645,8.40371282 0.51190475,9.1319351 L8.77580448,18.1578295 L9.14431406,21.1316455 C9.14431406,23.2989046 10.7431233,24.1692898 12.2780963,22.6316093 L22.6340858,12.2769269 C24.1719604,10.7392464 23.304367,9.14063895 21.1339326,9.14063895 Z" id="形状" fill="#FFFFFF" transform="translate(13.000000, 13.000000) scale(-1, 1) translate(-13.000000, -13.000000) "></path>
                             <path d="M22.1840186,16.0311883 C22.0128213,16.0311883 21.8532305,15.9644588 21.7284595,15.8426049 L14.3582681,8.46463979 C14.1145294,8.22093193 14.1087261,7.8118509 14.3524648,7.56524176 L15.6204859,6.25966398 C15.7423552,6.13200749 15.901946,6.06527796 16.0818483,6.06527796 C16.2472423,6.06527796 16.4068331,6.13200749 16.5258007,6.24805885 C16.6505717,6.3641102 16.714408,6.52658211 16.723113,6.69485657 C16.7260146,6.86603233 16.6621783,7.02850423 16.540309,7.15325944 L15.7133387,8.00333564 L22.636676,14.9374043 C22.886218,15.1869147 22.8833163,15.5930945 22.636676,15.8455062 C22.5148067,15.9673601 22.355216,16.0311883 22.1840186,16.0311883 Z" id="路径" fill="#5274E5" transform="translate(18.497641, 11.048233) scale(-1, 1) translate(-18.497641, -11.048233) "></path>
diff --git a/examples/sites/demos/pc/overviewimage/flowchart.svg b/examples/sites/demos/pc/overviewimage/flowchart.svg
index 7c7152e173..d7bc9e3e66 100644
--- a/examples/sites/demos/pc/overviewimage/flowchart.svg
+++ b/examples/sites/demos/pc/overviewimage/flowchart.svg
@@ -2,159 +2,117 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Flowchart 流程图</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="78.204597%" x2="128.792906%" y2="-21.8345447%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="78.204597%" x2="128.792906%" y2="-21.8345447%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M4,20 C4.55228475,20 5,20.4477153 5,21 L5,32 C5,32.5522847 4.55228475,33 4,33 C3.44771525,33 3,32.5522847 3,32 L3,21 C3,20.4477153 3.44771525,20 4,20 Z" id="path-12"></path>
-        <filter x="-200.0%" y="-15.4%" width="500.0%" height="161.5%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M4,20 C4.55228475,20 5,20.4477153 5,21 L5,32 C5,32.5522847 4.55228475,33 4,33 C3.44771525,33 3,32.5522847 3,32 L3,21 C3,20.4477153 3.44771525,20 4,20 Z" id="path-4"></path>
+        <filter x="-200.0%" y="-15.4%" width="500.0%" height="161.5%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M25,0 C25.5522847,-1.01453063e-16 26,0.44771525 26,1 L26,39 C26,39.5522847 25.5522847,40 25,40 C24.4477153,40 24,39.5522847 24,39 L24,1 C24,0.44771525 24.4477153,1.01453063e-16 25,0 Z" id="path-14"></path>
-        <filter x="-200.0%" y="-5.0%" width="500.0%" height="120.0%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M25,0 C25.5522847,-1.01453063e-16 26,0.44771525 26,1 L26,39 C26,39.5522847 25.5522847,40 25,40 C24.4477153,40 24,39.5522847 24,39 L24,1 C24,0.44771525 24.4477153,1.01453063e-16 25,0 Z" id="path-6"></path>
+        <filter x="-200.0%" y="-5.0%" width="500.0%" height="120.0%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M5,19 L30,19 C30.5522847,19 31,19.4477153 31,20 C31,20.5522847 30.5522847,21 30,21 L5,21 C4.44771525,21 4,20.5522847 4,20 C4,19.4477153 4.44771525,19 5,19 Z" id="path-16"></path>
-        <filter x="-14.8%" y="-100.0%" width="129.6%" height="500.0%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M5,19 L30,19 C30.5522847,19 31,19.4477153 31,20 C31,20.5522847 30.5522847,21 30,21 L5,21 C4.44771525,21 4,20.5522847 4,20 C4,19.4477153 4.44771525,19 5,19 Z" id="path-8"></path>
+        <filter x="-14.8%" y="-100.0%" width="129.6%" height="500.0%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M4,31 L24,31 C24.5522847,31 25,31.4477153 25,32 C25,32.5522847 24.5522847,33 24,33 L4,33 C3.44771525,33 3,32.5522847 3,32 C3,31.4477153 3.44771525,31 4,31 Z" id="path-18"></path>
-        <filter x="-18.2%" y="-100.0%" width="136.4%" height="500.0%" filterUnits="objectBoundingBox" id="filter-19">
+        <path d="M4,31 L24,31 C24.5522847,31 25,31.4477153 25,32 C25,32.5522847 24.5522847,33 24,33 L4,33 C3.44771525,33 3,32.5522847 3,32 C3,31.4477153 3.44771525,31 4,31 Z" id="path-10"></path>
+        <filter x="-18.2%" y="-100.0%" width="136.4%" height="500.0%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-20">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-21" cx="4" cy="20" r="4"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-22">
+        <circle id="path-13" cx="4" cy="20" r="4"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-14">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-23" x="21" y="16" width="8" height="8" rx="3"></rect>
-        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-24">
+        <rect id="path-15" x="21" y="16" width="8" height="8" rx="3"></rect>
+        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-16">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <circle id="path-25" cx="25" cy="32" r="4"></circle>
-        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-26">
+        <circle id="path-17" cx="25" cy="32" r="4"></circle>
+        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-18">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-27">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-19">
             <stop stop-color="#5E7CE0" offset="0%"></stop>
             <stop stop-color="#96ADFA" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-28" cx="25" cy="8" r="4"></circle>
-        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-29">
+        <circle id="path-20" cx="25" cy="8" r="4"></circle>
+        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-21">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1478.000000, -2259.000000)">
             <g id="编组-17备份-15" transform="translate(1379.000000, 2226.000000)">
                 <g id="Flowchart-流程图" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="形状结合" fill="url(#linearGradient-9)" opacity="0.204287574" x="30" y="34" width="64" height="56" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="形状结合" fill="url(#linearGradient-1)" opacity="0.204287574" x="30" y="34" width="64" height="56" rx="4"></rect>
                     <g id="时间线" transform="translate(38.000000, 42.000000)">
-                        <rect id="矩形-2备份" fill="url(#linearGradient-10)" x="33" y="4" width="16" height="8" rx="2"></rect>
-                        <rect id="矩形-2备份-5" fill="url(#linearGradient-11)" opacity="0.303770519" x="33" y="16" width="16" height="8" rx="2"></rect>
-                        <rect id="矩形-2备份-6" fill="url(#linearGradient-11)" opacity="0.303770519" x="33" y="28" width="16" height="8" rx="2"></rect>
+                        <rect id="矩形-2备份" fill="url(#linearGradient-2)" x="33" y="4" width="16" height="8" rx="2"></rect>
+                        <rect id="矩形-2备份-5" fill="url(#linearGradient-3)" opacity="0.303770519" x="33" y="16" width="16" height="8" rx="2"></rect>
+                        <rect id="矩形-2备份-6" fill="url(#linearGradient-3)" opacity="0.303770519" x="33" y="28" width="16" height="8" rx="2"></rect>
                         <g id="形状结合备份">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
                         </g>
                         <g id="形状结合备份-3">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
                         <g id="形状结合备份-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                         </g>
                         <g id="形状结合备份-4">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
                         </g>
                         <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                            <use fill="url(#linearGradient-20)" fill-rule="evenodd" xlink:href="#path-21"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                            <use fill="url(#linearGradient-12)" fill-rule="evenodd" xlink:href="#path-13"></use>
                         </g>
                         <g id="矩形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-24)" xlink:href="#path-23"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-23"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-15"></use>
                         </g>
                         <g id="椭圆形备份-5">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-26)" xlink:href="#path-25"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-25"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-17"></use>
                         </g>
                         <g id="椭圆形备份-4">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-29)" xlink:href="#path-28"></use>
-                            <circle stroke="url(#linearGradient-27)" stroke-width="2" stroke-linejoin="square" fill="#D9E1F9" fill-rule="evenodd" cx="25" cy="8" r="3"></circle>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-20"></use>
+                            <circle stroke="url(#linearGradient-19)" stroke-width="2" stroke-linejoin="square" fill="#D9E1F9" fill-rule="evenodd" cx="25" cy="8" r="3"></circle>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/font.svg b/examples/sites/demos/pc/overviewimage/font.svg
index b4c63d774b..698ad7d8e1 100644
--- a/examples/sites/demos/pc/overviewimage/font.svg
+++ b/examples/sites/demos/pc/overviewimage/font.svg
@@ -2,68 +2,26 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>字体 font</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="75.0733111%" x2="128.792906%" y2="-13.8594442%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="75.0733111%" x2="128.792906%" y2="-13.8594442%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="75.0733111%" x2="128.792906%" y2="-13.8594442%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="75.0733111%" x2="128.792906%" y2="-13.8594442%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1479.000000, -334.000000)">
-            <g id="编组-25备份-2" transform="translate(1380.000000, 301.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1479.000000, -385.000000)">
+            <g id="编组-25备份-2" transform="translate(1380.000000, 352.000000)">
                 <g id="字体-font" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="31" y="31" width="62" height="62" rx="4"></rect>
-                    <path d="M46.8119658,64.2010309 L56.3846154,64.2010309 L58.9487179,72.1958763 L62.5384615,72.1958763 L53.4786325,46 L49.8888889,46 L41,72.1958763 L44.4188034,72.1958763 L46.8119658,64.2010309 Z M48.8632479,57.5670103 C49.7179487,54.6752577 50.5726496,51.7835052 51.4273504,48.7216495 L51.5982906,48.7216495 C52.4529915,51.7835052 53.3076923,54.6752577 54.1623932,57.5670103 L55.3589744,61.4793814 L47.6666667,61.4793814 L48.8632479,57.5670103 L48.8632479,57.5670103 Z M65.6153846,67.0927835 C65.6153846,70.6649485 68.008547,72.5360825 71.2564103,72.5360825 C73.6495726,72.5360825 75.8717949,71.3453608 77.7521368,69.814433 L77.9230769,69.814433 L78.2649573,72.1958763 L81,72.1958763 L81,60.2886598 C81,55.5257732 78.9487179,52.2938144 74.3333333,52.2938144 C71.2564103,52.2938144 68.5213675,53.6546392 66.6410256,54.8453608 L68.008547,57.056701 C69.5470085,56.0360825 71.5982906,55.0154639 73.8205128,55.0154639 C77.0683761,55.0154639 77.7521368,57.3969072 77.7521368,59.9484536 C69.2051282,60.7989691 65.6153846,63.0103093 65.6153846,67.0927835 L65.6153846,67.0927835 Z M77.4102564,61.9896907 L77.4102564,67.4329897 C75.5299145,69.1340206 73.991453,69.9845361 72.1111111,69.9845361 C70.2307692,69.9845361 68.6923077,69.1340206 68.6923077,66.9226804 C68.6923077,64.371134 70.9145299,62.8402062 77.4102564,61.9896907 Z M41,75.5979381 L80.6581197,75.5979381 L80.6581197,79 L41,79 L41,75.5979381 Z" id="形状" stroke="url(#linearGradient-11)" stroke-width="1.5" fill="url(#linearGradient-10)"></path>
+                    <g id="编组"></g>
+                    <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="31" y="31" width="62" height="62" rx="4"></rect>
+                    <path d="M46.8119658,64.2010309 L56.3846154,64.2010309 L58.9487179,72.1958763 L62.5384615,72.1958763 L53.4786325,46 L49.8888889,46 L41,72.1958763 L44.4188034,72.1958763 L46.8119658,64.2010309 Z M48.8632479,57.5670103 C49.7179487,54.6752577 50.5726496,51.7835052 51.4273504,48.7216495 L51.5982906,48.7216495 C52.4529915,51.7835052 53.3076923,54.6752577 54.1623932,57.5670103 L55.3589744,61.4793814 L47.6666667,61.4793814 L48.8632479,57.5670103 L48.8632479,57.5670103 Z M65.6153846,67.0927835 C65.6153846,70.6649485 68.008547,72.5360825 71.2564103,72.5360825 C73.6495726,72.5360825 75.8717949,71.3453608 77.7521368,69.814433 L77.9230769,69.814433 L78.2649573,72.1958763 L81,72.1958763 L81,60.2886598 C81,55.5257732 78.9487179,52.2938144 74.3333333,52.2938144 C71.2564103,52.2938144 68.5213675,53.6546392 66.6410256,54.8453608 L68.008547,57.056701 C69.5470085,56.0360825 71.5982906,55.0154639 73.8205128,55.0154639 C77.0683761,55.0154639 77.7521368,57.3969072 77.7521368,59.9484536 C69.2051282,60.7989691 65.6153846,63.0103093 65.6153846,67.0927835 L65.6153846,67.0927835 Z M77.4102564,61.9896907 L77.4102564,67.4329897 C75.5299145,69.1340206 73.991453,69.9845361 72.1111111,69.9845361 C70.2307692,69.9845361 68.6923077,69.1340206 68.6923077,66.9226804 C68.6923077,64.371134 70.9145299,62.8402062 77.4102564,61.9896907 Z M41,75.5979381 L80.6581197,75.5979381 L80.6581197,79 L41,79 L41,75.5979381 Z" id="形状" stroke="url(#linearGradient-3)" stroke-width="1.5" fill="url(#linearGradient-2)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/form.svg b/examples/sites/demos/pc/overviewimage/form.svg
index ee55a9eab4..9040ccb33d 100644
--- a/examples/sites/demos/pc/overviewimage/form.svg
+++ b/examples/sites/demos/pc/overviewimage/form.svg
@@ -2,76 +2,44 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Formfield 表单布局</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="72.2851137%" x2="128.792906%" y2="-6.75815877%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="72.2851137%" x2="128.792906%" y2="-6.75815877%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.8559494%" x2="128.792906%" y2="40.1792473%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="53.8559494%" x2="128.792906%" y2="40.1792473%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M11,23 L18,23 C19.1045695,23 20,23.8954305 20,25 L20,32 C20,33.1045695 19.1045695,34 18,34 L11,34 C9.8954305,34 9,33.1045695 9,32 L9,25 C9,23.8954305 9.8954305,23 11,23 Z" id="path-11"></path>
-        <filter x="-36.4%" y="-18.2%" width="172.7%" height="172.7%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M11,23 L18,23 C19.1045695,23 20,23.8954305 20,25 L20,32 C20,33.1045695 19.1045695,34 18,34 L11,34 C9.8954305,34 9,33.1045695 9,32 L9,25 C9,23.8954305 9.8954305,23 11,23 Z" id="path-3"></path>
+        <filter x="-36.4%" y="-18.2%" width="172.7%" height="172.7%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="58.4262335%" x2="128.792906%" y2="28.5391492%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="58.4262335%" x2="128.792906%" y2="28.5391492%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M11,39 L18,39 C19.1045695,39 20,39.8954305 20,41 L20,48 C20,49.1045695 19.1045695,50 18,50 L11,50 C9.8954305,50 9,49.1045695 9,48 L9,41 C9,39.8954305 9.8954305,39 11,39 Z" id="path-14"></path>
-        <filter x="-36.4%" y="-18.2%" width="172.7%" height="172.7%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M11,39 L18,39 C19.1045695,39 20,39.8954305 20,41 L20,48 C20,49.1045695 19.1045695,50 18,50 L11,50 C9.8954305,50 9,49.1045695 9,48 L9,41 C9,39.8954305 9.8954305,39 11,39 Z" id="path-6"></path>
+        <filter x="-36.4%" y="-18.2%" width="172.7%" height="172.7%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="53.0072373%" x2="128.792906%" y2="42.3408399%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="53.0072373%" x2="128.792906%" y2="42.3408399%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.0072373%" x2="128.792906%" y2="42.3408399%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="53.0072373%" x2="128.792906%" y2="42.3408399%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-18">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-19" points="53 6 65 6 59 13"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-20">
+        <polygon id="path-11" points="53 6 65 6 59 13"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-12">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -79,65 +47,55 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-21">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-13">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <path d="M101.212874,87 C101.765158,87 102.212874,87.4477153 102.212874,88 C102.212874,88.2829303 102.093022,88.5526192 101.883024,88.7422251 L95.2612268,94.721006 C94.8513072,95.09112 94.2189651,95.0588511 93.8488511,94.6489314 C93.682927,94.4651622 93.5910762,94.2263731 93.5910762,93.9787808 L93.591,91.023 L58,91.023329 C56.8954305,91.023329 56,90.1278985 56,89.023329 C56,87.9187595 56.8954305,87.023329 58,87.023329 L93.591,87.023 L93.5910762,87 L101.212874,87 Z" id="path-22"></path>
-        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-23">
+        <path d="M101.212874,87 C101.765158,87 102.212874,87.4477153 102.212874,88 C102.212874,88.2829303 102.093022,88.5526192 101.883024,88.7422251 L95.2612268,94.721006 C94.8513072,95.09112 94.2189651,95.0588511 93.8488511,94.6489314 C93.682927,94.4651622 93.5910762,94.2263731 93.5910762,93.9787808 L93.591,91.023 L58,91.023329 C56.8954305,91.023329 56,90.1278985 56,89.023329 C56,87.9187595 56.8954305,87.023329 58,87.023329 L93.591,87.023 L93.5910762,87 L101.212874,87 Z" id="path-14"></path>
+        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-15">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M47.2128736,50 C47.7651583,50 48.2128736,50.4477153 48.2128736,51 C48.2128736,51.2829303 48.0930222,51.5526192 47.8830242,51.7422251 L41.2612268,57.721006 C40.8513072,58.09112 40.2189651,58.0588511 39.8488511,57.6489314 C39.682927,57.4651622 39.5910762,57.2263731 39.5910762,56.9787808 L39.591,54.023 L4,54.023329 C2.8954305,54.023329 2,53.1278985 2,52.023329 C2,50.9187595 2.8954305,50.023329 4,50.023329 L39.591,50.023 L39.5910762,50 L47.2128736,50 Z" id="path-24"></path>
-        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-25">
+        <path d="M47.2128736,50 C47.7651583,50 48.2128736,50.4477153 48.2128736,51 C48.2128736,51.2829303 48.0930222,51.5526192 47.8830242,51.7422251 L41.2612268,57.721006 C40.8513072,58.09112 40.2189651,58.0588511 39.8488511,57.6489314 C39.682927,57.4651622 39.5910762,57.2263731 39.5910762,56.9787808 L39.591,54.023 L4,54.023329 C2.8954305,54.023329 2,53.1278985 2,52.023329 C2,50.9187595 2.8954305,50.023329 4,50.023329 L39.591,50.023 L39.5910762,50 L47.2128736,50 Z" id="path-16"></path>
+        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-17">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -2670.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -2670.000000)">
             <g id="Formfield-表单布局" transform="translate(1089.000000, 2670.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-3" transform="translate(27.000000, 34.000000)">
-                    <rect id="矩形备份-6" fill="url(#linearGradient-9)" opacity="0.204287574" x="0" y="0" width="72" height="56" rx="4"></rect>
-                    <path d="M28,23 L58,23 C59.1045695,23 60,23.8954305 60,25 L60,32 C60,33.1045695 59.1045695,34 58,34 L28,34 C26.8954305,34 26,33.1045695 26,32 L26,25 C26,23.8954305 26.8954305,23 28,23 Z" id="形状结合备份-6" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
+                    <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="0" y="0" width="72" height="56" rx="4"></rect>
+                    <path d="M28,23 L58,23 C59.1045695,23 60,23.8954305 60,25 L60,32 C60,33.1045695 59.1045695,34 58,34 L28,34 C26.8954305,34 26,33.1045695 26,32 L26,25 C26,23.8954305 26.8954305,23 28,23 Z" id="形状结合备份-6" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
                     <g id="形状结合备份-28">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
-                    <path d="M28,39 L47,39 C48.1045695,39 49,39.8954305 49,41 L49,48 C49,49.1045695 48.1045695,50 47,50 L28,50 C26.8954305,50 26,49.1045695 26,48 L26,41 C26,39.8954305 26.8954305,39 28,39 Z" id="形状结合备份-7" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
+                    <path d="M28,39 L47,39 C48.1045695,39 49,39.8954305 49,41 L49,48 C49,49.1045695 48.1045695,50 47,50 L28,50 C26.8954305,50 26,49.1045695 26,48 L26,41 C26,39.8954305 26.8954305,39 28,39 Z" id="形状结合备份-7" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
                     <g id="形状结合备份-29">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
                     </g>
-                    <rect id="矩形" stroke="url(#linearGradient-17)" fill="url(#linearGradient-16)" x="9" y="0" width="63" height="18" rx="4"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-9)" fill="url(#linearGradient-8)" x="9" y="0" width="63" height="18" rx="4"></rect>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-19"></use>
-                        <path stroke="url(#linearGradient-18)" stroke-width="4" d="M60.6515587,8 L59,9.92681851 L57.3484413,8 L60.6515587,8 Z" stroke-linejoin="square"></path>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
+                        <path stroke="url(#linearGradient-10)" stroke-width="4" d="M60.6515587,8 L59,9.92681851 L57.3484413,8 L60.6515587,8 Z" stroke-linejoin="square"></path>
                     </g>
                 </g>
                 <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-22"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
                 </g>
                 <g id="形状结合备份-11" transform="translate(25.106437, 53.989394) scale(-1, 1) rotate(-90.000000) translate(-25.106437, -53.989394) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-25)" xlink:href="#path-24"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-24"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/fullscreen.svg b/examples/sites/demos/pc/overviewimage/fullscreen.svg
index 6b26ea3535..0d5ba3e450 100644
--- a/examples/sites/demos/pc/overviewimage/fullscreen.svg
+++ b/examples/sites/demos/pc/overviewimage/fullscreen.svg
@@ -2,70 +2,30 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Fullscreen 全屏显示</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <path d="M0,4 L0,44.3057894 L0,44.3057894 C0,46.3507988 1.53949258,48 3.43130685,48 L44.5686932,48 C46.4605074,48 48,46.3507988 48,44.3057894 L48,4 C48,1.790861 46.209139,-4.05812251e-16 44,0 L4,0 C1.790861,4.05812251e-16 -2.705415e-16,1.790861 0,4 Z" id="path-9"></path>
-        <filter x="-4.2%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-10">
+        <path d="M0,4 L0,44.3057894 L0,44.3057894 C0,46.3507988 1.53949258,48 3.43130685,48 L44.5686932,48 C46.4605074,48 48,46.3507988 48,44.3057894 L48,4 C48,1.790861 46.209139,-4.05812251e-16 44,0 L4,0 C1.790861,4.05812251e-16 -2.705415e-16,1.790861 0,4 Z" id="path-1"></path>
+        <filter x="-4.2%" y="-2.1%" width="108.3%" height="108.3%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M14.7696,12 L33.2304,12 C34.7600078,12 36,13.2399922 36,14.7696 L36,33.2304 C36,34.7600078 34.7600078,36 33.2304,36 L14.7696,36 C13.2399922,36 12,34.7600078 12,33.2304 L12,14.7696 C12,13.2399922 13.2399922,12 14.7696,12 Z M15.9672,14.1816 C14.9808,14.1816 14.1816,14.9808 14.1816,15.9672 L14.1816,32.0328 C14.1816,33.0192 14.9808,33.8184 15.9672,33.8184 L32.0328,33.8184 C33.0192,33.8184 33.8184,33.0192 33.8184,32.0328 L33.8184,15.9672 C33.8184,14.9808 33.0192,14.1816 32.0328,14.1816 L15.9672,14.1816 Z M18.21,29.3892 L21.5856,26.0136 C21.950143,25.6782265 22.5142987,25.6899771 22.8645608,26.0402392 C23.2148229,26.3905013 23.2265735,26.954657 22.8912,27.3192 L19.5804,30.6288 L22.8252,30.6288 C23.3222315,30.6467205 23.7159068,31.0548455 23.7159068,31.5522 C23.7159068,32.0495545 23.3222315,32.4576795 22.8252,32.4756 L17.2872,32.4756 C16.7768889,32.4756 16.3632,32.0619111 16.3632,31.5516 L16.3632,26.0136 C16.3811205,25.5165685 16.7892455,25.1228932 17.2866,25.1228932 C17.7839545,25.1228932 18.1920795,25.5165685 18.21,26.0136 L18.21,29.3892 L18.21,29.3892 Z M30.462,18.4848 L27.0864,21.8604 C26.721857,22.1957735 26.1577013,22.1840229 25.8074392,21.8337608 C25.4571771,21.4834987 25.4454265,20.919343 25.7808,20.5548 L29.0904,17.2452 L25.8456,17.2452 C25.5077618,17.2573808 25.1902406,17.0840943 25.017707,16.7933794 C24.8451734,16.5026645 24.8451734,16.1409355 25.017707,15.8502206 C25.1902406,15.5595057 25.5077618,15.3862192 25.8456,15.3984 L31.3848,15.3984 C31.8951111,15.3984 32.3088,15.8120889 32.3088,16.3224 L32.3088,21.8604 C32.3088,22.3707111 31.8951111,22.7844 31.3848,22.7844 C30.8744889,22.7844 30.4608,22.3707111 30.4608,21.8604 L30.4608,18.4848 L30.462,18.4848 Z" id="path-11"></path>
+        <path d="M14.7696,12 L33.2304,12 C34.7600078,12 36,13.2399922 36,14.7696 L36,33.2304 C36,34.7600078 34.7600078,36 33.2304,36 L14.7696,36 C13.2399922,36 12,34.7600078 12,33.2304 L12,14.7696 C12,13.2399922 13.2399922,12 14.7696,12 Z M15.9672,14.1816 C14.9808,14.1816 14.1816,14.9808 14.1816,15.9672 L14.1816,32.0328 C14.1816,33.0192 14.9808,33.8184 15.9672,33.8184 L32.0328,33.8184 C33.0192,33.8184 33.8184,33.0192 33.8184,32.0328 L33.8184,15.9672 C33.8184,14.9808 33.0192,14.1816 32.0328,14.1816 L15.9672,14.1816 Z M18.21,29.3892 L21.5856,26.0136 C21.950143,25.6782265 22.5142987,25.6899771 22.8645608,26.0402392 C23.2148229,26.3905013 23.2265735,26.954657 22.8912,27.3192 L19.5804,30.6288 L22.8252,30.6288 C23.3222315,30.6467205 23.7159068,31.0548455 23.7159068,31.5522 C23.7159068,32.0495545 23.3222315,32.4576795 22.8252,32.4756 L17.2872,32.4756 C16.7768889,32.4756 16.3632,32.0619111 16.3632,31.5516 L16.3632,26.0136 C16.3811205,25.5165685 16.7892455,25.1228932 17.2866,25.1228932 C17.7839545,25.1228932 18.1920795,25.5165685 18.21,26.0136 L18.21,29.3892 L18.21,29.3892 Z M30.462,18.4848 L27.0864,21.8604 C26.721857,22.1957735 26.1577013,22.1840229 25.8074392,21.8337608 C25.4571771,21.4834987 25.4454265,20.919343 25.7808,20.5548 L29.0904,17.2452 L25.8456,17.2452 C25.5077618,17.2573808 25.1902406,17.0840943 25.017707,16.7933794 C24.8451734,16.5026645 24.8451734,16.1409355 25.017707,15.8502206 C25.1902406,15.5595057 25.5077618,15.3862192 25.8456,15.3984 L31.3848,15.3984 C31.8951111,15.3984 32.3088,15.8120889 32.3088,16.3224 L32.3088,21.8604 C32.3088,22.3707111 31.8951111,22.7844 31.3848,22.7844 C30.8744889,22.7844 30.4608,22.3707111 30.4608,21.8604 L30.4608,18.4848 L30.462,18.4848 Z" id="path-3"></path>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -2808.000000)">
-            <g id="编组-25备份-21" transform="translate(989.000000, 2775.000000)">
-                <g id="Fullscreen-全屏显示" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-34" transform="translate(38.925926, 39.000000)">
-                        <g id="路径备份-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -2859.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-21" transform="translate(393.000000, 2515.000000)">
+                    <g id="Fullscreen-全屏显示" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-34" transform="translate(38.925926, 39.000000)">
+                            <g id="路径备份-2">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-1"></use>
+                            </g>
+                            <mask id="mask-4" fill="white">
+                                <use xlink:href="#path-3"></use>
+                            </mask>
+                            <use id="形状" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-3"></use>
                         </g>
-                        <mask id="mask-12" fill="white">
-                            <use xlink:href="#path-11"></use>
-                        </mask>
-                        <use id="形状" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-11"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/grid.svg b/examples/sites/demos/pc/overviewimage/grid.svg
index fb6550b415..270c06cbaa 100644
--- a/examples/sites/demos/pc/overviewimage/grid.svg
+++ b/examples/sites/demos/pc/overviewimage/grid.svg
@@ -2,92 +2,50 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Table 表格</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.3482049%" x2="128.792906%" y2="49.1131538%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.3482049%" x2="128.792906%" y2="49.1131538%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.3482049%" x2="128.792906%" y2="49.1131538%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.3482049%" x2="128.792906%" y2="49.1131538%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-11" x="0" y="0" width="72" height="7" rx="2"></rect>
-        <filter x="-6.2%" y="-35.7%" width="112.5%" height="228.6%" filterUnits="objectBoundingBox" id="filter-12">
+        <rect id="path-3" x="0" y="0" width="72" height="7" rx="2"></rect>
+        <filter x="-6.2%" y="-35.7%" width="112.5%" height="228.6%" filterUnits="objectBoundingBox" id="filter-4">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="83.1581946%" x2="128.792906%" y2="-34.4509074%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="83.1581946%" x2="128.792906%" y2="-34.4509074%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.654993%" y1="86.8386573%" x2="94.6625963%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="46.654993%" y1="86.8386573%" x2="94.6625963%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="61.93695%" x2="128.792906%" y2="19.5976733%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="61.93695%" x2="128.792906%" y2="19.5976733%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-697.000000, -869.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-697.000000, -869.000000)">
             <g id="Table-表格" transform="translate(697.000000, 869.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="表格" transform="translate(26.000000, 36.000000)">
                     <g id="矩形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use stroke="url(#linearGradient-10)" stroke-width="1" fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use stroke="url(#linearGradient-2)" stroke-width="1" fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
-                    <path d="M3.37499999,13.5517241 L19.125,13.5517241 C20.175,13.5517241 20.7,13.9786535 20.7,14.8325124 L20.7,30.2019704 C20.7,31.0558292 20.175,31.4827586 19.125,31.4827586 L3.37499999,31.4827586 C2.325,31.4827586 1.8,31.0558292 1.8,30.2019704 L1.8,14.8325124 C1.8,13.9786536 2.325,13.5517241 3.37499999,13.5517241 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
-                    <path d="M27.675,13.5517241 L43.425,13.5517241 C44.475,13.5517241 45,13.9786535 45,14.8325124 L45,30.2019704 C45,31.0558292 44.475,31.4827586 43.425,31.4827586 L27.675,31.4827586 C26.625,31.4827586 26.1,31.0558292 26.1,30.2019704 L26.1,14.8325124 C26.1,13.9786536 26.625,13.5517241 27.675,13.5517241 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
-                    <path d="M52.875,13.5517241 L68.625,13.5517241 C69.675,13.5517241 70.2,13.970115 70.2,14.8068966 L70.2,37.4 C70.2,38.2367816 69.675,38.6551724 68.625,38.6551724 L52.875,38.6551724 C51.825,38.6551724 51.3,38.2367816 51.3,37.4 L51.3,14.8068966 C51.3,13.970115 51.825,13.5517241 52.875,13.5517241 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.604724702"></path>
-                    <path d="M3.37499999,35.0689655 L19.125,35.0689655 C20.175,35.0689655 20.7,35.4958949 20.7,36.3497537 L20.7,51.7192118 C20.7,52.5730706 20.175,53 19.125,53 L3.37499999,53 C2.325,53 1.8,52.5730706 1.8,51.7192118 L1.8,36.3497537 C1.8,35.4958949 2.325,35.0689655 3.37499999,35.0689655 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
-                    <path d="M27.675,35.0689655 L43.425,35.0689655 C44.475,35.0689655 45,35.4958949 45,36.3497537 L45,51.7192118 C45,52.5730706 44.475,53 43.425,53 L27.675,53 C26.625,53 26.1,52.5730706 26.1,51.7192118 L26.1,36.3497537 C26.1,35.4958949 26.625,35.0689655 27.675,35.0689655 Z" id="路径" fill="url(#linearGradient-13)" opacity="0.604724702"></path>
-                    <path d="M52.875,42.2413793 L68.625,42.2413793 C69.675,42.2413793 70.2,42.6896552 70.2,43.5862069 L70.2,51.6551724 C70.2,52.5517241 69.675,53 68.625,53 L52.875,53 C51.825,53 51.3,52.5517241 51.3,51.6551724 L51.3,43.5862069 C51.3,42.6896552 51.825,42.2413793 52.875,42.2413793 Z" id="路径" fill="url(#linearGradient-15)" opacity="0.303770519"></path>
+                    <path d="M3.37499999,13.5517241 L19.125,13.5517241 C20.175,13.5517241 20.7,13.9786535 20.7,14.8325124 L20.7,30.2019704 C20.7,31.0558292 20.175,31.4827586 19.125,31.4827586 L3.37499999,31.4827586 C2.325,31.4827586 1.8,31.0558292 1.8,30.2019704 L1.8,14.8325124 C1.8,13.9786536 2.325,13.5517241 3.37499999,13.5517241 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
+                    <path d="M27.675,13.5517241 L43.425,13.5517241 C44.475,13.5517241 45,13.9786535 45,14.8325124 L45,30.2019704 C45,31.0558292 44.475,31.4827586 43.425,31.4827586 L27.675,31.4827586 C26.625,31.4827586 26.1,31.0558292 26.1,30.2019704 L26.1,14.8325124 C26.1,13.9786536 26.625,13.5517241 27.675,13.5517241 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
+                    <path d="M52.875,13.5517241 L68.625,13.5517241 C69.675,13.5517241 70.2,13.970115 70.2,14.8068966 L70.2,37.4 C70.2,38.2367816 69.675,38.6551724 68.625,38.6551724 L52.875,38.6551724 C51.825,38.6551724 51.3,38.2367816 51.3,37.4 L51.3,14.8068966 C51.3,13.970115 51.825,13.5517241 52.875,13.5517241 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.604724702"></path>
+                    <path d="M3.37499999,35.0689655 L19.125,35.0689655 C20.175,35.0689655 20.7,35.4958949 20.7,36.3497537 L20.7,51.7192118 C20.7,52.5730706 20.175,53 19.125,53 L3.37499999,53 C2.325,53 1.8,52.5730706 1.8,51.7192118 L1.8,36.3497537 C1.8,35.4958949 2.325,35.0689655 3.37499999,35.0689655 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
+                    <path d="M27.675,35.0689655 L43.425,35.0689655 C44.475,35.0689655 45,35.4958949 45,36.3497537 L45,51.7192118 C45,52.5730706 44.475,53 43.425,53 L27.675,53 C26.625,53 26.1,52.5730706 26.1,51.7192118 L26.1,36.3497537 C26.1,35.4958949 26.625,35.0689655 27.675,35.0689655 Z" id="路径" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
+                    <path d="M52.875,42.2413793 L68.625,42.2413793 C69.675,42.2413793 70.2,42.6896552 70.2,43.5862069 L70.2,51.6551724 C70.2,52.5517241 69.675,53 68.625,53 L52.875,53 C51.825,53 51.3,52.5517241 51.3,51.6551724 L51.3,43.5862069 C51.3,42.6896552 51.825,42.2413793 52.875,42.2413793 Z" id="路径" fill="url(#linearGradient-7)" opacity="0.303770519"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/guide.svg b/examples/sites/demos/pc/overviewimage/guide.svg
index 23101f5131..a533017d79 100644
--- a/examples/sites/demos/pc/overviewimage/guide.svg
+++ b/examples/sites/demos/pc/overviewimage/guide.svg
@@ -2,69 +2,27 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>情景引导 Guides</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="70.2785117%" x2="128.792906%" y2="-1.64752586%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="70.2785117%" x2="128.792906%" y2="-1.64752586%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.940346%" x2="128.792906%" y2="47.6050242%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.940346%" x2="128.792906%" y2="47.6050242%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影备份" transform="translate(-697.000000, -609.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-3" transform="translate(-697.000000, -609.000000)">
             <g id="编组-25备份" transform="translate(598.000000, 576.000000)">
                 <g id="情景引导-Guides" transform="translate(99.000000, 33.000000)">
-                    <g id="背景" transform="translate(9.000000, 1.000000)">
-                        <g id="编组">
-                            <polygon id="多边形" fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="53.5" cy="89" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-6" transform="translate(19.000000, 34.000000)">
-                        <path d="M24,12 L78,12 C80.209139,12 82,13.790861 82,16 L82,54 C82,56.209139 80.209139,58 78,58 L24,58 C21.790861,58 20,56.209139 20,54 L20,16 C20,13.790861 21.790861,12 24,12 Z" id="矩形备份-8" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                        <path d="M24,12 L78,12 C80.209139,12 82,13.790861 82,16 L82,54 C82,56.209139 80.209139,58 78,58 L24,58 C21.790861,58 20,56.209139 20,54 L20,16 C20,13.790861 21.790861,12 24,12 Z" id="矩形备份-8" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                         <path d="M8,8 L62,8 C64.209139,8 66,9.790861 66,12 L66,46 C66,48.209139 64.209139,50 62,50 L8,50 C5.790861,50 4,48.209139 4,46 L4,12 C4,9.790861 5.790861,8 8,8 Z" id="矩形备份-7" fill="#AABDF0"></path>
                         <path d="M18,27 L52,27 C53.1045695,27 54,27.8954305 54,29 C54,30.1045695 53.1045695,31 52,31 L18,31 C16.8954305,31 16,30.1045695 16,29 C16,27.8954305 16.8954305,27 18,27 Z" id="形状结合备份" fill="#5073E5"></path>
                         <path d="M12,8 L39,8 C40.1045695,8 41,8.8954305 41,10 C41,11.1045695 40.1045695,12 39,12 L12,12 C10.8954305,12 10,11.1045695 10,10 C10,8.8954305 10.8954305,8 12,8 Z" id="形状结合备份-4" fill="#5073E5"></path>
                         <path d="M53,8 L74,8 C75.1045695,8 76,8.8954305 76,10 C76,11.1045695 75.1045695,12 74,12 L53,12 C51.8954305,12 51,11.1045695 51,10 C51,8.8954305 51.8954305,8 53,8 Z" id="形状结合备份-5" fill="#5073E5"></path>
-                        <path d="M18,36 L39,36 C40.1045695,36 41,36.8954305 41,38 C41,39.1045695 40.1045695,40 39,40 L18,40 C16.8954305,40 16,39.1045695 16,38 C16,36.8954305 16.8954305,36 18,36 Z" id="形状结合备份-35" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                        <path d="M18,36 L39,36 C40.1045695,36 41,36.8954305 41,38 C41,39.1045695 40.1045695,40 39,40 L18,40 C16.8954305,40 16,39.1045695 16,38 C16,36.8954305 16.8954305,36 18,36 Z" id="形状结合备份-35" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
                         <circle id="椭圆形" stroke="#5073E5" stroke-width="5" fill="#5073E5" cx="9.5" cy="9.5" r="9.5"></circle>
                         <text id="1" font-family="ShanghaiFace-RockGB-Flash-Heavy, ShanghaiFace-RockGB-Flash" font-size="16" font-weight="800" letter-spacing="0.761904762" fill="#FFFFFF">
                             <tspan x="5.88304762" y="16">1</tspan>
diff --git a/examples/sites/demos/pc/overviewimage/hrapprover.svg b/examples/sites/demos/pc/overviewimage/hrapprover.svg
index a13f3bef38..5bb6b5baa6 100644
--- a/examples/sites/demos/pc/overviewimage/hrapprover.svg
+++ b/examples/sites/demos/pc/overviewimage/hrapprover.svg
@@ -2,71 +2,29 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Hrapprover 权签人</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.2468882%" x2="128.792906%" y2="-34.6768021%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="83.2468882%" x2="128.792906%" y2="-34.6768021%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1087.000000, -884.000000)">
             <g id="编组-25备份-10" transform="translate(989.000000, 851.000000)">
                 <g id="Hrapprover-权签人" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="盖章-(1)" transform="translate(34.000000, 40.000000)">
-                        <path d="M51.4912601,42 L32.6663188,42 C31.4719541,42 30.4967389,41.0353549 30.4967389,39.8539355 C30.4967389,38.6725161 31.4719541,37.707871 32.6663188,37.707871 L51.4912601,37.707871 C52.6746674,37.707871 53.6389251,36.7540645 53.6389251,35.5834839 L53.6389251,6.42735487 C53.6389251,5.25677423 52.6746674,4.30296776 51.4912601,4.30296776 L22.486825,4.30296776 C21.3034177,4.30296776 20.3391599,5.25677423 20.3391599,6.42735487 L20.3391599,14.2095484 C20.3391599,15.3909677 19.3639447,16.3556129 18.16958,16.3556129 C16.9752152,16.3556129 16,15.3909677 16,14.2095484 L16,6.42735487 C16,2.88309681 18.9146882,0 22.4977824,0 L51.5022176,0 C55.0853118,0 58,2.88309675 58,6.42735487 L58,35.5726451 C57.9890425,39.1169032 55.0743543,42 51.4912601,42 L51.4912601,42 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                        <path d="M51.4912601,42 L32.6663188,42 C31.4719541,42 30.4967389,41.0353549 30.4967389,39.8539355 C30.4967389,38.6725161 31.4719541,37.707871 32.6663188,37.707871 L51.4912601,37.707871 C52.6746674,37.707871 53.6389251,36.7540645 53.6389251,35.5834839 L53.6389251,6.42735487 C53.6389251,5.25677423 52.6746674,4.30296776 51.4912601,4.30296776 L22.486825,4.30296776 C21.3034177,4.30296776 20.3391599,5.25677423 20.3391599,6.42735487 L20.3391599,14.2095484 C20.3391599,15.3909677 19.3639447,16.3556129 18.16958,16.3556129 C16.9752152,16.3556129 16,15.3909677 16,14.2095484 L16,6.42735487 C16,2.88309681 18.9146882,0 22.4977824,0 L51.5022176,0 C55.0853118,0 58,2.88309675 58,6.42735487 L58,35.5726451 C57.9890425,39.1169032 55.0743543,42 51.4912601,42 L51.4912601,42 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                         <g id="盖章" transform="translate(29.000000, 10.000000)"></g>
-                        <path d="M40.163698,19.6677592 C41.2723951,18.7372529 41.9122501,17.3626625 41.9109415,15.9141836 C41.9109415,13.2023242 39.7056828,11 36.9971728,11 C34.2886627,11 32.0890585,13.2079857 32.0890585,15.9141836 C32.0890585,17.420143 32.7675997,18.7675805 33.836302,19.6677592 C29.8668363,20.9982122 27,24.7404648 27,29.1564362 C27,29.6206794 27.3788521,30 27.8425219,30 L46.1574781,30 C46.6211479,30 47,29.6206794 47,29.1564362 C46.9943455,24.7404648 44.1275092,20.9982121 40.163698,19.6677592 L40.163698,19.6677592 Z" id="形状" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <path d="M20.6666667,29.4782222 L20.6666667,36.3191111 L26.6666667,36.3191111 C28.1671111,36.3475556 29.424,36.8702222 30.4373333,37.8835555 C31.4506667,38.9004444 31.9715555,40.1591111 32,41.6595555 L0,41.6595555 C0.0266666667,40.1573333 0.549333333,38.8986667 1.56266667,37.8835555 C2.576,36.8702222 3.83466667,36.3475555 5.33333333,36.3191111 L11.3333333,36.3191111 L11.3333333,29.4782222 C9.91644446,28.4204444 8.944,27.0853333 8.416,25.4728889 C7.888,23.8586667 7.89511112,22.2106667 8.43733333,20.5288889 C8.97955554,18.8453333 9.93066667,17.5031111 11.2924445,16.5022222 C12.6524445,15.5013333 14.2222222,15 16,15 C17.7777778,15 19.3475555,15.5013333 20.7075555,16.5022222 C22.0693333,17.5031111 23.0204444,18.8453333 23.5626667,20.5288889 C24.1048889,22.2106667 24.112,23.8586667 23.584,25.4711111 C23.056,27.0853333 22.0835555,28.4204445 20.6666667,29.4782222 L20.6666667,29.4782222 Z M0,47 L0,44.3297778 L32,44.3297778 L32,47 L0,47 Z" id="形状" stroke="url(#linearGradient-9)" fill="url(#linearGradient-11)"></path>
+                        <path d="M40.163698,19.6677592 C41.2723951,18.7372529 41.9122501,17.3626625 41.9109415,15.9141836 C41.9109415,13.2023242 39.7056828,11 36.9971728,11 C34.2886627,11 32.0890585,13.2079857 32.0890585,15.9141836 C32.0890585,17.420143 32.7675997,18.7675805 33.836302,19.6677592 C29.8668363,20.9982122 27,24.7404648 27,29.1564362 C27,29.6206794 27.3788521,30 27.8425219,30 L46.1574781,30 C46.6211479,30 47,29.6206794 47,29.1564362 C46.9943455,24.7404648 44.1275092,20.9982121 40.163698,19.6677592 L40.163698,19.6677592 Z" id="形状" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                        <path d="M20.6666667,29.4782222 L20.6666667,36.3191111 L26.6666667,36.3191111 C28.1671111,36.3475556 29.424,36.8702222 30.4373333,37.8835555 C31.4506667,38.9004444 31.9715555,40.1591111 32,41.6595555 L0,41.6595555 C0.0266666667,40.1573333 0.549333333,38.8986667 1.56266667,37.8835555 C2.576,36.8702222 3.83466667,36.3475555 5.33333333,36.3191111 L11.3333333,36.3191111 L11.3333333,29.4782222 C9.91644446,28.4204444 8.944,27.0853333 8.416,25.4728889 C7.888,23.8586667 7.89511112,22.2106667 8.43733333,20.5288889 C8.97955554,18.8453333 9.93066667,17.5031111 11.2924445,16.5022222 C12.6524445,15.5013333 14.2222222,15 16,15 C17.7777778,15 19.3475555,15.5013333 20.7075555,16.5022222 C22.0693333,17.5031111 23.0204444,18.8453333 23.5626667,20.5288889 C24.1048889,22.2106667 24.112,23.8586667 23.584,25.4711111 C23.056,27.0853333 22.0835555,28.4204445 20.6666667,29.4782222 L20.6666667,29.4782222 Z M0,47 L0,44.3297778 L32,44.3297778 L32,47 L0,47 Z" id="形状" stroke="url(#linearGradient-1)" fill="url(#linearGradient-3)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/icon.svg b/examples/sites/demos/pc/overviewimage/icon.svg
index d9edfccd99..5de51a9d4d 100644
--- a/examples/sites/demos/pc/overviewimage/icon.svg
+++ b/examples/sites/demos/pc/overviewimage/icon.svg
@@ -1,83 +1,32 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Icon图标</title>
+    <title>Icon 图标</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M28,0.0357142857 C43.4285714,0.0357142857 55.9642857,12.5295031 55.9642857,28 C55.9642857,43.4285714 43.4704969,55.9642857 28,55.9642857 C12.5295031,55.9223603 0.0357142857,43.4285714 0.0357142857,28 C0.0357142857,12.5295031 12.5295031,0.0357142857 28,0.0357142857 Z" id="path-10"></path>
-        <filter x="-11.6%" y="-8.0%" width="123.2%" height="123.2%" filterUnits="objectBoundingBox" id="filter-11">
-            <feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="2.5" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="57.3728338%" x2="128.792906%" y2="31.2220626%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】" transform="translate(-1089.000000, -1111.000000)">
-            <g id="Icon图标" transform="translate(1089.000000, 1111.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="图标" transform="translate(34.000000, 34.000000)">
-                    <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                        <use stroke="url(#linearGradient-9)" stroke-width="5" xlink:href="#path-10"></use>
-                    </g>
-                    <path d="M8.32142857,27.9999999 C8.32142857,35.0304763 12.072143,41.5269045 18.1607142,45.0421427 C24.2492854,48.557381 31.7507146,48.557381 37.8392858,45.0421427 C43.927857,41.5269045 47.6785714,35.0304763 47.6785714,27.9999999 C47.6785714,17.131825 38.8681749,8.32142857 28,8.32142857 C17.1318251,8.32142857 8.32142857,17.131825 8.32142857,27.9999999 L8.32142857,27.9999999 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <path d="M28.686853,16.0081329 L32.2499027,22.9954016 C32.3786876,23.203356 32.5933292,23.3697196 32.850899,23.4113105 L40.7926363,24.5342644 C41.436561,24.6174461 41.6941308,25.407673 41.2219194,25.8235818 L35.4695259,31.230397 C35.2978127,31.3967605 35.211956,31.6463058 35.2548844,31.8958512 L36.6285903,39.5485741 C36.7573752,40.1724374 36.0705223,40.6299371 35.5124542,40.3388009 L28.4292831,36.7203938 C28.2146416,36.5956212 27.9141434,36.5956212 27.6995018,36.7203938 L20.6163307,40.3388009 C20.0582627,40.6299371 19.3714097,40.1724374 19.5001947,39.5485741 L20.7451157,31.8958512 C20.788044,31.6463058 20.7021874,31.3967605 20.5304741,31.230397 L14.7780806,25.8235818 C14.3058692,25.3660821 14.563439,24.6174461 15.2073637,24.5342644 L23.149101,23.4113105 C23.4066709,23.3697196 23.6213124,23.2033561 23.7500973,22.9954016 L27.2702187,16.0081329 C27.5707169,15.4258605 28.3863547,15.4258605 28.686853,16.0081329 Z" id="路径" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -2809.000000)">
+            <g id="编组-17备份-20" transform="translate(598.000000, 2776.000000)">
+                <g id="Icon-图标" transform="translate(98.000000, 33.000000)">
+                    <g id="编组"></g>
+                    <rect id="矩形备份-7" fill="url(#linearGradient-1)" opacity="0.303770519" x="37" y="39" width="52" height="52" rx="4"></rect>
+                    <path d="M64.1511387,53.4367043 L67.7141884,60.423973 C67.8429733,60.6319274 68.0576149,60.798291 68.3151847,60.8398819 L76.256922,61.9628358 C76.9008467,62.0460175 77.1584166,62.8362444 76.6862051,63.2521533 L70.9338116,68.6589684 C70.7620984,68.8253319 70.6762418,69.0748772 70.7191701,69.3244226 L72.092876,76.9771455 C72.2216609,77.6010088 71.534808,78.0585085 70.9767399,77.7673723 L63.8935688,74.1489653 C63.6789273,74.0241926 63.3784291,74.0241926 63.1637875,74.1489653 L56.0806164,77.7673723 C55.5225484,78.0585085 54.8356954,77.6010088 54.9644804,76.9771455 L56.2094014,69.3244226 C56.2523297,69.0748772 56.1664731,68.825332 55.9947598,68.6589684 L50.2423663,63.2521533 C49.7701549,62.7946535 50.0277248,62.0460175 50.6716494,61.9628358 L58.6133867,60.8398819 C58.8709566,60.798291 59.0855981,60.6319275 59.214383,60.423973 L62.7345044,53.4367043 C63.0350026,52.8544319 63.8506405,52.8544319 64.1511387,53.4367043 Z" id="路径" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)"></path>
+                    <rect id="矩形" fill="url(#linearGradient-4)" x="23" y="33" width="38" height="17" rx="2"></rect>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/image.svg b/examples/sites/demos/pc/overviewimage/image.svg
index f05a5e3e22..5cd8fa4b9d 100644
--- a/examples/sites/demos/pc/overviewimage/image.svg
+++ b/examples/sites/demos/pc/overviewimage/image.svg
@@ -2,65 +2,25 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Image 图片预览</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="80.0535976%" x2="128.792906%" y2="-26.5437812%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="80.0535976%" x2="128.792906%" y2="-26.5437812%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -2530.000000)">
-            <g id="编组-14备份-16" transform="translate(989.000000, 2500.000000)">
-                <g id="Image-图片预览" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -2581.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-16" transform="translate(393.000000, 2240.000000)">
+                    <g id="Image-图片预览" transform="translate(98.000000, 30.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-28" transform="translate(39.000000, 40.000000)" fill="#5073E5">
+                            <path d="M39.9106545,8.87737324 L8.1483136,8.87737324 C7.38172884,8.87737324 6.76524458,9.49921823 6.76524458,10.2604423 L6.76524458,37.9379048 C6.76524458,38.7044896 7.38708957,39.3209739 8.1483136,39.3209739 L39.9160152,39.3209739 C40.6826,39.3209739 41.2990842,38.6991289 41.2990842,37.9379048 L41.2990842,10.2604423 C41.2990842,9.49385749 40.6772392,8.87737324 39.9106545,8.87737324 Z M37.953987,36.5548358 L10.1103417,36.5548358 C9.79405852,36.5548358 9.53138262,36.2975207 9.53138262,35.9758767 L9.53138262,12.2278311 C9.53138262,11.9061872 9.79405852,11.6435113 10.1157025,11.6435113 L37.9861514,11.6435113 C38.2863525,11.6435113 38.5329462,11.8847442 38.5329462,12.190306 L38.5329462,35.9544338 C38.5329462,36.0616484 38.4900603,36.1635023 38.4096493,36.2385526 L38.2809917,36.3564887 C38.2113022,36.4208175 38.1308912,36.4744248 38.0451195,36.5173107 L37.953987,36.5548358 L37.953987,36.5548358 Z" id="形状"></path>
+                            <path d="M36.95153,33.2419031 C36.6995756,33.6546795 36.2492741,33.9066339 35.7668081,33.9066339 L12.2921599,33.9066339 C11.7721689,33.9066339 11.2950637,33.6171543 11.0591914,33.1561313 C10.8233192,32.6951083 10.866205,32.1375921 11.1664061,31.7140943 L16.5861068,24.1769042 C17.0256868,23.5657807 17.8726826,23.4156801 18.4945276,23.8445388 L22.8956891,26.8733527 L28.5190976,19.7114139 C28.8085772,19.3415233 29.2696002,19.1431762 29.7413447,19.1860621 C30.2130891,19.228948 30.6258655,19.5130668 30.8402948,19.9312039 L36.9997766,31.8856377 C37.2195667,32.319857 37.1981237,32.8291266 36.95153,33.2419031 Z M16.3716775,17.224034 C16.3716775,18.7732857 17.6100067,20.0276971 19.1431762,20.0276971 C20.670985,20.0276971 21.914675,18.7732857 21.914675,17.224034 C21.914675,15.6747822 20.6763458,14.4203537 19.1431762,14.4203537 C17.6100067,14.4150101 16.3716775,15.6694215 16.3716775,17.224034 Z" id="形状"></path>
+                            <path d="M2.72861291,3.92941702 C2.72861291,3.26468617 3.26468617,2.72861291 3.92941702,2.72861291 L9.43488943,2.72861291 C9.93343757,2.72861291 10.3354925,2.32655796 10.3354925,1.82800983 L10.3354925,0.900603082 C10.3354925,0.402054948 9.93343757,0 9.43488943,0 L1.20080411,0 C0.536073263,0 0,0.541433996 0,1.20080411 L0,9.44025017 C0,9.89591244 0.369890552,10.265803 0.825552826,10.265803 L1.90306008,10.265803 C2.35872236,10.265803 2.72861291,9.89591244 2.72861291,9.44025017 L2.72861291,3.92941702 Z M44.0652222,2.72861291 C44.7299531,2.72861291 45.2660264,3.26468617 45.2660264,3.92941702 L45.2660264,9.56890775 C45.2660264,9.9548805 45.5769488,10.265803 45.9629216,10.265803 L47.2923833,10.265803 C47.678356,10.265803 47.9892785,9.9548805 47.9892785,9.56890775 L47.9892785,1.20080411 C47.9892785,0.536073263 47.4532053,0 46.7884744,0 L38.436453,0 C38.0772839,0 37.7878043,0.289479562 37.7878043,0.648648649 L37.7878043,2.07996426 C37.7878043,2.43913335 38.0772839,2.72861291 38.436453,2.72861291 L44.0652222,2.72861291 Z M3.92941702,45.2713871 C3.26468617,45.2713871 2.72861291,44.7353138 2.72861291,44.070583 L2.72861291,38.4096493 C2.72861291,38.0290373 2.41769042,37.7181148 2.0370784,37.7181148 L0.69153451,37.7181148 C0.310922493,37.7181148 0,38.0290373 0,38.4096493 L0,46.7991959 C0,47.4639267 0.536073263,48 1.20080411,48 L9.6761224,48 C10.0406522,48 10.3354925,47.7051597 10.3354925,47.3406299 L10.3354925,45.9307572 C10.3354925,45.5662274 10.0406522,45.2713871 9.6761224,45.2713871 L3.92941702,45.2713871 Z M45.2713871,44.070583 C45.2713871,44.7353138 44.7353138,45.2713871 44.070583,45.2713871 L38.4846996,45.2713871 C38.0987268,45.2713871 37.7878043,45.5823096 37.7878043,45.9682823 L37.7878043,47.3031048 C37.7878043,47.6890775 38.0987268,48 38.4846996,48 L46.7991959,48 C47.4639267,48 48,47.4639267 48,46.7991959 L48,38.3935671 C48,38.0183158 47.6944382,37.7181148 47.3245477,37.7181148 L45.9522001,37.7181148 C45.5769488,37.7181148 45.2767478,38.0236766 45.2767478,38.3935671 L45.2767478,44.070583 L45.2713871,44.070583 Z" id="形状"></path>
+                        </g>
+                        <g id="编组-3" transform="translate(53.150000, 46.000000)" fill="url(#linearGradient-1)" opacity="0.204287574">
+                            <rect id="矩形备份-23" x="0" y="0" width="31" height="28" rx="4"></rect>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-28" transform="translate(39.000000, 40.000000)" fill="#5073E5">
-                        <path d="M39.9106545,8.87737324 L8.1483136,8.87737324 C7.38172884,8.87737324 6.76524458,9.49921823 6.76524458,10.2604423 L6.76524458,37.9379048 C6.76524458,38.7044896 7.38708957,39.3209739 8.1483136,39.3209739 L39.9160152,39.3209739 C40.6826,39.3209739 41.2990842,38.6991289 41.2990842,37.9379048 L41.2990842,10.2604423 C41.2990842,9.49385749 40.6772392,8.87737324 39.9106545,8.87737324 Z M37.953987,36.5548358 L10.1103417,36.5548358 C9.79405852,36.5548358 9.53138262,36.2975207 9.53138262,35.9758767 L9.53138262,12.2278311 C9.53138262,11.9061872 9.79405852,11.6435113 10.1157025,11.6435113 L37.9861514,11.6435113 C38.2863525,11.6435113 38.5329462,11.8847442 38.5329462,12.190306 L38.5329462,35.9544338 C38.5329462,36.0616484 38.4900603,36.1635023 38.4096493,36.2385526 L38.2809917,36.3564887 C38.2113022,36.4208175 38.1308912,36.4744248 38.0451195,36.5173107 L37.953987,36.5548358 L37.953987,36.5548358 Z" id="形状"></path>
-                        <path d="M36.95153,33.2419031 C36.6995756,33.6546795 36.2492741,33.9066339 35.7668081,33.9066339 L12.2921599,33.9066339 C11.7721689,33.9066339 11.2950637,33.6171543 11.0591914,33.1561313 C10.8233192,32.6951083 10.866205,32.1375921 11.1664061,31.7140943 L16.5861068,24.1769042 C17.0256868,23.5657807 17.8726826,23.4156801 18.4945276,23.8445388 L22.8956891,26.8733527 L28.5190976,19.7114139 C28.8085772,19.3415233 29.2696002,19.1431762 29.7413447,19.1860621 C30.2130891,19.228948 30.6258655,19.5130668 30.8402948,19.9312039 L36.9997766,31.8856377 C37.2195667,32.319857 37.1981237,32.8291266 36.95153,33.2419031 Z M16.3716775,17.224034 C16.3716775,18.7732857 17.6100067,20.0276971 19.1431762,20.0276971 C20.670985,20.0276971 21.914675,18.7732857 21.914675,17.224034 C21.914675,15.6747822 20.6763458,14.4203537 19.1431762,14.4203537 C17.6100067,14.4150101 16.3716775,15.6694215 16.3716775,17.224034 Z" id="形状"></path>
-                        <path d="M2.72861291,3.92941702 C2.72861291,3.26468617 3.26468617,2.72861291 3.92941702,2.72861291 L9.43488943,2.72861291 C9.93343757,2.72861291 10.3354925,2.32655796 10.3354925,1.82800983 L10.3354925,0.900603082 C10.3354925,0.402054948 9.93343757,0 9.43488943,0 L1.20080411,0 C0.536073263,0 0,0.541433996 0,1.20080411 L0,9.44025017 C0,9.89591244 0.369890552,10.265803 0.825552826,10.265803 L1.90306008,10.265803 C2.35872236,10.265803 2.72861291,9.89591244 2.72861291,9.44025017 L2.72861291,3.92941702 Z M44.0652222,2.72861291 C44.7299531,2.72861291 45.2660264,3.26468617 45.2660264,3.92941702 L45.2660264,9.56890775 C45.2660264,9.9548805 45.5769488,10.265803 45.9629216,10.265803 L47.2923833,10.265803 C47.678356,10.265803 47.9892785,9.9548805 47.9892785,9.56890775 L47.9892785,1.20080411 C47.9892785,0.536073263 47.4532053,0 46.7884744,0 L38.436453,0 C38.0772839,0 37.7878043,0.289479562 37.7878043,0.648648649 L37.7878043,2.07996426 C37.7878043,2.43913335 38.0772839,2.72861291 38.436453,2.72861291 L44.0652222,2.72861291 Z M3.92941702,45.2713871 C3.26468617,45.2713871 2.72861291,44.7353138 2.72861291,44.070583 L2.72861291,38.4096493 C2.72861291,38.0290373 2.41769042,37.7181148 2.0370784,37.7181148 L0.69153451,37.7181148 C0.310922493,37.7181148 0,38.0290373 0,38.4096493 L0,46.7991959 C0,47.4639267 0.536073263,48 1.20080411,48 L9.6761224,48 C10.0406522,48 10.3354925,47.7051597 10.3354925,47.3406299 L10.3354925,45.9307572 C10.3354925,45.5662274 10.0406522,45.2713871 9.6761224,45.2713871 L3.92941702,45.2713871 Z M45.2713871,44.070583 C45.2713871,44.7353138 44.7353138,45.2713871 44.070583,45.2713871 L38.4846996,45.2713871 C38.0987268,45.2713871 37.7878043,45.5823096 37.7878043,45.9682823 L37.7878043,47.3031048 C37.7878043,47.6890775 38.0987268,48 38.4846996,48 L46.7991959,48 C47.4639267,48 48,47.4639267 48,46.7991959 L48,38.3935671 C48,38.0183158 47.6944382,37.7181148 47.3245477,37.7181148 L45.9522001,37.7181148 C45.5769488,37.7181148 45.2767478,38.0236766 45.2767478,38.3935671 L45.2767478,44.070583 L45.2713871,44.070583 Z" id="形状"></path>
-                    </g>
-                    <g id="编组-3" transform="translate(53.150000, 46.000000)" fill="url(#linearGradient-9)" opacity="0.204287574">
-                        <rect id="矩形备份-23" x="0" y="0" width="31" height="28" rx="4"></rect>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/infinite-scroll.svg b/examples/sites/demos/pc/overviewimage/infinite-scroll.svg
index d2a29e8dad..04eaf0168e 100644
--- a/examples/sites/demos/pc/overviewimage/infinite-scroll.svg
+++ b/examples/sites/demos/pc/overviewimage/infinite-scroll.svg
@@ -2,69 +2,27 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Infinite Scroll 无限滚动</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="68.4083778%" x2="128.792906%" y2="3.1155351%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="68.4083778%" x2="128.792906%" y2="3.1155351%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.2468882%" x2="128.792906%" y2="-34.6768021%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="83.2468882%" x2="128.792906%" y2="-34.6768021%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="83.2468882%" x2="128.792906%" y2="-34.6768021%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="83.2468882%" x2="128.792906%" y2="-34.6768021%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1092.000000, -1434.000000)">
             <g id="编组-17备份-3" transform="translate(994.000000, 1401.000000)">
                 <g id="Infinite-Scroll-无限滚动" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M43.8275862,47 L69.8275862,47 C72.0367252,47 73.8275862,48.790861 73.8275862,51 L73.8275862,74 C73.8275862,76.209139 72.0367252,78 69.8275862,78 L43.8275862,78 C41.6184472,78 39.8275862,76.209139 39.8275862,74 L39.8275862,51 C39.8275862,48.790861 41.6184472,47 43.8275862,47 Z M39,42 L89,42 C91.209139,42 93,43.790861 93,46 L93,79 C93,81.209139 91.209139,83 89,83 L39,83 C36.790861,83 35,81.209139 35,79 L35,46 C35,43.790861 36.790861,42 39,42 Z" id="形状" fill="url(#linearGradient-9)"></path>
+                    <g id="编组"></g>
+                    <path d="M43.8275862,47 L69.8275862,47 C72.0367252,47 73.8275862,48.790861 73.8275862,51 L73.8275862,74 C73.8275862,76.209139 72.0367252,78 69.8275862,78 L43.8275862,78 C41.6184472,78 39.8275862,76.209139 39.8275862,74 L39.8275862,51 C39.8275862,48.790861 41.6184472,47 43.8275862,47 Z M39,42 L89,42 C91.209139,42 93,43.790861 93,46 L93,79 C93,81.209139 91.209139,83 89,83 L39,83 C36.790861,83 35,81.209139 35,79 L35,46 C35,43.790861 36.790861,42 39,42 Z" id="形状" fill="url(#linearGradient-1)"></path>
                     <path d="M79.9619047,66.5857143 L79.9619047,50.6714286 C79.9619047,48.7147626 81.5480959,47.1285714 83.5047619,47.1285714 C85.4614279,47.1285714 87.047619,48.7147626 87.047619,50.6714286 L87.047619,66.5857143 C87.047619,68.5423802 85.4614279,70.1285714 83.5047619,70.1285714 C81.5480959,70.1285714 79.9619047,68.5423802 79.9619047,66.5857143 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                    <path d="M54.5897316,67.2174298 C54.174538,66.7954352 53.5014054,66.7954352 53.0862118,67.2174298 L52.0085564,68.3128101 L52.0132816,54.0806712 C52.0132816,53.483833 51.5372778,53 50.9500973,53 C50.3629169,53 49.886913,53.483833 49.886913,54.0806712 L49.8821878,68.3155117 L48.8027604,67.2174298 C48.3857528,66.8070058 47.7219623,66.8124078 47.3114735,67.2295661 C46.9009848,67.6467245 46.8955398,68.3214318 47.2992406,68.7453787 L50.1934645,71.6872057 C50.2052777,71.6992132 50.2176815,71.7112207 50.2300853,71.7226277 L50.2392405,71.7307328 C50.2492817,71.7397384 50.2593229,71.748744 50.2687734,71.7574494 L50.2773379,71.7643537 L50.3101195,71.7901697 L50.3157307,71.7943723 C50.3281345,71.8033779 50.3405383,71.8123835 50.3532375,71.8210889 L50.3550095,71.8210889 C50.4993624,71.9189843 50.6651865,71.9792917 50.8378723,71.9966979 L50.8479135,71.9966979 L50.8898502,72 L50.996464,72 C51.0138884,72 51.0259969,71.9978987 51.041354,71.9963978 L51.0487372,71.9963978 C51.2215262,71.9798818 51.3876611,71.9203967 51.5324861,71.8231902 L51.5345534,71.8231902 C51.5469572,71.814785 51.5590657,71.8060796 51.5711742,71.797074 L51.5776714,71.792271 L51.6089763,71.7676557 L51.6190175,71.7595507 C51.6287633,71.7514456 51.6379185,71.7430404 51.6485504,71.7346352 C51.6523896,71.7313331 51.6562289,71.7283313 51.6597729,71.724729 C51.6721767,71.7136221 51.6839898,71.7019149 51.695803,71.6899074 L51.697575,71.6899074 L54.5917989,68.7480804 C54.7916194,68.5450414 54.9037112,68.2695073 54.9033243,67.9823189 C54.9029354,67.6951305 54.7900998,67.4199104 54.5897316,67.2174298 L54.5897316,67.2174298 Z M66.6864063,57.7825702 C66.2712127,58.2045648 65.5980801,58.2045648 65.1828865,57.7825702 L64.1052311,56.6871899 L64.1099563,70.9193288 C64.1099563,71.516167 63.6339525,72 63.046772,72 C62.4595916,72 61.9835877,71.516167 61.9835877,70.9193288 L61.9788625,56.6844883 L60.8994351,57.7825702 C60.4824275,58.1929942 59.818637,58.1875922 59.4081482,57.7704339 C58.9976595,57.3532755 58.9922145,56.6785682 59.3959153,56.2546213 L62.2901392,53.3127943 C62.3019524,53.3007868 62.3143562,53.2887793 62.32676,53.2773723 L62.3359152,53.2692672 C62.3459564,53.2602616 62.3559976,53.251256 62.3654481,53.2425506 L62.3740126,53.2356463 L62.4067942,53.2098303 L62.4124054,53.2056277 C62.4248092,53.1966221 62.437213,53.1876165 62.4499122,53.1789111 L62.4516842,53.1789111 C62.5960371,53.0810157 62.7618612,53.0207083 62.934547,53.0033021 L62.9445882,53.0033021 L62.9865249,53 L63.0931387,53 C63.1105631,53 63.1226716,53.0021013 63.1380287,53.0036022 L63.1454119,53.0036022 C63.3182009,53.0201182 63.4843358,53.0796033 63.6291608,53.1768098 L63.6312281,53.1768098 C63.6436319,53.185215 63.6557404,53.1939204 63.6678489,53.202926 L63.6743461,53.207729 L63.705651,53.2323443 L63.7156922,53.2404493 C63.725438,53.2485544 63.7345932,53.2569596 63.7452251,53.2653648 C63.7490643,53.2686669 63.7529036,53.2716687 63.7564476,53.275271 C63.7688514,53.2863779 63.7806645,53.2980851 63.7924777,53.3100926 L63.7942497,53.3100926 L66.6884736,56.2519196 C66.8882941,56.4549586 67.0003859,56.7304927 66.999999,57.0176811 C66.9996101,57.3048695 66.8867745,57.5800896 66.6864063,57.7825702 L66.6864063,57.7825702 Z" id="形状" stroke="url(#linearGradient-11)" stroke-width="0.5" fill="url(#linearGradient-10)"></path>
+                    <path d="M54.5897316,67.2174298 C54.174538,66.7954352 53.5014054,66.7954352 53.0862118,67.2174298 L52.0085564,68.3128101 L52.0132816,54.0806712 C52.0132816,53.483833 51.5372778,53 50.9500973,53 C50.3629169,53 49.886913,53.483833 49.886913,54.0806712 L49.8821878,68.3155117 L48.8027604,67.2174298 C48.3857528,66.8070058 47.7219623,66.8124078 47.3114735,67.2295661 C46.9009848,67.6467245 46.8955398,68.3214318 47.2992406,68.7453787 L50.1934645,71.6872057 C50.2052777,71.6992132 50.2176815,71.7112207 50.2300853,71.7226277 L50.2392405,71.7307328 C50.2492817,71.7397384 50.2593229,71.748744 50.2687734,71.7574494 L50.2773379,71.7643537 L50.3101195,71.7901697 L50.3157307,71.7943723 C50.3281345,71.8033779 50.3405383,71.8123835 50.3532375,71.8210889 L50.3550095,71.8210889 C50.4993624,71.9189843 50.6651865,71.9792917 50.8378723,71.9966979 L50.8479135,71.9966979 L50.8898502,72 L50.996464,72 C51.0138884,72 51.0259969,71.9978987 51.041354,71.9963978 L51.0487372,71.9963978 C51.2215262,71.9798818 51.3876611,71.9203967 51.5324861,71.8231902 L51.5345534,71.8231902 C51.5469572,71.814785 51.5590657,71.8060796 51.5711742,71.797074 L51.5776714,71.792271 L51.6089763,71.7676557 L51.6190175,71.7595507 C51.6287633,71.7514456 51.6379185,71.7430404 51.6485504,71.7346352 C51.6523896,71.7313331 51.6562289,71.7283313 51.6597729,71.724729 C51.6721767,71.7136221 51.6839898,71.7019149 51.695803,71.6899074 L51.697575,71.6899074 L54.5917989,68.7480804 C54.7916194,68.5450414 54.9037112,68.2695073 54.9033243,67.9823189 C54.9029354,67.6951305 54.7900998,67.4199104 54.5897316,67.2174298 L54.5897316,67.2174298 Z M66.6864063,57.7825702 C66.2712127,58.2045648 65.5980801,58.2045648 65.1828865,57.7825702 L64.1052311,56.6871899 L64.1099563,70.9193288 C64.1099563,71.516167 63.6339525,72 63.046772,72 C62.4595916,72 61.9835877,71.516167 61.9835877,70.9193288 L61.9788625,56.6844883 L60.8994351,57.7825702 C60.4824275,58.1929942 59.818637,58.1875922 59.4081482,57.7704339 C58.9976595,57.3532755 58.9922145,56.6785682 59.3959153,56.2546213 L62.2901392,53.3127943 C62.3019524,53.3007868 62.3143562,53.2887793 62.32676,53.2773723 L62.3359152,53.2692672 C62.3459564,53.2602616 62.3559976,53.251256 62.3654481,53.2425506 L62.3740126,53.2356463 L62.4067942,53.2098303 L62.4124054,53.2056277 C62.4248092,53.1966221 62.437213,53.1876165 62.4499122,53.1789111 L62.4516842,53.1789111 C62.5960371,53.0810157 62.7618612,53.0207083 62.934547,53.0033021 L62.9445882,53.0033021 L62.9865249,53 L63.0931387,53 C63.1105631,53 63.1226716,53.0021013 63.1380287,53.0036022 L63.1454119,53.0036022 C63.3182009,53.0201182 63.4843358,53.0796033 63.6291608,53.1768098 L63.6312281,53.1768098 C63.6436319,53.185215 63.6557404,53.1939204 63.6678489,53.202926 L63.6743461,53.207729 L63.705651,53.2323443 L63.7156922,53.2404493 C63.725438,53.2485544 63.7345932,53.2569596 63.7452251,53.2653648 C63.7490643,53.2686669 63.7529036,53.2716687 63.7564476,53.275271 C63.7688514,53.2863779 63.7806645,53.2980851 63.7924777,53.3100926 L63.7942497,53.3100926 L66.6884736,56.2519196 C66.8882941,56.4549586 67.0003859,56.7304927 66.999999,57.0176811 C66.9996101,57.3048695 66.8867745,57.5800896 66.6864063,57.7825702 L66.6864063,57.7825702 Z" id="形状" stroke="url(#linearGradient-3)" stroke-width="0.5" fill="url(#linearGradient-2)"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/input.svg b/examples/sites/demos/pc/overviewimage/input.svg
index 446bbeb941..d0ecbf4490 100644
--- a/examples/sites/demos/pc/overviewimage/input.svg
+++ b/examples/sites/demos/pc/overviewimage/input.svg
@@ -2,72 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Input 输入框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="58.1580418%" x2="128.792906%" y2="29.2222092%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="58.1580418%" x2="128.792906%" y2="29.2222092%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.7603386%" y1="86.8386573%" x2="66.5519821%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="48.7603386%" y1="86.8386573%" x2="66.5519821%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="58%" y1="1.13686838e-11%" x2="43.053829%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="58%" y1="1.13686838e-11%" x2="43.053829%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1869.000000, -1434.000000)">
-            <g id="编组-14备份-4" transform="translate(1771.000000, 1401.000000)">
-                <g id="Input-输入框" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1869.000000, -1485.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-4" transform="translate(1175.000000, 1141.000000)">
+                    <g id="Input-输入框" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-8" transform="translate(27.500000, 43.000000)">
+                            <path d="M4,7.22 L51,7.22 L51,7.22 L51,31.22 L4,31.22 C1.790861,31.22 2.705415e-16,29.429139 0,27.22 L0,11.22 C-2.705415e-16,9.010861 1.790861,7.22 4,7.22 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                            <path d="M47,31.22 L3.35714286,31.22 C1.50304405,31.22 0,29.429139 0,27.22 L0,11.22 C0,9.010861 1.50304405,7.22 3.35714286,7.22 L47,7.22 L47,7.22" id="路径" stroke="#5073E5" stroke-width="4"></path>
+                            <path d="M61.8051747,7.22 L68.8051747,7.22 C71.0143137,7.22 72.8051747,9.010861 72.8051747,11.22 L72.8051747,27.22 C72.8051747,29.429139 71.0143137,31.22 68.8051747,31.22 L61.8051747,31.22 L61.8051747,31.22 L61.8051747,7.22 Z" id="矩形备份-4" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
+                            <path d="M65,7.22 L68.8051747,7.22 C71.0143137,7.22 72.8051747,9.010861 72.8051747,11.22 L72.8051747,27.22 C72.8051747,29.429139 71.0143137,31.22 68.8051747,31.22 L65,31.22 L65,31.22" id="路径" stroke="#5073E5" stroke-width="4"></path>
+                            <path d="M62.5,8.8817842e-16 C63.6045695,8.8817842e-16 64.5,0.8954305 64.5,2 C64.5,3.1045695 63.6045695,4 62.5,4 L58.5,4 L58.5,36 L62.5,36 C63.6045695,36 64.5,36.8954305 64.5,38 C64.5,39.1045695 63.6045695,40 62.5,40 L50.5,40 C49.3954305,40 48.5,39.1045695 48.5,38 C48.5,36.8954305 49.3954305,36 50.5,36 L54.499,36 L54.5,3.999 L50.5,4 C49.3954305,4 48.5,3.1045695 48.5,2 C48.5,0.8954305 49.3954305,-8.8817842e-16 50.5,-8.8817842e-16 L62.5,8.8817842e-16 Z" id="形状结合" fill="url(#linearGradient-3)"></path>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-8" transform="translate(27.500000, 43.000000)">
-                        <path d="M4,7.22 L51,7.22 L51,7.22 L51,31.22 L4,31.22 C1.790861,31.22 2.705415e-16,29.429139 0,27.22 L0,11.22 C-2.705415e-16,9.010861 1.790861,7.22 4,7.22 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M47,31.22 L3.35714286,31.22 C1.50304405,31.22 0,29.429139 0,27.22 L0,11.22 C0,9.010861 1.50304405,7.22 3.35714286,7.22 L47,7.22 L47,7.22" id="路径" stroke="#5073E5" stroke-width="4"></path>
-                        <path d="M61.8051747,7.22 L68.8051747,7.22 C71.0143137,7.22 72.8051747,9.010861 72.8051747,11.22 L72.8051747,27.22 C72.8051747,29.429139 71.0143137,31.22 68.8051747,31.22 L61.8051747,31.22 L61.8051747,31.22 L61.8051747,7.22 Z" id="矩形备份-4" fill="url(#linearGradient-10)" opacity="0.204287574"></path>
-                        <path d="M65,7.22 L68.8051747,7.22 C71.0143137,7.22 72.8051747,9.010861 72.8051747,11.22 L72.8051747,27.22 C72.8051747,29.429139 71.0143137,31.22 68.8051747,31.22 L65,31.22 L65,31.22" id="路径" stroke="#5073E5" stroke-width="4"></path>
-                        <path d="M62.5,8.8817842e-16 C63.6045695,8.8817842e-16 64.5,0.8954305 64.5,2 C64.5,3.1045695 63.6045695,4 62.5,4 L58.5,4 L58.5,36 L62.5,36 C63.6045695,36 64.5,36.8954305 64.5,38 C64.5,39.1045695 63.6045695,40 62.5,40 L50.5,40 C49.3954305,40 48.5,39.1045695 48.5,38 C48.5,36.8954305 49.3954305,36 50.5,36 L54.499,36 L54.5,3.999 L50.5,4 C49.3954305,4 48.5,3.1045695 48.5,2 C48.5,0.8954305 49.3954305,-8.8817842e-16 50.5,-8.8817842e-16 L62.5,8.8817842e-16 Z" id="形状结合" fill="url(#linearGradient-11)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/ip-address.svg b/examples/sites/demos/pc/overviewimage/ip-address.svg
index b61fe5e04d..20a53ba49e 100644
--- a/examples/sites/demos/pc/overviewimage/ip-address.svg
+++ b/examples/sites/demos/pc/overviewimage/ip-address.svg
@@ -2,78 +2,46 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>IP 输入IP</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.5069786%" x2="128.792906%" y2="43.6149535%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.5069786%" x2="128.792906%" y2="43.6149535%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="100%" y1="1.13686838e-11%" x2="6.58643108%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="100%" y1="1.13686838e-11%" x2="6.58643108%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-11" x="0" y="0" width="90" height="3" rx="1.5"></rect>
-        <filter x="-4.4%" y="-66.7%" width="108.9%" height="366.7%" filterUnits="objectBoundingBox" id="filter-12">
+        <rect id="path-3" x="0" y="0" width="90" height="3" rx="1.5"></rect>
+        <filter x="-4.4%" y="-66.7%" width="108.9%" height="366.7%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="49.8415415%" y1="86.8386573%" x2="52.1157406%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="49.8415415%" y1="86.8386573%" x2="52.1157406%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.8415415%" y1="86.8386573%" x2="52.1157406%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="49.8415415%" y1="86.8386573%" x2="52.1157406%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-15" points="5.104 0 5.104 25.704 9.316 25.704 9.316 0"></polygon>
-        <filter x="-106.8%" y="-9.7%" width="313.7%" height="135.0%" filterUnits="objectBoundingBox" id="filter-16">
+        <polygon id="path-7" points="5.104 0 5.104 25.704 9.316 25.704 9.316 0"></polygon>
+        <filter x="-106.8%" y="-9.7%" width="313.7%" height="135.0%" filterUnits="objectBoundingBox" id="filter-8">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="46.4344237%" y1="86.8386573%" x2="97.6076411%" y2="-43.8247114%" id="linearGradient-17">
+        <linearGradient x1="46.4344237%" y1="86.8386573%" x2="97.6076411%" y2="-43.8247114%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.4344237%" y1="86.8386573%" x2="97.6076411%" y2="-43.8247114%" id="linearGradient-18">
+        <linearGradient x1="46.4344237%" y1="86.8386573%" x2="97.6076411%" y2="-43.8247114%" id="linearGradient-10">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M14.356,0 L14.356,25.704 L18.568,25.704 L18.568,15.84 L24.94,15.84 C31.204,15.84 34.336,13.176 34.336,7.884 C34.336,2.628 31.204,0 25.012,0 L14.356,0 Z M18.568,3.6 L24.688,3.6 C26.524,3.6 27.892,3.924 28.756,4.608 C29.62,5.256 30.088,6.336 30.088,7.884 C30.088,9.432 29.656,10.548 28.792,11.232 C27.928,11.88 26.56,12.24 24.688,12.24 L18.568,12.24 L18.568,3.6 Z" id="path-19"></path>
-        <filter x="-22.5%" y="-9.7%" width="145.0%" height="135.0%" filterUnits="objectBoundingBox" id="filter-20">
+        <path d="M14.356,0 L14.356,25.704 L18.568,25.704 L18.568,15.84 L24.94,15.84 C31.204,15.84 34.336,13.176 34.336,7.884 C34.336,2.628 31.204,0 25.012,0 L14.356,0 Z M18.568,3.6 L24.688,3.6 C26.524,3.6 27.892,3.924 28.756,4.608 C29.62,5.256 30.088,6.336 30.088,7.884 C30.088,9.432 29.656,10.548 28.792,11.232 C27.928,11.88 26.56,12.24 24.688,12.24 L18.568,12.24 L18.568,3.6 Z" id="path-11"></path>
+        <filter x="-22.5%" y="-9.7%" width="145.0%" height="135.0%" filterUnits="objectBoundingBox" id="filter-12">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -81,38 +49,28 @@
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -1596.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -1596.000000)">
             <g id="IP-输入IP" transform="translate(1089.000000, 1596.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-16" transform="translate(17.000000, 39.296000)">
                     <g id="编组-15" transform="translate(0.000000, 17.704000)">
-                        <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="0" y="0" width="92" height="24" rx="4"></rect>
-                        <path d="M18,15 C19.6568542,15 21,16.3431458 21,18 C21,19.6568542 19.6568542,21 18,21 C16.3431458,21 15,19.6568542 15,18 C15,16.3431458 16.3431458,15 18,15 Z" id="形状结合备份-19" fill="url(#linearGradient-10)" transform="translate(18.000000, 18.000000) rotate(-90.000000) translate(-18.000000, -18.000000) "></path>
-                        <path d="M45,15 C46.6568542,15 48,16.3431458 48,18 C48,19.6568542 46.6568542,21 45,21 C43.3431458,21 42,19.6568542 42,18 C42,16.3431458 43.3431458,15 45,15 Z" id="形状结合备份-21" fill="url(#linearGradient-10)" transform="translate(45.000000, 18.000000) rotate(-90.000000) translate(-45.000000, -18.000000) "></path>
-                        <path d="M72,15 C73.6568542,15 75,16.3431458 75,18 C75,19.6568542 73.6568542,21 72,21 C70.3431458,21 69,19.6568542 69,18 C69,16.3431458 70.3431458,15 72,15 Z" id="形状结合备份-23" fill="url(#linearGradient-10)" transform="translate(72.000000, 18.000000) rotate(-90.000000) translate(-72.000000, -18.000000) "></path>
+                        <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="0" y="0" width="92" height="24" rx="4"></rect>
+                        <path d="M18,15 C19.6568542,15 21,16.3431458 21,18 C21,19.6568542 19.6568542,21 18,21 C16.3431458,21 15,19.6568542 15,18 C15,16.3431458 16.3431458,15 18,15 Z" id="形状结合备份-19" fill="url(#linearGradient-2)" transform="translate(18.000000, 18.000000) rotate(-90.000000) translate(-18.000000, -18.000000) "></path>
+                        <path d="M45,15 C46.6568542,15 48,16.3431458 48,18 C48,19.6568542 46.6568542,21 45,21 C43.3431458,21 42,19.6568542 42,18 C42,16.3431458 43.3431458,15 45,15 Z" id="形状结合备份-21" fill="url(#linearGradient-2)" transform="translate(45.000000, 18.000000) rotate(-90.000000) translate(-45.000000, -18.000000) "></path>
+                        <path d="M72,15 C73.6568542,15 75,16.3431458 75,18 C75,19.6568542 73.6568542,21 72,21 C70.3431458,21 69,19.6568542 69,18 C69,16.3431458 70.3431458,15 72,15 Z" id="形状结合备份-23" fill="url(#linearGradient-2)" transform="translate(72.000000, 18.000000) rotate(-90.000000) translate(-72.000000, -18.000000) "></path>
                     </g>
                     <g id="矩形" transform="translate(1.000000, 45.704000)">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
                     <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use stroke="url(#linearGradient-14)" stroke-width="1" fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-15"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use stroke="url(#linearGradient-6)" stroke-width="1" fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-7"></use>
                     </g>
                     <g id="形状">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                        <use stroke="url(#linearGradient-18)" stroke-width="1" fill="url(#linearGradient-17)" fill-rule="evenodd" xlink:href="#path-19"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                        <use stroke="url(#linearGradient-10)" stroke-width="1" fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-11"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/layout.svg b/examples/sites/demos/pc/overviewimage/layout.svg
index 5b9f84566b..c46789cab2 100644
--- a/examples/sites/demos/pc/overviewimage/layout.svg
+++ b/examples/sites/demos/pc/overviewimage/layout.svg
@@ -2,105 +2,63 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Layout 布局</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-10" cx="93" cy="33" r="5"></circle>
-        <filter x="-40.0%" y="-20.0%" width="180.0%" height="180.0%" filterUnits="objectBoundingBox" id="filter-11">
+        <circle id="path-2" cx="93" cy="33" r="5"></circle>
+        <filter x="-40.0%" y="-20.0%" width="180.0%" height="180.0%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-13" cx="33" cy="93" r="5"></circle>
-        <filter x="-45.0%" y="-25.0%" width="190.0%" height="190.0%" filterUnits="objectBoundingBox" id="filter-14">
+        <circle id="path-5" cx="33" cy="93" r="5"></circle>
+        <filter x="-45.0%" y="-25.0%" width="190.0%" height="190.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="84.2543127%" x2="128.792906%" y2="-37.2426207%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="84.2543127%" x2="128.792906%" y2="-37.2426207%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="81.3891518%" x2="128.792906%" y2="-29.9453163%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1481.000000, -1350.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1481.000000, -1350.000000)">
             <g id="Layout-布局" transform="translate(1481.000000, 1350.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <rect id="矩形" stroke="url(#linearGradient-9)" stroke-width="4" x="33" y="33" width="60" height="60"></rect>
+                <g id="编组"></g>
+                <rect id="矩形" stroke="url(#linearGradient-1)" stroke-width="4" x="33" y="33" width="60" height="60"></rect>
                 <circle id="椭圆形" fill="#A5B6F0" cx="33" cy="33" r="5"></circle>
                 <g id="椭圆形备份-6">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-2"></use>
                 </g>
                 <circle id="椭圆形备份-7" fill="#A5B6F0" cx="93" cy="93" r="5"></circle>
                 <g id="椭圆形备份-8">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use stroke="url(#linearGradient-9)" stroke-width="1" fill="url(#linearGradient-12)" fill-rule="evenodd" xlink:href="#path-13"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use stroke="url(#linearGradient-1)" stroke-width="1" fill="url(#linearGradient-4)" fill-rule="evenodd" xlink:href="#path-5"></use>
                 </g>
                 <g id="编组-35" transform="translate(41.000000, 43.000000)">
-                    <path d="M28,27 L0,27 L0,3.03939962 C0,1.36266417 1.29326923,0 2.88461538,0 L28,0 L28,27 Z" id="路径" fill="url(#linearGradient-15)" opacity="0.604724702"></path>
-                    <path d="M43.8549107,12 L31,12 L31,0 L41.0982143,0 C42.6990327,0 44,1.35119297 44,3.01381331 L44,11.8493093 C44,11.9347007 43.937128,12 43.8549107,12 Z" id="路径" stroke="url(#linearGradient-17)" fill="url(#linearGradient-16)"></path>
-                    <path d="M43.8549107,27 L31,27 L31,15 L43.8549107,15 C43.937128,15 44,15.065272 44,15.1506276 L44,26.8443515 C44,26.9297071 43.937128,27 43.8549107,27 Z" id="路径" fill="url(#linearGradient-17)" opacity="0.204287574"></path>
-                    <path d="M41.0982143,41 L31,41 L31,29 L44,29 L44,37.9861867 C44,39.6538301 42.6990327,41 41.0982143,41 Z" id="路径" fill="url(#linearGradient-17)" opacity="0.303770519"></path>
-                    <path d="M13,41 L2.90178571,41 C1.30096726,41 0,39.648807 0,37.9861867 L0,29 L13,29 L13,41 Z" id="路径" fill="url(#linearGradient-17)" opacity="0.604724702"></path>
-                    <polygon id="路径" fill="url(#linearGradient-17)" opacity="0.204287574" points="16 29 29 29 29 41 16 41"></polygon>
+                    <path d="M28,27 L0,27 L0,3.03939962 C0,1.36266417 1.29326923,0 2.88461538,0 L28,0 L28,27 Z" id="路径" fill="url(#linearGradient-7)" opacity="0.604724702"></path>
+                    <path d="M43.8549107,12 L31,12 L31,0 L41.0982143,0 C42.6990327,0 44,1.35119297 44,3.01381331 L44,11.8493093 C44,11.9347007 43.937128,12 43.8549107,12 Z" id="路径" stroke="url(#linearGradient-9)" fill="url(#linearGradient-8)"></path>
+                    <path d="M43.8549107,27 L31,27 L31,15 L43.8549107,15 C43.937128,15 44,15.065272 44,15.1506276 L44,26.8443515 C44,26.9297071 43.937128,27 43.8549107,27 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                    <path d="M41.0982143,41 L31,41 L31,29 L44,29 L44,37.9861867 C44,39.6538301 42.6990327,41 41.0982143,41 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                    <path d="M13,41 L2.90178571,41 C1.30096726,41 0,39.648807 0,37.9861867 L0,29 L13,29 L13,41 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
+                    <polygon id="路径" fill="url(#linearGradient-9)" opacity="0.204287574" points="16 29 29 29 29 41 16 41"></polygon>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/link-menu.svg b/examples/sites/demos/pc/overviewimage/link-menu.svg
index d617e3acc1..496ec8b1ff 100644
--- a/examples/sites/demos/pc/overviewimage/link-menu.svg
+++ b/examples/sites/demos/pc/overviewimage/link-menu.svg
@@ -2,87 +2,47 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>LinkMenu 收藏夹菜单</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="74.4580386%" x2="128.792906%" y2="-12.292401%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="74.4580386%" x2="128.792906%" y2="-12.292401%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="74.4580386%" x2="128.792906%" y2="-12.292401%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="74.4580386%" x2="128.792906%" y2="-12.292401%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="56.766284%" x2="128.792906%" y2="32.7668897%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="56.766284%" x2="128.792906%" y2="32.7668897%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.7106222%" x2="128.792906%" y2="48.1901097%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="50.7106222%" x2="128.792906%" y2="48.1901097%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1869.000000, -609.000000)">
-            <g id="编组-25备份-5" transform="translate(1771.000000, 576.000000)">
-                <g id="LinkMenu-收藏夹菜单" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="typescript" transform="translate(18.000000, 34.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.604724702" x="0" y="0" width="27" height="22" rx="4"></rect>
-                        <rect id="矩形" fill="url(#linearGradient-10)" x="31" y="0" width="27" height="22" rx="4"></rect>
-                        <g id="编组-6" transform="translate(62.000000, 0.000000)">
-                            <rect id="矩形" fill="url(#linearGradient-10)" x="0" y="0" width="27" height="22" rx="4"></rect>
-                            <path d="M21.5802305,10.3857427 C21.5175158,10.0368255 21.1818536,9.6816584 20.833696,9.60305548 L20.5733738,9.54335459 C19.9617322,9.35787166 19.4190855,8.95237868 19.0740681,8.35517443 C18.729029,7.75480176 18.6474306,7.07267945 18.7980022,6.44724152 L18.8795789,6.20203599 C18.9830711,5.86255905 18.8481782,5.39424015 18.575339,5.16159981 C18.575339,5.16159981 18.3306521,4.95415494 17.6405955,4.5549554 C16.9505173,4.15890258 16.6525359,4.04889756 16.6525359,4.04889756 C16.3168953,3.92632735 15.8464268,4.04262582 15.6017616,4.30352154 L15.4197893,4.49840123 C14.9555793,4.93846474 14.3313775,5.20563221 13.6413643,5.20563221 C12.9513511,5.20563221 12.3208908,4.93536142 11.8566158,4.49212949 L11.6809021,4.30349984 C11.4393769,4.04262582 10.96579,3.92637075 10.6301277,4.04889756 C10.6301277,4.04889756 10.3290279,4.15890258 9.6389497,4.5549337 C8.9488715,4.95727996 8.70736795,5.16472483 8.70736795,5.16472483 C8.43450705,5.39419675 8.29961415,5.85939063 8.40312805,6.20201429 L8.47846797,6.45032313 C8.62587782,7.07580447 8.54744114,7.75480176 8.20240204,8.35510932 C7.85736294,8.95541689 7.30860936,9.3641651 6.69389273,9.54650131 L6.44296899,9.60305548 C6.09792988,9.6816584 5.75914926,10.0337005 5.69643456,10.3857427 C5.69643456,10.3857427 5.64,10.7000458 5.64,11.4984449 C5.64,12.296844 5.69643456,12.6111472 5.69643456,12.6111472 C5.75914926,12.9631893 6.09478982,13.3152314 6.44296899,13.3938343 L6.68765591,13.4503885 C7.30241585,13.6327464 7.85446109,14.0413644 8.19950019,14.6448404 C8.54453929,15.2452348 8.62613769,15.9273354 8.47556612,16.552795 L8.40345288,16.7948321 C8.29996064,17.1343091 8.43485354,17.602628 8.70767113,17.8352683 C8.70767113,17.8352683 8.95235805,18.0427132 9.6424146,18.4419127 C10.3324712,18.8411123 10.6304526,18.9479706 10.6304526,18.9479706 C10.9660931,19.0705191 11.4365616,18.9542423 11.6812269,18.6933466 L11.8537356,18.5078636 C12.3210424,18.0646534 12.9484059,17.7943609 13.6416242,17.7943609 C14.3348424,17.7943609 14.9652377,18.0678001 15.4295127,18.5109887 L15.6020214,18.6964716 C15.8435467,18.9573456 16.3171336,19.0737092 16.6527958,18.9510739 C16.6527958,18.9510739 16.9538956,18.8410689 17.6439738,18.4450377 C18.334052,18.0458165 18.5755556,17.8383933 18.5755556,17.8383933 C18.8484165,17.6089214 18.9833094,17.1406025 18.8797738,16.7979571 L18.8044339,16.5464799 C18.657024,15.9241453 18.7354607,15.2451697 19.0804998,14.6479437 C19.4255389,14.0475494 19.9775625,13.635828 20.5923441,13.4534918 L20.837031,13.3969377 C21.1820701,13.3183347 21.5208507,12.9662926 21.5835654,12.6142505 C21.5835654,12.6142505 21.64,12.2999473 21.64,11.5015482 C21.6367083,10.699959 21.5802521,10.3856341 21.5802521,10.3856341 L21.5802305,10.3857427 Z M13.6415592,14.6951445 C11.8819096,14.6951445 10.4516204,13.2649924 10.4516204,11.4984449 C10.4516204,9.73506585 11.8787479,8.30487029 13.6415592,8.30487029 C15.4012088,8.30487029 16.831498,9.73502245 16.831498,11.5015699 C16.828293,13.264949 15.4011655,14.6951445 13.6415592,14.6951445 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1869.000000, -660.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-5" transform="translate(1175.000000, 316.000000)">
+                    <g id="LinkMenu-收藏夹菜单" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="typescript" transform="translate(18.000000, 34.000000)">
+                            <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.604724702" x="0" y="0" width="27" height="22" rx="4"></rect>
+                            <rect id="矩形" fill="url(#linearGradient-2)" x="31" y="0" width="27" height="22" rx="4"></rect>
+                            <g id="编组-6" transform="translate(62.000000, 0.000000)">
+                                <rect id="矩形" fill="url(#linearGradient-2)" x="0" y="0" width="27" height="22" rx="4"></rect>
+                                <path d="M21.5802305,10.3857427 C21.5175158,10.0368255 21.1818536,9.6816584 20.833696,9.60305548 L20.5733738,9.54335459 C19.9617322,9.35787166 19.4190855,8.95237868 19.0740681,8.35517443 C18.729029,7.75480176 18.6474306,7.07267945 18.7980022,6.44724152 L18.8795789,6.20203599 C18.9830711,5.86255905 18.8481782,5.39424015 18.575339,5.16159981 C18.575339,5.16159981 18.3306521,4.95415494 17.6405955,4.5549554 C16.9505173,4.15890258 16.6525359,4.04889756 16.6525359,4.04889756 C16.3168953,3.92632735 15.8464268,4.04262582 15.6017616,4.30352154 L15.4197893,4.49840123 C14.9555793,4.93846474 14.3313775,5.20563221 13.6413643,5.20563221 C12.9513511,5.20563221 12.3208908,4.93536142 11.8566158,4.49212949 L11.6809021,4.30349984 C11.4393769,4.04262582 10.96579,3.92637075 10.6301277,4.04889756 C10.6301277,4.04889756 10.3290279,4.15890258 9.6389497,4.5549337 C8.9488715,4.95727996 8.70736795,5.16472483 8.70736795,5.16472483 C8.43450705,5.39419675 8.29961415,5.85939063 8.40312805,6.20201429 L8.47846797,6.45032313 C8.62587782,7.07580447 8.54744114,7.75480176 8.20240204,8.35510932 C7.85736294,8.95541689 7.30860936,9.3641651 6.69389273,9.54650131 L6.44296899,9.60305548 C6.09792988,9.6816584 5.75914926,10.0337005 5.69643456,10.3857427 C5.69643456,10.3857427 5.64,10.7000458 5.64,11.4984449 C5.64,12.296844 5.69643456,12.6111472 5.69643456,12.6111472 C5.75914926,12.9631893 6.09478982,13.3152314 6.44296899,13.3938343 L6.68765591,13.4503885 C7.30241585,13.6327464 7.85446109,14.0413644 8.19950019,14.6448404 C8.54453929,15.2452348 8.62613769,15.9273354 8.47556612,16.552795 L8.40345288,16.7948321 C8.29996064,17.1343091 8.43485354,17.602628 8.70767113,17.8352683 C8.70767113,17.8352683 8.95235805,18.0427132 9.6424146,18.4419127 C10.3324712,18.8411123 10.6304526,18.9479706 10.6304526,18.9479706 C10.9660931,19.0705191 11.4365616,18.9542423 11.6812269,18.6933466 L11.8537356,18.5078636 C12.3210424,18.0646534 12.9484059,17.7943609 13.6416242,17.7943609 C14.3348424,17.7943609 14.9652377,18.0678001 15.4295127,18.5109887 L15.6020214,18.6964716 C15.8435467,18.9573456 16.3171336,19.0737092 16.6527958,18.9510739 C16.6527958,18.9510739 16.9538956,18.8410689 17.6439738,18.4450377 C18.334052,18.0458165 18.5755556,17.8383933 18.5755556,17.8383933 C18.8484165,17.6089214 18.9833094,17.1406025 18.8797738,16.7979571 L18.8044339,16.5464799 C18.657024,15.9241453 18.7354607,15.2451697 19.0804998,14.6479437 C19.4255389,14.0475494 19.9775625,13.635828 20.5923441,13.4534918 L20.837031,13.3969377 C21.1820701,13.3183347 21.5208507,12.9662926 21.5835654,12.6142505 C21.5835654,12.6142505 21.64,12.2999473 21.64,11.5015482 C21.6367083,10.699959 21.5802521,10.3856341 21.5802521,10.3856341 L21.5802305,10.3857427 Z M13.6415592,14.6951445 C11.8819096,14.6951445 10.4516204,13.2649924 10.4516204,11.4984449 C10.4516204,9.73506585 11.8787479,8.30487029 13.6415592,8.30487029 C15.4012088,8.30487029 16.831498,9.73502245 16.831498,11.5015699 C16.828293,13.264949 15.4011655,14.6951445 13.6415592,14.6951445 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            </g>
                         </g>
+                        <path d="M46,61 L105,61 C106.104569,61 107,61.8954305 107,63 L107,86 C107,87.1045695 106.104569,88 105,88 L46,88 C44.8954305,88 44,87.1045695 44,86 L44,63 C44,61.8954305 44.8954305,61 46,61 Z" id="矩形" fill="url(#linearGradient-3)" opacity="0.303770519"></path>
+                        <path d="M62.5,67 L93.5,67 C94.8807119,67 96,68.1192881 96,69.5 C96,70.8807119 94.8807119,72 93.5,72 L62.5,72 C61.1192881,72 60,70.8807119 60,69.5 C60,68.1192881 61.1192881,67 62.5,67 Z" id="形状结合备份" fill="#5073E5"></path>
+                        <path d="M62.5,77 L93.2446809,77 C94.6253927,77 95.7446809,78.1192881 95.7446809,79.5 C95.7446809,80.8807119 94.6253927,82 93.2446809,82 L62.5,82 C61.1192881,82 60,80.8807119 60,79.5 C60,78.1192881 61.1192881,77 62.5,77 Z" id="形状结合备份-35" fill="url(#linearGradient-4)" opacity="0.303770519"></path>
+                        <polygon id="形状结合备份-38" fill="url(#linearGradient-5)" opacity="0.303770519" points="50 77 55 77 55 82 50 82"></polygon>
+                        <polygon id="形状结合备份-39" fill="#5073E5" points="50 67 55 67 55 72 50 72"></polygon>
                     </g>
-                    <path d="M46,61 L105,61 C106.104569,61 107,61.8954305 107,63 L107,86 C107,87.1045695 106.104569,88 105,88 L46,88 C44.8954305,88 44,87.1045695 44,86 L44,63 C44,61.8954305 44.8954305,61 46,61 Z" id="矩形" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
-                    <path d="M62.5,67 L93.5,67 C94.8807119,67 96,68.1192881 96,69.5 C96,70.8807119 94.8807119,72 93.5,72 L62.5,72 C61.1192881,72 60,70.8807119 60,69.5 C60,68.1192881 61.1192881,67 62.5,67 Z" id="形状结合备份" fill="#5073E5"></path>
-                    <path d="M62.5,77 L93.2446809,77 C94.6253927,77 95.7446809,78.1192881 95.7446809,79.5 C95.7446809,80.8807119 94.6253927,82 93.2446809,82 L62.5,82 C61.1192881,82 60,80.8807119 60,79.5 C60,78.1192881 61.1192881,77 62.5,77 Z" id="形状结合备份-35" fill="url(#linearGradient-12)" opacity="0.303770519"></path>
-                    <polygon id="形状结合备份-38" fill="url(#linearGradient-13)" opacity="0.303770519" points="50 77 55 77 55 82 50 82"></polygon>
-                    <polygon id="形状结合备份-39" fill="#5073E5" points="50 67 55 67 55 72 50 72"></polygon>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/link.svg b/examples/sites/demos/pc/overviewimage/link.svg
index 1884574d13..ca237eb938 100644
--- a/examples/sites/demos/pc/overviewimage/link.svg
+++ b/examples/sites/demos/pc/overviewimage/link.svg
@@ -2,79 +2,37 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Link 链接</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="84.3834523%" x2="128.792906%" y2="-37.5715276%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="84.3834523%" x2="128.792906%" y2="-37.5715276%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="61.5750883%" x2="128.792906%" y2="20.5193023%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="61.5750883%" x2="128.792906%" y2="20.5193023%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.7055554%" x2="128.792906%" y2="48.2030144%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="50.7055554%" x2="128.792906%" y2="48.2030144%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M73.1054224,78.8358687 C74.118265,79.8485299 74.118265,81.3657326 73.1054224,82.3783938 C72.0925797,83.391055 70.3343705,83.6415366 69.3250943,82.6288754 C67.5100208,80.8222248 66.4890987,78.3631555 66.4890987,75.7978849 C66.4890987,73.2326143 67.5100208,70.7735451 69.3250943,68.9668945 L79.4178571,58.8474388 C83.1981852,55.0508537 89.2502765,55.0508537 93.034171,58.8474388 C96.8180655,62.6440239 97.0677098,68.4623531 93.2838153,72.2553598 L90.2595528,75.2933435 C89.2502765,76.3060047 87.7381453,76.3060047 86.4792247,75.0392836 C85.2203041,73.7725625 85.4699484,72.5094196 86.4792247,71.4967584 L89.5034872,68.462353 C91.2688291,66.6910904 91.0156184,63.9071666 89.5034872,62.3863856 C87.991356,60.8656046 84.9599607,60.3646415 83.1981852,62.1394824 L73.1089887,72.2553598 C71.3430558,74.0910478 71.3430558,77.0001806 73.1089887,78.8358687 L73.1054224,78.8358687 Z M76.8928832,75.0392836 C75.8836069,74.0266224 75.8836069,72.5094196 77.1425275,71.2462769 C78.401448,69.9831341 79.663935,70.2336156 80.6732113,71.2462769 C82.4882847,73.0529275 83.5092068,75.5119967 83.5092068,78.0772673 C83.5092068,80.6425379 82.4882847,83.1016071 80.6732113,84.9082577 L70.5875812,95.0241352 C66.8072531,98.8171419 60.4983847,99.0747801 56.7144902,95.2746167 C52.9305957,91.4744534 53.1838064,85.155161 56.9677009,81.3621543 L59.9955297,78.3241706 C61.004806,77.3115093 62.7701479,77.0610277 63.7758579,78.073689 C64.7815678,79.0863503 64.5354898,80.8540345 63.5262136,81.8666957 L60.4983847,84.9046794 C58.7330428,86.675942 58.7330428,89.7103474 60.4983847,91.48161 C62.2637266,93.2528726 65.0383448,92.9988127 66.8036867,91.2311284 L76.8928832,81.1080944 C78.6546588,79.3368318 78.6546588,76.8069678 76.8928832,75.0357053 L76.8928832,75.0392836 Z" id="path-12"></path>
-        <filter x="-9.5%" y="-4.8%" width="119.0%" height="119.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M73.1054224,78.8358687 C74.118265,79.8485299 74.118265,81.3657326 73.1054224,82.3783938 C72.0925797,83.391055 70.3343705,83.6415366 69.3250943,82.6288754 C67.5100208,80.8222248 66.4890987,78.3631555 66.4890987,75.7978849 C66.4890987,73.2326143 67.5100208,70.7735451 69.3250943,68.9668945 L79.4178571,58.8474388 C83.1981852,55.0508537 89.2502765,55.0508537 93.034171,58.8474388 C96.8180655,62.6440239 97.0677098,68.4623531 93.2838153,72.2553598 L90.2595528,75.2933435 C89.2502765,76.3060047 87.7381453,76.3060047 86.4792247,75.0392836 C85.2203041,73.7725625 85.4699484,72.5094196 86.4792247,71.4967584 L89.5034872,68.462353 C91.2688291,66.6910904 91.0156184,63.9071666 89.5034872,62.3863856 C87.991356,60.8656046 84.9599607,60.3646415 83.1981852,62.1394824 L73.1089887,72.2553598 C71.3430558,74.0910478 71.3430558,77.0001806 73.1089887,78.8358687 L73.1054224,78.8358687 Z M76.8928832,75.0392836 C75.8836069,74.0266224 75.8836069,72.5094196 77.1425275,71.2462769 C78.401448,69.9831341 79.663935,70.2336156 80.6732113,71.2462769 C82.4882847,73.0529275 83.5092068,75.5119967 83.5092068,78.0772673 C83.5092068,80.6425379 82.4882847,83.1016071 80.6732113,84.9082577 L70.5875812,95.0241352 C66.8072531,98.8171419 60.4983847,99.0747801 56.7144902,95.2746167 C52.9305957,91.4744534 53.1838064,85.155161 56.9677009,81.3621543 L59.9955297,78.3241706 C61.004806,77.3115093 62.7701479,77.0610277 63.7758579,78.073689 C64.7815678,79.0863503 64.5354898,80.8540345 63.5262136,81.8666957 L60.4983847,84.9046794 C58.7330428,86.675942 58.7330428,89.7103474 60.4983847,91.48161 C62.2637266,93.2528726 65.0383448,92.9988127 66.8036867,91.2311284 L76.8928832,81.1080944 C78.6546588,79.3368318 78.6546588,76.8069678 76.8928832,75.0357053 L76.8928832,75.0392836 Z" id="path-4"></path>
+        <filter x="-9.5%" y="-4.8%" width="119.0%" height="119.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1873.000000, -1111.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1873.000000, -1111.000000)">
             <g id="Link-链接" transform="translate(1873.000000, 1111.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-22" transform="translate(31.000000, 33.000000)">
-                    <path d="M4,0 L12.7031151,0 L12.7031151,0 L55,0 C57.209139,-4.33003142e-15 59,1.790861 59,4 L59,53 C59,55.209139 57.209139,57 55,57 L4,57 C1.790861,57 3.75067146e-15,55.209139 0,53 L0,4 C-7.1463071e-16,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                    <path d="M10.90625,26.59375 L37.9301136,26.59375 C39.5351912,26.59375 40.8363636,27.8949224 40.8363636,29.5 C40.8363636,31.1050776 39.5351912,32.40625 37.9301136,32.40625 L10.90625,32.40625 C9.30117245,32.40625 8,31.1050776 8,29.5 C8,27.8949224 9.30117245,26.59375 10.90625,26.59375 Z M10.90625,39.1875 L17.3119318,39.1875 C18.9170094,39.1875 20.2181818,40.4886724 20.2181818,42.09375 C20.2181818,43.6988276 18.9170094,45 17.3119318,45 L10.90625,45 C9.30117245,45 8,43.6988276 8,42.09375 C8,40.4886724 9.30117245,39.1875 10.90625,39.1875 Z M27.70625,39.1875 L34.1119318,39.1875 C35.7170094,39.1875 37.0181818,40.4886724 37.0181818,42.09375 C37.0181818,43.6988276 35.7170094,45 34.1119318,45 L27.70625,45 C26.1011724,45 24.8,43.6988276 24.8,42.09375 C24.8,40.4886724 26.1011724,39.1875 27.70625,39.1875 Z" id="形状结合备份-41" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                    <rect id="矩形备份-21" fill="url(#linearGradient-11)" opacity="0.604724702" x="8" y="13" width="42" height="5.8125" rx="2.90625"></rect>
+                    <path d="M4,0 L12.7031151,0 L12.7031151,0 L55,0 C57.209139,-4.33003142e-15 59,1.790861 59,4 L59,53 C59,55.209139 57.209139,57 55,57 L4,57 C1.790861,57 3.75067146e-15,55.209139 0,53 L0,4 C-7.1463071e-16,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                    <path d="M10.90625,26.59375 L37.9301136,26.59375 C39.5351912,26.59375 40.8363636,27.8949224 40.8363636,29.5 C40.8363636,31.1050776 39.5351912,32.40625 37.9301136,32.40625 L10.90625,32.40625 C9.30117245,32.40625 8,31.1050776 8,29.5 C8,27.8949224 9.30117245,26.59375 10.90625,26.59375 Z M10.90625,39.1875 L17.3119318,39.1875 C18.9170094,39.1875 20.2181818,40.4886724 20.2181818,42.09375 C20.2181818,43.6988276 18.9170094,45 17.3119318,45 L10.90625,45 C9.30117245,45 8,43.6988276 8,42.09375 C8,40.4886724 9.30117245,39.1875 10.90625,39.1875 Z M27.70625,39.1875 L34.1119318,39.1875 C35.7170094,39.1875 37.0181818,40.4886724 37.0181818,42.09375 C37.0181818,43.6988276 35.7170094,45 34.1119318,45 L27.70625,45 C26.1011724,45 24.8,43.6988276 24.8,42.09375 C24.8,40.4886724 26.1011724,39.1875 27.70625,39.1875 Z" id="形状结合备份-41" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
+                    <rect id="矩形备份-21" fill="url(#linearGradient-3)" opacity="0.604724702" x="8" y="13" width="42" height="5.8125" rx="2.90625"></rect>
                 </g>
                 <g id="形状">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/loading.svg b/examples/sites/demos/pc/overviewimage/loading.svg
index 84d5f8a61e..d058f159e7 100644
--- a/examples/sites/demos/pc/overviewimage/loading.svg
+++ b/examples/sites/demos/pc/overviewimage/loading.svg
@@ -2,49 +2,17 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Loading 加载</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="73.0881168%" x2="128.792906%" y2="-8.80333478%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="73.0881168%" x2="128.792906%" y2="-8.80333478%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M29,35 L97,35 C98.1045695,35 99,35.8954305 99,37 C99,38.1045695 98.1045695,39 97,39 L29,39 C27.8954305,39 27,38.1045695 27,37 C27,35.8954305 27.8954305,35 29,35 Z" id="path-10"></path>
-        <filter x="-5.6%" y="-50.0%" width="111.1%" height="300.0%" filterUnits="objectBoundingBox" id="filter-11">
+        <path d="M29,35 L97,35 C98.1045695,35 99,35.8954305 99,37 C99,38.1045695 98.1045695,39 97,39 L29,39 C27.8954305,39 27,38.1045695 27,37 C27,35.8954305 27.8954305,35 29,35 Z" id="path-2"></path>
+        <filter x="-5.6%" y="-50.0%" width="111.1%" height="300.0%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-22.2%" y="-21.1%" width="144.4%" height="142.1%" filterUnits="objectBoundingBox" id="filter-12">
+        <filter x="-22.2%" y="-21.1%" width="144.4%" height="142.1%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
@@ -54,26 +22,16 @@
             </feMerge>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1481.000000, -869.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1481.000000, -869.000000)">
             <g id="Loading-加载" transform="translate(1481.000000, 869.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M31,36 L42.5021066,36 L95,36 C97.209139,36 99,37.790861 99,40 L99,89 C99,91.209139 97.209139,93 95,93 L31,93 C28.790861,93 27,91.209139 27,89 L27,40 C27,37.790861 28.790861,36 31,36 Z" id="矩形备份-26" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                <g id="编组"></g>
+                <path d="M31,36 L42.5021066,36 L95,36 C97.209139,36 99,37.790861 99,40 L99,89 C99,91.209139 97.209139,93 95,93 L31,93 C28.790861,93 27,91.209139 27,89 L27,40 C27,37.790861 28.790861,36 31,36 Z" id="矩形备份-26" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                 <g id="形状结合备份">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-2"></use>
                 </g>
-                <g id="loading0" filter="url(#filter-12)" transform="translate(45.000000, 47.000000)" fill="#5073E5" fill-rule="nonzero">
+                <g id="loading0" filter="url(#filter-4)" transform="translate(45.000000, 47.000000)" fill="#5073E5" fill-rule="nonzero">
                     <path d="M13.9736842,4.9875 C13.9736842,7.74202019 16.2004785,9.975 18.9473684,9.975 C21.6942584,9.975 23.9210526,7.74202019 23.9210526,4.9875 C23.9210526,2.23297981 21.6942584,0 18.9473684,0 C16.2004785,0 13.9736842,2.23297981 13.9736842,4.9875 L13.9736842,4.9875 Z M4.02631579,9.2625 C4.02631579,11.7546849 6.04103442,13.775 8.52631579,13.775 C11.0115972,13.775 13.0263158,11.7546849 13.0263158,9.2625 C13.0263158,7.65033901 12.1686207,6.16064081 10.7763158,5.35456031 C9.38401095,4.54847981 7.66862063,4.54847981 6.27631577,5.35456031 C4.88401091,6.16064081 4.02631579,7.65033901 4.02631579,9.2625 L4.02631579,9.2625 Z M8.05263158,19.95 C8.05263158,17.8125 6.15789474,15.9125 4.02631579,15.9125 C1.89473684,15.9125 0,17.8125 0,19.95 C0,22.0875 1.89473684,23.9875 4.02631579,23.9875 C6.15789474,23.9875 8.05263158,22.325 8.05263158,19.95 Z M5.21052632,30.875 C5.21052632,32.0629081 5.8425122,33.1605805 6.86842104,33.7545345 C7.89432988,34.3484886 9.1583017,34.3484886 10.1842105,33.7545345 C11.2101194,33.1605805 11.8421053,32.0629081 11.8421053,30.875 C11.8421053,29.0386532 10.3575757,27.55 8.52631579,27.55 C6.69505583,27.55 5.21052632,29.0386532 5.21052632,30.875 L5.21052632,30.875 Z M16.1052632,35.15 C16.1052632,36.7240115 17.377717,38 18.9473684,38 C20.5170198,38 21.7894737,36.7240115 21.7894737,35.15 C21.7894737,33.5759885 20.5170198,32.3 18.9473684,32.3 C17.377717,32.3 16.1052632,33.5759885 16.1052632,35.15 L16.1052632,35.15 Z M27.2368421,30.6375 C27.2368421,31.9491763 28.2972203,33.0125 29.6052632,33.0125 C30.913306,33.0125 31.9736842,31.9491763 31.9736842,30.6375 C31.9736842,29.3258237 30.913306,28.2625 29.6052632,28.2625 C28.2972203,28.2625 27.2368421,29.3258237 27.2368421,30.6375 Z M32.2105263,19.95 C32.2105263,20.999341 33.0588289,21.85 34.1052632,21.85 C35.1516974,21.85 36,20.999341 36,19.95 C36,19.2711954 35.6388652,18.643954 35.0526316,18.3045516 C34.466398,17.9651493 33.7441283,17.9651493 33.1578947,18.3045516 C32.5716611,18.643954 32.2105263,19.2711954 32.2105263,19.95 Z M28.1842105,9.5 C28.1842105,10.0091035 28.4550616,10.4795345 28.8947368,10.7340863 C29.334412,10.988638 29.8761143,10.988638 30.3157895,10.7340863 C30.7554647,10.4795345 31.0263158,10.0091035 31.0263158,9.5 C31.0263158,8.99089651 30.7554647,8.52046548 30.3157895,8.26591373 C29.8761143,8.01136198 29.334412,8.01136198 28.8947368,8.26591373 C28.4550616,8.52046548 28.1842105,8.99089651 28.1842105,9.5 L28.1842105,9.5 Z" id="形状"></path>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/locales.svg b/examples/sites/demos/pc/overviewimage/locales.svg
index ccaea82fa9..987a2ed951 100644
--- a/examples/sites/demos/pc/overviewimage/locales.svg
+++ b/examples/sites/demos/pc/overviewimage/locales.svg
@@ -2,52 +2,20 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>TiLocale 国际化语言</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.1170576%" y1="86.8386573%" x2="128.549157%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.1170576%" y1="86.8386573%" x2="128.549157%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.337325%" y1="86.8386573%" x2="112.256124%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="45.337325%" y1="86.8386573%" x2="112.256124%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.337325%" y1="86.8386573%" x2="112.256124%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="45.337325%" y1="86.8386573%" x2="112.256124%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M98,67.7377623 C98,67.722028 98,67.7062937 98,67.6905595 L98,65.9755245 C98,65.4353147 97.5728987,65 97.0428816,65 C96.5128644,65 96.0857632,65.4353147 96.0857632,65.9755245 C96.0857632,65.9755245 96.0857632,66.7622378 95.3138936,66.7622378 L76.6861063,66.7622378 C75.9142367,66.7622378 75.9142367,65.9755245 75.9142367,65.9755245 C75.9142367,65.4353147 75.4871355,65 74.9571183,65 C74.4271011,65 74,65.4353147 74,65.9755245 L74,70.6695804 C74,71.2097902 74.4271012,71.6451049 74.9571184,71.6451049 C75.4871355,71.6451049 75.9142367,71.2097902 75.9142367,70.6695804 L75.9142367,70.6643357 C75.9142367,68.7132867 77.8284734,68.7132867 77.8284734,68.7132867 L82.3773585,68.7132867 C82.7838765,68.75 84.0600343,68.986014 84.1629502,70.465035 L84.1629502,88.2972028 C84.0600343,89.7762237 82.7838765,90.0122377 82.3773585,90.048951 L81.245283,90.048951 C80.7152659,90.048951 80.2881647,90.4842657 80.2881647,91.0244755 C80.2881647,91.5646853 80.7152659,92 81.245283,92 L85.1200686,92 L86.890223,92 L90.7650086,92 C91.2950257,92 91.7221269,91.5646853 91.7221269,91.0244755 C91.7221269,90.4842657 91.2950257,90.048951 90.7650086,90.048951 L89.6277873,90.048951 C89.2212693,90.0122377 87.9451115,89.7762237 87.8421955,88.2972028 L87.8421955,70.465035 C87.9451115,68.986014 89.2212693,68.75 89.6277873,68.7132867 L94.1715266,68.7132867 C94.1715266,68.7132867 96.0857633,68.708042 96.0857633,70.6643357 L96.0857633,70.6695804 C96.0857633,71.2097902 96.5128645,71.6451049 97.0428816,71.6451049 C97.5728988,71.6451049 98,71.2097902 98,70.6695804 L98,67.784965 C98,67.7692308 98,67.7534965 98,67.7377623 Z" id="path-12"></path>
-        <filter x="-18.8%" y="-9.3%" width="137.5%" height="133.3%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M98,67.7377623 C98,67.722028 98,67.7062937 98,67.6905595 L98,65.9755245 C98,65.4353147 97.5728987,65 97.0428816,65 C96.5128644,65 96.0857632,65.4353147 96.0857632,65.9755245 C96.0857632,65.9755245 96.0857632,66.7622378 95.3138936,66.7622378 L76.6861063,66.7622378 C75.9142367,66.7622378 75.9142367,65.9755245 75.9142367,65.9755245 C75.9142367,65.4353147 75.4871355,65 74.9571183,65 C74.4271011,65 74,65.4353147 74,65.9755245 L74,70.6695804 C74,71.2097902 74.4271012,71.6451049 74.9571184,71.6451049 C75.4871355,71.6451049 75.9142367,71.2097902 75.9142367,70.6695804 L75.9142367,70.6643357 C75.9142367,68.7132867 77.8284734,68.7132867 77.8284734,68.7132867 L82.3773585,68.7132867 C82.7838765,68.75 84.0600343,68.986014 84.1629502,70.465035 L84.1629502,88.2972028 C84.0600343,89.7762237 82.7838765,90.0122377 82.3773585,90.048951 L81.245283,90.048951 C80.7152659,90.048951 80.2881647,90.4842657 80.2881647,91.0244755 C80.2881647,91.5646853 80.7152659,92 81.245283,92 L85.1200686,92 L86.890223,92 L90.7650086,92 C91.2950257,92 91.7221269,91.5646853 91.7221269,91.0244755 C91.7221269,90.4842657 91.2950257,90.048951 90.7650086,90.048951 L89.6277873,90.048951 C89.2212693,90.0122377 87.9451115,89.7762237 87.8421955,88.2972028 L87.8421955,70.465035 C87.9451115,68.986014 89.2212693,68.75 89.6277873,68.7132867 L94.1715266,68.7132867 C94.1715266,68.7132867 96.0857633,68.708042 96.0857633,70.6643357 L96.0857633,70.6695804 C96.0857633,71.2097902 96.5128645,71.6451049 97.0428816,71.6451049 C97.5728988,71.6451049 98,71.2097902 98,70.6695804 L98,67.784965 C98,67.7692308 98,67.7534965 98,67.7377623 Z" id="path-4"></path>
+        <filter x="-18.8%" y="-9.3%" width="137.5%" height="133.3%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -55,24 +23,14 @@
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-697.000000, -2185.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-697.000000, -2185.000000)">
             <g id="TiLocale-国际化语言" transform="translate(697.000000, 2185.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M62,78.9166667 C64.2337169,78.9166667 66.4144303,79.1205729 68.5269964,79.4830729 C66.989398,85.6407658 64.8513853,89.5346572 63.2410972,90.9748724 C62.8301638,90.9912823 62.4161026,91 62,91 C61.5838974,91 61.1698362,90.9912823 60.7579901,90.9740201 C59.1486147,89.5346572 57.010602,85.6407658 55.4730036,79.4830729 C57.5855697,79.1205729 59.7662831,78.9166667 62,78.9166667 Z M51.3463064,80.4648438 C52.2956463,84.3075453 53.5240151,87.5999764 54.9617703,90.1453343 C50.6958674,89.0868479 46.8024479,87.0896564 43.514833,84.386023 L43.0899597,84.029 L43.1534238,83.9914905 C45.6652018,82.5080291 48.4143502,81.3203869 51.3463064,80.4648438 Z M77.2563892,86.6911299 L76.8530585,86.9359489 C74.4502478,88.3627594 71.8237263,89.4539073 69.0385134,90.1445436 C70.1640667,88.1537102 71.16443,85.7047825 71.9978503,82.8896119 C73.4533485,84.5004461 75.2425668,85.8038323 77.2563892,86.6911299 Z M49.3246033,64.1145833 C49.4230383,68.4570313 49.8319221,72.5653646 50.4906793,76.3111979 C46.7016836,77.3888791 43.1662431,78.9518371 39.9951862,80.9545564 C36.0213772,76.3718121 33.4637183,70.5326187 32.9999597,64.1148799 L49.3246033,64.1145833 Z M70.4351206,64.1145833 L70.4341455,64.1577479 C68.8932572,66.5661164 68,69.4287425 68,72.5 C68,73.4037213 68.0773416,74.2893785 68.2257669,75.1507137 C66.2031104,74.8471395 64.1228964,74.6875 62,74.6875 C59.4709782,74.6875 57.0025318,74.9216146 54.6098046,75.3445313 C54.0419105,72.0744792 53.6633144,68.3210938 53.5573075,64.1145833 L70.4351206,64.1145833 Z M54.6098046,48.6554688 C57.0025318,49.0783854 59.4634063,49.3125 62,49.3125 C64.5290218,49.3125 66.9974682,49.0859375 69.3901954,48.6630208 C69.9580895,51.9330729 70.3366856,55.6864583 70.4426925,59.8854167 L53.5573075,59.8854167 C53.6557425,55.6789063 54.0419105,51.9255208 54.6098046,48.6554688 Z M39.9909597,43.047 L39.5038211,42.7346354 C42.797607,44.8869792 46.5002766,46.5559896 50.4831073,47.6888021 C49.8243502,51.4346354 49.4154664,55.5429688 49.3170314,59.8854167 L32.9999597,59.8851201 C33.4503695,53.6521094 35.8758729,47.9648177 39.6553913,43.4426964 L39.9909597,43.047 Z M83.9980587,43.0356923 C87.7677043,47.3816516 90.2644445,52.856247 90.9101774,58.8828915 C88.7086084,57.6821807 86.1839701,57 83.5,57 C80.2229116,57 77.183356,58.0169987 74.6797275,59.7526018 L74.6829686,59.8854167 C74.5845336,55.5429688 74.1756498,51.4346354 73.5168927,47.6963542 C77.2583127,46.6301777 80.7515624,45.0756506 83.8956375,43.1020313 L83.9980587,43.0356923 Z M62,33 C62.4161026,33 62.8301638,33.0087177 63.2420099,33.0259799 C64.8513853,34.4653428 66.989398,38.3592342 68.5269964,44.5169271 C66.4144303,44.8794271 64.2337169,45.0833333 62,45.0833333 C59.7662831,45.0833333 57.5855697,44.8869792 55.4730036,44.5169271 C57.010602,38.3592342 59.1486147,34.4653428 60.7589028,33.0251276 C61.1698362,33.0087177 61.5838974,33 62,33 Z M69.0385134,33.8554564 C73.3074969,34.9140163 77.2036723,36.9134848 80.4929174,39.6203529 L80.9169597,39.977 L80.8525311,40.0160616 C78.3337937,41.499523 75.5786187,42.6871652 72.6536936,43.5427083 C71.7219867,39.736818 70.5051566,36.4749516 69.0873235,33.9416888 L69.0385134,33.8554564 Z M54.9665018,33.8542133 C53.5263632,36.3937842 52.2965536,39.6894163 51.3463064,43.5427083 C48.3944288,42.6792816 45.6220939,41.4709749 43.0853865,39.9737261 C46.4626815,37.0863747 50.5116831,34.9580094 54.9665018,33.8542133 Z" id="形状结合" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
+                <g id="编组"></g>
+                <path d="M62,78.9166667 C64.2337169,78.9166667 66.4144303,79.1205729 68.5269964,79.4830729 C66.989398,85.6407658 64.8513853,89.5346572 63.2410972,90.9748724 C62.8301638,90.9912823 62.4161026,91 62,91 C61.5838974,91 61.1698362,90.9912823 60.7579901,90.9740201 C59.1486147,89.5346572 57.010602,85.6407658 55.4730036,79.4830729 C57.5855697,79.1205729 59.7662831,78.9166667 62,78.9166667 Z M51.3463064,80.4648438 C52.2956463,84.3075453 53.5240151,87.5999764 54.9617703,90.1453343 C50.6958674,89.0868479 46.8024479,87.0896564 43.514833,84.386023 L43.0899597,84.029 L43.1534238,83.9914905 C45.6652018,82.5080291 48.4143502,81.3203869 51.3463064,80.4648438 Z M77.2563892,86.6911299 L76.8530585,86.9359489 C74.4502478,88.3627594 71.8237263,89.4539073 69.0385134,90.1445436 C70.1640667,88.1537102 71.16443,85.7047825 71.9978503,82.8896119 C73.4533485,84.5004461 75.2425668,85.8038323 77.2563892,86.6911299 Z M49.3246033,64.1145833 C49.4230383,68.4570313 49.8319221,72.5653646 50.4906793,76.3111979 C46.7016836,77.3888791 43.1662431,78.9518371 39.9951862,80.9545564 C36.0213772,76.3718121 33.4637183,70.5326187 32.9999597,64.1148799 L49.3246033,64.1145833 Z M70.4351206,64.1145833 L70.4341455,64.1577479 C68.8932572,66.5661164 68,69.4287425 68,72.5 C68,73.4037213 68.0773416,74.2893785 68.2257669,75.1507137 C66.2031104,74.8471395 64.1228964,74.6875 62,74.6875 C59.4709782,74.6875 57.0025318,74.9216146 54.6098046,75.3445313 C54.0419105,72.0744792 53.6633144,68.3210938 53.5573075,64.1145833 L70.4351206,64.1145833 Z M54.6098046,48.6554688 C57.0025318,49.0783854 59.4634063,49.3125 62,49.3125 C64.5290218,49.3125 66.9974682,49.0859375 69.3901954,48.6630208 C69.9580895,51.9330729 70.3366856,55.6864583 70.4426925,59.8854167 L53.5573075,59.8854167 C53.6557425,55.6789063 54.0419105,51.9255208 54.6098046,48.6554688 Z M39.9909597,43.047 L39.5038211,42.7346354 C42.797607,44.8869792 46.5002766,46.5559896 50.4831073,47.6888021 C49.8243502,51.4346354 49.4154664,55.5429688 49.3170314,59.8854167 L32.9999597,59.8851201 C33.4503695,53.6521094 35.8758729,47.9648177 39.6553913,43.4426964 L39.9909597,43.047 Z M83.9980587,43.0356923 C87.7677043,47.3816516 90.2644445,52.856247 90.9101774,58.8828915 C88.7086084,57.6821807 86.1839701,57 83.5,57 C80.2229116,57 77.183356,58.0169987 74.6797275,59.7526018 L74.6829686,59.8854167 C74.5845336,55.5429688 74.1756498,51.4346354 73.5168927,47.6963542 C77.2583127,46.6301777 80.7515624,45.0756506 83.8956375,43.1020313 L83.9980587,43.0356923 Z M62,33 C62.4161026,33 62.8301638,33.0087177 63.2420099,33.0259799 C64.8513853,34.4653428 66.989398,38.3592342 68.5269964,44.5169271 C66.4144303,44.8794271 64.2337169,45.0833333 62,45.0833333 C59.7662831,45.0833333 57.5855697,44.8869792 55.4730036,44.5169271 C57.010602,38.3592342 59.1486147,34.4653428 60.7589028,33.0251276 C61.1698362,33.0087177 61.5838974,33 62,33 Z M69.0385134,33.8554564 C73.3074969,34.9140163 77.2036723,36.9134848 80.4929174,39.6203529 L80.9169597,39.977 L80.8525311,40.0160616 C78.3337937,41.499523 75.5786187,42.6871652 72.6536936,43.5427083 C71.7219867,39.736818 70.5051566,36.4749516 69.0873235,33.9416888 L69.0385134,33.8554564 Z M54.9665018,33.8542133 C53.5263632,36.3937842 52.2965536,39.6894163 51.3463064,43.5427083 C48.3944288,42.6792816 45.6220939,41.4709749 43.0853865,39.9737261 C46.4626815,37.0863747 50.5116831,34.9580094 54.9665018,33.8542133 Z" id="形状结合" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
                 <g id="路径">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use stroke="url(#linearGradient-11)" stroke-width="1" fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-12"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use stroke="url(#linearGradient-3)" stroke-width="1" fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-4"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/logon-user.svg b/examples/sites/demos/pc/overviewimage/logon-user.svg
index 64d162b625..83a5217cfa 100644
--- a/examples/sites/demos/pc/overviewimage/logon-user.svg
+++ b/examples/sites/demos/pc/overviewimage/logon-user.svg
@@ -2,80 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>LogonUser 登录用户</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.7036339%" y1="86.8386573%" x2="120.717179%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="65.3675254%" x2="128.792906%" y2="10.8603097%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.6474394%" y1="86.8386573%" x2="121.467489%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="64.2162036%" x2="128.792906%" y2="13.7926217%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="45.0413544%" y1="86.8386573%" x2="116.207928%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览2" transform="translate(-1478.000000, -884.000000)">
-            <g id="编组-25备份-11" transform="translate(1380.000000, 850.000000)">
-                <g id="LogonUser-登录用户" transform="translate(98.000000, 34.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-19" transform="translate(30.000000, 37.000000)">
-                        <g id="编组-9" transform="translate(30.000000, 0.000000)">
-                            <path d="M5.48571429,0 L30.5142857,0 C33.5439621,-1.44472093e-15 36,2.45603794 36,5.48571429 L36,32.5142857 C36,35.5439621 33.5439621,38 30.5142857,38 L5.48571429,38 C2.45603794,38 4.40736806e-15,35.5439621 0,32.5142857 L0,5.48571429 C-3.71028343e-16,2.45603794 2.45603794,2.33289935e-15 5.48571429,0 Z" id="矩形备份" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                            <path d="M17.9825899,9 C15.5210035,9 13.370907,10.6020375 12.7350019,12.8591545 L12.6245144,13.3391001 L12.5727241,13.7312509 L12.5526308,13.9927879 C12.548556,14.063758 12.5468701,14.1249407 12.5468701,14.1956008 L12.5468701,16.1234183 C12.5468701,16.2607937 12.554247,16.398606 12.5683839,16.5453532 L12.6092251,16.875558 L12.6965119,17.2816862 L12.7611301,17.5309971 L12.7971067,17.6503399 L12.9199667,17.9844297 C13.1428996,18.5322115 13.4556234,19.0337364 13.8425497,19.472724 L13.8929837,19.5258197 L11.10514,20.1064946 C9.30047005,20.4701903 7.99811421,22.0003492 8.00000205,23.7804865 L8.00000205,27.2113688 C8.00000205,28.7560611 9.3081285,30 10.904704,30 L25.0954628,30 C26.6917892,30 28.000002,28.7559822 28.000002,27.2113688 L28.000002,23.7746564 L27.9858557,23.4944964 C27.8383262,21.8282171 26.5748373,20.4405088 24.8680067,20.1050325 L22.0912261,19.527541 C22.9330643,18.6001892 23.4239541,17.4046617 23.4239541,16.1292597 L23.4239541,14.2011659 C23.4239541,11.3309107 20.9708205,9 17.9825899,9 Z" id="Fill-1" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        </g>
-                        <g id="编组-10" transform="translate(0.000000, 13.000000)">
-                            <path d="M5.79047632,0 L34.2095237,0 C37.4075154,-5.87461557e-16 40,2.59248456 40,5.79047632 L40,34.2095237 C40,37.4075154 37.4075154,40 34.2095237,40 L5.79047632,40 C2.59248456,40 3.91641038e-16,37.4075154 0,34.2095237 L0,5.79047632 C-3.91641038e-16,2.59248456 2.59248456,5.87461557e-16 5.79047632,0 Z" id="矩形备份-2" stroke="url(#linearGradient-12)" fill="url(#linearGradient-11)"></path>
-                            <path d="M29.4999829,33 L12.0000614,33 C10.0672207,33 8.50004438,31.4479013 8.50004438,29.5333081 L8.50004438,26.0667514 L10.2500393,26.0667514 L10.2500393,29.5333081 C10.2500393,30.4906723 11.0336411,31.266654 12.0000341,31.266654 L29.4999283,31.266654 C30.4665945,31.266654 31.2500051,30.4906723 31.2500051,29.5333081 L31.2500051,10.4666919 C31.2500051,9.50954409 30.4665945,8.73342711 29.4999283,8.73342711 L12.0000614,8.73342711 C11.0336684,8.73342711 10.2500666,9.50954409 10.2500666,10.4666919 L10.2500666,13.9334379 L8.50004438,13.9334379 L8.50004438,10.4666919 C8.50004438,8.55223396 10.0672207,7 12.0000888,7 L29.4999829,7 C31.4330422,7 33,8.55223396 33,10.4666919 L33,29.5333081 C33,31.4479013 31.4330422,33 29.4999829,33 Z M21.9250562,14.5901752 C21.5842173,14.2516215 21.5842173,13.7023342 21.9250562,13.3646732 C22.266851,13.0261196 22.821397,13.0261196 23.1631919,13.3646732 L29.2002195,19.3441284 C29.3821095,19.5244288 29.4599453,19.7638916 29.447792,20.0000541 C29.4599453,20.2361354 29.3821095,20.4756794 29.2002195,20.6567914 L23.1631919,26.636463 C22.821397,26.9748813 22.266851,26.9748813 21.9250562,26.636463 C21.5842173,26.2977741 21.5842173,25.7484867 21.9250562,25.4108798 L26.5128629,20.8665783 L5.87509303,20.8665783 C5.39223788,20.8665783 5,20.4790608 5,20.0000541 C5,19.5218589 5.39223788,19.1333947 5.87509303,19.1333947 L26.5128629,19.1333947 L21.9250562,14.5901752 Z" id="形状" stroke="#FFFFFF" stroke-width="0.777777778" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        </g>
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览2" transform="translate(-1087.000000, -1159.000000)">
+            <g id="LogonUser-登录用户" transform="translate(1087.000000, 1159.000000)">
+                <g id="编组"></g>
+                <g id="编组-19" transform="translate(26.000000, 38.000000)">
+                    <path d="M8,9.37209302 L72,9.37209302 C73.1045695,9.37209302 74,10.2675235 74,11.372093 L74,50 C74,51.1045695 73.1045695,52 72,52 L10,52 C8.8954305,52 8,51.1045695 8,50 L8,9.37209302 L8,9.37209302 Z" id="矩形备份" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                    <path d="M4,0 L62,0 C64.209139,-4.05812251e-16 66,1.790861 66,4 L66,37 C66,39.209139 64.209139,41 62,41 L4,41 C1.790861,41 2.705415e-16,39.209139 0,37 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-2)"></path>
+                    <g id="编组" transform="translate(8.000000, 10.000000)">
+                        <rect id="矩形" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" x="0" y="0" width="20" height="20" rx="10"></rect>
+                        <path d="M10.490425,4 C9.13655235,4 7.95399918,4.91544998 7.60425131,6.20523114 L7.54348319,6.47948576 L7.51499854,6.70357194 L7.50394718,6.85302166 C7.50170607,6.89357599 7.50077879,6.92853756 7.50077879,6.96891474 L7.50077879,8.07052476 C7.50077879,8.14902495 7.50483612,8.22777485 7.51261139,8.31163039 L7.53507408,8.50031886 L7.58308183,8.73239209 L7.61862185,8.87485547 L7.63840894,8.94305139 L7.70598199,9.1339598 C7.82859507,9.44697802 8.00059316,9.73356366 8.21340269,9.9844137 L8.24114139,10.0147541 L6.70782719,10.3465683 C5.7152586,10.5543945 4.99896282,11.428771 5.00000113,12.4459923 L5.00000113,14.4064965 C5.00000113,15.2891778 5.71947075,16 6.59758739,16 L14.4025055,16 C15.2804851,16 16.0000011,15.2891327 16.0000011,14.4064965 L16.0000011,12.4426608 L15.9922218,12.2825694 C15.9110806,11.3304098 15.2161616,10.5374336 14.2774046,10.3457329 L12.7501751,10.0157377 C13.2131862,9.4858224 13.4831757,8.80266382 13.4831757,8.0738627 L13.4831757,6.9720948 C13.4831757,5.331949 12.133952,4 10.490425,4 Z" id="Fill-1" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
                     </g>
+                    <path d="M37,13 L57,13 C58.1045695,13 59,13.8954305 59,15 C59,16.1045695 58.1045695,17 57,17 L37,17 C35.8954305,17 35,16.1045695 35,15 C35,13.8954305 35.8954305,13 37,13 Z" id="矩形" fill="#FFFFFF"></path>
+                    <path d="M37,24 L50,24 C51.1045695,24 52,24.8954305 52,26 C52,27.1045695 51.1045695,28 50,28 L37,28 C35.8954305,28 35,27.1045695 35,26 C35,24.8954305 35.8954305,24 37,24 Z" id="矩形" fill="#FFFFFF" opacity="0.6"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/logout.svg b/examples/sites/demos/pc/overviewimage/logout.svg
index 5f214beddd..fbbcc24485 100644
--- a/examples/sites/demos/pc/overviewimage/logout.svg
+++ b/examples/sites/demos/pc/overviewimage/logout.svg
@@ -2,65 +2,23 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Logout 注销</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.3968592%" y1="86.8386573%" x2="98.1092035%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.3968592%" y1="86.8386573%" x2="98.1092035%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1869.000000, -884.000000)">
             <g id="编组-25备份-12" transform="translate(1771.000000, 851.000000)">
                 <g id="Logout-注销" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-4" transform="translate(39.000000, 35.000000)">
-                        <path d="M36.4029553,29.9116184 C35.448106,28.8140176 34.3853641,27.8136002 33.2470975,26.9103661 L33.2794652,26.8531994 C31.6610766,25.5669485 29.8053243,24.5722477 27.9010203,23.8748139 C29.9941363,22.274146 31.6448927,20.1475444 32.6590829,17.6379259 C32.5457957,18.5354432 33.311833,15.8085912 33.311833,13.0760225 C33.311833,9.43450314 31.8498886,5.8844505 29.3198077,3.44343201 C26.7897268,1.00241353 23.283218,-0.300987439 19.8468395,0.0591628289 C17.672804,0.304979679 15.6929753,1.08244692 13.9882725,2.27151448 C13.2923654,2.66596477 12.0462062,3.92363237 10.9942535,5.39853347 C8.90653219,8.37691902 8.24299285,12.2585386 8.92271608,15.8314579 C9.53770376,19.0899603 11.4905594,21.9997458 14.0422188,23.8919639 C7.98405066,26.1557656 3.19901489,31.3465028 1.09510965,37.7777576 C0.399202533,39.8814925 0,42.3167943 0,44.8549962 C0,45.7296468 0.652750088,46.4956807 1.46194441,46.5871475 L20.0356515,46.5871475 C20.2082796,37.3432906 27.3291896,29.900185 36.0954615,29.900185 C36.1979594,29.900185 36.2950627,29.9059017 36.4029553,29.9116184 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M23.94875,44.08325 C23.94875,48.1918042 26.1406375,51.9882649 29.6987499,54.0425421 C33.2568623,56.0968193 37.6406375,56.0968193 41.1987499,54.0425421 C44.7568623,51.9882649 46.94875,48.1918042 46.94875,44.08325 C46.94875,37.7319753 41.8000244,32.58325 35.44875,32.58325 C29.0974753,32.58325 23.94875,37.7319753 23.94875,44.08325 L23.94875,44.08325 Z" id="路径" fill="url(#linearGradient-10)"></path>
+                        <path d="M36.4029553,29.9116184 C35.448106,28.8140176 34.3853641,27.8136002 33.2470975,26.9103661 L33.2794652,26.8531994 C31.6610766,25.5669485 29.8053243,24.5722477 27.9010203,23.8748139 C29.9941363,22.274146 31.6448927,20.1475444 32.6590829,17.6379259 C32.5457957,18.5354432 33.311833,15.8085912 33.311833,13.0760225 C33.311833,9.43450314 31.8498886,5.8844505 29.3198077,3.44343201 C26.7897268,1.00241353 23.283218,-0.300987439 19.8468395,0.0591628289 C17.672804,0.304979679 15.6929753,1.08244692 13.9882725,2.27151448 C13.2923654,2.66596477 12.0462062,3.92363237 10.9942535,5.39853347 C8.90653219,8.37691902 8.24299285,12.2585386 8.92271608,15.8314579 C9.53770376,19.0899603 11.4905594,21.9997458 14.0422188,23.8919639 C7.98405066,26.1557656 3.19901489,31.3465028 1.09510965,37.7777576 C0.399202533,39.8814925 0,42.3167943 0,44.8549962 C0,45.7296468 0.652750088,46.4956807 1.46194441,46.5871475 L20.0356515,46.5871475 C20.2082796,37.3432906 27.3291896,29.900185 36.0954615,29.900185 C36.1979594,29.900185 36.2950627,29.9059017 36.4029553,29.9116184 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M23.94875,44.08325 C23.94875,48.1918042 26.1406375,51.9882649 29.6987499,54.0425421 C33.2568623,56.0968193 37.6406375,56.0968193 41.1987499,54.0425421 C44.7568623,51.9882649 46.94875,48.1918042 46.94875,44.08325 C46.94875,37.7319753 41.8000244,32.58325 35.44875,32.58325 C29.0974753,32.58325 23.94875,37.7319753 23.94875,44.08325 L23.94875,44.08325 Z" id="路径" fill="url(#linearGradient-2)"></path>
                         <path d="M39.0165808,41.58325 L32.1760342,41.58325 C30.9454597,41.58325 29.94875,42.5799597 29.94875,43.8105342 C29.94875,45.0411087 30.9454597,46.0378184 32.1760342,46.0378184 L39.0165808,46.0378184 C40.2471554,46.0378184 41.243865,45.0411087 41.243865,43.8105342 C41.243865,42.5799597 40.2471554,41.58325 39.0165808,41.58325 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/milestone.svg b/examples/sites/demos/pc/overviewimage/milestone.svg
index 2a2606ef93..25a786ae09 100644
--- a/examples/sites/demos/pc/overviewimage/milestone.svg
+++ b/examples/sites/demos/pc/overviewimage/milestone.svg
@@ -2,89 +2,49 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Milestone 里程碑</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M14.3333333,1.33318717 C14.7307708,1.2562733 15.1260208,1.14571625 15.5186667,0.994970154 C15.7466042,0.907472388 16,1.07311669 16,1.32158314 L16,11.2454706 C16,11.5176552 15.8407708,11.7658453 15.5914792,11.8628856 C12.56525,13.0411832 10.1340833,12.393823 7.72883333,11.7533487 C5.839625,11.250295 3.966375,10.7515131 1.83333333,11.1449661 L1.83333333,18.8299776 C1.83333333,18.9238784 1.75871412,19 1.66666667,19 L0.166666667,19 C0.0746192084,19 0,18.9238784 0,18.8299776 L0,1.20637173 C0,0.950296774 0.140354167,0.713115556 0.370458333,0.610783337 C2.85647917,-0.494893444 5.46520833,0.120481303 8.07927083,0.73715247 C10.1808542,1.23289522 12.285875,1.72946683 14.3333333,1.33318717 Z" id="path-10"></path>
-        <filter x="-21.9%" y="-13.2%" width="143.8%" height="136.8%" filterUnits="objectBoundingBox" id="filter-11">
+        <path d="M14.3333333,1.33318717 C14.7307708,1.2562733 15.1260208,1.14571625 15.5186667,0.994970154 C15.7466042,0.907472388 16,1.07311669 16,1.32158314 L16,11.2454706 C16,11.5176552 15.8407708,11.7658453 15.5914792,11.8628856 C12.56525,13.0411832 10.1340833,12.393823 7.72883333,11.7533487 C5.839625,11.250295 3.966375,10.7515131 1.83333333,11.1449661 L1.83333333,18.8299776 C1.83333333,18.9238784 1.75871412,19 1.66666667,19 L0.166666667,19 C0.0746192084,19 0,18.9238784 0,18.8299776 L0,1.20637173 C0,0.950296774 0.140354167,0.713115556 0.370458333,0.610783337 C2.85647917,-0.494893444 5.46520833,0.120481303 8.07927083,0.73715247 C10.1808542,1.23289522 12.285875,1.72946683 14.3333333,1.33318717 Z" id="path-2"></path>
+        <filter x="-21.9%" y="-13.2%" width="143.8%" height="136.8%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="50.4268018%" x2="128.792906%" y2="48.9129747%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="50.4268018%" x2="128.792906%" y2="48.9129747%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M76.2128736,39 C76.7651583,39 77.2128736,39.4477153 77.2128736,40 C77.2128736,40.2829303 77.0930222,40.5526192 76.8830242,40.7422251 L70.2612268,46.721006 C69.8513072,47.09112 69.2189651,47.0588511 68.8488511,46.6489314 C68.682927,46.4651622 68.5910762,46.2263731 68.5910762,45.9787808 L68.5909868,43.023 L5.08598679,43.023329 C3.98141729,43.023329 3.08598679,42.1278985 3.08598679,41.023329 C3.08598679,39.9187595 3.98141729,39.023329 5.08598679,39.023329 L68.5909868,39.023 L68.5910762,39 L76.2128736,39 Z" id="path-13"></path>
-        <filter x="-5.4%" y="-25.1%" width="110.8%" height="200.3%" filterUnits="objectBoundingBox" id="filter-14">
+        <path d="M76.2128736,39 C76.7651583,39 77.2128736,39.4477153 77.2128736,40 C77.2128736,40.2829303 77.0930222,40.5526192 76.8830242,40.7422251 L70.2612268,46.721006 C69.8513072,47.09112 69.2189651,47.0588511 68.8488511,46.6489314 C68.682927,46.4651622 68.5910762,46.2263731 68.5910762,45.9787808 L68.5909868,43.023 L5.08598679,43.023329 C3.98141729,43.023329 3.08598679,42.1278985 3.08598679,41.023329 C3.08598679,39.9187595 3.98141729,39.023329 5.08598679,39.023329 L68.5909868,39.023 L68.5910762,39 L76.2128736,39 Z" id="path-5"></path>
+        <filter x="-5.4%" y="-25.1%" width="110.8%" height="200.3%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -884.000000)">
-            <g id="编组-25备份-9" transform="translate(598.000000, 851.000000)">
-                <g id="Milestone-里程碑" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-6" transform="translate(23.000000, 40.000000)">
-                        <g id="编组-9">
-                            <path d="M12,16 L39,16 C40.1045695,16 41,16.8954305 41,18 C41,19.1045695 40.1045695,20 39,20 L12,20 C10.8954305,20 10,19.1045695 10,18 C10,16.8954305 10.8954305,16 12,16 Z" id="形状结合备份-4" fill="#5073E5"></path>
-                            <path d="M53,16 L74,16 C75.1045695,16 76,16.8954305 76,18 C76,19.1045695 75.1045695,20 74,20 L53,20 C51.8954305,20 51,19.1045695 51,18 C51,16.8954305 51.8954305,16 53,16 Z" id="形状结合备份-5" fill="#5073E5"></path>
-                            <circle id="椭圆形" stroke="#5073E5" stroke-width="5" fill="#5073E5" cx="13.5" cy="13.5" r="13.5"></circle>
-                            <g id="形状" transform="translate(6.000000, 4.000000)">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                                <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -935.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-9" transform="translate(2.000000, 591.000000)">
+                    <g id="Milestone-里程碑" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-6" transform="translate(23.000000, 40.000000)">
+                            <g id="编组-9">
+                                <path d="M12,16 L39,16 C40.1045695,16 41,16.8954305 41,18 C41,19.1045695 40.1045695,20 39,20 L12,20 C10.8954305,20 10,19.1045695 10,18 C10,16.8954305 10.8954305,16 12,16 Z" id="形状结合备份-4" fill="#5073E5"></path>
+                                <path d="M53,16 L74,16 C75.1045695,16 76,16.8954305 76,18 C76,19.1045695 75.1045695,20 74,20 L53,20 C51.8954305,20 51,19.1045695 51,18 C51,16.8954305 51.8954305,16 53,16 Z" id="形状结合备份-5" fill="#5073E5"></path>
+                                <circle id="椭圆形" stroke="#5073E5" stroke-width="5" fill="#5073E5" cx="13.5" cy="13.5" r="13.5"></circle>
+                                <g id="形状" transform="translate(6.000000, 4.000000)">
+                                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                                </g>
+                                <circle id="椭圆形备份" stroke="#5073E5" stroke-width="5" fill="#FFFFFF" cx="47" cy="17.5" r="5.5"></circle>
+                                <circle id="椭圆形备份-2" stroke="#5073E5" stroke-width="5" fill="#FFFFFF" cx="73.5" cy="17.5" r="5.5"></circle>
+                            </g>
+                            <g id="形状结合备份-3" opacity="0.604724702">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                                <use fill="url(#linearGradient-4)" fill-rule="evenodd" xlink:href="#path-5"></use>
                             </g>
-                            <circle id="椭圆形备份" stroke="#5073E5" stroke-width="5" fill="#FFFFFF" cx="47" cy="17.5" r="5.5"></circle>
-                            <circle id="椭圆形备份-2" stroke="#5073E5" stroke-width="5" fill="#FFFFFF" cx="73.5" cy="17.5" r="5.5"></circle>
-                        </g>
-                        <g id="形状结合备份-3" opacity="0.604724702">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                            <use fill="url(#linearGradient-12)" fill-rule="evenodd" xlink:href="#path-13"></use>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/modal.svg b/examples/sites/demos/pc/overviewimage/modal.svg
index cce60542a4..2c34a56278 100644
--- a/examples/sites/demos/pc/overviewimage/modal.svg
+++ b/examples/sites/demos/pc/overviewimage/modal.svg
@@ -2,101 +2,59 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Modal 弹出框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="67.8556222%" x2="128.792906%" y2="4.52335329%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="67.8556222%" x2="128.792906%" y2="4.52335329%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.6227686%" x2="128.792906%" y2="15.3040466%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="63.6227686%" x2="128.792906%" y2="15.3040466%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.6227686%" x2="128.792906%" y2="15.3040466%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="63.6227686%" x2="128.792906%" y2="15.3040466%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-12" x="31" y="34" width="74" height="45" rx="4"></rect>
-        <filter x="-6.1%" y="-5.6%" width="112.2%" height="120.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <rect id="path-4" x="31" y="34" width="74" height="45" rx="4"></rect>
+        <filter x="-6.1%" y="-5.6%" width="112.2%" height="120.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M94.5330808,37.4497475 L94.5327475,40.3657475 L97.4497475,40.3664141 L97.4497475,41.5330808 L94.5327475,41.5327475 L94.5330808,44.4497475 L93.3664141,44.4497475 L93.3657475,41.5327475 L90.4497475,41.5330808 L90.4497475,40.3664141 L93.3657475,40.3657475 L93.3664141,37.4497475 L94.5330808,37.4497475 Z" id="path-14"></path>
-        <filter x="-28.6%" y="-28.6%" width="157.1%" height="157.1%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M94.5330808,37.4497475 L94.5327475,40.3657475 L97.4497475,40.3664141 L97.4497475,41.5330808 L94.5327475,41.5327475 L94.5330808,44.4497475 L93.3664141,44.4497475 L93.3657475,41.5327475 L90.4497475,41.5330808 L90.4497475,40.3664141 L93.3657475,40.3657475 L93.3664141,37.4497475 L94.5330808,37.4497475 Z" id="path-6"></path>
+        <filter x="-28.6%" y="-28.6%" width="157.1%" height="157.1%" filterUnits="objectBoundingBox" id="filter-7">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="59.6880098%" x2="128.792906%" y2="25.3255197%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="59.6880098%" x2="128.792906%" y2="25.3255197%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-697.000000, -574.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-697.000000, -574.000000)">
             <g id="Modal-弹出框" transform="translate(697.000000, 574.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M24,36 L37.0092559,36 L37.0092559,36 L95,36 C97.209139,36 99,37.790861 99,40 L99,87 C99,89.209139 97.209139,91 95,91 L24,91 C21.790861,91 20,89.209139 20,87 L20,40 C20,37.790861 21.790861,36 24,36 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                <g id="编组"></g>
+                <path d="M24,36 L37.0092559,36 L37.0092559,36 L95,36 C97.209139,36 99,37.790861 99,40 L99,87 C99,89.209139 97.209139,91 95,91 L24,91 C21.790861,91 20,89.209139 20,87 L20,40 C20,37.790861 21.790861,36 24,36 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                 <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use stroke="url(#linearGradient-11)" stroke-width="1" fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-12"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use stroke="url(#linearGradient-3)" stroke-width="1" fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-4"></use>
                 </g>
                 <g id="形状结合" fill-rule="nonzero" transform="translate(93.949747, 40.949747) rotate(-315.000000) translate(-93.949747, -40.949747) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                    <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-14"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                    <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-6"></use>
                 </g>
-                <rect id="形状结合备份-34" fill="url(#linearGradient-16)" opacity="0.204287574" x="81" y="79" width="14" height="7" rx="2"></rect>
-                <rect id="形状结合备份-40" fill="url(#linearGradient-16)" opacity="0.204287574" x="63" y="79" width="14" height="7" rx="2"></rect>
-                <path d="M31,70 L73,70 C74.6568542,70 76,71.3431458 76,73 C76,74.6568542 74.6568542,76 73,76 L31,76 C29.3431458,76 28,74.6568542 28,73 C28,71.3431458 29.3431458,70 31,70 Z M31,58 L57,58 C58.6568542,58 60,59.3431458 60,61 C60,62.6568542 58.6568542,64 57,64 L31,64 C29.3431458,64 28,62.6568542 28,61 C28,59.3431458 29.3431458,58 31,58 Z M31,44 L65,44 C66.6568542,44 68,45.3431458 68,47 C68,48.6568542 66.6568542,50 65,50 L31,50 C29.3431458,50 28,48.6568542 28,47 C28,45.3431458 29.3431458,44 31,44 Z" id="形状结合备份-41" fill="url(#linearGradient-17)" opacity="0.303770519"></path>
+                <rect id="形状结合备份-34" fill="url(#linearGradient-8)" opacity="0.204287574" x="81" y="79" width="14" height="7" rx="2"></rect>
+                <rect id="形状结合备份-40" fill="url(#linearGradient-8)" opacity="0.204287574" x="63" y="79" width="14" height="7" rx="2"></rect>
+                <path d="M31,70 L73,70 C74.6568542,70 76,71.3431458 76,73 C76,74.6568542 74.6568542,76 73,76 L31,76 C29.3431458,76 28,74.6568542 28,73 C28,71.3431458 29.3431458,70 31,70 Z M31,58 L57,58 C58.6568542,58 60,59.3431458 60,61 C60,62.6568542 58.6568542,64 57,64 L31,64 C29.3431458,64 28,62.6568542 28,61 C28,59.3431458 29.3431458,58 31,58 Z M31,44 L65,44 C66.6568542,44 68,45.3431458 68,47 C68,48.6568542 66.6568542,50 65,50 L31,50 C29.3431458,50 28,48.6568542 28,47 C28,45.3431458 29.3431458,44 31,44 Z" id="形状结合备份-41" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
                 <path d="M42.5,45 L78.5,45 C79.3284271,45 80,45.6715729 80,46.5 C80,47.3284271 79.3284271,48 78.5,48 L42.5,48 C41.6715729,48 41,47.3284271 41,46.5 C41,45.6715729 41.6715729,45 42.5,45 Z" id="形状结合备份" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero"></path>
                 <path d="M42.5,54 L62.5,54 C63.3284271,54 64,54.6715729 64,55.5 C64,56.3284271 63.3284271,57 62.5,57 L42.5,57 C41.6715729,57 41,56.3284271 41,55.5 C41,54.6715729 41.6715729,54 42.5,54 Z" id="形状结合备份-17" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                 <path d="M73,66 L81,66 C81.5522847,66 82,66.4477153 82,67 L82,70 C82,70.5522847 81.5522847,71 81,71 L73,71 C72.4477153,71 72,70.5522847 72,70 L72,67 C72,66.4477153 72.4477153,66 73,66 Z" id="形状结合备份-42" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
diff --git a/examples/sites/demos/pc/overviewimage/nav-menu.svg b/examples/sites/demos/pc/overviewimage/nav-menu.svg
index 49409fb900..e3592f59a0 100644
--- a/examples/sites/demos/pc/overviewimage/nav-menu.svg
+++ b/examples/sites/demos/pc/overviewimage/nav-menu.svg
@@ -2,83 +2,43 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>NavMenu 导航菜单</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="64.7306828%" x2="128.792906%" y2="12.4822899%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="64.7306828%" x2="128.792906%" y2="12.4822899%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.5098776%" x2="128.792906%" y2="48.7013881%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.5098776%" x2="128.792906%" y2="48.7013881%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.3653494%" x2="128.792906%" y2="43.9756701%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="52.3653494%" x2="128.792906%" y2="43.9756701%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M2,0 L74,0 C75.1045695,-2.02906125e-16 76,0.8954305 76,2 L76,18 C76,19.1045695 75.1045695,20 74,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-12"></path>
-        <filter x="-5.3%" y="-10.0%" width="110.5%" height="140.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M2,0 L74,0 C75.1045695,-2.02906125e-16 76,0.8954305 76,2 L76,18 C76,19.1045695 75.1045695,20 74,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-4"></path>
+        <filter x="-5.3%" y="-10.0%" width="110.5%" height="140.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -884.000000)">
-            <g id="编组-25备份-10" transform="translate(989.000000, 851.000000)">
-                <g id="NavMenu-导航菜单" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-3" transform="translate(25.000000, 36.000000)">
-                        <rect id="矩形备份-6" fill="url(#linearGradient-9)" opacity="0.204287574" x="4" y="10" width="68" height="43" rx="4"></rect>
-                        <path d="M16,28 L61,28 C62.6568542,28 64,29.3431458 64,31 C64,32.6568542 62.6568542,34 61,34 L16,34 C14.3431458,34 13,32.6568542 13,31 C13,29.3431458 14.3431458,28 16,28 Z" id="形状结合备份" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <path d="M16,41 L34,41 C35.6568542,41 37,42.3431458 37,44 C37,45.6568542 35.6568542,47 34,47 L16,47 C14.3431458,47 13,45.6568542 13,44 C13,42.3431458 14.3431458,41 16,41 Z" id="形状结合备份-17" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <g id="形状结合备份">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -935.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-10" transform="translate(393.000000, 591.000000)">
+                    <g id="NavMenu-导航菜单" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-3" transform="translate(25.000000, 36.000000)">
+                            <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="4" y="10" width="68" height="43" rx="4"></rect>
+                            <path d="M16,28 L61,28 C62.6568542,28 64,29.3431458 64,31 C64,32.6568542 62.6568542,34 61,34 L16,34 C14.3431458,34 13,32.6568542 13,31 C13,29.3431458 14.3431458,28 16,28 Z" id="形状结合备份" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                            <path d="M16,41 L34,41 C35.6568542,41 37,42.3431458 37,44 C37,45.6568542 35.6568542,47 34,47 L16,47 C14.3431458,47 13,45.6568542 13,44 C13,42.3431458 14.3431458,41 16,41 Z" id="形状结合备份-17" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
+                            <g id="形状结合备份">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
+                            </g>
+                            <path d="M13,5 C15.7614237,5 18,7.23857625 18,10 C18,12.7614237 15.7614237,15 13,15 C10.2385763,15 8,12.7614237 8,10 C8,7.23857625 10.2385763,5 13,5 Z" id="矩形" fill="#FFFFFF"></path>
+                            <path d="M26,6 L38,6 C39.1045695,6 40,6.8954305 40,8 L40,12 C40,13.1045695 39.1045695,14 38,14 L26,14 C24.8954305,14 24,13.1045695 24,12 L24,8 C24,6.8954305 24.8954305,6 26,6 Z" id="矩形备份-27" fill="#FFFFFF" opacity="0.801619757"></path>
+                            <path d="M48,6 L60,6 C61.1045695,6 62,6.8954305 62,8 L62,12 C62,13.1045695 61.1045695,14 60,14 L48,14 C46.8954305,14 46,13.1045695 46,12 L46,8 C46,6.8954305 46.8954305,6 48,6 Z" id="矩形备份-28" fill="#FFFFFF" opacity="0.801619757"></path>
                         </g>
-                        <path d="M13,5 C15.7614237,5 18,7.23857625 18,10 C18,12.7614237 15.7614237,15 13,15 C10.2385763,15 8,12.7614237 8,10 C8,7.23857625 10.2385763,5 13,5 Z" id="矩形" fill="#FFFFFF"></path>
-                        <path d="M26,6 L38,6 C39.1045695,6 40,6.8954305 40,8 L40,12 C40,13.1045695 39.1045695,14 38,14 L26,14 C24.8954305,14 24,13.1045695 24,12 L24,8 C24,6.8954305 24.8954305,6 26,6 Z" id="矩形备份-27" fill="#FFFFFF" opacity="0.801619757"></path>
-                        <path d="M48,6 L60,6 C61.1045695,6 62,6.8954305 62,8 L62,12 C62,13.1045695 61.1045695,14 60,14 L48,14 C46.8954305,14 46,13.1045695 46,12 L46,8 C46,6.8954305 46.8954305,6 48,6 Z" id="矩形备份-28" fill="#FFFFFF" opacity="0.801619757"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/notify.svg b/examples/sites/demos/pc/overviewimage/notify.svg
index 23bac93a96..c5eef13c5a 100644
--- a/examples/sites/demos/pc/overviewimage/notify.svg
+++ b/examples/sites/demos/pc/overviewimage/notify.svg
@@ -2,102 +2,60 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Notification 通知</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="70.0010438%" x2="128.792906%" y2="-0.940840561%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="70.0010438%" x2="128.792906%" y2="-0.940840561%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.4228927%" x2="128.792906%" y2="48.9229306%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.4228927%" x2="128.792906%" y2="48.9229306%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.961822%" x2="128.792906%" y2="45.0034177%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="51.961822%" x2="128.792906%" y2="45.0034177%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M38,3 L86,3 C87.1045695,3 88,3.8954305 88,5 L88,23 C88,24.1045695 87.1045695,25 86,25 L38,25 C36.8954305,25 36,24.1045695 36,23 L36,5 C36,3.8954305 36.8954305,3 38,3 Z" id="path-12"></path>
-        <filter x="-7.7%" y="-9.1%" width="115.4%" height="136.4%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M38,3 L86,3 C87.1045695,3 88,3.8954305 88,5 L88,23 C88,24.1045695 87.1045695,25 86,25 L38,25 C36.8954305,25 36,24.1045695 36,23 L36,5 C36,3.8954305 36.8954305,3 38,3 Z" id="path-4"></path>
+        <filter x="-7.7%" y="-9.1%" width="115.4%" height="136.4%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M82.0698813,6.23711103 L82.0689894,8.99711103 L84.6712327,8.9975277 L84.6712327,10.1016944 L82.0689894,10.101111 L82.0698813,12.862111 L81.0293408,12.862111 L81.0289894,10.101111 L78.4279894,10.1016944 L78.4279894,8.9975277 L81.0289894,8.99711103 L81.0293408,6.23711103 L82.0698813,6.23711103 Z" id="path-14"></path>
-        <filter x="-32.0%" y="-30.2%" width="164.1%" height="160.4%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M82.0698813,6.23711103 L82.0689894,8.99711103 L84.6712327,8.9975277 L84.6712327,10.1016944 L82.0689894,10.101111 L82.0698813,12.862111 L81.0293408,12.862111 L81.0289894,10.101111 L78.4279894,10.1016944 L78.4279894,8.9975277 L81.0289894,8.99711103 L81.0293408,6.23711103 L82.0698813,6.23711103 Z" id="path-6"></path>
+        <filter x="-32.0%" y="-30.2%" width="164.1%" height="160.4%" filterUnits="objectBoundingBox" id="filter-7">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M16.2053671,0.12878988 C15.746084,-0.0953419122 15.1987283,-0.0226937797 14.8125109,0.313657582 L7.31251633,6.77645943 L1.33394919,6.75159418 L1.33180635,6.75159418 C0.985504494,6.75214837 0.65406671,6.89363759 0.412521297,7.14403261 C0.165270165,7.39907161 0.0271456082,7.74187031 0.0278787159,8.09864184 L1.07162314e-05,18.8944831 C-0.00139245772,19.2511939 0.135051301,19.5944123 0.380378453,19.8512545 C0.622239166,20.1043156 0.955530266,20.2474964 1.30394923,20.2480174 L7.35430202,20.2480174 L14.8178681,26.6870351 C15.2043133,27.0230263 15.7516493,27.095247 16.2107242,26.8708216 C16.6725363,26.6422258 16.9639585,26.1671213 16.9607503,25.6481002 L16.9607503,1.35043026 C16.9632886,0.831871685 16.6720069,0.357415922 16.2107242,0.12878988 L16.2053671,0.12878988 Z M21.2625063,6.87916369 C20.951419,6.73068755 20.5943263,6.71424495 20.27113,6.83351502 C19.9479337,6.95278508 19.6856133,7.1978115 19.5428647,7.51376802 C19.2334667,8.17835749 19.4956274,8.97098651 20.1385785,9.31487672 C21.5117442,10.1948642 22.2939834,11.7655692 22.1742913,13.402507 C22.1742913,16.6003938 20.3475069,17.6598696 20.2864356,17.6944647 C19.6382583,18.0397628 19.3795753,18.8424519 19.7025074,19.5063844 C19.9178828,19.9610238 20.3720376,20.2512651 20.8714351,20.253423 C21.0737577,20.253423 21.2731891,20.2049532 21.4532204,20.1117991 C21.5892918,20.0404466 24.7821466,18.3301501 24.7821466,13.402507 C24.9232175,10.7317619 23.5614203,8.20855893 21.2614349,6.87916369 L21.2625063,6.87916369 Z M25.3232176,2.91369747 C25.0333669,2.72388581 24.6799968,2.65978732 24.3427769,2.73585339 C24.0055569,2.81191946 23.7128753,3.02174658 23.5307189,3.318028 C23.1410095,3.94181637 23.3077975,4.76468983 23.9089329,5.18400255 C24.0503614,5.28022025 27.3921447,7.63701315 27.3921447,13.501968 C27.3921448,19.3669228 24.1864327,21.7399322 24.0589329,21.82642 C23.456988,22.2495436 23.2966755,23.0784405 23.6967902,23.6988811 C23.8838671,23.9951467 24.1820187,24.202196 24.523085,24.2726957 C24.8641513,24.3431953 25.2189719,24.2711179 25.5064318,24.0729409 C25.689646,23.9464525 30,20.8880272 30,13.4976436 C30,6.10725997 25.5139318,3.03694261 25.3232176,2.91045416 L25.3232176,2.91369747 Z" id="path-16"></path>
-        <filter x="-13.3%" y="-7.4%" width="126.7%" height="129.6%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M16.2053671,0.12878988 C15.746084,-0.0953419122 15.1987283,-0.0226937797 14.8125109,0.313657582 L7.31251633,6.77645943 L1.33394919,6.75159418 L1.33180635,6.75159418 C0.985504494,6.75214837 0.65406671,6.89363759 0.412521297,7.14403261 C0.165270165,7.39907161 0.0271456082,7.74187031 0.0278787159,8.09864184 L1.07162314e-05,18.8944831 C-0.00139245772,19.2511939 0.135051301,19.5944123 0.380378453,19.8512545 C0.622239166,20.1043156 0.955530266,20.2474964 1.30394923,20.2480174 L7.35430202,20.2480174 L14.8178681,26.6870351 C15.2043133,27.0230263 15.7516493,27.095247 16.2107242,26.8708216 C16.6725363,26.6422258 16.9639585,26.1671213 16.9607503,25.6481002 L16.9607503,1.35043026 C16.9632886,0.831871685 16.6720069,0.357415922 16.2107242,0.12878988 L16.2053671,0.12878988 Z M21.2625063,6.87916369 C20.951419,6.73068755 20.5943263,6.71424495 20.27113,6.83351502 C19.9479337,6.95278508 19.6856133,7.1978115 19.5428647,7.51376802 C19.2334667,8.17835749 19.4956274,8.97098651 20.1385785,9.31487672 C21.5117442,10.1948642 22.2939834,11.7655692 22.1742913,13.402507 C22.1742913,16.6003938 20.3475069,17.6598696 20.2864356,17.6944647 C19.6382583,18.0397628 19.3795753,18.8424519 19.7025074,19.5063844 C19.9178828,19.9610238 20.3720376,20.2512651 20.8714351,20.253423 C21.0737577,20.253423 21.2731891,20.2049532 21.4532204,20.1117991 C21.5892918,20.0404466 24.7821466,18.3301501 24.7821466,13.402507 C24.9232175,10.7317619 23.5614203,8.20855893 21.2614349,6.87916369 L21.2625063,6.87916369 Z M25.3232176,2.91369747 C25.0333669,2.72388581 24.6799968,2.65978732 24.3427769,2.73585339 C24.0055569,2.81191946 23.7128753,3.02174658 23.5307189,3.318028 C23.1410095,3.94181637 23.3077975,4.76468983 23.9089329,5.18400255 C24.0503614,5.28022025 27.3921447,7.63701315 27.3921447,13.501968 C27.3921448,19.3669228 24.1864327,21.7399322 24.0589329,21.82642 C23.456988,22.2495436 23.2966755,23.0784405 23.6967902,23.6988811 C23.8838671,23.9951467 24.1820187,24.202196 24.523085,24.2726957 C24.8641513,24.3431953 25.2189719,24.2711179 25.5064318,24.0729409 C25.689646,23.9464525 30,20.8880272 30,13.4976436 C30,6.10725997 25.5139318,3.03694261 25.3232176,2.91045416 L25.3232176,2.91369747 Z" id="path-8"></path>
+        <filter x="-13.3%" y="-7.4%" width="126.7%" height="129.6%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1089.000000, -1597.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1089.000000, -1597.000000)">
             <g id="Notification-通知" transform="translate(1089.000000, 1597.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-3" transform="translate(18.000000, 30.000000)">
-                    <rect id="矩形备份-6" fill="url(#linearGradient-9)" opacity="0.204287574" x="7" y="5" width="76" height="56" rx="4"></rect>
-                    <path d="M18,34 L68,34 C69.6568542,34 71,35.3431458 71,37 C71,38.6568542 69.6568542,40 68,40 L18,40 C16.3431458,40 15,38.6568542 15,37 C15,35.3431458 16.3431458,34 18,34 Z" id="形状结合备份" fill="url(#linearGradient-10)" opacity="0.204287574"></path>
-                    <path d="M18,47 L38,47 C39.6568542,47 41,48.3431458 41,50 C41,51.6568542 39.6568542,53 38,53 L18,53 C16.3431458,53 15,51.6568542 15,50 C15,48.3431458 16.3431458,47 18,47 Z" id="形状结合备份-17" fill="url(#linearGradient-11)" opacity="0.204287574"></path>
+                    <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="7" y="5" width="76" height="56" rx="4"></rect>
+                    <path d="M18,34 L68,34 C69.6568542,34 71,35.3431458 71,37 C71,38.6568542 69.6568542,40 68,40 L18,40 C16.3431458,40 15,38.6568542 15,37 C15,35.3431458 16.3431458,34 18,34 Z" id="形状结合备份" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
+                    <path d="M18,47 L38,47 C39.6568542,47 41,48.3431458 41,50 C41,51.6568542 39.6568542,53 38,53 L18,53 C16.3431458,53 15,51.6568542 15,50 C15,48.3431458 16.3431458,47 18,47 Z" id="形状结合备份-17" fill="url(#linearGradient-3)" opacity="0.204287574"></path>
                     <g id="形状结合备份">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
                     </g>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(81.549611, 9.549611) rotate(-315.000000) translate(-81.549611, -9.549611) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-14"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-6"></use>
                     </g>
                     <path d="M42,7 L70,7 C71.1045695,7 72,7.8954305 72,9 C72,10.1045695 71.1045695,11 70,11 L42,11 C40.8954305,11 40,10.1045695 40,9 C40,7.8954305 40.8954305,7 42,7 Z" id="矩形备份-28" fill="#FFFFFF" opacity="0.595646449"></path>
                     <path d="M42,16 L59,16 C60.1045695,16 61,16.8954305 61,18 C61,19.1045695 60.1045695,20 59,20 L42,20 C40.8954305,20 40,19.1045695 40,18 C40,16.8954305 40.8954305,16 42,16 Z" id="矩形备份-31" fill="#FFFFFF" opacity="0.595646449"></path>
                     <g id="形状">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/numeric.svg b/examples/sites/demos/pc/overviewimage/numeric.svg
index f1816199d3..73e6560057 100644
--- a/examples/sites/demos/pc/overviewimage/numeric.svg
+++ b/examples/sites/demos/pc/overviewimage/numeric.svg
@@ -2,125 +2,83 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Spinner数字微调</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="51.1552053%" x2="128.792906%" y2="47.0577971%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="51.1552053%" x2="128.792906%" y2="47.0577971%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.1990064%" y1="86.8386573%" x2="60.694882%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="49.1990064%" y1="86.8386573%" x2="60.694882%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="49.1990064%" y1="86.8386573%" x2="60.694882%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="49.1990064%" y1="86.8386573%" x2="60.694882%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.108413%" y1="86.8386573%" x2="88.6085241%" y2="-43.8247114%" id="linearGradient-12">
+        <linearGradient x1="47.108413%" y1="86.8386573%" x2="88.6085241%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="47.108413%" y1="86.8386573%" x2="88.6085241%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="47.108413%" y1="86.8386573%" x2="88.6085241%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.9891847%" y1="86.8386573%" x2="90.2004625%" y2="-43.8247114%" id="linearGradient-16">
+        <linearGradient x1="46.9891847%" y1="86.8386573%" x2="90.2004625%" y2="-43.8247114%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="46.9891847%" y1="86.8386573%" x2="90.2004625%" y2="-43.8247114%" id="linearGradient-17">
+        <linearGradient x1="46.9891847%" y1="86.8386573%" x2="90.2004625%" y2="-43.8247114%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-18">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M98.8031765,18.9507942 L98.8030157,26.182395 L106.035243,26.1828602 L106.035243,30.7029015 L98.8030157,30.702395 L98.8031765,37.9349676 L94.2831352,37.9349676 L94.2830157,30.702395 L87.0510691,30.7029015 L87.0510691,26.1828602 L94.2830157,26.182395 L94.2831352,18.9507942 L98.8031765,18.9507942 Z" id="path-19"></path>
-        <filter x="-13.2%" y="-2.8%" width="122.0%" height="122.0%" filterUnits="objectBoundingBox" id="filter-20">
+        <path d="M98.8031765,18.9507942 L98.8030157,26.182395 L106.035243,26.1828602 L106.035243,30.7029015 L98.8030157,30.702395 L98.8031765,37.9349676 L94.2831352,37.9349676 L94.2830157,30.702395 L87.0510691,30.7029015 L87.0510691,26.1828602 L94.2830157,26.182395 L94.2831352,18.9507942 L98.8031765,18.9507942 Z" id="path-11"></path>
+        <filter x="-13.2%" y="-2.8%" width="122.0%" height="122.0%" filterUnits="objectBoundingBox" id="filter-12">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.876905321 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-21">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-22" points="87.0510691 87.0267445 106.035243 87.0267445 106.035243 91.5467858 87.0510691 91.5467858"></polygon>
-        <filter x="-13.2%" y="-26.6%" width="122.0%" height="180.9%" filterUnits="objectBoundingBox" id="filter-23">
+        <polygon id="path-14" points="87.0510691 87.0267445 106.035243 87.0267445 106.035243 91.5467858 87.0510691 91.5467858"></polygon>
+        <filter x="-13.2%" y="-26.6%" width="122.0%" height="180.9%" filterUnits="objectBoundingBox" id="filter-15">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.876905321 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-1481.000000, -816.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1481.000000, -816.000000)">
             <g id="Spinner数字微调" transform="translate(1481.000000, 816.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="14" y="60.22" width="96" height="17" rx="4"></rect>
+                <g id="编组"></g>
+                <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="14" y="60.22" width="96" height="17" rx="4"></rect>
                 <g id="编组-8" transform="translate(14.000000, 47.000000)">
-                    <path d="M5.02857143,1.04761905 C4.4,1.74456449 3.61428571,2.3857543 2.67142857,2.99906629 C1.72857143,3.55662265 0.838095238,3.9469121 0,4.16993464 L0,7.4037615 C1.72857143,6.87408297 3.14285714,6.06562625 4.26904762,4.97839136 L4.26904762,20.952381 L7.33333333,20.952381 L7.33333333,1.04761905 L5.02857143,1.04761905 Z" id="路径" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)"></path>
-                    <path d="M18.1334863,0 C15.8657487,0 14.0397782,0.74829932 12.6555747,2.24489796 C11.3008223,3.65515437 10.6234462,5.49712193 10.593995,7.79958137 L14.0397782,7.79958137 C14.0986804,6.18785976 14.4520941,4.95028781 15.1000191,4.144427 C15.7479442,3.28100471 16.7198317,2.84929356 18.0156818,2.84929356 C19.2231784,2.84929356 20.1361637,3.10832025 20.7546376,3.65515437 C21.3436604,4.20198849 21.6676229,5.03663004 21.6676229,6.15907902 C21.6676229,7.31030874 21.1964047,8.40397698 20.2834194,9.41130298 C19.6943966,10.0156986 18.7519602,10.7927786 17.3972079,11.7137624 C14.9527634,13.3542648 13.3329509,14.6206175 12.5672213,15.4840398 C11.1535666,17.0381999 10.4761905,18.8513867 10.4761905,20.952381 L25.1428571,20.952381 L25.1428571,17.9879644 L14.7760566,17.9879644 C15.2472748,16.9518577 16.5431249,15.7430665 18.6930579,14.3615908 C20.7546376,13.0088959 22.2271945,11.9152276 23.0518264,11.0518053 C24.4065787,9.58398744 25.113406,7.97226583 25.113406,6.18785976 C25.113406,4.3458922 24.465481,2.87807431 23.1696309,1.72684458 C21.8443297,0.575614861 20.1656148,0 18.1334863,0 Z" id="路径" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
-                    <path d="M35.8020291,1.04761905 C33.8314596,1.04761905 32.1987021,1.58413554 30.9319075,2.71364395 C29.5806599,3.84315236 28.8487341,5.42446413 28.6798282,7.45757926 L31.9171922,7.45757926 C32.0297962,6.24335772 32.4239101,5.33975099 33.0995339,4.74675908 C33.7470067,4.15376717 34.6478384,3.87139007 35.8301801,3.87139007 C36.9843707,3.87139007 37.8570515,4.12552946 38.4482223,4.63380824 C38.9830911,5.14208702 39.264601,5.87626749 39.264601,6.86458734 C39.264601,7.8529072 38.9549401,8.61532538 38.3637693,9.12360416 C37.7444475,9.63188294 36.8436158,9.88602233 35.6612741,9.88602233 L34.2537245,9.88602233 L34.2537245,12.3709408 L35.6612741,12.3709408 C36.9562197,12.3709408 37.9415044,12.6250802 38.6171282,13.1898344 C39.292752,13.7263509 39.6587149,14.5734822 39.6587149,15.7312283 C39.6587149,16.6913105 39.320903,17.4819664 38.6734302,18.1314337 C37.9415044,18.8373765 36.9280687,19.2044667 35.6612741,19.2044667 C34.5070834,19.2044667 33.5781007,18.8656142 32.8743259,18.2161468 C32.0860982,17.5102041 31.6919843,16.4936465 31.6356823,15.1947118 L28.2857143,15.1947118 C28.4546202,17.4537287 29.242848,19.2044667 30.6503976,20.3904505 C31.9171922,21.4634835 33.6062517,22 35.6894251,22 C37.8852024,22 39.6587149,21.3787704 41.0099625,20.1645488 C42.3049081,18.978565 42.952381,17.4537287 42.952381,15.5900398 C42.952381,14.404056 42.6145691,13.4157361 41.9389453,12.6533179 C41.3196234,11.9191375 40.3906407,11.382621 39.2082991,11.0155307 C41.4322274,10.2813503 42.5582671,8.81298935 42.5582671,6.61044795 C42.5582671,4.85970992 41.9389453,3.50429983 40.7284526,2.51597998 C39.489809,1.52766012 37.8289005,1.04761905 35.8020291,1.04761905 Z" id="路径" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
-                    <path d="M50.2723688,17.8095238 C49.6851683,17.8095238 49.1780406,17.9963603 48.8043676,18.4234152 C48.3773127,18.8237792 48.1904762,19.3309069 48.1904762,19.9181074 C48.1904762,20.5053079 48.3773127,20.9857446 48.8043676,21.4127995 C49.1780406,21.7864726 49.6851683,22 50.2723688,22 C50.8595693,22 51.3400061,21.7864726 51.767061,21.4127995 C52.1674249,20.9857446 52.3809524,20.5053079 52.3809524,19.9181074 C52.3809524,19.3309069 52.1674249,18.8237792 51.767061,18.4234152 C51.3400061,17.9963603 50.8595693,17.8095238 50.2723688,17.8095238 Z" id="路径" stroke="url(#linearGradient-15)" fill="url(#linearGradient-14)"></path>
-                    <path d="M63.5770039,0 C61.4656796,0 59.7162965,0.563342318 58.3590165,1.74932615 C56.9112513,2.93530997 56.1270451,4.59568733 55.9460744,6.73045822 L59.4146787,6.73045822 C59.5353258,5.45552561 59.9575907,4.50673854 60.6814734,3.88409704 C61.3751942,3.26145553 62.3403711,2.96495957 63.6071657,2.96495957 C64.8437986,2.96495957 65.7788136,3.23180593 66.4122109,3.76549865 C66.9852847,4.29919137 67.2869025,5.07008086 67.2869025,6.10781671 C67.2869025,7.14555256 66.9551229,7.94609164 66.3217256,8.47978437 C65.6581665,9.01347709 64.6929897,9.28032345 63.426195,9.28032345 L61.9181062,9.28032345 L61.9181062,11.8894879 L63.426195,11.8894879 C64.8136368,11.8894879 65.869299,12.1563342 66.5931816,12.7493261 C67.3170643,13.3126685 67.7091674,14.2021563 67.7091674,15.4177898 C67.7091674,16.425876 67.347226,17.2560647 66.6535052,17.9380054 C65.869299,18.6792453 64.783475,19.06469 63.426195,19.06469 C62.1895622,19.06469 61.1942236,18.7088949 60.4401791,18.0269542 C59.5956494,17.2857143 59.1733845,16.2183288 59.113061,14.8544474 L55.5238095,14.8544474 C55.7047802,17.2264151 56.5493099,19.06469 58.0573988,20.309973 C59.4146787,21.4366577 61.2243853,22 63.4563568,22 C65.8089754,22 67.7091674,21.3477089 69.1569326,20.0727763 C70.5443744,18.8274933 71.2380952,17.2264151 71.2380952,15.2695418 C71.2380952,14.0242588 70.8761539,12.9865229 70.1522713,12.1859838 C69.4887122,11.4150943 68.4933735,10.851752 67.2265789,10.4663073 C69.6093593,9.69541779 70.8158304,8.15363881 70.8158304,5.84097035 C70.8158304,4.00269542 70.1522713,2.57951482 68.8553149,1.54177898 C67.5281967,0.504043127 65.7486519,0 63.5770039,0 Z" id="路径" stroke="url(#linearGradient-17)" fill="url(#linearGradient-16)"></path>
-                    <path d="M81.7735125,0 C79.3838772,0 77.4836852,1.06738544 76.1017274,3.20215633 C74.6909789,5.33692722 74,8.12398922 74,11.5929919 C74,14.8247978 74.6333973,17.3450135 75.9577735,19.1832884 C77.2821497,21.0512129 79.2111324,22 81.7447217,22 C83.7888676,22 85.5163148,21.2884097 86.8982726,19.9245283 C88.2802303,18.5606469 89,16.8113208 89,14.6765499 C89,12.6010782 88.3953935,10.8814016 87.1861804,9.54716981 C85.9769674,8.21293801 84.3646833,7.5606469 82.3493282,7.5606469 C81.3128599,7.5606469 80.3915547,7.73854447 79.5854127,8.15363881 C78.7216891,8.56873315 78.0019194,9.19137466 77.4261036,10.0808625 L77.2821497,10.0808625 L77.2821497,9.81401617 C77.2821497,7.85714286 77.6564299,6.22641509 78.462572,4.92183288 C79.268714,3.52830189 80.3627639,2.84636119 81.7447217,2.84636119 C83.7024952,2.84636119 84.9117083,3.82479784 85.3147793,5.78167116 L88.596929,5.78167116 C88.0786948,1.92722372 85.8042226,0 81.7735125,0 Z M81.483871,10 C82.8709677,10 83.9677419,10.3966102 84.8064516,11.220339 C85.5806452,12.0135593 86,13.0813559 86,14.4237288 C86,15.7661017 85.5806452,16.8644068 84.7419355,17.7186441 C83.9032258,18.5728814 82.8387097,19 81.483871,19 C80.1612903,19 79.0967742,18.6033898 78.2580645,17.8101695 C77.4193548,17.0169492 77,15.9186441 77,14.5457627 C77,13.1423729 77.3870968,12.0135593 78.1935484,11.220339 C78.9677419,10.3966102 80.0645161,10 81.483871,10 Z" id="形状" stroke="url(#linearGradient-17)" fill="url(#linearGradient-16)"></path>
+                    <path d="M5.02857143,1.04761905 C4.4,1.74456449 3.61428571,2.3857543 2.67142857,2.99906629 C1.72857143,3.55662265 0.838095238,3.9469121 0,4.16993464 L0,7.4037615 C1.72857143,6.87408297 3.14285714,6.06562625 4.26904762,4.97839136 L4.26904762,20.952381 L7.33333333,20.952381 L7.33333333,1.04761905 L5.02857143,1.04761905 Z" id="路径" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)"></path>
+                    <path d="M18.1334863,0 C15.8657487,0 14.0397782,0.74829932 12.6555747,2.24489796 C11.3008223,3.65515437 10.6234462,5.49712193 10.593995,7.79958137 L14.0397782,7.79958137 C14.0986804,6.18785976 14.4520941,4.95028781 15.1000191,4.144427 C15.7479442,3.28100471 16.7198317,2.84929356 18.0156818,2.84929356 C19.2231784,2.84929356 20.1361637,3.10832025 20.7546376,3.65515437 C21.3436604,4.20198849 21.6676229,5.03663004 21.6676229,6.15907902 C21.6676229,7.31030874 21.1964047,8.40397698 20.2834194,9.41130298 C19.6943966,10.0156986 18.7519602,10.7927786 17.3972079,11.7137624 C14.9527634,13.3542648 13.3329509,14.6206175 12.5672213,15.4840398 C11.1535666,17.0381999 10.4761905,18.8513867 10.4761905,20.952381 L25.1428571,20.952381 L25.1428571,17.9879644 L14.7760566,17.9879644 C15.2472748,16.9518577 16.5431249,15.7430665 18.6930579,14.3615908 C20.7546376,13.0088959 22.2271945,11.9152276 23.0518264,11.0518053 C24.4065787,9.58398744 25.113406,7.97226583 25.113406,6.18785976 C25.113406,4.3458922 24.465481,2.87807431 23.1696309,1.72684458 C21.8443297,0.575614861 20.1656148,0 18.1334863,0 Z" id="路径" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)"></path>
+                    <path d="M35.8020291,1.04761905 C33.8314596,1.04761905 32.1987021,1.58413554 30.9319075,2.71364395 C29.5806599,3.84315236 28.8487341,5.42446413 28.6798282,7.45757926 L31.9171922,7.45757926 C32.0297962,6.24335772 32.4239101,5.33975099 33.0995339,4.74675908 C33.7470067,4.15376717 34.6478384,3.87139007 35.8301801,3.87139007 C36.9843707,3.87139007 37.8570515,4.12552946 38.4482223,4.63380824 C38.9830911,5.14208702 39.264601,5.87626749 39.264601,6.86458734 C39.264601,7.8529072 38.9549401,8.61532538 38.3637693,9.12360416 C37.7444475,9.63188294 36.8436158,9.88602233 35.6612741,9.88602233 L34.2537245,9.88602233 L34.2537245,12.3709408 L35.6612741,12.3709408 C36.9562197,12.3709408 37.9415044,12.6250802 38.6171282,13.1898344 C39.292752,13.7263509 39.6587149,14.5734822 39.6587149,15.7312283 C39.6587149,16.6913105 39.320903,17.4819664 38.6734302,18.1314337 C37.9415044,18.8373765 36.9280687,19.2044667 35.6612741,19.2044667 C34.5070834,19.2044667 33.5781007,18.8656142 32.8743259,18.2161468 C32.0860982,17.5102041 31.6919843,16.4936465 31.6356823,15.1947118 L28.2857143,15.1947118 C28.4546202,17.4537287 29.242848,19.2044667 30.6503976,20.3904505 C31.9171922,21.4634835 33.6062517,22 35.6894251,22 C37.8852024,22 39.6587149,21.3787704 41.0099625,20.1645488 C42.3049081,18.978565 42.952381,17.4537287 42.952381,15.5900398 C42.952381,14.404056 42.6145691,13.4157361 41.9389453,12.6533179 C41.3196234,11.9191375 40.3906407,11.382621 39.2082991,11.0155307 C41.4322274,10.2813503 42.5582671,8.81298935 42.5582671,6.61044795 C42.5582671,4.85970992 41.9389453,3.50429983 40.7284526,2.51597998 C39.489809,1.52766012 37.8289005,1.04761905 35.8020291,1.04761905 Z" id="路径" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)"></path>
+                    <path d="M50.2723688,17.8095238 C49.6851683,17.8095238 49.1780406,17.9963603 48.8043676,18.4234152 C48.3773127,18.8237792 48.1904762,19.3309069 48.1904762,19.9181074 C48.1904762,20.5053079 48.3773127,20.9857446 48.8043676,21.4127995 C49.1780406,21.7864726 49.6851683,22 50.2723688,22 C50.8595693,22 51.3400061,21.7864726 51.767061,21.4127995 C52.1674249,20.9857446 52.3809524,20.5053079 52.3809524,19.9181074 C52.3809524,19.3309069 52.1674249,18.8237792 51.767061,18.4234152 C51.3400061,17.9963603 50.8595693,17.8095238 50.2723688,17.8095238 Z" id="路径" stroke="url(#linearGradient-7)" fill="url(#linearGradient-6)"></path>
+                    <path d="M63.5770039,0 C61.4656796,0 59.7162965,0.563342318 58.3590165,1.74932615 C56.9112513,2.93530997 56.1270451,4.59568733 55.9460744,6.73045822 L59.4146787,6.73045822 C59.5353258,5.45552561 59.9575907,4.50673854 60.6814734,3.88409704 C61.3751942,3.26145553 62.3403711,2.96495957 63.6071657,2.96495957 C64.8437986,2.96495957 65.7788136,3.23180593 66.4122109,3.76549865 C66.9852847,4.29919137 67.2869025,5.07008086 67.2869025,6.10781671 C67.2869025,7.14555256 66.9551229,7.94609164 66.3217256,8.47978437 C65.6581665,9.01347709 64.6929897,9.28032345 63.426195,9.28032345 L61.9181062,9.28032345 L61.9181062,11.8894879 L63.426195,11.8894879 C64.8136368,11.8894879 65.869299,12.1563342 66.5931816,12.7493261 C67.3170643,13.3126685 67.7091674,14.2021563 67.7091674,15.4177898 C67.7091674,16.425876 67.347226,17.2560647 66.6535052,17.9380054 C65.869299,18.6792453 64.783475,19.06469 63.426195,19.06469 C62.1895622,19.06469 61.1942236,18.7088949 60.4401791,18.0269542 C59.5956494,17.2857143 59.1733845,16.2183288 59.113061,14.8544474 L55.5238095,14.8544474 C55.7047802,17.2264151 56.5493099,19.06469 58.0573988,20.309973 C59.4146787,21.4366577 61.2243853,22 63.4563568,22 C65.8089754,22 67.7091674,21.3477089 69.1569326,20.0727763 C70.5443744,18.8274933 71.2380952,17.2264151 71.2380952,15.2695418 C71.2380952,14.0242588 70.8761539,12.9865229 70.1522713,12.1859838 C69.4887122,11.4150943 68.4933735,10.851752 67.2265789,10.4663073 C69.6093593,9.69541779 70.8158304,8.15363881 70.8158304,5.84097035 C70.8158304,4.00269542 70.1522713,2.57951482 68.8553149,1.54177898 C67.5281967,0.504043127 65.7486519,0 63.5770039,0 Z" id="路径" stroke="url(#linearGradient-9)" fill="url(#linearGradient-8)"></path>
+                    <path d="M81.7735125,0 C79.3838772,0 77.4836852,1.06738544 76.1017274,3.20215633 C74.6909789,5.33692722 74,8.12398922 74,11.5929919 C74,14.8247978 74.6333973,17.3450135 75.9577735,19.1832884 C77.2821497,21.0512129 79.2111324,22 81.7447217,22 C83.7888676,22 85.5163148,21.2884097 86.8982726,19.9245283 C88.2802303,18.5606469 89,16.8113208 89,14.6765499 C89,12.6010782 88.3953935,10.8814016 87.1861804,9.54716981 C85.9769674,8.21293801 84.3646833,7.5606469 82.3493282,7.5606469 C81.3128599,7.5606469 80.3915547,7.73854447 79.5854127,8.15363881 C78.7216891,8.56873315 78.0019194,9.19137466 77.4261036,10.0808625 L77.2821497,10.0808625 L77.2821497,9.81401617 C77.2821497,7.85714286 77.6564299,6.22641509 78.462572,4.92183288 C79.268714,3.52830189 80.3627639,2.84636119 81.7447217,2.84636119 C83.7024952,2.84636119 84.9117083,3.82479784 85.3147793,5.78167116 L88.596929,5.78167116 C88.0786948,1.92722372 85.8042226,0 81.7735125,0 Z M81.483871,10 C82.8709677,10 83.9677419,10.3966102 84.8064516,11.220339 C85.5806452,12.0135593 86,13.0813559 86,14.4237288 C86,15.7661017 85.5806452,16.8644068 84.7419355,17.7186441 C83.9032258,18.5728814 82.8387097,19 81.483871,19 C80.1612903,19 79.0967742,18.6033898 78.2580645,17.8101695 C77.4193548,17.0169492 77,15.9186441 77,14.5457627 C77,13.1423729 77.3870968,12.0135593 78.1935484,11.220339 C78.9677419,10.3966102 80.0645161,10 81.483871,10 Z" id="形状" stroke="url(#linearGradient-9)" fill="url(#linearGradient-8)"></path>
                 </g>
                 <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                    <use fill="url(#linearGradient-18)" fill-rule="evenodd" xlink:href="#path-19"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                    <use fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-11"></use>
                 </g>
                 <g id="形状结合备份">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
-                    <use fill="url(#linearGradient-21)" fill-rule="evenodd" xlink:href="#path-22"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                    <use fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-14"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/pager.svg b/examples/sites/demos/pc/overviewimage/pager.svg
index e2760d22e6..3ef7bc16a0 100644
--- a/examples/sites/demos/pc/overviewimage/pager.svg
+++ b/examples/sites/demos/pc/overviewimage/pager.svg
@@ -2,43 +2,11 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Pagination 分页</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="67.4120216%" x2="128.792906%" y2="5.65316373%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="67.4120216%" x2="128.792906%" y2="5.65316373%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <filter x="-28.6%" y="-200.0%" width="157.1%" height="500.0%" filterUnits="objectBoundingBox" id="filter-10">
+        <filter x="-28.6%" y="-200.0%" width="157.1%" height="500.0%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
@@ -47,83 +15,73 @@
                 <feMergeNode in="SourceGraphic"></feMergeNode>
             </feMerge>
         </filter>
-        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="66.3727366%" x2="128.792906%" y2="8.30012825%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5073E5" offset="100%"></stop>
         </linearGradient>
-        <path d="M0,20.6753927 C0,21.4096859 0.546998181,22 1.22741055,22 L20.7725894,22 C21.4530018,22 22,21.4096859 22,20.6753927 L22,1.32460733 C22,0.590314136 21.4530018,0 20.7725894,0 L1.22741055,0 C0.546998181,0 0,0.590314136 0,1.32460733 L0,20.6753927 Z" id="path-13"></path>
-        <filter x="-18.2%" y="-9.1%" width="136.4%" height="136.4%" filterUnits="objectBoundingBox" id="filter-14">
+        <path d="M0,20.6753927 C0,21.4096859 0.546998181,22 1.22741055,22 L20.7725894,22 C21.4530018,22 22,21.4096859 22,20.6753927 L22,1.32460733 C22,0.590314136 21.4530018,0 20.7725894,0 L1.22741055,0 C0.546998181,0 0,0.590314136 0,1.32460733 L0,20.6753927 Z" id="path-5"></path>
+        <filter x="-18.2%" y="-9.1%" width="136.4%" height="136.4%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-15">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-7">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-16" points="6 11 14 19 14 3"></polygon>
-        <filter x="-43.8%" y="-15.6%" width="187.5%" height="143.8%" filterUnits="objectBoundingBox" id="filter-17">
+        <polygon id="path-8" points="6 11 14 19 14 3"></polygon>
+        <filter x="-43.8%" y="-15.6%" width="187.5%" height="143.8%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M0,20.6753927 C0,21.4096859 0.546998181,22 1.22741055,22 L20.7725894,22 C21.4530018,22 22,21.4096859 22,20.6753927 L22,1.32460733 C22,0.590314136 21.4530018,0 20.7725894,0 L1.22741055,0 C0.546998181,0 0,0.590314136 0,1.32460733 L0,20.6753927 Z" id="path-18"></path>
-        <filter x="-18.2%" y="-9.1%" width="136.4%" height="136.4%" filterUnits="objectBoundingBox" id="filter-19">
+        <path d="M0,20.6753927 C0,21.4096859 0.546998181,22 1.22741055,22 L20.7725894,22 C21.4530018,22 22,21.4096859 22,20.6753927 L22,1.32460733 C22,0.590314136 21.4530018,0 20.7725894,0 L1.22741055,0 C0.546998181,0 0,0.590314136 0,1.32460733 L0,20.6753927 Z" id="path-10"></path>
+        <filter x="-18.2%" y="-9.1%" width="136.4%" height="136.4%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <polygon id="path-20" points="6 11 14 19 14 3"></polygon>
-        <filter x="-43.8%" y="-15.6%" width="187.5%" height="143.8%" filterUnits="objectBoundingBox" id="filter-21">
+        <polygon id="path-12" points="6 11 14 19 14 3"></polygon>
+        <filter x="-43.8%" y="-15.6%" width="187.5%" height="143.8%" filterUnits="objectBoundingBox" id="filter-13">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1873.000000, -869.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1873.000000, -869.000000)">
             <g id="Pagination-分页" transform="translate(1873.000000, 869.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-29" transform="translate(24.000000, 41.000000)">
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="7" y="0" width="64" height="44" rx="2"></rect>
+                    <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="7" y="0" width="64" height="44" rx="2"></rect>
                     <g id="编组-26" transform="translate(0.000000, 11.000000)">
-                        <g id="编组-28" filter="url(#filter-10)" transform="translate(25.000000, 10.000000)" fill="url(#linearGradient-12)" opacity="0.604724702">
+                        <g id="编组-28" filter="url(#filter-2)" transform="translate(25.000000, 10.000000)" fill="url(#linearGradient-4)" opacity="0.604724702">
                             <rect id="矩形备份-23" x="0" y="0" width="6" height="4" rx="2"></rect>
                             <rect id="矩形备份-28" x="11" y="0" width="6" height="4" rx="2"></rect>
                             <rect id="矩形备份-29" x="22" y="0" width="6" height="4" rx="2"></rect>
                         </g>
                         <g id="编组-27">
                             <g id="形状">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-13"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-5"></use>
                             </g>
                             <g id="路径">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                                <use fill="url(#linearGradient-15)" fill-rule="evenodd" xlink:href="#path-16"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                                <use fill="url(#linearGradient-7)" fill-rule="evenodd" xlink:href="#path-8"></use>
                             </g>
                         </g>
                         <g id="编组-27备份" transform="translate(67.000000, 11.000000) scale(-1, 1) translate(-67.000000, -11.000000) translate(56.000000, 0.000000)">
                             <g id="形状">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
                             </g>
                             <g id="路径">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-20"></use>
-                                <use fill="url(#linearGradient-15)" fill-rule="evenodd" xlink:href="#path-20"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                                <use fill="url(#linearGradient-7)" fill-rule="evenodd" xlink:href="#path-12"></use>
                             </g>
                         </g>
                     </g>
diff --git a/examples/sites/demos/pc/overviewimage/pop-upload.svg b/examples/sites/demos/pc/overviewimage/pop-upload.svg
index ac4bcd7334..4cd5a10894 100644
--- a/examples/sites/demos/pc/overviewimage/pop-upload.svg
+++ b/examples/sites/demos/pc/overviewimage/pop-upload.svg
@@ -2,73 +2,31 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Popconfirm 气泡确认框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="61.2505872%" x2="128.792906%" y2="21.3457772%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="61.2505872%" x2="128.792906%" y2="21.3457772%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.9099647%" x2="128.792906%" y2="37.4947664%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="54.9099647%" x2="128.792906%" y2="37.4947664%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="80.0263334%" x2="128.792906%" y2="-26.4743417%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="80.0263334%" x2="128.792906%" y2="-26.4743417%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -1709.000000)">
-            <g id="编组-14备份-5" transform="translate(989.000000, 1676.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -1760.000000)">
+            <g id="编组-14备份-5" transform="translate(989.000000, 1727.000000)">
                 <g id="Popconfirm-气泡确认框" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-13" transform="translate(25.000000, 30.296208)">
                         <g id="编组-22" transform="translate(0.000000, 18.703792)" opacity="0.204287574">
-                            <path d="M4,0 L16.3633348,0 L16.3633348,0 L72,0 C74.209139,-4.05812251e-16 76,1.790861 76,4 L76,38 C76,40.209139 74.209139,42 72,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-9)"></path>
-                            <path d="M23.625,30 L66,30 C67.6568542,30 69,31.3431458 69,33 C69,34.6568542 67.6568542,36 66,36 L23.625,36 C21.9681458,36 20.625,34.6568542 20.625,33 C20.625,31.3431458 21.9681458,30 23.625,30 Z M9,13 L48,13 C49.6568542,13 51,14.3431458 51,16 C51,17.6568542 49.6568542,19 48,19 L9,19 C7.34314575,19 6,17.6568542 6,16 C6,14.3431458 7.34314575,13 9,13 Z" id="形状结合备份-41" fill="url(#linearGradient-10)"></path>
+                            <path d="M4,0 L16.3633348,0 L16.3633348,0 L72,0 C74.209139,-4.05812251e-16 76,1.790861 76,4 L76,38 C76,40.209139 74.209139,42 72,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                            <path d="M23.625,30 L66,30 C67.6568542,30 69,31.3431458 69,33 C69,34.6568542 67.6568542,36 66,36 L23.625,36 C21.9681458,36 20.625,34.6568542 20.625,33 C20.625,31.3431458 21.9681458,30 23.625,30 Z M9,13 L48,13 C49.6568542,13 51,14.3431458 51,16 C51,17.6568542 49.6568542,19 48,19 L9,19 C7.34314575,19 6,17.6568542 6,16 C6,14.3431458 7.34314575,13 9,13 Z" id="形状结合备份-41" fill="url(#linearGradient-2)"></path>
                         </g>
                         <g id="编组-21" transform="translate(19.000000, 0.000000)">
-                            <path d="M48,0 C50.209139,-4.05812251e-16 52,1.790861 52,4 L52,39.7037922 C52,41.9129312 50.209139,43.7037922 48,43.7037922 L29.2,43.703 L25.6875,46.9464328 L22.174,43.703 L4,43.7037922 C1.790861,43.7037922 2.705415e-16,41.9129312 0,39.7037922 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L48,0 Z" id="形状结合" fill="url(#linearGradient-11)"></path>
+                            <path d="M48,0 C50.209139,-4.05812251e-16 52,1.790861 52,4 L52,39.7037922 C52,41.9129312 50.209139,43.7037922 48,43.7037922 L29.2,43.703 L25.6875,46.9464328 L22.174,43.703 L4,43.7037922 C1.790861,43.7037922 2.705415e-16,41.9129312 0,39.7037922 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L48,0 Z" id="形状结合" fill="url(#linearGradient-3)"></path>
                             <g id="上传" transform="translate(12.000000, 7.703792)" fill="#FFFFFF" fill-rule="nonzero">
                                 <path d="M26.8333333,25.6668958 L1.16666667,25.6668958 C0.522334459,25.6668958 0,26.189179 0,26.8334479 C0,27.4777168 0.522334459,28 1.16666667,28 L26.8333333,28 C27.4776655,28 28,27.4777168 28,26.8334479 C28,26.189179 27.4776655,25.6668958 26.8333333,25.6668958 Z M3.45333333,12.7648296 L9.33333333,12.7648296 L9.33333333,21.4673082 C9.33321555,22.1541083 9.88325031,22.714466 10.57,22.7271845 L17.57,22.7271845 C18.2014355,22.6446664 18.6720368,22.1040286 18.6666667,21.4673082 L18.6666667,12.7648296 L24.5233333,12.7648296 C24.9781824,12.7801062 25.3952017,12.5128947 25.5713453,12.0932997 C25.7474889,11.6737047 25.6461485,11.1889315 25.3166667,10.8750152 L14.7933333,0.329384182 C14.5831819,0.118522496 14.2977163,5.5259008e-16 14,5.5259008e-16 C13.7022837,5.5259008e-16 13.4168181,0.118522496 13.2066667,0.329384182 L2.66,10.8750152 C2.33051813,11.1889315 2.22917781,11.6737047 2.40532141,12.0932997 C2.58146501,12.5128947 2.99848423,12.7801062 3.45333333,12.7648296 Z" id="形状"></path>
                             </g>
diff --git a/examples/sites/demos/pc/overviewimage/popconfirm.svg b/examples/sites/demos/pc/overviewimage/popconfirm.svg
index 97f608b2da..9b28af223a 100644
--- a/examples/sites/demos/pc/overviewimage/popconfirm.svg
+++ b/examples/sites/demos/pc/overviewimage/popconfirm.svg
@@ -2,113 +2,37 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Popconfirm 气泡确认框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="64.0535016%" x2="128.792906%" y2="14.2070089%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="61.2505872%" x2="128.792906%" y2="21.3457772%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="55.413236%" x2="128.792906%" y2="36.2129799%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="54.9099647%" x2="128.792906%" y2="37.4947664%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <circle id="path-12" cx="8" cy="8" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-14">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <polygon id="path-15" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-16">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="62.9020556%" x2="128.792906%" y2="17.1396372%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="80.0263334%" x2="128.792906%" y2="-26.4743417%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -1709.000000)">
-            <g id="编组-14备份-2" transform="translate(598.000000, 1676.000000)">
-                <g id="Popconfirm-气泡确认框" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-13" transform="translate(25.000000, 34.000000)">
-                        <g id="编组-22" transform="translate(0.000000, 14.000000)" opacity="0.204287574">
-                            <path d="M4,0 L14.6408785,0 L14.6408785,0 L64,0 C66.209139,-4.05812251e-16 68,1.790861 68,4 L68,38 C68,40.209139 66.209139,42 64,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-7.1463071e-16,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-9)"></path>
-                            <path d="M25.6875,30 L62.6875,30 C64.3443542,30 65.6875,31.3431458 65.6875,33 C65.6875,34.6568542 64.3443542,36 62.6875,36 L25.6875,36 C24.0306458,36 22.6875,34.6568542 22.6875,33 C22.6875,31.3431458 24.0306458,30 25.6875,30 Z M8.6875,13 L42.6875,13 C44.3443542,13 45.6875,14.3431458 45.6875,16 C45.6875,17.6568542 44.3443542,19 42.6875,19 L8.6875,19 C7.03064575,19 5.6875,17.6568542 5.6875,16 C5.6875,14.3431458 7.03064575,13 8.6875,13 Z" id="形状结合备份-41" fill="url(#linearGradient-10)"></path>
-                        </g>
-                        <g id="编组-23" transform="translate(45.687500, 40.000000)">
-                            <g id="椭圆形">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                                <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-12"></use>
-                                <circle stroke="url(#linearGradient-11)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -1760.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-5" transform="translate(393.000000, 1416.000000)">
+                    <g id="Popconfirm-气泡确认框" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-13" transform="translate(25.000000, 30.296208)">
+                            <g id="编组-22" transform="translate(0.000000, 18.703792)" opacity="0.204287574">
+                                <path d="M4,0 L16.3633348,0 L16.3633348,0 L72,0 C74.209139,-4.05812251e-16 76,1.790861 76,4 L76,38 C76,40.209139 74.209139,42 72,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                                <path d="M23.625,30 L66,30 C67.6568542,30 69,31.3431458 69,33 C69,34.6568542 67.6568542,36 66,36 L23.625,36 C21.9681458,36 20.625,34.6568542 20.625,33 C20.625,31.3431458 21.9681458,30 23.625,30 Z M9,13 L48,13 C49.6568542,13 51,14.3431458 51,16 C51,17.6568542 49.6568542,19 48,19 L9,19 C7.34314575,19 6,17.6568542 6,16 C6,14.3431458 7.34314575,13 9,13 Z" id="形状结合备份-41" fill="url(#linearGradient-2)"></path>
                             </g>
-                            <g id="路径-2">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                                <use fill="#000000" fill-rule="evenodd" xlink:href="#path-15"></use>
+                            <g id="编组-21" transform="translate(19.000000, 0.000000)">
+                                <path d="M48,0 C50.209139,-4.05812251e-16 52,1.790861 52,4 L52,39.7037922 C52,41.9129312 50.209139,43.7037922 48,43.7037922 L29.2,43.703 L25.6875,46.9464328 L22.174,43.703 L4,43.7037922 C1.790861,43.7037922 2.705415e-16,41.9129312 0,39.7037922 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L48,0 Z" id="形状结合" fill="url(#linearGradient-3)"></path>
+                                <g id="上传" transform="translate(12.000000, 7.703792)" fill="#FFFFFF" fill-rule="nonzero">
+                                    <path d="M26.8333333,25.6668958 L1.16666667,25.6668958 C0.522334459,25.6668958 0,26.189179 0,26.8334479 C0,27.4777168 0.522334459,28 1.16666667,28 L26.8333333,28 C27.4776655,28 28,27.4777168 28,26.8334479 C28,26.189179 27.4776655,25.6668958 26.8333333,25.6668958 Z M3.45333333,12.7648296 L9.33333333,12.7648296 L9.33333333,21.4673082 C9.33321555,22.1541083 9.88325031,22.714466 10.57,22.7271845 L17.57,22.7271845 C18.2014355,22.6446664 18.6720368,22.1040286 18.6666667,21.4673082 L18.6666667,12.7648296 L24.5233333,12.7648296 C24.9781824,12.7801062 25.3952017,12.5128947 25.5713453,12.0932997 C25.7474889,11.6737047 25.6461485,11.1889315 25.3166667,10.8750152 L14.7933333,0.329384182 C14.5831819,0.118522496 14.2977163,5.5259008e-16 14,5.5259008e-16 C13.7022837,5.5259008e-16 13.4168181,0.118522496 13.2066667,0.329384182 L2.66,10.8750152 C2.33051813,11.1889315 2.22917781,11.6737047 2.40532141,12.0932997 C2.58146501,12.5128947 2.99848423,12.7801062 3.45333333,12.7648296 Z" id="形状"></path>
+                                </g>
                             </g>
                         </g>
-                        <g id="编组-21" transform="translate(7.687500, 0.000000)">
-                            <path d="M64,0 C66.209139,-4.05812251e-16 68,1.790861 68,4 L68,33 C68,35.209139 66.209139,37 64,37 L37.242,37 L34,40.2426407 L30.757,37 L4,37 C1.790861,37 2.705415e-16,35.209139 0,33 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L64,0 Z" id="形状结合" fill="url(#linearGradient-17)"></path>
-                            <path d="M12,6 L42,6 C43.1045695,6 44,6.8954305 44,8 C44,9.1045695 43.1045695,10 42,10 L12,10 C10.8954305,10 10,9.1045695 10,8 C10,6.8954305 10.8954305,6 12,6 Z" id="形状结合备份-44" fill="#FFFFFF" fill-rule="nonzero"></path>
-                            <path d="M26,19 L56,19 C57.1045695,19 58,19.8954305 58,21 L58,25 C58,26.1045695 57.1045695,27 56,27 L26,27 C24.8954305,27 24,26.1045695 24,25 L24,21 C24,19.8954305 24.8954305,19 26,19 Z" id="形状结合备份-6" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
-                            <path d="M11.4545455,19 L16.5454545,19 C17.3487778,19 18,19.6512222 18,20.4545455 L18,25.5454545 C18,26.3487778 17.3487778,27 16.5454545,27 L11.4545455,27 C10.6512222,27 10,26.3487778 10,25.5454545 L10,20.4545455 C10,19.6512222 10.6512222,19 11.4545455,19 Z" id="形状结合备份-28" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
-                        </g>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/popeditor.svg b/examples/sites/demos/pc/overviewimage/popeditor.svg
index 76a3d6ec26..e254ffcba1 100644
--- a/examples/sites/demos/pc/overviewimage/popeditor.svg
+++ b/examples/sites/demos/pc/overviewimage/popeditor.svg
@@ -2,52 +2,20 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>PopEditor 弹出编辑</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="64.0535016%" x2="128.792906%" y2="14.2070089%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="64.0535016%" x2="128.792906%" y2="14.2070089%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="55.413236%" x2="128.792906%" y2="36.2129799%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="55.413236%" x2="128.792906%" y2="36.2129799%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-12" cx="8" cy="8" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-13">
+        <circle id="path-4" cx="8" cy="8" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -55,59 +23,51 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-14">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-6">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-15" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-16">
+        <polygon id="path-7" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="62.9020556%" x2="128.792906%" y2="17.1396372%" id="linearGradient-17">
+        <linearGradient x1="44.0988019%" y1="62.9020556%" x2="128.792906%" y2="17.1396372%" id="linearGradient-9">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -1709.000000)">
-            <g id="编组-14备份-2" transform="translate(598.000000, 1676.000000)">
-                <g id="PopEditor-弹出编辑" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-13" transform="translate(25.000000, 34.000000)">
-                        <g id="编组-22" transform="translate(0.000000, 14.000000)" opacity="0.204287574">
-                            <path d="M4,0 L14.6408785,0 L14.6408785,0 L64,0 C66.209139,-4.05812251e-16 68,1.790861 68,4 L68,38 C68,40.209139 66.209139,42 64,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-7.1463071e-16,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-9)"></path>
-                            <path d="M25.6875,30 L62.6875,30 C64.3443542,30 65.6875,31.3431458 65.6875,33 C65.6875,34.6568542 64.3443542,36 62.6875,36 L25.6875,36 C24.0306458,36 22.6875,34.6568542 22.6875,33 C22.6875,31.3431458 24.0306458,30 25.6875,30 Z M8.6875,13 L42.6875,13 C44.3443542,13 45.6875,14.3431458 45.6875,16 C45.6875,17.6568542 44.3443542,19 42.6875,19 L8.6875,19 C7.03064575,19 5.6875,17.6568542 5.6875,16 C5.6875,14.3431458 7.03064575,13 8.6875,13 Z" id="形状结合备份-41" fill="url(#linearGradient-10)"></path>
-                        </g>
-                        <g id="编组-23" transform="translate(45.687500, 40.000000)">
-                            <g id="椭圆形">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                                <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-12"></use>
-                                <circle stroke="url(#linearGradient-11)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -1760.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-2" transform="translate(2.000000, 1416.000000)">
+                    <g id="PopEditor-弹出编辑" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-13" transform="translate(25.000000, 34.000000)">
+                            <g id="编组-22" transform="translate(0.000000, 14.000000)" opacity="0.204287574">
+                                <path d="M4,0 L14.6408785,0 L14.6408785,0 L64,0 C66.209139,-4.05812251e-16 68,1.790861 68,4 L68,38 C68,40.209139 66.209139,42 64,42 L4,42 C1.790861,42 2.705415e-16,40.209139 0,38 L0,4 C-7.1463071e-16,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                                <path d="M25.6875,30 L62.6875,30 C64.3443542,30 65.6875,31.3431458 65.6875,33 C65.6875,34.6568542 64.3443542,36 62.6875,36 L25.6875,36 C24.0306458,36 22.6875,34.6568542 22.6875,33 C22.6875,31.3431458 24.0306458,30 25.6875,30 Z M8.6875,13 L42.6875,13 C44.3443542,13 45.6875,14.3431458 45.6875,16 C45.6875,17.6568542 44.3443542,19 42.6875,19 L8.6875,19 C7.03064575,19 5.6875,17.6568542 5.6875,16 C5.6875,14.3431458 7.03064575,13 8.6875,13 Z" id="形状结合备份-41" fill="url(#linearGradient-2)"></path>
                             </g>
-                            <g id="路径-2">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                                <use fill="#000000" fill-rule="evenodd" xlink:href="#path-15"></use>
+                            <g id="编组-23" transform="translate(45.687500, 40.000000)">
+                                <g id="椭圆形">
+                                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-4"></use>
+                                    <circle stroke="url(#linearGradient-3)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+                                </g>
+                                <g id="路径-2">
+                                    <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-7"></use>
+                                </g>
+                            </g>
+                            <g id="编组-21" transform="translate(7.687500, 0.000000)">
+                                <path d="M64,0 C66.209139,-4.05812251e-16 68,1.790861 68,4 L68,33 C68,35.209139 66.209139,37 64,37 L37.242,37 L34,40.2426407 L30.757,37 L4,37 C1.790861,37 2.705415e-16,35.209139 0,33 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L64,0 Z" id="形状结合" fill="url(#linearGradient-9)"></path>
+                                <path d="M12,6 L42,6 C43.1045695,6 44,6.8954305 44,8 C44,9.1045695 43.1045695,10 42,10 L12,10 C10.8954305,10 10,9.1045695 10,8 C10,6.8954305 10.8954305,6 12,6 Z" id="形状结合备份-44" fill="#FFFFFF" fill-rule="nonzero"></path>
+                                <path d="M26,19 L56,19 C57.1045695,19 58,19.8954305 58,21 L58,25 C58,26.1045695 57.1045695,27 56,27 L26,27 C24.8954305,27 24,26.1045695 24,25 L24,21 C24,19.8954305 24.8954305,19 26,19 Z" id="形状结合备份-6" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
+                                <path d="M11.4545455,19 L16.5454545,19 C17.3487778,19 18,19.6512222 18,20.4545455 L18,25.5454545 C18,26.3487778 17.3487778,27 16.5454545,27 L11.4545455,27 C10.6512222,27 10,26.3487778 10,25.5454545 L10,20.4545455 C10,19.6512222 10.6512222,19 11.4545455,19 Z" id="形状结合备份-28" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                             </g>
-                        </g>
-                        <g id="编组-21" transform="translate(7.687500, 0.000000)">
-                            <path d="M64,0 C66.209139,-4.05812251e-16 68,1.790861 68,4 L68,33 C68,35.209139 66.209139,37 64,37 L37.242,37 L34,40.2426407 L30.757,37 L4,37 C1.790861,37 2.705415e-16,35.209139 0,33 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L64,0 Z" id="形状结合" fill="url(#linearGradient-17)"></path>
-                            <path d="M12,6 L42,6 C43.1045695,6 44,6.8954305 44,8 C44,9.1045695 43.1045695,10 42,10 L12,10 C10.8954305,10 10,9.1045695 10,8 C10,6.8954305 10.8954305,6 12,6 Z" id="形状结合备份-44" fill="#FFFFFF" fill-rule="nonzero"></path>
-                            <path d="M26,19 L56,19 C57.1045695,19 58,19.8954305 58,21 L58,25 C58,26.1045695 57.1045695,27 56,27 L26,27 C24.8954305,27 24,26.1045695 24,25 L24,21 C24,19.8954305 24.8954305,19 26,19 Z" id="形状结合备份-6" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
-                            <path d="M11.4545455,19 L16.5454545,19 C17.3487778,19 18,19.6512222 18,20.4545455 L18,25.5454545 C18,26.3487778 17.3487778,27 16.5454545,27 L11.4545455,27 C10.6512222,27 10,26.3487778 10,25.5454545 L10,20.4545455 C10,19.6512222 10.6512222,19 11.4545455,19 Z" id="形状结合备份-28" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/popover.svg b/examples/sites/demos/pc/overviewimage/popover.svg
index 23988a01cf..79008d5044 100644
--- a/examples/sites/demos/pc/overviewimage/popover.svg
+++ b/examples/sites/demos/pc/overviewimage/popover.svg
@@ -2,48 +2,16 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Popover 弹出框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.8250237%" x2="128.792906%" y2="42.8049215%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.8250237%" x2="128.792906%" y2="42.8049215%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-11" cx="8" cy="8" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-12">
+        <circle id="path-3" cx="8" cy="8" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -51,53 +19,45 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-13">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-5">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-14" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-15">
+        <polygon id="path-6" points="7.71298757 6.80228137 6.27540338 20.814413 10.9449685 18.9202277 13.4194729 25.8022814 15.8096817 24.7804537 13.2116343 17.9762941 17.8108161 16.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="56.5328973%" x2="128.792906%" y2="33.3613045%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="56.5328973%" x2="128.792906%" y2="33.3613045%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -1980.000000)">
-            <g id="编组-14备份-10" transform="translate(596.000000, 1950.000000)">
-                <g id="Tip-气泡提示" transform="translate(100.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="27" y="72" width="65" height="18" rx="4"></rect>
-                    <g id="编组-23" transform="translate(77.000000, 75.000000)">
-                        <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
-                            <circle stroke="url(#linearGradient-10)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
-                        </g>
-                        <g id="路径-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#000000" fill-rule="evenodd" xlink:href="#path-14"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -2031.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-10" transform="translate(0.000000, 1690.000000)">
+                    <g id="Tip-气泡提示" transform="translate(100.000000, 30.000000)">
+                        <g id="编组"></g>
+                        <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="27" y="72" width="65" height="18" rx="4"></rect>
+                        <g id="编组-23" transform="translate(77.000000, 75.000000)">
+                            <g id="椭圆形">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                                <circle stroke="url(#linearGradient-2)" stroke-width="4" stroke-linejoin="square" cx="8" cy="8" r="6"></circle>
+                            </g>
+                            <g id="路径-2">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                                <use fill="#000000" fill-rule="evenodd" xlink:href="#path-6"></use>
+                            </g>
                         </g>
+                        <path d="M96,37.2378781 C98.209139,37.2378781 100,39.0287391 100,41.2378781 L100,62 C100,64.209139 98.209139,66 96,66 L65.242,65.9998781 L62,69.2426407 L58.757,65.9998781 L28,66 C25.790861,66 24,64.209139 24,62 L24,41.2378781 C24,39.0287391 25.790861,37.2378781 28,37.2378781 L96,37.2378781 Z" id="形状结合" fill="url(#linearGradient-8)"></path>
+                        <path d="M36,44 L88,44 C89.1045695,44 90,44.8954305 90,46 C90,47.1045695 89.1045695,48 88,48 L36,48 C34.8954305,48 34,47.1045695 34,46 C34,44.8954305 34.8954305,44 36,44 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
+                        <path d="M36,54 L65,54 C66.1045695,54 67,54.8954305 67,56 C67,57.1045695 66.1045695,58 65,58 L36,58 C34.8954305,58 34,57.1045695 34,56 C34,54.8954305 34.8954305,54 36,54 Z" id="形状结合备份-17" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                     </g>
-                    <path d="M96,37.2378781 C98.209139,37.2378781 100,39.0287391 100,41.2378781 L100,62 C100,64.209139 98.209139,66 96,66 L65.242,65.9998781 L62,69.2426407 L58.757,65.9998781 L28,66 C25.790861,66 24,64.209139 24,62 L24,41.2378781 C24,39.0287391 25.790861,37.2378781 28,37.2378781 L96,37.2378781 Z" id="形状结合" fill="url(#linearGradient-16)"></path>
-                    <path d="M36,44 L88,44 C89.1045695,44 90,44.8954305 90,46 C90,47.1045695 89.1045695,48 88,48 L36,48 C34.8954305,48 34,47.1045695 34,46 C34,44.8954305 34.8954305,44 36,44 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
-                    <path d="M36,54 L65,54 C66.1045695,54 67,54.8954305 67,56 C67,57.1045695 66.1045695,58 65,58 L36,58 C34.8954305,58 34,57.1045695 34,56 C34,54.8954305 34.8954305,54 36,54 Z" id="形状结合备份-17" fill="#FFFFFF" fill-rule="nonzero" opacity="0.699016753"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/progress.svg b/examples/sites/demos/pc/overviewimage/progress.svg
index 92cf20b044..128e26dd5d 100644
--- a/examples/sites/demos/pc/overviewimage/progress.svg
+++ b/examples/sites/demos/pc/overviewimage/progress.svg
@@ -2,51 +2,19 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Progressbar 进度条</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.255824%" x2="128.792906%" y2="49.3484395%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.255824%" x2="128.792906%" y2="49.3484395%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="63.2619166%" x2="128.792906%" y2="16.2231039%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <filter x="-11.1%" y="-28.6%" width="122.2%" height="157.1%" filterUnits="objectBoundingBox" id="filter-12">
+        <filter x="-11.1%" y="-28.6%" width="122.2%" height="157.1%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
@@ -55,33 +23,23 @@
                 <feMergeNode in="SourceGraphic"></feMergeNode>
             </feMerge>
         </filter>
-        <linearGradient x1="44.0988019%" y1="61.2051762%" x2="128.792906%" y2="21.4614349%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="61.2051762%" x2="128.792906%" y2="21.4614349%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="61.2051762%" x2="128.792906%" y2="21.4614349%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="61.2051762%" x2="128.792906%" y2="21.4614349%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5073E5" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1089.000000, -869.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1089.000000, -869.000000)">
             <g id="Progressbar-进度条" transform="translate(1089.000000, 869.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="24" y="81" width="72" height="6" rx="3"></rect>
-                <rect id="矩形" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="44" y="81" width="10" height="6" rx="3"></rect>
-                <g id="进度条-(1)" filter="url(#filter-12)" transform="translate(24.000000, 43.000000)">
-                    <path d="M13.8461538,5.6 C9.25794208,5.6 5.53846154,9.3608081 5.53846154,14 C5.53846154,18.6391919 9.25794208,22.4 13.8461538,22.4 L27.6923077,22.4 C32.2805195,22.4 36,18.6391919 36,14 C36,9.3608081 32.2805195,5.6 27.6923077,5.6 L13.8461538,5.6 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.604724702"></path>
+                <g id="编组"></g>
+                <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="24" y="81" width="72" height="6" rx="3"></rect>
+                <rect id="矩形" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)" x="44" y="81" width="10" height="6" rx="3"></rect>
+                <g id="进度条-(1)" filter="url(#filter-4)" transform="translate(24.000000, 43.000000)">
+                    <path d="M13.8461538,5.6 C9.25794208,5.6 5.53846154,9.3608081 5.53846154,14 C5.53846154,18.6391919 9.25794208,22.4 13.8461538,22.4 L27.6923077,22.4 C32.2805195,22.4 36,18.6391919 36,14 C36,9.3608081 32.2805195,5.6 27.6923077,5.6 L13.8461538,5.6 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.604724702"></path>
                     <path d="M58.1538462,28 L13.8461538,28 C6.19913423,28 0,21.7319865 0,14 C0,6.2680135 6.19913423,0 13.8461538,0 L58.1538462,0 C65.8008658,0 72,6.2680135 72,14 C72,21.7319865 65.8008658,28 58.1538462,28 L58.1538462,28 Z M13.8461538,5.6 C9.25794208,5.6 5.53846154,9.3608081 5.53846154,14 C5.53846154,18.6391919 9.25794208,22.4 13.8461538,22.4 L58.1538462,22.4 C62.7420579,22.4 66.4615385,18.6391919 66.4615385,14 C66.4615385,9.3608081 62.7420579,5.6 58.1538462,5.6 L13.8461538,5.6 Z" id="形状" fill="#5073E5" fill-rule="nonzero"></path>
                     <path d="M45.5,14 C43.5670034,14 42,12.4329966 42,10.5 C42,8.56700338 43.5670034,7 45.5,7 C47.4329966,7 49,8.56700338 49,10.5 C49,12.4329966 47.4329966,14 45.5,14 L45.5,14 Z M45,10 C44.4477153,10 44,10.4477153 44,11 C44,11.5522847 44.4477153,12 45,12 C45.5522847,12 46,11.5522847 46,11 C46,10.4477153 45.5522847,10 45,10 Z M54.5,21 C52.5670034,21 51,19.4329966 51,17.5 C51,15.5670034 52.5670034,14 54.5,14 C56.4329966,14 58,15.5670034 58,17.5 C58,19.4329966 56.4329966,21 54.5,21 Z M55,17 C54.4477153,17 54,17.4477153 54,18 C54,18.5522847 54.4477153,19 55,19 C55.5522847,19 56,18.5522847 56,18 C56,17.4477153 55.5522847,17 55,17 Z M43.1486723,22 C42.845112,22.0017367 42.553343,21.8825142 42.3378166,21.6686495 C42.121612,21.4541221 42,21.1620982 42,20.857459 C42,20.5528198 42.121612,20.2607959 42.3378166,20.0462685 L56.042421,6.33600612 C56.4902443,5.88799796 57.2163093,5.88799796 57.6641325,6.33600612 C58.1119558,6.78401427 58.1119558,7.51037901 57.6641325,7.95838716 L43.9595281,21.6686495 C43.7440017,21.8825142 43.4522327,22.0017367 43.1486723,22 Z" id="形状" fill="#5073E5" fill-rule="nonzero"></path>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/qr-code.svg b/examples/sites/demos/pc/overviewimage/qr-code.svg
index 2f50224fca..3ab67e1e3c 100644
--- a/examples/sites/demos/pc/overviewimage/qr-code.svg
+++ b/examples/sites/demos/pc/overviewimage/qr-code.svg
@@ -2,109 +2,67 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>QrCode 二维码</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <path d="M79.6856696,79.6856244 L83.3428348,79.6856244 L83.3428348,83.3427855 L87,83.3427855 L87,87 L79.6857229,87 L79.6857229,83.3427855 L76.0285577,83.3427855 L76.0285577,76.0285166 L72.3713925,76.0285166 L72.3713925,72.3714621 L79.6855629,72.3713021 L79.6855629,68.2570758 L83.3427281,68.2570758 L83.3427281,64.5999147 L86.9998933,64.5999147 L86.9998933,76.0284632 L83.3427281,76.0284632 L83.3427281,72.3713021 L79.6856696,72.3713554 L79.6856696,79.6856244 Z M72.3713925,64.6000747 L72.3713925,68.2572358 L68.2571617,68.2572358 L68.2571617,76.0286232 L72.3713925,76.0286232 L72.3713925,79.6856777 L68.2571617,79.6856777 L68.2571617,83.3428389 L72.3713925,83.3428389 L72.3713925,87 L64.5999964,87 L64.5999964,64.6000747 L72.3713925,64.6000747 Z M79.6855629,64.5999147 L79.6855629,68.2570758 L76.0283977,68.2570758 L76.0283977,64.5999147 L79.6855629,64.5999147 Z" id="path-9"></path>
-        <filter x="-17.9%" y="-8.9%" width="135.7%" height="135.7%" filterUnits="objectBoundingBox" id="filter-10">
+        <path d="M79.6856696,79.6856244 L83.3428348,79.6856244 L83.3428348,83.3427855 L87,83.3427855 L87,87 L79.6857229,87 L79.6857229,83.3427855 L76.0285577,83.3427855 L76.0285577,76.0285166 L72.3713925,76.0285166 L72.3713925,72.3714621 L79.6855629,72.3713021 L79.6855629,68.2570758 L83.3427281,68.2570758 L83.3427281,64.5999147 L86.9998933,64.5999147 L86.9998933,76.0284632 L83.3427281,76.0284632 L83.3427281,72.3713021 L79.6856696,72.3713554 L79.6856696,79.6856244 Z M72.3713925,64.6000747 L72.3713925,68.2572358 L68.2571617,68.2572358 L68.2571617,76.0286232 L72.3713925,76.0286232 L72.3713925,79.6856777 L68.2571617,79.6856777 L68.2571617,83.3428389 L72.3713925,83.3428389 L72.3713925,87 L64.5999964,87 L64.5999964,64.6000747 L72.3713925,64.6000747 Z M79.6855629,64.5999147 L79.6855629,68.2570758 L76.0283977,68.2570758 L76.0283977,64.5999147 L79.6855629,64.5999147 Z" id="path-1"></path>
+        <filter x="-17.9%" y="-8.9%" width="135.7%" height="135.7%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M60.9427779,64.5999147 L60.9427779,86.99984 L39,86.99984 L39,64.5999147 L60.9427779,64.5999147 Z M57.285666,68.2570225 L42.6571652,68.2570225 L42.6571652,83.3427322 L57.285666,83.3427322 L57.285666,68.2570225 Z" id="path-11"></path>
-        <filter x="-18.2%" y="-8.9%" width="136.5%" height="135.7%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M60.9427779,64.5999147 L60.9427779,86.99984 L39,86.99984 L39,64.5999147 L60.9427779,64.5999147 Z M57.285666,68.2570225 L42.6571652,68.2570225 L42.6571652,83.3427322 L57.285666,83.3427322 L57.285666,68.2570225 Z" id="path-3"></path>
+        <filter x="-18.2%" y="-8.9%" width="136.5%" height="135.7%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M86.9998933,39 L86.9998933,60.9427535 L64.5999431,60.9427535 L64.5999431,39 L86.9998933,39 Z M83.3427281,42.6571611 L68.2570017,42.6571611 L68.2570017,57.2856457 L83.3427281,57.2856457 L83.3427281,42.6571611 Z" id="path-14"></path>
-        <filter x="-17.9%" y="-9.1%" width="135.7%" height="136.5%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M86.9998933,39 L86.9998933,60.9427535 L64.5999431,60.9427535 L64.5999431,39 L86.9998933,39 Z M83.3427281,42.6571611 L68.2570017,42.6571611 L68.2570017,57.2856457 L83.3427281,57.2856457 L83.3427281,42.6571611 Z" id="path-6"></path>
+        <filter x="-17.9%" y="-9.1%" width="135.7%" height="136.5%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <polygon id="path-16" points="46.3142771 53.6284846 53.6285542 53.6284846 53.6285542 46.3142156 46.3142771 46.3142156"></polygon>
-        <filter x="-54.7%" y="-27.3%" width="209.4%" height="209.4%" filterUnits="objectBoundingBox" id="filter-17">
+        <polygon id="path-8" points="46.3142771 53.6284846 53.6285542 53.6284846 53.6285542 46.3142156 46.3142771 46.3142156"></polygon>
+        <filter x="-54.7%" y="-27.3%" width="209.4%" height="209.4%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M60.9427779,39 L60.9427779,60.9427535 L39,60.9427535 L39,39 L60.9427779,39 Z M57.285666,42.6571611 L42.6571652,42.6571611 L42.6571652,57.2856457 L57.285666,57.2856457 L57.285666,42.6571611 Z" id="path-18"></path>
-        <filter x="-18.2%" y="-9.1%" width="136.5%" height="136.5%" filterUnits="objectBoundingBox" id="filter-19">
+        <path d="M60.9427779,39 L60.9427779,60.9427535 L39,60.9427535 L39,39 L60.9427779,39 Z M57.285666,42.6571611 L42.6571652,42.6571611 L42.6571652,57.2856457 L57.285666,57.2856457 L57.285666,42.6571611 Z" id="path-10"></path>
+        <filter x="-18.2%" y="-9.1%" width="136.5%" height="136.5%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1870.000000, -2534.000000)">
             <g id="编组-17备份-18" transform="translate(1771.000000, 2501.000000)">
                 <g id="QrCode-二维码" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="形状">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-1"></use>
                     </g>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
-                    <polygon id="路径" fill="url(#linearGradient-13)" opacity="0.604724702" points="46.3142771 79.685571 53.6285542 79.685571 53.6285542 72.3713021 46.3142771 72.3713021"></polygon>
+                    <polygon id="路径" fill="url(#linearGradient-5)" opacity="0.604724702" points="46.3142771 79.685571 53.6285542 79.685571 53.6285542 72.3713021 46.3142771 72.3713021"></polygon>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
                     </g>
-                    <polygon id="路径" fill="url(#linearGradient-13)" opacity="0.604724702" points="79.6856163 46.314269 72.3713392 46.314269 72.3713392 53.6285379 79.6856163 53.6285379"></polygon>
+                    <polygon id="路径" fill="url(#linearGradient-5)" opacity="0.604724702" points="79.6856163 46.314269 72.3713392 46.314269 72.3713392 53.6285379 79.6856163 53.6285379"></polygon>
                     <g id="路径">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                     </g>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/radio.svg b/examples/sites/demos/pc/overviewimage/radio.svg
index 2abd731b31..05ec242394 100644
--- a/examples/sites/demos/pc/overviewimage/radio.svg
+++ b/examples/sites/demos/pc/overviewimage/radio.svg
@@ -2,64 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Radio单选框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="96.7111184%" y1="0%" x2="-21.070424%" y2="129.725191%" id="linearGradient-11">
+        <linearGradient x1="96.7111184%" y1="0%" x2="-21.070424%" y2="129.725191%" id="linearGradient-3">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
             <stop stop-color="#E6ECF5" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-12" cx="29" cy="29" r="19"></circle>
-        <filter x="-2.6%" y="-2.6%" width="105.3%" height="105.3%" filterUnits="objectBoundingBox" id="filter-13">
+        <circle id="path-4" cx="29" cy="29" r="19"></circle>
+        <filter x="-2.6%" y="-2.6%" width="105.3%" height="105.3%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
             <feGaussianBlur stdDeviation="0.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.442176645   0 0 0 0 0.54129612   0 0 0 0 0.871694371  0 0 0 0.509328562 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-14">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-15" cx="69" cy="83" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-16">
+        <circle id="path-7" cx="69" cy="83" r="8"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
@@ -67,49 +35,39 @@
             <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-17">
+        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-9">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-18" points="68.7129876 81.8022814 67.2754034 95.814413 71.9449685 93.9202277 74.4194729 100.802281 76.8096817 99.7804537 74.2116343 92.9762941 78.8108161 91.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-19">
+        <polygon id="path-10" points="68.7129876 81.8022814 67.2754034 95.814413 71.9449685 93.9202277 74.4194729 100.802281 76.8096817 99.7804537 74.2116343 92.9762941 78.8108161 91.4874666"></polygon>
+        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1481.000000, -327.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1481.000000, -327.000000)">
             <g id="Radio单选框" transform="translate(1481.000000, 327.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-14" transform="translate(33.000000, 36.000000)">
-                    <circle id="椭圆形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" cx="29" cy="29" r="29"></circle>
+                    <circle id="椭圆形" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" cx="29" cy="29" r="29"></circle>
                     <g id="椭圆形" transform="translate(29.000000, 29.000000) rotate(-270.000000) translate(-29.000000, -29.000000) ">
-                        <use fill="url(#linearGradient-11)" fill-rule="evenodd" xlink:href="#path-12"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                        <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
                     </g>
-                    <circle id="椭圆形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" transform="translate(29.000000, 29.000000) rotate(-270.000000) translate(-29.000000, -29.000000) " cx="29" cy="29" r="11"></circle>
+                    <circle id="椭圆形" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" transform="translate(29.000000, 29.000000) rotate(-270.000000) translate(-29.000000, -29.000000) " cx="29" cy="29" r="11"></circle>
                 </g>
                 <g id="椭圆形">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-15"></use>
-                    <circle stroke="url(#linearGradient-14)" stroke-width="4" stroke-linejoin="square" cx="69" cy="83" r="6"></circle>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-7"></use>
+                    <circle stroke="url(#linearGradient-6)" stroke-width="4" stroke-linejoin="square" cx="69" cy="83" r="6"></circle>
                 </g>
                 <g id="路径-2">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-18"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                    <use fill="#000000" fill-rule="evenodd" xlink:href="#path-10"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/rate.svg b/examples/sites/demos/pc/overviewimage/rate.svg
index f12a447ae3..c73faac3a8 100644
--- a/examples/sites/demos/pc/overviewimage/rate.svg
+++ b/examples/sites/demos/pc/overviewimage/rate.svg
@@ -2,108 +2,66 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Rate 评分</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.4301394%" y1="86.8386573%" x2="97.6648446%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.4301394%" y1="86.8386573%" x2="97.6648446%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="84.7035448%" x2="128.792906%" y2="-38.386774%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="84.7035448%" x2="128.792906%" y2="-38.386774%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="84.7035448%" x2="128.792906%" y2="-38.386774%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="84.7035448%" x2="128.792906%" y2="-38.386774%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M73.0275,72.8181959 C72.6040912,72.9325121 72.14364,72.8856482 71.7388567,72.6761813 L63.1410486,68.1737975 L54.628157,72.7862023 C54.0217307,73.1093148 53.2885746,73.0652457 52.7329288,72.6603946 C52.1718546,72.2570091 51.8891841,71.5659502 51.9980364,70.8813366 L53.5409278,61.2148882 L46.5568703,54.4232794 C46.0625754,53.9428345 45.87615,53.2198868 46.0835714,52.555883 C46.2855646,51.8933449 46.8426267,51.4064731 47.5253838,51.3047711 L57.0776951,49.8354173 L61.2683284,41.0242606 C61.5678561,40.4003204 62.1823851,39.9982823 62.8752188,40.0001122 C63.5596952,39.9923926 64.1873736,40.383698 64.4988252,41.0079569 L68.8635416,49.764103 L78.4442538,51.1145784 C79.122522,51.2147876 79.6903139,51.6871943 79.906985,52.3488495 C80.1236562,53.0105047 79.9555223,53.7347359 79.4679936,54.2205426 L72.6113109,61.1011167 L74.3300215,70.7369601 C74.4544114,71.423531 74.1847793,72.1161374 73.6303916,72.5255491 C73.4515122,72.6623899 73.2446316,72.7595676 73.0275,72.8181959 L73.0275,72.8181959 Z" id="path-12"></path>
-        <filter x="-13.2%" y="-7.6%" width="126.5%" height="127.3%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M73.0275,72.8181959 C72.6040912,72.9325121 72.14364,72.8856482 71.7388567,72.6761813 L63.1410486,68.1737975 L54.628157,72.7862023 C54.0217307,73.1093148 53.2885746,73.0652457 52.7329288,72.6603946 C52.1718546,72.2570091 51.8891841,71.5659502 51.9980364,70.8813366 L53.5409278,61.2148882 L46.5568703,54.4232794 C46.0625754,53.9428345 45.87615,53.2198868 46.0835714,52.555883 C46.2855646,51.8933449 46.8426267,51.4064731 47.5253838,51.3047711 L57.0776951,49.8354173 L61.2683284,41.0242606 C61.5678561,40.4003204 62.1823851,39.9982823 62.8752188,40.0001122 C63.5596952,39.9923926 64.1873736,40.383698 64.4988252,41.0079569 L68.8635416,49.764103 L78.4442538,51.1145784 C79.122522,51.2147876 79.6903139,51.6871943 79.906985,52.3488495 C80.1236562,53.0105047 79.9555223,53.7347359 79.4679936,54.2205426 L72.6113109,61.1011167 L74.3300215,70.7369601 C74.4544114,71.423531 74.1847793,72.1161374 73.6303916,72.5255491 C73.4515122,72.6623899 73.2446316,72.7595676 73.0275,72.8181959 L73.0275,72.8181959 Z" id="path-4"></path>
+        <filter x="-13.2%" y="-7.6%" width="126.5%" height="127.3%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.1662417%" y1="86.8386573%" x2="127.892449%" y2="-43.8247114%" id="linearGradient-14">
+        <linearGradient x1="44.1662417%" y1="86.8386573%" x2="127.892449%" y2="-43.8247114%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-15">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-7">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M73.8450704,81.9865285 L52.1549296,81.9865285 C50.7746479,81.9865285 49.7887324,82.6115285 49.7887324,83.4865285 C49.7887324,84.3615284 50.7746479,84.9865285 52.1549296,84.9865285 L73.8450704,84.9865285 C75.2253521,84.9865285 76.2112676,84.3615284 76.2112676,83.4865285 C76.2112676,82.6115284 75.2253521,81.9865285 73.8450704,81.9865285 Z" id="path-16"></path>
-        <filter x="-13.2%" y="-83.3%" width="126.5%" height="333.3%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M73.8450704,81.9865285 L52.1549296,81.9865285 C50.7746479,81.9865285 49.7887324,82.6115285 49.7887324,83.4865285 C49.7887324,84.3615284 50.7746479,84.9865285 52.1549296,84.9865285 L73.8450704,84.9865285 C75.2253521,84.9865285 76.2112676,84.3615284 76.2112676,83.4865285 C76.2112676,82.6115284 75.2253521,81.9865285 73.8450704,81.9865285 Z" id="path-8"></path>
+        <filter x="-13.2%" y="-83.3%" width="126.5%" height="333.3%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="86.4614266%" x2="128.792906%" y2="-42.8639392%" id="linearGradient-18">
+        <linearGradient x1="44.0988019%" y1="86.4614266%" x2="128.792906%" y2="-42.8639392%" id="linearGradient-10">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.4614266%" x2="128.792906%" y2="-42.8639392%" id="linearGradient-19">
+        <linearGradient x1="44.0988019%" y1="86.4614266%" x2="128.792906%" y2="-42.8639392%" id="linearGradient-11">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1873.000000, -1350.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1873.000000, -1350.000000)">
             <g id="Rate-评分" transform="translate(1873.000000, 1350.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M90,40.0906874 C90,39.4957287 89.8028169,38.90077 89.4084507,38.5041308 L77.5774648,26.604957 C77.1830986,26.208318 76.5915492,26.0099984 76,26.0099983 L40.3098591,26.0099983 C36.7605634,25.8116788 34,28.5881527 34,32.1579048 L34,91.653774 C34,95.2235261 36.7605634,98 40.3098591,98 L83.6901409,98 C87.2394366,98 90,95.2235261 90,91.653774 L90,40.0906874 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                <g id="编组"></g>
+                <path d="M90,40.0906874 C90,39.4957287 89.8028169,38.90077 89.4084507,38.5041308 L77.5774648,26.604957 C77.1830986,26.208318 76.5915492,26.0099984 76,26.0099983 L40.3098591,26.0099983 C36.7605634,25.8116788 34,28.5881527 34,32.1579048 L34,91.653774 C34,95.2235261 36.7605634,98 40.3098591,98 L83.6901409,98 C87.2394366,98 90,95.2235261 90,91.653774 L90,40.0906874 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                 <g id="形状">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use stroke="url(#linearGradient-11)" stroke-width="1" fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-12"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use stroke="url(#linearGradient-3)" stroke-width="1" fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-4"></use>
                 </g>
                 <path d="M59,61 C59.6649739,62.1759794 61.2085559,63 63.0066022,63 C64.7928494,63 66.3279609,62.1867587 67,61.0231054" id="路径" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero"></path>
-                <path d="M74.9785284,30.9427808 L85.9154929,41.9427808 L79.583566,41.9427808 C77.2810471,41.9427808 74.9785284,39.6269914 74.9785284,37.3112019 L74.9785284,30.9427808 Z" id="路径" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
+                <path d="M74.9785284,30.9427808 L85.9154929,41.9427808 L79.583566,41.9427808 C77.2810471,41.9427808 74.9785284,39.6269914 74.9785284,37.3112019 L74.9785284,30.9427808 Z" id="路径" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
                 <g id="形状">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="url(#linearGradient-15)" fill-rule="evenodd" xlink:href="#path-16"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="url(#linearGradient-7)" fill-rule="evenodd" xlink:href="#path-8"></use>
                 </g>
-                <path d="M88.4398055,54.0035214 L88.4166436,54.0150429 L88.4398055,54.0035214 Z" id="路径" stroke="url(#linearGradient-19)" fill="url(#linearGradient-18)"></path>
-                <polygon id="路径" stroke="url(#linearGradient-19)" fill="url(#linearGradient-18)" points="87.030826 36.7569815 87.0366165 36.7742638 87.0366165 36.7685031"></polygon>
+                <path d="M88.4398055,54.0035214 L88.4166436,54.0150429 L88.4398055,54.0035214 Z" id="路径" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)"></path>
+                <polygon id="路径" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" points="87.030826 36.7569815 87.0366165 36.7742638 87.0366165 36.7685031"></polygon>
             </g>
         </g>
     </g>
diff --git a/examples/sites/demos/pc/overviewimage/rich-text-editor.svg b/examples/sites/demos/pc/overviewimage/rich-text-editor.svg
index 986df3e6d8..ab7bf122fd 100644
--- a/examples/sites/demos/pc/overviewimage/rich-text-editor.svg
+++ b/examples/sites/demos/pc/overviewimage/rich-text-editor.svg
@@ -2,68 +2,26 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Rich Text Editor 富文本编辑器</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="80.6245239%" x2="128.792906%" y2="-27.9978786%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="80.6245239%" x2="128.792906%" y2="-27.9978786%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M8.82244479,0 C11.1298004,0 12.9991377,1.82991749 12.9991378,4.08445671 L12.9991378,4.25295737 L38.9974133,4.25295737 L38.9974133,8.33741408 L12.9991378,8.33741408 L12.9991378,8.62386521 C12.9991378,10.8784044 11.1298004,12.7049518 8.82244479,12.7049519 L7.89122506,12.7049519 L7.89122506,36.2950482 L8.82244479,36.2950482 C11.1298004,36.2950482 12.9991377,38.1249656 12.9991378,40.3795048 L12.9991378,40.659216 L38.9974133,40.659216 L38.9974133,44.7436726 L12.9991378,44.7436726 L12.9991378,44.9155434 C12.9991378,47.1734526 11.1298004,49 8.82244479,49 L4.17669301,49 C1.86933741,49 0,47.1700825 0,44.9155434 L0,40.3795048 C0,38.1215956 1.86933741,36.2950482 4.17669301,36.2950482 L3.71453211,36.2950482 L3.71453211,12.7049519 L4.17669301,12.7049519 C1.86933741,12.7049519 0,10.8784044 0,8.62386521 L0,4.08445671 C0,1.82654747 1.86933741,0 4.17669301,0 L8.82244479,0 Z M43.1775552,12.7049519 C40.8701996,12.7049519 39.0008623,10.8750344 39.0008623,8.62049519 L39.0008623,4.08445671 C39.0008623,1.82654747 40.8701997,0 43.1775552,0 L47.8198581,0 C50.1306626,0 52,1.82991749 52,4.08445671 L52,8.62049519 C52,10.8750344 50.1272136,12.7015818 47.8198581,12.7015819 L48.285468,12.7015819 L48.285468,36.2916781 L47.8198581,36.2916781 C50.1306626,36.2916781 52,38.1215956 52,40.3761348 L52,44.9121733 C52,47.1700826 50.1272136,48.99663 47.8198581,48.99663 L43.1775552,48.99663 C40.8701996,48.99663 39.0008623,47.1667125 39.0008623,44.9121733 L39.0008623,40.3761348 C39.0008623,38.1182255 40.8701997,36.2916781 43.1775552,36.2916781 L44.105326,36.2916781 L44.105326,12.7015819 L43.1775552,12.7015819 L43.1775552,12.7049519 Z M8.82244479,40.3727648 L4.17669301,40.3727648 L4.17669301,44.9121733 L8.82244479,44.9121733 L8.82244479,40.3761348 L8.82244479,40.3727648 Z M47.8198581,40.3727648 L43.1775552,40.3727648 L43.1775552,44.9121733 L47.8198581,44.9121733 L47.8198581,40.3761348 L47.8198581,40.3727648 Z M33.1962592,15.198762 C34.316627,15.2432597 35.2014443,16.1436793 35.2014443,17.2393054 C35.2014443,18.3349315 34.316627,19.2353511 33.1962592,19.2798487 L28.0573058,19.2798487 L28.0573058,33.3429161 C27.9936965,34.4234655 27.0783748,35.2678693 25.9706838,35.2678693 C24.8629928,35.2678693 23.9476711,34.4234655 23.8840618,33.3429161 L23.8771639,19.2798487 L18.8037408,19.2798487 C17.683373,19.2353511 16.7985557,18.3349315 16.7985557,17.2393054 C16.7985557,16.1436793 17.683373,15.2432597 18.8037408,15.198762 L33.1962592,15.198762 L33.1962592,15.198762 Z M8.82244479,4.08445671 L4.17669301,4.08445671 L4.17669301,8.62049519 L8.82244479,8.62049519 L8.82244479,4.08445671 Z M47.8198581,4.08445671 L43.1775552,4.08445671 L43.1775552,8.62049519 L47.8198581,8.62049519 L47.8198581,4.08445671 Z" id="path-10"></path>
-        <filter x="-7.7%" y="-4.1%" width="115.4%" height="116.3%" filterUnits="objectBoundingBox" id="filter-11">
+        <path d="M8.82244479,0 C11.1298004,0 12.9991377,1.82991749 12.9991378,4.08445671 L12.9991378,4.25295737 L38.9974133,4.25295737 L38.9974133,8.33741408 L12.9991378,8.33741408 L12.9991378,8.62386521 C12.9991378,10.8784044 11.1298004,12.7049518 8.82244479,12.7049519 L7.89122506,12.7049519 L7.89122506,36.2950482 L8.82244479,36.2950482 C11.1298004,36.2950482 12.9991377,38.1249656 12.9991378,40.3795048 L12.9991378,40.659216 L38.9974133,40.659216 L38.9974133,44.7436726 L12.9991378,44.7436726 L12.9991378,44.9155434 C12.9991378,47.1734526 11.1298004,49 8.82244479,49 L4.17669301,49 C1.86933741,49 0,47.1700825 0,44.9155434 L0,40.3795048 C0,38.1215956 1.86933741,36.2950482 4.17669301,36.2950482 L3.71453211,36.2950482 L3.71453211,12.7049519 L4.17669301,12.7049519 C1.86933741,12.7049519 0,10.8784044 0,8.62386521 L0,4.08445671 C0,1.82654747 1.86933741,0 4.17669301,0 L8.82244479,0 Z M43.1775552,12.7049519 C40.8701996,12.7049519 39.0008623,10.8750344 39.0008623,8.62049519 L39.0008623,4.08445671 C39.0008623,1.82654747 40.8701997,0 43.1775552,0 L47.8198581,0 C50.1306626,0 52,1.82991749 52,4.08445671 L52,8.62049519 C52,10.8750344 50.1272136,12.7015818 47.8198581,12.7015819 L48.285468,12.7015819 L48.285468,36.2916781 L47.8198581,36.2916781 C50.1306626,36.2916781 52,38.1215956 52,40.3761348 L52,44.9121733 C52,47.1700826 50.1272136,48.99663 47.8198581,48.99663 L43.1775552,48.99663 C40.8701996,48.99663 39.0008623,47.1667125 39.0008623,44.9121733 L39.0008623,40.3761348 C39.0008623,38.1182255 40.8701997,36.2916781 43.1775552,36.2916781 L44.105326,36.2916781 L44.105326,12.7015819 L43.1775552,12.7015819 L43.1775552,12.7049519 Z M8.82244479,40.3727648 L4.17669301,40.3727648 L4.17669301,44.9121733 L8.82244479,44.9121733 L8.82244479,40.3761348 L8.82244479,40.3727648 Z M47.8198581,40.3727648 L43.1775552,40.3727648 L43.1775552,44.9121733 L47.8198581,44.9121733 L47.8198581,40.3761348 L47.8198581,40.3727648 Z M33.1962592,15.198762 C34.316627,15.2432597 35.2014443,16.1436793 35.2014443,17.2393054 C35.2014443,18.3349315 34.316627,19.2353511 33.1962592,19.2798487 L28.0573058,19.2798487 L28.0573058,33.3429161 C27.9936965,34.4234655 27.0783748,35.2678693 25.9706838,35.2678693 C24.8629928,35.2678693 23.9476711,34.4234655 23.8840618,33.3429161 L23.8771639,19.2798487 L18.8037408,19.2798487 C17.683373,19.2353511 16.7985557,18.3349315 16.7985557,17.2393054 C16.7985557,16.1436793 17.683373,15.2432597 18.8037408,15.198762 L33.1962592,15.198762 L33.1962592,15.198762 Z M8.82244479,4.08445671 L4.17669301,4.08445671 L4.17669301,8.62049519 L8.82244479,8.62049519 L8.82244479,4.08445671 Z M47.8198581,4.08445671 L43.1775552,4.08445671 L43.1775552,8.62049519 L47.8198581,8.62049519 L47.8198581,4.08445671 Z" id="path-2"></path>
+        <filter x="-7.7%" y="-4.1%" width="115.4%" height="116.3%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1087.000000, -2534.000000)">
             <g id="编组-17备份-19" transform="translate(988.000000, 2501.000000)">
                 <g id="Rich-Text-Editor-富文本编辑器" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="48.1935484" y="49" width="29.6129032" height="27" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="48.1935484" y="49" width="29.6129032" height="27" rx="4"></rect>
                     <g id="形状" transform="translate(37.000000, 38.000000)">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-2"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/roles.svg b/examples/sites/demos/pc/overviewimage/roles.svg
index d78c384324..451e147701 100644
--- a/examples/sites/demos/pc/overviewimage/roles.svg
+++ b/examples/sites/demos/pc/overviewimage/roles.svg
@@ -2,65 +2,23 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Roles 角色切换</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="46.3968592%" y1="86.8386573%" x2="98.1092035%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="46.3968592%" y1="86.8386573%" x2="98.1092035%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1869.000000, -1159.000000)">
             <g id="编组-25备份-6" transform="translate(1771.000000, 1126.000000)">
                 <g id="Roles-角色切换" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="角色切换" transform="translate(38.000000, 37.000000)">
-                        <path d="M36.4029553,29.9116184 C35.448106,28.8140176 34.3853641,27.8136002 33.2470975,26.9103661 L33.2794652,26.8531994 C31.6610766,25.5669485 29.8053243,24.5722477 27.9010203,23.8748139 C29.9941363,22.274146 31.6448927,20.1475444 32.6590829,17.6379259 C32.5457957,18.5354432 33.311833,15.8085912 33.311833,13.0760225 C33.311833,9.43450314 31.8498886,5.8844505 29.3198077,3.44343201 C26.7897268,1.00241353 23.283218,-0.300987439 19.8468395,0.0591628289 C17.672804,0.304979679 15.6929753,1.08244692 13.9882725,2.27151448 C13.2923654,2.66596477 12.0462062,3.92363237 10.9942535,5.39853347 C8.90653219,8.37691902 8.24299285,12.2585386 8.92271608,15.8314579 C9.53770376,19.0899603 11.4905594,21.9997458 14.0422188,23.8919639 C7.98405066,26.1557656 3.19901489,31.3465028 1.09510965,37.7777576 C0.399202533,39.8814925 0,42.3167943 0,44.8549962 C0,45.7296468 0.652750088,46.4956807 1.46194441,46.5871475 L20.0356515,46.5871475 C20.2082796,37.3432906 27.3291896,29.900185 36.0954615,29.900185 C36.1979594,29.900185 36.2950627,29.9059017 36.4029553,29.9116184 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M27.7715492,40.2359261 L44.2521403,40.2359261 C44.3114812,40.2359261 44.3708221,40.2302094 44.430163,40.2244927 L44.4355576,40.2244927 C44.4948986,40.2187761 44.5488448,40.2073427 44.6081858,40.1959094 L44.618975,40.1959094 C44.6729213,40.184476 44.7268676,40.167326 44.7808139,40.150176 C44.7862085,40.150176 44.7916031,40.1444593 44.7969978,40.1444593 C44.8455494,40.1273093 44.8941011,40.1044426 44.9426528,40.0872926 C44.9480474,40.081576 44.9588366,40.081576 44.9642313,40.0758593 L45.0937024,40.0072592 L45.1260701,39.9901092 C45.1638325,39.9672425 45.2015949,39.9386592 45.2393573,39.9100758 C45.2501466,39.8986425 45.2609359,39.8929258 45.2717251,39.8814925 C45.3040929,39.8529091 45.3418553,39.8243258 45.3742231,39.7957424 C45.3850123,39.7843091 45.3958016,39.7785924 45.4065908,39.7671591 L45.5036941,39.664259 L45.519878,39.647109 L45.5306673,39.6356756 C45.5630351,39.6013756 45.5900082,39.5613589 45.6169814,39.5213422 C45.622376,39.5099089 45.6277706,39.5041922 45.6331652,39.4927588 C45.6601384,39.4527421 45.6871115,39.4127255 45.70869,39.3669921 C45.7140847,39.3612754 45.7194793,39.3498421 45.7248739,39.3441254 C45.7464524,39.298392 45.768031,39.2583753 45.7896095,39.212642 C45.7950041,39.2069253 45.7950041,39.2012086 45.8003987,39.1897753 C45.8219772,39.1440419 45.8381611,39.0983086 45.854345,39.0468585 C45.854345,39.0411418 45.8597397,39.0354252 45.8597397,39.0297085 C45.8759235,38.9839751 45.8867128,38.9325251 45.8975021,38.8867917 C45.8975021,38.8810751 45.9028967,38.8753584 45.9028967,38.863925 C45.9136859,38.8181917 45.9190806,38.7724583 45.9244752,38.7210083 C45.9244752,38.7095749 45.9298698,38.7038583 45.9298698,38.6924249 C45.9352645,38.6466915 45.9406591,38.6009582 45.9406591,38.5609415 L45.9406591,38.5209248 L45.9406591,38.4751914 C45.9406591,38.4466081 45.9352645,38.4180247 45.9352645,38.3894414 L45.9352645,38.3494247 C45.9298698,38.3036913 45.9298698,38.2579579 45.9190806,38.2122246 C45.9190806,38.2007912 45.9136859,38.1893579 45.9136859,38.1779245 C45.9082913,38.1321912 45.8975021,38.0864578 45.8867128,38.0407244 C45.8867128,38.0292911 45.8813182,38.0178577 45.8813182,38.0121411 C45.8705289,37.9664077 45.8597397,37.9206743 45.8435558,37.8806576 C45.8381611,37.8692243 45.8381611,37.857791 45.8327665,37.8463576 C45.8165826,37.8063409 45.8003987,37.7606076 45.7842148,37.7205909 C45.7788202,37.7091575 45.7734256,37.6977242 45.768031,37.6805742 C45.7518471,37.6405575 45.7302686,37.6062574 45.70869,37.5719574 C45.7032954,37.5605241 45.6925062,37.5433741 45.6871115,37.5319407 L45.622376,37.4290406 C45.6115867,37.4176073 45.6007975,37.4004573 45.5954028,37.3890239 C45.5738243,37.3547239 45.5468512,37.3261406 45.519878,37.2918405 L45.4875103,37.2575405 C45.4605371,37.2232405 45.4281693,37.1946571 45.3958016,37.1660738 L45.3796177,37.1489238 L40.9668113,33.0157707 C40.2762988,32.3697869 39.2189516,32.4383869 38.6093585,33.1701208 C37.9997655,33.9018547 38.064501,35.0223222 38.7550135,35.668306 L39.8609124,36.7030234 L27.7715492,36.7030234 C26.8490677,36.7030234 26.0992143,37.4976407 26.0992143,38.4751914 C26.1046089,39.4470255 26.8490677,40.2359261 27.7715492,40.2359261 L27.7715492,40.2359261 Z M44.3276651,42.2939276 L27.8416794,42.2939276 C27.8201009,42.2939276 27.803917,42.2939276 27.7823385,42.2996443 C27.7607599,42.2996443 27.7337868,42.2996443 27.7122083,42.3053609 C27.6798405,42.3053609 27.6474727,42.3110776 27.6097103,42.3167943 C27.5881318,42.322511 27.5719479,42.322511 27.5503694,42.3282276 C27.5180016,42.3339443 27.4802392,42.339661 27.4478715,42.3510943 C27.4316876,42.356811 27.4101091,42.3625276 27.3939252,42.3682443 C27.3615574,42.3796777 27.323795,42.391111 27.2914272,42.4025443 C27.2752433,42.408261 27.2536648,42.4139777 27.2374809,42.425411 C27.2051132,42.4368444 27.1727454,42.4539944 27.1403776,42.4654277 C27.1241937,42.4768611 27.1026152,42.4825777 27.0864313,42.4940111 C27.0594582,42.5111611 27.0270904,42.5283111 27.0001173,42.5454611 C26.9785388,42.5568945 26.9623549,42.5683278 26.946171,42.5797611 C26.9191978,42.5969112 26.8922247,42.6197778 26.8652516,42.6369279 C26.8490677,42.6483612 26.8274892,42.6655112 26.8113053,42.6769445 C26.7843321,42.6998112 26.757359,42.7226779 26.7357805,42.7455446 C26.7195966,42.7569779 26.7034127,42.774128 26.6926234,42.791278 C26.6656503,42.8198613 26.6386771,42.8484447 26.6170986,42.877028 C26.611704,42.8884614 26.6009147,42.894178 26.5955201,42.9056114 C26.5901255,42.9113281 26.5901255,42.9170447 26.5847309,42.9227614 C26.5577577,42.9513448 26.5361792,42.9856448 26.5146007,43.0199448 C26.5038114,43.0370948 26.4930222,43.0485282 26.4822329,43.0656782 C26.4606544,43.0999782 26.4390759,43.1285616 26.422892,43.1628616 C26.4121027,43.1800116 26.4013135,43.1971616 26.3959188,43.2143116 L26.3473672,43.3172117 C26.3365779,43.3343617 26.3311833,43.3515117 26.320394,43.3743784 C26.3042102,43.4086784 26.2934209,43.4429785 26.2826316,43.4772785 C26.277237,43.4944285 26.2664478,43.5172952 26.2610531,43.5344452 C26.2502639,43.5687452 26.2448692,43.6030452 26.23408,43.6373453 L26.2178961,43.7059453 C26.2125015,43.7402453 26.2071068,43.7688287 26.2017122,43.8031287 C26.1963176,43.8259954 26.190923,43.8545788 26.190923,43.8774454 C26.1855283,43.9060288 26.1855283,43.9403288 26.1855283,43.9689122 C26.1855283,43.9974955 26.1801337,44.0260789 26.1801337,44.0546622 L26.1801337,44.146129 C26.1801337,44.1747123 26.1801337,44.2032957 26.1855283,44.231879 C26.1855283,44.2604624 26.190923,44.2947624 26.1963176,44.3233458 C26.2017122,44.3519291 26.2017122,44.3747958 26.2071068,44.4033792 C26.2125015,44.4376792 26.2178961,44.4662625 26.2232907,44.4948459 C26.2286854,44.5177126 26.23408,44.5462959 26.2394746,44.5691626 C26.2502639,44.597746 26.2556585,44.632046 26.2664478,44.6606294 C26.277237,44.683496 26.2826316,44.7120794 26.2934209,44.7349461 C26.3042102,44.7635294 26.3149994,44.7921128 26.3257887,44.8149795 C26.3365779,44.8435628 26.3473672,44.8664295 26.3635511,44.8950129 C26.3743403,44.9178796 26.3851296,44.9407462 26.4013135,44.9636129 C26.4174974,44.9921963 26.4336812,45.015063 26.4498651,45.0436463 C26.4606544,45.066513 26.4768383,45.083663 26.4876275,45.1065297 C26.5038114,45.135113 26.5253899,45.1579797 26.5415738,45.1865631 C26.5577577,45.2094298 26.5739416,45.2265798 26.5901255,45.2494465 C26.611704,45.2723131 26.6278879,45.2951798 26.6494664,45.3180465 C26.6656503,45.3409132 26.6872288,45.3580632 26.7088073,45.3809299 L26.7465697,45.4209466 L31.1593761,49.5540997 C31.4668699,49.8399332 31.8606778,50 32.265275,50 C32.745397,50 33.1985458,49.7827665 33.5168289,49.3997496 C34.126422,48.6680157 34.0616864,47.5475482 33.3711739,46.9015644 L32.2598804,45.8382636 L44.3276651,45.8382636 C45.2501466,45.8382636 46,45.0436463 46,44.0660956 C46,43.0885449 45.2501466,42.2939276 44.3276651,42.2939276 L44.3276651,42.2939276 Z" id="形状" fill="url(#linearGradient-10)"></path>
+                        <path d="M36.4029553,29.9116184 C35.448106,28.8140176 34.3853641,27.8136002 33.2470975,26.9103661 L33.2794652,26.8531994 C31.6610766,25.5669485 29.8053243,24.5722477 27.9010203,23.8748139 C29.9941363,22.274146 31.6448927,20.1475444 32.6590829,17.6379259 C32.5457957,18.5354432 33.311833,15.8085912 33.311833,13.0760225 C33.311833,9.43450314 31.8498886,5.8844505 29.3198077,3.44343201 C26.7897268,1.00241353 23.283218,-0.300987439 19.8468395,0.0591628289 C17.672804,0.304979679 15.6929753,1.08244692 13.9882725,2.27151448 C13.2923654,2.66596477 12.0462062,3.92363237 10.9942535,5.39853347 C8.90653219,8.37691902 8.24299285,12.2585386 8.92271608,15.8314579 C9.53770376,19.0899603 11.4905594,21.9997458 14.0422188,23.8919639 C7.98405066,26.1557656 3.19901489,31.3465028 1.09510965,37.7777576 C0.399202533,39.8814925 0,42.3167943 0,44.8549962 C0,45.7296468 0.652750088,46.4956807 1.46194441,46.5871475 L20.0356515,46.5871475 C20.2082796,37.3432906 27.3291896,29.900185 36.0954615,29.900185 C36.1979594,29.900185 36.2950627,29.9059017 36.4029553,29.9116184 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M27.7715492,40.2359261 L44.2521403,40.2359261 C44.3114812,40.2359261 44.3708221,40.2302094 44.430163,40.2244927 L44.4355576,40.2244927 C44.4948986,40.2187761 44.5488448,40.2073427 44.6081858,40.1959094 L44.618975,40.1959094 C44.6729213,40.184476 44.7268676,40.167326 44.7808139,40.150176 C44.7862085,40.150176 44.7916031,40.1444593 44.7969978,40.1444593 C44.8455494,40.1273093 44.8941011,40.1044426 44.9426528,40.0872926 C44.9480474,40.081576 44.9588366,40.081576 44.9642313,40.0758593 L45.0937024,40.0072592 L45.1260701,39.9901092 C45.1638325,39.9672425 45.2015949,39.9386592 45.2393573,39.9100758 C45.2501466,39.8986425 45.2609359,39.8929258 45.2717251,39.8814925 C45.3040929,39.8529091 45.3418553,39.8243258 45.3742231,39.7957424 C45.3850123,39.7843091 45.3958016,39.7785924 45.4065908,39.7671591 L45.5036941,39.664259 L45.519878,39.647109 L45.5306673,39.6356756 C45.5630351,39.6013756 45.5900082,39.5613589 45.6169814,39.5213422 C45.622376,39.5099089 45.6277706,39.5041922 45.6331652,39.4927588 C45.6601384,39.4527421 45.6871115,39.4127255 45.70869,39.3669921 C45.7140847,39.3612754 45.7194793,39.3498421 45.7248739,39.3441254 C45.7464524,39.298392 45.768031,39.2583753 45.7896095,39.212642 C45.7950041,39.2069253 45.7950041,39.2012086 45.8003987,39.1897753 C45.8219772,39.1440419 45.8381611,39.0983086 45.854345,39.0468585 C45.854345,39.0411418 45.8597397,39.0354252 45.8597397,39.0297085 C45.8759235,38.9839751 45.8867128,38.9325251 45.8975021,38.8867917 C45.8975021,38.8810751 45.9028967,38.8753584 45.9028967,38.863925 C45.9136859,38.8181917 45.9190806,38.7724583 45.9244752,38.7210083 C45.9244752,38.7095749 45.9298698,38.7038583 45.9298698,38.6924249 C45.9352645,38.6466915 45.9406591,38.6009582 45.9406591,38.5609415 L45.9406591,38.5209248 L45.9406591,38.4751914 C45.9406591,38.4466081 45.9352645,38.4180247 45.9352645,38.3894414 L45.9352645,38.3494247 C45.9298698,38.3036913 45.9298698,38.2579579 45.9190806,38.2122246 C45.9190806,38.2007912 45.9136859,38.1893579 45.9136859,38.1779245 C45.9082913,38.1321912 45.8975021,38.0864578 45.8867128,38.0407244 C45.8867128,38.0292911 45.8813182,38.0178577 45.8813182,38.0121411 C45.8705289,37.9664077 45.8597397,37.9206743 45.8435558,37.8806576 C45.8381611,37.8692243 45.8381611,37.857791 45.8327665,37.8463576 C45.8165826,37.8063409 45.8003987,37.7606076 45.7842148,37.7205909 C45.7788202,37.7091575 45.7734256,37.6977242 45.768031,37.6805742 C45.7518471,37.6405575 45.7302686,37.6062574 45.70869,37.5719574 C45.7032954,37.5605241 45.6925062,37.5433741 45.6871115,37.5319407 L45.622376,37.4290406 C45.6115867,37.4176073 45.6007975,37.4004573 45.5954028,37.3890239 C45.5738243,37.3547239 45.5468512,37.3261406 45.519878,37.2918405 L45.4875103,37.2575405 C45.4605371,37.2232405 45.4281693,37.1946571 45.3958016,37.1660738 L45.3796177,37.1489238 L40.9668113,33.0157707 C40.2762988,32.3697869 39.2189516,32.4383869 38.6093585,33.1701208 C37.9997655,33.9018547 38.064501,35.0223222 38.7550135,35.668306 L39.8609124,36.7030234 L27.7715492,36.7030234 C26.8490677,36.7030234 26.0992143,37.4976407 26.0992143,38.4751914 C26.1046089,39.4470255 26.8490677,40.2359261 27.7715492,40.2359261 L27.7715492,40.2359261 Z M44.3276651,42.2939276 L27.8416794,42.2939276 C27.8201009,42.2939276 27.803917,42.2939276 27.7823385,42.2996443 C27.7607599,42.2996443 27.7337868,42.2996443 27.7122083,42.3053609 C27.6798405,42.3053609 27.6474727,42.3110776 27.6097103,42.3167943 C27.5881318,42.322511 27.5719479,42.322511 27.5503694,42.3282276 C27.5180016,42.3339443 27.4802392,42.339661 27.4478715,42.3510943 C27.4316876,42.356811 27.4101091,42.3625276 27.3939252,42.3682443 C27.3615574,42.3796777 27.323795,42.391111 27.2914272,42.4025443 C27.2752433,42.408261 27.2536648,42.4139777 27.2374809,42.425411 C27.2051132,42.4368444 27.1727454,42.4539944 27.1403776,42.4654277 C27.1241937,42.4768611 27.1026152,42.4825777 27.0864313,42.4940111 C27.0594582,42.5111611 27.0270904,42.5283111 27.0001173,42.5454611 C26.9785388,42.5568945 26.9623549,42.5683278 26.946171,42.5797611 C26.9191978,42.5969112 26.8922247,42.6197778 26.8652516,42.6369279 C26.8490677,42.6483612 26.8274892,42.6655112 26.8113053,42.6769445 C26.7843321,42.6998112 26.757359,42.7226779 26.7357805,42.7455446 C26.7195966,42.7569779 26.7034127,42.774128 26.6926234,42.791278 C26.6656503,42.8198613 26.6386771,42.8484447 26.6170986,42.877028 C26.611704,42.8884614 26.6009147,42.894178 26.5955201,42.9056114 C26.5901255,42.9113281 26.5901255,42.9170447 26.5847309,42.9227614 C26.5577577,42.9513448 26.5361792,42.9856448 26.5146007,43.0199448 C26.5038114,43.0370948 26.4930222,43.0485282 26.4822329,43.0656782 C26.4606544,43.0999782 26.4390759,43.1285616 26.422892,43.1628616 C26.4121027,43.1800116 26.4013135,43.1971616 26.3959188,43.2143116 L26.3473672,43.3172117 C26.3365779,43.3343617 26.3311833,43.3515117 26.320394,43.3743784 C26.3042102,43.4086784 26.2934209,43.4429785 26.2826316,43.4772785 C26.277237,43.4944285 26.2664478,43.5172952 26.2610531,43.5344452 C26.2502639,43.5687452 26.2448692,43.6030452 26.23408,43.6373453 L26.2178961,43.7059453 C26.2125015,43.7402453 26.2071068,43.7688287 26.2017122,43.8031287 C26.1963176,43.8259954 26.190923,43.8545788 26.190923,43.8774454 C26.1855283,43.9060288 26.1855283,43.9403288 26.1855283,43.9689122 C26.1855283,43.9974955 26.1801337,44.0260789 26.1801337,44.0546622 L26.1801337,44.146129 C26.1801337,44.1747123 26.1801337,44.2032957 26.1855283,44.231879 C26.1855283,44.2604624 26.190923,44.2947624 26.1963176,44.3233458 C26.2017122,44.3519291 26.2017122,44.3747958 26.2071068,44.4033792 C26.2125015,44.4376792 26.2178961,44.4662625 26.2232907,44.4948459 C26.2286854,44.5177126 26.23408,44.5462959 26.2394746,44.5691626 C26.2502639,44.597746 26.2556585,44.632046 26.2664478,44.6606294 C26.277237,44.683496 26.2826316,44.7120794 26.2934209,44.7349461 C26.3042102,44.7635294 26.3149994,44.7921128 26.3257887,44.8149795 C26.3365779,44.8435628 26.3473672,44.8664295 26.3635511,44.8950129 C26.3743403,44.9178796 26.3851296,44.9407462 26.4013135,44.9636129 C26.4174974,44.9921963 26.4336812,45.015063 26.4498651,45.0436463 C26.4606544,45.066513 26.4768383,45.083663 26.4876275,45.1065297 C26.5038114,45.135113 26.5253899,45.1579797 26.5415738,45.1865631 C26.5577577,45.2094298 26.5739416,45.2265798 26.5901255,45.2494465 C26.611704,45.2723131 26.6278879,45.2951798 26.6494664,45.3180465 C26.6656503,45.3409132 26.6872288,45.3580632 26.7088073,45.3809299 L26.7465697,45.4209466 L31.1593761,49.5540997 C31.4668699,49.8399332 31.8606778,50 32.265275,50 C32.745397,50 33.1985458,49.7827665 33.5168289,49.3997496 C34.126422,48.6680157 34.0616864,47.5475482 33.3711739,46.9015644 L32.2598804,45.8382636 L44.3276651,45.8382636 C45.2501466,45.8382636 46,45.0436463 46,44.0660956 C46,43.0885449 45.2501466,42.2939276 44.3276651,42.2939276 L44.3276651,42.2939276 Z" id="形状" fill="url(#linearGradient-2)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/scroll-text.svg b/examples/sites/demos/pc/overviewimage/scroll-text.svg
index 007b3e5d1c..e8f30b968e 100644
--- a/examples/sites/demos/pc/overviewimage/scroll-text.svg
+++ b/examples/sites/demos/pc/overviewimage/scroll-text.svg
@@ -2,82 +2,42 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>ScrollText 文字滚动</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.8473549%" y1="86.8386573%" x2="118.798214%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.8473549%" y1="86.8386573%" x2="118.798214%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.9709406%" x2="128.792906%" y2="42.4332843%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="52.9709406%" x2="128.792906%" y2="42.4332843%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.8719209%" x2="128.792906%" y2="47.7792968%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="50.8719209%" x2="128.792906%" y2="47.7792968%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-12" x="0" y="0" width="68" height="19" rx="2"></rect>
+        <rect id="path-4" x="0" y="0" width="68" height="19" rx="2"></rect>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -2530.000000)">
-            <g id="编组-14备份-17" transform="translate(1380.000000, 2500.000000)">
-                <g id="ScrollText-文字滚动" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -2581.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-17" transform="translate(784.000000, 2240.000000)">
+                    <g id="ScrollText-文字滚动" transform="translate(98.000000, 30.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-15" transform="translate(22.000000, 32.000000)">
+                            <g id="编组-29">
+                                <path d="M16,0 L24.2725011,0 L24.2725011,0 L65,0 C67.209139,-4.33003142e-15 69,1.790861 69,4 L69,57 C69,59.209139 67.209139,61 65,61 L16,61 C13.790861,61 12,59.209139 12,57 L12,4 C12,1.790861 13.790861,4.05812251e-16 16,0 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                                <path d="M80.0958313,45 C80.648116,45 81.0958313,45.4477153 81.0958313,46 C81.0958313,46.2829303 80.9759798,46.5526192 80.7659819,46.7422251 L74.1441845,52.721006 C73.7342649,53.09112 73.1019227,53.0588511 72.7318088,52.6489314 C72.5658847,52.4651622 72.4740339,52.2263731 72.4740339,51.9787808 L72.474,49 L55,49 C53.8954305,49 53,48.1045695 53,47 C53,45.8954305 53.8954305,45 55,45 L80.0958313,45 Z" id="形状结合备份-25" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                                <path d="M27.0958313,8 C27.648116,8 28.0958313,8.44771525 28.0958313,9 C28.0958313,9.2829303 27.9759798,9.55261923 27.7659819,9.74222515 L21.1441845,15.721006 C20.7342649,16.09112 20.1019227,16.0588511 19.7318088,15.6489314 C19.5658847,15.4651622 19.4740339,15.2263731 19.4740339,14.9787808 L19.474,12 L2,12 C0.8954305,12 1.3527075e-16,11.1045695 0,10 C-1.3527075e-16,8.8954305 0.8954305,8 2,8 L27.0958313,8 Z" id="形状结合备份-26" fill="url(#linearGradient-2)" opacity="0.604724702" transform="translate(14.047916, 11.989394) scale(-1, -1) translate(-14.047916, -11.989394) "></path>
+                            </g>
+                            <rect id="矩形备份-6" fill="url(#linearGradient-3)" opacity="0.204287574" x="19.5" y="25" width="39" height="6" rx="3"></rect>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-15" transform="translate(22.000000, 32.000000)">
-                        <g id="编组-29">
-                            <path d="M16,0 L24.2725011,0 L24.2725011,0 L65,0 C67.209139,-4.33003142e-15 69,1.790861 69,4 L69,57 C69,59.209139 67.209139,61 65,61 L16,61 C13.790861,61 12,59.209139 12,57 L12,4 C12,1.790861 13.790861,4.05812251e-16 16,0 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                            <path d="M80.0958313,45 C80.648116,45 81.0958313,45.4477153 81.0958313,46 C81.0958313,46.2829303 80.9759798,46.5526192 80.7659819,46.7422251 L74.1441845,52.721006 C73.7342649,53.09112 73.1019227,53.0588511 72.7318088,52.6489314 C72.5658847,52.4651622 72.4740339,52.2263731 72.4740339,51.9787808 L72.474,49 L55,49 C53.8954305,49 53,48.1045695 53,47 C53,45.8954305 53.8954305,45 55,45 L80.0958313,45 Z" id="形状结合备份-25" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                            <path d="M27.0958313,8 C27.648116,8 28.0958313,8.44771525 28.0958313,9 C28.0958313,9.2829303 27.9759798,9.55261923 27.7659819,9.74222515 L21.1441845,15.721006 C20.7342649,16.09112 20.1019227,16.0588511 19.7318088,15.6489314 C19.5658847,15.4651622 19.4740339,15.2263731 19.4740339,14.9787808 L19.474,12 L2,12 C0.8954305,12 1.3527075e-16,11.1045695 0,10 C-1.3527075e-16,8.8954305 0.8954305,8 2,8 L27.0958313,8 Z" id="形状结合备份-26" fill="url(#linearGradient-10)" opacity="0.604724702" transform="translate(14.047916, 11.989394) scale(-1, -1) translate(-14.047916, -11.989394) "></path>
+                        <g id="形状-+-形状备份-4-蒙版" transform="translate(28.000000, 53.000000)">
+                            <mask id="mask-5" fill="white">
+                                <use xlink:href="#path-4"></use>
+                            </mask>
+                            <use id="蒙版" fill="#5073E5" xlink:href="#path-4"></use>
+                            <path d="M47.8171145,5 L51.1187036,5 L52.8425421,7.80285619 L54.513789,5 L57.7861605,5 L54.7767474,9.39941984 L58.0783365,14.0885864 L54.7007816,14.0885864 L52.7899504,11.1792926 L50.8791192,14.0885864 L47.5015644,14.0885864 L50.8557451,9.34620105 L47.8171145,5 L47.8171145,5 Z M38,7.25292871 L38,5.0059132 L47.104205,5.0059132 L47.104205,7.25292871 L44.0422002,7.25292871 L44.0422002,14.1122392 L41.0327871,14.1122392 L41.0327871,7.25292871 L38,7.25292871 L38,7.25292871 Z M67.4396564,7.25292871 L64.3776516,7.25292871 L64.3776516,14.1122392 L61.3682385,14.1122392 L61.3682385,7.25292871 L58.3062338,7.25292871 L58.3062338,5.0059132 L67.4338128,5.0059132 L67.4338128,7.25292871 L67.4396564,7.25292871 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-5)"></path>
+                            <path d="M-5.18288553,5 L-1.88129644,5 L-0.157457888,7.80285619 L1.51378898,5 L4.78616047,5 L1.7767474,9.39941984 L5.07833649,14.0885864 L1.70078164,14.0885864 L-0.210049573,11.1792926 L-2.12088078,14.0885864 L-5.49843564,14.0885864 L-2.14425486,9.34620105 L-5.18288553,5 L-5.18288553,5 Z M-15,7.25292871 L-15,5.0059132 L-5.89579504,5.0059132 L-5.89579504,7.25292871 L-8.95779979,7.25292871 L-8.95779979,14.1122392 L-11.9672129,14.1122392 L-11.9672129,7.25292871 L-15,7.25292871 L-15,7.25292871 Z M14.4396564,7.25292871 L11.3776516,7.25292871 L11.3776516,14.1122392 L8.36823855,14.1122392 L8.36823855,7.25292871 L5.30623379,7.25292871 L5.30623379,5.0059132 L14.4338128,5.0059132 L14.4338128,7.25292871 L14.4396564,7.25292871 Z" id="形状备份-4" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-5)"></path>
                         </g>
-                        <rect id="矩形备份-6" fill="url(#linearGradient-11)" opacity="0.204287574" x="19.5" y="25" width="39" height="6" rx="3"></rect>
-                    </g>
-                    <g id="形状-+-形状备份-4-蒙版" transform="translate(28.000000, 53.000000)">
-                        <mask id="mask-13" fill="white">
-                            <use xlink:href="#path-12"></use>
-                        </mask>
-                        <use id="蒙版" fill="#5073E5" xlink:href="#path-12"></use>
-                        <path d="M47.8171145,5 L51.1187036,5 L52.8425421,7.80285619 L54.513789,5 L57.7861605,5 L54.7767474,9.39941984 L58.0783365,14.0885864 L54.7007816,14.0885864 L52.7899504,11.1792926 L50.8791192,14.0885864 L47.5015644,14.0885864 L50.8557451,9.34620105 L47.8171145,5 L47.8171145,5 Z M38,7.25292871 L38,5.0059132 L47.104205,5.0059132 L47.104205,7.25292871 L44.0422002,7.25292871 L44.0422002,14.1122392 L41.0327871,14.1122392 L41.0327871,7.25292871 L38,7.25292871 L38,7.25292871 Z M67.4396564,7.25292871 L64.3776516,7.25292871 L64.3776516,14.1122392 L61.3682385,14.1122392 L61.3682385,7.25292871 L58.3062338,7.25292871 L58.3062338,5.0059132 L67.4338128,5.0059132 L67.4338128,7.25292871 L67.4396564,7.25292871 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-13)"></path>
-                        <path d="M-5.18288553,5 L-1.88129644,5 L-0.157457888,7.80285619 L1.51378898,5 L4.78616047,5 L1.7767474,9.39941984 L5.07833649,14.0885864 L1.70078164,14.0885864 L-0.210049573,11.1792926 L-2.12088078,14.0885864 L-5.49843564,14.0885864 L-2.14425486,9.34620105 L-5.18288553,5 L-5.18288553,5 Z M-15,7.25292871 L-15,5.0059132 L-5.89579504,5.0059132 L-5.89579504,7.25292871 L-8.95779979,7.25292871 L-8.95779979,14.1122392 L-11.9672129,14.1122392 L-11.9672129,7.25292871 L-15,7.25292871 L-15,7.25292871 Z M14.4396564,7.25292871 L11.3776516,7.25292871 L11.3776516,14.1122392 L8.36823855,14.1122392 L8.36823855,7.25292871 L5.30623379,7.25292871 L5.30623379,5.0059132 L14.4338128,5.0059132 L14.4338128,7.25292871 L14.4396564,7.25292871 Z" id="形状备份-4" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-13)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/search.svg b/examples/sites/demos/pc/overviewimage/search.svg
index 0661668548..12f8da5bc0 100644
--- a/examples/sites/demos/pc/overviewimage/search.svg
+++ b/examples/sites/demos/pc/overviewimage/search.svg
@@ -2,109 +2,69 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Searchbox 搜索框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="100%" y1="47.3372781%" x2="6.58643108%" y2="52.6627219%" id="linearGradient-10">
+        <linearGradient x1="100%" y1="47.3372781%" x2="6.58643108%" y2="52.6627219%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M48.5,50 L58.5,50 C59.3284271,50 60,50.6715729 60,51.5 C60,52.3284271 59.3284271,53 58.5,53 L48.5,53 C47.6715729,53 47,52.3284271 47,51.5 C47,50.6715729 47.6715729,50 48.5,50 Z" id="path-11"></path>
-        <filter x="-26.9%" y="-83.3%" width="153.8%" height="333.3%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M48.5,50 L58.5,50 C59.3284271,50 60,50.6715729 60,51.5 C60,52.3284271 59.3284271,53 58.5,53 L48.5,53 C47.6715729,53 47,52.3284271 47,51.5 C47,50.6715729 47.6715729,50 48.5,50 Z" id="path-3"></path>
+        <filter x="-26.9%" y="-83.3%" width="153.8%" height="333.3%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="60.6810308%" x2="128.792906%" y2="22.7963854%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="60.6810308%" x2="128.792906%" y2="22.7963854%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.6810308%" x2="128.792906%" y2="22.7963854%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="60.6810308%" x2="128.792906%" y2="22.7963854%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M1,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,14 C25,14.5522847 24.5522847,15 24,15 L1,15 C0.44771525,15 6.76353751e-17,14.5522847 0,14 L0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 Z" id="path-16"></path>
-        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M1,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,14 C25,14.5522847 24.5522847,15 24,15 L1,15 C0.44771525,15 6.76353751e-17,14.5522847 0,14 L0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 Z" id="path-8"></path>
+        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M1,0 L24,0 C24.5522847,-1.01453063e-16 25,0.44771525 25,1 L25,4 C25,4.55228475 24.5522847,5 24,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="path-18"></path>
-        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-19">
+        <path d="M1,0 L24,0 C24.5522847,-1.01453063e-16 25,0.44771525 25,1 L25,4 C25,4.55228475 24.5522847,5 24,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="path-10"></path>
+        <filter x="-16.0%" y="-40.0%" width="132.0%" height="260.0%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -1709.000000)">
-            <g id="编组-14备份-6" transform="translate(1380.000000, 1676.000000)">
-                <g id="Searchbox-搜索框" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -1760.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-6" transform="translate(784.000000, 1416.000000)">
+                    <g id="Searchbox-搜索框" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="25" y="43" width="72" height="18" rx="4"></rect>
+                        <g id="形状结合备份-19" transform="translate(53.500000, 51.500000) rotate(-90.000000) translate(-53.500000, -51.500000) ">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="25" y="43" width="72" height="18" rx="4"></rect>
-                    <g id="形状结合备份-19" transform="translate(53.500000, 51.500000) rotate(-90.000000) translate(-53.500000, -51.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-11"></use>
-                    </g>
-                    <g id="编组-13" transform="translate(59.000000, 49.000000)">
-                        <path d="M31.5,32 L37.5,32 C39.4329966,32 41,33.5670034 41,35.5 C41,37.4329966 39.4329966,39 37.5,39 L31.5,39 C29.5670034,39 28,37.4329966 28,35.5 C28,33.5670034 29.5670034,32 31.5,32 Z" id="形状结合备份-20" stroke="url(#linearGradient-14)" fill="url(#linearGradient-13)" transform="translate(34.500000, 35.500000) rotate(-135.000000) translate(-34.500000, -35.500000) "></path>
-                        <circle id="椭圆形" stroke="url(#linearGradient-15)" stroke-width="8" cx="17.5" cy="17.5" r="17.5"></circle>
-                    </g>
-                    <g id="编组-12" transform="translate(25.000000, 33.000000)">
-                        <g id="形状结合备份-16" transform="translate(12.500000, 12.500000) rotate(-90.000000) translate(-12.500000, -12.500000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                        <g id="编组-13" transform="translate(59.000000, 49.000000)">
+                            <path d="M31.5,32 L37.5,32 C39.4329966,32 41,33.5670034 41,35.5 C41,37.4329966 39.4329966,39 37.5,39 L31.5,39 C29.5670034,39 28,37.4329966 28,35.5 C28,33.5670034 29.5670034,32 31.5,32 Z" id="形状结合备份-20" stroke="url(#linearGradient-6)" fill="url(#linearGradient-5)" transform="translate(34.500000, 35.500000) rotate(-135.000000) translate(-34.500000, -35.500000) "></path>
+                            <circle id="椭圆形" stroke="url(#linearGradient-7)" stroke-width="8" cx="17.5" cy="17.5" r="17.5"></circle>
                         </g>
-                        <g id="形状结合备份-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
+                        <g id="编组-12" transform="translate(25.000000, 33.000000)">
+                            <g id="形状结合备份-16" transform="translate(12.500000, 12.500000) rotate(-90.000000) translate(-12.500000, -12.500000) ">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
+                            </g>
+                            <g id="形状结合备份-2">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
+                            </g>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/select.svg b/examples/sites/demos/pc/overviewimage/select.svg
index 587cff8f9f..90bd25cdd8 100644
--- a/examples/sites/demos/pc/overviewimage/select.svg
+++ b/examples/sites/demos/pc/overviewimage/select.svg
@@ -2,56 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>select选择器</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="60.1784653%" x2="128.792906%" y2="24.0763741%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="60.1784653%" x2="128.792906%" y2="24.0763741%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-13" points="68 35 80 35 74 42"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
+        <polygon id="path-5" points="68 35 80 35 74 42"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -59,41 +27,31 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-15">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-7">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="50.1584033%" x2="128.792906%" y2="49.5965613%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="50.1584033%" x2="128.792906%" y2="49.5965613%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -327.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -327.000000)">
             <g id="select选择器" transform="translate(1089.000000, 327.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M26,53 L100,53 C101.104569,53 102,53.8954305 102,55 L102,92 C102,93.1045695 101.104569,94 100,94 L26,94 C24.8954305,94 24,93.1045695 24,92 L24,55 C24,53.8954305 24.8954305,53 26,53 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                <rect id="矩形-2" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="24" y="28" width="64" height="20" rx="4"></rect>
+                <g id="编组"></g>
+                <path d="M26,53 L100,53 C101.104569,53 102,53.8954305 102,55 L102,92 C102,93.1045695 101.104569,94 100,94 L26,94 C24.8954305,94 24,93.1045695 24,92 L24,55 C24,53.8954305 24.8954305,53 26,53 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                <rect id="矩形-2" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)" x="24" y="28" width="64" height="20" rx="4"></rect>
                 <g id="形状结合" transform="translate(74.000000, 38.500000) rotate(-180.000000) translate(-74.000000, -38.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-13"></use>
-                    <path stroke="url(#linearGradient-12)" stroke-width="4.0839988" d="M75.5602428,37.0419994 L74,38.8622826 L72.4397572,37.0419994 L75.5602428,37.0419994 Z" stroke-linejoin="square"></path>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
+                    <path stroke="url(#linearGradient-4)" stroke-width="4.0839988" d="M75.5602428,37.0419994 L74,38.8622826 L72.4397572,37.0419994 L75.5602428,37.0419994 Z" stroke-linejoin="square"></path>
                 </g>
                 <path d="M34,61 L86,61 C87.1045695,61 88,61.8954305 88,63 C88,64.1045695 87.1045695,65 86,65 L34,65 C32.8954305,65 32,64.1045695 32,63 C32,61.8954305 32.8954305,61 34,61 Z" id="形状结合备份" fill="#5073E5"></path>
                 <path d="M34,72 L67,72 C68.1045695,72 69,72.8954305 69,74 C69,75.1045695 68.1045695,76 67,76 L34,76 C32.8954305,76 32,75.1045695 32,74 C32,72.8954305 32.8954305,72 34,72 Z" id="形状结合备份-35" fill="#5073E5"></path>
-                <path d="M34,83 L91,83 C92.1045695,83 93,83.8954305 93,85 C93,86.1045695 92.1045695,87 91,87 L34,87 C32.8954305,87 32,86.1045695 32,85 C32,83.8954305 32.8954305,83 34,83 Z" id="形状结合备份-36" fill="url(#linearGradient-16)" opacity="0.303770519"></path>
+                <path d="M34,83 L91,83 C92.1045695,83 93,83.8954305 93,85 C93,86.1045695 92.1045695,87 91,87 L34,87 C32.8954305,87 32,86.1045695 32,85 C32,83.8954305 32.8954305,83 34,83 Z" id="形状结合备份-36" fill="url(#linearGradient-8)" opacity="0.303770519"></path>
             </g>
         </g>
     </g>
diff --git a/examples/sites/demos/pc/overviewimage/skeleton.svg b/examples/sites/demos/pc/overviewimage/skeleton.svg
new file mode 100644
index 0000000000..98260e4481
--- /dev/null
+++ b/examples/sites/demos/pc/overviewimage/skeleton.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Skeleton 骨架屏</title>
+    <defs>
+        <linearGradient x1="44.0988019%" y1="77.3163192%" x2="128.792906%" y2="-19.5721819%" id="linearGradient-1">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="50.4547982%" x2="128.792906%" y2="48.8416702%" id="linearGradient-2">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="50.4547982%" x2="128.792906%" y2="48.8416702%" id="linearGradient-3">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="51.0826054%" x2="128.792906%" y2="47.2427024%" id="linearGradient-4">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="52.6196379%" x2="128.792906%" y2="43.3280205%" id="linearGradient-5">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-33.3%" y="-32.0%" width="166.7%" height="164.0%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-697.000000, -1597.000000)">
+            <g id="Skeleton-骨架屏" transform="translate(697.000000, 1597.000000)">
+                <g id="编组"></g>
+                <path d="M31,31 L42.5021066,31 L95,31 C97.209139,31 99,32.790861 99,35 L99,89 C99,91.209139 97.209139,93 95,93 L31,93 C28.790861,93 27,91.209139 27,89 L27,35 C27,32.790861 28.790861,31 31,31 Z" id="矩形备份-26" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                <path d="M39,41 L87,41 C88.6568542,41 90,42.3431458 90,44 C90,45.6568542 88.6568542,47 87,47 L39,47 C37.3431458,47 36,45.6568542 36,44 C36,42.3431458 37.3431458,41 39,41 Z" id="形状结合备份-6" stroke="url(#linearGradient-3)" fill="url(#linearGradient-2)"></path>
+                <path d="M39,56 L68,56 C69.6568542,56 71,57.3431458 71,59 C71,60.6568542 69.6568542,62 68,62 L39,62 C37.3431458,62 36,60.6568542 36,59 C36,57.3431458 37.3431458,56 39,56 Z" id="形状结合备份-49" fill="url(#linearGradient-4)" opacity="0.604724702"></path>
+                <path d="M39,69 L55,69 C56.6568542,69 58,70.3431458 58,72 C58,73.6568542 56.6568542,75 55,75 L39,75 C37.3431458,75 36,73.6568542 36,72 C36,70.3431458 37.3431458,69 39,69 Z" id="形状结合备份-50" fill="url(#linearGradient-5)" opacity="0.303770519"></path>
+                <g id="loading0" filter="url(#filter-6)" transform="translate(66.000000, 64.000000)" fill="#5073E5" fill-rule="nonzero">
+                    <path d="M9.31578947,3.28125 C9.31578947,5.09343434 10.800319,6.5625 12.6315789,6.5625 C14.4628389,6.5625 15.9473684,5.09343434 15.9473684,3.28125 C15.9473684,1.46906566 14.4628389,0 12.6315789,0 C10.800319,0 9.31578947,1.46906566 9.31578947,3.28125 L9.31578947,3.28125 Z M2.68421053,6.09375 C2.68421053,7.73334535 4.02735628,9.0625 5.68421053,9.0625 C7.34106478,9.0625 8.68421053,7.73334535 8.68421053,6.09375 C8.68421053,5.03311777 8.11241378,4.05305317 7.18421053,3.52273705 C6.2560073,2.99242093 5.11241375,2.99242093 4.18421053,3.52273705 C3.25600728,4.05305317 2.68421053,5.03311777 2.68421053,6.09375 L2.68421053,6.09375 Z M5.36842105,13.125 C5.36842105,11.71875 4.10526316,10.46875 2.68421053,10.46875 C1.26315789,10.46875 0,11.71875 0,13.125 C0,14.53125 1.26315789,15.78125 2.68421053,15.78125 C4.10526316,15.78125 5.36842105,14.6875 5.36842105,13.125 Z M3.47368421,20.3125 C3.47368421,21.0940185 3.89500813,21.8161714 4.57894736,22.2069306 C5.26288659,22.5976898 6.10553447,22.5976898 6.78947369,22.2069306 C7.47341292,21.8161714 7.89473684,21.0940185 7.89473684,20.3125 C7.89473684,19.1043771 6.9050505,18.125 5.68421053,18.125 C4.46337055,18.125 3.47368421,19.1043771 3.47368421,20.3125 L3.47368421,20.3125 Z M10.7368421,23.125 C10.7368421,24.1605339 11.5851447,25 12.6315789,25 C13.6780132,25 14.5263158,24.1605339 14.5263158,23.125 C14.5263158,22.0894661 13.6780132,21.25 12.6315789,21.25 C11.5851447,21.25 10.7368421,22.0894661 10.7368421,23.125 L10.7368421,23.125 Z M18.1578947,20.15625 C18.1578947,21.0191949 18.8648136,21.71875 19.7368421,21.71875 C20.6088707,21.71875 21.3157895,21.0191949 21.3157895,20.15625 C21.3157895,19.2933051 20.6088707,18.59375 19.7368421,18.59375 C18.8648136,18.59375 18.1578947,19.2933051 18.1578947,20.15625 Z M21.4736842,13.125 C21.4736842,13.8153559 22.0392193,14.3749999 22.7368421,14.3749999 C23.4344649,14.3749999 24,13.8153559 24,13.125 C24,12.678418 23.7592435,12.2657592 23.3684211,12.0424682 C22.9775987,11.8191772 22.4960856,11.8191772 22.1052631,12.0424682 C21.7144407,12.2657592 21.4736842,12.678418 21.4736842,13.125 Z M18.7894737,6.25 C18.7894737,6.5849365 18.9700411,6.8944306 19.2631579,7.06189886 C19.5562747,7.22936712 19.9174095,7.22936712 20.2105263,7.06189886 C20.5036431,6.8944306 20.6842105,6.5849365 20.6842105,6.25 C20.6842105,5.9150635 20.5036431,5.6055694 20.2105263,5.43810114 C19.9174095,5.27063288 19.5562747,5.27063288 19.2631579,5.43810114 C18.9700411,5.6055694 18.7894737,5.9150635 18.7894737,6.25 L18.7894737,6.25 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/slider.svg b/examples/sites/demos/pc/overviewimage/slider.svg
index 81127cf53e..03380f31ad 100644
--- a/examples/sites/demos/pc/overviewimage/slider.svg
+++ b/examples/sites/demos/pc/overviewimage/slider.svg
@@ -1,127 +1,53 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Slider滑块</title>
+    <title>SlideBar 滚动块</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="0%" y1="62.0508917%" x2="128.792906%" y2="39.2186485%" id="linearGradient-9">
-            <stop stop-color="#CDD1E5" offset="0%"></stop>
-            <stop stop-color="#CFDEE8" offset="100%"></stop>
-        </linearGradient>
-        <rect id="path-10" x="45" y="14" width="59" height="20" rx="10"></rect>
-        <filter x="-3.8%" y="-11.2%" width="107.6%" height="122.5%" filterUnits="objectBoundingBox" id="filter-11">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="1.5" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.151193081   0 0 0 0 0.236114382   0 0 0 0 0.519185384  0 0 0 0.561357832 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="65.089114%" x2="128.792906%" y2="11.5693982%" id="linearGradient-12">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="65.089114%" x2="128.792906%" y2="11.5693982%" id="linearGradient-13">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="71.8784339%" y1="24.5711539%" x2="14.9255499%" y2="81.0703648%" id="linearGradient-14">
-            <stop stop-color="#F1F7FF" offset="0%"></stop>
-            <stop stop-color="#D2DCE9" offset="68.056194%"></stop>
-            <stop stop-color="#EFF4FB" offset="100%"></stop>
-        </linearGradient>
-        <circle id="path-15" cx="51" cy="24" r="15"></circle>
-        <filter x="-11.7%" y="-8.3%" width="123.3%" height="123.3%" filterUnits="objectBoundingBox" id="filter-16">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+        <path d="M80.9909047,39 L45.0023935,39 C43.347056,39 42,40.5069389 42,42.3587494 L42,82.6412506 C42,84.5005583 43.347056,86 45.0023935,86 L80.9976065,86 C82.652944,86 84,84.5005583 84,82.6412506 L84,42.3587494 C83.9932982,40.5069389 82.652944,39 80.9909047,39 Z" id="path-1"></path>
+        <filter x="-9.5%" y="-4.3%" width="119.0%" height="117.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.214740491   0 0 0 0 0.337753528   0 0 0 0 0.747796985  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
-            <stop stop-color="#FFCC00" offset="0%"></stop>
-            <stop stop-color="#FF9D00" offset="100%"></stop>
-        </linearGradient>
-        <circle id="path-18" cx="56" cy="34" r="8"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-19">
+        <rect id="path-3" x="48" y="61" width="30" height="4" rx="2"></rect>
+        <filter x="-13.3%" y="-50.0%" width="126.7%" height="300.0%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
-            <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-46.9%" y="-34.4%" width="193.8%" height="193.8%" filterUnits="objectBoundingBox" id="filter-20">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <polygon id="path-21" points="55.7129876 33.8022814 54.2754034 47.814413 58.9449685 45.9202277 61.4194729 52.8022814 63.8096817 51.7804537 61.2116343 44.9762941 65.8108161 43.4874666"></polygon>
-        <filter x="-47.7%" y="-18.4%" width="195.4%" height="157.9%" filterUnits="objectBoundingBox" id="filter-22">
+        <rect id="path-5" x="48" y="73" width="30" height="4" rx="2"></rect>
+        <filter x="-13.3%" y="-50.0%" width="126.7%" height="300.0%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
+        <linearGradient x1="47.5828693%" y1="86.8386573%" x2="82.2735745%" y2="-43.8247114%" id="linearGradient-7">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-697.000000, -573.000000)">
-            <g id="Slider滑块" transform="translate(697.000000, 573.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <g id="编组" transform="translate(10.000000, 38.000000)">
-                    <g id="矩形" opacity="0.602296375">
-                        <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    </g>
-                    <path d="M51,0 C64.254834,0 75,10.745166 75,24 C75,37.254834 64.254834,48 51,48 C41.314225,48 32.9685476,42.26236 29.1764073,34.0005194 L10,34 C4.4771525,34 6.76353751e-16,29.5228475 0,24 C-6.76353751e-16,18.4771525 4.4771525,14 10,14 L29.1759494,14.0004783 C32.9678758,5.73810191 41.3138351,0 51,0 Z" id="形状结合" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
-                    <g id="椭圆形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="url(#linearGradient-14)" fill-rule="evenodd" xlink:href="#path-15"></use>
-                    </g>
-                    <g id="椭圆形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
-                        <circle stroke="url(#linearGradient-17)" stroke-width="4" stroke-linejoin="square" cx="56" cy="34" r="6"></circle>
-                    </g>
-                    <g id="路径-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                        <use fill="#000000" fill-rule="evenodd" xlink:href="#path-21"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1870.000000, -2584.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-17" transform="translate(1175.000000, 2240.000000)">
+                    <g id="SlideBar-滚动块" transform="translate(99.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="路径备份-2">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                        <g id="矩形备份-6">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill-opacity="0.6" fill="#D6DEF9" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                        <g id="矩形备份-20">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                            <use fill-opacity="0.6" fill="#D6DEF9" fill-rule="evenodd" xlink:href="#path-5"></use>
+                        </g>
+                        <rect id="矩形备份-21" fill="#FFFFFF" fill-rule="nonzero" x="48" y="49" width="19.2747813" height="4" rx="2"></rect>
+                        <path d="M36.853678,50 L23.1437689,50 C22.5131642,50 22,50.8015632 22,51.7865688 L22,73.2134312 C22,74.2024246 22.5131642,75 23.1437689,75 L36.8562311,75 C37.4868358,75 38,74.2024246 38,73.2134312 L38,51.7865688 C37.9974469,50.8015632 37.4868358,50 36.853678,50 Z" id="路径备份-3" fill="url(#linearGradient-7)" opacity="0.604724702"></path>
+                        <path d="M102.853678,50 L89.1437689,50 C88.5131642,50 88,50.8015632 88,51.7865688 L88,73.2134312 C88,74.2024246 88.5131642,75 89.1437689,75 L102.856231,75 C103.486836,75 104,74.2024246 104,73.2134312 L104,51.7865688 C103.997447,50.8015632 103.486836,50 102.853678,50 Z" id="路径备份-4" fill="url(#linearGradient-7)" opacity="0.604724702"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/split.svg b/examples/sites/demos/pc/overviewimage/split.svg
index aa67ea18e1..ac4a351872 100644
--- a/examples/sites/demos/pc/overviewimage/split.svg
+++ b/examples/sites/demos/pc/overviewimage/split.svg
@@ -2,81 +2,41 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Split 面板分割</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="45.7177863%" y1="86.8386573%" x2="107.176197%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="45.7177863%" y1="86.8386573%" x2="107.176197%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.7351685%" y1="86.8386573%" x2="66.8880544%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="48.7351685%" y1="86.8386573%" x2="66.8880544%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="48.7351685%" y1="86.8386573%" x2="66.8880544%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="48.7351685%" y1="86.8386573%" x2="66.8880544%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-12">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -1434.000000)">
-            <g id="编组-14备份" transform="translate(598.000000, 1401.000000)">
-                <g id="Split-面板分割" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-2" transform="translate(29.000000, 38.000000)">
-                        <path d="M22,0 L66,0 C67.1045695,-2.02906125e-16 68,0.8954305 68,2 L68,52 C68,53.1045695 67.1045695,54 66,54 L22,54 L22,54 L22,0 Z" id="形状结合备份-6" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M2,0 L25,0 L25,0 L25,54 L2,54 C0.8954305,54 1.3527075e-16,53.1045695 0,52 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="形状结合备份-31" stroke="url(#linearGradient-11)" stroke-width="0.5" fill="url(#linearGradient-10)"></path>
-                        <path d="M25.5,6 C27.9852814,6 30,8.01471863 30,10.5 L30,26.5 C30,28.9852814 27.9852814,31 25.5,31 C23.0147186,31 21,28.9852814 21,26.5 L21,10.5 C21,8.01471863 23.0147186,6 25.5,6 Z" id="形状结合备份-32" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        <g id="编组-11" transform="translate(23.500000, 10.000000)" fill="url(#linearGradient-12)">
-                            <path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 C0.8954305,4 1.3527075e-16,3.1045695 0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="形状结合备份-33"></path>
-                            <path d="M2,7 C3.1045695,7 4,7.8954305 4,9 C4,10.1045695 3.1045695,11 2,11 C0.8954305,11 1.3527075e-16,10.1045695 0,9 C-1.3527075e-16,7.8954305 0.8954305,7 2,7 Z" id="形状结合备份-45"></path>
-                            <path d="M2,13 C3.1045695,13 4,13.8954305 4,15 C4,16.1045695 3.1045695,17 2,17 C0.8954305,17 1.3527075e-16,16.1045695 0,15 C-1.3527075e-16,13.8954305 0.8954305,13 2,13 Z" id="形状结合备份-46"></path>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -1485.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份" transform="translate(2.000000, 1141.000000)">
+                    <g id="Split-面板分割" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-2" transform="translate(29.000000, 38.000000)">
+                            <path d="M22,0 L66,0 C67.1045695,-2.02906125e-16 68,0.8954305 68,2 L68,52 C68,53.1045695 67.1045695,54 66,54 L22,54 L22,54 L22,0 Z" id="形状结合备份-6" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                            <path d="M2,0 L25,0 L25,0 L25,54 L2,54 C0.8954305,54 1.3527075e-16,53.1045695 0,52 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="形状结合备份-31" stroke="url(#linearGradient-3)" stroke-width="0.5" fill="url(#linearGradient-2)"></path>
+                            <path d="M25.5,6 C27.9852814,6 30,8.01471863 30,10.5 L30,26.5 C30,28.9852814 27.9852814,31 25.5,31 C23.0147186,31 21,28.9852814 21,26.5 L21,10.5 C21,8.01471863 23.0147186,6 25.5,6 Z" id="形状结合备份-32" fill="#FFFFFF" fill-rule="nonzero"></path>
+                            <g id="编组-11" transform="translate(23.500000, 10.000000)" fill="url(#linearGradient-4)">
+                                <path d="M2,0 C3.1045695,-2.02906125e-16 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 C0.8954305,4 1.3527075e-16,3.1045695 0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="形状结合备份-33"></path>
+                                <path d="M2,7 C3.1045695,7 4,7.8954305 4,9 C4,10.1045695 3.1045695,11 2,11 C0.8954305,11 1.3527075e-16,10.1045695 0,9 C-1.3527075e-16,7.8954305 0.8954305,7 2,7 Z" id="形状结合备份-45"></path>
+                                <path d="M2,13 C3.1045695,13 4,13.8954305 4,15 C4,16.1045695 3.1045695,17 2,17 C0.8954305,17 1.3527075e-16,16.1045695 0,15 C-1.3527075e-16,13.8954305 0.8954305,13 2,13 Z" id="形状结合备份-46"></path>
+                            </g>
+                            <path d="M53,41 C53.236906,41 53.4641914,41.0411906 53.6750852,41.1168006 L60.0958313,41.1170423 C60.648116,41.1170423 61.0958313,41.5647576 61.0958313,42.1170423 C61.0958313,42.3999726 60.9759798,42.6696616 60.7659819,42.8592675 L54.1441845,48.8380483 C53.7342649,49.2081623 53.1019227,49.1758934 52.7318088,48.7659738 C52.5658847,48.5822046 52.4740339,48.3434154 52.4740339,48.0958232 L52.474,45 L35,45 C33.8954305,45 33,44.1045695 33,43 C33,41.8954305 33.8954305,41 35,41 L53,41 Z" id="形状结合" fill="#5073E5"></path>
+                            <path d="M56,30.1170423 C56.5522847,30.1170423 57,30.5647576 57,31.1170423 C57,31.3999726 56.8801486,31.6696616 56.6701506,31.8592675 L50.0483533,37.8380483 C49.6384336,38.2081623 49.0060915,38.1758934 48.6359775,37.7659738 C48.4700534,37.5822046 48.3782027,37.3434154 48.3782027,37.0958232 L48.3779156,34.2120423 L31.0479156,34.2128736 C29.9433461,34.2128736 29.0479156,33.3174431 29.0479156,32.2128736 C29.0479156,31.1083041 29.9433461,30.2128736 31.0479156,30.2128736 L48.3779156,30.2120423 L48.3782027,30.1170423 L56,30.1170423 Z" id="形状结合备份-11" fill="#5073E5" transform="translate(43.023958, 34.106437) scale(-1, -1) translate(-43.023958, -34.106437) "></path>
                         </g>
-                        <path d="M53,41 C53.236906,41 53.4641914,41.0411906 53.6750852,41.1168006 L60.0958313,41.1170423 C60.648116,41.1170423 61.0958313,41.5647576 61.0958313,42.1170423 C61.0958313,42.3999726 60.9759798,42.6696616 60.7659819,42.8592675 L54.1441845,48.8380483 C53.7342649,49.2081623 53.1019227,49.1758934 52.7318088,48.7659738 C52.5658847,48.5822046 52.4740339,48.3434154 52.4740339,48.0958232 L52.474,45 L35,45 C33.8954305,45 33,44.1045695 33,43 C33,41.8954305 33.8954305,41 35,41 L53,41 Z" id="形状结合" fill="#5073E5"></path>
-                        <path d="M56,30.1170423 C56.5522847,30.1170423 57,30.5647576 57,31.1170423 C57,31.3999726 56.8801486,31.6696616 56.6701506,31.8592675 L50.0483533,37.8380483 C49.6384336,38.2081623 49.0060915,38.1758934 48.6359775,37.7659738 C48.4700534,37.5822046 48.3782027,37.3434154 48.3782027,37.0958232 L48.3779156,34.2120423 L31.0479156,34.2128736 C29.9433461,34.2128736 29.0479156,33.3174431 29.0479156,32.2128736 C29.0479156,31.1083041 29.9433461,30.2128736 31.0479156,30.2128736 L48.3779156,30.2120423 L48.3782027,30.1170423 L56,30.1170423 Z" id="形状结合备份-11" fill="#5073E5" transform="translate(43.023958, 34.106437) scale(-1, -1) translate(-43.023958, -34.106437) "></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/steps.svg b/examples/sites/demos/pc/overviewimage/steps.svg
index 72ae25852a..e2e214f881 100644
--- a/examples/sites/demos/pc/overviewimage/steps.svg
+++ b/examples/sites/demos/pc/overviewimage/steps.svg
@@ -2,89 +2,47 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Steps 步骤导航</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="50.4258133%" x2="128.792906%" y2="48.9154922%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="50.4258133%" x2="128.792906%" y2="48.9154922%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M98.2128736,84 C98.7651583,84 99.2128736,84.4477153 99.2128736,85 C99.2128736,85.2829303 99.0930222,85.5526192 98.8830242,85.7422251 L92.2612268,91.721006 C91.8513072,92.09112 91.2189651,92.0588511 90.8488511,91.6489314 C90.682927,91.4651622 90.5910762,91.2263731 90.5910762,90.9787808 L90.591,88.023 L27,88.023329 C25.8954305,88.023329 25,87.1278985 25,86.023329 C25,84.9187595 25.8954305,84.023329 27,84.023329 L90.591,84.023 L90.5910762,84 L98.2128736,84 Z" id="path-10"></path>
-        <filter x="-5.4%" y="-25.1%" width="110.8%" height="200.3%" filterUnits="objectBoundingBox" id="filter-11">
+        <path d="M98.2128736,84 C98.7651583,84 99.2128736,84.4477153 99.2128736,85 C99.2128736,85.2829303 99.0930222,85.5526192 98.8830242,85.7422251 L92.2612268,91.721006 C91.8513072,92.09112 91.2189651,92.0588511 90.8488511,91.6489314 C90.682927,91.4651622 90.5910762,91.2263731 90.5910762,90.9787808 L90.591,88.023 L27,88.023329 C25.8954305,88.023329 25,87.1278985 25,86.023329 C25,84.9187595 25.8954305,84.023329 27,84.023329 L90.591,84.023 L90.5910762,84 L98.2128736,84 Z" id="path-2"></path>
+        <filter x="-5.4%" y="-25.1%" width="110.8%" height="200.3%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="53.5975251%" x2="128.792906%" y2="40.8374305%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-14">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M35.4999998,54 C32.4559858,54 29.988372,56.4624079 29.988372,59.5 C29.988372,62.5375921 32.4559858,65 35.4999998,65 C38.5440138,65 41.0116276,62.5375921 41.0116276,59.5 C41.0116276,56.4624079 38.5440138,54 35.4999998,54 Z" id="path-15"></path>
-        <filter x="-31.8%" y="-22.7%" width="163.5%" height="163.6%" filterUnits="objectBoundingBox" id="filter-16">
+        <path d="M35.4999998,54 C32.4559858,54 29.988372,56.4624079 29.988372,59.5 C29.988372,62.5375921 32.4559858,65 35.4999998,65 C38.5440138,65 41.0116276,62.5375921 41.0116276,59.5 C41.0116276,56.4624079 38.5440138,54 35.4999998,54 Z" id="path-7"></path>
+        <filter x="-31.8%" y="-22.7%" width="163.5%" height="163.6%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -3209.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -3209.000000)">
             <g id="Steps-步骤导航" transform="translate(1089.000000, 3209.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="形状结合" opacity="0.604724702">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
                 </g>
-                <path d="M35.5,47 C41.4205357,47 46.3796429,51.1160714 47.6719643,56.6428571 L59.9514286,56.6428571 C61.1033036,53.6154464 64.0326786,51.4642857 67.4642857,51.4642857 C70.8959821,51.4642857 73.8252679,53.6154464 74.9772321,56.6428571 L87.4513393,56.6428571 C88.6033036,53.6154464 91.5325893,51.4642857 94.9642857,51.4642857 C99.4023214,51.4642857 103,55.0619643 103,59.5 C103,63.9380357 99.4023214,67.5357143 94.9642857,67.5357143 C91.5326786,67.5357143 88.6033929,65.3846429 87.4514286,62.3573214 L74.9771429,62.3573214 C73.8251786,65.3846429 70.8958929,67.5357143 67.4642857,67.5357143 C64.0326786,67.5357143 61.1033929,65.3846429 59.9514286,62.3573214 L47.6719643,62.3573214 C46.3796429,67.8839286 41.4204464,72 35.5,72 C28.5964286,72 23,66.4035714 23,59.5 C23,52.5964286 28.5964286,47 35.5,47 Z M35.5,64 C37.9852814,64 40,61.9852814 40,59.5 C40,57.0147186 37.9852814,55 35.5,55 C33.0147186,55 31,57.0147186 31,59.5 C31,61.9852814 33.0147186,64 35.5,64 Z M67.4642858,56.2857143 C65.680045,56.2857143 64.2337662,57.7247253 64.2337662,59.5 C64.2337662,61.2752747 65.680045,62.7142857 67.4642858,62.7142857 C69.2485266,62.7142857 70.6948053,61.2752747 70.6948053,59.5 C70.6948053,57.7247253 69.2485266,56.2857143 67.4642858,56.2857143 Z M94.9642858,56.2857143 C93.180045,56.2857143 91.7337662,57.7247253 91.7337662,59.5 C91.7337662,61.2752747 93.180045,62.7142857 94.9642858,62.7142857 C96.7485266,62.7142857 98.1948053,61.2752747 98.1948053,59.5 C98.1948053,57.7247253 96.7485266,56.2857143 94.9642858,56.2857143 Z" id="形状" stroke="url(#linearGradient-13)" fill="url(#linearGradient-12)"></path>
+                <path d="M35.5,47 C41.4205357,47 46.3796429,51.1160714 47.6719643,56.6428571 L59.9514286,56.6428571 C61.1033036,53.6154464 64.0326786,51.4642857 67.4642857,51.4642857 C70.8959821,51.4642857 73.8252679,53.6154464 74.9772321,56.6428571 L87.4513393,56.6428571 C88.6033036,53.6154464 91.5325893,51.4642857 94.9642857,51.4642857 C99.4023214,51.4642857 103,55.0619643 103,59.5 C103,63.9380357 99.4023214,67.5357143 94.9642857,67.5357143 C91.5326786,67.5357143 88.6033929,65.3846429 87.4514286,62.3573214 L74.9771429,62.3573214 C73.8251786,65.3846429 70.8958929,67.5357143 67.4642857,67.5357143 C64.0326786,67.5357143 61.1033929,65.3846429 59.9514286,62.3573214 L47.6719643,62.3573214 C46.3796429,67.8839286 41.4204464,72 35.5,72 C28.5964286,72 23,66.4035714 23,59.5 C23,52.5964286 28.5964286,47 35.5,47 Z M35.5,64 C37.9852814,64 40,61.9852814 40,59.5 C40,57.0147186 37.9852814,55 35.5,55 C33.0147186,55 31,57.0147186 31,59.5 C31,61.9852814 33.0147186,64 35.5,64 Z M67.4642858,56.2857143 C65.680045,56.2857143 64.2337662,57.7247253 64.2337662,59.5 C64.2337662,61.2752747 65.680045,62.7142857 67.4642858,62.7142857 C69.2485266,62.7142857 70.6948053,61.2752747 70.6948053,59.5 C70.6948053,57.7247253 69.2485266,56.2857143 67.4642858,56.2857143 Z M94.9642858,56.2857143 C93.180045,56.2857143 91.7337662,57.7247253 91.7337662,59.5 C91.7337662,61.2752747 93.180045,62.7142857 94.9642858,62.7142857 C96.7485266,62.7142857 98.1948053,61.2752747 98.1948053,59.5 C98.1948053,57.7247253 96.7485266,56.2857143 94.9642858,56.2857143 Z" id="形状" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)"></path>
                 <g id="路径">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                    <use fill="url(#linearGradient-14)" fill-rule="evenodd" xlink:href="#path-15"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                    <use fill="url(#linearGradient-6)" fill-rule="evenodd" xlink:href="#path-7"></use>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/switch.svg b/examples/sites/demos/pc/overviewimage/switch.svg
index 1f15d28a86..4d4a564e6d 100644
--- a/examples/sites/demos/pc/overviewimage/switch.svg
+++ b/examples/sites/demos/pc/overviewimage/switch.svg
@@ -2,112 +2,70 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Switch开关</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="109.750141%" y1="43.3182461%" x2="10.5359863%" y2="52.5042261%" id="linearGradient-9">
+        <linearGradient x1="109.750141%" y1="43.3182461%" x2="10.5359863%" y2="52.5042261%" id="linearGradient-1">
             <stop stop-color="#FFFFFF" offset="0%"></stop>
             <stop stop-color="#E5EAF3" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-10" x="0" y="0" width="65" height="32" rx="16"></rect>
-        <filter x="-18.5%" y="-37.5%" width="136.9%" height="175.0%" filterUnits="objectBoundingBox" id="filter-11">
+        <rect id="path-2" x="0" y="0" width="65" height="32" rx="16"></rect>
+        <filter x="-18.5%" y="-37.5%" width="136.9%" height="175.0%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.596087262 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <circle id="path-12" cx="18" cy="16" r="11"></circle>
-        <filter x="-22.7%" y="-18.2%" width="145.5%" height="145.5%" filterUnits="objectBoundingBox" id="filter-13">
+        <circle id="path-4" cx="18" cy="16" r="11"></circle>
+        <filter x="-22.7%" y="-18.2%" width="145.5%" height="145.5%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.616646842   0 0 0 0 0.660191387   0 0 0 0 0.805339869  0 0 0 0.511233883 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="58.9284698%" x2="128.792906%" y2="27.2599989%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="58.9284698%" x2="128.792906%" y2="27.2599989%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="58.9284698%" x2="128.792906%" y2="27.2599989%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="58.9284698%" x2="128.792906%" y2="27.2599989%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-16" x="0" y="0" width="65" height="32" rx="16"></rect>
-        <filter x="-19.2%" y="-39.1%" width="138.5%" height="178.1%" filterUnits="objectBoundingBox" id="filter-17">
+        <rect id="path-8" x="0" y="0" width="65" height="32" rx="16"></rect>
+        <filter x="-19.2%" y="-39.1%" width="138.5%" height="178.1%" filterUnits="objectBoundingBox" id="filter-9">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <circle id="path-18" cx="47" cy="16" r="11"></circle>
-        <filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-19">
+        <circle id="path-10" cx="47" cy="16" r="11"></circle>
+        <filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.214740491   0 0 0 0 0.337753528   0 0 0 0 0.747796985  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -573.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -573.000000)">
             <g id="Switch开关" transform="translate(1089.000000, 573.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-7" transform="translate(30.000000, 25.000000)">
                     <g id="编组-9" transform="translate(0.000000, 40.000000)">
                         <g id="矩形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                            <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
                         </g>
                         <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-12"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-4"></use>
                         </g>
                         <rect id="矩形" stroke="#92A2C6" stroke-width="2" x="14" y="12" width="8" height="8" rx="4"></rect>
                     </g>
                     <g id="编组-10">
                         <g id="矩形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use stroke="url(#linearGradient-15)" stroke-width="1" fill="url(#linearGradient-14)" fill-rule="evenodd" xlink:href="#path-16"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                            <use stroke="url(#linearGradient-7)" stroke-width="1" fill="url(#linearGradient-6)" fill-rule="evenodd" xlink:href="#path-8"></use>
                         </g>
                         <g id="椭圆形备份">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-18"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-10"></use>
                         </g>
                         <rect id="矩形备份-2" fill="#92A2C6" x="46" y="11" width="2" height="10"></rect>
                     </g>
diff --git a/examples/sites/demos/pc/overviewimage/tabs.svg b/examples/sites/demos/pc/overviewimage/tabs.svg
index d2f36818f4..23523f03c2 100644
--- a/examples/sites/demos/pc/overviewimage/tabs.svg
+++ b/examples/sites/demos/pc/overviewimage/tabs.svg
@@ -2,79 +2,39 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Tabs 页签</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="62.8630849%" x2="128.792906%" y2="17.2388921%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="62.8630849%" x2="128.792906%" y2="17.2388921%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="60.9602617%" x2="128.792906%" y2="22.0852098%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.6880098%" x2="128.792906%" y2="25.3255197%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="59.6880098%" x2="128.792906%" y2="25.3255197%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="63.6491055%" x2="128.792906%" y2="15.2369689%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="63.6491055%" x2="128.792906%" y2="15.2369689%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -884.000000)">
-            <g id="编组-25备份-11" transform="translate(1380.000000, 851.000000)">
-                <g id="Tabs-页签" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -935.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-11" transform="translate(784.000000, 591.000000)">
+                    <g id="Tabs-页签" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-19" transform="translate(24.000000, 33.000000)">
+                            <path d="M8,18 L72,18 C73.1045695,18 74,18.8954305 74,20 L74,55 C74,56.1045695 73.1045695,57 72,57 L10,57 C8.8954305,57 8,56.1045695 8,55 L8,18 L8,18 Z" id="矩形备份" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                            <path d="M0,14 L64,14 C65.1045695,14 66,14.8954305 66,16 L66,48 C66,49.1045695 65.1045695,50 64,50 L2,50 C0.8954305,50 1.3527075e-16,49.1045695 0,48 L0,14 L0,14 Z" id="矩形" fill="url(#linearGradient-2)"></path>
+                            <path d="M9,24 L55,24 C56.1045695,24 57,24.8954305 57,26 C57,27.1045695 56.1045695,28 55,28 L9,28 C7.8954305,28 7,27.1045695 7,26 C7,24.8954305 7.8954305,24 9,24 Z" id="形状结合备份" fill="#FFFFFF"></path>
+                            <path d="M9,34.6 L41,34.6 C42.1045695,34.6 43,35.4954305 43,36.6 C43,37.7045695 42.1045695,38.6 41,38.6 L9,38.6 C7.8954305,38.6 7,37.7045695 7,36.6 C7,35.4954305 7.8954305,34.6 9,34.6 Z" id="形状结合备份-35" fill="#FFFFFF" opacity="0.6"></path>
+                            <rect id="矩形-2" fill="url(#linearGradient-3)" opacity="0.303770519" x="26" y="0" width="23" height="12" rx="2"></rect>
+                            <rect id="矩形-2备份-3" fill="url(#linearGradient-3)" opacity="0.303770519" x="51" y="0" width="23" height="12" rx="2"></rect>
+                            <path d="M2,1 L21,1 C22.1045695,1 23,1.8954305 23,3 L23,15 L23,15 L0,15 L0,3 C-3.57315355e-16,1.8954305 0.8954305,1 2,1 Z" id="矩形-2备份" fill="url(#linearGradient-4)"></path>
+                            <path d="M6,6 L17,6 C18.1045695,6 19,6.8954305 19,8 C19,9.1045695 18.1045695,10 17,10 L6,10 C4.8954305,10 4,9.1045695 4,8 C4,6.8954305 4.8954305,6 6,6 Z" id="形状结合备份-41" fill="#FFFFFF" opacity="0.6"></path>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-19" transform="translate(24.000000, 33.000000)">
-                        <path d="M8,18 L72,18 C73.1045695,18 74,18.8954305 74,20 L74,55 C74,56.1045695 73.1045695,57 72,57 L10,57 C8.8954305,57 8,56.1045695 8,55 L8,18 L8,18 Z" id="矩形备份" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                        <path d="M0,14 L64,14 C65.1045695,14 66,14.8954305 66,16 L66,48 C66,49.1045695 65.1045695,50 64,50 L2,50 C0.8954305,50 1.3527075e-16,49.1045695 0,48 L0,14 L0,14 Z" id="矩形" fill="url(#linearGradient-10)"></path>
-                        <path d="M9,24 L55,24 C56.1045695,24 57,24.8954305 57,26 C57,27.1045695 56.1045695,28 55,28 L9,28 C7.8954305,28 7,27.1045695 7,26 C7,24.8954305 7.8954305,24 9,24 Z" id="形状结合备份" fill="#FFFFFF"></path>
-                        <path d="M9,34.6 L41,34.6 C42.1045695,34.6 43,35.4954305 43,36.6 C43,37.7045695 42.1045695,38.6 41,38.6 L9,38.6 C7.8954305,38.6 7,37.7045695 7,36.6 C7,35.4954305 7.8954305,34.6 9,34.6 Z" id="形状结合备份-35" fill="#FFFFFF" opacity="0.6"></path>
-                        <rect id="矩形-2" fill="url(#linearGradient-11)" opacity="0.303770519" x="26" y="0" width="23" height="12" rx="2"></rect>
-                        <rect id="矩形-2备份-3" fill="url(#linearGradient-11)" opacity="0.303770519" x="51" y="0" width="23" height="12" rx="2"></rect>
-                        <path d="M2,1 L21,1 C22.1045695,1 23,1.8954305 23,3 L23,15 L23,15 L0,15 L0,3 C-3.57315355e-16,1.8954305 0.8954305,1 2,1 Z" id="矩形-2备份" fill="url(#linearGradient-12)"></path>
-                        <path d="M6,6 L17,6 C18.1045695,6 19,6.8954305 19,8 C19,9.1045695 18.1045695,10 17,10 L6,10 C4.8954305,10 4,9.1045695 4,8 C4,6.8954305 4.8954305,6 6,6 Z" id="形状结合备份-41" fill="#FFFFFF" opacity="0.6"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/tag-group.svg b/examples/sites/demos/pc/overviewimage/tag-group.svg
index f6da0d5a88..48f97bd470 100644
--- a/examples/sites/demos/pc/overviewimage/tag-group.svg
+++ b/examples/sites/demos/pc/overviewimage/tag-group.svg
@@ -2,89 +2,47 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>标签管理 Tag</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="64.1062317%" x2="128.792906%" y2="14.07271%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="64.1062317%" x2="128.792906%" y2="14.07271%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="74.6269726%" x2="128.792906%" y2="-12.7226607%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="74.6269726%" x2="128.792906%" y2="-12.7226607%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.2961127%" x2="128.792906%" y2="-42.4428997%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="86.2961127%" x2="128.792906%" y2="-42.4428997%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.2961127%" x2="128.792906%" y2="-42.4428997%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="86.2961127%" x2="128.792906%" y2="-42.4428997%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M12.8131868,0.561797753 L20.1868132,4.93133583 C21.2747253,5.55555556 22,6.80399501 22,8.1772784 L22,16.9163546 C22,18.289638 21.2747253,19.5380774 20.1868132,20.1622971 L12.8131868,24.5318352 C11.7252747,25.1560549 10.2747253,25.1560549 9.18681319,24.5318352 L1.81318681,20.1622971 C0.725274725,19.5380774 0,18.289638 0,16.9163546 L0,8.1772784 C0,6.80399501 0.725274725,5.55555556 1.81318681,4.93133583 L9.18681319,0.561797753 C10.2747253,-0.187265918 11.7252747,-0.187265918 12.8131868,0.561797753 L12.8131868,0.561797753 Z" id="path-14"></path>
-        <filter x="-15.9%" y="-10.0%" width="131.8%" height="128.0%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M12.8131868,0.561797753 L20.1868132,4.93133583 C21.2747253,5.55555556 22,6.80399501 22,8.1772784 L22,16.9163546 C22,18.289638 21.2747253,19.5380774 20.1868132,20.1622971 L12.8131868,24.5318352 C11.7252747,25.1560549 10.2747253,25.1560549 9.18681319,24.5318352 L1.81318681,20.1622971 C0.725274725,19.5380774 0,18.289638 0,16.9163546 L0,8.1772784 C0,6.80399501 0.725274725,5.55555556 1.81318681,4.93133583 L9.18681319,0.561797753 C10.2747253,-0.187265918 11.7252747,-0.187265918 12.8131868,0.561797753 L12.8131868,0.561797753 Z" id="path-6"></path>
+        <filter x="-15.9%" y="-10.0%" width="131.8%" height="128.0%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影备份" transform="translate(-698.000000, -1434.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-3" transform="translate(-698.000000, -1434.000000)">
             <g id="编组-14备份" transform="translate(598.000000, 1401.000000)">
                 <g id="标签管理-Tag" transform="translate(100.000000, 33.000000)">
-                    <g id="背景" transform="translate(9.000000, 1.000000)">
-                        <g id="编组">
-                            <polygon id="多边形" fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon id="多边形" fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="53.5" cy="89" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="标签管理-(1)" transform="translate(30.903138, 31.000000)">
-                        <path d="M11.9387753,30.3468787 L5.31628502,17.7973879 C4.5637293,16.3034009 4.71424044,14.3612178 5.76781845,13.0166296 L14.4974648,1.81172707 C15.4005317,0.61653747 16.9056431,-0.130456029 18.4107545,0.0189426707 L59.5002968,3.60451147 C62.0589862,3.75391016 63.86512,5.99489066 63.5640977,8.53466856 L61.4569417,32.2890618 C61.3064305,34.8288397 59.0487634,36.6216241 56.4900739,36.3228267 L15.5510428,32.7372579 C14.0459314,32.5878592 12.6913311,31.691467 11.9387753,30.3468787 L11.9387753,30.3468787 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M5.91832959,30.6456761 L4.11219587,16.6021983 C3.81117358,14.8094139 4.71424044,13.1660283 6.21935188,12.2696361 L18.2602434,4.65030236 C19.6148437,3.75391016 21.2704663,3.75391016 22.6250666,4.35150496 L59.9518302,21.6817541 C62.2094974,22.727545 63.2630754,25.4167216 62.2094974,27.6577021 L51.6737173,49.1711149 C50.6201393,51.4120954 47.9109387,52.4578863 45.6532716,51.4120954 L8.47701904,34.0818462 C6.9719076,33.4842514 6.06884074,32.1396631 5.91832959,30.6456761 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                        <path d="M0.10369854,28.5874984 L3.19009464,14.7485492 C3.61580447,13.0582958 4.89293386,11.7906058 6.59577296,11.3680424 L20.537769,8.30445835 C22.1341807,7.98753585 23.6241651,8.41009922 24.6884396,9.46650747 L53.849561,38.412096 C55.6588277,40.2079902 55.6588277,42.9546518 53.849561,44.7505459 C49.7013305,48.8681164 46.5901576,51.9562942 44.5160424,54.0150795 C42.8060705,55.7124128 40.2411126,58.2584127 36.8211689,61.6530793 C35.0119022,63.4489736 32.2447885,63.4489736 30.4355219,61.6530793 L1.27440044,32.7074909 C0.21012591,31.6510826 -0.215583924,30.172111 0.10369854,28.5874984 Z" id="路径" stroke="url(#linearGradient-12)" stroke-width="0.5" fill="url(#linearGradient-11)"></path>
+                        <path d="M11.9387753,30.3468787 L5.31628502,17.7973879 C4.5637293,16.3034009 4.71424044,14.3612178 5.76781845,13.0166296 L14.4974648,1.81172707 C15.4005317,0.61653747 16.9056431,-0.130456029 18.4107545,0.0189426707 L59.5002968,3.60451147 C62.0589862,3.75391016 63.86512,5.99489066 63.5640977,8.53466856 L61.4569417,32.2890618 C61.3064305,34.8288397 59.0487634,36.6216241 56.4900739,36.3228267 L15.5510428,32.7372579 C14.0459314,32.5878592 12.6913311,31.691467 11.9387753,30.3468787 L11.9387753,30.3468787 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                        <path d="M5.91832959,30.6456761 L4.11219587,16.6021983 C3.81117358,14.8094139 4.71424044,13.1660283 6.21935188,12.2696361 L18.2602434,4.65030236 C19.6148437,3.75391016 21.2704663,3.75391016 22.6250666,4.35150496 L59.9518302,21.6817541 C62.2094974,22.727545 63.2630754,25.4167216 62.2094974,27.6577021 L51.6737173,49.1711149 C50.6201393,51.4120954 47.9109387,52.4578863 45.6532716,51.4120954 L8.47701904,34.0818462 C6.9719076,33.4842514 6.06884074,32.1396631 5.91832959,30.6456761 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
+                        <path d="M0.10369854,28.5874984 L3.19009464,14.7485492 C3.61580447,13.0582958 4.89293386,11.7906058 6.59577296,11.3680424 L20.537769,8.30445835 C22.1341807,7.98753585 23.6241651,8.41009922 24.6884396,9.46650747 L53.849561,38.412096 C55.6588277,40.2079902 55.6588277,42.9546518 53.849561,44.7505459 C49.7013305,48.8681164 46.5901576,51.9562942 44.5160424,54.0150795 C42.8060705,55.7124128 40.2411126,58.2584127 36.8211689,61.6530793 C35.0119022,63.4489736 32.2447885,63.4489736 30.4355219,61.6530793 L1.27440044,32.7074909 C0.21012591,31.6510826 -0.215583924,30.172111 0.10369854,28.5874984 Z" id="路径" stroke="url(#linearGradient-4)" stroke-width="0.5" fill="url(#linearGradient-3)"></path>
                         <path d="M13.4071298,25.7351959 C14.1675607,26.4901637 15.2760168,26.7850604 16.3149027,26.5087876 C17.3537886,26.2325148 18.1652499,25.4270511 18.4435798,24.3958438 C18.7219098,23.3646364 18.4248173,22.264373 17.6642278,21.5095626 C16.903797,20.7545947 15.7953409,20.4596981 14.756455,20.7359708 C13.7175691,21.0122436 12.9061078,21.8177073 12.6277778,22.8489147 C12.3494479,23.880122 12.6465404,24.9803854 13.4071298,25.7351959 L13.4071298,25.7351959 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
                         <g id="编组-18" transform="translate(4.000000, 35.000000)">
                             <g id="路径">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                                <use fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-14"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                                <use fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-6"></use>
                             </g>
                             <path d="M6.76923077,12.5468165 C6.76923077,14.9600457 8.66341067,16.9163546 11,16.9163546 C13.3365893,16.9163546 15.2307692,14.9600457 15.2307692,12.5468165 C15.2307692,10.1335872 13.3365893,8.1772784 11,8.1772784 C8.66341067,8.1772784 6.76923077,10.1335872 6.76923077,12.5468165 L6.76923077,12.5468165 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
                         </g>
diff --git a/examples/sites/demos/pc/overviewimage/tag.svg b/examples/sites/demos/pc/overviewimage/tag.svg
index 34c72827f4..57f021441a 100644
--- a/examples/sites/demos/pc/overviewimage/tag.svg
+++ b/examples/sites/demos/pc/overviewimage/tag.svg
@@ -2,62 +2,30 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Tag标签</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="45.4426928%" y1="86.8386573%" x2="110.849251%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="45.4426928%" y1="86.8386573%" x2="110.849251%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-11" points="0 0 0 17.9999556 5.25008869 11.7906114 10.5 18 10.5 0"></polygon>
-        <filter x="-33.3%" y="-13.9%" width="166.7%" height="138.9%" filterUnits="objectBoundingBox" id="filter-12">
+        <polygon id="path-3" points="0 0 0 17.9999556 5.25008869 11.7906114 10.5 18 10.5 0"></polygon>
+        <filter x="-33.3%" y="-13.9%" width="166.7%" height="138.9%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="53.7884106%" x2="128.792906%" y2="40.3512625%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="53.7884106%" x2="128.792906%" y2="40.3512625%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.7884106%" x2="128.792906%" y2="40.3512625%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="53.7884106%" x2="128.792906%" y2="40.3512625%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M62.0833333,9 L62.083,11.916 L65,11.9166667 L65,13.0833333 L62.083,13.083 L62.0833333,16 L60.9166667,16 L60.916,13.083 L58,13.0833333 L58,11.9166667 L60.916,11.916 L60.9166667,9 L62.0833333,9 Z" id="path-15"></path>
-        <filter x="-28.6%" y="-28.6%" width="157.1%" height="157.1%" filterUnits="objectBoundingBox" id="filter-16">
+        <path d="M62.0833333,9 L62.083,11.916 L65,11.9166667 L65,13.0833333 L62.083,13.083 L62.0833333,16 L60.9166667,16 L60.916,13.083 L58,13.0833333 L58,11.9166667 L60.916,11.916 L60.9166667,9 L62.0833333,9 Z" id="path-7"></path>
+        <filter x="-28.6%" y="-28.6%" width="157.1%" height="157.1%" filterUnits="objectBoundingBox" id="filter-8">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -65,31 +33,21 @@
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -1841.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -1841.000000)">
             <g id="Tag标签" transform="translate(1089.000000, 1841.000000)">
-                <g id="背景" transform="translate(9.000000, 1.000000)">
-                    <g id="编组">
-                        <polygon id="多边形" fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon id="多边形" fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon id="多边形" fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon id="多边形" fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon id="多边形" fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon id="多边形" fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="53.5" cy="89" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M38,29 L88,29 C90.209139,29 92,30.790861 92,33 L92,91 C92,93.209139 90.209139,95 88,95 L38,95 C35.790861,95 34,93.209139 34,91 L34,33 C34,30.790861 35.790861,29 38,29 Z" id="形状结合备份-6" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                <g id="编组"></g>
+                <path d="M38,29 L88,29 C90.209139,29 92,30.790861 92,33 L92,91 C92,93.209139 90.209139,95 88,95 L38,95 C35.790861,95 34,93.209139 34,91 L34,33 C34,30.790861 35.790861,29 38,29 Z" id="形状结合备份-6" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
                 <g id="路径" transform="translate(44.000000, 29.000000)">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                    <use fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-11"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
                 </g>
                 <g id="编组-23备份" transform="translate(24.000000, 54.000000)">
-                    <rect id="矩形" stroke="url(#linearGradient-14)" fill="url(#linearGradient-13)" x="0" y="0" width="77.9584836" height="25" rx="12"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-6)" fill="url(#linearGradient-5)" x="0" y="0" width="77.9584836" height="25" rx="12"></rect>
                     <path d="M61.5,5 C65.6421356,5 69,8.35786438 69,12.5 C69,16.6421356 65.6421356,20 61.5,20 C57.3578644,20 54,16.6421356 54,12.5 C54,8.35786438 57.3578644,5 61.5,5 Z" id="形状结合备份-24" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" opacity="0.17413766"></path>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(61.500000, 12.500000) rotate(-315.000000) translate(-61.500000, -12.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-15"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-7"></use>
                     </g>
                     <text id="Tag备份-2" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" letter-spacing="0.448717949" fill="#FFFFFF">
                         <tspan x="13" y="18">Tag</tspan>
diff --git a/examples/sites/demos/pc/overviewimage/text-popup.svg b/examples/sites/demos/pc/overviewimage/text-popup.svg
index ae2c7e7ef2..486b392771 100644
--- a/examples/sites/demos/pc/overviewimage/text-popup.svg
+++ b/examples/sites/demos/pc/overviewimage/text-popup.svg
@@ -2,100 +2,60 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>TextPopup 输入框</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="62.7915639%" x2="128.792906%" y2="17.4210496%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="62.7915639%" x2="128.792906%" y2="17.4210496%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.8719209%" x2="128.792906%" y2="47.7792968%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.8719209%" x2="128.792906%" y2="47.7792968%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.4305468%" x2="128.792906%" y2="48.9034365%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="50.4305468%" x2="128.792906%" y2="48.9034365%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="100%" y1="45.5%" x2="6.58643108%" y2="54.5%" id="linearGradient-13">
+        <linearGradient x1="100%" y1="45.5%" x2="6.58643108%" y2="54.5%" id="linearGradient-5">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M23.5,17 L30.5,17 C31.3284271,17 32,17.6715729 32,18.5 C32,19.3284271 31.3284271,20 30.5,20 L23.5,20 C22.6715729,20 22,19.3284271 22,18.5 C22,17.6715729 22.6715729,17 23.5,17 Z" id="path-14"></path>
-        <filter x="-35.0%" y="-83.3%" width="170.0%" height="333.3%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M23.5,17 L30.5,17 C31.3284271,17 32,17.6715729 32,18.5 C32,19.3284271 31.3284271,20 30.5,20 L23.5,20 C22.6715729,20 22,19.3284271 22,18.5 C22,17.6715729 22.6715729,17 23.5,17 Z" id="path-6"></path>
+        <filter x="-35.0%" y="-83.3%" width="170.0%" height="333.3%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M24,0 C24.5522847,-1.01453063e-16 25,0.44771525 25,1 L25,4 C25,4.55228475 24.5522847,5 24,5 L15,5 L15,24 C15,24.5522847 14.5522847,25 14,25 L11,25 C10.4477153,25 10,24.5522847 10,24 L10,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L24,0 Z" id="path-16"></path>
-        <filter x="-16.0%" y="-8.0%" width="132.0%" height="132.0%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M24,0 C24.5522847,-1.01453063e-16 25,0.44771525 25,1 L25,4 C25,4.55228475 24.5522847,5 24,5 L15,5 L15,24 C15,24.5522847 14.5522847,25 14,25 L11,25 C10.4477153,25 10,24.5522847 10,24 L10,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L24,0 Z" id="path-8"></path>
+        <filter x="-16.0%" y="-8.0%" width="132.0%" height="132.0%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1870.000000, -2808.000000)">
-            <g id="编组-25备份-18" transform="translate(1769.000000, 2775.000000)">
-                <g id="TextPopup-输入框" transform="translate(101.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-33" transform="translate(40.000000, 63.000000)" opacity="0.204287574">
-                        <path d="M0,0 L0,28.2834583 C0,29.5889297 1.66778363,30.6417291 3.71724908,30.6417291 L48.2827509,30.6417291 C50.3322164,30.6417291 52,29.5889297 52,28.2834583 L52,0 L0,0 Z" id="路径备份-2" fill="url(#linearGradient-9)"></path>
-                        <rect id="矩形备份-6" fill="url(#linearGradient-10)" x="8" y="18" width="26" height="4" rx="2"></rect>
-                        <rect id="矩形备份-21" fill="url(#linearGradient-11)" x="8" y="8" width="37" height="4" rx="2"></rect>
-                    </g>
-                    <g id="编组-30" transform="translate(27.000000, 35.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-12)" opacity="0.604724702" x="7.10542736e-15" y="10" width="72" height="18" rx="4"></rect>
-                        <g id="形状结合备份-19" transform="translate(27.000000, 18.500000) rotate(-90.000000) translate(-27.000000, -18.500000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-14"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1870.000000, -2859.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-18" transform="translate(1173.000000, 2515.000000)">
+                    <g id="TextPopup-输入框" transform="translate(101.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-33" transform="translate(40.000000, 63.000000)" opacity="0.204287574">
+                            <path d="M0,0 L0,28.2834583 C0,29.5889297 1.66778363,30.6417291 3.71724908,30.6417291 L48.2827509,30.6417291 C50.3322164,30.6417291 52,29.5889297 52,28.2834583 L52,0 L0,0 Z" id="路径备份-2" fill="url(#linearGradient-1)"></path>
+                            <rect id="矩形备份-6" fill="url(#linearGradient-2)" x="8" y="18" width="26" height="4" rx="2"></rect>
+                            <rect id="矩形备份-21" fill="url(#linearGradient-3)" x="8" y="8" width="37" height="4" rx="2"></rect>
                         </g>
-                        <g id="形状结合">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                        <g id="编组-30" transform="translate(27.000000, 35.000000)">
+                            <rect id="矩形" fill="url(#linearGradient-4)" opacity="0.604724702" x="7.10542736e-15" y="10" width="72" height="18" rx="4"></rect>
+                            <g id="形状结合备份-19" transform="translate(27.000000, 18.500000) rotate(-90.000000) translate(-27.000000, -18.500000) ">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                                <use fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-6"></use>
+                            </g>
+                            <g id="形状结合">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
+                            </g>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/time-line.svg b/examples/sites/demos/pc/overviewimage/time-line.svg
index a379f5f99d..c4b098d45e 100644
--- a/examples/sites/demos/pc/overviewimage/time-line.svg
+++ b/examples/sites/demos/pc/overviewimage/time-line.svg
@@ -2,124 +2,82 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Timeline 时间线</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="68.9884219%" x2="128.792906%" y2="1.63821555%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="68.9884219%" x2="128.792906%" y2="1.63821555%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M30.9644684,30 L30.9647212,31.6133698 C30.9647212,32.3597006 31.636294,32.9647212 32.4647212,32.9647212 C33.2931483,32.9647212 33.9647212,32.3597006 33.9647212,31.6133698 L33.9647212,31.6133698 L33.9650324,30.1069105 C40.4208649,31.032732 45.4628475,36.3724306 45.9294423,42.9644684 L44.3160725,42.9647212 C43.5697418,42.9647212 42.9647212,43.636294 42.9647212,44.4647212 C42.9647212,45.2931483 43.5697418,45.9647212 44.3160725,45.9647212 L44.3160725,45.9647212 L45.8225318,45.9650324 C44.9440069,52.0910614 40.0910614,56.9440069 33.9650324,57.8225318 L33.9647212,56.3160725 C33.9647212,55.5697418 33.2931483,54.9647212 32.4647212,54.9647212 C31.636294,54.9647212 30.9647212,55.5697418 30.9647212,56.3160725 L30.9647212,56.3160725 L30.9644684,57.9294423 C24.3724306,57.4628475 19.032732,52.4208649 18.1069105,45.9650324 L19.6133698,45.9647212 C20.3597006,45.9647212 20.9647212,45.2931483 20.9647212,44.4647212 C20.9647212,43.636294 20.3597006,42.9647212 19.6133698,42.9647212 L19.6133698,42.9647212 L18,42.9644684 C18.4904314,36.0356689 24.0356689,30.4904314 30.9644684,30 Z" id="path-10"></path>
-        <filter x="-14.3%" y="-7.2%" width="128.6%" height="128.6%" filterUnits="objectBoundingBox" id="filter-11">
+        <path d="M30.9644684,30 L30.9647212,31.6133698 C30.9647212,32.3597006 31.636294,32.9647212 32.4647212,32.9647212 C33.2931483,32.9647212 33.9647212,32.3597006 33.9647212,31.6133698 L33.9647212,31.6133698 L33.9650324,30.1069105 C40.4208649,31.032732 45.4628475,36.3724306 45.9294423,42.9644684 L44.3160725,42.9647212 C43.5697418,42.9647212 42.9647212,43.636294 42.9647212,44.4647212 C42.9647212,45.2931483 43.5697418,45.9647212 44.3160725,45.9647212 L44.3160725,45.9647212 L45.8225318,45.9650324 C44.9440069,52.0910614 40.0910614,56.9440069 33.9650324,57.8225318 L33.9647212,56.3160725 C33.9647212,55.5697418 33.2931483,54.9647212 32.4647212,54.9647212 C31.636294,54.9647212 30.9647212,55.5697418 30.9647212,56.3160725 L30.9647212,56.3160725 L30.9644684,57.9294423 C24.3724306,57.4628475 19.032732,52.4208649 18.1069105,45.9650324 L19.6133698,45.9647212 C20.3597006,45.9647212 20.9647212,45.2931483 20.9647212,44.4647212 C20.9647212,43.636294 20.3597006,42.9647212 19.6133698,42.9647212 L19.6133698,42.9647212 L18,42.9644684 C18.4904314,36.0356689 24.0356689,30.4904314 30.9644684,30 Z" id="path-2"></path>
+        <filter x="-14.3%" y="-7.2%" width="128.6%" height="128.6%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M35.3728564,50.6923889 L29.6756857,47.8012196 C29.3622222,47.6421448 29.1647212,47.3204411 29.1647212,46.9689241 L29.1647212,39.0779211 C29.1647212,38.1685659 29.9018992,37.4313878 30.8112545,37.4313878 C31.7206097,37.4313878 32.4577878,38.1685659 32.4577878,39.0779211 L32.4577878,44.619461 C32.4577878,44.9538833 32.6367124,45.262747 32.9268179,45.4291113 L37.0814472,47.8116311 C37.8516435,48.2533089 38.1179602,49.235727 37.6762824,50.0059232 C37.6721018,50.0132134 37.6678641,50.0204706 37.6635696,50.0276943 C37.1939568,50.8176338 36.1923603,51.1082663 35.3728564,50.6923889 Z" id="path-12"></path>
-        <filter x="-48.2%" y="-17.9%" width="189.9%" height="160.4%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M35.3728564,50.6923889 L29.6756857,47.8012196 C29.3622222,47.6421448 29.1647212,47.3204411 29.1647212,46.9689241 L29.1647212,39.0779211 C29.1647212,38.1685659 29.9018992,37.4313878 30.8112545,37.4313878 C31.7206097,37.4313878 32.4577878,38.1685659 32.4577878,39.0779211 L32.4577878,44.619461 C32.4577878,44.9538833 32.6367124,45.262747 32.9268179,45.4291113 L37.0814472,47.8116311 C37.8516435,48.2533089 38.1179602,49.235727 37.6762824,50.0059232 C37.6721018,50.0132134 37.6678641,50.0204706 37.6635696,50.0276943 C37.1939568,50.8176338 36.1923603,51.1082663 35.3728564,50.6923889 Z" id="path-4"></path>
+        <filter x="-48.2%" y="-17.9%" width="189.9%" height="160.4%" filterUnits="objectBoundingBox" id="filter-5">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.232993057   0 0 0 0 0.361563365   0 0 0 0 0.790131058  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M58,41 C58.5522847,41 59,41.4477153 59,42 L59,83 C59,83.5522847 58.5522847,84 58,84 C57.4477153,84 57,83.5522847 57,83 L57,42 C57,41.4477153 57.4477153,41 58,41 Z" id="path-16"></path>
-        <filter x="-200.0%" y="-4.7%" width="500.0%" height="118.6%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M58,41 C58.5522847,41 59,41.4477153 59,42 L59,83 C59,83.5522847 58.5522847,84 58,84 C57.4477153,84 57,83.5522847 57,83 L57,42 C57,41.4477153 57.4477153,41 58,41 Z" id="path-8"></path>
+        <filter x="-200.0%" y="-4.7%" width="500.0%" height="118.6%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-18">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <circle id="path-19" cx="4" cy="4" r="4"></circle>
-        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-20">
+        <circle id="path-11" cx="4" cy="4" r="4"></circle>
+        <filter x="-43.8%" y="-31.2%" width="187.5%" height="187.5%" filterUnits="objectBoundingBox" id="filter-12">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <circle id="path-21" cx="4" cy="25" r="4"></circle>
-        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-22">
+        <circle id="path-13" cx="4" cy="25" r="4"></circle>
+        <filter x="-50.0%" y="-25.0%" width="200.0%" height="200.0%" filterUnits="objectBoundingBox" id="filter-14">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1873.000000, -3209.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1873.000000, -3209.000000)">
             <g id="Timeline-时间线" transform="translate(1873.000000, 3209.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <path d="M97,34 C99.209139,34 101,35.790861 101,38 L101,86 C101,88.209139 99.209139,90 97,90 L27,90 C24.790861,90 23,88.209139 23,86 L22.9987806,59.591215 C25.6466164,61.1231822 28.7209123,62 32,62 C41.9411255,62 50,53.9411255 50,44 C50,40.2994756 48.8833172,36.8597664 46.9685432,33.9994641 L97,34 Z" id="形状结合" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                <g id="编组"></g>
+                <path d="M97,34 C99.209139,34 101,35.790861 101,38 L101,86 C101,88.209139 99.209139,90 97,90 L27,90 C24.790861,90 23,88.209139 23,86 L22.9987806,59.591215 C25.6466164,61.1231822 28.7209123,62 32,62 C41.9411255,62 50,53.9411255 50,44 C50,40.2994756 48.8833172,36.8597664 46.9685432,33.9994641 L97,34 Z" id="形状结合" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                 <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-2"></use>
                 </g>
                 <g id="路径" fill-rule="nonzero">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                    <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-12"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-4"></use>
                 </g>
-                <rect id="矩形-2备份" stroke="url(#linearGradient-15)" fill="url(#linearGradient-14)" x="66" y="46" width="29" height="12" rx="2"></rect>
-                <rect id="矩形-2备份-4" fill="url(#linearGradient-15)" opacity="0.303770519" x="66" y="67" width="29" height="12" rx="2"></rect>
+                <rect id="矩形-2备份" stroke="url(#linearGradient-7)" fill="url(#linearGradient-6)" x="66" y="46" width="29" height="12" rx="2"></rect>
+                <rect id="矩形-2备份-4" fill="url(#linearGradient-7)" opacity="0.303770519" x="66" y="67" width="29" height="12" rx="2"></rect>
                 <g id="形状结合备份">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                 </g>
                 <g id="时间线" transform="translate(54.000000, 48.000000)">
                     <g id="椭圆形">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                        <use fill="url(#linearGradient-18)" fill-rule="evenodd" xlink:href="#path-19"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                        <use fill="url(#linearGradient-10)" fill-rule="evenodd" xlink:href="#path-11"></use>
                     </g>
                     <g id="椭圆形备份-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-21"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-13"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/time-picker.svg b/examples/sites/demos/pc/overviewimage/time-picker.svg
index 3d8a7073d8..81c382f244 100644
--- a/examples/sites/demos/pc/overviewimage/time-picker.svg
+++ b/examples/sites/demos/pc/overviewimage/time-picker.svg
@@ -2,95 +2,53 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>TimePicker 时间选择器</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="59.2096643%" x2="128.792906%" y2="26.5438221%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="100%" y1="47.3372781%" x2="6.58643108%" y2="52.6627219%" id="linearGradient-11">
+        <linearGradient x1="100%" y1="47.3372781%" x2="6.58643108%" y2="52.6627219%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M26.5,41 L36.5,41 C37.3284271,41 38,41.6715729 38,42.5 C38,43.3284271 37.3284271,44 36.5,44 L26.5,44 C25.6715729,44 25,43.3284271 25,42.5 C25,41.6715729 25.6715729,41 26.5,41 Z" id="path-12"></path>
-        <filter x="-26.9%" y="-83.3%" width="153.8%" height="333.3%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M26.5,41 L36.5,41 C37.3284271,41 38,41.6715729 38,42.5 C38,43.3284271 37.3284271,44 36.5,44 L26.5,44 C25.6715729,44 25,43.3284271 25,42.5 C25,41.6715729 25.6715729,41 26.5,41 Z" id="path-4"></path>
+        <filter x="-26.9%" y="-83.3%" width="153.8%" height="333.3%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="60.2046142%" x2="128.792906%" y2="24.0097752%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="60.2046142%" x2="128.792906%" y2="24.0097752%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.961822%" x2="128.792906%" y2="45.0034177%" id="linearGradient-15">
+        <linearGradient x1="44.0988019%" y1="51.961822%" x2="128.792906%" y2="45.0034177%" id="linearGradient-7">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.1013011%" y1="86.8386573%" x2="128.759538%" y2="-43.8247114%" id="linearGradient-16">
+        <linearGradient x1="44.1013011%" y1="86.8386573%" x2="128.759538%" y2="-43.8247114%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1870.000000, -1708.000000)">
-            <g id="编组-14" transform="translate(1771.000000, 1675.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1870.000000, -1759.000000)">
+            <g id="编组-14" transform="translate(1771.000000, 1726.000000)">
                 <g id="TimePicker-时间选择器" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" x="25" y="33" width="36" height="18" rx="4"></rect>
-                    <rect id="矩形备份-12" fill="url(#linearGradient-10)" opacity="0.303770519" x="65" y="33" width="36" height="18" rx="4"></rect>
+                    <g id="编组"></g>
+                    <rect id="矩形" fill="url(#linearGradient-1)" x="25" y="33" width="36" height="18" rx="4"></rect>
+                    <rect id="矩形备份-12" fill="url(#linearGradient-2)" opacity="0.303770519" x="65" y="33" width="36" height="18" rx="4"></rect>
                     <g id="形状结合备份-19" transform="translate(31.500000, 42.500000) rotate(-90.000000) translate(-31.500000, -42.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="url(#linearGradient-11)" fill-rule="evenodd" xlink:href="#path-12"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                        <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
                     </g>
-                    <path d="M27,55 L99,55 C100.104569,55 101,55.8954305 101,57 L101,93 C101,94.1045695 100.104569,95 99,95 L27,95 C25.8954305,95 25,94.1045695 25,93 L25,57 C25,55.8954305 25.8954305,55 27,55 Z" id="矩形" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
+                    <path d="M27,55 L99,55 C100.104569,55 101,55.8954305 101,57 L101,93 C101,94.1045695 100.104569,95 99,95 L27,95 C25.8954305,95 25,94.1045695 25,93 L25,57 C25,55.8954305 25.8954305,55 27,55 Z" id="矩形" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
                     <path d="M70,65 L90,65 C91.6568542,65 93,66.3431458 93,68 C93,69.6568542 91.6568542,71 90,71 L70,71 C68.3431458,71 67,69.6568542 67,68 C67,66.3431458 68.3431458,65 70,65 Z" id="形状结合备份-9" fill="#5073E5"></path>
-                    <path d="M70,79 L90,79 C91.6568542,79 93,80.3431458 93,82 C93,83.6568542 91.6568542,85 90,85 L70,85 C68.3431458,85 67,83.6568542 67,82 C67,80.3431458 68.3431458,79 70,79 Z" id="形状结合备份-36" fill="url(#linearGradient-15)" opacity="0.604724702"></path>
+                    <path d="M70,79 L90,79 C91.6568542,79 93,80.3431458 93,82 C93,83.6568542 91.6568542,85 90,85 L70,85 C68.3431458,85 67,83.6568542 67,82 C67,80.3431458 68.3431458,79 70,79 Z" id="形状结合备份-36" fill="url(#linearGradient-7)" opacity="0.604724702"></path>
                     <path d="M53.1628641,62.3756557 C53.626699,61.7603685 54.5953883,61.9307557 54.8225728,62.6691003 L54.8225728,62.6691003 L56.1604369,67.0139744 C56.3497573,67.6324169 55.8796117,68.2540147 55.2359223,68.2382381 L55.2359223,68.2382381 L50.6890777,68.1372679 C49.9160194,68.118336 49.4868932,67.2348467 49.9538835,66.6195595 L49.9538835,66.6195595 L50.9791027,65.2654156 C50.9664531,65.2586039 50.9539159,65.2514133 50.9415049,65.2438405 C49.1587379,64.1521002 47.1014563,63.5778322 45,63.5778322 C38.7019417,63.5778322 33.5776699,68.70207 33.5776699,75.0000864 C33.5776699,81.2981028 38.7019417,86.4223406 45,86.4223406 C51.2980583,86.4223406 56.4223301,81.2981028 56.4223301,75.0000864 C56.4223301,74.7037869 56.4099234,74.4054197 56.3867839,74.1100064 L55.2314545,74.1105225 C54.6834575,74.1105225 54.2314545,73.6585225 54.2314545,73.1105225 C54.2314545,72.5625225 54.6794575,72.1105225 55.2314545,72.1105225 L55.2314545,72.1105225 L58.9383943,72.1105225 C59.4863979,72.1105225 59.9384009,72.5625225 59.9384009,73.1105225 C59.9384009,73.6585225 59.4903979,74.1105225 58.9383943,74.1105225 L58.9383943,74.1105225 L57.968,74.11 L57.97242,74.1656798 C57.9901834,74.4433479 58,74.7224183 58,75.0000864 C58,76.7544436 57.656068,78.4583158 56.9776699,80.0612178 C56.3213592,81.6104793 55.3842233,82.9988196 54.1915049,84.1946855 C52.9987864,85.387396 51.6072816,86.3245257 50.0580097,86.980832 C48.4582524,87.6560702 46.7543689,88 45,88 C43.2456311,88 41.5417476,87.6560702 39.938835,86.9776767 C38.3895631,86.3213704 37.0012136,85.3842407 35.8053398,84.1915302 C34.6126214,82.9988196 33.6754854,81.607324 33.0191748,80.0580625 C32.343932,78.4583158 32,76.7544436 32,75.0000864 C32,73.2457291 32.343932,71.5418569 33.0223301,69.9389549 C33.6786408,68.3896934 34.6157767,67.0013531 35.8084951,65.8054873 C37.0012136,64.6127767 38.3927184,63.675647 39.9419903,63.0193407 C41.5417476,62.3441025 43.2456311,62.0001727 45,62.0001727 C47.3917476,62.0001727 49.7330097,62.6564791 51.7650485,63.8965194 C51.823074,63.9319245 51.874892,63.9736137 51.9201682,64.0201776 Z M44.8832524,68.7210019 C45.3186893,68.7210019 45.6720874,69.0775529 45.6720874,69.5098316 L45.6720874,69.5098316 L45.672,75.015 L50.8184466,75.015863 C51.2175971,75.015863 51.5478122,75.3154649 51.6000761,75.6983632 L51.6072816,75.8046927 C51.6072816,76.2369714 51.2538835,76.5935224 50.8184466,76.5935224 L50.8184466,76.5935224 L44.8832524,76.5935224 C44.6175841,76.5935224 44.3824543,76.460798 44.2394926,76.259128 C44.1483407,76.1309565 44.0944175,75.9740281 44.0944175,75.8046927 L44.0944175,75.8046927 L44.0944175,69.5098316 C44.0944175,69.0775529 44.4478155,68.7210019 44.8832524,68.7210019 Z" id="形状结合" stroke="#5073E5" stroke-width="0.65625" fill="#5073E5" fill-rule="nonzero"></path>
-                    <path d="M36.9970352,75 C36.9970352,79.418278 40.5779987,83 44.9953411,83 C49.4126834,83 52.9936469,79.418278 52.9936469,75 C52.9936469,70.581722 49.4126834,67 44.9953411,67 C40.5779987,67 36.9970352,70.581722 36.9970352,75 L36.9970352,75 Z" id="路径" fill="url(#linearGradient-16)" opacity="0.303770519"></path>
+                    <path d="M36.9970352,75 C36.9970352,79.418278 40.5779987,83 44.9953411,83 C49.4126834,83 52.9936469,79.418278 52.9936469,75 C52.9936469,70.581722 49.4126834,67 44.9953411,67 C40.5779987,67 36.9970352,70.581722 36.9970352,75 L36.9970352,75 Z" id="路径" fill="url(#linearGradient-8)" opacity="0.303770519"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/time-select.svg b/examples/sites/demos/pc/overviewimage/time-select.svg
index 2c2f241041..550249852d 100644
--- a/examples/sites/demos/pc/overviewimage/time-select.svg
+++ b/examples/sites/demos/pc/overviewimage/time-select.svg
@@ -2,110 +2,78 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Time 时间</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.1013011%" y1="86.8386573%" x2="128.759538%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.1013011%" y1="86.8386573%" x2="128.759538%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <rect id="path-10" x="22.5" y="0" width="3" height="8" rx="1.5"></rect>
-        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-11">
+        <rect id="path-2" x="22.5" y="0" width="3" height="8" rx="1.5"></rect>
+        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-12" x="22.5" y="39" width="3" height="8" rx="1.5"></rect>
-        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <rect id="path-4" x="22.5" y="39" width="3" height="8" rx="1.5"></rect>
+        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-14" x="42.5" y="20" width="3" height="8" rx="1.5"></rect>
-        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-15">
+        <rect id="path-6" x="42.5" y="20" width="3" height="8" rx="1.5"></rect>
+        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-16" x="2.5" y="20" width="3" height="8" rx="1.5"></rect>
-        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-17">
+        <rect id="path-8" x="2.5" y="20" width="3" height="8" rx="1.5"></rect>
+        <filter x="-133.3%" y="-25.0%" width="366.7%" height="200.0%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-18" x="22" y="2.27373675e-13" width="2" height="6" rx="1"></rect>
-        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-19">
+        <rect id="path-10" x="22" y="2.27373675e-13" width="2" height="6" rx="1"></rect>
+        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-11">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-20" x="22" y="41.8284271" width="2" height="6" rx="1"></rect>
-        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-21">
+        <rect id="path-12" x="22" y="41.8284271" width="2" height="6" rx="1"></rect>
+        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-13">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-22" x="43.4142136" y="20" width="2" height="6" rx="1"></rect>
-        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-23">
+        <rect id="path-14" x="43.4142136" y="20" width="2" height="6" rx="1"></rect>
+        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-15">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-24" x="2" y="20" width="2" height="6" rx="1"></rect>
-        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-25">
+        <rect id="path-16" x="2" y="20" width="2" height="6" rx="1"></rect>
+        <filter x="-200.0%" y="-33.3%" width="500.0%" height="233.3%" filterUnits="objectBoundingBox" id="filter-17">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-26">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-18">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M46.5796821,25.8129194 C47.5332134,26.7666527 47.5332134,28.3219716 46.5796821,29.2757049 L36.2017348,39.654996 L36.1080812,39.5616194 L36.1076394,39.5626788 L25.9072297,29.3603147 C24.9536984,28.4065814 24.9536984,26.8512625 25.9072297,25.8975292 C26.860761,24.9437959 28.4157506,24.9437959 29.3692819,25.8975292 L36.2000812,32.7296194 L43.1176299,25.8129194 C44.0711612,24.8591861 45.6261507,24.8591861 46.5796821,25.8129194 Z" id="path-27"></path>
-        <filter x="-15.8%" y="-17.2%" width="131.7%" height="148.1%" filterUnits="objectBoundingBox" id="filter-28">
+        <path d="M46.5796821,25.8129194 C47.5332134,26.7666527 47.5332134,28.3219716 46.5796821,29.2757049 L36.2017348,39.654996 L36.1080812,39.5616194 L36.1076394,39.5626788 L25.9072297,29.3603147 C24.9536984,28.4065814 24.9536984,26.8512625 25.9072297,25.8975292 C26.860761,24.9437959 28.4157506,24.9437959 29.3692819,25.8975292 L36.2000812,32.7296194 L43.1176299,25.8129194 C44.0711612,24.8591861 45.6261507,24.8591861 46.5796821,25.8129194 Z" id="path-19"></path>
+        <filter x="-15.8%" y="-17.2%" width="131.7%" height="148.1%" filterUnits="objectBoundingBox" id="filter-20">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="86.8375855%" x2="128.792906%" y2="-43.8219818%" id="linearGradient-29">
+        <linearGradient x1="44.0988019%" y1="86.8375855%" x2="128.792906%" y2="-43.8219818%" id="linearGradient-21">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8375855%" x2="128.792906%" y2="-43.8219818%" id="linearGradient-30">
+        <linearGradient x1="44.0988019%" y1="86.8375855%" x2="128.792906%" y2="-43.8219818%" id="linearGradient-22">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M13.246661,12.3832264 C13.7308428,12.8528154 13.7381789,13.6305721 13.2686693,14.1148358 C8.05271107,19.4710852 5.17696476,26.5442694 5.17696476,34.0283439 C5.17696476,49.6167907 17.7308783,62.3287114 33.2576103,62.581391 L33.7290174,62.5852244 C37.6049081,62.5924411 41.4608163,61.8042882 45.0165247,60.2691294 C45.6500642,59.9963492 46.364711,60.2854256 46.6316774,60.9037079 C46.9051728,61.5300543 46.6153716,62.252121 45.9971908,62.519138 C42.3214042,64.0973055 38.358962,64.9487074 34.3603682,65.0294106 L33.5434604,65.0353267 L32.9000464,65.0249636 L32.7228119,65.0193081 C16.0931506,64.4863757 2.72685558,50.7874268 2.73401872,34.0283439 C2.73401872,25.9059218 5.85188481,18.2237394 11.5153444,12.4052384 C11.984854,11.9209747 12.7624793,11.9136374 13.246661,12.3832264 Z M33.9254732,3.03532669 L34.5688871,3.04569003 L34.7461216,3.05134561 C51.375783,3.58428938 64.742078,17.2835293 64.7349149,34.0429684 C64.7349149,42.1655631 61.6170488,49.8479087 55.9535892,55.6665335 C55.4840796,56.1508074 54.7064543,56.1581449 54.2222726,55.6885459 C53.7380908,55.2189469 53.7307547,54.4411737 54.2002643,53.9568997 C59.4162225,48.6005365 62.2919688,41.527202 62.2919688,34.0429684 C62.2919688,18.4541904 49.7380553,5.74199951 34.2113233,5.48931457 L33.7399162,5.48548108 C29.8640254,5.47826418 26.0081173,6.2664338 22.4524089,7.80162528 C21.8188694,8.07441128 21.1042226,7.78532876 20.8372562,7.16703328 C20.5637608,6.54067358 20.8535619,5.81859149 21.4717428,5.55156889 C25.1475293,3.97336782 29.1099715,3.12194784 33.1085653,3.04124286 L33.9254732,3.03532669 Z" id="path-31"></path>
-        <filter x="-7.3%" y="-4.0%" width="114.5%" height="114.5%" filterUnits="objectBoundingBox" id="filter-32">
+        <path d="M13.246661,12.3832264 C13.7308428,12.8528154 13.7381789,13.6305721 13.2686693,14.1148358 C8.05271107,19.4710852 5.17696476,26.5442694 5.17696476,34.0283439 C5.17696476,49.6167907 17.7308783,62.3287114 33.2576103,62.581391 L33.7290174,62.5852244 C37.6049081,62.5924411 41.4608163,61.8042882 45.0165247,60.2691294 C45.6500642,59.9963492 46.364711,60.2854256 46.6316774,60.9037079 C46.9051728,61.5300543 46.6153716,62.252121 45.9971908,62.519138 C42.3214042,64.0973055 38.358962,64.9487074 34.3603682,65.0294106 L33.5434604,65.0353267 L32.9000464,65.0249636 L32.7228119,65.0193081 C16.0931506,64.4863757 2.72685558,50.7874268 2.73401872,34.0283439 C2.73401872,25.9059218 5.85188481,18.2237394 11.5153444,12.4052384 C11.984854,11.9209747 12.7624793,11.9136374 13.246661,12.3832264 Z M33.9254732,3.03532669 L34.5688871,3.04569003 L34.7461216,3.05134561 C51.375783,3.58428938 64.742078,17.2835293 64.7349149,34.0429684 C64.7349149,42.1655631 61.6170488,49.8479087 55.9535892,55.6665335 C55.4840796,56.1508074 54.7064543,56.1581449 54.2222726,55.6885459 C53.7380908,55.2189469 53.7307547,54.4411737 54.2002643,53.9568997 C59.4162225,48.6005365 62.2919688,41.527202 62.2919688,34.0429684 C62.2919688,18.4541904 49.7380553,5.74199951 34.2113233,5.48931457 L33.7399162,5.48548108 C29.8640254,5.47826418 26.0081173,6.2664338 22.4524089,7.80162528 C21.8188694,8.07441128 21.1042226,7.78532876 20.8372562,7.16703328 C20.5637608,6.54067358 20.8535619,5.81859149 21.4717428,5.55156889 C25.1475293,3.97336782 29.1099715,3.12194784 33.1085653,3.04124286 L33.9254732,3.03532669 Z" id="path-23"></path>
+        <filter x="-7.3%" y="-4.0%" width="114.5%" height="114.5%" filterUnits="objectBoundingBox" id="filter-24">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -113,65 +81,55 @@
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.65213034 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】" transform="translate(-697.000000, -2381.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-697.000000, -2381.000000)">
             <g id="Time-时间" transform="translate(697.000000, 2381.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="出行时间" transform="translate(29.000000, 29.000000)">
-                    <path d="M11,33.5 C11,45.9264069 21.0714598,56 33.4952352,56 C45.9190105,56 55.9904703,45.9264069 55.9904703,33.5 C55.9904703,21.0735931 45.9190105,11 33.4952352,11 C21.0714598,11 11,21.0735931 11,33.5 L11,33.5 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                    <path d="M11,33.5 C11,45.9264069 21.0714598,56 33.4952352,56 C45.9190105,56 55.9904703,45.9264069 55.9904703,33.5 C55.9904703,21.0735931 45.9190105,11 33.4952352,11 C21.0714598,11 11,21.0735931 11,33.5 L11,33.5 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
                     <g id="编组-18" transform="translate(9.234019, 10.026912)">
                         <g id="矩形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-2"></use>
                         </g>
                         <g id="矩形备份-16">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
                         </g>
                         <g id="矩形备份-16" transform="translate(44.000000, 24.000000) rotate(-90.000000) translate(-44.000000, -24.000000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
                         <g id="矩形备份-17" transform="translate(4.000000, 24.000000) rotate(-90.000000) translate(-4.000000, -24.000000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                         </g>
                     </g>
                     <g id="编组-18" opacity="0.301161993" transform="translate(33.673359, 33.673359) rotate(-45.000000) translate(-33.673359, -33.673359) translate(9.966252, 9.759145)">
                         <g id="矩形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-18"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-18"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
                         </g>
                         <g id="矩形备份-16">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-20"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-20"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
                         </g>
                         <g id="矩形备份-16" transform="translate(44.414214, 23.000000) rotate(-90.000000) translate(-44.414214, -23.000000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-22"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
                         </g>
                         <g id="矩形备份-17" transform="translate(3.000000, 23.000000) rotate(-90.000000) translate(-3.000000, -23.000000) ">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-25)" xlink:href="#path-24"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-24"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
                         </g>
                     </g>
                     <g id="形状" transform="translate(36.243456, 32.376308) rotate(-315.000000) translate(-36.243456, -32.376308) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-27"></use>
-                        <use fill="url(#linearGradient-26)" fill-rule="evenodd" xlink:href="#path-27"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
+                        <use fill="url(#linearGradient-18)" fill-rule="evenodd" xlink:href="#path-19"></use>
                     </g>
                     <g id="形状结合">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-32)" xlink:href="#path-31"></use>
-                        <use stroke="url(#linearGradient-30)" stroke-width="1" fill="url(#linearGradient-29)" fill-rule="evenodd" xlink:href="#path-31"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-24)" xlink:href="#path-23"></use>
+                        <use stroke="url(#linearGradient-22)" stroke-width="1" fill="url(#linearGradient-21)" fill-rule="evenodd" xlink:href="#path-23"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/toggle-menu.svg b/examples/sites/demos/pc/overviewimage/toggle-menu.svg
index f87e4e1a7a..ddf7b04e43 100644
--- a/examples/sites/demos/pc/overviewimage/toggle-menu.svg
+++ b/examples/sites/demos/pc/overviewimage/toggle-menu.svg
@@ -2,52 +2,20 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>收缩菜单 toggle-menu</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="55.8009979%" x2="128.792906%" y2="35.2253856%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="55.8009979%" x2="128.792906%" y2="35.2253856%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.2668259%" x2="128.792906%" y2="49.3204186%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.2668259%" x2="128.792906%" y2="49.3204186%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-11">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-12" points="21 35 33 35 27 42"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-13">
+        <polygon id="path-4" points="21 35 33 35 27 42"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -55,14 +23,14 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-14">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-6">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <polygon id="path-15" points="21 80 33 80 27 87"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-16">
+        <polygon id="path-7" points="21 80 33 80 27 87"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4.0839988" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -70,51 +38,41 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-17">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-9">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-18">
+        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-10">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-19">
+        <linearGradient x1="44.0988019%" y1="56.3076892%" x2="128.792906%" y2="33.9348889%" id="linearGradient-11">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -609.000000)">
-            <g id="编组-25备份-7" transform="translate(1380.000000, 576.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -660.000000)">
+            <g id="编组-25备份-7" transform="translate(1380.000000, 627.000000)">
                 <g id="收缩菜单-toggle-menu" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <path d="M41,48 L100,48 C101.104569,48 102,48.8954305 102,50 L102,71 C102,72.1045695 101.104569,73 100,73 L41,73 C39.8954305,73 39,72.1045695 39,71 L39,50 C39,48.8954305 39.8954305,48 41,48 Z" id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
+                    <g id="编组"></g>
+                    <path d="M41,48 L100,48 C101.104569,48 102,48.8954305 102,50 L102,71 C102,72.1045695 101.104569,73 100,73 L41,73 C39.8954305,73 39,72.1045695 39,71 L39,50 C39,48.8954305 39.8954305,48 41,48 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
                     <path d="M47,54 L91,54 C92.1045695,54 93,54.8954305 93,56 C93,57.1045695 92.1045695,58 91,58 L47,58 C45.8954305,58 45,57.1045695 45,56 C45,54.8954305 45.8954305,54 47,54 Z" id="形状结合备份" fill="#5073E5"></path>
-                    <path d="M47,63 L90,63 C91.1045695,63 92,63.8954305 92,65 C92,66.1045695 91.1045695,67 90,67 L47,67 C45.8954305,67 45,66.1045695 45,65 C45,63.8954305 45.8954305,63 47,63 Z" id="形状结合备份-35" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
+                    <path d="M47,63 L90,63 C91.1045695,63 92,63.8954305 92,65 C92,66.1045695 91.1045695,67 90,67 L47,67 C45.8954305,67 45,66.1045695 45,65 C45,63.8954305 45.8954305,63 47,63 Z" id="形状结合备份-35" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
                     <g id="形状结合" transform="translate(27.000000, 38.500000) rotate(-180.000000) translate(-27.000000, -38.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-12"></use>
-                        <path stroke="url(#linearGradient-11)" stroke-width="4.0839988" d="M28.5602428,37.0419994 L27,38.8622826 L25.4397572,37.0419994 L28.5602428,37.0419994 Z" stroke-linejoin="square"></path>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-4"></use>
+                        <path stroke="url(#linearGradient-3)" stroke-width="4.0839988" d="M28.5602428,37.0419994 L27,38.8622826 L25.4397572,37.0419994 L28.5602428,37.0419994 Z" stroke-linejoin="square"></path>
                     </g>
                     <g id="形状结合备份-37" opacity="0.602809361" transform="translate(27.000000, 83.500000) rotate(-180.000000) translate(-27.000000, -83.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-15"></use>
-                        <path stroke="url(#linearGradient-11)" stroke-width="4.0839988" d="M27,83.1377174 L28.5602428,84.9580006 L25.4397572,84.9580006 L27,83.1377174 Z" stroke-linejoin="square"></path>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-7"></use>
+                        <path stroke="url(#linearGradient-3)" stroke-width="4.0839988" d="M27,83.1377174 L28.5602428,84.9580006 L25.4397572,84.9580006 L27,83.1377174 Z" stroke-linejoin="square"></path>
                     </g>
-                    <rect id="矩形-2备份" fill="url(#linearGradient-18)" x="39" y="33" width="29" height="12" rx="2"></rect>
-                    <rect id="矩形-2备份-4" fill="url(#linearGradient-19)" opacity="0.303770519" x="39" y="77" width="29" height="12" rx="2"></rect>
+                    <rect id="矩形-2备份" fill="url(#linearGradient-10)" x="39" y="33" width="29" height="12" rx="2"></rect>
+                    <rect id="矩形-2备份-4" fill="url(#linearGradient-11)" opacity="0.303770519" x="39" y="77" width="29" height="12" rx="2"></rect>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/tooltip.svg b/examples/sites/demos/pc/overviewimage/tooltip.svg
index a384b49731..47315a0d61 100644
--- a/examples/sites/demos/pc/overviewimage/tooltip.svg
+++ b/examples/sites/demos/pc/overviewimage/tooltip.svg
@@ -2,70 +2,30 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>ToolTip 文字提示</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.8250237%" x2="128.792906%" y2="42.8049215%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.8250237%" x2="128.792906%" y2="42.8049215%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.061427%" x2="128.792906%" y2="39.6559147%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="54.061427%" x2="128.792906%" y2="39.6559147%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="54.061427%" x2="128.792906%" y2="39.6559147%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="54.061427%" x2="128.792906%" y2="39.6559147%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1087.000000, -1987.000000)">
-            <g id="编组-14备份-9" transform="translate(986.000000, 1950.000000)">
-                <g id="Tip-气泡提示" transform="translate(101.000000, 37.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1087.000000, -2038.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-14备份-9" transform="translate(390.000000, 1690.000000)">
+                    <g id="Tip-气泡提示" transform="translate(101.000000, 37.000000)">
+                        <g id="编组"></g>
+                        <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.204287574" x="30" y="74" width="65" height="18" rx="4"></rect>
+                        <path d="M100,40 C102.209139,40 104,41.790861 104,44 L104,56 C104,58.209139 102.209139,60 100,60 L72.242,60 L69,63.2426407 L65.757,60 L38,60 C35.790861,60 34,58.209139 34,56 L34,44 C34,41.790861 35.790861,40 38,40 L100,40 Z" id="形状结合" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
+                        <path d="M91,47 C93.209139,47 95,48.790861 95,51 L95,63 C95,65.209139 93.209139,67 91,67 L63.242,67 L60,70.2426407 L56.757,67 L29,67 C26.790861,67 25,65.209139 25,63 L25,51 C25,48.790861 26.790861,47 29,47 L91,47 Z" id="形状结合备份-22" fill="url(#linearGradient-3)"></path>
+                        <path d="M37,55 L83,55 C84.1045695,55 85,55.8954305 85,57 C85,58.1045695 84.1045695,59 83,59 L37,59 C35.8954305,59 35,58.1045695 35,57 C35,55.8954305 35.8954305,55 37,55 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
                     </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.204287574" x="30" y="74" width="65" height="18" rx="4"></rect>
-                    <path d="M100,40 C102.209139,40 104,41.790861 104,44 L104,56 C104,58.209139 102.209139,60 100,60 L72.242,60 L69,63.2426407 L65.757,60 L38,60 C35.790861,60 34,58.209139 34,56 L34,44 C34,41.790861 35.790861,40 38,40 L100,40 Z" id="形状结合" fill="url(#linearGradient-10)" opacity="0.204287574"></path>
-                    <path d="M91,47 C93.209139,47 95,48.790861 95,51 L95,63 C95,65.209139 93.209139,67 91,67 L63.242,67 L60,70.2426407 L56.757,67 L29,67 C26.790861,67 25,65.209139 25,63 L25,51 C25,48.790861 26.790861,47 29,47 L91,47 Z" id="形状结合备份-22" fill="url(#linearGradient-11)"></path>
-                    <path d="M37,55 L83,55 C84.1045695,55 85,55.8954305 85,57 C85,58.1045695 84.1045695,59 83,59 L37,59 C35.8954305,59 35,58.1045695 35,57 C35,55.8954305 35.8954305,55 37,55 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
                 </g>
             </g>
         </g>
diff --git a/examples/sites/demos/pc/overviewimage/transfer.svg b/examples/sites/demos/pc/overviewimage/transfer.svg
index bec5791682..397edf8e71 100644
--- a/examples/sites/demos/pc/overviewimage/transfer.svg
+++ b/examples/sites/demos/pc/overviewimage/transfer.svg
@@ -2,48 +2,16 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Transfer穿梭框 </title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="47.2373893%" y1="86.8386573%" x2="86.8864299%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="47.2373893%" y1="86.8386573%" x2="86.8864299%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-11" points="58 46 70 46 64 53"></polygon>
-        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-12">
+        <polygon id="path-3" points="58 46 70 46 64 53"></polygon>
+        <filter x="-29.2%" y="-35.7%" width="158.3%" height="200.0%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -51,30 +19,30 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-13">
+        <filter x="-45.8%" y="-64.3%" width="191.7%" height="257.1%" filterUnits="objectBoundingBox" id="filter-5">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
-        <path d="M87.5801307,74.976671 C88.1324154,74.976671 88.5801307,75.4243863 88.5801307,75.976671 C88.5801307,76.2596013 88.4602793,76.5292903 88.2502813,76.7188962 L81.6284839,82.697677 C81.2185643,83.067791 80.5862221,83.0355221 80.2161082,82.6256025 C80.0501841,82.4418333 79.9583333,82.2030442 79.9583333,81.9554519 L79.9582571,78.999671 L44.3672571,79 C43.2626876,79 42.3672571,78.1045695 42.3672571,77 C42.3672571,75.8954305 43.2626876,75 44.3672571,75 L79.9582571,74.999671 L79.9583333,74.976671 L87.5801307,74.976671 Z" id="path-14"></path>
-        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M87.5801307,74.976671 C88.1324154,74.976671 88.5801307,75.4243863 88.5801307,75.976671 C88.5801307,76.2596013 88.4602793,76.5292903 88.2502813,76.7188962 L81.6284839,82.697677 C81.2185643,83.067791 80.5862221,83.0355221 80.2161082,82.6256025 C80.0501841,82.4418333 79.9583333,82.2030442 79.9583333,81.9554519 L79.9582571,78.999671 L44.3672571,79 C43.2626876,79 42.3672571,78.1045695 42.3672571,77 C42.3672571,75.8954305 43.2626876,75 44.3672571,75 L79.9582571,74.999671 L79.9583333,74.976671 L87.5801307,74.976671 Z" id="path-6"></path>
+        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M76.5801307,62.976671 C77.1324154,62.976671 77.5801307,63.4243863 77.5801307,63.976671 C77.5801307,64.2596013 77.4602793,64.5292903 77.2502813,64.7188962 L70.6284839,70.697677 C70.2185643,71.067791 69.5862221,71.0355221 69.2161082,70.6256025 C69.0501841,70.4418333 68.9583333,70.2030442 68.9583333,69.9554519 L68.9582571,66.999671 L33.3672571,67 C32.2626876,67 31.3672571,66.1045695 31.3672571,65 C31.3672571,63.8954305 32.2626876,63 33.3672571,63 L68.9582571,62.999671 L68.9583333,62.976671 L76.5801307,62.976671 Z" id="path-16"></path>
-        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-17">
+        <path d="M76.5801307,62.976671 C77.1324154,62.976671 77.5801307,63.4243863 77.5801307,63.976671 C77.5801307,64.2596013 77.4602793,64.5292903 77.2502813,64.7188962 L70.6284839,70.697677 C70.2185643,71.067791 69.5862221,71.0355221 69.2161082,70.6256025 C69.0501841,70.4418333 68.9583333,70.2030442 68.9583333,69.9554519 L68.9582571,66.999671 L33.3672571,67 C32.2626876,67 31.3672571,66.1045695 31.3672571,65 C31.3672571,63.8954305 32.2626876,63 33.3672571,63 L68.9582571,62.999671 L68.9583333,62.976671 L76.5801307,62.976671 Z" id="path-8"></path>
+        <filter x="-8.7%" y="-25.1%" width="117.3%" height="200.3%" filterUnits="objectBoundingBox" id="filter-9">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-18">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-19" points="52.4074074 37.037037 64.4074074 37.037037 58.4074074 44.037037"></polygon>
-        <filter x="-28.6%" y="-28.3%" width="152.7%" height="192.9%" filterUnits="objectBoundingBox" id="filter-20">
+        <polygon id="path-11" points="52.4074074 37.037037 64.4074074 37.037037 58.4074074 44.037037"></polygon>
+        <filter x="-28.6%" y="-28.3%" width="152.7%" height="192.9%" filterUnits="objectBoundingBox" id="filter-12">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="4" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
             <feOffset dx="0" dy="1" in="shadowInner" result="shadowInner"></feOffset>
@@ -82,46 +50,36 @@
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <filter x="-44.6%" y="-55.9%" width="184.8%" height="248.0%" filterUnits="objectBoundingBox" id="filter-21">
+        <filter x="-44.6%" y="-55.9%" width="184.8%" height="248.0%" filterUnits="objectBoundingBox" id="filter-13">
             <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.841553619   0 0 0 0 0.341832308   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-1-【9-2】-无阴影" transform="translate(-1089.000000, -1061.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-1" transform="translate(-1089.000000, -1061.000000)">
             <g id="Transfer穿梭框-" transform="translate(1089.000000, 1061.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
-                <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="20" y="27.5" width="39" height="57" rx="4"></rect>
-                <rect id="矩形备份-5" fill="url(#linearGradient-9)" opacity="0.303770519" x="65" y="37.5" width="39" height="57" rx="4"></rect>
+                <g id="编组"></g>
+                <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="20" y="27.5" width="39" height="57" rx="4"></rect>
+                <rect id="矩形备份-5" fill="url(#linearGradient-1)" opacity="0.303770519" x="65" y="37.5" width="39" height="57" rx="4"></rect>
                 <g id="形状结合" transform="translate(64.000000, 49.500000) rotate(-270.000000) translate(-64.000000, -49.500000) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
-                    <path stroke="url(#linearGradient-10)" stroke-width="4" d="M65.6515587,48 L64,49.9268185 L62.3484413,48 L65.6515587,48 Z" stroke-linejoin="square"></path>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                    <path stroke="url(#linearGradient-2)" stroke-width="4" d="M65.6515587,48 L64,49.9268185 L62.3484413,48 L65.6515587,48 Z" stroke-linejoin="square"></path>
                 </g>
                 <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
                 </g>
                 <g id="形状结合备份-11" transform="translate(54.473694, 66.966066) rotate(-180.000000) translate(-54.473694, -66.966066) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-16"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-8"></use>
                 </g>
                 <g id="形状结合备份-9" transform="translate(58.685185, 40.222222) rotate(-90.000000) translate(-58.685185, -40.222222) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                    <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-19"></use>
-                    <path stroke="url(#linearGradient-18)" stroke-width="4" d="M60.0589661,39.037037 L58.4074074,40.9638556 L56.7558487,39.037037 L60.0589661,39.037037 Z" stroke-linejoin="square"></path>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-11"></use>
+                    <path stroke="url(#linearGradient-10)" stroke-width="4" d="M60.0589661,39.037037 L58.4074074,40.9638556 L56.7558487,39.037037 L60.0589661,39.037037 Z" stroke-linejoin="square"></path>
                 </g>
                 <path d="M29,34.5 L50,34.5 C51.1045695,34.5 52,35.3954305 52,36.5 C52,37.6045695 51.1045695,38.5 50,38.5 L29,38.5 C27.8954305,38.5 27,37.6045695 27,36.5 C27,35.3954305 27.8954305,34.5 29,34.5 Z" id="形状结合备份-7" fill="#5073E5"></path>
                 <path d="M74,44.5 L95,44.5 C96.1045695,44.5 97,45.3954305 97,46.5 C97,47.6045695 96.1045695,48.5 95,48.5 L74,48.5 C72.8954305,48.5 72,47.6045695 72,46.5 C72,45.3954305 72.8954305,44.5 74,44.5 Z" id="形状结合备份-14" fill="#5073E5"></path>
diff --git a/examples/sites/demos/pc/overviewimage/tree-menu.svg b/examples/sites/demos/pc/overviewimage/tree-menu.svg
index ed0f6c8f2c..19f29b0ace 100644
--- a/examples/sites/demos/pc/overviewimage/tree-menu.svg
+++ b/examples/sites/demos/pc/overviewimage/tree-menu.svg
@@ -2,64 +2,32 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>TreeMenu 树型菜单</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="53.2341208%" x2="128.792906%" y2="41.7629883%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="53.2341208%" x2="128.792906%" y2="41.7629883%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M2.5,27 L12.5,27 C13.3284271,27 14,27.6715729 14,28.5 C14,29.3284271 13.3284271,30 12.5,30 L2.5,30 C1.67157288,30 1,29.3284271 1,28.5 C1,27.6715729 1.67157288,27 2.5,27 Z" id="path-10"></path>
-        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-11">
+        <path d="M2.5,27 L12.5,27 C13.3284271,27 14,27.6715729 14,28.5 C14,29.3284271 13.3284271,30 12.5,30 L2.5,30 C1.67157288,30 1,29.3284271 1,28.5 C1,27.6715729 1.67157288,27 2.5,27 Z" id="path-2"></path>
+        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M2.5,46 L12.5,46 C13.3284271,46 14,46.6715729 14,47.5 C14,48.3284271 13.3284271,49 12.5,49 L2.5,49 C1.67157288,49 1,48.3284271 1,47.5 C1,46.6715729 1.67157288,46 2.5,46 Z" id="path-12"></path>
-        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M2.5,46 L12.5,46 C13.3284271,46 14,46.6715729 14,47.5 C14,48.3284271 13.3284271,49 12.5,49 L2.5,49 C1.67157288,49 1,48.3284271 1,47.5 C1,46.6715729 1.67157288,46 2.5,46 Z" id="path-4"></path>
+        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="53.7688121%" x2="128.792906%" y2="40.4011781%" id="linearGradient-14">
+        <linearGradient x1="44.0988019%" y1="53.7688121%" x2="128.792906%" y2="40.4011781%" id="linearGradient-6">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-15">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-7">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <polyline id="path-16" points="67 6 64 10 61 6"></polyline>
-        <filter x="-40.0%" y="-60.0%" width="213.3%" height="260.0%" filterUnits="objectBoundingBox" id="filter-17">
+        <polyline id="path-8" points="67 6 64 10 61 6"></polyline>
+        <filter x="-40.0%" y="-60.0%" width="213.3%" height="260.0%" filterUnits="objectBoundingBox" id="filter-9">
             <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="1" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
@@ -69,38 +37,30 @@
             <feColorMatrix values="0 0 0 0 0.864817744   0 0 0 0 0.482995   0 0 0 0 0.0248266384  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1869.000000, -884.000000)">
-            <g id="编组-25备份-12" transform="translate(1771.000000, 851.000000)">
-                <g id="TreeMenu-树型菜单" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-3" transform="translate(28.000000, 38.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-9)" x="0" y="0" width="54" height="16" rx="2"></rect>
-                        <g id="形状结合备份-2">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-10"></use>
-                        </g>
-                        <g id="形状结合备份-3">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                        </g>
-                        <path d="M22,23 L52,23 C53.1045695,23 54,23.8954305 54,25 L54,32 C54,33.1045695 53.1045695,34 52,34 L22,34 C20.8954305,34 20,33.1045695 20,32 L20,25 C20,23.8954305 20.8954305,23 22,23 Z" id="形状结合备份-6" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
-                        <path d="M22,42 L52,42 C53.1045695,42 54,42.8954305 54,44 L54,51 C54,52.1045695 53.1045695,53 52,53 L22,53 C20.8954305,53 20,52.1045695 20,51 L20,44 C20,42.8954305 20.8954305,42 22,42 Z" id="形状结合备份-7" fill="url(#linearGradient-14)" opacity="0.303770519"></path>
-                        <path d="M-12.5,36 L15.5,36 C16.3284271,36 17,36.6715729 17,37.5 C17,38.3284271 16.3284271,39 15.5,39 L-12.5,39 C-13.3284271,39 -14,38.3284271 -14,37.5 C-14,36.6715729 -13.3284271,36 -12.5,36 Z" id="形状结合备份" fill="#5073E5" transform="translate(1.500000, 37.500000) rotate(-270.000000) translate(-1.500000, -37.500000) "></path>
-                        <path d="M59.7142857,2 L68.2857143,2 C69.2324881,2 70,2.76751186 70,3.71428571 L70,12.2857143 C70,13.2324881 69.2324881,14 68.2857143,14 L59.7142857,14 C58.7675119,14 58,13.2324881 58,12.2857143 L58,3.71428571 C58,2.76751186 58.7675119,2 59.7142857,2 Z" id="形状结合备份-47" fill="url(#linearGradient-15)"></path>
-                        <g id="路径" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
-                            <use stroke="#FFFFFF" stroke-width="2" xlink:href="#path-16"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1869.000000, -935.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-12" transform="translate(1175.000000, 591.000000)">
+                    <g id="TreeMenu-树型菜单" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-3" transform="translate(28.000000, 38.000000)">
+                            <rect id="矩形" fill="url(#linearGradient-1)" x="0" y="0" width="54" height="16" rx="2"></rect>
+                            <g id="形状结合备份-2">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                            </g>
+                            <g id="形状结合备份-3">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
+                            </g>
+                            <path d="M22,23 L52,23 C53.1045695,23 54,23.8954305 54,25 L54,32 C54,33.1045695 53.1045695,34 52,34 L22,34 C20.8954305,34 20,33.1045695 20,32 L20,25 C20,23.8954305 20.8954305,23 22,23 Z" id="形状结合备份-6" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
+                            <path d="M22,42 L52,42 C53.1045695,42 54,42.8954305 54,44 L54,51 C54,52.1045695 53.1045695,53 52,53 L22,53 C20.8954305,53 20,52.1045695 20,51 L20,44 C20,42.8954305 20.8954305,42 22,42 Z" id="形状结合备份-7" fill="url(#linearGradient-6)" opacity="0.303770519"></path>
+                            <path d="M-12.5,36 L15.5,36 C16.3284271,36 17,36.6715729 17,37.5 C17,38.3284271 16.3284271,39 15.5,39 L-12.5,39 C-13.3284271,39 -14,38.3284271 -14,37.5 C-14,36.6715729 -13.3284271,36 -12.5,36 Z" id="形状结合备份" fill="#5073E5" transform="translate(1.500000, 37.500000) rotate(-270.000000) translate(-1.500000, -37.500000) "></path>
+                            <path d="M59.7142857,2 L68.2857143,2 C69.2324881,2 70,2.76751186 70,3.71428571 L70,12.2857143 C70,13.2324881 69.2324881,14 68.2857143,14 L59.7142857,14 C58.7675119,14 58,13.2324881 58,12.2857143 L58,3.71428571 C58,2.76751186 58.7675119,2 59.7142857,2 Z" id="形状结合备份-47" fill="url(#linearGradient-7)"></path>
+                            <g id="路径" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                                <use stroke="#FFFFFF" stroke-width="2" xlink:href="#path-8"></use>
+                            </g>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/tree.svg b/examples/sites/demos/pc/overviewimage/tree.svg
index b0308143bd..5ddbfe2134 100644
--- a/examples/sites/demos/pc/overviewimage/tree.svg
+++ b/examples/sites/demos/pc/overviewimage/tree.svg
@@ -2,116 +2,84 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Tree 树      </title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="53.2341208%" x2="128.792906%" y2="41.7629883%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="53.2341208%" x2="128.792906%" y2="41.7629883%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.2341208%" x2="128.792906%" y2="41.7629883%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="53.2341208%" x2="128.792906%" y2="41.7629883%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M7.5,27 L17.5,27 C18.3284271,27 19,27.6715729 19,28.5 C19,29.3284271 18.3284271,30 17.5,30 L7.5,30 C6.67157288,30 6,29.3284271 6,28.5 C6,27.6715729 6.67157288,27 7.5,27 Z" id="path-11"></path>
-        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-12">
+        <path d="M7.5,27 L17.5,27 C18.3284271,27 19,27.6715729 19,28.5 C19,29.3284271 18.3284271,30 17.5,30 L7.5,30 C6.67157288,30 6,29.3284271 6,28.5 C6,27.6715729 6.67157288,27 7.5,27 Z" id="path-3"></path>
+        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M7.5,46 L17.5,46 C18.3284271,46 19,46.6715729 19,47.5 C19,48.3284271 18.3284271,49 17.5,49 L7.5,49 C6.67157288,49 6,48.3284271 6,47.5 C6,46.6715729 6.67157288,46 7.5,46 Z" id="path-13"></path>
-        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-14">
+        <path d="M7.5,46 L17.5,46 C18.3284271,46 19,46.6715729 19,47.5 C19,48.3284271 18.3284271,49 17.5,49 L7.5,49 C6.67157288,49 6,48.3284271 6,47.5 C6,46.6715729 6.67157288,46 7.5,46 Z" id="path-5"></path>
+        <filter x="-30.8%" y="-66.7%" width="161.5%" height="366.7%" filterUnits="objectBoundingBox" id="filter-6">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M25,41 L33,41 C34.1045695,41 35,41.8954305 35,43 L35,51 C35,52.1045695 34.1045695,53 33,53 L25,53 C23.8954305,53 23,52.1045695 23,51 L23,43 C23,41.8954305 23.8954305,41 25,41 Z" id="path-15"></path>
-        <filter x="-33.3%" y="-16.7%" width="166.7%" height="166.7%" filterUnits="objectBoundingBox" id="filter-16">
+        <path d="M25,41 L33,41 C34.1045695,41 35,41.8954305 35,43 L35,51 C35,52.1045695 34.1045695,53 33,53 L25,53 C23.8954305,53 23,52.1045695 23,51 L23,43 C23,41.8954305 23.8954305,41 25,41 Z" id="path-7"></path>
+        <filter x="-33.3%" y="-16.7%" width="166.7%" height="166.7%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M25,22 L33,22 C34.1045695,22 35,22.8954305 35,24 L35,32 C35,33.1045695 34.1045695,34 33,34 L25,34 C23.8954305,34 23,33.1045695 23,32 L23,24 C23,22.8954305 23.8954305,22 25,22 Z" id="path-17"></path>
-        <filter x="-33.3%" y="-16.7%" width="166.7%" height="166.7%" filterUnits="objectBoundingBox" id="filter-18">
+        <path d="M25,22 L33,22 C34.1045695,22 35,22.8954305 35,24 L35,32 C35,33.1045695 34.1045695,34 33,34 L25,34 C23.8954305,34 23,33.1045695 23,32 L23,24 C23,22.8954305 23.8954305,22 25,22 Z" id="path-9"></path>
+        <filter x="-33.3%" y="-16.7%" width="166.7%" height="166.7%" filterUnits="objectBoundingBox" id="filter-10">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M6.5330808,2.44974747 L6.53274747,5.36574747 L9.44974747,5.36641413 L9.44974747,6.5330808 L6.53274747,6.53274747 L6.5330808,9.44974747 L5.36641413,9.44974747 L5.36574747,6.53274747 L2.44974747,6.5330808 L2.44974747,5.36641413 L5.36574747,5.36574747 L5.36641413,2.44974747 L6.5330808,2.44974747 Z" id="path-19"></path>
-        <filter x="-21.4%" y="-21.4%" width="171.4%" height="171.4%" filterUnits="objectBoundingBox" id="filter-20">
+        <path d="M6.5330808,2.44974747 L6.53274747,5.36574747 L9.44974747,5.36641413 L9.44974747,6.5330808 L6.53274747,6.53274747 L6.5330808,9.44974747 L5.36641413,9.44974747 L5.36574747,6.53274747 L2.44974747,6.5330808 L2.44974747,5.36641413 L5.36574747,5.36574747 L5.36641413,2.44974747 L6.5330808,2.44974747 Z" id="path-11"></path>
+        <filter x="-21.4%" y="-21.4%" width="171.4%" height="171.4%" filterUnits="objectBoundingBox" id="filter-12">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="1" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.864817744   0 0 0 0 0.482995   0 0 0 0 0.0248266384  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="54.0006858%" x2="128.792906%" y2="39.810617%" id="linearGradient-21">
+        <linearGradient x1="44.0988019%" y1="54.0006858%" x2="128.792906%" y2="39.810617%" id="linearGradient-13">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M-18.5,28 L29.5,28 C30.3284271,28 31,28.6715729 31,29.5 C31,30.3284271 30.3284271,31 29.5,31 L-18.5,31 C-19.3284271,31 -20,30.3284271 -20,29.5 C-20,28.6715729 -19.3284271,28 -18.5,28 Z" id="path-22"></path>
-        <filter x="-7.8%" y="-66.7%" width="115.7%" height="366.7%" filterUnits="objectBoundingBox" id="filter-23">
+        <path d="M-18.5,28 L29.5,28 C30.3284271,28 31,28.6715729 31,29.5 C31,30.3284271 30.3284271,31 29.5,31 L-18.5,31 C-19.3284271,31 -20,30.3284271 -20,29.5 C-20,28.6715729 -19.3284271,28 -18.5,28 Z" id="path-14"></path>
+        <filter x="-7.8%" y="-66.7%" width="115.7%" height="366.7%" filterUnits="objectBoundingBox" id="filter-15">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-24">
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-16">
             <stop stop-color="#FFCC00" offset="0%"></stop>
             <stop stop-color="#FF9D00" offset="100%"></stop>
         </linearGradient>
-        <path d="M2,0 L10,0 C11.1045695,-2.02906125e-16 12,0.8954305 12,2 L12,10 C12,11.1045695 11.1045695,12 10,12 L2,12 C0.8954305,12 1.3527075e-16,11.1045695 0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-25"></path>
-        <filter x="-29.2%" y="-20.8%" width="158.3%" height="158.3%" filterUnits="objectBoundingBox" id="filter-26">
+        <path d="M2,0 L10,0 C11.1045695,-2.02906125e-16 12,0.8954305 12,2 L12,10 C12,11.1045695 11.1045695,12 10,12 L2,12 C0.8954305,12 1.3527075e-16,11.1045695 0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-17"></path>
+        <filter x="-29.2%" y="-20.8%" width="158.3%" height="158.3%" filterUnits="objectBoundingBox" id="filter-18">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.661752894   0 0 0 0 0.324547702   0 0 0 0 0.00489962574  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M6.5330808,2.44974747 L6.53274747,5.36574747 L9.44974747,5.36641413 L9.44974747,6.5330808 L6.53274747,6.53274747 L6.5330808,9.44974747 L5.36641413,9.44974747 L5.36574747,6.53274747 L2.44974747,6.5330808 L2.44974747,5.36641413 L5.36574747,5.36574747 L5.36641413,2.44974747 L6.5330808,2.44974747 Z" id="path-27"></path>
-        <filter x="-21.4%" y="-21.4%" width="171.4%" height="171.4%" filterUnits="objectBoundingBox" id="filter-28">
+        <path d="M6.5330808,2.44974747 L6.53274747,5.36574747 L9.44974747,5.36641413 L9.44974747,6.5330808 L6.53274747,6.53274747 L6.5330808,9.44974747 L5.36641413,9.44974747 L5.36574747,6.53274747 L2.44974747,6.5330808 L2.44974747,5.36641413 L5.36574747,5.36574747 L5.36641413,2.44974747 L6.5330808,2.44974747 Z" id="path-19"></path>
+        <filter x="-21.4%" y="-21.4%" width="171.4%" height="171.4%" filterUnits="objectBoundingBox" id="filter-20">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="1" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.864817744   0 0 0 0 0.482995   0 0 0 0 0.0248266384  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <polygon id="path-29" points="25.4497475 27.3664141 32.4497475 27.3664141 32.4497475 28.5330808 25.4497475 28.5330808"></polygon>
-        <filter x="-21.4%" y="-128.6%" width="171.4%" height="528.6%" filterUnits="objectBoundingBox" id="filter-30">
+        <polygon id="path-21" points="25.4497475 27.3664141 32.4497475 27.3664141 32.4497475 28.5330808 25.4497475 28.5330808"></polygon>
+        <filter x="-21.4%" y="-128.6%" width="171.4%" height="528.6%" filterUnits="objectBoundingBox" id="filter-22">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="1" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.176403911   0 0 0 0 0.290889653   0 0 0 0 0.672508793  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <polygon id="path-31" points="25.4497475 46.3664141 32.4497475 46.3664141 32.4497475 47.5330808 25.4497475 47.5330808"></polygon>
-        <filter x="-21.4%" y="-128.6%" width="171.4%" height="528.6%" filterUnits="objectBoundingBox" id="filter-32">
+        <polygon id="path-23" points="25.4497475 46.3664141 32.4497475 46.3664141 32.4497475 47.5330808 25.4497475 47.5330808"></polygon>
+        <filter x="-21.4%" y="-128.6%" width="171.4%" height="528.6%" filterUnits="objectBoundingBox" id="filter-24">
             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
             <feOffset dx="1" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -119,63 +87,53 @@
             <feColorMatrix values="0 0 0 0 0.176403911   0 0 0 0 0.290889653   0 0 0 0 0.672508793  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-697.000000, -1111.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-697.000000, -1111.000000)">
             <g id="Tree-树------" transform="translate(697.000000, 1111.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-3" transform="translate(25.000000, 38.000000)">
-                    <rect id="矩形" stroke="url(#linearGradient-10)" fill="url(#linearGradient-9)" x="20" y="0" width="54" height="16" rx="2"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)" x="20" y="0" width="54" height="16" rx="2"></rect>
                     <g id="形状结合备份-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-3"></use>
                     </g>
                     <g id="形状结合备份-3">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-13"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-5"></use>
                     </g>
                     <g id="形状结合备份-4">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-15"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-7"></use>
                     </g>
                     <g id="形状结合备份-5">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-17"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
                     </g>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(5.949747, 5.949747) rotate(-360.000000) translate(-5.949747, -5.949747) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-19"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-11"></use>
                     </g>
-                    <path d="M43,23 L72,23 C73.1045695,23 74,23.8954305 74,25 L74,32 C74,33.1045695 73.1045695,34 72,34 L43,34 C41.8954305,34 41,33.1045695 41,32 L41,25 C41,23.8954305 41.8954305,23 43,23 Z" id="形状结合备份-6" fill="url(#linearGradient-21)" opacity="0.303770519"></path>
-                    <path d="M43,42 L72,42 C73.1045695,42 74,42.8954305 74,44 L74,51 C74,52.1045695 73.1045695,53 72,53 L43,53 C41.8954305,53 41,52.1045695 41,51 L41,44 C41,42.8954305 41.8954305,42 43,42 Z" id="形状结合备份-7" fill="url(#linearGradient-21)" opacity="0.303770519"></path>
+                    <path d="M43,23 L72,23 C73.1045695,23 74,23.8954305 74,25 L74,32 C74,33.1045695 73.1045695,34 72,34 L43,34 C41.8954305,34 41,33.1045695 41,32 L41,25 C41,23.8954305 41.8954305,23 43,23 Z" id="形状结合备份-6" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
+                    <path d="M43,42 L72,42 C73.1045695,42 74,42.8954305 74,44 L74,51 C74,52.1045695 73.1045695,53 72,53 L43,53 C41.8954305,53 41,52.1045695 41,51 L41,44 C41,42.8954305 41.8954305,42 43,42 Z" id="形状结合备份-7" fill="url(#linearGradient-13)" opacity="0.303770519"></path>
                     <g id="形状结合备份" transform="translate(5.500000, 29.500000) rotate(-270.000000) translate(-5.500000, -29.500000) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-22"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
                     </g>
                     <g id="形状结合备份-46">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-26)" xlink:href="#path-25"></use>
-                        <use fill="url(#linearGradient-24)" fill-rule="evenodd" xlink:href="#path-25"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
+                        <use fill="url(#linearGradient-16)" fill-rule="evenodd" xlink:href="#path-17"></use>
                     </g>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(5.949747, 5.949747) rotate(-360.000000) translate(-5.949747, -5.949747) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-27"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-27"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-19"></use>
                     </g>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(28.949747, 27.949747) rotate(-360.000000) translate(-28.949747, -27.949747) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-30)" xlink:href="#path-29"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-29"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-22)" xlink:href="#path-21"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-21"></use>
                     </g>
                     <g id="形状结合" fill-rule="nonzero" transform="translate(28.949747, 46.949747) rotate(-360.000000) translate(-28.949747, -46.949747) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-32)" xlink:href="#path-31"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-31"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-24)" xlink:href="#path-23"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF" xlink:href="#path-23"></use>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/user-account.svg b/examples/sites/demos/pc/overviewimage/user-account.svg
index 1ca4095af7..83a5217cfa 100644
--- a/examples/sites/demos/pc/overviewimage/user-account.svg
+++ b/examples/sites/demos/pc/overviewimage/user-account.svg
@@ -2,71 +2,29 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>LogonUser 登录用户</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="65.3675254%" x2="128.792906%" y2="10.8603097%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="65.3675254%" x2="128.792906%" y2="10.8603097%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="64.2162036%" x2="128.792906%" y2="13.7926217%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="64.2162036%" x2="128.792906%" y2="13.7926217%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.0413544%" y1="86.8386573%" x2="116.207928%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="45.0413544%" y1="86.8386573%" x2="116.207928%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1087.000000, -1159.000000)">
             <g id="LogonUser-登录用户" transform="translate(1087.000000, 1159.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="编组-19" transform="translate(26.000000, 38.000000)">
-                    <path d="M8,9.37209302 L72,9.37209302 C73.1045695,9.37209302 74,10.2675235 74,11.372093 L74,50 C74,51.1045695 73.1045695,52 72,52 L10,52 C8.8954305,52 8,51.1045695 8,50 L8,9.37209302 L8,9.37209302 Z" id="矩形备份" fill="url(#linearGradient-9)" opacity="0.303770519"></path>
-                    <path d="M4,0 L62,0 C64.209139,-4.05812251e-16 66,1.790861 66,4 L66,37 C66,39.209139 64.209139,41 62,41 L4,41 C1.790861,41 2.705415e-16,39.209139 0,37 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-10)"></path>
+                    <path d="M8,9.37209302 L72,9.37209302 C73.1045695,9.37209302 74,10.2675235 74,11.372093 L74,50 C74,51.1045695 73.1045695,52 72,52 L10,52 C8.8954305,52 8,51.1045695 8,50 L8,9.37209302 L8,9.37209302 Z" id="矩形备份" fill="url(#linearGradient-1)" opacity="0.303770519"></path>
+                    <path d="M4,0 L62,0 C64.209139,-4.05812251e-16 66,1.790861 66,4 L66,37 C66,39.209139 64.209139,41 62,41 L4,41 C1.790861,41 2.705415e-16,39.209139 0,37 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形" fill="url(#linearGradient-2)"></path>
                     <g id="编组" transform="translate(8.000000, 10.000000)">
                         <rect id="矩形" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero" x="0" y="0" width="20" height="20" rx="10"></rect>
-                        <path d="M10.490425,4 C9.13655235,4 7.95399918,4.91544998 7.60425131,6.20523114 L7.54348319,6.47948576 L7.51499854,6.70357194 L7.50394718,6.85302166 C7.50170607,6.89357599 7.50077879,6.92853756 7.50077879,6.96891474 L7.50077879,8.07052476 C7.50077879,8.14902495 7.50483612,8.22777485 7.51261139,8.31163039 L7.53507408,8.50031886 L7.58308183,8.73239209 L7.61862185,8.87485547 L7.63840894,8.94305139 L7.70598199,9.1339598 C7.82859507,9.44697802 8.00059316,9.73356366 8.21340269,9.9844137 L8.24114139,10.0147541 L6.70782719,10.3465683 C5.7152586,10.5543945 4.99896282,11.428771 5.00000113,12.4459923 L5.00000113,14.4064965 C5.00000113,15.2891778 5.71947075,16 6.59758739,16 L14.4025055,16 C15.2804851,16 16.0000011,15.2891327 16.0000011,14.4064965 L16.0000011,12.4426608 L15.9922218,12.2825694 C15.9110806,11.3304098 15.2161616,10.5374336 14.2774046,10.3457329 L12.7501751,10.0157377 C13.2131862,9.4858224 13.4831757,8.80266382 13.4831757,8.0738627 L13.4831757,6.9720948 C13.4831757,5.331949 12.133952,4 10.490425,4 Z" id="Fill-1" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
+                        <path d="M10.490425,4 C9.13655235,4 7.95399918,4.91544998 7.60425131,6.20523114 L7.54348319,6.47948576 L7.51499854,6.70357194 L7.50394718,6.85302166 C7.50170607,6.89357599 7.50077879,6.92853756 7.50077879,6.96891474 L7.50077879,8.07052476 C7.50077879,8.14902495 7.50483612,8.22777485 7.51261139,8.31163039 L7.53507408,8.50031886 L7.58308183,8.73239209 L7.61862185,8.87485547 L7.63840894,8.94305139 L7.70598199,9.1339598 C7.82859507,9.44697802 8.00059316,9.73356366 8.21340269,9.9844137 L8.24114139,10.0147541 L6.70782719,10.3465683 C5.7152586,10.5543945 4.99896282,11.428771 5.00000113,12.4459923 L5.00000113,14.4064965 C5.00000113,15.2891778 5.71947075,16 6.59758739,16 L14.4025055,16 C15.2804851,16 16.0000011,15.2891327 16.0000011,14.4064965 L16.0000011,12.4426608 L15.9922218,12.2825694 C15.9110806,11.3304098 15.2161616,10.5374336 14.2774046,10.3457329 L12.7501751,10.0157377 C13.2131862,9.4858224 13.4831757,8.80266382 13.4831757,8.0738627 L13.4831757,6.9720948 C13.4831757,5.331949 12.133952,4 10.490425,4 Z" id="Fill-1" fill="url(#linearGradient-3)" opacity="0.604724702"></path>
                     </g>
                     <path d="M37,13 L57,13 C58.1045695,13 59,13.8954305 59,15 C59,16.1045695 58.1045695,17 57,17 L37,17 C35.8954305,17 35,16.1045695 35,15 C35,13.8954305 35.8954305,13 37,13 Z" id="矩形" fill="#FFFFFF"></path>
                     <path d="M37,24 L50,24 C51.1045695,24 52,24.8954305 52,26 C52,27.1045695 51.1045695,28 50,28 L37,28 C35.8954305,28 35,27.1045695 35,26 C35,24.8954305 35.8954305,24 37,24 Z" id="矩形" fill="#FFFFFF" opacity="0.6"></path>
diff --git a/examples/sites/demos/pc/overviewimage/user-contact.svg b/examples/sites/demos/pc/overviewimage/user-contact.svg
index 6c91d74d1e..1be863b94c 100644
--- a/examples/sites/demos/pc/overviewimage/user-contact.svg
+++ b/examples/sites/demos/pc/overviewimage/user-contact.svg
@@ -2,82 +2,43 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>UserContact 联系人</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="79.3820117%" x2="128.792906%" y2="-24.8333129%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="79.3820117%" x2="128.792906%" y2="-24.8333129%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.6133387%" x2="128.792906%" y2="48.437882%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.6133387%" x2="128.792906%" y2="48.437882%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.0072373%" x2="128.792906%" y2="42.3408399%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="53.0072373%" x2="128.792906%" y2="42.3408399%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <path d="M33.1418699,0.00101033982 C34.6210275,0.0394791293 35.8434513,1.17203116 35.9878938,2.63647041 L36,2.81374739 L36,33.1862526 C35.9408344,34.7356141 34.6801938,35.9589821 33.1418699,35.9989897 L6.25008989,35.9989897 C4.77093228,35.9605209 3.5485085,34.8279688 3.40406604,33.3635296 L3.39195981,33.1862526 L3.39195981,28.0116776 L5.65326633,28.0116776 C6.65237442,28.0116776 7.46231156,27.2058564 7.46231156,26.2118255 C7.46231156,25.2674961 6.73134329,24.493026 5.80163617,24.4179398 L5.65326633,24.4119733 L3.39195981,24.4119733 L3.39195981,20.1598226 L5.65326633,20.1598226 C6.65237442,20.1598226 7.46231156,19.3540013 7.46231156,18.3599704 C7.46231156,17.4156411 6.73134329,16.6411709 5.80163617,16.5660847 L5.65326633,16.5601183 L3.39195981,16.5601183 L3.39195981,12.3079675 L5.65326633,12.3079675 C6.14894252,12.3261609 6.631282,12.1460144 6.99247893,11.8077918 C7.35367587,11.4695693 7.56361616,11.0014694 7.57537687,10.5081154 C7.5577103,10.0187188 7.34519368,9.55639126 6.98465403,9.2230043 C6.66417435,8.92666034 6.25011538,8.75381201 5.8166013,8.73186463 L5.65326633,8.73076137 L3.39195981,8.73076137 L3.39195981,2.81374739 C3.45112537,1.26438585 4.71176598,0.0410178809 6.25008989,0.00101033982 L33.1418699,0.00101033982 Z M21.09799,8.34909638 C18.9702872,8.34909638 17.1303151,9.82464913 16.6785136,11.8932645 C16.2267121,13.9618798 17.285276,16.0640774 19.2211055,16.9425869 C15.1678025,18.2930444 12.3360341,21.9458595 12.0527638,26.1893273 C11.9737139,26.5521361 12.0509836,26.9313013 12.2658248,27.2348255 C12.4538108,27.5004091 12.7320925,27.6868423 13.0465785,27.7615928 L13.1834171,27.7866961 L29.0125628,27.7866961 C29.3825356,27.7384937 29.715314,27.5383497 29.9301551,27.2348255 C30.1449963,26.9313014 30.222266,26.5521361 30.1432161,26.1893273 C29.8599458,21.9458595 27.0281774,18.2930444 22.9748744,16.9425869 C24.9107039,16.0640774 25.9692678,13.9618798 25.5174663,11.8932645 C25.0656648,9.82464913 23.2256927,8.34909638 21.09799,8.34909638 Z M5.78894473,25.2219068 C6.40488157,25.2219068 6.7348477,25.5064242 6.77884319,26.0754591 L6.78391959,26.2118255 C6.78391959,26.8717713 6.4522613,27.2017442 5.78894473,27.2017442 L0.994974889,27.2017442 C0.379038053,27.2017442 0.0490718908,26.9172267 0.00507640249,26.3481918 L0,26.2118255 C0,25.5518797 0.331658296,25.2219068 0.994974889,25.2219068 L5.78894473,25.2219068 Z M5.78894473,17.3700517 C6.40488157,17.3700517 6.7348477,17.6545692 6.77884319,18.2236041 L6.783,18.348 L6.77884319,18.4738386 C6.7348477,19.0428735 6.40488155,19.327391 5.78894473,19.327391 L0.994974889,19.327391 C0.379038053,19.327391 0.0490718908,19.0428735 0.00507640249,18.4738386 L0,18.348 L0.00507640249,18.2236041 C0.0490718908,17.6545692 0.379038053,17.3700517 0.994974889,17.3700517 L5.78894473,17.3700517 Z M5.78894473,9.54069485 C6.40488157,9.54069485 6.7348477,9.82521229 6.77884319,10.3942472 L6.783,10.519 L6.77884319,10.6444817 C6.7348477,11.2135166 6.40488155,11.4980341 5.78894473,11.4980341 L0.994974889,11.4980341 C0.379038053,11.4980341 0.0490718908,11.2135166 0.00507640249,10.6444817 L0,10.519 L0.00507640249,10.3942472 C0.0490718908,9.82521227 0.379038053,9.54069485 0.994974889,9.54069485 L5.78894473,9.54069485 Z" id="path-12"></path>
-        <filter x="-5.6%" y="-2.8%" width="111.1%" height="111.1%" filterUnits="objectBoundingBox" id="filter-13">
+        <path d="M33.1418699,0.00101033982 C34.6210275,0.0394791293 35.8434513,1.17203116 35.9878938,2.63647041 L36,2.81374739 L36,33.1862526 C35.9408344,34.7356141 34.6801938,35.9589821 33.1418699,35.9989897 L6.25008989,35.9989897 C4.77093228,35.9605209 3.5485085,34.8279688 3.40406604,33.3635296 L3.39195981,33.1862526 L3.39195981,28.0116776 L5.65326633,28.0116776 C6.65237442,28.0116776 7.46231156,27.2058564 7.46231156,26.2118255 C7.46231156,25.2674961 6.73134329,24.493026 5.80163617,24.4179398 L5.65326633,24.4119733 L3.39195981,24.4119733 L3.39195981,20.1598226 L5.65326633,20.1598226 C6.65237442,20.1598226 7.46231156,19.3540013 7.46231156,18.3599704 C7.46231156,17.4156411 6.73134329,16.6411709 5.80163617,16.5660847 L5.65326633,16.5601183 L3.39195981,16.5601183 L3.39195981,12.3079675 L5.65326633,12.3079675 C6.14894252,12.3261609 6.631282,12.1460144 6.99247893,11.8077918 C7.35367587,11.4695693 7.56361616,11.0014694 7.57537687,10.5081154 C7.5577103,10.0187188 7.34519368,9.55639126 6.98465403,9.2230043 C6.66417435,8.92666034 6.25011538,8.75381201 5.8166013,8.73186463 L5.65326633,8.73076137 L3.39195981,8.73076137 L3.39195981,2.81374739 C3.45112537,1.26438585 4.71176598,0.0410178809 6.25008989,0.00101033982 L33.1418699,0.00101033982 Z M21.09799,8.34909638 C18.9702872,8.34909638 17.1303151,9.82464913 16.6785136,11.8932645 C16.2267121,13.9618798 17.285276,16.0640774 19.2211055,16.9425869 C15.1678025,18.2930444 12.3360341,21.9458595 12.0527638,26.1893273 C11.9737139,26.5521361 12.0509836,26.9313013 12.2658248,27.2348255 C12.4538108,27.5004091 12.7320925,27.6868423 13.0465785,27.7615928 L13.1834171,27.7866961 L29.0125628,27.7866961 C29.3825356,27.7384937 29.715314,27.5383497 29.9301551,27.2348255 C30.1449963,26.9313014 30.222266,26.5521361 30.1432161,26.1893273 C29.8599458,21.9458595 27.0281774,18.2930444 22.9748744,16.9425869 C24.9107039,16.0640774 25.9692678,13.9618798 25.5174663,11.8932645 C25.0656648,9.82464913 23.2256927,8.34909638 21.09799,8.34909638 Z M5.78894473,25.2219068 C6.40488157,25.2219068 6.7348477,25.5064242 6.77884319,26.0754591 L6.78391959,26.2118255 C6.78391959,26.8717713 6.4522613,27.2017442 5.78894473,27.2017442 L0.994974889,27.2017442 C0.379038053,27.2017442 0.0490718908,26.9172267 0.00507640249,26.3481918 L0,26.2118255 C0,25.5518797 0.331658296,25.2219068 0.994974889,25.2219068 L5.78894473,25.2219068 Z M5.78894473,17.3700517 C6.40488157,17.3700517 6.7348477,17.6545692 6.77884319,18.2236041 L6.783,18.348 L6.77884319,18.4738386 C6.7348477,19.0428735 6.40488155,19.327391 5.78894473,19.327391 L0.994974889,19.327391 C0.379038053,19.327391 0.0490718908,19.0428735 0.00507640249,18.4738386 L0,18.348 L0.00507640249,18.2236041 C0.0490718908,17.6545692 0.379038053,17.3700517 0.994974889,17.3700517 L5.78894473,17.3700517 Z M5.78894473,9.54069485 C6.40488157,9.54069485 6.7348477,9.82521229 6.77884319,10.3942472 L6.783,10.519 L6.77884319,10.6444817 C6.7348477,11.2135166 6.40488155,11.4980341 5.78894473,11.4980341 L0.994974889,11.4980341 C0.379038053,11.4980341 0.0490718908,11.2135166 0.00507640249,10.6444817 L0,10.519 L0.00507640249,10.3942472 C0.0490718908,9.82521227 0.379038053,9.54069485 0.994974889,9.54069485 L5.78894473,9.54069485 Z" id="path-4"></path>
+        <filter x="-5.6%" y="-2.8%" width="111.1%" height="111.1%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -2808.000000)">
-            <g id="编组-25备份-19" transform="translate(1380.000000, 2775.000000)">
-                <g id="UserContact-联系人" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-35" transform="translate(32.000000, 37.000000)">
-                        <g id="编组-34" transform="translate(11.925926, 7.000000)" opacity="0.204287574">
-                            <path d="M0,4 L0,39.690603 L0,39.690603 C0,41.5225906 1.5442441,43 3.4418973,43 L44.7062508,43 C46.603904,43 48.1481481,41.5225906 48.1481481,39.690603 L48.1481481,4 C48.1481481,1.790861 46.3572871,-8.49901461e-16 44.1481481,0 L4,0 C1.790861,-3.82769592e-17 -7.1463071e-16,1.790861 0,4 Z" id="路径备份-2" fill="url(#linearGradient-9)"></path>
-                            <rect id="矩形备份-6" fill="url(#linearGradient-10)" x="8.07407407" y="19" width="31" height="4" rx="2"></rect>
-                            <rect id="矩形备份-24" fill="url(#linearGradient-11)" x="15.8578579" y="9" width="14" height="4" rx="2"></rect>
-                            <rect id="矩形备份-21" fill="url(#linearGradient-10)" x="8.07407407" y="29" width="31" height="4" rx="2"></rect>
-                        </g>
-                        <g id="形状结合">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-1478.000000, -2859.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-19" transform="translate(784.000000, 2515.000000)">
+                    <g id="UserContact-联系人" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-35" transform="translate(32.000000, 37.000000)">
+                            <g id="编组-34" transform="translate(11.925926, 7.000000)" opacity="0.204287574">
+                                <path d="M0,4 L0,39.690603 L0,39.690603 C0,41.5225906 1.5442441,43 3.4418973,43 L44.7062508,43 C46.603904,43 48.1481481,41.5225906 48.1481481,39.690603 L48.1481481,4 C48.1481481,1.790861 46.3572871,-8.49901461e-16 44.1481481,0 L4,0 C1.790861,-3.82769592e-17 -7.1463071e-16,1.790861 0,4 Z" id="路径备份-2" fill="url(#linearGradient-1)"></path>
+                                <rect id="矩形备份-6" fill="url(#linearGradient-2)" x="8.07407407" y="19" width="31" height="4" rx="2"></rect>
+                                <rect id="矩形备份-24" fill="url(#linearGradient-3)" x="15.8578579" y="9" width="14" height="4" rx="2"></rect>
+                                <rect id="矩形备份-21" fill="url(#linearGradient-2)" x="8.07407407" y="29" width="31" height="4" rx="2"></rect>
+                            </g>
+                            <rect id="矩形" fill="#FFFFFF" x="3" y="4" width="33" height="29"></rect>
+                            <g id="形状结合">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
+                            </g>
                         </g>
                     </g>
                 </g>
diff --git a/examples/sites/demos/pc/overviewimage/user-head.svg b/examples/sites/demos/pc/overviewimage/user-head.svg
index ef32d905d8..128a884fab 100644
--- a/examples/sites/demos/pc/overviewimage/user-head.svg
+++ b/examples/sites/demos/pc/overviewimage/user-head.svg
@@ -2,96 +2,54 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Avatar 头像</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="45.9796323%" y1="86.8386573%" x2="103.680025%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="45.9796323%" y1="86.8386573%" x2="103.680025%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="59.258895%" x2="128.792906%" y2="26.418436%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="59.258895%" x2="128.792906%" y2="26.418436%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <polygon id="path-12" points="22.7407655 41.2755004 29.2592345 41.2755004 29.2592345 47.7928503 22.7407655 47.7928503"></polygon>
-        <filter x="-61.4%" y="-30.7%" width="222.7%" height="222.7%" filterUnits="objectBoundingBox" id="filter-13">
+        <polygon id="path-4" points="22.7407655 41.2755004 29.2592345 41.2755004 29.2592345 47.7928503 22.7407655 47.7928503"></polygon>
+        <filter x="-61.4%" y="-30.7%" width="222.7%" height="222.7%" filterUnits="objectBoundingBox" id="filter-5">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <path d="M22.7407655,42.1444804 L18.3951195,36.9306005 L13.1195053,36.9306005 C13.084287,36.9306005 13.0513739,36.9481164 13.0315881,36.9772464 C13.0118024,37.0063765 13.0077044,37.0434043 13.0206418,37.0761546 L17.308708,47.7928503 L22.7407655,44.1724625 L22.7407655,42.1444804 Z M38.8804947,36.9305999 L33.6048805,36.9305999 L29.2592345,42.1444804 L29.2592345,44.1724625 L34.691292,47.7928503 L38.9782718,37.0761546 C38.9917122,37.0435893 38.987985,37.0064625 38.9683395,36.9772174 C38.9486939,36.9479724 38.9157296,36.9304791 38.8804947,36.9305999 L38.8804947,36.9305999 Z" id="path-14"></path>
-        <filter x="-15.4%" y="-18.4%" width="130.8%" height="173.6%" filterUnits="objectBoundingBox" id="filter-15">
+        <path d="M22.7407655,42.1444804 L18.3951195,36.9306005 L13.1195053,36.9306005 C13.084287,36.9306005 13.0513739,36.9481164 13.0315881,36.9772464 C13.0118024,37.0063765 13.0077044,37.0434043 13.0206418,37.0761546 L17.308708,47.7928503 L22.7407655,44.1724625 L22.7407655,42.1444804 Z M38.8804947,36.9305999 L33.6048805,36.9305999 L29.2592345,42.1444804 L29.2592345,44.1724625 L34.691292,47.7928503 L38.9782718,37.0761546 C38.9917122,37.0435893 38.987985,37.0064625 38.9683395,36.9772174 C38.9486939,36.9479724 38.9157296,36.9304791 38.8804947,36.9305999 L38.8804947,36.9305999 Z" id="path-6"></path>
+        <filter x="-15.4%" y="-18.4%" width="130.8%" height="173.6%" filterUnits="objectBoundingBox" id="filter-7">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <linearGradient x1="44.0988019%" y1="57.9337126%" x2="128.792906%" y2="29.7935553%" id="linearGradient-16">
+        <linearGradient x1="44.0988019%" y1="57.9337126%" x2="128.792906%" y2="29.7935553%" id="linearGradient-8">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-ICON-2-【9-2】-无阴影" transform="translate(-1481.000000, -1597.000000)">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Ng-组件总览-2" transform="translate(-1481.000000, -1597.000000)">
             <g id="Avatar-头像" transform="translate(1481.000000, 1597.000000)">
-                <g id="编组">
-                    <g transform="translate(9.000000, 1.000000)" id="多边形">
-                        <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                        <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                        <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                        <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                        <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                    </g>
-                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                </g>
+                <g id="编组"></g>
                 <g id="男头像" transform="translate(28.000000, 28.000000)">
-                    <path d="M0,34 C0,52.7776815 15.2223185,68 34,68 C52.7776815,68 68,52.7776815 68,34 C68,15.2223185 52.7776815,0 34,0 C15.2223185,0 0,15.2223185 0,34 Z" id="路径" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                    <path d="M0,34 C0,52.7776815 15.2223185,68 34,68 C52.7776815,68 68,52.7776815 68,34 C68,15.2223185 52.7776815,0 34,0 C15.2223185,0 0,15.2223185 0,34 Z" id="路径" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
                     <g id="编组" transform="translate(8.000000, 5.000000)">
-                        <path d="M52,49.2874958 C51.2862277,42.3454321 45.420692,36.9306005 38.2884005,36.9306005 L31.8285977,36.9306005 C31.4352945,36.9306005 31.0580999,36.7743882 30.7799925,36.4963286 C30.5018851,36.2182689 30.345646,35.8411391 30.345646,35.4479034 L30.345646,34.7472883 C30.345646,34.1140191 30.757396,33.5719929 31.3505766,33.3493168 C37.656109,30.9791739 41.9735083,20.6361396 41.0967742,13.3269317 C40.2689286,6.4283169 34.6586996,0.869017425 27.7534681,0.0967115012 C27.1997105,0.0348982616 26.6430215,0.00298930894 26.0858265,0.0011236521 L26.0336787,0 C17.6183353,-0.0184283912 10.790239,6.79654714 10.790239,15.2061009 C10.790239,21.7495202 14.9262075,31.2333505 20.7254722,33.3775586 C21.2936654,33.5872 21.654354,34.152037 21.654354,34.7581505 L21.654354,35.4479034 C21.654354,36.2669171 20.9905566,36.9306005 20.1714023,36.9306005 L13.7115995,36.9306005 C6.57930803,36.9306005 0.713772338,42.345432 0,49.2874958 C5.67650009,57.5667027 15.2021561,63 26,63 C36.7978439,63 46.3234999,57.5667027 52,49.2874958 Z" id="路径" fill="url(#linearGradient-10)" opacity="0.303770519"></path>
-                        <path d="M52,49.2874958 C51.2862277,42.3454321 45.4196056,36.9306005 38.2884005,36.9306005 L36.864115,36.9306005 L30.345646,43.4479504 L21.654354,43.4479504 L18.3951195,41.2755004 L14.6698145,36.9306005 L13.7115995,36.9306005 C6.58039444,36.9306005 0.713772338,42.345432 0,49.2874958 C5.67650009,57.5667027 15.2021561,63 26,63 C36.7978439,63 46.3234999,57.5667027 52,49.2874958 Z" id="路径" fill="url(#linearGradient-11)" opacity="0.303770519"></path>
+                        <path d="M52,49.2874958 C51.2862277,42.3454321 45.420692,36.9306005 38.2884005,36.9306005 L31.8285977,36.9306005 C31.4352945,36.9306005 31.0580999,36.7743882 30.7799925,36.4963286 C30.5018851,36.2182689 30.345646,35.8411391 30.345646,35.4479034 L30.345646,34.7472883 C30.345646,34.1140191 30.757396,33.5719929 31.3505766,33.3493168 C37.656109,30.9791739 41.9735083,20.6361396 41.0967742,13.3269317 C40.2689286,6.4283169 34.6586996,0.869017425 27.7534681,0.0967115012 C27.1997105,0.0348982616 26.6430215,0.00298930894 26.0858265,0.0011236521 L26.0336787,0 C17.6183353,-0.0184283912 10.790239,6.79654714 10.790239,15.2061009 C10.790239,21.7495202 14.9262075,31.2333505 20.7254722,33.3775586 C21.2936654,33.5872 21.654354,34.152037 21.654354,34.7581505 L21.654354,35.4479034 C21.654354,36.2669171 20.9905566,36.9306005 20.1714023,36.9306005 L13.7115995,36.9306005 C6.57930803,36.9306005 0.713772338,42.345432 0,49.2874958 C5.67650009,57.5667027 15.2021561,63 26,63 C36.7978439,63 46.3234999,57.5667027 52,49.2874958 Z" id="路径" fill="url(#linearGradient-2)" opacity="0.303770519"></path>
+                        <path d="M52,49.2874958 C51.2862277,42.3454321 45.4196056,36.9306005 38.2884005,36.9306005 L36.864115,36.9306005 L30.345646,43.4479504 L21.654354,43.4479504 L18.3951195,41.2755004 L14.6698145,36.9306005 L13.7115995,36.9306005 C6.58039444,36.9306005 0.713772338,42.345432 0,49.2874958 C5.67650009,57.5667027 15.2021561,63 26,63 C36.7978439,63 46.3234999,57.5667027 52,49.2874958 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.303770519"></path>
                         <g id="路径">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-4"></use>
                         </g>
                         <path d="M21.611984,62.6893397 C23.0460472,62.8892051 24.5105299,63 26,63 C27.5014207,63 28.9756811,62.8881188 30.4206084,62.6849948 L28.172823,47.7928503 L23.827177,47.7928503 L21.611984,62.6893397 Z" id="路径" fill="#5073E5"></path>
                         <g id="形状">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-14"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-6"></use>
                         </g>
-                        <path d="M41.1500083,14.0460127 C41.1326257,13.805957 41.1250209,13.5604701 41.0967742,13.3258455 C40.2689286,6.4283169 34.6586996,0.869017425 27.7534681,0.0967115012 C27.1997105,0.0348982616 26.6430215,0.00298930894 26.0858265,0.0011236521 L26.0336787,9.47448143e-07 C18.5157112,-0.0162559624 12.2797091,5.42573119 11.0325088,12.5817814 L10.8831955,13.7122682 C11.0907,13.9762209 11.7832191,13.2085332 11.8614407,13.1162041 C14.0342637,10.5309886 17.6639646,9.93247867 20.751546,11.3011221 C22.637539,12.1336524 24.7807819,12.1649302 26.6902739,11.38779 C28.5997659,10.6106498 30.1118649,9.09169197 30.8801604,7.17889836 C34.9161792,8.28793406 38.7164466,10.7699581 41.1500083,14.0460127 Z" id="路径" fill="url(#linearGradient-16)"></path>
+                        <path d="M41.1500083,14.0460127 C41.1326257,13.805957 41.1250209,13.5604701 41.0967742,13.3258455 C40.2689286,6.4283169 34.6586996,0.869017425 27.7534681,0.0967115012 C27.1997105,0.0348982616 26.6430215,0.00298930894 26.0858265,0.0011236521 L26.0336787,9.47448143e-07 C18.5157112,-0.0162559624 12.2797091,5.42573119 11.0325088,12.5817814 L10.8831955,13.7122682 C11.0907,13.9762209 11.7832191,13.2085332 11.8614407,13.1162041 C14.0342637,10.5309886 17.6639646,9.93247867 20.751546,11.3011221 C22.637539,12.1336524 24.7807819,12.1649302 26.6902739,11.38779 C28.5997659,10.6106498 30.1118649,9.09169197 30.8801604,7.17889836 C34.9161792,8.28793406 38.7164466,10.7699581 41.1500083,14.0460127 Z" id="路径" fill="url(#linearGradient-8)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/user-link.svg b/examples/sites/demos/pc/overviewimage/user-link.svg
index a1db4a560a..2c2530b1a7 100644
--- a/examples/sites/demos/pc/overviewimage/user-link.svg
+++ b/examples/sites/demos/pc/overviewimage/user-link.svg
@@ -2,78 +2,40 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>UserLink 用户信息链接</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
+        <linearGradient x1="44.0988019%" y1="54.7471248%" x2="128.792906%" y2="37.9095046%" id="linearGradient-1">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="54.7471248%" x2="128.792906%" y2="37.9095046%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="54.7471248%" x2="128.792906%" y2="37.9095046%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="52.5812554%" x2="128.792906%" y2="43.4257771%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="52.5812554%" x2="128.792906%" y2="43.4257771%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-696.000000, -1159.000000)">
             <g id="编组-25备份-13" transform="translate(598.000000, 1126.000000)">
                 <g id="UserLink-用户信息链接" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="编组-6" transform="translate(24.000000, 31.000000)">
-                        <path d="M4,31 L74,31 C76.209139,31 78,32.790861 78,35 L78,55 C78,57.209139 76.209139,59 74,59 L4,59 C1.790861,59 2.705415e-16,57.209139 0,55 L0,35 C-2.705415e-16,32.790861 1.790861,31 4,31 Z" id="矩形备份-8" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M4,0 L74,0 C76.209139,-4.05812251e-16 78,1.790861 78,4 L78,24 C78,26.209139 76.209139,28 74,28 L4,28 C1.790861,28 2.705415e-16,26.209139 0,24 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形备份-7" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
+                        <path d="M4,31 L74,31 C76.209139,31 78,32.790861 78,35 L78,55 C78,57.209139 76.209139,59 74,59 L4,59 C1.790861,59 2.705415e-16,57.209139 0,55 L0,35 C-2.705415e-16,32.790861 1.790861,31 4,31 Z" id="矩形备份-8" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)"></path>
+                        <path d="M4,0 L74,0 C76.209139,-4.05812251e-16 78,1.790861 78,4 L78,24 C78,26.209139 76.209139,28 74,28 L4,28 C1.790861,28 2.705415e-16,26.209139 0,24 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="矩形备份-7" fill="url(#linearGradient-2)" opacity="0.204287574"></path>
                         <g id="编组" transform="translate(10.000000, 5.000000)" stroke-width="0.818181818">
-                            <rect id="矩形" stroke="url(#linearGradient-11)" fill="url(#linearGradient-10)" x="0" y="0" width="18" height="18" rx="9"></rect>
+                            <rect id="矩形" stroke="url(#linearGradient-4)" fill="url(#linearGradient-3)" x="0" y="0" width="18" height="18" rx="9"></rect>
                             <path d="M9.40125683,4.09090909 C8.29354283,4.09090909 7.32599933,4.83991362 7.03984198,5.89518911 L6.99012261,6.11957926 L6.96681699,6.3029225 L6.95777496,6.42519954 C6.95594133,6.45838036 6.95518265,6.48698527 6.95518265,6.52002115 L6.95518265,7.42133844 C6.95518265,7.48556587 6.95850228,7.5499976 6.96486386,7.61860669 L6.98324243,7.77298816 L7.0225215,7.96286625 L7.0515997,8.07942721 L7.06778913,8.13522386 L7.12307618,8.29142166 C7.22339597,8.54752747 7.36412168,8.78200663 7.53823856,8.98724757 L7.56093386,9.01207154 L6.30640407,9.28355592 C5.49430249,9.45359548 4.90824231,10.1689944 4.90909183,11.0012664 L4.90909183,12.6053153 C4.90909183,13.3275091 5.4977488,13.9090909 6.21620786,13.9090909 L12.60205,13.9090909 C13.3203969,13.9090909 13.9090918,13.3274722 13.9090918,12.6053153 L13.9090918,10.9985406 L13.9027269,10.8675568 C13.8363386,10.0885171 13.2677686,9.43971841 12.4996947,9.28287235 L11.2501433,9.0128763 C11.6289705,8.57930924 11.849871,8.02036131 11.849871,7.42406948 L11.849871,6.52262302 C11.849871,5.18068554 10.7459607,4.09090909 9.40125683,4.09090909 Z" id="Fill-1" stroke="#FFFFFF" fill="#FFFFFF" fill-rule="nonzero"></path>
                         </g>
-                        <path d="M38.5,9 L63.5,9 C65.9852814,9 68,11.0147186 68,13.5 C68,15.9852814 65.9852814,18 63.5,18 L38.5,18 C36.0147186,18 34,15.9852814 34,13.5 C34,11.0147186 36.0147186,9 38.5,9 Z" id="矩形备份-9" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
+                        <path d="M38.5,9 L63.5,9 C65.9852814,9 68,11.0147186 68,13.5 C68,15.9852814 65.9852814,18 63.5,18 L38.5,18 C36.0147186,18 34,15.9852814 34,13.5 C34,11.0147186 36.0147186,9 38.5,9 Z" id="矩形备份-9" fill="url(#linearGradient-5)" opacity="0.604724702"></path>
                         <path d="M12,38 L66,38 C67.1045695,38 68,38.8954305 68,40 C68,41.1045695 67.1045695,42 66,42 L12,42 C10.8954305,42 10,41.1045695 10,40 C10,38.8954305 10.8954305,38 12,38 Z" id="形状结合备份" fill="#FFFFFF" fill-rule="nonzero"></path>
                         <path d="M12,48 L47,48 C48.1045695,48 49,48.8954305 49,50 C49,51.1045695 48.1045695,52 47,52 L12,52 C10.8954305,52 10,51.1045695 10,50 C10,48.8954305 10.8954305,48 12,48 Z" id="形状结合备份-35" fill="#FFFFFF" fill-rule="nonzero"></path>
                     </g>
diff --git a/examples/sites/demos/pc/overviewimage/user.svg b/examples/sites/demos/pc/overviewimage/user.svg
index 394445f2c7..8eb1c6ad69 100644
--- a/examples/sites/demos/pc/overviewimage/user.svg
+++ b/examples/sites/demos/pc/overviewimage/user.svg
@@ -2,79 +2,37 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>User 用户</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="52.3024161%" x2="128.792906%" y2="44.1359555%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.9717602%" y1="86.8386573%" x2="117.137151%" y2="-43.8247114%" id="linearGradient-10">
+        <linearGradient x1="44.9717602%" y1="86.8386573%" x2="117.137151%" y2="-43.8247114%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.1851268%" x2="128.792906%" y2="24.0594078%" id="linearGradient-11">
+        <linearGradient x1="44.0988019%" y1="60.1851268%" x2="128.792906%" y2="24.0594078%" id="linearGradient-3">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="60.1851268%" x2="128.792906%" y2="24.0594078%" id="linearGradient-12">
+        <linearGradient x1="44.0988019%" y1="60.1851268%" x2="128.792906%" y2="24.0594078%" id="linearGradient-4">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="85.1282945%" x2="128.792906%" y2="-39.4685729%" id="linearGradient-13">
+        <linearGradient x1="44.0988019%" y1="85.1282945%" x2="128.792906%" y2="-39.4685729%" id="linearGradient-5">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览2" transform="translate(-1479.000000, -1159.000000)">
             <g id="编组-25备份-17" transform="translate(1380.000000, 1126.000000)">
                 <g id="User-用户" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <rect id="矩形" fill="url(#linearGradient-9)" opacity="0.303770519" x="25" y="44" width="72" height="18" rx="4"></rect>
-                    <path d="M44.7812441,57 L44.781,56.985 L32.8267868,56.9449552 C32.4043581,56.8978748 32.0573167,56.5302859 32.0064253,56.0904049 L32,55.9790722 C32,54.563719 32.2257647,53.2057449 32.6193274,52.0326593 C33.8091681,48.4464602 36.5152931,45.5519991 39.9414243,44.289657 C38.4983611,43.2345175 37.3939448,41.6119616 37.0461452,39.7949541 C36.6617351,37.8026213 37.0369925,35.6381509 38.2176807,33.9773422 C38.812601,33.1549072 39.5173529,32.453606 39.9109156,32.2336525 C40.8749917,31.5706041 41.9946624,31.1370725 43.2241645,31 L43.2241645,31 L44.8647144,31 C44.8719502,31.0248094 44.8791745,31.0496049 44.8863872,31.0743866 L44.8869674,31 L44.8869674,31 C46.1042961,31.1373633 47.2128807,31.5718147 48.1674114,32.2362698 C48.5570774,32.45669 49.2548514,33.1594791 49.8438814,33.9836589 C51.0128794,35.6479912 51.3844214,37.8170537 51.0038174,39.8136135 C50.6594614,41.634476 49.56598,43.2604743 48.1372047,44.3178523 C51.5294134,45.5828726 54.2087447,48.4834746 55.3868047,52.0772822 C55.7764707,53.2528566 56,54.6137118 56,56.0320678 C56,56.5208257 55.6344993,56.9488881 55.1813993,57 L44.7812441,57 Z" id="形状结合" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
+                    <g id="编组"></g>
+                    <rect id="矩形" fill="url(#linearGradient-1)" opacity="0.303770519" x="25" y="44" width="72" height="18" rx="4"></rect>
+                    <path d="M44.7812441,57 L44.781,56.985 L32.8267868,56.9449552 C32.4043581,56.8978748 32.0573167,56.5302859 32.0064253,56.0904049 L32,55.9790722 C32,54.563719 32.2257647,53.2057449 32.6193274,52.0326593 C33.8091681,48.4464602 36.5152931,45.5519991 39.9414243,44.289657 C38.4983611,43.2345175 37.3939448,41.6119616 37.0461452,39.7949541 C36.6617351,37.8026213 37.0369925,35.6381509 38.2176807,33.9773422 C38.812601,33.1549072 39.5173529,32.453606 39.9109156,32.2336525 C40.8749917,31.5706041 41.9946624,31.1370725 43.2241645,31 L43.2241645,31 L44.8647144,31 C44.8719502,31.0248094 44.8791745,31.0496049 44.8863872,31.0743866 L44.8869674,31 L44.8869674,31 C46.1042961,31.1373633 47.2128807,31.5718147 48.1674114,32.2362698 C48.5570774,32.45669 49.2548514,33.1594791 49.8438814,33.9836589 C51.0128794,35.6479912 51.3844214,37.8170537 51.0038174,39.8136135 C50.6594614,41.634476 49.56598,43.2604743 48.1372047,44.3178523 C51.5294134,45.5828726 54.2087447,48.4834746 55.3868047,52.0772822 C55.7764707,53.2528566 56,54.6137118 56,56.0320678 C56,56.5208257 55.6344993,56.9488881 55.1813993,57 L44.7812441,57 Z" id="形状结合" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
                     <g id="编组-7" transform="translate(62.000000, 53.000000)">
-                        <path d="M27.2073897,27.060632 L32.5457061,27.060632 C34.1803346,27.060632 35.5054628,28.3857602 35.5054628,30.0203886 C35.5054628,31.6550171 34.1803346,32.9801453 32.5457061,32.9801453 L27.2073897,32.9801453 C25.5727613,32.9801453 24.2476331,31.6550171 24.2476331,30.0203886 C24.2476331,28.3857602 25.5727613,27.060632 27.2073897,27.060632 Z" id="形状结合备份-20" stroke="url(#linearGradient-12)" stroke-width="0.855668855" fill="url(#linearGradient-11)" transform="translate(29.876548, 30.020389) rotate(-135.000000) translate(-29.876548, -30.020389) "></path>
-                        <ellipse id="椭圆形" stroke="url(#linearGradient-13)" stroke-width="6.84535084" cx="15.1547707" cy="14.7987831" rx="15.1547707" ry="14.7987831"></ellipse>
+                        <path d="M27.2073897,27.060632 L32.5457061,27.060632 C34.1803346,27.060632 35.5054628,28.3857602 35.5054628,30.0203886 C35.5054628,31.6550171 34.1803346,32.9801453 32.5457061,32.9801453 L27.2073897,32.9801453 C25.5727613,32.9801453 24.2476331,31.6550171 24.2476331,30.0203886 C24.2476331,28.3857602 25.5727613,27.060632 27.2073897,27.060632 Z" id="形状结合备份-20" stroke="url(#linearGradient-4)" stroke-width="0.855668855" fill="url(#linearGradient-3)" transform="translate(29.876548, 30.020389) rotate(-135.000000) translate(-29.876548, -30.020389) "></path>
+                        <ellipse id="椭圆形" stroke="url(#linearGradient-5)" stroke-width="6.84535084" cx="15.1547707" cy="14.7987831" rx="15.1547707" ry="14.7987831"></ellipse>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/watermark.svg b/examples/sites/demos/pc/overviewimage/watermark.svg
index d1661a83d7..171224df16 100644
--- a/examples/sites/demos/pc/overviewimage/watermark.svg
+++ b/examples/sites/demos/pc/overviewimage/watermark.svg
@@ -2,66 +2,24 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>Watermark 水印</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="82.0905637%" x2="128.792906%" y2="-31.7317486%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="82.0905637%" x2="128.792906%" y2="-31.7317486%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.6549095%" x2="128.792906%" y2="48.3320051%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.6549095%" x2="128.792906%" y2="48.3320051%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="-TinyUI-Vue-组件总览3" transform="translate(-1479.000000, -2534.000000)">
             <g id="编组-17备份-17" transform="translate(1380.000000, 2501.000000)">
                 <g id="Watermark-水印" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
+                    <g id="编组"></g>
                     <g id="印章" transform="translate(38.363636, 33.000000)">
-                        <path d="M24.6363636,0 C32.859696,0 37.9728315,5.47683275 37.9728315,12.2746747 C37.9728315,20.2792764 31.0260198,23.3997144 31.5267545,29.9262139 C31.7171747,32.3397334 33.7130607,34.1962869 36.1038923,34.1962869 L36.1038923,34.1962869 L45.0889055,34.1962869 C47.0495285,34.1962869 48.6363636,35.8100603 48.6363636,37.7880038 L48.6363636,37.7880038 L48.6363636,43.850365 C48.6363636,44.2842245 48.3996999,44.6615079 48.0497927,44.857255 C47.2273896,43.6671908 45.7030313,43.1996693 44.3719766,43.8109949 L44.3719766,43.8109949 L44.0777178,43.9530861 C42.1209133,44.8942097 39.8345978,44.6666823 38.0809243,43.3563029 C34.4767734,40.6622135 29.760588,40.2468346 25.7795494,42.2728571 L25.7795494,42.2728571 L23.87194,43.2461822 C22.1435917,44.127148 20.1074555,44.0454455 18.4467529,43.0223885 C14.5347102,40.6212693 9.66150592,40.7729381 5.89170655,43.4131394 L5.89170655,43.4131394 L3.622,45 L1.77183234,45 C1.18599631,45 0.704601466,44.5521422 0.643019202,43.9757326 L0.636363636,43.850365 L0.636363636,37.7880038 C0.636363636,35.8029197 2.22319878,34.1962869 4.18382176,34.1962869 L4.18382176,34.1962869 L13.1758876,34.1962869 C15.5667192,34.1962869 17.5555526,32.3397334 17.7530254,29.9262139 C18.2537601,23.3997144 11.3069484,20.2792764 11.3069484,12.2746747 C11.3069484,5.48397334 16.4130313,0 24.6363636,0 Z" id="形状结合" fill="url(#linearGradient-9)" opacity="0.604724702"></path>
-                        <path d="M34.5531998,50.0712439 C32.7604072,49.341893 30.416117,49.2304739 28.4380264,49.7806028 L26.5270347,50.3095697 C22.9697248,51.2967816 18.7874267,51.2030381 15.3756371,50.0596183 C13.4728092,49.4217342 11.1014833,49.4616004 9.26722822,50.1623115 L5.37083456,51.652332 C4.46576207,51.9981062 3.30743287,52.0410046 2.33217837,51.7648677 C1.35692387,51.4887308 0.712908422,50.9355104 0.642726409,50.3135993 C0.572544396,49.6916882 1.08685814,49.0955695 1.99193063,48.7497953 L5.89170655,47.2617124 C9.66150592,45.8216026 14.5347102,45.7388741 18.4467529,47.0485756 C20.1074555,47.6066066 22.1435917,47.6511716 23.87194,47.1706448 L25.7795494,46.6397403 C29.760588,45.534637 34.4767734,45.7612073 38.0809243,47.2307107 C39.8345978,47.9454545 42.1209133,48.0695689 44.0777178,47.5562288 L44.3719766,47.4787245 C45.893182,47.0976384 47.6668655,47.4851558 48.3587634,48.3497644 C49.0506613,49.2143731 48.405538,50.2371259 46.9086913,50.6486511 L46.6144323,50.7261554 C42.6786974,51.7585997 38.0802429,51.5089087 34.5531998,50.0712439 L34.5531998,50.0712439 Z" id="形状备份-2" fill="url(#linearGradient-10)"></path>
-                        <path d="M34.5531998,57.562153 C32.7604072,56.8328021 30.416117,56.721383 28.4380264,57.2715119 L26.5270347,57.8004788 C22.9697248,58.7876907 18.7874267,58.6939472 15.3756371,57.5505274 C13.4728092,56.9126433 11.1014833,56.9525095 9.26722822,57.6532206 L5.37083456,59.1432411 C4.46576207,59.4890153 3.30743287,59.5319137 2.33217837,59.2557768 C1.35692387,58.9796399 0.712908422,58.4264195 0.642726409,57.8045084 C0.572544396,57.1825973 1.08685814,56.5864786 1.99193063,56.2407044 L5.89170655,54.7526215 C9.66150592,53.3125117 14.5347102,53.2297832 18.4467529,54.5394847 C20.1074555,55.0975157 22.1435917,55.1420807 23.87194,54.6615539 L25.7795494,54.1306493 C29.760588,53.0255461 34.4767734,53.2521164 38.0809243,54.7216198 C39.8345978,55.4363636 42.1209133,55.560478 44.0777178,55.0471379 L44.3719766,54.9696336 C45.893182,54.5885475 47.6668655,54.9760649 48.3587634,55.8406735 C49.0506613,56.7052822 48.405538,57.728035 46.9086913,58.1395602 L46.6144323,58.2170645 C42.6786974,59.2495087 38.0802429,58.9998178 34.5531998,57.562153 L34.5531998,57.562153 Z" id="形状备份-3" fill="url(#linearGradient-10)"></path>
+                        <path d="M24.6363636,0 C32.859696,0 37.9728315,5.47683275 37.9728315,12.2746747 C37.9728315,20.2792764 31.0260198,23.3997144 31.5267545,29.9262139 C31.7171747,32.3397334 33.7130607,34.1962869 36.1038923,34.1962869 L36.1038923,34.1962869 L45.0889055,34.1962869 C47.0495285,34.1962869 48.6363636,35.8100603 48.6363636,37.7880038 L48.6363636,37.7880038 L48.6363636,43.850365 C48.6363636,44.2842245 48.3996999,44.6615079 48.0497927,44.857255 C47.2273896,43.6671908 45.7030313,43.1996693 44.3719766,43.8109949 L44.3719766,43.8109949 L44.0777178,43.9530861 C42.1209133,44.8942097 39.8345978,44.6666823 38.0809243,43.3563029 C34.4767734,40.6622135 29.760588,40.2468346 25.7795494,42.2728571 L25.7795494,42.2728571 L23.87194,43.2461822 C22.1435917,44.127148 20.1074555,44.0454455 18.4467529,43.0223885 C14.5347102,40.6212693 9.66150592,40.7729381 5.89170655,43.4131394 L5.89170655,43.4131394 L3.622,45 L1.77183234,45 C1.18599631,45 0.704601466,44.5521422 0.643019202,43.9757326 L0.636363636,43.850365 L0.636363636,37.7880038 C0.636363636,35.8029197 2.22319878,34.1962869 4.18382176,34.1962869 L4.18382176,34.1962869 L13.1758876,34.1962869 C15.5667192,34.1962869 17.5555526,32.3397334 17.7530254,29.9262139 C18.2537601,23.3997144 11.3069484,20.2792764 11.3069484,12.2746747 C11.3069484,5.48397334 16.4130313,0 24.6363636,0 Z" id="形状结合" fill="url(#linearGradient-1)" opacity="0.604724702"></path>
+                        <path d="M34.5531998,50.0712439 C32.7604072,49.341893 30.416117,49.2304739 28.4380264,49.7806028 L26.5270347,50.3095697 C22.9697248,51.2967816 18.7874267,51.2030381 15.3756371,50.0596183 C13.4728092,49.4217342 11.1014833,49.4616004 9.26722822,50.1623115 L5.37083456,51.652332 C4.46576207,51.9981062 3.30743287,52.0410046 2.33217837,51.7648677 C1.35692387,51.4887308 0.712908422,50.9355104 0.642726409,50.3135993 C0.572544396,49.6916882 1.08685814,49.0955695 1.99193063,48.7497953 L5.89170655,47.2617124 C9.66150592,45.8216026 14.5347102,45.7388741 18.4467529,47.0485756 C20.1074555,47.6066066 22.1435917,47.6511716 23.87194,47.1706448 L25.7795494,46.6397403 C29.760588,45.534637 34.4767734,45.7612073 38.0809243,47.2307107 C39.8345978,47.9454545 42.1209133,48.0695689 44.0777178,47.5562288 L44.3719766,47.4787245 C45.893182,47.0976384 47.6668655,47.4851558 48.3587634,48.3497644 C49.0506613,49.2143731 48.405538,50.2371259 46.9086913,50.6486511 L46.6144323,50.7261554 C42.6786974,51.7585997 38.0802429,51.5089087 34.5531998,50.0712439 L34.5531998,50.0712439 Z" id="形状备份-2" fill="url(#linearGradient-2)"></path>
+                        <path d="M34.5531998,57.562153 C32.7604072,56.8328021 30.416117,56.721383 28.4380264,57.2715119 L26.5270347,57.8004788 C22.9697248,58.7876907 18.7874267,58.6939472 15.3756371,57.5505274 C13.4728092,56.9126433 11.1014833,56.9525095 9.26722822,57.6532206 L5.37083456,59.1432411 C4.46576207,59.4890153 3.30743287,59.5319137 2.33217837,59.2557768 C1.35692387,58.9796399 0.712908422,58.4264195 0.642726409,57.8045084 C0.572544396,57.1825973 1.08685814,56.5864786 1.99193063,56.2407044 L5.89170655,54.7526215 C9.66150592,53.3125117 14.5347102,53.2297832 18.4467529,54.5394847 C20.1074555,55.0975157 22.1435917,55.1420807 23.87194,54.6615539 L25.7795494,54.1306493 C29.760588,53.0255461 34.4767734,53.2521164 38.0809243,54.7216198 C39.8345978,55.4363636 42.1209133,55.560478 44.0777178,55.0471379 L44.3719766,54.9696336 C45.893182,54.5885475 47.6668655,54.9760649 48.3587634,55.8406735 C49.0506613,56.7052822 48.405538,57.728035 46.9086913,58.1395602 L46.6144323,58.2170645 C42.6786974,59.2495087 38.0802429,58.9998178 34.5531998,57.562153 L34.5531998,57.562153 Z" id="形状备份-3" fill="url(#linearGradient-2)"></path>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/overviewimage/wizard.svg b/examples/sites/demos/pc/overviewimage/wizard.svg
index 139f99b21c..f1241a5930 100644
--- a/examples/sites/demos/pc/overviewimage/wizard.svg
+++ b/examples/sites/demos/pc/overviewimage/wizard.svg
@@ -2,81 +2,41 @@
 <svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>流程图 wizard</title>
     <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="57.7617596%" x2="128.792906%" y2="30.231504%" id="linearGradient-9">
+        <linearGradient x1="44.0988019%" y1="57.7617596%" x2="128.792906%" y2="30.231504%" id="linearGradient-1">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.9918624%" x2="128.792906%" y2="47.4738166%" id="linearGradient-10">
+        <linearGradient x1="44.0988019%" y1="50.9918624%" x2="128.792906%" y2="47.4738166%" id="linearGradient-2">
             <stop stop-color="#5073E5" offset="0%"></stop>
             <stop stop-color="#5E7CE0" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-696.000000, -1159.000000)">
-            <g id="编组-25备份-13" transform="translate(598.000000, 1126.000000)">
-                <g id="流程图-wizard" transform="translate(98.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-696.000000, -1210.000000)">
+            <g id="组件" transform="translate(596.000000, 311.000000)">
+                <g id="编组-25备份-13" transform="translate(2.000000, 866.000000)">
+                    <g id="流程图-wizard" transform="translate(98.000000, 33.000000)">
+                        <g id="编组"></g>
+                        <g id="编组-6" transform="translate(20.000000, 37.000000)">
+                            <path d="M16,25 L69,25 C71.209139,25 73,26.790861 73,29 L73,49 C73,51.209139 71.209139,53 69,53 L16,53 C13.790861,53 12,51.209139 12,49 L12,29 C12,26.790861 13.790861,25 16,25 Z" id="矩形备份-8" fill="url(#linearGradient-1)" opacity="0.204287574"></path>
+                            <path d="M8,16 L60,16 L60,16 L60,40 C60,42.209139 58.209139,44 56,44 L8,44 C5.790861,44 4,42.209139 4,40 L4,20 C4,17.790861 5.790861,16 8,16 Z" id="矩形备份-7" fill="#AABDF0"></path>
+                            <path d="M16,27 L49,27 C50.1045695,27 51,27.8954305 51,29 C51,30.1045695 50.1045695,31 49,31 L16,31 C14.8954305,31 14,30.1045695 14,29 C14,27.8954305 14.8954305,27 16,27 Z" id="形状结合备份" fill="#5073E5"></path>
+                            <path d="M12,12 L39,12 C40.1045695,12 41,12.8954305 41,14 C41,15.1045695 40.1045695,16 39,16 L12,16 C10.8954305,16 10,15.1045695 10,14 C10,12.8954305 10.8954305,12 12,12 Z" id="形状结合备份-4" fill="#5073E5"></path>
+                            <path d="M47,12 L66,12 C67.1045695,12 68,12.8954305 68,14 C68,15.1045695 67.1045695,16 66,16 L47,16 C45.8954305,16 45,15.1045695 45,14 C45,12.8954305 45.8954305,12 47,12 Z" id="形状结合备份-5" fill="#5073E5"></path>
+                            <path d="M16,34 L36,34 C37.1045695,34 38,34.8954305 38,36 C38,37.1045695 37.1045695,38 36,38 L16,38 C14.8954305,38 14,37.1045695 14,36 C14,34.8954305 14.8954305,34 16,34 Z" id="形状结合备份-35" fill="url(#linearGradient-2)" opacity="0.604724702"></path>
+                            <circle id="椭圆形" stroke="#5073E5" stroke-width="5" fill="#5073E5" cx="9.5" cy="13.5" r="9.5"></circle>
+                            <text id="1" font-family="PingFangSC-Semibold, PingFang SC" font-size="20" font-weight="500" letter-spacing="0.952380952" fill="#FFFFFF">
+                                <tspan x="4.42380952" y="21">1</tspan>
+                            </text>
+                            <circle id="椭圆形备份" stroke="#5073E5" stroke-width="5.45454545" fill="#5073E5" cx="41" cy="14" r="6"></circle>
+                            <text id="2" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" letter-spacing="0.666666667" fill="#FFFFFF">
+                                <tspan x="36.4666667" y="19">2</tspan>
+                            </text>
+                            <circle id="椭圆形备份-2" stroke="#5073E5" stroke-width="5.45454545" fill="#5073E5" cx="72" cy="14" r="6"></circle>
+                            <text id="3" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" letter-spacing="0.666666667" fill="#FFFFFF">
+                                <tspan x="67.4666667" y="19">3</tspan>
+                            </text>
                         </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-6" transform="translate(20.000000, 37.000000)">
-                        <path d="M16,25 L69,25 C71.209139,25 73,26.790861 73,29 L73,49 C73,51.209139 71.209139,53 69,53 L16,53 C13.790861,53 12,51.209139 12,49 L12,29 C12,26.790861 13.790861,25 16,25 Z" id="矩形备份-8" fill="url(#linearGradient-9)" opacity="0.204287574"></path>
-                        <path d="M8,16 L60,16 L60,16 L60,40 C60,42.209139 58.209139,44 56,44 L8,44 C5.790861,44 4,42.209139 4,40 L4,20 C4,17.790861 5.790861,16 8,16 Z" id="矩形备份-7" fill="#AABDF0"></path>
-                        <path d="M16,27 L49,27 C50.1045695,27 51,27.8954305 51,29 C51,30.1045695 50.1045695,31 49,31 L16,31 C14.8954305,31 14,30.1045695 14,29 C14,27.8954305 14.8954305,27 16,27 Z" id="形状结合备份" fill="#5073E5"></path>
-                        <path d="M12,12 L39,12 C40.1045695,12 41,12.8954305 41,14 C41,15.1045695 40.1045695,16 39,16 L12,16 C10.8954305,16 10,15.1045695 10,14 C10,12.8954305 10.8954305,12 12,12 Z" id="形状结合备份-4" fill="#5073E5"></path>
-                        <path d="M47,12 L66,12 C67.1045695,12 68,12.8954305 68,14 C68,15.1045695 67.1045695,16 66,16 L47,16 C45.8954305,16 45,15.1045695 45,14 C45,12.8954305 45.8954305,12 47,12 Z" id="形状结合备份-5" fill="#5073E5"></path>
-                        <path d="M16,34 L36,34 C37.1045695,34 38,34.8954305 38,36 C38,37.1045695 37.1045695,38 36,38 L16,38 C14.8954305,38 14,37.1045695 14,36 C14,34.8954305 14.8954305,34 16,34 Z" id="形状结合备份-35" fill="url(#linearGradient-10)" opacity="0.604724702"></path>
-                        <circle id="椭圆形" stroke="#5073E5" stroke-width="5" fill="#5073E5" cx="9.5" cy="13.5" r="9.5"></circle>
-                        <text id="1" font-family="PingFangSC-Semibold, PingFang SC" font-size="20" font-weight="500" letter-spacing="0.952380952" fill="#FFFFFF">
-                            <tspan x="4.42380952" y="21">1</tspan>
-                        </text>
-                        <circle id="椭圆形备份" stroke="#5073E5" stroke-width="5.45454545" fill="#5073E5" cx="41" cy="14" r="6"></circle>
-                        <text id="2" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" letter-spacing="0.666666667" fill="#FFFFFF">
-                            <tspan x="36.4666667" y="19">2</tspan>
-                        </text>
-                        <circle id="椭圆形备份-2" stroke="#5073E5" stroke-width="5.45454545" fill="#5073E5" cx="72" cy="14" r="6"></circle>
-                        <text id="3" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" letter-spacing="0.666666667" fill="#FFFFFF">
-                            <tspan x="67.4666667" y="19">3</tspan>
-                        </text>
                     </g>
                 </g>
             </g>
diff --git a/examples/sites/demos/pc/webdoc/changelog.md b/examples/sites/demos/pc/webdoc/changelog.md
index f2c9b632f3..39735f1259 100644
--- a/examples/sites/demos/pc/webdoc/changelog.md
+++ b/examples/sites/demos/pc/webdoc/changelog.md
@@ -1,5 +1,44 @@
 # 更新日志
 
+## v2.17.0/v3.17.0
+
+`2024/07/17`
+
+## What's Changed
+
+### Exciting New Features 🎉
+
+- feat(auto-tip): add auto-tip directive by @zzcr
+- feat(fluent-editor): add fluent-editor component by @kagol
+- feat(base-select): [base-select,select] add base-select by @kagol in https://github.com/opentiny/tiny-vue/pull/1632
+- feat(runtime): add all、pc、mobile、mobile-first、simple runtime by @zzcr in https://github.com/opentiny/tiny-vue/pull/1662
+- feat(base-select): [select,base-select] add panel slot by @kagol in https://github.com/opentiny/tiny-vue/pull/1663
+- feat(components): [drawer] enable open event by @betavs in https://github.com/opentiny/tiny-vue/pull/1527
+- feat: update mobile first template by @zzcr in https://github.com/opentiny/tiny-vue/pull/1697
+- feat(breadcrumb): [breadcrumb] adapts to xdesign theme by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1693
+
+### Bug Fixes 🐛
+
+- fix(button-group): [button-group] Fixed I18n by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1689
+- fix(timeline): [timeline] add vertical description to node description slot by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1685
+- fix(dialog-box): update style problem by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1674
+- fix(nav-menu): [nav-menu] resolve the issue of current component not being highlighted by @wuyiping0628 in https://github.com/opentiny/tiny-vue/pull/1695
+- fix(chart): [chart] Fixed baidu chart example and chart-core bug by @Davont in https://github.com/opentiny/tiny-vue/pull/1691
+- fix(theme): update scrollbar width to 8px by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1668
+- fix(pager): all theme use same svg to show dot by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1673
+
+### Other Changes
+
+- docs: optimize component category by @kagol in https://github.com/opentiny/tiny-vue/pull/1626
+- docs: add carousel component of demo by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1609
+- ci(runtime): add runtime git action by @zzcr in https://github.com/opentiny/tiny-vue/pull/1667
+- docs(date-picker): [date-picker] Optimization Cases by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1690
+- build(runtime): update runtime playgroud by @zzcr in https://github.com/opentiny/tiny-vue/pull/1669
+
+## New Contributors
+
+- @zhangpaopao0609 made their first contribution in https://github.com/opentiny/tiny-vue/pull/1654
+
 ## v2.16.0/v3.16.0
 
 `2024/05/11`
diff --git a/examples/sites/demos/pc/webdoc/installation.md b/examples/sites/demos/pc/webdoc/installation.md
index e8b53da80f..f0c5148580 100644
--- a/examples/sites/demos/pc/webdoc/installation.md
+++ b/examples/sites/demos/pc/webdoc/installation.md
@@ -57,9 +57,9 @@ export default defineConfig({
   <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { ...process.env,TINY_MODE:'pc' }</code>。</p>
 </div>
 
-### 通过 CDN 方式引入
+### 通过 CDN 方式引入 (v3.16.0及之前的版本可用)
 
-为了更快地体验 TinyVue 的组件，你也可以通过 CDN 方式直接在 HTML 页面中引入 TinyVue, 建议版本号写 2 个有效版本数字即可，具体配置如下:
+为了更快地体验 `TinyVue` 的组件，你也可以通过 `CDN` 方式直接在 HTML 页面中引入 `TinyVue`, 建议版本号写 `2` 个有效版本数字即可，具体配置如下:
 
 ```html
 <head>
@@ -80,6 +80,37 @@ export default defineConfig({
 </head>
 ```
 
+### 通过 CDN 方式引入 (v3.17.0开始提供使用)
+
+为了应对不同的业务需要，`TinyVue` 提供多种形态的 `runtime`:
+
+| Runtime 名称              | 使用说明                   |
+| ------------------------- | -------------------------- |
+| tiny-vue-pc.mjs           | 包含所有pc模板的组件集合   |
+| tiny-vue-mobile.mjs       | 包含所有移动模板的组件集合 |
+| tiny-vue-mobile-first.mjs | 包含所有多端模板的组件集合 |
+| tiny-vue-simple.mjs       | 包含常用组件的集合         |
+
+```html
+<head>
+  <!-- 引入 vue 和 @opentiny/vue -->
+  <script type="importmap">
+    {
+      "imports": {
+        "vue": "https://registry.npmmirror.com/vue/3.4.27/files/dist/vue.runtime.esm-browser.js",
+        "echarts": "https://registry.npmmirror.com/echarts/5.4.1/files/dist/echarts.esm.js",
+        "@opentiny/vue": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.17/files/dist3/tiny-vue-pc.mjs",
+        "@opentiny/vue-icon": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.17/files/dist3/tiny-vue-icon.mjs",
+        "@opentiny/vue-locale": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.17/files/dist3/tiny-vue-locale.mjs",
+        "@opentiny/vue-common": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.17/files/dist3/tiny-vue-common.mjs"
+      }
+    }
+  </script>
+  <!-- 引入 @opentiny/vue 样式 -->
+  <link rel="stylesheet" href="https://registry.npmmirror.com/@opentiny/vue-theme/3.17/files/index.css" />
+</head>
+```
+
 接着就可以导入 TinyVue，并通过 app 实例的 use 方法在全局注册 TinyVue 插件，这样就可以在 template 模板中使用 TinyVue 的组件。
 
 ```html
diff --git a/examples/sites/env/.env.plus b/examples/sites/env/.env.plus
new file mode 100644
index 0000000000..0f629bc74b
--- /dev/null
+++ b/examples/sites/env/.env.plus
@@ -0,0 +1,8 @@
+# 1、声明一个变量
+VITE_CONTEXT=/tiny-vue-plus/
+VITE_BUILD_TARGET='inner'
+# 官网应用类型：pc / mobile / mobile-first /plus
+VITE_APP_MODE='plus'
+ 
+VITE_APP_BUILD_BASE_URL='/'
+VITE_PLAYGROUND_URL=/playground.html
\ No newline at end of file
diff --git a/examples/sites/index.html b/examples/sites/index.html
index 2dfbf0f298..f8b32c2dc0 100644
--- a/examples/sites/index.html
+++ b/examples/sites/index.html
@@ -5,9 +5,16 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TinyVue：一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端</title>
-    <meta name="description" content="TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。">
-    <meta name="keywords" content="vue,frontend,vue-components,component-library,renderless,renderless-components,mobile-components,tiny-vue,vue3,headless-components,opentiny,前端,UI组件库,Vue组件库,移动端组件,无渲染组件">
-    <link rel="shortcut icon" href="/favicon.ico">
+    <meta
+      name="description"
+      content="TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。"
+    />
+    <meta
+      name="keywords"
+      content="vue,frontend,vue-components,component-library,renderless,renderless-components,mobile-components,tiny-vue,vue3,headless-components,opentiny,前端,UI组件库,Vue组件库,移动端组件,无渲染组件"
+    />
+
+    <link rel="shortcut icon" href="/favicon.ico" />
     <!--图片引用方案：将PUBLIC_URL和DEPLOY_URL变量在header中提前定义，保证web-components可以获取到这两个变量，从而正确加载对应的主题样式文件-->
     <script type="module">
       window.PUBLIC_URL = import.meta.env.BASE_URL
@@ -21,7 +28,7 @@
     <app-root></app-root>
     <div id="app" class="wp100 hp100 pt60 of-hidden"></div>
     <!-- prettier-ignore -->
-    <script id="tinyui-design-common" src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/tinyui-design-common.min.js"></script>
+    <script id="tinyui-design-common" src="/static/js/design-common.js"></script>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 7b952f70f9..128acf8e38 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -21,33 +21,37 @@
     "pub": "pnpm publish --no-git-checks --access=public"
   },
   "dependencies": {
+    "@opentiny/fluent-editor": "workspace:^",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-icon-saas": "workspace:~",
     "@opentiny/vue-design-aurora": "workspace:~",
-    "@opentiny/vue-design-smb": "workspace:~",
     "@opentiny/vue-design-saas": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
+    "@opentiny/vue-fluent-editor": "workspace:~",
+    "@opentiny/vue-icon": "workspace:~",
+    "@opentiny/vue-icon-saas": "workspace:~",
+    "@opentiny/vue-repl": "^1.1.2",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
-    "@opentiny/vue-vite-import": "workspace:~",
     "@opentiny/vue-theme-saas": "workspace:~",
+    "@opentiny/vue-vite-import": "workspace:~",
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
     "@vueuse/head": "0.7.13",
     "github-markdown-css": "^5.1.0",
     "highlight.js": "^11.5.1",
+    "marked": "^4.3.0",
     "prismjs": "^1.28.0",
-    "vue": "^3.3.9",
+    "sortablejs": "1.15.0",
     "tailwindcss": "^3.2.4",
+    "vue": "^3.3.9",
     "vue-i18n": "^9.1.10",
-    "vue-router": "4.1.5",
-    "marked": "^4.3.0",
-    "sortablejs": "1.15.0",
-    "@opentiny/vue-repl": "^1.1.2"
+    "vue-router": "4.1.5"
   },
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",
+    "@playwright/test": "~1.42.0",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.45",
     "@unocss/preset-icons": "^0.38.2",
@@ -58,7 +62,6 @@
     "cross-spawn": "^7.0.3",
     "fs-extra": "^10.1.0",
     "less": "^4.1.3",
-    "@playwright/test": "~1.42.0",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.4",
     "markdown-it-emoji": "^2.0.2",
@@ -71,17 +74,17 @@
     "prettier": "^2.7.1",
     "stylelint": "^14.9.1",
     "stylelint-config-standard": "^26.0.0",
+    "typescript": "^5.0.2",
     "unocss": "^0.39.3",
     "unplugin-vue-components": "^0.19.9",
-    "vite-plugin-static-copy": "^0.17.0",
     "uslug": "^1.0.4",
-    "typescript": "^5.0.2",
     "vite": "^4.3.8",
+    "vite-plugin-dynamic-import": "1.5.0",
     "vite-plugin-html": "^3.0.0",
     "vite-plugin-inspect": "^0.5.0",
-    "vite-svg-loader": "^3.6.0",
     "vite-plugin-md": "0.13.1",
-    "vite-plugin-dynamic-import": "1.5.0",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/sites/playground.html b/examples/sites/playground.html
index dd171056bb..ab6b1f0cca 100644
--- a/examples/sites/playground.html
+++ b/examples/sites/playground.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>OpenTinyVue 演练场</title>
     <script>
       const cdnHost = 'https://registry.npmmirror.com'
       window.localStorage.setItem('setting-cdn', cdnHost)
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index d703a7dd48..40bd9665de 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -11,7 +11,7 @@ import {
   Switch as TinySwitch,
   Notify
 } from '@opentiny/vue'
-import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
+import { staticDemoPath, getWebdocPath } from '@/views/components/cmp-config'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
@@ -28,7 +28,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['3.17', '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')
 
@@ -49,6 +49,7 @@ const createImportMap = (version) => {
     '@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-directive': `${getRuntime(version)}tiny-vue-directive.mjs`,
     '@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}`,
diff --git a/examples/sites/public/static/css/design-common.css b/examples/sites/public/static/css/design-common.css
new file mode 100644
index 0000000000..a3fb6c60c4
--- /dev/null
+++ b/examples/sites/public/static/css/design-common.css
@@ -0,0 +1,555 @@
+.tinyui-design-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: #fff;
+  box-shadow: 0 2px 8px 0 rgba(2, 24, 42, 0.1);
+  z-index: 9999;
+  color: #151b24;
+  font-family: PingFangSC;
+  box-sizing: border-box;
+}
+.tinyui-design-header a {
+  text-decoration: none;
+  color: #151b24;
+  cursor: pointer;
+}
+.tinyui-design-header a.nav-logo {
+  display: flex;
+  align-items: center;
+}
+.tinyui-design-header ul,
+.tinyui-design-header li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tinyui-design-header .nav {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 25px 0 10px;
+  white-space: nowrap;
+  height: 60px;
+}
+.tinyui-design-header .nav .menu-collapse {
+  display: none;
+}
+.tinyui-design-header .nav .menu-collapse img {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+.tinyui-design-header .nav .nav-left {
+  display: flex;
+  align-items: center;
+}
+.tinyui-design-header .nav .nav-right {
+  display: flex;
+}
+.tinyui-design-header .nav .nav-right .github-icon {
+  display: flex;
+  align-items: center;
+  margin: 0 2.08vw 0 1.1vw;
+  cursor: pointer;
+}
+.tinyui-design-header .nav .nav-menus {
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+}
+.tinyui-design-header .nav .nav-menus .menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-right: 1.05vw;
+  height: 60px;
+  padding: 0 1.05vw;
+  cursor: pointer;
+}
+.tinyui-design-header .nav .nav-menus .menu span {
+  white-space: nowrap;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown {
+  display: none;
+  position: fixed;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 999;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+  cursor: auto;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content {
+  display: flex;
+  margin: 0 auto;
+  padding-top: 30px;
+  justify-content: center;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .title {
+  margin-bottom: 14px;
+  padding-left: 29px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  letter-spacing: 0.4px;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 815px;
+  box-sizing: border-box;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item {
+  display: flex;
+  width: 265px;
+  height: 70px;
+  line-height: 70px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item:hover {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0px 0px 20px 5px rgba(31, 52, 121, 0.08);
+  transition: all 0.1s ease-in 0.1s;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item a {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item a .right {
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
+  overflow: hidden;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item a .right .right-title {
+  margin-bottom: 6px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  font-size: 16px;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item a .right .desc {
+  font-size: 12px;
+  color: #6a6a6a;
+  letter-spacing: 0.3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .list .list-item a > img {
+  width: 40px;
+  margin-right: 16px;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .content-left {
+  position: relative;
+  margin-right: 30px;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .content .content-left::after {
+  content: '';
+  display: block;
+  position: absolute;
+  right: -15px;
+  top: 50px;
+  height: 30px;
+  border-right: 1px solid #d8d8d8;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .menu-dropdown-content {
+  margin: 0 auto;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .menu-dropdown-content > img {
+  width: 1.77vw;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .menu-dropdown-content .list .list-item {
+  position: relative;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .menu-dropdown-content .list .list-item:first-child {
+  margin-right: 2.18vw;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown .menu-dropdown-content .list .list-item:first-child::after {
+  content: '';
+  position: absolute;
+  height: 34px;
+  border-left: 1px solid #ddd;
+  right: -1.09vw;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tinyui-design-header .nav .nav-menus .menu .dropdown-production {
+  height: 166px;
+  padding: 22px 0;
+}
+.tinyui-design-header .nav .nav-menus .menu .menu-dropdown-show {
+  display: block;
+  animation: dropDown 0.2s ease-out 1 normal forwards;
+  transform-origin: top;
+}
+.tinyui-design-header .nav .nav-menus .menu:hover .menu-text {
+  background: rgba(217, 225, 238, 0.43);
+  border-radius: 16px;
+}
+.tinyui-design-header .nav .nav-menus .menu:hover .menu-text .title {
+  color: #2f5bea;
+}
+.tinyui-design-header .nav .nav-menus .menu:hover .menu-text .language-title {
+  color: #151b24;
+}
+.tinyui-design-header .nav .nav-menus .menu:hover .menu-text .menu-arrow {
+  transform: rotate(45deg);
+  border-color: #2f5bea;
+  top: 31.5px;
+}
+.tinyui-design-header .nav .nav-menus .menu:hover .menu-text .language-arrow {
+  border-color: #151b24;
+}
+.tinyui-design-header .nav .nav-menus .menu-right {
+  padding: 0;
+  margin: 0;
+}
+.header-logo {
+  width: 50px;
+  height: 32px;
+}
+.header-name {
+  line-height: 32px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #272727;
+  margin-left: 12px;
+  vertical-align: middle;
+  letter-spacing: 0.55px;
+}
+.header-detail-logo {
+  height: 18px;
+  width: 18px;
+  margin-top: 1px;
+  margin-right: 10px;
+}
+.header-sublogo {
+  height: 21px;
+  width: 36px;
+  margin-top: 3px;
+  margin-right: 14px;
+}
+.header-detail-name {
+  height: 18px;
+  line-height: 18px;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  margin-top: 1px;
+  opacity: 0.6;
+}
+.nav-menus-left {
+  margin-left: 3.65vw;
+}
+.title {
+  margin-right: 0.36vw;
+  letter-spacing: 0.35px;
+}
+.menu-text {
+  display: inline-block;
+  width: auto;
+  height: 32px;
+  box-sizing: border-box;
+  line-height: 32px;
+  padding: 0 1.67vw 0 1.04vw;
+  transition: all 0.1s ease-in 0.1s;
+  cursor: pointer;
+}
+.menu-text:hover {
+  background: rgba(217, 225, 238, 0.43);
+  border-radius: 16px;
+}
+.menu-text:hover .title {
+  color: #2f5bea;
+}
+.menu-text:hover .language-title {
+  color: #151b24;
+}
+.menu-text:hover .menu-arrow {
+  transform: rotate(45deg);
+  border-color: #2f5bea;
+  top: 31.5px;
+}
+.menu-text:hover .language-arrow {
+  border-color: #151b24;
+}
+.menu-arrow {
+  position: absolute;
+  top: 29px;
+  border: 2px solid #151b24;
+  border-width: 2px 0 0 2px;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-top: -3px;
+  transform: rotate(-135deg);
+  transition: all 0.1s ease-in 0.1s;
+  transform-origin: center center;
+  box-sizing: border-box;
+}
+.divider {
+  width: 1px;
+  height: 18px;
+  background: #7b7e84;
+  opacity: 0.3;
+  margin: 0 20px;
+  margin-top: 1px;
+}
+.menu-right-divider {
+  margin: 0 1.56vw;
+}
+.menu-help-docs {
+  padding: 0 1.04vw;
+}
+.title-help-docs {
+  margin-right: 0;
+}
+.github-img {
+  height: 23px;
+  width: 24px;
+}
+.menu-language,
+.menu-2 {
+  position: relative;
+}
+.menu-language .menu-arrow,
+.menu-2 .menu-arrow {
+  top: 15px;
+}
+.menu-language .menu-dropdown,
+.menu-2 .menu-dropdown {
+  display: none;
+  width: 108px;
+  position: absolute;
+  text-align: center;
+  border: solid 1px #e5e6eb;
+  border-radius: 4px;
+  background: #fff;
+  left: 0px;
+}
+.menu-language .menu-dropdown .menu-dropdown-item,
+.menu-2 .menu-dropdown .menu-dropdown-item {
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+}
+.menu-language .menu-dropdown .menu-dropdown-item:hover,
+.menu-2 .menu-dropdown .menu-dropdown-item:hover {
+  background: rgba(217, 225, 238, 0.43);
+}
+.menu-language .menu-dropdown-show,
+.menu-2 .menu-dropdown-show {
+  display: block;
+  animation: dropDown 0.2s ease-out 1 normal forwards;
+  transform-origin: top;
+}
+.menu-language:hover,
+.menu-2:hover {
+  background-color: #fff;
+  color: #151b24;
+}
+.menu-language:hover .menu-arrow,
+.menu-2:hover .menu-arrow {
+  top: 18px;
+}
+.collapse-menu {
+  display: none;
+  width: 50px;
+  justify-content: center;
+  align-items: center;
+}
+.collapse-menu img {
+  width: 20px;
+  height: 20px;
+}
+.collapse-nav {
+  display: none;
+  overflow-y: auto;
+  max-height: calc(100% - 80px);
+  position: fixed;
+  right: 8px;
+  top: 48px;
+  z-index: 100;
+  padding: 20px 30px;
+  border-radius: 6px;
+  background-color: #ffff;
+  box-sizing: border-box;
+  box-shadow: 0 0px 8px 4px rgba(2, 24, 42, 0.15);
+}
+.collapse-nav .line {
+  width: 100%;
+  margin: 30px 0 20px;
+  border-bottom: 1px solid #d8d8d8;
+}
+.collapse-nav .title,
+.collapse-nav .sub-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #181818;
+  line-height: 20px;
+  margin-right: 0;
+  margin-bottom: 20px;
+}
+.collapse-nav .sub-title {
+  font-weight: normal;
+  margin: 20px 0 17px;
+}
+.collapse-nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.collapse-nav ul li a {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  margin: 0;
+}
+.collapse-nav ul li a p {
+  margin: 0;
+}
+.collapse-nav ul li a .item-logo {
+  width: 32px;
+  height: 32px;
+}
+.collapse-nav ul li a .item-title {
+  font-size: 14px;
+  color: #151b24;
+  line-height: 17px;
+}
+.collapse-nav ul li a .item-sub-title {
+  font-size: 12px;
+  color: #6b6b6b;
+  line-height: 17px;
+}
+.collapse-nav ul li a:hover p {
+  color: #2f5bea;
+}
+.collapse-nav .nav-item.current {
+  height: auto;
+}
+.collapse-nav .nav-item.current ul {
+  transition: height 1s ease-in 1s;
+  height: auto;
+}
+.collapse-nav .nav-item.current .arrow {
+  color: #2f5bea;
+}
+.collapse-nav .nav-item.current .arrow:after {
+  transform: rotate(45deg);
+  border-color: #2f5bea;
+  top: -2px;
+}
+.collapse-nav .help-docs,
+.collapse-nav .github-icon {
+  display: block;
+  font-size: 14px;
+  color: #181818;
+  line-height: 20px;
+  margin-bottom: 15px;
+}
+.collapse-nav .help-docs:hover,
+.collapse-nav .github-icon:hover {
+  color: #5073e5;
+}
+.collapse-nav .user-menu {
+  display: block;
+}
+.collapse-nav .user-menu .login-user-text {
+  background: transparent;
+  font-size: 14px;
+  color: #181818;
+  line-height: 20px;
+  margin-bottom: 15px;
+  padding: 0;
+}
+.collapse-nav .user-menu .login-user-text:hover {
+  color: #5073e5;
+}
+@keyframes dropDown {
+  0% {
+    transform: scaleY(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+@media screen and (max-width: 1023px) {
+  .tinyui-design-header .nav .menu-collapse {
+    display: flex;
+  }
+  .hideMenu {
+    display: none;
+    position: fixed;
+    z-index: 999;
+    overflow-y: auto;
+    max-height: 100%;
+  }
+  .hideMenu .n-layout-toggle-button {
+    display: none !important;
+  }
+  .showMenu {
+    display: block !important;
+  }
+  .collapse-menu {
+    display: inline-flex;
+  }
+  .tinyui-design-header .nav {
+    margin: 0 10px;
+  }
+  .tinyui-design-header .nav .nav-right {
+    display: none;
+  }
+  .tinyui-design-header .nav .collapse-nav.toggleNav {
+    display: block;
+  }
+}
+@media screen and (max-width: 815px) {
+  .tinyui-design-header .nav .nav-menus {
+    display: none;
+  }
+  .tinyui-design-header .nav .menu-collapse img {
+    width: 3.33333333vw;
+  }
+  .tinyui-design-header .nav .divider {
+    margin: 0 2vw;
+  }
+  .tinyui-design-header .nav .header-name {
+    font-size: 16px;
+    margin-left: 2vw;
+  }
+  .tinyui-design-header .nav .header-sublogo {
+    width: 5vw;
+    height: auto;
+    margin-right: 2vw;
+  }
+  .tinyui-design-header .nav .header-detail-name {
+    font-size: 14px;
+  }
+  .tinyui-design-header .nav .collapse-menu {
+    width: 8.33333333vw;
+  }
+  .tinyui-design-header .nav .collapse-menu img {
+    width: 3.33333333vw;
+    height: 3.33333333vw;
+  }
+}
diff --git a/examples/sites/public/static/images/menuCollapse.svg b/examples/sites/public/static/images/menuCollapse.svg
new file mode 100644
index 0000000000..037b670806
--- /dev/null
+++ b/examples/sites/public/static/images/menuCollapse.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状</title>
+    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-56.000000, -27.000000)" fill="#575D6C" fill-rule="nonzero">
+            <g id="导航" transform="translate(0.000000, 1.000000)">
+                <path d="M59.3939394,32.8043742 C57.5135099,32.8043742 56,31.287382 56,29.4021871 C56,27.5169922 57.5288039,26 59.3939394,26 C61.2743689,26 62.7878788,27.5169922 62.7878788,29.4021871 C62.7878788,31.2726539 61.2743629,32.7896519 59.3939394,32.8043742 Z M59.3939394,45.4021871 C57.5135099,45.4021871 56,43.8851949 56,42 C56,40.1148051 57.5288039,38.5978129 59.3939394,38.5978129 C61.2743689,38.5978129 62.7878788,40.1148051 62.7878788,42 C62.7878788,43.8851949 61.2743629,45.4021871 59.3939394,45.4021871 Z M59.3939394,58 C57.5135099,58 56,56.4830078 56,54.5978129 C56,52.7273461 57.5288039,51.1956258 59.3939394,51.1956258 C61.2743689,51.1956258 62.7878788,52.712618 62.7878788,54.5978129 C62.7878788,56.4830078 61.2743629,58 59.3939394,58 Z M72,32.8043742 C70.1195705,32.8043742 68.6060606,31.287382 68.6060606,29.4021871 C68.6060606,27.5317203 70.1348645,26 72,26 C73.8804295,26 75.3939394,27.5169922 75.3939394,29.4021871 C75.3939394,31.287382 73.8804235,32.8043742 72,32.8043742 Z M72,45.4021871 C70.1195705,45.4021871 68.6060606,43.8851949 68.6060606,42 C68.6060606,40.1148051 70.1348645,38.5978129 72,38.5978129 C73.8804295,38.5978129 75.3939394,40.1148051 75.3939394,42 C75.3939394,43.8851949 73.8804235,45.4021871 72,45.4021871 Z M72,58 C70.1195705,58 68.6060606,56.4830078 68.6060606,54.5978129 C68.6060606,52.7273461 70.1348645,51.1956258 72,51.1956258 C73.8804295,51.1956258 75.3939394,52.712618 75.3939394,54.5978129 C75.3939394,56.4830078 73.8804235,58 72,58 Z M84.6060606,32.8043742 C82.7256311,32.8043742 81.2121212,31.287382 81.2121212,29.4021871 C81.2121212,27.5317203 82.7256371,26 84.6060606,26 C86.4864901,26 88,27.5169922 88,29.4021871 C88,31.287382 86.4864841,32.8043742 84.6060606,32.8043742 Z M84.6060606,45.4021871 C82.7256311,45.4021871 81.2121212,43.8851949 81.2121212,42 C81.2121212,40.1148051 82.7256371,38.5978129 84.6060606,38.5978129 C86.4864901,38.5978129 88,40.1148051 88,42 C88,43.8851949 86.4864841,45.4021871 84.6060606,45.4021871 Z M84.6060606,58 C82.7256311,58 81.2121212,56.4830078 81.2121212,54.5978129 C81.2121212,52.7273461 82.7256371,51.1956258 84.6060606,51.1956258 C86.4864901,51.1956258 88,52.712618 88,54.5978129 C88,56.4830078 86.4864841,58 84.6060606,58 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/opentiny-logo.svg b/examples/sites/public/static/images/opentiny-logo.svg
new file mode 100644
index 0000000000..b0a3620a83
--- /dev/null
+++ b/examples/sites/public/static/images/opentiny-logo.svg
@@ -0,0 +1,20 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="53px" height="32px">
+<defs>
+<linearGradient id="PSgrad_0" x1="0%" x2="100%" y1="0%" y2="0%">
+  <stop offset="0%" stop-color="rgb(172,202,250)" stop-opacity="0" />
+  <stop offset="32%" stop-color="rgb(115,141,186)" stop-opacity="0.36" />
+  <stop offset="73%" stop-color="rgb(57,79,122)" stop-opacity="0.82" />
+  <stop offset="90%" stop-color="rgb(57,79,122)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(255, 191, 54)"
+ d="M17.999,2.0 L40.999,0.0 L53.0,2.0 L29.530,5.443 L17.999,2.0 Z"/>
+<path fill-rule="evenodd"  opacity="0.341" fill="url(#PSgrad_0)"
+ d="M6.999,32.0 L28.999,30.0 L19.0,21.999 L0.0,21.999 L6.999,32.0 Z"/>
+<path fill-rule="evenodd"  fill="rgb(89, 120, 226)"
+ d="M43.0,7.999 L43.0,26.999 L51.999,25.142 L51.971,6.658 L43.0,7.999 ZM29.999,30.0 L38.999,28.0 L38.999,7.999 L29.999,8.999 L29.999,30.0 ZM18.999,5.972 L19.36,23.590 L28.945,29.838 L28.999,8.999 L18.999,5.972 Z"/>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/tinyvue.svg b/examples/sites/public/static/images/tinyvue.svg
new file mode 100644
index 0000000000..28972a4a4d
--- /dev/null
+++ b/examples/sites/public/static/images/tinyvue.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 11</title>
+    <g id="logo-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-2" transform="translate(-673.000000, -159.000000)">
+            <g id="编组-11" transform="translate(673.000000, 159.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组备份" transform="translate(7.619048, 10.476190)">
+                    <polygon id="形状结合" fill="#FFFFFF" fill-rule="nonzero" points="25.7142857 -1.62409768e-13 17.9307157 -1.62409768e-13 12.8518527 9.01939273 7.93669898 -1.62409768e-13 0 -1.62409768e-13 12.8518527 22.8571429"></polygon>
+                    <polygon id="路径-2备份-4" fill="#DFE5FA" points="16.1408234 16.1904762 12.3809524 9.16242365 17.2701446 0 24.7619048 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/js/design-common.js b/examples/sites/public/static/js/design-common.js
new file mode 100644
index 0000000000..07036fbdc2
--- /dev/null
+++ b/examples/sites/public/static/js/design-common.js
@@ -0,0 +1,46 @@
+const headerHtml = `
+<div class="tinyui-design-header" id="tinyuiDesignHeader">
+  <div class="nav">
+    <div class="nav-left">
+      <div class="menu-collapse" id="menuCollapse">
+        <img
+          src="/static/images/menuCollapse.svg"
+        />
+        <div class="divider"></div>
+      </div>
+
+      <a class="nav-logo" href="/" title="OpenTiny">
+        <img
+          src="/static/images/opentiny-logo.svg"
+          class="header-logo"
+        />
+        <span class="header-name">OpenTiny</span>
+      </a>
+
+      <div class="divider"></div>
+
+      <img
+        src="/static/images/tinyvue.svg"
+        class="header-sublogo"
+      />
+
+      <span class="header-detail-name">TinyVue</span>
+
+      <div class="nav-menus nav-menus-left"></div>
+    </div>
+  </div>
+</div>`
+
+class DesignCommon {
+  renderHeader() {
+    document.getElementById('header').innerHTML = headerHtml
+    const link = document.createElement('link')
+    link.href = '/static/css/design-common.css'
+    link.rel = 'stylesheet'
+    document.head.append(link)
+  }
+  renderFooter() {
+    // 空方法，用于给官网执行，解决报错
+  }
+}
+window.TDCommon = DesignCommon
diff --git a/examples/sites/src/assets/custom-block.less b/examples/sites/src/assets/custom-block.less
index f9860eb040..d43876ea73 100644
--- a/examples/sites/src/assets/custom-block.less
+++ b/examples/sites/src/assets/custom-block.less
@@ -3,6 +3,9 @@
 .markdown-body li {
   list-style: circle;
 }
+.markdown-body li+li {
+  margin-top: 16px;
+}
 // 切换md中,这2个类的显示隐藏. used-config  used-tiny 类
 .md-config .markdown-body {
   .used-tiny {
@@ -31,6 +34,8 @@
   }
   p {
     font-size: 14px;
+    line-height: 30px;  
+    margin-bottom: 11px;
   }
   code {
     margin: 0 4px;
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg
new file mode 100644
index 0000000000..dd92064012
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-business-components.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" y="0" class="st0" width="12" height="12"/>
+<path id="形状" d="M1.67,3.14C1.52,3.21,1.43,3.35,1.43,3.51c0,0.15,0.09,0.29,0.24,0.36l3.79,1.9c0.28,0.14,0.61,0.14,0.89,0
+	l3.92-1.91c0.14-0.07,0.24-0.21,0.24-0.36c0-0.16-0.09-0.3-0.23-0.37L6.45,1.17c-0.29-0.15-0.62-0.15-0.91,0L1.67,3.14z M6.44,0.11
+	l5.11,2.6C11.83,2.85,12,3.12,12,3.41v5.18c0,0.29-0.17,0.56-0.45,0.7L6.44,11.9c-0.28,0.14-0.6,0.14-0.88,0L0.45,9.29
+	C0.17,9.15,0,8.88,0,8.59V3.41c0-0.29,0.17-0.56,0.45-0.7L5.56,0.1C5.84-0.04,6.16-0.03,6.44,0.11L6.44,0.11L6.44,0.11z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-chart-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-chart-components.svg
new file mode 100644
index 0000000000..ba7b253f19
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-chart-components.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<g id="Tiny-Vue">
+	<g id="OpenTiny-组件详情1" transform="translate(-30.000000, -1822.000000)">
+		<g id="_x2D_mockplus-" transform="translate(-0.149321, 93.000000)">
+			<g id="left-menu-选项-链接备份-15" transform="translate(0.000000, 1714.000000)">
+				<g id="图表组件" transform="translate(31.000000, 15.000000)">
+					<rect id="矩形" x="-0.85" class="st0" width="12" height="12"/>
+					<path id="形状结合" class="st1" d="M4.85,0.47v5.76h5.7C10.55,9.42,8,12,4.85,12s-5.7-2.58-5.7-5.76S1.7,0.47,4.85,0.47
+						L4.85,0.47z M5.82,0c2.94,0,5.32,2.41,5.32,5.38l0,0H5.82V0z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-data-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-data-components.svg
new file mode 100644
index 0000000000..caf80c7186
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-data-components.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12"/>
+<path id="形状结合" d="M10.5,0C11.33,0,12,0.83,12,1.85v8.31c0,1.02-0.67,1.85-1.5,1.85h-9C0.67,12,0,11.17,0,10.15
+	V1.85C0,0.83,0.67,0,1.5,0H10.5z M5.5,2.85c-0.91,0-1.65,0.82-1.65,1.86c0,0.32,0.23,0.58,0.53,0.58c0.27,0,0.48-0.21,0.52-0.49
+	L4.9,4.71c0-0.4,0.28-0.71,0.6-0.71s0.6,0.31,0.6,0.71C6.1,5,5.98,5.28,5.62,5.73L5.4,5.99L4.8,6.66l-0.26,0.3
+	C4.06,7.56,3.85,8.04,3.85,8.57c0,0.32,0.23,0.58,0.53,0.58h2.25l0.08-0.01c0.27-0.05,0.44-0.3,0.44-0.57L7.14,8.48L7.12,8.39
+	c-0.07-0.24-0.27-0.4-0.5-0.4l-1.49,0l0.03-0.04c0.08-0.12,0.17-0.24,0.27-0.34l0.12-0.14l0.47-0.52c0.85-0.95,1.13-1.48,1.13-2.23
+	C7.15,3.67,6.41,2.85,5.5,2.85z M10.63,2.85H8.38L8.3,2.86c-0.27,0.06-0.44,0.3-0.44,0.58l0.01,0.09l0.02,0.09
+	c0.07,0.24,0.27,0.4,0.5,0.4l1.17,0L8.64,5.34L8.6,5.4c-0.09,0.19-0.09,0.4,0,0.58c0.09,0.18,0.27,0.3,0.46,0.3
+	c0.68,0,1.05,0.34,1.05,0.98c0,0.5-0.21,0.72-0.6,0.72c-0.26,0-0.48-0.09-0.65-0.26L8.78,7.63c-0.12-0.16-0.32-0.24-0.51-0.2
+	c-0.19,0.05-0.34,0.2-0.39,0.4c-0.05,0.2-0.01,0.41,0.12,0.56c0.37,0.48,0.9,0.74,1.51,0.74c0.97,0,1.65-0.72,1.65-1.89l0-0.15
+	l-0.02-0.18c-0.08-0.71-0.43-1.25-0.98-1.55L9.99,5.3l1.05-1.5l0.04-0.07c0.09-0.19,0.09-0.4,0-0.58
+	C10.99,2.97,10.82,2.85,10.63,2.85z M2.33,2.95L1.08,3.91L1.01,3.97C0.83,4.17,0.8,4.47,0.93,4.7l0.05,0.07l0.07,0.07
+	C1.23,5,1.48,5.01,1.67,4.86L2.1,4.53l0,4.04l0.01,0.09C2.16,8.96,2.4,9.18,2.68,9.15c0.27-0.03,0.47-0.28,0.47-0.58V3.43L3.14,3.35
+	C3.12,3.15,3,2.98,2.84,2.9C2.67,2.82,2.48,2.84,2.33,2.95z"/>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-form-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-form-components.svg
new file mode 100644
index 0000000000..f50891693f
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-form-components.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" y="0" class="st0" width="12" height="12"/>
+<path id="形状" d="M10.15,0H1.85C0.83,0,0,0.83,0,1.85v8.31C0,11.17,0.83,12,1.85,12h8.31c1.02,0,1.85-0.83,1.85-1.85V1.85
+	C12,0.83,11.17,0,10.15,0z M8.31,8.77c0,0.26-0.2,0.46-0.46,0.46H3.23c-0.26,0-0.46-0.2-0.46-0.46l0,0c0-0.26,0.2-0.46,0.46-0.46
+	h4.62C8.1,8.31,8.31,8.51,8.31,8.77L8.31,8.77z M2.77,6c0-0.26,0.2-0.46,0.46-0.46h3.69c0.26,0,0.46,0.2,0.46,0.46
+	s-0.2,0.46-0.46,0.46H3.23C2.97,6.46,2.77,6.26,2.77,6z M8.77,3.69H3.23c-0.26,0-0.46-0.2-0.46-0.46s0.2-0.46,0.46-0.46h5.54
+	c0.26,0,0.46,0.2,0.46,0.46S9.03,3.69,8.77,3.69z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-frame-style.svg b/examples/sites/src/assets/images/leftMenu/cmp-frame-style.svg
new file mode 100644
index 0000000000..603722b3ad
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-frame-style.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12"/>
+<path id="形状" d="M1.33,0C0.6,0,0,0.6,0,1.33v9.33C0,11.4,0.6,12,1.33,12h4V0 M6.67,0v5.33H12v-4C12,0.6,11.4,0,10.67,0
+	 M6.67,6.67V12h4C11.4,12,12,11.4,12,10.67v-4"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-navigation-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-navigation-components.svg
new file mode 100644
index 0000000000..ca6a455c34
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-navigation-components.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12"/>
+<path id="形状" d="M10.67,0H1.33C0.6,0,0,0.6,0,1.33v9.33C0,11.4,0.6,12,1.33,12h9.33C11.4,12,12,11.4,12,10.67V1.33
+	C12,0.6,11.4,0,10.67,0z M6.27,11L5.67,6.67L1,5.73l9.33-4.06L6.27,11z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-other-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-other-components.svg
new file mode 100644
index 0000000000..f94674b9f0
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-other-components.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12"/>
+<path id="形状" d="M6,0C2.69,0,0,2.69,0,6s2.69,6,6,6s6-2.69,6-6S9.31,0,6,0z M3.29,6.74C2.88,6.74,2.54,6.41,2.54,6
+	s0.33-0.74,0.74-0.74S4.03,5.59,4.03,6S3.7,6.74,3.29,6.74z M6,6.74C5.59,6.74,5.26,6.41,5.26,6S5.59,5.26,6,5.26S6.74,5.59,6.74,6
+	S6.41,6.74,6,6.74z M8.71,6.74C8.3,6.74,7.97,6.41,7.97,6S8.3,5.26,8.71,5.26S9.46,5.59,9.46,6S9.12,6.74,8.71,6.74z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-table-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-table-components.svg
new file mode 100644
index 0000000000..65f0079152
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-table-components.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12"/>
+<path id="形状结合" d="M11.42,4H0.58C0.26,4,0,3.74,0,3.42V0.58C0,0.26,0.26,0,0.58,0h10.84C11.74,0,12,0.26,12,0.58v2.85
+	C12,3.74,11.74,4,11.42,4z M2.99,8h-2.4C0.27,8,0.01,7.74,0.01,7.42V5.04c0-0.32,0.26-0.58,0.58-0.58h2.4
+	c0.32,0,0.58,0.26,0.58,0.58v2.39C3.57,7.74,3.31,8,2.99,8z M7.19,8h-2.4C4.47,8,4.21,7.74,4.21,7.42V5.04
+	c0-0.32,0.26-0.58,0.58-0.58h2.4c0.32,0,0.58,0.26,0.58,0.58v2.39C7.77,7.74,7.51,8,7.19,8z M11.39,8h-2.4
+	C8.67,8,8.41,7.74,8.41,7.42V5.04c0-0.32,0.26-0.58,0.58-0.58h2.4c0.32,0,0.58,0.26,0.58,0.58v2.39C11.97,7.74,11.71,8,11.39,8z
+	 M2.99,12h-2.4c-0.32,0-0.58-0.26-0.58-0.58V9.04c0-0.32,0.26-0.58,0.58-0.58h2.4c0.32,0,0.58,0.26,0.58,0.58v2.39
+	C3.57,11.74,3.31,12,2.99,12z M7.19,12h-2.4c-0.32,0-0.58-0.26-0.58-0.58V9.04c0-0.32,0.26-0.58,0.58-0.58h2.4
+	c0.32,0,0.58,0.26,0.58,0.58v2.39C7.77,11.74,7.51,12,7.19,12z M11.39,12h-2.4c-0.32,0-0.58-0.26-0.58-0.58V9.04
+	c0-0.32,0.26-0.58,0.58-0.58h2.4c0.32,0,0.58,0.26,0.58,0.58v2.39C11.97,11.74,11.71,12,11.39,12z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/cmp-tips-components.svg b/examples/sites/src/assets/images/leftMenu/cmp-tips-components.svg
new file mode 100644
index 0000000000..930a5c6f7d
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/cmp-tips-components.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" x="0" class="st0" width="12" height="12"/>
+<path id="形状" d="M6,0C2.69,0,0,2.69,0,6s2.69,6,6,6c3.31,0,6-2.69,6-6S9.31,0,6,0z M7.62,9.37C7.27,9.49,6.99,9.58,6.78,9.65
+	c-0.21,0.07-0.45,0.1-0.73,0.1c-0.43,0-0.76-0.09-0.99-0.28C4.82,9.28,4.7,9.05,4.7,8.76c0-0.11,0.01-0.22,0.03-0.34
+	c0.02-0.12,0.05-0.25,0.08-0.39l0.44-1.39C5.3,6.51,5.27,6.38,5.3,6.26c0.03-0.12,0.04-0.23,0.04-0.32c0-0.18,0.02-0.31-0.06-0.37
+	C5.19,5.5,5.04,5.52,4.8,5.52c-0.11,0-0.23,0.02-0.35,0.04C4.33,5.59,4.23,5.57,4.15,5.6l0.12-0.43C4.55,5.06,4.83,4.97,5.09,4.9
+	C5.35,4.82,5.6,4.79,5.84,4.79c0.43,0,0.75,0.09,0.98,0.27C7.05,5.25,7.3,5.48,7.3,5.77c0,0.06-0.01,0.17-0.02,0.32
+	C7.26,6.24,7.23,6.38,7.19,6.51L6.61,7.9C6.57,8.01,6.54,8.14,6.51,8.28C6.48,8.42,6.47,8.53,6.47,8.6c0,0.18,0.05,0.31,0.14,0.38
+	c0.09,0.07,0.25,0.1,0.48,0.1c0.11,0,0.23-0.02,0.36-0.05C7.58,9,7.68,8.97,7.74,8.94L7.62,9.37z M7.55,3.74C7.34,3.91,7.1,4,6.81,4
+	C6.52,4,6.28,3.91,6.07,3.74C5.86,3.58,5.76,3.37,5.76,3.13c0-0.24,0.1-0.44,0.31-0.62c0.21-0.17,0.46-0.26,0.74-0.26
+	c0.29,0,0.53,0.09,0.74,0.26c0.21,0.17,0.31,0.38,0.31,0.62C7.85,3.37,7.75,3.58,7.55,3.74z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg b/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg
new file mode 100644
index 0000000000..dd92064012
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" y="0" class="st0" width="12" height="12"/>
+<path id="形状" d="M1.67,3.14C1.52,3.21,1.43,3.35,1.43,3.51c0,0.15,0.09,0.29,0.24,0.36l3.79,1.9c0.28,0.14,0.61,0.14,0.89,0
+	l3.92-1.91c0.14-0.07,0.24-0.21,0.24-0.36c0-0.16-0.09-0.3-0.23-0.37L6.45,1.17c-0.29-0.15-0.62-0.15-0.91,0L1.67,3.14z M6.44,0.11
+	l5.11,2.6C11.83,2.85,12,3.12,12,3.41v5.18c0,0.29-0.17,0.56-0.45,0.7L6.44,11.9c-0.28,0.14-0.6,0.14-0.88,0L0.45,9.29
+	C0.17,9.15,0,8.88,0,8.59V3.41c0-0.29,0.17-0.56,0.45-0.7L5.56,0.1C5.84-0.04,6.16-0.03,6.44,0.11L6.44,0.11L6.44,0.11z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/docs-usage-guidelines.svg b/examples/sites/src/assets/images/leftMenu/docs-usage-guidelines.svg
new file mode 100644
index 0000000000..6572259a20
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/docs-usage-guidelines.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12"/>
+<path id="形状" d="M12,7.2H3C2.04,7.2,1.2,8.04,1.2,9s0.84,1.8,1.8,1.8h9v0.6c0,0.36-0.24,0.6-0.6,0.6h-9C1.08,12,0,10.92,0,9.6
+	V2.4C0,1.08,1.08,0,2.4,0h9C11.76,0,12,0.24,12,0.6V7.2z M2.4,9c0-0.36,0.24-0.6,0.6-0.6h9v1.2H3C2.64,9.6,2.4,9.36,2.4,9z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/leftMenu/overview.svg b/examples/sites/src/assets/images/leftMenu/overview.svg
new file mode 100644
index 0000000000..017bec2706
--- /dev/null
+++ b/examples/sites/src/assets/images/leftMenu/overview.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+		.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0;}
+</style>
+<rect id="矩形" class="st0" width="12" height="12" />
+<path id="形状" d="M2.68,0c1.48,0,2.68,1.2,2.68,2.68v2.68H2.68C1.2,5.37,0,4.17,0,2.68S1.2,0,2.68,0z M2.68,6.63h2.68v2.68
+	c0,1.48-1.2,2.68-2.68,2.68S0,10.8,0,9.32S1.2,6.63,2.68,6.63z M9.32,0C10.8,0,12,1.2,12,2.68s-1.2,2.68-2.68,2.68H6.63V2.68
+	C6.63,1.2,7.83,0,9.32,0z M6.63,6.63h2.68c1.48,0,2.68,1.2,2.68,2.68S10.8,12,9.32,12s-2.68-1.2-2.68-2.68V6.63z"/>
+</svg>
diff --git a/examples/sites/src/assets/images/style-settings.svg b/examples/sites/src/assets/images/style-settings.svg
new file mode 100644
index 0000000000..3479ceab69
--- /dev/null
+++ b/examples/sites/src/assets/images/style-settings.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>settings</title>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览1" transform="translate(-2299.000000, -2288.000000)">
+            <g id="设置" transform="translate(2123.000000, 2108.000000)">
+                <g id="编组-14备份-18" transform="translate(164.000000, 168.000000)">
+                    <g id="编组-39" transform="translate(12.000000, 12.000000)">
+                        <polygon id="Fill-1"
+                            transform="translate(8.000000, 8.000000) scale(-1, 1) rotate(-180.000000) translate(-8.000000, -8.000000) "
+                            points="0 16 16 16 16 0 0 0"></polygon>
+                        <path
+                            d="M15.9402305,7.1922353 C15.8775158,6.85389144 15.5418536,6.50948693 15.193696,6.43326592 L14.9333738,6.37537414 C14.3217322,6.19551191 13.7790855,5.80230659 13.4340681,5.22319945 C13.089029,4.64101989 13.0074306,3.97956795 13.1580022,3.37308268 L13.2395789,3.13530763 C13.3430711,2.80611786 13.2081782,2.35199045 12.935339,2.12639982 C12.935339,2.12639982 12.6906521,1.92524116 12.0005955,1.53813857 C11.3105173,1.15408735 11.0125359,1.04741581 11.0125359,1.04741581 C10.6768953,0.928559852 10.2064268,1.04133412 9.96176158,1.29432392 L9.77978934,1.48329816 C9.31557933,1.91002641 8.69137754,2.1690979 8.0013643,2.1690979 C7.31135107,2.1690979 6.6808908,1.90701714 6.21661582,1.47721647 L6.04090207,1.29430288 C5.79937686,1.04133412 5.32578996,0.92860194 4.99012774,1.04741581 C4.99012774,1.04741581 4.68902791,1.15408735 3.9989497,1.53811753 C3.3088715,1.92827148 3.06736795,2.12943014 3.06736795,2.12943014 C2.79450705,2.35194836 2.65961415,2.80304545 2.76312805,3.13528659 L2.83846797,3.37607092 C2.98587782,3.98259827 2.90744114,4.64101989 2.56240204,5.22313631 C2.21736294,5.80525274 1.66860936,6.20161464 1.05389273,6.37842551 L0.802968986,6.43326592 C0.457929884,6.50948693 0.119149259,6.85086112 0.0564345635,7.1922353 C0.0564345635,7.1922353 0,7.49701414 0,8.27121931 C0,9.04542447 0.0564345635,9.35020331 0.0564345635,9.35020331 C0.119149259,9.6915775 0.454789819,10.0329517 0.802968986,10.1091727 L1.04765591,10.1640131 C1.66241585,10.340845 2.21446109,10.7370807 2.55950019,11.3222695 C2.90453929,11.9044701 2.98613769,12.565901 2.83556612,13.1724073 L2.76345288,13.4071099 C2.65996064,13.7362997 2.79485354,14.1904271 3.06767113,14.4160178 C3.06767113,14.4160178 3.31235805,14.6171764 4.0024146,15.004279 C4.69247115,15.3913816 4.99045258,15.4950018 4.99045258,15.4950018 C5.32609314,15.6138367 5.79656163,15.5010834 6.0412269,15.2480937 L6.21373562,15.0682314 C6.68104239,14.6384518 7.3084059,14.37635 8.00162417,14.37635 C8.69484244,14.37635 9.32523774,14.6415032 9.78951272,15.0712617 L9.96202144,15.251124 C10.2035467,15.5040927 10.6771336,15.6169301 11.0127958,15.498011 C11.0127958,15.498011 11.3138956,15.3913395 12.0039738,15.0073093 C12.694052,14.6201857 12.9355556,14.4190481 12.9355556,14.4190481 C13.2084165,14.1965298 13.3433094,13.7424024 13.2397738,13.4101403 L13.1644339,13.1662835 C13.017024,12.5628075 13.0954607,11.904407 13.4404998,11.3252788 C13.7855389,10.7430782 14.3375625,10.3438332 14.9523441,10.1670224 L15.197031,10.112182 C15.5420701,10.035961 15.8808507,9.69458677 15.9435654,9.35321259 C15.9435654,9.35321259 16,9.04843375 16,8.27422858 C15.9967083,7.49692996 15.9402521,7.19213008 15.9402521,7.19213008 L15.9402305,7.1922353 Z M8.00155921,11.3710493 C6.24190959,11.3710493 4.81162041,9.98423505 4.81162041,8.27121931 C4.81162041,6.56127598 6.23874787,5.17441968 8.00155921,5.17441968 C9.76120882,5.17441968 11.191498,6.56123389 11.191498,8.27424963 C11.188293,9.98419296 9.76116551,11.3710493 8.00155921,11.3710493 Z"
+                            id="形状" fill="#595959" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/src/assets/images/theme-settings.svg b/examples/sites/src/assets/images/theme-settings.svg
new file mode 100644
index 0000000000..6872146ddf
--- /dev/null
+++ b/examples/sites/src/assets/images/theme-settings.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>主题</title>
+    <g id="Tiny-Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="OpenTiny-组件详情-窄距1" transform="translate(-1662.000000, -2340.000000)">
+            <g id="编组-4" transform="translate(1650.000000, 2328.000000)">
+                <g id="主题" transform="translate(12.000000, 12.000000)">
+                    <polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
+                    <path d="M3.60060958,12.9176944 L3.60060958,7.65083602 L2.96862533,8.32531893 C2.85933935,8.44596528 2.70503123,8.51419685 2.54363593,8.51323964 C2.38224062,8.51419685 2.22793248,8.44596529 2.1186465,8.32531893 L0.17069504,6.25717551 C-0.0568983467,5.99939057 -0.0568983467,5.60887796 0.17069504,5.35109302 L3.13462121,2.18793062 C3.24390719,2.06728428 3.39821531,1.99905272 3.55961061,2 L4.62658402,2 C4.71958171,2 4.7925799,2.05486246 4.83357887,2.14425178 C5.41356443,3.42617564 6.66753319,4.25607407 8.00449988,4.25607407 C9.34146656,4.25607407 10.5844356,3.42617564 11.1754209,2.14323598 C11.2121106,2.05949304 11.2922674,2.00403005 11.3824157,2 L12.4503891,2 C12.6085679,1.99926079 12.7594062,2.06773021 12.8643788,2.18793062 L15.829305,5.35210881 C16.0568983,5.60989376 16.0568983,6.00040636 15.829305,6.25819131 L13.8813535,8.33750838 C13.7720675,8.45815473 13.6177594,8.5263863 13.4563641,8.52542909 C13.2949688,8.5263863 13.1406606,8.45815473 13.0313747,8.33750838 L12.3993904,7.66302547 L12.3993904,12.9187102 C12.3993904,13.6267141 11.8604038,14.1904762 11.2074201,14.1904762 L4.7925799,14.1904762 C4.12959641,14.1894604 3.59960962,13.6145247 3.59960962,12.9176944 L3.60060958,12.9176944 Z" id="路径" fill="#595959" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/src/data/contributorMap.js b/examples/sites/src/data/contributorMap.js
new file mode 100644
index 0000000000..a28da199b6
--- /dev/null
+++ b/examples/sites/src/data/contributorMap.js
@@ -0,0 +1,175 @@
+/**
+ * 记录各个组件的贡献者
+ */
+export default {
+  'button': ['You-Hw-Y'],
+  'button-group': ['You-Hw-Y'],
+  'container': ['You-Hw-Y'],
+  'icon': ['chenxi-20'],
+  'layout': ['You-Hw-Y'],
+  'link': ['You-Hw-Y'],
+  'divider': ['James-9696'],
+  'action-menu': ['MomoPoppy'],
+  'anchor': ['chenxi-20'],
+  'breadcrumb': ['wuyiping0628'],
+  'dropdown': ['MomoPoppy'],
+  'fall-menu': ['James-9696'],
+  'link-menu': ['James-9696'],
+  'nav-menu': ['wuyiping0628'],
+  'pager': ['gimmyhehe'],
+  'steps': ['Huangyilin19'],
+  'tabs': ['chenxi-20'],
+  'toggle-menu': ['James-9696'],
+  'tree-menu': ['wuyiping0628'],
+  'autocomplete': ['yoyo201626'],
+  'cascader': ['yoyo201626'],
+  'cascader-panel': ['yoyo201626'],
+  'checkbox': ['You-Hw-Y'],
+  'color-picker': ['James-9696'],
+  'color-select-panel': ['James-9696'],
+  'date-picker': ['You-Hw-Y'],
+  'drop-times': ['You-Hw-Y'],
+  'file-upload': ['chenxi-20'],
+  'form': ['gimmyhehe'],
+  'input': ['yoyo201626'],
+  'ip-address': ['wuyiping0628'],
+  'numeric': ['James-9696'],
+  'popeditor': ['yoyo201626'],
+  'pop-upload': ['chenxi-20'],
+  'radio': ['You-Hw-Y'],
+  'rate': ['wuyiping0628'],
+  'rich-text-editor': ['shenjunjian'],
+  'search': ['chenxi-20'],
+  'base-select': ['MomoPoppy'],
+  'select': ['MomoPoppy'],
+  'slider': ['yoyo201626'],
+  'switch': ['You-Hw-Y'],
+  'time-picker': ['You-Hw-Y '],
+  'time-select': ['You-Hw-Y '],
+  'transfer': ['shenjunjian'],
+  'grid': ['zzcr', 'gimmyhehe'],
+  'grid-serial-column': ['zzcr', 'gimmyhehe'],
+  'grid-operation-column': ['zzcr', 'gimmyhehe'],
+  'grid-empty': ['zzcr', 'gimmyhehe'],
+  'grid-data-source': ['zzcr', 'gimmyhehe'],
+  'grid-large-data': ['zzcr', 'gimmyhehe'],
+  'grid-pager': ['zzcr', 'gimmyhehe'],
+  'grid-edit': ['zzcr', 'gimmyhehe'],
+  'grid-toolbar': ['zzcr', 'gimmyhehe'],
+  'grid-loading': ['zzcr', 'gimmyhehe'],
+  'grid-size': ['zzcr', 'gimmyhehe'],
+  'grid-appearance-settings': ['zzcr', 'gimmyhehe'],
+  'grid-highlight': ['zzcr', 'gimmyhehe'],
+  'grid-tip': ['zzcr', 'gimmyhehe'],
+  'grid-align': ['zzcr', 'gimmyhehe'],
+  'grid-header': ['zzcr', 'gimmyhehe'],
+  'grid-footer': ['zzcr', 'gimmyhehe'],
+  'grid-custom-style': ['zzcr', 'gimmyhehe'],
+  'grid-sort': ['zzcr', 'gimmyhehe'],
+  'grid-filter': ['zzcr', 'gimmyhehe'],
+  'grid-fixed': ['zzcr', 'gimmyhehe'],
+  'grid-span': ['zzcr', 'gimmyhehe'],
+  'grid-row-grouping': ['zzcr', 'gimmyhehe'],
+  'grid-drag': ['zzcr', 'gimmyhehe'],
+  'grid-context-menu': ['zzcr', 'gimmyhehe'],
+  'grid-editor': ['zzcr', 'gimmyhehe'],
+  'grid-renderer': ['zzcr', 'gimmyhehe'],
+  'grid-validation': ['zzcr', 'gimmyhehe'],
+  'grid-event': ['zzcr', 'gimmyhehe'],
+  'grid-slot': ['zzcr', 'gimmyhehe'],
+  'grid-custom': ['zzcr', 'gimmyhehe'],
+  'grid-tree-table': ['zzcr', 'gimmyhehe'],
+  'grid-expand': ['zzcr', 'gimmyhehe'],
+  'grid-import-export': ['zzcr', 'gimmyhehe'],
+  'grid-mouse-keyboard': ['zzcr', 'gimmyhehe'],
+  'grid-dynamically-columns': ['zzcr', 'gimmyhehe'],
+  'grid-faq': ['zzcr', 'gimmyhehe'],
+  'badge': ['You-Hw-Y'],
+  'calendar': ['You-Hw-Y'],
+  'calendar-view': ['You-Hw-Y'],
+  'card': ['gimmyhehe'],
+  'carousel': ['James-9696'],
+  'collapse': ['wuyiping0628'],
+  'flowchart': ['Huangyilin19'],
+  'guide': ['wuyiping0628'],
+  'image': ['You-Hw-Y'],
+  'infinite-scroll': ['wuyiping0628'],
+  'milestone': ['chenxi-20'],
+  'mind-map': ['You-Hw-Y'],
+  'qr-code': ['wuyiping0628'],
+  'statistic': ['James-9696'],
+  'tag': ['chenxi-20'],
+  'tag-group': ['wuyiping0628'],
+  'time-line': ['Huangyilin19'],
+  'tree': ['shenjunjian'],
+  'user-head': ['James-9696'],
+  'wizard': ['chenxi-20'],
+  'alert': ['wuyiping0628'],
+  'dialog-box': ['James-9696'],
+  'drawer': ['Huangyilin19'],
+  'loading': ['yoyo201626'],
+  'modal': ['James-9696'],
+  'notify': ['yoyo201626'],
+  'popconfirm': ['You-Hw-Y'],
+  'progress': ['chenxi-20'],
+  'popover': ['shenjunjian'],
+  'skeleton': ['mengqiuleo'],
+  'tooltip': ['shenjunjian'],
+  'chart': ['Davont'],
+  'chart-events': ['Davont'],
+  'chart-attributes-demo': ['Davont'],
+  'chart-question': ['Davont'],
+  'chart-line': ['Davont'],
+  'chart-histogram': ['Davont'],
+  'chart-bar': ['Davont'],
+  'chart-pie': ['Davont'],
+  'chart-ring': ['Davont'],
+  'chart-waterfall': ['Davont'],
+  'chart-funnel': ['Davont'],
+  'chart-radar': ['Davont'],
+  'chart-map': ['Davont'],
+  'chart-sankey': ['Davont'],
+  'chart-heatmap': ['Davont'],
+  'chart-scatter': ['Davont'],
+  'chart-candle': ['Davont'],
+  'chart-gauge': ['Davont'],
+  'chart-tree': ['Davont'],
+  'chart-liquidfill': ['Davont'],
+  'chart-wordcloud': ['Davont'],
+  'chart-sunburst': ['Davont'],
+  'chart-graph': ['Davont'],
+  'chart-baidu-map': ['Davont'],
+  'chart-autonavi-map': ['Davont'],
+  'chart-boxplot': ['Davont'],
+  'chart-process': ['Davont'],
+  'bulletin-board': ['wuyiping0628'],
+  'config-provider': ['wuyiping0628'],
+  'crop': ['James-9696'],
+  'dialog-select': ['MomoPoppy'],
+  'filter-panel': ['chenxi-20'],
+  'floatbar': ['Huangyilin19'],
+  'fullscreen': ['wuyiping0628'],
+  'scroll-text': ['yoyo201626'],
+  'split': ['zzcr'],
+  'text-popup': ['wuyiping0628'],
+  'user-contact': ['James-9696'],
+  'watermark': ['wuyiping0628'],
+
+  // 业务组件
+  'amount': ['yoyo201626'],
+  'area': ['MomoPoppy'],
+  'company': ['MomoPoppy'],
+  'country': ['MomoPoppy'],
+  'currency': ['yoyo201626'],
+  'dept': ['wuyiping0628'],
+  'drop-roles': ['wuyiping0628'],
+  'espace': ['wuyiping0628'],
+  'hrapprover': ['You-Hw-Y'],
+  'locales': ['You-Hw-Y'],
+  'logon-user': ['James-9696'],
+  'logout': ['James-9696'],
+  'roles': ['James-9696'],
+  'user': ['shenjunjian'],
+  'user-account': ['shenjunjian'],
+  'user-link': ['You-Hw-Y']
+}
diff --git a/examples/sites/src/data/contributors.js b/examples/sites/src/data/contributors.js
new file mode 100644
index 0000000000..4d8dbff40b
--- /dev/null
+++ b/examples/sites/src/data/contributors.js
@@ -0,0 +1,401 @@
+/**
+ * All contributors on GitHub
+ */
+export default [
+  {
+    id: 'kagol',
+    nickname: 'kagol',
+    avatar: 'https://avatars.githubusercontent.com/u/9566362?s=60&v=4',
+    homepage: 'https://github.com/kagol'
+  },
+  {
+    id: 'zzcr',
+    nickname: 'ajaxzheng',
+    avatar: 'https://avatars.githubusercontent.com/u/18521562?s=60&v=4',
+    homepage: 'https://github.com/zzcr'
+  },
+  {
+    id: 'gimmyhehe',
+    nickname: 'gimmyhehe',
+    avatar: 'https://avatars.githubusercontent.com/u/26026184?s=60&v=4',
+    homepage: 'https://github.com/gimmyhehe'
+  },
+  {
+    id: 'chenxi-20',
+    nickname: 'chenxi-20',
+    avatar: 'https://avatars.githubusercontent.com/u/76168465?s=60&v=4',
+    homepage: 'https://github.com/chenxi-20'
+  },
+  {
+    id: 'shenjunjian',
+    nickname: '申君健',
+    avatar: 'https://avatars.githubusercontent.com/u/6848520?s=60&v=4',
+    homepage: 'https://github.com/shenjunjian'
+  },
+  {
+    id: 'MomoPoppy',
+    nickname: 'MomoPoppy',
+    avatar: 'https://avatars.githubusercontent.com/u/125256456?s=60&v=4',
+    homepage: 'https://github.com/MomoPoppy'
+  },
+  {
+    id: 'wuyiping0628',
+    nickname: 'wuyiping0628',
+    avatar: 'https://avatars.githubusercontent.com/u/42107997?s=60&v=4',
+    homepage: 'https://github.com/wuyiping0628'
+  },
+  {
+    id: 'James-9696',
+    nickname: 'James',
+    avatar: 'https://avatars.githubusercontent.com/u/72028410?s=60&v=4',
+    homepage: 'https://github.com/James-9696'
+  },
+  {
+    id: 'Youyou-smiles',
+    nickname: '厚德载物',
+    avatar: 'https://avatars.githubusercontent.com/u/66231260?s=60&v=4',
+    homepage: 'https://github.com/You-Hw-Y'
+  },
+  {
+    id: 'Davont',
+    nickname: 'Davont',
+    avatar: 'https://avatars.githubusercontent.com/u/28757633?s=60&v=4',
+    homepage: 'https://github.com/Davont'
+  },
+  {
+    id: 'MNZhu',
+    nickname: 'jacknan',
+    avatar: 'https://avatars.githubusercontent.com/u/17588953?s=60&v=4',
+    homepage: 'https://github.com/MNZhu'
+  },
+  {
+    id: 'Huangyilin19',
+    nickname: 'Huang Yilin',
+    avatar: 'https://avatars.githubusercontent.com/u/48042709?s=60&v=4',
+    homepage: 'https://github.com/Huangyilin19'
+  },
+  {
+    id: 'yoyo201626',
+    nickname: 'yoyo',
+    avatar: 'https://avatars.githubusercontent.com/u/104079404?s=60&v=4',
+    homepage: 'https://github.com/yoyo201626'
+  },
+  {
+    id: 'rayhaoqin',
+    nickname: 'Alaray',
+    avatar: 'https://avatars.githubusercontent.com/u/46983981?s=60&v=4',
+    homepage: 'https://github.com/rayhaoqin'
+  },
+  {
+    id: 'yuanningning',
+    nickname: 'ing',
+    avatar: 'https://avatars.githubusercontent.com/u/104059491?s=60&v=4',
+    homepage: 'https://github.com/yuanningning'
+  },
+  {
+    id: 'GaoNeng-wWw',
+    nickname: 'GaoNeng',
+    avatar: 'https://avatars.githubusercontent.com/u/31283122?s=60&v=4',
+    homepage: 'https://github.com/GaoNeng-wWw'
+  },
+  {
+    id: 'jxhhdx',
+    nickname: '巨蟹好好的徐',
+    avatar: 'https://avatars.githubusercontent.com/u/40119767?s=60&v=4',
+    homepage: 'https://github.com/jxhhdx'
+  },
+  {
+    id: 'pe-3',
+    nickname: 'Mr.栋',
+    avatar: 'https://avatars.githubusercontent.com/u/103579791?s=60&v=4',
+    homepage: 'https://github.com/pe-3'
+  },
+  {
+    id: 'AcWrong02',
+    nickname: 'AcWrong02',
+    avatar: 'https://avatars.githubusercontent.com/u/147061401?s=60&v=4',
+    homepage: 'https://github.com/AcWrong02'
+  },
+  {
+    id: 'Caesar-ch',
+    nickname: 'Caesar-ch',
+    avatar: 'https://avatars.githubusercontent.com/u/74941512?s=60&v=4',
+    homepage: 'https://github.com/Caesar-ch'
+  },
+  {
+    id: 'shonen7',
+    nickname: 'shonen',
+    avatar: 'https://avatars.githubusercontent.com/u/145949377?s=60&v=4',
+    homepage: 'https://github.com/shonen7'
+  },
+  {
+    id: 'TC-twwang',
+    nickname: 'TC-twwang',
+    avatar: 'https://avatars.githubusercontent.com/u/42400776?s=60&v=4',
+    homepage: 'https://github.com/TC-twwang'
+  },
+  {
+    id: 'Floyd-bit',
+    nickname: 'nickname',
+    avatar: 'https://avatars.githubusercontent.com/u/59243597?s=60&v=4',
+    homepage: 'https://github.com/Floyd-bit'
+  },
+  {
+    id: 'ianxinnew',
+    nickname: 'tianxin',
+    avatar: 'https://avatars.githubusercontent.com/u/146069396?s=60&v=4',
+    homepage: 'https://github.com/ianxinnew'
+  },
+  {
+    id: 'lyx-jay',
+    nickname: 'Lyx',
+    avatar: 'https://avatars.githubusercontent.com/u/39766860?s=60&v=4',
+    homepage: 'https://github.com/lyx-jay'
+  },
+  {
+    id: 'Zz-ZzzZ',
+    nickname: 'Zz-ZzzZ',
+    avatar: 'https://avatars.githubusercontent.com/u/48228016?s=60&v=4',
+    homepage: 'https://github.com/Zz-ZzzZ'
+  },
+  {
+    id: 'h-ivy',
+    nickname: 'huanghh',
+    avatar: 'https://avatars.githubusercontent.com/u/119093441?s=60&v=4',
+    homepage: 'https://github.com/h-ivy'
+  },
+  {
+    id: 'fanbingbing16',
+    nickname: '张烟铃',
+    avatar: 'https://avatars.githubusercontent.com/u/84823288?s=60&v=4',
+    homepage: 'https://github.com/fanbingbing16'
+  },
+  {
+    id: 'Xppp0217',
+    nickname: 'Xppp0217',
+    avatar: 'https://avatars.githubusercontent.com/u/82315158?s=60&v=4',
+    homepage: 'https://github.com/Xppp0217'
+  },
+  {
+    id: 'Binks_',
+    nickname: 'Binks123',
+    avatar: 'https://avatars.githubusercontent.com/u/103343025?s=60&v=4',
+    homepage: 'https://github.com/Binks123'
+  },
+  {
+    id: 'chenguang1994',
+    nickname: 'chenguang',
+    avatar: 'https://avatars.githubusercontent.com/u/31501915?s=60&v=4',
+    homepage: 'https://github.com/chenguang1994'
+  },
+  {
+    id: 'zuixinwang',
+    nickname: 'zuixinwang',
+    avatar: 'https://avatars.githubusercontent.com/u/59717852?s=60&v=4',
+    homepage: 'https://github.com/zuixinwang'
+  },
+  {
+    id: 'MrWang2016',
+    nickname: 'MrWang2016',
+    avatar: 'https://avatars.githubusercontent.com/u/24307164?s=60&v=4',
+    homepage: 'https://github.com/MrWang2016'
+  },
+  {
+    id: 'wNing50',
+    nickname: 'Nick Wu',
+    avatar: 'https://avatars.githubusercontent.com/u/38874640?s=60&v=4',
+    homepage: 'https://github.com/wNing50'
+  },
+  {
+    id: 'wkif',
+    nickname: 'Kif',
+    avatar: 'https://avatars.githubusercontent.com/u/62132584?s=60&v=4',
+    homepage: 'https://github.com/wkif'
+  },
+  {
+    id: 'gweesin',
+    nickname: 'Gweesin Chan',
+    avatar: 'https://avatars.githubusercontent.com/u/42909374?s=60&v=4',
+    homepage: 'https://github.com/gweesin'
+  },
+  {
+    id: 'mengqiuleo',
+    nickname: 'xiaoy',
+    avatar: 'https://avatars.githubusercontent.com/u/85825776?s=60&v=4',
+    homepage: 'https://github.com/mengqiuleo'
+  },
+  {
+    id: 'betavs',
+    nickname: 'betavs',
+    avatar: 'https://avatars.githubusercontent.com/u/34408516?s=60&v=4',
+    homepage: 'https://github.com/betavs'
+  },
+  {
+    id: 'acyza',
+    nickname: 'acyza',
+    avatar: 'https://avatars.githubusercontent.com/u/101238421?s=60&v=4',
+    homepage: 'https://github.com/acyza'
+  },
+  {
+    id: 'ygj6',
+    nickname: 'ygj6',
+    avatar: 'https://avatars.githubusercontent.com/u/7699524?s=60&v=4',
+    homepage: 'https://github.com/ygj6'
+  },
+  {
+    id: 'David-TechNomad',
+    nickname: 'David',
+    avatar: 'https://avatars.githubusercontent.com/u/23149356?s=60&v=4',
+    homepage: 'https://github.com/David-TechNomad'
+  },
+  {
+    id: 'LinboLen',
+    nickname: 'LinboLen',
+    avatar: 'https://avatars.githubusercontent.com/u/5467712?s=60&v=4',
+    homepage: 'https://github.com/LinboLen'
+  },
+  {
+    id: 'Jevin0',
+    nickname: 'Jevin',
+    avatar: 'https://avatars.githubusercontent.com/u/69580637?s=60&v=4',
+    homepage: 'https://github.com/Jevin0'
+  },
+  {
+    id: 'xiejay97',
+    nickname: 'Xie Jay',
+    avatar: 'https://avatars.githubusercontent.com/u/64340763?s=60&v=4',
+    homepage: 'https://github.com/xiejay97'
+  },
+  {
+    id: 'falcon-jin',
+    nickname: 'falcon-jin',
+    avatar: 'https://avatars.githubusercontent.com/u/48880836?s=60&v=4',
+    homepage: 'https://github.com/falcon-jin'
+  },
+  {
+    id: 'vaebe',
+    nickname: 've',
+    avatar: 'https://avatars.githubusercontent.com/u/52314078?s=60&v=4',
+    homepage: 'https://github.com/vaebe'
+  },
+  {
+    id: 'betterdancing',
+    nickname: 'betterdancing',
+    avatar: 'https://avatars.githubusercontent.com/u/25901461?s=60&v=4',
+    homepage: 'https://github.com/betterdancing'
+  },
+  {
+    id: 'wwttff',
+    nickname: 'MangoWu',
+    avatar: 'https://avatars.githubusercontent.com/u/32888622?s=60&v=4',
+    homepage: 'https://github.com/wwttff'
+  },
+  {
+    id: 'qinwencheng',
+    nickname: 'qinwencheng',
+    avatar: 'https://avatars.githubusercontent.com/u/24841685?s=60&v=4',
+    homepage: 'https://github.com/qinwencheng'
+  },
+  {
+    id: 'WXC-Spring',
+    nickname: 'WXC-Spring',
+    avatar: 'https://avatars.githubusercontent.com/u/131581326?s=60&v=4',
+    homepage: 'https://github.com/WXC-Spring'
+  },
+  {
+    id: 'heygsc',
+    nickname: 'heygsc',
+    avatar: 'https://avatars.githubusercontent.com/u/103993866?s=60&v=4',
+    homepage: 'https://github.com/heygsc'
+  },
+  {
+    id: 'LadyChatterleyLover',
+    nickname: 'luopei',
+    avatar: 'https://avatars.githubusercontent.com/u/35223515?s=60&v=4',
+    homepage: 'https://github.com/LadyChatterleyLover'
+  },
+  {
+    id: 'CatsAndMice',
+    nickname: '凌览',
+    avatar: 'https://avatars.githubusercontent.com/u/20911103?s=60&v=4',
+    homepage: 'https://github.com/KevinAndrewDong'
+  },
+  {
+    id: 'ididid',
+    nickname: 'nickname',
+    avatar: 'https://avatars.githubusercontent.com/u/58327088?s=60&v=4',
+    homepage: 'https://github.com/CatsAndMice'
+  },
+  {
+    id: 'brenner8023 ',
+    nickname: '前端爆冲',
+    avatar: 'https://avatars.githubusercontent.com/u/31237954?s=60&v=4',
+    homepage: 'https://github.com/brenner8023'
+  },
+  {
+    id: 'ErKeLost',
+    nickname: 'ADNY',
+    avatar: 'https://avatars.githubusercontent.com/u/66500121?s=60&v=4',
+    homepage: 'https://github.com/ErKeLost'
+  },
+  {
+    id: 'allenli178',
+    nickname: 'YuYan',
+    avatar: 'https://avatars.githubusercontent.com/u/53218750?s=60&v=4',
+    homepage: 'https://github.com/allenli178'
+  },
+  {
+    id: 'chenqifeng66',
+    nickname: 'chenqifeng66',
+    avatar: 'https://avatars.githubusercontent.com/u/97503755?s=60&v=4',
+    homepage: 'https://github.com/chenqifeng66'
+  },
+  {
+    id: 'dyh333',
+    nickname: 'dyh333',
+    avatar: 'https://avatars.githubusercontent.com/u/1221313?s=60&v=4',
+    homepage: 'https://github.com/dyh333'
+  },
+  {
+    id: 'zuowendong',
+    nickname: 'wendZzoo',
+    avatar: 'https://avatars.githubusercontent.com/u/45628596?s=60&v=4',
+    homepage: 'https://github.com/Zuowendong'
+  },
+  {
+    id: 'liumingxiy',
+    nickname: '刘名喜',
+    avatar: 'https://avatars.githubusercontent.com/u/53034113?s=60&v=4',
+    homepage: 'https://github.com/liumingxiy'
+  },
+  {
+    id: 'coderbaozi',
+    nickname: '程序员包子',
+    avatar: 'https://avatars.githubusercontent.com/u/103836393?s=60&v=4',
+    homepage: 'https://github.com/coderbaozi'
+  },
+  {
+    id: 'jack-zishan',
+    nickname: 'jack-zishan',
+    avatar: 'https://avatars.githubusercontent.com/u/67041206?s=60&v=4',
+    homepage: 'https://github.com/jack-zishan'
+  },
+  {
+    id: 'awspi',
+    nickname: 'Pithy',
+    avatar: 'https://avatars.githubusercontent.com/u/66438036?s=60&v=4',
+    homepage: 'https://github.com/awspi'
+  },
+  {
+    id: 'xlearns',
+    nickname: 'xlearns',
+    avatar: 'https://avatars.githubusercontent.com/u/62782792?s=60&v=4',
+    homepage: 'https://github.com/xlearns'
+  },
+  {
+    id: 'ichynul',
+    nickname: 'ichynul',
+    avatar: 'https://avatars.githubusercontent.com/u/10061650?s=60&v=4',
+    homepage: 'https://github.com/ichynul'
+  }
+]
diff --git a/examples/sites/src/i18n/en.json b/examples/sites/src/i18n/en.json
index 17358ffcf2..8579b59d38 100644
--- a/examples/sites/src/i18n/en.json
+++ b/examples/sites/src/i18n/en.json
@@ -10,6 +10,8 @@
   "apiPreference": "Framework",
   "apiTiny": "Vue",
   "yan-shi": "Demo",
+  "demos": "Demos",
+  "api": "API",
   "name": "Name",
   "propType": "Type",
   "defValue": "Default",
@@ -24,8 +26,17 @@
   "playground": "Open Playground",
   "changeLanguage": "Change Language",
   "changeTheme": "Change Components Theme",
+  "changeApiType": "Change Api Type",
+  "backTop": "Back To Top",
   "overview": "Components Overview",
   "overviewDesc": "TinyVue provides a wealth of basic UI components for web applications, and we will continue to explore the best UI practices for enterprise-level applications. Welcome to try TinyVue.",
   "searchComponents": "search components",
-  "apiType": "Components demos code style"
+  "apiType": "Components demos code style",
+  "apiStyleOptions": "Options",
+  "apiStyleComposition": "Composition",
+  "demoMode": "Demo display mode",
+  "demoModeSingle": "Single",
+  "demoModeMultiple": "Multiple",
+  "contributor": "Contributors",
+  "noData": "No Data"
 }
diff --git a/examples/sites/src/i18n/index.js b/examples/sites/src/i18n/index.js
index 330d95d998..1e3fdc8895 100644
--- a/examples/sites/src/i18n/index.js
+++ b/examples/sites/src/i18n/index.js
@@ -9,6 +9,7 @@ $local._lang = $local._lang !== 'zhCN' && $local._lang !== 'enUS' ? 'zhCN' : $lo
 const customCreateI18n = ({ locale, messages }) =>
   createI18n({
     locale, // set locale
+    // legacy: false, // 如果要支持compositionAPI，此项必须设置为false。
     fallbackLocale: 'zhCN', // set fallback locale
     messages // set locale messages
   })
diff --git a/examples/sites/src/i18n/zh.json b/examples/sites/src/i18n/zh.json
index 24c6d38093..852d3ab32e 100644
--- a/examples/sites/src/i18n/zh.json
+++ b/examples/sites/src/i18n/zh.json
@@ -10,6 +10,8 @@
   "apiPreference": "框架选择",
   "apiTiny": "Vue",
   "yan-shi": "演示",
+  "demos": "示例",
+  "api": "应用程序编程接口",
   "name": "名称",
   "propType": "类型",
   "defValue": "默认值",
@@ -24,8 +26,17 @@
   "playground": "打开演练场",
   "changeLanguage": "切换语言",
   "changeTheme": "切换组件主题风格",
+  "changeApiType": "切换示例代码风格",
+  "backTop": "返回顶部",
   "overview": "组件总览",
   "overviewDesc": "TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。",
   "searchComponents": "搜索组件",
-  "apiType": "组件示例代码风格"
+  "apiType": "组件示例代码风格",
+  "apiStyleOptions": "选项式",
+  "apiStyleComposition": "组合式",
+  "demoMode": "示例浏览模式",
+  "demoModeSingle": "单示例",
+  "demoModeMultiple": "多示例",
+  "contributor": "贡献者",
+  "noData": "暂无数据"
 }
diff --git a/examples/sites/src/menus.jsx b/examples/sites/src/menus.jsx
index 657468cb63..eb50c80afc 100644
--- a/examples/sites/src/menus.jsx
+++ b/examples/sites/src/menus.jsx
@@ -1,6 +1,5 @@
 import { docMenus, cmpMenus } from '@menu/menus.js'
-
-import { appData } from './tools'
+import { appData, $split } from './tools'
 
 /**
  * 聚合doc  / cmp 两个页面的所有菜单.
@@ -22,7 +21,8 @@ function genMenus() {
     {
       id: 'overview',
       label: appData.lang === 'zhCN' ? '组件总览' : 'overview',
-      type: 'overview'
+      type: 'overview',
+      key: 'overview'
     }
   ]
 
@@ -49,8 +49,20 @@ function genMenus() {
   return [...standaloneOptions, ...docOptions, ...cmpOptions]
 }
 
+// 获取菜单的类别图标
+async function getMenuIcons() {
+  const modules = import.meta.glob('@/assets/images/leftMenu/*.svg', { eager: true })
+  const icons = {}
+  for (const path of Object.keys(modules)) {
+    const iconName = $split(path, '/', -1).replace('.svg', '')
+    icons[iconName] = modules[path]
+  }
+
+  return icons
+}
+
 const getAllComponents = () =>
   cmpMenus.reduce((acc, current) => {
     return acc.concat(current.children)
   }, [])
-export { genMenus, getAllComponents }
+export { genMenus, getAllComponents, getMenuIcons }
diff --git a/examples/sites/src/router.js b/examples/sites/src/router.js
index 624d0d9bfd..c71356be31 100644
--- a/examples/sites/src/router.js
+++ b/examples/sites/src/router.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/views/layout/layout.vue'
-import { LANG_KEY, LANG_PATH_MAP, ZH_CN_LANG, CURRENT_THEME_KEY, THEME_ROUTE_MAP, DEFAULT_THEME } from './const'
+import { LANG_KEY, LANG_PATH_MAP, ZH_CN_LANG, CURRENT_THEME_KEY, THEME_ROUTE_MAP, SMB_THEME } from './const'
 import { $local } from './tools/storage'
 
 const Components = () => import('@/views/components/components.vue')
@@ -38,7 +38,7 @@ let routes = [
       const lang = $local[LANG_KEY]
       const langPath = LANG_PATH_MAP[lang] || LANG_PATH_MAP[ZH_CN_LANG]
       const themeKey = localStorage.getItem(CURRENT_THEME_KEY)
-      const theme = THEME_ROUTE_MAP[themeKey] || THEME_ROUTE_MAP[DEFAULT_THEME]
+      const theme = THEME_ROUTE_MAP[themeKey] || THEME_ROUTE_MAP[SMB_THEME]
       return { path: `${context}${langPath}/${theme}/overview` }
     }
   }
diff --git a/examples/sites/src/style.css b/examples/sites/src/style.css
index 7511b3dae6..9337856272 100644
--- a/examples/sites/src/style.css
+++ b/examples/sites/src/style.css
@@ -3,10 +3,18 @@ html {
   font-size: 16px;
 }
 
+:root {
+  --docs-markdown-top-body-zindex: 99;
+  --docs-tabs-header-zindex: 100;
+  --docs-float-settings-zindex: 999;
+  --docs-header-zindex: 200;
+  --docs-layout-sider-zindex: 201;
+}
+
 .tinyui-design-header {
   z-index: 1000 !important;
 }
 
-.tiny-grid td,.tiny-grid th { 
+.tiny-grid td,.tiny-grid th {
   vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/examples/sites/src/tools/useStyleSettings.js b/examples/sites/src/tools/useStyleSettings.js
new file mode 100644
index 0000000000..92234f0f5c
--- /dev/null
+++ b/examples/sites/src/tools/useStyleSettings.js
@@ -0,0 +1,46 @@
+/** 文档显示风格设置 */
+const getStyleSettings = (i18nByKey) => {
+  const styleSettings = [
+    {
+      // 示例代码风格
+      name: 'apiMode',
+      defaultValue: 'Options',
+      title: i18nByKey('apiType'),
+      options: [
+        {
+          value: 'Options',
+          text: i18nByKey('apiStyleOptions')
+        },
+        {
+          value: 'Composition',
+          text: i18nByKey('apiStyleComposition')
+        }
+      ]
+    },
+    {
+      // 多/单示例
+      name: 'demoMode',
+      defaultValue: 'default',
+      title: i18nByKey('demoMode'),
+      options: [
+        {
+          // 多选（默认）
+          value: 'default',
+          text: i18nByKey('demoModeMultiple')
+        },
+        {
+          value: 'single',
+          text: i18nByKey('demoModeSingle')
+        }
+      ]
+    }
+  ]
+
+  return styleSettings
+}
+
+export default function useStyleSettings() {
+  return {
+    getStyleSettings
+  }
+}
diff --git a/examples/sites/src/tools/useTemplateMode.js b/examples/sites/src/tools/useTemplateMode.js
index dd587d8c6d..ed8d0b2645 100644
--- a/examples/sites/src/tools/useTemplateMode.js
+++ b/examples/sites/src/tools/useTemplateMode.js
@@ -2,7 +2,7 @@ import { reactive, computed, watch } from 'vue'
 import { router } from '@/router.js'
 import { getAllComponents } from '@/menus.jsx'
 import demoConfig from '@demos/config.js'
-import { staticDemoPath } from '../views/components/cmpConfig'
+import { staticDemoPath } from '../views/components/cmp-config'
 
 const allMenus = getAllComponents()
 
diff --git a/examples/sites/src/tools/utils.js b/examples/sites/src/tools/utils.js
index c274ed0499..315ea578e2 100644
--- a/examples/sites/src/tools/utils.js
+++ b/examples/sites/src/tools/utils.js
@@ -1,3 +1,6 @@
+import Contributors from '@/data/contributors'
+import ContributorMap from '@/data/contributorMap'
+
 const baseUrl = import.meta.env.BASE_URL
 
 /**
@@ -17,13 +20,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))
 
@@ -80,4 +83,24 @@ const fetchDemosFile = (path) => {
   })
 }
 
-export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile }
+/**
+ * 获取组件的贡献者
+ * @param {string} cmpId 组件id
+ * @returns string[] 贡献者信息列表
+ */
+const getCmpContributors = (cmpId) => {
+  const contributorIds = ContributorMap[cmpId]
+  let contributorInfo = []
+  if (contributorIds?.length) {
+    contributorIds.forEach((id) => {
+      let developer = Contributors.find((i) => i.id === id)
+      if (developer) {
+        contributorInfo.push(developer)
+      }
+    })
+  }
+
+  return contributorInfo
+}
+
+export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile, getCmpContributors }
diff --git a/examples/sites/src/views/components/VersionTip.vue b/examples/sites/src/views/components/VersionTip.vue
index 9d3ebaade2..f49d005796 100644
--- a/examples/sites/src/views/components/VersionTip.vue
+++ b/examples/sites/src/views/components/VersionTip.vue
@@ -31,7 +31,8 @@ enum STAGE {
   experimental = 'experimental',
   stable = 'stable',
   deprecated = 'deprecated',
-  removed = 'removed'
+  removed = 'removed',
+  new = 'new'
 }
 
 interface IStageVersionMetaData {
@@ -61,21 +62,24 @@ const tagTypeMap = {
   [STAGE.removed]: 'danger',
   [STAGE.deprecated]: 'danger',
   [STAGE.experimental]: 'warning',
-  [STAGE.stable]: 'info'
+  [STAGE.stable]: 'info',
+  [STAGE.new]: 'primary'
 }
 
 const cnDesMap = {
   [STAGE.experimental]: '处于测试阶段',
   [STAGE.stable]: '自 v{version} 起稳定提供',
   [STAGE.deprecated]: '从 v{version} 开始被废弃',
-  [STAGE.removed]: '于 v{version} 移除'
+  [STAGE.removed]: '于 v{version} 移除',
+  [STAGE.new]: '于 v{version} 新增'
 }
 
 const enDesMap = {
   [STAGE.experimental]: 'in beta',
   [STAGE.stable]: 'stable since v{version}',
   [STAGE.deprecated]: 'deprecated since v{version}',
-  [STAGE.removed]: 'removed in v{version}'
+  [STAGE.removed]: 'removed in v{version}',
+  [STAGE.new]: 'add in v{version}'
 }
 
 // 默认的，只需要显示deprecated，experimental状态时的提示，除非声明了briefStage
@@ -100,7 +104,7 @@ export default defineComponent({
     },
     stages: {
       type: Array as PropType<STAGE[]>,
-      default: () => [STAGE.experimental, STAGE.deprecated, STAGE.removed]
+      default: () => [STAGE.experimental, STAGE.deprecated, STAGE.removed, STAGE.new]
     },
     alertType: {
       type: String
@@ -136,7 +140,7 @@ export default defineComponent({
         return props.briefStage
       }
 
-      return [STAGE.removed, STAGE.deprecated, STAGE.stable, STAGE.experimental].find(isInStage)
+      return [STAGE.removed, STAGE.deprecated, STAGE.stable, STAGE.experimental, STAGE.new].find(isInStage)
     })
 
     const generateDes = (desMap: typeof cnDesMap) => {
diff --git a/examples/sites/src/views/components/cmpConfig.js b/examples/sites/src/views/components/cmp-config.js
similarity index 86%
rename from examples/sites/src/views/components/cmpConfig.js
rename to examples/sites/src/views/components/cmp-config.js
index c965e89e79..7b6b712d4f 100644
--- a/examples/sites/src/views/components/cmpConfig.js
+++ b/examples/sites/src/views/components/cmp-config.js
@@ -28,10 +28,12 @@ const faqMdConfig = {
 }
 
 const getWebdocPath = (path) => {
-  if (path.startsWith('grid-')) {
+  if (path?.startsWith('grid-')) {
     return 'grid'
-  } else if (path.startsWith('chart-')) {
+  } else if (path?.startsWith('chart-')) {
     return 'chart'
+  } else if (path?.startsWith('directives-')) {
+    return 'directives'
   } else {
     return path
   }
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 441276ce5a..c49ac593d6 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -1,139 +1,253 @@
 <template>
-  <div>
-    <div v-if="templateModeState.isSaas" class="ti-pt20 ti-pl48 ti-mb-36">
-      <span class="cmp-mode-title">文档类型： </span>
-      <tiny-button-group :data="optionsList" v-model="templateModeState.mode"></tiny-button-group>
+  <div v-if="templateModeState.isSaas" class="ti-pt20 ti-pl48 ti-mb-36">
+    <span class="cmp-mode-title">文档类型： </span>
+    <tiny-button-group :data="optionsList" v-model="templateModeState.mode"></tiny-button-group>
+  </div>
+  <!-- 一个组件的文档:  描述md + demos + apis -->
+  <header class="flex-horizontal docs-header">
+    <div class="docs-title-wrap">
+      <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
+      <version-tip
+        v-if="currJson.metaData || currJson.versionTipOption"
+        :meta-data="currJson.metaData"
+        v-bind="currJson.versionTipOption"
+      >
+      </version-tip>
     </div>
-    <div class="ti-f-r ti-pt48 ti-pl48 ti-pr48">
-      <div class="ti-fi-1 ti-w0 ti-rel cmp-container">
-        <!-- 一个组件的文档:  描述md + demos + apis -->
-        <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
-        <version-tip v-if="currJson.metaData || currJson.versionTipOption" :meta-data="currJson.metaData"
-          v-bind="currJson.versionTipOption">
-        </version-tip>
-        <template v-if="currJson?.demos?.length > 0">
-          <div class="all-demos-container">
-            <h2 class="ti-f30 ti-fw-normal !ti-mb20">{{ i18nByKey('yan-shi') }}</h2>
-            <div v-if="apiModeState.demoMode === 'default'" class="ti-f-c ti-f-wrap">
-              <template v-if="currJson.column === '2' && currJson.demos.length > 1">
-                <div class="one-demo-col2">
-                  <div>
-                    <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
+    <span class="docs-header-spacer"></span>
+  </header>
+  <div class="docs-content">
+    <div class="ti-fi-1 ti-rel cmp-container">
+      <div class="flex-horizontal docs-content-main">
+        <div class="docs-tabs-wrap">
+          <div v-if="['interfaces', 'types', 'classes'].includes(cmpId)" id="TS" class="all-api-container">
+            <div class="ti-f-c ti-f-wrap api-list">
+              <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                <div class="ti-f-r ti-f-pos-start ti-fw-bold">
+                  <div :id="`cmp-${oneGroup.name}`" class="ti-f18">
+                    {{ oneGroup.name }}
                   </div>
-                  <div>
-                    <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
+                  <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">
+                    {{ oneGroup.type }}
                   </div>
                 </div>
-              </template>
-              <template v-else>
-                <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
-              </template>
-            </div>
-            <div v-else>
-              <demo v-if="singleDemo" :key="singleDemo.name" :demo="singleDemo" />
-            </div>
-          </div>
-        </template>
-        <template v-if="currJson.apis?.length > 0">
-          <div id="API">
-            <h2 class="ti-f30 ti-fw-normal ti-mt28">API</h2>
-            <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-            <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
-              <div class="ti-f-r ti-f-pos-start ti-fw-bold">
-                <div :id="oneGroup.name" class="ti-f18">{{ oneGroup.name }}</div>
-                <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">{{ oneGroup.type }}</div>
-              </div>
-              <div v-for="(oneApiArr, key) in oneGroup" :key="key">
-                <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
-                  <div class="ti-f18 ti-py28">{{ key }}</div>
-                  <table class="api-table">
-                    <thead>
-                      <tr v-if="key.includes('slots')">
-                        <th width="15%">{{ i18nByKey('name') }}</th>
-                        <th width="85%">{{ i18nByKey('desc') }}</th>
-                      </tr>
-                      <tr v-else-if="key.includes('events') || key.includes('methods')">
-                        <th width="15%">{{ i18nByKey('name') }}</th>
-                        <th width="20%">{{ i18nByKey('propType') }}</th>
-                        <th width="65%">{{ i18nByKey('desc') }}</th>
-                      </tr>
-                      <tr v-else>
-                        <th width="15%">{{ i18nByKey('name') }}</th>
-                        <th width="20%" v-if="hasKey(oneApiArr, 'type')">{{ i18nByKey('propType') }}</th>
-                        <th width="20%" v-if="hasKey(oneApiArr, 'defaultValue')">{{ i18nByKey('defValue') }}</th>
-                        <th width="45%">{{ i18nByKey('desc') }}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="row in oneApiArr.sort((a, b) => a.name.localeCompare(b.name))" :key="row.name">
-                        <td>
-                          <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
-                          <span v-else>{{ row.name }}</span>
-                          <version-tip v-if="row.metaData || row.versionTipOption" :meta-data="row.metaData"
-                            v-bind="row.versionTipOption" render-type="tag" tip-subject="api">
+                <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+                  <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+                    <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
+                      {{ key }}
+                    </div>
+                    <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
+                      <tiny-grid-column
+                        v-if="tableData[oneGroup.name][key][0]?.type"
+                        class-name="api-table-expand-col"
+                        type="expand"
+                        width="32"
+                      >
+                        <template #default="{ row }">
+                          <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
+                        </template>
+                      </tiny-grid-column>
+                      <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                        <template #default="{ row }">
+                          <span class="api-table-name">
+                            <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                            <span v-else>{{ row.name }}</span>
+                          </span>
+                          <version-tip
+                            v-if="row.metaData || row.versionTipOption"
+                            :meta-data="row.metaData"
+                            v-bind="row.versionTipOption"
+                            render-type="tag"
+                            tip-subject="api"
+                          >
                           </version-tip>
-                        </td>
-                        <td v-if="!key.includes('slots') && hasKey(oneApiArr, 'type')" @click="handleTypeClick">
-                          <a v-if="row.typeAnchorName"
+                        </template>
+                      </tiny-grid-column>
+                      <tiny-grid-column
+                        v-if="tableData[oneGroup.name][key][0]?.type"
+                        field="type"
+                        :title="i18nByKey('propType')"
+                        :width="columnWidth[key][1]"
+                      >
+                        <template #default="{ row }">
+                          <a
+                            v-if="row.typeAnchorName"
                             :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
-                            v-html="row.type"></a>
+                            v-html="row.type"
+                          ></a>
                           <span v-else v-html="row.type"></span>
-                        </td>
-                        <td v-if="
-                          !key.includes('slots') &&
-                          !key.includes('events') &&
-                          !key.includes('methods') &&
-                          hasKey(oneApiArr, 'defaultValue')
-                        ">
-                          <span
-                            v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"></span>
-                        </td>
-                        <td><span v-html="row.desc[langKey]"></span></td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </template>
+                        </template>
+                      </tiny-grid-column>
+                      <tiny-grid-column
+                        v-if="key === 'props'"
+                        field="defaultValue"
+                        :title="i18nByKey('defValue')"
+                        :width="columnWidth[key][2]"
+                      ></tiny-grid-column>
+                      <tiny-grid-column field="desc" :title="i18nByKey('desc')"></tiny-grid-column>
+                    </tiny-grid>
+                  </template>
+                </div>
               </div>
             </div>
           </div>
-        </template>
-        <template v-if="currJson.types && currJson.types.length">
-          <div class="ti-f18 ti-py28" id="types">types</div>
-          <tiny-collapse v-model="activeNames">
-            <div v-for="typeItem in currJson.types" :id="typeItem.name" :key="typeItem.name">
-              <tiny-collapse-item :title="typeItem.name" :name="typeItem.name">
-                <async-highlight :code="typeItem.code.trim()" types="ts"></async-highlight></tiny-collapse-item>
-            </div>
-          </tiny-collapse>
-        </template>
-        <h2 id="FAQ" v-if="cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
-        <div class="markdown-body" v-html="cmpFAQMd"></div>
-        <div v-if="currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(currJson.owner)">
-          {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
+          <tiny-tabs v-else v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
+            <tiny-tab-item :title="i18nByKey('demos')" name="demos">
+              <!-- demos列表 -->
+              <template v-if="currJson?.demos?.length">
+                <div class="all-demos-container" id="all-demos-container">
+                  <div v-if="apiModeState.demoMode === 'default'" id="demo-list" class="ti-f-c ti-f-wrap demo-list">
+                    <demo
+                      v-for="demo in currJson.demos"
+                      :key="demo.name"
+                      :demo="demo"
+                      :curr-demo-id="currDemoId"
+                      class="mb32"
+                    />
+                  </div>
+                  <div v-else>
+                    <demo v-if="singleDemo" :key="singleDemo.name" :demo="singleDemo" />
+                  </div>
+                </div>
+              </template>
+
+              <!-- 贡献者 -->
+              <div class="cmp-contributor" v-if="contributors.length">
+                <h2 class="cmp-contributor-title">{{ i18nByKey('contributor') }}</h2>
+                <template v-for="item in contributors" :key="item.id">
+                  <tiny-tooltip popper-class="docs-tooltip" placement="top" effect="light">
+                    <template #content>
+                      <span class="cmp-contributor-tip">{{ item.nickname }}</span>
+                    </template>
+                    <a :href="item.homepage" class="cmp-contributor-item" rel="noopener noreferrer" target="_blank">
+                      <img class="cmp-contributor-avatar" :src="item.avatar" :alt="item.nickname" />
+                    </a>
+                  </tiny-tooltip>
+                </template>
+              </div>
+            </tiny-tab-item>
+            <tiny-tab-item v-if="showApiTab && !isRunningTest" title="API" name="api">
+              <!-- api文档 -->
+              <div id="API" class="all-api-container">
+                <div class="ti-f-c ti-f-wrap api-list">
+                  <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
+                  <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                    <div class="ti-f-r ti-f-pos-start ti-fw-bold">
+                      <div :id="`cmp-${oneGroup.name}`" class="ti-f18">
+                        {{ oneGroup.name }}
+                      </div>
+                      <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">
+                        {{ oneGroup.type }}
+                      </div>
+                    </div>
+                    <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+                      <template v-if="!['name', 'type'].includes(key) && oneApiArr.length > 0">
+                        <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
+                          {{ key }}
+                        </div>
+                        <tiny-grid
+                          ref="apiTableRef"
+                          class="api-table"
+                          :data="tableData[oneGroup.name][key]"
+                          :expand-config="apiExpandConf"
+                          row-id="name"
+                        >
+                          <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
+                            <template #default="{ row }">
+                              <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
+                              <div v-if="row.depTypes">
+                                <async-highlight
+                                  v-for="(k, i) in row.depTypes"
+                                  :key="i"
+                                  :code="currJson.types[k]?.code"
+                                  types="ts"
+                                ></async-highlight>
+                              </div>
+                            </template>
+                          </tiny-grid-column>
+                          <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                            <template #default="{ row }">
+                              <span class="api-table-name">
+                                <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                                <span v-else>{{ row.name }}</span>
+                              </span>
+                              <version-tip
+                                v-if="row.metaData || row.versionTipOption"
+                                :meta-data="row.metaData"
+                                v-bind="row.versionTipOption"
+                                render-type="tag"
+                                tip-subject="api"
+                              >
+                              </version-tip>
+                            </template>
+                          </tiny-grid-column>
+                          <tiny-grid-column
+                            v-if="tableData[oneGroup.name][key].find((i) => i.type)"
+                            field="type"
+                            :title="i18nByKey('propType')"
+                            :width="columnWidth[key][1]"
+                          >
+                            <template #default="{ row }">
+                              <span
+                                :class="{ 'type-link': row.typeAnchorName || row.linkTo }"
+                                :id="row.typeAnchorName ? row.type : ''"
+                                @click="toOuterType(row)"
+                                >{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
+                              ></span>
+                            </template>
+                          </tiny-grid-column>
+                          <tiny-grid-column
+                            v-if="key === 'props'"
+                            field="defaultValue"
+                            :title="i18nByKey('defValue')"
+                            :width="columnWidth[key][2]"
+                          ></tiny-grid-column>
+                          <tiny-grid-column field="desc" :title="i18nByKey('desc')"></tiny-grid-column>
+                        </tiny-grid>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </tiny-tab-item>
+          </tiny-tabs>
+        </div>
+        <!-- demo与api目录锚点 -->
+        <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
+          <tiny-anchor
+            id="anchor"
+            :links="currAnchorLinks"
+            :key="anchorRefreshKey"
+            :is-affix="anchorAffix"
+            type="dot"
+            mask-class="custom-active-anchor"
+            container-id="#doc-layout"
+            @link-click="handleAnchorClick"
+          >
+          </tiny-anchor>
         </div>
       </div>
 
-      <!-- 目录列表 -->
-      <div class="cmp-page-anchor catalog ti-w128 ti-sticky ti-top32" v-if="anchorLinks.length > 0">
-        <tiny-anchor :is-affix="true" :links="anchorLinks" :key="anchorRefreshKey" mask-class="custom-active-anchor"
-          @link-click="handleAnchorClick">
-        </tiny-anchor>
+      <h2 id="FAQ" v-if="cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
+      <div class="markdown-body" v-html="cmpFAQMd"></div>
+      <div v-if="currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(currJson.owner)">
+        {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
       </div>
     </div>
-    <div id="footer"></div>
   </div>
+  <div id="footer"></div>
 </template>
 
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref } from 'vue'
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref, onUnmounted, nextTick } from 'vue'
 import { marked } from 'marked'
-import { Anchor, ButtonGroup } from '@opentiny/vue'
+import { Anchor, ButtonGroup, Grid, GridColumn, Tabs, TabItem, Tooltip } from '@opentiny/vue'
+import { iconOuterLink } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
-import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode } from '@/tools'
+import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode, getCmpContributors } from '@/tools'
 import demo from '@/views/components/demo'
 import { router } from '@/router.js'
-import { Collapse, CollapseItem } from '@opentiny/vue'
-import { faqMdConfig, getWebdocPath } from './cmpConfig'
+import { faqMdConfig, getWebdocPath } from './cmp-config'
 import AsyncHighlight from './async-highlight.vue'
 import VersionTip from './VersionTip.vue'
 
@@ -143,35 +257,36 @@ export default defineComponent({
     Demo: demo,
     TinyAnchor: Anchor,
     TinyButtonGroup: ButtonGroup,
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyTooltip: Tooltip,
+    IconOuterLink: iconOuterLink(),
     AsyncHighlight,
     VersionTip
   },
   setup() {
+    const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
     const anchorRefreshKey = ref(0)
+    const apiTableRef = ref()
     const state = reactive({
       webDocPath: computed(() => ''),
       langKey: getWord('zh-CN', 'en-US'),
       cmpId: '',
-      currJson: { column: 1, demos: [], apis: [] },
+      currJson: { column: 1, demos: [], apis: [], types: {} },
       cmpTopMd: null,
       cmpFAQMd: null,
       evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
       oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
-      anchorLinks: computed(() => {
+      currDemoId: '',
+      demoAnchorLinks: computed(() => {
         const links =
           state.currJson?.demos?.map((demo) => ({
             key: demo.demoId,
             title: demo.name[state.langKey],
             link: `#${demo.demoId}`
           })) || []
-        if (state.currJson?.apis?.length) {
-          links.push({ key: 'API', title: 'API', link: '#API' })
-        }
-        if (state.currJson?.types?.length) {
-          links.push({ key: 'types', title: 'types', link: '#types' })
-        }
         if (state.cmpFAQMd) {
           links.push({
             key: 'FAQ',
@@ -181,14 +296,132 @@ export default defineComponent({
         }
         return links
       }),
+      apiAnchorLinks: computed(() => getApiAnchorLinks()),
+      anchorAffix: true,
+      currAnchorLinks: computed(() => (state.activeTab === 'demos' ? state.demoAnchorLinks : state.apiAnchorLinks)),
       // 单demo显示时
       singleDemo: null,
-      activeNames: ''
+      activeTab: 'demos',
+      tableData: {},
+      currApiTypes: [],
+      showApiTab: computed(() => state.currApiTypes.length),
+      columnWidth: {
+        props: ['15%', '20%', '15%'],
+        events: ['15%', '25%', 0],
+        methods: ['15%', '20%', 0],
+        slots: ['15%', 0, 0],
+        format: ['15%', 0, 0]
+      },
+      apiExpandConf: {
+        expandAll: false,
+        trigger: 'row',
+        expandRowKeys: [],
+        accordion: false,
+        activeMethod: (row) => row.typeAnchorName,
+        showIcon: true // 配置是否显示展开图标
+      },
+      contributors: [] // 贡献者
     })
 
     const { apiModeState } = useApiMode()
     const { templateModeState, staticPath, optionsList } = useTemplateMode()
-    const huiNewChart = ['chart-process']
+
+    const getApiAnchorLinks = () => {
+      if (!state.currJson.apis?.length) {
+        return []
+      }
+
+      const apiAnchorLinks = []
+      state.currJson.apis?.forEach((apiGroup) => {
+        const { name } = apiGroup
+        const typeLinks = state.currApiTypes
+          .filter((i) => apiGroup[i]?.length)
+          .map((i) => ({
+            key: i,
+            link: `#${name}--${i}`,
+            title: i
+          }))
+
+        const linkItem = {
+          key: name,
+          link: `#cmp-${name}`,
+          title: name,
+          children: typeLinks
+        }
+        apiAnchorLinks.push(linkItem)
+      })
+
+      return apiAnchorLinks
+    }
+
+    // 封装api表格数据
+    const parseApiData = () => {
+      if (!state.currJson.apis?.length) {
+        return {}
+      }
+
+      const tableData = {}
+      const apis = state.currJson.apis || []
+      for (const apiGroup of apis) {
+        const apiDisplay = {}
+        for (const apiType of Object.keys(apiGroup)) {
+          if (Array.isArray(apiGroup[apiType]) && apiGroup[apiType].length) {
+            const apiArr = apiGroup[apiType].map((i) => {
+              const { name, type, defaultValue, desc, demoId, typeAnchorName, linkTo, metaData, versionTipOption } = i
+              const item = {
+                name,
+                type,
+                defaultValue: defaultValue || '--',
+                desc: desc[state.langKey],
+                demoId,
+                metaData,
+                versionTipOption,
+                typeAnchorName: '',
+                linkTo
+              }
+              if (typeAnchorName) {
+                item.typeAnchorName = `${typeAnchorName?.includes('#') ? '' : '#'}${typeAnchorName}`
+                item.code = state.currJson.types[i.typeAnchorName]?.code || ''
+                item.depTypes = state.currJson.types[i.typeAnchorName]?.depTypes || []
+              }
+              return item
+            })
+            apiDisplay[apiType] = apiArr.sort((a, b) => a.name.localeCompare(b.name))
+            state.currApiTypes = Array.from(new Set([...state.currApiTypes, apiType]))
+          }
+        }
+
+        tableData[apiGroup.name] = apiDisplay
+      }
+      state.tableData = tableData
+    }
+
+    const getRowData = (type) => {
+      const tableData = state.tableData
+      let rowData
+      for (const comp of Object.values(tableData)) {
+        for (const apiGroup of Object.values(comp)) {
+          rowData = apiGroup.find((i) => i.type === type)
+          if (rowData) {
+            return rowData
+          }
+        }
+      }
+    }
+
+    const jumpToApi = (hash) => {
+      state.activeTab = 'api'
+      nextTick(() => {
+        const rowData = getRowData(hash)
+        const row = document.getElementById(hash).closest('.tiny-grid-body__row')
+        if (row) {
+          apiTableRef.value.forEach((i) => {
+            i.setCurrentRow(rowData)
+            i.setRowExpansion(rowData, true)
+          })
+        }
+      })
+    }
 
     // 页面加载/点击api中的链接，根据hash滚动。
     const scrollByHash = (hash) => {
@@ -198,6 +431,8 @@ export default defineComponent({
             top: 0,
             left: 0
           })
+        } else if (state.currJson.types[hash]) {
+          jumpToApi(hash)
         } else {
           let scrollTarget
           try {
@@ -207,8 +442,7 @@ export default defineComponent({
             // eslint-disable-next-line no-console
             console.log('querySelector has special character:', err)
           }
-          if (scrollTarget) {
-            scrollTarget.scrollIntoView()
+          if (scrollTarget && !isRunningTest) {
             document.getElementById('doc-layout').scrollTo({
               top: scrollTarget.offsetTop,
               left: 0,
@@ -233,20 +467,6 @@ export default defineComponent({
       }
     }
 
-    // 改变折叠筐的展开状态， 2参为TRUE则表示是通过点击type属性跳转的锚点。不用进行判断直接赋值
-    const changeActiveNames = (hash, isType = false) => {
-      const newVal = hash.replace('#', '')
-      if (isType) {
-        state.activeNames = newVal
-        return
-      }
-
-      const isTypeHashChange = state.currJson.types.some((item) => item.name === newVal)
-      if (isTypeHashChange) {
-        state.activeNames = newVal
-      }
-    }
-
     // saas下切换mode和组价示例都会触发loadPage,需要防抖
     const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
       const lang = getWord('cn', 'en')
@@ -255,96 +475,153 @@ export default defineComponent({
       // 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
       const promiseArr = [
         fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.${lang}.md`),
-        fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`),
-        fetchDemosFile(`@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`)
+        null,
+        fetchDemosFile(
+          `@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`
+        )
       ]
+      // 兼容ts文档
+      if (['interfaces', 'types', 'classes'].includes(state.cmpId)) {
+        state.activeTab = 'apis'
+      } else {
+        promiseArr[1] = fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`)
+      }
+
       if (faqMdConfig[state.cmpId]) {
         promiseArr.push(
           fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.faq.${lang}.md`)
         )
       }
 
-      Promise.all(promiseArr).then(([mdData, jsData, apiData, faqData]) => {
-        // 1、加载顶部md
-        state.cmpTopMd = marked(mdData)
-
-        // 2、加载faq.md
-        if (faqData) {
-          state.cmpFAQMd = marked(faqData)
-        }
+      Promise.all(promiseArr)
+        .then(([mdData, jsData, apiData, faqData]) => {
+          // 1、加载顶部md
+          state.cmpTopMd = marked(mdData)
 
-        // 3、加载cmpId.js 文件
-        // eslint-disable-next-line no-eval
-        const json = eval('(' + jsData.slice(15) + ')')
-        state.currJson = {
-          ...json,
-          demos: $clone(json.demos || []), // 克隆一下,避免保存上次的isOpen
-          column: json.column || '1' // columns可能为空
-        }
+          // 2、加载faq.md
+          if (faqData) {
+            state.cmpFAQMd = marked(faqData)
+          }
 
-        if (apiData) {
+          // 3、加载cmpId.js 文件
           // eslint-disable-next-line no-eval
-          const apiJson = eval('(' + apiData.slice(15) + ')')
-          // pc、mobile、mobile-first三种模式
-          const demoMode = templateModeState.isSaas ? templateModeState.mode : import.meta.env.VITE_APP_MODE
-          const demoKey = demoMode === 'mobile-first' ? 'mfDemo' : `${demoMode}Demo`
-          state.currJson.apis = apiJson.apis.map((item) => {
-            Object.keys(item).forEach((key) => {
-              const apiItem = item[key]
-              if (Array.isArray(apiItem)) {
-                item[key] = apiItem
-                  .filter((i) => !i.mode || i.mode.includes(demoMode))
-                  .map((filterItem) => ({ ...filterItem, demoId: filterItem[demoKey] }))
-              }
+          const json = jsData ? eval('(' + jsData.slice(15) + ')') : {}
+          state.currJson = {
+            ...json,
+            demos: $clone(json.demos || []), // 克隆一下,避免保存上次的isOpen
+            column: json.column || '1' // columns可能为空
+          }
+
+          if (apiData) {
+            // eslint-disable-next-line no-eval
+            const apiJson = eval('(' + apiData.slice(15) + ')')
+            // pc、mobile、mobile-first三种模式
+            const demoMode = templateModeState.isSaas ? templateModeState.mode : import.meta.env.VITE_APP_MODE
+            const demoKey = demoMode === 'mobile-first' ? 'mfDemo' : `${demoMode}Demo`
+            state.currJson.apis = apiJson.apis.map((item) => {
+              Object.keys(item).forEach((key) => {
+                const apiItem = item[key]
+                if (Array.isArray(apiItem)) {
+                  item[key] = apiItem
+                    .filter((i) => !i.mode || i.mode.includes(demoMode))
+                    .map((filterItem) => ({ ...filterItem, demoId: filterItem[demoKey] }))
+                }
+              })
+              return item
             })
-            return item
-          })
-          state.currJson.types = apiJson.types
-        }
+            state.currJson.types =
+              apiJson.types?.reduce((res, cur) => {
+                res[cur.name] = cur
+                return res
+              }, {}) || {}
+            parseApiData()
+          }
 
-        let hash = router.currentRoute.value.hash?.slice(1)
+          let hash = router.currentRoute.value.hash?.slice(1)
 
-        // 单demo处理，如果有hash,取hash的demo, 没有hash, 取第1项
-        if (hash) {
-          state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
-          if (!state.singleDemo) {
+          // 单demo处理，如果有hash,取hash的demo, 没有hash, 取第1项
+          if (hash) {
+            state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+            if (!state.singleDemo) {
+              state.singleDemo = state.currJson.demos[0]
+            }
+          } else {
             state.singleDemo = state.currJson.demos[0]
           }
 
-          if (state.currJson.types && state.currJson.types.length) {
-            changeActiveNames(hash)
-          }
-        } else {
-          state.singleDemo = state.currJson.demos[0]
-        }
+          // F5刷新加载时，跳到当前示例
+          scrollByHash(hash)
+        })
+        .finally(() => {
+          // 获取组件贡献者
+          getContributors()
+        })
+    })
 
-        // F5刷新加载时，跳到当前示例
-        scrollByHash(hash)
-      })
+    /**
+     * 获取贡献者
+     */
+    const getContributors = () => {
+      const cmpId = state.cmpId?.includes('grid') ? 'grid' : state.cmpId
+      state.contributors = getCmpContributors(cmpId)
+    }
+
+    const onDocLayoutScroll = debounce(100, false, () => {
+      const docLayout = document.getElementById('doc-layout')
+      const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
+      const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
+      const footerHeight = document.getElementById('footer')?.clientHeight || 0
+      const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
+      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout视口下隐藏的部分高度
+      state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
     })
+
+    const setScrollListener = () => {
+      nextTick(() => {
+        const docLayout = document.getElementById('doc-layout')
+        if (docLayout) {
+          docLayout.addEventListener('scroll', onDocLayoutScroll)
+        }
+      })
+    }
+
+    const removeScrollListener = () => {
+      const docLayout = document.getElementById('doc-layout')
+      if (docLayout) {
+        docLayout.removeEventListener('scroll', onDocLayoutScroll)
+      }
+    }
+
     const fn = {
       copyText: (text) => {
         navigator.clipboard.writeText(text)
       },
+      onTabsClick: () => {
+        scrollToLayoutTop()
+      },
       // 点击 api区域的 name列时
       jumpToDemo: (demoId) => {
+        state.activeTab = 'demos'
         if (demoId.startsWith('chart') || demoId.startsWith('grid')) {
           router.push(demoId)
         } else {
           router.push(`#${demoId}`)
-
           if (apiModeState.demoMode === 'single') {
             state.singleDemo = state.currJson.demos.find((d) => d.demoId === demoId)
           }
+          scrollByHash(demoId)
         }
       },
-      // 点击api 区域的type列
-      handleTypeClick: (ev) => {
-        const hash = ev.target.hash
-        if (hash) {
-          changeActiveNames(hash, true)
+
+      // 跳转到其他组件的api
+      toOuterType(row) {
+        if (!row.linkTo) {
+          return
         }
+
+        router.push(row.linkTo)
       },
+
       // 目录列表上的点击
       handleAnchorClick: (e, data) => {
         if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {
@@ -362,7 +639,10 @@ export default defineComponent({
         } else if (apiModeState.demoMode === 'default' && data.link.startsWith('#')) {
           // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
           const hash = data.link.slice(1)
+          state.currDemoId = hash
           state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+
+          e.preventDefault()
         }
       }
     }
@@ -379,6 +659,7 @@ export default defineComponent({
         }
       }
     )
+
     watch(
       () => apiModeState.demoMode,
       (value) => {
@@ -399,6 +680,11 @@ export default defineComponent({
       loadPage()
       const common = new window.TDCommon(['#footer'], {})
       common.renderFooter()
+      setScrollListener()
+    })
+
+    onUnmounted(() => {
+      removeScrollListener()
     })
 
     const hasKey = (apiArr, key) => !apiArr.every((item) => item[key] === undefined)
@@ -411,49 +697,137 @@ export default defineComponent({
       apiModeState,
       templateModeState,
       optionsList,
-      hasKey
+      hasKey,
+      isRunningTest,
+      apiTableRef
     }
   }
 })
 </script>
 
 <style lang="less" scoped>
-table.api-table {
+.docs-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--docs-header-zindex);
+  padding: var(--ti-common-space-4x) var(--ti-common-space-10x);
+  background-color: #fff;
+  box-shadow: var(--ti-common-space-3x) 0 var(--ti-common-space-5x) var(--ti-common-space-6) rgba(0, 0, 0, 0.06);
+
+  .docs-title-wrap {
+    flex: 1;
+    min-width: var(--layout-content-main-min-width);
+    max-width: var(--layout-content-main-max-width);
+    margin: 0 auto;
+  }
+
+  .markdown-top-body {
+    z-index: var(--docs-markdown-top-body-zindex);
+    font-size: var(--ti-common-font-size-1);
+    transition: all ease-in-out 0.3s;
+
+    :deep(h1) {
+      margin: 0;
+      padding: 0;
+      font-size: var(--ti-common-font-size-5);
+      line-height: 40px;
+    }
+  }
+
+  .version-tip {
+    width: 100%;
+  }
+
+  .docs-header-spacer {
+    flex: none;
+    width: 200px;
+  }
+}
+
+.docs-content {
+  margin: var(--ti-common-space-4x) 0 120px;
+  transition: all ease-in-out 0.3s;
+
+  .docs-tabs-wrap {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    min-width: 680px;
+    padding: 0 var(--ti-common-space-10x);
+  }
+
+  .docs-content-tabs {
+    --ti-tabs-heigh: 48px;
+    --ti-tabs-item-font-size: var(--ti-common-font-size-3);
+    --ti-tabs-header-font-active-text-color: #2f5bea;
+    --ti-tabs-item-active-border-color: #2f5bea;
+
+    flex: 1;
+    transition: all ease-in-out 0.3s;
+    min-width: var(--layout-content-main-min-width);
+    max-width: var(--layout-content-main-max-width);
+
+    :deep(> .tiny-tabs__header) {
+      position: sticky;
+      top: 90px;
+      z-index: var(--docs-tabs-header-zindex);
+      background-color: #fff;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: var(--ti-common-size-4x);
+        background: linear-gradient(to bottom, #fff, transparent);
+        transform: translateY(100%);
+      }
+
+      .tiny-tabs__item__title {
+        font-weight: bold;
+      }
+    }
+
+    & > :deep(.tiny-tabs__content) {
+      // 不能影响到tabs组件的样式
+      margin: 0;
+      overflow: visible;
+    }
+  }
+}
+
+.api-table {
+  --ti-grid-font-size: var(--ti-common-font-size-1);
+  --ti-grid-default-header-column-height: var(--ti-common-size-10x);
+
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   border: 1px solid rgb(239, 239, 245);
 
-  a {
+  a,
+  .type-link {
     text-decoration: none;
     color: #5e7ce0;
     cursor: pointer;
     word-wrap: break-word;
-  }
 
-  tbody tr:hover {
-    background-color: rgb(250, 250, 252);
+    .tiny-svg {
+      fill: #5e7ce0;
+    }
   }
-
-  th {
-    background-color: rgb(250, 250, 252);
-    border-bottom: 1px solid rgb(239, 239, 245);
-    padding: 12px;
-    text-align: left;
-    font-size: 14px;
-    line-height: 1.5;
-    word-break: break-word;
+  &-name:has(+ .version-tip) {
+    margin-right: 4px;
   }
 
-  td {
-    font-size: 14px;
-    border-bottom: 1px solid rgb(239, 239, 245);
-    padding: 12px;
-    line-height: 1.5;
+  :deep(.api-table-expand-col) {
+    padding-left: var(--ti-common-space-4x);
+  }
 
-    .version-tip {
-      margin-left: 6px;
-    }
+  :deep(.tiny-grid-body__expanded-cell) {
+    background-color: var(--ti-common-color-bg-gray);
   }
 }
 
@@ -464,8 +838,20 @@ table.api-table {
 }
 
 .catalog {
-  height: calc(100vh - 150px);
-  overflow: hidden;
+  flex: none;
+  width: 200px;
+  height: calc(100vh - 280px);
+  padding-top: var(--ti-common-space-4x);
+
+  .tiny-anchor__dot {
+    max-height: calc(100vh - 300px);
+    width: 200px;
+
+    :deep(.tiny-anchor) {
+      --ti-anchor-width: auto;
+      background-color: transparent;
+    }
+  }
 }
 
 .catalog:hover {
@@ -488,16 +874,32 @@ table.api-table {
   grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
   align-items: flex-start;
 
-  >div {
+  > div {
     display: grid;
     gap: 16px;
     grid-template-columns: 100%;
   }
 }
 
-.cmp-container {
-  padding-right: 24px;
+.all-demos-container,
+.all-api-container {
+  flex: 1;
+  padding-top: var(--ti-common-space-8x);
+  scroll-behavior: smooth;
+}
 
+.all-api-container {
+  padding-top: var(--ti-common-space-3x);
+}
+
+.flex-horizontal {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  column-gap: var(--ti-common-space-4x);
+}
+
+.cmp-container {
   p {
     font-size: 16px;
     line-height: 1.7em;
@@ -509,15 +911,15 @@ table.api-table {
   :deep(.tiny-anchor__affix) {
     top: unset !important;
     overflow-y: auto;
-    max-height: 80vh;
+    max-height: calc(100vh - 230px);
   }
 
   :deep(.tiny-anchor-link) {
     margin-bottom: 10px;
-    max-width: 150px;
     font-size: 12px;
 
     a {
+      display: block;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -525,8 +927,45 @@ table.api-table {
   }
 }
 
+.cmp-contributor {
+  margin-top: 48px;
+
+  .cmp-contributor-title {
+    margin-bottom: var(--ti-common-size-8x);
+    font-size: var(--ti-common-font-size-4);
+    font-weight: Semibold;
+    color: #191919;
+  }
+
+  .cmp-contributor-item {
+    width: 42px;
+    height: 42px;
+    margin-right: var(--ti-common-space-3x);
+    margin-bottom: var(--ti-common-space-5x);
+    display: inline-block;
+    border-radius: 50%;
+    overflow: hidden;
+    transition: all linear 0.2s;
+
+    &:hover {
+      transform: scale(110%);
+    }
+  }
+
+  .cmp-contributor-avatar {
+    width: 100%;
+    height: 100%;
+  }
+
+  .cmp-contributor-tip {
+    font-size: var(--ti-common-font-size-1);
+    color: #191919;
+  }
+}
+
 @media (max-width: 1279px) {
-  .catalog {
+  .catalog,
+  .docs-header-spacer {
     display: none;
   }
 
@@ -541,10 +980,6 @@ table.api-table {
   }
 }
 
-.all-demos-container {
-  margin-top: 24px;
-}
-
 .custom-block.tip {
   background-color: #f3f5f7;
   border-color: #42b983;
diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index 4978d344ca..3f5ec1ba83 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/src/views/components/demo.vue
@@ -1,11 +1,17 @@
 <template>
-  <div :id="demo.demoId" class="ti-b-a ti-br-sm ti-wp100" :class="currDemoId === demo.demoId ? 'b-a-success' : ''">
-    <div class="ti-px24 ti-py20">
-      <!-- DEMO 的标题 + 说明desc+  示例wcTag -->
-      <div class="ti-f-r ti-f-pos-between ti-f-box-end ti-pb20">
-        <div class="ti-f18 ti-cur-hand">{{ demo.name[langKey] }}</div>
-        <div>
-          <tiny-tooltip placement="top" :append-to-body="false" :content="copyTip">
+  <div :id="demo.demoId" class="ti-br-sm ti-wp100" :class="currDemoId === demo.demoId ? 'b-a-success is-current' : ''">
+    <div class="demo-content">
+      <!-- DEMO 的标题 + 说明desc + 示例wcTag -->
+      <div class="ti-f-r ti-f-pos-between ti-f-box-end">
+        <div class="demo-title">{{ demo.name[langKey] }}</div>
+        <div class="demo-options">
+          <tiny-tooltip
+            placement="top"
+            effect="light"
+            popper-class="docs-tooltip"
+            :append-to-body="false"
+            :content="copyTip"
+          >
             <i
               :class="copyIcon"
               class="h:c-success ti-w16 ti-h16 ti-cur-hand"
@@ -15,6 +21,8 @@
           </tiny-tooltip>
           <tiny-tooltip
             placement="top"
+            effect="light"
+            popper-class="docs-tooltip"
             :append-to-body="false"
             :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
           >
@@ -24,12 +32,18 @@
               @click="toggleDemoCode(demo)"
             />
           </tiny-tooltip>
-          <tiny-tooltip placement="top" :append-to-body="false" :content="i18nByKey('playground')">
+          <tiny-tooltip
+            placement="top"
+            effect="light"
+            popper-class="docs-tooltip"
+            :append-to-body="false"
+            :content="i18nByKey('playground')"
+          >
             <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
           </tiny-tooltip>
         </div>
       </div>
-      <component :is="getDescMd(demo)" class="ti-mb16 ti-f14" />
+      <component :is="getDescMd(demo)" class="demo-desc markdown-body" />
 
       <div v-if="isMobileFirst" class="pc-demo-container">
         <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
@@ -46,13 +60,16 @@
       </div>
     </div>
     <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
-    <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless">
-      <div>
+    <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless demo-code">
+      <template v-if="files?.length">
         <tiny-tabs v-model="tabValue" class="code-tabs">
           <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
             <async-highlight :code="file.code"></async-highlight>
           </tiny-tab-item>
         </tiny-tabs>
+      </template>
+      <div v-else-if="files[0]">
+        <async-highlight :code="files[0].code"></async-highlight>
       </div>
     </div>
   </div>
@@ -63,7 +80,7 @@ import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, wat
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, appData, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
-import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmpConfig'
+import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'
@@ -74,7 +91,7 @@ const { apiModeState, apiModeFn } = useApiMode()
 
 export default defineComponent({
   name: 'Demo',
-  props: ['demo'],
+  props: ['demo', 'currDemoId'],
   components: {
     TinyTooltip,
     TinyTabs,
@@ -119,15 +136,6 @@ export default defineComponent({
       tabValue: 'tab0',
       cmpId: router.currentRoute.value.params.cmpId,
       langKey: getWord('zh-CN', 'en-US'),
-      currDemoId: computed(() => {
-        let hash = router.currentRoute.value.hash?.slice(1)
-
-        // 兼容/#hashName这种模式
-        if (hash.includes('/')) {
-          hash = hash.slice(1)
-        }
-        return hash
-      }),
       copyTip: i18nByKey('copyCode'),
       copyIcon: 'i-ti-copy'
     })
@@ -184,9 +192,9 @@ export default defineComponent({
         const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[1]
         const openModeQuery = open ? '' : '&openMode=preview'
         // TODO: 目前mf只有Options写法，后续再放开compositon
-        const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${
-          demo.codeFiles[0]
-        }&apiMode=Options&mode=${templateModeState.mode}&theme=${tinyTheme}${openModeQuery}`
+        const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${demo.codeFiles[0]}&apiMode=${
+          isMobileFirst.value ? 'Options' : apiModeState.apiMode
+        }&mode=${templateModeState.mode}&theme=${tinyTheme}${openModeQuery}`
 
         if (open) {
           window.open(url)
@@ -238,10 +246,14 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+.is-current {
+  padding: var(--ti-common-space-5x) var(--ti-common-space-6x);
+}
+
 .demo-desc {
   font-size: 16px;
   line-height: 1.7em;
-  margin: 12px 0;
+  margin: var(--ti-common-space-2x) 0 var(--ti-common-space-6x);
 
   :deep(code) {
     color: #476582;
@@ -297,12 +309,42 @@ export default defineComponent({
 .pc-demo-container {
   display: flex;
   flex-direction: column;
+  background: #fafafa;
+  padding: var(--ti-common-space-8x) var(--ti-common-space-6x) calc(var(--ti-common-space-base) * 12);
 
   .pc-demo {
     flex: 1;
   }
 }
 
+.demo-content {
+  position: relative;
+
+  .demo-title {
+    font-size: 20px;
+    color: #191919;
+    font-weight: bold;
+  }
+
+  .demo-desc {
+    margin-bottom: var(--ti-common-size-4x);
+    font-size: var(--ti-common-font-size-1);
+    color: #595959;
+    line-height: 30px;
+  }
+
+  .demo-options {
+    height: var(--ti-common-size-4x);
+    position: absolute;
+    right: var(--ti-common-space-8x);
+    bottom: var(--ti-common-space-4x);
+  }
+}
+
+.demo-code {
+  border: 1px solid #efeff4;
+}
+
 .phone-container {
   margin: auto;
   width: 395px;
@@ -334,6 +376,5 @@ export default defineComponent({
 .code-preview-box {
   overflow: auto;
   padding: 20px 5px;
-  background-color: #f5f6f8;
 }
 </style>
diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue
new file mode 100644
index 0000000000..b4703b1587
--- /dev/null
+++ b/examples/sites/src/views/components/float-settings.vue
@@ -0,0 +1,385 @@
+<template>
+  <div
+    ref="floatSettings"
+    :class="['float-settings', { 'float-settings--aside': isSettingsAside }]"
+    :style="settingsStyle"
+  >
+    <!-- 切换主题样式 -->
+    <tiny-dropdown trigger="click" :show-icon="false" @visible-change="(visible) => toggleMenuShow(visible, 'theme')">
+      <tiny-tooltip
+        :content="i18nByKey('changeTheme')"
+        :placement="isSettingsAside ? 'left' : 'right'"
+        popper-class="docs-tooltip"
+        effect="light"
+      >
+        <div class="settings-btn theme-change-button">
+          <theme-settings-icon
+            :class="['settings-icon theme-settings-icon', { 'is-active': showThemeMenu }]"
+          ></theme-settings-icon>
+        </div>
+      </tiny-tooltip>
+      <template #dropdown>
+        <tiny-dropdown-menu popper-class="opt-menu theme-settings-menu">
+          <div v-for="(item, index) in themeData" :key="index" class="theme-option-list">
+            <tiny-button
+              ghost
+              :class="['theme-option', { 'is-active': item.value === currentThemeKey }]"
+              @click="themeItemClick(item)"
+              >{{ item.text }}</tiny-button
+            >
+          </div>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <!-- demo风格设置 -->
+    <tiny-dropdown
+      v-if="!templateModeState.isSaas"
+      trigger="click"
+      :show-icon="false"
+      @visible-change="(visible) => toggleMenuShow(visible, 'style')"
+    >
+      <tiny-tooltip
+        :content="i18nByKey('changeApiType')"
+        :placement="isSettingsAside ? 'left' : 'right'"
+        popper-class="docs-tooltip"
+        effect="light"
+      >
+        <div class="settings-btn style-settings-btn">
+          <style-settings-icon
+            :class="['settings-icon style-settings-icon', { 'is-active': showStyleMenu }]"
+          ></style-settings-icon>
+        </div>
+      </tiny-tooltip>
+      <template #dropdown>
+        <tiny-dropdown-menu popper-class="opt-menu style-settings-menu">
+          <div v-for="(item, index) in styleSettings" :key="index" class="style-settings-item">
+            <p class="style-settings-title">{{ item.title }}</p>
+            <tiny-radio-group
+              v-model="apiModeState[item.name]"
+              class="style-settings-options-group"
+              @change="onSettingsChange(item.name)"
+            >
+              <tiny-radio v-for="option in item.options" :key="option" :label="option.value">{{
+                option.text
+              }}</tiny-radio>
+            </tiny-radio-group>
+          </div>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+
+    <!-- 返回顶部 -->
+    <div v-show="showBackTop" @click="onBackTop">
+      <tiny-tooltip
+        :content="i18nByKey('backTop')"
+        :placement="isSettingsAside ? 'left' : 'right'"
+        popper-class="docs-tooltip"
+        effect="light"
+      >
+        <div class="settings-btn back-top-btn">
+          <icon-up-ward class="settings-icon"></icon-up-ward>
+        </div>
+      </tiny-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs, onMounted, onUnmounted, watch, nextTick, ref } from 'vue'
+import { Dropdown, DropdownMenu, Tooltip, Radio, RadioGroup, Button } from '@opentiny/vue'
+import { iconUpWard } from '@opentiny/vue-icon'
+import debounce from '@opentiny/vue-renderless/common/deps/debounce'
+import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
+import useTheme from '@/tools/useTheme'
+import { router } from '@/router'
+import useStyleSettings from '@/tools/useStyleSettings'
+import ThemeSettingsIcon from '@/assets/images/theme-settings.svg'
+import StyleSettingsIcon from '@/assets/images/style-settings.svg'
+
+export default defineComponent({
+  name: 'FloatSettings',
+  components: {
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyTooltip: Tooltip,
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup,
+    TinyButton: Button,
+    IconUpWard: iconUpWard(),
+    ThemeSettingsIcon,
+    StyleSettingsIcon
+  },
+  setup() {
+    const DEFAULT_BOTTOM_VAL = '10vh'
+    const { getThemeData, changeTheme, currentThemeKey } = useTheme()
+    const { apiModeState, apiModeFn } = useApiMode()
+    const { getStyleSettings } = useStyleSettings()
+    const { templateModeState } = useTemplateMode()
+    const floatSettings = ref(null)
+    const isPlus = import.meta.env.VITE_APP_MODE === 'plus'
+
+    const state = reactive({
+      themeData: [],
+      showThemeMenu: false,
+      showStyleMenu: false,
+      styleSettings: getStyleSettings(i18nByKey),
+      settingsStyle: {
+        bottom: DEFAULT_BOTTOM_VAL
+      },
+      showBackTop: false, // 是否显示返回顶部按钮
+      initBottomVal: null, // 初始底部偏移
+      isSettingsAside: false // 是否贴边
+    })
+
+    if (isPlus) {
+      state.styleSettings = state.styleSettings.filter((item) => item.defaultValue === 'default')
+      apiModeState.apiMode = 'Options'
+    }
+
+    const funcs = {
+      onBackTop() {
+        document.getElementById('doc-layout').scrollTo({
+          top: 0,
+          left: 0,
+          behavior: 'smooth'
+        })
+      },
+      onSettingsChange(modeType) {
+        switch (modeType) {
+          case 'apiMode': {
+            apiModeFn.changeApiMode(apiModeState[modeType])
+            break
+          }
+          case 'demoMode': {
+            apiModeFn.changeDemoMode(apiModeState[modeType])
+            break
+          }
+        }
+      },
+
+      // 主题切换功能
+      themeItemClick(node) {
+        const val = node?.value || 'tiny-smb-theme'
+        changeTheme(val)
+      },
+
+      toggleMenuShow(visible, type) {
+        if (type === 'theme') {
+          state.showThemeMenu = visible
+        } else if (type === 'style') {
+          state.showStyleMenu = visible
+        }
+      }
+    }
+
+    const getThemeOptions = () => {
+      const themeData = getThemeData().map((item) => ({
+        value: item.value[0],
+        text: item.label
+      }))
+      state.themeData = themeData
+    }
+
+    const setScrollListener = () => {
+      nextTick(() => {
+        const docLayout = document.getElementById('doc-layout')
+        const nav = document.querySelector('.nav')
+        if (docLayout) {
+          docLayout.onscroll = debounce(100, false, () => {
+            const {
+              scrollTop: layoutScrollTop,
+              scrollHeight: layoutScrollHeight,
+              clientHeight: layoutHeight
+            } = docLayout
+            const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
+            const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
+            const footerTop = footer.getBoundingClientRect().top
+            const navHeight = nav?.clientHeight || 0
+            const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
+            const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
+
+            state.showBackTop = layoutScrollTop > 500
+            state.showSettings = footerTop - navHeight - headerHeight > 220
+
+            if (!state.initBottomVal) {
+              state.initBottomVal = currSettingsBottom
+            }
+            if (footerVisibleHeight > state.initBottomVal - 40) {
+              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
+            } else {
+              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
+            }
+          })
+        }
+      })
+    }
+
+    const removeScrollListener = () => {
+      const docLayout = document.getElementById('doc-layout') || {}
+      docLayout.onscroll = null
+    }
+
+    watch(
+      () => router.currentRoute.value,
+      (newVal) => {
+        const { path } = newVal || {}
+        state.isSettingsAside = ['overview', 'docs'].find((i) => path.includes(i))
+      },
+      {
+        immediate: true
+      }
+    )
+
+    onMounted(() => {
+      getThemeOptions()
+      setScrollListener()
+    })
+
+    onUnmounted(() => {
+      removeScrollListener()
+    })
+
+    return {
+      ...toRefs(state),
+      ...funcs,
+      templateModeState,
+      i18nByKey,
+      apiModeState,
+      currentThemeKey,
+      floatSettings
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.float-settings {
+  position: fixed;
+  right: 200px;
+  height: 140px;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--ti-common-space-3x);
+  z-index: var(--docs-float-settings-zindex);
+  transition: all 0.3s linear;
+
+  &.float-settings--aside {
+    right: var(--ti-common-size-6x);
+  }
+
+  .tiny-dropdown__trigger .tiny-dropdown__title {
+    line-height: 1;
+    margin-right: 0;
+  }
+
+  .settings-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ti-common-size-9x);
+    height: var(--ti-common-size-9x);
+    margin-bottom: var(--ti-common-space-2x);
+    border: 1px solid var(--ti-common-color-line-dividing);
+    border-radius: var(--ti-common-space-3x);
+    background-color: var(--ti-common-color-bg-white-normal);
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
+
+      .settings-icon {
+        color: var(--ti-common-color-primary-normal);
+        fill: var(--ti-common-color-primary-normal);
+      }
+    }
+
+    &.style-settings-btn {
+      margin-bottom: var(--ti-common-space-6x);
+    }
+
+    &.back-top-btn {
+      margin-bottom: 0;
+    }
+
+    .settings-icon {
+      width: var(--ti-common-size-4x);
+      height: var(--ti-common-size-4x);
+      color: #595959;
+
+      &.is-active {
+        color: var(--ti-common-color-primary-normal);
+      }
+    }
+  }
+}
+
+.opt-menu {
+  width: 154px;
+  padding: var(--ti-common-size-3x) 0;
+  border-radius: var(--ti-common-space-3x);
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
+
+  &.theme-settings-menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &.style-settings-menu {
+    padding: 14px;
+
+    .style-settings-item {
+      padding-left: var(--ti-common-space-3x);
+
+      .style-settings-title {
+        margin-bottom: 2px;
+        font-size: var(--ti-common-font-size-base);
+        line-height: var(--ti-common-line-height-6);
+        font-weight: 600;
+      }
+
+      .style-settings-options-group {
+        padding-left: var(--ti-common-space-base);
+        margin-bottom: var(--ti-common-space-6);
+        display: flex;
+        flex-direction: column;
+
+        .tiny-radio .tiny-radio__label {
+          font-size: var(--ti-common-font-size-base);
+          line-height: var(--ti-common-line-height-6);
+        }
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+
+  .theme-option-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 154px;
+
+    .theme-option {
+      display: inline-block;
+      width: 126px;
+      border: none;
+      border-radius: var(--ti-common-space-2x);
+
+      &.is-active {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+}
+
+@media (max-width: 1279px) {
+  .float-settings {
+    right: var(--ti-common-space-3x);
+  }
+}
+</style>
diff --git a/examples/sites/src/views/docs/docs.vue b/examples/sites/src/views/docs/docs.vue
index ea7ac11814..738692d029 100644
--- a/examples/sites/src/views/docs/docs.vue
+++ b/examples/sites/src/views/docs/docs.vue
@@ -1,20 +1,18 @@
 <template>
-  <div>
-    <div class="ti-f-r ti-pt48 ti-pl48 ti-pr48">
-      <component id="doc_wrap" :is="docCmp" class="ti-w0 ti-fi-1" />
-      <!-- 目录列表 TODO: 需要锚点组件配置整改，处理id中的特殊字符 -->
-      <!-- <div v-if="anchorLinks.length > 0" class="docs-page-anchor catalog w128 sticky top32 ml24">
+  <div class="ti-f-r ti-pt48 ti-pl48 ti-pr48 docs-container">
+    <component id="doc_wrap" :is="docCmp" class="ti-w0 ti-fi-1" />
+    <!-- 目录列表 TODO: 需要锚点组件配置整改，处理id中的特殊字符 -->
+    <!-- <div v-if="anchorLinks.length > 0" class="docs-page-anchor catalog w128 sticky top32 ml24">
         <tiny-anchor :is-affix="true" :links="anchorLinks"> </tiny-anchor>
       </div> -->
-    </div>
-    <div id="footer"></div>
   </div>
+  <div id="footer"></div>
 </template>
 
 <script setup>
-import { ref, nextTick, watch, onMounted, computed, shallowRef } from 'vue'
+import { ref, nextTick, watch, onMounted, shallowRef } from 'vue'
 import { getWord } from '@/tools'
-import docMDs, { transformIdSelector } from './docConfig.js'
+import docMDs from './docConfig.js'
 import { router } from '@/router.js'
 
 const isOpen = import.meta.env.VITE_BUILD_TARGET === 'open'
@@ -53,17 +51,22 @@ onMounted(() => {
   const common = new window.TDCommon(['#footer'], {})
   common.renderFooter()
 })
-
-const anchorLinks = computed(() => {
-  return catalog.value.map((cat) => ({
-    key: cat.id,
-    title: cat.text,
-    link: `#${transformIdSelector(cat.id)}`
-  }))
-})
 </script>
 
 <style lang="less">
+.docs-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 120px;
+
+  #doc_wrap {
+    flex: 1;
+    min-width: var(--layout-content-main-min-width);
+    max-width: var(--layout-content-main-max-width);
+  }
+}
+
 .docs-page-anchor {
   .tiny-anchor__affix {
     overflow-y: auto;
@@ -80,6 +83,7 @@ const anchorLinks = computed(() => {
     }
   }
 }
+
 .catalog {
   height: calc(100vh - 150px);
   overflow: hidden;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index b93ed39cdd..d34dbbff46 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -1,70 +1,7 @@
 <template>
   <div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
-    <!-- 切换语言 -->
-    <div class="lang-box">
-      <tiny-tooltip :content="i18nByKey('changeLanguage')" placement="left">
-        <span class="lang-btn" @click="changeLanguage">{{ i18nByKey('language') }}</span>
-      </tiny-tooltip>
-    </div>
-    <!-- 切換主题样式 -->
-    <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click" :show-icon="false">
-      <tiny-tooltip :content="i18nByKey('changeTheme')" placement="left">
-        <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
-      </tiny-tooltip>
-      <template #dropdown>
-        <tiny-dropdown-menu :options="themeData">
-          <tiny-dropdown-item
-            v-for="(item, index) in themeData"
-            :key="index"
-            @click="themeItemClick(item)"
-            :class="{ 'is-actived': item.value === currentThemeKey }"
-          >
-            {{ item.label }}
-          </tiny-dropdown-item>
-        </tiny-dropdown-menu>
-      </template>
-    </tiny-dropdown>
     <div class="content-layout ti-fi-1" :has-sider="!isFrame">
       <div id="layoutSider" class="layout-sider" :class="{ 'saas-border': templateModeState.isSaas }" v-if="!isFrame">
-        <div v-show="!isCollapsed" class="api-type-box" :class="{ 'is-collapsed': isCollapsed }">
-          <div class="api-type">
-            <div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Options' }">
-              {{ getWord('选项式', 'Options') }}
-            </div>
-            <tiny-switch
-              class="api-switch"
-              true-value="Composition"
-              false-value="Options"
-              @change="apiModeFn.changeApiMode"
-              v-model="apiModeState.apiMode"
-            ></tiny-switch>
-            <div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Composition' }">
-              {{ getWord('组合式', 'Composition') }}
-            </div>
-            <tiny-tooltip :content="i18nByKey('apiType')" placement="right">
-              <icon-help-circle></icon-help-circle>
-            </tiny-tooltip>
-          </div>
-
-          <div class="api-type">
-            <div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'single' }">
-              {{ getWord('单示例', 'Single') }}
-            </div>
-            <tiny-switch
-              class="api-switch"
-              true-value="default"
-              false-value="single"
-              @change="apiModeFn.changeDemoMode"
-              v-model="apiModeState.demoMode"
-            ></tiny-switch>
-            <div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'default' }">
-              {{ getWord('多示例', 'Multiple') }}
-            </div>
-            <tiny-tooltip :content="getWord('切换demo的预览模式', 'Change demo preview mode')" placement="right">
-              <icon-help-circle></icon-help-circle>
-            </tiny-tooltip>
-          </div>
-        </div>
         <tiny-tree-menu
           ref="treeMenuRef"
           class="main-menu"
@@ -80,8 +17,14 @@
           <template #default="{ data }">
             <div class="node-name-container">
               <tiny-tag v-if="data?.mode?.includes('mobile-first')" effect="plain" class="absolute-tag">多端</tiny-tag>
+              <!-- 分类图标 -->
+              <component
+                v-if="data.type === 'overview' || data.children"
+                :is="menuIcons[data.key]"
+                class="menu-type-icon"
+              ></component>
               <span class="node-name-label">{{ data.label }}</span>
-              <tiny-tag v-if="data.mark?.text" class="node-float-tip" effect="dark" :type="data.mark?.type">
+              <tiny-tag v-if="data.mark?.text" class="node-float-tip" effect="light" :type="data.mark?.type">
                 {{ data.mark.text }}
               </tiny-tag>
             </div>
@@ -98,39 +41,42 @@
         <router-view />
       </div>
     </div>
+
+    <float-settings></float-settings>
   </div>
 </template>
 
 <script>
 import { useRoute } from 'vue-router'
 import { defineComponent, reactive, computed, toRefs, onMounted, onUnmounted } from 'vue'
-import { Switch, TreeMenu, Dropdown, DropdownMenu, DropdownItem, Tooltip, Tag } from '@opentiny/vue'
-import { iconHelpCircle } from '@opentiny/vue-icon'
-import { genMenus } from '@/menus.jsx'
+import { TreeMenu, Dropdown, DropdownMenu, Tooltip, Tag, Radio, RadioGroup, Button } from '@opentiny/vue'
+import { genMenus, getMenuIcons } from '@/menus.jsx'
 import { router } from '@/router.js'
 import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
-import themeSvg from '@/assets/images/theme.svg?url'
 import useTheme from '@/tools/useTheme'
+import FloatSettings from '@/views/components/float-settings'
 
 export default defineComponent({
   name: 'LayoutVue',
   components: {
-    TinySwitch: Switch,
     TinyTreeMenu: TreeMenu,
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
     TinyTooltip: Tooltip,
     TinyTag: Tag,
-    IconHelpCircle: iconHelpCircle()
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup,
+    TinyButton: Button,
+    FloatSettings
   },
   props: [],
   setup() {
-    const { getThemeData, changeTheme, currentThemeKey, defaultTheme } = useTheme()
+    const { defaultTheme } = useTheme()
     const { apiModeState, apiModeFn } = useApiMode()
     const { templateModeState } = useTemplateMode()
-    let state = reactive({
+    const state = reactive({
       menuOptions: genMenus(),
+      menuIcons: {},
       hasHeader: true, // Header，当嵌入think时，无头。 所以预留变量
       isFrame: computed(() => router.currentRoute.value.meta?.iframe),
       contentRef: null,
@@ -164,21 +110,15 @@ export default defineComponent({
         router.push(getTo('components/', menu.key))
       }
     }
+
     const collapseChange = (isCollapsed) => {
       state.isCollapsed = isCollapsed
     }
-    let routerCbDestory = null
+    let routerCbDestroy = null
 
-    // 主题切换功能
-    const themeItemClick = (node) => {
-      const val = node?.value || 'tiny-infinity-theme'
-
-      changeTheme(val)
-    }
-
-    onMounted(() => {
+    onMounted(async () => {
       // 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
-      routerCbDestory = router.afterEach((to) => {
+      routerCbDestroy = router.afterEach((to) => {
         if (to.hash) {
           const el = document.querySelector(to.hash)
           if (el) {
@@ -194,10 +134,12 @@ export default defineComponent({
         state.expandKeys = [cmpId]
         state.treeMenuRef.setCurrentKey(cmpId)
       }
+
+      state.menuIcons = await getMenuIcons()
     })
 
     onUnmounted(() => {
-      routerCbDestory()
+      routerCbDestroy()
     })
 
     return {
@@ -207,10 +149,6 @@ export default defineComponent({
       searchMenu,
       clickMenu,
       collapseChange,
-      themeData: getThemeData(),
-      themeItemClick,
-      currentThemeKey,
-      themeSvg,
       changeLanguage,
       apiModeState,
       apiModeFn,
@@ -225,53 +163,26 @@ export default defineComponent({
 <style lang="less">
 .content-layout {
   display: flex;
-  --layout-tree-menu-input-height: 40px;
-  --layout-api-mode-height: 106px;
+  --layout-tree-menu-input-height: var(--ti-common-space-8x);
+  --layout-content-main-min-width: 600px;
+  --layout-content-main-max-width: 1000px;
 }
 
-.theme-change-button {
-  position: fixed;
-  top: 135px;
-  right: 30px;
-  z-index: 1999;
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background-color: transparent;
-  img {
-    margin-right: calc(-1 * var(--ti-dropdown-trigger-title-margin-right));
-    display: block;
-    width: 26px;
-    height: 26px;
-  }
-  .tiny-svg {
-    display: none;
-  }
-  &:hover {
-    background-color: #fff;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
+.tiny-tooltip.tiny-tooltip__popper.is-light.docs-tooltip {
+  border: none;
+
+  .popper__arrow {
+    border: none;
   }
 }
 
-.lang-box {
-  position: fixed;
-  top: 80px;
-  right: 30px;
-  z-index: 1999;
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background-color: transparent;
+.theme-change-button {
+  &.tiny-dropdown .tiny-dropdown__trigger .tiny-dropdown__title {
+    margin-right: 0;
+    line-height: 1;
+  }
+
   &:hover {
-    background-color: #fff;
-    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 12%);
     cursor: pointer;
   }
   .lang-btn {
@@ -291,6 +202,65 @@ export default defineComponent({
 }
 
 .main-menu.tiny-tree-menu {
+  --ti-tree-menu-node-current-text-color: var(--ti-common-color-primary-normal);
+
+  height: 100%;
+  padding-top: 30px;
+  padding-left: var(--ti-common-space-10);
+
+  &::before {
+    display: none;
+  }
+
+  .tiny-tree {
+    padding-bottom: 30px;
+
+    .tiny-tree-node__wrapper {
+      padding-right: var(--ti-common-space-10);
+    }
+
+    .tiny-tree-node {
+      &.is-current > .tiny-tree-node__content,
+      .tiny-tree-node__content:hover {
+        border-radius: var(--ti-common-space-5x);
+      }
+
+      &.is-current {
+        > .tiny-tree-node__content .node-name-label {
+          font-weight: 600;
+        }
+
+        .menu-type-icon {
+          fill: var(--ti-common-color-primary-normal);
+        }
+      }
+    }
+
+    .node-float-tip {
+      border-radius: 0;
+    }
+  }
+
+  .tiny-tree-menu__toggle-button {
+    transform: translateX(100%) translateY(-50%);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    .tiny-svg {
+      margin-left: 0;
+    }
+  }
+
+  .tiny-input {
+    margin: 0 var(--ti-common-space-10) var(--ti-common-space-3x);
+    width: auto;
+
+    .tiny-input__inner {
+      width: 100%;
+      border: 1px solid var(--ti-tree-menu-border-color);
+    }
+  }
+
   .tiny-tree-node__content-box {
     min-width: 0;
   }
@@ -303,7 +273,6 @@ export default defineComponent({
     right: 4px;
     top: 12px;
   }
-  height: calc(100% - var(--layout-api-mode-height));
   .tiny-tree {
     height: calc(100% - var(--layout-tree-menu-input-height));
     overflow-y: auto;
@@ -313,7 +282,7 @@ export default defineComponent({
 
     .node-name-container {
       display: flex;
-      flex-direction: row;
+      align-items: center;
       flex-wrap: nowrap;
       gap: 6px;
 
@@ -324,6 +293,12 @@ export default defineComponent({
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
+      .menu-type-icon {
+        width: var(--ti-common-size-3x);
+        height: var(--ti-common-size-3x);
+        display: inline-block;
+      }
     }
   }
   & > .tiny-input .tiny-input__inner {
@@ -336,12 +311,14 @@ export default defineComponent({
 }
 
 #doc-layout {
-  overflow-y: auto;
+  width: 100%;
   height: calc(100vh - 60px);
+  overflow: hidden auto;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
+
 .api-type-box {
   overflow: hidden;
   border-bottom: 1px solid var(--ti-common-color-line-dividing);
@@ -377,12 +354,25 @@ export default defineComponent({
     }
   }
 }
+
 #layoutSider {
   background: #fff;
   height: calc(100vh - 60px);
+  border-right: 1px solid var(--ti-common-color-line-dividing);
+
   &.saas-border {
     border-right: 1px solid #ddd;
   }
+
+  .tiny-tree-menu .tiny-tree .tiny-tree-node.is-current > .tiny-tree-node__content .tiny-tree-node__content-left {
+    --ti-tree-node-content-current-bg-color: transparent;
+
+    border-radius: calc(var(--ti-tree-menu-node-height) * 0.5);
+
+    &::before {
+      display: none;
+    }
+  }
 }
 
 @media (max-width: 1023px) {
@@ -396,7 +386,7 @@ export default defineComponent({
   }
   #layoutSider.showMenu {
     display: block !important;
-    z-index: 9;
+    z-index: var(--docs-layout-sider-zindex);
   }
 }
 </style>
diff --git a/examples/sites/src/views/overview.vue b/examples/sites/src/views/overview.vue
index c0c9a791e0..5b5c4d60ba 100644
--- a/examples/sites/src/views/overview.vue
+++ b/examples/sites/src/views/overview.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="overview-layout ti-pt48">
+    <div class="overview-layout">
       <h1 class="ti-mb20 ti-f24 ti-fw-600">
         {{ i18nByKey('overview') }}
         <span class="ti-f18">({{ getTotalComponentsNum() }})</span>
@@ -22,8 +22,9 @@
         </template>
       </tiny-input>
       <!-- 组件列表 -->
-      <div v-if="searchMenus?.length === 0" class="text-center py20">
-        <img class="ti-h150 ti-w200 ti-my-20" :src="noDataSvg" />
+      <div v-if="searchMenus?.length === 0" class="text-center py60">
+        <img class="ti-h150 ti-w200" :src="noDataSvg" />
+        <p class="no-data-text">{{ i18nByKey('noData') }}</p>
       </div>
       <div v-for="(menu, index) in searchMenus" :label="menu" :key="index">
         <div class="ti-rel ti-mt25">
@@ -42,7 +43,9 @@
                 <img
                   class="ti-h125 ti-w125 inline-block"
                   :src="pubUrl(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
-                  :onerror="`this.src='${pubUrl(`@demos/overviewimage/dev.svg`)}'`"
+                  :onerror="`this.src='${pubUrl(
+                    `@demos/overviewimage/${cell.key.includes('chart') ? 'dev-chart' : 'dev'}.svg`
+                  )}'`"
                 />
                 <h2 class="ti-f16 overview-card-label">
                   {{ cell.name }}
@@ -117,8 +120,8 @@ export default defineComponent({
       state.searchMenus = searchMenus
     }
     const lang = getWord('zh-CN', 'en-US')
-    const { defaultThemeKey } = useTheme()
-    const { all: allPathParam, theme = defaultThemeKey } = useRoute().params
+    const { defaultTheme } = useTheme()
+    const { all: allPathParam, theme = defaultTheme } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''
     const debounceSearch = debounce(searchResultFn, 300)
 
@@ -139,10 +142,14 @@ export default defineComponent({
       getTotalComponentsNum: () => {
         let total = 0
         cmpMenus.forEach((cmpCategory) => {
-          if (cmpCategory.key === 'cmp_frame_style') {
-            total += 2
-          } else if (cmpCategory.key === 'cmp_table_components') {
+          if (cmpCategory.key === 'cmp-frame-style') {
+            // 需要减去色彩、字体、图标
+            total += cmpCategory.children.length - 3
+          } else if (cmpCategory.key === 'cmp-table-components') {
             total += 1
+          } else if (cmpCategory.key === 'cmp-chart-components') {
+            // 需要减去图表说明的4个文档
+            total += cmpCategory.children.length - 4
           } else {
             total += cmpCategory.children.length
           }
@@ -150,6 +157,7 @@ export default defineComponent({
         return total
       }
     }
+
     onMounted(() => {
       const common = new window.TDCommon(['#footer'], {})
       common.renderFooter()
@@ -161,9 +169,7 @@ export default defineComponent({
 
 <style lang="less">
 .overview-layout {
-  padding-left: 10%;
-  padding-right: 10%;
-  min-height: 100%;
+  padding: 48px 10% 10%;
 }
 
 .cell-title {
@@ -223,6 +229,11 @@ export default defineComponent({
   }
 }
 
+.no-data-text {
+  color: var(--ti-common-color-text-secondary);
+  margin-top: var(--ti-common-size-5x);
+}
+
 @media (max-width: 1279px) {
   .overview-card {
     gap: 2%;
diff --git a/examples/sites/vite.config.ts b/examples/sites/vite.config.ts
index 8c13cd2731..5b04ab836f 100644
--- a/examples/sites/vite.config.ts
+++ b/examples/sites/vite.config.ts
@@ -17,14 +17,17 @@ import tailwindCss from 'tailwindcss'
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd() + '/env', '')
   const isSaas = env.VITE_TINY_THEME === 'saas'
-  const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(`./demos/${env.VITE_APP_MODE}`)
+  const isPlus = env.VITE_APP_MODE === 'plus'
+  const demosPath = isPlus ? '../plusdocs/pc' : `./demos/${env.VITE_APP_MODE}`
+  const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis'
+  const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath)
   const copyTarget = [
     {
-      src: `./demos/${env.VITE_APP_MODE}/**`,
+      src: `${demosPath}/**`,
       dest: '@demos'
     },
     {
-      src: `./demos/apis/**`,
+      src: `${apisPath}/**`,
       dest: '@demos/apis'
     }
   ]
@@ -88,7 +91,7 @@ export default defineConfig((config) => {
       extensions: ['.js', '.ts', '.tsx', '.vue'],
       alias: {
         '@': path.resolve('src'),
-        '@demos': path.resolve(`./demos/${env.VITE_APP_MODE}`),
+        '@demos': path.resolve(`${demosPath}`),
         '@menu': menuPath,
         '@opentiny/vue-renderless/types': pathFromWorkspaceRoot('packages/renderless/types'),
         '@tiptap/vue': '@tiptap/vue-3',
@@ -108,7 +111,8 @@ export default defineConfig((config) => {
       __VUE_I18N_LEGACY_API__: true,
       __INTLIFY_PROD_DEVTOOLS__: false,
       __INTLIFY_JIT_COMPILATION__: false,
-      __INTLIFY_DROP_MESSAGE_COMPILER__: false
+      __INTLIFY_DROP_MESSAGE_COMPILER__: false,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
     }
   }
 
diff --git a/examples/vue3/playwright.config.js b/examples/vue3/playwright.config.js
index 97629bf760..06766bec78 100644
--- a/examples/vue3/playwright.config.js
+++ b/examples/vue3/playwright.config.js
@@ -18,7 +18,8 @@ export default Config({
         origin,
         localStorage: [
           { name: 'tiny-vue-api-mode', value: 'Composition' },
-          { name: 'tiny-vue-demo-mode', value: 'single' }
+          { name: 'tiny-vue-demo-mode', value: 'single' },
+          { name: 'tiny-e2e-test', value: 'true' }
         ]
       }
     ]
diff --git a/internals/cli/src/commands/build/build-runtime.ts b/internals/cli/src/commands/build/build-runtime.ts
index 6900bb4c4d..3cde7f8d07 100644
--- a/internals/cli/src/commands/build/build-runtime.ts
+++ b/internals/cli/src/commands/build/build-runtime.ts
@@ -191,6 +191,10 @@ function getEntryTasks() {
     {
       path: 'vue-icon/index.ts',
       libPath: 'tiny-vue-icon'
+    },
+    {
+      path: 'vue-directive/index.ts',
+      libPath: 'tiny-vue-directive'
     }
   ]
   return entry
diff --git a/internals/vite-plugin-template2jsx/package.json b/internals/vite-plugin-template2jsx/package.json
index b51e78852a..33599a0099 100644
--- a/internals/vite-plugin-template2jsx/package.json
+++ b/internals/vite-plugin-template2jsx/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "lodash-es": "^4.17.21",
     "fs-extra": "^11.2.0",
+    "vue": "2.6.14",
     "vue-template-compiler": "2.6.14",
     "html-dom-parser": "~5.0.8"
   },
diff --git a/packages/design/aurora/index.ts b/packages/design/aurora/index.ts
index 0bd3fb93ff..302b0354c0 100644
--- a/packages/design/aurora/index.ts
+++ b/packages/design/aurora/index.ts
@@ -10,8 +10,6 @@ import Switch from './src/switch'
 import Select from './src/select'
 import Loading from './src/loading'
 import Popover from './src/popover'
-import TimeLine from './src/time-line'
-import TimelineItem from './src/timeline-item'
 import Input from './src/input'
 import DateRange from './src/date-range'
 import Pager from './src/pager'
@@ -35,8 +33,6 @@ export default {
     Select,
     Popover,
     Loading,
-    TimeLine,
-    TimelineItem,
     Input,
     DateRange,
     Pager,
diff --git a/packages/design/aurora/src/time-line/index.ts b/packages/design/aurora/src/time-line/index.ts
deleted file mode 100644
index ed91d71864..0000000000
--- a/packages/design/aurora/src/time-line/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { format } from '@opentiny/vue-renderless/common/date'
-
-export default {
-  renderless: () => ({
-    getDate: (dateTime: string): { date: string; time: string } => {
-      return {
-        date: format(dateTime, 'yyyy/MM/dd'),
-        time: format(dateTime, 'hh:mm:ss')
-      }
-    }
-  })
-}
diff --git a/packages/design/aurora/src/timeline-item/index.ts b/packages/design/aurora/src/timeline-item/index.ts
deleted file mode 100644
index e43493c011..0000000000
--- a/packages/design/aurora/src/timeline-item/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { format } from '@opentiny/vue-renderless/common/date'
-
-export default {
-  renderless: () => {
-    return {
-      getDate: (dateTime: string): { date: string; time: string } => {
-        return {
-          date: format(dateTime, 'yyyy/MM/dd'),
-          time: format(dateTime, 'hh:mm:ss')
-        }
-      }
-    }
-  }
-}
diff --git a/packages/design/saas/index.ts b/packages/design/saas/index.ts
index 9f9d69046c..8e7de83270 100644
--- a/packages/design/saas/index.ts
+++ b/packages/design/saas/index.ts
@@ -10,8 +10,6 @@ import Grid from './src/grid'
 import Switch from './src/switch'
 import Select from './src/select'
 import Popover from './src/popover'
-import TimeLine from './src/time-line'
-import TimelineItem from './src/timeline-item'
 import Loading from './src/loading'
 import Input from './src/input'
 import DateRange from './src/date-range'
@@ -36,8 +34,6 @@ export default {
     Select,
     Popover,
     Loading,
-    TimeLine,
-    TimelineItem,
     Input,
     DateRange,
     Pager,
diff --git a/packages/design/saas/src/time-line/index.ts b/packages/design/saas/src/time-line/index.ts
deleted file mode 100644
index e43493c011..0000000000
--- a/packages/design/saas/src/time-line/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { format } from '@opentiny/vue-renderless/common/date'
-
-export default {
-  renderless: () => {
-    return {
-      getDate: (dateTime: string): { date: string; time: string } => {
-        return {
-          date: format(dateTime, 'yyyy/MM/dd'),
-          time: format(dateTime, 'hh:mm:ss')
-        }
-      }
-    }
-  }
-}
diff --git a/packages/design/saas/src/timeline-item/index.ts b/packages/design/saas/src/timeline-item/index.ts
deleted file mode 100644
index e43493c011..0000000000
--- a/packages/design/saas/src/timeline-item/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { format } from '@opentiny/vue-renderless/common/date'
-
-export default {
-  renderless: () => {
-    return {
-      getDate: (dateTime: string): { date: string; time: string } => {
-        return {
-          date: format(dateTime, 'yyyy/MM/dd'),
-          time: format(dateTime, 'hh:mm:ss')
-        }
-      }
-    }
-  }
-}
diff --git a/packages/fluent-editor/package.json b/packages/fluent-editor/package.json
index f296d8b65c..b39fbbc3fd 100644
--- a/packages/fluent-editor/package.json
+++ b/packages/fluent-editor/package.json
@@ -54,7 +54,7 @@
   "dependencies": {
     "highlight.js": "^10.2.0",
     "html2canvas": "^1.0.0-rc.7",
-    "quill": "2.0.0-dev.4",
+    "quill": "^2.0.0",
     "quill-delta": "^5.1.0"
   }
 }
\ No newline at end of file
diff --git a/packages/fluent-editor/src/assets/common.scss b/packages/fluent-editor/src/assets/common.scss
index 3b36d670ec..24035e7b06 100644
--- a/packages/fluent-editor/src/assets/common.scss
+++ b/packages/fluent-editor/src/assets/common.scss
@@ -11,8 +11,8 @@ $defaultFontSize: 14px;
 
 @mixin arrowIcon {
   height: 0;
-  width: 0;
-  margin-top: -2.5px;
+  width: 0 !important;
+  margin-top: -2.5px !important;
   border: 2.5px solid transparent;
   border-top: 3px solid #252b3a;
 }
@@ -21,7 +21,7 @@ $defaultFontSize: 14px;
   width: $width;
 
   .ql-picker-label::before {
-    @include ellipsis(40px);
+    @include ellipsis($width);
   }
 
   &.ql-expanded .ql-picker-label {
@@ -64,7 +64,7 @@ $defaultFontSize: 14px;
 @mixin fontSizeList {
   /* Set Dropdown font-size */
   .ql-size {
-    @include toolbarPicker('', 45px);
+    @include toolbarPicker('', 98px);
   }
 
   .ql-size span.ql-picker-options {
@@ -93,7 +93,7 @@ $defaultFontSize: 14px;
 @mixin fontFamilyList {
   /* Set dropdown font-families */
   .ql-font {
-    @include toolbarPicker('', 45px);
+    @include toolbarPicker('', 98px);
 
     span[data-value='arial']::before {
       font-family: arial, helvetica, sans-serif;
diff --git a/packages/fluent-editor/src/assets/font.scss b/packages/fluent-editor/src/assets/font.scss
index fe3afd2027..414a499711 100644
--- a/packages/fluent-editor/src/assets/font.scss
+++ b/packages/fluent-editor/src/assets/font.scss
@@ -2,7 +2,7 @@
 @import './common';
 .ql-formats {
   .ql-font.ql-picker {
-    width: 85px;
+    width: 108px;
     span[data-value='arial']::before {
       content: 'arial';
       font-family: arial, helvetica, sans-serif;
diff --git a/packages/fluent-editor/src/assets/size.scss b/packages/fluent-editor/src/assets/size.scss
index 704128c2eb..6b5b0baa7c 100644
--- a/packages/fluent-editor/src/assets/size.scss
+++ b/packages/fluent-editor/src/assets/size.scss
@@ -2,7 +2,7 @@
 @import './common';
 .ql-formats {
   .ql-size.ql-picker {
-    width: 70px;
+    width: 98px;
     span.ql-picker-label:before,
     .ql-picker-options > span.ql-picker-item::before {
       content: "Normal";
diff --git a/packages/fluent-editor/src/assets/toolbar.scss b/packages/fluent-editor/src/assets/toolbar.scss
new file mode 100644
index 0000000000..23fb34257c
--- /dev/null
+++ b/packages/fluent-editor/src/assets/toolbar.scss
@@ -0,0 +1,388 @@
+@import './common';
+
+$iconHeight: 18px; // 工具栏按钮高度
+$iconPadding: 7.5px; // 工具栏按钮左/右间距
+$splitPadding: 20px; // 分隔线左/右间距
+$arrowPadding: 10px; // 下拉框箭头左间距
+
+$smallIconWidth: 14px; // 下拉框按钮宽度
+$arrowWidth: 5px; // 下拉框箭头宽度
+
+// 模块：工具栏 toolbar
+@mixin toolbar {
+  .ql-toolbar {
+    position: relative;
+    border: solid 1px #adb0b8;
+    @include fontFamilyList;
+    @include fontSizeList;
+    @include lineHeightList;
+
+    &.toolbar-top {
+      border-bottom: 0;
+      border-radius: 2px 2px 0 0;
+    }
+
+    &.toolbar-bottom {
+      border-top: 0;
+    }
+
+    .ql-active,
+    .ql-picker-label.ql-active,
+    .ql-picker-label:hover,
+    .ql-picker-item.ql-selected,
+    .ql-picker-item:hover,
+    button.ql-active,
+    button:hover {
+      color: #5e7ce0;
+
+      .icon-triangle-down {
+        border-top-color: #5e7ce0;
+      }
+    }
+
+    .ql-picker-item:focus,
+    .ql-picker-options:focus {
+      outline: none;
+    }
+
+    button > i {
+      line-height: 18px;
+      font-size: 16px;
+    }
+
+    button {
+      outline: none;
+    }
+
+    .ql-block {
+      display: inline-block;
+      line-height: initial;
+      margin-right: $splitPadding - $iconPadding;
+      padding-right: $splitPadding - $iconPadding;
+      border-right: solid 1px #adb0b8;
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      button {
+        height: $iconHeight;
+        width: 16px;
+        padding: 0;
+      }
+
+      .ql-picker {
+        height: $iconHeight;
+        color: #252b3a;
+      }
+
+      .ql-picker-label {
+        padding: 0;
+      }
+
+      .ql-picker-label::before {
+        line-height: $iconHeight;
+      }
+
+      d-toolbar-item button {
+        margin-left: $iconPadding;
+        margin-right: $iconPadding;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .ql-formats {
+      margin-left: $iconPadding;
+      margin-right: $iconPadding;
+      font-size: 0; /* 防止出现幽灵空白节点，导致更多按钮图标与分隔线不对齐 */
+    }
+
+    .ql-picker.ql-header {
+      @include toolbarPicker('', 98px);
+    }
+
+    .ql-picker.ql-lineheight .ql-picker-item[data-label]:not([data-label=''])::before,
+    .ql-picker.ql-lineheight .ql-picker-label[data-label]:not([data-label=''])::before {
+      content: attr(data-label);
+    }
+
+    // 文件
+    input.ql-file[type='file'] {
+      display: none;
+    }
+  }
+
+  .ql-formats {
+    &.ql-color-container,
+    &.ql-bg-color-container,
+    &.ql-font-family-container {
+      margin-right: 0;
+    }
+
+    &.ql-color-container {
+      margin-left: 4px;
+    }
+
+    &.ql-align-container {
+      margin-right: 4px;
+    }
+  }
+
+  $colorGroup: #000000, #ffffff, #f3f6f8, #e3e5e9, #cacfd8, #959eb2, #5e6678, #f95f5b, #fce5e4, #ffc9c7, #ff8f8a, #fb564e, #cb160e, #900701,
+    #fecc55, #fff1d0, #fadf9e, #f2cd72, #edb83a, #be8c11, #7c5905, #3dcca6, #ccf7ec, #abf3e0, #46e3b9, #12c898, #0c9f78, #06664d, #5090ff,
+    #c7d9fa, #9cbffb, #659cfc, #387df4, #1457cd, #072c6e;
+
+  .ql-toolbar {
+    .ql-picker.ql-expanded {
+      .ql-picker-label {
+        color: inherit;
+        border-color: transparent !important;
+      }
+
+      .ql-picker-options {
+        background: #fff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+        border-radius: 1px;
+        border: none;
+        color: #252b3a;
+      }
+
+      &.ql-header,
+      &.ql-font,
+      &.ql-lineheight,
+      &.ql-size {
+        .ql-picker-options {
+          margin-left: -6px;
+          padding-left: 0;
+          padding-right: 0;
+
+          .ql-picker-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px 15px;
+
+            // 初始化设置下拉框所有选项都不勾选
+            &::after {
+              display: inline-block;
+              width: 16px;
+              height: 16px;
+              margin-left: 10px;
+              margin-top: -6px;
+              content: '';
+            }
+          }
+        }
+
+        // 根据选中的选项，勾选相应的项
+        $pickerGroup: 'undefined', '1', '2', '3',
+          // 标题下拉框
+          'songti',
+          'yahei', 'kaiti', 'heiti', 'lishu', 'mono', 'arial', 'arialblack', 'comic', 'impact', 'times',
+          // 字体下拉框
+          '12px',
+          '13px', '14px', '16px', '19px', '22px', '24px', '29px', '32px', '40px', '48px',
+          // 字号下拉框
+          '2.5',
+          '4', '5'; // 行距下拉框
+        @include pickerLabel($pickerGroup, length($pickerGroup));
+      }
+
+      &.ql-header .ql-picker-item[data-value='1']::after {
+        font-size: 2em;
+      }
+
+      &.ql-header .ql-picker-item[data-value='2']::after {
+        font-size: 1.5em;
+      }
+
+      &.ql-header .ql-picker-item[data-value='3']::after {
+        font-size: 1.17em;
+      }
+
+      &.ql-color,
+      &.ql-background {
+        @include pickerValue($colorGroup, length($colorGroup));
+      }
+
+      .ql-picker-item:hover {
+        color: #252b3a;
+        background-color: #f2f5fc;
+      }
+    }
+
+    .ql-picker-label {
+      outline: none;
+      border: 0;
+    }
+
+    // 颜色选择器
+    .ql-color-picker {
+      width: $smallIconWidth + $arrowPadding + $arrowWidth;
+      margin: 0 5px;
+
+      .ql-color-inner {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+
+        .icon-arrow-down {
+          margin-left: 6px;
+        }
+
+        i.icon-triangle-down {
+          height: 0;
+          width: 0;
+          margin-left: 6px;
+          margin-top: 3px;
+          border: 2.5px solid transparent;
+          border-top: 3px solid #252b3a;
+        }
+
+        .icon-down {
+          @include arrowIcon;
+
+          display: inline-block;
+          height: 16px;
+          margin-top: 1px;
+        }
+
+        .current-color-line {
+          position: absolute;
+          bottom: 0;
+          left: 1px;
+          border-width: 1px;
+          border-style: solid;
+          width: 14px;
+
+          &.color-line-background {
+            left: -1px;
+            width: 16px;
+          }
+        }
+      }
+      @include currentColorIndicator($colorGroup, length($colorGroup));
+
+      &:hover {
+        .icon-down {
+          border-top-color: #5e7ce0;
+        }
+
+        &.ql-picker.ql-expanded {
+          .ql-picker-label {
+            color: #5e7ce0
+          }
+        }
+      }
+
+      .ql-picker-label.ql-active {
+        .icon-down {
+          border-top-color: #5e7ce0;
+        }
+      }
+
+      .ql-picker-options {
+        width: 210px;
+        padding: 15px 20px;
+      }
+
+      .ql-picker-item {
+        width: 20px;
+        height: 20px;
+        margin: 0 5px 5px 0;
+        display: inline-flex;
+        align-items: center;
+        color: #fff;
+
+        &:hover {
+          color: #fff;
+        }
+
+        &:nth-child(7n + 7) {
+          margin-right: 0;
+        }
+
+        &:nth-last-child(-n + 7) {
+          margin-bottom: 0;
+        }
+      }
+
+      &.ql-expanded {
+        .ql-picker-item {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+
+          &[data-value='#ffffff'],
+          &[data-value='#f3f6f8'],
+          &[data-value='#fce5e4'],
+          &[data-value='#fff1d0'],
+          &[data-value='#ccf7ec'],
+          &[data-value='#c7d9fa'],
+          &[data-value='#e3e5e9'] {
+            color: #8a8e99;
+
+            &:hover {
+              color: #8a8e99;
+            }
+          }
+
+          &[data-value=''] {
+            position: relative;
+            background-color: #f5f5f5;
+            border: 1px solid #e9edfa;
+
+            &::after {
+              content: '';
+              display: block;
+              position: absolute;
+              top: 8px;
+              left: -3px;
+              width: 24px;
+              height: 0;
+              border-bottom: 2px solid #c7000b;
+              transform: rotate(45deg);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ql-formats {
+    button,
+    span.ql-picker-label {
+      &:hover,
+      &.ql-active {
+        @include toolbarSvgColor {
+          fill: #5e7ce0;
+        }
+        @include toolbarFontIconColor {
+          color: #5e7ce0;
+        }
+      }
+      @include toolbarSvgColor {
+        fill: #252b3a;
+      }
+      @include toolbarFontIconColor {
+        color: #252b3a;
+      }
+
+      &.ql-disabled {
+        @include toolbarSvgColor {
+          fill: #adb0b8;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/fluent-editor/src/config.ts b/packages/fluent-editor/src/config.ts
index 6deae3acd6..404c28948e 100644
--- a/packages/fluent-editor/src/config.ts
+++ b/packages/fluent-editor/src/config.ts
@@ -28,6 +28,7 @@ import {
   UNDERLINE_ICON,
   UNDO_ICON,
 } from './config/icons.config'
+import { isNullOrUndefined } from './config/editor.utils';
 
 import { EN_US } from './config/i18n/en-us'
 import { ZH_CN } from './config/i18n/zh-cn'
@@ -118,3 +119,72 @@ export const ICONS_CONFIG: { [key: string]: any } = {
   help: HELP_ICON,
   screenshot: SCREENSHOT_ICON,
 }
+
+export const TABLE_RIGHT_MENU_CONFIG = {
+  copyCells: {
+    text: LANG_CONF['copy-cells']
+  },
+  copyTable: {
+    text: LANG_CONF['copy-table']
+  },
+  cutCells: {
+    text: LANG_CONF['cut-cells']
+  },
+  emptyCells: {
+    text: LANG_CONF['empty-cells']
+  },
+  insertRowUp: {
+    text: LANG_CONF['insert-row-up']
+  },
+  insertRowDown: {
+    text: LANG_CONF['insert-row-down']
+  },
+  insertColumnLeft: {
+    text: LANG_CONF['insert-column-left']
+  },
+  insertColumnRight: {
+    text: LANG_CONF['insert-column-right']
+  },
+  mergeCells: {
+    text: LANG_CONF['merge-cells']
+  },
+  unmergeCells: {
+    text: LANG_CONF['unmerge-cells']
+  },
+  deleteRow: {
+    text: LANG_CONF['delete-row']
+  },
+  deleteColumn: {
+    text: LANG_CONF['delete-column']
+  },
+  deleteTable: {
+    text: LANG_CONF['delete-table']
+  }
+}
+
+// 触发上传
+export function inputFile(type, accept) {
+  const defaultMIMETypes = this.quill.uploader.options[type].join(', ')
+  const mimeTypes = accept || defaultMIMETypes
+  let fileInput = this.container.querySelector(`input.ql-${type}[type=file]`)
+  if (isNullOrUndefined(fileInput)) {
+    fileInput = document.createElement('input')
+    fileInput.classList.add(`ql-${type}`)
+    fileInput.setAttribute('type', 'file')
+    fileInput.setAttribute('accept', mimeTypes)
+    if (
+      this.quill.uploader.options.enableMultiUpload === true ||
+      (this.quill.uploader.options.enableMultiUpload.file && type === 'file') ||
+      (this.quill.uploader.options.enableMultiUpload.image && type === 'image')
+    ) {
+      fileInput.setAttribute('multiple', '')
+    }
+    fileInput.addEventListener('change', () => {
+      const range = this.quill.getSelection(true)
+      this.quill.uploader.upload(range, fileInput.files, type === 'file')
+      fileInput.value = ''
+    })
+    this.container.appendChild(fileInput)
+  }
+  fileInput.click()
+}
diff --git a/packages/fluent-editor/src/config/editor.utils.ts b/packages/fluent-editor/src/config/editor.utils.ts
index de220aac2b..6bd58619fd 100644
--- a/packages/fluent-editor/src/config/editor.utils.ts
+++ b/packages/fluent-editor/src/config/editor.utils.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill'
+import Quill from 'quill'
 
 const Delta = Quill.imports['delta']
 
diff --git a/packages/fluent-editor/src/config/icons.config.ts b/packages/fluent-editor/src/config/icons.config.ts
index c10a7a0f1c..61a1002dac 100644
--- a/packages/fluent-editor/src/config/icons.config.ts
+++ b/packages/fluent-editor/src/config/icons.config.ts
@@ -274,7 +274,7 @@ export const SCREENSHOT_ICON = `<svg width="16px" height="16px" viewBox="0 0 16
 </g>
 </svg>`
 
-export const CODE_ICON = `<i class="icon-code"></i>`
+export const CODE_ICON = `<svg t="1721956397010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4254" width="20" height="20"><path d="M438.4 849.1l222.7-646.7c0.2-0.5 0.3-1.1 0.4-1.6L438.4 849.1z" opacity=".224" p-id="4255"></path><path d="M661.2 168.7h-67.5c-3.4 0-6.5 2.2-7.6 5.4L354.7 846c-0.3 0.8-0.4 1.7-0.4 2.6 0 4.4 3.6 8 8 8h67.8c3.4 0 6.5-2.2 7.6-5.4l0.7-2.1 223.1-648.3 7.4-21.4c0.3-0.8 0.4-1.7 0.4-2.6-0.1-4.5-3.6-8.1-8.1-8.1zM954.6 502.1c-0.8-1-1.7-1.9-2.7-2.7l-219-171.3c-3.5-2.7-8.5-2.1-11.2 1.4-1.1 1.4-1.7 3.1-1.7 4.9v81.3c0 2.5 1.1 4.8 3.1 6.3l115 90-115 90c-1.9 1.5-3.1 3.8-3.1 6.3v81.3c0 4.4 3.6 8 8 8 1.8 0 3.5-0.6 4.9-1.7l219-171.3c6.9-5.4 8.2-15.5 2.7-22.5zM291.1 328.1l-219 171.3c-1 0.8-1.9 1.7-2.7 2.7-5.4 7-4.2 17 2.7 22.5l219 171.3c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8v-81.3c0-2.5-1.1-4.8-3.1-6.3l-115-90 115-90c1.9-1.5 3.1-3.8 3.1-6.3v-81.3c0-1.8-0.6-3.5-1.7-4.9-2.7-3.5-7.7-4.1-11.2-1.4z" p-id="4256"></path></svg>`
 
 export const MENTION_ICON = `<i class="icon-set-keyword"></i>`
 
@@ -282,11 +282,11 @@ export const QUICK_MENU_ICON = `<i class="icon-publish"></i>`
 
 export const SAVE_ICON = `<i class="icon-save"></i>`
 
-export const HELP_ICON = `<i class="icon-help"></i>`
+export const HELP_ICON = `<svg t="1721963829631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9764" width="20" height="20"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z" fill="#000000" p-id="9765"></path><path d="M512 746.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#000000" p-id="9766"></path><path d="M512 245.333333c-76.8 0-138.666667 61.866667-138.666667 138.666667 0 17.066667 14.933333 32 32 32s32-14.933333 32-32c0-40.533333 34.133333-74.666667 74.666667-74.666667s74.666667 34.133333 74.666667 74.666667c0 27.733333-53.333333 76.8-91.733334 100.266667-8.533333 6.4-14.933333 17.066667-14.933333 27.733333v106.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-89.6c34.133333-25.6 106.666667-83.2 106.666667-145.066667 0-76.8-61.866667-138.666667-138.666667-138.666667z" fill="#000000" p-id="9767"></path></svg>`
 
 export const SCROLL_TABLE_ICON = `<i class="icon-switch"></i>`
 
-export const GLOBAL_LINK_ICON = `<i class="icon-connect-code" style="color: #5170FF;"></i>`
+export const GLOBAL_LINK_ICON = `<svg t="1721963743677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8628" width="20" height="20"><path d="M713.130667 283.221333V228.352a9.159111 9.159111 0 0 0-9.130667-9.130667H265.102222a9.159111 9.159111 0 0 0-9.102222 9.130667v54.869333c0 5.034667 4.096 9.130667 9.130667 9.130667H704a9.159111 9.159111 0 0 0 9.130667-9.130667z m-448 100.579556a9.130667 9.130667 0 0 0-9.130667 9.130667v54.869333c0 5.006222 4.096 9.130667 9.130667 9.130667h210.289777a9.159111 9.159111 0 0 0 9.159112-9.130667v-54.869333a9.159111 9.159111 0 0 0-9.159112-9.130667H265.130667z m164.579555 516.551111H164.579556V95.800889h640v279.352889c0 5.034667 4.096 9.159111 9.130666 9.159111h64a9.159111 9.159111 0 0 0 9.130667-9.159111V50.090667c0-20.252444-16.327111-36.579556-36.551111-36.579556H118.840889c-20.195556 0-36.551111 16.327111-36.551111 36.579556v896c0 20.195556 16.327111 36.551111 36.551111 36.551111h310.869333a9.159111 9.159111 0 0 0 9.130667-9.130667v-64a9.159111 9.159111 0 0 0-9.130667-9.159111z" fill="#000000" fill-opacity=".85" p-id="8629"></path><path d="M837.859556 656.298667l-107.861334 186.794666-68.977778-39.822222 107.861334-186.794667 68.977778 39.822223z" fill="#000000" p-id="8630"></path><path d="M691.114667 514.844444a159.146667 159.146667 0 0 1 217.315555-58.225777 159.061333 159.061333 0 0 1 58.197334 217.315555l-55.637334 96.369778-68.977778-39.822222 55.637334-96.369778a79.416889 79.416889 0 1 0-137.557334-79.416889l-55.637333 96.369778-68.977778-39.822222 55.637334-96.369778V514.844444z m-28.558223 208.782223l-56.462222 97.792a79.416889 79.416889 0 0 0 137.557334 79.388444l56.462222-97.763555 68.977778 39.822222-56.462223 97.763555a159.061333 159.061333 0 1 1-275.484444-159.061333l56.433778-97.763556 68.977777 39.822223z" fill="#000000" p-id="8631"></path></svg>`
 
 export const FULLSCREEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1">
     <path fill="#333333" d="M64 384h96V160h224.2V64H64zM639.8 64v96H864v224h96V64zM864 864H639.8v96H960V639.61h-96zM160 639.61H64V960h320.2v-96H160z"/>
diff --git a/packages/fluent-editor/src/counter/index.ts b/packages/fluent-editor/src/counter/index.ts
index a97c7b7208..c098f7eba9 100644
--- a/packages/fluent-editor/src/counter/index.ts
+++ b/packages/fluent-editor/src/counter/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { LANG_CONF } from '../config';
 import { ICounterOption } from '../config/types';
 
diff --git a/packages/fluent-editor/src/custom-clipboard.ts b/packages/fluent-editor/src/custom-clipboard.ts
index b39f11b1a8..4ea20bcee9 100644
--- a/packages/fluent-editor/src/custom-clipboard.ts
+++ b/packages/fluent-editor/src/custom-clipboard.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill'
+import Quill from 'quill'
 import {
   ERROR_IMAGE_PLACEHOLDER_CN,
   ERROR_IMAGE_PLACEHOLDER_EN,
@@ -116,7 +116,7 @@ class CustomClipboard extends Clipboard {
     const files = Array.from(e.clipboardData.files || [])
     const msExcelCheck = /<meta.*?Microsoft Excel\s[\d].*?>/
 
-    if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption.imageUploadToServer && files.length > 0) {
+    if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption?.imageUploadToServer && files.length > 0) {
       this.quill.uploader.upload(range, files)
     } else {
       const msWordCheck1 =
diff --git a/packages/fluent-editor/src/custom-image/BlotFormatter.ts b/packages/fluent-editor/src/custom-image/BlotFormatter.ts
index ab54d5b76d..7b90991a16 100644
--- a/packages/fluent-editor/src/custom-image/BlotFormatter.ts
+++ b/packages/fluent-editor/src/custom-image/BlotFormatter.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import Action from './actions/Action';
 import ImageBlot, { ImageContainerBlot } from './image';
 import DefaultOptions, { Options } from './Options';
diff --git a/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts b/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts
index 62a999d72f..9c08837b51 100644
--- a/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts
+++ b/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import Action from './Action';
 
 export default class DeleteAction extends Action {
diff --git a/packages/fluent-editor/src/custom-image/image.ts b/packages/fluent-editor/src/custom-image/image.ts
index 05e6b7348c..7f761f445f 100644
--- a/packages/fluent-editor/src/custom-image/image.ts
+++ b/packages/fluent-editor/src/custom-image/image.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { isNullOrUndefined, sanitize } from '../config/editor.utils';
 const Embed = Quill.imports['blots/embed'];
 const Inline = Quill.imports['blots/inline'];
diff --git a/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts b/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts
index 120bc43886..805dc28dc3 100644
--- a/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts
+++ b/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts
@@ -40,7 +40,7 @@ export class CustomImageSpec extends ImageSpec {
     const target = event.target;
     const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay');
     if (target.nodeName === 'IMG' || isBlotFormatter) {
-      this.addImagePreviewOverlay(event);
+      // this.addImagePreviewOverlay(event);
     }
   }
 
diff --git a/packages/fluent-editor/src/custom-uploader.ts b/packages/fluent-editor/src/custom-uploader.ts
index 8e5e58670d..2f48358e95 100644
--- a/packages/fluent-editor/src/custom-uploader.ts
+++ b/packages/fluent-editor/src/custom-uploader.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill'
+import Quill from 'quill'
 
 import {
   FILE_UPLOADER_MIME_TYPES,
@@ -6,6 +6,7 @@ import {
 } from './config/editor.config'
 
 const Uploader = Quill.imports['modules/uploader']
+const Delta = Quill.imports['delta']
 
 class CustomUploader extends Uploader {
   quill
@@ -70,13 +71,91 @@ class CustomUploader extends Uploader {
     }
     return true
   }
+
+  // 处理上传文件
+  handleUploadFile(range, files, hasRejectedFile) {
+    const fileEnableMultiUpload = this.enableMultiUpload === true || this.enableMultiUpload['file']
+    const target = this.editorElem.parentElement.querySelector('.ql-file')
+
+    this.fileChange.emit({
+      operation: 'upload',
+      data: fileEnableMultiUpload ? { files } : { file: files[0] },
+      hasRejectedFile: hasRejectedFile,
+      callback: (res) => {
+        if (!res) {
+          return
+        }
+        if (fileEnableMultiUpload && Array.isArray(res)) {
+          res.forEach((value, index) => this.insertFileToEditor(range, files[index], value))
+        } else {
+          this.insertFileToEditor(range, files[0], res)
+        }
+      },
+    })
+  }
+
+  // 处理上传图片
+  handleUploadImage(range, { file, files }, hasRejectedImage) {
+    if (this.imageUploadToServer) {
+      const imageEnableMultiUpload = this.enableMultiUpload === true || this.enableMultiUpload['image']
+      const target = this.editorElem.parentElement.querySelector('.ql-image')
+
+      const result = {
+        file,
+        data: { files: [file] },
+        hasRejectedImage: hasRejectedImage,
+        callback: (res) => {
+          if (!res) {
+            return
+          }
+          if (imageEnableMultiUpload && Array.isArray(res)) {
+            res.forEach((value) => this.insertImageToEditor(range, value))
+          } else {
+            this.insertImageToEditor(range, res)
+          }
+        },
+      }
+      if (imageEnableMultiUpload) {
+        result['data'] = { files }
+      }
+      this.imageUpload.emit(result)
+    } else {
+      const promises = files.map((fileItem) => {
+        return new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = (e: any) => {
+            resolve(e.target.result)
+          }
+          reader.readAsDataURL(fileItem)
+        })
+      })
+      Promise.all(promises).then((images) => {
+        const update = images.reduce((delta: any, image) => {
+          return delta.insert({ image })
+        }, new Delta().retain(range.index).delete(range.length))
+
+        this.quill.updateContents(update, Quill.sources.USER)
+        this.quill.setSelection(range.index + images.length, Quill.sources.SILENT)
+      })
+    }
+  }
 }
 
-Uploader.DEFAULTS = {
+CustomUploader.DEFAULTS = {
   file: FILE_UPLOADER_MIME_TYPES,
   image: IMAGE_UPLOADER_MIME_TYPES,
   enableMultiUpload: false,
-  handler() {},
+  handler(range, files, fileFlags, rejectFlags) {
+    const fileArr = []
+    const imgArr = []
+    files.forEach((file, index) => (fileFlags[index] ? fileArr.push(file) : imgArr.push(file)))
+    if (this.quill.file && (fileArr.length || rejectFlags.file)) {
+      this.handleUploadFile(range, fileArr, rejectFlags.file)
+    }
+    if (imgArr.length || rejectFlags.image) {
+      this.handleUploadImage(range, { file: imgArr[0], files: imgArr }, rejectFlags.image)
+    }
+  },
 }
 
 export default CustomUploader
diff --git a/packages/fluent-editor/src/emoji/formats/emoji-blot.ts b/packages/fluent-editor/src/emoji/formats/emoji-blot.ts
index 37f622ab34..e5f984f8a1 100644
--- a/packages/fluent-editor/src/emoji/formats/emoji-blot.ts
+++ b/packages/fluent-editor/src/emoji/formats/emoji-blot.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import emojiMap from '../emoji-map';
 
 const Embed = Quill.imports['blots/embed'];
diff --git a/packages/fluent-editor/src/emoji/modules/emoji.ts b/packages/fluent-editor/src/emoji/modules/emoji.ts
index db4582f43b..24d2500bfb 100644
--- a/packages/fluent-editor/src/emoji/modules/emoji.ts
+++ b/packages/fluent-editor/src/emoji/modules/emoji.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import emojiList from '../emoji-list';
 
 const Module = Quill.imports['core/module'];
diff --git a/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts b/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts
index 64501eb8d5..74b7f478ba 100644
--- a/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts
+++ b/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { EMOJI_SPRITE as emojiSprite } from '../../config/base64-image';
 import emojiList from '../emoji-list';
 
diff --git a/packages/fluent-editor/src/file/formats/file.ts b/packages/fluent-editor/src/file/formats/file.ts
index d79c7da674..f7a0aca19b 100644
--- a/packages/fluent-editor/src/file/formats/file.ts
+++ b/packages/fluent-editor/src/file/formats/file.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { sanitize } from '../../config/editor.utils';
 
 const Embed = Quill.imports['blots/embed'];
diff --git a/packages/fluent-editor/src/file/index.ts b/packages/fluent-editor/src/file/index.ts
index 19ff11a1ed..1cc3917f8b 100644
--- a/packages/fluent-editor/src/file/index.ts
+++ b/packages/fluent-editor/src/file/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import File from './formats/file';
 import FileBar from './modules/file-bar';
 
diff --git a/packages/fluent-editor/src/file/modules/file-bar.ts b/packages/fluent-editor/src/file/modules/file-bar.ts
index 10919658eb..fdc2b6b4fe 100644
--- a/packages/fluent-editor/src/file/modules/file-bar.ts
+++ b/packages/fluent-editor/src/file/modules/file-bar.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill'
+import Quill from 'quill'
 // devui-internal api: utils\public-api.ts
 
 import { unshiftString } from '../../utils/method';
diff --git a/packages/fluent-editor/src/fluent-editor.ts b/packages/fluent-editor/src/fluent-editor.ts
index b96424e9ad..32935d0b91 100644
--- a/packages/fluent-editor/src/fluent-editor.ts
+++ b/packages/fluent-editor/src/fluent-editor.ts
@@ -1,8 +1,9 @@
 import Quill from 'quill'
-import { FONT_FAMILY_CONFIG, FONT_SIZE_CONFIG, ICONS_CONFIG } from './config'
+import { FONT_FAMILY_CONFIG, FONT_SIZE_CONFIG, ICONS_CONFIG, TABLE_RIGHT_MENU_CONFIG, inputFile } from './config'
 import Counter from './counter' // 字符统计
 import CustomClipboard from './custom-clipboard' // 粘贴板
 import CustomImage from './custom-image/BlotFormatter' // 图片
+import { CustomImageSpec } from './custom-image/specs/CustomImageSpec' // 图片拉伸模块
 import CustomUploader from './custom-uploader' // 上传
 // import Emoji from './emoji' // 表情
 import FileModule from './file' // 文件
@@ -33,6 +34,51 @@ const registerModules = function () {
     Icons[iconKey] = ICONS_CONFIG[iconKey]
   })
 
+  const SnowTheme = Quill.imports['themes/snow']
+  SnowTheme.DEFAULTS = {
+    modules: {
+      toolbar: {
+        handlers: {
+          ...SnowTheme.DEFAULTS.modules.toolbar.handlers,
+          undo: function() {
+            this.quill.history.undo()
+          },
+          redo: function() {
+            this.quill.history.redo()
+          },
+          'better-table': function() {
+            this.quill.getModule('better-table').insertTable(3, 3)
+          },
+          image: function () {
+            const accept = this.quill.options?.uploadOption?.imageAccept
+            inputFile.call(this, 'image', accept)
+          },
+        }
+      },
+      'better-table': {
+        operationMenu: {
+          items: TABLE_RIGHT_MENU_CONFIG,
+          color: true
+        }
+      },
+      image: {
+        specs: [CustomImageSpec],
+        overlay: {
+          style: {
+            border: '1px dashed rgb(68, 68, 68)',
+          },
+        },
+        align: {
+          icons: {
+            left: '<i class="icon-text-align-left"></i>',
+            center: '<i class="icon-text-align-center"></i>',
+            right: '<i class="icon-text-align-right"></i>',
+          },
+        },
+      },
+    }
+  }
+
   Quill.register(
     {
       'modules/toolbar': Toolbar,
diff --git a/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts b/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts
index fa331ed2f1..57feabf837 100644
--- a/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts
+++ b/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 
 const BlockEmbed = Quill.imports['blots/block/embed'];
 
diff --git a/packages/fluent-editor/src/global-link/formats/doc-link.ts b/packages/fluent-editor/src/global-link/formats/doc-link.ts
index 11b92cc20d..798001c414 100644
--- a/packages/fluent-editor/src/global-link/formats/doc-link.ts
+++ b/packages/fluent-editor/src/global-link/formats/doc-link.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { ON_DOC_LINK_REMOVE } from '../constants';
 
 const Embed = Quill.imports['blots/embed'];
diff --git a/packages/fluent-editor/src/global-link/formats/wiki-link.ts b/packages/fluent-editor/src/global-link/formats/wiki-link.ts
index 83d2fffffc..d6ae84c60b 100644
--- a/packages/fluent-editor/src/global-link/formats/wiki-link.ts
+++ b/packages/fluent-editor/src/global-link/formats/wiki-link.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { ON_WIKI_LINK_REMOVE } from '../constants';
 
 const Embed = Quill.imports['blots/embed'];
diff --git a/packages/fluent-editor/src/global-link/formats/work-item-link.ts b/packages/fluent-editor/src/global-link/formats/work-item-link.ts
index f359b9c7b2..8ca8fef085 100644
--- a/packages/fluent-editor/src/global-link/formats/work-item-link.ts
+++ b/packages/fluent-editor/src/global-link/formats/work-item-link.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { ON_WORK_ITEM_LINK_REMOVE } from '../constants';
 import { createTable } from '../utils/createTable';
 const BlockEmbed = Quill.imports['blots/block/embed'];
diff --git a/packages/fluent-editor/src/global-link/index.ts b/packages/fluent-editor/src/global-link/index.ts
index d2d386ea42..205a1d6ea1 100644
--- a/packages/fluent-editor/src/global-link/index.ts
+++ b/packages/fluent-editor/src/global-link/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { getEventComposedPath } from '../config/editor.utils';
 import CustomerWidgetLink from './formats/customer-widget-link';
 import DocumentLink from './formats/doc-link';
diff --git a/packages/fluent-editor/src/lineheight.ts b/packages/fluent-editor/src/lineheight.ts
index e4a1525964..5a1c27088b 100644
--- a/packages/fluent-editor/src/lineheight.ts
+++ b/packages/fluent-editor/src/lineheight.ts
@@ -1,6 +1,6 @@
 import Quill from 'quill'
 
-// import * as Quill from 'quill';
+// import Quill from 'quill';
 const Parchment = Quill.imports['parchment'];
 
 const LineHeightStyle = new Parchment.StyleAttributor('lineheight', 'line-height', {
diff --git a/packages/fluent-editor/src/link/formats/link.ts b/packages/fluent-editor/src/link/formats/link.ts
index d50ea5f782..1a48711f4c 100644
--- a/packages/fluent-editor/src/link/formats/link.ts
+++ b/packages/fluent-editor/src/link/formats/link.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { sanitize } from '../../config/editor.utils';
 const Inline = Quill.imports['blots/inline'];
 
diff --git a/packages/fluent-editor/src/link/index.ts b/packages/fluent-editor/src/link/index.ts
index c6eec4b81a..88baefba6c 100644
--- a/packages/fluent-editor/src/link/index.ts
+++ b/packages/fluent-editor/src/link/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import LinkBlot from './formats/link';
 import Tooltip from './modules/tooltip';
 const icons = Quill.imports['ui/icons'];
diff --git a/packages/fluent-editor/src/link/modules/tooltip.ts b/packages/fluent-editor/src/link/modules/tooltip.ts
index 2b7e265758..9e96a94aeb 100644
--- a/packages/fluent-editor/src/link/modules/tooltip.ts
+++ b/packages/fluent-editor/src/link/modules/tooltip.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { debounce } from '../../../src/utils/debounce';
 import { LANG_CONF } from '../../config/editor.config';
 import { isNullOrUndefined } from '../../config/editor.utils';
diff --git a/packages/fluent-editor/src/mention/Mention.ts b/packages/fluent-editor/src/mention/Mention.ts
index 22f30eb367..58adeda323 100644
--- a/packages/fluent-editor/src/mention/Mention.ts
+++ b/packages/fluent-editor/src/mention/Mention.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { isNullOrUndefined } from '../config/editor.utils';
 import { DEFAULT_MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants';
 import MentionLink from './MentionLink';
diff --git a/packages/fluent-editor/src/mention/MentionLink.ts b/packages/fluent-editor/src/mention/MentionLink.ts
index 41461323db..500b0a38ed 100644
--- a/packages/fluent-editor/src/mention/MentionLink.ts
+++ b/packages/fluent-editor/src/mention/MentionLink.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { DEFAULT_MENTION_CHAR, MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants';
 
 const Embed = Quill.imports['blots/embed'];
diff --git a/packages/fluent-editor/src/quick-menu/index.ts b/packages/fluent-editor/src/quick-menu/index.ts
index d85a0963d6..7110c049ab 100644
--- a/packages/fluent-editor/src/quick-menu/index.ts
+++ b/packages/fluent-editor/src/quick-menu/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 
 interface QuickMenuOptions {
   container: string;
diff --git a/packages/fluent-editor/src/screenshot/index.ts b/packages/fluent-editor/src/screenshot/index.ts
index 48cfc19177..375fb5534b 100644
--- a/packages/fluent-editor/src/screenshot/index.ts
+++ b/packages/fluent-editor/src/screenshot/index.ts
@@ -1,5 +1,5 @@
 
-import * as Quill from 'quill';
+import Quill from 'quill';
 import Html2Canvas from 'html2canvas';
 import { isPureIE } from '../config/editor.utils';
 
diff --git a/packages/fluent-editor/src/soft-break/index.ts b/packages/fluent-editor/src/soft-break/index.ts
index 5c8f9454f5..cc9e9adc0b 100644
--- a/packages/fluent-editor/src/soft-break/index.ts
+++ b/packages/fluent-editor/src/soft-break/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 
 const Embed = Quill.imports['blots/embed'];
 
diff --git a/packages/fluent-editor/src/strike/index.ts b/packages/fluent-editor/src/strike/index.ts
index 3f78d53ab5..9fd5645817 100644
--- a/packages/fluent-editor/src/strike/index.ts
+++ b/packages/fluent-editor/src/strike/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 const Inline = Quill.imports['blots/inline'];
 
 // @dynamic
diff --git a/packages/fluent-editor/src/styles.scss b/packages/fluent-editor/src/styles.scss
index b8aabba45c..310d3d9ad7 100644
--- a/packages/fluent-editor/src/styles.scss
+++ b/packages/fluent-editor/src/styles.scss
@@ -8,6 +8,7 @@
 
 @import './assets/common';
 @import './assets/mention';
+@import './assets/toolbar';
 @import './assets/editor';
 @import './assets/counter';
 @import './assets/size';
@@ -26,7 +27,7 @@
 @include mention;
 
 // 模块：工具栏 toolbar
-// @include toolbar;  会导致样式完全混乱
+@include toolbar;
 
 // @include lineHeightList;
 
diff --git a/packages/fluent-editor/src/syntax/index.ts b/packages/fluent-editor/src/syntax/index.ts
index a0bae7cf05..84839ada7a 100644
--- a/packages/fluent-editor/src/syntax/index.ts
+++ b/packages/fluent-editor/src/syntax/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import * as hljs from 'highlight.js';
 
 const Syntax = Quill.imports['modules/syntax'];
diff --git a/packages/fluent-editor/src/table/better-table.ts b/packages/fluent-editor/src/table/better-table.ts
index 4d419d63aa..a72d8e770d 100644
--- a/packages/fluent-editor/src/table/better-table.ts
+++ b/packages/fluent-editor/src/table/better-table.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import {
   getEventComposedPath,
   insideTable,
diff --git a/packages/fluent-editor/src/table/formats/header.ts b/packages/fluent-editor/src/table/formats/header.ts
index 21632716d6..80166c9f18 100644
--- a/packages/fluent-editor/src/table/formats/header.ts
+++ b/packages/fluent-editor/src/table/formats/header.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { isNullOrUndefined } from '../../config/editor.utils';
 import { CELL_ATTRIBUTES, CELL_IDENTITY_KEYS } from '../table-config';
 
diff --git a/packages/fluent-editor/src/table/formats/list.ts b/packages/fluent-editor/src/table/formats/list.ts
index f47899f3c7..6963864c73 100644
--- a/packages/fluent-editor/src/table/formats/list.ts
+++ b/packages/fluent-editor/src/table/formats/list.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { CELL_ATTRIBUTES, CELL_IDENTITY_KEYS } from '../table-config';
 
 const Block = Quill.imports['blots/block'];
diff --git a/packages/fluent-editor/src/table/formats/table.ts b/packages/fluent-editor/src/table/formats/table.ts
index 47eb2ee6cc..ba3612cd87 100644
--- a/packages/fluent-editor/src/table/formats/table.ts
+++ b/packages/fluent-editor/src/table/formats/table.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { compare } from '../../utils/method'
 import { isNullOrUndefined } from '../../config/editor.utils';
 import {
diff --git a/packages/fluent-editor/src/table/modules/table-column-tool.ts b/packages/fluent-editor/src/table/modules/table-column-tool.ts
index 5732616370..bbb179c0ef 100644
--- a/packages/fluent-editor/src/table/modules/table-column-tool.ts
+++ b/packages/fluent-editor/src/table/modules/table-column-tool.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { CELL_MIN_HEIGHT, CELL_MIN_WIDTH, COL_TOOL_HEIGHT, PRIMARY_COLOR, ROW_TOOL_WIDTH } from '../table-config';
 import { css } from '../utils';
 
diff --git a/packages/fluent-editor/src/table/modules/table-operation-menu.ts b/packages/fluent-editor/src/table/modules/table-operation-menu.ts
index 6fd101dd10..6772fb8fa0 100644
--- a/packages/fluent-editor/src/table/modules/table-operation-menu.ts
+++ b/packages/fluent-editor/src/table/modules/table-operation-menu.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { LANG_CONF } from '../../config/editor.config'
 import { elementRemove, arrayFrom, css, getRelativeRect } from '../utils';
 import {
@@ -42,13 +42,12 @@ const MENU_ITEMS_DEFAULT = {
       dom.remove();
     }
   },
-  // tofix
-  // cutCells: {
-  //   text: 'Cut Cells',
-  //   handler() {
-  //     this.onCopy('cut');
-  //   }
-  // },
+  cutCells: {
+    text: 'Cut Cells',
+    handler() {
+      this.onCopy('cut');
+    }
+  },
   emptyCells: {
     text: 'Empty Cells',
     handler() {
diff --git a/packages/fluent-editor/src/table/modules/table-selection.ts b/packages/fluent-editor/src/table/modules/table-selection.ts
index 04d0b887d9..d27f4d1769 100644
--- a/packages/fluent-editor/src/table/modules/table-selection.ts
+++ b/packages/fluent-editor/src/table/modules/table-selection.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { TableCell } from '../formats/table';
 import { ERROR_LIMIT, LINE_POSITIONS, PRIMARY_COLOR } from '../table-config';
 import { css, getRelativeRect } from '../utils';
diff --git a/packages/fluent-editor/src/table/utils/node-matchers.ts b/packages/fluent-editor/src/table/utils/node-matchers.ts
index 4cf731b270..f7020e3621 100644
--- a/packages/fluent-editor/src/table/utils/node-matchers.ts
+++ b/packages/fluent-editor/src/table/utils/node-matchers.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { omit, splitWithBreak } from '../../config/editor.utils';
 import { cellId as tableCellId, rowId as tableRowId, TableViewWrapper } from '../formats/table';
 import { CELL_MIN_WIDTH } from '../table-config';
diff --git a/packages/fluent-editor/src/toolbar/better-picker.ts b/packages/fluent-editor/src/toolbar/better-picker.ts
index 6e19722bd0..47deb65ff5 100644
--- a/packages/fluent-editor/src/toolbar/better-picker.ts
+++ b/packages/fluent-editor/src/toolbar/better-picker.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { isNullOrUndefined } from '../config/editor.utils';
 const SnowTheme = Quill.imports['themes/snow'];
 
diff --git a/packages/fluent-editor/src/video/index.ts b/packages/fluent-editor/src/video/index.ts
index 913de15556..02caf059a4 100644
--- a/packages/fluent-editor/src/video/index.ts
+++ b/packages/fluent-editor/src/video/index.ts
@@ -1,4 +1,4 @@
-import * as Quill from 'quill';
+import Quill from 'quill';
 import { sanitize } from '../config/editor.utils';
 
 
diff --git a/packages/modules.json b/packages/modules.json
index 9cea4eb5db..48bd502474 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -2788,6 +2788,31 @@
     "type": "template",
     "exclude": false
   },
+  "TimeLineNew": {
+    "path": "vue/src/time-line-new/index.ts",
+    "type": "component",
+    "exclude": false,
+    "mode": [
+      "mobile-first",
+      "mobile",
+      "pc"
+    ]
+  },
+  "TimeLineNewMobile": {
+    "path": "vue/src/time-line-new/src/mobile.vue",
+    "type": "template",
+    "exclude": false
+  },
+  "TimeLineNewMobileFirst": {
+    "path": "vue/src/time-line-new/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
+  "TimeLineNewPc": {
+    "path": "vue/src/time-line-new/src/pc.vue",
+    "type": "template",
+    "exclude": false
+  },
   "TimeLinePc": {
     "path": "vue/src/time-line/src/pc.vue",
     "type": "template",
diff --git a/packages/renderless/src/autocomplete/index.ts b/packages/renderless/src/autocomplete/index.ts
index c719d73d4a..9c2c9f5506 100644
--- a/packages/renderless/src/autocomplete/index.ts
+++ b/packages/renderless/src/autocomplete/index.ts
@@ -15,8 +15,10 @@ import type {
   IAutoCompleteState,
   IAutoCompleteApi,
   IAutoCompleteConstants,
+  IAutoCompleteRenderlessParams,
   IAutoCompleteRenderlessParamUtils
 } from '@/types'
+import { FORM_ITEM, FORM_EVENT } from '../common/form/const'
 
 export const getData =
   ({
@@ -60,17 +62,16 @@ export const handleChange =
     api,
     emit,
     state,
-    props
-  }: {
-    api: IAutoCompleteApi
-    emit: IAutoCompleteRenderlessParamUtils['emit']
-    state: IAutoCompleteState
-    props: IAutoCompleteProps
-  }) =>
+    props,
+    dispatch
+  }: Pick<IAutoCompleteRenderlessParams, 'api' | 'emit' | 'state' | 'props' | 'dispatch'>) =>
   (value) => {
     state.activated = true
     emit('update:modelValue', value)
     state.suggestionDisabled = false
+    if (state.validateEvent) {
+      dispatch(FORM_ITEM, FORM_EVENT.change, [value])
+    }
 
     if (!props.triggerOnFocus && !value) {
       state.suggestionDisabled = true
@@ -107,10 +108,13 @@ export const handleFocus =
   }
 
 export const handleBlur =
-  ({ emit, state }: { emit: IAutoCompleteRenderlessParamUtils['emit']; state: IAutoCompleteState }) =>
+  ({ emit, state, dispatch, props }: Pick<IAutoCompleteRenderlessParams, 'emit' | 'state' | 'dispatch' | 'props'>) =>
   (event) => {
     state.suggestionDisabled = true
     emit('blur', event)
+    if (state.validateEvent) {
+      dispatch(FORM_ITEM, FORM_EVENT.blur, [props.modelValue])
+    }
   }
 
 export const handleClear =
@@ -180,14 +184,7 @@ export const select =
   }
 
 export const highlight =
-  ({
-    constants,
-    vm,
-    state
-  }: {
-    constants: IAutoCompleteConstants
-    state: IAutoCompleteState
-  }) =>
+  ({ constants, vm, state }: { constants: IAutoCompleteConstants; state: IAutoCompleteState }) =>
   (index) => {
     if (!state.suggestionVisible || state.loading) {
       return
@@ -231,12 +228,7 @@ export const computedVisible = (state: IAutoCompleteState) => {
 }
 
 export const watchVisible =
-  ({
-    suggestionState,
-    vm
-  }: {
-    suggestionState: IAutoCompleteApi['suggestionState']
-  }) =>
+  ({ suggestionState, vm }: { suggestionState: IAutoCompleteApi['suggestionState'] }) =>
   (val) => {
     let $input = vm.$refs.input.getInput()
 
diff --git a/packages/renderless/src/autocomplete/vue.ts b/packages/renderless/src/autocomplete/vue.ts
index a1d4d740ad..b11debfe56 100644
--- a/packages/renderless/src/autocomplete/vue.ts
+++ b/packages/renderless/src/autocomplete/vue.ts
@@ -33,7 +33,7 @@ import type {
   IAutoCompleteProps,
   IAutoCompleteState,
   IAutoCompleteApi,
-  ISharedRenderlessFunctionParams,
+  IAutoCompleteRenderlessParams,
   IAutoCompleteRenderlessParamUtils
 } from '@/types'
 
@@ -58,12 +58,9 @@ const initState = ({
   reactive,
   $prefix,
   computed,
+  props,
   inject
-}: {
-  reactive: ISharedRenderlessFunctionParams<null>['reactive']
-  $prefix: string
-  computed: ISharedRenderlessFunctionParams<null>['computed']
-}) => {
+}: Pick<IAutoCompleteRenderlessParams, 'reactive' | '$prefix' | 'computed' | 'props' | 'inject'>) => {
   const state = reactive<IAutoCompleteState>({
     showAutoWidth: inject('showAutoWidth', null),
     popperElm: null,
@@ -73,7 +70,9 @@ const initState = ({
     highlightedIndex: -1,
     suggestionDisabled: false,
     id: $prefix + '-' + guid(),
-    suggestionVisible: computed(() => computedVisible(state))
+    suggestionVisible: computed(() => computedVisible(state)),
+    // props.validateEvent优先级大于inject，都没有配置默认为true
+    validateEvent: props.validateEvent ?? inject('validateEvent', true)
   })
 
   return state as IAutoCompleteState
@@ -86,7 +85,7 @@ export const initSuggestionState = ({
   popperElm,
   referenceElm
 }: {
-  reactive: ISharedRenderlessFunctionParams<null>['reactive']
+  reactive: IAutoCompleteRenderlessParams['reactive']
   parent: IAutoCompleteRenderlessParamUtils['parent']
   showPopper: Ref<boolean>
   popperElm: Ref<HTMLElement>
@@ -101,7 +100,19 @@ export const initSuggestionState = ({
   })
 }
 
-const initApi = ({ api, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants }) => {
+const initApi = ({
+  api,
+  state,
+  doDestroy,
+  suggestionState,
+  emit,
+  vm,
+  props,
+  updatePopper,
+  nextTick,
+  constants,
+  dispatch
+}) => {
   api.getData = getData({ props, state, updatePopper, nextTick })
 
   Object.assign(api, {
@@ -110,13 +121,13 @@ const initApi = ({ api, state, doDestroy, suggestionState, emit, vm, props, upda
     suggestionState,
     close: close(state),
     open: open(api),
-    handleBlur: handleBlur({ emit, state }),
+    handleBlur: handleBlur({ emit, state, dispatch, props }),
     mounted: mounted({ vm, state, suggestionState }),
     highlight: highlight({ constants, vm, state }),
     handleClear: handleClear({ emit, state }),
     select: select({ emit, nextTick, props, state }),
     watchVisible: watchVisible({ suggestionState, vm }),
-    handleChange: handleChange({ api, emit, state, props }),
+    handleChange: handleChange({ api, emit, state, props, dispatch }),
     handleFocus: handleFocus({ api, emit, props, state }),
     handleKeyEnter: handleKeyEnter({ api, emit, nextTick, props, state }),
     debouncedGetData: debounce(props.debounce, api.getData)
@@ -134,11 +145,11 @@ export const renderless = (
     toRefs,
     onDeactivated,
     inject
-  }: ISharedRenderlessFunctionParams<null>,
-  { $prefix, vm, parent, emit, constants, nextTick, slots }: IAutoCompleteRenderlessParamUtils
+  }: IAutoCompleteRenderlessParams,
+  { $prefix, vm, parent, emit, constants, nextTick, slots, dispatch }: IAutoCompleteRenderlessParamUtils
 ) => {
   const api: Partial<IAutoCompleteApi> = {}
-  const state = initState({ reactive, $prefix, computed, inject })
+  const state = initState({ reactive, $prefix, computed, props, inject })
 
   const { showPopper, popperElm, referenceElm, doDestroy, updatePopper } = userPopper({
     reactive,
@@ -155,7 +166,19 @@ export const renderless = (
 
   const suggestionState = initSuggestionState({ reactive, parent, showPopper, popperElm, referenceElm })
 
-  initApi({ api, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants })
+  initApi({
+    api,
+    state,
+    doDestroy,
+    suggestionState,
+    emit,
+    vm,
+    props,
+    updatePopper,
+    nextTick,
+    constants,
+    dispatch
+  })
 
   watch(() => state.suggestionVisible, (api as IAutoCompleteApi).watchVisible)
 
diff --git a/packages/renderless/src/collapse-item/index.ts b/packages/renderless/src/collapse-item/index.ts
index 1adbe0baf7..69eee763e7 100644
--- a/packages/renderless/src/collapse-item/index.ts
+++ b/packages/renderless/src/collapse-item/index.ts
@@ -44,6 +44,15 @@ export const handleHeaderClick =
     state.isClick = true
   }
 
+export const handleHeaderContainerClick =
+  ({ api }) =>
+  (e) => {
+    // Tiny新增 只有在点击头部容器的时候才触发handleHeaderClick逻辑，修复点击头部编辑按钮的时导致折叠面板自动关闭问题
+    if (e.target === e.currentTarget) {
+      api.handleHeaderClick()
+    }
+  }
+
 export const handleEnterClick =
   ({
     componentName,
diff --git a/packages/renderless/src/collapse-item/vue.ts b/packages/renderless/src/collapse-item/vue.ts
index c61462455c..df7ddcb347 100644
--- a/packages/renderless/src/collapse-item/vue.ts
+++ b/packages/renderless/src/collapse-item/vue.ts
@@ -17,10 +17,17 @@ import type {
   ISharedRenderlessParamHooks,
   ICollapseItemRenderlessParamUtils
 } from '@/types'
-import { handleFocus, handleEnterClick, handleHeaderClick } from './index'
+import { handleFocus, handleEnterClick, handleHeaderClick, handleHeaderContainerClick } from './index'
 import { guid } from '../common/string'
 
-export const api = ['state', 'isActive', 'handleFocus', 'handleEnterClick', 'handleHeaderClick']
+export const api = [
+  'state',
+  'isActive',
+  'handleFocus',
+  'handleEnterClick',
+  'handleHeaderClick',
+  'handleHeaderContainerClick'
+]
 
 export const renderless = (
   props: ICollapseItemProps,
@@ -48,5 +55,9 @@ export const renderless = (
     handleHeaderClick: handleHeaderClick({ componentName, dispatch, eventName, props, parent, state })
   }
 
+  Object.assign(api, {
+    handleHeaderContainerClick: handleHeaderContainerClick({ api })
+  })
+
   return api
 }
diff --git a/packages/renderless/src/color-picker/index.ts b/packages/renderless/src/color-picker/index.ts
index ec0ad48ff8..265b838ca4 100644
--- a/packages/renderless/src/color-picker/index.ts
+++ b/packages/renderless/src/color-picker/index.ts
@@ -1,41 +1,29 @@
-import type { IColorPickerRef as Ref } from '@/types'
-import type Color from './utils/color'
+import type { IColorSelectPanelRef } from '@/types'
 
-export const onCancel = (tmpColor: Color, triggerBg: Ref<string>, isShow: Ref<boolean>, pre: Ref<string>, emit) => {
-  return (color: Ref<Color>) => {
-    tmpColor.reset(color.value.getHex())
-    triggerBg.value = pre.value
-    isShow.value = false
-    emit('cancel')
-  }
+const updateModelValue = (val, emit) => {
+  emit('update:modelValue', val)
 }
 
-export const onConfirm = (triggerBg: Ref<string>, pre: Ref<string>, hex: Ref<string>, isShow: Ref<boolean>, emit) => {
-  return (color: string) => {
-    pre.value = triggerBg.value
-    triggerBg.value = color
-    hex.value = color
-    isShow.value = false
-    emit('confirm', color)
+export const toggleVisible = (isShow: IColorSelectPanelRef<boolean>) => {
+  return (val) => {
+    isShow.value = val
   }
 }
 
-export const onHueUpdate = (tmpColor: Color, triggerBg: Ref<string>) => {
-  return (h: number) => {
-    triggerBg.value = tmpColor.getHex()
-    tmpColor.set({ h })
+export const useEvent = (hex, emit, changeVisible) => {
+  const onConfirm = (val) => {
+    hex.value = val
+    updateModelValue(val, emit)
+    emit('confirm', val)
+    changeVisible(false)
   }
-}
-
-export const onSVUpdate = (tmpColor: Color, triggerBg: Ref<string>) => {
-  return ({ s, v }) => {
-    triggerBg.value = tmpColor.getHex()
-    tmpColor.set({ s, v })
+  const onCancel = (color: IColorSelectPanelRef<string>) => {
+    hex.value = color.value.hex
+    changeVisible(false)
+    emit('cancel')
   }
-}
-
-export const onColorUpdate = (triggerBg: Ref<string>) => {
-  return (color: Ref<Color>) => {
-    triggerBg.value = color.value.getHex()
+  return {
+    onConfirm,
+    onCancel
   }
 }
diff --git a/packages/renderless/src/color-picker/vue.ts b/packages/renderless/src/color-picker/vue.ts
index 2e7bbe6740..df87de1451 100644
--- a/packages/renderless/src/color-picker/vue.ts
+++ b/packages/renderless/src/color-picker/vue.ts
@@ -1,72 +1,50 @@
-import type { IColorSelectPanelRef as Ref } from '@/types'
-import Color from './utils/color'
-import { onConfirm, onCancel, onHueUpdate, onSVUpdate, onColorUpdate } from './index'
+import type { ISharedRenderlessParamHooks, ISharedRenderlessParamUtils } from '@/types'
+import type { Ref } from 'vue'
+import { toggleVisible, useEvent } from './index'
 
-export const api = [
-  'state',
-  'changeVisible',
-  'cursor',
-  'onColorUpdate',
-  'onHueUpdate',
-  'onSVUpdate',
-  'onConfirm',
-  'onCancel',
-  'onAlphaUpdate',
-  'alpha'
-]
+export const api = ['state', 'changeVisible', 'onConfirm', 'onCancel', 'onHueUpdate', 'onSVUpdate', 'onColorUpdate']
 
-export const renderless = (props, context, { emit }) => {
-  const { modelValue, visible, predefine, size, history } = context.toRefs(props)
-  const pre = context.ref(modelValue.value ?? 'transparent')
-  const triggerBg = context.ref(pre.value ?? 'transparent')
-  const tmpColor = new Color(triggerBg.value ?? 'transparent')
-  const hex = context.ref(modelValue.value ?? 'transparent')
-  const isShow = context.ref(visible?.value ?? false)
-  const changeVisible = (state: boolean) => {
-    isShow.value = state
-  }
-  const stack: Ref<string[]> = context.ref([...(history?.value ?? [])])
-  const predefineStack: Ref<string[]> = context.ref([...(predefine?.value ?? [])])
-  const state = context.reactive({
-    isShow,
-    hex,
-    triggerBg,
-    defaultValue: modelValue,
-    stack,
-    predefineStack,
-    size: size ?? ''
-  })
-  const api = {
-    state,
-    changeVisible,
-    onCancel: onCancel(tmpColor, triggerBg, isShow, pre, emit),
-    onConfirm: onConfirm(triggerBg, pre, hex, isShow, emit),
-    onHueUpdate: onHueUpdate(tmpColor, triggerBg),
-    onSVUpdate: onSVUpdate(tmpColor, triggerBg),
-    onColorUpdate: onColorUpdate(triggerBg)
-  }
-  context.watch(
+export const renderless = (props, ctx: ISharedRenderlessParamHooks, { emit }: ISharedRenderlessParamUtils) => {
+  const { modelValue, visible, predefine, size, history } = ctx.toRefs(props)
+  const isShow = ctx.ref(visible.value)
+  const hex = ctx.ref(modelValue.value ?? 'transparent')
+  const stack: Ref<string[]> = ctx.ref([...(history?.value ?? [])])
+  const predefineStack: Ref<string[]> = ctx.ref([...(predefine?.value ?? [])])
+  ctx.watch(
     predefine,
     (newPredefine: string[]) => {
       predefineStack.value = [...newPredefine]
     },
     { deep: true }
   )
-  context.watch(
+  ctx.watch(
     history,
     (newHistory: string[]) => {
       stack.value = [...newHistory]
     },
     { deep: true }
   )
-  context.watch(modelValue, (newValue) => {
-    pre.value = newValue
-    hex.value = newValue
-    state.hex = newValue
-    state.triggerBg = newValue
+  const state = ctx.reactive({
+    isShow,
+    hex,
+    triggerBg: ctx.ref(modelValue.value),
+    size,
+    stack,
+    predefineStack
+  })
+  ctx.watch(props, () => {
+    hex.value = props.modelValue
   })
-  context.watch(visible, (visible) => {
-    isShow.value = visible
+  ctx.watch(hex, () => {
+    emit('update:modelValue', hex.value)
   })
+  const changeVisible = toggleVisible(isShow)
+  const { onConfirm, onCancel } = useEvent(hex, emit, changeVisible)
+  const api = {
+    state,
+    changeVisible,
+    onConfirm,
+    onCancel
+  }
   return api
 }
diff --git a/packages/renderless/src/color-select-panel/index.ts b/packages/renderless/src/color-select-panel/index.ts
index feeea8c197..55dc7997d8 100644
--- a/packages/renderless/src/color-select-panel/index.ts
+++ b/packages/renderless/src/color-select-panel/index.ts
@@ -26,6 +26,7 @@ export const onConfirm = (
     }
     color.value.setPrevH(color.value.get('h'))
     emit('confirm', res.value)
+    emit('update:modelValue', res.value)
   }
 }
 
@@ -48,10 +49,12 @@ export const onCancel = (
       })
       emit('cancel', color)
     }
+    emit('update:modelValue', hex.value)
   }
 }
-export const onColorUpdate = (color: IColorSelectPanelRef<Color>, res: IColorSelectPanelRef<string>) => {
+export const onColorUpdate = (color: IColorSelectPanelRef<Color>, res: IColorSelectPanelRef<string>, emit) => {
   res.value = color.value.getHex()
+  emit('update:modelValue', res.value)
 }
 
 export const onHSVUpdate = (
@@ -63,23 +66,23 @@ export const onHSVUpdate = (
   return {
     onHueUpdate: (hue: number) => {
       color.value.set({ h: hue })
-      onColorUpdate(color, res)
+      onColorUpdate(color, res, emit)
       hex.value = color.value.getHex()
       emit('hue-update', hue)
     },
     onSVUpdate: ({ s, v }: { s: number; v: number }) => {
       hex.value = color.value.getHex()
-      onColorUpdate(color, res)
+      onColorUpdate(color, res, emit)
       emit('sv-update', { s, v })
     }
   }
 }
 
-export const onAlphaUpdate = (color: IColorSelectPanelRef<Color>, res: IColorSelectPanelRef<string>) => {
+export const onAlphaUpdate = (color: IColorSelectPanelRef<Color>, res: IColorSelectPanelRef<string>, emit) => {
   return {
     update: (alpha: number) => {
       color.value.set({ a: alpha })
-      onColorUpdate(color, res)
+      onColorUpdate(color, res, emit)
     }
   }
 }
diff --git a/packages/renderless/src/color-select-panel/vue.ts b/packages/renderless/src/color-select-panel/vue.ts
index aceedb9404..25b405a15c 100644
--- a/packages/renderless/src/color-select-panel/vue.ts
+++ b/packages/renderless/src/color-select-panel/vue.ts
@@ -60,7 +60,6 @@ export const renderless = (props, context, { emit }) => {
   )
 
   context.watch(modelValue, (newValue) => {
-    pre.value = res.value
     hex.value = newValue
     res.value = newValue
     color.value.reset(newValue)
@@ -70,7 +69,7 @@ export const renderless = (props, context, { emit }) => {
     isShow.value = visible
   })
   const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex, emit)
-  const { update } = onAlphaUpdate(color, res)
+  const { update } = onAlphaUpdate(color, res, emit)
   const api = {
     state,
     changeVisible,
diff --git a/packages/renderless/src/common/deps/tree-model/tree-store.ts b/packages/renderless/src/common/deps/tree-model/tree-store.ts
index b3e2add94a..c29512a33c 100644
--- a/packages/renderless/src/common/deps/tree-model/tree-store.ts
+++ b/packages/renderless/src/common/deps/tree-model/tree-store.ts
@@ -40,14 +40,29 @@ export default class TreeStore {
     }
   }
 
+  getMappingData(data) {
+    const props = this.props || {}
+    const mapping = {}
+
+    for (let key in props) {
+      if (hasOwn.call(props, key)) {
+        mapping[key] = data[props[key]]
+      }
+    }
+
+    return { ...data, ...mapping }
+  }
+
   filter(value) {
-    const { lazy, filterNodeMethod } = this
+    const { lazy, filterNodeMethod, getMappingData } = this
 
     const walkTree = (node) => {
       const childNodes = node.root ? node.root.childNodes : node.childNodes
 
       childNodes.forEach((child) => {
-        child.visible = filterNodeMethod.call(child, value, child.data, child)
+        // 筛选时需要添加mapping字段，但是不能修改用户的数据
+        const mappingData = getMappingData.call(this, child.data)
+        child.visible = filterNodeMethod.call(child, value, mappingData, child)
 
         walkTree(child)
       })
diff --git a/packages/renderless/src/common/form/const.ts b/packages/renderless/src/common/form/const.ts
new file mode 100644
index 0000000000..bc9e675983
--- /dev/null
+++ b/packages/renderless/src/common/form/const.ts
@@ -0,0 +1,6 @@
+export const FORM_ITEM = 'FormItem'
+
+export const FORM_EVENT = {
+  change: 'form.change',
+  blur: 'form.blur'
+}
diff --git a/packages/renderless/src/dropdown-item/mf.ts b/packages/renderless/src/dropdown-item/mf.ts
index 979d743ec5..cd878b9cbb 100644
--- a/packages/renderless/src/dropdown-item/mf.ts
+++ b/packages/renderless/src/dropdown-item/mf.ts
@@ -87,7 +87,7 @@ export const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   Object.assign(api, {
     dataStore,
     handleClick: handleClick({ dataStore, props, vm }),
-    mouseEnter: mouseEnter({ dataStore, vm }),
+    mouseEnter: mouseEnter({ dataStore, vm, props }),
     mouseLeave: mouseLeave({ dataStore })
   })
 
diff --git a/packages/renderless/src/fluent-editor/index.ts b/packages/renderless/src/fluent-editor/index.ts
index 22b9809586..a959d7cd05 100644
--- a/packages/renderless/src/fluent-editor/index.ts
+++ b/packages/renderless/src/fluent-editor/index.ts
@@ -6,7 +6,7 @@ import { on, off } from '../common/deps/dom'
 import PopupManager from '../common/deps/popup-manager'
 
 export const init =
-  ({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }) =>
+  ({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm, useBreakpoint, simpleToolbar }) =>
   () => {
     UploaderDfls.enableMultiUpload = { file: true, image: true }
     UploaderDfls.handler = api.uploaderDflsHandler
@@ -32,6 +32,11 @@ export const init =
 
     api.setToolbarTips()
 
+    const { current } = useBreakpoint()
+    if (current.value === 'default') {
+      state.innerOptions.modules.toolbar = simpleToolbar
+    }
+
     const quill = new FluentEditor(vm.$refs.editor, state.innerOptions)
     quill.emitter.on('file-change', api.fileOperationToSev)
     state.quill = Object.freeze(quill)
@@ -84,6 +89,10 @@ export const checkTableISEndElement = (element) => {
   }
 }
 
+const isSvg = (str) => {
+  return str.trim().startsWith('<svg')
+}
+
 const setIcons = ({ api, vm, iconOption, FluentEditor, keys = [] }) => {
   for (const key in iconOption) {
     if (Object.hasOwnProperty.call(iconOption, key)) {
@@ -92,8 +101,7 @@ const setIcons = ({ api, vm, iconOption, FluentEditor, keys = [] }) => {
       if (typeof option === 'object') {
         setIcons({ api, vm, iconOption: option, FluentEditor, keys: [...keys, key] })
       } else {
-        const iconElm = vm.$refs[option] && vm.$refs[option][0]
-        const outerHtml = api.getOuterHTML(iconElm)
+        const outerHtml = isSvg(option) ? option : api.getOuterHTML(vm.$refs[option]?.[0])
 
         if (option && outerHtml) {
           const k = keys.length ? [...keys, key].join('.') : key
diff --git a/packages/renderless/src/fluent-editor/options.ts b/packages/renderless/src/fluent-editor/options.ts
index 2c3ade8ce7..eca28cc73e 100644
--- a/packages/renderless/src/fluent-editor/options.ts
+++ b/packages/renderless/src/fluent-editor/options.ts
@@ -243,3 +243,34 @@ export const iconOption = {
   undo: 'IconEditorUndo',
   video: 'IconEditorVideo'
 }
+
+export const iconOptionMobileFirst = {
+  ...iconOption,
+  align: {
+    default: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="矢量 245" d="M21 3L3 3C2.58 3 2.25 3.33 2.25 3.75C2.25 4.16 2.58 4.5 3 4.5L21 4.5C21.41 4.5 21.75 4.16 21.75 3.75C21.75 3.33 21.41 3 21 3ZM3 8.5L15 8.5C15.41 8.5 15.75 8.83 15.75 9.25C15.75 9.66 15.41 10 15 10L3 10C2.58 10 2.25 9.66 2.25 9.25C2.25 8.83 2.58 8.5 3 8.5ZM21 14L3 14C2.58 14 2.25 14.33 2.25 14.75C2.25 15.16 2.58 15.5 3 15.5L21 15.5C21.41 15.5 21.75 15.16 21.75 14.75C21.75 14.33 21.41 14 21 14ZM15 19.5L3 19.5C2.58 19.5 2.25 19.83 2.25 20.25C2.25 20.66 2.58 21 3 21L15 21C15.41 21 15.75 20.66 15.75 20.25C15.75 19.83 15.41 19.5 15 19.5Z"/></svg>`,
+    center: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="矢量 247" d="M21 3L3 3C2.58 3 2.25 3.33 2.25 3.75C2.25 4.16 2.58 4.5 3 4.5L21 4.5C21.41 4.5 21.75 4.16 21.75 3.75C21.75 3.33 21.41 3 21 3ZM6 8.5L18 8.5C18.41 8.5 18.75 8.83 18.75 9.25C18.75 9.66 18.41 10 18 10L6 10C5.58 10 5.25 9.66 5.25 9.25C5.25 8.83 5.58 8.5 6 8.5ZM21 14L3 14C2.58 14 2.25 14.33 2.25 14.75C2.25 15.16 2.58 15.5 3 15.5L21 15.5C21.41 15.5 21.75 15.16 21.75 14.75C21.75 14.33 21.41 14 21 14ZM18 19.5L6 19.5C5.58 19.5 5.25 19.83 5.25 20.25C5.25 20.66 5.58 21 6 21L18 21C18.41 21 18.75 20.66 18.75 20.25C18.75 19.83 18.41 19.5 18 19.5Z"/></svg>`,
+    right: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="矢量 248" d="M21 3L3 3C2.58 3 2.25 3.33 2.25 3.75C2.25 4.16 2.58 4.5 3 4.5L21 4.5C21.41 4.5 21.75 4.16 21.75 3.75C21.75 3.33 21.41 3 21 3ZM9 8.5L21 8.5C21.41 8.5 21.75 8.83 21.75 9.25C21.75 9.66 21.41 10 21 10L9 10C8.58 10 8.25 9.66 8.25 9.25C8.25 8.83 8.58 8.5 9 8.5ZM21 14L3 14C2.58 14 2.25 14.33 2.25 14.75C2.25 15.16 2.58 15.5 3 15.5L21 15.5C21.41 15.5 21.75 15.16 21.75 14.75C21.75 14.33 21.41 14 21 14ZM21 19.5L9 19.5C8.58 19.5 8.25 19.83 8.25 20.25C8.25 20.66 8.58 21 9 21L21 21C21.41 21 21.75 20.66 21.75 20.25C21.75 19.83 21.41 19.5 21 19.5Z"/></svg>`
+  },
+  clean: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="矢量 250" d="M7.2 11.15L20.25 11.15L20.25 9.82C20.25 9.66 20.23 9.51 20.19 9.36C20.17 9.25 20.13 9.14 20.09 9.03C20.04 8.92 19.98 8.81 19.92 8.71C19.84 8.6 19.75 8.49 19.65 8.39C19.55 8.28 19.44 8.2 19.32 8.12C19.22 8.05 19.12 8 19.01 7.95C18.9 7.91 18.8 7.87 18.68 7.85C18.54 7.81 18.38 7.79 18.23 7.79L14.64 7.79C14.43 7.79 14.25 7.72 14.11 7.58C13.96 7.43 13.89 7.25 13.89 7.04L13.89 2.79C13.89 2.77 13.85 2.69 13.84 2.67C13.82 2.65 13.74 2.63 13.72 2.62L11.85 2.62C11.82 2.62 11.75 2.66 11.73 2.67C11.71 2.68 11.68 2.77 11.67 2.79L11.67 7.04C11.67 7.25 11.6 7.43 11.45 7.58C11.31 7.72 11.13 7.79 10.92 7.79L7.18 7.79C7.02 7.79 6.87 7.81 6.72 7.85C6.61 7.87 6.5 7.91 6.39 7.95C6.28 8 6.18 8.05 6.08 8.12C5.96 8.19 5.85 8.28 5.75 8.39C5.65 8.49 5.56 8.6 5.49 8.71C5.42 8.81 5.36 8.92 5.32 9.03C5.27 9.14 5.24 9.24 5.21 9.36Q5.16 9.58 5.16 9.82C5.21 15.68 5.2 19.01 5.13 19.8C5.1 20.06 5.05 20.32 4.98 20.56C4.89 20.84 4.78 21.11 4.63 21.37L7.3 21.37C7.42 21.36 7.53 21.34 7.64 21.31C7.74 21.29 7.84 21.26 7.94 21.22C8.07 21.16 8.19 21.1 8.31 21.02Q8.45 20.92 8.58 20.79C8.7 20.68 8.8 20.56 8.88 20.43C8.93 20.35 8.97 20.26 9.01 20.17C9.06 20.06 9.1 19.95 9.12 19.84C9.15 19.7 9.17 19.56 9.17 19.42L9.17 16.63C9.17 16.21 9.5 15.88 9.92 15.88C10.34 15.88 10.67 16.21 10.67 16.63L10.67 19.42C10.67 19.67 10.64 19.91 10.59 20.14C10.54 20.35 10.48 20.56 10.39 20.77C10.31 20.95 10.22 21.12 10.11 21.28C10.1 21.31 10.08 21.34 10.06 21.37L12.84 21.37Q13.01 21.35 13.18 21.31C13.28 21.29 13.38 21.26 13.48 21.22C13.61 21.16 13.73 21.1 13.84 21.02Q13.99 20.92 14.12 20.79Q14.29 20.63 14.42 20.43C14.47 20.35 14.51 20.26 14.55 20.17C14.6 20.06 14.63 19.95 14.66 19.84C14.69 19.7 14.71 19.56 14.71 19.42L14.71 16.63C14.71 16.21 15.04 15.88 15.46 15.88C15.88 15.88 16.21 16.21 16.21 16.63L16.21 19.42C16.21 19.67 16.18 19.91 16.13 20.14C16.08 20.35 16.02 20.56 15.93 20.77C15.85 20.95 15.76 21.12 15.65 21.28Q15.62 21.32 15.59 21.37L18.23 21.37C18.38 21.37 18.53 21.35 18.68 21.32C18.79 21.29 18.9 21.25 19.01 21.21C19.12 21.16 19.22 21.11 19.32 21.04C19.44 20.97 19.55 20.88 19.65 20.77C19.75 20.67 19.84 20.57 19.92 20.45C19.98 20.35 20.04 20.24 20.09 20.13C20.13 20.02 20.17 19.91 20.19 19.8C20.23 19.65 20.25 19.5 20.25 19.34L20.25 14.67C20.25 14.25 20.58 13.92 21 13.92C21.42 13.92 21.75 14.25 21.75 14.67L21.75 19.34C21.75 19.6 21.72 19.85 21.66 20.1C21.62 20.31 21.55 20.51 21.47 20.71Q21.35 20.99 21.19 21.25Q21.18 21.27 21.16 21.29C21.03 21.48 20.88 21.66 20.72 21.83C20.54 22.01 20.36 22.16 20.16 22.29C19.98 22.4 19.8 22.51 19.6 22.59C19.4 22.67 19.19 22.74 18.98 22.79C18.74 22.84 18.48 22.87 18.23 22.87L12.89 22.87C12.82 22.87 12.75 22.87 12.69 22.87L11.76 22.87C11.73 22.87 11.7 22.87 11.67 22.87L7.35 22.87C7.28 22.87 7.22 22.87 7.15 22.87L6.22 22.87C6.19 22.87 6.16 22.87 6.13 22.87L3 22.87C2.88 22.87 2.78 22.84 2.68 22.8C2.57 22.75 2.49 22.68 2.42 22.59C2.29 22.43 2.23 22.25 2.25 22.05C2.27 21.84 2.36 21.67 2.52 21.54C3.12 21.04 3.48 20.5 3.6 19.9Q3.62 19.79 3.63 19.66C3.7 18.92 3.71 15.64 3.66 9.82C3.66 9.56 3.68 9.3 3.74 9.06C3.79 8.85 3.85 8.65 3.93 8.45C4.02 8.24 4.12 8.05 4.24 7.87C4.37 7.68 4.52 7.5 4.69 7.33C4.86 7.16 5.04 7 5.24 6.87C5.42 6.76 5.61 6.66 5.81 6.57C6.01 6.49 6.21 6.42 6.42 6.37C6.67 6.32 6.92 6.29 7.18 6.29L10.17 6.29L10.17 2.79C10.17 2.67 10.19 2.55 10.21 2.44C10.23 2.34 10.26 2.24 10.31 2.14C10.35 2.04 10.4 1.95 10.45 1.86C10.51 1.77 10.58 1.69 10.66 1.61C10.74 1.53 10.83 1.46 10.92 1.4C11.01 1.34 11.1 1.29 11.2 1.25Q11.32 1.2 11.44 1.17Q11.47 1.16 11.5 1.15C11.61 1.13 11.73 1.12 11.85 1.12L13.72 1.12C13.84 1.12 13.95 1.13 14.07 1.15Q14.22 1.19 14.37 1.25Q14.51 1.31 14.64 1.4C14.73 1.46 14.82 1.53 14.9 1.61C14.98 1.69 15.05 1.77 15.11 1.86C15.17 1.95 15.22 2.04 15.26 2.14C15.3 2.24 15.33 2.34 15.35 2.44C15.38 2.55 15.39 2.67 15.39 2.79L15.39 6.29L18.23 6.29C18.48 6.29 18.74 6.32 18.98 6.38Q18.99 6.38 19 6.38Q19.3 6.45 19.6 6.57C19.8 6.66 19.98 6.76 20.16 6.87C20.36 7.01 20.54 7.16 20.72 7.33C20.88 7.5 21.03 7.68 21.16 7.87C21.28 8.05 21.38 8.25 21.47 8.45Q21.6 8.75 21.66 9.06C21.72 9.31 21.75 9.56 21.75 9.82L21.75 11.9Q21.75 12.05 21.69 12.19Q21.64 12.32 21.53 12.43Q21.42 12.54 21.28 12.59Q21.15 12.65 21 12.65L7.2 12.65C6.78 12.65 6.45 12.32 6.45 11.9C6.45 11.48 6.78 11.15 7.2 11.15Z"/></svg>`,
+  code: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="矢量 242" d="M22.3 6.67C22.17 6.46 22.01 6.26 21.83 6.08L18.61 2.87C18.43 2.69 18.24 2.53 18.03 2.4C17.85 2.28 17.66 2.19 17.46 2.11C17.26 2.03 17.06 1.96 16.85 1.92C16.63 1.87 16.39 1.85 16.16 1.85C15.92 1.85 15.68 1.87 15.46 1.92C15.25 1.96 15.05 2.03 14.85 2.11C14.65 2.19 14.46 2.28 14.28 2.4C14.07 2.53 13.88 2.69 13.7 2.87L6.62 9.95L4.79 14.36L1.36 17.79C1.34 17.82 1.25 17.94 1.23 17.98C1.13 18.16 1.12 18.35 1.18 18.55C1.21 18.65 1.26 18.73 1.32 18.81C1.38 18.88 1.46 18.94 1.55 18.99L7.44 22.05C7.59 22.13 7.74 22.15 7.9 22.13C7.98 22.12 8.06 22.09 8.13 22.06C8.2 22.02 8.26 21.98 8.32 21.92L10.33 19.9L14.75 18.08L21.83 11C22.01 10.82 22.17 10.63 22.3 10.42C22.41 10.24 22.51 10.05 22.59 9.85C22.67 9.65 22.73 9.45 22.78 9.24C22.82 9.01 22.85 8.78 22.85 8.54C22.85 8.3 22.82 8.07 22.78 7.84C22.73 7.64 22.67 7.43 22.59 7.23C22.51 7.04 22.41 6.85 22.3 6.67ZM10.09 18.38L13.9 16.81L20.77 9.94C20.88 9.83 20.97 9.71 21.05 9.59C21.11 9.49 21.16 9.39 21.2 9.29C21.25 9.18 21.28 9.07 21.3 8.95C21.33 8.82 21.35 8.68 21.35 8.54C21.35 8.4 21.33 8.27 21.3 8.13C21.28 8.02 21.25 7.91 21.2 7.8C21.16 7.69 21.11 7.59 21.05 7.5C20.97 7.37 20.88 7.25 20.77 7.14L17.55 3.93C17.44 3.82 17.33 3.73 17.2 3.65C17.1 3.59 17 3.54 16.9 3.5C16.79 3.45 16.68 3.42 16.57 3.39C16.43 3.37 16.3 3.35 16.16 3.35C16.02 3.35 15.88 3.37 15.74 3.39C15.63 3.42 15.52 3.45 15.41 3.5C15.31 3.54 15.21 3.59 15.11 3.65C14.98 3.73 14.87 3.82 14.76 3.93L7.89 10.8L6.32 14.61L10.09 18.38ZM10.68 15.08L18.1 7.66C18.4 7.36 18.4 6.89 18.1 6.6C17.8 6.3 17.34 6.3 17.04 6.6L9.61 14.02C9.32 14.32 9.32 14.79 9.61 15.08C9.91 15.38 10.38 15.38 10.68 15.08ZM5.43 15.85L8.85 19.27L7.65 20.47L3.15 18.13L5.43 15.85Z"/></svg>`,
+  'code-block': `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="矢量 244" d="M18.15 2.25C18.42 2.25 18.67 2.27 18.93 2.33C19.14 2.37 19.35 2.44 19.55 2.53C19.76 2.61 19.95 2.72 20.13 2.84Q20.43 3.04 20.69 3.3Q20.95 3.56 21.15 3.86C21.27 4.04 21.38 4.23 21.46 4.44C21.55 4.64 21.62 4.85 21.66 5.06C21.72 5.32 21.75 5.57 21.75 5.84L21.75 18.15C21.75 18.42 21.72 18.67 21.66 18.93C21.62 19.14 21.55 19.35 21.46 19.55C21.38 19.76 21.27 19.95 21.15 20.13Q20.95 20.43 20.69 20.69Q20.43 20.95 20.13 21.15C19.95 21.27 19.76 21.38 19.55 21.46C19.35 21.55 19.14 21.62 18.93 21.66C18.67 21.72 18.42 21.75 18.15 21.75L5.84 21.75C5.57 21.75 5.32 21.72 5.06 21.66C4.85 21.62 4.64 21.55 4.44 21.46C4.23 21.38 4.04 21.27 3.86 21.15Q3.56 20.95 3.3 20.69Q3.04 20.43 2.84 20.13C2.72 19.95 2.61 19.76 2.53 19.55C2.44 19.35 2.37 19.14 2.33 18.93C2.27 18.67 2.25 18.42 2.25 18.15L2.25 5.84C2.25 5.57 2.27 5.32 2.33 5.06C2.37 4.85 2.44 4.64 2.53 4.44C2.61 4.23 2.72 4.04 2.84 3.86Q3.04 3.56 3.3 3.3Q3.56 3.04 3.86 2.84C4.04 2.72 4.23 2.61 4.44 2.53C4.64 2.44 4.85 2.37 5.06 2.33C5.32 2.27 5.57 2.25 5.84 2.25L18.15 2.25ZM18.15 3.75L5.84 3.75C5.67 3.75 5.52 3.76 5.36 3.8C5.25 3.83 5.13 3.86 5.02 3.91C4.91 3.96 4.8 4.02 4.7 4.08C4.58 4.16 4.46 4.25 4.36 4.36C4.25 4.46 4.16 4.58 4.08 4.7C4.02 4.8 3.96 4.91 3.91 5.02C3.86 5.13 3.83 5.25 3.8 5.36C3.76 5.52 3.75 5.67 3.75 5.84L3.75 18.15C3.75 18.32 3.76 18.47 3.8 18.63C3.83 18.74 3.86 18.86 3.91 18.97C3.96 19.08 4.02 19.19 4.08 19.29C4.16 19.41 4.25 19.53 4.36 19.63C4.46 19.74 4.58 19.83 4.7 19.91C4.8 19.97 4.91 20.03 5.02 20.08C5.13 20.13 5.25 20.16 5.36 20.19C5.52 20.23 5.67 20.25 5.84 20.25L18.15 20.25C18.32 20.25 18.47 20.23 18.63 20.19C18.74 20.16 18.86 20.13 18.97 20.08C19.08 20.03 19.19 19.97 19.29 19.91C19.41 19.83 19.53 19.74 19.63 19.63C19.74 19.53 19.83 19.41 19.91 19.29C19.97 19.19 20.03 19.08 20.08 18.97C20.13 18.86 20.16 18.74 20.19 18.63C20.23 18.47 20.25 18.32 20.25 18.15L20.25 5.84C20.25 5.67 20.23 5.52 20.19 5.36C20.16 5.25 20.13 5.13 20.08 5.02C20.03 4.91 19.97 4.8 19.91 4.7C19.83 4.58 19.74 4.46 19.63 4.36C19.53 4.25 19.41 4.16 19.29 4.08C19.19 4.02 19.08 3.96 18.97 3.91C18.86 3.86 18.74 3.83 18.63 3.8C18.47 3.76 18.32 3.75 18.15 3.75ZM6.54 11.98L8.97 9.52C9.26 9.22 9.26 8.76 8.96 8.46C8.66 8.17 8.19 8.17 7.9 8.47L4.96 11.45C4.82 11.59 4.75 11.77 4.75 11.97C4.74 12.17 4.82 12.35 4.96 12.5L7.9 15.52C8.19 15.82 8.65 15.83 8.96 15.53C9.26 15.24 9.26 14.77 8.97 14.47L6.54 11.98ZM15.03 8.46C14.73 8.75 14.73 9.22 15.02 9.52L17.45 12.01L15.02 14.47C14.73 14.77 14.73 15.23 15.03 15.53C15.33 15.82 15.8 15.82 16.09 15.52L19.03 12.54C19.17 12.4 19.24 12.22 19.25 12.02C19.25 11.82 19.17 11.64 19.03 11.49L16.09 8.47C15.8 8.17 15.34 8.16 15.03 8.46ZM11.51 15.27L13.87 9.27C14.03 8.88 13.84 8.45 13.45 8.3C13.06 8.14 12.63 8.33 12.48 8.72L10.12 14.72C9.96 15.11 10.15 15.54 10.54 15.69C10.93 15.84 11.36 15.66 11.51 15.27Z"/></svg>`,
+  header: {
+    1: `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g stroke-width="1" fill-rule="evenodd"><g><rect opacity="0" x="0" y="0" width="16" height="16"></rect><path d="M13.5713675,7.75269698 L13.578407,7.837994 L13.578407,13.0760491 C13.578407,13.3521915 13.3545494,13.5760491 13.078407,13.5760491 C12.8329471,13.5760491 12.6287986,13.3991739 12.5864627,13.1659247 L12.578407,13.0760491 L12.578,8.686 L11.6206466,9.21688158 C11.4059176,9.3358018 11.1416356,9.27997662 10.9915956,9.09644047 L10.9410056,9.02171982 C10.8220854,8.80699084 10.8779106,8.54270884 11.0614467,8.39266882 L11.1361674,8.34207882 L12.8361674,7.40059262 C13.1437867,7.23022831 13.5159343,7.42248511 13.5713675,7.75269698 Z M9,2.49644165 C9.24545989,2.49644165 9.44960837,2.67331681 9.49194433,2.90656602 L9.5,2.99644165 L9.5,12.9964417 C9.5,13.272584 9.27614237,13.4964417 9,13.4964417 C8.75454011,13.4964417 8.55039163,13.3195665 8.50805567,13.0863173 L8.5,12.9964417 L8.5,8.49944165 L3.5,8.49944165 L3.5,12.9964417 C3.5,13.272584 3.27614237,13.4964417 3,13.4964417 C2.75454011,13.4964417 2.55039163,13.3195665 2.50805567,13.0863173 L2.5,12.9964417 L2.5,2.99644165 C2.5,2.72029928 2.72385763,2.49644165 3,2.49644165 C3.24545989,2.49644165 3.44960837,2.67331681 3.49194433,2.90656602 L3.5,2.99644165 L3.5,7.49944165 L8.5,7.49944165 L8.5,2.99644165 C8.5,2.72029928 8.72385763,2.49644165 9,2.49644165 Z"></path></g></g></svg>`,
+    2: `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g stroke-width="1" fill-rule="evenodd"><g><rect opacity="0" x="0" y="0" width="16" height="16"></rect><path d="M8.5,2.49644165 C8.74545989,2.49644165 8.94960837,2.67331681 8.99194433,2.90656602 L9,2.99644165 L9,12.9964416 C9,13.272584 8.77614237,13.4964416 8.5,13.4964416 C8.25454011,13.4964416 8.05039163,13.3195665 8.00805567,13.0863173 L8,12.9964416 L8,8.49944165 L3,8.49944165 L3,12.9964416 C3,13.272584 2.77614237,13.4964416 2.5,13.4964416 C2.25454011,13.4964416 2.05039163,13.3195665 2.00805567,13.0863173 L2,12.9964416 L2,2.99644165 C2,2.72029928 2.22385763,2.49644165 2.5,2.49644165 C2.74545989,2.49644165 2.94960837,2.67331681 2.99194433,2.90656602 L3,2.99644165 L3,7.49944165 L8,7.49944165 L8,2.99644165 C8,2.72029928 8.22385763,2.49644165 8.5,2.49644165 Z M13.3535741,7.87538235 C14.0803728,8.6021811 14.1186254,9.7567876 13.4683283,10.5286222 L13.35357,10.6535782 L11.706,12.3 L13.7607097,12.3000121 C14.0061696,12.3000121 14.2103181,12.4768873 14.252654,12.7101365 L14.2607097,12.8000121 C14.2607097,13.045472 14.0838345,13.2496205 13.8505853,13.2919564 L13.7607097,13.3000121 L10.4999715,13.3000121 C10.0842133,13.3000121 9.86216672,12.8308519 10.0905053,12.5122062 L10.1464222,12.4464546 L12.6464673,9.94646732 C13.0231195,9.56981513 13.0231195,8.95914129 12.6464673,8.58248912 C12.2698151,8.20583695 11.6591413,8.20583695 11.2824891,8.58248912 C11.1281904,8.73678781 11.0337606,8.93352153 11.0074836,9.1434112 L10.999962,9.27068948 C11.0016597,9.54682663 10.7791825,9.77205624 10.5030453,9.77375389 C10.2269082,9.77545154 10.0016786,9.55297436 9.99998091,9.2768372 C9.99677516,8.75539501 10.1992171,8.25154756 10.5753823,7.87538232 C11.3425589,7.10820589 12.5863977,7.10820589 13.3535741,7.87538235 Z"></path></g></g></svg>`
+  },
+  redo: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="path4 (边框)" d="M16 6.11L19.4 8.53L6.43 8.53C6.12 8.53 5.81 8.56 5.5 8.62C5.15 8.69 4.82 8.81 4.49 8.96C4.31 9.04 4.15 9.13 3.99 9.23C3.6 9.47 3.24 9.77 2.92 10.12C2.77 10.29 2.63 10.45 2.51 10.63C2.25 11 2.04 11.39 1.87 11.82C1.78 12.06 1.71 12.3 1.65 12.54C1.55 12.98 1.5 13.43 1.5 13.89C1.5 14.35 1.55 14.8 1.65 15.23C1.71 15.48 1.78 15.71 1.87 15.95C2.04 16.38 2.25 16.78 2.51 17.14C2.63 17.32 2.77 17.49 2.92 17.65C3.24 18 3.6 18.3 3.99 18.54C4.15 18.64 4.31 18.73 4.49 18.81C4.82 18.97 5.15 19.08 5.5 19.15C5.81 19.21 6.12 19.25 6.43 19.25L19.97 19.25C20.39 19.25 20.72 18.91 20.72 18.5C20.72 18.07 20.39 17.75 19.97 17.75L6.43 17.75C6.23 17.75 6.02 17.73 5.83 17.69C5.58 17.64 5.35 17.56 5.12 17.45C5.04 17.41 4.96 17.37 4.88 17.33C4.56 17.15 4.28 16.92 4.03 16.64C3.94 16.55 3.86 16.45 3.79 16.35C3.58 16.07 3.41 15.75 3.27 15.41C3.22 15.26 3.17 15.11 3.13 14.96C3.04 14.61 3 14.26 3 13.89C3 13.52 3.04 13.16 3.13 12.82C3.17 12.66 3.22 12.51 3.27 12.36C3.41 12.02 3.58 11.71 3.79 11.42C3.86 11.32 3.94 11.23 4.03 11.13C4.28 10.85 4.56 10.62 4.88 10.45C4.96 10.4 5.04 10.36 5.12 10.32C5.35 10.21 5.58 10.14 5.83 10.09C6.02 10.05 6.23 10.03 6.43 10.03L21.75 10.03C21.87 10.03 21.98 10 22.09 9.95C22.2 9.89 22.29 9.81 22.36 9.71C22.48 9.55 22.52 9.36 22.48 9.15C22.45 8.95 22.35 8.79 22.18 8.67L16.87 4.88C16.53 4.64 16.07 4.72 15.82 5.06C15.58 5.4 15.66 5.86 16 6.11Z"/></svg>`,
+  size: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>`,
+  undo: `<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="path4 (边框)" d="M7.99 6.11L4.59 8.53L17.56 8.53C17.87 8.53 18.18 8.56 18.49 8.62C18.84 8.69 19.17 8.81 19.5 8.96C19.68 9.04 19.84 9.13 20 9.23C20.39 9.47 20.75 9.77 21.07 10.12C21.22 10.29 21.36 10.45 21.48 10.63C21.74 11 21.95 11.39 22.12 11.82C22.21 12.06 22.28 12.3 22.34 12.54C22.44 12.98 22.5 13.43 22.5 13.89C22.5 14.35 22.44 14.8 22.34 15.23C22.28 15.48 22.21 15.71 22.12 15.95C21.95 16.38 21.74 16.78 21.48 17.14C21.36 17.32 21.22 17.49 21.07 17.65C20.75 18 20.39 18.3 20 18.54C19.84 18.64 19.68 18.73 19.5 18.81C19.17 18.97 18.84 19.08 18.49 19.15C18.18 19.21 17.87 19.25 17.56 19.25L4.02 19.25C3.6 19.25 3.27 18.91 3.27 18.5C3.27 18.07 3.6 17.75 4.02 17.75L17.56 17.75C17.76 17.75 17.97 17.73 18.16 17.69C18.41 17.64 18.64 17.56 18.87 17.45C18.95 17.41 19.03 17.37 19.11 17.33C19.43 17.15 19.71 16.92 19.96 16.64C20.05 16.55 20.13 16.45 20.2 16.35C20.41 16.07 20.58 15.75 20.72 15.41C20.77 15.26 20.82 15.11 20.86 14.96C20.95 14.61 21 14.26 21 13.89C21 13.52 20.95 13.16 20.86 12.82C20.82 12.66 20.77 12.51 20.72 12.36C20.58 12.02 20.41 11.71 20.2 11.42C20.13 11.32 20.05 11.23 19.96 11.13C19.71 10.85 19.43 10.62 19.11 10.45C19.03 10.4 18.95 10.36 18.87 10.32C18.64 10.21 18.41 10.14 18.16 10.09C17.97 10.05 17.76 10.03 17.56 10.03L2.25 10.03C2.12 10.03 2.01 10 1.9 9.95C1.79 9.89 1.7 9.81 1.63 9.71C1.51 9.55 1.47 9.36 1.51 9.15C1.54 8.95 1.64 8.79 1.81 8.67L7.12 4.88C7.46 4.64 7.92 4.72 8.17 5.06C8.41 5.4 8.33 5.86 7.99 6.11Z"/></svg>`,
+}
+
+export const simpleToolbar = [
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  { list: 'bullet' },
+  { list: 'ordered' },
+  { align: '' },
+  { align: 'center' },
+  { align: 'right' }
+]
diff --git a/packages/renderless/src/fluent-editor/vue.ts b/packages/renderless/src/fluent-editor/vue.ts
index 65ad3cd27b..16b7278882 100644
--- a/packages/renderless/src/fluent-editor/vue.ts
+++ b/packages/renderless/src/fluent-editor/vue.ts
@@ -37,7 +37,7 @@ import {
   removeHandleComposition,
   checkTableISEndElement
 } from './index'
-import { defaultOption, iconOption } from './options'
+import { defaultOption, iconOption, iconOptionMobileFirst, simpleToolbar } from './options'
 
 export const api = ['state', 'init', 'initContent', 'selectionChange', 'textChange', 'doPreview', 'handleDblclick']
 
@@ -95,7 +95,7 @@ const initState = ({ api, reactive, computed, props }) => {
   return state
 }
 
-const initApi = ({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t }) => {
+const initApi = ({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t, mode }) => {
   Object.assign(api, {
     state,
     getFileUploadUrl: getFileUploadUrl({ service }),
@@ -110,18 +110,18 @@ const initApi = ({ api, state, service, emit, props, nextTick, FluentEditor, Upl
     uploadImageToSev: uploadImageToSev({ state }),
     doPreview: doPreview({ props, state, nextTick }),
     stringToJson: stringToJson({ props }),
-    setToolbarTips: setToolbarTips({ api, vm, FluentEditor, iconOption }),
+    setToolbarTips: setToolbarTips({ api, vm, FluentEditor, iconOption: mode === 'mobile-first' ? iconOptionMobileFirst : iconOption }),
     getOuterHTML: getOuterHTML(),
     setToolbarTitle: setToolbarTitle({ state, t })
   })
 }
 
 const mergeApi = (args) => {
-  let { api, state, service, emit, props, vm, i18n, watch, nextTick } = args
+  let { api, state, service, emit, props, vm, i18n, watch, nextTick, useBreakpoint } = args
   let { constants, FluentEditor, UploaderDfls, Delta, defaultOptions } = args
 
   Object.assign(api, {
-    init: init({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }),
+    init: init({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm, useBreakpoint, simpleToolbar }),
     initContent: initContent({ state, props, api, nextTick }),
     fileHandler: fileHandler({ api, state }),
     imageHandler: imageHandler({ api, state }),
@@ -179,7 +179,7 @@ const initWatch = ({ watch, state, api, props, vm }) => {
 export const renderless = (
   props,
   { reactive, watch, onMounted, onBeforeUnmount, computed },
-  { service, emit, i18n, constants, nextTick, vm, t },
+  { service, emit, i18n, constants, nextTick, vm, t, useBreakpoint, mode },
   { FluentEditor }
 ) => {
   const api = {}
@@ -188,9 +188,9 @@ export const renderless = (
   const state = initState({ reactive, computed, api, props })
   const defaultOptions = defaultOption({ FluentEditor, state, mentionObj: props.mentionObj })
 
-  initApi({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t })
+  initApi({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t, mode })
 
-  const args = { api, state, service, emit, props, vm, i18n, watch, nextTick }
+  const args = { api, state, service, emit, props, vm, i18n, watch, nextTick, useBreakpoint }
 
   Object.assign(args, { constants, FluentEditor, UploaderDfls, Delta, defaultOptions })
 
diff --git a/packages/renderless/src/form-item/index.ts b/packages/renderless/src/form-item/index.ts
index b7946975a7..32b039b067 100644
--- a/packages/renderless/src/form-item/index.ts
+++ b/packages/renderless/src/form-item/index.ts
@@ -249,7 +249,13 @@ export const computedFieldValue =
 export const mounted =
   ({ api, vm, props, state }: Pick<IFormItemRenderlessParams, 'api' | 'vm' | 'props' | 'state'>) =>
   (): void => {
-    state.tooltip = vm.$refs.tooltip
+    // 初始化tooltip信息
+    const tooltip = vm.$refs.tooltip
+    if (tooltip) {
+      const content = vm.$refs.content
+      tooltip.state.referenceElm = state.isMultiple ? content : content?.children[0]
+      state.tooltip = tooltip
+    }
 
     if (props.prop) {
       api.dispatch('Form', 'form:addField', vm)
diff --git a/packages/renderless/src/form-item/vue.ts b/packages/renderless/src/form-item/vue.ts
index 6fa49a8262..a34d443263 100644
--- a/packages/renderless/src/form-item/vue.ts
+++ b/packages/renderless/src/form-item/vue.ts
@@ -120,7 +120,9 @@ const initState = ({
     isErrorInline: computed(() => api.computedIsErrorInline()),
     isErrorBlock: computed(() => api.computedIsErrorBlock()),
     disabled: computed(() => state.formInstance.disabled),
-    tooltipType: computed(() => state.formInstance.state.tooltipType)
+    tooltipType: computed(() => state.formInstance.state.tooltipType),
+    // 标记表单项下是否有多个子节点
+    isMultiple: false
   })
 
   return state
diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts
index f63da9c645..f3785099c0 100644
--- a/packages/renderless/src/picker/index.ts
+++ b/packages/renderless/src/picker/index.ts
@@ -66,7 +66,7 @@ export const watchMobileVisible =
 export const watchPickerVisible =
   ({ api, vm, dispatch, emit, props, state, nextTick }) =>
   (value) => {
-    if (props.readonly || state.pickerDisabled || state.isMobileScreen) return
+    if (props.readonly || state.pickerDisabled || state.isMobileMode) return
 
     if (value) {
       api.showPicker()
@@ -579,15 +579,41 @@ const getSelectionStart = ({ value, format, regx, event }) => {
   return { selectionStart, I }
 }
 
+// 获取有效的日期格式 2020 --> 2020-01-01
+const getEffectiveDateString = (formatStr) => {
+  // 需要一个有序的格式化顺序，月份、日期最小值应该是从1开始，如果是0则会显示上个月或者上一天的日期，会造成输入和预期不符的bug
+  const serializationList = [{ 'MM': '01' }, { 'M': '1' }, { 'dd': '01' }, { 'd': '1' }]
+  let result = formatStr
+  serializationList.forEach((item) => {
+    const itemKey = Object.keys(item)[0]
+    if (result.includes(itemKey)) {
+      result = result.replace(itemKey, item[itemKey])
+    }
+  })
+  return result
+}
+
 const getNum = (value, format, regx) => {
   let len = value.length
+  let formatStr = ''
   if (format && regx) {
     const formatMatchArr = format.match(regx)
-    len = Math.max(len, formatMatchArr.join('').length)
+    formatStr = formatMatchArr.join('')
+    len = Math.max(len, formatStr.length)
   }
-  let num = { str: '', arr: [] }
+
+  const num = { str: '', arr: [] }
   for (let i = 0; i < len; i++) {
-    let char = value.charAt(i) ? value.charAt(i) : '00'
+    // 填补字符串
+    let fillStr = '0'
+    if (formatStr && len > value.length) {
+      const validStr = getEffectiveDateString(formatStr)
+      if (/[0-9]/.test(validStr[i])) {
+        fillStr = validStr[i]
+      }
+    }
+
+    const char = value.charAt(i) ? value.charAt(i) : fillStr
 
     if (/[0-9]/.test(char)) {
       num.str += char
@@ -595,6 +621,7 @@ const getNum = (value, format, regx) => {
       num.arr[i] = 1
     }
   }
+
   return num
 }
 
@@ -912,9 +939,9 @@ export const handleFocus =
     const type = state.type
 
     if (DATEPICKER.TriggerTypes.includes(type)) {
-      if (state.isMobileScreen && state.isDateMobileComponent) {
+      if (state.isMobileMode && state.isDateMobileComponent) {
         api.dateMobileToggle(true)
-      } else if (state.isMobileScreen && state.isTimeMobileComponent) {
+      } else if (state.isMobileMode && state.isTimeMobileComponent) {
         api.timeMobileToggle(true)
       } else {
         state.pickerVisible = true
diff --git a/packages/renderless/src/picker/vue.ts b/packages/renderless/src/picker/vue.ts
index fc10e7a98c..61fb35bee8 100644
--- a/packages/renderless/src/picker/vue.ts
+++ b/packages/renderless/src/picker/vue.ts
@@ -143,7 +143,7 @@ const initState = ({ api, reactive, vm, computed, props, utils, parent, breakpoi
     labelTooltip: '',
     displayOnlyTooltip: '',
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
-    isMobileScreen: computed(() => breakpoint.current.value === 'default'),
+    isMobileMode: computed(() => vm.$mode.includes('mobile')),
     dateMobileOption: {
       visible: false,
       type: props.type,
diff --git a/packages/renderless/src/popeditor/index.ts b/packages/renderless/src/popeditor/index.ts
index 5ec78cfe76..75ca5b3404 100644
--- a/packages/renderless/src/popeditor/index.ts
+++ b/packages/renderless/src/popeditor/index.ts
@@ -52,8 +52,9 @@ export const createSearchForm = (props) => (isRest) =>
   }, {})
 
 export const getColumns = ({ constants, props }) => {
-  const { columns } = props.gridOp
-
+  const { columns: preColumns } = props.gridOp
+  // 同步勿删，后续逻辑会修改columns，因此需要浅拷贝一下，否则会因此死循环
+  const columns = preColumns.slice(0)
   const selectionCol = find(
     columns,
     (col) => col.type === constants.COLUMNS_TYPE.selection || col.type === constants.COLUMNS_TYPE.radio
@@ -65,7 +66,6 @@ export const getColumns = ({ constants, props }) => {
     const indexCol = find(columns, (col) => col.type === constants.COLUMNS_TYPE.index)
 
     const index = indexCol ? 1 : 0
-
     columns.splice(index, 0, {
       type: props.multi ? constants.COLUMNS_TYPE.selection : constants.COLUMNS_TYPE.radio,
       width: columns.length ? constants.COLUMNS_TYPE.width : ''
diff --git a/packages/renderless/src/rich-text-editor/vue.ts b/packages/renderless/src/rich-text-editor/vue.ts
index d3b8bf8676..dab654463e 100644
--- a/packages/renderless/src/rich-text-editor/vue.ts
+++ b/packages/renderless/src/rich-text-editor/vue.ts
@@ -10,6 +10,7 @@ import {
   eventClick,
   Active
 } from './index'
+import type { ISharedRenderlessParamHooks } from '@/types'
 
 export const api = [
   'state',
@@ -26,7 +27,7 @@ export const api = [
 ]
 export const renderless = (
   props,
-  { computed, onBeforeUnmount, reactive },
+  { computed, onBeforeUnmount, reactive, watch }: ISharedRenderlessParamHooks,
   { vm, emit },
   {
     Editor,
@@ -113,7 +114,7 @@ export const renderless = (
     addAttributes() {
       return {
         level: {
-          default: 1
+          default: 1.5
         }
       }
     },
@@ -141,7 +142,7 @@ export const renderless = (
     addAttributes() {
       return {
         size: {
-          default: 16
+          default: 14
         }
       }
     },
@@ -293,5 +294,12 @@ export const renderless = (
     state.editor.destroy()
   })
 
+  watch(
+    () => props.modelValue,
+    (value) => {
+      state.editor.commands.setContent(value)
+    }
+  )
+
   return api
 }
diff --git a/packages/renderless/src/slider-button-group/vue.ts b/packages/renderless/src/slider-button-group/vue.ts
index b2431aef97..1ac83c47de 100644
--- a/packages/renderless/src/slider-button-group/vue.ts
+++ b/packages/renderless/src/slider-button-group/vue.ts
@@ -2,7 +2,7 @@ import { getChangePosition } from './index'
 
 export const api = ['state']
 
-export const renderless = (props, { reactive, provide, onMounted }, { parent }) => {
+export const renderless = (props, { reactive, provide, onMounted, watch }, { parent }) => {
   const state = reactive({
     tag: 'div',
     isActive: false,
@@ -53,5 +53,12 @@ export const renderless = (props, { reactive, provide, onMounted }, { parent })
     api.getChangePosition(props.modelValue)
   })
 
+  watch(
+    () => props.modelValue,
+    (value) => {
+      api.getChangePosition(value)
+    }
+  )
+
   return api
 }
diff --git a/packages/renderless/src/time-line-new/index.ts b/packages/renderless/src/time-line-new/index.ts
new file mode 100644
index 0000000000..571266c40e
--- /dev/null
+++ b/packages/renderless/src/time-line-new/index.ts
@@ -0,0 +1,67 @@
+import { format } from '../common/date'
+
+export const getDate = (dateTime) => {
+  return {
+    date: format(dateTime, 'yyyy/MM/dd'),
+    time: format(dateTime, 'hh:mm:ss')
+  }
+}
+
+export const getStatus =
+  ({ state, t }) =>
+  (value) => {
+    const status = state.current - value
+
+    return status > 0 ? t('ui.steps.done') : status === 0 ? t('ui.steps.doing') : t('ui.steps.wait')
+  }
+
+export const handleClick =
+  ({ emit, state }) =>
+  ({ index, node }) => {
+    emit('click', state.isReverse ? state.nodes.length - index - 1 : index, node)
+  }
+
+export const getStatusCls =
+  ({ constants, state }) =>
+  (index) => {
+    const { PROCESS_DONE_CLS, PROCESS_CUR_CLS, PROCESS_WAIT_CLS } = constants
+    const cls = {}
+    const reverse = state.isReverse
+
+    cls[PROCESS_DONE_CLS] = reverse ? index > state.current : index < state.current
+    cls[PROCESS_CUR_CLS] = index === state.current
+    cls[PROCESS_WAIT_CLS] = reverse ? index < state.current : index > state.current
+
+    return cls
+  }
+
+export const computedData =
+  ({ props, state }) =>
+  () => {
+    return state.isReverse ? props.data.map((item, i) => props.data[props.data.length - 1 - i]) : props.data
+  }
+
+export const computedCurrent =
+  ({ props, state }) =>
+  () => {
+    return state.isReverse ? state.nodes.length - props.active - 1 : props.active
+  }
+
+export const computedIsReverse = (props) => () => props.reverse && props.vertical
+
+export const computedStackNodes =
+  ({ state, props }) =>
+  () => {
+    if (state.nodes.length >= props.nodeMax && !props.foldDisabled) {
+      state.showData = true
+      return state.nodes.slice(0, props.limitedNodes)
+    }
+    return state.nodes
+  }
+
+export const changeStatus =
+  ({ state }) =>
+  () => {
+    state.showAll = !state.showAll
+    return state.showAll
+  }
diff --git a/packages/renderless/src/time-line-new/vue.ts b/packages/renderless/src/time-line-new/vue.ts
new file mode 100644
index 0000000000..df54827fe1
--- /dev/null
+++ b/packages/renderless/src/time-line-new/vue.ts
@@ -0,0 +1,40 @@
+import {
+  handleClick,
+  changeStatus,
+  getStatusCls,
+  getStatus,
+  computedData,
+  getDate,
+  computedCurrent,
+  computedIsReverse,
+  computedStackNodes
+} from './index'
+
+export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate', 'changeStatus']
+
+export const renderless = (props, { computed, reactive }, { t, emit, constants }) => {
+  const api = {}
+  const state = reactive({
+    nodes: computed(() => api.computedData()),
+    stackNodes: computed(() => (state.showAll ? state.nodes : api.computedStackNodes())),
+    current: computed(() => api.computedCurrent()),
+    isReverse: computed(() => api.computedIsReverse()),
+    showData: false,
+    showAll: false
+  })
+
+  Object.assign(api, {
+    state,
+    getDate,
+    computedData: computedData({ props, state }),
+    computedCurrent: computedCurrent({ props, state }),
+    computedIsReverse: computedIsReverse(props),
+    getStatus: getStatus({ state, t }),
+    handleClick: handleClick({ emit, state, api }),
+    getStatusCls: getStatusCls({ constants, props, state }),
+    computedStackNodes: computedStackNodes({ state, props }),
+    changeStatus: changeStatus({ state })
+  })
+
+  return api
+}
diff --git a/packages/renderless/src/tooltip/vue.ts b/packages/renderless/src/tooltip/vue.ts
index aee0ee03a2..f4f931be9c 100644
--- a/packages/renderless/src/tooltip/vue.ts
+++ b/packages/renderless/src/tooltip/vue.ts
@@ -48,11 +48,13 @@ export const api = [
   'focusHandler'
 ]
 
-const initState = ({ reactive, showPopper, popperElm, referenceElm, props, inject }) =>
+const initState = ({ reactive, showPopper, popperElm, referenceElm, props, inject, popperJS, currentPlacement }) =>
   reactive({
+    popperJS,
     showPopper,
     popperElm,
     referenceElm,
+    currentPlacement,
     timeout: null,
     focusing: false,
     expectedState: undefined,
@@ -84,8 +86,19 @@ export const renderless = (
 
   Object.assign(popperParam, { slots, onBeforeUnmount, onDeactivated, watch })
 
-  const { showPopper, updatePopper, popperElm, referenceElm, doDestroy } = userPopper(popperParam as any)
-  const state: ITooltipState = initState({ reactive, showPopper, popperElm, referenceElm, props, inject })
+  const { showPopper, updatePopper, popperElm, referenceElm, doDestroy, popperJS, currentPlacement } = userPopper(
+    popperParam as any
+  )
+  const state: ITooltipState = initState({
+    reactive,
+    showPopper,
+    popperElm,
+    referenceElm,
+    props,
+    inject,
+    popperJS,
+    currentPlacement
+  })
 
   Object.assign(api, {
     state,
diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts
index 3e39cc6288..a9a901731f 100644
--- a/packages/renderless/src/tree-select/index.ts
+++ b/packages/renderless/src/tree-select/index.ts
@@ -22,7 +22,7 @@ export const nodeClick =
   }
 
 export const check =
-  ({ props }) =>
+  ({ props, vm }) =>
   (data, { checkedNodes }) => {
     if (props.multiple) {
       vm.$refs.baseSelectRef.updateSelectedData(
diff --git a/packages/renderless/src/tree-select/vue.ts b/packages/renderless/src/tree-select/vue.ts
index 426a8fddea..5c01c87d41 100644
--- a/packages/renderless/src/tree-select/vue.ts
+++ b/packages/renderless/src/tree-select/vue.ts
@@ -14,7 +14,7 @@ export const renderless = (props, { reactive }, { vm }) => {
     state,
     filter: filter({ vm }),
     nodeClick: nodeClick({ props, vm }),
-    check: check({ props })
+    check: check({ props, vm })
   })
 
   return api
diff --git a/packages/renderless/types/autocomplete.type.ts b/packages/renderless/types/autocomplete.type.ts
index 460857ad23..5dd5c13d87 100644
--- a/packages/renderless/types/autocomplete.type.ts
+++ b/packages/renderless/types/autocomplete.type.ts
@@ -13,9 +13,11 @@ import type {
   select,
   highlight
 } from '../src/autocomplete'
-import type { ISharedRenderlessParamUtils } from './shared.type'
+import type { ISharedRenderlessParamUtils, ISharedRenderlessFunctionParams } from './shared.type'
 
 export interface IAutoCompleteState {
+  showAutoWidth: boolean | null
+  popperElm: Element | null
   activated: boolean
   suggestions: unknown[]
   loading: boolean
@@ -23,8 +25,15 @@ export interface IAutoCompleteState {
   suggestionDisabled: boolean
   id: string
   suggestionVisible: ComputedRef<boolean>
+  validateEvent: boolean
 }
 export type IAutoCompleteProps = ExtractPropTypes<typeof autoCompleteProps>
+
+export type IAutoCompleteRenderlessParams = ISharedRenderlessFunctionParams<IAutoCompleteConstants> & {
+  state: IAutoCompleteState
+  props: IAutoCompleteProps
+  api: IAutoCompleteApi
+}
 export interface IAutoCompleteApi {
   state: IAutoCompleteState
   doDestroy: (forceDestroy?: boolean | undefined) => void
diff --git a/packages/renderless/types/form-item.type.ts b/packages/renderless/types/form-item.type.ts
index 796bca1b1c..2d35d2d41e 100644
--- a/packages/renderless/types/form-item.type.ts
+++ b/packages/renderless/types/form-item.type.ts
@@ -94,6 +94,7 @@ export interface IFormItemState {
   isErrorInline: boolean
   isErrorBlock: boolean
   tooltipType: string
+  isMultiple: boolean
 }
 
 export type IFormItemConstants = typeof $constants
diff --git a/packages/theme-saas/src/grid/custom.less b/packages/theme-saas/src/grid/custom.less
index fbe19f4632..efa8b3edd2 100644
--- a/packages/theme-saas/src/grid/custom.less
+++ b/packages/theme-saas/src/grid/custom.less
@@ -50,6 +50,7 @@
 
       .tabs-body-item {
         .@{grid-custom-prefix-cls}__alert {
+          @apply m-0;
           @apply relative;
           @apply border border-solid;
           @apply rounded-sm;
diff --git a/packages/theme-saas/src/grid/header.less b/packages/theme-saas/src/grid/header.less
index 7c61a23a09..cfa48b981e 100644
--- a/packages/theme-saas/src/grid/header.less
+++ b/packages/theme-saas/src/grid/header.less
@@ -70,6 +70,13 @@
       @apply block;
       @apply text-left;
     }
+    + .@{grid-prefix-cls}-cell-text {
+      @apply w-auto;
+    }
+  }
+
+  .@{grid-prefix-cls}-cell-text {
+    @apply w-full;
   }
 
   .@{grid-prefix-cls}-edit-icon {
@@ -78,6 +85,9 @@
     @apply text-sm;
     @apply fill-color-icon-disabled;
     @apply shrink-0;
+    + .@{grid-prefix-cls}-cell-text {
+      @apply w-auto;
+    }
   }
 
   .@{grid-prefix-cls}-thead-partition,
diff --git a/packages/theme-saas/src/steps/index.less b/packages/theme-saas/src/steps/index.less
index 6e5fb22267..88a209fd27 100644
--- a/packages/theme-saas/src/steps/index.less
+++ b/packages/theme-saas/src/steps/index.less
@@ -3,8 +3,6 @@
 @steps-prefix-cls: ~'@{css-prefix}steps';
 @steps-senior-prefix-cls: ~'@{css-prefix}steps-senior';
 @steps-line-prefix-cls: ~'@{css-prefix}steps-line';
-@timeline-prefix-cls: ~'@{css-prefix}timeline';
-@timeline-item-prefix-cls: ~'@{timeline-prefix-cls}-item';
 @default-color: theme('colors.color.text.primary');
 @active-color: theme('colors.color.brand.DEFAULT');
 @disabled-color: theme('colors.color.text.disabled');
@@ -101,6 +99,7 @@
       @apply w-3;
       @apply h-3;
       @apply fill-current;
+      background: transparent;
     }
   }
 
@@ -205,15 +204,16 @@
     }
 
     .arrow {
-      @apply h-0;
-      @apply w-0;
+      @apply h-8;
+      @apply ~'w-1.5';
       @apply absolute;
       @apply border-color-text-inverse;
       @apply border-r-0;
       @apply border-solid;
-      border-top-width: var(--ti-spacing-4, 1rem);
-      border-bottom-width: var(--ti-spacing-4, 1rem);
-      border-left-width: var(--ti-spacing-1_5, 0.375rem);
+      @apply box-border;
+      border-top-width: var(--aui-spacing-4, 1rem);
+      border-bottom-width: var(--aui-spacing-4, 1rem);
+      border-left-width: var(--aui-spacing-1_5, 0.375rem);
     }
 
     .left-arrow {
@@ -285,6 +285,7 @@
         @apply ~'w-2.5';
         @apply ~'h-2.5';
         @apply fill-current;
+        background: transparent;
       }
     }
 
@@ -325,9 +326,12 @@
       @apply h-12;
 
       .arrow {
-        border-top-width: var(--ti-spacing-6, 1.5rem);
-        border-bottom-width: var(--ti-spacing-6, 1.5rem);
-        border-left-width: var(--ti-spacing-2, 0.5625rem);
+        @apply h-12;
+        width: 9px;
+        @apply box-border;
+        border-top-width: var(--aui-spacing-6, 1.5rem);
+        border-bottom-width: var(--aui-spacing-6, 1.5rem);
+        border-left-width: var(--aui-spacing-2, 0.5625rem);
       }
 
       .@{steps-prefix-cls}-content {
@@ -379,7 +383,7 @@
       @apply opacity-0;
 
       &.not-vertical {
-        @apply ~'min-w-[theme(spacing.6)]';
+        @apply ~"min-w-[theme(spacing.6)]";
         @apply hidden;
         @apply mr-4;
       }
@@ -390,15 +394,15 @@
       @apply flex-auto;
 
       &.not-vertical {
-        @apply ~'min-w-[theme(spacing.6)]';
+        @apply ~"min-w-[theme(spacing.6)]";
         @apply mr-4;
       }
     }
   }
 
   .item-number {
-    @apply w-6;
-    @apply h-6;
+    @apply w-full;
+    @apply h-full;
     @apply flex;
     @apply items-center;
     @apply justify-center;
@@ -408,7 +412,6 @@
     @apply bg-color-bg-1;
     @apply relative;
     @apply z-10;
-    @apply box-border;
   }
 
   .item-circle {
@@ -420,7 +423,6 @@
     @apply bg-color-bg-1;
     @apply font-normal;
     @apply absolute;
-    @apply box-border;
   }
 
   .@{steps-prefix-cls}-icon {
@@ -430,7 +432,6 @@
     @apply flex;
     @apply relative;
     @apply z-10;
-    @apply leading-none;
   }
 
   .@{steps-prefix-cls}-main {
@@ -451,7 +452,7 @@
     @apply text-center;
 
     &.not-vertical {
-      @apply ~'min-w-[theme(spacing.32)]';
+      @apply ~"min-w-[theme(spacing.32)]";
       @apply max-w-xs;
       @apply mr-4;
       @apply text-left;
@@ -465,7 +466,7 @@
       @apply items-center;
       @apply justify-center;
       @apply rounded-full;
-      @apply border border-current border-solid;
+      @apply border border-current;
       @apply bg-color-bg-3;
       @apply text-color-text-placeholder;
       @apply text-sm;
@@ -493,6 +494,7 @@
 
       .icon-finish {
         @apply fill-color-brand;
+        background-color: transparent;
 
         &.active {
           @apply fill-color-bg-1;
@@ -501,6 +503,7 @@
 
       .icon-warn {
         @apply fill-color-error;
+        background-color: transparent;
       }
     }
 
@@ -592,7 +595,7 @@
     }
 
     .line {
-      @apply border-t border-t-color-border border-solid;
+      @apply border-t border-t-color-border;
       @apply flex-auto;
     }
 
@@ -601,7 +604,7 @@
     }
 
     .left-line.not-vertical {
-      @apply ~'min-w-[theme(spacing.6)]';
+      @apply ~"min-w-[theme(spacing.6)]";
       @apply hidden;
       @apply ml-4;
     }
@@ -616,7 +619,7 @@
       }
 
       &.not-vertical {
-        @apply ~'min-w-[theme(spacing.6)]';
+        @apply ~"min-w-[theme(spacing.6)]";
         @apply ml-4;
       }
     }
@@ -783,7 +786,7 @@
     @apply text-center;
 
     &.not-vertical {
-      @apply ~'min-w-[theme(spacing.32)]';
+      @apply ~"min-w-[theme(spacing.32)]";
       @apply max-w-xs;
       @apply text-left;
     }
@@ -804,7 +807,7 @@
     }
 
     .line.not-vertical {
-      @apply ~'min-w-[theme(spacing.6)]';
+      @apply ~"min-w-[theme(spacing.6)]";
       @apply hidden;
       @apply ml-4;
     }
@@ -817,6 +820,8 @@
     }
 
     .item-number {
+      @apply w-full;
+      @apply h-full;
       @apply flex;
       @apply items-center;
       @apply justify-center;
@@ -912,60 +917,65 @@
 
   & &-advanced {
     & li {
-      @apply ~'leading-[theme(spacing.8)]';
+      @apply ~"leading-[theme(spacing.8)]";
       @apply inline-block;
+      @apply bg-color-bg-1;
       @apply relative;
       @apply cursor-pointer;
 
-      .label {
-        @apply border-r-0;
-        @apply flex;
-        @apply relative;
-        @apply no-underline;
-        @apply pl-8;
-        @apply pr-11;
-        color: @default-color;
-        @apply text-sm;
-        @apply ~'mr-[theme(spacing[1.5])]';
-        @apply bg-color-bg-5;
+      &:not(:last-child)::after {
+        @apply content-[''];
+        border-top: 16px solid transparent;
+        border-bottom: 16px solid transparent;
+        border-left: 6px solid theme('colors.color.bg.5');
+        @apply absolute;
+        @apply right-px;
+        @apply top-0;
+        @apply ~'z-[1]';
+      }
+      &:hover:not(:last-child)::after {
+        border-left-color: @active-color;
+      }
 
-        // background-color: blue;
+      &:not(:last-child)::before {
+        @apply content-[''];
+        border-top: 16px solid transparent;
+        border-bottom: 16px solid transparent;
+        border-left: 6px solid @default-color;
+        @apply absolute;
+        @apply right-0;
+        @apply top-0;
+      }
 
-        > span {
-          @apply w-full;
-          @apply h-full;
-          @apply text-ellipsis;
-          @apply whitespace-nowrap;
-          @apply overflow-hidden;
-        }
+      &.current:not(:last-child)::before,
+      &:hover:not(:last-child)::before {
+        border-left-color: @active-color;
       }
 
-      &:not(:last-child) .label::after {
+      &:not(:first-child) .label::after {
         @apply content-[''];
         border-top: 16px solid transparent;
         border-bottom: 16px solid transparent;
-        border-left: 6px solid theme('colors.color.bg.5');
-
+        border-left: 6px solid theme('colors.color.bg.1');
         @apply absolute;
-        @apply right-0;
+        @apply -left-px;
         @apply top-0;
         @apply ~'z-[1]';
-        @apply transform translate-x-full;
       }
 
       &:not(:first-child) .label::before {
         @apply content-[''];
         border-top: 16px solid transparent;
         border-bottom: 16px solid transparent;
-        border-left: 6px solid theme('colors.color.bg.1');
+        border-left: 6px solid @default-color;
         @apply absolute;
-        @apply ~'-left-[1px]';
+        @apply left-0;
         @apply top-0;
       }
 
-      &.current:not(:last-child) .label::after,
-      &:hover .label::after {
-        border-left: 6px solid theme('colors.color.brand.DEFAULT');
+      &.current:not(:first-child) .label::before,
+      &:hover:not(:first-child) .label::before {
+        border-left-color: @active-color;
       }
 
       &:first-child .label {
@@ -973,7 +983,7 @@
       }
 
       &.current {
-        .label.label {
+        .label {
           background: @active-color;
           @apply border;
           @apply border-solid;
@@ -981,6 +991,10 @@
           @apply text-color-text-inverse;
           @apply font-bold;
         }
+
+        &::after {
+          border-left-color: @active-color;
+        }
       }
 
       &:last-child .label {
@@ -994,6 +1008,28 @@
         @apply no-underline;
       }
 
+      .label {
+        @apply border;
+        @apply border-solid;
+        border-color: @default-color;
+        @apply border-r-0;
+        @apply flex;
+        @apply relative;
+        @apply no-underline;
+        @apply pl-8;
+        @apply pr-11;
+        color: @default-color;
+        @apply text-sm;
+        @apply mr-0;
+        > span {
+          @apply w-full;
+          @apply h-full;
+          @apply text-ellipsis;
+          @apply whitespace-nowrap;
+          @apply overflow-hidden;
+        }
+      }
+
       &:first-child {
         .label {
           @apply rounded-tl-sm;
@@ -1003,6 +1039,8 @@
 
       &:last-child {
         .label {
+          @apply border-r;
+          border-right-color: @default-color;
           @apply rounded-tr-sm;
           @apply rounded-br-sm;
           @apply mr-0;
@@ -1017,8 +1055,8 @@
         @apply leading-5;
         @apply cursor-pointer;
         @apply right-8;
-        @apply ~'top-1/2';
-        @apply ~'-translate-y-2/4';
+        @apply ~"top-1/2";
+        @apply ~"-translate-y-2/4";
         @apply flex;
         @apply absolute;
         svg {
@@ -1043,13 +1081,13 @@
       @apply inline-block;
       @apply text-xs;
       @apply font-normal;
-      @apply ~'h-4.5';
+      @apply ~"h-4.5";
       @apply leading-normal;
       @apply py-0 ~'px-1.5';
       @apply text-center;
       @apply whitespace-nowrap;
       @apply absolute;
-      @apply ~'-top-2.5';
+      @apply ~"-top-2.5";
       @apply right-8;
       @apply ~'z-[1]';
     }
@@ -1069,7 +1107,6 @@
 
   .line {
     @apply bg-color-border-separator;
-    @apply ~'w-[calc(100%-40px)]';
   }
 
   .icon {
@@ -1080,7 +1117,7 @@
     @apply relative;
     @apply text-sm;
     @apply text-center;
-    left: ~'calc(50% - 12px)';
+    // left: ~'calc(50% - 12px)';
     @apply top-0;
     @apply rounded-full;
     @apply bg-color-bg-1;
@@ -1091,29 +1128,56 @@
 
   .process-done {
     .icon {
-      @apply bg-color-bg-5;
+      @apply bg-color-bg-1;
       @apply w-6;
       @apply h-6;
       @apply leading-6;
       @apply text-2xl;
       color: @active-color;
 
-      .@{css-prefix}svg {
+      .fixicon {
         fill: @active-color;
         @apply align-baseline;
+        @apply border;
+        @apply border-solid;
+        border-color: @active-color;
         @apply rounded-full;
+        @apply p-1;
+
+        &.icon-error {
+          @apply p-0;
+          @apply fill-color-error;
+          @apply border-0;
+        }
+
+        &.icon-warning {
+          @apply p-0;
+          @apply fill-color-warning;
+          @apply border-0;
+        }
+
+        &.fixicons {
+          @apply p-0;
+          @apply border-0;
+        }
       }
     }
+
+    .line {
+      @apply bg-color-text-primary;
+    }
   }
 
   .node-description {
     @apply relative;
     @apply mt-3;
+    @apply overflow-hidden;
     @apply text-center;
 
     .name {
       @apply text-sm;
       @apply float-left;
+      @apply font-bold;
       @apply w-full;
       @apply leading-5;
     }
@@ -1160,7 +1224,7 @@
     .line {
       @apply h-px;
       @apply ~'left-1/2';
-      @apply ~'-top-3';
+      @apply ~"-top-3";
       @apply relative;
     }
 
@@ -1168,6 +1232,12 @@
       @apply w-0;
     }
 
+    .process-done {
+      .line {
+        @apply bg-color-text-primary;
+      }
+    }
+
     .icon {
       span {
         @apply inline-block;
@@ -1180,36 +1250,22 @@
 
     .timeline {
       @apply overflow-hidden;
-      @apply flex;
-      @apply h-24;
-
-      .@{timeline-prefix-cls}-item__pillar {
-        @apply flex flex-col;
-      }
 
       .line {
         @apply w-px;
-        @apply flex-1;
+        @apply float-left;
 
         .@{css-prefix}svg {
           @apply align-baseline;
         }
       }
 
-      &:last-child {
-        @apply h-auto;
-
-        .line {
-          @apply hidden;
-        }
-      }
-
       .date-time {
         @apply w-24;
-        @apply pr-3;
-        @apply pb-5;
-        @apply text-xs;
+        @apply float-left;
+        @apply pr-6;
         @apply text-right;
+        @apply text-xs;
 
         .time {
           @apply block;
@@ -1225,9 +1281,10 @@
 
       .name {
         @apply float-left;
+        @apply ml-6;
         @apply text-sm;
         @apply font-bold;
-        @apply ~'leading-6.5';
+        @apply ~"leading-6.5";
       }
 
       .icon {
@@ -1236,26 +1293,6 @@
     }
   }
 
-  .@{timeline-prefix-cls}-item {
-    .line {
-      @apply ~'w-[calc(100%-24px)]';
-
-      &.line-end {
-        @apply w-0;
-      }
-    }
-    .date-time {
-      @apply text-center;
-      @apply mb-1;
-    }
-
-    .node-description {
-      .name {
-        @apply font-bold;
-      }
-    }
-  }
-
   .process-wait {
     .icon {
       @apply border border-solid;
@@ -1280,7 +1317,7 @@
             height: 45px;
             @apply text-4xl;
             @apply relative;
-            @apply ~'-left-5';
+            @apply ~"-left-5";
           }
         }
 
@@ -1297,555 +1334,3 @@
     }
   }
 }
-
-// tiny 新增： 由于重构了time-line-item ，所以下面样式为tiny自有的样式。 此处的样式与上面的样式会互相影响，共同施加于time-line组件上。
-.@{timeline-prefix-cls} {
-  position: relative;
-
-  .line {
-    background: #dbdbdb;
-  }
-
-  .line-done {
-    background: #191919;
-  }
-
-  .icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    left: calc(50% - 12px);
-    top: 0;
-    width: 24px;
-    height: 24px;
-    border: 1px solid #c9c9c9;
-    border-radius: 50%;
-    box-sizing: border-box;
-    overflow: hidden;
-    color: #aeaeae;
-    cursor: pointer;
-    background-color: #d9d9d9;
-    z-index: 15;
-    padding: 2px;
-
-    &[class*=~'icon-'] {
-      background-color: #fff;
-    }
-
-    &.icon-success {
-      border-color: #0067d1;
-
-      .fixicon {
-        fill: #0067d1;
-      }
-    }
-
-    &.icon-warning {
-      background-color: #d19f00 !important;
-      border-color: #d19f00;
-
-      .fixicon {
-        fill: #fff;
-      }
-    }
-
-    &.icon-error {
-      border-color: #e02128;
-
-      .fixicon {
-        fill: #e02128;
-      }
-    }
-
-    .fixicon,
-    .fixicons {
-      width: 20px;
-      height: 20px;
-      background-color: transparent;
-      padding: 2px;
-    }
-
-    &.fixicons {
-      padding: 0;
-      left: 0;
-      border: none;
-    }
-
-    .number {
-      display: inline-block;
-    }
-  }
-
-  .date-time {
-    text-align: center;
-    color: #8a8e99;
-    font-size: 12px;
-    margin-bottom: 6px;
-  }
-
-  .@{steps-prefix-cls}__node {
-    position: relative;
-  }
-
-  .process-done {
-    .node-description {
-      color: #333;
-    }
-
-    .icon {
-      color: #0067d1;
-      fill: #0067d1;
-      border-color: #0067d1;
-      background-color: #fff;
-
-      .icon-yes {
-        fill: #0067d1;
-        font-size: 14px;
-        border-radius: 50%;
-      }
-    }
-
-    &.@{timeline-item-prefix-cls} .dot-container .dot {
-      border-color: #0067d1;
-      background-color: #fff;
-    }
-  }
-
-  .process-current {
-    .icon {
-      color: #fff;
-      font-size: 12px;
-      border-color: #0067d1;
-      background: #0067d1;
-
-      .fixicons {
-        fill: #fff;
-      }
-    }
-
-    &.@{timeline-item-prefix-cls} .dot-container .dot {
-      background-color: #0067d1;
-    }
-  }
-
-  .process-error {
-    cursor: not-allowed;
-
-    .icon {
-      flex-shrink: 0;
-      color: #e02128;
-      border-color: #e02128;
-      background-color: #e02128;
-
-      .icon-wrap {
-        font-size: 0;
-      }
-
-      svg {
-        fill: #fff;
-        font-size: 14px;
-      }
-    }
-
-    &.@{timeline-item-prefix-cls} .dot-container .dot {
-      background-color: #e02128;
-    }
-
-    &.normal .node-description {
-      .name,
-      & div.name {
-        color: #e02128;
-      }
-    }
-  }
-
-  .process-disabled {
-    cursor: not-allowed;
-
-    .icon {
-      background-color: #f5f5f5;
-      border-color: #c9c9c9;
-
-      .number {
-        color: #c9c9c9;
-      }
-    }
-
-    &.@{timeline-item-prefix-cls} .dot-container .dot {
-      background-color: #f5f5f5;
-    }
-
-    &.normal .node-description,
-    .@{timeline-item-prefix-cls}__content {
-      .name,
-      & div.name {
-        color: #777;
-      }
-    }
-  }
-
-  .reverse {
-    .process-current {
-      .line {
-        background: #0067d1;
-      }
-    }
-  }
-
-  & .process-wait {
-    .name {
-      color: #aeaeae !important;
-    }
-
-    .icon {
-      background-color: #fff;
-    }
-  }
-
-  & .@{steps-prefix-cls}-normal {
-    .normal {
-      display: block;
-      position: relative;
-      font-size: 12px;
-    }
-
-    .icon {
-      span {
-        display: inline-block;
-      }
-    }
-
-    .name {
-      font-size: 14px;
-      font-weight: 700;
-      line-height: 20px;
-      color: #191919;
-    }
-
-    &.process-wait {
-      .name {
-        color: #aeaeae;
-      }
-    }
-
-    &.text-right {
-      display: inline-flex;
-      align-items: center;
-      width: 100%;
-      padding: 0;
-      margin: 0;
-
-      .normal {
-        display: inline-flex;
-        align-items: center;
-        overflow: hidden;
-
-        .step-icon {
-          top: 0;
-          left: 0;
-          flex-shrink: 0;
-        }
-
-        .node-description {
-          display: flex;
-          position: relative;
-          margin-left: 4px;
-          flex: 1 0 auto;
-          align-items: center;
-
-          .name {
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            margin-right: 8px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            word-break: break-all;
-            white-space: normal;
-            text-align: left;
-            max-width: 250px;
-          }
-        }
-
-        .line {
-          flex: 1;
-          height: 1px;
-          margin-left: 0;
-
-          &.line-end {
-            flex: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          padding-left: 0px;
-        }
-
-        &:not(:last-child) {
-          flex: 1;
-        }
-
-        &.no-flex {
-          flex: none;
-        }
-      }
-    }
-
-    &.text-bottom {
-      display: flex;
-
-      .node-description {
-        position: relative;
-        text-align: center;
-        margin-top: 12px;
-
-        .name {
-          font-size: 14px;
-          float: left;
-          width: 100%;
-        }
-
-        .status {
-          font-size: 12px;
-          float: left;
-          width: 100%;
-        }
-      }
-
-      .line {
-        width: calc(100% - 20px - 0px * 2);
-        height: 1px;
-        left: 50%;
-        top: 12px;
-        position: absolute;
-
-        &.line-end {
-          width: 0;
-        }
-      }
-    }
-
-    .@{timeline-item-prefix-cls}__description {
-      position: absolute;
-      bottom: 0;
-      transform: translateY(100%);
-      min-width: 100px;
-      text-align: left;
-    }
-
-    .process-current {
-      .node-description .name {
-        color: #0067d1;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .show-divider {
-    .@{timeline-item-prefix-cls} {
-      padding-bottom: 22px;
-
-      &.process-current {
-        &::after {
-          content: '';
-          display: inline-block;
-          position: absolute;
-          bottom: 0;
-          left: 3px;
-          border: 7px solid transparent;
-          border-top: none;
-          border-bottom-color: #0067d1;
-        }
-      }
-
-      &:first-child {
-        &.process-current::after {
-          content: '';
-          display: inline-block;
-          position: absolute;
-          bottom: 0;
-          left: 3px;
-          border: 7px solid transparent;
-          border-top: none;
-          border-bottom-color: #0067d1;
-        }
-      }
-    }
-
-    & + .@{steps-prefix-cls}__bottom-divider {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 1px;
-      margin-top: calc(16px - 4px);
-      background-color: #d9d9d9;
-    }
-  }
-
-  & .@{steps-prefix-cls}-timeline {
-    font-size: 14px;
-    color: #333;
-
-    &.@{timeline-prefix-cls}__shape-dot {
-      padding-top: 4px;
-
-      .timeline {
-        .@{timeline-item-prefix-cls}__pillar .line {
-          width: 1px;
-          margin-block: 4px;
-          background-color: #d9d9d9;
-        }
-
-        .@{timeline-item-prefix-cls}__content {
-          margin-left: 20px;
-        }
-
-        &.timeline-item--primary .dot {
-          border-color: #d9d9d9;
-          background-color: #d9d9d9;
-        }
-
-        &.timeline-item--success .dot {
-          border-color: #50d4ab;
-          background-color: #50d4ab;
-        }
-
-        &.timeline-item--warning .dot {
-          border-color: #d19f00;
-          background-color: #d19f00;
-        }
-
-        &.timeline-item--danger .dot {
-          border-color: #f66f6a;
-          background-color: #f66f6a;
-        }
-
-        &.timeline-item--info .dot {
-          border-color: #5e7ce0;
-          background-color: #5e7ce0;
-        }
-
-        .@{timeline-item-prefix-cls}__content {
-          margin-top: -5px;
-
-          .name {
-            margin-bottom: 4px;
-          }
-
-          .time {
-            color: #8a8e99;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-
-    .timeline {
-      display: flex;
-      align-items: flex-start;
-
-      &.process-done {
-        color: #333;
-      }
-
-      &.process-current {
-        color: #0067d1;
-      }
-
-      &:last-child {
-        .@{timeline-item-prefix-cls}__pillar .line {
-          flex: 0;
-        }
-      }
-
-      .@{timeline-item-prefix-cls}__pillar {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        align-self: stretch;
-        width: 8px;
-
-        .line {
-          width: 1px;
-          flex: 1;
-
-          .@{css-prefix}svg {
-            vertical-align: baseline;
-          }
-        }
-
-        .icon {
-          left: 0;
-        }
-      }
-
-      .date-time {
-        padding-right: 12px;
-        padding-bottom: 20px;
-        text-align: right;
-
-        .time {
-          display: block;
-          line-height: 1;
-        }
-
-        .date {
-          display: block;
-          line-height: 1;
-          margin-bottom: 4px;
-        }
-      }
-
-      .dot-container {
-        position: relative;
-
-        .fixicons {
-          transform: translateY(-50%);
-        }
-      }
-
-      .dot {
-        display: block;
-        width: 8px;
-        height: 8px;
-        border: 1px solid #d9d9d9;
-        border-radius: 50%;
-        box-sizing: border-box;
-        background-color: #d9d9d9;
-      }
-
-      .@{timeline-item-prefix-cls}__content {
-        padding-bottom: 20px;
-        margin-left: 20px;
-      }
-
-      .icon {
-        top: 0;
-      }
-    }
-  }
-
-  &--mini {
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-
-    .@{css-prefix}svg,
-    span,
-    .process-done .icon .@{css-prefix}svg,
-    .process-done .icon span,
-    .process-error .icon .@{css-prefix}svg {
-      font-size: 12px;
-    }
-
-    .node-description {
-      .name,
-      .status {
-        font-size: 12px;
-      }
-    }
-  }
-}
diff --git a/packages/theme/src/badge/index.less b/packages/theme/src/badge/index.less
index fc7a46e591..72f39650d4 100644
--- a/packages/theme/src/badge/index.less
+++ b/packages/theme/src/badge/index.less
@@ -33,6 +33,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
+  margin-left: 4px;
 
   &:empty {
     display: none;
diff --git a/packages/theme/src/bulletin-board/smb-theme.js b/packages/theme/src/bulletin-board/smb-theme.js
new file mode 100644
index 0000000000..1ca8263456
--- /dev/null
+++ b/packages/theme/src/bulletin-board/smb-theme.js
@@ -0,0 +1,3 @@
+export const tinyBulletinBoardSmbTheme = {
+  'ti-bulletin-board-tabs-item-hover-text-color': '#1890ff'
+}
diff --git a/packages/theme/src/calendar/smb-theme.js b/packages/theme/src/calendar/smb-theme.js
new file mode 100644
index 0000000000..2f62d7ba44
--- /dev/null
+++ b/packages/theme/src/calendar/smb-theme.js
@@ -0,0 +1,3 @@
+export const tinyCalendarSmbTheme = {
+  'ti-calendar-text-color-primary': '#1890ff'
+}
diff --git a/packages/theme/src/card/index.less b/packages/theme/src/card/index.less
index bb3e894083..5ebe9c2e6f 100644
--- a/packages/theme/src/card/index.less
+++ b/packages/theme/src/card/index.less
@@ -289,12 +289,11 @@
       }
     }
   }
-
   .@{input-prefix-cls} {
     &__inner {
       border: none;
       border-radius: 6px;
-      background-color: #fafafa;
+      background-color: #FAFAFA;
     }
   }
 }
diff --git a/packages/theme/src/fall-menu/smb-theme.js b/packages/theme/src/fall-menu/smb-theme.js
new file mode 100644
index 0000000000..e9659d3303
--- /dev/null
+++ b/packages/theme/src/fall-menu/smb-theme.js
@@ -0,0 +1,9 @@
+export const tinyFallMenuSmbTheme = {
+  'ti-fall-menu-bg-color-normal': '#5e7ce0',
+  'ti-fall-menu-bg-color-hover': '#7693f5',
+  'ti-fall-menu-slot-text-color': '#fff',
+  'ti-fall-menu-slot-bg-color': '#fff',
+  'ti-fall-menu-box-text-color': '#5e7ce0',
+  'ti-fall-menu-box-title-text-color': '#adb0b8',
+  'ti-fall-menu-box-hover-text-color': '#7693f5'
+}
diff --git a/packages/theme/src/fluent-editor/index.less b/packages/theme/src/fluent-editor/index.less
index e7d1bf8811..8b151da785 100644
--- a/packages/theme/src/fluent-editor/index.less
+++ b/packages/theme/src/fluent-editor/index.less
@@ -96,13 +96,10 @@
         }
 
         .ql-picker-options {
-          padding: 4px 0;
+          padding: 3px 5px;
           border: none;
 
           > .ql-picker-item {
-            height: 24px;
-            line-height: 24px;
-            padding: 0 8px;
             color: #191919;
 
             &:hover {
@@ -116,7 +113,7 @@
           .ql-picker-options {
             > .ql-picker-item {
               width: 100%;
-              padding: 0 6px;
+              padding: 4px 6px 0 6px;
             }
           }
         }
@@ -144,7 +141,7 @@
 
       .ql-align.ql-picker {
         .ql-picker-label {
-          padding: 0 6px;
+          padding: 4px 6px 0 6px;
         }
       }
 
@@ -186,6 +183,7 @@
         }
         &.ql-fullscreen {
           svg {
+            width: 12px;
             font-size: 12px;
           }
         }
diff --git a/packages/theme/src/form-item/index.less b/packages/theme/src/form-item/index.less
index 710d82a35a..04f88d66fb 100644
--- a/packages/theme/src/form-item/index.less
+++ b/packages/theme/src/form-item/index.less
@@ -139,6 +139,16 @@
     line-height: var(--ti-form-item-label-line-height);
     .clearfix();
 
+    .@{input-prefix-cls},
+    .@{rate-prefix-cls},
+    .@{select-prefix-cls},
+    .@{css-prefix}checkbox,
+    .@{css-prefix}radio,
+    .@{css-prefix}link,
+    .@{css-prefix}numeric {
+      vertical-align: bottom;
+    }
+
     .@{input-prefix-cls} {
       display: inline-block;
       &.@{range-editor-prefix-cls}.@{input-prefix-cls}__inner {
@@ -151,7 +161,6 @@
     }
 
     .@{rate-prefix-cls} {
-      vertical-align: middle;
       &__text {
         line-height: 1.5;
       }
@@ -167,8 +176,10 @@
 
     .@{css-prefix}checkbox,
     .@{css-prefix}radio {
-      vertical-align: middle;
-      line-height: 30px;
+      line-height: var(--ti-form-item-label-line-height);
+    }
+    .@{css-prefix}slider-container {
+      height: var(--ti-form-item-label-line-height);
     }
     .@{css-prefix}checkbox-group {
       min-height: var(--ti-form-item-label-line-height);
@@ -194,7 +205,7 @@
 
     .validate-icon {
       fill: var(--ti-form-item-error-text-color);
-      margin-right: 8px;
+      margin-right: var(--ti-form-item-error-icon-margin-right);
     }
     .@{form-item-prefix-cls}__validate-message {
       vertical-align: middle;
diff --git a/packages/theme/src/form-item/vars.less b/packages/theme/src/form-item/vars.less
index 26bcae6708..b13a1c4112 100644
--- a/packages/theme/src/form-item/vars.less
+++ b/packages/theme/src/form-item/vars.less
@@ -44,13 +44,15 @@
   // 小型尺寸表单的行间距
   --ti-form-item-margin-bottom-default: var(--ti-common-space-5x, 20px);
   // 迷你尺寸表单的行间距
-  --ti-form-item-margin-bottom-mini: var(--ti-common-space-2x, 8px);
+  --ti-form-item-margin-bottom-mini: var(--ti-common-space-4x, 16px);
   // 小型尺寸表单的行间距
-  --ti-form-item-margin-bottom-small: var(--ti-common-space-2x, 8px);
+  --ti-form-item-margin-bottom-small: var(--ti-common-space-5x, 20px);
   // 中等尺寸表单的行间距
-  --ti-form-item-margin-bottom-medium: var(--ti-common-space-3x, 12px);
+  --ti-form-item-margin-bottom-medium: var(--ti-common-space-5x, 20px);
   // 表单校验错误时星号的显示(hide)
   --ti-form-item-error-star-display: inline-block;
+  // 表单校验图标右侧外边距
+  --ti-form-item-error-icon-margin-right: var(--ti-common-space-base, 4px);
   // 表单校验行内错误左侧外边距
   --ti-form-item-error-inline-margin-left: calc(var(--ti-common-space-base, 4px) * 2.5);
   // 表单校验块级错误消息上侧内边距
diff --git a/packages/theme/src/grid/header.less b/packages/theme/src/grid/header.less
index dc701250dc..9d1e0dcc83 100644
--- a/packages/theme/src/grid/header.less
+++ b/packages/theme/src/grid/header.less
@@ -82,6 +82,13 @@
       height: 10px;
       display: block;
     }
+    + .@{grid-prefix-cls}-cell-text {
+      width: auto;
+    }
+  }
+
+  .@{grid-prefix-cls}-cell-text {
+    width: 100%;
   }
 
   .@{grid-prefix-cls}-edit-icon {
@@ -89,6 +96,9 @@
     margin-right: 4px;
     order: -1;
     fill: var(--ti-grid-column-icon-text-color);
+    + .@{grid-prefix-cls}-cell-text {
+      width: auto;
+    }
   }
 
   .@{grid-prefix-cls}-thead-partition,
diff --git a/packages/theme/src/link-menu/smb-theme.js b/packages/theme/src/link-menu/smb-theme.js
new file mode 100644
index 0000000000..730e618187
--- /dev/null
+++ b/packages/theme/src/link-menu/smb-theme.js
@@ -0,0 +1,3 @@
+export const tinyLinkMenuSmbTheme = {
+  'ti-link-menu-nav-item-text-color': '#191919'
+}
diff --git a/packages/theme/src/pop-upload/index.less b/packages/theme/src/pop-upload/index.less
index 5dd945cb37..c2b68ce94c 100644
--- a/packages/theme/src/pop-upload/index.less
+++ b/packages/theme/src/pop-upload/index.less
@@ -63,6 +63,10 @@
     margin: 12px 0;
   }
 
+  &__dialog-tips-item {
+    margin: 4px 0;
+  }
+
   &__dialog-table {
     font-size: var(--ti-popupload-dialog-table-font-size);
     height: var(--ti-popupload-dialog-table-height);
diff --git a/packages/theme/src/radio-button/smb-theme.js b/packages/theme/src/radio-button/smb-theme.js
new file mode 100644
index 0000000000..db4cba0b09
--- /dev/null
+++ b/packages/theme/src/radio-button/smb-theme.js
@@ -0,0 +1,8 @@
+export const tinyRadioButtonSmbTheme = {
+  'ti-radio-button-checked-normal-bg-color': '#1476FF',
+  'ti-radio-button-checked-normal-border-color': '#1476FF',
+  'ti-radio-button-checked-normal-box-shadow': '#1476FF',
+  'ti-radio-button-checked-hover-bg-color': '#1293ff',
+  'ti-radio-button-checked-hover-border-color': '#1293ff',
+  'ti-radio-button-checked-hover-box-shadow': '#1293ff'
+}
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
index 0e9cf68ffb..c924e7414c 100644
--- a/packages/theme/src/rich-text-editor/index.less
+++ b/packages/theme/src/rich-text-editor/index.less
@@ -392,7 +392,7 @@
 
     p {
       margin: 0;
-      line-height: 1;
+      line-height: 1.5;
 
       &[level='1'] {
         line-height: 1;
diff --git a/packages/theme/src/search/index.less b/packages/theme/src/search/index.less
index e27022f197..aa6f108a65 100644
--- a/packages/theme/src/search/index.less
+++ b/packages/theme/src/search/index.less
@@ -27,6 +27,36 @@
   font-size: var(--ti-search-font-size);
   width: 100%;
 
+  &.is-disabled &__input {
+    cursor: not-allowed;
+
+    .placeholder(@color: var(--ti-search-disabled-text-color));
+  }
+
+  &.is-disabled > &__line {
+    cursor: not-allowed;
+    border: 1px solid var(--ti-search-disabled-border-color);
+    color: var(--ti-search-disabled-border-color);
+    background: var(--ti-search-disabled-bg-color);
+
+    &:hover {
+      border-color: var(--ti-search-disabled-border-color);
+    }
+  }
+
+  &.is-disabled &__prefix,
+  &.is-disabled &__suffix,
+  &.is-disabled &__input-btn {
+    .@{css-prefix}svg {
+      cursor: not-allowed;
+
+      &,
+      &:hover {
+        fill: var(--ti-search-disabled-text-color);
+      }
+    }
+  }
+
   & &__line {
     display: flex;
     align-items: center;
diff --git a/packages/theme/src/search/smb-theme.js b/packages/theme/src/search/smb-theme.js
index ed2eba37f5..320dccddad 100644
--- a/packages/theme/src/search/smb-theme.js
+++ b/packages/theme/src/search/smb-theme.js
@@ -4,6 +4,6 @@ export const tinySearchSmbTheme = {
   'ti-search-input-btn-icon-position-right': 'var(--ti-common-space-3x)',
   'ti-search-selector-box-shadow': 'var(--ti-common-shadow-3-up)',
   'ti-search-input-btn-icon-size': 'var(--ti-common-font-size-2)',
-  'ti-search-input-placeholder-color': 'var(--ti-common-color-placeholder)',
-  'ti-search-input-left-svg-margin-right': '-8px'
+  'ti-search-input-placeholder-text-color': 'var(--ti-common-color-placeholder)',
+  'ti-search-input-left-svg-margin-right': 'calc(0px - var(--ti-common-space-2x))'
 }
diff --git a/packages/theme/src/search/vars.less b/packages/theme/src/search/vars.less
index 241f7936eb..1cab8342fc 100644
--- a/packages/theme/src/search/vars.less
+++ b/packages/theme/src/search/vars.less
@@ -82,4 +82,10 @@
   --ti-search-list-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
   // 搜索下拉框选项水平内边距
   --ti-search-selector-list-padding-horizontal: var(--ti-common-space-10, 10px);
+  // 边框禁用色
+  --ti-search-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
+  // 图标和占位文本禁用色
+  --ti-search-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
+  // 背景禁用色
+  --ti-search-disabled-bg-color: var(--ti-common-bg-color-active, #0000000d);
 }
diff --git a/packages/theme/src/switch/index.less b/packages/theme/src/switch/index.less
index e0805f08f5..59761c414e 100644
--- a/packages/theme/src/switch/index.less
+++ b/packages/theme/src/switch/index.less
@@ -79,7 +79,10 @@
     border-color: var(--ti-switch-checked-disabled-border-color);
   }
 
-  &::after {
+  &__button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     content: '';
     width: var(--ti-switch-dot-size);
     height: var(--ti-switch-dot-size);
@@ -104,9 +107,9 @@
       text-align: center;
       overflow: hidden;
     }
+  }
 
-    &:after {
-      left: calc(100% - var(--ti-switch-dot-offset));
-    }
+  &&-checked .@{switch-prefix-cls}__button {
+    left: calc(100% - var(--ti-switch-dot-offset));
   }
 }
diff --git a/packages/theme/src/tabs/index.less b/packages/theme/src/tabs/index.less
index 49c8a3ecde..7ad5428d00 100644
--- a/packages/theme/src/tabs/index.less
+++ b/packages/theme/src/tabs/index.less
@@ -34,6 +34,9 @@
   &__nav-wrap {
     overflow: hidden;
   }
+  &__nav-scroll {
+    margin-right: 16px;
+  }
 
   &__header {
     padding: 0;
@@ -221,9 +224,10 @@
     }
   }
 
-  &__item-separator-space {
-    padding-left: 14px;
-    padding-right: 14px;
+  & &__item-separator-space {
+    height: var(--ti-tabs-header-separator-item-height);
+    padding-left: calc(var(--ti-tabs-header-separator-padding-horizontal) + 1px);
+    padding-right: var(--ti-tabs-header-separator-padding-horizontal);
   }
 
   &__item-title {
@@ -247,6 +251,10 @@
     align-items: center;
     position: relative;
 
+    &-separator-space {
+      color: var(--ti-tabs-header-separator-normal-text-color);
+    }
+
     &:focus,
     &:active {
       outline: 0;
@@ -265,6 +273,10 @@
     // aurora新增
     &.is-active {
       font-weight: var(--ti-tabs-header-font-weight-active);
+
+      &.is-disabled:hover {
+        font-weight: var(--ti-tabs-header-font-weight-active);
+      }
     }
 
     // smb新增
@@ -273,8 +285,12 @@
     }
 
     &.is-disabled {
+      cursor: not-allowed;
       color: var(--ti-tabs-item-disabled-text-color);
-      cursor: default;
+
+      &:hover {
+        font-weight: normal;
+      }
 
       .@{tabs-prefix-cls}__icon-close {
         &,
@@ -602,6 +618,15 @@
       line-height: var(--ti-tabs-button-card-item-height);
       border: 1px solid transparent;
 
+      &.is-disabled {
+        color: var(--ti-tabs-item-disabled-text-color);
+
+        &:hover {
+          font-weight: normal;
+          color: var(--ti-tabs-item-disabled-text-color);
+        }
+      }
+
       &:hover {
         color: var(--ti-tabs-button-card-item-hover-text-color);
         font-weight: var(--ti-tabs-button-card-font-weight);
@@ -665,12 +690,34 @@
     .@{tabs-prefix-cls}__item {
       height: var(--ti-tabs-small-height);
       line-height: var(--ti-tabs-small-height);
+      font-size: var(--ti-tabs-small-item-font-size);
+
+      &.@{tabs-prefix-cls}__item-separator-space {
+        height: var(--ti-tabs-small-separator-height);
+        line-height: var(--ti-tabs-small-separator-height);
+      }
     }
+
     .@{tabs-prefix-cls}__nav-prev,
     .@{tabs-prefix-cls}__nav-next {
       line-height: var(--ti-tabs-small-height);
       font-size: var(--ti-tabs-prev-next-btn-icon-size);
     }
+
+    .@{tabs-prefix-cls}__nav.is-show-active-bar
+      .@{tabs-prefix-cls}__item:not(.@{tabs-prefix-cls}__item-separator-space) {
+      margin-right: var(--ti-tabs-small-item-margin-right);
+    }
+
+    &.@{tabs-prefix-cls}--top .@{tabs-prefix-cls}__item-separator {
+      left: calc(var(--ti-tabs-small-separator-padding-horizontal) + 1px);
+    }
+
+    &.@{tabs-prefix-cls}--button-card .@{tabs-prefix-cls}__item {
+      height: var(--ti-tabs-small-button-card-height);
+      line-height: var(--ti-tabs-small-button-card-height);
+      font-size: var(--ti-tabs-small-button-card-font-size);
+    }
   }
 
   // 竖排tab页签
@@ -1230,9 +1277,22 @@
     height: 12px;
     display: inline-block;
     position: relative;
-    left: 14px;
+    left: calc(var(--ti-tabs-header-separator-padding-horizontal) + 1px);
     top: 2px;
-    background-color: #dfdfdf;
+    background-color: var(--ti-tabs-header-separator-bg-color);
+  }
+
+  &&--top &--button-card &__item &__item-separator {
+    height: 16px;
+  }
+
+  &&--top &--button-card &__item:last-child &__item-separator,
+  &&--top &--button-card &__item.is-active &__item-separator {
+    display: none;
+  }
+
+  &&--top &--button-card &__item:not(.is-active) &__item-separator {
+    left: 1px;
   }
 
   &&--top,
@@ -1245,12 +1305,21 @@
     }
 
     // 这里会涉及到tiny-tabs__item-base的样式，尽量不要同步
-    &:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card) .@{tabs-prefix-cls}__item {
-      padding-left: 0;
+    &.@{tabs-prefix-cls}--small:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card)
+      .@{tabs-prefix-cls}__item {
+      &-separator-space {
+        padding-left: var(--ti-tabs-small-separator-padding-horizontal);
+        padding-right: var(--ti-tabs-small-separator-padding-horizontal);
+        margin-right: 1px;
+      }
+    }
 
+    // 这里会涉及到tiny-tabs__item-base的样式，尽量不要同步
+    &:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card) .@{tabs-prefix-cls}__item {
       &-separator-space {
-        padding-left: 14px;
-        padding-right: 14px;
+        padding-left: var(--ti-tabs-header-separator-padding-horizontal);
+        padding-right: var(--ti-tabs-header-separator-padding-horizontal);
+        margin-right: 1px;
 
         &:nth-child(2) {
           margin-left: 0px;
@@ -1264,10 +1333,6 @@
       &.is-left {
         padding: 0 24px;
       }
-
-      &:nth-child(2) {
-        padding-left: 0;
-      }
     }
   }
 
diff --git a/packages/theme/src/tabs/smb-theme.js b/packages/theme/src/tabs/smb-theme.js
index 0ccb0b4baf..d031804d3e 100644
--- a/packages/theme/src/tabs/smb-theme.js
+++ b/packages/theme/src/tabs/smb-theme.js
@@ -1,5 +1,5 @@
 export const tinyTabsSmbTheme = {
-  'ti-tabs-height': 'var(--ti-common-size-13x)',
+  'ti-tabs-height': 'var(--ti-common-size-12x)',
   'ti-tabs-dark-item-height': 'calc(var(--ti-common-size-base) * 11.75)',
   'ti-tabs-header-font-weight-active': 'var(--ti-common-font-weight-bold)',
   'ti-tabs-item-font-size': 'var(--ti-common-font-size-2)',
@@ -11,5 +11,6 @@ export const tinyTabsSmbTheme = {
   'ti-tabs-more-left-box-height': 'calc(var(--ti-common-size-base) * 13)',
   'ti-tabs-dropdown-more-margin-top': 'var(--ti-common-space-base)',
   'ti-tabs-content-margin-vertical': 'var(--ti-common-space-3x)',
-  'ti-tabs-content-margin-horizontal': 'var(--ti-common-space-0)'
+  'ti-tabs-content-margin-horizontal': 'var(--ti-common-space-0)',
+  'ti-tabs-dark-bg-color-hover': '#191919'
 }
diff --git a/packages/theme/src/tabs/vars.less b/packages/theme/src/tabs/vars.less
index 83ca07880d..80122da384 100644
--- a/packages/theme/src/tabs/vars.less
+++ b/packages/theme/src/tabs/vars.less
@@ -29,8 +29,8 @@
   --ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder, #adb0b8);
   // 标签栏更多文字悬浮文本色
   --ti-tabs-more-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
-  // 标签页选项禁用色(hide)
-  --ti-tabs-item-disabled-text-color: #b4bccc;
+  // 标签页选项禁用色
+  --ti-tabs-item-disabled-text-color: var(--ti-common-color-text-link-darkbg-hover, #beccfa);
   // 标签页新增按钮圆角
   --ti-tabs-new-border-radius: var(--ti-common-border-radius-normal, 2px);
   // 标签页下拉框背景色(hide)
@@ -45,12 +45,32 @@
   --ti-tabs-height: var(--ti-common-size-10x, 40px);
   // card类型未选中项文本色
   --ti-tabs-header-font-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
+  // 分隔符类型未选中项文本色
+  --ti-tabs-header-separator-normal-text-color: var(--ti-common-color-text-secondary, #575d6c);
+  // 分隔符类型标签项水平内边距
+  --ti-tabs-header-separator-padding-horizontal: var(--ti-common-space-4x, 16px);
+  // 分隔符类型标签项高度
+  --ti-tabs-header-separator-item-height: var(--ti-common-space-8x, 32px);
+  // 分隔符背景色
+  --ti-tabs-header-separator-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #bfbfbf);
   // card类型选中项下边框色(hide)
   --ti-tabs-dropdown-li-border-color: #e6e6e6;
   // card类型选中项顶部块背景色
   --ti-tabs-header-top-bar-active-bg-color: var(--ti-common-color-line-active, #5e7ce0);
-  // card类型samll尺寸标签栏高度
-  --ti-tabs-small-height: var(--ti-common-size-9x, 36px);
+  // card类型small尺寸标签栏高度
+  --ti-tabs-small-height: var(--ti-common-size-10x, 40px);
+  // 分隔符类型small尺寸标签栏高度
+  --ti-tabs-small-separator-height: var(--ti-common-line-height-2, 24px);
+  // button-card类型small尺寸标签栏高度
+  --ti-tabs-small-button-card-height: var(--ti-common-line-height-2, 24px);
+  // button-card类型small尺寸标签栏字号
+  --ti-tabs-small-button-card-font-size: var(--ti-common-font-size-0, 12px);
+  // card类型small尺寸标签项右外边距(new)
+  --ti-tabs-small-item-margin-right: var(--ti-common-size-6x, 24px);
+  // card类型small尺寸标签项水平内边距(new)
+  --ti-tabs-small-separator-padding-horizontal: var(--ti-common-size-3x, 12px);
+  // card类型small尺寸标签项字号(new)
+  --ti-tabs-small-item-font-size: var(--ti-common-font-size-1, 14px);
   // card类型标签项水平内边距
   --ti-tabs-item-padding-horizontal: var(--ti-common-space-3x, 12px);
   // card类型选中项底部小滑块厚度(hide)
@@ -68,7 +88,8 @@
   // card类型标签项悬浮字重
   --ti-tabs-item-card-hover-font-weight: var(--ti-common-font-weight-5, 500);
   // bordercard类型选中项圆角
-  --ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal, 2px) var(--ti-common-border-radius-normal, 2px) 0 0;
+  --ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal, 2px) var(--ti-common-border-radius-normal, 2px) 0
+    0;
   // bordercard类型选中项文本色
   --ti-tabs-dark-text-color-active: var(--ti-common-color-text-primary, #252b3a);
   // bordercard类型选中项背景色
@@ -146,7 +167,7 @@
   // 内容水平外边距
   --ti-tabs-content-margin-horizontal: var(--ti-common-space-6x, 24px);
   // buttoncard类型标签栏背景色
-  --ti-tabs-button-card-nav-bg-color: rgba(0, 0, 0, 0.05);
+  --ti-tabs-button-card-nav-bg-color: var(--ti-common-color-bg-6, rgba(0, 0, 0, 0.05));
   // buttoncard类型选项文本色
   --ti-tabs-button-card-item-text-color: #595959;
   // buttoncard类型选项悬浮文本色
diff --git a/packages/theme/src/theme.config.js b/packages/theme/src/theme.config.js
index 51d0cdff9b..d865e3d4b8 100644
--- a/packages/theme/src/theme.config.js
+++ b/packages/theme/src/theme.config.js
@@ -81,5 +81,6 @@ export default {
   'user-link': 'user-link',
   'year-table': 'year-table',
   'skeleton': 'skeleton',
-  'skeleton-item': 'skeleton-item'
+  'skeleton-item': 'skeleton-item',
+  'radio-button': 'radio-button'
 }
diff --git a/packages/theme/src/theme/smb-theme/index.js b/packages/theme/src/theme/smb-theme/index.js
index 7904b4bdbb..0a4d522af5 100644
--- a/packages/theme/src/theme/smb-theme/index.js
+++ b/packages/theme/src/theme/smb-theme/index.js
@@ -163,6 +163,7 @@ export const tinyBaseSmbTheme = {
   'ti-common-bg-primary': 'var(--ti-common-color-bg-primary)',
   'ti-common-bg-primary-hover': 'var(--ti-common-color-bg-primary-hover)',
   'ti-common-bg-primary-active': 'var(--ti-common-color-bg-primary-active)',
+  'ti-common-color-bg-6': 'var(--ti-base-color-bg-6)', // smb新增标签背景色
 
   // 图表色
   'ti-common-color-data-1': 'var(--ti-base-color-icon-info)',
diff --git a/packages/theme/src/tooltip/index.less b/packages/theme/src/tooltip/index.less
index 89833782e4..1022596262 100644
--- a/packages/theme/src/tooltip/index.less
+++ b/packages/theme/src/tooltip/index.less
@@ -20,6 +20,7 @@
   .component-css-vars-tooltip();
 
   font-family: var(--ti-tooltip-popper-font-family);
+  white-space: pre-wrap;
   &:focus:hover,
   &:focus:not(.focusing) {
     outline-width: 0;
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index 8b962d33ca..8b29dcebfc 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -41,11 +41,13 @@
     background-color: #fff;
     box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.06);
     border: 1px solid var(--ti-tree-menu-border-color);
+
     .tiny-svg {
       margin-left: 2px;
       fill: var(--ti-tree-menu-collapse-icon-fill-color);
     }
   }
+
   &__expand {
     height: 64px;
     display: flex;
@@ -65,37 +67,46 @@
       &:hover {
         fill: var(--ti-tree-menu-collapse-icon-hover-color);
       }
+
       &:focus {
         fill: var(--ti-tree-menu-collapse-icon-hover-color);
       }
     }
   }
+
   &.is-collapsed {
     width: 0;
     .@{tree-menu-prefix-cls}__toggle-button {
       transform: translateX(70%) translateY(-50%);
+
       .tiny-svg {
         rotate: (180deg);
       }
     }
+
     .tiny-input {
       overflow: hidden;
+
       .tiny-input-display-only {
         display: inline-block;
         width: 0;
       }
     }
   }
+
   &.is-expand {
     width: 40px;
     .@{tree-menu-prefix-cls}__toggle-button {
       transform: translateX(70%) translateY(-50%);
+
       .tiny-svg {
         rotate: (180deg);
       }
     }
+
     .tiny-input {
       overflow: hidden;
+
       .tiny-input-display-only {
         display: inline-block;
         width: 0;
@@ -122,6 +133,17 @@
 
   .@{tree-prefix-cls} {
     .@{tree-node-prefix-cls} {
+      &.is-disabled {
+        & > .@{tree-node-prefix-cls}__content a {
+          cursor: not-allowed;
+
+          .tree-node-name {
+            color: var(--ti-tree-menu-disabled-text-color);
+            font-weight: normal;
+          }
+        }
+      }
+
       .@{tree-node-prefix-cls}__content {
         height: var(--ti-tree-menu-node-height);
         line-height: var(--ti-tree-menu-node-height);
@@ -156,7 +178,6 @@
           }
         }
       }
-
       .@{tree-node-prefix-cls}__content-number {
         .tree-node-name {
           padding-right: 0;
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index 0b5c3b1a13..f2893c93cc 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -43,4 +43,6 @@
   --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
   // 前缀图标右边距
   --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
+  // 禁用文本色
+  --ti-tree-menu-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
 }
diff --git a/packages/vue-directive/src/auto-tip.ts b/packages/vue-directive/src/auto-tip.ts
index c4daff0997..b5b7ad453e 100644
--- a/packages/vue-directive/src/auto-tip.ts
+++ b/packages/vue-directive/src/auto-tip.ts
@@ -17,6 +17,7 @@ interface TooltipDirectiveConfig {
   always?: boolean // 是否文字不超长，也触发提示, 默认为 false
   content?: string // 自定义提示内容,  支持字符串或 VNode | VNode[], 不支持嵌套的 html 标签
   effect?: 'dark' | 'light' // tooltip主题，默认为light
+  placement?: string
 }
 
 /** v-auto-tip 绑定值。 支持 falsy值 或 TooltipDirectiveConfig 值， 当传入falsy值时，表示禁用tooltip */
@@ -36,6 +37,8 @@ const isAlwaysShowTip = (currentTarget) => Boolean(currentTarget?.boundingValue?
 
 const isDarkTheme = (currentTarget) => Boolean(currentTarget?.boundingValue?.effect === 'dark')
 
+const getPlacement = (currentTarget) => currentTarget.boundingValue?.placement || 'top'
+
 const mouseenterHandler = (e) => {
   const currentTarget = e.currentTarget
 
@@ -52,7 +55,7 @@ const mouseenterHandler = (e) => {
         el: document.createElement('div'),
         propsData: {
           renderContent: () => h('span', { class: 'tiny-directive-tip__content' }, tooltipContent.value),
-          placement: 'top',
+          placement: getPlacement(currentTarget),
           effect: isDarkTheme(currentTarget) ? 'dark' : 'light'
         },
         component: Tooltip
@@ -64,6 +67,7 @@ const mouseenterHandler = (e) => {
 
     tooltipContent.value = currentTarget.boundingValue?.content || currentTarget.textContent
     tooltip.state.referenceElm = currentTarget
+    tooltip.state.currentPlacement = getPlacement(currentTarget)
 
     if (popperElm) {
       popperElm.classList.replace(
@@ -73,6 +77,12 @@ const mouseenterHandler = (e) => {
     }
 
     tooltip.show()
+
+    // 鼠标离开时，调用tooltip.hide()时， 将内部的popperJS置为null了， 所以下面行必须在show之后，再设置内部的placement
+    if (tooltip.state.popperJS?._options) {
+      tooltip.state.popperJS._options.placement = getPlacement(currentTarget)
+    }
+
     tooltip.updatePopper()
   }
 }
@@ -106,6 +116,7 @@ const unbind = (el) => {
 v-auto-tip
 v-auto-tip="false"  
 v-auto-tip="{always:true, content:'123', effect:'dark'}"  
+v-auto-tip="{always:true, content:'123', effect:'dark',placement:'right'}"  
 
 2、动态切换  
 v-auto-tip="enabled? {always:true, content:'123', effect:'dark'} : false "  
diff --git a/packages/vue-locale/src/lang/en.ts b/packages/vue-locale/src/lang/en.ts
index 54a2611f22..42b3dd847f 100644
--- a/packages/vue-locale/src/lang/en.ts
+++ b/packages/vue-locale/src/lang/en.ts
@@ -439,6 +439,7 @@ export default {
         switchapply: 'Apply',
         switchedit: 'Edit',
         switchdel: 'Delete',
+        switchdelconfirm: 'Deletion Confirmation',
         switchconfirm: 'Confirm',
         switchonlytemp: 'Save as template only',
         switchtempapply: 'Save as template and use',
diff --git a/packages/vue-locale/src/lang/zh-CN.ts b/packages/vue-locale/src/lang/zh-CN.ts
index 2ce0039d34..8cee1cbcbb 100644
--- a/packages/vue-locale/src/lang/zh-CN.ts
+++ b/packages/vue-locale/src/lang/zh-CN.ts
@@ -439,6 +439,7 @@ export default {
         switchedit: '编辑',
         switchdel: '删除',
         switchconfirm: '确定',
+        switchdelconfirm: '删除确认',
         switchonlytemp: '保存模板',
         switchtempapply: '保存并使用模板',
         switchtempoverwrite: '覆盖并使用模板',
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 814fc8db59..9b9f51645f 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -227,6 +227,7 @@
     "@opentiny/vue-text-popup": "workspace:~",
     "@opentiny/vue-time": "workspace:~",
     "@opentiny/vue-time-line": "workspace:~",
+    "@opentiny/vue-time-line-new": "workspace:~",
     "@opentiny/vue-time-panel": "workspace:~",
     "@opentiny/vue-time-picker": "workspace:~",
     "@opentiny/vue-time-picker-mobile": "workspace:~",
diff --git a/packages/vue/src/autocomplete/src/index.ts b/packages/vue/src/autocomplete/src/index.ts
index 4fbfe381b8..fb105b7345 100644
--- a/packages/vue/src/autocomplete/src/index.ts
+++ b/packages/vue/src/autocomplete/src/index.ts
@@ -73,6 +73,10 @@ export const autoCompleteProps = {
   displayOnly: {
     type: Boolean,
     default: false
+  },
+  validateEvent: {
+    type: Boolean,
+    default: undefined
   }
 }
 
diff --git a/packages/vue/src/autocomplete/src/pc.vue b/packages/vue/src/autocomplete/src/pc.vue
index 618c6e50a1..2de9ae8326 100644
--- a/packages/vue/src/autocomplete/src/pc.vue
+++ b/packages/vue/src/autocomplete/src/pc.vue
@@ -25,6 +25,7 @@
       v-bind="f($props, $attrs)"
       front-clear-icon
       @update:modelValue="handleChange"
+      :validate-event="false"
       @focus="handleFocus"
       @blur="handleBlur"
       @clear="handleClear"
@@ -137,7 +138,8 @@ export default defineComponent({
     'hideLoading',
     'popperAppendToBody',
     'highlightFirstItem',
-    'displayOnly'
+    'displayOnly',
+    'validateEvent'
   ],
   emits: ['update:modelValue', 'focus', 'blur', 'clear', 'select', 'created'],
   setup(props, context) {
diff --git a/packages/vue/src/checkbox/src/index.ts b/packages/vue/src/checkbox/src/index.ts
index 56442d1c1a..85e2811156 100644
--- a/packages/vue/src/checkbox/src/index.ts
+++ b/packages/vue/src/checkbox/src/index.ts
@@ -29,7 +29,9 @@ export const checkboxProps = {
     default: () => $constants
   },
   modelValue: {
-    type: [String, Number, Boolean]
+    type: [String, Number, Boolean],
+    // Tiny新增，因为类型有Boolean类型，所以默认值需要显示设置成 undefined 才可以保持逻辑正确
+    default: undefined
   },
   label: {
     type: [String, Number, Boolean],
diff --git a/packages/vue/src/collapse-item/src/pc.vue b/packages/vue/src/collapse-item/src/pc.vue
index 935631aa7d..841a09221f 100644
--- a/packages/vue/src/collapse-item/src/pc.vue
+++ b/packages/vue/src/collapse-item/src/pc.vue
@@ -29,7 +29,7 @@
         }"
         @focus="handleFocus"
         @blur="state.focusing = false"
-        @click="handleHeaderClick"
+        @click="handleHeaderContainerClick"
       >
         <div class="tiny-collapse-item__arrow" :class="{ 'is-active': state.isActive }" @click.stop="handleHeaderClick">
           <slot name="icon">
diff --git a/packages/vue/src/color-picker/package.json b/packages/vue/src/color-picker/package.json
index 421c743a6b..11ce761f5c 100644
--- a/packages/vue/src/color-picker/package.json
+++ b/packages/vue/src/color-picker/package.json
@@ -6,12 +6,11 @@
   "module": "index.ts",
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-color-select-panel": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-color-picker": "workspace:~"
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-theme": "workspace:~"
   },
   "devDependencies": {
     "@opentiny-internal/vue-test-utils": "workspace:*",
diff --git a/packages/vue/src/color-picker/src/pc.vue b/packages/vue/src/color-picker/src/pc.vue
index 17a43b0ee3..b9381ce62f 100644
--- a/packages/vue/src/color-picker/src/pc.vue
+++ b/packages/vue/src/color-picker/src/pc.vue
@@ -11,7 +11,7 @@
     <div
       class="tiny-color-picker__inner"
       :style="{
-        background: state.triggerBg ?? ''
+        background: state.hex ?? ''
       }"
     >
       <IconChevronDown />
@@ -20,9 +20,6 @@
       <color-select
         @confirm="onConfirm"
         @cancel="onCancel"
-        @hue-update="onHueUpdate"
-        @sv-update="onSVUpdate"
-        @color-update="onColorUpdate"
         v-model="state.hex"
         :visible="state.isShow"
         :alpha="alpha"
diff --git a/packages/vue/src/column-list-item/src/mobile-first.vue b/packages/vue/src/column-list-item/src/mobile-first.vue
index c1ca46b8a3..dd53b38fa3 100644
--- a/packages/vue/src/column-list-item/src/mobile-first.vue
+++ b/packages/vue/src/column-list-item/src/mobile-first.vue
@@ -99,13 +99,14 @@
     />
     <div
       data-tag="tiny-column-list-item-operatebox"
+      :style="{ flexBasis: operateFlexBasis }"
       v-if="state.effectOptions.length || (slots.operate && slots.operate())"
       class="w-full sm:w-auto px-0 sm:pl-5 sm:pr-1 h-12 sm:h-auto flex flex-row sm:flex-col items-center justify-around sm:justify-center sm:items-start shadow-none sm:shadow-[-6px_0px_5px_-5px_#e8ebef] shrink-0 text-color-text-primary"
     >
       <slot name="operate">
         <div
           data-tag="tiny-column-list-item-operate"
-          class="cursor-pointer mb-0 sm:mb-2"
+          class="cursor-pointer mb-0 sm:mb-2 line-clamp-1"
           v-for="(item, index) in state.effectOptions.slice(0, state.sliceNum)"
           :key="item.text + index"
           :class="[item.disabled ? 'text-color-text-disabled cursor-not-allowed' : '']"
@@ -252,7 +253,9 @@ export default defineComponent({
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    // Tiny新增用于自定义操作列宽度
+    operateFlexBasis: String
   },
   setup(props, context) {
     return setup({
diff --git a/packages/vue/src/dropdown-item/package.json b/packages/vue/src/dropdown-item/package.json
index de35c9da0b..270acd6512 100644
--- a/packages/vue/src/dropdown-item/package.json
+++ b/packages/vue/src/dropdown-item/package.json
@@ -1,28 +1,28 @@
 {
   "name": "@opentiny/vue-dropdown-item",
+  "type": "module",
   "version": "3.17.0",
   "description": "",
+  "license": "MIT",
+  "sideEffects": false,
   "main": "lib/index.js",
   "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
+    "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-popup": "workspace:~",
-    "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-tooltip": "workspace:~",
-    "@opentiny/vue-theme-mobile": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~"
   },
-  "license": "MIT"
-}
\ No newline at end of file
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "^0.31.0"
+  }
+}
diff --git a/packages/vue/src/dropdown-item/src/pc.vue b/packages/vue/src/dropdown-item/src/pc.vue
index e144d265eb..377462159a 100644
--- a/packages/vue/src/dropdown-item/src/pc.vue
+++ b/packages/vue/src/dropdown-item/src/pc.vue
@@ -12,74 +12,70 @@
 
 <template>
   <!-- TINY-TODO:  tiny-dropdown-menu__item命名不规范，后续统一有个迭代去掉 -->
-  <tiny-tooltip :content="getTip" :placement="tipPosition">
-    <li
-      class="tiny-dropdown-item tiny-dropdown-menu__item"
-      :class="{
-        'is-disabled': disabled,
-        'tiny-dropdown-item--divided tiny-dropdown-menu__item--divided': divided,
-        'tiny-dropdown-item--check-status': state.checkedStatus && selected,
-        'has-children': itemData.children && itemData.children.length
-      }"
-      ref="dropdownItem"
-      @click.stop="handleClick"
-      @mousedown.stop
-      :aria-disabled="disabled"
-      :tabindex="disabled ? null : -1"
-    >
-      <div class="tiny-dropdown-item__wrap">
-        <span
-          v-if="itemData.children && itemData.children.length"
-          class="tiny-dropdown-item__expand tiny-dropdown-menu__item-expand"
-        >
-          <component :is="state.getIcon"></component>
+  <li
+    v-auto-tip="{ always: true, content: getTip, effect: 'dark', placement: tipPosition }"
+    class="tiny-dropdown-item tiny-dropdown-menu__item"
+    :class="{
+      'is-disabled': disabled,
+      'tiny-dropdown-item--divided tiny-dropdown-menu__item--divided': divided,
+      'tiny-dropdown-item--check-status': state.checkedStatus && selected,
+      'has-children': itemData.children && itemData.children.length
+    }"
+    ref="dropdownItem"
+    @click.stop="handleClick"
+    @mousedown.stop
+    :aria-disabled="disabled"
+    :tabindex="disabled ? null : -1"
+  >
+    <div class="tiny-dropdown-item__wrap">
+      <span
+        v-if="itemData.children && itemData.children.length"
+        class="tiny-dropdown-item__expand tiny-dropdown-menu__item-expand"
+      >
+        <component :is="state.getIcon"></component>
+      </span>
+      <div class="tiny-dropdown-item__content tiny-dropdown-menu__item-content">
+        <component v-if="icon" :is="icon" class="tiny-svg-size"></component>
+        <span class="tiny-dropdown-item__label">
+          <slot :item-data="itemData">
+            <span>{{ label }}</span>
+          </slot>
         </span>
-        <div class="tiny-dropdown-item__content tiny-dropdown-menu__item-content">
-          <component v-if="icon" :is="icon" class="tiny-svg-size"></component>
-          <span class="tiny-dropdown-item__label">
-            <slot :item-data="itemData">
-              <span>{{ label }}</span>
-            </slot>
-          </span>
-        </div>
-        <ul
-          v-if="itemData.children && itemData.children.length"
-          :class="[
-            'tiny-dropdown-menu',
-            'tiny-dropdown-item--child tiny-dropdown-menu__item--child',
-            state.popperClass
-          ]"
-        >
-          <tiny-dropdown-item
-            v-for="(item, index) in itemData.children"
-            :key="index"
-            :label="item[state.textField]"
-            :item-data="item"
-            :icon="item.icon"
-            :disabled="item.disabled"
-            :divided="item.divided"
-            :tip="item.tip"
-            :tip-position="item.tipPosition"
-          >
-            <slot :item-data="item"></slot>
-          </tiny-dropdown-item>
-        </ul>
       </div>
-    </li>
-  </tiny-tooltip>
+      <ul
+        v-if="itemData.children && itemData.children.length"
+        :class="['tiny-dropdown-menu', 'tiny-dropdown-item--child tiny-dropdown-menu__item--child', state.popperClass]"
+      >
+        <tiny-dropdown-item
+          v-for="(item, index) in itemData.children"
+          :key="index"
+          :label="item[state.textField]"
+          :item-data="item"
+          :icon="item.icon"
+          :disabled="item.disabled"
+          :divided="item.divided"
+          :tip="item.tip"
+          :tip-position="item.tipPosition"
+        >
+          <slot :item-data="item"></slot>
+        </tiny-dropdown-item>
+      </ul>
+    </div>
+  </li>
 </template>
 
 <script lang="ts">
 import { props, setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/dropdown-item/vue'
 import { iconDeltaLeft } from '@opentiny/vue-icon'
-import TinyTooltip from '@opentiny/vue-tooltip'
 import '@opentiny/vue-theme/dropdown-item/index.less'
+import { AutoTip } from '@opentiny/vue-directive'
 import type { IDropdownItemApi } from '@opentiny/vue-renderless/types/dropdown-item.type'
 
 export default defineComponent({
   name: $prefix + 'DropdownItem',
   componentName: $prefix + 'DropdownItem',
+  directives: { AutoTip },
   emits: ['item-click', 'update:modelValue', 'change', 'closed', 'open', 'opened', 'close', 'confirm', 'reset'],
   props: [
     ...props,
@@ -103,8 +99,7 @@ export default defineComponent({
     'tipPosition'
   ],
   components: {
-    IconDeltaLeft: iconDeltaLeft(),
-    TinyTooltip
+    IconDeltaLeft: iconDeltaLeft()
   },
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as IDropdownItemApi
diff --git a/packages/vue/src/fluent-editor/index.ts b/packages/vue/src/fluent-editor/index.ts
index c7846603e4..7e7c303f03 100644
--- a/packages/vue/src/fluent-editor/index.ts
+++ b/packages/vue/src/fluent-editor/index.ts
@@ -1,4 +1,4 @@
-import FluentEditor from './src/pc.vue'
+import FluentEditor from './src/index'
 import { version } from './package.json'
 
 FluentEditor.model = {
diff --git a/packages/vue/src/fluent-editor/src/index.ts b/packages/vue/src/fluent-editor/src/index.ts
new file mode 100644
index 0000000000..593e522f7b
--- /dev/null
+++ b/packages/vue/src/fluent-editor/src/index.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc|mobile-first'
+
+const $constants = {
+  PIC_PREVIEW_OPTIONS: {
+    zIndex: Number.POSITIVE_INFINITY,
+    urlList: null
+  },
+  EDITOR_FULLSCREEN_OPTIONS: Number.POSITIVE_INFINITY
+}
+
+export const fluentEditorProps = {
+  ...$props,
+  _constants: {
+    type: Object,
+    default: () => $constants
+  },
+  content: String,
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  fileUpload: Object,
+  globalOptions: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  imageUpload: Object,
+  mentionObj: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  modelValue: String,
+  options: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  picPreview: [Object, Boolean],
+  dataType: {
+    type: Boolean,
+    default: true
+  },
+  dataUpgrade: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: $constants.EDITOR_FULLSCREEN_OPTIONS
+  },
+  imagePasteFailCallback: {
+    type: Function,
+    default: () => {}
+  }
+}
+
+export default defineComponent({
+  name: $prefix + 'FluentEditor',
+  props: fluentEditorProps,
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})
diff --git a/packages/vue/src/fluent-editor/src/mobile-first.vue b/packages/vue/src/fluent-editor/src/mobile-first.vue
new file mode 100644
index 0000000000..49d337e4b9
--- /dev/null
+++ b/packages/vue/src/fluent-editor/src/mobile-first.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="tiny-editor-wrapper" :class="{ 'fullscreen': state.isFullscreen }" :style="{ 'z-index': state.zIndex }">
+    <div ref="editor" id="editor" class="tiny-editor" @dblclick="handleDblclick"></div>
+    <tiny-image-viewer v-if="state.showPreview" v-bind="state.previewOptions"></tiny-image-viewer>
+    <div class="toolbar-icon" ref="editor-toolbar-icon">
+      <div v-for="icon in state.icons" :key="icon" :ref="icon">
+        <component :is="icon"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { renderless, api } from '@opentiny/vue-renderless/fluent-editor/vue'
+import { props, $prefix, setup, defineComponent } from '@opentiny/vue-common'
+import FluentEditor from '@opentiny/fluent-editor'
+import {
+  IconEditorAlignCenter,
+  IconEditorAlignLeft,
+  IconEditorAlignRight,
+  IconEditorBackground,
+  IconEditorBold,
+  IconEditorCode,
+  IconEditorDeleteline,
+  IconEditorEraser,
+  IconEditorItalic,
+  IconEditorLeftBorder,
+  IconEditorList,
+  IconEditorListDot,
+  IconEditorListNum,
+  IconEditorMenuLeft,
+  IconEditorMenuRight,
+  IconEditorQuote,
+  IconEditorRedo,
+  IconEditorRightBorder,
+  IconEditorSub,
+  IconEditorSubtitle,
+  IconEditorSuper,
+  IconEditorTable,
+  IconEditorTextcolor,
+  IconEditorTitle,
+  IconEditorUnderline,
+  IconEditorUndo,
+  IconEditorVideo,
+  IconLink,
+  IconPicture,
+  IconCloudUpload,
+  IconFullscreen
+} from '@opentiny/vue-icon'
+
+export default defineComponent({
+  name: $prefix + 'FluentEditor',
+  components: {
+    IconEditorAlignCenter: IconEditorAlignCenter(),
+    IconEditorAlignLeft: IconEditorAlignLeft(),
+    IconEditorAlignRight: IconEditorAlignRight(),
+    IconEditorBackground: IconEditorBackground(),
+    IconEditorBold: IconEditorBold(),
+    IconEditorCode: IconEditorCode(),
+    IconEditorDeleteline: IconEditorDeleteline(),
+    IconEditorEraser: IconEditorEraser(),
+    IconEditorItalic: IconEditorItalic(),
+    IconEditorLeftBorder: IconEditorLeftBorder(),
+    IconEditorList: IconEditorList(),
+    IconEditorListDot: IconEditorListDot(),
+    IconEditorListNum: IconEditorListNum(),
+    IconEditorMenuLeft: IconEditorMenuLeft(),
+    IconEditorMenuRight: IconEditorMenuRight(),
+    IconEditorQuote: IconEditorQuote(),
+    IconEditorRedo: IconEditorRedo(),
+    IconEditorRightBorder: IconEditorRightBorder(),
+    IconEditorSub: IconEditorSub(),
+    IconEditorSubtitle: IconEditorSubtitle(),
+    IconEditorSuper: IconEditorSuper(),
+    IconEditorTable: IconEditorTable(),
+    IconEditorTextcolor: IconEditorTextcolor(),
+    IconEditorTitle: IconEditorTitle(),
+    IconEditorUnderline: IconEditorUnderline(),
+    IconEditorUndo: IconEditorUndo(),
+    IconEditorVideo: IconEditorVideo(),
+    IconLink: IconLink(),
+    IconPicture: IconPicture(),
+    IconCloudUpload: IconCloudUpload(),
+    IconFullscreen: IconFullscreen()
+  },
+  props: [
+    ...props,
+    '_constants',
+    'content',
+    'disabled',
+    'fileUpload',
+    'globalOptions',
+    'imageUpload',
+    'mentionObj',
+    'modelValue',
+    'options',
+    'picPreview',
+    'dataType',
+    'dataUpgrade',
+    'zIndex',
+    'imagePasteFailCallback'
+  ],
+  setup(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        FluentEditor
+      }
+    })
+  }
+})
+</script>
diff --git a/packages/vue/src/fluent-editor/src/pc.vue b/packages/vue/src/fluent-editor/src/pc.vue
index eba3f05d91..bd5ec08769 100644
--- a/packages/vue/src/fluent-editor/src/pc.vue
+++ b/packages/vue/src/fluent-editor/src/pc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
+import { $prefix, props, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/fluent-editor/vue'
 import '@opentiny/fluent-editor/dist/style.css'
 import '@opentiny/vue-theme/fluent-editor/index.less'
@@ -51,14 +51,6 @@ import {
 } from '@opentiny/vue-icon'
 import ImageViewer from '@opentiny/vue-image-viewer'
 
-const $constants = {
-  PIC_PREVIEW_OPTIONS: {
-    zIndex: Number.POSITIVE_INFINITY,
-    urlList: null
-  },
-  EDITOR_FULLSCREEN_OPTIONS: Number.POSITIVE_INFINITY
-}
-
 export default defineComponent({
   name: $prefix + 'FluentEditor',
   components: {
@@ -96,59 +88,29 @@ export default defineComponent({
     IconFullscreen: IconFullscreen()
   },
   emits: ['ready', 'blur', 'focus', 'update:modelValue', 'change'],
-  props: {
-    _constants: {
-      type: Object,
-      default: () => $constants
-    },
-    content: String,
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    fileUpload: Object,
-    globalOptions: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    imageUpload: Object,
-    mentionObj: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    modelValue: String,
-    options: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    picPreview: [Object, Boolean],
-    dataType: {
-      type: Boolean,
-      default: true
-    },
-    dataUpgrade: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: Number,
-      default: $constants.EDITOR_FULLSCREEN_OPTIONS
-    },
-    imagePasteFailCallback: {
-      type: Function,
-      default: () => {}
-    }
-  },
+  props: [
+    ...props,
+    '_constants',
+    'content',
+    'disabled',
+    'fileUpload',
+    'globalOptions',
+    'imageUpload',
+    'mentionObj',
+    'modelValue',
+    'options',
+    'picPreview',
+    'dataType',
+    'dataUpgrade',
+    'zIndex',
+    'imagePasteFailCallback'
+  ],
   setup(props, context): any {
     return setup({
       props,
       context,
       renderless,
       api,
-      mono: true,
       extendOptions: {
         FluentEditor
       }
diff --git a/packages/vue/src/form-item/src/pc.vue b/packages/vue/src/form-item/src/pc.vue
index 5faf8faf80..5f6e45f843 100644
--- a/packages/vue/src/form-item/src/pc.vue
+++ b/packages/vue/src/form-item/src/pc.vue
@@ -109,14 +109,44 @@ export default defineComponent({
     const errorSlot = scopedSlots.error && scopedSlots.error(state.validateMessage)
     const formItemClass = `${classPrefix}form-item--${state.sizeClass ? state.sizeClass : 'default'}`
     const isShowError = state.validateState === 'error' && showMessage && state.form.showMessage
-    const validateTag = state.formInstance && state.formInstance.validateTag
+    const validateTag = state.formInstance?.validateTag
+    const wrapFragment = state.formInstance?.wrapFragment
     let validateMessage
 
+    const formAppendToBody = state.formInstance?.appendToBody
+    const appendToBody =
+      typeof this.appendToBody === 'boolean'
+        ? this.appendToBody
+        : typeof formAppendToBody === 'boolean'
+          ? formAppendToBody
+          : true
+    const validatePosition = this.validatePosition || state.formInstance?.validatePosition || 'top-end'
+
+    const popperOptions = {
+      ...state.formInstance.popperOptions,
+      ...this.popperOptions,
+      forceAbsolute: !appendToBody,
+      onUpdate: (options) => {
+        const popper = options.instance._popper
+        const translate3d = popper.style.transform
+        const matchTranslate = translate3d.match(/translate3d\((\w+)px, (\w+)px, (\w+)px\)/)
+
+        if (!Array.isArray(matchTranslate)) {
+          return
+        }
+
+        const [x, y, z] = matchTranslate.slice(1)
+
+        popper.style.transform = `translate3d(${x}px, ${parseInt(y, 10)}px, ${z}px)`
+      }
+    }
+    const validateIconNode = validateIcon ? h(validateIcon, { class: 'tooltip-validate-icon' }) : null
+
     const ItemContent = defaultSlots
       ? defaultSlots.map((vnode) => {
           if (isVue2 && !vnode.componentOptions && !validateTag) return vnode
 
-          const item = parseVnode(vnode)
+          let item = parseVnode(vnode)
           item.props = item.props || {}
           const { type } = item
 
@@ -151,10 +181,23 @@ export default defineComponent({
               [item]
             )
           }
+
+          if (!isVue2) {
+            if (item.type === hooks.Fragment) {
+              // 在Vue3默认使用div包裹片段元素，也可以配置为其它标签
+              if (wrapFragment) {
+                item = h(wrapFragment, [item])
+              }
+            } else if (item.type === hooks.Text) {
+              item = h('span', [item])
+            }
+          }
           return item
         })
       : null
 
+    state.isMultiple = ItemContent.length > 1
+
     const getFormItemContnet = () => {
       if (isMobile) {
         const validatePosition = this.validatePosition || state.formInstance.validatePosition || 'right'
@@ -168,88 +211,7 @@ export default defineComponent({
         return ItemContent
       }
 
-      const tooltipTriggerContent =
-        ItemContent.length > 1
-          ? h('div', { class: 'tiny-form-item__content-muti-children' }, ItemContent)
-          : ItemContent[0]
-
-      if (!this.showMessage) {
-        return tooltipTriggerContent
-      }
-
-      const formAppendToBody = state.formInstance && state.formInstance.appendToBody
-      const appendToBody =
-        typeof this.appendToBody === 'boolean'
-          ? this.appendToBody
-          : typeof formAppendToBody === 'boolean'
-            ? formAppendToBody
-            : true
-      const validatePosition =
-        this.validatePosition || (state.formInstance && state.formInstance.validatePosition) || 'top-end'
-
-      const popperOptions = {
-        ...state.formInstance.popperOptions,
-        ...this.popperOptions,
-        forceAbsolute: !appendToBody,
-        onUpdate: (options) => {
-          const popper = options.instance._popper
-          const translate3d = popper.style.transform
-          const matchTranslate = translate3d.match(/translate3d\((\w+)px, (\w+)px, (\w+)px\)/)
-
-          if (!Array.isArray(matchTranslate)) {
-            return
-          }
-
-          const [x, y, z] = matchTranslate.slice(1)
-
-          popper.style.transform = `translate3d(${x}px, ${parseInt(y, 10)}px, ${z}px)`
-        }
-      }
-      const validateIconNode = validateIcon ? h(validateIcon, { class: 'tooltip-validate-icon' }) : null
-      return h(
-        'tooltip',
-        {
-          props: {
-            popperClass: `${classPrefix}form__valid`,
-            arrowOffset: 0,
-            adjustArrow: true,
-            type: tooltipType,
-            disabled: state.getValidateType !== 'tip',
-            placement: validatePosition,
-            manual: true,
-            appendToBody,
-            popperOptions,
-            modelValue: isShowError ? state.canShowTip : false,
-            zIndex: 'relative',
-            renderContent() {
-              let tooltipContent
-              if (errorSlot) {
-                tooltipContent = [errorSlot]
-              } else {
-                tooltipContent = [
-                  validateIconNode,
-                  <span class={`${classPrefix}form-item__validate-message`}>{state.validateMessage}</span>
-                ]
-              }
-
-              return tooltipContent
-            }
-          },
-          on: {
-            'update:modelValue': (value) => {
-              state.canShowTip = value
-            }
-          },
-          ref: 'tooltip'
-        },
-        [
-          !isVue2 && tooltipTriggerContent.type === hooks.Text ? (
-            <span>{tooltipTriggerContent}</span>
-          ) : (
-            tooltipTriggerContent
-          )
-        ]
-      )
+      return ItemContent
     }
 
     const FormItemContnet = ItemContent ? getFormItemContnet() : null
@@ -336,6 +298,42 @@ export default defineComponent({
       },
       [
         !isMobile ? LabelContent : null,
+        this.showMessage &&
+          !isMobile &&
+          h('tooltip', {
+            props: {
+              popperClass: `${classPrefix}form__valid`,
+              arrowOffset: 0,
+              adjustArrow: true,
+              type: tooltipType,
+              disabled: state.getValidateType !== 'tip',
+              placement: validatePosition,
+              manual: true,
+              appendToBody,
+              popperOptions,
+              modelValue: isShowError ? state.canShowTip : false,
+              zIndex: 'relative',
+              renderContent() {
+                let tooltipContent
+                if (errorSlot) {
+                  tooltipContent = [errorSlot]
+                } else {
+                  tooltipContent = [
+                    validateIconNode,
+                    <span class={`${classPrefix}form-item__validate-message`}>{state.validateMessage}</span>
+                  ]
+                }
+
+                return tooltipContent
+              }
+            },
+            on: {
+              'update:modelValue': (value) => {
+                state.canShowTip = value
+              }
+            },
+            ref: 'tooltip'
+          }),
         h(
           'div',
           {
@@ -343,7 +341,8 @@ export default defineComponent({
               [`${classPrefix}form-item__content`]: true,
               'is-vertical': isMobile && vertical
             },
-            style: !isMobile && state.contentStyle
+            style: !isMobile && state.contentStyle,
+            ref: 'content'
           },
           [
             isMobile ? LabelContent : null,
diff --git a/packages/vue/src/form/src/index.ts b/packages/vue/src/form/src/index.ts
index 80172f3156..d4dd24e0f8 100644
--- a/packages/vue/src/form/src/index.ts
+++ b/packages/vue/src/form/src/index.ts
@@ -107,6 +107,10 @@ export const formProps = {
     type: Boolean,
     default: false
   },
+  wrapFragment: {
+    type: String,
+    default: 'div'
+  },
   tooltipConfig: {
     type: Object,
     default: () => ({})
diff --git a/packages/vue/src/grid-toolbar/src/custom-saas.vue b/packages/vue/src/grid-toolbar/src/custom-saas.vue
index 327dbc08e9..93bc10b3d7 100644
--- a/packages/vue/src/grid-toolbar/src/custom-saas.vue
+++ b/packages/vue/src/grid-toolbar/src/custom-saas.vue
@@ -49,13 +49,30 @@
                         clearable
                       >
                         <tiny-option v-for="item in templateOptions" :key="item.id" :label="item.name" :value="item.id">
+                          <span
+                            style="
+                              float: left;
+                              width: 240px;
+                              overflow: hidden;
+                              text-overflow: ellipsis;
+                              white-space: nowrap;
+                            "
+                            :title="item.name"
+                            >{{ item.name }}</span
+                          >
+                          <span
+                            v-if="historyConfig.showDel"
+                            style="float: right; padding: 0 6px; color: #1890ff; cursor: pointer"
+                            @click="deleteTemplate(item, $event)"
+                            >{{ t('ui.grid.individuation.switchdel') }}</span
+                          >
                         </tiny-option>
                       </tiny-select>
                     </div>
                     <tiny-search
                       v-if="search"
                       v-model="searchValue"
-                      @input="searchChange"
+                      @change="searchChange"
                       :placeholder="t('ui.grid.individuation.toolbar.search')"
                     ></tiny-search>
                     <div v-if="isGroup">
@@ -135,8 +152,8 @@
                           columns.length
                         }})
                       </p>
-                      <span v-if="!hideFixedColumn">{{ t('ui.grid.individuation.toolbar.freeze') }}</span>
-                      <span v-if="!hideSortColumn">{{ t('ui.grid.individuation.toolbar.sort') }}</span>
+                      <span v-if="!setting.hideFixedColumn">{{ t('ui.grid.individuation.toolbar.freeze') }}</span>
+                      <span v-if="!setting.hideSortColumn">{{ t('ui.grid.individuation.toolbar.sort') }}</span>
                       <span v-if="!isGroup" class="clear-all" @click="handelClearAll">{{
                         t('ui.grid.individuation.toolbar.clear')
                       }}</span>
@@ -204,7 +221,10 @@
                             >
                               <title-render :column="column"></title-render>
                             </p>
-                            <div v-if="!hideFixedColumn && (!isGroup || !column.children)" class="dropdown-column">
+                            <div
+                              v-if="!setting.hideFixedColumn && (!isGroup || !column.children)"
+                              class="dropdown-column"
+                            >
                               <tiny-dropdown :show-icon="false" @item-click="handleFixedItemClick" trigger="hover">
                                 <span :class="['left', 'right'].includes(column.fixed) && 'dropdown-btn'">
                                   <icon-left-frozen v-if="column.fixed === 'left'"></icon-left-frozen>
@@ -228,7 +248,7 @@
                               </tiny-dropdown>
                             </div>
                             <div
-                              v-if="!hideSortColumn"
+                              v-if="!setting.hideSortColumn"
                               class="dropdown-column"
                               :class="[!column.sortable && 'visibility-hidden']"
                             >
@@ -311,10 +331,12 @@
           <tiny-custom-switch
             v-if="multipleHistory && activeName === 'base'"
             ref="switch"
+            :remote="setting.remote"
             :custom-mode="customMode"
-            :selected-template-val="selectedTemplateVal"
+            :selectedTemplateVal="selectedTemplateVal"
             :history-config="historyConfig"
             @init-storage="initStorage"
+            @set-selected="setSelectedTemplate"
           ></tiny-custom-switch>
           <tiny-button @click="handleReset">{{ t('ui.grid.individuation.resetBtn') }}</tiny-button>
           <tiny-button @click="cancelSettings">{{ t('ui.grid.individuation.cancelBtn') }}</tiny-button>
@@ -471,8 +493,7 @@ export default defineComponent({
     numberSorting: Boolean,
     multipleHistory: [Object, Boolean],
     resetMethod: Function,
-    hideSortColumn: Boolean,
-    hideFixedColumn: Boolean
+    setting: Object
   },
   data() {
     return {
@@ -505,6 +526,7 @@ export default defineComponent({
       multipleHistoryId: null,
       saveDisabled: false,
       updatedSorting: false,
+      columnsSorted: false,
       opt: {},
       allCheckedKeys: []
     }
@@ -533,8 +555,6 @@ export default defineComponent({
           }
         }, 100)
         this.reset()
-      } else {
-        this.selectedTemplate = ''
       }
     },
     checkedColumns: {
@@ -542,19 +562,9 @@ export default defineComponent({
         this.columns.forEach((column) => {
           column.visible = !!~val.indexOf(column.property)
         })
+        this.columnsSorted = false
 
-        this.sortingOptions = []
-        let index = 1
-
-        this.columns.forEach((column) => {
-          if (column.visible) {
-            column.sortingIndex = index
-            this.sortingOptions.push(column.sortingIndex)
-            index++
-          } else {
-            column.sortingIndex = null
-          }
-        })
+        this.updateSortingIndex()
       },
       deep: !isVue2
     },
@@ -680,6 +690,9 @@ export default defineComponent({
         }
       }
     },
+    setSelectedTemplate(val) {
+      this.selectedTemplate = val
+    },
     initStorage(option) {
       this.templateOptions = option
     },
@@ -794,29 +807,19 @@ export default defineComponent({
       const leftCols = []
       const rightCols = []
       const visibleCols = []
-      const hiddenCols = []
 
       columns.forEach((col) => {
-        if (col.visible) {
-          if (col.fixed === 'left') {
-            leftCols.push(col)
-          } else if (col.fixed === 'right') {
-            rightCols.push(col)
-          } else {
-            visibleCols.push(col)
-          }
+        if (col.fixed === 'left') {
+          leftCols.push(col)
+        } else if (col.fixed === 'right') {
+          rightCols.push(col)
         } else {
-          hiddenCols.push(col)
+          visibleCols.push(col)
         }
       })
 
-      const result = [...leftCols, ...visibleCols, ...rightCols, ...hiddenCols]
-      this.sortingOptions = []
-
-      result.forEach((column, index) => {
-        column.sortingIndex = index + 1
-        column.visible && this.sortingOptions.push(column.sortingIndex)
-      })
+      const result = [...leftCols, ...visibleCols, ...rightCols]
+      this.updateSortingIndex()
 
       return result
     },
@@ -863,6 +866,24 @@ export default defineComponent({
 
       return checkedkeys
     },
+    deleteTemplate(item, $event) {
+      $event.stopPropagation()
+      Modal.confirm(t('ui.grid.individuation.switchdelcon'), t('ui.grid.individuation.switchdelconfirm')).then(
+        (res) => {
+          if (res === 'confirm') {
+            if (!this.setting.remote && item.id === this.selectedTemplate) {
+              this.selectedTemplate = ''
+              setTimeout(() => {
+                this.templateOptions = this.$refs.switch.options
+              })
+            }
+
+            this.$refs.switch.handleDelConfirm('yes', item)
+            this.$emit('delete-template', item)
+          }
+        }
+      )
+    },
     selectedTemplateChange() {
       let selected = this.templateOptions.find((opt) => opt.id === this.selectedTemplate)
 
@@ -883,6 +904,10 @@ export default defineComponent({
         }
       }
     },
+    updateSelectedTemplate(val) {
+      this.selectedTemplate = val
+      this.selectedTemplateChange()
+    },
     sortSelectChange(index) {
       const newIndex = index - 1
       const oldIndex = this.lastSelectIndex - 1
@@ -980,7 +1005,7 @@ export default defineComponent({
           this.columns.splice(leftIdx >= 0 ? leftIdx + 1 : 0, 0, column)
           column.fixedOption = [this.opt.right, this.opt.cancelFixed]
         } else if (item.value === 'right') {
-          this.columns.splice(rightIdx >= 0 ? rightIdx : this.visibleColumns.length, 0, column)
+          this.columns.splice(rightIdx >= 0 ? rightIdx : this.columns.length, 0, column)
           column.fixedOption = [this.opt.left, this.opt.cancelFixed]
         } else {
           if (item.fixed === 'left' && leftIdx >= 0) {
@@ -1000,8 +1025,17 @@ export default defineComponent({
       return this.columns.filter((col) => col.visible && col.fixed).length >= this.maxFixedNum
     },
     updateSortingIndex() {
-      this.columns.forEach((col, index) => {
-        col.sortingIndex = index + 1
+      this.sortingOptions = []
+      let index = 1
+
+      this.columns.forEach((column) => {
+        if (column.visible) {
+          column.sortingIndex = index
+          this.sortingOptions.push(column.sortingIndex)
+          index++
+        } else {
+          column.sortingIndex = null
+        }
       })
     },
     handleDropdownMouseenter($event, index) {
@@ -1035,8 +1069,8 @@ export default defineComponent({
     },
     buildSettings() {
       const props = ['order', 'fixed', 'visible', 'sortable'].concat(this.keys)
-      !this.updatedSorting &&
-        (this.columns = [...this.groupedColumns[0].data].sort((a, b) => a?.sortingIndex - b?.sortingIndex))
+
+      !this.updatedSorting && !this.columnsGroup.length && (this.columns = [...this.groupedColumns[0].data])
 
       this.settings.columns = mapTree(this.columns, ({ property, ...rest }) => {
         const node = { property }
@@ -1055,6 +1089,14 @@ export default defineComponent({
       this.buildSettings()
       this.$emit('saveSettings', this.settings, visible)
 
+      if (this.multipleHistory && this.selectedTemplate) {
+        const selected = this.templateOptions.find((opt) => opt.id === this.selectedTemplate)
+
+        if (selected && JSON.stringify(selected.setting.custom.columns) !== JSON.stringify(this.settings.columns)) {
+          this.$refs.switch.handleSaveConfirm('overwrite', true)
+        }
+      }
+
       !visible && this.handleClose()
     },
     resetSettings(event) {
@@ -1102,6 +1144,7 @@ export default defineComponent({
         this.resetMethod().then((sourceSettings) => {
           this.updatedSorting = true
           this.buildSettings()
+
           let { columns, sortType, pageSize } = sourceSettings || {}
 
           if (columns && columns.length && this.settings.columns && this.settings.columns.length) {
@@ -1143,15 +1186,17 @@ export default defineComponent({
     },
     handleFixed(type, from, to, oldIndex, newIndex) {
       if (from === to && oldIndex !== newIndex) {
-        const newCol = this.columns[newIndex]
-        const oldCol = this.columns[oldIndex]
+        !this.columnsSorted && this.columnsSorting()
+        const newCol = this.visibleColumns[newIndex]
+        const oldCol = this.visibleColumns[oldIndex]
+
         if (
           type === 'sort' &&
           position.includes(newCol.fixed) &&
           !position.includes(oldCol.fixed) &&
           this.fixedNumberIsMax()
         ) {
-          this.columns[oldIndex].sortingIndex = this.lastSelectIndex
+          this.visibleColumns[oldIndex].sortingIndex = this.lastSelectIndex
           Modal.message({
             message: t('ui.grid.individuation.maxFreezeNumMsg'),
             status: 'warning',
@@ -1169,12 +1214,27 @@ export default defineComponent({
           oldCol.fixed = undefined
           oldCol.fixedOption = [this.opt.left, this.opt.right]
         }
-        this.columns.splice(oldIndex, 1)
+        const curIndex = this.columns.findIndex((col) => col.property === oldCol.property)
+        this.columns.splice(curIndex, 1)
         this.columns.splice(newIndex, 0, oldCol)
+
         this.updateSortingIndex()
         this.updatedSorting = true
       }
     },
+    columnsSorting() {
+      const visibleColumns = []
+      const hiddenColumns = []
+      this.columns.forEach((col) => {
+        if (col.visible) {
+          visibleColumns.push(col)
+        } else {
+          hiddenColumns.push(col)
+        }
+      })
+      this.columns = [...visibleColumns, ...hiddenColumns]
+      this.columnsSorted = true
+    },
     initDragEvent() {
       const handleUpdate = (e) => {
         const { from, to, oldIndex, newIndex } = e
diff --git a/packages/vue/src/grid-toolbar/src/custom-switch.vue b/packages/vue/src/grid-toolbar/src/custom-switch.vue
index d506e6e651..15b9a15eff 100644
--- a/packages/vue/src/grid-toolbar/src/custom-switch.vue
+++ b/packages/vue/src/grid-toolbar/src/custom-switch.vue
@@ -20,13 +20,9 @@
     trigger="manual"
   >
     <div>
-      <div class="radio-box" v-if="selectedTemplateVal.id">
-        <tiny-radio v-model="saveMethod" label="overwrite">
-          {{ t('ui.grid.individuation.overwriteSave') }}
-        </tiny-radio>
-        <tiny-radio v-model="saveMethod" label="save">
-          {{ t('ui.grid.individuation.saveAs') }}
-        </tiny-radio>
+      <div class="radio-box" v-if="selectedTemplateVal.id && !historyConfig.hideOverwrite">
+        <tiny-radio v-model="saveMethod" label="overwrite">{{ t('ui.grid.individuation.overwriteSave') }}</tiny-radio>
+        <tiny-radio v-model="saveMethod" label="save">{{ t('ui.grid.individuation.saveAs') }}</tiny-radio>
       </div>
       <tiny-input
         v-if="saveMethod === 'save'"
@@ -41,18 +37,16 @@
         type="text"
       ></tiny-input>
       <div class="btn-box">
-        <tiny-button @click="templateVisible = false">
-          {{ t('ui.grid.individuation.cancelBtn') }}
-        </tiny-button>
-        <tiny-button type="primary" @click="handleSaveConfirm(saveMethod)">
-          {{ t('ui.grid.individuation.saveBtn') }}
-        </tiny-button>
+        <tiny-button @click="templateVisible = false">{{ t('ui.grid.individuation.cancelBtn') }}</tiny-button>
+        <tiny-button type="primary" @click="handleSaveConfirm(saveMethod)">{{
+          t('ui.grid.individuation.saveBtn')
+        }}</tiny-button>
       </div>
     </div>
     <template #reference>
-      <tiny-button class="save-btn" @click="templateVisible = !templateVisible">
-        {{ t('ui.grid.individuation.saveTemplate') }}
-      </tiny-button>
+      <tiny-button class="save-btn" @click="templateVisible = !templateVisible">{{
+        t('ui.grid.individuation.saveTemplate')
+      }}</tiny-button>
     </template>
   </tiny-popover>
   <div v-else class="tiny-grid-custom-switch">
@@ -76,9 +70,8 @@
               size="mini"
               :disabled="historyConfig.saveDisabled || saveDisabled"
               @click="handleSave"
+              >{{ historyConfig.saveText || t('ui.grid.individuation.switchsave') }}</tiny-button
             >
-              {{ historyConfig.saveText || t('ui.grid.individuation.switchsave') }}
-            </tiny-button>
           </div>
         </tiny-col>
         <tiny-col :span="2">
@@ -166,9 +159,7 @@
       </div>
       <!-- apply -->
       <template v-if="status === 'apply'">
-        <div class="tiny-grid-custom-switch__del-tip">
-          {{ selectedName }}
-        </div>
+        <div class="tiny-grid-custom-switch__del-tip">{{ selectedName }}</div>
         <div class="tiny-grid-custom-switch__del-tip">
           {{ t('ui.grid.individuation.switchapplycon') }}
         </div>
@@ -179,9 +170,7 @@
       </template>
       <!-- del -->
       <template v-if="status === 'del'">
-        <div class="tiny-grid-custom-switch__del-tip">
-          {{ selectedName }}
-        </div>
+        <div class="tiny-grid-custom-switch__del-tip">{{ selectedName }}</div>
         <div class="tiny-grid-custom-switch__del-tip">
           {{ t('ui.grid.individuation.switchdelcon') }}
         </div>
@@ -192,25 +181,19 @@
             <tiny-button type="primary" @click="handleApplyConfirm('yes')">
               {{ t('ui.grid.individuation.switchdelyes') }}
             </tiny-button>
-            <tiny-button @click="handleApplyConfirm('no')">
-              {{ t('ui.grid.individuation.switchdelno') }}
-            </tiny-button>
+            <tiny-button @click="handleApplyConfirm('no')">{{ t('ui.grid.individuation.switchdelno') }}</tiny-button>
           </template>
           <template v-if="status === 'edit'">
             <tiny-button type="primary" :disabled="!editName" @click="handleEditConfirm('yes')">
               {{ t('ui.grid.individuation.switchdelyes') }}
             </tiny-button>
-            <tiny-button @click="handleEditConfirm('no')">
-              {{ t('ui.grid.individuation.switchdelno') }}
-            </tiny-button>
+            <tiny-button @click="handleEditConfirm('no')">{{ t('ui.grid.individuation.switchdelno') }}</tiny-button>
           </template>
           <template v-if="status === 'del'">
             <tiny-button type="primary" @click="handleDelConfirm('yes')">
               {{ t('ui.grid.individuation.switchdelyes') }}
             </tiny-button>
-            <tiny-button @click="handleDelConfirm('no')">
-              {{ t('ui.grid.individuation.switchdelno') }}
-            </tiny-button>
+            <tiny-button @click="handleDelConfirm('no')">{{ t('ui.grid.individuation.switchdelno') }}</tiny-button>
           </template>
         </template>
       </template>
@@ -267,6 +250,10 @@ export default defineComponent({
     historyConfig: {
       type: Object,
       default: () => ({})
+    },
+    remote: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -311,35 +298,15 @@ export default defineComponent({
     selectedTemplateVal: {
       handler() {
         this.selectedTemplateName = this.selectedTemplateVal.name || ''
-        this.saveMethod = this.selectedTemplateVal.id ? 'overwrite' : 'save'
+        this.saveMethod = this.selectedTemplateVal.id && !this.historyConfig.hideOverwrite ? 'overwrite' : 'save'
       },
       deep: true,
       immediate: true
     }
   },
   created() {
-    let {
-      settingOpts: { storage: storageType, storageKey },
-      id: toolbarId
-    } = this.$grid.getVm('toolbar')
-
-    if (!this.doCheck({ storageType })) return
-
     this.setUserKey()
-
-    getStorage(this.historyConfig.storageKey, storageType, this.historyConfig.remoteMethod).then((storeObj) => {
-      const optionArr = (storeObj || {})[toolbarId] || []
-
-      this.options = optionArr.filter((opt) => (this.userKey ? opt.userKey === this.userKey : true))
-      this.$emit('init-storage', this.options)
-
-      getStorage(storageKey, storageType, this.historyConfig.remoteSelectedMethod).then((storeObj) => {
-        this.option = (storeObj || {})[toolbarId] || {}
-
-        this.enableAll()
-        this.setSelected()
-      })
-    })
+    this.initStorage(true)
   },
   methods: {
     t,
@@ -347,7 +314,31 @@ export default defineComponent({
       this.status = 'save'
       this.visible = true
     },
-    handleSaveConfirm(flag) {
+    initStorage(isInit) {
+      let {
+        settingOpts: { storage: storageType, storageKey },
+        id: toolbarId
+      } = this.$grid.getVm('toolbar')
+
+      if (!this.doCheck({ storageType })) return
+
+      getStorage(this.historyConfig.storageKey, storageType, this.historyConfig.remoteMethod).then((storeObj) => {
+        const optionArr = (storeObj || {})[toolbarId] || []
+
+        this.options = optionArr.filter((opt) => (this.userKey ? opt.userKey === this.userKey : true))
+        this.$emit('init-storage', this.options)
+
+        if (isInit) {
+          getStorage(storageKey, storageType, this.historyConfig.remoteSelectedMethod).then((storeObj) => {
+            this.option = (storeObj || {})[toolbarId] || {}
+
+            this.enableAll()
+            this.setSelected()
+          })
+        }
+      })
+    },
+    handleSaveConfirm(flag, hideTip) {
       if (flag === 'overwrite') {
         if (
           (this.customMode === 'saas' && !this.selectedTemplateVal.id) ||
@@ -360,7 +351,8 @@ export default defineComponent({
       const toolbarVm = this.$grid.getVm('toolbar')
       const customVm = toolbarVm.$refs.custom
       customVm.updatedSorting = true
-      const item = createCustom(customVm.buildSettings(), this.userKey)
+      let item = createCustom(customVm.buildSettings(), this.userKey)
+      item = JSON.parse(JSON.stringify(item))
       const { id: toolbarId } = toolbarVm
 
       const business = (storeObj) => {
@@ -373,7 +365,7 @@ export default defineComponent({
             item.name = this.savedTemplateName
           }
           this.options.push(item)
-          this.$emit('init-storage', this.options)
+          !this.remote && this.$emit('init-storage', this.options)
           optionArr.unshift(item)
         } else if (flag === 'overwrite') {
           let index, customId, customName
@@ -395,8 +387,8 @@ export default defineComponent({
           item.name = this.selectedTemplateName || customName
           optionArr.splice(index, 1, item)
 
-          if (this.selectedTemplateName && this.selectedTemplateName !== customName) {
-            customVm.updateTemplateOptions(item.id, item.name)
+          if (this.selectedTemplateName && !this.remote) {
+            this.$emit('init-storage', optionArr)
           }
         }
 
@@ -408,7 +400,7 @@ export default defineComponent({
       const postOperate = () => {
         if (flag === 'save-apply' || flag === 'overwrite') {
           customVm.multipleHistoryId = item.id
-          customVm.saveSettings(this.customMode === 'saas')
+          this.customMode !== 'saas' && customVm.saveSettings(false)
         }
 
         this.visible = false
@@ -416,10 +408,13 @@ export default defineComponent({
       }
       this.templateVisible = false
       this.doStorage(business, postOperate)
-      Modal.message({
-        message: t('ui.grid.saveSuccess'),
-        status: 'success'
-      })
+
+      if (!this.historyConfig.hideSuccessTip && !hideTip) {
+        Modal.message({
+          message: t('ui.grid.saveSuccess'),
+          status: 'success'
+        })
+      }
     },
     handleApply() {
       if (
@@ -527,7 +522,7 @@ export default defineComponent({
       this.status = 'del'
       this.visible = true
     },
-    handleDelConfirm(flag) {
+    handleDelConfirm(flag, selected) {
       if (flag === 'yes') {
         const { id: toolbarId } = this.$grid.getVm('toolbar')
 
@@ -535,8 +530,9 @@ export default defineComponent({
           storeObj = storeObj || {}
 
           let optionArr = storeObj[toolbarId] || []
+          const selectedId = selected ? selected.id : this.selected
 
-          optionArr = optionArr.filter((opt) => opt.id !== this.selected)
+          optionArr = optionArr.filter((opt) => opt.id !== selectedId)
           storeObj[toolbarId] = optionArr
 
           return storeObj
@@ -547,6 +543,10 @@ export default defineComponent({
 
           this.visible = false
           this.status = ''
+
+          if (!this.remote) {
+            this.$emit('init-storage', this.options)
+          }
         }
 
         this.doStorage(business, postOperate)
@@ -616,6 +616,7 @@ export default defineComponent({
 
         this.selected = item ? this.selected : null
         this.selectedName = item ? item.name : null
+        this.$emit('set-selected', this.selected)
       }
 
       this.fixStatus()
diff --git a/packages/vue/src/grid-toolbar/src/index.ts b/packages/vue/src/grid-toolbar/src/index.ts
index 4bfde592a2..6b196f5c0c 100644
--- a/packages/vue/src/grid-toolbar/src/index.ts
+++ b/packages/vue/src/grid-toolbar/src/index.ts
@@ -109,7 +109,8 @@ function renderCustomWrapper({ _vm, settingStore, settingsBtnOns, tableFullColum
             showModal: (modalVisible) => (settingStore.customVisible = modalVisible),
             saveSettings: _vm.handleSaveSettings,
             resetSettings: (settings) => _vm.$emit('reset-setting', settings),
-            cancelSettings: () => _vm.$emit('cancel-setting')
+            cancelSettings: () => _vm.$emit('cancel-setting'),
+            deleteTemplate: (template) => _vm.$emit('delete-template', template)
           },
           props: {
             customMode: _vm.customMode,
@@ -129,9 +130,9 @@ function renderCustomWrapper({ _vm, settingStore, settingsBtnOns, tableFullColum
             resetMethod: _vm.resetMethod,
             alwaysShowColumns: setting.alwaysShowColumns,
             columnsGroup: setting.columnsGroup,
-            hideSortColumn: setting.hideSortColumn,
             showHideAll: setting.showHideAll,
-            fixedSorting: setting.fixedSorting
+            fixedSorting: setting.fixedSorting,
+            setting
           },
           ref: 'custom'
         })
@@ -409,6 +410,18 @@ export default defineComponent({
     return h('div', propsArg, childrenArg)
   },
   methods: {
+    updateTemplateList() {
+      const custom = this.$refs.custom
+
+      if (custom && custom.$refs.switch) {
+        custom.$refs.switch.initStorage(false)
+      }
+    },
+    updateSelectedTemplate(val) {
+      const custom = this.$refs.custom
+
+      custom && custom.updateSelectedTemplate(val)
+    },
     settingBtnClick() {
       return this.setting && this.setting.customSetting
         ? this.setting.settingBtnClickFn()
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index 1ea1d31013..b3127f46b2 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -399,7 +399,8 @@ function renderColumn(args1) {
   let validated = validatedMap[`${column.id}-${row[rowId]}`]
   let validError = validStore.row === row && validStore.column === column
   let hasDefaultTip = editRules && (isMessageDefault ? height || tableData.length > 1 : isMessageInline)
-  let { align, className, editor, showTip } = column
+  let { align, editor, showTip } = column
+  const className = column.own.className
   let cellAlign = align || allAlign
   let columnActived =
     editConfig && editor && actived.row === row && (actived.column === column || editConfig.mode === 'row')
diff --git a/packages/vue/src/grid/src/cell/src/cell.ts b/packages/vue/src/grid/src/cell/src/cell.ts
index e192bc767d..5e02e82275 100644
--- a/packages/vue/src/grid/src/cell/src/cell.ts
+++ b/packages/vue/src/grid/src/cell/src/cell.ts
@@ -845,7 +845,8 @@ export const Cell = {
     let { formatText, own, slots } = column
     let editor = own.editor
     let compConf = Renderer.get(editor.component)
-    let showEdit = editor.type === 'visible' || isEdit
+    // 表格没有配置editConfig时，type === 'visible'不展示编辑态
+    let showEdit = ($table.editConfig && editor.type === 'visible') || isEdit
 
     if (showEdit && slots && slots.edit) {
       return slots.edit(params, h)
diff --git a/packages/vue/src/grid/src/column-anchor/src/methods.ts b/packages/vue/src/grid/src/column-anchor/src/methods.ts
index cea96e5c2b..8d833f486f 100644
--- a/packages/vue/src/grid/src/column-anchor/src/methods.ts
+++ b/packages/vue/src/grid/src/column-anchor/src/methods.ts
@@ -11,7 +11,8 @@ export default {
       {
         class: ['tiny-grid__column-anchor', _vm.viewCls('columnAnchor')],
         style: viewType === 'default' ? 'display:flex' : '',
-        key: _vm.columnAnchorKey
+        key: _vm.columnAnchorKey,
+        ref: 'tinyGridColumnAnchor'
       },
       anchors.map((anchor) => {
         const { active = false, label = '', field = '', render } = anchor
diff --git a/packages/vue/src/grid/src/grid/grid.ts b/packages/vue/src/grid/src/grid/grid.ts
index 77e05caedf..7faecdde90 100644
--- a/packages/vue/src/grid/src/grid/grid.ts
+++ b/packages/vue/src/grid/src/grid/grid.ts
@@ -23,7 +23,7 @@
  *
  */
 
-import { isBoolean } from '@opentiny/vue-renderless/grid/static/'
+import { isBoolean, toNumber } from '@opentiny/vue-renderless/grid/static/'
 import { getListeners, emitEvent } from '@opentiny/vue-renderless/grid/utils'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import {
@@ -421,17 +421,24 @@ export default defineComponent({
     })
   },
   methods: {
+    // 配置高度减去（表格锚点+工具栏+分页）计算得出表格高度
     updateParentHeight() {
       if (!this.tasks.updateParentHeight) {
         this.tasks.updateParentHeight = debounce(10, () => {
           const { $el, $refs } = this
-          const { tinyTable } = $refs
+          const { tinyTable, tinyGridColumnAnchor } = $refs
           const toolbarVm = this.getVm('toolbar')
 
           if (tinyTable) {
+            let columnAnchorHeight = 0
+            if (tinyGridColumnAnchor) {
+              const { height, marginTop, marginBottom } = getComputedStyle(tinyGridColumnAnchor)
+              columnAnchorHeight = toNumber(height) + toNumber(marginTop) + toNumber(marginBottom)
+            }
             tinyTable.parentHeight =
               $el.parentNode.clientHeight -
               (toolbarVm ? toolbarVm.$el.clientHeight : 0) -
+              columnAnchorHeight -
               ($refs.pager ? $refs.pager.$el.clientHeight : 0)
           }
         })
diff --git a/packages/vue/src/grid/src/table/src/events.ts b/packages/vue/src/grid/src/table/src/events.ts
index f3aafaaab5..c6c4b5061e 100644
--- a/packages/vue/src/grid/src/table/src/events.ts
+++ b/packages/vue/src/grid/src/table/src/events.ts
@@ -244,5 +244,7 @@ export function handleGlobalKeydownEvent(event) {
 
 // 监听全局的窗口尺寸改变事件，然后重新计算表格样式
 export function handleGlobalResizeEvent() {
+  // 窗口resize后，调用recalculate父容器高度还是初始值，需要update一下
+  this.updateParentHeight()
   this.recalculate()
 }
diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts
index 1ef773d729..2a2296f572 100644
--- a/packages/vue/src/grid/src/table/src/methods.ts
+++ b/packages/vue/src/grid/src/table/src/methods.ts
@@ -1029,8 +1029,6 @@ const Methods = {
     return this.recalculate()
   },
   updateStyle() {
-    // 窗口resize后，手动调用recalculate父容器高度还是初始值，需要update一下
-    this.updateParentHeight()
     let { columnStore, currentRow, height, maxHeight, minHeight, parentHeight, tableColumn, scrollbarWidth } = this
     const { scrollYLoad, scrollXLoad, scrollLoad } = this
     let layoutList = ['header', 'body', 'footer']
diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts
index 7034b7de05..b2580408b8 100644
--- a/packages/vue/src/grid/src/table/src/table.ts
+++ b/packages/vue/src/grid/src/table/src/table.ts
@@ -1055,8 +1055,6 @@ export default defineComponent({
       unbindEvent($table)
     })
 
-    useInstanceSlots()
-
     const tableListeners = getListeners(attrs, listeners)
 
     return { slots, tableListeners, tinyTheme, id, collectColumn, tableFullColumn, visibleColumn, tableColumn }
diff --git a/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts b/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts
index cf9144691f..e35c6c8738 100644
--- a/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts
+++ b/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts
@@ -66,13 +66,13 @@ export function computeScrollXLoad({ _vm, scrollX, scrollXLoad, scrollXStore, ta
     const clientWidth = tableBodyElem.clientWidth
     let width = 0
     let visibleXSize = 0
-
-    for (let i = 0; i < visibleColumn.length; i++) {
+    const len = visibleColumn.length
+    for (let i = 0; i < len; i++) {
       const column = visibleColumn[i]
 
       width += column.renderWidth
-
-      if (width > clientWidth) {
+      // 当虚拟滚动可见列宽度大于表格宽度或者循环结束，保存可见列大小
+      if (width > clientWidth || i === len - 1) {
         visibleXSize = i + 1
         break
       }
diff --git a/packages/vue/src/grid/src/table/src/utils/updateStyle.ts b/packages/vue/src/grid/src/table/src/utils/updateStyle.ts
index 68407376d4..122db9cf37 100644
--- a/packages/vue/src/grid/src/table/src/utils/updateStyle.ts
+++ b/packages/vue/src/grid/src/table/src/utils/updateStyle.ts
@@ -142,7 +142,7 @@ function layoutBodyWrapper({
     if (maxHeight) {
       maxHeight = isScale(maxHeight) ? Math.floor((parseInt(maxHeight) / 100) * parentHeight) : toNumber(maxHeight)
 
-      const contentHeight = maxHeight - headerHeight
+      const contentHeight = maxHeight - headerHeight - footerHeight
 
       wrapperElem.style.maxHeight = `${contentHeight}px`
     }
diff --git a/packages/vue/src/input/src/index.ts b/packages/vue/src/input/src/index.ts
index bb75a4e935..aca13a3e50 100644
--- a/packages/vue/src/input/src/index.ts
+++ b/packages/vue/src/input/src/index.ts
@@ -145,7 +145,7 @@ export const inputProps = {
   },
   showEmptyValue: {
     type: Boolean,
-    default: false
+    default: undefined
   },
   textAlign: {
     type: String,
diff --git a/packages/vue/src/picker/src/mobile-first.vue b/packages/vue/src/picker/src/mobile-first.vue
index 195b3d2337..7d2a282107 100644
--- a/packages/vue/src/picker/src/mobile-first.vue
+++ b/packages/vue/src/picker/src/mobile-first.vue
@@ -17,7 +17,7 @@
       :tabindex="tabindex"
       v-else-if="!state.ranged"
       data-tag="tiny-date-editor"
-      :readonly="state.isMobileScreen || !editable || readonly || state.type === 'dates' || state.type === 'week'"
+      :readonly="state.isMobileMode || !editable || readonly || state.type === 'dates' || state.type === 'week'"
       :disabled="state.pickerDisabled"
       :size="state.pickerSize"
       :name="name"
@@ -49,7 +49,7 @@
       </template>
       <template #suffix>
         <i data-tag="icon" class="flex items-center cursor-pointer">
-          <transition v-if="!state.isMobileScreen" name="tiny-transition-icon-scale-in">
+          <transition v-if="!state.isMobileMode" name="tiny-transition-icon-scale-in">
             <component
               :is="state.showClose ? clearIcon : null"
               @click="handleClickIcon"
@@ -106,7 +106,7 @@
           :title="state.displayValue && state.displayValue[0]"
           :disabled="state.pickerDisabled"
           v-bind="state.firstInputId"
-          :readonly="state.isMobileScreen || !editable || readonly"
+          :readonly="state.isMobileMode || !editable || readonly"
           :name="name && name[0]"
           @input="handleStartInput"
           @change="handleStartChange"
@@ -136,7 +136,7 @@
           :title="state.displayValue && state.displayValue[1]"
           :disabled="state.pickerDisabled"
           v-bind="state.secondInputId"
-          :readonly="state.isMobileScreen || !editable || readonly"
+          :readonly="state.isMobileMode || !editable || readonly"
           :name="name && name[1]"
           @input="handleEndInput"
           @change="handleEndChange"
@@ -146,7 +146,7 @@
         />
         <i
           @click="handleClickIcon"
-          v-if="!state.isMobileScreen && state.haveTrigger"
+          v-if="!state.isMobileMode && state.haveTrigger"
           data-tag="tiny-input__icon tiny-range__close-icon"
           :class="gcls('close-icon')"
         >
@@ -183,7 +183,7 @@
     </div>
     <!-- 大屏面板 -->
     <component
-      v-if="!state.isMobileScreen"
+      v-if="!state.isMobileMode"
       :is="state.panel"
       :step="step"
       :show-week-number="showWeekNumber"
@@ -196,7 +196,7 @@
     ></component>
     <!-- 小屏 - 日期面板 -->
     <tiny-date-picker-mobile
-      v-if="state.isMobileScreen && state.isDateMobileComponent"
+      v-if="state.isMobileMode && state.isDateMobileComponent"
       ref="datePickerMobile"
       v-model="state.dateMobileOption.value"
       :title="title"
@@ -216,7 +216,7 @@
     </tiny-date-picker-mobile>
     <!-- 小屏 - 时间面板 -->
     <tiny-time-picker-mobile
-      v-if="state.isMobileScreen && state.isTimeMobileComponent"
+      v-if="state.isMobileMode && state.isTimeMobileComponent"
       ref="datePickerMobile"
       v-model="state.timeMobileOption.value"
       :default-value="state.timeMobileOption.defaultValue"
diff --git a/packages/vue/src/pop-upload/src/pc.vue b/packages/vue/src/pop-upload/src/pc.vue
index 02dc3b97d1..92cab744a6 100644
--- a/packages/vue/src/pop-upload/src/pc.vue
+++ b/packages/vue/src/pop-upload/src/pc.vue
@@ -29,7 +29,11 @@
             :title="state.tipsTitleText"
           >
             <div class="tiny-popupload__dialog-tips">
-              <p v-for="(item, index) in state.tipsTitle.filter((value) => value !== undefined)" :key="index">
+              <p
+                v-for="(item, index) in state.tipsTitle.filter((value) => value !== undefined)"
+                :key="index"
+                class="tiny-popupload__dialog-tips-item"
+              >
                 {{ item.count !== undefined ? state.limitCountTips + ':' + item.count : '' }}
                 {{ item.type !== undefined ? state.limitTypeTips + ':' + item.type : '' }}
                 {{ item.size !== undefined ? state.limitSizeTips + ':' + item.size : '' }}
@@ -38,7 +42,7 @@
           </tiny-alert>
           <tiny-alert type="error" size="large" v-if="state.errorTips.length > 0" @close="closeErrorTips">
             <div class="tiny-popupload__dialog-tips">
-              <p v-for="(item, index) in state.errorTips" :key="index">
+              <p v-for="(item, index) in state.errorTips" :key="index" class="tiny-popupload__dialog-tips-item">
                 {{ item.size !== undefined ? item.size + ':' + state.errorSizeTips : '' }}
                 {{ item.type !== undefined ? item.type + ':' + state.errorTypeTips : '' }}
                 {{ item.num !== undefined ? state.errorNumTips : '' }}
@@ -48,7 +52,9 @@
           </tiny-alert>
           <tiny-alert type="success" size="large" v-if="state.successTips.length > 0" @close="closeSuccessTips">
             <div class="tiny-popupload__dialog-tips">
-              <p v-for="(item, index) in state.successTips" :key="index">{{ item }},{{ state.uploadSuccessTips }}</p>
+              <p v-for="(item, index) in state.successTips" :key="index" class="tiny-popupload__dialog-tips-item">
+                {{ item }},{{ state.uploadSuccessTips }}
+              </p>
             </div>
           </tiny-alert>
         </div>
diff --git a/packages/vue/src/search/src/index.ts b/packages/vue/src/search/src/index.ts
index 207c57dd41..08b5fe5d2a 100644
--- a/packages/vue/src/search/src/index.ts
+++ b/packages/vue/src/search/src/index.ts
@@ -92,7 +92,12 @@ export const searchProps = {
     default: 'small'
   },
   typeValue: Object,
-  suffixIcon: [Object, String]
+  suffixIcon: [Object, String],
+  // tiny新增
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 }
 
 export default defineComponent({
diff --git a/packages/vue/src/search/src/pc.vue b/packages/vue/src/search/src/pc.vue
index 3cd7d27b80..1cbb8c4e9b 100644
--- a/packages/vue/src/search/src/pc.vue
+++ b/packages/vue/src/search/src/pc.vue
@@ -15,7 +15,8 @@
       'tiny-search',
       { mini },
       { collapse: state.collapse },
-      state.searchSize ? 'tiny-search--' + state.searchSize : ''
+      state.searchSize ? 'tiny-search--' + state.searchSize : '',
+      { 'is-disabled': disabled }
     ]"
     @mouseenter="state.hovering = true"
     @mouseleave="state.hovering = false"
@@ -36,8 +37,9 @@
       </transition>
       <input
         ref="input"
-        v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]', 'id', 'disabled', 'clearable'])"
+        v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]', 'id', 'clearable'])"
         v-model="state.currentValue"
+        :disabled="disabled"
         :style="
           transparent
             ? {
@@ -111,7 +113,8 @@ export default defineComponent({
     'clearable',
     'isEnterSearch',
     'typeValue',
-    'size'
+    'size',
+    'disabled'
   ],
   emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
   components: {
diff --git a/packages/vue/src/switch/__tests__/switch.test.tsx b/packages/vue/src/switch/__tests__/switch.test.tsx
index 3b4f737048..ba231701a6 100644
--- a/packages/vue/src/switch/__tests__/switch.test.tsx
+++ b/packages/vue/src/switch/__tests__/switch.test.tsx
@@ -1,9 +1,12 @@
 import { mountPcMode } from '@opentiny-internal/vue-test-utils'
 import { describe, expect, test, vi } from 'vitest'
 import Switch from '@opentiny/vue-switch'
+import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
 import { nextTick, ref } from 'vue'
 
 let value = false
+const TinyIconArrowLeft = IconArrowLeft()
+const TinyIconArrowRight = IconArrowRight()
 
 describe('PC Mode', () => {
   const mount = mountPcMode
@@ -13,7 +16,7 @@ describe('PC Mode', () => {
     expect(wrapper.find('.mini').exists()).toBe(true)
   })
 
-  test('slot', async () => {
+  test('open & close slot', async () => {
     const wrapper = mount(() => (
       <Switch
         v-model={value}
@@ -26,6 +29,17 @@ describe('PC Mode', () => {
     expect(wrapper.find('.no').exists()).toBe(true)
   })
 
+  test('active-icon & inactive-icon slot', async () => {
+    const wrapper = mount(Switch, {
+      modelValue: value,
+      slots: {
+        'active-icon': () => <TinyIconArrowLeft />,
+        'inactive-icon': () => <TinyIconArrowRight />
+      }
+    })
+    expect(wrapper.find('.tiny-svg').exists()).toBe(true)
+  })
+
   test('events', async () => {
     const handleClick = vi.fn()
     const wrapper = mount(() => <Switch v-model={value} onChange={handleClick}></Switch>)
diff --git a/packages/vue/src/switch/src/pc.vue b/packages/vue/src/switch/src/pc.vue
index d54aca0fea..f368df9201 100644
--- a/packages/vue/src/switch/src/pc.vue
+++ b/packages/vue/src/switch/src/pc.vue
@@ -24,6 +24,10 @@
         <slot v-if="state.currentValue === falseValue" name="close">OFF</slot>
       </div>
     </span>
+    <span class="tiny-switch__button">
+      <slot v-if="state.currentValue === trueValue" name="active-icon"></slot>
+      <slot v-if="state.currentValue === falseValue" name="inactive-icon"></slot>
+    </span>
   </span>
   <span v-else>
     <slot v-if="state.currentValue === trueValue" name="open">{{ t('yes') }}</slot>
diff --git a/packages/vue/src/tabs/src/tab-nav/pc.vue b/packages/vue/src/tabs/src/tab-nav/pc.vue
index f56482a9fe..ac92ff4a1e 100644
--- a/packages/vue/src/tabs/src/tab-nav/pc.vue
+++ b/packages/vue/src/tabs/src/tab-nav/pc.vue
@@ -247,7 +247,11 @@ export default defineComponent({
             }
           }
         },
-        [overflowTitle ? getTabTitle(tabLabelContent) : tabLabelContent, btnClose, state.separator && itemsSeparator]
+        [
+          overflowTitle ? getTabTitle(tabLabelContent) : tabLabelContent,
+          btnClose,
+          (state.separator || tabStyle === 'button-card') && itemsSeparator
+        ]
       )
     })
 
diff --git a/packages/vue/src/time-line-new/index.ts b/packages/vue/src/time-line-new/index.ts
new file mode 100644
index 0000000000..6dd007f667
--- /dev/null
+++ b/packages/vue/src/time-line-new/index.ts
@@ -0,0 +1,18 @@
+import TimeLine from './src/index'
+import { version } from './package.json'
+
+/* istanbul ignore next */
+TimeLine.install = function (Vue) {
+  Vue.component(TimeLine.name, TimeLine)
+}
+
+TimeLine.version = version
+
+/* istanbul ignore next */
+if (process.env.BUILD_TARGET === 'runtime') {
+  if (typeof window !== 'undefined' && window.Vue) {
+    TimeLine.install(window.Vue)
+  }
+}
+
+export default TimeLine
diff --git a/packages/vue/src/time-line-new/package.json b/packages/vue/src/time-line-new/package.json
new file mode 100644
index 0000000000..7cab012ea5
--- /dev/null
+++ b/packages/vue/src/time-line-new/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@opentiny/vue-time-line-new",
+  "type": "module",
+  "version": "3.17.0",
+  "description": "",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "index.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  },
+  "dependencies": {
+    "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-icon": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~"
+  },
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "^0.31.0"
+  }
+}
diff --git a/packages/vue/src/time-line-new/src/index.ts b/packages/vue/src/time-line-new/src/index.ts
new file mode 100644
index 0000000000..31318354e6
--- /dev/null
+++ b/packages/vue/src/time-line-new/src/index.ts
@@ -0,0 +1,82 @@
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc|mobile|mobile-first'
+
+const $constants = {
+  PROCESS_DONE_CLS: 'process-done',
+  PROCESS_CUR_CLS: 'process-current',
+  PROCESS_WAIT_CLS: 'process-wait',
+  STACK_NODES_MAX: '7',
+  LIMITED_STACK_NODES: '3'
+}
+
+export default defineComponent({
+  name: $prefix + 'TimeLine',
+  props: {
+    ...$props,
+    _constants: {
+      type: Object,
+      default: () => $constants
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    showNumber: {
+      type: Boolean,
+      default: true
+    },
+    nameField: {
+      type: String,
+      default: 'name'
+    },
+    timeField: {
+      type: String,
+      default: 'time'
+    },
+    tipsField: {
+      type: String,
+      default: 'tips'
+    },
+    autoColorField: {
+      type: String,
+      default: 'autoColor'
+    },
+    start: {
+      type: Number,
+      default: 1
+    },
+    data: Array,
+    space: Number,
+    active: {
+      type: Number,
+      default: -1
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    showStatus: {
+      type: Boolean,
+      default: false
+    },
+    subField: {
+      type: Boolean,
+      default: false
+    },
+    foldDisabled: {
+      type: Boolean,
+      default: false
+    },
+    nodeMax: {
+      type: [Number, String],
+      default: $constants.STACK_NODES_MAX
+    },
+    limitedNodes: {
+      type: [Number, String],
+      default: $constants.LIMITED_STACK_NODES
+    }
+  },
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})
diff --git a/packages/vue/src/time-line-new/src/mobile-first.vue b/packages/vue/src/time-line-new/src/mobile-first.vue
new file mode 100644
index 0000000000..391d4aa5b3
--- /dev/null
+++ b/packages/vue/src/time-line-new/src/mobile-first.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="inline-flex flex-col" data-tag="tiny-timeline">
+    <div
+      data-tag="tiny-timeline-nodes"
+      v-for="(node, index) in state.stackNodes"
+      :key="index"
+      :style="{
+        height: index === state.stackNodes.length - 1 ? '' : space && space + 'px'
+      }"
+      :class="['inline-flex', getStatusCls(index)]"
+    >
+      <ul class="inline-flex sm:items-start" data-tag="tiny-timeline-list">
+        <slot v-if="subField" name="left" :slot-scope="node">
+          <li class="text-color-text-secondary text-left pr-0.5 inline-flex text-xs">
+            <div class="sm:inline-block hidden leading-5 w-32">
+              <span>{{ getDate(node[timeField]).date }}</span>
+              <span class="ml-1">{{ getDate(node[timeField]).time }}</span>
+            </div>
+            <div class="sm:hidden inline-flex flex-col leading-5.5 w-20">
+              <span class="text-sm">{{ getDate(node[timeField]).date }}</span>
+              <span class="text-sm mb-6">{{ getDate(node[timeField]).time }}</span>
+            </div>
+          </li>
+        </slot>
+        <li
+          data-tag="tiny-timeline-autocolor"
+          :style="{
+            height: index === state.stackNodes.length - 1 ? '' : space && space + 'px'
+          }"
+          class="ml-1.5 relative h-full"
+        >
+          <div
+            :class="[
+              'sm:w-px absolute mt-4 h-[calc(100%-theme(spacing.3))]',
+              {
+                'sm:bg-color-bg-3 sm:border-0 border-l-0.5 border-l-color-bg-3': index !== state.stackNodes.length - 1
+              }
+            ]"
+          ></div>
+          <div
+            class="mt-1 w-3 h-3 leading-3 box-border relative text-xs text-center -ml-1.5 cursor-pointer inline-flex items-center justify-center align-top"
+          >
+            <span
+              v-if="typeof node[autoColorField] === 'string'"
+              :class="[
+                'rounded-full block w-1.5 h-1.5',
+                node[autoColorField] === 'success' && 'bg-color-success',
+                node[autoColorField] === 'error' && 'bg-color-error',
+                node[autoColorField] === 'info' && 'bg-color-text-disabled'
+              ]"
+            ></span>
+            <span v-else-if="!node[autoColorField]" :class="['rounded-full block w-1.5 h-1.5 bg-color-brand']"></span>
+            <component v-else :is="node[autoColorField]"></component>
+          </div>
+        </li>
+        <slot v-if="!subField" name="left" :slot-scope="node">
+          <li
+            data-tag="tiny-timeline-list-left"
+            class="sm:text-color-text-secondary text-color-text-placeholder text-left sm:pl-3 pl-2 inline-flex flex-col sm:flex-row"
+          >
+            <span class="inline-block sm:text-xs text-sm sm:leading-5 leading-5.5"
+              >{{ getDate(node[timeField]).date }} {{ getDate(node[timeField]).time }}</span
+            >
+            <span
+              v-if="node[nameField]"
+              class="sm:hidden inline-block sm:leading-5 leading-5.5 text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[theme(spacing.56)] mb-6 text-color-text-primary"
+              >{{ node[nameField] }}</span
+            >
+            <span
+              v-if="node[tipsField]"
+              class="sm:hidden max-w-[theme(spacing.56)] inline-block text-color-icon-secondary text-xs mt-2.5 leading-5"
+              >{{ node[tipsField] }}</span
+            >
+          </li>
+        </slot>
+        <li
+          :class="[
+            'hidden sm:text-xs text-sm text-color-text-primary sm:inline-flex flex-col',
+            subField ? 'ml-4.5' : 'ml-3 '
+          ]"
+        >
+          <span
+            :class="[
+              'inline-block leading-5 sm:text-xs text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[theme(spacing.56)]',
+              { 'mb-4': !subField }
+            ]"
+            >{{ node[nameField] }}</span
+          >
+          <span
+            v-if="subField"
+            class="max-w-[theme(spacing.56)] inline-block text-color-icon-secondary sm:text-xs text-sm leading-5 mb-4 break-all break-words"
+            >{{ node[tipsField] }}</span
+          >
+        </li>
+        <li
+          v-if="subField"
+          :class="['sm:hidden text-xs text-color-text-primary inline-flex flex-col', subField ? 'ml-4.5' : 'ml-3 ']"
+        >
+          <span
+            class="inline-block leading-5.5 sm:text-xs text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[theme(spacing.56)]"
+            >{{ node[nameField] }}</span
+          >
+          <span
+            v-if="node[tipsField]"
+            class="max-w-[theme(spacing.56)] break-all break-words leading-5 inline-block text-color-icon-secondary text-xs sm:text-xs"
+            >{{ node[tipsField] }}</span
+          >
+        </li>
+      </ul>
+    </div>
+    <div
+      data-tag="tiny-timeline-showdata"
+      v-if="state.showData"
+      class="sm:ml-6 ml-5 sm:m-0 my-1 sm:leading-5 sm:h-5 leading-5.5 inline-flex items-center"
+    >
+      <div
+        data-tag="tiny-timeline-status"
+        class="sm:h-3 h-3.5 cursor-pointer inline-flex text-color-brand fill-color-brand sm:text-xs text-sm"
+        @click="changeStatus"
+      >
+        <span v-if="state.showAll" class="inline-flex items-center">收起</span>
+        <span v-else class="inline-flex items-center">展开</span>
+        <icon-chevron-up v-if="state.showAll" class="w-3 h-3 sm:ml-2 ml-1 my-px sm:my-0" />
+        <icon-chevron-down v-else class="w-3 h-3 sm:ml-2 ml-1 my-px sm:my-0" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// 从 renderless new包引入
+import { renderless, api } from '@opentiny/vue-renderless/time-line-new/vue'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
+import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
+
+export default defineComponent({
+  emits: ['click'],
+  props: [
+    ...props,
+    'vertical',
+    'nameField',
+    'timeField',
+    'tipsField',
+    'autoColorField',
+    'data',
+    'space',
+    'subField',
+    'foldDisabled',
+    'nodeMax',
+    'limitedNodes'
+  ],
+  components: { IconChevronDown: IconChevronDown(), IconChevronUp: IconChevronUp() },
+  setup(props, context): any {
+    return setup({ props, context, renderless, api })
+  }
+})
+</script>
diff --git a/packages/vue/src/time-line-new/src/mobile.vue b/packages/vue/src/time-line-new/src/mobile.vue
new file mode 100644
index 0000000000..d5027b94fd
--- /dev/null
+++ b/packages/vue/src/time-line-new/src/mobile.vue
@@ -0,0 +1,55 @@
+<template>
+  <div :class="['tiny-mobile-timeline']">
+    <div
+      v-for="(node, index) in state.nodes"
+      :key="index"
+      :style="{
+        height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
+      }"
+      :class="['tiny-mobile-timeline__item', node.status]"
+    >
+      <ul class="tiny-mobile-timeline__list">
+        <slot name="left" :slot-scope="node">
+          <li class="tiny-mobile-timeline__date-time">
+            <span class="tiny-mobile-timeline__date">{{ getDate(node[timeField]).date }}</span>
+            <span class="tiny-mobile-timeline__time">{{ getDate(node[timeField]).time }}</span>
+          </li>
+        </slot>
+        <li
+          :style="{
+            height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
+          }"
+          class="tiny-mobile-timeline__line"
+        >
+          <div class="tiny-mobile-timeline__icon"></div>
+        </li>
+        <slot name="right" :slot-scope="node">
+          <li class="tiny-mobile-timeline__content">
+            <div>
+              <span class="tiny-mobile-timeline__title">{{ node[nameField] }}</span>
+              <span class="tiny-mobile-timeline__cycle">{{ node.cycle }}</span>
+            </div>
+            <div>
+              <span class="tiny-mobile-timeline__user">{{ node.personInfo }}</span>
+              <span class="tiny-mobile-timeline__tip">{{ node.overdue }}</span>
+            </div>
+          </li>
+        </slot>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// 从 renderless new包引入
+import { renderless, api } from '@opentiny/vue-renderless/time-line-new/vue'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
+import '@opentiny/vue-theme-mobile/steps/index.less'
+
+export default defineComponent({
+  props: [...props, 'nameField', 'timeField', 'data', 'space'],
+  setup(props, context): any {
+    return setup({ props, context, renderless, api })
+  }
+})
+</script>
diff --git a/packages/vue/src/time-line-new/src/pc.vue b/packages/vue/src/time-line-new/src/pc.vue
new file mode 100644
index 0000000000..6bdd20ec43
--- /dev/null
+++ b/packages/vue/src/time-line-new/src/pc.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="tiny-steps">
+    <div v-if="!vertical" class="tiny-steps-normal">
+      <div
+        v-for="(node, index) in state.nodes"
+        :key="index"
+        :style="{
+          width: space ? space + 'px' : 100 / state.nodes.length + '%'
+        }"
+        :class="['normal', getStatusCls(index)]"
+      >
+        <slot name="top" :slot-scope="node"></slot>
+        <div class="icon" @click="handleClick({ index, node })">
+          <span v-if="index >= state.current">{{ showNumber ? index + start : '' }}</span>
+          <icon-error v-else-if="node[autoColorField] === 'error'" class="tiny-svg-size fixicon icon-error" />
+          <icon-warning v-else-if="node[autoColorField] === 'warning'" class="tiny-svg-size fixicon icon-warning" />
+          <icon-yes
+            v-else-if="node[autoColorField] === 'success' || !node[autoColorField]"
+            class="tiny-svg-size fixicon"
+          />
+          <component v-else :is="node[autoColorField]" class="fixicons"></component>
+        </div>
+        <div
+          :class="[
+            'line',
+            {
+              'line-done': index < state.current,
+              'line-end': index === state.nodes.length - 1
+            }
+          ]"
+        ></div>
+        <div class="node-description">
+          <slot name="bottom" :slot-scope="node">
+            <div class="name" v-text="node[nameField]"></div>
+            <div class="status">
+              {{ showStatus ? getStatus(index) : '' }}
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div v-else :class="['tiny-steps-timeline', { reverse }]">
+      <div
+        v-for="(node, index) in state.nodes"
+        :key="index"
+        :style="{
+          height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
+        }"
+        :class="['timeline', getStatusCls(index)]"
+      >
+        <ul>
+          <slot name="left" :slot-scope="node">
+            <li class="date-time">
+              <span class="date">{{ getDate(node[timeField]).date }}</span>
+              <span class="time">{{ getDate(node[timeField]).time }}</span>
+            </li>
+          </slot>
+          <li
+            :style="{
+              height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
+            }"
+            class="line"
+          >
+            <div class="icon" @click="handleClick({ index, node })">
+              <icon-error
+                v-if="(reverse ? index > state.current : index < state.current) && node[autoColorField] === 'error'"
+                class="tiny-svg-size fixicon icon-error"
+              />
+              <icon-warning
+                v-else-if="
+                  (reverse ? index > state.current : index < state.current) && node[autoColorField] === 'warning'
+                "
+                class="tiny-svg-size fixicon icon-warning"
+              />
+              <icon-yes
+                v-else-if="
+                  (reverse ? index > state.current : index < state.current) &&
+                  (node[autoColorField] === 'success' || !node[autoColorField])
+                "
+                class="tiny-svg-size fixicon"
+              />
+              <component
+                v-else-if="reverse ? index > state.current : index < state.current"
+                :is="node[autoColorField]"
+                class="fixicons"
+              ></component>
+              <span v-else>{{
+                showNumber ? (reverse ? state.nodes.length - 1 - index + start : index + start) : ''
+              }}</span>
+            </div>
+          </li>
+          <slot name="right" :slot-scope="node">
+            <li class="name" v-text="node[nameField]"></li>
+          </slot>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// 从 renderless new包引入
+import { renderless, api } from '@opentiny/vue-renderless/time-line-new/vue'
+
+import { props, setup, defineComponent } from '@opentiny/vue-common'
+
+// 实际同步在 theme-saas 文件夹中的step中
+import '@opentiny/vue-theme/steps/index.less'
+
+import { IconYes } from '@opentiny/vue-icon'
+import { IconError } from '@opentiny/vue-icon'
+import { IconWarning } from '@opentiny/vue-icon'
+
+export default defineComponent({
+  emits: ['click'],
+  props: [
+    ...props,
+    'vertical',
+    'showNumber',
+    'nameField',
+    'timeField',
+    'start',
+    'data',
+    'space',
+    'active',
+    'reverse',
+    'showStatus',
+    'autoColorField'
+  ],
+  components: {
+    IconYes: IconYes(),
+    IconError: IconError(),
+    IconWarning: IconWarning()
+  },
+  setup(props, context): any {
+    return setup({ props, context, renderless, api })
+  }
+})
+</script>
diff --git a/packages/vue/src/tree-menu/src/index.ts b/packages/vue/src/tree-menu/src/index.ts
index a3056c0473..cba2bcf09b 100644
--- a/packages/vue/src/tree-menu/src/index.ts
+++ b/packages/vue/src/tree-menu/src/index.ts
@@ -12,7 +12,6 @@ export const treeMenuProps = {
   nodeKey: String,
   defaultExpandAll: Boolean,
   suffixIcon: Object,
-  prefixIcon: Object,
   searchIcon: {
     type: Object,
     default: () => iconSearch()
diff --git a/packages/vue/src/tree-menu/src/pc.vue b/packages/vue/src/tree-menu/src/pc.vue
index e42f88fd41..4a437d9044 100644
--- a/packages/vue/src/tree-menu/src/pc.vue
+++ b/packages/vue/src/tree-menu/src/pc.vue
@@ -137,7 +137,6 @@ export default defineComponent({
     nodeKey: String,
     defaultExpandAll: Boolean,
     suffixIcon: Object,
-    prefixIcon: Object,
     searchIcon: {
       type: Object,
       default: () => iconSearch()