refactor: remove useless files (#92)

2023-03-28 21:12:40 +08:00 · 2023-03-28 21:12:40 +08:00 · 90372cbb28
parent 534e80d99d
commit 90372cbb28
134 changed files with 0 additions and 17437 deletions
--- a/build/build-icon.js
+++ b/build/build-icon.js
@ -1,92 +0,0 @@
-const vue = require('rollup-plugin-vue')
-const { babel } = require('@rollup/plugin-babel')
-const commonjs = require('@rollup/plugin-commonjs')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const { pathJoin, logGreen, logRed } = require('./utils')
-const rollup = require('rollup')
-const svg = require('rollup-plugin-vue-inline-svg')
-const fs = require('fs-extra')
-const path = require('path')
-
-const inputOptions = {
-  plugins: [
-    vue({
-      css: true
-    }),
-    svg({
-      svgoConfig: {
-        plugins: [{ removeDoctype: true }, { removeComments: true }, { removeViewBox: false }],
-        removeViewBox: false
-      }
-    }),
-    nodeResolve(),
-    babel({
-      exclude: /node_modules/,
-      configFile: false, // 必须为 false 不然会取根文件的 babel.config.js 配置，产生一堆 runtime 代码
-      babelrc: false,
-      babelHelpers: 'bundled',
-      plugins: ['@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from'],
-      presets: ['@babel/preset-env'],
-      extensions: ['.js', '.vue']
-    }),
-    // 如果打包文件中包含 jsx 语法， commonjs 必须放置在 babel 配置下面，否则会报错 PLUGIN_ERROR
-    commonjs()
-  ],
-  external: (deps) => /^@opentiny[\\/]vue-common/.test(deps)
-}
-
-const outputOptions = {
-  format: 'es',
-  exports: 'named'
-}
-
-const build = (components) => {
-  components.forEach((component) => {
-    const inputs = { ...inputOptions }
-
-    inputs.input = pathJoin('..', 'packages', 'icon', component.path)
-
-    if (component.path === 'index.js') {
-      inputs.external = (deps) => !deps.includes('index.js')
-    } else {
-      inputs.external = (deps) => /^@opentiny[\\/]vue-common/.test(deps)
-    }
-
-    rollup
-      .rollup(inputs)
-      .then((bundle) => {
-        const outs = { ...outputOptions }
-        outs.file = pathJoin('..', 'packages', 'icon', component.libPath)
-        bundle.write(outs)
-        logGreen(`${component.path} compile icon done`)
-      })
-      .catch((e) => {
-        logRed(e)
-      })
-  })
-}
-
-function createComponentMap(dir) {
-  const components = []
-  fs.readdirSync(dir).forEach((file) => {
-    if (['dist', 'runtime'].includes(file)) {
-      return
-    }
-
-    if (fs.statSync(path.join(dir, file)).isDirectory()) {
-      components.push({
-        path: `${file}/index.js`,
-        libPath: `dist/lib/${file}.js`
-      })
-    } else {
-      file.endsWith('.js') &&
-        components.push({
-          path: `${file}`,
-          libPath: `dist/lib/${file}`
-        })
-    }
-  })
-  return components
-}
-
-build(createComponentMap(pathJoin('..', 'packages', 'icon')))
--- a/build/build-version.js
+++ b/build/build-version.js
@ -1,123 +0,0 @@
-/**
- * 批量更新组件版本号，一般用于大版本发布
- *  npm run build:version ${targetVersion} ${tag} ${single-components}|null[build all pkg]
- * example:
- *  发布 @opentiny/vue-alert@next 和 @opentiny/vue-button@next 命令:
- *    npm run build:version '0.1.0' 'next' 'alert button'
- *  发布全量包@next:
- *    npm run build:version '0.1.0' 'next'
- */
-const fs = require('fs-extra')
-const path = require('path')
-const ROOT_PATH = path.join(__dirname, '..')
-const TYPE = process.env.TYPE
-const isFullVersionUpdate = true
-const TAG = process.argv[3] === 'false' ? '' : process.argv[3]
-const packages = path.join(ROOT_PATH, 'packages')
-const pkgJsonFileName = 'package.json'
-const { logGreen } = require('./utils')
-const tinyVueReg = /@opentiny\//
-
-const targetVersion = process.argv[2] || JSON.parse(fs.readFileSync(path.join(ROOT_PATH, pkgJsonFileName)).toString()).version
-
-const isUpdateDependenciesVersion = true // process.argv[3] === 'true'
-const single = process.argv[4]
-const targetVersionArr = targetVersion.split('.')
-const oldVersion = `${targetVersionArr[0]}.${targetVersionArr[1] - 1}.0`
-const targetVersionDependencies = `${targetVersionArr[0]}.${targetVersionArr[1]}.0`
-
-const isTinyVuePkg = (str) => tinyVueReg.test(str || '')
-
-const replaceDependenciesForTag = (obj) => {
-  for (let key in obj) {
-    if (isTinyVuePkg(key)) {
-      obj[key] = TAG
-    }
-  }
-
-  return obj
-}
-
-const replaceDependencies = (obj) => {
-  for (let key in obj) {
-    if (isTinyVuePkg(key) && /~/.test(obj[key])) {
-      obj[key] = obj[key].replace(isUpdateDependenciesVersion ? /[0-9]+\.[0-9]+\.[0-9]+/ : oldVersion, targetVersionDependencies)
-    }
-  }
-
-  return obj
-}
-
-const buidPackages = (dirs) => {
-  let uiArr
-
-  if (single) {
-    uiArr = single.trim().split(' ')
-  }
-
-  fs.readdirSync(dirs).forEach((name) => {
-    if (uiArr && !uiArr.includes(name)) {
-      return
-    }
-
-    const component = path.join(dirs, name)
-
-    if (name === 'src' || !fs.statSync(component).isDirectory()) {
-      return
-    }
-
-    let pkgJsonFile, pkgJson
-
-    try {
-      pkgJsonFile = path.join(component, pkgJsonFileName)
-      pkgJson = JSON.parse(fs.readFileSync(pkgJsonFile).toString())
-    } catch (error) {
-      return
-    }
-
-    if (isTinyVuePkg(pkgJson.name)) {
-      const arr = ['dependencies', 'devDependencies']
-
-      pkgJson.version = single || isFullVersionUpdate ? targetVersion : targetVersionDependencies
-
-      arr.forEach((key) => {
-        if (pkgJson[key]) {
-          pkgJson[key] = TAG ? replaceDependenciesForTag(pkgJson[key]) : replaceDependencies(pkgJson[key])
-        }
-      })
-
-      fs.writeFileSync(pkgJsonFile, JSON.stringify(pkgJson, null, 2))
-    }
-
-    if (name === 'chart') {
-      buidPackages(component)
-    }
-  })
-}
-
-if (!targetVersion) {
-  throw new Error('targetVersion is null, cmd example:\n npm run build:version 3.10.0 true "alert grid"')
-}
-
-const buildCommon = () => {
-  const pkgJsonFile = path.join(ROOT_PATH, pkgJsonFileName)
-  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonFile).toString())
-
-  pkgJson.version = targetVersion
-  pkgJson.uiVersion = isFullVersionUpdate ? targetVersion : targetVersionDependencies
-  pkgJson.srcVersion = isFullVersionUpdate ? targetVersion : targetVersionDependencies
-
-  fs.writeFileSync(pkgJsonFile, JSON.stringify(pkgJson, null, 2))
-  logGreen('update src version done')
-}
-
-const build = () => {
-  buildCommon()
-
-  if (TYPE === 'ui') {
-    buidPackages(packages)
-    logGreen('update all component version done')
-  }
-}
-
-build()
--- a/build/config.js
+++ b/build/config.js
@ -1,98 +0,0 @@
-const fs = require('fs-extra')
-const vue = require('rollup-plugin-vue')
-const { babel } = require('@rollup/plugin-babel')
-const alias = require('@rollup/plugin-alias')
-const commonjs = require('@rollup/plugin-commonjs')
-const postcss = require('rollup-plugin-postcss')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const { pathJoin } = require('./utils')
-const { getAllModules } = require('./module-utils')
-
-const external = [
-  'vue',
-  'quill',
-  './pc',
-  'echarts',
-  'echarts-amap',
-  './mobile',
-  '@vue/composition-api',
-  'echarts-liquidfill',
-  'echarts-wordcloud',
-  '@opentiny/vue-common',
-  '@opentiny/vue-locale',
-  '@opentiny/vue-renderless'
-]
-
-const globals = {
-  vue: 'Vue',
-  'echarts-amap': 'echarts.amap',
-  'echarts-liquidfill': 'echarts-liquidfill',
-  'echarts-wordcloud': 'echarts-wordcloud',
-  '@vue/composition-api': 'vueCompositionApi',
-  '@opentiny/vue-common': 'TinyVueCommon',
-  '@opentiny/vue-locale': 'TinyVueLocale',
-  '@opentiny/vue-renderless': 'TinyRenderLess'
-}
-
-const aliasList = {}
-const components = getAllModules(false)
-
-components.forEach((item) => {
-  aliasList[item.libName] = pathJoin('../' + item.path)
-
-  if (item.private) {
-    return
-  }
-
-  const isComponent = item.type === 'component'
-
-  external.push(item.importName) // @opentiny/vue-todo
-  external.push(item.libName) // @opentiny/vue/todo
-  globals[item.libName] = item.global // TinyTodo
-
-  if (isComponent) {
-    if (fs.existsSync(pathJoin('../../tiny-vue-theme'))) {
-      aliasList[`@opentiny/vue-theme/${item.LowerName}/index.css`] = pathJoin(`../../tiny-vue-theme/src/${item.LowerName}/index.css`)
-      aliasList[`@opentiny/vue-theme/${item.LowerName}/index.js`] = pathJoin(`../../tiny-vue-theme/src/${item.LowerName}/index.js`)
-    }
-    external.push(item.libName + '/index.js')
-  } else {
-    external.push(item.libName + '.js')
-  }
-})
-
-exports.aliasList = aliasList
-
-exports.external = (deps) => external.includes(deps) || /^@opentiny[\\/](vue-renderless|vue-theme|vue-common|vue-icon)|echarts|cropperjs|quill/.test(deps)
-
-exports.globals = globals
-
-exports.plugins = [
-  alias({
-    resolve: ['.js', '.vue', '.css'],
-    '@opentiny/vue-locale': pathJoin('../packages/locale/index'),
-    '@opentiny/vue-common': pathJoin('../packages/common/index'),
-    ...aliasList
-  }),
-  postcss({
-    extract: false
-  }),
-  vue({
-    css: true
-  }),
-  nodeResolve({
-    extensions: ['.js', '.jsx', '.vue', '.css']
-  }),
-  babel({
-    exclude: /node_modules/,
-    babelrc: false,
-    configFile: false, // 必须为 false 不然会取根文件的 babel.config.js 配置，产生一堆 runtime 代码
-    babelHelpers: 'bundled',
-    comments: false,
-    extensions: ['.js', '.vue', '.jsx'],
-    presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
-    plugins: ['@babel/plugin-syntax-dynamic-import']
-  }),
-  // 如果打包文件中包含 jsx 语法， commonjs 必须放置在 babel 配置下面，否则会报错 PLUGIN_ERROR
-  commonjs()
-]
--- a/build/module-utils.js
+++ b/build/module-utils.js
@ -1,403 +0,0 @@
-/**
- * 专门用于 modules.json 配置的通用方法
- * modules.json 作为单组件的清单列表，记录组件类型、路径、是否排除引用、仅支持某种[pc/mobile]模式等
- */
-const { writeFileSync } = require('fs')
-const moduleMap = require('../modules.json')
-const { kebabCase, pathJoin, capitalize, prettierFormat, logGreen, capitalizeKebabCase } = require('./utils')
-
-const realNameMap = {
-  realValue: '__real_value'
-}
-
-/**
- * 默认的组件模板
- */
-const defaultMode = ['index', 'pc']
-
-/**
- * 组件组包名前缀：@opentiny/vue-tag | @opentiny/vue/tag
- */
-const importName = '@opentiny/vue'
-
-const exampleBase = 'basic-usage.vue'
-
-/**
- * 查询没有模板的组件（单层组件）
- */
-const getNoTemplateComponents = () => {
-  const components = []
-  const templates = ['Pc', 'Mobile']
-
-  Object.keys(moduleMap).forEach((key) => {
-    if (!key.endsWith(templates[0]) && !key.endsWith(templates[1]) && !key.startsWith('Chart')) {
-      if (!moduleMap[key + templates[0]] && !moduleMap[key + templates[1]]) {
-        components.push(moduleMap[key])
-      }
-    }
-  })
-
-  return components
-}
-
-/**
- * 判断是否为 PC 组件
- */
-const isPcComponent = (name) => {
-  const componentName = capitalizeKebabCase(name)
-  const moduleInfo = moduleMap[componentName]
-
-  return moduleInfo && moduleInfo.onlyMode !== 'mobile'
-}
-
-/**
- * 判断是否为 Mobile 组件
- */
-const isMobileComponent = (name) => {
-  const componentName = capitalizeKebabCase(name)
-  const moduleInfo = moduleMap[componentName]
-
-  return moduleInfo && moduleInfo.onlyMode === 'mobile'
-}
-
-const setIndex = (obj, key, maxNumberLength, indexArr) => {
-  // 一个字母用3位数代替，没有达到3位用0填充到前面，为了减少差值，在前面设置1
-  const priority =
-    '1' +
-    obj[key]
-      .split('')
-      .map((chart) => String(chart.charCodeAt()).padStart(3, '0'))
-      .join('')
-      .padEnd(maxNumberLength, '0')
-      .substr(0, maxNumberLength)
-
-  // 分段比较 （javascript 超过15位比较失效）
-  obj.priority1 = Number(priority.substr(0, 15))
-  obj.priority2 = Number(priority.substr(15, 30))
-  obj.priority3 = Number(priority.substr(30, 45))
-  obj.priority4 = Number(priority.substr(45, maxNumberLength))
-
-  obj.priority = priority
-
-  indexArr.push(obj)
-}
-
-const arrayToObject = (arr, key) => {
-  const sortObj = {}
-
-  for (let i = 0, len = arr.length; i < len; i++) {
-    if (arr[i][realNameMap.realValue]) {
-      sortObj[arr[i][key]] = arr[i][realNameMap.realValue]
-    } else {
-      delete arr[i].priority
-      delete arr[i].priority1
-      delete arr[i].priority2
-      delete arr[i].priority3
-      delete arr[i].priority4
-
-      sortObj[arr[i][key]] = arr[i]
-
-      delete sortObj[arr[i][key]][key]
-    }
-  }
-
-  return sortObj
-}
-
-const sortArray = (arr) => {
-  if (Array.isArray(arr) && arr.length > 1) {
-    const middleIndex = Math.floor(arr.length / 2)
-    const middleValue = arr.splice(middleIndex, 1)[0]
-    const leftArr = []
-    const rightArr = []
-
-    for (let i = 0, len = arr.length; i < len; i++) {
-      const left = arr[i].priority1 - middleValue.priority1
-      const right = arr[i].priority2 - middleValue.priority2
-      const right2 = arr[i].priority3 - middleValue.priority3
-      const right3 = arr[i].priority4 - middleValue.priority4
-
-      let isLeft = false
-
-      if (left === 0 && (right < 0 || (right === 0 && right2 < 0) || (right === 0 && right2 === 0 && right3 < 0))) {
-        isLeft = true
-      }
-
-      if (left < 0 || isLeft) {
-        leftArr.push(arr[i])
-      } else {
-        rightArr.push(arr[i])
-      }
-    }
-
-    return sortArray(leftArr).concat([middleValue], sortArray(rightArr))
-  } else {
-    return arr
-  }
-}
-
-/**
- * 将模块数组按字母的 ASCII 值进行排序（目前只支持16位字母排序）
- * @private
- * @param {Array|Object} sortData 模块数组
- * @param {String} key 排序字段
- * @param {String} returnType 返回类型 Array|Object
- * @returns 排序后的数组或对象
- */
-const quickSort = ({ sortData, key = 'name', returnType = 'array' }) => {
-  const maxNumberLength = 59
-  let indexArr = []
-  if (sortData instanceof Array) {
-    sortData.forEach((item) => {
-      setIndex(item, key, maxNumberLength, indexArr)
-    })
-  } else if (typeof sortData === 'object') {
-    for (const sortKey in sortData) {
-      if (Object.prototype.hasOwnProperty.call(sortData, sortKey)) {
-        const dataItem = sortData[sortKey]
-        let sortItem = {}
-
-        if (typeof dataItem === 'object') {
-          sortItem = {
-            ...sortData[sortKey]
-          }
-        } else {
-          sortItem[realNameMap.realValue] = dataItem
-        }
-        sortItem[key] = sortData[key] || sortKey
-        setIndex(sortItem, key, maxNumberLength, indexArr)
-      }
-    }
-  } else {
-    return sortData
-  }
-
-  return returnType === 'array' ? sortArray(indexArr) : arrayToObject(sortArray(indexArr), key)
-}
-
-/**
- * 根据指定条件搜索模块列表，并排序与生成必要字段
- * @private
- * @param {Function} filterIntercept 搜索条件
- * @param {Boolean} isSort 是否需要排序
- */
-const getSortModules = ({ filterIntercept, isSort = true }) => {
-  let modules = []
-  let componentCount = 0
-  if (typeof filterIntercept === 'function') {
-    Object.keys(moduleMap).forEach((key) => {
-      const component = moduleMap[key]
-      component.name = key
-      if (filterIntercept(component) === true && component.exclude !== true) {
-        const dirs = component.path.split('/')
-        const componentName = dirs.slice(1, dirs.indexOf('src'))
-        component.UpperName = componentName.pop().split('-').map(capitalize).join('')
-        component.LowerName = kebabCase({ str: component.UpperName })
-        // 工程的父文件夹
-        component.parentDir = componentName
-        // libPath: 'packages/todo/dist/pc.js' 组件输出路径
-        component.libPath = component.path.replace('/index.js', '/src/index.js').replace('/src/', '/dist/lib/').replace('.vue', '.js')
-        // libName: '@opentiny/vue/todo/pc'
-        component.libName = component.libPath
-          .replace('packages/', '')
-          .replace('/index', '')
-          .replace('.js', '')
-          .replace('/dist/', '/')
-          .replace(/\/lib$/, '')
-        // 处理子目录
-        if (componentName.length) {
-          component.libName = component.libName.replace(componentName.join('/'), '').replace(/^\//, '')
-        }
-        // importName: '@opentiny/vue-tag/pc'
-        component.importName = importName + '-' + component.libName
-        // libName: '@opentiny/vue/todo/pc'
-        component.libName = importName + '/' + component.libName
-        // tmpName: 'pc'
-        component.tmpName = component.libPath.replace('.js', '').split('/').slice(-1)[0]
-        // global: 'TinyTodoPc'
-        component.global = 'Tiny' + key
-        modules.push(component)
-      }
-      component.type === 'component' && componentCount++
-    })
-    logGreen(`[Contain Components]: Total(${componentCount}) `)
-  } else {
-    modules = moduleMap
-  }
-  return isSort ? quickSort({ sortData: modules }) : modules
-}
-
-/**
- * 获取所有模块，并排序、格式化
- * @param {Boolean} isSort 是否需要排序
- * @returns 模块对象
- */
-const getAllModules = (isSort) => getSortModules({ filterIntercept: () => true, isSort })
-
-/**
- * 获取所有组件，并排序、格式化
- * @param {Boolean} isSort 是否需要排序
- * @returns 组件对象
- */
-const getComponents = (isSort) =>
-  getSortModules({
-    filterIntercept: (item) => !['template'].includes(item.type),
-    isSort
-  })
-
-/**
- * @param {String} key 根据模块对象的 Key 获取对应的值
- * @returns 模块对象
- */
-const getModuleInfo = (key) => moduleMap[key] || {}
-
-/**
- * 将输入的 Map 写入到 modules.json 文件中，并格式化
- * @param {String|Object} moduleMap 模块 Json 对象集合或 Json 字符串
- */
-const writeModuleMap = (moduleMap) => {
-  writeFileSync(
-    pathJoin('..', 'modules.json'),
-    prettierFormat({
-      str: typeof componentMap === 'string' ? moduleMap : JSON.stringify(moduleMap),
-      options: {
-        parser: 'json',
-        printWidth: 10
-      }
-    })
-  )
-}
-
-/**
- * 读取 modules.json 中的模块信息
- * @returns 模块对象
- */
-const readModuleMap = () => moduleMap || {}
-
-/**
- * 获取模块项的模块
- * @param {String} componentName 组件名称（大写，例如：ImgPreview）
- * @param {String} templateName 模板名称/路径
- * @param {Oject} newObj 新增对象
- * @returns 模块对象
- */
-const addModule = ({ componentName, templateName, newObj = {} }) => {
-  const isEntry = templateName.endsWith('index')
-
-  return {
-    path: `packages/${componentName}/` + (isEntry ? `${templateName}.js` : `src/${templateName}.vue`),
-    type: isEntry ? 'component' : 'template',
-    exclude: false,
-    ...newObj
-  }
-}
-
-/**
- * 根据指定条件搜索原始模块列表
- * @private
- * @param {Function} filterIntercept 搜索条件
- */
-const getModules = (filterIntercept) => {
-  let modules = {}
-
-  if (typeof filterIntercept === 'function') {
-    for (const key in moduleMap) {
-      if (Object.prototype.hasOwnProperty.call(moduleMap, key)) {
-        const component = moduleMap[key]
-
-        if (filterIntercept(component) === true && component.exclude !== true) {
-          modules[key] = component
-        }
-      }
-    }
-  } else {
-    modules = moduleMap
-  }
-
-  return modules
-}
-
-/**
- * 根据组件名称查找模块列表
- * @private
- * @param {String} name 组件名称
- * @param {Boolean} inversion 是否取反
- * @param {Boolean} isOriginal 是否取原始数据
- * @param {Boolean} isSort 是否需要排序
- */
-const getByName = ({ name, inversion = false, isOriginal = false, isSort = true }) => {
-  const callback = (item) => (inversion ? item.path.indexOf(`/${name}/`) === -1 : item.path.indexOf(`/${name}/`) > -1)
-
-  return isOriginal ? getModules(callback) : getSortModules({ filterIntercept: callback, isSort })
-}
-
-const getMobileComponents = () => {
-  const modules = getAllModules()
-  const componentNames = modules.filter((item) => item.tmpName === 'mobile').map((item) => item.UpperName)
-
-  const components = modules.filter(
-    (item) => item.onlyMode === 'mobile' || item.onlyMode === 'all' || (item.type === 'component' && componentNames.includes(item.UpperName))
-  )
-
-  return components
-}
-
-const getPcComponents = () => {
-  const modules = getAllModules()
-
-  const components = modules.filter((item) => item.type === 'component' && item.onlyMode !== 'mobile')
-
-  return components
-}
-
-const getOnlyMobileComponents = () => getAllModules().filter((item) => item.onlyMode === 'mobile')
-
-/**
- * 动态创建 modules.json ，适配新建组件
- * @param {String} componentName 组件名称 （驼峰大写：img-preview）
- * @param {Boolean} isMobile 是否为移动组件
- */
-const createModuleMapping = (componentName, templateName, isMobile = false) => {
-  const upperName = capitalizeKebabCase(componentName)
-
-  // 生成 modules.json 文件
-  moduleMap[upperName] = addModule({
-    isMobile,
-    templateName,
-    componentName
-  })
-
-  const moduleJson = quickSort({ sortData: moduleMap, returnType: 'object' })
-
-  writeFileSync(
-    pathJoin('..', 'modules.json'),
-    prettierFormat({
-      str: JSON.stringify(moduleJson),
-      options: {
-        parser: 'json',
-        printWidth: 10
-      }
-    })
-  )
-}
-
-module.exports = {
-  quickSort,
-  getByName,
-  addModule,
-  importName,
-  exampleBase,
-  defaultMode,
-  createModuleMapping,
-  isPcComponent,
-  getAllModules,
-  getComponents,
-  getModuleInfo,
-  readModuleMap,
-  writeModuleMap,
-  getPcComponents,
-  isMobileComponent,
-  getMobileComponents,
-  getOnlyMobileComponents,
-  getNoTemplateComponents
-}
--- a/build/release-ui.js
+++ b/build/release-ui.js
@ -1,202 +0,0 @@
-/**
- * 用于发布单组件包
- */
-const fs = require('fs-extra')
-const path = require('path')
-const { execSync } = require('child_process')
-const utils = require('../build/utils')
-const { logGreen } = require('../build/utils')
-
-const sourcePkg = 'packages'
-const packages = 'dist'
-const tgzs = 'tgzs'
-const packageName = 'package.json'
-const NPM_TAG = process.env.NPM_TAG || '~0.1.0'
-const VERSION_TAG = process.env.VERSION_TAG || '0.1.0'
-const NPM_WAREHOUSE = process.env.NPM_WAREHOUSE
-const targetVersion = utils.getTinyVersion('themeVersion')
-const targetVersionArr = targetVersion.split('.')
-const themeVersionDependencies = `~${targetVersionArr[0]}.${targetVersionArr[1]}.${targetVersionArr.slice(-targetVersionArr.length + 2).join('.')}`
-const typings = 'typings'
-
-const packPackages = (p, packagePath) => {
-  execSync('npm pack -q', { cwd: path.join(packages, p) })
-  fs.readdirSync(path.join(packages, p)).forEach((item) => {
-    if (item.endsWith('.tgz')) {
-      const tgzPath = path.join(packages, p, item)
-      fs.moveSync(tgzPath, path.join(tgzs, item), { overwrite: true })
-      fs.unlinkSync(packagePath)
-    }
-  })
-}
-
-// 处理每个组件包的package.json文件
-const dealPackage = (p, packageJSON) => {
-  const packageDeps = packageJSON.dependencies || []
-  Object.keys(packageDeps).forEach((key) => {
-    if (key.includes('@opentiny/vue')) {
-      packageDeps[key] = NPM_TAG
-    }
-  })
-  let dependencies = {
-    '@opentiny/vue-renderless': themeVersionDependencies,
-    '@opentiny/vue-common': NPM_TAG,
-    '@opentiny/vue-icon': NPM_TAG,
-    '@opentiny/vue-theme': themeVersionDependencies,
-    '@opentiny/vue-theme-mobile': themeVersionDependencies
-  }
-  if (p === 'icon') {
-    packageJSON.dependencies = Object.assign(packageJSON.dependencies || {}, {
-      '@opentiny/vue-common': NPM_TAG,
-      '@opentiny/vue-theme': themeVersionDependencies
-    })
-  } else if (p === 'locale') {
-    dependencies = {
-      '@opentiny/vue-renderless': themeVersionDependencies
-    }
-  } else if (p === 'common') {
-    dependencies = {
-      '@opentiny/vue-renderless': themeVersionDependencies,
-      '@opentiny/vue-theme': themeVersionDependencies
-    }
-    if (VERSION_TAG.startsWith('2')) {
-      dependencies['@vue/composition-api'] = '1.2.2'
-    }
-  }
-  packageJSON.dependencies = Object.assign(packageJSON.dependencies || {}, dependencies)
-  if (VERSION_TAG.startsWith('3')) {
-    packageJSON.types = 'index.d.ts'
-  }
-  packageJSON.sideEffects = false
-  packageJSON.version = VERSION_TAG
-}
-
-const release = (p) => {
-  const packagePath = path.join(packages, p, packageName)
-  const packageJSON = fs.readJSONSync(packagePath)
-  const componentEntry = path.join(packagePath, '../lib', 'index.js')
-  dealPackage(p, packageJSON)
-  fs.writeFileSync(packagePath, JSON.stringify(packageJSON, null, 2))
-  if (fs.existsSync(componentEntry)) {
-    let componentEntryContent = fs.readFileSync(componentEntry).toString('UTF-8')
-    componentEntryContent = componentEntryContent.replace('process.env.COMPONENT_VERSION', `'${VERSION_TAG}'`)
-    fs.writeFileSync(componentEntry, componentEntryContent)
-  }
-  logGreen(`${p} pack done`)
-
-  // 测试情况下可以打包成压缩包
-  if (NPM_WAREHOUSE === 'test') {
-    packPackages(p, packagePath)
-  }
-}
-
-const dealFile = (componentDir, distDir) => {
-  if (componentDir.includes('common')) {
-    // 如果是vue3.0的打包命令下
-    if (VERSION_TAG.startsWith('3')) {
-      // 删除 vue2.0文件
-      fs.removeSync(path.join(distDir, 'adapter/vue2.js'))
-      // 重写adapter/index.js
-      fs.copySync(path.join(__dirname, '../', 'template/common/vue3.js'), path.join(distDir, 'adapter/index.js'))
-    } else {
-      // 删除 vue3.0文件
-      fs.removeSync(path.join(distDir, 'adapter/vue3.js'))
-      // 重写adapter/index.js
-      fs.copySync(path.join(__dirname, '../', 'template/common/vue2.js'), path.join(distDir, 'adapter/index.js'))
-    }
-  } else if (componentDir.includes('locale')) {
-    // 如果是vue3.0的打包命令下
-    if (VERSION_TAG.startsWith('3')) {
-      // 删除 vue2.0文件
-      fs.removeSync(path.join(distDir, 'vue2.js'))
-      // 重写index.js
-      fs.copySync(path.join(__dirname, '../', 'template/locale/vue3.js'), path.join(distDir, 'index.js'))
-    } else {
-      // 删除 vue3.0文件
-      fs.removeSync(path.join(distDir, 'vue3.js'))
-      // 重写index.js
-      fs.copySync(path.join(__dirname, '../', 'template/locale/vue2.js'), path.join(distDir, 'index.js'))
-    }
-  }
-}
-
-// chart文件夹处理
-
-const releaseChart = (componentDir, item) => {
-  fs.readdirSync(componentDir).forEach((child) => {
-    const stat = fs.statSync(path.join(componentDir, child))
-
-    if (stat.isDirectory()) {
-      const distPath = path.join(sourcePkg, item, child, packages)
-      const packageJson = path.join(sourcePkg, item, child, packageName)
-
-      const typingsPath = path.join(typings, item, child)
-
-      if (fs.existsSync(typingsPath) && VERSION_TAG.startsWith('3')) {
-        fs.copySync(typingsPath, path.join(packages, item), {
-          overwrite: true
-        })
-      }
-
-      if (fs.existsSync(distPath)) {
-        fs.copySync(distPath, path.join(packages, item, child), {
-          overwrite: true
-        })
-        fs.copySync(packageJson, path.join(packages, item, child, packageName), {
-          overwrite: true
-        })
-      } else {
-        fs.copySync(componentDir, path.join(packages, item, child), {
-          overwrite: true
-        })
-      }
-      release(path.join(item, child))
-    }
-  })
-}
-
-// 读取packages文件夹下的所有组件，并执行copy操作
-const releaseAll = () => {
-  fs.readdirSync(path.join(sourcePkg)).forEach((item) => {
-    const componentDir = path.join(sourcePkg, item)
-    const stat = fs.statSync(componentDir)
-
-    if (stat.isDirectory()) {
-      const distPath = path.join(sourcePkg, item, packages)
-      const packageJson = path.join(sourcePkg, item, packageName)
-      const typingsPath = path.join(typings, item)
-
-      if (fs.existsSync(typingsPath) && VERSION_TAG.startsWith('3')) {
-        fs.copySync(typingsPath, path.join(packages, item), {
-          overwrite: true
-        })
-      }
-
-      if (fs.existsSync(distPath)) {
-        fs.copySync(distPath, path.join(packages, item), {
-          overwrite: true
-        })
-        fs.copySync(packageJson, path.join(packages, item, packageName), {
-          overwrite: true
-        })
-      } else {
-        // 如果packags包里面没有dist目录，则copy整个目录，比如common local等适配层
-        fs.copySync(componentDir, path.join(packages, item), {
-          overwrite: true
-        })
-
-        // 处理common和locale包，分别针对vue2和vue3
-        dealFile(componentDir, path.join(packages, item))
-      }
-
-      release(item)
-      if (item === 'chart') {
-        releaseChart(componentDir, item)
-      }
-    }
-  })
-
-  logGreen('-- all release done --')
-}
-
-releaseAll()
--- a/build/release.js
+++ b/build/release.js
@ -1,104 +0,0 @@
-/**
- * 用于发布 @opentiny/vue 包
- */
-const fs = require('fs-extra')
-const path = require('path')
-const semver = require('semver')
-const sourcePkg = 'packages'
-const source = 'dist'
-const packageName = 'package.json'
-const typings = 'typings'
-const packagePath = path.join(source, packageName)
-const packageJSON = fs.readJSONSync(packageName)
-
-const keys = [
-  'name',
-  'version',
-  'description',
-  'main',
-  'files',
-  'sideEffects',
-  'author',
-  'license',
-  'home',
-  'repository',
-  'homepage',
-  'keywords',
-  'dependencies',
-  'engines',
-  'browserslist'
-]
-
-const NPM_TAG = process.env.NPM_TAG
-// 命令行中指定的版本号
-const VERSION_TAG = process.env.VERSION_TAG
-
-for (let key in packageJSON) {
-  if (Object.prototype.hasOwnProperty.call(packageJSON, key)) {
-    !~keys.indexOf(key) && delete packageJSON[key]
-  }
-}
-
-// 配置指定的版本号
-if (VERSION_TAG) {
-  packageJSON.version = VERSION_TAG
-}
-
-// 根据modules.json生成所有组件列表信息
-const genDependencies = () => {
-  const { getComponents } = require('../build/module-utils')
-  let dependencies = {}
-
-  getComponents(false).forEach((component) => {
-    const packPath = component.path.replace(/index\.js$/, 'package.json')
-
-    if (!fs.existsSync(packPath)) {
-      return
-    }
-
-    if (NPM_TAG) {
-      dependencies[component.importName] = NPM_TAG
-    } else {
-      let { version } = fs.readJSONSync(packPath)
-
-      if (version) {
-        const major = semver.major(version)
-        const minor = semver.minor(version)
-
-        version = `${major}.${minor}.0`
-        dependencies[component.importName] = '~' + version
-      }
-    }
-  })
-
-  return dependencies
-}
-
-if (VERSION_TAG.startsWith('3')) {
-  packageJSON.types = 'index.d.ts'
-}
-
-// 根据组件列表信息重新package.json的dependencies信息
-packageJSON.dependencies = Object.assign(packageJSON.dependencies || {}, genDependencies())
-
-fs.writeFileSync(packagePath, JSON.stringify(packageJSON, null, 2))
-fs.copySync(packagePath, path.join(source, 'vue', packageName), {
-  overwrite: true
-})
-
-// 拷贝 README 文件
-fs.copySync('README.md', path.join(source, 'README.md'))
-fs.copySync('README.md', path.join(source, 'vue', 'README.md'))
-
-const entrys = ['pc.js', 'mobile.js', 'index.js']
-
-entrys.forEach((name) => {
-  fs.copySync(path.join(sourcePkg, name), path.join(source, 'vue', name), {
-    overwrite: true
-  })
-  if (VERSION_TAG.startsWith('3')) {
-    fs.copySync(path.join(typings, name.replace('.js', '.d.ts')), path.join(source, 'vue', name.replace('.js', '.d.ts')), {
-      overwrite: true
-    })
-  }
-})
--- a/example/build/build-icon.js
+++ b/example/build/build-icon.js
@ -1,88 +0,0 @@
-const commonjs = require('@rollup/plugin-commonjs')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const vue = require('rollup-plugin-vue')
-const { babel } = require('@rollup/plugin-babel')
-const { pathJoin, logGreen, logRed } = require('../../build/utils')
-const rollup = require('rollup')
-const svgVue = require('./rollup-vue3-svg')
-const fs = require('fs-extra')
-const path = require('path')
-
-const inputOptions = {
-  plugins: [
-    vue({
-      css: true
-    }),
-    svgVue({}),
-    nodeResolve(),
-    babel({
-      exclude: /node_modules/,
-      babelrc: false,
-      configFile: false, // 必须为 false 不然会取根文件的 babel.config.js 配置，产生一堆 runtime 代码
-      babelHelpers: 'bundled',
-      extensions: ['.js', '.vue'],
-      presets: ['@babel/preset-env'],
-      plugins: ['@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from']
-    }),
-    // 如果打包文件中包含 jsx 语法， commonjs 必须放置在 babel 配置下面，否则会报错 PLUGIN_ERROR
-    commonjs()
-  ]
-}
-
-const outputOptions = {
-  format: 'es',
-  exports: 'named'
-}
-
-const build = (icons) => {
-  icons.forEach((itconComponent) => {
-    const inputs3 = { ...inputOptions }
-
-    inputs3.input = pathJoin('..', 'packages', 'icon', itconComponent.path)
-
-    if (itconComponent.path === 'index.js') {
-      inputs3.external = (deps) => !deps.includes('index.js')
-    } else if (itconComponent.path === 'lowercase.js') {
-      inputs3.external = (deps) => !deps.includes('lowercase.js')
-    } else {
-      inputs3.external = (deps) => !/@opentiny[\\/]vue-theme/.test(deps) && !deps.includes('index.js')
-    }
-
-    rollup
-      .rollup(inputs3)
-      .then((bundle) => {
-        const outs = { ...outputOptions }
-        outs.file = pathJoin('..', 'packages', 'icon', itconComponent.libPath)
-        bundle.write(outs)
-        logGreen(`${itconComponent.path} compile icon done`)
-      })
-      .catch((e) => {
-        logRed(e)
-      })
-  })
-}
-
-function createComponentMap(iconDir) {
-  const components = []
-  fs.readdirSync(iconDir).forEach((iconFile) => {
-    if (['dist', 'runtime'].includes(iconFile)) {
-      return
-    }
-
-    if (fs.statSync(path.join(iconDir, iconFile)).isDirectory()) {
-      components.push({
-        path: `${iconFile}/index.js`,
-        libPath: `dist/lib/${iconFile}.js`
-      })
-    } else {
-      iconFile.endsWith('.js') &&
-        components.push({
-          path: `${iconFile}`,
-          libPath: `dist/lib/${iconFile}`
-        })
-    }
-  })
-  return components
-}
-
-build(createComponentMap(pathJoin('..', 'packages', 'icon')))
--- a/example/build/config.js
+++ b/example/build/config.js
@ -1,102 +0,0 @@
-const fs = require('fs-extra')
-const { babel } = require('@rollup/plugin-babel')
-const vue = require('rollup-plugin-vue')
-const alias = require('@rollup/plugin-alias')
-const commonjs = require('@rollup/plugin-commonjs')
-const postcss = require('rollup-plugin-postcss')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const { pathJoin } = require('../../build/utils')
-const { getAllModules } = require('../../build/module-utils')
-
-const external = [
-  'vue',
-  './pc',
-  './mobile',
-  '@opentiny/vue-common',
-  'echarts',
-  'echarts-amap',
-  '@opentiny/vue-locale',
-  'quill',
-  '@vue/composition-api',
-  '@opentiny/vue-renderless'
-]
-
-const globals = {
-  vue: 'Vue',
-  '@vue/composition-api': 'vueCompositionApi',
-  '@opentiny/vue-locale': 'TinyVueLocale',
-  '@opentiny/vue-common': 'TinyVueCommon',
-  'echarts-amap': 'echarts.amap',
-  'echarts-liquidfill': 'echarts-liquidfill',
-  'echarts-wordcloud': 'echarts-wordcloud',
-  '@opentiny/vue-renderless': 'TinyRenderLess'
-}
-
-const aliasList = {}
-const components = getAllModules(false)
-
-components.forEach((itemComponent) => {
-  aliasList[itemComponent.libName] = pathJoin(`../${itemComponent.path}`)
-
-  if (itemComponent.private) {
-    return
-  }
-
-  const isComponent = itemComponent.type === 'component'
-
-  external.push(itemComponent.importName) // @opentiny/vue3-todo
-  external.push(itemComponent.libName) // @opentiny/vue3/todo
-  globals[itemComponent.libName] = itemComponent.global // TinyTodo
-
-  if (isComponent) {
-    if (fs.existsSync(pathJoin('../../tiny-vue-theme'))) {
-      aliasList[`@opentiny/vue-theme/${itemComponent.LowerName}/index.css`] = pathJoin(`../../tiny-vue-theme/style/${itemComponent.LowerName}/index.css`)
-      aliasList[`@opentiny/vue-theme/${itemComponent.LowerName}/index.js`] = pathJoin(`../../tiny-vue-theme/style/${itemComponent.LowerName}/index.js`)
-    }
-    external.push(`${itemComponent.libName}/index.js`)
-  } else {
-    external.push(`${itemComponent.libName}.js`)
-  }
-})
-
-exports.aliasList = aliasList
-
-exports.external = (deps) => external.includes(deps) || /^@opentiny[\\/](\vue-renderless|\vue-theme|\vue-common|\vue-icon)|echarts|cropperjs|quill/.test(deps)
-
-exports.globalsMap = globals
-
-const op = {
-  resolve: ['.js', '.vue', '.css'],
-  extract: false,
-  css: true,
-  extensions: ['.js', '.jsx', '.vue', '.css']
-}
-
-exports.plugins = [
-  alias({
-    resolve: op.resolve,
-    '@opentiny/vue-locale': pathJoin('../packages/locale/index'),
-    '@opentiny/vue-common': pathJoin('../packages/common/index'),
-    ...aliasList
-  }),
-  postcss({
-    extract: op.extract
-  }),
-  vue({
-    css: op.css
-  }),
-  nodeResolve({
-    extensions: op.extensions
-  }),
-  babel({
-    configFile: false,
-    babelrc: false,
-    exclude: /node_modules/,
-    comments: false,
-    presets: ['@babel/preset-env'],
-    babelHelpers: 'bundled',
-    extensions: ['.js', '.vue', '.jsx'],
-    plugins: ['@babel/plugin-syntax-dynamic-import', '@vue/babel-plugin-jsx']
-  }),
-  commonjs()
-]
--- a/example/src/assets/tiny-mobile-demo.css
+++ b/example/src/assets/tiny-mobile-demo.css
@ -1,111 +0,0 @@
-.content .tiny-mobile-tabbar-demo {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.content .tiny-mobile-tabbar-demo .tiny-mobile-tabbar--fixed {
-  position: absolute;
-}
-.content .tiny-mobile-dialog-box-demo {
-  position: relative;
-  height: 100%;
-  padding: 20px;
-}
-.content .tiny-mobile-dialog-box-demo .v-modal,
-.content .tiny-mobile-dialog-box__wrapper {
-  position: absolute;
-}
-.content .tiny-mobile-dropdown-menu-demo {
-  height: 610px;
-  position: relative;
-}
-.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-wrap {
-  height: auto;
-}
-.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction {
-  height: 300px;
-  top: 380px;
-}
-.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-filter {
-  justify-content: left;
-}
-.content .tiny-mobile-dropdown-menu-demo .tiny-mobile-dropdown-item {
-  position: absolute;
-  width: 351px;
-  left: 0;
-  top: 42px !important;
-}
-.content
-  .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction
-  .tiny-mobile-dropdown-item {
-  position: fixed;
-  left: 0;
-  right: 648px;
-  bottom: 0 !important;
-  top: 40px !important;
-  overflow: inherit;
-}
-.content
-  .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction
-  .tiny-mobile-dropdown-item__content {
-  position: relative;
-}
-.content
-  .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-wrap
-  .tiny-mobile-dropdown-item {
-  overflow: visible;
-}
-.content .tiny-mobile-dropdown-menu-demo .tiny-popup {
-  width: 351px;
-}
-.content .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-wrap .tiny-popup {
-  height: auto;
-  max-height: initial;
-}
-.content .tiny-mobile-dropdown-menu-demo .tiny-overlay {
-  position: absolute;
-}
-.content
-  .tiny-mobile-dropdown-menu-demo.mobile-dropdown-menu-direction
-  .tiny-overlay {
-  top: 407px !important;
-}
-.content .tiny-mobile-image-viewer-demo {
-  height: 100%;
-  position: relative;
-}
-.content .tiny-mobile-image-viewer-demo .tiny-mobile-image-viewer__wrapper {
-  position: absolute;
-}
-.content .tiny-mobile-exception-demo {
-  height: 610px;
-  background: #ccc;
-  position: relative;
-}
-.content .tiny-mobile-exception-demo .tiny-mobile-exception {
-  position: absolute;
-  z-index: 99;
-}
-.content .tiny-mobile-exception-demo .tiny-mobile-exception__footer {
-  position: absolute;
-}
-.tiny-mobile-mini-picker-demo {
-  width: 100%;
-  height: 100%;
-}
-.tiny-mobile-mini-picker-demo .tiny-mobile-mini-picker {
-  height: calc(100% - 48px);
-  position: relative;
-}
-.tiny-mobile-mini-picker-demo.mini-picker-wrap .tiny-mobile-mini-picker {
-  height: calc(100% - 200px);
-  position: relative;
-}
-.tiny-mobile-mini-picker-demo .tiny-mobile-button,
-.tiny-mobile-mini-picker-demo .tiny-mobile-mini-picker__mask,
-.tiny-mobile-mini-picker-demo .tiny-mobile-mini-picker__content {
-  position: absolute;
-}
-.tiny-mobile-mini-picker-demo .tiny-mobile-input-form__input {
-  text-align: right;
-}
--- a/example/src/demo/mobile/button/size.vue
+++ b/example/src/demo/mobile/button/size.vue
@ -1,36 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>默认尺寸</tiny-button>
-    <tiny-button type="primary" size="large" round>large</tiny-button>
-    <tiny-button type="success" size="medium" round>medium</tiny-button>
-    <tiny-button type="info" size="small" round>small</tiny-button>
-    <tiny-button type="warning" size="mini" round>mini</tiny-button>
-    <tiny-button type="primary" size="large" round>大号按钮</tiny-button>
-    <tiny-button type="success" size="medium" round>中号按钮</tiny-button>
-    <tiny-button type="info" size="small" round>小号按钮</tiny-button>
-    <tiny-button type="warning" size="mini" round>mini按钮</tiny-button>
-  </div>
-</template>
-
-<script>
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>
--- a/example/src/demo/mobile/index-bar/base.vue
+++ b/example/src/demo/mobile/index-bar/base.vue
@ -1,54 +0,0 @@
-<template>
-  <div class="index-bar-wrapper">
-    <tiny-index-bar :index-list="indexList">
-      <div v-for="item in indexList" :key="item">
-        <tiny-index-bar-anchor :index="item"></tiny-index-bar-anchor>
-        <div>内容 {{ item }}</div>
-        <div>内容 {{ item }}</div>
-        <div>内容 {{ item }}</div>
-        <div>内容 {{ item }}</div>
-      </div>
-    </tiny-index-bar>
-    <div class="btn" @click="addData">增加数据</div>
-  </div>
-</template>
-
-<script>
-import { IndexBar, IndexBarAnchor } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyIndexBar: IndexBar,
-    TinyIndexBarAnchor: IndexBarAnchor
-  },
-  data() {
-    return {
-      indexList: [],
-      num: 8
-    }
-  },
-  mounted() {
-    this.indexList = Array.from(new Array(this.num), (ele, index) => String.fromCharCode(65 + index))
-  },
-  methods: {
-    addData() {
-      this.num += 2
-      this.indexList = Array.from(new Array(this.num), (ele, index) => String.fromCharCode(65 + index))
-    }
-  }
-}
-</script>
-
-<style scoped>
-.index-bar-wrapper {
-  width: 414px;
-}
-
-.btn {
-  position: fixed;
-  bottom: 50px;
-  left: 50%;
-  background: red;
-  cursor: pointer;
-}
-</style>
--- a/example/src/demo/mobile/index-bar/event.vue
+++ b/example/src/demo/mobile/index-bar/event.vue
@ -1,46 +0,0 @@
-<template>
-  <div class="index-bar-wrapper">
-    <tiny-index-bar :index-list="indexList" @change="indexChange" @select="selectIndex">
-      <div v-for="item in indexList" :key="item">
-        <tiny-index-bar-anchor :index="item"></tiny-index-bar-anchor>
-        <div>内容 {{ item }}</div>
-        <div>内容 {{ item }}</div>
-        <div>内容 {{ item }}</div>
-        <div>内容 {{ item }}</div>
-      </div>
-    </tiny-index-bar>
-  </div>
-</template>
-
-<script>
-import { IndexBar, IndexBarAnchor, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyIndexBar: IndexBar,
-    TinyIndexBarAnchor: IndexBarAnchor
-  },
-  data() {
-    return {
-      indexList: []
-    }
-  },
-  mounted() {
-    this.indexList = Array.from(new Array(26), (ele, index) => String.fromCharCode(65 + index))
-  },
-  methods: {
-    indexChange(value) {
-      Modal.message({ message: 'change事件:' + value })
-    },
-    selectIndex(value) {
-      Modal.message({ message: 'select事件:' + value })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.index-bar-wrapper {
-  width: 414px;
-}
-</style>
--- a/example/src/demo/mobile/modal/base.vue
+++ b/example/src/demo/mobile/modal/base.vue
@ -1,52 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="baseClick1" :reset-time="0">单按钮无标题</tiny-button>
-    <tiny-button @click="baseClick2" :reset-time="0">单按钮有标题</tiny-button>
-    <tiny-button @click="baseClick3" :reset-time="0">单按钮有标题多行</tiny-button>
-    <tiny-button @click="baseClick4" :reset-time="0">双按钮有标题</tiny-button>
-    <tiny-button @click="baseClick5" :reset-time="0">双按钮无标题</tiny-button>
-  </div>
-</template>
-
-<script>
-import { Button, Modal, Notify } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    baseClick1() {
-      Modal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
-    },
-    baseClick2() {
-      Modal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
-    },
-    baseClick3() {
-      Modal.alert({
-        message: '单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
-        title: '标题',
-        tiny_mode: 'mobile'
-      })
-    },
-    baseClick4() {
-      Modal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {
-        Notify({
-          type: 'info',
-          title: '触发回调事件',
-          message: `点击${res}按钮`
-        })
-      })
-    },
-    baseClick5() {
-      Modal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {
-        Notify({
-          type: 'info',
-          title: '触发回调事件',
-          message: `点击${res}按钮`
-        })
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/cancel-event.vue
+++ b/example/src/demo/mobile/modal/cancel-event.vue
@ -1,31 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">点击取消按钮时触发事件</tiny-button>
-    <tiny-modal v-model="value1" type="confirm" show-footer @cancel="cancelClick">
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    cancelClick() {
-      Modal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/close-event.vue
+++ b/example/src/demo/mobile/modal/close-event.vue
@ -1,31 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
-    <tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick">
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    closeClick() {
-      Modal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/confirm-event.vue
+++ b/example/src/demo/mobile/modal/confirm-event.vue
@ -1,31 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">点击确定按钮触发事件</tiny-button>
-    <tiny-modal v-model="value1" type="confirm" show-footer @confirm="confirmClick">
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    confirmClick() {
-      Modal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/duration.vue
+++ b/example/src/demo/mobile/modal/duration.vue
@ -1,38 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="baseClick" :reset-time="0">默认3000ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    baseClick() {
-      Modal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
-    },
-    successClick() {
-      Modal.message({
-        message: '500ms后自动关闭提示框',
-        status: 'success',
-        duration: '500',
-        tiny_mode: 'mobile'
-      })
-    },
-    errorClick() {
-      Modal.message({
-        message: '5000ms后自动关闭提示框',
-        status: 'error',
-        duration: '5000',
-        tiny_mode: 'mobile'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/esc-closable.vue
+++ b/example/src/demo/mobile/modal/esc-closable.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">按 Esc 键可以关闭弹出框</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/footer-slot.vue
+++ b/example/src/demo/mobile/modal/footer-slot.vue
@ -1,26 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">自定义脚部</tiny-button>
-    <tiny-modal v-model="value1" show-footer>
-      <template #footer>
-        <tiny-button type="primary" @click="value1 = false" round>我知道了</tiny-button>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/fullscreen.vue
+++ b/example/src/demo/mobile/modal/fullscreen.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">最大化显示</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/grid.vue
+++ b/example/src/demo/mobile/modal/grid.vue
@ -1,59 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
-    <tiny-modal v-model="value1" :lock-scroll="false" show-footer width="1000">
-      <template #default>
-        <p>test</p>
-        <tiny-grid :tooltip-config="{ 'append-to-body': false }" :data="tableData" :auto-resize="true">
-          <tiny-grid-column type="index" width="60"></tiny-grid-column>
-          <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-          <tiny-grid-column field="name" title="公司名称" show-tip></tiny-grid-column>
-          <tiny-grid-column field="address" title="地址" show-overflow="tooltip"></tiny-grid-column>
-          <tiny-grid-column field="created_date" title="创建日期" show-overflow="tooltip"></tiny-grid-column>
-          <tiny-grid-column field="city" title="城市文字" show-overflow="tooltip"></tiny-grid-column>
-        </tiny-grid>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal, Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {
-      value1: false,
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司 GFD科技YX公司 GFD科技YX公司 GFD科技YX公司 GFD科技YX公司',
-          city: '福州 福州 福州 福州 福州 福州 福州 福州 福州 福州',
-          address: '中国广东省深圳龙岗区SZ单身公寓',
-          created_date: '2014-04-30 00:56:00 2014-04-30 00:56:00 2014-04-30 00:56:00 2014-04-30 00:56:00'
-        },
-        {
-          id: '2',
-          name: 'WWW科技YX公司',
-          city: '深圳',
-          address: '深圳福田区',
-          created_date: '2016-07-08 12:36:22'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          city: '中山',
-          address: '深圳福田区',
-          created_date: '2014-02-14 14:14:14'
-        }
-      ]
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/hide-event.vue
+++ b/example/src/demo/mobile/modal/hide-event.vue
@ -1,31 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">在窗口关闭时会触发事件</tiny-button>
-    <tiny-modal v-model="value1" type="confirm" show-footer @hide="hideClick">
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    hideClick() {
-      Modal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/id.vue
+++ b/example/src/demo/mobile/modal/id.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不允许重复点击</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/is-form-reset.vue
+++ b/example/src/demo/mobile/modal/is-form-reset.vue
@ -1,48 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
-
-    <tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick" :is-form-reset="false">
-      <tiny-form :model="createData" label-width="100px">
-        <tiny-form-item label="用户名" prop="username">
-          <tiny-input v-model="createData.username"></tiny-input>
-        </tiny-form-item>
-        <tiny-form-item label="密码" prop="password">
-          <tiny-input v-model="createData.password" show-password></tiny-input>
-        </tiny-form-item>
-      </tiny-form>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal, Notify, Form, FormItem, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      value1: false,
-      createData: {
-        username: '',
-        password: ''
-      }
-    }
-  },
-  methods: {
-    closeClick() {
-      Notify({
-        title: 'closeClick事件',
-        message: '点击关闭按钮时触发事件',
-        position: 'top-right'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/lock-scroll.vue
+++ b/example/src/demo/mobile/modal/lock-scroll.vue
@ -1,23 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不锁住滚动条不要遮罩层</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '不锁住滚动条不要遮罩层',
-        lockScroll: false,
-        mask: false,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/lock-view.vue
+++ b/example/src/demo/mobile/modal/lock-view.vue
@ -1,23 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不锁界面不要遮罩层</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '不锁界面不要遮罩层',
-        lockView: false,
-        mask: false,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/mask-closable.vue
+++ b/example/src/demo/mobile/modal/mask-closable.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">点击遮罩层可以关闭</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/message.vue
+++ b/example/src/demo/mobile/modal/message.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义提示框的内容</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/min-height.vue
+++ b/example/src/demo/mobile/modal/min-height.vue
@ -1,23 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '提示框拖动最小高度为300',
-        resize: true,
-        minHeight: 300,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/min-width.vue
+++ b/example/src/demo/mobile/modal/min-width.vue
@ -1,23 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '提示框拖动最小宽度为700',
-        resize: true,
-        minWidth: 700,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/resize.vue
+++ b/example/src/demo/mobile/modal/resize.vue
@ -1,24 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">可以拖动调整窗口大小</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '可以拖动调整窗口大小',
-        resize: true,
-        height: 188,
-        width: 366,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/show-event.vue
+++ b/example/src/demo/mobile/modal/show-event.vue
@ -1,31 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">在窗口显示时触发事件</tiny-button>
-    <tiny-modal v-model="value1" type="confirm" show-footer @show="showClick">
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    showClick() {
-      Modal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/showFooter.vue
+++ b/example/src/demo/mobile/modal/showFooter.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '不显示底部', showFooter: false, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/showHeader.vue
+++ b/example/src/demo/mobile/modal/showHeader.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/status.vue
+++ b/example/src/demo/mobile/modal/status.vue
@ -1,36 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="baseClick" :reset-time="0">基本提示图标</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">成功提示图标</tiny-button>
-    <tiny-button @click="warningClick" :reset-time="0">警告提示图标</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">错误提示图标</tiny-button>
-    <tiny-button @click="loadingClick" :reset-time="0">加载提示图标</tiny-button>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    baseClick() {
-      Modal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
-    },
-    successClick() {
-      Modal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
-    },
-    warningClick() {
-      Modal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
-    },
-    errorClick() {
-      Modal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
-    },
-    loadingClick() {
-      Modal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/title.vue
+++ b/example/src/demo/mobile/modal/title.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/top.vue
+++ b/example/src/demo/mobile/modal/top.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/type.vue
+++ b/example/src/demo/mobile/modal/type.vue
@ -1,34 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="alertClick" :reset-time="0">alert 弹框</tiny-button>
-    <tiny-button @click="messageClick" :reset-time="0">message 提示框</tiny-button>
-    <tiny-button @click="confirmClick" :reset-time="0">confirm 确认提示框</tiny-button>
-  </div>
-</template>
-
-<script>
-import { Button, Modal, Notify } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    alertClick() {
-      Modal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
-    },
-    messageClick() {
-      Modal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
-    },
-    confirmClick() {
-      Modal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {
-        Notify({
-          type: 'info',
-          title: '触发回调事件',
-          message: `点击${res}按钮`
-        })
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/value.vue
+++ b/example/src/demo/mobile/modal/value.vue
@ -1,26 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
-    <tiny-modal v-model="value1" :lock-scroll="false" show-footer>
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/zIndex.vue
+++ b/example/src/demo/mobile/modal/zIndex.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">zIndex的值为500</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/modal/zoom-event.vue
+++ b/example/src/demo/mobile/modal/zoom-event.vue
@ -1,31 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-button @click="value1 = !value1" :reset-time="0">窗口缩放时触发事件</tiny-button>
-    <tiny-modal v-model="value1" type="confirm" resize show-footer @zoom="zoomClick">
-      <template #default>
-        <p>test</p>
-      </template>
-    </tiny-modal>
-  </div>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button,
-    TinyModal: Modal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    zoomClick() {
-      Modal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/multi-select/basic-usage.vue
+++ b/example/src/demo/mobile/multi-select/basic-usage.vue
@ -1,288 +0,0 @@
-<template>
-  <div>
-    <div class="page__hd">
-      <h1 class="page__title">MultiSelect</h1>
-      <p class="page__desc">下拉选择器</p>
-    </div>
-    <div class="page__content">
-      <tiny-multi-select ref="multiSelect" :dataSource="data" :defaultSelectedArray="defaultSelectedArray" @confirm="confirm" @reset="reset">
-      </tiny-multi-select>
-    </div>
-  </div>
-</template>
-
-<script>
-import { MultiSelect } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyMultiSelect: MultiSelect
-  },
-  data() {
-    return {
-      data: [
-        {
-          title: '时间',
-          hasFooter: true,
-          children: [
-            {
-              label: '2020年',
-              value: '0',
-              children: [
-                {
-                  label: '2020全年',
-                  value: '0-0',
-                  children: [
-                    {
-                      label: '年',
-                      value: '0-0-0',
-                    }
-                  ]
-                },
-                {
-                  label: '2020年Q1',
-                  value: '0-1',
-                  children: [
-                    {
-                      label: '2020年Q1一月',
-                      value: '0-1-0',
-                    },
-                    {
-                      label: '2020年Q1二月',
-                      value: '0-1-1',
-                    },
-                    {
-                      label: '2020年Q1三月',
-                      value: '0-1-2',
-                    }
-                  ]
-                },
-                {
-                  label: '2020年Q2',
-                  value: '0-2',
-                  children: [
-                    {
-                      label: '2020年Q2四月',
-                      value: '0-2-0',
-                    },
-                    {
-                      label: '2020年Q2五月',
-                      value: '0-2-1',
-                    },
-                    {
-                      label: '2020年Q2六月',
-                      value: '0-2-2',
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              value: '1',
-              children: [
-                {
-                  label: '2021全年',
-                  value: '1-0',
-                  children: [
-                    {
-                      label: '年',
-                      value: '1-0-0',
-                    }
-                  ]
-                },
-                {
-                  label: '2021年Q1',
-                  value: '1-1',
-                  children: [
-                    {
-                      label: '2021年Q1一月',
-                      value: '1-1-0',
-                    },
-                    {
-                      label: '2021年Q1二月',
-                      value: '1-1-1',
-                    },
-                    {
-                      label: '2021年Q1三月',
-                      value: '1-1-2',
-                    }
-                  ]
-                },
-                {
-                  label: '2021年Q2',
-                  value: '1-2',
-                  children: [
-                    {
-                      label: '2021年Q2四月',
-                      value: '1-2-0',
-                    },
-                    {
-                      label: '2021年Q2五月',
-                      value: '1-2-1',
-                    },
-                    {
-                      label: '2021年Q2六月',
-                      value: '1-2-2',
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              label: '2022年',
-              value: '2',
-              children: [
-                {
-                  label: '2022全年',
-                  value: '2-0',
-                  children: [
-                    {
-                      label: '年',
-                      value: '2-0-0',
-                    }
-                  ]
-                },
-                {
-                  label: '2022年Q1',
-                  value: '2-1',
-                  children: [
-                    {
-                      label: '2022年Q1一月',
-                      value: '2-1-0',
-                    },
-                    {
-                      label: '2022年Q1二月',
-                      value: '2-1-1',
-                    },
-                    {
-                      label: '2022年Q1三月',
-                      value: '2-1-2',
-                    }
-                  ]
-                },
-                {
-                  label: '2022年Q2',
-                  value: '2-2',
-                  children: [
-                    {
-                      label: '2022年Q2四月',
-                      value: '2-2-0',
-                    },
-                    {
-                      label: '2022年Q2五月',
-                      value: '2-2-1',
-                    },
-                    {
-                      label: '2022年Q2六月',
-                      value: '2-2-2',
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          title: '区域',
-          hasFooter: true,
-          children: [
-            {
-              label: '海外',
-              value: '0',
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '0-0',
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '0-1',
-                },
-                {
-                  label: '土耳其',
-                  value: '0-2',
-                }
-              ]
-            },
-            {
-              label: '中国',
-              value: '1',
-              children: [
-                {
-                  label: '北京',
-                  value: '1-0',
-                },
-                {
-                  label: '上海',
-                  value: '1-1',
-                },
-                {
-                  label: '南京',
-                  value: '1-2',
-                }
-              ]
-            }
-          ]
-        },
-        {
-          title: '云类型',
-          hasFooter: false,
-          children: [
-            {
-              label: '公有云',
-              value: '0',
-            },
-            {
-              label: '私有云',
-              value: '1',
-            },
-            {
-              label: '伙伴云',
-              value: '2',
-            },
-            {
-              label: '公有云1',
-              value: '3',
-            },
-            {
-              label: '公有云2',
-              value: '4',
-            }
-          ]
-        }
-      ],
-      defaultSelectedArray: []
-    }
-  },
-  methods: {
-    confirm(...arg) {
-      console.log(...arg)
-    },
-    reset(...arg) {
-      console.log(...arg)
-    }
-  }
-}
-</script>
-<style scoped>
-.page__hd {
-  padding: 40px;
-}
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-.page__content {
-  width: 375px;
-  height: 48px;
-  background-color: #fff;
-}
-</style>
--- a/example/src/demo/mobile/pull-refresh/animation-duration.vue
+++ b/example/src/demo/mobile/pull-refresh/animation-duration.vue
@ -1,31 +0,0 @@
-<template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" :animation-duration="1000">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/pull-refresh/base.vue
+++ b/example/src/demo/mobile/pull-refresh/base.vue
@ -1,53 +0,0 @@
-<template>
-  <div>
-    <div class="page__hd">
-      <h1 class="page__title">Refresh</h1>
-      <p class="page__desc">下拉刷新</p>
-    </div>
-    <tiny-pull-refresh :pullDown="pullDownRefresh" success-text="刷新成功" animation-duration="500" success-duration="500">
-      <h3>hello pull-refresh</h3>
-    </tiny-pull-refresh>
-  </div>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
-<style scoped>
-.page__hd {
-  padding: 40px;
-}
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-</style>
--- a/example/src/demo/mobile/pull-refresh/disabled.vue
+++ b/example/src/demo/mobile/pull-refresh/disabled.vue
@ -1,34 +0,0 @@
-<template>
-  <tiny-pull-refresh :pullUp="pullUpLoad" :pullDown="pullDownRefresh">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      },
-      pullUpLoad: {
-        pullUpDisabled: true
-      }
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/pull-refresh/head-height.vue
+++ b/example/src/demo/mobile/pull-refresh/head-height.vue
@ -1,43 +0,0 @@
-<template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" :pullUp="pullUpLoad">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        headHeight: 100,
-        handler: () => this.handlerPullDownRefresh()
-      },
-      pullUpLoad: {
-        footHeight: 100,
-        handler: () => this.handlerPullUpLoad()
-      },
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    },
-    handlerPullUpLoad() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/pull-refresh/loosing-text.vue
+++ b/example/src/demo/mobile/pull-refresh/loosing-text.vue
@ -1,31 +0,0 @@
-<template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" loosing-text="可以了，可以了，别扒拉了！">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/pull-refresh/pulling-text.vue
+++ b/example/src/demo/mobile/pull-refresh/pulling-text.vue
@ -1,43 +0,0 @@
-<template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" :pullUp="pullUpLoad">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        pullingDownText: '你敢在下拉一点么？',
-        handler: () => this.handlerPullDownRefresh()
-      },
-      pullUpLoad: {
-        pullingUpText: '你敢在上拉一点么？',
-        handler: () => this.handlerPullUpLoad()
-      },
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    },
-    handlerPullUpLoad() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/pull-refresh/success-duration.vue
+++ b/example/src/demo/mobile/pull-refresh/success-duration.vue
@ -1,31 +0,0 @@
-<template>
-  <tiny-pull-refresh ref="refresh" :pullDown="pullDownRefresh" success-duration="3000" success-text="加载完成">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
-</template>
-
-<script>
-import { PullRefresh } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPullRefresh: PullRefresh
-  },
-  data() {
-    return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
-    }
-  },
-  methods: {
-    handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/table/base.vue
+++ b/example/src/demo/mobile/table/base.vue
@ -1,168 +0,0 @@
-<template>
-  <div>
-    <div class="title">普通</div>
-    <tiny-table :columns="columns" :data="tableData"></tiny-table>
-    <div class="title">固定列</div>
-    <tiny-table :columns="columns2" :data="tableData" width="300px"></tiny-table>
-    <div class="title">其它样式</div>
-    <tiny-table :columns="columns3" :data="tableData" width="300px"></tiny-table>
-    <div class="title">无数据</div>
-    <tiny-table :columns="[]" :data="[]" width="200px"></tiny-table>
-  </div>
-</template>
-
-<script>
-import { Table } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTable: Table
-  },
-  data() {
-    return {
-      columns: [
-        {
-          width: 100,
-          title: '业务',
-          field: 'business'
-        },
-        {
-          width: 90,
-          title: '空间（万/年）',
-          field: 'space'
-        },
-        {
-          width: 60,
-          title: 'IDC',
-          field: 'idc'
-        },
-        {
-          width: 60,
-          title: '阿里云',
-          field: 'aliy'
-        },
-        {
-          width: 60,
-          title: '腾讯云',
-          field: 'txy'
-        }
-      ],
-      columns2: [
-        {
-          width: 100,
-          title: '业务',
-          field: 'business',
-          fixed: true
-        },
-        {
-          width: 110,
-          title: '空间（万/年）',
-          field: 'space',
-          fixed: true
-        },
-        {
-          width: 60,
-          title: 'IDC',
-          field: 'idc'
-        },
-        {
-          width: 60,
-          title: '阿里云',
-          field: 'aliy'
-        },
-        {
-          width: 60,
-          title: '腾讯云',
-          field: 'txy'
-        }
-      ],
-      columns3: [
-        {
-          width: 30,
-          title: '业务',
-          field: 'business',
-          type: 'index'
-        },
-        {
-          width: 50,
-          title: '空间（万/年）',
-          field: 'space',
-          type: 'selection'
-        },
-        {
-          width: 50,
-          title: 'IDC',
-          field: 'idc',
-          type: 'radio'
-        },
-        {
-          width: 60,
-          title: '阿里云',
-          field: 'aliy'
-        },
-        {
-          width: 60,
-          title: '腾讯云',
-          field: 'txy'
-        }
-      ],
-      tableData: [
-        {
-          id: '1',
-          business: '直播/点播源站',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: '大数据',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: 'web业务',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: '应用加速',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: '边缘计算',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: 'Live/点播源站',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.title {
-  margin: 20px 0 10px 0;
-}
-</style>
--- a/example/src/demo/mobile/tabs/with-add.vue
+++ b/example/src/demo/mobile/tabs/with-add.vue
@ -1,63 +0,0 @@
-<template>
-  <div>
-    <div>
-      <h2 style="font-size: 16px; margin: 12px 0 24px 8px">基本用法</h2>
-      <div>
-        <tiny-tabs v-model="activeName" :with-add="true" @add="handleadd" :swipeable="true">
-          <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
-            {{ item.content }}
-          </tiny-tab-item>
-        </tiny-tabs>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Tabs, TabItem } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
-  },
-  data() {
-    return {
-      Tabs: [
-        {
-          title: '标签 1',
-          name: '1',
-          content: '内容 1'
-        },
-        {
-          title: '标签 2',
-          name: '2',
-          content: '内容 2'
-        },
-        {
-          title: '标签 3',
-          name: '3',
-          content: '内容 3'
-        },
-        {
-          title: '标签 4',
-          name: '4',
-          content: '内容 4'
-        }
-      ],
-      activeName: '1',
-      tabIndex: 5
-    }
-  },
-  methods: {
-    handleadd() {
-      this.Tabs.push({
-        title: `标签 ${this.tabIndex}`,
-        name: String(this.tabIndex),
-        content: '动态增加tabitem'
-      })
-      this.tabIndex++
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/time-line/mobileTimeLine.vue
+++ b/example/src/demo/mobile/time-line/mobileTimeLine.vue
@ -1,135 +0,0 @@
-<template>
-  <div>
-    <div class="title">横向步骤条 正向</div>
-    <tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
-    <tiny-time-line :data="data4" type="timeline" :active="timeActive1" @click="timeClick1">
-      <template v-slot:bottom>
-        <div class="text-content">
-          <div class="main-text">标题文字</div>
-          <div class="sub-text">辅助信息文字辅助信息文字辅助信息文字辅助信息文字</div>
-        </div>
-      </template>
-    </tiny-time-line>
-    <div class="half-div">
-      <div class="title">竖式步骤条 正向</div>
-      <tiny-time-line :data="data4" type="timeline" vertical :active="timeActive2" @click="timeClick2">
-        <template v-slot:content>
-          <div class="content-view">
-            <div>内容区</div>
-            <div>内容区</div>
-            <div>内容区</div>
-          </div>
-        </template>
-      </tiny-time-line>
-    </div>
-    <div class="half-div">
-      <div class="title">竖式步骤条 反向</div>
-      <tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3">
-        <template v-slot:header="{ item }">
-          <div class="header-content">
-            <div class="name">{{ item.name }}</div>
-            <div class="label">标签</div>
-          </div>
-        </template>
-      </tiny-time-line>
-    </div>
-  </div>
-</template>
-
-<script>
-import { TimeLine, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      timeActive1: 1,
-      timeActive2: 0,
-      timeActive3: 0,
-      data3: [
-        { name: '已下单', state: 'normal', fold: true },
-        { name: '运输中', state: 'success', fold: false, showFoldBtn: true },
-        { name: '已签收', state: 'error' },
-        { name: '已确认收货', state: 'handing' }
-      ],
-      data4: [
-        { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
-        { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
-        { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
-        { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
-      ]
-    }
-  },
-  methods: {
-    timeClick1(index, node) {
-      this.timeActive1 = index
-
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-    },
-    timeClick2(index) {
-      this.timeActive2 = index
-    },
-    timeClick3(index) {
-      this.timeActive3 = index
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.half-div {
-  display: inline-block;
-  width: 49%;
-  margin-top: 60px;
-  margin-bottom: 50px;
-  padding-left: 50px;
-}
-
-.title {
-  font-weight: bold;
-  margin-bottom: 30px;
-}
-
-.text-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.main-text {
-  font-size: 12px;
-}
-
-.sub-text {
-  font-size: 10px;
-  color: #999;
-  width: 80%;
-  line-height: 16px;
-}
-
-.header-content {
-  display: flex;
-  font-size: 12px;
-  align-items: center;
-
-  .name {
-    margin-left: 12px;
-  }
-  .label {
-    background: rgba(102, 135, 255, 0.1);
-    height: 18px;
-    line-height: 18px;
-    width: 28px;
-    margin-left: 8px;
-    text-align: center;
-    padding: 3px;
-    border-radius: 4px;
-  }
-}
-
-.content-view {
-  background: #f6f6f6;
-}
-</style>
--- a/example/src/demo/mobile/user-head/basic-usage.vue
+++ b/example/src/demo/mobile/user-head/basic-usage.vue
@ -1,56 +0,0 @@
-<template>
-  <div class="demo-content">
-    <div class="title">尺寸</div>
-    <div class="item-content">
-      <tiny-user-head type="label" v-model="name" :size="80" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" size="large" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" size="medium" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="namePrefix" size="small" round></tiny-user-head>
-    </div>
-
-    <div class="title">类型</div>
-    <div class="item-content">
-      <tiny-user-head type="label" v-model="name" :size="80"></tiny-user-head>
-      <tiny-user-head type="icon" :size="80"></tiny-user-head>
-      <tiny-user-head type="image" modelValue="static/images/fruit.jpg" :size="80"></tiny-user-head>
-    </div>
-
-    <div class="title">自定义</div>
-    <div class="item-content">
-      <tiny-user-head type="icon" :size="80" backgroundColor="red"></tiny-user-head>
-      <tiny-user-head type="icon" :size="80" backgroundColor="red" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" :size="80" messageTotal="20"></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" :size="40" messageTotal="20"></tiny-user-head>
-    </div>
-  </div>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  },
-  data() {
-    return {
-      name: '小明',
-      namePrefix: '小'
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.title {
-  margin: 20px 0 10px 0;
-}
-.item-content {
-  display: flex;
-  align-items: center;
-
-  .tiny-mobile-user-head {
-    margin-right: 20px;
-  }
-}
-</style>
--- a/example/src/demo/mobile/user-head/color.vue
+++ b/example/src/demo/mobile/user-head/color.vue
@ -1,16 +0,0 @@
-<template>
-  <div>
-    <tiny-user-head class="head-item" type="label" value="Ai" background-color="#40a9ff" color="#fa8c16"></tiny-user-head>
-    <tiny-user-head class="head-item" type="icon" :background-color="'rgb(250, 140, 22)'" color="rgb(64, 169, 255)"></tiny-user-head>
-  </div>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/custom-background-color.vue
+++ b/example/src/demo/mobile/user-head/custom-background-color.vue
@ -1,13 +0,0 @@
-<template>
-  <tiny-user-head type="icon" background-color="var(--ti-common-color-line-active)"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/custom-user-head-content.vue
+++ b/example/src/demo/mobile/user-head/custom-user-head-content.vue
@ -1,39 +0,0 @@
-<template>
-  <tiny-user-head>
-    <div class="content">
-      <span>
-        <icon-mail></icon-mail>
-      </span>
-      Mail
-    </div>
-  </tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-import { iconMail } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyUserHead: UserHead,
-    IconMail: iconMail()
-  }
-}
-</script>
-
-<style scoped>
-.content {
-  fill: var(--ti-common-color-line-active);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-style: oblique;
-  font-weight: 600;
-  font-size: 2em;
-}
-
-.content svg {
-  width: 1.5em;
-  height: 1.5em;
-}
-</style>
--- a/example/src/demo/mobile/user-head/icon-user-head.vue
+++ b/example/src/demo/mobile/user-head/icon-user-head.vue
@ -1,19 +0,0 @@
-<template>
-  <tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-import { iconSmile } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  },
-  data() {
-    return {
-      IconSmile: iconSmile()
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/image-user-head.vue
+++ b/example/src/demo/mobile/user-head/image-user-head.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-user-head type="image" :modelValue="imgUrl"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  },
-  data() {
-    return {
-      imgUrl: 'static/images/fruit.jpg'
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/label-user-head.vue
+++ b/example/src/demo/mobile/user-head/label-user-head.vue
@ -1,18 +0,0 @@
-<template>
-  <tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  },
-  data() {
-    return {
-      text: '文字'
-    }
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/message-count-limit.vue
+++ b/example/src/demo/mobile/user-head/message-count-limit.vue
@ -1,13 +0,0 @@
-<template>
-  <tiny-user-head :message-total="100" :message-upper-limit="99" type="icon"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/message-count-total.vue
+++ b/example/src/demo/mobile/user-head/message-count-total.vue
@ -1,13 +0,0 @@
-<template>
-  <tiny-user-head :message-total="100" type="icon"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/message-count-type.vue
+++ b/example/src/demo/mobile/user-head/message-count-type.vue
@ -1,13 +0,0 @@
-<template>
-  <tiny-user-head :message-total="100" message-type="basic" type="icon"></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/min-user-head.vue
+++ b/example/src/demo/mobile/user-head/min-user-head.vue
@ -1,13 +0,0 @@
-<template>
-  <tiny-user-head type="icon" min></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/mobile/user-head/render-user-head-in-grid.vue
+++ b/example/src/demo/mobile/user-head/render-user-head-in-grid.vue
@ -1,130 +0,0 @@
-<template>
-  <tiny-grid :data="tableData" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="公司员工数" :renderer="renderUserHead"></tiny-grid-column>
-    <tiny-grid-column field="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>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn, UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    const mockData = [
-      {
-        id: '1',
-        name: 'GFD科技公司',
-        city: '福州',
-        employees: 800,
-        created_date: '2014-04-30 00:56:00',
-        boole: false
-      },
-      {
-        id: '2',
-        name: 'WWW科技公司',
-        city: '深圳',
-        employees: 300,
-        created_date: '2016-07-08 12:36:22',
-        boole: true
-      },
-      {
-        id: '3',
-        name: 'RFV有限责任公司',
-        city: '中山',
-        employees: 1300,
-        created_date: '2014-02-14 14:14:14',
-        boole: false
-      },
-      {
-        id: '4',
-        name: 'TGB科技公司',
-        city: '龙岩',
-        employees: 360,
-        created_date: '2013-01-13 13:13:13',
-        boole: true
-      },
-      {
-        id: '5',
-        name: 'YHN科技公司',
-        city: '韶关',
-        employees: 810,
-        created_date: '2012-12-12 12:12:12',
-        boole: true
-      },
-      {
-        id: '6',
-        name: 'WSX科技公司',
-        city: '黄冈',
-        employees: 800,
-        created_date: '2011-11-11 11:11:11',
-        boole: true
-      },
-      {
-        id: '7',
-        name: 'KBG物业公司',
-        city: '赤壁',
-        employees: 400,
-        created_date: '2016-04-30 23:56:00',
-        boole: false
-      },
-      {
-        id: '8',
-        name: 'SZ市福德宝网络技术公司',
-        boole: true,
-        city: '厦门',
-        created_date: '2016-06-03 13:53:25',
-        employees: 540
-      }
-    ]
-    return {
-      tableData: mockData
-    }
-  },
-  methods: {
-    checkboxEdit(h, { row, column }) {
-      return (
-        <input
-          type="checkbox"
-          checked={row.boole}
-          onChange={(event) => {
-            row[column.property] = event.target.checked
-          }}
-        />
-      )
-    },
-    renderUserHead(h, { row }) {
-      const UserHeadImg = UserHead
-
-      return (
-        <span>
-          <UserHeadImg class="demo-user-head" type="icon" round min messageTotal={row.employees} />
-          {row.name}
-        </span>
-      )
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hae-user-head .message {
-  width: 35px;
-}
-
-.tiny-grid-body__row {
-  height: 50px;
-}
-
-.demo-user-head {
-  float: left;
-  margin-right: 10px;
-}
-</style>
--- a/example/src/demo/mobile/user-head/round-user-head.vue
+++ b/example/src/demo/mobile/user-head/round-user-head.vue
@ -1,13 +0,0 @@
-<template>
-  <tiny-user-head type="icon" round></tiny-user-head>
-</template>
-
-<script>
-import { UserHead } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyUserHead: UserHead
-  }
-}
-</script>
--- a/example/src/demo/pc/anchor/basic-usage.vue
+++ b/example/src/demo/pc/anchor/basic-usage.vue
@ -1,45 +0,0 @@
-<template>
-  <tiny-anchor :links="links"></tiny-anchor>
-</template>
-
-<script>
-import { Anchor } from '@opentiny/vue'
-export default {
-  components: {
-    TinyAnchor: Anchor
-  },
-  data() {
-    return {
-      links: [
-        {
-          key: 'basic-usage',
-          link: '#basic-usage',
-          title: 'Basic Usage'
-        },
-        {
-          key: 'is-affix',
-          link: '#is-affix',
-          title: 'Is Affix'
-        },
-        {
-          key: 'set-container',
-          link: '#set-container',
-          title: 'Set Container'
-        },
-        {
-          key: 'event',
-          link: '#event',
-          title: 'Event',
-          children: [
-            {
-              key: 'on-change',
-              link: '#on-change',
-              title: 'On Change'
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>
--- a/example/src/demo/pc/anchor/is-affix.vue
+++ b/example/src/demo/pc/anchor/is-affix.vue
@ -1,53 +0,0 @@
-<template>
-  <div class="wrap">
-    <tiny-anchor :links="links" is-affix></tiny-anchor>
-  </div>
-</template>
-
-<script>
-import { Anchor } from '@opentiny/vue'
-export default {
-  components: {
-    TinyAnchor: Anchor
-  },
-  data() {
-    return {
-      links: [
-        {
-          key: 'basic-usage',
-          link: '#basic-usage',
-          title: 'Basic Usage'
-        },
-        {
-          key: 'is-affix',
-          link: '#is-affix',
-          title: 'Is Affix'
-        },
-        {
-          key: 'set-container',
-          link: '#set-container',
-          title: 'Set Container'
-        },
-        {
-          key: 'event',
-          link: '#event',
-          title: 'Event',
-          children: [
-            {
-              key: 'on-change',
-              link: '#on-change',
-              title: 'On Change'
-            }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.wrap {
-  height: 125px;
-}
-</style>
--- a/example/src/demo/pc/anchor/on-change.vue
+++ b/example/src/demo/pc/anchor/on-change.vue
@ -1,50 +0,0 @@
-<template>
-  <tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
-</template>
-
-<script>
-import { Anchor } from '@opentiny/vue'
-export default {
-  components: {
-    TinyAnchor: Anchor
-  },
-  data() {
-    return {
-      links: [
-        {
-          key: 'basic-usage',
-          link: '#basic-usage',
-          title: 'Basic Usage'
-        },
-        {
-          key: 'is-affix',
-          link: '#is-affix',
-          title: 'Is Affix'
-        },
-        {
-          key: 'set-container',
-          link: '#set-container',
-          title: 'Set Container'
-        },
-        {
-          key: 'event',
-          link: '#event',
-          title: 'Event',
-          children: [
-            {
-              key: 'on-change',
-              link: '#on-change',
-              title: 'On Change'
-            }
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    handleChange(link) {
-      console.log('change', link)
-    }
-  }
-}
-</script>
--- a/example/src/demo/pc/anchor/set-container.vue
+++ b/example/src/demo/pc/anchor/set-container.vue
@ -1,98 +0,0 @@
-<template>
-  <tiny-row>
-    <tiny-col :span="10">
-      <div id="container" class="scroll-container">
-        <div id="section-1" class="section-1">Section 1</div>
-        <div id="section-2" class="section-2">Section 2</div>
-        <div id="section-3" class="section-3">
-          Section 3
-          <div id="section-3-1" class="section-3-1">Section 3-1</div>
-          <div id="section-3-2" class="section-3-2">Section 3-2</div>
-        </div>
-      </div>
-    </tiny-col>
-    <tiny-col :span="2">
-      <tiny-anchor :links="links" container-id="#container" @link-click="handleClick" mark-class="is-active-anchor"></tiny-anchor>
-    </tiny-col>
-  </tiny-row>
-</template>
-
-<script>
-import { Anchor, Row, Col } from '@opentiny/vue'
-export default {
-  components: {
-    TinyAnchor: Anchor,
-    TinyRow: Row,
-    TinyCol: Col
-  },
-  data() {
-    return {
-      links: [
-        {
-          key: 'section-1',
-          link: '#section-1',
-          title: 'Section 1'
-        },
-        {
-          key: 'section-2',
-          link: '#section-2',
-          title: 'Section 2'
-        },
-        {
-          key: 'section-3',
-          link: '#section-3',
-          title: 'Section 3',
-          children: [
-            {
-              key: 'section-3-1',
-              link: '#section-3-1',
-              title: 'Section 3-1'
-            },
-            {
-              key: 'section-3-2',
-              link: '#section-3-2',
-              title: 'Section 3-2'
-            }
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    handleClick(e, link) {
-      e.preventDefault()
-      console.log('link', link)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.is-active-anchor {
-  border: 1px solid red;
-}
-.scroll-container {
-  height: 20vh;
-  border: 2px solid #333;
-  overflow: auto;
-}
-.section-1 {
-  height: 100vh;
-  background: rgba(125, 0, 0, 0.1);
-}
-.section-2 {
-  height: 100vh;
-  background: rgba(0, 125, 0, 0.1);
-}
-.section-3 {
-  background: rgba(0, 0, 125, 0.1);
-}
-.section-3-1 {
-  height: 100vh;
-  background: rgba(0, 0, 125, 0.2);
-}
-.section-3-2 {
-  height: 100vh;
-  background: rgba(0, 0, 125, 0.3);
-}
-</style>
--- a/example/src/docs/mobile/form/auto-wordwrap.md
+++ b/example/src/docs/mobile/form/auto-wordwrap.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-business-slider"/>
-</p>
-
-## Form 表单
-
-<mobile-uxlink widget-name="Form"></mobile-uxlink>
-</div>
-
-### 校验提示信息的位置
-
-默认自动换行，ellipsis：不换行，显示省略号
-
-<mobile-view link="form/auto-wordwrap"></mobile-view>
-
-<br>
--- a/example/src/docs/mobile/index-bar/base.md
+++ b/example/src/docs/mobile/index-bar/base.md
@ -1,16 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-ui-avatar wapi-form-user"/>
-</p>
-
-## IndexBar 索引
-
-<mobile-uxlink widget-name="IndexBar"></mobile-uxlink>
-
-</div>
-
-### 基本用法
-
-<mobile-view link="index-bar/base"></mobile-view>
-
-<br>
--- a/example/src/docs/mobile/index-bar/event.md
+++ b/example/src/docs/mobile/index-bar/event.md
@ -1,16 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-ui-avatar wapi-form-user"/>
-</p>
-
-## IndexBar 索引
-
-<mobile-uxlink widget-name="IndexBar"></mobile-uxlink>
-
-</div>
-
-### 事件
-
-<mobile-view link="index-bar/event"></mobile-view>
-
-<br>
--- a/example/src/docs/mobile/modal/basic-usage.md
+++ b/example/src/docs/mobile/modal/basic-usage.md
@ -1,19 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Notice"></nova-uxlink>
-</div>
-
-### 基本用法
-
-可通过 `Modal.alert` 方法设置弹出框，通过 `Modal.confirm` 方法设置确认弹出框。
-
-<nova-demo-view link="modal/base"></nova-demo-view>
-
-<br>
-
-<nova-attributes link="modal"></nova-attributes>
--- a/example/src/docs/mobile/modal/is-form-reset.md
+++ b/example/src/docs/mobile/modal/is-form-reset.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 模态框弹出表单
-
-模态框弹出表单，关闭模态框的时候，默认重置表单，设置 `is-form-reset` 为false,则关闭模态框的时候不重置表单
-
-<nova-demo-view link="modal/is-form-reset"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-duration.md
+++ b/example/src/docs/mobile/modal/modal-duration.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 自动关闭延时
-
-可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效。
-
-<nova-demo-view link="modal/duration"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-esc-closable.md
+++ b/example/src/docs/mobile/modal/modal-esc-closable.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 按 Esc 键关闭弹出框
-
-可通过 `esc-closable` 属性设置是否允许按 Esc 键关闭窗口，默认为 `false`。
-
-<nova-demo-view link="modal/esc-closable"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-event.md
+++ b/example/src/docs/mobile/modal/modal-event.md
@ -1,57 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 取消按钮事件
-
-点击取消按钮时触发 `cancel` 事件。
-
-<nova-demo-view link="modal/cancel-event"></nova-demo-view>
-
-<br>
-
-### 关闭按钮事件
-
-点击关闭按钮时会触发 `close` 事件。
-
-<nova-demo-view link="modal/close-event"></nova-demo-view>
-
-<br>
-
-### 确定按钮事件
-
-点击确定按钮时会触发 `confirm` 事件。
-
-<nova-demo-view link="modal/confirm-event"></nova-demo-view>
-
-<br>
-
-### 窗口关闭事件
-
-窗口关闭时会触发 `hide` 事件。
-
-<nova-demo-view link="modal/hide-event"></nova-demo-view>
-
-<br>
-
-### 窗口显示事件
-
-在窗口显示时会触发 `show` 事件。
-
-<nova-demo-view link="modal/show-event"></nova-demo-view>
-
-<br>
-
-### 窗口缩放事件
-
-窗口缩放时会触发 `zoom` 事件。
-
-<nova-demo-view link="modal/zoom-event"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-fullscreen.md
+++ b/example/src/docs/mobile/modal/modal-fullscreen.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 最大化显示
-
-可通过 `fullscreen` 属性设置是否最大化显示。
-
-<nova-demo-view link="modal/fullscreen"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-id.md
+++ b/example/src/docs/mobile/modal/modal-id.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 防止重复提示
-
-如果不想窗口重复点击，可以设置唯一的 `id` 防止重复提示，只对 type=message 有效。
-
-<nova-demo-view link="modal/id"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-is-form-reset.md
+++ b/example/src/docs/mobile/modal/modal-is-form-reset.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 自动关闭延时
-
-Modal嵌套表单使用时，关闭弹窗时，重置表单数据.设置  `is-form-reset` 为 `false`,则关闭弹窗是不重置表单
-
-<nova-demo-view link="modal/is-form-reset"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-lock-scroll.md
+++ b/example/src/docs/mobile/modal/modal-lock-scroll.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 锁住滚动条
-
-可通过 `lock-scroll` 属性设置是否锁住滚动条，不允许页面滚动。
-
-<nova-demo-view link="modal/lock-scroll"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-lock-view.md
+++ b/example/src/docs/mobile/modal/modal-lock-view.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 锁住页面
-
-可通过 `lock-view` 属性设置是否锁住页面，不允许窗口之外的任何操作。
-
-<nova-demo-view link="modal/lock-view"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-mask-closable.md
+++ b/example/src/docs/mobile/modal/modal-mask-closable.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 点击遮罩层关闭窗口
-
-可通过 `mask-closable` 属性设置是否允许点击遮罩层关闭窗口。
-
-<nova-demo-view link="modal/mask-closable"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-mask.md
+++ b/example/src/docs/mobile/modal/modal-mask.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 显示遮罩层
-
-可通过 `mask` 属性设置是否显示遮罩层，默认为 `true`。
-
-<nova-demo-view link="modal/lock-view"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-message.md
+++ b/example/src/docs/mobile/modal/modal-message.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 自定义内容
-
-可通过 `message` 属性设置窗口的内容。
-
-<nova-demo-view link="modal/message"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-resize.md
+++ b/example/src/docs/mobile/modal/modal-resize.md
@ -1,34 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-
-</div>
-
-### 调整窗口大小
-
-可通过和`width`和`height`设置窗口的宽高，而通过 `resize` 设置是否允许拖动调整窗口大小。
-
-<nova-demo-view link="modal/resize"></nova-demo-view>
-
-<br>
-
-### 调整窗口大小后窗口显示的最小宽度
-
-配置 `resize` 可拖拽属性为 `true`后，可通过 `min-width` 属性设置拖拽后窗口的最小宽度。
-
-<nova-demo-view link="modal/min-width"></nova-demo-view>
-
-<br>
-
-### 调整窗口大小后窗口显示的最小高度
-
-配置 `resize` 可拖拽属性为 `true`后，可通过 `min-height` 属性设置拖拽后窗口的最小高度。
-
-<nova-demo-view link="modal/min-height"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-showFooter.md
+++ b/example/src/docs/mobile/modal/modal-showFooter.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 不显示底部
-
-可通过 `showFooter` 属性设置是否显示底部，默认为 `true`。
-
-<nova-demo-view link="modal/showFooter"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-showHeader.md
+++ b/example/src/docs/mobile/modal/modal-showHeader.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 不显示头部
-
-可通过 `showHeader` 属性设置是否显示头部，默认为 `true`。
-
-<nova-demo-view link="modal/showHeader"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-slots.md
+++ b/example/src/docs/mobile/modal/modal-slots.md
@ -1,34 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-
-</div>
-
-### 默认插槽
-
-可通过 `templete` 设置默认插槽。
-
-<nova-demo-view link="modal/value"></nova-demo-view>
-
-<br>
-
-### 底部插槽
-
-可通过 `slot="footer"` 设置底部插槽。
-
-<nova-demo-view link="modal/footer-slot"></nova-demo-view>
-
-<br>
-
-### 嵌套 grid
-
-可通过插槽嵌套 grid
-
-<nova-demo-view link="modal/grid"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-status.md
+++ b/example/src/docs/mobile/modal/modal-status.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 消息状态
-
-可通过 `status` 属性设置消息状态，可选值有 `info | success | warning | error | loading`。
-
-<nova-demo-view link="modal/status"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-title.md
+++ b/example/src/docs/mobile/modal/modal-title.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 标题
-
-可通过 `title` 属性设置窗口的标题。
-
-<nova-demo-view link="modal/title"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-top.md
+++ b/example/src/docs/mobile/modal/modal-top.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 距离顶部的位置
-
-可通过 `top` 属性设置消息距离顶部的位置，只对 type=message 有效。
-
-<nova-demo-view link="modal/top"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-type.md
+++ b/example/src/docs/mobile/modal/modal-type.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 窗口类型
-
-可通过 `type` 属性设置窗口类型，可选值 `alert | confirm | message`。
-
-<nova-demo-view link="modal/type"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-value.md
+++ b/example/src/docs/mobile/modal/modal-value.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 绑定值
-
-可通过 `value/v-model` 属性绑定值。
-
-<nova-demo-view link="modal/value"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/modal/modal-zIndex.md
+++ b/example/src/docs/mobile/modal/modal-zIndex.md
@ -1,17 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-tips-messagebox"/>
-</p>
-
-## Modal 模态框
-
-<nova-uxlink widget-name="Modal"></nova-uxlink>
-</div>
-
-### 自定义堆叠顺序
-
-可通过 `zIndex` 属性设置自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）。
-
-<nova-demo-view link="modal/zIndex"></nova-demo-view>
-
-<br>
--- a/example/src/docs/mobile/multi-select/basic-usage.md
+++ b/example/src/docs/mobile/multi-select/basic-usage.md
@ -1,20 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-multi-select"/>
-</p>
-
-## MultiSelect 下拉选择器
-
-<mobile-uxlink widget-name="MultiSelect"></mobile-uxlink>
-
-下拉多选
-</div>
-
-### 基本用法
-
-
-<mobile-view link="multi-select/basic-usage"></mobile-view>
-
-<br>
-
-<mobile-attributes link="multi-select"></mobile-attributes>
--- a/example/src/docs/mobile/pull-refresh/animation-duration.md
+++ b/example/src/docs/mobile/pull-refresh/animation-duration.md
@ -1,15 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-ui-pull-refresh"/>
-</p>
-
-## pull-refresh 刷新
-
-<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
-</div>
-
-### 可刷新的弹回动画时间
-
-<mobile-view link="pull-refresh/animation-duration"></mobile-view>
-
-<br>
--- a/example/src/docs/mobile/pull-refresh/base.md
+++ b/example/src/docs/mobile/pull-refresh/base.md
@ -1,16 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-ui-pull-refresh"/>
-</p>
-
-## pull-refresh 刷新
-
-<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
-</div>
-
-### 基本展示
-
-<mobile-view link="pull-refresh/base"></mobile-view>
-
-<br>
-<mobile-attributes link="pull-refresh"></mobile-attributes>
--- a/example/src/docs/mobile/pull-refresh/disabled.md
+++ b/example/src/docs/mobile/pull-refresh/disabled.md
@ -1,15 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-ui-pull-refresh"/>
-</p>
-
-## pull-refresh 刷新
-
-<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
-</div>
-
-### 禁用刷新
-
-<mobile-view link="pull-refresh/disabled"></mobile-view>
-
-<br>
--- a/example/src/docs/mobile/pull-refresh/enhance.md
+++ b/example/src/docs/mobile/pull-refresh/enhance.md
@ -1,15 +0,0 @@
-<div class="demo-header">
-<p class="overviewicon">
-  <span class="wapi-ui-pull-refresh"/>
-</p>
-
-## pull-refresh 刷新
-
-<mobile-uxlink widget-name="PullRefresh"></mobile-uxlink>
-</div>
-
-### 支持上拉、下拉刷新
-
-<mobile-view link="pull-refresh/enhance"></mobile-view>
-
-<br>
--- a/Show More
+++ b/Show More