feat: add tiny-react (#1605)

* 图表

* chart log

* add anchor

* test

* add guide

* add breadcrumb

* 1

* tag add

* 1

* Merge branch 'master' of https://gitee.com/zhang-yanling/opentiny

# Conflicts:
#	examples/react-docs/src/tag/base.tsx
#	packages/react/src/common/package.json
#	packages/react/src/common/src/index.ts
#	packages/react/src/common/src/vue-hooks.ts
#	packages/react/src/common/src/vue-instance.ts
#	packages/react/src/tag/src/pc.jsx
#	packages/renderless/src/badge/vue.ts
#	packages/renderless/src/chart-line/index.ts
#	packages/renderless/src/chart-waterfall/index.ts
#	packages/renderless/types/badge.type.ts

* 1

* change docs

* add float-button divider

* add serch

* add tooltip

* 添加darwer 说明文档

* add time-line

* add qrcode

* 说明文档进一步说明

* 说明文档进一步说明

* add skeleton

* 优化说明文档

* add progress

* ADD progress mobile

* 文档优化 删除一些不必要的文件

* rename file

* vue转jsx

* 优化脚本文件

* 优化脚本文件

* 优化脚本文件

* 优化脚本文件

* fix:merge

.all-contributorsrc

@@ -573,150 +573,6 @@
       "contributions": [
         "code"
       ]
-    },
-    {
-      "login": "RanierYu",
-      "name": "Ranier Yu",
-      "avatar_url": "https://avatars.githubusercontent.com/u/62528887?v=4",
-      "profile": "https://github.com/RanierYu",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "Zcating",
-      "name": "Zcating",
-      "avatar_url": "https://avatars.githubusercontent.com/u/13329558?v=4",
-      "profile": "https://github.com/Zcating",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "trueLoving",
-      "name": "Aoi Kaze",
-      "avatar_url": "https://avatars.githubusercontent.com/u/44056372?v=4",
-      "profile": "https://github.com/trueLoving",
-      "contributions": [
-        "test"
-      ]
-    },
-    {
-      "login": "Simon-He95",
-      "name": "Simon He",
-      "avatar_url": "https://avatars.githubusercontent.com/u/57086651?v=4",
-      "profile": "http://simonhe.me",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "zhangpaopao0609",
-      "name": "zhangpaopao",
-      "avatar_url": "https://avatars.githubusercontent.com/u/44194929?v=4",
-      "profile": "https://study.linlove.cn/",
-      "contributions": [
-        "tool"
-      ]
-    },
-    {
-      "login": "Nowitzki41",
-      "name": "Nowitzki41",
-      "avatar_url": "https://avatars.githubusercontent.com/u/22088253?v=4",
-      "profile": "https://github.com/Nowitzki41",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "dufu1991",
-      "name": "dufu1991",
-      "avatar_url": "https://avatars.githubusercontent.com/u/24769077?v=4",
-      "profile": "https://github.com/dufu1991",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "hu-qi",
-      "name": "huqi",
-      "avatar_url": "https://avatars.githubusercontent.com/u/17986122?v=4",
-      "profile": "https://github.com/hu-qi",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "tsinghua-lau",
-      "name": "Mao Tao",
-      "avatar_url": "https://avatars.githubusercontent.com/u/43164478?v=4",
-      "profile": "https://github.com/tsinghua-lau",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "Darkingtail",
-      "name": "Darkingtail",
-      "avatar_url": "https://avatars.githubusercontent.com/u/51188676?v=4",
-      "profile": "https://github.com/Darkingtail",
-      "contributions": [
-        "bug"
-      ]
-    },
-    {
-      "login": "hashiqi12138",
-      "name": "hashiqi",
-      "avatar_url": "https://avatars.githubusercontent.com/u/52161363?v=4",
-      "profile": "https://github.com/hashiqi12138",
-      "contributions": [
-        "bug"
-      ]
-    },
-    {
-      "login": "discreted66",
-      "name": "liukun",
-      "avatar_url": "https://avatars.githubusercontent.com/u/190872652?v=4",
-      "profile": "https://github.com/discreted66",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "lcy0620",
-      "name": "lcy0620",
-      "avatar_url": "https://avatars.githubusercontent.com/u/188683944?v=4",
-      "profile": "https://github.com/lcy0620",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "sakurajiajia",
-      "name": "木斯佳",
-      "avatar_url": "https://avatars.githubusercontent.com/u/37933037?v=4",
-      "profile": "https://github.com/sakurajiajia",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "552847957",
-      "name": "552847957",
-      "avatar_url": "https://avatars.githubusercontent.com/u/8729901?v=4",
-      "profile": "https://github.com/552847957",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "Lingchen111",
-      "name": "Lingchen111",
-      "avatar_url": "https://avatars.githubusercontent.com/u/123021749?v=4",
-      "profile": "https://github.com/Lingchen111",
-      "contributions": [
-        "code"
-      ]
     }
   ],
   "contributorsPerLine": 8,

.cursor/rules/global.mdc

@@ -1,7 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: true
----
-
-作为一个很专业的高级前端开发工程师，从专业的角度出发解决需求和问题。

.cursor/rules/product.mdc

@@ -1,10 +0,0 @@
----
-description: 用于写产品需求和开发文档
-globs: 
-alwaysApply: false
----
-
-# 文档需求编写
-
-- 需求尽量写的简单清晰易懂一写
-- 在需求设计阶段遵从逐步迭代的原则，早期版本可以尽量简洁一些

.eslintrc.js

@@ -25,7 +25,6 @@ module.exports = {
     'vue/no-unused-refs': 'off',
     'vue/require-component-is': 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    'vue/no-v-for-template-key-on-child': 'off',
     'curly': 'off',
     'sort-imports': 'off',
     'prefer-template': 'off',
@@ -49,9 +48,6 @@ module.exports = {
     '@typescript-eslint/restrict-plus-operands': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
-    '@typescript-eslint/no-invalid-this': 'off',
-    'vue/no-deprecated-dollar-scopedslots-api': 'off',
-    '@typescript-eslint/lines-between-class-members': 'off',
-    '@typescript-eslint/no-this-alias': 'off'
+    '@typescript-eslint/no-invalid-this': 'off'
   }
 }

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: true
 contact_links:
   - name: Questions or need help
-    url: https://github.com/opentiny/tiny-vue/discussions
+    url: https://github.com/opentiny/ui-vue/discussions
     about: Add this WeChat(opentiny-official), we will invite you to the WeChat discussion group later.

.github/labeler.yaml

@@ -1,32 +0,0 @@
-version: v1
-
-labels:
-  - label: "enhancement"
-    sync: true
-    matcher:
-      title: "^(feat|✨).*: ?.*"
-      commit: "^feat.*: ?.*"
-  - label: "bug"
-    sync: true
-    matcher:
-      title: "^(fix|🐛).*: ?.*"
-      commit: "^fix.*: ?.*"
-  - label: "documentation"
-    sync: true
-    matcher:
-      title: "^docs?: ?.*"
-      commit: "^docs?: ?.*"
-  - label: "refactoring"
-    sync: true
-    matcher:
-      title: "^refactor.*: ?.*"
-      commit: "^refactor.*: ?.*"
-  - label: "chore"
-    sync: true
-    matcher:
-      title: "^chore.*: ?.*"
-      commit: "^chore.*: ?.*"
-  - label: "ospp-2024"
-    sync: true
-    matcher:
-      baseBranch: "^ospp-2024/.*"

.github/workflows/auto-all-publish.yml

@@ -9,6 +9,7 @@ jobs:
   build:
     runs-on: windows-latest
     outputs:
+      publishVersion: ${{ steps.parseTag.outputs.publishVersion }}
       branchVersion: ${{ steps.parseTag.outputs.branchVersion }}
     steps:
       - name: Parse Tag
@@ -17,7 +18,9 @@ jobs:
         with:
           script: |
             const tag = `${{ github.ref_name }}`
-            const branchVersion = tag.slice(1).split('.').slice(0, 2).join('.') + '.0'
+            const publishVersion = tag.slice(3)
+            const branchVersion = tag.slice(1)
+            core.setOutput('publishVersion', publishVersion)
             core.setOutput('branchVersion', branchVersion)
 
       - name: CheckOut Code
@@ -33,48 +36,45 @@ jobs:
         with:
           node-version: 20.10.0
           registry-url: 'https://registry.npmjs.org'
-
+      
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
+            echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+  
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+              ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm i --no-frozen-lockfile
 
       - name: Run Build Components
-        run: pnpm build:ui
-
+        run: pnpm build:ui -t ${{ steps.parseTag.outputs.publishVersion }}
+      
       - name: Run Build Sass Common
-        run: pnpm build:ui saas-common -d saas
+        run: pnpm build:ui saas-common -t ${{ steps.parseTag.outputs.publishVersion }} -d saas
+      
+      - name: Run Build Runtime
+        run: pnpm build:runtime
 
       - name: Run Build Theme
         run: pnpm build:theme
 
       - name: Run Build Renderless
         run: pnpm build:renderless
-
+      
       - name: Run Build ThemeSaas
         run: pnpm build:themeSaas
-
-      - name: Run Build Utils
-        run: pnpm build:utils
-
-      - name: Run Build Hooks
-        run: pnpm build:hooks
-
-      - name: Run Build Runtime
-        run: pnpm build:runtime
+      
+      - name: Run Build ThemeMobile
+        run: pnpm build:themeMobile
 
       - name: Publish Vue3 And Vue2 components
-        run: pnpm pub:all && pnpm pub:runtime && pnpm pub:utils && pnpm pub:hooks
+        run: pnpm pub:all
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.github/workflows/auto-deploy-site.yml

@@ -1,66 +0,0 @@
-name: Auto Deploy Site
-
-on:
-  push:
-    branches: [dev]
-    paths:
-      - 'examples/sites/**'
-      - '!examples/sites/**/*.spec.ts'
-
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: pages
-  cancel-in-progress: true
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 9
-      - name: Install deps
-        run: pnpm i --no-frozen-lockfile
-      - name: Build site
-        run: export NODE_OPTIONS="--max-old-space-size=8192" && pnpm -F @opentiny/vue-docs build
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Build with Jekyll
-        uses: actions/jekyll-build-pages@v1
-        with:
-          source: ./examples/sites/dist
-          destination: ./_site
-      - name: Repair build artifact
-        run: |
-          sudo chmod -R 777 ./_site
-          cp ./examples/sites/dist/assets/_commonjsHelpers*.js ./_site/assets
-          cp ./_site/index.html ./_site/404.html
-          sed -i 's/\/static/\/tiny-vue\/static/' ./_site/static/js/design-common.js
-          sh ./examples/sites/dist/cp-component-md.sh
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-
-  # Deployment job
-  deploy:
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}

.github/workflows/auto-label.yaml

@@ -1,21 +0,0 @@
-name: Auto Label (Pull Request)
-
-on:
-  pull_request_target:
-    types: [opened, edited]
-  issues:
-    types: [opened, edited]
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-
-jobs:
-  label:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fuxingloh/multi-labeler@v4.0.0
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          config-path: .github/labeler.yaml

.github/workflows/dispatch-all-publish-alpha.yml

@@ -1,80 +0,0 @@
-name: Dispatch Alpha All Publish
-run-name: Dispatch All Publish Alpha--${{ inputs.version }}
-
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: |
-          输入您将要发布的版本号,
-          例如： `3.xx.xx`.
-        required: true
-        type: string
-concurrency:
-  group: ${{ github.workflow }}-${{ github.sha }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: windows-latest
-    steps:
-      - name: CheckOut Code
-        uses: actions/checkout@master
-        with:
-          ref: ${{ github.ref_name }}
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.10.0
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-      - name: Install dependencies
-        run: pnpm i --no-frozen-lockfile
-
-      - name: Run Build Components
-        run: pnpm build:ui
-
-      - name: Run Build Sass Common
-        run: pnpm build:ui saas-common -d saas
-
-      - name: Run Build Theme
-        run: pnpm build:theme
-
-      - name: Run Build Renderless
-        run: pnpm build:renderless
-
-      - name: Run Build ThemeSaas
-        run: pnpm build:themeSaas
-
-      - name: Run Build Utils
-        run: pnpm build:utils
-
-      - name: Run Build Hooks
-        run: pnpm build:hooks
-
-      - name: Run Build Runtime
-        run: pnpm build:runtime
-
-      - name: Run Release alpha
-        run: pnpm release:alpha
-
-      - name: Publish Vue3 And Vue2 components
-        run: pnpm pub:all && pnpm pub:runtime && pnpm pub:utils && pnpm pub:hooks && pnpm pub:site
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}

.github/workflows/dispatch-renderless-theme-publish-alpha.yml

@@ -1,123 +0,0 @@
-name: Dispatch Alpha Renderless Theme Runtime
-run-name: Dispatch Alpha Renderless Theme Runtime--${{ inputs.components }}
-
-on:
-  workflow_dispatch:
-    inputs:
-      components:
-        description: |
-          输入需要打包的模块名称，多个以英文逗号分隔,
-          例如： `theme,renderless,runtime,docs,utils,hooks`
-        required: true
-        type: string
-concurrency:
-  group: ${{ github.workflow }}-${{ github.sha }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: windows-latest
-    steps:
-      - name: Parse Components
-        id: parseComponents
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const branchName = `${{ github.ref_name }}`
-            const moduleName = `${{ inputs.components }}`
-            const validModuleNames = ['theme', 'renderless', 'runtime', 'docs','utils','hooks']
-
-            if (!validModuleNames.some(name => moduleName.includes(name))) {
-              throw new Error('请输入正确的包名称')
-            }
-
-      - name: CheckOut Code
-        uses: actions/checkout@master
-        with:
-          ref: ${{ github.ref_name }}
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.10.0
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm i --no-frozen-lockfile
-
-      - name: Run Build Theme
-        if: contains(inputs.components, 'theme') == true
-        run: pnpm build:theme
-
-      - name: Run Build Renderless
-        if: contains(inputs.components, 'renderless') == true
-        run: pnpm build:renderless
-
-      - name: Run Build ThemeSaas
-        if: contains(inputs.components, 'theme-saas') == true
-        run: pnpm build:themeSaas
-
-      - name: Run Build Runtime
-        if: contains(inputs.components, 'runtime') == true
-        run: pnpm build:runtime
-
-      - name: Run Build Utils
-        if: contains(inputs.components, 'utils') == true
-        run: pnpm build:utils
-
-      - name: Run Build Hooks
-        if: contains(inputs.components, 'hooks') == true
-        run: pnpm build:hooks
-
-      - name: Run Release alpha
-        run: pnpm release:alpha -u
-
-      - name: Publish
-        run: |
-          pnpm pub:all
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}
-
-      - name: Publish Utils
-        if: contains(inputs.components, 'utils') == true
-        run: |
-          pnpm pub:utils
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}
-
-      - name: Publish Runtime
-        if: contains(inputs.components, 'runtime') == true
-        run: |
-          pnpm pub:runtime
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}
-
-      - name: Publish Hooks
-        if: contains(inputs.components, 'hooks') == true
-        run: |
-          pnpm pub:hooks
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}
-
-      - name: Publish Docs
-        if: contains(inputs.components, 'docs') == true
-        run: |
-          pnpm pub:site
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}

.github/workflows/dispatch-renderless-theme-publish.yml

@@ -1,5 +1,5 @@
-name: Dispatch Renderless Theme Runtime
-run-name: Dispatch Renderless Theme Runtime--${{ inputs.components }}
+name: Dispatch Renderless Theme
+run-name: Dispatch Renderless Theme--${{ inputs.components }}
 
 on:
   workflow_dispatch:
@@ -7,7 +7,7 @@ on:
       components:
         description: |
           输入需要打包的模块名称，多个以英文逗号分隔,
-          例如： `theme,renderless,runtime,docs,utils,hooks`
+          例如： `theme,renderless`
         required: true
         type: string
 concurrency:
@@ -25,9 +25,8 @@ jobs:
           script: |
             const branchName = `${{ github.ref_name }}`
             const moduleName = `${{ inputs.components }}`
-            const validModuleNames = ['theme', 'renderless', 'runtime', 'docs','utils','hooks']
 
-            if (!validModuleNames.some(name => moduleName.includes(name))) {
+            if (!moduleName.includes('theme') && !moduleName.includes('renderless')) {
               throw new Error('请输入正确的包名称')
             }
 
@@ -77,48 +76,12 @@ jobs:
         if: contains(inputs.components, 'theme-saas') == true
         run: pnpm build:themeSaas
 
-      - name: Run Build Runtime
-        if: contains(inputs.components, 'runtime') == true
-        run: pnpm build:runtime
-
-      - name: Run Build Utils
-        if: contains(inputs.components, 'utils') == true
-        run: pnpm build:utils
-
-      - name: Run Build Hooks
-        if: contains(inputs.components, 'hooks') == true
-        run: pnpm build:hooks
+      - name: Run Build ThemeMobile
+        if: contains(inputs.components, 'theme-mobile') == true
+        run: pnpm build:themeMobile
 
       - name: Publish
         run: |
           pnpm pub:all
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Publish Utils
-        if: contains(inputs.components, 'utils') == true
-        run: |
-          pnpm pub:utils
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Publish Runtime
-        if: contains(inputs.components, 'runtime') == true
-        run: |
-          pnpm pub:runtime
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Publish Hooks
-        if: contains(inputs.components, 'hooks') == true
-        run: |
-          pnpm pub:hooks
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Publish Docs
-        if: contains(inputs.components, 'docs') == true
-        run: |
-          pnpm pub:site
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/dispatch-ui-publish-alpha.yml

@@ -1,66 +0,0 @@
-name: Dispatch Alpha Ui Publish
-run-name: Dispatch Alpha Ui--${{ inputs.components }}
-
-on:
-  workflow_dispatch:
-    inputs:
-      components:
-        description: |
-          输入需要打包的组件名称，多个以空格分隔,
-          例如： `input alert`.
-        required: false
-        type: string
-concurrency:
-  group: ${{ github.workflow }}-${{ github.sha }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: windows-latest
-    steps:
-      - name: CheckOut Code
-        uses: actions/checkout@master
-        with:
-          ref: ${{ github.ref_name }}
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.10.0
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm i --no-frozen-lockfile
-
-      - name: Run Build Components
-        if: inputs.components != ''
-        run: pnpm build:ui ${{ inputs.components }}
-
-      - name: Run Build All Components
-        if: inputs.components == ''
-        run: pnpm build:ui
-
-      - name: Run Release alpha
-        run: pnpm release:alpha -u
-
-      - name: Publish
-        run: |
-          pnpm pub:all
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_OPENTINY_VUE_TOKEN }}

.github/workflows/test-e2e-all.yml

@@ -1,14 +1,7 @@
 name: E2E Test ALL
-run-name: E2E Test All  origin--${{ inputs.origin }}
+run-name: E2E Test All
 on:
   workflow_dispatch:
-    inputs:
-      origin:
-        description: |
-          输入需要测试的域名地址，包括微服务路径，如果不输入则采用本地启动服务测试,
-          例如： `https://opentiny.github.io/tiny-vue-web-doc`.
-        required: false
-        type: string
 concurrency:
   group: ${{ github.workflow }}-${{ github.sha }}
   cancel-in-progress: true
@@ -30,7 +23,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 16
 
       - name: Get pnpm store directory
         id: pnpm-cache
@@ -44,32 +37,23 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
-
       - name: Install dependencies
         run: pnpm i --no-frozen-lockfile
 
       - name: dev start
-        if: contains(inputs.origin, 'http') == false
         run: pnpm site & sleep 5
-
-      - name: Release E2E Config
-        if: contains(inputs.origin, 'http') == true
-        run: pnpm release:e2eConfig -o ${{ inputs.origin }} & sleep 5
-
       - name: update playwright
         run: pnpm recursive update @playwright/test
-
       - name: Install Playwright browsers
         run: pnpm install:browser --with-deps chromium
-
       - name: Run Playwright tests
         run: pnpm test:e2e3 --shard=${{ matrix.shard }} --reporter=blob
 
       - name: Upload blob report to GitHub Actions Artifacts
         if: always()
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
-          name: all-blob-reports-${{ strategy.job-index }}
+          name: all-blob-reports
           path: examples/vue3/blob-report
           retention-days: 0.5
 
@@ -83,23 +67,22 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 16
       - name: Install dependencies
         run: |
           npm install -g @playwright/test
 
       - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v3
         with:
-          pattern: all-blob-reports-*
-          merge-multiple: true
+          name: all-blob-reports
           path: all-blob-reports
 
       - name: Merge into HTML Report
         run: playwright merge-reports --reporter html ./all-blob-reports
 
       - name: Upload HTML report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           name: html-report--attempt-${{ github.run_attempt }}
           path: playwright-report

.github/workflows/test-e2e-dispatch.yml

@@ -1,5 +1,5 @@
 name: E2E Test Dispatch
-run-name: E2E Test Dispatch--${{ inputs.testDemos }}--origin--${{ inputs.origin }}
+run-name: E2E Test Dispatch--${{ inputs.testDemos }}--
 on:
   workflow_dispatch:
     inputs:
@@ -9,12 +9,6 @@ on:
           such as `input, alert`.
         required: true
         type: string
-      origin:
-        description: |
-          输入需要测试的域名地址，包括微服务路径，如果不输入则采用本地启动服务测试,
-          例如： `https://opentiny.github.io/tiny-vue-web-doc`.
-        required: false
-        type: string
 concurrency:
   group: ${{ github.workflow }}-${{ github.sha }}
   cancel-in-progress: true
@@ -32,7 +26,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 16
 
       - name: Get pnpm store directory
         id: pnpm-cache
@@ -50,13 +44,8 @@ jobs:
         run: pnpm i --no-frozen-lockfile
 
       - name: dev start
-        if: contains(inputs.origin, 'http') == false
         run: pnpm site & sleep 5
 
-      - name: Release E2E Config
-        if: contains(inputs.origin, 'http') == true
-        run: pnpm release:e2eConfig -o ${{ inputs.origin }} & sleep 5
-
       - name: Install Playwright browsers
         run: pnpm install:browser --with-deps chromium
 

.github/workflows/test-e2e-pr.yml

@@ -4,327 +4,106 @@ on:
   pull_request:
     types: [opened, reopened, synchronize, edited]
 
-# 并发控制，确保相同PR的工作流不会同时运行多个实例
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
   cancel-in-progress: true
 
 jobs:
-  detect-changed-files:
-    name: Detect Changed Files
+  parse-components:
+    name: Parse Affected Components
     runs-on: ubuntu-latest
     outputs:
-      # 输出三个变量供后续任务使用
-      changed_components: ${{ steps.find-changed-components.outputs.changed_components }} # 自动检测到的变更组件
-      manual_components: ${{ steps.parse-title.outputs.manual_components }} # 从PR标题手动指定的组件
-      testclis: ${{ steps.parse-test-cli.outputs.testClis }} # 测试命令列表
+      testComponents: ${{ steps.parseTitle.outputs.testComponents }}
+      testclis: ${{ steps.parsetestCli.outputs.testClis }}
     steps:
-      # 检出代码，需要完整历史以便比较变更
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0 # 获取完整的git历史，用于检测文件变更
-
-      # 使用tj-actions/changed-files获取PR中所有变更的文件
-      - name: Get changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v41
-
-      # 根据变更的文件自动识别受影响的组件
-      - name: Find changed components
-        id: find-changed-components
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const changedFiles = '${{ steps.changed-files.outputs.all_changed_files }}'.split(' ').filter(file => file.trim() !== '');
-            console.log('变更的文件列表:', changedFiles);
-
-            // 增强组件路径匹配规则，确保能正确识别各种路径格式
-            const componentPathRules = [
-              // 匹配 packages/renderless/src/{组件名} 路径，支持更深层次的子目录
-              { 
-                pattern: /^packages\/renderless\/src\/([^/]+)\//, 
-                group: 1,
-                type: 'renderless'
-              },
-              // 匹配 packages/vue/src/{组件名} 路径，支持更深层次的子目录
-              { 
-                pattern: /^packages\/vue\/src\/([^/]+)\//, 
-                group: 1,
-                type: 'vue'
-              },
-              // 匹配示例目录下的组件路径 - 只匹配目录，不匹配package.json等文件
-              { 
-                pattern: /^examples\/sites\/demos\/pc\/app\/([^/]+)\//, 
-                group: 1,
-                type: 'demo'
-              },
-              // 匹配 packages/theme/src/{组件名} 样式路径
-              {
-                pattern: /^packages\/theme\/src\/([^/]+)\//,
-                group: 1,
-                type: 'theme'
-              }
-            ];
-
-            // 定义子组件到父组件的映射关系
-            const subComponentMapping = {
-              'calendar-bar': 'calendar',
-              'carousel-item': 'carousel',
-              'cascader-menu': 'cascader',
-              'cascader-node': 'cascader', 
-              'cascader-panel': 'cascader',
-              'checkbox-button': 'checkbox',
-              'checkbox-group': 'checkbox',
-              'col': 'layout',
-              'collapse-item': 'collapse',
-              'date-range': 'date-picker',
-              'date-table': 'date-picker',
-              'dropdown-item': 'dropdown',
-              'dropdown-menu': 'dropdown',
-              'form-item': 'form',
-              'grid-toolbar': 'grid',
-              'image-viewer': 'image',
-              'month-range': 'date-picker',
-              'month-table': 'date-picker',
-              'option': 'select',
-              'option-group': 'select',
-              'pager-item': 'pager',
-              'picker': 'date-picker',
-              'quarter-panel': 'date-picker',
-              'radio-button': 'radio',
-              'radio-group': 'radio',
-              'row': 'layout',
-              'select-dropdown': 'select',
-              'skeleton-item': 'skeleton',
-              'svgs': 'icon',
-              'tab-item': 'tabs',
-              'textarea': 'input',
-              'time-panel': 'time-picker',
-              'time-range': 'time-picker',
-              'time-spinner': 'time-picker',
-              'timeline-item': 'timeline',
-              'transfer-panel': 'transfer',
-              'tree-node': 'tree',
-              'upload': 'file-upload',
-              'upload-dragger': 'file-upload',
-              'upload-list': 'file-upload',
-              'year-range': 'date-picker',
-              'year-table': 'date-picker'
-            };
-
-            // 从文件路径中提取组件名称
-            const components = new Set();
-            const detectedComponents = {}; // 用于记录检测到的组件和相关文件
-            const unmatchedFiles = []; // 记录未匹配的文件
-
-            changedFiles.forEach(file => {
-              // 跳过工作流文件等非组件相关文件
-              if (file.startsWith('.github/') || 
-                  file.includes('README') || 
-                  file.includes('.md') ||
-                  file.includes('theme-saas') || // 跳过theme-saas相关文件
-                  file.includes('theme/src/common/')) { // 跳过组件通用样式文件
-                console.log(`跳过非测试相关文件: ${file}`);
-                return;
-              }
-              
-              let matched = false;
-              
-              for (const rule of componentPathRules) {
-                const match = file.match(rule.pattern);
-                if (match && match[rule.group]) {
-                  matched = true;
-                  let componentName = match[rule.group];
-                  
-                  // 检查是否是需要映射的子组件
-                  if (subComponentMapping[componentName]) {
-                    console.log(`检测到子组件 ${componentName}，映射到父组件 ${subComponentMapping[componentName]}`);
-                    componentName = subComponentMapping[componentName];
-                  }
-                  
-                  // 记录找到的组件
-                  components.add(componentName);
-                  
-                  // 记录组件来源和相关文件，用于调试
-                  if (!detectedComponents[componentName]) {
-                    detectedComponents[componentName] = {
-                      type: rule.type,
-                      files: []
-                    };
-                  }
-                  detectedComponents[componentName].files.push(file);
-                  console.log(`成功匹配组件 ${componentName}: ${file} (类型: ${rule.type})`);
-                  break; // 一个文件只匹配一个组件
-                }
-              }
-              
-              // 检查theme目录中的特殊路径格式
-              if (!matched && file.includes('/theme/src/') && !file.includes('/common/')) {
-                // 尝试从theme路径中提取组件名
-                const themePath = file.split('/');
-                // 常见的组件样式文件命名模式
-                const possibleComponentNames = [];
-                
-                for (let i = 0; i < themePath.length; i++) {
-                  // 跳过明显不是组件名的路径部分
-                  if (['src', 'lib', 'theme', 'packages'].includes(themePath[i])) {
-                    continue;
-                  }
-                  // 检查是否像是组件名（小写字母，可能包含连字符）
-                  if (/^[a-z][a-z0-9\-]*$/.test(themePath[i])) {
-                    possibleComponentNames.push(themePath[i]);
-                  }
-                }
-                
-                if (possibleComponentNames.length > 0) {
-                  // 使用最后一个可能的组件名（通常最具体）
-                  let componentName = possibleComponentNames[possibleComponentNames.length - 1];
-                  
-                  // 检查是否是需要映射的子组件
-                  if (subComponentMapping[componentName]) {
-                    console.log(`检测到子组件 ${componentName}，映射到父组件 ${subComponentMapping[componentName]}`);
-                    componentName = subComponentMapping[componentName];
-                  }
-                  
-                  components.add(componentName);
-                  
-                  if (!detectedComponents[componentName]) {
-                    detectedComponents[componentName] = {
-                      type: 'theme',
-                      files: []
-                    };
-                  }
-                  detectedComponents[componentName].files.push(file);
-                  console.log(`通过主题样式路径分析匹配到组件 ${componentName}: ${file}`);
-                  matched = true;
-                }
-              }
-              
-              // 记录未匹配到的文件，用于调试
-              if (!matched) {
-                unmatchedFiles.push(file);
-                console.log(`未能匹配组件: ${file}`);
-              }
-            });
-
-            // 打印详细的检测结果，方便调试
-            console.log('检测结果详情:', JSON.stringify(detectedComponents, null, 2));
-            console.log('未匹配文件列表:', unmatchedFiles);
-
-            // 构建E2E测试的组件过滤器表达式
-            if (components.size > 0) {
-              // 构建符合E2E测试命令需要的过滤表达式格式
-              const componentFilters = Array.from(components)
-                .map(comp => `"\\/app\\/${comp}\\/"`)
-                .join(' ');
-              
-              console.log(`检测到变更的组件: ${Array.from(components).join(', ')}`);
-              core.setOutput('changed_components', componentFilters);
-            } else {
-              console.log('没有检测到变更的组件');
-              core.setOutput('changed_components', '');
-            }
-
-      # 从PR标题中解析手动指定的组件列表
-      - name: Parse Title for Manual Components
-        id: parse-title
+      - name: Parse Title
+        id: parseTitle
         uses: actions/github-script@v6
         with:
           script: |
             const prTitle = context.payload.pull_request.title
-            // 匹配PR标题中的 [component1, component2] 格式
             const regex = /\[(.*?)\]/
             const matches = prTitle.match(regex)
             if (matches && matches.length > 1 && matches[1]) {
-              // 处理和格式化手动指定的组件列表
               let components = matches[1]
                 .split(',')
                 .map((c) => c.trim())
-                .filter((c) => /^[a-z\-\/]+$/.test(c)) // 确保组件名符合规范
-                .map((c) => `"\\/app\\/${c}\\/"`)
-              components = [...new Set(components)].join(' ') // 去重并转为字符串
-              core.setOutput('manual_components', components)
+                .filter((c) => /^[a-z\-\/]+$/.test(c))
+                .map((c) => `"\\/${c}\\/"`)
+              components = [...new Set(components)].slice(0, 3).join(' ')
+              core.setOutput('testComponents', components)
             } else {
-              core.setOutput('manual_components', '')
-            }
+              const warningString =`**[e2e-test-warn]**
+              The component to be tested is missing.
 
-      # 当没有检测到任何组件时，生成警告提示
-      - name: Generate warning if no components detected
-        id: warning
-        if: ${{ steps.find-changed-components.outputs.changed_components == '' && steps.parse-title.outputs.manual_components == '' }}
+              The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".
+              
+              Please make sure you've read our [contributing guide](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
+              `
+              core.setOutput('tip', warningString)
+              core.warning(warningString)
+            }
+      - name: generate user-tip.txt
+        if: ${{ steps.parseTitle.outputs.tip }}
         run: |
           cat << EOF > user-tip.txt
-          **[e2e-test-warn]**
-          没有检测到要测试的组件。
-
-          系统会自动检测PR中变更的组件文件，或者您可以在PR标题中使用[component1, component2]格式手动指定要测试的组件。
-          例如: "fix(vue-renderless): [action-menu, alert] fix xxx bug"
-
-          请确保您已阅读我们的[贡献指南](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
+          ${{ steps.parseTitle.outputs.tip }}
           EOF
-          echo "warning=true" >> $GITHUB_OUTPUT
-
-      # 上传警告信息作为工作流制品
-      - name: Upload warning
-        if: ${{ steps.warning.outputs.warning }}
+      - name: Upload User Tip
+        if: ${{ steps.parseTitle.outputs.tip }}
         uses: actions/upload-artifact@v4
         with:
           name: user-tip
           path: user-tip.txt
-          retention-days: 1 # 保留1天
+          retention-days: 1
+      - name: Save PR number
+        if: ${{ steps.parseTitle.outputs.tip }}
+        run: echo ${{ github.event.number }} > ./pr-id.txt
 
-      # 解析测试命令配置
+      - name: Upload PR number
+        if: ${{ steps.parseTitle.outputs.tip }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: pr
+          path: ./pr-id.txt
       - name: Parse Test Cli
-        id: parse-test-cli
+        id: parsetestCli
         uses: actions/github-script@v6
         with:
           script: |
-            // 从GitHub变量中获取测试命令列表，如果未配置则使用默认命令
             const testClis = '${{ vars.PLAYWRIGHT_CLIS }}' ? '${{ vars.PLAYWRIGHT_CLIS }}'.split(',') : ['pnpm test:e2e3']
-            core.setOutput('testClis', JSON.stringify(testClis))
+            core.setOutput('testclis', JSON.stringify(testClis))
 
-  # PR测试任务，运行实际的E2E测试
   pr-test:
-    name: PR E2E Test
-    needs: detect-changed-files # 依赖前一个任务的输出
-    runs-on: ubuntu-latest
-    # 只有当检测到变更组件或手动指定组件时才运行测试
-    if: ${{ needs.detect-changed-files.outputs.changed_components != '' || needs.detect-changed-files.outputs.manual_components != '' }}
+    if: ${{ needs.parse-components.outputs.testComponents }}
     strategy:
       matrix:
-        testcli: ${{ fromJson(needs.detect-changed-files.outputs.testclis) }} # 使用矩阵策略运行多个测试命令
-    env:
-      # 合并自动检测和手动指定的组件列表
-      TEST_COMPONENTS: ${{ needs.detect-changed-files.outputs.changed_components }} ${{ needs.detect-changed-files.outputs.manual_components }}
-    steps:
-      # 检出代码
-      - uses: actions/checkout@v3
+        testcli: ${{ fromJson(needs.parse-components.outputs.testclis) }}
 
-      # 设置pnpm
+    name: PR E2E Test
+    needs: parse-components
+    runs-on: ubuntu-latest
+    env:
+      TEST_COMPONENTS: ${{ needs.parse-components.outputs.testComponents }}
+    steps:
+      - uses: actions/checkout@v3
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
 
-      # 设置Node.js环境
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
-
-      # 缓存Playwright浏览器安装，加速工作流
+          node-version: 16
       - name: Cache Playwright Installation
         uses: actions/cache@v3
         with:
           path: ~/.cache/ms-playwright
           key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      # 获取pnpm缓存目录
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
           echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      # 设置pnpm缓存
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
@@ -333,19 +112,11 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      # 安装依赖
       - name: Install dependencies
         run: pnpm i --no-frozen-lockfile
 
-      # 安装Playwright浏览器
       - name: Install Playwright browsers
         run: pnpm install:browser --with-deps chromium
 
-      # 显示要测试的组件列表，便于调试
-      - name: Show detected components
-        run: |
-          echo "Testing components: $TEST_COMPONENTS"
-
-      # 运行E2E测试
       - name: E2E Test
-        run: ${{ matrix.testcli }} ${{ env.TEST_COMPONENTS }} --retries=1 --workers=2 # 带重试和并行工作进程
+        run: ${{ matrix.testcli }} ${{ env.TEST_COMPONENTS }} --retries=1 --workers=2

.github/workflows/test-unit-pr.yml

@@ -1,131 +0,0 @@
-name: Unit Test PR
-run-name: Unit Test PR--${{ github.event.pull_request.title }}
-on:
-  pull_request:
-    types: [opened, reopened, synchronize, edited]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
-  cancel-in-progress: true
-
-jobs:
-  parse-components:
-    name: Parse Affected Components
-    runs-on: ubuntu-latest
-    outputs:
-      testComponents: ${{ steps.parseTitle.outputs.testComponents }}
-      utilsModified: ${{ steps.check-utils-changes.outputs.modified }}
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Parse Title
-        id: parseTitle
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const prTitle = context.payload.pull_request.title
-            const regex = /\[(.*?)\]/
-            const matches = prTitle.match(regex)
-            if (matches && matches.length > 1 && matches[1]) {
-              let components = matches[1]
-                .split(',')
-                .map((c) => c.trim())
-                .filter((c) => /^[a-z\-\/]+$/.test(c))
-                .map((c) => `${c}`)
-              components = [...new Set(components)].slice(0, 3).join(' ')
-              core.setOutput('testComponents', components)
-            } else {
-              const warningString =`**[unit-test-warn]**
-              The component to be tested is missing.
-
-              The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".
-              
-              Please make sure you've read our [contributing guide](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
-              `
-              core.setOutput('tip', warningString)
-              core.warning(warningString)
-            }
-      - name: Check Utils Changes
-        id: check-utils-changes
-        run: |
-          # 从远程仓库获取目标分支的最新代码
-          git fetch origin ${{ github.base_ref }}
-
-          # 获取当前PR分支相对于目标分支的所有变更文件列表
-          CHANGED_FILES=$(git diff --name-only origin/${{ github.base_ref }}..HEAD)
-
-          # 使用grep检查变更文件列表中是否包含utils包的改动
-          # ^packages/utils/ 表示以packages/utils/开头的文件路径
-          if echo "$CHANGED_FILES" | grep -q "^packages/utils/"; then
-            # 如果检测到utils包有改动，设置modified输出变量为true
-            echo "modified=true" >> $GITHUB_OUTPUT
-            echo "Utils package has been modified, utils tests will be executed"
-          else
-            # 如果没有检测到utils包的改动，设置modified输出变量为false
-            echo "modified=false" >> $GITHUB_OUTPUT
-            echo "No changes detected in utils package"
-          fi
-      - name: generate user-tip.txt
-        if: ${{ steps.parseTitle.outputs.tip }}
-        run: |
-          cat << EOF > user-tip.txt
-          ${{ steps.parseTitle.outputs.tip }}
-          EOF
-      - name: Upload User Tip
-        if: ${{ steps.parseTitle.outputs.tip }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: user-tip
-          path: user-tip.txt
-          retention-days: 1
-      - name: Save PR number
-        if: ${{ steps.parseTitle.outputs.tip }}
-        run: echo ${{ github.event.number }} > ./pr-id.txt
-
-      - name: Upload PR number
-        if: ${{ steps.parseTitle.outputs.tip }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: pr
-          path: ./pr-id.txt
-
-  pr-test:
-    name: PR Unit Test
-    needs: parse-components
-    runs-on: ubuntu-latest
-    env:
-      TEST_COMPONENTS: ${{ needs.parse-components.outputs.testComponents }}
-      UTILS_MODIFIED: ${{ needs.parse-components.outputs.utilsModified }}
-    steps:
-      - uses: actions/checkout@v3
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm i --no-frozen-lockfile
-
-      - name: Unit Test for Components
-        if: ${{ env.TEST_COMPONENTS }}
-        run: pnpm test:unit3 ${{ env.TEST_COMPONENTS }}
-
-      - name: Utils Unit Test
-        if: ${{ env.UTILS_MODIFIED == 'true' }}
-        run: pnpm test:utils

.gitignore

@@ -4,6 +4,7 @@ dist/
 dist2/
 dist2.7/
 dist3/
+dist-react/
 allDist/
 packages/**/runtime
 coverage/
@@ -17,11 +18,11 @@ test-results
 /packages/vue-icon-saas/src
 /packages/vue-icon-saas/index.ts
 
-/packages/vue-runtime/pc.ts
-/packages/vue-runtime/mobile.ts
-/packages/vue-runtime/mobile-first.ts
-/packages/vue-runtime/all.ts
-/packages/vue-runtime/simple.ts
+/packages/react/index.ts
+/packages/react/pc.ts
+/packages/react/mobile.ts
+/packages/react/app.ts
+/packages/react/mobile-first.ts
 
 /examples/**/playwright-report
 /examples/**/test-results
@@ -51,25 +52,18 @@ yarn-error.log*
 tgzs
 *.tgz
 
-# theme 的汇总文件是自动生成的
-packages/theme/src/old-theme-index.less
-packages/theme/src/index.less
+
+packages/theme/scripts/theme.json
+packages/theme/scripts/theme-result.txt
+packages/theme/scripts/themeExcel.xlsx
+
+packages/theme/src/theme/*-theme/component.js
 
 pnpm-lock.yaml
 gulp/bundle.json
 
-# 屏蔽测试用例报告相关文件
-allure-report
-allure-results
-test-results
-
 # 本地构建的saas相关资源文件
 examples/sites/public/tiny-vue*.js
 examples/sites/public/tiny-vue*.mjs
 examples/sites/public/tailwind.css
-examples/sites/public/index.css
-
-
-# next 屏蔽
-next/cloud-icons/categorys.ts
-next/scene-theme/docs/.vitepress/cache
+examples/sites/public/index.css

.husky/_/husky.sh

@@ -1,36 +0,0 @@
-#!/usr/bin/env sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    if [ "$HUSKY_DEBUG" = "1" ]; then
-      echo "husky (debug) - $1"
-    fi
-  }
-
-  readonly hook_name="$(basename -- "$0")"
-  debug "starting $hook_name..."
-
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
-
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  readonly husky_skip_init=1
-  export husky_skip_init
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-  fi
-
-  if [ $exitCode = 127 ]; then
-    echo "husky - command not found in PATH=$PATH"
-  fi
-
-  exit $exitCode
-fi

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "vue.volar",
+    "vue.vscode-typescript-vue-plugin",
     "bradlc.vscode-tailwindcss",
     "davidanson.vscode-markdownlint",
     "dbaeumer.vscode-eslint",

.vscode/settings.json

@@ -24,7 +24,13 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "stylelint.validate": ["css", "less", "postcss", "scss", "sass"],
+  "stylelint.validate": [
+    "css",
+    "less",
+    "postcss",
+    "scss",
+    "sass"
+  ],
   "better-comments.highlightPlainText": true,
   "better-comments.tags": [
     {
@@ -80,16 +86,7 @@
       "backgroundColor": "transparent",
       "bold": false,
       "italic": false
-    },
-    {
-      "tag": "--",
-      "color": "#FFFFFF",
-      "strikethrough": false,
-      "underline": false,
-      "backgroundColor": "#5CB300",
-      "bold": false,
-      "italic": false
     }
   ],
   "vue.codeActions.enabled": false
-}
+}

CONTRIBUTING.md

@@ -57,15 +57,17 @@ The commit message should be in the form of a `type(scope): description of the m
 
 1. The specification of the title is the same as the commit information, which is entered in the form of `type(scope): description information`.
 
-2. Trigger component **e2e test**: CI will automatically trigger the test cases of the corresponding components according to the files modified by the PR. If you need to manually trigger the test of a specific component, you can add the component name in the format of `[componentName1, componentName2]` in the Pull Request title, and the system will execute the test cases of these specified components.
+2. **e2e test** of trigger components: Adding '[componentName1, componentName2]' to the Pull Request title will execute test cases for componentName1, componentName2, and declare this structure when changes to code affect components.
 
-- Note: The `github action` under this project will use the component name declared by `[componentName1, componentName2]` to match the path name under the `examples/sites/demos` directory to identify the test e2e cases to be executed. (Because running all test cases is too time-consuming)
+   - Note: The `github action` in this project identifies test e2e use cases to be executed by matching the component names declared by `[componentName1, componentName2]` with the path names in the `examples/sites/demos` directory. (Because running the full test case is too time consuming)
+
+   - When modifying a sub-component of a component, such as the `col` component, which has no corresponding examples and test cases, the `layout` component should be tested, because the `col` component is a sub-component of the `layout` component. The PR title can be: `fix(col): [layout] xxxxxxxxxxxxxx`
 
 3. Example title:
 
-- Added alert component documentation: `docs(alert): xxxxxxxxxxxxxxx`, `docs(site):xxxxxxxxxxxxxxx`
-- Added alert component test cases: `test(alert): xxxxxxxxxxxxxx`
-- Fixed the defect of alert component @opentiny/vue-renderless (manually trigger e2e test cases): `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxxx`
+- 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`
 
 #### Pull Request Description
 
@@ -133,14 +135,3 @@ If you have submitted Issue or PR to OpenTiny, you can comment on Issue or Pull
 ```
 
 For detailed rules, please refer to [https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
-
-## Contributors
-
-We sincerely thank all the contributors who have participated in the TinyVue project!
-In recognition of the contributions of our contributors, we have added a 'Contributors' section at the bottom of each component documentation, displaying the GitHub information of each contributor, including their profile picture, username, and GitHub personal page.
-Due to the current manpower constraints, only information of internal members (or former members) of the TinyVue team is currently being recorded. Open source contributors are welcome to supplement their own information.
-The file that record contributors info is:
-
-```
-/examples/sites/src/data/contributorMap.js
-```

CONTRIBUTING.zh-CN.md

@@ -57,15 +57,17 @@ commit 信息要以 `type(scope): 描述信息` 的形式填写，例如 `fix(vu
 
 1. 标题的规范与 commit 信息一样，以`type(scope): 描述信息` 的形式填写。
 
-2. 触发组件的 **e2e 测试**: CI 会自动根据 PR 修改的文件来触发相应组件的测试用例。如果需要手动触发特定组件的测试，可以在 Pull Request 标题中添加 `[componentName1, componentName2]` 格式的组件名称，系统将会执行这些指定组件的测试用例。
+2. 触发组件的 **e2e 测试**: 在 Pull Request 标题里添加 `[componentName1, componentName2]`，将会执行 componentName1，componentName2 的测试用例，当改动的代码会影响组件时，需要声明这个结构。
 
    - 注：本项目下的 `github action` 会用`[componentName1, componentName2]`声明的组件名匹配 `examples/sites/demos` 目录下的路径名称，识别要执行的测试e2e用例。（因为全量跑测试用例太耗费时间）
 
+   - 当修改了某个组件的子组件，比如`col`组件，它本身没有对应的示例以及测试用例，这时应该要测试的是`layout`组件，因为`col`组件是`layout`组件的子组件，PR 标题可以这样： `fix(col): [layout] xxxxxxxxxxxxxx`
+
 3. 标题示例:
 
-- 补充 alert 组件文档： `docs(alert): xxxxxxxxxxxxxxx`, `docs(site):xxxxxxxxxxxxxxx`
-- 补充 alert 组件测试用例: `test(alert): xxxxxxxxxxxxxx`
-- 修复 alert 组件 @opentiny/vue-renderless 下的缺陷（手动触发 e2e 测试用例）: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
+- 补充 alert 组件文档： `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
+- 补充 alet 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
+- 修复 alet 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
 
 #### Pull Request 的描述
 
@@ -133,14 +135,3 @@ 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
-```
-

PACKAGES.md

@@ -1,109 +0,0 @@
-# TinyVue 仓库结构说明
-
-## packages/
-
-### 1. 核心组件与运行时
-
-├── vue/ # Vue核心组件库  
-│ └── src/ # 源码目录  
-│ ├── alert/ # alert组件源码目录
-│ ├── button/ # button组件源码目录
-│ └── ... # 其他组件  
-│
-├── vue-runtime/ # Vue运行时支持  
-│
-├── vue-common/ # Vue2/Vue3通用基础组件库  
-│ └── src/  
-│ ├── adapter/ # Vue2/Vue3适配层  
-│ │ ├── vue2/ # Vue2版本适配器  
-│ │ └── vue3/ # Vue3版本适配器  
-│
-├── renderless/ # 无渲染组件逻辑  
-│ └── src/  
-│ ├── alert/ # Alert组件逻辑层  
-│ ├── button/ # Button组件逻辑层
-│ └── ... # 其他组件逻辑层  
-│
-├── vue-hooks/ # Vue Hooks集合  
-│ └── src/ # Hooks源码
-
-### 2. 主题与样式
-
-├── theme/ # 主题系统  
-│ └── src/  
-│ ├── alert/ # Alert组件样式  
-│ ├── button/ # Button组件样式  
-│ └── ... # 其他组件样式  
-│
-├── theme-saas/ # SaaS主题包  
-│ └── src/
-│ ├── alert/ # Alert组件样式  
-│ ├── button/ # Button组件样式  
-│ └── ... # 其他组件样式
-
-### 3. 图标相关
-
-├── vue-icon/ # Vue图标组件库  
-│ └── src/ # 源码目录  
-│
-├── vue-icon-saas/ # SaaS图标组件  
-│ └── src/ # 源码目录  
-│
-├── vue-icon-multicolor/ # 多色图标支持  
-│ └── src/ # 源码目录
-
-### 5. 工具与指令
-
-├── utils/ # 工具函数库  
-│ └── src/  
-│ ├── dom/ # DOM相关工具函数  
-│ ├── is/ # 类型判断工具函数  
-│ └── ... # 其他工具函数  
-│
-├── vue-directive/ # Vue指令集合  
-│ └── src/ # 指令源码
-
-### 6. 国际化
-
-├── vue-locale/ # 国际化支持  
-│ └── src/  
-│ ├── vue2/ # Vue2版本国际化适配器  
-│ ├── vue3/ # Vue3版本国际化适配器  
-│ └── lang/ # 语言包资源
-
-### 7. 设计规范
-
-├── design/ # 设计规范和资源  
- ├── aurora/ # Aurora设计规范
-├── saas/ # SaaS设计规范  
- └── smb/ # SMB设计规范
-
----
-
-## examples/ # 示例代码
-
-├── sites/ # 本地官网  
-├── vue3/ # Vue3本地开发工程
-├── vue2/ # Vue2本地开发工程
-├── docs/ # 本地开发模板包含 pc 和 mobile-first 模式
-└── public/ # 公共资源
-
----
-
-## internals/ # 内部工具和配置
-
-├── cli/ # 构建脚本  
-├── automate/ # 内部自动化相关脚本  
-├── playwright-config/ # playwright测试配置  
-├── unplugin-virtual-template/ # vite插件解析虚拟模块  
-└── vue-test-utils/ # vitest测试工具，提供 mountPcMode 和 mountMobilefirstMode
-
----
-
-### 主要目录说明
-
-1. **packages/**: 核心源码包，分为组件、主题、图标、SaaS、工具、国际化等子模块，便于维护和按需引入。
-2. **examples/**: 示例代码，包含多版本Vue的示例、文档和演示站点，用于测试和展示。
-3. **internals/**: 内部工具，包含构建工具、配置和内部开发支持。
-
----

README.md

@@ -162,26 +162,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/Floyd-bit"><img src="https://avatars.githubusercontent.com/u/59243597?v=4?s=100" width="100px;" alt="Floyd"/><br /><sub><b>Floyd</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Floyd-bit" title="Code">💻</a></td>
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/Jevin0"><img src="https://avatars.githubusercontent.com/u/69580637?v=4?s=100" width="100px;" alt="Jevin"/><br /><sub><b>Jevin</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Jevin0" title="Code">💻</a></td>
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/HAOUEHF"><img src="https://avatars.githubusercontent.com/u/107133502?v=4?s=100" width="100px;" alt="星河"/><br /><sub><b>星河</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=HAOUEHF" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/RanierYu"><img src="https://avatars.githubusercontent.com/u/62528887?v=4?s=100" width="100px;" alt="Ranier Yu"/><br /><sub><b>Ranier Yu</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=RanierYu" title="Code">💻</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt="Zcating"/><br /><sub><b>Zcating</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zcating" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/trueLoving"><img src="https://avatars.githubusercontent.com/u/44056372?v=4?s=100" width="100px;" alt="Aoi Kaze"/><br /><sub><b>Aoi Kaze</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=trueLoving" title="Tests">⚠️</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="http://simonhe.me"><img src="https://avatars.githubusercontent.com/u/57086651?v=4?s=100" width="100px;" alt="Simon He"/><br /><sub><b>Simon He</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Simon-He95" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://study.linlove.cn/"><img src="https://avatars.githubusercontent.com/u/44194929?v=4?s=100" width="100px;" alt="zhangpaopao"/><br /><sub><b>zhangpaopao</b></sub></a><br /><a href="#tool-zhangpaopao0609" title="Tools">🔧</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Nowitzki41"><img src="https://avatars.githubusercontent.com/u/22088253?v=4?s=100" width="100px;" alt="Nowitzki41"/><br /><sub><b>Nowitzki41</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Nowitzki41" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/dufu1991"><img src="https://avatars.githubusercontent.com/u/24769077?v=4?s=100" width="100px;" alt="dufu1991"/><br /><sub><b>dufu1991</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=dufu1991" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/hu-qi"><img src="https://avatars.githubusercontent.com/u/17986122?v=4?s=100" width="100px;" alt="huqi"/><br /><sub><b>huqi</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=hu-qi" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/tsinghua-lau"><img src="https://avatars.githubusercontent.com/u/43164478?v=4?s=100" width="100px;" alt="Mao Tao"/><br /><sub><b>Mao Tao</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=tsinghua-lau" title="Documentation">📖</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Darkingtail"><img src="https://avatars.githubusercontent.com/u/51188676?v=4?s=100" width="100px;" alt="Darkingtail"/><br /><sub><b>Darkingtail</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/issues?q=author%3ADarkingtail" title="Bug reports">🐛</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/hashiqi12138"><img src="https://avatars.githubusercontent.com/u/52161363?v=4?s=100" width="100px;" alt="hashiqi"/><br /><sub><b>hashiqi</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/issues?q=author%3Ahashiqi12138" title="Bug reports">🐛</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/discreted66"><img src="https://avatars.githubusercontent.com/u/190872652?v=4?s=100" width="100px;" alt="liukun"/><br /><sub><b>liukun</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=discreted66" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/lcy0620"><img src="https://avatars.githubusercontent.com/u/188683944?v=4?s=100" width="100px;" alt="lcy0620"/><br /><sub><b>lcy0620</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=lcy0620" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/sakurajiajia"><img src="https://avatars.githubusercontent.com/u/37933037?v=4?s=100" width="100px;" alt="木斯佳"/><br /><sub><b>木斯佳</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=sakurajiajia" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/552847957"><img src="https://avatars.githubusercontent.com/u/8729901?v=4?s=100" width="100px;" alt="552847957"/><br /><sub><b>552847957</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=552847957" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Lingchen111"><img src="https://avatars.githubusercontent.com/u/123021749?v=4?s=100" width="100px;" alt="Lingchen111"/><br /><sub><b>Lingchen111</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Lingchen111" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

README.zh-CN.md

@@ -1,180 +0,0 @@
-<p align="center">
-  <a href="https://opentiny.design/tiny-vue" target="_blank" rel="noopener noreferrer">
-    <img alt="OpenTiny Logo" src="logo.svg" height="100" style="max-width:100%;">
-  </a>
-</p>
-
-<p align="center">一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。</p>
-
-[English](README.md) | 简体中文
-
-🌈 特性：
-
-- 📦 包含 104 个简洁、易用、功能强大的组件
-- 🖖 一套代码同时支持 Vue 2 和 Vue 3
-- 🖥️ 一套代码同时支持 PC 端和移动端
-- 🌍 支持国际化
-- 🎨 支持主题定制
-- 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置
-- 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性
-
-## 🛠️ 如何使用
-
-### 1. 安装
-
-执行以下命令，安装 Vue 3 版本的 TinyVue 组件库：
-
-```shell
-npm i @opentiny/vue@3
-```
-
-执行以下命令，安装 Vue 2 版本的 TinyVue 组件库：
-
-```shell
-npm i @opentiny/vue@2
-```
-
-### 2. 引入和使用
-
-在`App.vue`文件中使用 TinyVue 组件。
-
-```html
-<script lang="ts" setup>
-  import { Button as TinyButton } from '@opentiny/vue'
-</script>
-
-<template>
-  <tiny-button>TinyVue</tiny-button>
-</template>
-```
-
-## 🖥️ 本地开发
-
-```shell
-git clone git@github.com:opentiny/tiny-vue.git
-cd tiny-vue
-pnpm i
-
-# 启动 Vue3 项目
-pnpm dev
-
-# 启动 Vue2 项目
-pnpm dev2
-```
-
-打开浏览器访问：[http://127.0.0.1:7130/](http://127.0.0.1:7130/)
-
-## 🤝 参与贡献
-
-如果你对我们的开源项目感兴趣，欢迎加入我们！🎉
-
-参与贡献之前请先阅读[贡献指南](CONTRIBUTING.zh-CN.md)。
-
-- 添加官方小助手微信 opentiny-official，加入技术交流群
-- 加入邮件列表 opentiny@googlegroups.com
-
-## ✨ 贡献者
-
-贡献者是在 OpenTiny 社区中合并了 1 个或多个 PR 的社区成员。
-
-感谢以下 OpenTiny 的贡献者们 ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/kagol"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt="Kagol"/><br /><sub><b>Kagol</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=kagol" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/zzcr"><img src="https://avatars.githubusercontent.com/u/18521562?v=4?s=100" width="100px;" alt="ajaxzheng"/><br /><sub><b>ajaxzheng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=zzcr" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/TC-twwang"><img src="https://avatars.githubusercontent.com/u/42400776?v=4?s=100" width="100px;" alt="TC-twwang"/><br /><sub><b>TC-twwang</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=TC-twwang" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/MNZhu"><img src="https://avatars.githubusercontent.com/u/17588953?v=4?s=100" width="100px;" alt="jacknan"/><br /><sub><b>jacknan</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MNZhu" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/awspi"><img src="https://avatars.githubusercontent.com/u/66438036?v=4?s=100" width="100px;" alt="Pithy"/><br /><sub><b>Pithy</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=awspi" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/heygsc"><img src="https://avatars.githubusercontent.com/u/103993866?v=4?s=100" width="100px;" alt="heygsc"/><br /><sub><b>heygsc</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=heygsc" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/wwttff"><img src="https://avatars.githubusercontent.com/u/32888622?v=4?s=100" width="100px;" alt="MangoWu"/><br /><sub><b>MangoWu</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=wwttff" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/ErKeLost"><img src="https://avatars.githubusercontent.com/u/66500121?v=4?s=100" width="100px;" alt="ADNY"/><br /><sub><b>ADNY</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=ErKeLost" title="Code">💻</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenxi-20"><img src="https://avatars.githubusercontent.com/u/76168465?v=4?s=100" width="100px;" alt="chenxi-20"/><br /><sub><b>chenxi-20</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenxi-20" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/rayhaoqin"><img src="https://avatars.githubusercontent.com/u/46983981?v=4?s=100" width="100px;" alt="Alaray"/><br /><sub><b>Alaray</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=rayhaoqin" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/yuanningning"><img src="https://avatars.githubusercontent.com/u/104059491?v=4?s=100" width="100px;" alt="ing"/><br /><sub><b>ing</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=yuanningning" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/shenjunjian"><img src="https://avatars.githubusercontent.com/u/6848520?v=4?s=100" width="100px;" alt="申君健"/><br /><sub><b>申君健</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=shenjunjian" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/MomoPoppy"><img src="https://avatars.githubusercontent.com/u/125256456?v=4?s=100" width="100px;" alt="MomoPoppy"/><br /><sub><b>MomoPoppy</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MomoPoppy" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/WXC-Spring"><img src="https://avatars.githubusercontent.com/u/131581326?v=4?s=100" width="100px;" alt="WXC-Spring"/><br /><sub><b>WXC-Spring</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=WXC-Spring" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt="GaoNeng"/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://acyza.github.io"><img src="https://avatars.githubusercontent.com/u/101238421?v=4?s=100" width="100px;" alt="acyza"/><br /><sub><b>acyza</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=acyza" title="Code">💻</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/ygj6"><img src="https://avatars.githubusercontent.com/u/7699524?v=4?s=100" width="100px;" alt="ygj6"/><br /><sub><b>ygj6</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=ygj6" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/MrWang2016"><img src="https://avatars.githubusercontent.com/u/24307164?v=4?s=100" width="100px;" alt="MrWang2016"/><br /><sub><b>MrWang2016</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MrWang2016" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/qinwencheng"><img src="https://avatars.githubusercontent.com/u/24841685?v=4?s=100" width="100px;" alt="qinwencheng"/><br /><sub><b>qinwencheng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=qinwencheng" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Huangyilin19"><img src="https://avatars.githubusercontent.com/u/48042709?v=4?s=100" width="100px;" alt="黄怡林"/><br /><sub><b>黄怡林</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Huangyilin19" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/zuixinwang"><img src="https://avatars.githubusercontent.com/u/59717852?v=4?s=100" width="100px;" alt="zuixinwang"/><br /><sub><b>zuixinwang</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=zuixinwang" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/LadyChatterleyLover"><img src="https://avatars.githubusercontent.com/u/35223515?v=4?s=100" width="100px;" alt="luopei"/><br /><sub><b>luopei</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=LadyChatterleyLover" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://juejin.cn/user/1996368846785128"><img src="https://avatars.githubusercontent.com/u/31237954?v=4?s=100" width="100px;" alt="前端爆冲"/><br /><sub><b>前端爆冲</b></sub></a><br /><a href="#infra-brenner8023" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/xiejay97"><img src="https://avatars.githubusercontent.com/u/64340763?v=4?s=100" width="100px;" alt="Xie Jay"/><br /><sub><b>Xie Jay</b></sub></a><br /><a href="#infra-xiejay97" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/linxiang07"><img src="https://avatars.githubusercontent.com/u/40119767?v=4?s=100" width="100px;" alt="linxiang"/><br /><sub><b>linxiang</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=linxiang07" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://bollome.netlify.app/"><img src="https://avatars.githubusercontent.com/u/103836393?v=4?s=100" width="100px;" alt="程序员包子"/><br /><sub><b>程序员包子</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=coderbaozi" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/pe-3"><img src="https://avatars.githubusercontent.com/u/103579791?v=4?s=100" width="100px;" alt="peter G"/><br /><sub><b>peter G</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Code">💻</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/gimmyhehe"><img src="https://avatars.githubusercontent.com/u/26026184?v=4?s=100" width="100px;" alt="gimmyhehe"/><br /><sub><b>gimmyhehe</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=gimmyhehe" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/KevinAndrewDong"><img src="https://avatars.githubusercontent.com/u/20911103?v=4?s=100" width="100px;" alt="dong"/><br /><sub><b>dong</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=KevinAndrewDong" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="http://www.linglan01.cn"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt="凌览"/><br /><sub><b>凌览</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=CatsAndMice" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Caesar-ch"><img src="https://avatars.githubusercontent.com/u/74941512?v=4?s=100" width="100px;" alt="Caesar-ch"/><br /><sub><b>Caesar-ch</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenqifeng66"><img src="https://avatars.githubusercontent.com/u/97503755?v=4?s=100" width="100px;" alt="chenqifeng66"/><br /><sub><b>chenqifeng66</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenqifeng66" title="Tests">⚠️</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://zz-zzzz.github.io/"><img src="https://avatars.githubusercontent.com/u/48228016?v=4?s=100" width="100px;" alt="Zz-ZzzZ"/><br /><sub><b>Zz-ZzzZ</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zz-ZzzZ" title="Tests">⚠️</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/lyx-jay"><img src="https://avatars.githubusercontent.com/u/39766860?v=4?s=100" width="100px;" alt="Lyx"/><br /><sub><b>Lyx</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=lyx-jay" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenguang1994"><img src="https://avatars.githubusercontent.com/u/31501915?v=4?s=100" width="100px;" alt="Spark Bill"/><br /><sub><b>Spark Bill</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenguang1994" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Zuowendong"><img src="https://avatars.githubusercontent.com/u/45628596?v=4?s=100" width="100px;" alt="wendZzoo"/><br /><sub><b>wendZzoo</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zuowendong" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/gweesin"><img src="https://avatars.githubusercontent.com/u/42909374?v=4?s=100" width="100px;" alt="Gweesin Chan"/><br /><sub><b>Gweesin Chan</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=gweesin" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Binks123"><img src="https://avatars.githubusercontent.com/u/103343025?v=4?s=100" width="100px;" alt="Binks_"/><br /><sub><b>Binks_</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Binks123" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/yoyo201626"><img src="https://avatars.githubusercontent.com/u/104079404?v=4?s=100" width="100px;" alt="yoyo"/><br /><sub><b>yoyo</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=yoyo201626" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://hexo.kifroom.icu/"><img src="https://avatars.githubusercontent.com/u/62132584?v=4?s=100" width="100px;" alt="Kif"/><br /><sub><b>Kif</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=wkif" title="Code">💻</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/jack-zishan"><img src="https://avatars.githubusercontent.com/u/67041206?v=4?s=100" width="100px;" alt="jack-zishan"/><br /><sub><b>jack-zishan</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=jack-zishan" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="http://gradii.com"><img src="https://avatars.githubusercontent.com/u/5467712?v=4?s=100" width="100px;" alt="LinboLen"/><br /><sub><b>LinboLen</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=LinboLen" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/vaebe"><img src="https://avatars.githubusercontent.com/u/52314078?v=4?s=100" width="100px;" alt="vaebe"/><br /><sub><b>vaebe</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=vaebe" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://allenli178.top"><img src="https://avatars.githubusercontent.com/u/53218750?v=4?s=100" width="100px;" alt="YuYan Li"/><br /><sub><b>YuYan Li</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=allenli178" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/shonen7"><img src="https://avatars.githubusercontent.com/u/145949377?v=4?s=100" width="100px;" alt="shonen7"/><br /><sub><b>shonen7</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=shonen7" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/xlearns"><img src="https://avatars.githubusercontent.com/u/62782792?v=4?s=100" width="100px;" alt="xlearns"/><br /><sub><b>xlearns</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=xlearns" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/ianxinnew"><img src="https://avatars.githubusercontent.com/u/146069396?v=4?s=100" width="100px;" alt="tianxin"/><br /><sub><b>tianxin</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=ianxinnew" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Xppp0217"><img src="https://avatars.githubusercontent.com/u/82315158?v=4?s=100" width="100px;" alt="Xppp0217"/><br /><sub><b>Xppp0217</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Xppp0217" title="Code">💻</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/AcWrong02"><img src="https://avatars.githubusercontent.com/u/147061401?v=4?s=100" width="100px;" alt="AcWrong02"/><br /><sub><b>AcWrong02</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/issues?q=author%3AAcWrong02" title="Bug reports">🐛</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/betavs"><img src="https://avatars.githubusercontent.com/u/34408516?v=4?s=100" width="100px;" alt="betavs"/><br /><sub><b>betavs</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=betavs" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/fanbingbing16"><img src="https://avatars.githubusercontent.com/u/84823288?v=4?s=100" width="100px;" alt="fanbingbing16"/><br /><sub><b>fanbingbing16</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=fanbingbing16" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/dyh333"><img src="https://avatars.githubusercontent.com/u/1221313?v=4?s=100" width="100px;" alt="dyh333"/><br /><sub><b>dyh333</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=dyh333" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/betterdancing"><img src="https://avatars.githubusercontent.com/u/25901461?v=4?s=100" width="100px;" alt="betterdancing"/><br /><sub><b>betterdancing</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=betterdancing" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/David-TechNomad"><img src="https://avatars.githubusercontent.com/u/23149356?v=4?s=100" width="100px;" alt="David"/><br /><sub><b>David</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=David-TechNomad" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/falcon-jin"><img src="https://avatars.githubusercontent.com/u/48880836?v=4?s=100" width="100px;" alt="falcon-jin"/><br /><sub><b>falcon-jin</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=falcon-jin" title="Code">💻</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/wuyiping0628"><img src="https://avatars.githubusercontent.com/u/42107997?v=4?s=100" width="100px;" alt="wuyiping0628"/><br /><sub><b>wuyiping0628</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=wuyiping0628" title="Tests">⚠️</a></td>
-    </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/James-9696"><img src="https://avatars.githubusercontent.com/u/72028410?v=4?s=100" width="100px;" alt="James"/><br /><sub><b>James</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=James-9696" title="Documentation">📖</a></td>
-    </tr>
-  </tbody>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-## ❤️ Credits
-
-感谢：
-
-- [element](https://github.com/ElemeFE/element) 项目，它是一个老牌的基于 Vue.js 的组件库，TinyVue 在设计之初借鉴了 Element，并针对 Element 的组件 API 进行兼容。
-- [floating-ui](https://github.com/floating-ui/floating-ui) 项目，它是一个轻量级、无依赖、高性能的定位库，TinyVue 的多个组件都是基于 Floating UI 提供的能力。
-- [vxe-table](https://github.com/x-extends/vxe-table) 项目，它是一个基于 Vue 的表格组件，支持丰富的功能，TinyVue 的 Grid 组件基于 vxe-table。
-- [sortablejs](https://github.com/SortableJS/Sortable) 项目，它是一个功能强大的拖拽库，TinyVue 的 Grid / Transfer / Tabs 等多个组件的拖拽排序功能都基于 Sortable。
-- [@adamwathan](https://github.com/adamwathan) 写的文章[《Renderless Components in Vue.js》](https://adamwathan.me/renderless-components-in-vuejs/)，这篇文章启发了 TinyVue 的无渲染组件设计架构，并最终在 TinyVue 项目中实现了跨端、跨框架能力。
-
-## 开源协议
-
-[MIT](LICENSE)

commitlint.config.js

@@ -1,6 +1 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    'header-max-length': [1, 'always', 150]
-  }
-}
+module.exports = { extends: ['@commitlint/config-conventional'] }

convert-vue-to-jsx.js

@@ -0,0 +1,455 @@
+const fs = require('node:fs')
+const path = require('node:path')
+const { parse } = require('@vue/compiler-sfc')
+const fse = require('fs-extra')
+
+// Vue文件都在这个目录下
+const vueFilesDir = './packages/vue/src'
+// 转换后的JSX文件将保存在这个目录下
+const jsxFilesDir = './packages/react-components'
+function convertWord(str, first) {
+  if (!str) return str
+  const arr = str.split('-')
+  let result = str
+  if (arr[1]) {
+    result = arr[0] + String(arr[1][0]).toLocaleUpperCase() + arr[1].slice(1)
+  }
+  if (first) result = String(result[0]).toLocaleUpperCase() + result.slice(1)
+  return result
+}
+function uniqueArray(arr) {
+  return Array.from(new Set(arr))
+}
+
+function extractPropNames(str) {
+  const lines = str.split('\n')
+  let inProps = false
+  const symbolTable = []
+  const props = []
+  let returnObj = null
+
+  for (const line of lines) {
+    const trimmedLine = line.trim()
+    if (!trimmedLine) continue
+    if (trimmedLine === 'props: {') {
+      symbolTable.push('{')
+      inProps = true
+    } else if (inProps) {
+      if (!trimmedLine.includes('{') && !trimmedLine.includes('}') && symbolTable.length === 1) {
+        if (
+          trimmedLine.includes('...props') ||
+          trimmedLine.includes('...$props') ||
+          trimmedLine.includes('//') ||
+          trimmedLine.includes('props')
+        ) {
+          continue
+        }
+        // console.log(trimmedLine, symbolTable, str, 'str')
+        const exec = /([a-z_][a-zA-Z0-9]*)[/:]/.exec(trimmedLine)
+        props.push(exec[1])
+      } else {
+        if (trimmedLine.includes('{') && (!trimmedLine.includes('}') || trimmedLine.includes('{}'))) {
+          symbolTable.push('{')
+          if (trimmedLine.includes('{}')) {
+            symbolTable.pop()
+          }
+          if (returnObj) {
+            continue
+          }
+          if (trimmedLine.includes('return')) {
+            returnObj = { index: symbolTable.length }
+          }
+          if (trimmedLine.includes('validator(') || !trimmedLine.includes(':')) {
+            continue
+          }
+          // console.log(trimmedLine, symbolTable, str, 'str')
+          const exec = /([a-z_][a-zA-Z0-9]*)[/:]/.exec(trimmedLine)
+          props.push(exec[1])
+        }
+        if (trimmedLine.includes('}') && !trimmedLine.includes('{')) {
+          if (symbolTable.length > 0 && symbolTable.slice(-1)[0] === '{') {
+            symbolTable.pop()
+            if (returnObj && symbolTable.length === returnObj.index) {
+              returnObj = null
+            }
+            if (symbolTable.length === 0) {
+              inProps = false
+              break
+            }
+          } else {
+            inProps = false
+            break
+          }
+        }
+      }
+    }
+  }
+  return props
+}
+
+// 将Vue组件转换为JSX的函数
+function convertVueToJSX(vueFilePath, reactFilePath, componentName) {
+  const vueContent = fs.readFileSync(vueFilePath, 'utf-8')
+  const { template, script } = parse(vueContent).descriptor
+  let code = ''
+  let refs = []
+  let events = []
+  if (template) {
+    code = astToJSX(template.ast, refs, events)
+    refs = uniqueArray(refs)
+    events = uniqueArray(events)
+  }
+  const regex = /props:\s*\[([^\]]*)\]/
+
+  const match = script?.content.match(regex)
+  let props = []
+  if (match) {
+    props = match[1]
+      .trim()
+      .replace(/'/g, '')
+      .replace(/,/g, '')
+      .replace(/\n/g, '')
+      .split(' ')
+      .filter((item) => item && item !== '...props')
+  }
+  if (script) {
+    if (props.length === 0) {
+      if (!script?.content.includes('props')) {
+        props = []
+      } else {
+        props = extractPropNames(script.content)
+      }
+    }
+  }
+
+  const str = refs.length > 0 ? refs.map((item) => `const ${item}=useRef()`).join('\n') : ''
+
+  // 构造React组件的基本结构
+  const reactComponent = `
+    import { renderless, api } from '@opentiny/vue-renderless/${componentName}/vue'
+    import '@opentiny/vue-theme/${componentName}/index.less'
+    import { vc, If, Component, Slot, useSetup, useVm, $props, m } from '@opentiny/react-common'
+    import {useRef} from 'react'
+    export default function ${convertWord(path.basename(componentName, '.vue'))}(props) {
+      const {${props.join(',')}} = props
+      const defaultProps = {
+        ...$props,
+        ...props,
+        ${props.join(',')}
+      }
+      const { ref, current: vm, parent } = useVm()
+      ${str}
+      const { state,${events.join(',')} } = useSetup({
+        props: defaultProps,
+        renderless,
+        api,
+        constants: _constants,
+        vm,
+        parent,
+        doms:[${refs.join(',')}]
+      })
+      return (
+        ${code}
+      );
+    }
+    `
+
+  // 写入JSX文件
+  fs.writeFileSync(reactFilePath, reactComponent)
+}
+
+// 定义一个函数，用于将AST节点转换成JSX代码
+function astToJSX(node, refs = [], events = [], ifArr = []) {
+  // 如果节点类型为文本节点，则直接返回文本内容
+  if (node.type === 2) {
+    return node.content
+  }
+  if (node.type === 5) {
+    return `{${node.content.content}}`
+  }
+  // 如果节点为元素节点
+  if (node.type === 1) {
+    let forAStr = ''
+    let className = ''
+    // 生成标签的属性代码
+    let props = node.props
+      .map((prop) => {
+        if (prop.name === 'bind') {
+          const exp = prop.exp
+          const arg = prop.arg
+          if (exp.isStatic && arg.isStatic) return `${arg.content}="${exp.content}"`
+          else if (!exp.isStatic) {
+            if (arg?.content === 'class') {
+              if (exp.content.startsWith('[') || exp.content.startsWith('{')) {
+                if (className) className = `vc(${exp.content},'${className}'`
+                else className = `vc(${exp.content}`
+
+                return ''
+              } else {
+                if (className) className = `vc([${exp.content},'${className}]'`
+                else className = `vc([${exp.content}`
+
+                // className = handleClass(className, exp.content)
+                return ''
+              }
+            } else if (!arg) {
+              return exp.content
+            }
+            return `${arg.content}={${exp.content}}`
+          }
+        } else if (prop.name === 'class') {
+          className = handleClass(className, prop.value.content)
+
+          return ''
+        } else if (prop.name === 'if' || prop.name === 'show') {
+          const exp = prop.exp
+          if (!exp) return ''
+          if (prop.name === 'if') {
+            ifArr.push(exp.content)
+          }
+          return `style={{display:${exp.content}?'block':'none'}}`
+        } else if (prop.name === 'else' || prop.name === 'else-if') {
+          let content = ifArr.slice(-1)?.[0]
+          ifArr.push(`!(${content})`)
+          return `style={{display:!(${content})?'block':'none'}}`
+        } else if (prop.name === 'model') {
+          const exp = prop.exp
+          return `value={${exp.content}} onChange={(e)=>${exp.content} = e.value}`
+        } else if (prop.name === 'on') {
+          const exp = prop.exp
+          const arg = prop.arg
+          if (!exp) return ''
+          if (!exp.content.includes('=') && !exp.content.includes('$emit')) {
+            let index = exp.content.indexOf('(')
+            if (index > -1) {
+              events.push(exp.content.slice(0, index))
+            } else events.push(exp.content)
+          }
+          if (!arg) {
+            return `{...${exp.content}}`
+          }
+          return `${convertWord('on-' + arg.content)}={${exp.content}}`
+        } else if (prop.name === 'for') {
+          if (!prop.exp?.content) {
+            return prop.loc.source
+          }
+          forAStr = prop.exp.content
+          return ''
+        } else {
+          if (prop.name === 'ref') {
+            refs.push(prop.value?.content)
+            return `ref={${prop.value?.content}} v-ref="${prop.value?.content}"`
+          }
+          if (prop.value) return `${prop.name}="${prop.value.content}"`
+          return prop.name
+        }
+        return ''
+      })
+      .join(' ')
+    // 递归处理子节点
+    const children = node.children.map((child) => astToJSX(child, refs, events, ifArr)).join('\n')
+    let tag = node.tag
+    if (tag === 'template' && !props.trim()) {
+      return children
+    }
+    if (node.tag === 'slot') {
+      props += ` parent_children={props.children} slots={props.slots}`
+      tag = 'Slot'
+    } else if (node.tag === 'component') {
+      tag = 'Component'
+    } else {
+      tag = convertWord(tag)
+    }
+    if (className && className.includes('vc')) {
+      className = `className={${className})}`
+      props += ' '
+      props += className
+    } else if (className) {
+      className = `className="${className}"`
+      props += ' '
+      props += className
+    }
+    if (forAStr) {
+      const arr = forAStr.split(' in ')
+      return `
+  {
+    ${arr[1]}.map(${arr[0]}=>(
+      <${tag} ${props}>${children}</${tag}>
+    ))
+  }
+  `
+    }
+    // 生成包含属性和子节点的标签代码
+    return `<${tag} ${props}>${children}</${tag}>`
+  }
+}
+function handleClass(className, content) {
+  if (className) {
+    if (className.includes('vc')) {
+      className = `${className},'${content}'`
+    } else {
+      className += ` ${content}`
+    }
+  } else {
+    className = content
+  }
+  return className
+}
+
+// 更新package.json
+function updatePackageJson(componentName) {
+  const vuePackageJsonPath = path.join(vueFilesDir, componentName, 'package.json')
+  const reactPackageJsonPath = path.join(jsxFilesDir, componentName, 'package.json')
+
+  if (fs.existsSync(vuePackageJsonPath)) {
+    const vuePackageJson = JSON.parse(fs.readFileSync(vuePackageJsonPath, 'utf-8'))
+    const reactPackageJson = {
+      name: vuePackageJson.name.replace('vue', 'react'),
+      devDependencies: {},
+      scripts: {},
+      dependencies: Object.entries(vuePackageJson.dependencies).reduce((acc, [depName, depVersion]) => {
+        let arr = ['@opentiny/vue-renderless', '@opentiny/vue-theme', '@opentiny/vue-theme-mobile']
+        if (depName.startsWith('@opentiny/vue-') && !arr.includes(depName)) {
+          acc[`@opentiny/react${depName.slice(13)}`] = depVersion
+        } else {
+          acc[depName] = depVersion
+        }
+        return acc
+      }, {})
+    }
+
+    fs.writeFileSync(reactPackageJsonPath, JSON.stringify(reactPackageJson, null, 2))
+  }
+}
+
+// 更新index.ts文件的函数
+function updateIndexTs(componentName) {
+  const reactIndexTsPath = path.join(jsxFilesDir, componentName, 'index.ts')
+
+  const reactIndexTsContent = `import ${convertWord(componentName, true)} from './src/index'\nimport '@opentiny/vue-theme/${componentName}/index.less'\n\nexport default ${convertWord(componentName, true)}`
+
+  fs.writeFileSync(reactIndexTsPath, reactIndexTsContent)
+}
+// 主函数：处理转换逻辑
+function convertVueComponentsToReact(componentName) {
+  // 确保react组件目录存在
+  if (!fs.existsSync(jsxFilesDir)) {
+    fs.mkdirSync(jsxFilesDir, { recursive: true })
+  }
+  // 获取Vue组件目录列表
+  const vueComponentDirs = fs.readdirSync(vueFilesDir)
+
+  // 如果指定了组件名称，则只转换该组件
+  if (componentName) {
+    // 目前先不处理图表和表格
+    if (componentName.includes('chart') || componentName.includes('gird')) {
+      return
+    }
+    const vueComponentDir = path.join(vueFilesDir, componentName)
+    const reactComponentDir = path.join(jsxFilesDir, componentName)
+    if (!fs.existsSync(reactComponentDir)) fs.mkdirSync(reactComponentDir, { recursive: true })
+
+    // 确保Vue组件目录存在
+    if (fs.existsSync(vueComponentDir)) {
+      // 处理非.vue文件到目标目录
+      updatePackageJson(componentName)
+
+      // 获取src目录路径
+      const vueSrcDir = path.join(vueComponentDir, 'src')
+      const reactSrcDir = path.join(reactComponentDir, 'src')
+
+      // 确保src目录存在
+      if (!fs.existsSync(reactSrcDir)) {
+        fs.mkdirSync(reactSrcDir, { recursive: true })
+      }
+      updateIndexTs(componentName)
+      if (!fs.existsSync(vueSrcDir)) return
+      // 遍历Vue文件并生成JSX文件
+      const vueFiles = fs.readdirSync(vueSrcDir)
+      const vueFilesName = []
+      vueFiles.forEach((vueFile) => {
+        const vueFilePath = path.join(vueSrcDir, vueFile)
+        const reactFilePath = path.join(reactSrcDir, vueFile)
+        if (vueFile.endsWith('.vue')) {
+          if (['mobile.vue', 'mobile-first.vue', 'pc.vue'].includes(vueFile)) vueFilesName.push(vueFile.split('.')[0])
+          const jsxFilePath = path.join(reactSrcDir, vueFile.replace(/\.vue$/, '.jsx'))
+          convertVueToJSX(vueFilePath, jsxFilePath, componentName)
+        } else if (vueFile === 'index.ts') {
+          // 处理index.ts文件
+        } else {
+          copyNonVueFiles(vueFilePath, reactFilePath)
+        }
+      })
+      const code = `
+      ${vueFilesName.map((item) => `import ${convertWord(item)} from './${item}'`).join('\n')}
+      export default function (props) {
+        const { tiny_mode = 'pc' } = props
+      
+        const S = {
+          ${vueFilesName.map((item) => `'${item}':${convertWord(item)}`).join(',')}
+        }[tiny_mode]
+      
+        return S(props)
+      }
+      
+      `
+      fs.writeFileSync(path.join(reactSrcDir, 'index.ts'), code)
+    }
+  } else {
+    // 如果没有指定组件名称，则转换所有组件
+    vueComponentDirs.forEach((vueComponent) => {
+      convertVueComponentsToReact(vueComponent)
+    })
+  }
+}
+async function copyNonVueFiles(sourceDir, targetDir) {
+  // 确保sourceDir是字符串类型
+  if (typeof sourceDir !== 'string') {
+    throw new TypeError('sourceDir must be a string')
+  }
+  // 确保targetDir是字符串类型
+  if (typeof targetDir !== 'string') {
+    throw new TypeError('targetDir must be a string')
+  }
+
+  // 读取sourceDir的stats信息
+  const stats = await fse.stat(sourceDir)
+
+  // 如果sourceDir是文件，则直接复制（排除.vue文件）
+  if (stats.isFile()) {
+    const extname = path.extname(sourceDir)
+    if (extname !== '.vue') {
+      await fse.copy(sourceDir, targetDir)
+    }
+  }
+  // 如果sourceDir是文件夹，则递归复制其中的非.vue文件
+  else if (stats.isDirectory()) {
+    const files = await fse.readdir(sourceDir)
+    for (const file of files) {
+      const sourceFilePath = path.join(sourceDir, file)
+      const targetFilePath = path.join(targetDir, file)
+
+      // 如果是文件夹，递归调用copyNonVueFiles
+      const fileStats = await fse.stat(sourceFilePath)
+      if (fileStats.isDirectory()) {
+        // 如果目标文件夹不存在，则创建
+        await fse.mkdirp(targetFilePath)
+        // 递归复制子文件夹
+        await copyNonVueFiles(sourceFilePath, targetFilePath)
+      }
+      // 如果是文件，并且不是.vue文件，则复制
+      else if (fileStats.isFile() && path.extname(file) !== '.vue') {
+        await fse.copy(sourceFilePath, targetFilePath)
+      }
+    }
+  } else {
+    throw new Error('sourceDir is not a file or directory')
+  }
+}
+// 运行脚本
+if (process.argv.length > 2) {
+  const componentName = process.argv[2]
+  convertVueComponentsToReact(componentName)
+} else {
+  convertVueComponentsToReact()
+}

examples/docs/newsrc/App.vue

@@ -19,6 +19,7 @@
     </div>
     <div class="fi-1 of-auto">
       <tiny-pc v-if="modeState.mode === 'pc'" :show-fixed-menu="state.showFixedMenu"></tiny-pc>
+      <tiny-mobile v-else-if="modeState.mode === 'mobile'" :show-fixed-menu="state.showFixedMenu"></tiny-mobile>
       <tiny-mobile-first v-else :show-fixed-menu="state.showFixedMenu"></tiny-mobile-first>
     </div>
   </div>
@@ -29,6 +30,7 @@ import './style.css'
 import { ButtonGroup, Link } from '@opentiny/vue'
 import { iconEditorMenuRight, iconEditorMenuLeft } from '@opentiny/vue-icon'
 import TinyPc from './pc.vue'
+import TinyMobile from './mobile.vue'
 import TinyMobileFirst from './mobile-first.vue'
 import { hooks } from '@opentiny/vue-common'
 import { useModeCtx } from './uses'
@@ -36,6 +38,7 @@ import { useModeCtx } from './uses'
 export default {
   components: {
     TinyPc,
+    TinyMobile,
     TinyMobileFirst,
     TinyButtonGroup: ButtonGroup,
     TinyLink: Link,
@@ -47,6 +50,7 @@ export default {
     const state = hooks.reactive({
       groupData: [
         { text: 'PC', value: 'pc' },
+        { text: 'Mobile', value: 'mobile' },
         { text: 'Mobile-first', value: 'mobile-first' }
       ],
       vueVersion: hooks.version,

examples/docs/newsrc/mobile-first.vue

@@ -23,9 +23,11 @@
           <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>

examples/docs/newsrc/mobile.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="wp100 hp100 f-r of-hidden">
+    <div class="w230 pt20 of-auto sm-hidden b-r bg-white" :class="{ 'fixed-menu': showFixedMenu }">
+      <tiny-tree-menu
+        class="!w213"
+        :data="menuData"
+        :filter-node-method="fn.searchMenu"
+        @current-change="fn.clickMenu"
+      ></tiny-tree-menu>
+    </div>
+    <div class="fi-1 f-c px20 pb30 f-c pr200 of-auto">
+      <!-- 标题 -->
+      <div class="py20">
+        <component :is="state.currMd"></component>
+      </div>
+      <div id="preview" class="bg-white">
+        <div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
+          <div class="mr20 fw-bold">
+            {{ state.currDemo?.name['zh-CN'] }}( <span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
+            >):
+          </div>
+          <div v-html="state.currDemo?.desc['zh-CN']"></div>
+        </div>
+        <!-- 预览 -->
+        <div class="rel px20" :id="state.currDemo?.demoId">
+          <div class="phone-container" @dblclick="fn.openInVscode(state.currDemo)">
+            <div class="mobile-view-container">
+              <component :is="state.comp"></component>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- API表格 -->
+      <div v-if="state.currApi?.length" class="mt20 f24 fw-bold">组件API</div>
+      <div v-for="(oneGroup, idx) in state.currApi" :key="idx">
+        <div class="mt20 f-r f-pos-start fw-bold">
+          <div :id="oneGroup.name" class="f18">
+            {{ oneGroup.name }}
+          </div>
+          <div class="ml12 b-a-primary c-primary px8 py4">
+            {{ oneGroup.type }}
+          </div>
+        </div>
+        <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+          <div v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+            <div class="f18 py28">
+              {{ key }}
+            </div>
+            <table class="api-table">
+              <thead>
+                <tr>
+                  <th width="20%">名称</th>
+                  <th width="15%">类型</th>
+                  <th width="20%">默认值</th>
+                  <th width="55%">说明</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in oneApiArr" :key="row.name">
+                  <td>
+                    <a v-if="row.demoId" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.demoId)">{{
+                      row.name
+                    }}</a>
+                    <span v-else>{{ row.name }}</span>
+                  </td>
+                  <td>{{ row.type }}</td>
+                  <td v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"></td>
+                  <td v-html="row.desc['zh-CN']"></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 右边浮动所有的demos -->
+    <tiny-floatbar v-if="state.demos?.length > 0" class="!top120 !z1 !right25">
+      <div class="f12 ofy-auto">
+        <div
+          v-for="demo in state.demos"
+          :key="demo.demoId"
+          @click="fn.selectDemo(demo.demoId)"
+          class="w130 px10 py4 bg-light f-r f-pos-between"
+          :class="{ 'c-error': state.currDemo === demo }"
+        >
+          <div class="link-primary h:c-error h:td-under ellipsis">
+            {{ demo.name['zh-CN'] }}
+            <Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
+          </div>
+          <IconOpeninVscode @click.stop="fn.openInVscode(demo)" class="f18 cur-hand" />
+        </div>
+      </div>
+    </tiny-floatbar>
+  </div>
+</template>
+
+<script>
+import { hooks } from '@opentiny/vue-common'
+import { Floatbar, TreeMenu, Button, Tooltip } from '@opentiny/vue'
+import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
+import { menuData, demos, demoStr, demoVue, mds } from './resourceMobile.js'
+import { useModeCtx } from './uses'
+import { getDemosConfig, getApisConfig } from './utils/componentsDoc'
+
+export default {
+  props: {
+    showFixedMenu: Boolean
+  },
+  components: {
+    TinyFloatbar: Floatbar,
+    TinyTreeMenu: TreeMenu,
+    TinyButton: Button,
+    TinyTooltip: Tooltip,
+    IconStarIcon: iconStarActive(),
+    IconOpeninVscode: iconSelect()
+  },
+  setup() {
+    const { state: modeState, fn: modeFn } = useModeCtx()
+    const state = hooks.reactive({
+      demos: [], // 组件的所有示例
+      currDemo: null, // 选中的demo
+      currApi: [], // 当前path下的api
+      comp: null, // 当前示例的组件实例
+      currDemoSrc: '',
+      currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`])
+    })
+    const fn = {
+      // 菜单搜索：忽略大小写
+      searchMenu: (value, data) => {
+        if (!value) return true
+        return data.label.toLowerCase().includes(value.toLowerCase())
+      },
+      // 点击菜单：如果是二级菜单，根据path 刷新整个页面内容
+      clickMenu: async (menu) => {
+        if (menu.nameCn && menu.key !== state.key) {
+          modeState.pathName = menu.key
+          await _switchPath()
+        }
+      },
+      // 点击示例
+      selectDemo: async (demoId) => {
+        const demo = state.demos.find((d) => d.demoId === demoId)
+        if (state.currDemo !== demo) {
+          state.currDemo = demo
+          await _switchDemo()
+        }
+      },
+      openInVscode: (demo) => {
+        fetch(`/__open-in-editor?file=../sites/demos/mobile/app/${modeState.pathName}/${demo.codeFiles[0]}`)
+      }
+    }
+
+    hooks.onMounted(() => {
+      _switchPath()
+    })
+
+    // 以下私有方法，无须传递给vue模板的。
+    async function _switchPath() {
+      const demosModule = demos[`../../sites/demos/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
+      const demosConfig = await getDemosConfig(demosModule)
+      state.demos = demosConfig.demos
+      state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
+      state.currApi = (await getApisConfig(modeState.pathName, 'mobile')).apis
+      await _switchDemo()
+    }
+    async function _switchDemo() {
+      modeState.demoId = state.currDemo.demoId
+      const path = `../../sites/demos/mobile/app/${modeState.pathName}/${state.currDemo?.codeFiles[0]}`
+
+      // 查找源码  查找组件
+      state.currDemoSrc = await demoStr[path]()
+      const comp = await demoVue[path]()
+
+      state.comp = hooks.markRaw(comp.default)
+
+      modeFn.cacheCtx()
+      modeFn.pushToUrl()
+    }
+
+    return {
+      menuData,
+      state,
+      fn,
+      modeState,
+      modeFn
+    }
+  }
+}
+</script>

examples/docs/newsrc/pc.vue

@@ -96,14 +96,8 @@
         </div>
       </div>
     </tiny-floatbar>
-    <!-- 切换主题 暂时先屏蔽，等后续其他主题验收完成再放出此功能 -->
-    <tiny-dropdown
-      v-if="false"
-      class="!fixed bottom20 right140"
-      :show-icon="false"
-      @item-click="changeTheme"
-      :disabled="isSaasMode"
-    >
+    <!-- 切换主题 -->
+    <tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme" :disabled="isSaasMode">
       <span title="切换主题">
         <SvgTheme></SvgTheme>
       </span>
@@ -157,6 +151,8 @@ import {
 } from '@opentiny/vue'
 import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
 import Loading from '@opentiny/vue-loading'
+import designSmbConfig from '@opentiny/vue-design-smb'
+import designAuroraConfig from '@opentiny/vue-design-aurora'
 import designSaasConfig from '@opentiny/vue-design-saas'
 import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js'
 import { useTheme, useModeCtx } from './uses'
@@ -198,7 +194,7 @@ export default {
       currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
       demoLoading: false
     })
-    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
+    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。 
     const huiNewChart = ['chart-process']
     const fn = {
       // 菜单搜索：忽略大小写
@@ -249,11 +245,9 @@ export default {
       await _switchDemo()
     }
     async function _switchDemo() {
-      if (!state.currDemo) {
-        return
-      }
       modeState.demoId = state.currDemo.demoId
       const path = `../../sites/demos/pc/app/${getPath(modeState.pathName)}/${state.currDemo?.codeFiles[0]}`
+
       // 查找源码  查找组件
       state.currDemoSrc = await demoStr[path]()
       const comp = await demoVue[path]()
@@ -265,8 +259,8 @@ export default {
     }
 
     const designConfigMap = {
-      'tiny-smb-theme': {},
-      'tiny-aurora-theme': {}
+      'tiny-smb-theme': designSmbConfig,
+      'tiny-aurora-theme': designAuroraConfig
     }
 
     const lastThemeKey = localStorage.getItem('tinyThemeToolkey')

examples/docs/newsrc/resourceMobile.js

@@ -0,0 +1,32 @@
+// eager = true，可以校验vue,json等文件错误。
+// eager = false, 可以懒加载，优化速度
+
+// demo源码
+// 同web-doc的菜单资源
+import { cmpMenus } from '../../sites/demos/mobile/menus.js'
+
+export const demoStr = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoVue = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false })
+
+// demos配置
+export const demos = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.js', { eager: false })
+
+// 组件的md
+const allMD = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.cn.md', { eager: true })
+export const mds = {}
+for (const path in allMD) {
+  let key = path.split('/').slice(-1)[0]
+  mds[key] = allMD[path].default
+}
+
+const menuData = cmpMenus.slice(0)
+function processMenu(menu, isTop) {
+  menu.id = menu.key
+  menu.label = isTop ? menu.label : `${menu.nameCn} ${menu.name}`
+  if (menu.children && menu.children.length > 0) {
+    menu.children.forEach((m) => processMenu(m, false))
+  }
+}
+menuData.forEach((m) => processMenu(m, true))
+
+export { menuData }

examples/docs/newsrc/resourceMobileFirst.js

@@ -1,10 +1,6 @@
 import { cmpMenus } from '../../sites/demos/mobile-first/menus.js'
 
-export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', {
-  eager: false,
-  query: '?raw',
-  import: 'default'
-})
+export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false, as: 'raw' })
 export const demoVue = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false })
 
 // demos配置

examples/docs/newsrc/resourcePc.js

@@ -5,11 +5,7 @@
 // 同web-doc的菜单资源
 import { cmpMenus } from '../../sites/demos/pc/menus.js'
 
-export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', {
-  eager: false,
-  query: '?raw',
-  import: 'default'
-})
+export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false, as: 'raw' })
 export const demoVue = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false })
 
 // demos配置

examples/docs/newsrc/uses/useTheme.js

@@ -1,4 +1,5 @@
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
+import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
 import { hooks } from '@opentiny/vue-common'
 import { Notify } from '@opentiny/vue'
 
@@ -20,9 +21,9 @@ export function useTheme({ readCacheImmediate = true } = {}) {
   const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
 
   const THEME_MAP = {
-    'tiny-aurora-theme': null,
-    'tiny-smb-theme': null,
-    'tiny-infinity-theme': null
+    'tiny-aurora-theme': tinyAuroraTheme,
+    'tiny-smb-theme': tinySmbTheme,
+    'tiny-infinity-theme': tinyInfinityTheme
   }
 
   const changeTheme = ({ vm }) => {

examples/docs/package.json

@@ -3,22 +3,24 @@
   "type": "module",
   "version": "1.0.8",
   "description": "",
+  "keywords": [],
   "author": "",
   "license": "ISC",
-  "keywords": [],
-  "files": [
-    "resources"
-  ],
   "dependencies": {
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-design-aurora": "workspace:~",
-    "@opentiny/vue-design-saas": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-theme-saas": "workspace:~",
+    "@opentiny/vue-design-aurora": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
+    "@opentiny/vue-design-saas": "workspace:~",
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
-    "@playwright/test": "catalog:"
-  }
+    "@playwright/test": "^1.40.1"
+  },
+  "files": [
+    "resources"
+  ]
 }

examples/openinula-docs/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>Opentiny openinula 组件调试</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/openinula-docs/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@opentiny/openinula-docs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@opentiny/openinula": "workspace:~",
+    "openinula": "^0.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "@vitejs/plugin-react": "^4.0.1",
+    "eslint": "^8.44.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.16",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.8",
+    "vite-plugin-svgr": "^3.2.0"
+  }
+}

examples/openinula-docs/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

examples/openinula-docs/src/App.tsx

@@ -0,0 +1,12 @@
+import { Alert } from '@opentiny/openinula'
+
+// 在这里导入组件，进行 api 调试
+function App() {
+  return (
+    <div className="app">
+      <Alert description="默认提示组件" />
+    </div>
+  )
+}
+
+export default App

examples/openinula-docs/src/main.css

@@ -0,0 +1,4 @@
+.app {
+  margin: 10px;
+  width: 500px;
+}

examples/openinula-docs/src/main.tsx

@@ -0,0 +1,5 @@
+import Inula from 'openinula'
+import App from './App.tsx'
+import './main.css'
+
+Inula.render(<App />, document.getElementById('root'))

examples/openinula-docs/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/openinula-docs/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+
+const alias = {
+  react: 'openinula',
+  'react-dom': 'openinula',
+  'react/jsx-dev-runtime': 'openinula/jsx-dev-runtime'
+}
+
+export default defineConfig({
+  plugins: [svgr(), react({ include: /\.(mdx|js|jsx|ts|tsx)$/ })],
+  resolve: {
+    alias
+  }
+})

examples/react-docs/demos/apis/alert.js

@@ -0,0 +1,295 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'alert',
+      type: 'component',
+      props: [
+        {
+          name: 'center',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '文字是否居中',
+            'en-US': 'Whether the text is centered'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'center',
+          mobileDemo: 'center',
+          mfDemo: ''
+        },
+        {
+          name: 'closable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '警告是否可以关闭',
+            'en-US': 'Set whether alarms can be disabled.'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'custom-close',
+          mobileDemo: 'custom-close',
+          mfDemo: ''
+        },
+        {
+          name: 'close-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭按钮自定义文本',
+            'en-US': 'Customized text of the close button'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'custom-close',
+          mobileDemo: 'custom-close',
+          mfDemo: ''
+        },
+        {
+          name: 'custom-class',
+          type: 'string',
+          defaultValue: "'customClass'",
+          desc: {
+            'zh-CN': '自定义类名',
+            'en-US': 'Customization class name'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-class',
+          mfDemo: ''
+        },
+        {
+          name: 'description',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '警告的提示内容',
+            'en-US': 'Set the warning prompt content'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'custom-close',
+          mfDemo: ''
+        },
+        {
+          name: 'icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '传入图标组件自定义警告的图标，默认会根据 type 值自动使用对应图标',
+            'en-US':
+              'The icon for the custom warning of the incoming icon component will be automatically used based on the type value by default'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'icon',
+          mobileDemo: 'icon',
+          mfDemo: ''
+        },
+        {
+          name: 'scrolling',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否开启描述文字在鼠标 hover 时滚动显示的动画。',
+            'en-US':
+              'Indicates whether to enable the animation of the description text scrolling when the mouse hovers.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'show-foldable',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '展示带标题可折叠样式。',
+            'en-US': 'Shows collapsible styles with titles.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'show-icon',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图标',
+            'en-US': 'Display icon'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'show-icon',
+          mfDemo: ''
+        },
+        {
+          name: 'single-line',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '描述内容是否一行显示，超出显示...，默认值为 false。',
+            'en-US': 'Indicates whether the description is displayed in one line. The default value is false.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'size',
+          type: "'normal' | 'large'",
+          defaultValue: "'normal'",
+          desc: {
+            'zh-CN': '警告的尺寸大小',
+            'en-US': 'Set the size of the warning'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'size',
+          mobileDemo: 'size',
+          mfDemo: ''
+        },
+        {
+          name: 'target',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '挂载容器的ref值，通过该属性可以让组件展示在对应容器的顶部',
+            'en-US':
+              'Mounted container reference, this property allows the component to be displayed at the top of the corresponding container.'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'target'
+        },
+        {
+          name: 'title',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '警告的标题，在 size 为 large 时有效，默认会根据 type 自动设置',
+            'en-US':
+              'Set the warning title. This parameter is valid only when size is set to large. By default, the alarm title is automatically set based on type.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'title',
+          mfDemo: ''
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IType',
+          type: 'IType',
+          defaultValue: "'info'",
+          desc: {
+            'zh-CN': '警告的类型',
+            'en-US': 'Set the alarm type'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'size',
+          mfDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'close',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭 alert 时触发的事件',
+            'en-US': 'Event triggered when the alert function is disabled'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'custom-close',
+          mobileDemo: 'custom-close',
+          mfDemo: ''
+        },
+        {
+          name: 'handleHeaderClick',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标题点击事件，设置 show-foldable 为 true 时有效。',
+            'en-US': 'Title click event. This parameter is valid only when show-foldable is set to true.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        }
+      ],
+      methods: [
+        {
+          name: 'close',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '隐藏组件',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'handleHeaderClick',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标题点击事件，设置 show-foldable 为 true 时有效',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        }
+      ],
+      slots: [
+        {
+          name: 'close',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义关闭内容，当 closable 属性为 false 时有效',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-close'
+        },
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽，当 size 设置为 large 后有效',
+            'en-US': 'The default slot for the component is valid when size is set to large'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'slot-default',
+          mobileDemo: 'slot-default',
+          mfDemo: ''
+        },
+        {
+          name: 'description',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '提示内容',
+            'en-US': 'Prompt Content'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'title',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标题的内容，当 size 设置为 large 后有效',
+            'en-US': 'The content of the title is valid when size is set to large'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'title',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'success' | 'warning' | 'info' | 'error' | 'simple'
+`
+    }
+  ]
+}

examples/react-docs/demos/apis/anchor.js

@@ -0,0 +1,120 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'anchor',
+      type: 'component',
+      props: [
+        {
+          name: 'container-id',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '用于单页面 hash 路由模式时指定滚动容器的 id 值，id 为空时则滚动容器默认为 HTML 文档的根节点 body 元素',
+            'en-US':
+              'When used in single page hash routing mode, specify the id value of the scrolling container. If the id is empty, the scrolling container defaults to the body element of the root node of the HTML document'
+          },
+          mode: ['pc'],
+          pcDemo: 'set-container'
+        },
+        {
+          name: 'is-affix',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '固定模式',
+            'en-US': 'Fixed mode'
+          },
+          mode: ['pc'],
+          pcDemo: 'is-affix'
+        },
+        {
+          name: 'links',
+          typeAnchorName: 'ILink',
+          type: 'ILink[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '导航数据配置项，可通过 children 嵌套',
+            'en-US': 'Navigation data configuration items can be nested through children'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'mark-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义滚动的目标元素类名',
+            'en-US': 'Class name of the customized scrolling target element'
+          },
+          mode: ['pc'],
+          pcDemo: 'set-container'
+        },
+        {
+          name: 'type',
+          type: "'line' | 'dot'",
+          defaultValue: "'line'",
+          desc: {
+            'zh-CN': '锚点类型',
+            'en-US': 'Anchor type'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '(hash: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '锚点链接改变事件',
+            'en-US': 'Anchor link change event'
+          },
+          mode: ['pc'],
+          pcDemo: 'change'
+        },
+        {
+          name: 'link-click',
+          type: '(event: Event, currentLink: {link: string, title: string}) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '锚点点击事件',
+            'en-US': 'Anchor click event'
+          },
+          mode: ['pc'],
+          pcDemo: 'set-container'
+        },
+        {
+          name: 'on-change',
+          type: '(hash: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使用 change 代替；[deprecated v3.12.0 废弃，v3.17.0 移除；移除原因：命名规范]',
+            'en-US':
+              'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
+          },
+          mode: ['pc'],
+          pcDemo: 'change'
+        }
+      ],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'ILink',
+      type: 'interface',
+      code: `
+interface ILink {
+  key: string // 锚点的key值
+  link: string // 导航的hash值
+  title: string // 锚点标题
+  children: ILink[] // 子锚点
+}`
+    }
+  ]
+}

examples/react-docs/demos/apis/badge.js

@@ -0,0 +1,209 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'badge',
+      type: 'component',
+      props: [
+        {
+          name: 'badge-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义标记的类名',
+            'en-US': 'Class name for custom tags'
+          },
+          mode: ['pc'],
+          pcDemo: 'badge-class'
+        },
+        {
+          name: 'data',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '文本内容',
+            'en-US': 'Set Text Content'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'hidden',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否隐藏标记',
+            'en-US': 'Whether to hide badge'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'dynamic-hidden',
+          mobileDemo: 'hidden',
+          mfDemo: ''
+        },
+        {
+          name: 'href',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '指定跳转的目标页面地址',
+            'en-US': 'Specify the URL of the target page.'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'link',
+          mobileDemo: 'href-target',
+          mfDemo: ''
+        },
+        {
+          name: 'is-dot',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否以小圆点的形式来显示标记',
+            'en-US': 'Set whether to display the badge in the form of small dots'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'is-dot',
+          mobileDemo: 'is-dot',
+          mfDemo: ''
+        },
+        {
+          name: 'is-mini',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>设置小尺寸，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'is-mini'
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              "指定徽章显示的最大值，如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
+            'en-US':
+              'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'max',
+          mobileDemo: 'is-mini',
+          mfDemo: ''
+        },
+        {
+          name: 'offset',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置标记位置的偏移量',
+            'en-US': 'Set the offset of the marker position, see demo for details'
+          },
+          mode: ['pc'],
+          pcDemo: 'offset'
+        },
+        {
+          name: 'show-Left',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置是否向左展示，仅对圆点生效。',
+            'en-US': 'Indicates whether to display the dots to the left. This parameter is valid only for dots.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'type-left'
+        },
+        {
+          name: 'target',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
+            'en-US':
+              'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'link',
+          mobileDemo: 'href-target',
+          mfDemo: ''
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IPtype',
+          type: 'IPtype',
+          defaultValue: "'danger'",
+          desc: {
+            'zh-CN': '标记的类型',
+            'en-US': 'Set the type of badge'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'type',
+          mfDemo: ''
+        },
+        {
+          name: 'v-model',
+          type: 'String / Number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'value',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '相关数据条目数',
+            'en-US': 'Set the number of related data entries'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'content',
+          mfDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'content',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '消息提示内容',
+            'en-US': 'Message Content'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'slot-content',
+          mobileDemo: 'content',
+          mfDemo: ''
+        },
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
+            'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'slot-default',
+          mobileDemo: 'content',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IPtype',
+      type: 'type',
+      code: `type IPtype = 'primary' | 'success' | 'warning' | 'danger' | 'info'`
+    }
+  ]
+}

examples/react-docs/demos/apis/breadcrumb.js

@@ -0,0 +1,194 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'breadcrumb',
+      type: 'component',
+      props: [
+        {
+          name: 'options',
+          typeAnchorName: 'IOptionsItem',
+          type: 'IOptionsItem[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '单独使用 Breadcrumb，通过 option 配置生成面包屑',
+            'en-US': 'Use Breadcrumb alone to generate bread crumbs through option configuration'
+          },
+          mode: ['pc'],
+          pcDemo: 'options'
+        },
+        {
+          name: 'separator',
+          type: 'string',
+          defaultValue: '>',
+          desc: {
+            'zh-CN': '分隔符',
+            'en-US': 'Separator'
+          },
+          mode: ['pc'],
+          pcDemo: 'separator'
+        },
+        {
+          name: 'separator-icon',
+          type: 'vueComponent',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图标分隔符',
+            'en-US': 'Icon separator'
+          },
+          mode: ['pc'],
+          pcDemo: 'separator'
+        },
+        {
+          name: 'size',
+          type: 'string',
+          defaultValue: "'medium'",
+          desc: {
+            'zh-CN': '设置面包屑尺寸大小',
+            'en-US': 'Set breadcrumb size'
+          },
+          mode: ['pc'],
+          pcDemo: 'size'
+        },
+        {
+          name: 'text-field',
+          type: 'string',
+          defaultValue: 'label',
+          desc: {
+            'zh-CN': '指定面包屑的显示键值，结合 options 使用',
+            'en-US': 'Specify the display key value for bread crumbs, used in conjunction with options'
+          },
+          mode: ['pc'],
+          pcDemo: 'options'
+        }
+      ],
+      events: [
+        {
+          name: 'select',
+          typeAnchorName: 'ISelectValue',
+          type: '(value: ISelectValue) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击 BreadcrumbItem 时触发',
+            'en-US': 'This event is triggered when BreadcrumbItem is clicked.'
+          },
+          mode: ['pc'],
+          pcDemo: 'options'
+        }
+      ],
+      methods: [],
+      slots: []
+    },
+    {
+      name: 'breadcrumb-item',
+      type: 'component',
+      props: [
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义面包屑的显示文本',
+            'en-US': 'Define the breadcrumb display text'
+          },
+          mode: ['pc'],
+          pcDemo: 'base'
+        },
+        {
+          name: 'replace',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '在使用 to 进行路由跳转时，启用 replace 将不会向 浏览器历史记录 history 里添加新记录',
+            'en-US': 'When using to for routing jump, enabling replace will not add new records to the browser history'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-default'
+        },
+        {
+          name: 'size',
+          type: 'string',
+          defaultValue: "'medium'",
+          desc: {
+            'zh-CN': '设置面包屑尺寸大小',
+            'en-US': 'Set breadcrumb size'
+          },
+          mode: ['pc'],
+          pcDemo: 'size'
+        },
+        {
+          name: 'to',
+          typeAnchorName: 'IOptionsItemTo',
+          type: 'string | IOptionsItemTo',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '路由跳转对象，同 vue-router 的 to',
+            'en-US': 'Route redirection object, which is the same as to of vue-router'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-default'
+        }
+      ],
+      events: [
+        {
+          name: 'select',
+          typeAnchorName: 'ISelectValue',
+          type: '(value: ISelectValue) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击 BreadcrumbItem 时触发',
+            'en-US': 'This event is triggered when BreadcrumbItem is clicked.'
+          },
+          mode: ['pc'],
+          pcDemo: 'base'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-default'
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IOptionsItemTo',
+      type: 'interface',
+      code: `
+interface IOptionsItemTo {
+  path: string
+}`
+    },
+    {
+      name: 'IOptionsItem',
+      type: 'interface',
+      code: `
+interface IOptionsItem {
+  label?: string
+  to?: IOptionsItemTo
+  replace?: boolean
+  [customProp: string]: string
+}`
+    },
+    {
+      name: 'ISelectValue',
+      type: 'interface',
+      code: `
+interface ISelectValue {
+  event: Event
+  link: HTMLElement
+  option: IOptionsItem
+  replace: boolean
+  to?: IOptionsItemTo
+}`
+    }
+  ]
+}

examples/react-docs/demos/apis/button.js

@@ -0,0 +1,245 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'button',
+      type: 'component',
+      props: [
+        {
+          name: 'autofocus',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否默认聚焦',
+            'en-US': 'Whether to focus by default'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'autofocus',
+          mfDemo: ''
+        },
+        {
+          name: 'banner',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置通栏按钮',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'circle',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否圆形按钮',
+            'en-US': 'Round button'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'custom-class',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置 custom-class 属性定制按钮样式',
+            'en-US': 'Set the custom-class attribute to customize the button style'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'button-class'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否被禁用按钮',
+            'en-US': 'Sets whether the button is disabled'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'dynamic-disabled',
+          mobileDemo: 'disabled',
+          mfDemo: ''
+        },
+        {
+          name: 'ghost',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否幽灵按钮',
+            'en-US': 'Is ghost button'
+          },
+          mode: ['pc'],
+          pcDemo: 'ghost'
+        },
+        {
+          name: 'href',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '通过设置 href 属性可跳转到指定页面',
+            'en-US': 'Set the href attribute to jump to a specified page'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'link'
+        },
+        {
+          name: 'icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮左侧展示的图标，接收为Icon组件',
+            'en-US': 'The icon displayed by the button is received as an Icon component'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'icon',
+          mobileDemo: 'icon',
+          mfDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否加载中状态',
+            'en-US': 'Loading status'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'loading',
+          mobileDemo: 'loading',
+          mfDemo: ''
+        },
+        {
+          name: 'native-type',
+          type: "'button' | 'submit' | 'reset'",
+          defaultValue: "'button'",
+          desc: {
+            'zh-CN': '对应按钮原生 type 属性',
+            'en-US': 'Set the button native type attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'plain',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否朴素按钮',
+            'en-US': 'Simple button'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'reset-time',
+          type: 'number',
+          defaultValue: '1000',
+          desc: {
+            'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
+            'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'reset-time',
+          mobileDemo: 'reset-time',
+          mfDemo: ''
+        },
+        {
+          name: 'round',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否圆角按钮',
+            'en-US': 'Whether to round the corner button'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'size',
+          type: "'large' | 'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义按钮尺寸',
+            'en-US': 'Define the button size'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'size',
+          mobileDemo: 'size',
+          mfDemo: ''
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮显示的文本',
+            'en-US': 'Set the text displayed by the button'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'text',
+          mobileDemo: 'base',
+          mfDemo: ''
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IButtonType',
+          type: 'IButtonType',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
+            'en-US': 'Display different states of buttons, set to text to display as text buttons'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'base',
+          mfDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: '(event: PointEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当按钮被点击时触发的回调函数',
+            'en-US': 'Sets the callback function triggered when a button is clicked'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'click',
+          mobileDemo: 'event',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽，自定义按钮展示内容',
+            'en-US': 'Default slot'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'image',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IButtonType',
+      type: 'interface',
+      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+    }
+  ]
+}

examples/react-docs/demos/apis/chart.js

@@ -0,0 +1,285 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
+        {
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/question#question-base'
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/question#question-base'
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart'
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart-events'
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'IChartProps',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart'
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/attributes-demo#props-demo10'
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/attributes-demo#props-demo10'
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart-events'
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/attributes-demo#props-demo10'
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/attributes-demo#props-demo10'
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/question#question-base'
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart#base'
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart#base'
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/attributes-demo#props-demo10'
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/attributes-demo#props-demo10'
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/question#question-base'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'IChartProps',
+      type: 'interface',
+      code: `
+interface IChartProps {
+  afterConfig: () => void 
+  afterSetOption: () => void 
+  afterSetOptionOnce: () => void 
+  animation: object
+  axisPointer: object | array
+  backgroundColor: object | string
+  beforeConfig: () => void 
+  brush: object | array
+  cancelResizeCheck: boolean
+  changeDelay: number // 默认值 0 
+  colorMode: string
+  colors: array 
+  data: object | array
+  dataEmpty: boolean
+  dataZoom: object | array
+  events: object 
+  extend: object
+  geo: object | array
+  graphic: object | array
+  grid: object | array
+  height: string // 默认值 '400px' 
+  initOptions: object
+  judgeWidth: boolean // 默认值 false 
+  legend: object | array
+  legendPosition: string 
+  legendVisible: boolean // 默认值 true 
+  loading: boolean
+  markArea: object 
+  markLine: object 
+  markPoint: object 
+  notSetUnchange: array
+  radar: object
+  resizeDelay: number // 默认值 200 
+  resizeable: boolean // 默认值 true 
+  series: object | array
+  setOptionOpts: boolean | object // 默认值 true 
+  settings: object
+  textStyle: object | array
+  theme: object
+  themeName: object | string
+  timeline: object | array
+  title: object | array
+  toolbox: object | array
+  tooltip: object
+  tooltipFormatter: () => void 
+  tooltipVisible: boolean // 默认值 true 
+  visualMap: object | array 
+  width: string // 默认值 'auto' 
+  widthChangeDelay: number // 默认值 300 
+  xAxis: object | array
+  yAxis: object | array
+}`
+    },
+    {
+      name: 'IChartSettings',
+      type: 'interface',
+      code: `
+interface IChartSettings {
+  type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
+}`
+    }
+  ]
+}

examples/react-docs/demos/apis/divider.js

@@ -0,0 +1,93 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'divider',
+      type: 'component',
+      props: [
+        {
+          name: 'border-style',
+          type: 'string',
+          defaultValue: "'solid'",
+          desc: {
+            'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed',
+            'en-US': 'Set the style of the separator line, with optional values of solid/dashed for this property'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-style'
+        },
+        {
+          name: 'color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置分隔线的颜色',
+            'en-US': 'Set the color of the divider.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-style'
+        },
+        {
+          name: 'content-background-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置分割线文案的背景颜色',
+            'en-US': 'Set the background color of the divider content'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-style'
+        },
+        {
+          name: 'content-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置分隔线文案的颜色',
+            'en-US': 'Set the color of the divider content'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-style'
+        },
+        {
+          name: 'content-position',
+          type: 'string',
+          defaultValue: "'center'",
+          desc: {
+            'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right',
+            'en-US':
+              'Set the position of the separator text, with optional values of left/center/right for this attribute'
+          },
+          mode: ['pc'],
+          pcDemo: 'content-position'
+        },
+        {
+          name: 'direction',
+          type: 'string',
+          defaultValue: "'horizontal'",
+          desc: {
+            'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical',
+            'en-US':
+              'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical"'
+          },
+          mode: ['pc'],
+          pcDemo: 'direction'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'content-position'
+        }
+      ]
+    }
+  ]
+}

examples/react-docs/demos/apis/drawer.js

@@ -0,0 +1,295 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'drawer',
+      type: 'component',
+      props: [
+        {
+          name: 'before-close',
+          type: '(type) => boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '弹窗关闭前的回调，返回 false 会阻止弹窗关闭',
+            'en-US': 'hook before close the drawer, and block close when return false'
+          },
+          mode: ['pc'],
+          pcDemo: 'before-close'
+        },
+        {
+          name: 'custom-class',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义 class 样式',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'dragable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '控制抽屉开启或关闭宽度拖拽功能',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'dragable',
+          mfDemo: ''
+        },
+        {
+          name: 'flex',
+          type: 'Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否开启 flex 盒子布局，开启后内容区域元素自适应撑开高度，默认值为 false',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'lock-scroll',
+          type: 'Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '弹出面板是否锁定浏览器滚动条，默认值为 true',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'mask',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '控制遮罩层显示隐藏 ',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'mask',
+          mfDemo: ''
+        },
+        {
+          name: 'mask-closable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 mask-closable 为 false 后将禁用该功能',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'mask-closable',
+          mfDemo: ''
+        },
+        {
+          name: 'placement',
+          type: "'left' | 'right' | 'top' | 'bottom' ",
+          defaultValue: "'right'",
+          desc: {
+            'zh-CN': '添加 placement 属性设置抽屉的方向',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'placement',
+          mfDemo: ''
+        },
+        {
+          name: 'show-close',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '控制关闭图标显示',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'show-close'
+        },
+        {
+          name: 'show-footer',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '控制底部显示',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'show-footer',
+          mfDemo: ''
+        },
+        {
+          name: 'show-header',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '控制头部显示',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'show-header',
+          mfDemo: ''
+        },
+        {
+          name: 'title',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '面板标题',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'visible',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '控制抽屉显示与关闭',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'500px'",
+          desc: {
+            'zh-CN': '设置抽屉的宽度',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'width',
+          mfDemo: ''
+        },
+        {
+          name: 'z-index',
+          type: 'number',
+          defaultValue: '2000',
+          desc: {
+            'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'z-index'
+        }
+      ],
+      events: [
+        {
+          name: 'close',
+          type: '()=> void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭抽屉事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'close-event',
+          mfDemo: ''
+        },
+        {
+          name: 'confirm',
+          type: '()=> void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'confirm-event',
+          mfDemo: ''
+        },
+        {
+          name: 'update:visible',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '面板显隐时触发',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        }
+      ],
+      methods: [
+        {
+          name: 'close',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭面板',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'confirm',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '确认并关闭面板',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        }
+      ],
+      slots: [
+        {
+          name: 'default',
+          type: '--',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'default-slot',
+          mfDemo: ''
+        },
+        {
+          name: 'footer',
+          type: '--',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '底部插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'footer-slot',
+          mfDemo: ''
+        },
+        {
+          name: 'header',
+          type: '--',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '头部插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'header-slot',
+          mfDemo: ''
+        },
+        {
+          name: 'header-right',
+          type: '--',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '头部右侧插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'header-right-slot',
+          mfDemo: ''
+        }
+      ]
+    }
+  ]
+}

examples/react-docs/demos/apis/float-button.js

@@ -0,0 +1,211 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      'name': 'button',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'type',
+          'type': 'IButtonType',
+          'typeAnchorName': 'IButtonType',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
+            'en-US': 'Display different states of buttons, set to text to display as text buttons'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'description',
+          'type': 'string',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '按钮显示的文本',
+            'en-US': 'Set the text displayed by the button'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'icon',
+          'type': 'Component',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '按钮展示的图标，接收为Icon组件',
+            'en-US': 'The icon displayed by the button is received as an Icon component'
+          },
+          mode: ['pc'],
+          pcDemo: 'icon'
+        },
+        {
+          'name': 'reset-time',
+          'type': 'number',
+          'defaultValue': '1000',
+          'desc': {
+            'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
+            'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
+          },
+          mode: ['pc'],
+          pcDemo: 'reset-time'
+        },
+        {
+          'name': 'trigger',
+          'type': 'string',
+          'defaultValue': 'click',
+          'desc': {
+            'zh-CN': '设置菜单触发模式。',
+            'en-US': 'Set the menu trigger mode.'
+          },
+          mode: ['pc'],
+          pcDemo: 'trigger'
+        },
+        {
+          'name': 'open',
+          'type': 'boolean',
+          'defaultValue': false,
+          'desc': {
+            'zh-CN': '设置菜单是否打开。',
+            'en-US': 'Whether the settings menu opens.'
+          },
+          mode: ['pc'],
+          pcDemo: 'trigger'
+        },
+        {
+          'name': 'shape',
+          'type': "'circle'|'square'",
+          'defaultValue': 'circle',
+          'desc': {
+            'zh-CN': '设置按钮形状。',
+            'en-US': 'Set Button shape.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'backTop',
+          'type': 'boolean',
+          'defaultValue': false,
+          'desc': {
+            'zh-CN': '设置是否是回到顶部按钮。',
+            'en-US': 'Set whether it is a back-to-top button.'
+          },
+          mode: ['pc'],
+          pcDemo: 'backTop'
+        },
+
+        {
+          'name': 'element',
+          'type': 'HTMLElement',
+          'defaultValue': 'document.body',
+          'desc': {
+            'zh-CN': '当backTop设置为true时，此属性设置滚动元素。',
+            'en-US': 'When backTop is set to true, this property sets the scrolling element.'
+          },
+          mode: ['pc'],
+          pcDemo: 'backTop'
+        },
+        {
+          'name': 'top',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '按钮与顶部的距离。',
+            'en-US': 'The distance of the button from the top.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'bottom',
+          'type': 'string',
+          'defaultValue': '20px',
+          'desc': {
+            'zh-CN': '按钮与底部的距离。',
+            'en-US': 'The distance of the button from the bottom.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'left',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '按钮与左边的距离。',
+            'en-US': 'The distance of the button from the left.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'right',
+          'type': 'string',
+          'defaultValue': '20px',
+          'desc': {
+            'zh-CN': '按钮与右边的距离。',
+            'en-US': 'The distance of the button from the right.'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          'name': 'href',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '按钮点击后跳转的页面。',
+            'en-US': 'button to jump to the page.'
+          },
+          mode: ['pc'],
+          pcDemo: 'jump'
+        },
+        {
+          'name': 'target',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '相当于<code>a</code> 标签的 <code>target</code> 属性，<code>href</code> 存在时生效。',
+            'en-US': 'The target attribute equivalent to the A tag, which takes effect when the href exists.'
+          },
+          mode: ['pc'],
+          pcDemo: 'jump'
+        }
+      ],
+      'events': [
+        {
+          'name': 'click',
+          'type': '(event: PointEvent) => void',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '当按钮被点击时触发的回调函数',
+            'en-US': 'Sets the callback function triggered when a button is clicked'
+          },
+          mode: ['pc'],
+          pcDemo: 'click'
+        }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '默认插槽，自定义按钮展开时的内容',
+            'en-US': 'Default slot, customize what the button is when expanded'
+          },
+          mode: ['pc'],
+          pcDemo: 'open'
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IButtonType',
+      type: 'interface',
+      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+    }
+  ]
+}

examples/react-docs/demos/apis/guide.js

@@ -0,0 +1,202 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'guide',
+      type: 'component',
+      props: [
+        {
+          name: 'alignment-axis',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '设置引导框对齐轴距离',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'offset'
+        },
+        {
+          name: 'arrow',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示工具提示的箭头',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'cross-axis',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '设置引导框横轴距离',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'offset'
+        },
+        {
+          name: 'dom-data',
+          typeAnchorName: 'IDomData',
+          type: 'IDomData[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '用户引导参数',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'height',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置引导框高度',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'size'
+        },
+        {
+          name: 'light-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当元素突出显示时（即，当其步骤处于活动状态时）应用于元素的类名',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'main-axis',
+          type: 'number',
+          defaultValue: '18',
+          desc: {
+            'zh-CN': '设置引导框主轴（纵轴）距离',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'offset'
+        },
+        {
+          name: 'modal-overlay-opening-padding',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '在模态叠加层开口周围添加的填充量',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'modal-overlay-opening'
+        },
+        {
+          name: 'modal-overlay-opening-radius',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '在模态叠加层开口周围添加的边界半径量',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'modal-overlay-opening'
+        },
+        {
+          name: 'pop-position',
+          typeAnchorName: 'IPosition',
+          type: 'IPosition',
+          defaultValue: "'bottom'",
+          desc: {
+            'zh-CN': '引导框箭头位置，该属性的可选值可参考 IPosition 类型',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'arrow-position'
+        },
+        {
+          name: 'width',
+          type: 'number',
+          defaultValue: '510',
+          desc: {
+            'zh-CN': '设置引导框宽度',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'size'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'main',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置引导框内容',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'highlight-box'
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IDomData',
+      type: 'interface',
+      code: `
+interface IDomData {
+  // 指引的标题
+  title: string
+  // 指引的内容（可以是 html）
+  text: string
+  // 需要绑定指引的元素类名（只能是类名，若未传入则显示为上下左右居中且无指示箭头）
+  domElement: string
+  // 添加需要高亮的元素的类名
+  hightBox: string[]
+  // 要添加到步骤的内容元素的一串类名
+  classes: string
+
+  // 展示前的回调函数
+  beforeShow: () => void
+  // 隐藏前的回调函数
+  beforeHide: () => void
+  // 显示的回调函数
+  show: () => void
+  // 隐藏的回调函数
+  hide: () => void
+  // 关闭的回调函数
+  cancel: () => void
+  //销毁的回调函数
+  destroy: () => void
+  // 完成的回调函数
+  completey: () => void
+
+  // 需要设置的按钮组
+  button: {
+    // 按钮名
+    text: string
+    // 需要执行的步骤，包含 next(下一步)、back(返回)、complete(完成)
+    action: 'next' | 'back' | 'complete'
+    // 按钮的类名
+    classes: string
+    // 是否是次要按钮
+    secondary: boolean
+  }[]
+}
+      `
+    },
+    {
+      name: 'IPosition',
+      type: 'type',
+      code: `
+type IPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
+    }
+  ]
+}

examples/react-docs/demos/apis/progress.js

@@ -0,0 +1,166 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'progress',
+      type: 'component',
+      props: [
+        {
+          name: 'color',
+          typeAnchorName: 'IColorItem',
+          type: 'string | IColorItem[] | (percentage: string) => string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '进度条背景色（会覆盖 status 状态颜色）',
+            'en-US': 'Background color of the progress bar (overwrites the status color)'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'custom-color',
+          mobileDemo: 'custom-color',
+          mfDemo: ''
+        },
+        {
+          name: 'format',
+          type: '() => string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义进度条的文字',
+            'en-US': 'Customize the text of the progress bar'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'format-text',
+          mfDemo: ''
+        },
+        {
+          name: 'info',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '环形进度条底部描述文字',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'percentage',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '百分比（必填）；该属性的可选值为 0-100',
+            'en-US': 'Percentage (mandatory) The optional values for this property are 0 - 100'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'dynamic-progress',
+          mfDemo: ''
+        },
+        {
+          name: 'show-text',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示进度条文字内容',
+            'en-US': 'Display progress bar text'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'format-text',
+          mobileDemo: 'text-inside-or-no-text',
+          mfDemo: ''
+        },
+        {
+          name: 'size',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '进度条尺寸',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'status',
+          type: "'success' | 'exception' | 'warning'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '进度条当前状态',
+            'en-US': 'Current status of the progress bar'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'progress-status',
+          mobileDemo: 'progress-status',
+          mfDemo: ''
+        },
+        {
+          name: 'stroke-width',
+          type: 'number',
+          defaultValue: '6',
+          desc: {
+            'zh-CN': 'line 类型进度条的宽度，单位 px',
+            'en-US': 'The width of the progress bar of type line, in px'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'progress-width',
+          mfDemo: ''
+        },
+        {
+          name: 'text-inside',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '进度条显示文字内置在进度条内（只在 type=line 时可用）',
+            'en-US':
+              'The text displayed on the progress bar is embedded in the progress bar. This parameter is available only when type is set to line'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'format-text',
+          mobileDemo: 'format-text',
+          mfDemo: ''
+        },
+        {
+          name: 'type',
+          type: "'line' | 'circle' | 'dashboard'",
+          defaultValue: "'line'",
+          desc: {
+            'zh-CN': '进度条类型',
+            'en-US': 'Progress bar type'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'progress-type-circle',
+          mobileDemo: 'progress-type',
+          mfDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'number',
+          defaultValue: '126',
+          desc: {
+            'zh-CN': '环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）',
+            'en-US': 'Circular progress bar canvas width (available only when type is circle or dashboard)'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'progress-type-circle',
+          mobileDemo: 'width',
+          mfDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'IColorItem',
+      type: 'type',
+      code: `
+interface IColorItem {
+  color: string
+  percentage: number
+}
+`
+    }
+  ]
+}

examples/react-docs/demos/apis/qrcode.js

@@ -0,0 +1,102 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'qr-code',
+      type: 'component',
+      props: [
+        {
+          name: 'bordered',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否有边框',
+            'en-US': 'Whether has border style'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color',
+          type: 'string',
+          defaultValue: "'#000'",
+          desc: {
+            'zh-CN': '二维码颜色, 仅支持十六进制',
+            'en-US': 'QRCode Color'
+          },
+          mode: ['pc'],
+          pcDemo: 'style'
+        },
+        {
+          name: 'icon',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '二维码中图片的地址（目前只支持图片地址）',
+            'en-US': 'include image url (only image link are supported)'
+          },
+          mode: ['pc'],
+          pcDemo: 'icon'
+        },
+        {
+          name: 'icon-size',
+          type: 'number',
+          defaultValue: '50',
+          desc: {
+            'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过二维码面积的 30%， 否则影响扫码',
+            'en-US': 'include image size，no more than 30%'
+          },
+          mode: ['pc'],
+          pcDemo: 'icon'
+        },
+        {
+          name: 'level',
+          type: 'string',
+          defaultValue: "'Medium'",
+          desc: {
+            'zh-CN': "二维码纠错等级, 可选 'Low' | 'Medium' | 'Quality' | 'High'",
+            'en-US': 'Error Code Level'
+          },
+          mode: ['pc'],
+          pcDemo: 'level'
+        },
+        {
+          name: 'size',
+          type: 'number',
+          defaultValue: '200',
+          desc: {
+            'zh-CN': '二维码大小',
+            'en-US': 'QRCode size'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'value',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '扫描后的文本',
+            'en-US': 'scanned text'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '()=> void',
+          desc: {
+            'zh-CN': '二维码发生变化后的回调',
+            'en-US': 'chang callback'
+          },
+          mode: ['pc'],
+          pcDemo: 'level'
+        }
+      ],
+      methods: [],
+      slots: []
+    }
+  ]
+}

examples/react-docs/demos/apis/skeleton.js

@@ -0,0 +1,142 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'skeleton',
+      type: 'component',
+      props: [
+        {
+          name: 'active',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否开启动画',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'fine-grained-mode'
+        },
+        {
+          name: 'avatar',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示头像',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'complex-demo'
+        },
+        {
+          name: 'loading',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示骨架屏，传 false 时会展示加载完成后的内容',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-layout'
+        },
+        {
+          name: 'rows',
+          type: 'number',
+          defaultValue: '3',
+          desc: {
+            'zh-CN': '默认排版，可配置段落显示行数',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-rows'
+        },
+        {
+          name: 'rows-width',
+          type: 'number[] | string[]',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '自定义段落每一行的宽度',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-paragraph-width'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '加载完成后显示的内容',
+            'en-US': 'Option default slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-layout'
+        },
+        {
+          name: 'placeholder',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义骨架屏结构',
+            'en-US': 'Option default slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-layout'
+        }
+      ]
+    },
+    {
+      name: 'skeleton-item',
+      type: 'component',
+      props: [
+        {
+          name: 'size',
+          typeAnchorName: 'ISize',
+          type: 'ISize',
+          defaultValue: 'medium',
+          desc: {
+            'zh-CN': '针对 image 和 circle 形态，内置三种大小',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'fine-grained-mode'
+        },
+        {
+          name: 'variant',
+          typeAnchorName: 'IVariant',
+          type: 'IVariant',
+          defaultValue: 'square',
+          desc: {
+            'zh-CN': '骨架屏形态',
+            'en-US':
+              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+          },
+          mode: ['pc'],
+          pcDemo: 'fine-grained-mode'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'IVariant',
+      type: 'type',
+      code: `type IVariant = 'image' | 'circle' | 'square'`
+    },
+    {
+      name: 'ISize',
+      type: 'type',
+      code: `type ISize = 'large' | 'medium' | 'small'`
+    }
+  ]
+}

examples/react-docs/demos/apis/switch.js

@@ -0,0 +1,182 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'switch',
+      type: 'component',
+      props: [
+        {
+          name: 'before-change',
+          type: '(done: () => void) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '开关值变化前置处理',
+            'en-US': 'Pre processing of switch value changes'
+          },
+          mode: ['pc'],
+          pcDemo: 'before-change'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'dynamic-disable',
+          mobileDemo: 'disabled',
+          mfDemo: ''
+        },
+        {
+          name: 'false-value',
+          type: 'boolean | string | number',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'switch 关闭时的值',
+            'en-US': 'Value when switch is disabled'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'custom-true-false-value',
+          mobileDemo: 'base',
+          mfDemo: ''
+        },
+        {
+          name: 'mini',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置是否显示为 mini 模式，mini 模式下不会显示 slot 的内容',
+            'en-US': 'Sets whether to display in mini mode. In mini mode, the content of the slot is not displayed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'mini-mode',
+          mobileDemo: 'mini',
+          mfDemo: ''
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'boolean | string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '开关绑定值',
+            'en-US': 'Switch bind value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'show-text',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'switch 是否显示内容里面的文字',
+            'en-US': 'Switch whether to display the text in the content'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close'
+        },
+        {
+          name: 'size',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义开关尺寸',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'true-value',
+          type: 'boolean | string | number',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'switch 打开时的值',
+            'en-US': 'Value when switch is enabled'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'custom-true-false-value',
+          mobileDemo: 'base',
+          mfDemo: ''
+        },
+        {
+          name: 'types',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '展示开关不同的状态',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'v-model',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>绑定值</p>',
+            'en-US': 'display different button'
+          },
+          mode: ['mobile', 'mobile-first'],
+          mobileDemo: 'base',
+          mfDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'change',
+          type: '(value: boolean | string | number) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'switch 状态发生变化时的回调函数',
+            'en-US': 'Callback function for switch changes'
+          },
+          mode: ['pc', 'mobile'],
+          pcDemo: 'event-change',
+          mobileDemo: 'event'
+        },
+        {
+          name: 'enent',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'switch发生变化的回调函数',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'close',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭内容，当 show-text 为 true 时有效',
+            'en-US': 'Close Content'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-open-close',
+          mfDemo: ''
+        },
+        {
+          name: 'open',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '开启内容，当 show-text 为 true 时有效',
+            'en-US': 'Enable Content'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-open-close',
+          mfDemo: ''
+        }
+      ]
+    }
+  ]
+}

examples/react-docs/demos/apis/tag.js

@@ -0,0 +1,263 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'tag',
+      type: 'component',
+      props: [
+        {
+          name: 'before-delete',
+          type: '(close: () => void) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '删除前回调函数',
+            'en-US': 'Delete callback function before deletion'
+          },
+          mode: ['pc'],
+          pcDemo: 'delete'
+        },
+        {
+          name: 'closable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可关闭',
+            'en-US': 'Can be disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'delete',
+          mfDemo: ''
+        },
+        {
+          name: 'color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '背景色：rgb,rgba,hex 三种格式',
+            'en-US': 'Background color: The value can be in rgb, rgba, or hex format'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'color3',
+          mobileDemo: 'different-color',
+          mfDemo: ''
+        },
+        {
+          name: 'custom-class',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签class',
+            'en-US': 'Tag class'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Whether to disable'
+          },
+          mode: ['pc'],
+          pcDemo: 'disabled'
+        },
+        {
+          name: 'effect',
+          typeAnchorName: 'IEffect',
+          type: 'IEffect',
+          defaultValue: "'light'",
+          desc: {
+            'zh-CN': '主题',
+            'en-US': 'Subject'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'effect',
+          mfDemo: ''
+        },
+        {
+          name: 'hit',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否有边框',
+            'en-US': 'Whether there is a border stroke'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'color3',
+          mfDemo: ''
+        },
+        {
+          name: 'max-width',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '最大宽度',
+            'en-US': 'max width'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'max-width'
+        },
+        {
+          name: 'mini',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '小尺寸',
+            'en-US': 'mini'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'mini'
+        },
+        {
+          name: 'operable',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否可操作',
+            'en-US': 'Operable or Not'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'selectable',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否可选择',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'size',
+          typeAnchorName: 'ISize',
+          type: 'ISize',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '尺寸',
+            'en-US': 'Size'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '文字',
+            'en-US': 'Text'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'basic-usage'
+        },
+        {
+          name: 'theme',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
+            'en-US': 'Color label. The value can be pink, purple, or cyan.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'colorful-tag'
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IType',
+          type: 'IType',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示类型',
+            'en-US': 'Display type'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'effect',
+          mfDemo: 'effect'
+        },
+        {
+          name: 'value',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置式标签，自定义标签内容【3.9.1新增】',
+            'en-US': 'Configurable labels, custom label content [Added in 3.9.1]'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'content',
+          mfDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: '(event: Event) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击标签时触发的事件',
+            'en-US': 'Event triggered when clicking on Tag'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-event-click',
+          mfDemo: ''
+        },
+        {
+          name: 'close',
+          type: '(event: Event)) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击关闭按钮时触发的事件',
+            'en-US': 'Event triggered when the close button is clicked'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'delete',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签内容',
+            'en-US': 'Label Content'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'slot-default',
+          mobileDemo: 'slot-default',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IEffect',
+      type: 'type',
+      code: `
+type IEffect = 'dark' | 'light' | 'plain'
+`
+    },
+    {
+      name: 'ISize',
+      type: 'type',
+      code: `
+type ISize = 'medium' | 'small' | 'mini' | ''
+`
+    },
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'success' | 'info' | 'mini' | 'warning' | 'danger'
+`
+    }
+  ]
+}

examples/react-docs/demos/apis/time-line.js

@@ -0,0 +1,367 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'time-line',
+      type: 'component',
+      props: [
+        {
+          name: 'active',
+          type: 'number',
+          defaultValue: '-1',
+          desc: {
+            'zh-CN': '当前节点索引，从0开始计数',
+            'en-US': 'Current node index and count from 0'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'auto-color-field',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示组件二级标题内容，默认值为 autoColor',
+            'en-US': 'Displays the level-2 title of the component. The default value is autoColor.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'data',
+          typeAnchorName: 'ITimelineItem',
+          type: 'ITimelineItem',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '节点数据',
+            'en-US': 'Nodes data'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'fold-disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '禁用折叠',
+            'en-US': 'to disable folding feature'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'horizontal',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否水平方向',
+            'en-US': 'Whether horizontal constructure'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'limited-nodes',
+          type: 'number | string',
+          defaultValue: '3',
+          desc: {
+            'zh-CN': '折叠后展示的节点个数',
+            'en-US': 'number of nodes displayed after folding'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'limited-nodes'
+        },
+        {
+          name: 'line-width',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': "连接线长度，仅当 text-position 取值为 'right' 时生效，设置后 space 属性失效",
+            'en-US':
+              "The length of the connection line and it is valid only when text-position is set to 'right'. After setting, the space property is invalid"
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'name-field',
+          type: 'string',
+          defaultValue: "'name'",
+          desc: {
+            'zh-CN': '节点名称对应的字段名',
+            'en-US': 'Set the field name in the node information.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-field',
+          mfDemo: ''
+        },
+        {
+          name: 'node-max',
+          type: 'number | string',
+          defaultValue: '7',
+          desc: {
+            'zh-CN': '最大显示节点数',
+            'en-US': 'maximum nodes to display'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'node-max'
+        },
+        {
+          name: 'only-number',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '节点序号是否只显示数字，适用于横向时间线',
+            'en-US': 'Whether the node sequence number only displays numbers, used for horizontal timeline'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'reverse',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否逆序排列节点，仅用于竖式时间线',
+            'en-US': 'Whether the node in reverse order and only for vertical timeline'
+          },
+          mode: ['pc'],
+          pcDemo: 'vertical-timeline'
+        },
+        {
+          name: 'shape',
+          type: 'string',
+          defaultValue: "'circle'",
+          desc: {
+            'zh-CN': "圆点外形: 空心圆形或实心圆点，取值分别对应 'circle' | 'dot'",
+            'en-US': "Set the appearance of point, optional values include 'circle' and 'dot'"
+          },
+          mode: ['pc'],
+          pcDemo: 'shape'
+        },
+        {
+          name: 'show-divider',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示底部分割线，适用于横向时间线',
+            'en-US': 'Whether to display the bottom separator line of horizontal timeline'
+          },
+          mode: ['pc'],
+          pcDemo: 'show-divider'
+        },
+        {
+          name: 'show-number',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '未完成状态的节点是否显示序号',
+            'en-US': 'Whether to display sequence numbers for unfinished states'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'space',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
+            'en-US':
+              'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-node-width',
+          mfDemo: ''
+        },
+        {
+          name: 'start',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '节点序号起始值',
+            'en-US': 'The start step sequence number.'
+          },
+          mode: ['pc'],
+          pcDemo: 'set-start-value'
+        },
+        {
+          name: 'sub-field',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置时间线两侧展示',
+            'en-US': 'Set the display on both sides of the timeline.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'sub-field'
+        },
+        {
+          name: 'time-field',
+          type: 'string',
+          defaultValue: "'time'",
+          desc: {
+            'zh-CN': '节点时间信息对应的字段名',
+            'en-US': 'The name of the field corresponding to the node time information'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-field',
+          mfDemo: ''
+        },
+        {
+          name: 'tips-field',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示组件二级标题内容,默认值为 tips',
+            'en-US': 'Displays the level-2 title of the component. The default value is tips.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'vertical',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否竖直方向',
+            'en-US': 'Vertical direction'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'vertical-timeline',
+          mfDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: '(index: number, node: <a href="#ITimelineItem">ITimelineItem</a>) => void',
+          desc: {
+            'zh-CN': '节点的点击事件，参数：<br />index：点击节点的下标<br /> node： 点击节点数据}',
+            'en-US': 'Click event of a node. arguments:<br />index: click the subscript of a node<br />node: node data'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'bottom',
+          desc: {
+            'zh-CN': '自定义节点底部内容',
+            'en-US': 'Customize bottom content for timeline item'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-horizontal-timeline'
+        },
+        {
+          name: 'description',
+          desc: {
+            'zh-CN': '节点描述信息插槽，适用于横向时间线',
+            'en-US': 'Node description information slot, used for horizontal timeline'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-description'
+        },
+        {
+          name: 'left',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义节点左侧内容',
+            'en-US': 'Customize left content for timeline item'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-vertical-timeline',
+          mfDemo: ''
+        },
+        {
+          name: 'right',
+          desc: {
+            'zh-CN': '自定义节点右侧内容',
+            'en-US': 'Customize right content for timeline item'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-vertical-timeline'
+        },
+        {
+          name: 'top',
+          desc: {
+            'zh-CN': '自定义节点顶部内容',
+            'en-US': 'Customize bottom content for timeline item'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-horizontal-timeline'
+        }
+      ]
+    },
+    {
+      name: 'timeline-item',
+      type: 'component',
+      props: [
+        {
+          name: 'line-width',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效',
+            'en-US':
+              'The length of the connection line and it is valid only when text-position is set to true. After setting, the space property is invalid'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'node',
+          typeAnchorName: 'ITimelineItem',
+          type: 'ITimelineItem',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '节点数据',
+            'en-US': 'Node data'
+          },
+          mode: ['pc'],
+          pcDemo: 'timeline-item'
+        },
+        {
+          name: 'space',
+          type: 'string | number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
+            'en-US':
+              'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'ITimelineItem',
+      type: 'interface',
+      code: `
+interface ITimelineItem {
+  name: string // 节点名称
+  time?: string // 节点时间
+  error?: boolean // 是否异常状态
+  disabled?: boolean // 是否禁用
+  type?: ITimelineItemType // 节点类型
+}
+      `
+    },
+    {
+      name: 'ITimelineItemType',
+      type: 'type',
+      code: `type ITimelineItemType = 'primary' | 'success' | 'warning' | 'error' | 'info'`
+    }
+  ]
+}

examples/react-docs/demos/apis/tooltip.js

@@ -0,0 +1,333 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'tooltip',
+      type: 'component',
+      props: [
+        {
+          name: 'append-to-body',
+          type: 'boolean',
+          defaultValue: ' true',
+          desc: {
+            'zh-CN': '是否将弹出层的元素添加到body上',
+            'en-US': 'Whether to append to body'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'close-delay',
+          type: 'number',
+          defaultValue: '300',
+          desc: {
+            'zh-CN': '延迟关闭的时长，单位毫秒',
+            'en-US': 'Close Delay time, in milliseconds.'
+          },
+          mode: ['pc'],
+          pcDemo: 'delay'
+        },
+        {
+          name: 'content',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示的内容',
+            'en-US': 'Displayed content.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'content',
+          mfDemo: ''
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'Tooltip 是否禁用',
+            'en-US': 'Whether Tooltip is disable'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'control',
+          mfDemo: ''
+        },
+        {
+          name: 'effect',
+          type: "'dark' | 'light'",
+          defaultValue: "'dark'",
+          desc: {
+            'zh-CN': '提示的主题',
+            'en-US': 'Default theme'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'theme',
+          mfDemo: ''
+        },
+        {
+          name: 'enterable',
+          type: 'boolean',
+          defaultValue: ' true',
+          desc: {
+            'zh-CN': '鼠标是否可进入到 tooltip 的弹出层中',
+            'en-US': 'Whether the mouse can enter the pop-up layer of the tooltip'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-popper',
+          mfDemo: ''
+        },
+        {
+          name: 'hide-after',
+          type: 'number',
+          defaultValue: ' 0',
+          desc: {
+            'zh-CN': '出现后自动隐藏的时长，单位毫秒，为 0 则不会自动隐藏',
+            'en-US':
+              'Duration of automatic hiding after appearing, in milliseconds. If 0, it will not be automatically hidden'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'delay',
+          mfDemo: ''
+        },
+        {
+          name: 'manual',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效',
+            'en-US':
+              'Manual control mode. If this parameter is set to true, the mouseenter and mouseleave events do not take effect.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'control',
+          mfDemo: ''
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '配置 manual = true时，控制弹出状态',
+            'en-US': 'If manual is set to true, the pop-up status is controlled'
+          },
+          mode: ['pc'],
+          pcDemo: 'control'
+        },
+        {
+          name: 'offset',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '弹出层出现位置的偏移量',
+            'en-US': 'Offset of the occurrence position'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'offset',
+          mfDemo: ''
+        },
+        {
+          name: 'open-delay',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '延迟出现的时长，单位毫秒',
+            'en-US': 'Open delay time, in milliseconds.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'delay',
+          mfDemo: ''
+        },
+        {
+          name: 'placement',
+          typeAnchorName: 'IPopperPlacement',
+          type: 'IPopperPlacement',
+          defaultValue: "'bottom'",
+          desc: {
+            'zh-CN': 'Tooltip 的出现位置',
+            'en-US': 'Location where the tooltip appears'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '为 Tooltip 的弹出层添加类名',
+            'en-US': 'Add a class name to the pop-up layer of Tooltip'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-popper',
+          mfDemo: ''
+        },
+        {
+          name: 'popper-options',
+          typeAnchorName: 'IPopperOption',
+          type: 'IPopperOption',
+          defaultValue: ' { }',
+          desc: {
+            'zh-CN': '弹出层参数',
+            'en-US': 'Advanced parameters; Refer to the description of IPopperOption'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popper-options',
+          mfDemo: ''
+        },
+        {
+          name: 'pre',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'content 文本是否预格式化',
+            'en-US': 'Indicates whether the content text is preformatted.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'content',
+          mfDemo: ''
+        },
+        {
+          name: 'renderContent',
+          type: '(h: Vue.h, content:string)=> VNode',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义渲染函数,返回需要渲染的节点内容',
+            'en-US': 'A custom rendering function that returns the contents of the node to be rendered'
+          },
+          mode: ['pc'],
+          pcDemo: 'content'
+        },
+        {
+          name: 'tabindex',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置组件的触发源的 tabindex',
+            'en-US': 'Sets the tabindex of the trigger source of the component.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'transition',
+          type: 'string',
+          defaultValue: "'tiny-fade-in-linear'",
+          desc: {
+            'zh-CN': '定义渐变动画的类名',
+            'en-US': 'Define the class name of the gradient animation'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'transition',
+          mfDemo: ''
+        },
+        {
+          name: 'type',
+          type: "'normal' | 'warning' | 'error' | 'info' | 'success'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '提示的类型， type 的优先级大于 effect ',
+            'en-US': 'The default type is provided. The priority of type is higher than that of effect.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'theme',
+          mfDemo: ''
+        },
+        {
+          name: 'v-model',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '状态是否可见',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'visible',
+          type: " 'always' | 'auto'",
+          defaultValue: "'always'",
+          desc: {
+            'zh-CN': '提示的智能出现的模式',
+            'en-US': 'The pattern of intelligent emergence of hints'
+          },
+          mode: ['pc'],
+          pcDemo: 'control'
+        },
+        {
+          name: 'visible-arrow',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示箭头',
+            'en-US': 'Indicates whether to display the tooltip arrow.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-popper',
+          mfDemo: ''
+        },
+        {
+          name: 'z-index',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置 z-index 属性为 relative 时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'content',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '内容插槽',
+            'en-US': 'Content Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'content',
+          mfDemo: ''
+        },
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+}
+      `
+    },
+    {
+      name: 'IPopperPlacement',
+      type: 'type',
+      code: `
+type IPopperPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
+    }
+  ]
+}

examples/react-docs/demos/overviewimage/accordion.svg

@@ -0,0 +1,120 @@
+<?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>

examples/react-docs/demos/overviewimage/action-menu.svg

@@ -0,0 +1,114 @@
+<?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>

examples/react-docs/demos/overviewimage/actionmenu.svg

@@ -0,0 +1,114 @@
+<?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>

examples/react-docs/demos/overviewimage/alert.svg

@@ -0,0 +1,90 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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="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="矩形">
+                    <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 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>
+                    <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>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/amount.svg

@@ -0,0 +1,69 @@
+<?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>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">
+            <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">
+            <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-组件总览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>
+                    <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>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/anchor.svg

@@ -0,0 +1,82 @@
+<?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>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">
+            <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">
+            <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>
+        <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">
+            <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="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="编组-19" transform="translate(32.000000, 28.000000)">
+                    <g id="anchor" transform="translate(5.000000, 5.000000)" fill="url(#linearGradient-9)" stroke="url(#linearGradient-10)">
+                        <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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/angular.svg

@@ -0,0 +1,16 @@
+<?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>

examples/react-docs/demos/overviewimage/area.svg

@@ -0,0 +1,73 @@
+<?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>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">
+            <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">
+            <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">
+            <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(-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="区域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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/autocomplete.svg

@@ -0,0 +1,108 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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="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>
+                <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>
+                <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>
+                </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>
+                    </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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/avatar.svg

@@ -0,0 +1,100 @@
+<?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>

examples/react-docs/demos/overviewimage/badge.svg

@@ -0,0 +1,87 @@
+<?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>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">
+            <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">
+            <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">
+            <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>
+                            <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>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/breadcrumb.svg

@@ -0,0 +1,82 @@
+<?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>面包屑 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">
+            <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">
+            <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">
+            <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">
+            <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="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="形状结合">
+                        <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>
+                    <rect id="矩形-2备份" fill="url(#linearGradient-13)" 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>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/browser.svg

@@ -0,0 +1,126 @@
+<?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>

examples/react-docs/demos/overviewimage/bulletin-board.svg

@@ -0,0 +1,76 @@
+<?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>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">
+            <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">
+            <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>
+                        <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>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/button-group.svg

@@ -0,0 +1,138 @@
+<?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>

examples/react-docs/demos/overviewimage/button.svg

@@ -0,0 +1,115 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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-17">
+            <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">
+            <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="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="编组" 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>
+                    <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>
+                    </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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/buttongroup.svg

@@ -0,0 +1,138 @@
+<?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>

examples/react-docs/demos/overviewimage/calendar-view.svg

@@ -0,0 +1,71 @@
+<?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>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">
+            <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">
+            <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-组件总览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="我的任务" 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="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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/calendar.svg

@@ -0,0 +1,91 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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>
+                        <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>
+                    </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>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/card.svg

@@ -0,0 +1,176 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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="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="编组-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>
+                    <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>
+                    </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>
+                    </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>
+                    </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>
+                    </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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/carousel.svg

@@ -0,0 +1,98 @@
+<?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>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">
+            <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">
+            <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>
+        <linearGradient x1="44.0988019%" y1="78.5896382%" x2="128.792906%" y2="-22.8152097%" id="linearGradient-12">
+            <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">
+            <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>
+                        <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>
+                    </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>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/cascader-panel.svg

@@ -0,0 +1,125 @@
+<?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>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">
+            <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">
+            <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">
+            <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>
+            <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.0%" y="-58.3%" width="190.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-13">
+            <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">
+            <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">
+            <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">
+            <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>
+            <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.0%" y="-58.3%" width="190.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-18">
+            <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>
+                        <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>
+                        <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>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/cascader.svg

@@ -0,0 +1,140 @@
+<?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>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">
+            <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">
+            <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>
+        <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">
+            <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>
+            <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-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="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">
+            <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>
+            <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-17">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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="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="编组-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>
+                    <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>
+                    </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>
+                    </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>
+                    </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>
+                    </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>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-attributes-demo.svg

@@ -0,0 +1,55 @@
+<?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>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>
+        <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>
+    </defs>
+    <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>
+                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-autonavi-map.svg

@@ -0,0 +1,77 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-bar.svg

@@ -0,0 +1,79 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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="图表-(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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-boxplot.svg

@@ -0,0 +1,107 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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="箱形图" 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>
+                    </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>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-candle.svg

@@ -0,0 +1,84 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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-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="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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-dev.svg

@@ -0,0 +1,83 @@
+<?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>

examples/react-docs/demos/overviewimage/chart-events.svg

@@ -0,0 +1,77 @@
+<?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>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">
+            <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">
+            <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">
+            <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>
+    </defs>
+    <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>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-funnel.svg

@@ -0,0 +1,88 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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="编组-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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-gauge.svg

@@ -0,0 +1,85 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-graph.svg

@@ -0,0 +1,89 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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="编组-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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-heatmap.svg

@@ -0,0 +1,72 @@
+<?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>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">
+            <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">
+            <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>
+    </defs>
+    <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="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>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-histogram.svg

@@ -0,0 +1,86 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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="图表-(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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

examples/react-docs/demos/overviewimage/chart-line.svg

@@ -0,0 +1,80 @@
+<?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>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">
+            <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">
+            <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">
+            <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">
+            <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-组件总览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="编组-11" transform="translate(31.000000, 42.000000)">
+                        <g id="地球-3" transform="translate(0.000000, 4.927549)" fill="url(#linearGradient-9)" 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>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>