feat: add XDesign

2023-05-18 16:57:25 +08:00 · 2023-05-18 16:57:25 +08:00 · dfc1bb3fe4
parent 42cd6d084d
commit dfc1bb3fe4
2916 changed files with 122402 additions and 8023 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -122,24 +122,6 @@
      "contributions": [
        "code"
      ]
-    },
-    {
-      "login": "WXC-Spring",
-      "name": "WXC-Spring",
-      "avatar_url": "https://avatars.githubusercontent.com/u/131581326?v=4",
-      "profile": "https://github.com/WXC-Spring",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "GaoNeng-wWw",
-      "name": "GaoNeng",
-      "avatar_url": "https://avatars.githubusercontent.com/u/31283122?v=4",
-      "profile": "https://github.com/GaoNeng-wWw",
-      "contributions": [
-        "code"
-      ]
    }
  ],
  "contributorsPerLine": 8,
@ -148,4 +130,4 @@
  "repoHost": "https://github.com",
  "projectName": "tiny-vue",
  "projectOwner": "opentiny"
-}
+}
--- a/.eslintignore
+++ b/.eslintignore
@ -3,6 +3,4 @@ runtime
 dist-vue2/
 dist-vue3/
 node_modules
-examples/docs/public/assets/map/js
-packages/dist2
-packages/dist3
+examples/docs/public/assets/map/js
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -2,4 +2,4 @@ blank_issues_enabled: true
 contact_links:
  - name: Questions or need help
    url: https://github.com/opentiny/ui-vue/discussions
-    about: Add this WeChat(opentiny-official), we will invite you to the WeChat discussion group later.
+    about: Add this WeChat(opentiny), we will invite you to the WeChat discussion group later.
--- a/.github/workflows/dev.yml
+++ b/.github/workflows/dev.yml
@ -1,45 +0,0 @@
-name: 'Dev'
-on:
-  push:
-    branches:
-      - dev
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Run lint
-        run: pnpm run "/^lint.*/"
--- a/.gitignore
+++ b/.gitignore
@ -7,7 +7,6 @@ dist3/
 allDist/
 packages/**/runtime
 coverage/
-esbuild-kit/

 /packages/vue-icon-saas/src
 /packages/vue-icon-saas/index.ts
@ -18,8 +17,6 @@ esbuild-kit/
 /packages/vue-icon/src/index.ts

 /examples/**/playwright-report
-/examples/docs/.vuepress/.cache/
-/examples/docs/.vuepress/.temp/
 /examples/docs/.vitepress/cache
 vite.config.ts.timestamp*
 vitest.config.ts.timestamp*
@ -52,3 +49,5 @@ tgzs

 packages/theme/scripts/theme.json
 packages/theme/scripts/theme-result.txt
+
+packages/theme/src/theme/*-theme/component.js
--- a/.prettierignore
+++ b/.prettierignore
@ -1,6 +1,6 @@
 dist
-dist-vue2
-dist-vue3
+dist2
+dist3
 node_modules
 internal/template
 internal/runtime
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -2,13 +2,11 @@
  "recommendations": [
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
+    "bradlc.vscode-tailwindcss",
    "davidanson.vscode-markdownlint",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "ms-playwright.playwright"
  ],
-  "unwantedRecommendations": [
-    "esbenp.prettier-vscode",
-    "octref.vetur"
-  ]
-}
+  "unwantedRecommendations": ["esbenp.prettier-vscode", "octref.vetur"]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,22 +1,10 @@
 {
-  "explorer.fileNesting.enabled": true,
-  "explorer.fileNesting.expand": false,
-  "explorer.fileNesting.patterns": {
-    "*.js": "$(capture).js.map, $(capture).*.js",
-    "*.ts": "$(capture).ts.map, $(capture).*.ts",
-    "*.tsx": "$(capture).tsx.map, $(capture).*.tsx",
-    ".gitignore": ".gitattributes",
-    ".eslintrc.js": ".eslintignore, .prettierignore, .prettierrc, commitlint.config.js",
-    "README.md": "*.md, LICENSE",
-    "tsconfig.json": "tsconfig.*.json, jsconfig.json",
-    "package.json": ".npmrc, pnpm-workspace.yaml, logo.svg, lerna.json"
-  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "markdownlint.config": {
-    "no-inline-html": true,
-    "first-line-heading": true
+    "no-inline-html": false,
+    "first-line-heading": false
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "prettier.enable": true,
@ -80,8 +68,5 @@
      "bold": false,
      "italic": false
    }
-  ],
-  "cSpell.words": [
-    "preinstall"
  ]
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -22,6 +22,7 @@ If you encounter problems in the process of using TinyVue components, you are we
 If it is a defect, select [Bug report](https://github.com/opentiny/tiny-vue/issues/new?template=bug-report.yml) template when creating a new Issue. The title follows the format of `[componentName] defect description`. For example: `[select] filtering function, the selected option cannot be selected again after it has been deleted`.

 Issue that reports defects mainly needs to fill in the following information:
+
 - Version numbers of `@opentiny/vue` and `vue`.
 - The performance of the defect can be illustrated by screenshot, and if there is an error, the error message can be posted.
 - Defect reproduction step, preferably with a minimum reproducible demo link.
@ -29,6 +30,7 @@ Issue that reports defects mainly needs to fill in the following information:
 If it is a new feature, select [Feature request](https://github.com/opentiny/tiny-vue/issues/new?template=feature-request.yml) template. The title follows the format of `[componentName] new feature description`. For example: `[select] selection box is too long to display, hope to support the configuration of tips prompt`.

 The following information is required for the Issue of the new feature:
+
 - What problems does this feature mainly solve for users?
 - What is the api of this feature?

--- a/CONTRIBUTING.zh-CN.md
+++ b/CONTRIBUTING.zh-CN.md
@ -3,7 +3,7 @@
 很高兴你有意愿参与 TinyVue 开源项目的贡献，参与贡献的形式有很多种，你可以根据自己的特长和兴趣选择其中的一个或多个：

 - 报告[新缺陷](https://github.com/opentiny/tiny-vue/issues/new?template=bug-report.yml)
- 为[已有缺陷](https://github.com/opentiny/tiny-vue/labels/bug)提供更详细的信息，比如补充截图、提供更详细的复现步骤、提供最小可复现demo链接等
+- 为[已有缺陷](https://github.com/opentiny/tiny-vue/labels/bug)提供更详细的信息，比如补充截图、提供更详细的复现步骤、提供最小可复现 demo 链接等
 - 提交 Pull requests 修复文档中的错别字或让文档更清晰和完善
 - 添加官方小助手微信 opentiny-official，加入技术交流群参与讨论

@ -22,6 +22,7 @@
 如果是一个缺陷，创建新 Issue 时选择 [Bug report](https://github.com/opentiny/tiny-vue/issues/new?template=bug-report.yml) 模板，标题遵循 `[componentName]缺陷简述` 的格式，比如：`[select]过滤功能中，选中的选项退格删除后，无法再次选中该选项`。

 报告缺陷的 Issue 主要需要填写以下信息：
+
 - tiny-vue 和 vue 的版本号
 - 缺陷的表现，可截图辅助说明，如果有报错可贴上报错信息
 - 缺陷的复现步骤，最好能提供一个最小可复现 demo 链接
@ -29,6 +30,7 @@
 如果是一个新特性，则选择 [Feature request](https://github.com/opentiny/tiny-vue/issues/new?template=feature-request.yml) 模板，标题遵循 `[componentName]新特性简述` 的格式，比如：`[select]选择框内容太长展示不下时，希望能支持配置tips提示`。

 新特性的 Issue 主要需要填写以下信息：
+
 - 该特性主要解决用户的什么问题
 - 该特性的 api 是什么样的

--- a/README.md
+++ b/README.md
@ -100,8 +100,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/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>
    </tr>
  </tbody>
 </table>
--- a/build.sh
+++ b/build.sh
@ -1,25 +0,0 @@
-#!/bin/bash
-
-if [ ! $version ];
-then npm version 0.1.0-`date "+%Y%m%d%H%M%S"`; 
-else npm version $version; 
-fi
-
-npm install
-
-if [ ! $componentName ];
-then 
-    npm run build:vue$vueVersion
-else 
-    npm run buildfuxi:vue$vueVersion 
-fi
-
-npm run releasefuxi$vueVersion
-
-if [ $? -ne 0 ]
-then
-    echo "[ERROR] build falid!"
-    exit 1
-fi
-echo '[INFO] build completed'
-
--- a/examples/docs/.depcheckrc
+++ b/examples/docs/.depcheckrc
@ -1 +1 @@
-ignores: [ "postcss", "autoprefixer", "flexsearch", "@root/typings-vue3"]
+ignores: ["tailwindcss", "postcss", "autoprefixer", "flexsearch", "@root/typings-vue3"]
--- a/examples/docs/newsrc/App.vue
+++ b/examples/docs/newsrc/App.vue
@ -1,22 +1,78 @@
 <template>
-  <div>
-    <tiny-pc v-if="mode === 'pc'"></tiny-pc>
-    <tiny-mobile v-else></tiny-mobile>
+  <div class="hp100vh f-c">
+    <div class="m10 pb10 b-b">
+      <div style="float: right">
+        组件库模式： <tiny-button-group :data="state.groupData" v-model="modeState.mode"></tiny-button-group>
+      </div>
+      <div>
+        VCA版本：
+        <tiny-link type="primary" :underline="false" class="mr20">
+          {{ state.vueVersion }}
+        </tiny-link>
+      </div>
+    </div>
+    <div class="fi-1 of-auto">
+      <tiny-pc v-if="modeState.mode === 'pc'"></tiny-pc>
+      <tiny-mobile v-else-if="modeState.mode === 'mobile'"></tiny-mobile>
+      <tiny-mobile-first v-else></tiny-mobile-first>
+    </div>
  </div>
 </template>

 <script>
+import './style.css'
+import { ButtonGroup, Link } from '@opentiny/vue'
 import TinyPc from './pc.vue'
 import TinyMobile from './mobile.vue'
+import TinyMobileFirst from './mobile-first.vue'
+import { hooks, provideDesignConfig } from '@opentiny/vue-common'
+import { useModeCtx } from './uses'
+import designAuroraConfig from '@opentiny/vue-design-aurora'
+
 export default {
  components: {
    TinyPc,
-    TinyMobile
+    TinyMobile,
+    TinyMobileFirst,
+    TinyButtonGroup: ButtonGroup,
+    TinyLink: Link
  },
  setup() {
-    const mode = new URL(location.href).searchParams.get('mode') || localStorage.getItem('vue-example-mode') || 'pc'
+    const { state: modeState, fn: modeFn } = useModeCtx()
+    const state = hooks.reactive({
+      groupData: [
+        { text: 'PC', value: 'pc' },
+        { text: 'Mobile', value: 'mobile' },
+        { text: 'Mobile-first', value: 'mobile-first' }
+      ],
+      vueVersion: hooks.version
+    })
+
+    // 注入aurora主题规范
+    provideDesignConfig(designAuroraConfig)
+
+    hooks.onMounted(() => {
+      hooks.watch(
+        () => modeState.mode,
+        (mode, preMode) => {
+          if (mode !== preMode && preMode !== '') {
+            modeFn.changeMode(modeState.mode)
+            modeFn.cacheCtx()
+            modeFn.pushToUrl()
+            location.reload() // 必须刷新页面，重进main.ts才行
+          }
+        },
+        {
+          flush: 'sync'
+        }
+      )
+    })
+
+    // 解析url, 生成modeState
+    modeFn.loadPage()
    return {
-      mode
+      state,
+      modeState,
    }
  }
 }
--- a/examples/docs/newsrc/assets/theme.svg
+++ b/examples/docs/newsrc/assets/theme.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" width="20" height="20"><path d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z"></path></svg>
--- a/examples/docs/newsrc/mobile-first.vue
+++ b/examples/docs/newsrc/mobile-first.vue
@ -0,0 +1,181 @@
+<template>
+  <div class="wp100 hp100 f-r of-hidden">
+    <div class="w230 pt20 of-auto">
+      <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 f24 fw-bold text-center">
+        {{ modeState.pathName }}
+      </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'] }}({{ state.currDemo?.codeFiles[0] }}):</div>
+          <div v-html="state.currDemo?.desc['zh-CN']"></div>
+        </div>
+        <!-- 预览 -->
+        <div class="rel px20">
+          <component :is="state.comp"></component>
+        </div>
+      </div>
+      <!-- API表格 -->
+      <div v-if="state.currApi.length" class="my20 f24 fw-bold">组件API</div>
+
+      <div v-for="(oneGroup, idx) in state.currApi" :key="idx">
+        <div class="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>
+            <tiny-grid :data="oneApiArr" border auto-resize>
+              <tiny-grid-column field="name" width="15%" title="名称">
+                <template #default="data">
+                  <a v-if="data.row.demoId" class="c-primary h:c-error" @click="fn.selectDemo(data.row.demoId)">{{
+                    data.row.name
+                  }}</a>
+                  <span v-else>{{ data.row.name }}</span>
+                </template>
+              </tiny-grid-column>
+              <tiny-grid-column field="type" width="20%" title="类型"></tiny-grid-column>
+              <tiny-grid-column field="defaultValue" width="20%" title="默认值"></tiny-grid-column>
+              <tiny-grid-column field="desc" title="说明">
+                <template #default="{ row }">
+                  <div v-html="row.desc['zh-CN']"></div>
+                </template>
+              </tiny-grid-column>
+            </tiny-grid>
+          </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, Grid, GridColumn, Tooltip } from '@opentiny/vue'
+import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
+import { menuData, apis, demoStr, demoVue } from './resourceMobileFirst.js'
+import { useModeCtx } from './uses'
+
+export default {
+  components: {
+    TinyFloatbar: Floatbar,
+    TinyTreeMenu: TreeMenu,
+    TinyButton: Button,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyTooltip: Tooltip,
+    IconStarIcon: iconStarActive(),
+    IconOpeninVscode: iconSelect()
+  },
+  setup() {
+    import('./tailwind.css')
+    const { state: modeState, fn: modeFn } = useModeCtx()
+    const state = hooks.reactive({
+      demos: [], // 组件的所有示例
+      currDemo: null, // 选中的demo
+      currApi: [], // 当前path下的api
+      comp: null, // 当前示例的组件实例
+      currDemoSrc: ''
+    })
+    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=../docs/resources/mobile-first/app/${modeState.pathName}/${demo.codeFiles[0]}`)
+      }
+    }
+
+    hooks.onMounted(() => {
+      _switchPath()
+    })
+
+    // 以下私有方法，无须传递给vue模板的。
+    async function _switchPath() {
+      // 查找API
+      const apiModule = apis[`../resources/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
+      if (apiModule) {
+        const module = await apiModule()
+        const apiRoot = module.default
+        state.currApi = apiRoot.apis
+        state.demos = apiRoot.demos || []
+        state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
+      } else {
+        state.currApi = null
+        state.currDemos = []
+      }
+      await _switchDemo()
+    }
+    async function _switchDemo() {
+      modeState.demoId = state.currDemo.demoId
+      const path = `../resources/mobile-first/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>
--- a/examples/docs/newsrc/mobile.vue
+++ b/examples/docs/newsrc/mobile.vue
@ -1,73 +1,85 @@
 <template>
  <div class="wp100 hp100 f-r of-hidden">
-    <div class="w230 hp100 pt20 of-auto">
-      <tiny-tree-menu :data="menuData" :filter-node-method="fn.searchMenu" @current-change="fn.clickMenu"></tiny-tree-menu>
+    <div class="w230 pt20 of-auto">
+      <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 mr200 of-auto">
+    <div class="fi-1 f-c px20 pb30 f-c pr200 of-auto">
      <!-- 标题 -->
      <div class="py20 f24 fw-bold text-center">
-        {{ state.demos[0]?.component }}
+        {{ modeState.pathName }}
      </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?.title }}({{ state.currDemo?.demoId }}.vue):
+          <div class="mr20 fw-bold">{{ state.currDemo?.name['zh-CN'] }}({{ state.currDemo?.codeFiles[0] }}):</div>
+          <div v-html="state.currDemo?.desc['zh-CN']"></div>
+        </div>
+        <!-- 预览 -->
+        <div class="rel px20">
+          <div class="phone-container" @dblclick="fn.openInVscode(state.currDemo)">
+            <div class="mobile-view-container">
+              <component :is="state.comp"></component>
+            </div>
          </div>
-          <div v-html="state.currDemo?.content"></div>
        </div>
-        <!-- 预览 + 按钮 + 代码  -->
-        <div class="p20 of-auto b-a bs-dotted">
-          <component :is="state.comp"></component>
-        </div>
-        <div class="f-r f-pos-end mt40">
-          <tiny-button @click="fn.format">
-            格式化
-          </tiny-button>
-          <tiny-tooltip effect="dark" content="选择src/_.vue文件" placement="top">
-            <tiny-button @click="fn.apply" type="primary">
-              应用
-            </tiny-button>
-          </tiny-tooltip>
-          <tiny-button @click="fn.saveCode" class="!ml40">
-            保存
-          </tiny-button>
-          <tiny-button @click="fn.fullScreen">
-            全屏
-          </tiny-button>
-        </div>
-        <div id="editor" ref="editorRef" class="h300 mt10"></div>
      </div>
      <!-- API表格 -->
-      <div v-if="state.currApi" class="mt20 f24 fw-bold">
-        组件API
-      </div>
-      <div v-for="(apiTable, key) in state.currApi" :key="key">
-        <div class="my8 f22 fw-bold">
-          {{ key }}
+      <div v-if="state.currApi.length" class="my20 f24 fw-bold">组件API</div>
+
+      <div v-for="(oneGroup, idx) in state.currApi" :key="idx">
+        <div class="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>
+            <tiny-grid :data="oneApiArr" border auto-resize>
+              <tiny-grid-column field="name" width="15%" title="名称">
+                <template #default="data">
+                  <a v-if="data.row.demoId" class="c-primary h:c-error" @click="fn.selectDemo(data.row.demoId)">{{
+                    data.row.name
+                  }}</a>
+                  <span v-else>{{ data.row.name }}</span>
+                </template>
+              </tiny-grid-column>
+              <tiny-grid-column field="type" width="20%" title="类型"></tiny-grid-column>
+              <tiny-grid-column field="defaultValue" width="20%" title="默认值"></tiny-grid-column>
+              <tiny-grid-column field="desc" title="说明">
+                <template #default="{ row }">
+                  <div v-html="row.desc['zh-CN']"></div>
+                </template>
+              </tiny-grid-column>
+            </tiny-grid>
+          </div>
        </div>
-        <tiny-grid :data="apiTable" border auto-resize>
-          <tiny-grid-column field="name" width="15%" title="名称">
-            <template #default="data">
-              <a v-if="data.row.sample" class="c-primary h:c-error" @click="fn.selectDemo(data.row.sample)">{{ data.row.name }}</a>
-              <span v-else>{{ data.row.name }}</span>
-            </template>
-          </tiny-grid-column>
-          <tiny-grid-column field="type" width="20%" title="类型"></tiny-grid-column>
-          <tiny-grid-column field="defaultValue" width="20%" title="默认值"></tiny-grid-column>
-          <tiny-grid-column field="desc" title="说明">
-            <template #default="{ row }">
-              <div v-html="row.desc['zh-CN']"></div>
-            </template>
-          </tiny-grid-column>
-        </tiny-grid>
      </div>
    </div>
    <!-- 右边浮动所有的demos -->
-    <tiny-floatbar v-if="state.demos.length > 0" class="!top120">
+    <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 py6 bg-light link-primary h:c-error h:td-under ellipsis cur-hand" :class="{ 'c-error': state.currDemo === demo }">
-          {{ demo.name['zh-CN'] }}
-          <Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
+        <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>
@ -75,14 +87,11 @@
 </template>

 <script>
-import 'uno.css'
-import './style.css'
 import { hooks } from '@opentiny/vue-common'
 import { Floatbar, TreeMenu, Button, Grid, GridColumn, Tooltip } from '@opentiny/vue'
-import { iconStarActive } from '@opentiny/vue-icon'
+import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
 import { menuData, apis, demoStr, demoVue } from './resourceMobile.js'
-import { $local, useFileSaver, useMonaco, useFullScreen } from './uses'
-import TmpDemo from './_.vue'
+import { useModeCtx } from './uses'

 export default {
  components: {
@ -92,21 +101,17 @@ export default {
    TinyGrid: Grid,
    TinyGridColumn: GridColumn,
    TinyTooltip: Tooltip,
-    IconStarIcon: iconStarActive()
+    IconStarIcon: iconStarActive(),
+    IconOpeninVscode: iconSelect()
  },
  setup() {
-    const saver = useFileSaver() // 一个本地文件保存器
-    const tmpSaver = useFileSaver() // 应用时，临时保存一个本地文件
-    const fullScreener = useFullScreen('#preview')
-    const editor = useMonaco('#editor')
-    const API_COLLECTION = ['properties', 'events', 'slot']
-
+    const { state: modeState, fn: modeFn } = useModeCtx()
    const state = hooks.reactive({
-      pathName: $local.pathName || 'button', // 对应json中的 文件名， 每个文件有多个示例
-      demos: [], // 组件的所有示例  {component,content,demoId,findIntroStr,link,title}[]
+      demos: [], // 组件的所有示例
      currDemo: null, // 选中的demo
      currApi: [], // 当前path下的api
-      comp: null // 当前示例的组件实例
+      comp: null, // 当前示例的组件实例
+      currDemoSrc: ''
    })
    const fn = {
      // 菜单搜索：忽略大小写
@ -117,7 +122,7 @@ export default {
      // 点击菜单：如果是二级菜单，根据path 刷新整个页面内容
      clickMenu: async (menu) => {
        if (menu.nameCn && menu.key !== state.key) {
-          state.pathName = menu.key
+          modeState.pathName = menu.key
          await _switchPath()
        }
      },
@ -129,12 +134,8 @@ export default {
          await _switchDemo()
        }
      },
-      saveCode: () => saver.save(editor.getCode()),
-      fullScreen: () => fullScreener.toggle(),
-      format: () => editor.format(),
-      apply: async () => {
-        await tmpSaver.save(editor.getCode())
-        setTimeout(() => (state.comp = markRaw(TmpDemo)), 100)
+      openInVscode: (demo) => {
+        fetch(`/__open-in-editor?file=../docs/resources/mobile/app/${state.pathName}/${demo.codeFiles[0]}`)
      }
    }

@ -144,21 +145,14 @@ export default {

    // 以下私有方法，无须传递给vue模板的。
    async function _switchPath() {
-      $local.pathName = state.pathName
      // 查找API
-      const apiModule = apis[`../resources/mobile/app/${state.pathName}/webdoc/${state.pathName}.js`]
+      const apiModule = apis[`../resources/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
      if (apiModule) {
-        const api = await apiModule()
-        const apis = api.default.apis[0]
-        const apiObj = {}
-        Object.entries(apis).forEach(([key, value]) => {
-          if (API_COLLECTION.includes(key)) {
-            apiObj[key] = apis[key]
-          }
-        })
-        state.currApi = apiObj
-        state.demos = api.default.demos || []
-        state.currDemo = api.default.demos?.[0]
+        const module = await apiModule()
+        const apiRoot = module.default
+        state.currApi = apiRoot.apis
+        state.demos = apiRoot.demos || []
+        state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
      } else {
        state.currApi = null
        state.currDemos = []
@ -166,21 +160,25 @@ export default {
      await _switchDemo()
    }
    async function _switchDemo() {
-      $local.demoId = state.currDemo.demoId
-      saver.reset()
-      // 查找源码
-      const src = await demoStr[`../resources/mobile/app/${state.pathName}/${state.currDemo.demoId}.vue`]()
-      editor.setCode(src)
-      editor.scrollTop()
-      // 查找组件
-      const comp = await demoVue[`../resources/mobile/app/${state.pathName}/${state.currDemo.demoId}.vue`]()
+      modeState.demoId = state.currDemo.demoId
+      const path = `../resources/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
+      fn,
+      modeState,
+      modeFn
    }
  }
 }
--- a/examples/docs/newsrc/pc.vue
+++ b/examples/docs/newsrc/pc.vue
@ -1,13 +1,9 @@
 <template>
  <div class="wp100 hp100 f-r of-hidden">
-    <div class="w230 hp100 pt20 of-auto">
-      <tiny-tree-menu
-        :data="menuData"
-        :filter-node-method="fn.searchMenu"
-        @current-change="fn.clickMenu"
-      ></tiny-tree-menu>
+    <div class="w230 pt20 of-auto">
+      <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 mr200 of-auto">
+    <div class="fi-1 f-c px20 pb30 f-c pr200 of-auto" ref="rightRef">
      <!-- 标题 -->
      <div class="py20 f24 fw-bold text-center">
        {{ state.demos[0]?.component }}
@ -15,25 +11,27 @@
      <div id="preview" class="bg-white f-c">
        <!-- 标题 + 组件说明  -->
        <div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
-          <div class="mr20 fw-bold">{{ state.currDemo?.title }}({{ state.currDemo?.demoId }}.vue):</div>
+          <div class="mr20 fw-bold">
+            {{ state.currDemo?.title }}({{ state.currDemo?.demoId }}.vue ):
+          </div>
          <div v-html="state.currDemo?.content"></div>
        </div>
-        <!-- 预览 + 按钮 + 源代码编辑器  -->
-        <div class="p20 of-auto b-a bs-dotted">
-          <component :is="state.comp"></component>
+        <!-- 预览  -->
+        <div class="rel px20 py60 of-auto b-a bs-dotted">
+          <div class="abs top10 right10">
+            <span title="点击在vscode中打开">
+              <IconOpeninVscode @click="fn.openInVscode(state.currDemo)" class="ml12 cur-hand" />
+            </span>
+          </div>
+          <config-provider :design="design">
+            <component :is="state.comp"></component>
+          </config-provider>
        </div>
-        <div class="f-r f-pos-end mt40">
-          <tiny-button @click="fn.format"> 格式化 </tiny-button>
-          <tiny-tooltip effect="dark" content="选择cocs/newsrc/_.vue文件" placement="top">
-            <tiny-button @click="fn.apply" type="primary"> 应用 </tiny-button>
-          </tiny-tooltip>
-          <tiny-button @click="fn.saveCode" class="!ml40"> 保存 </tiny-button>
-          <tiny-button @click="fn.fullScreen"> 全屏 </tiny-button>
-        </div>
-        <div id="editor" ref="editorRef" class="minh300 mt10 fi-1 mb20"></div>
      </div>
      <!-- API表格 -->
-      <div v-if="state.currApi" class="f24 fw-bold">组件API</div>
+      <div v-if="state.currApi" class="mt20 f24 fw-bold">
+        组件API
+      </div>
      <div v-for="(apiTable, key) in state.currApi" :key="key">
        <div class="my8 f22 fw-bold">
          {{ key }}
@ -54,32 +52,58 @@
      </div>
    </div>
    <!-- 右边浮动所有的demos -->
-    <tiny-floatbar v-if="state.demos.length > 0" class="!top120">
-      <div class="f12 ofy-auto">
-        <div
-          v-for="demo in state.demos"
-          :key="demo.demoId"
-          @click="fn.selectDemo(demo.demoId)"
-          class="w130 px10 py6 bg-light link-primary h:c-error h:td-under ellipsis cur-hand"
-          :class="{ 'c-error': state.currDemo === demo }"
-        >
-          {{ demo.title }}
-          <Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
+    <tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
+      <div class="f12 ofy-auto" style="max-height: calc(100vh - 240px)">
+        <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.title }}
+            <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>
+    <!-- 切换主题 -->
+    <tiny-dropdown class="!fixed bottom20 right140" @item-click="changeTheme">
+      <span title="切换主题">
+        <SvgTheme></SvgTheme>
+      </span>
+      <template #dropdown>
+        <tiny-dropdown-menu placement="top">
+          <tiny-dropdown-item label="tiny-default-theme" class="minw160" :class="{ '!c-primary': currThemeLabel === 'tiny-default-theme' }">
+            Default Theme
+          </tiny-dropdown-item>
+          <tiny-dropdown-item label="tiny-aurora-theme" class="minw160" :class="{ '!c-primary': currThemeLabel === 'tiny-aurora-theme' }">
+            Aurora Theme
+          </tiny-dropdown-item>
+          <tiny-dropdown-item label="tiny-smb-theme" class="minw160" :class="{ '!c-primary': currThemeLabel === 'tiny-smb-theme' }">
+            SMB Theme
+          </tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
  </div>
 </template>

 <script>
-import 'uno.css'
-import './style.css'
 import { hooks } from '@opentiny/vue-common'
-import { Floatbar, TreeMenu, Button, Grid, GridColumn, Tooltip } from '@opentiny/vue'
-import { iconStarActive } from '@opentiny/vue-icon'
-import { menuData, zhDemo, demoVue, demoStr, zhApi } from './resource.js'
-import { $local, useFileSaver, useMonaco, useFullScreen } from './uses'
-import TmpDemo from './_.vue'
+import {
+  Floatbar,
+  TreeMenu,
+  Button,
+  Grid,
+  GridColumn,
+  Tooltip,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  ConfigProvider
+} from '@opentiny/vue'
+import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
+import { menuData, zhDemo, demoVue, demoStr, zhApi } from './resourcePc.js'
+import { useTheme, useModeCtx } from './uses'
+import SvgTheme from './assets/theme.svg'
+import designSmbConfig from '@opentiny/vue-design-smb'

 export default {
  components: {
@ -89,20 +113,24 @@ export default {
    TinyGrid: Grid,
    TinyGridColumn: GridColumn,
    TinyTooltip: Tooltip,
-    IconStarIcon: iconStarActive()
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem,
+    SvgTheme,
+    IconStarIcon: iconStarActive(),
+    IconOpeninVscode: iconSelect(),
+    ConfigProvider
  },
  setup() {
-    const saver = useFileSaver() // 一个本地文件保存器
-    const tmpSaver = useFileSaver() // 应用时，临时保存一个本地文件
-    const fullScreener = useFullScreen('#preview')
-    const editor = useMonaco('#editor')
-
+    const { state: modeState, fn: modeFn } = useModeCtx()
+    const { changeTheme, currThemeLabel } = useTheme()
+    const rightRef = hooks.ref('')
    const state = hooks.reactive({
-      pathName: $local.pathName || 'button', // 对应json中的 文件名， 每个文件有多个示例
      demos: [], // 组件的所有示例  {component,content,demoId,findIntroStr,link,title}[]
      currDemo: null, // 选中的demo
      currApi: [], // 当前path下的api
-      comp: null // 当前示例的组件实例
+      comp: null, // 当前示例的组件实例
+      currDemoSrc: ''
    })
    const fn = {
      // 菜单搜索：忽略大小写
@ -112,8 +140,8 @@ export default {
      },
      // 点击菜单：如果是二级菜单，根据path 刷新整个页面内容
      clickMenu: async (menu) => {
-        if (menu.path && menu.path !== state.pathName) {
-          state.pathName = menu.path.slice(1)
+        if (menu.path && menu.path !== modeState.pathName) {
+          modeState.pathName = menu.path.slice(1)
          await _switchPath()
        }
      },
@ -125,12 +153,8 @@ export default {
          await _switchDemo()
        }
      },
-      saveCode: () => saver.save(editor.getCode()),
-      fullScreen: () => fullScreener.toggle(),
-      format: () => editor.format(),
-      apply: async () => {
-        await tmpSaver.save(editor.getCode())
-        setTimeout(() => (state.comp = hooks.markRaw(TmpDemo)), 100)
+      openInVscode: (demo) => {
+        fetch(`/__open-in-editor?file=../docs/resources/pc/demo/${demo.link}.vue`)
      }
    }

@ -140,10 +164,8 @@ export default {

    // 以下私有方法，无须传递给vue模板的。
    async function _switchPath() {
-      $local.pathName = state.pathName
-
      // 查找API
-      const apiModule = zhApi[`../resources/pc/api/zh-CN/${state.pathName}.json`]
+      const apiModule = zhApi[`../resources/pc/api/zh-CN/${modeState.pathName}.json`]
      if (apiModule) {
        const api = await apiModule()
        state.currApi = api.default
@ -152,28 +174,44 @@ export default {
      }

      // 查找demo配置，并默认进入第一个 demo
-      const demosJson = await zhDemo[`../resources/pc/demo-config/zh-CN/${state.pathName}.json`]()
+      const demosJson = await zhDemo[`../resources/pc/demo-config/zh-CN/${modeState.pathName}.json`]()
      state.demos = demosJson.default
-      state.currDemo = state.demos.find((d) => d.demoId === $local.demoId) || state.demos[0]
+      state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos[0]
      state.comp = null
      await _switchDemo()
    }
    async function _switchDemo() {
-      $local.demoId = state.currDemo.demoId
-      saver.reset()
+      modeState.demoId = state.currDemo.demoId
      // 查找源码
-      const src = await demoStr[`../resources/pc/demo/${state.currDemo.link}.vue`]()
-      editor.setCode(src)
-      editor.scrollTop()
+      state.currDemoSrc = await demoStr[`../resources/pc/demo/${state.currDemo.link}.vue`]()
+
      // 查找组件
      const comp = await demoVue[`../resources/pc/demo/${state.currDemo.link}.vue`]()
      state.comp = hooks.markRaw(comp.default)
+
+      // 让内容区滚动到顶部
+      setTimeout(() => rightRef.value && rightRef.value.scrollTo({ left: 0, top: 0, behavior: 'smooth' }), 0)
+
+      modeFn.cacheCtx()
+      modeFn.pushToUrl()
    }

+    const designConfigMap = {
+      'tiny-smb-theme': designSmbConfig
+    }
+
+    const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
+
    return {
      menuData,
      state,
-      fn
+      fn,
+      changeTheme,
+      currThemeLabel,
+      modeState,
+      modeFn,
+      rightRef,
+      design: designConfigMap[lastThemeKey] || {}
    }
  }
 }
--- a/examples/docs/newsrc/resourceMobile.js
+++ b/examples/docs/newsrc/resourceMobile.js
@ -12,13 +12,13 @@ export const demoVue = import.meta.glob('../resources/mobile/app/**/*.vue', { ea
 export const apis = import.meta.glob('../resources/mobile/app/*/webdoc/*.js', { eager: false })

 const menuData = cmpMenus.slice(0)
-function processMenu(menu) {
+function processMenu(menu, isTop) {
  menu.id = menu.key
-  menu.label = menu.nameCn || menu.label
+  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))
+menuData.forEach((m) => processMenu(m, true))

 export { menuData }
--- a/examples/docs/newsrc/resourceMobileFirst.js
+++ b/examples/docs/newsrc/resourceMobileFirst.js
@ -0,0 +1,19 @@
+import { cmpMenus } from '../resources/mobile-first/menus.js'
+
+export const demoStr = import.meta.glob('../resources/mobile-first/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoVue = import.meta.glob('../resources/mobile-first/app/**/*.vue', { eager: false })
+
+// api属性
+export const apis = import.meta.glob('../resources/mobile-first/app/*/webdoc/*.js', { eager: false })
+
+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 }
--- a/examples/docs/newsrc/resourcePc.js
+++ b/examples/docs/newsrc/resourcePc.js
@ -0,0 +1,29 @@
+// eager = true，可以校验vue,json等文件错误。
+// eager = false, 可以懒加载，优化速度
+
+// demo源码
+// 同web-doc的菜单资源
+import originMenuData from '../resources/pc/menus.js'
+
+export const demoStr = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false, as: 'raw' })
+export const demoVue = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false })
+
+// api属性
+export const zhApi = import.meta.glob('../resources/pc/api/zh-CN/**/*.json', { eager: false })
+// export const enApi = import.meta.glob('@resources/api/en-US/**/*.json', { eager: false })
+
+// // json, demo的配置文件
+export const zhDemo = import.meta.glob('../resources/pc/demo-config/zh-CN/**/*.json', { eager: false })
+// 格式：{zh,en,enSuffix,path}
+// path: '/breadcrumb' 对应着【 demo的配置文件】。每个path有多个示例
+const menuData = originMenuData.slice(0)
+function processMenu(menu, isTop) {
+  menu.id = menu.en
+  menu.label = isTop ? menu.zh : `${menu.zh} ${menu.en}`
+  if (menu.children && menu.children.length > 0) {
+    menu.children.forEach((m) => processMenu(m, false))
+  }
+}
+menuData.forEach((m) => processMenu(m, true))
+
+export { menuData }
--- a/examples/docs/newsrc/style.css
+++ b/examples/docs/newsrc/style.css
--- a/examples/docs/newsrc/tailwind.css
+++ b/examples/docs/newsrc/tailwind.css
@ -0,0 +1,4 @@
+/* 调试mobile-first时，再放开此处 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/examples/docs/newsrc/uses/index.js
+++ b/examples/docs/newsrc/uses/index.js
@ -1,4 +1,5 @@
 export { useStorage, $local, $session } from './useStorage.js'
 export { useFileSaver } from './useFileSaver.js'
-export { useMonaco } from './useMonaco.js'
 export { useFullScreen } from './useFullScreen.js'
+export { useTheme } from './useTheme'
+export { useModeCtx } from './useModeCtx'
--- a/examples/docs/newsrc/uses/useModeCtx.js
+++ b/examples/docs/newsrc/uses/useModeCtx.js
@ -0,0 +1,59 @@
+// import Vue from 'vue'
+import { hooks } from '@opentiny/vue-common'
+import { $local } from './useStorage'
+
+const defaultPath = {
+  pc: '/pc/button/base',
+  mobile: '/mobile/navbar/left-right-arrow',
+  'mobile-first': '/mobile-first/calendar-bar/basic-usage'
+}
+const modeNames = Object.keys(defaultPath)
+
+const parsePath = (path) => {
+  const items = path.split('/')
+  state.mode = items[1]
+  state.pathName = items[2]
+  state.demoId = items[3]
+}
+
+// todo vue2需要预注册一下 @vue/composition-api
+const state = hooks.reactive({
+  mode: '',
+  pathName: '',
+  demoId: '',
+  modeCtx: $local.modeCtx || defaultPath
+})
+
+const fn = {
+  // 加载页面
+  loadPage: () => {
+    const urlSegments = location.pathname.split('/')
+    let mode = urlSegments[1]
+    if (modeNames.includes(mode)) {
+      // 有效的url, 更新缓存
+      parsePath(location.pathname)
+      fn.cacheCtx()
+    } else {
+      // 无效的url
+      fn.changeMode('pc')
+      fn.pushToUrl()
+    }
+  },
+  changeMode: (mode) => {
+    parsePath(state.modeCtx[mode])
+  },
+  // 保存ctx
+  cacheCtx: () => {
+    state.modeCtx[state.mode] = `/${state.mode}/${state.pathName}/${state.demoId}`
+    $local.modeCtx = state.modeCtx
+  },
+  // 更新url
+  pushToUrl: () => history.pushState({}, '', state.modeCtx[state.mode])
+}
+
+export function useModeCtx() {
+  return {
+    state,
+    fn
+  }
+}
--- a/examples/docs/newsrc/uses/useTheme.js
+++ b/examples/docs/newsrc/uses/useTheme.js
@ -0,0 +1,33 @@
+import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
+import { tinyAuroraTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'
+import { hooks } from '@opentiny/vue-common'
+
+export function useTheme() {
+  const theme = new TinyThemeTool()
+  const currThemeLabel = hooks.ref('tiny-default-theme')
+  const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
+
+  const THEME_MAP = {
+    'tiny-aurora-theme': tinyAuroraTheme,
+    'tiny-smb-theme': tinySmbTheme
+  }
+
+  const changeTheme = ({ vm }) => {
+    localStorage.setItem('tinyThemeToolkey', vm.label)
+    theme.changeTheme(THEME_MAP[vm.label])
+    currThemeLabel.value = vm.label
+    // 刷新页面保证对应的主题系统全局配置生效
+    location.reload()
+  }
+
+  // 切换上次缓存的主题
+  if (THEME_MAP[lastThemeKey]) {
+    theme.changeTheme(THEME_MAP[lastThemeKey])
+    currThemeLabel.value = lastThemeKey
+  }
+
+  return {
+    changeTheme,
+    currThemeLabel
+  }
+}
--- a/examples/docs/package.json
+++ b/examples/docs/package.json
@ -1,14 +1,8 @@
 {
  "name": "@opentiny/vue-docs",
  "type": "module",
-  "private": true,
-  "version": "1.0.6-mf.0",
+  "version": "1.0.7",
  "description": "",
-  "scripts": {
-    "docs:build": "vuepress build",
-    "docs:clean-dev": "vuepress dev --clean-cache",
-    "docs:dev": "vuepress dev"
-  },
  "keywords": [],
  "author": "",
  "license": "ISC",
@ -17,35 +11,11 @@
    "@opentiny/vue-common": "workspace:~",
    "@opentiny/vue-icon": "workspace:~",
    "@opentiny/vue-theme-mobile": "workspace:~",
+    "@opentiny/vue-design-aurora": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
    "sortablejs": "1.15.0"
  },
-  "devDependencies": {
-    "@opentiny-internal/unplugin-virtual-template": "workspace:*",
-    "@playwright/test": "^1.29.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^2.1.0",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/runtime-core": "^3.2.31",
-    "@vue/runtime-dom": "^3.2.31",
-    "@vue/shared": "^3.2.31",
-    "postcss": "^8.4.16",
-    "vite": "^4.0.2",
-    "vite-plugin-dynamic-import": "^1.2.4",
-    "vite-plugin-importer": "^0.2.5",
-    "vite-plugin-importus": "^1.0.4",
-    "vite-plugin-inspect": "^0.7.11",
-    "vite-plugin-static-copy": "0.12.0",
-    "vite-svg-loader": "^3.6.0",
-    "vue": "^3.2.21",
-    "monaco-editor": "^0.34.1",
-    "monaco-editor-core": "^0.34.1",
-    "monaco-volar": "0.0.6",
-    "onigasm": "^2.2.5",
-    "unocss": "^0.48.0",
-    "@unocss/core": "^0.48.0",
-    "@unocss/preset-icons": "^0.48.0",
-    "@unocss/transformer-directives": "^0.48.0",
-    "@vuepress/client": "^2.0.0-beta.61",
-    "vuepress": "^2.0.0-beta.61"
-  }
-}
+  "files": [
+    "resources"
+  ]
+}
--- a/examples/docs/resources/mobile-first/app/action-sheet/action.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/action.vue
@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div>
+      <tiny-button type="primary" @click="boxVisibility = true">
+        显示提示语
+      </tiny-button>
+      <tiny-button type="primary" style="margin-left: 20px;" @click="boxVisibility2 = true">
+        不显示提示语
+      </tiny-button>
+    </div>
+
+    <tiny-action-sheet title="显示提示语" type="action" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event" @click="selectOption" @close="close"></tiny-action-sheet>
+
+    <tiny-action-sheet type="action" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event" @click="selectOption" @close="close"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false,
+      boxVisibility2: false,
+      menus: ['转交', '征询', '撤回']
+    }
+  },
+  methods: {
+    selectOption(option, index) {
+      Modal.message(`选择了第${index + 1}项 [${option}]`)
+    },
+    close() {
+      Modal.message('点击取消了')
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue
@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary">
+      动作面板
+    </tiny-button>
+    <tiny-action-sheet title="标题" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue
@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div>
+      <p>单选，值：{{ activeName1 }}</p>
+      <tiny-button @click=";(ellipsis = true), (boxVisibility1 = true)">内容超出隐藏</tiny-button>
+      <tiny-button @click=";(ellipsis = false), (boxVisibility1 = true)">内容超出显示</tiny-button>
+    </div>
+    <br />
+    <div>
+      <p>多选，值：{{ activeName2 }}</p>
+      <tiny-button @click=";(ellipsis = true), (boxVisibility2 = true)">内容超出隐藏</tiny-button>
+      <tiny-button @click=";(ellipsis = false), (boxVisibility2 = true)">内容超出显示</tiny-button>
+    </div>
+
+    <tiny-action-sheet
+      v-model="activeName1"
+      title="标题1"
+      :ellipsis="ellipsis"
+      :search-config="searchConfig"
+      :show-footer="true"
+      :menus="menus"
+      :visible="boxVisibility1"
+      @update:visible="boxVisibility1 = $event"
+    ></tiny-action-sheet>
+    <tiny-action-sheet
+      v-model="activeName2"
+      title="标题2"
+      multiple
+      :ellipsis="ellipsis"
+      :search-config="searchConfig"
+      :show-footer="true"
+      :menus="menus"
+      :visible="boxVisibility2"
+      @update:visible="boxVisibility2 = $event"
+    ></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    const list = [
+      {
+        id: 1,
+        label: '进行中'
+      },
+      {
+        id: 2,
+        label: '未开始'
+      },
+      {
+        id: 3,
+        label: '已完成'
+      },
+      {
+        id: 4,
+        label:
+          '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
+      }
+    ]
+
+    return {
+      activeName1: 1,
+      activeName2: [],
+      ellipsis: false,
+      boxVisibility1: false,
+      boxVisibility2: false,
+      searchConfig: {
+        options: list
+      },
+      menus: list
+    }
+  },
+  methods: {}
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue
@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary" style="max-width:200px">
+      单击遮罩层不关闭弹窗
+    </tiny-button>
+    <tiny-action-sheet title="标题" :mask-closable="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/mask.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/mask.vue
@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary">
+      关闭遮罩层
+    </tiny-button>
+    <tiny-action-sheet title="标题" :mask="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue
@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div>
+      <tiny-button @click="boxVisibility1 = true">
+        单选
+      </tiny-button>
+      <p>值：{{ activeName1 }}</p>
+    </div>
+    <br />
+    <div>
+      <tiny-button @click="boxVisibility2 = true">
+        多选
+      </tiny-button>
+      <p>值：{{ activeName2 }}</p>
+    </div>
+
+    <tiny-action-sheet v-model="activeName1" title="标题1" :search-config="searchConfig" :menus="menus" :visible="boxVisibility1" @update:visible="boxVisibility1 = $event"></tiny-action-sheet>
+    <tiny-action-sheet v-model="activeName2" title="标题2" multiple :search-config="searchConfig" :show-footer="true" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event"></tiny-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    const list = [
+      {
+        id: 1,
+        label: '进行中'
+      },
+      {
+        id: 2,
+        label: '未开始'
+      },
+      {
+        id: 3,
+        label: '已完成'
+      },
+      {
+        id: 4,
+        label:
+          '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
+      }
+    ]
+
+    return {
+      activeName1: 1,
+      activeName2: [],
+      boxVisibility1: false,
+      boxVisibility2: false,
+      searchConfig: {
+        options: list
+      },
+      menus: list
+    }
+  },
+  methods: {}
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/show.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/show.vue
@ -0,0 +1,58 @@
+<template>
+  <div>
+    <span>
+      <tiny-button @click="boxVisibility4 = true">默认属性配置</tiny-button>
+      <tiny-action-sheet v-model="activeName" :menus="menus" :visible="boxVisibility4" @update:visible="boxVisibility4 = $event"></tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility1 = true">隐藏头部</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :show-header="false" :menus="menus" :visible="boxVisibility1" @update:visible="boxVisibility1 = $event"></tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility2 = true">显示底部</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :show-footer="true" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event"></tiny-action-sheet>
+    </span>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: 1,
+      boxVisibility1: false,
+      boxVisibility2: false,
+      boxVisibility3: false,
+      boxVisibility4: false,
+      boxVisibility5: false,
+      boxVisibility6: false,
+      menus: [
+        {
+          id: 1,
+          label: '进行中'
+        },
+        {
+          id: 2,
+          label: '未开始'
+        },
+        {
+          id: 3,
+          label: '已完成'
+        },
+        {
+          id: 4,
+          label: '已过期已过期已过期已过期已过期已过期已过期'
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/action-sheet/slot.vue
+++ b/examples/docs/resources/mobile-first/app/action-sheet/slot.vue
@ -0,0 +1,81 @@
+<template>
+  <div>
+    <span>
+      <tiny-button @click="boxVisibility3 = true">头部左侧插槽</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility3" @update:visible="boxVisibility3 = $event">
+        <template #header-left>
+          <div @click="activeName = ''">清空</div>
+        </template>
+      </tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility4 = true">头部右侧插槽</tiny-button>
+      <tiny-action-sheet ref="actionSheet4" v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility4" @update:visible="boxVisibility4 = $event">
+        <template #header-right>
+          <div @click="$refs.actionSheet4.close()">自定义关闭</div>
+        </template>
+      </tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility5 = true">内容插槽</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility5" @update:visible="boxVisibility5 = $event">
+        <div class="text-center">
+          <div>选项1</div>
+          <div>选项2</div>
+          <div>选项3</div>
+          <div>选项4</div>
+        </div>
+      </tiny-action-sheet>
+    </span>
+    <span>
+      <tiny-button @click="boxVisibility6 = true">底部插槽</tiny-button>
+      <tiny-action-sheet v-model="activeName" title="标题1" :show-footer="true" :menus="menus" :visible="boxVisibility6" @update:visible="boxVisibility6 = $event">
+        <template #footer>
+          <tiny-button>自定义按钮1</tiny-button> &nbsp;&nbsp; <tiny-button>自定义按钮2</tiny-button>
+        </template>
+      </tiny-action-sheet>
+    </span>
+  </div>
+</template>
+
+<script>
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: 1,
+      boxVisibility1: false,
+      boxVisibility2: false,
+      boxVisibility3: false,
+      boxVisibility4: false,
+      boxVisibility5: false,
+      boxVisibility6: false,
+      menus: [
+        {
+          id: 1,
+          label: '进行中'
+        },
+        {
+          id: 2,
+          label: '未开始'
+        },
+        {
+          id: 3,
+          label: '已完成'
+        },
+        {
+          id: 4,
+          label: '已过期已过期已过期已过期已过期已过期已过期'
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/base.vue
+++ b/examples/docs/resources/mobile-first/app/alert/base.vue
@ -0,0 +1,19 @@
+<template>
+  <div>
+    <tiny-alert description="type 为默认值 info"></tiny-alert>
+    <tiny-alert type="error" description="type 为 error"></tiny-alert>
+    <tiny-alert type="success" description="type 为 success"></tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+    <tiny-alert type="warning" single-line scrolling description="single-line 开启单行，scrolling 开启滚动，通过属性 close-text 自定义关闭按钮文本，通过 center 属性可使文字显示居中,通过 type 设置不同的类型。可选值：success、warning、info、error，默认值：info "></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/center.vue
+++ b/examples/docs/resources/mobile-first/app/alert/center.vue
@ -0,0 +1,13 @@
+<template>
+  <tiny-alert center description="文字居中"></tiny-alert>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/closable.vue
+++ b/examples/docs/resources/mobile-first/app/alert/closable.vue
@ -0,0 +1,16 @@
+<template>
+  <div>
+    <tiny-alert description="closable 默认值为 true"></tiny-alert>
+    <tiny-alert :closable="false" description="closable 设置为 false"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/close-text.vue
+++ b/examples/docs/resources/mobile-first/app/alert/close-text.vue
@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-alert description="默认关闭按钮"></tiny-alert>
+    <tiny-alert description="关闭按钮自定义文本" close-text="关闭" @close="close"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+import { alert } from '@opentiny/vue-modal'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  methods: {
+    close() {
+      alert('关闭了')
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/close.vue
+++ b/examples/docs/resources/mobile-first/app/alert/close.vue
@ -0,0 +1,18 @@
+<template>
+  <tiny-alert description="自定义的 close 事件" @close="close"></tiny-alert>
+</template>
+
+<script>
+import { Alert, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  methods: {
+    close() {
+      Modal.message('关闭了')
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/custom-description.vue
+++ b/examples/docs/resources/mobile-first/app/alert/custom-description.vue
@ -0,0 +1,19 @@
+<template>
+  <div>
+    <tiny-alert size="large" description="size 为 large 时根据 description 属性自定义内容"></tiny-alert>
+    <br />
+    <tiny-alert size="large">
+      <template #description> size 为 large 时根据 description slot 自定义内容 </template>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue
+++ b/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue
@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini">取消操作</tiny-button>
+    </tiny-alert>
+    <br />
+    <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
+    <br />
+    <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini">取消操作</tiny-button>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyButton: Button
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/icon.vue
+++ b/examples/docs/resources/mobile-first/app/alert/icon.vue
@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-alert :icon="IconBoat" description="自定义图标"></tiny-alert>
+    <tiny-alert description="默认图标"></tiny-alert>
+    <tiny-alert type="success" description="type 为 success 的默认图标"></tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning 的默认图标"></tiny-alert>
+    <tiny-alert type="error" description="type 为 error 的默认图标"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+import { IconBoat } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  data() {
+    return {
+      IconBoat: IconBoat()
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/show-foldable.vue
+++ b/examples/docs/resources/mobile-first/app/alert/show-foldable.vue
@ -0,0 +1,48 @@
+<template>
+  <div>
+    命名插槽：
+    <tiny-alert size="large" :closable="false" show-foldable>
+      <template #description>
+        <div v-for="item in 12">
+          {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }}
+          <tiny-link :underline="false" class="-mt-1">相关操作</tiny-link><br />
+        </div>
+      </template>
+    </tiny-alert>
+    <tiny-alert :show-icon="false" size="large" title="slot 自定义内容" class="demo-alert" show-foldable>
+      <template #description>
+        {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }}
+        <tiny-link :underline="false" class="-mt-1">相关操作</tiny-link><br />
+        {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }}
+        <tiny-link :underline="false" class="-mt-1">相关操作</tiny-link>
+      </template>
+    </tiny-alert>
+    默认插槽：
+    <tiny-alert size="large" show-foldable>
+      <div v-for="item in 4">
+        <div class="multi-line">{{ msg }}<tiny-link :underline="false" class="-mt-1">相关操作</tiny-link></div>
+      </div>
+    </tiny-alert>
+    <tiny-alert :show-icon="false" size="large" show-foldable :closable="false">
+      <div v-for="item in 12">
+        <div class="multi-line">{{ msg }} <tiny-link :underline="false">相关操作</tiny-link></div>
+      </div>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert, Link } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyLink: Link
+  },
+  data() {
+    return {
+      msg: '这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。'
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/show-icon.vue
+++ b/examples/docs/resources/mobile-first/app/alert/show-icon.vue
@ -0,0 +1,16 @@
+<template>
+  <div>
+    <tiny-alert description="show-icon 默认值为 true，显示图标"></tiny-alert>
+    <tiny-alert :show-icon="false" description="show-icon 设置为 false，不显示图标"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/size.vue
+++ b/examples/docs/resources/mobile-first/app/alert/size.vue
@ -0,0 +1,16 @@
+<template>
+  <div>
+    <tiny-alert size="normal" description="size 为 normal"></tiny-alert>
+    <tiny-alert size="large" title="size 为 large"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/slot-default.vue
+++ b/examples/docs/resources/mobile-first/app/alert/slot-default.vue
@ -0,0 +1,68 @@
+<template>
+  <div>
+    <tiny-alert>
+      <template #description>这是一条普通的消息提示 <tiny-button type="text">相关操作</tiny-button></template>
+    </tiny-alert>
+    <tiny-alert type="warning">
+      <template #description>
+        <div class="multi-line">{{ msg }}</div>
+      </template>
+    </tiny-alert>
+    <tiny-alert type="error">
+      <template #description>
+        {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }} <tiny-button type="text">相关操作</tiny-button>
+      </template>
+    </tiny-alert>
+
+    <tiny-alert size="large" title="slot 自定义内容" class="demo-alert">
+      <span>自定义内容</span>
+    </tiny-alert>
+    <br />
+    <tiny-alert size="large" title="slot 自定义交互操作" class="demo-alert">
+      <tiny-button size="mini" type="primary">确定</tiny-button>
+      <tiny-button size="mini">取消</tiny-button>
+    </tiny-alert>
+    <br />
+    <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini">取消操作</tiny-button>
+    </tiny-alert>
+    <br />
+    <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
+    <br />
+    <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
+      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini">取消操作</tiny-button>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      msg: '这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。这是一条普通的消息提示，使用插槽展示多行信息。'
+    }
+  }
+}
+</script>
+
+<style>
+/* IE下不支持 */
+.multi-line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.demo-alert .tiny-alert__opration {
+  margin-top: 6px;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/alert/title.vue
+++ b/examples/docs/resources/mobile-first/app/alert/title.vue
@ -0,0 +1,19 @@
+<template>
+  <div>
+    <tiny-alert size="large" title="通过属性设置自定义 title"></tiny-alert>
+    <br />
+    <tiny-alert size="large">
+      <template #title>通过 slot 设置自定义 title</template>
+    </tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/type.vue
+++ b/examples/docs/resources/mobile-first/app/alert/type.vue
@ -0,0 +1,19 @@
+<template>
+  <div>
+    <tiny-alert type="info" description="type 为 info"></tiny-alert>
+    <tiny-alert type="error" description="type 为 error"></tiny-alert>
+    <tiny-alert type="success" description="type 为 success"></tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyButton: Button
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md
+++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md
@ -0,0 +1,9 @@
+---
+title: Alert 警告
+---
+
+# Alert 警告
+
+<div>
+
+</div>
--- a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md
+++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md
@ -0,0 +1,9 @@
+---
+title: Alert 警告
+---
+
+# Alert 警告
+
+<div>
+
+</div>
--- a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js
+++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js
@ -0,0 +1,117 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'type',
+      name: {
+        'zh-CN': '类型',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>通过<code>type</code>设置不同的类型。可选值：success、warning、info、error，默认值：info 。</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['type.vue']
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '大尺寸',
+        'en-US': 'button round'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>',
+        'en-US': '<p>button round</p>'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'title',
+      name: {
+        'zh-CN': '自定义标题',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>当  <code>size</code>为 large 时显示标题，可设置  <code>title</code> 或  <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['title.vue']
+    },
+    {
+      demoId: 'closable',
+      name: {
+        'zh-CN': '不可关闭',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过  <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['closable.vue']
+    },
+    {
+      demoId: 'custom-description',
+      name: {
+        'zh-CN': '自定义提示内容',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['custom-description.vue']
+    },
+    {
+      demoId: 'slot-default',
+      name: {
+        'zh-CN': '自定义交互操作',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>当 <code>size</code> 为 large 时，设置默认插槽自定义交互操作。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-default.vue']
+    },
+    {
+      demoId: 'close',
+      name: {
+        'zh-CN': '关闭事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><code>close</code> 事件，关闭警告框时触发。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['close.vue']
+    },
+    {
+      demoId: 'feedback-of-result',
+      name: {
+        'zh-CN': '表单提交结果反馈',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>当 <code>size</code> 为 large 时，属性 <code>description</code> 和默认插槽结合使用，可渲染提交反馈界面。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['feedback-of-result.vue']
+    },
+    {
+      demoId: 'show-icon',
+      name: {
+        'zh-CN': '是否显示图标',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过配置  <code>show-icon</code>  属性，控制图标是否显示。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['show-icon.vue']
+    }
+  ],
+  apis: []
+}
--- a/examples/docs/resources/mobile-first/app/badge/base.vue
+++ b/examples/docs/resources/mobile-first/app/badge/base.vue
@ -0,0 +1,65 @@
+<template>
+  <div class="w-3/5">
+    <span>数字标记 : </span>
+    <tiny-badge :value="0"></tiny-badge>
+    <tiny-badge is-dot></tiny-badge>
+    <div class="flex items-center my-4">
+      <tiny-badge>点标记 :</tiny-badge>
+      <div class="flex justify-between items-center w-80">
+        <tiny-badge is-dot>
+          我的待办
+        </tiny-badge>
+        <tiny-badge type="icon" is-dot>
+          <tiny-user-head type="icon"></tiny-user-head>
+        </tiny-badge>
+        <tiny-badge type="icon" is-dot>
+          <tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
+        </tiny-badge>
+        <tiny-badge type="icon" is-dot>
+          <tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
+        </tiny-badge>
+      </div>
+    </div>
+    <div class="flex items-center my-4">
+      <span>数字标记 : </span>
+      <div class="flex justify-between items-center w-80">
+        <tiny-badge :value="0">
+          我的待办
+        </tiny-badge>
+        <tiny-badge :value="0" type="icon">
+          <tiny-user-head type="icon" round></tiny-user-head>
+        </tiny-badge>
+        <tiny-badge :value="0" type="icon">
+          <tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
+        </tiny-badge>
+        <tiny-badge :value="0" type="icon">
+          <tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
+        </tiny-badge>
+        <tiny-badge :value="0" type="icon">
+          <tiny-user-head type="icon"></tiny-user-head>
+        </tiny-badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+import { UserHead } from '@opentiny/vue'
+import { UserContact } from '@opentiny/vue'
+import { IconSmile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyBadge: Badge,
+    TinyUserHead: UserHead,
+    TinyUserContact: UserContact
+  },
+  data() {
+    return {
+      text: '文字',
+      IconSmile: IconSmile()
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue
+++ b/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue
@ -0,0 +1,34 @@
+<template>
+  <div>
+    <tiny-badge :value="unread" :hidden="unread === 0">
+      我的待办
+    </tiny-badge>
+    <br />
+    <tiny-button :disabled="unread === 0" @click="read">
+      读取一条消息
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Badge, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      unread: 2
+    }
+  },
+  methods: {
+    read() {
+      if (this.unread > 0) {
+        this.unread = this.unread - 1
+      }
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/is-dot.vue
+++ b/examples/docs/resources/mobile-first/app/badge/is-dot.vue
@ -0,0 +1,15 @@
+<template>
+  <tiny-badge is-dot>
+    小圆点显示
+  </tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/max.vue
+++ b/examples/docs/resources/mobile-first/app/badge/max.vue
@ -0,0 +1,15 @@
+<template>
+  <tiny-badge :value="500" :max="99">
+    最大值显示
+  </tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/slot-content.vue
+++ b/examples/docs/resources/mobile-first/app/badge/slot-content.vue
@ -0,0 +1,18 @@
+<template>
+  <tiny-badge :value="2">
+    自定义内容插槽
+    <template #content>
+      自定义
+    </template>
+  </tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/slot-default.vue
+++ b/examples/docs/resources/mobile-first/app/badge/slot-default.vue
@ -0,0 +1,17 @@
+<template>
+  <tiny-badge :value="2">
+    <template #default>
+      <span style="color: red">自定义默认插槽</span>
+    </template>
+  </tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/target.vue
+++ b/examples/docs/resources/mobile-first/app/badge/target.vue
@ -0,0 +1,21 @@
+<template>
+  <div>
+    <tiny-badge :value="2" href="/" target="_self">
+      当前标签打开
+    </tiny-badge>
+    <br />
+    <tiny-badge :value="2" href="/" target="_blank">
+      新建标签打开
+    </tiny-badge>
+  </div>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/type-left.vue
+++ b/examples/docs/resources/mobile-first/app/badge/type-left.vue
@ -0,0 +1,33 @@
+<template>
+  <div>
+    <tiny-badge is-dot show-left type="danger">
+      danger 类型
+    </tiny-badge>
+    <br />
+    <tiny-badge is-dot show-left type="primary">
+      primary 类型
+    </tiny-badge>
+    <br />
+    <tiny-badge is-dot show-left type="success">
+      success 类型
+    </tiny-badge>
+    <br />
+    <tiny-badge is-dot show-left type="warning">
+      warning 类型
+    </tiny-badge>
+    <br />
+    <tiny-badge is-dot show-left type="info">
+      info 类型
+    </tiny-badge>
+  </div>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/badge/type.vue
+++ b/examples/docs/resources/mobile-first/app/badge/type.vue
@ -0,0 +1,20 @@
+<template>
+  <tiny-badge :value="value1">
+    默认类型
+  </tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  },
+  data() {
+    return {
+      value1: 2
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/base.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/base.vue
@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <span>当前选中值：{{ checkedVal }}</span>
+  </div>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      checkedVal: 'Button1',
+      groupData: [
+        { text: 'Button1', value: 'Button1' },
+        { text: 'Button2', value: 'Button2' },
+        { text: 'Button3', value: 'Button3' }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/data.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/data.vue
@ -0,0 +1,22 @@
+<template>
+  <tiny-button-group :data="groupData"></tiny-button-group>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      groupData: [
+        { text: 'Button1', value: 1 },
+        { text: 'Button2', value: 2 },
+        { text: 'Button3', value: 3 }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/disabled.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/disabled.vue
@ -0,0 +1,22 @@
+<template>
+  <tiny-button-group :data="groupData" disabled></tiny-button-group>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      groupData: [
+        { text: 'Button1', value: 1 },
+        { text: 'Button2', value: 2 },
+        { text: 'Button3', value: 3 }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/plain.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/plain.vue
@ -0,0 +1,22 @@
+<template>
+  <tiny-button-group :data="groupData" plain></tiny-button-group>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      groupData: [
+        { text: 'Button1', value: 1 },
+        { text: 'Button2', value: 2 },
+        { text: 'Button3', value: 3 }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/size.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/size.vue
@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <span>当前选中值：{{ checkedVal }}</span>
+  </div>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      checkedVal: 'Button1',
+      groupData: [
+        { text: 'Button1', value: 'Button1' },
+        { text: 'Button2', value: 'Button2' },
+        { text: 'Button3', value: 'Button3' }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/slot-default.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/slot-default.vue
@ -0,0 +1,18 @@
+<template>
+  <tiny-button-group>
+    <tiny-button type="primary">Button1</tiny-button>
+    <tiny-button type="success">Button2</tiny-button>
+    <tiny-button disabled>Button3</tiny-button>
+  </tiny-button-group>
+</template>
+
+<script>
+import { Button, ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyButtonGroup: ButtonGroup
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue
+++ b/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue
@ -0,0 +1,24 @@
+<template>
+  <tiny-button-group :data="groupData" :text-field="textField" :value-field="valueField"></tiny-button-group>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      textField: 'text-key',
+      valueField: 'value-key',
+      groupData: [
+        { 'text-key': 'Button1', 'value-key': 1 },
+        { 'text-key': 'Button2', 'value-key': 2 },
+        { 'text-key': 'Button3', 'value-key': 3 }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/autofocus.vue
+++ b/examples/docs/resources/mobile-first/app/button/autofocus.vue
@ -0,0 +1,24 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button autofocus>
+      默认聚焦
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/base-saas.vue
+++ b/examples/docs/resources/mobile-first/app/button/base-saas.vue
@ -0,0 +1,71 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button>默认按钮</tiny-button>
+      <tiny-button type="primary" native-type="submit">
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success">
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info">
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning">
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger">
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button plain>
+        朴素按钮
+      </tiny-button>
+      <tiny-button type="primary" plain>
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success" plain>
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info" plain>
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning" plain>
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger" plain>
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/base.vue
+++ b/examples/docs/resources/mobile-first/app/button/base.vue
@ -0,0 +1,71 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button>默认按钮</tiny-button>
+      <tiny-button type="primary" native-type="submit">
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success">
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info">
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning">
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger">
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button plain>
+        线性按钮
+      </tiny-button>
+      <tiny-button type="primary" plain>
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success" plain>
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info" plain>
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning" plain>
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger" plain>
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/button-class.vue
+++ b/examples/docs/resources/mobile-first/app/button/button-class.vue
@ -0,0 +1,18 @@
+<template>
+  <div class="demo">
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button button-class="text-color-brand-active bg-color-bg-3">
+      主要按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/circle.vue
+++ b/examples/docs/resources/mobile-first/app/button/circle.vue
@ -0,0 +1,61 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button circle>
+        C
+      </tiny-button>
+      <tiny-button type="primary" circle>
+        C
+      </tiny-button>
+      <tiny-button type="success" circle>
+        C
+      </tiny-button>
+      <tiny-button type="info" circle>
+        C
+      </tiny-button>
+      <tiny-button type="warning" circle>
+        C
+      </tiny-button>
+      <tiny-button type="danger" circle>
+        C
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button :icon="IconSearch" circle></tiny-button>
+      <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
+      <tiny-button type="success" :icon="IconYes" circle></tiny-button>
+      <tiny-button type="info" :icon="IconMail" circle></tiny-button>
+      <tiny-button type="warning" :icon="IconStarO" circle></tiny-button>
+      <tiny-button type="danger" :icon="IconDel" circle></tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/click.vue
+++ b/examples/docs/resources/mobile-first/app/button/click.vue
@ -0,0 +1,26 @@
+<template>
+  <tiny-button @click="click">
+    默认按钮
+  </tiny-button>
+</template>
+
+<script>
+import { Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  methods: {
+    click() {
+      Modal.message('click')
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue
+++ b/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue
@ -0,0 +1,52 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button @click="disabled = !disabled">
+        {{ disabled ? '点击启用按钮' : '点击禁用按钮' }}
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button :disabled="disabled">
+        默认按钮
+      </tiny-button>
+      <tiny-button type="primary" :disabled="disabled">
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success" :disabled="disabled">
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info" :disabled="disabled">
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning" :disabled="disabled">
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger" :disabled="disabled">
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      disabled: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/icon.vue
+++ b/examples/docs/resources/mobile-first/app/button/icon.vue
@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-button :icon="IconSearch"></tiny-button>
+    <tiny-button type="primary" :icon="IconEdit"></tiny-button>
+    <tiny-button type="success" native-type="submit" :icon="IconYes"></tiny-button>
+    <tiny-button type="info" :icon="IconMail"></tiny-button>
+    <tiny-button type="warning" :icon="IconStarO"></tiny-button>
+    <tiny-button type="danger" :icon="IconDel"></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/image.vue
+++ b/examples/docs/resources/mobile-first/app/button/image.vue
@ -0,0 +1,21 @@
+<template>
+  <tiny-button>
+    <img :src="image" width="26" />
+    <span>图片按钮</span>
+  </tiny-button>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      image: 'webnova/static/images/hae-logo.png'
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/link.vue
+++ b/examples/docs/resources/mobile-first/app/button/link.vue
@ -0,0 +1,17 @@
+<template>
+  <div>
+    <tiny-button type="text" href="/">
+      超链接按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/loading.vue
+++ b/examples/docs/resources/mobile-first/app/button/loading.vue
@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="primary" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="success" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="info" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="warning" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="danger" loading>
+      加载中
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/plain.vue
+++ b/examples/docs/resources/mobile-first/app/button/plain.vue
@ -0,0 +1,38 @@
+<template>
+  <div>
+    <tiny-button plain>
+      朴素按钮
+    </tiny-button>
+    <tiny-button type="primary" plain>
+      主要按钮
+    </tiny-button>
+    <tiny-button type="success" plain>
+      成功按钮
+    </tiny-button>
+    <tiny-button type="info" plain>
+      信息按钮
+    </tiny-button>
+    <tiny-button type="warning" plain>
+      警告按钮
+    </tiny-button>
+    <tiny-button type="danger" plain>
+      危险按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/reset-time.vue
+++ b/examples/docs/resources/mobile-first/app/button/reset-time.vue
@ -0,0 +1,27 @@
+<template>
+  <div>
+    <tiny-button>默认禁用</tiny-button>
+    <tiny-button :reset-time="0">
+      无禁用
+    </tiny-button>
+    <tiny-button :reset-time="5000">
+      禁用 5 秒
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/round.vue
+++ b/examples/docs/resources/mobile-first/app/button/round.vue
@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button round>
+      默认按钮
+    </tiny-button>
+    <tiny-button type="primary" round>
+      主要按钮
+    </tiny-button>
+    <tiny-button type="success" round>
+      成功按钮
+    </tiny-button>
+    <tiny-button type="info" round>
+      信息按钮
+    </tiny-button>
+    <tiny-button type="warning" round>
+      警告按钮
+    </tiny-button>
+    <tiny-button type="danger" round>
+      危险按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/size.vue
+++ b/examples/docs/resources/mobile-first/app/button/size.vue
@ -0,0 +1,30 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button size="medium">
+      中等按钮
+    </tiny-button>
+    <tiny-button size="small">
+      小型按钮
+    </tiny-button>
+    <tiny-button size="mini">
+      超小按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/slot-default.vue
+++ b/examples/docs/resources/mobile-first/app/button/slot-default.vue
@ -0,0 +1,30 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button>
+      <span>上传</span>
+      <icon-upload class="tiny-svg-size" />
+    </tiny-button>
+    <tiny-button>
+      <img :src="image" width="26" />
+      <span>图片按钮</span>
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { IconUpload } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    IconUpload: IconUpload(),
+    TinyButton: Button
+  },
+  data() {
+    return {
+      image: 'webnova/static/images/hae-logo.png'
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/button/text.vue
+++ b/examples/docs/resources/mobile-first/app/button/text.vue
@ -0,0 +1,24 @@
+<template>
+  <div>
+    <tiny-button type="text">
+      文本按钮
+    </tiny-button>
+    <tiny-button type="text" text="text属性"></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/type.vue
+++ b/examples/docs/resources/mobile-first/app/button/type.vue
@ -0,0 +1,39 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button type="primary">
+      主要按钮
+    </tiny-button>
+    <tiny-button type="success">
+      成功按钮
+    </tiny-button>
+    <tiny-button type="info">
+      信息按钮
+    </tiny-button>
+    <tiny-button type="warning">
+      警告按钮
+    </tiny-button>
+    <tiny-button type="danger">
+      危险按钮
+    </tiny-button>
+    <tiny-button type="text">
+      文本按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>
--- a/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md
+++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md
@ -0,0 +1,11 @@
+---
+title: Button 按钮
+---
+
+# Button 按钮
+
+<div>
+
+常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
+
+</div>
--- a/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md
+++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md
@ -0,0 +1,11 @@
+---
+title: Button 按钮
+---
+
+# Button 按钮
+
+<div>
+
+常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
+
+</div>
--- a/examples/docs/resources/mobile-first/app/button/webdoc/button.js
+++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.js
@ -0,0 +1,131 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'text',
+      name: {
+        'zh-CN': '文字按钮',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN':
+          '<p>设置<code>type</code> 属性为 <code>text</code> 即为文字按钮，可在标签子级或者通过 <code>text</code> 属性设置显示内容。</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['text.vue']
+    },
+    {
+      demoId: 'button-class',
+      name: {
+        'zh-CN': '定制样式类',
+        'en-US': 'button round'
+      },
+      desc: {
+        'zh-CN': '<p>设置 <code>button-class</code>  属性定制按钮样式</p>',
+        'en-US': '<p>button round</p>'
+      },
+      codeFiles: ['button-class.vue']
+    },
+    {
+      demoId: 'plain',
+      name: {
+        'zh-CN': '线性按钮',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>配置 <code>plain</code> 属性为 true，即可展示为线性按钮的形式。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['plain.vue']
+    },
+    {
+      demoId: 'link',
+      name: {
+        'zh-CN': '超链接按钮',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过设置<code>href</code> 属性可跳转到指定页面。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['link.vue']
+    },
+    {
+      demoId: 'type',
+      name: {
+        'zh-CN': '主题样式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>type</code> 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['type.vue']
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>size</code>  属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'autofocus',
+      name: {
+        'zh-CN': '聚焦',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>autofocus</code> 属性设置是否默认聚焦。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['autofocus.vue']
+    },
+    {
+      demoId: 'reset-time',
+      name: {
+        'zh-CN': '防止表单重复提交',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>reset-time</code> 属性可设置单击后按钮禁用的时长，默认的禁用时长为 1000 毫秒。<br/>可用于防止按钮连续点击出现表单重复提交的问题。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['reset-time.vue']
+    },
+    {
+      demoId: 'click',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>按钮的单击事件，该示例中单击按钮将会出现提示信息。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['click.vue']
+    },
+    {
+      demoId: 'dynamic-disable-button',
+      name: {
+        'zh-CN': '动态禁用按钮',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置  <code>disabled</code>属性为 true 后，可以禁用按钮。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['dynamic-disable-button.vue']
+    }
+  ],
+  apis: []
+}
--- a/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue
@ -0,0 +1,18 @@
+<template>
+  <tiny-calendar-bar v-model="value"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18'
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue
@ -0,0 +1,34 @@
+<template>
+  <tiny-calendar-bar v-model="value" :config="config"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18',
+      config: {
+        disabled: this.disabled,
+        disabledColorClass: 'text-color-text-disabled',
+        disabledBackgroundColorClass: 'bg-color-bg-3'
+      }
+    }
+  },
+  methods: {
+    disabled(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const dat = date.getDate()
+      // 禁用12月19号、20号和21号
+      if (year === 2022 && month === 12 && ~[19, 20, 21].indexOf(dat)) return true
+      // 其他日期不禁用 默认返回falsy值
+      return false
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue
@ -0,0 +1,33 @@
+<template>
+  <tiny-calendar-bar v-model="value" :config="config"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18',
+      config: {
+        mark: this.mark,
+        markBackgroundColorClass: 'bg-color-success'
+      }
+    }
+  },
+  methods: {
+    mark(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const dat = date.getDate()
+      // 标记12月19号有会议
+      if (year === 2022 && month === 12 && dat === 19) return 'Meeting'
+      // 其他日期没有标记 默认返回falsy值
+      return ''
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue
@ -0,0 +1,22 @@
+<template>
+  <tiny-calendar-bar v-model="value" :config="config"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18',
+      config: {
+        currentColorClass: 'text-white',
+        currentBackgroundColorClass: 'bg-color-success'
+      }
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue
@ -0,0 +1,31 @@
+<template>
+  <tiny-calendar-bar v-model="value" :config="config"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18',
+      config: {
+        renderItem: this.renderItem
+      }
+    }
+  },
+  methods: {
+    renderItem({ h, item, text }) {
+      // 对今天日期选项进行定制渲染
+      if (item && item.isToday) {
+        return h('span', '今')
+      }
+      // 默认返回falsy值，其他日期选项仍然使用内部渲染
+      return null
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md
@ -0,0 +1,11 @@
+---
+title: CalendarBar 日历栏
+---
+
+# CalendarBar 日历栏
+
+<div>
+
+CalendarBar 日历栏
+
+</div>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md
@ -0,0 +1,11 @@
+---
+title: CalendarBar 日历栏
+---
+
+# CalendarBar 日历栏
+
+<div>
+
+CalendarBar 日历栏
+
+</div>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js
@ -0,0 +1,96 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>组件 <code> v-model </code>只接受字符串值，例如 <code>2022-12-18 </code></p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'button round'
+      },
+      desc: {
+        'zh-CN':
+          '<p>使用 <code>config.disabled  </code>配置一个方法，用于判断参数日期是否禁用。 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>',
+        'en-US': '<p>button round</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'marked',
+      name: {
+        'zh-CN': '日期标记',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。 此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['marked.vue']
+    },
+    {
+      demoId: 'render-current',
+      name: {
+        'zh-CN': '当前日期',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>用户传入的日期为<code>  当前日期</code> 。 使用 <code> config.currentColorClass</code>  配置<code>  当前日期</code>  的字体颜色类名； 使用<code>  config.currentBackgroundColorClass</code>  配置<code>  当前日期</code>  的背景颜色类名。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['render-current.vue']
+    },
+    {
+      demoId: 'render-today',
+      name: {
+        'zh-CN': '今天',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>使用<code> config.renderItem </code>可以配置一个方法，对日期面板的某些项进行定制渲染。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['render-today.vue']
+    },
+    {
+      demoId: 'week-first',
+      name: {
+        'zh-CN': '周起始',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>使用<code> config.weekFirst </code>配置每周的起始天。默认值为<code> 0</code>，表示周起始为<code> 周日</code>。也可以配置为<code> 1 ~ 6</code>，分别表示<code> 周一 ~ 周六</code>。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['week-first.vue']
+    },
+    {
+      demoId: 'workday',
+      name: {
+        'zh-CN': '工作日',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>用户传入的日期为<code>  当前日期</code>，当前日期所在月份为<code>  当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。 使用<code>  config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日； 使用<code>  config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； 使用<code>  config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['marked.vue']
+    }
+  ],
+  apis: []
+}
--- a/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue
@ -0,0 +1,21 @@
+<template>
+  <tiny-calendar-bar v-model="value" :config="config"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18',
+      config: {
+        weekFirst: 1
+      }
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue
@ -0,0 +1,44 @@
+<template>
+  <tiny-calendar-bar v-model="value" :config="config"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-10-18',
+      config: {
+        workday: this.workday,
+        holiday: this.holiday,
+        workdayColorClass: 'text-black',
+        holidayColorClass: 'text-gray-200'
+      }
+    }
+  },
+  methods: {
+    workday(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const dat = date.getDate()
+      // 把10月1号到10月7号之间的所有当前月工作日判断为假期（10月1号、2号是周末不会调用到此方法）
+      if (year === 2022 && month === 10 && dat >= 1 && dat <= 7) return false
+      // 其他当前月工作日 默认返回true
+      return true
+    },
+    holiday(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const dat = date.getDate()
+      // 把10月8号、9号和29号（月末周六）判断为工作日
+      if (year === 2022 && month === 10 && ~[8, 9, 29].indexOf(dat)) return false
+      // 其他当前月周末 默认返回true
+      return true
+    }
+  }
+}
+</script>
--- a/examples/docs/resources/mobile-first/app/card/basic-usage.vue
+++ b/examples/docs/resources/mobile-first/app/card/basic-usage.vue
@ -0,0 +1,21 @@
+<template>
+  <tiny-card title="这是卡片标题" type="image" src="static/images/dsj.png">
+    <p>
+      这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+    </p>
+  </tiny-card>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {}
+  }
+}
+</script>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 1024 1024" width="20" height="20"><path d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z"></path></svg>