feat: add dialog-select and refactor sites (#378)

.all-contributorsrc

@@ -293,24 +293,6 @@
       "contributions": [
         "test"
       ]
-    },
-    {
-      "login": "Zz-ZzzZ",
-      "name": "Zz-ZzzZ",
-      "avatar_url": "https://avatars.githubusercontent.com/u/48228016?v=4",
-      "profile": "https://zz-zzzz.github.io/",
-      "contributions": [
-        "test"
-      ]
-    },
-    {
-      "login": "lyx-jay",
-      "name": "Lyx",
-      "avatar_url": "https://avatars.githubusercontent.com/u/39766860?v=4",
-      "profile": "https://github.com/lyx-jay",
-      "contributions": [
-        "code"
-      ]
     }
   ],
   "contributorsPerLine": 8,

.eslintignore

@@ -1,6 +1,7 @@
 dist
 runtime
-dist-vue2/
+dist2/
-dist-vue3/
+dist2.7/
+dist3/
 node_modules
 examples/docs/public/assets/map/js

.eslintrc.js

@@ -2,7 +2,7 @@
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: '@antfu',
+  extends: ['@antfu', 'plugin:prettier/recommended'],
   rules: {
     'vue/component-tags-order': [
       'error',
@@ -20,6 +20,7 @@ module.exports = {
     'vue/prefer-separate-static-class': 'off',
     'vue/comma-dangle': 'off',
     'vue/prefer-template': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
     'curly': 'off',
     'sort-imports': 'off',
     'prefer-template': 'off',
@@ -31,6 +32,7 @@ module.exports = {
     'import/no-duplicates': 'off',
     'quote-props': 'off',
     'prefer-const': 'off',
+    'multiline-ternary': 'off',
     '@typescript-eslint/comma-dangle': 'off',
     // '@typescript-eslint/indent': 'off',
     '@typescript-eslint/no-unsafe-assignment': 'off',

.gitignore

@@ -25,6 +25,7 @@ vitest.config.ts.timestamp*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-lock.yaml
 yarn.lock
 
 # Editor directories and files
@@ -47,3 +48,5 @@ packages/theme/scripts/theme-result.txt
 packages/theme/scripts/themeExcel.xlsx
 
 packages/theme/src/theme/*-theme/component.js
+
+

.prettierignore

@@ -1,5 +1,6 @@
 dist
 dist2
+dist2.7
 dist3
 node_modules
 internal/template

.vscode/settings.json

@@ -24,6 +24,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
+  "stylelint.validate": ["css", "less", "postcss", "scss", "sass"],
   "better-comments.highlightPlainText": true,
   "better-comments.tags": [
     {

README.md

@@ -38,9 +38,9 @@ npm i @opentiny/vue@2
 
 Then you can use the TinyVue component(such as `<tiny-button>`) in the `App.vue` file.
 
-```vue
+```html
 <script lang="ts" setup>
-import { Button as TinyButton } from '@opentiny/vue'
+  import { Button as TinyButton } from '@opentiny/vue'
 </script>
 
 <template>
@@ -124,10 +124,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/Caesar-ch"><img src="https://avatars.githubusercontent.com/u/74941512?v=4?s=100" width="100px;" alt="Caesar-ch"/><br /><sub><b>Caesar-ch</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td>
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenqifeng66"><img src="https://avatars.githubusercontent.com/u/97503755?v=4?s=100" width="100px;" alt="chenqifeng66"/><br /><sub><b>chenqifeng66</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenqifeng66" title="Tests">⚠️</a></td>
     </tr>
-    <tr>
-      <td align="center" valign="top" width="12.5%"><a href="https://zz-zzzz.github.io/"><img src="https://avatars.githubusercontent.com/u/48228016?v=4?s=100" width="100px;" alt="Zz-ZzzZ"/><br /><sub><b>Zz-ZzzZ</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zz-ZzzZ" title="Tests">⚠️</a></td>
-      <td align="center" valign="top" width="12.5%"><a href="https://github.com/lyx-jay"><img src="https://avatars.githubusercontent.com/u/39766860?v=4?s=100" width="100px;" alt="Lyx"/><br /><sub><b>Lyx</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=lyx-jay" title="Code">💻</a></td>
-    </tr>
   </tbody>
 </table>
 

README.zh-CN.md

@@ -38,9 +38,9 @@ npm i @opentiny/vue@2
 
 在`App.vue`文件中使用 TinyVue 组件。
 
-```vue
+```html
 <script lang="ts" setup>
-import { Button as TinyButton } from '@opentiny/vue'
+  import { Button as TinyButton } from '@opentiny/vue'
 </script>
 
 <template>

examples/docs/newsrc/mobile.vue

@@ -144,7 +144,7 @@ export default {
         }
       },
       openInVscode: (demo) => {
-        fetch(`/__open-in-editor?file=../docs/resources/mobile/app/${state.pathName}/${demo.codeFiles[0]}`)
+        fetch(`/__open-in-editor?file=../docs/resources/mobile/app/${modeState.pathName}/${demo.codeFiles[0]}`)
       }
     }
 

examples/docs/newsrc/pc.vue

@@ -11,59 +11,71 @@
     <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 }}
+        <component :is="state.currMd" class="component-md"></component>
       </div>
       <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 }}( <span class="allselect">{{ state.currDemo?.demoId }}</span>.vue ):
+            {{ state.currDemo?.name['zh-CN'] }}
+            (<span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
+            >):
           </div>
-          <div v-html="state.currDemo?.content"></div>
+          <div v-html="state.currDemo?.desc['zh-CN']"></div>
         </div>
         <!-- 预览  -->
-        <div class="rel px20 py60 of-auto b-a bs-dotted">
+        <div class="rel px20 py60 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>
+            <component :is="state.comp" v-loading="state.demoLoading"></component>
           </config-provider>
         </div>
       </div>
       <!-- API表格 -->
-      <div v-if="state.currApi" class="mt20 f24 fw-bold">
+      <div v-if="state.currApi?.length" class="mt20 f24 fw-bold">组件API</div>
-        组件API
+      <div v-for="(oneGroup, idx) in state.currApi" :key="idx">
-      </div>
+        <div class="f-r f-pos-start fw-bold">
-      <div v-for="(apiTable, key) in state.currApi" :key="key">
+          <div :id="oneGroup.name" class="f18">
-        <div class="my8 f22 fw-bold">
+            {{ oneGroup.name }}
-          {{ key }}
+          </div>
+          <div class="ml12 b-a-primary c-primary px8 py4">
+            {{ oneGroup.type }}
+          </div>
+        </div>
+        <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+          <div v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+            <div class="f18 py28">
+              {{ key }}
+            </div>
+            <table class="api-table">
+              <thead>
+                <tr>
+                  <th width="20%">名称</th>
+                  <th width="15%">类型</th>
+                  <th width="20%">默认值</th>
+                  <th width="55%">说明</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in oneApiArr" :key="row.name">
+                  <td>
+                    <a v-if="row.demoId" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.demoId)">{{
+                      row.name
+                    }}</a>
+                    <span v-else>{{ row.name }}</span>
+                  </td>
+                  <td>{{ row.type }}</td>
+                  <td>{{ row.defaultValue }}</td>
+                  <td v-html="row.desc['zh-CN']"></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
-        <table class="api-table">
-          <thead>
-            <tr>
-              <th width="15%">名称</th>
-              <th width="20%">类型</th>
-              <th width="20%">默认值</th>
-              <th width="55%">说明</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="row in apiTable" :key="row.name">
-              <td>
-                <a v-if="row.sample" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.sample)">{{
-                  row.name
-                }}</a>
-                <span v-else>{{ row.name }}</span>
-              </td>
-              <td>{{ row.type }}</td>
-              <td>{{ row.defaultValue }}</td>
-              <td>{{ row.desc }}</td>
-            </tr>
-          </tbody>
-        </table>
       </div>
     </div>
     <!-- 右边浮动所有的demos -->
@@ -77,7 +89,7 @@
           :class="{ 'c-error': state.currDemo === demo }"
         >
           <div class="link-primary h:c-error h:td-under ellipsis">
-            {{ demo.title }}
+            {{ 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" />
@@ -131,11 +143,21 @@ import {
   ConfigProvider
 } from '@opentiny/vue'
 import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
-import { menuData, zhDemo, demoVue, demoStr, zhApi } from './resourcePc.js'
+import Loading from '@opentiny/vue-loading'
-import { useTheme, useModeCtx } from './uses'
-import SvgTheme from './assets/theme.svg'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import designAuroraConfig from '@opentiny/vue-design-aurora'
+import { menuData, apis, demoStr, demoVue, mds } from './resourcePc.js'
+import { useTheme, useModeCtx } from './uses'
+import SvgTheme from './assets/theme.svg'
+
+const getPath = (path) => {
+  if (path.startsWith('grid-')) {
+    return 'grid'
+  } else if (path.startsWith('chart-')) {
+    return 'chart'
+  }
+  return path
+}
 
 export default {
   components: {
@@ -151,6 +173,9 @@ export default {
     IconOpeninVscode: iconSelect(),
     ConfigProvider
   },
+  directives: {
+    loading: Loading.directive
+  },
   setup() {
     const { state: modeState, fn: modeFn } = useModeCtx()
     const { changeTheme, currThemeLabel } = useTheme()
@@ -160,7 +185,9 @@ export default {
       currDemo: null, // 选中的demo
       currApi: [], // 当前path下的api
       comp: null, // 当前示例的组件实例
-      currDemoSrc: ''
+      currDemoSrc: '',
+      currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
+      demoLoading: false
     })
     const fn = {
       // 菜单搜索：忽略大小写
@@ -170,8 +197,8 @@ export default {
       },
       // 点击菜单：如果是二级菜单，根据path 刷新整个页面内容
       clickMenu: async (menu) => {
-        if (menu.path && menu.path !== modeState.pathName) {
+        if (menu.nameCn && menu.key !== state.key) {
-          modeState.pathName = menu.path.slice(1)
+          modeState.pathName = menu.key
           await _switchPath()
         }
       },
@@ -184,7 +211,7 @@ export default {
         }
       },
       openInVscode: (demo) => {
-        fetch(`/__open-in-editor?file=../docs/resources/pc/demo/${demo.link}.vue`)
+        fetch(`/__open-in-editor?file=../sites/demos/app/${getPath(modeState.pathName)}/${demo.codeFiles[0]}`)
       }
     }
 
@@ -194,34 +221,33 @@ export default {
 
     // 以下私有方法，无须传递给vue模板的。
     async function _switchPath() {
+      state.demoLoading = true
       // 查找API
-      const apiModule = zhApi[`../resources/pc/api/zh-CN/${modeState.pathName}.json`]
+      const apiModule = apis[`../../sites/demos/app/${getPath(modeState.pathName)}/webdoc/${modeState.pathName}.js`]
+
       if (apiModule) {
-        const api = await apiModule()
+        const module = await apiModule()
-        state.currApi = api.default
+        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 = []
       }
 
-      // 查找demo配置，并默认进入第一个 demo
-      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 === modeState.demoId) || state.demos[0]
-      state.comp = null
       await _switchDemo()
     }
     async function _switchDemo() {
       modeState.demoId = state.currDemo.demoId
-      // 查找源码
+      const path = `../../sites/demos/app/${getPath(modeState.pathName)}/${state.currDemo?.codeFiles[0]}`
-      state.currDemoSrc = await demoStr[`../resources/pc/demo/${state.currDemo.link}.vue`]()
 
-      // 查找组件
+      // 查找源码  查找组件
-      const comp = await demoVue[`../resources/pc/demo/${state.currDemo.link}.vue`]()
+      state.currDemoSrc = await demoStr[path]()
+      const comp = await demoVue[path]()
+
+      state.demoLoading = false
       state.comp = hooks.markRaw(comp.default)
-
-      // 让内容区滚动到顶部
-      setTimeout(() => rightRef.value && rightRef.value.scrollTo({ left: 0, top: 0, behavior: 'smooth' }), 0)
-
       modeFn.cacheCtx()
       modeFn.pushToUrl()
     }

examples/docs/newsrc/resourcePc.js

@@ -3,23 +3,26 @@
 
 // demo源码
 // 同web-doc的菜单资源
-import originMenuData from '../resources/pc/menus.js'
+import { cmpMenus } from '../../sites/demos/menus.js'
 
-export const demoStr = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false, as: 'raw' })
+export const demoStr = import.meta.glob('../../sites/demos/app/**/*.vue', { eager: false, as: 'raw' })
-export const demoVue = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false })
+export const demoVue = import.meta.glob('../../sites/demos/app/**/*.vue', { eager: false })
 
 // api属性
-export const zhApi = import.meta.glob('../resources/pc/api/zh-CN/**/*.json', { eager: false })
+export const apis = import.meta.glob('../../sites/demos/app/*/webdoc/*.js', { eager: false })
-// export const enApi = import.meta.glob('@resources/api/en-US/**/*.json', { eager: false })
 
-// // json, demo的配置文件
+// 组件的md
-export const zhDemo = import.meta.glob('../resources/pc/demo-config/zh-CN/**/*.json', { eager: false })
+const allMD = import.meta.glob('../../sites/demos/app/*/webdoc/*.cn.md', { eager: true })
-// 格式：{zh,en,enSuffix,path}
+export const mds = {}
-// path: '/breadcrumb' 对应着【 demo的配置文件】。每个path有多个示例
+for (const path in allMD) {
-const menuData = originMenuData.slice(0)
+  let key = path.split('/').slice(-1)[0]
+  mds[key] = allMD[path].default
+}
+
+const menuData = cmpMenus.slice(0)
 function processMenu(menu, isTop) {
-  menu.id = menu.en
+  menu.id = menu.key
-  menu.label = isTop ? menu.zh : `${menu.zh} ${menu.en}`
+  menu.label = isTop ? menu.label : `${menu.nameCn} ${menu.name}`
   if (menu.children && menu.children.length > 0) {
     menu.children.forEach((m) => processMenu(m, false))
   }

examples/docs/newsrc/uses/useTheme.js

@@ -1,6 +1,19 @@
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinyAuroraTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'
 import { hooks } from '@opentiny/vue-common'
+import { Notify } from '@opentiny/vue'
+
+let isShowTip = false
+function showTip() {
+  Notify({
+    type: 'info',
+    title: '请注意',
+    message: '主题切换成功，如有部分主题样式不生效，请尝试手动刷新页面即可',
+    position: 'top-right',
+    duration: 3000
+  })
+  isShowTip = true
+}
 
 export function useTheme() {
   const theme = new TinyThemeTool()
@@ -16,8 +29,10 @@ export function useTheme() {
     localStorage.setItem('tinyThemeToolkey', vm.label)
     theme.changeTheme(THEME_MAP[vm.label])
     currThemeLabel.value = vm.label
-    // 刷新页面保证对应的主题系统全局配置生效
+    // 若部分主题样式切换不生效，第一次则提示用户需要手动刷新
-    location.reload()
+    if (!isShowTip) {
+      showTip()
+    }
   }
 
   // 切换上次缓存的主题

examples/docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@opentiny/vue-docs",
+  "name": "@opentiny/vue-localhost-dev",
   "type": "module",
   "version": "1.0.8",
   "description": "",

examples/docs/resources/mobile-first/app/action-sheet/action.vue

@@ -1,17 +1,28 @@
 <template>
   <div>
     <div>
-      <tiny-button type="primary" @click="boxVisibility = true">
+      <tiny-button type="primary" @click="boxVisibility = true"> 显示提示语 </tiny-button>
-        显示提示语
+      <tiny-button type="primary" style="margin-left: 20px" @click="boxVisibility2 = true"> 不显示提示语 </tiny-button>
-      </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
+      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>
+    <tiny-action-sheet
+      type="action"
+      :menus="menus"
+      :visible="boxVisibility2"
+      @update:visible="boxVisibility2 = $event"
+      @click="selectOption"
+      @close="close"
+    ></tiny-action-sheet>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary">
+    <tiny-button @click="fn" type="primary"> 动作面板 </tiny-button>
-      动作面板
+    <tiny-action-sheet
-    </tiny-button>
+      title="标题"
-    <tiny-action-sheet title="标题" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    ></tiny-action-sheet>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary" style="max-width:200px">
+    <tiny-button @click="fn" type="primary" style="max-width: 200px"> 单击遮罩层不关闭弹窗 </tiny-button>
-      单击遮罩层不关闭弹窗
+    <tiny-action-sheet
-    </tiny-button>
+      title="标题"
-    <tiny-action-sheet title="标题" :mask-closable="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+      :mask-closable="false"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    ></tiny-action-sheet>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/action-sheet/mask.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary">
+    <tiny-button @click="fn" type="primary"> 关闭遮罩层 </tiny-button>
-      关闭遮罩层
+    <tiny-action-sheet
-    </tiny-button>
+      title="标题"
-    <tiny-action-sheet title="标题" :mask="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
+      :mask="false"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    ></tiny-action-sheet>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/action-sheet/multiple.vue

@@ -1,21 +1,33 @@
 <template>
   <div>
     <div>
-      <tiny-button @click="boxVisibility1 = true">
+      <tiny-button @click="boxVisibility1 = true"> 单选 </tiny-button>
-        单选
-      </tiny-button>
       <p>值：{{ activeName1 }}</p>
     </div>
     <br />
     <div>
-      <tiny-button @click="boxVisibility2 = true">
+      <tiny-button @click="boxVisibility2 = true"> 多选 </tiny-button>
-        多选
-      </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
-    <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>
+      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>
 

examples/docs/resources/mobile-first/app/action-sheet/show.vue

@@ -2,15 +2,34 @@
   <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>
+      <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>
+      <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>
+      <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>
@@ -52,7 +71,6 @@ export default {
       ]
     }
   },
-  methods: {
+  methods: {}
-  }
 }
 </script>

examples/docs/resources/mobile-first/app/action-sheet/slot.vue

@@ -2,7 +2,13 @@
   <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">
+      <tiny-action-sheet
+        v-model="activeName"
+        title="标题1"
+        :menus="menus"
+        :visible="boxVisibility3"
+        @update:visible="boxVisibility3 = $event"
+      >
         <template #header-left>
           <div @click="activeName = ''">清空</div>
         </template>
@@ -10,7 +16,14 @@
     </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">
+      <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>
@@ -18,7 +31,13 @@
     </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">
+      <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>
@@ -29,7 +48,14 @@
     </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">
+      <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>
@@ -75,7 +101,6 @@ export default {
       ]
     }
   },
-  methods: {
+  methods: {}
-  }
 }
 </script>

examples/docs/resources/mobile-first/app/alert/base.vue

@@ -4,7 +4,12 @@
     <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>
+    <tiny-alert
+      type="warning"
+      single-line
+      scrolling
+      description="single-line 开启单行，scrolling 开启滚动，通过属性 close-text 自定义关闭按钮文本，通过 center 属性可使文字显示居中,通过 type 设置不同的类型。可选值：success、warning、info、error，默认值：info "
+    ></tiny-alert>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/badge/base.vue

@@ -6,9 +6,7 @@
     <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 is-dot> 我的待办 </tiny-badge>
-          我的待办
-        </tiny-badge>
         <tiny-badge type="icon" is-dot>
           <tiny-user-head type="icon"></tiny-user-head>
         </tiny-badge>
@@ -23,9 +21,7 @@
     <div class="flex items-center my-4">
       <span>数字标记 : </span>
       <div class="flex justify-between items-center w-80">
-        <tiny-badge :value="0">
+        <tiny-badge :value="0"> 我的待办 </tiny-badge>
-          我的待办
-        </tiny-badge>
         <tiny-badge :value="0" type="icon">
           <tiny-user-head type="icon" round></tiny-user-head>
         </tiny-badge>

examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-badge :value="unread" :hidden="unread === 0">
+    <tiny-badge :value="unread" :hidden="unread === 0"> 我的待办 </tiny-badge>
-      我的待办
-    </tiny-badge>
     <br />
-    <tiny-button :disabled="unread === 0" @click="read">
+    <tiny-button :disabled="unread === 0" @click="read"> 读取一条消息 </tiny-button>
-      读取一条消息
-    </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/badge/is-dot.vue

@@ -1,7 +1,5 @@
 <template>
-  <tiny-badge is-dot>
+  <tiny-badge is-dot> 小圆点显示 </tiny-badge>
-    小圆点显示
-  </tiny-badge>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/badge/max.vue

@@ -1,7 +1,5 @@
 <template>
-  <tiny-badge :value="500" :max="99">
+  <tiny-badge :value="500" :max="99"> 最大值显示 </tiny-badge>
-    最大值显示
-  </tiny-badge>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/badge/slot-content.vue

@@ -1,9 +1,7 @@
 <template>
   <tiny-badge :value="2">
     自定义内容插槽
-    <template #content>
+    <template #content> 自定义 </template>
-      自定义
-    </template>
   </tiny-badge>
 </template>
 

examples/docs/resources/mobile-first/app/badge/target.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-badge :value="2" href="/" target="_self">
+    <tiny-badge :value="2" href="/" target="_self"> 当前标签打开 </tiny-badge>
-      当前标签打开
-    </tiny-badge>
     <br />
-    <tiny-badge :value="2" href="/" target="_blank">
+    <tiny-badge :value="2" href="/" target="_blank"> 新建标签打开 </tiny-badge>
-      新建标签打开
-    </tiny-badge>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/badge/type-left.vue

@@ -1,24 +1,14 @@
 <template>
   <div>
-    <tiny-badge is-dot show-left type="danger">
+    <tiny-badge is-dot show-left type="danger"> danger 类型 </tiny-badge>
-      danger 类型
-    </tiny-badge>
     <br />
-    <tiny-badge is-dot show-left type="primary">
+    <tiny-badge is-dot show-left type="primary"> primary 类型 </tiny-badge>
-      primary 类型
-    </tiny-badge>
     <br />
-    <tiny-badge is-dot show-left type="success">
+    <tiny-badge is-dot show-left type="success"> success 类型 </tiny-badge>
-      success 类型
-    </tiny-badge>
     <br />
-    <tiny-badge is-dot show-left type="warning">
+    <tiny-badge is-dot show-left type="warning"> warning 类型 </tiny-badge>
-      warning 类型
-    </tiny-badge>
     <br />
-    <tiny-badge is-dot show-left type="info">
+    <tiny-badge is-dot show-left type="info"> info 类型 </tiny-badge>
-      info 类型
-    </tiny-badge>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/badge/type.vue

@@ -1,7 +1,5 @@
 <template>
-  <tiny-badge :value="value1">
+  <tiny-badge :value="value1"> 默认类型 </tiny-badge>
-    默认类型
-  </tiny-badge>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/button/autofocus.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <tiny-button>默认按钮</tiny-button>
-    <tiny-button autofocus>
+    <tiny-button autofocus> 默认聚焦 </tiny-button>
-      默认聚焦
-    </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/base-saas.vue

@@ -2,41 +2,19 @@
   <tiny-layout>
     <tiny-row>
       <tiny-button>默认按钮</tiny-button>
-      <tiny-button type="primary" native-type="submit">
+      <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
-        主要按钮
+      <tiny-button type="success"> 成功按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="info"> 信息按钮 </tiny-button>
-      <tiny-button type="success">
+      <tiny-button type="warning"> 警告按钮 </tiny-button>
-        成功按钮
+      <tiny-button type="danger"> 危险按钮 </tiny-button>
-      </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 plain> 朴素按钮 </tiny-button>
-        朴素按钮
+      <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="success" plain> 成功按钮 </tiny-button>
-      <tiny-button type="primary" plain>
+      <tiny-button type="info" plain> 信息按钮 </tiny-button>
-        主要按钮
+      <tiny-button type="warning" plain> 警告按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="danger" 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>

examples/docs/resources/mobile-first/app/button/base.vue

@@ -2,41 +2,19 @@
   <tiny-layout>
     <tiny-row>
       <tiny-button>默认按钮</tiny-button>
-      <tiny-button type="primary" native-type="submit">
+      <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
-        主要按钮
+      <tiny-button type="success"> 成功按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="info"> 信息按钮 </tiny-button>
-      <tiny-button type="success">
+      <tiny-button type="warning"> 警告按钮 </tiny-button>
-        成功按钮
+      <tiny-button type="danger"> 危险按钮 </tiny-button>
-      </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 plain> 线性按钮 </tiny-button>
-        线性按钮
+      <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="success" plain> 成功按钮 </tiny-button>
-      <tiny-button type="primary" plain>
+      <tiny-button type="info" plain> 信息按钮 </tiny-button>
-        主要按钮
+      <tiny-button type="warning" plain> 警告按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="danger" 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>

examples/docs/resources/mobile-first/app/button/button-class.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="demo">
     <tiny-button>默认按钮</tiny-button>
-    <tiny-button button-class="text-color-brand-active bg-color-bg-3">
+    <tiny-button button-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
-      主要按钮
-    </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/circle.vue

@@ -1,24 +1,12 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <tiny-button circle>
+      <tiny-button circle> C </tiny-button>
-        C
+      <tiny-button type="primary" circle> C </tiny-button>
-      </tiny-button>
+      <tiny-button type="success" circle> C </tiny-button>
-      <tiny-button type="primary" circle>
+      <tiny-button type="info" circle> C </tiny-button>
-        C
+      <tiny-button type="warning" circle> C </tiny-button>
-      </tiny-button>
+      <tiny-button type="danger" 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>

examples/docs/resources/mobile-first/app/button/click.vue

@@ -1,7 +1,5 @@
 <template>
-  <tiny-button @click="click">
+  <tiny-button @click="click"> 默认按钮 </tiny-button>
-    默认按钮
-  </tiny-button>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue

@@ -6,24 +6,12 @@
       </tiny-button>
     </tiny-row>
     <tiny-row>
-      <tiny-button :disabled="disabled">
+      <tiny-button :disabled="disabled"> 默认按钮 </tiny-button>
-        默认按钮
+      <tiny-button type="primary" :disabled="disabled"> 主要按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="success" :disabled="disabled"> 成功按钮 </tiny-button>
-      <tiny-button type="primary" :disabled="disabled">
+      <tiny-button type="info" :disabled="disabled"> 信息按钮 </tiny-button>
-        主要按钮
+      <tiny-button type="warning" :disabled="disabled"> 警告按钮 </tiny-button>
-      </tiny-button>
+      <tiny-button type="danger" :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>

examples/docs/resources/mobile-first/app/button/link.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button type="text" href="/">
+    <tiny-button type="text" href="/"> 超链接按钮 </tiny-button>
-      超链接按钮
-    </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/loading.vue

@@ -1,23 +1,11 @@
 <template>
   <div>
-    <tiny-button loading>
+    <tiny-button loading> 加载中 </tiny-button>
-      加载中
+    <tiny-button type="primary" loading> 加载中 </tiny-button>
-    </tiny-button>
+    <tiny-button type="success" loading> 加载中 </tiny-button>
-    <tiny-button type="primary" loading>
+    <tiny-button type="info" loading> 加载中 </tiny-button>
-      加载中
+    <tiny-button type="warning" loading> 加载中 </tiny-button>
-    </tiny-button>
+    <tiny-button type="danger" 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>
 

examples/docs/resources/mobile-first/app/button/plain.vue

@@ -1,23 +1,11 @@
 <template>
   <div>
-    <tiny-button plain>
+    <tiny-button plain> 朴素按钮 </tiny-button>
-      朴素按钮
+    <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button type="success" plain> 成功按钮 </tiny-button>
-    <tiny-button type="primary" plain>
+    <tiny-button type="info" plain> 信息按钮 </tiny-button>
-      主要按钮
+    <tiny-button type="warning" plain> 警告按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button type="danger" 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>
 

examples/docs/resources/mobile-first/app/button/reset-time.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
     <tiny-button>默认禁用</tiny-button>
-    <tiny-button :reset-time="0">
+    <tiny-button :reset-time="0"> 无禁用 </tiny-button>
-      无禁用
+    <tiny-button :reset-time="5000"> 禁用 5 秒 </tiny-button>
-    </tiny-button>
-    <tiny-button :reset-time="5000">
-      禁用 5 秒
-    </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/round.vue

@@ -1,23 +1,11 @@
 <template>
   <div>
-    <tiny-button round>
+    <tiny-button round> 默认按钮 </tiny-button>
-      默认按钮
+    <tiny-button type="primary" round> 主要按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button type="success" round> 成功按钮 </tiny-button>
-    <tiny-button type="primary" round>
+    <tiny-button type="info" round> 信息按钮 </tiny-button>
-      主要按钮
+    <tiny-button type="warning" round> 警告按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button type="danger" 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>
 

examples/docs/resources/mobile-first/app/button/size.vue

@@ -1,15 +1,9 @@
 <template>
   <div>
     <tiny-button>默认按钮</tiny-button>
-    <tiny-button size="medium">
+    <tiny-button size="medium"> 中等按钮 </tiny-button>
-      中等按钮
+    <tiny-button size="small"> 小型按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button size="mini"> 超小按钮 </tiny-button>
-    <tiny-button size="small">
-      小型按钮
-    </tiny-button>
-    <tiny-button size="mini">
-      超小按钮
-    </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/text.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button type="text">
+    <tiny-button type="text"> 文本按钮 </tiny-button>
-      文本按钮
-    </tiny-button>
     <tiny-button type="text" text="text属性"></tiny-button>
   </div>
 </template>

examples/docs/resources/mobile-first/app/button/type.vue

@@ -1,24 +1,12 @@
 <template>
   <div>
     <tiny-button>默认按钮</tiny-button>
-    <tiny-button type="primary">
+    <tiny-button type="primary"> 主要按钮 </tiny-button>
-      主要按钮
+    <tiny-button type="success"> 成功按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button type="info"> 信息按钮 </tiny-button>
-    <tiny-button type="success">
+    <tiny-button type="warning"> 警告按钮 </tiny-button>
-      成功按钮
+    <tiny-button type="danger"> 危险按钮 </tiny-button>
-    </tiny-button>
+    <tiny-button type="text"> 文本按钮 </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>
 

examples/docs/resources/mobile-first/app/card/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-card title="这是卡片标题" type="image" src="static/images/dsj.png">
+  <tiny-card title="这是卡片标题" type="image" src="/static/images/dsj.png">
     <p>
       这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
       这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，

examples/docs/resources/mobile-first/app/card/card-events.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
-    <tiny-card title="这是卡片标题" v-model="value" check-type="checkbox" label="1" :options="options" @change="change" @icon-click="iconClick">
+    <tiny-card
+      title="这是卡片标题"
+      v-model="value"
+      check-type="checkbox"
+      label="1"
+      :options="options"
+      @change="change"
+      @icon-click="iconClick"
+    >
       <p>
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，

examples/docs/resources/mobile-first/app/card/card-type.vue

@@ -7,21 +7,25 @@
       </p>
     </tiny-card>
     <br />
-    <tiny-card title="这是图片类型" type="image" src="static/images/dsj.png">
+    <tiny-card title="这是图片类型" type="image" src="/static/images/dsj.png">
       <p>
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
       </p>
     </tiny-card>
     <br />
-    <tiny-card title="这是视频类型" type="video" src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4">
+    <tiny-card
+      title="这是视频类型"
+      type="video"
+      src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
+    >
       <p>
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
       </p>
     </tiny-card>
     <br />
-    <tiny-card title="这是logo类型" type="logo" size="mini" src="static/images/user-head.png">
+    <tiny-card title="这是logo类型" type="logo" size="mini" src="/static/images/user-head.png">
       <p>这是一段长文本内容，这是一段长文本内容</p>
     </tiny-card>
   </div>

examples/docs/resources/mobile-first/app/card/slot.vue

@@ -34,7 +34,7 @@
       </p>
       <template #footer>
         <div class="flex">
-          <img src="static/images/user-head.png" class="h-9 w-9" alt="user-head" />
+          <img src="/static/images/user-head.png" class="h-9 w-9" alt="user-head" />
           <div class="pl-4">
             <p class="text-sm">刘小华</p>
             <p class="text-xs text-color-text-secondary">2023-03-20 10:10:10</p>

examples/docs/resources/mobile-first/app/carousel/webdoc/carousel.js

@@ -181,7 +181,8 @@ export default {
         'en-US': 'Carousel Events'
       },
       desc: {
-        'zh-CN': '<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
+        'zh-CN':
+          '<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
         'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
       },
       codeFiles: ['carousel-events.vue']

examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue

@@ -1,7 +1,12 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/cascader-select/cities.vue

@@ -1,7 +1,13 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      cycle-roll
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue

@@ -1,7 +1,13 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      cycle-roll
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue

@@ -1,7 +1,13 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event" :disabled="disabled"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+      :disabled="disabled"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/cascader-select/disabled.vue

@@ -1,7 +1,12 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/cascader-select/object-option.vue

@@ -1,7 +1,12 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue

@@ -1,7 +1,15 @@
 <template>
   <div date-tag="tiny-demo">
     <tiny-button @click="showCascader">点击显示级联选择</tiny-button>
-    <tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event" :disabled="disabled" :text-color="textColorClass"></tiny-cascader-select>
+    <tiny-cascader-select
+      v-model="value"
+      cycle-roll
+      :options="optionList"
+      :visible="visible"
+      @update:visible="visible = $event"
+      :disabled="disabled"
+      :text-color="textColorClass"
+    ></tiny-cascader-select>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue

@@ -1,7 +1,5 @@
 <template>
-  <tiny-checkbox v-model="checked">
+  <tiny-checkbox v-model="checked"> 复选框 </tiny-checkbox>
-    复选框
-  </tiny-checkbox>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="demo-checkbox-button">
-    <tiny-checkbox-button v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox-button>
+    <tiny-checkbox-button
+      v-model="checked"
+      text="复选框"
+      true-label="真文本"
+      false-label="假文本"
+    ></tiny-checkbox-button>
     <tiny-button class="btn" @click="getValue">获取文本</tiny-button>
   </div>
 </template>
@@ -33,4 +38,4 @@ export default {
 .demo-checkbox-button .btn {
   margin-left: 20px;
 }
-</style>
+</style>

examples/docs/resources/mobile-first/app/checkbox/text.vue

@@ -28,9 +28,9 @@ export default {
   }
 }
 </script>
- 
+
 <style scoped>
 .demo-checkbox .btn {
   margin-left: 20px;
 }
-</style>
+</style>

examples/docs/resources/mobile-first/app/collapse/nested-grid.vue

@@ -7,7 +7,13 @@
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="created_date" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-        <tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
+        <tiny-grid-column
+          field="boole"
+          title="布尔值"
+          align="center"
+          format-text="boole"
+          :editor="checkboxEdit"
+        ></tiny-grid-column>
       </tiny-grid>
     </tiny-collapse-item>
   </tiny-collapse>

examples/docs/resources/mobile-first/app/collapse/slot-icon.vue

@@ -2,13 +2,16 @@
   <tiny-collapse v-model="activeNames">
     <tiny-collapse-item name="1" title="一致性 Consistency">
       <template #icon="{ active }">
-        <icon-arrow-bottom class="tiny-svg-size" :style="{
+        <icon-arrow-bottom
-          fill: 'red',
+          class="tiny-svg-size"
-          width: '10px',
+          :style="{
-          height: '10px',
+            fill: 'red',
-          transition: 'all 0.2s',
+            width: '10px',
-          transform: active ? 'rotate(0deg)' : 'rotate(-90deg)'
+            height: '10px',
-        }"></icon-arrow-bottom>
+            transition: 'all 0.2s',
+            transform: active ? 'rotate(0deg)' : 'rotate(-90deg)'
+          }"
+        ></icon-arrow-bottom>
       </template>
 
       <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
@@ -24,6 +27,7 @@
 <script>
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import { IconArrowBottom } from '@opentiny/vue-icon'
+
 export default {
   components: {
     TinyCollapse: Collapse,

examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue

@@ -24,6 +24,7 @@
 <script>
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import { IconWriting } from '@opentiny/vue-icon'
+
 export default {
   components: {
     TinyCollapse: Collapse,

examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <tiny-column-list-item v-model="checked" :show-checkbox="true" image="webnova/static/images/1.jpg" size="medium" :options="options1" :flex-grow="[1, 1]" class="mb-3" @icon-click="iconClick">
+    <tiny-column-list-item
+      v-model="checked"
+      :show-checkbox="true"
+      image="webnova/static/images/1.jpg"
+      size="medium"
+      :options="options1"
+      :flex-grow="[1, 1]"
+      class="mb-3"
+      @icon-click="iconClick"
+    >
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <tiny-column-list-item image="webnova/static/images/1.jpg" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" class="mb-3">
+    <tiny-column-list-item
+      image="webnova/static/images/1.jpg"
+      :flex-grow="[0, 0]"
+      :flex-basis="['25%', '25%']"
+      class="mb-3"
+    >
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/column-list-item/size.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <tiny-column-list-item v-model="checked" :show-checkbox="true" image="webnova/static/images/1.jpg" :size="size" :options="options" :flex-grow="[1, 3]" class="mb-3" @icon-click="iconClick">
+    <tiny-column-list-item
+      v-model="checked"
+      :show-checkbox="true"
+      image="webnova/static/images/1.jpg"
+      :size="size"
+      :options="options"
+      :flex-grow="[1, 3]"
+      class="mb-3"
+      @icon-click="iconClick"
+    >
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue

@@ -4,7 +4,12 @@
     <p>值：{{ value }}</p>
     <p>格式化值：{{ formatValue }}</p>
 
-    <tiny-date-picker-mobile v-model="value" title="日期选择" :visible="boxVisibility" @update:visible="boxVisibility = $event">
+    <tiny-date-picker-mobile
+      v-model="value"
+      title="日期选择"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    >
     </tiny-date-picker-mobile>
   </div>
 </template>

examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue

@@ -4,7 +4,13 @@
     <p>值：{{ value }}</p>
     <p>格式化值：{{ formatValue }}</p>
 
-    <tiny-date-picker-mobile v-model="value" title="日期选择" type="daterange" :visible="boxVisibility" @update:visible="boxVisibility = $event">
+    <tiny-date-picker-mobile
+      v-model="value"
+      title="日期选择"
+      type="daterange"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    >
     </tiny-date-picker-mobile>
   </div>
 </template>
@@ -28,8 +34,9 @@ export default {
       if (!this.value || this.value.length === 0) return ''
       const date1 = new Date(this.value[0])
       const date2 = new Date(this.value[1])
-      return `[${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}, ${date2.getFullYear()}/${date2.getMonth() + 1
+      return `[${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}, ${date2.getFullYear()}/${
-        }/${date2.getDate()}]`
+        date2.getMonth() + 1
+      }/${date2.getDate()}]`
     }
   },
   methods: {

examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue

@@ -4,7 +4,13 @@
     <p>值：{{ value }}</p>
     <p>格式化值：{{ formatValue }}</p>
 
-    <tiny-date-picker-mobile v-model="value" title="日期时间选择" type="datetimerange" :visible="boxVisibility" @update:visible="boxVisibility = $event">
+    <tiny-date-picker-mobile
+      v-model="value"
+      title="日期时间选择"
+      type="datetimerange"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    >
     </tiny-date-picker-mobile>
   </div>
 </template>

examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue

@@ -4,7 +4,13 @@
     <p>值：{{ value }}</p>
     <p>格式化值：{{ formatValue }}</p>
 
-    <tiny-date-picker-mobile v-model="value" type="datetime" title="日期时间选择" :visible="boxVisibility" @update:visible="boxVisibility = $event">
+    <tiny-date-picker-mobile
+      v-model="value"
+      type="datetime"
+      title="日期时间选择"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    >
     </tiny-date-picker-mobile>
   </div>
 </template>

examples/docs/resources/mobile-first/app/drawer/basic-usage.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center;">内容区域</div>
+      <div style="height: 200px; text-align: center">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -26,4 +26,4 @@ export default {
     }
   }
 }
-</script>
+</script>

examples/docs/resources/mobile-first/app/drawer/event.vue

@@ -1,7 +1,14 @@
 <template>
   <div>
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close" @confirm="confirm">
+    <tiny-drawer
+      title="标题"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @close="close"
+      @confirm="confirm"
+    >
       <div style="height: 200px; text-align: center">内容区域</div>
     </tiny-drawer>
   </div>

examples/docs/resources/mobile-first/app/drawer/mask-event.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary" style="max-width:200px">单击遮罩层不关闭弹窗</tiny-button>
+    <tiny-button @click="fn" type="primary" style="max-width: 200px">单击遮罩层不关闭弹窗</tiny-button>
     <tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
       <div style="height: 200px; text-align: center">内容区域</div>
     </tiny-drawer>

examples/docs/resources/mobile-first/app/drawer/show.vue

@@ -4,7 +4,13 @@
     <tiny-button @click="fn({ showHeader: false, showFooter: false })"> 隐藏头部 </tiny-button>
     <tiny-button @click="fn({ showHeader: true, showFooter: true })"> 显示底部 </tiny-button>
 
-    <tiny-drawer :show-header="showHeader" :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
+    <tiny-drawer
+      :show-header="showHeader"
+      :show-footer="showFooter"
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+    >
       <div style="height: 200px; text-align: center">内容区域</div>
     </tiny-drawer>
   </div>

examples/docs/resources/mobile-first/app/drawer/slot.vue

@@ -5,7 +5,7 @@
       <template #header-right>
         <div @click="$refs.tinyDrawer.close()">自定义关闭</div>
       </template>
-      <div style="height: 200px; text-align: center;">内容区域</div>
+      <div style="height: 200px; text-align: center">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -29,4 +29,4 @@ export default {
     }
   }
 }
-</script>
+</script>

examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue

@@ -12,6 +12,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue

@@ -12,6 +12,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/border-size.vue

@@ -12,6 +12,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue

@@ -10,6 +10,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/button-size.vue

@@ -12,6 +12,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/button-type.vue

@@ -10,6 +10,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue

@@ -10,6 +10,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue

@@ -12,6 +12,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue

@@ -12,6 +12,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue

@@ -10,6 +10,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { IconEllipsis } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

examples/docs/resources/mobile-first/app/dropdown/max-height.vue

@@ -38,6 +38,7 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
 

examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue

@@ -9,8 +9,12 @@
             这是一级不可点击
           </tiny-dropdown-item>
           <tiny-dropdown-menu multi-stage checked-status>
-            <tiny-dropdown-item level="2" :current-index="0" :selected="selectedIndex === '2-0'">这是二级</tiny-dropdown-item>
+            <tiny-dropdown-item level="2" :current-index="0" :selected="selectedIndex === '2-0'"
-            <tiny-dropdown-item level="2" :current-index="1" :selected="selectedIndex === '2-1'">这是二级</tiny-dropdown-item>
+              >这是二级</tiny-dropdown-item
+            >
+            <tiny-dropdown-item level="2" :current-index="1" :selected="selectedIndex === '2-1'"
+              >这是二级</tiny-dropdown-item
+            >
           </tiny-dropdown-menu>
           <tiny-dropdown-item :current-index="3" :selected="selectedIndex === '3'">这是一级</tiny-dropdown-item>
         </template>
@@ -18,8 +22,10 @@
     </template>
   </tiny-dropdown>
 </template>
+
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+
 export default {
   components: {
     TinyDropdown: Dropdown,

examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue

@@ -38,13 +38,31 @@
           <template #dropdown>
             <tiny-dropdown-menu checked-status>
               <template #default="{ selectedIndex }">
-                <tiny-dropdown-item :icon="IconPlus" :current-index="0" :selected="selectedIndex === '0'">这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级</tiny-dropdown-item>
+                <tiny-dropdown-item :icon="IconPlus" :current-index="0" :selected="selectedIndex === '0'"
-                <tiny-dropdown-item :icon="IconPlusCircle" :current-index="1" :selected="selectedIndex === '1'" disabled>这是一级不可点击</tiny-dropdown-item>
+                  >这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级</tiny-dropdown-item
+                >
+                <tiny-dropdown-item :icon="IconPlusCircle" :current-index="1" :selected="selectedIndex === '1'" disabled
+                  >这是一级不可点击</tiny-dropdown-item
+                >
                 <tiny-dropdown-menu multi-stage checked-status>
-                  <tiny-dropdown-item :icon="IconPlusSquare" level="2" :current-index="0" :selected="selectedIndex === '2-0'">这是二级</tiny-dropdown-item>
+                  <tiny-dropdown-item
-                  <tiny-dropdown-item :icon="IconCheckedLinear" level="2" :current-index="1" :selected="selectedIndex === '2-1'">这是二级</tiny-dropdown-item>
+                    :icon="IconPlusSquare"
+                    level="2"
+                    :current-index="0"
+                    :selected="selectedIndex === '2-0'"
+                    >这是二级</tiny-dropdown-item
+                  >
+                  <tiny-dropdown-item
+                    :icon="IconCheckedLinear"
+                    level="2"
+                    :current-index="1"
+                    :selected="selectedIndex === '2-1'"
+                    >这是二级</tiny-dropdown-item
+                  >
                 </tiny-dropdown-menu>
-                <tiny-dropdown-item :icon="IconCheckedSur" :current-index="3" :selected="selectedIndex === '3'">这是一级</tiny-dropdown-item>
+                <tiny-dropdown-item :icon="IconCheckedSur" :current-index="3" :selected="selectedIndex === '3'"
+                  >这是一级</tiny-dropdown-item
+                >
               </template>
             </tiny-dropdown-menu>
           </template>

examples/docs/resources/mobile-first/app/exception/component-empty.vue

@@ -46,6 +46,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .demo-split {
   height: 200px;

examples/docs/resources/mobile-first/app/exception/sub-message.vue

@@ -15,4 +15,5 @@ export default {
   methods: {}
 }
 </script>
+
 <style scoped>

examples/docs/resources/mobile-first/app/file-upload/bubble.vue

@@ -0,0 +1,49 @@
+<template>
+  <tiny-file-upload mode="bubble" ref="upload" :action="action" :file-list="fileList" />
+</template>
+
+<script>
+import { FileUpload } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: [
+        {
+          docId: 'M1T2A1N548572512085860351',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test1.png',
+          docSize: 100 * 1024,
+          size: 100 * 1024,
+          serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test4.doc',
+          docSize: 17252 * 1024,
+          size: 17252 * 1024,
+          serverName: 'ShenZhen',
+          status: 'fail',
+          percentage: 30
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test5超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长.doc',
+          docSize: 17252 * 1024,
+          size: 17252 * 1024,
+          serverName: 'ShenZhen'
+        }
+      ]
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/file-upload/display-only-picture.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" display-only> </tiny-file-upload>
+    <tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" display-only>
+    </tiny-file-upload>
     <br />
     <br />
     <tiny-file-upload :action="action" list-type="picture-card" :file-list="fileList2" display-only> </tiny-file-upload>

examples/docs/resources/mobile-first/app/file-upload/display-only-video-audio.vue

@@ -1,10 +1,22 @@
 <template>
   <div>
-    <tiny-file-upload :action="action" display-only list-type="picture-single" source-type="video" :file-list="fileList1">
+    <tiny-file-upload
+      :action="action"
+      display-only
+      list-type="picture-single"
+      source-type="video"
+      :file-list="fileList1"
+    >
     </tiny-file-upload>
     <br />
     <br />
-    <tiny-file-upload :action="action" display-only list-type="picture-single" source-type="audio" :file-list="fileList2">
+    <tiny-file-upload
+      :action="action"
+      display-only
+      list-type="picture-single"
+      source-type="audio"
+      :file-list="fileList2"
+    >
     </tiny-file-upload>
   </div>
 </template>

examples/docs/resources/mobile-first/app/file-upload/download-all.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" @download-all="handleDownloadAll"></tiny-file-upload>
+  <tiny-file-upload
+    ref="upload"
+    :action="action"
+    :file-list="fileList"
+    @download-all="handleDownloadAll"
+  ></tiny-file-upload>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/file-upload/download-picture.vue

@@ -1,10 +1,20 @@
 <template>
   <div>
-    <tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" @download-file="handleDownloadFile">
+    <tiny-file-upload
+      :action="action"
+      list-type="picture-single"
+      :file-list="fileList1"
+      @download-file="handleDownloadFile"
+    >
     </tiny-file-upload>
     <br />
     <br />
-    <tiny-file-upload :action="action" list-type="picture-card" :file-list="fileList2" @download-file="handleDownloadFile">
+    <tiny-file-upload
+      :action="action"
+      list-type="picture-card"
+      :file-list="fileList2"
+      @download-file="handleDownloadFile"
+    >
     </tiny-file-upload>
   </div>
 </template>

examples/docs/resources/mobile-first/app/file-upload/download.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" @download-file="handleDownloadFile"></tiny-file-upload>
+  <tiny-file-upload
+    ref="upload"
+    :action="action"
+    :file-list="fileList"
+    @download-file="handleDownloadFile"
+  ></tiny-file-upload>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/file-upload/drag.vue

@@ -1,6 +1,5 @@
 <template>
-  <tiny-file-upload :action="action" list-type="drag-single">
+  <tiny-file-upload :action="action" list-type="drag-single"> </tiny-file-upload>
-  </tiny-file-upload>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/file-upload/event-trigger-click.vue

@@ -1,5 +1,16 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" @trigger-click="handleTriggerClick" @preview="handlePreview" @download-file="handleDownloadFile" @download-all="handleDownloadAll" @re-upload="handleReUpload" @click-file-list="handleClickFileList" @remove="handleRemove"></tiny-file-upload>
+  <tiny-file-upload
+    ref="upload"
+    :action="action"
+    :file-list="fileList"
+    @trigger-click="handleTriggerClick"
+    @preview="handlePreview"
+    @download-file="handleDownloadFile"
+    @download-all="handleDownloadAll"
+    @re-upload="handleReUpload"
+    @click-file-list="handleClickFileList"
+    @remove="handleRemove"
+  ></tiny-file-upload>
 </template>
 
 <script>

examples/docs/resources/mobile-first/app/file-upload/multi-media-native.vue

@@ -0,0 +1,65 @@
+<template>
+  <tiny-file-upload
+    :action="action"
+    list-type="picture-card"
+    source-type="audio/video/picture"
+    :file-list="fileList"
+    :hwh5="hwh5"
+    @trigger-click="handleTriggerClick"
+    @play="handlePlay"
+  >
+  </tiny-file-upload>
+</template>
+
+<script>
+import { FileUpload } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      hwh5: {
+        HWH5: () => window.HWH5 || {}
+      },
+      action: 'http://localhost:3000/api/upload',
+      fileList: [
+        {
+          name: 'video-test.mp4',
+          url: 'http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4'
+        },
+        {
+          name: 'audio-test.3gp',
+          type: 'audio',
+          url: 'https://hicdev.huawei.com/mirrors/resource/audio-test.3gp'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleTriggerClick($event, sourceType, type) {
+      /**
+       * $event事件对象
+       * sourceType表示选取资源类型（picture、video、audio）图片、视频、音频
+       * sourceType为picture时：type: 1 从相册选择; type: 2 拍摄
+       * sourceType为video时：type: 1 从相册选择; type: 3 录像
+       * sourceType为audio时（type类型包括start、pause、continue、end、cancel）：
+       *  type: start 开始录音;
+       *  type: pause 中止录音;
+       *  type: continue 继续录音;
+       *  type: end 结束录音;
+       *  type: cancel 取消录音
+       */
+      console.log('handleTriggerClick', $event, sourceType, type)
+    },
+    handlePlay(file, sourceType) {
+      /**
+       * file为文件对象
+       * sourceType表示选取资源类型（video、audio）视频、音频
+       */
+      console.log('handlePlay', file, sourceType)
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/file-upload/multi-media.vue

@@ -0,0 +1,41 @@
+<template>
+  <tiny-file-upload
+    :action="action"
+    list-type="picture-card"
+    source-type="video/audio/picture"
+    :file-list="fileList"
+    @trigger-click="handleTriggerClick"
+  >
+  </tiny-file-upload>
+</template>
+
+<script>
+import { FileUpload } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: [
+        {
+          name: 'video-test.mp4',
+          url: 'http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4'
+        },
+        {
+          name: 'audio-test.3gp',
+          type: 'audio',
+          url: 'https://hicdev.huawei.com/mirrors/resource/audio-test.3gp'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleTriggerClick() {
+      console.log('handleTriggerClick', ...arguments)
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/file-upload/slot-operate.vue

@@ -0,0 +1,45 @@
+<template>
+  <tiny-file-upload ref="upload" :show-title="false" :action="action" :file-list="fileList">
+    <template #operate="{ file }">
+      <div class="h-[3.75rem] leading-[3.75rem] cursor-pointer text-center sm:h-auto sm:leading-[initial]">
+        <span v-if="file.docId === 'M1T2A1N548572512085860351'" class="sm:mr-2">下载</span>
+        <span>删除</span>
+      </div>
+    </template>
+  </tiny-file-upload>
+</template>
+
+<script>
+import { FileUpload } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: [
+        {
+          docId: 'M1T2A1N548572512085860351',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test1.png',
+          docSize: 100 * 1024,
+          size: 100 * 1024,
+          serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860352',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test2.png',
+          docSize: 100 * 1024,
+          size: 100 * 1024,
+          serverName: 'ShenZhen'
+        }
+      ]
+    }
+  }
+}
+</script>