@opentiny/vue-docs 3.16.2 → 3.17.0

package/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>

package/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>

package/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>

package/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>

package/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>

package/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>

package/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>

package/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>

package/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,9 +111,15 @@ export const cmpMenus = [
   {
     'label': '表单',
     'labelEn': 'Form',
-    'key': 'cmp_form_components',
+    'key': 'cmp-form-components',
     'children': [
       { 'nameCn': '自动完成', 'name': 'AutoComplete', 'key': 'autocomplete' },
+      {
+        'nameCn': '基础选择器',
+        'name': 'BaseSelect',
+        'key': 'base-select',
+        'mark': { 'type': 'warning', 'text': 'Beta' }
+      },
       { 'nameCn': '级联选择器', 'name': 'Cascader', 'key': 'cascader' },
       { 'nameCn': '级联面板', 'name': 'CascaderPanel', 'key': 'cascader-panel' },
       { 'nameCn': '多选框', 'name': 'Checkbox', 'key': 'checkbox' },
@@ -146,13 +151,19 @@ export const cmpMenus = [
       { 'nameCn': '开关', 'name': 'Switch', 'key': 'switch' },
       { 'nameCn': '时间选择器', 'name': 'TimePicker', 'key': 'time-picker' },
       { 'nameCn': '时间选择', 'name': 'TimeSelect', 'key': 'time-select' },
-      { 'nameCn': '穿梭框', 'name': 'Transfer', 'key': 'transfer' }
+      { 'nameCn': '穿梭框', 'name': 'Transfer', 'key': 'transfer' },
+      {
+        'nameCn': '树形选择器',
+        'name': 'TreeSelect',
+        'key': 'tree-select',
+        'mark': { 'type': 'warning', 'text': 'Beta' }
+      }
     ]
   },
   {
     'label': '表格',
     'labelEn': 'Table',
-    'key': 'cmp_table_components',
+    'key': 'cmp-table-components',
     'children': [
       { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
       { 'nameCn': '序号列', 'name': '', 'key': 'grid-serial-column' },
@@ -196,12 +207,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' },
@@ -213,13 +224,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' }
@@ -228,7 +241,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' },
@@ -239,14 +252,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' },
@@ -280,7 +293,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' },
@@ -295,6 +308,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' }]
   }
 ]
 
@@ -305,7 +324,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' },

package/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>

package/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>