chore: sync h5 components

package.json

@@ -50,6 +50,7 @@
     "@types/puppeteer": "^5.4.2",
     "@typescript-eslint/parser": "^4.12.0",
     "@vitejs/plugin-vue": "^1.0.4",
+    "@vitejs/plugin-vue-jsx": "^1.1.2",
     "@vue/compiler-sfc": "^3.0.5",
     "eslint": "^7.17.0",
     "fs-extra": "^9.0.1",
@@ -68,7 +69,7 @@
     "size-limit": "^4.10.1",
     "ts-jest": "^26.4.4",
     "typescript": "~4.1.3",
-    "vite": "^2.1.1",
+    "vite": "^2.1.2",
     "vue": "3.0.7",
     "yorkie": "^2.0.0"
   }

packages/global.d.ts

@@ -23,12 +23,17 @@ declare var __VUE_OPTIONS_API__: boolean
 declare var __UNI_FEATURE_WX__: boolean
 declare var __UNI_FEATURE_WXS__: boolean
 declare var __UNI_FEATURE_PROMISE__: boolean
+declare var __UNI_FEATURE_LONGPRESS__: boolean
 declare var __UNI_FEATURE_ROUTER_MODE__: 'hash' | 'history'
 
 declare var __UNI_FEATURE_PAGES__: boolean
 declare var __UNI_FEATURE_TABBAR__: boolean
+declare var __UNI_FEATURE_TOPWINDOW__: boolean
+declare var __UNI_FEATURE_LEFTWINDOW__: boolean
+declare var __UNI_FEATURE_RIGHTWINDOW__: boolean
+declare var __UNI_FEATURE_RESPONSIVE__: boolean
 // TODO
 declare var __uniRoutes: any
-declare var __uniConfig: any
+declare var __uniConfig: UniApp.UniConfig
 declare var UniViewJSBridge: any
 declare var UniServiceJSBridge: any

packages/shims-uni-app.d.ts

+declare namespace UniApp {
+  interface LayoutWindowOptions {
+    matchMedia?: {
+      minWidth?: number
+    }
+    style?: Record<string, any>
+  }
+
+  interface UniConfig {
+    router: {
+      strict: boolean
+    }
+    topWindow?: LayoutWindowOptions
+    leftWindow?: LayoutWindowOptions
+    rightWindow?: LayoutWindowOptions
+  }
+  interface PagesJsonPageOptions {
+    path: string
+    style?: Record<string, any>
+  }
+  interface PagesJsonSubpackagesOptions {
+    root: string
+    pages: PagesJsonPageOptions[]
+  }
+
+  interface PagesJson {
+    pages: PagesJsonPageOptions[]
+    subpackages?: PagesJsonSubpackagesOptions[]
+    subPackages?: PagesJsonSubpackagesOptions[]
+    globalStyle?: {}
+    tabBar?: {
+      list: []
+    }
+  }
+}

packages/uni-core/src/helpers/getRealRoute.ts

+export function getRealRoute(fromRoute: string, toRoute: string): string {
+  if (!toRoute) {
+    toRoute = fromRoute
+    if (toRoute.indexOf('/') === 0) {
+      return toRoute
+    }
+    const pages = getCurrentPages()
+    if (pages.length) {
+      fromRoute = (pages[pages.length - 1] as any).$page.route
+    } else {
+      fromRoute = ''
+    }
+  } else {
+    if (toRoute.indexOf('/') === 0) {
+      return toRoute
+    }
+  }
+  if (toRoute.indexOf('./') === 0) {
+    return getRealRoute(fromRoute, toRoute.substr(2))
+  }
+  const toRouteArray = toRoute.split('/')
+  const toRouteLength = toRouteArray.length
+  let i = 0
+  for (; i < toRouteLength && toRouteArray[i] === '..'; i++) {
+    // noop
+  }
+  toRouteArray.splice(0, i)
+  toRoute = toRouteArray.join('/')
+  const fromRouteArray = fromRoute.length > 0 ? fromRoute.split('/') : []
+  fromRouteArray.splice(fromRouteArray.length - i - 1, i + 1)
+  return '/' + fromRouteArray.concat(toRouteArray).join('/')
+}

packages/uni-core/src/helpers/index.ts

+export * from './util'
+export * from './getRealRoute'

packages/uni-core/src/helpers/util.ts

+export function PolySymbol(name: string) {
+  return Symbol(__DEV__ ? '[uni-app]: ' + name : name)
+}

packages/uni-core/src/index.ts

 export * from './view'
 export * from './service'
+export * from './helpers'

packages/uni-core/src/view/plugin/index.ts

@@ -4,7 +4,9 @@ import { initLongPress } from './longPress'
 import { initAppConfig } from './appConfig'
 
 export function initView(app: App) {
-  initLongPress()
+  if (__UNI_FEATURE_LONGPRESS__) {
+    initLongPress()
+  }
   initAppConfig(app._context.config)
   // TODO wxs,behaviors
 }

packages/uni-h5/dist/assets/index-71933e8d.css

+
+uni-page-head {
+  display: block;
+  box-sizing: border-box;
+}
+uni-page-head .uni-page-head {
+  position: fixed;
+  left: var(--window-left);
+  right: var(--window-right);
+  height: 44px;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
+  padding: 7px 3px;
+  padding-top: calc(7px + constant(safe-area-inset-top));
+  padding-top: calc(7px + env(safe-area-inset-top));
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+  box-sizing: border-box;
+  z-index: 998;
+  color: #fff;
+  background-color: #000;
+  transition-property: all;
+}
+uni-page-head .uni-page-head-titlePenetrate,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
+  pointer-events: none;
+}
+uni-page-head .uni-page-head-titlePenetrate * {
+  pointer-events: auto;
+}
+uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
+  justify-content: center;
+}
+uni-page-head .uni-page-head ~ .uni-placeholder {
+  width: 100%;
+  height: 44px;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
+}
+uni-page-head .uni-placeholder-titlePenetrate {
+  pointer-events: none;
+}
+uni-page-head .uni-page-head * {
+  box-sizing: border-box;
+}
+uni-page-head .uni-page-head-hd {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+uni-page-head .uni-page-head-bd {
+  position: absolute;
+  left: 70px;
+  right: 70px;
+  min-width: 0;
+  user-select: auto;
+}
+.uni-page-head-btn {
+  position: relative;
+  width: auto;
+  margin: 0 2px;
+  word-break: keep-all;
+  white-space: pre;
+  cursor: pointer;
+}
+.uni-page-head-transparent .uni-page-head-btn {
+  display: flex;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+uni-page-head .uni-btn-icon {
+  overflow: hidden;
+  min-width: 1em;
+}
+.uni-page-head-btn-red-dot::after {
+  content: attr(badge-text);
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: red;
+  color: white;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 18px;
+  overflow: hidden;
+  transform: scale(0.5) translate(40%, -40%);
+  transform-origin: 100% 0;
+}
+.uni-page-head-btn-red-dot[badge-text]::after {
+  font-size: 12px;
+  width: auto;
+  min-width: 18px;
+  max-width: 42px;
+  text-align: center;
+  padding: 0 3px;
+  transform: scale(0.7) translate(40%, -40%);
+}
+.uni-page-head-btn-select > .uni-btn-icon::after {
+  display: inline-block;
+  font-family: 'unibtn';
+  content: '\e601';
+  margin-left: 2px;
+  transform: rotate(-90deg) scale(0.8);
+}
+.uni-page-head-search {
+  position: relative;
+  display: flex;
+  flex: 1;
+  margin: 0 2px;
+  line-height: 30px;
+  font-size: 15px;
+}
+.uni-page-head-search-input {
+  width: 100%;
+  height: 100%;
+  padding-left: 34px;
+  text-align: left;
+}
+.uni-page-head-search-placeholder {
+  position: absolute;
+  max-width: 100%;
+  height: 100%;
+  padding-left: 34px;
+  overflow: hidden;
+  word-break: keep-all;
+  white-space: pre;
+}
+.uni-page-head-search-placeholder-right {
+  right: 0;
+}
+.uni-page-head-search-placeholder-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.uni-page-head-search-placeholder::before {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  width: 30px;
+  content: '\ea0e';
+  display: block;
+  font-size: 20px;
+  font-family: 'uni';
+  text-align: center;
+}
+uni-page-head .uni-page-head-ft {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  font-size: 13px;
+}
+uni-page-head .uni-page-head__title {
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 30px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+uni-page-head .uni-page-head__title .uni-loading {
+  width: 16px;
+  height: 16px;
+  margin-top: -3px;
+}
+uni-page-head .uni-page-head__title .uni-page-head__title_image {
+  width: auto;
+  height: 26px;
+  vertical-align: middle;
+}
+uni-page-head .uni-page-head-shadow {
+  overflow: visible;
+}
+uni-page-head .uni-page-head-shadow::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 5px;
+  background-size: 100% 100%;
+}
+uni-page-head .uni-page-head-shadow-grey::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-grey.png');
+}
+uni-page-head .uni-page-head-shadow-blue::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-blue.png');
+}
+uni-page-head .uni-page-head-shadow-green::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-green.png');
+}
+uni-page-head .uni-page-head-shadow-orange::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-orange.png');
+}
+uni-page-head .uni-page-head-shadow-red::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-red.png');
+}
+uni-page-head .uni-page-head-shadow-yellow::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-yellow.png');
+}
+
+uni-page-wrapper {
+  display: block;
+  height: 100%;
+  position: relative;
+}
+uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
+  height: calc(100% - 44px);
+  height: calc(100% - 44px - constant(safe-area-inset-top));
+  height: calc(100% - 44px - env(safe-area-inset-top));
+}
+uni-page-body {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+uni-page-refresh {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 40px;
+		display: block;
+		box-sizing: border-box;
+}
+uni-page-refresh .uni-page-refresh {
+		position: absolute;
+		top: -45px;
+		left: 50%;
+		transform: translate3d(-50%, 0, 0);
+		width: 40px;
+		height: 40px;
+		justify-content: center;
+		align-items: center;
+		background: #fff;
+		border-radius: 50%;
+		box-shadow: 0 1px 6px rgba(0, 0, 0, .117647), 0 1px 4px rgba(0, 0, 0, .117647);
+		display: none;
+    z-index: 997;
+}
+uni-page-refresh .uni-page-refresh-inner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+}
+uni-page-refresh.uni-page-refresh--pulling .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--aborting .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--reached .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--restoring .uni-page-refresh {
+		display: flex;
+}
+uni-page-refresh.uni-page-refresh--pulling .uni-page-refresh__spinner,
+	uni-page-refresh.uni-page-refresh--aborting .uni-page-refresh__spinner,
+	uni-page-refresh.uni-page-refresh--reached .uni-page-refresh__spinner,
+	uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh__icon,
+	uni-page-refresh.uni-page-refresh--restoring .uni-page-refresh__icon {
+		display: none;
+}
+uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh__spinner {
+		transform-origin: center center;
+		animation: uni-page-refresh-rotate 2s linear infinite;
+}
+uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh__path {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+		stroke-linecap: round;
+		animation: uni-page-refresh-dash 1.5s ease-in-out infinite, uni-page-refresh-colorful 6s ease-in-out infinite;
+}
+@keyframes uni-page-refresh-rotate {
+100% {
+			-webkit-transform: rotate(360deg);
+			transform: rotate(360deg);
+}
+}
+@keyframes uni-page-refresh-dash {
+0% {
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+}
+50% {
+			stroke-dasharray: 89, 200;
+			stroke-dashoffset: -35px;
+}
+100% {
+			stroke-dasharray: 89, 200;
+			stroke-dashoffset: -124px;
+}
+}
+
+uni-page {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.uni-async-error {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		color: #999;
+		padding: 100px 10px;
+		text-align: center;
+}
+
+.uni-async-loading {
+    box-sizing: border-box;
+		width: 100%;
+		padding: 50px;
+		text-align: center;
+}
+.uni-async-loading .uni-loading {
+		width: 30px;
+		height: 30px;
+}
+
+uni-canvas {
+  width: 300px;
+  height: 150px;
+  display: block;
+  position: relative;
+}
+uni-canvas > canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+uni-checkbox-group[hidden] {
+        display: none;
+}
+.ql-container {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-user-select: text;
+  user-select: text;
+  outline: none;
+  overflow: hidden;
+  width: 100%;
+  height: 200px;
+  min-height: 200px;
+}
+.ql-container[hidden] {
+  display: none;
+}
+.ql-container .ql-editor {
+  position: relative;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  min-height: inherit;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-overflow-scrolling: touch;
+}
+.ql-container .ql-editor::-webkit-scrollbar {
+  width: 0 !important;
+}
+.ql-container .ql-editor.scroll-disabled {
+  overflow: hidden;
+}
+.ql-container .ql-image-overlay {
+  display: flex;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed #ccc;
+  justify-content: center;
+  align-items: center;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.ql-container .ql-image-overlay .ql-image-size {
+  position: absolute;
+  padding: 4px 8px;
+  text-align: center;
+  background-color: #fff;
+  color: #888;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  opacity: 0.8;
+  right: 4px;
+  top: 4px;
+  font-size: 12px;
+  display: inline-block;
+  width: auto;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar {
+  position: relative;
+  text-align: center;
+  box-sizing: border-box;
+  background: #000;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 0;
+  min-height: 24px;
+  z-index: 100;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar span {
+  display: inline-block;
+  cursor: pointer;
+  padding: 5px;
+  font-size: 12px;
+  border-right: 1px solid #fff;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar span:last-child {
+  border-right: 0;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar span.triangle-up {
+  padding: 0;
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translatex(-50%);
+  width: 0;
+  height: 0;
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+.ql-container .ql-image-overlay .ql-image-handle {
+  position: absolute;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  background: #fff;
+}
+.ql-container img {
+  display: inline-block;
+  max-width: 100%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 2em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 2em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 2em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 2em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 2em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 4em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 4em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 4em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 4em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 8em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 8em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 8em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 8em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 10em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 10em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 10em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 10em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 14em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 14em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 14em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 14em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 16em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 16em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 16em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 16em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0, 0, 0, 0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  pointer-events: none;
+  position: absolute;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+
+
+
+uni-icon {
+  display: inline-block;
+  font-size: 0;
+  box-sizing: border-box;
+}
+uni-icon[hidden] {
+  display: none;
+}
+uni-icon > i {
+  font: normal normal normal 14px/1 'weui';
+}
+uni-icon > i:before {
+  margin: 0;
+  box-sizing: border-box;
+}
+@font-face {
+  font-weight: normal;
+  font-style: normal;
+  font-family: 'weui';
+  src: url('data:application/octet-stream;base64,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')
+    format('truetype');
+}
+.uni-icon-success:before {
+  content: '\EA06';
+}
+.uni-icon-success_circle:before {
+  content: '\EA07';
+}
+.uni-icon-success_no_circle:before {
+  content: '\EA08';
+}
+.uni-icon-safe_success:before {
+  content: '\EA04';
+}
+.uni-icon-safe_warn:before {
+  content: '\EA05';
+}
+.uni-icon-info:before {
+  content: '\EA03';
+}
+.uni-icon-info_circle:before {
+  content: '\EA0C';
+}
+.uni-icon-warn:before {
+  content: '\EA0B';
+}
+.uni-icon-waiting:before {
+  content: '\EA09';
+}
+.uni-icon-waiting_circle:before {
+  content: '\EA0A';
+}
+.uni-icon-circle:before {
+  content: '\EA01';
+}
+.uni-icon-cancel:before {
+  content: '\EA0D';
+}
+.uni-icon-download:before {
+  content: '\EA02';
+}
+.uni-icon-search:before {
+  content: '\EA0E';
+}
+.uni-icon-clear:before {
+  content: '\EA0F';
+}
+.uni-icon-success {
+  color: #007aff;
+}
+.uni-icon-success_circle {
+  color: #007aff;
+}
+.uni-icon-success_no_circle {
+  color: #007aff;
+}
+.uni-icon-safe_success {
+  color: #007aff;
+}
+.uni-icon-safe_warn {
+  color: #ffbe00;
+}
+.uni-icon-info {
+  color: #10aeff;
+}
+.uni-icon-info_circle {
+  color: #007aff;
+}
+.uni-icon-warn {
+  color: #f76260;
+}
+.uni-icon-waiting {
+  color: #10aeff;
+}
+.uni-icon-waiting_circle {
+  color: #10aeff;
+}
+.uni-icon-circle {
+  color: #c9c9c9;
+}
+.uni-icon-cancel {
+  color: #f43530;
+}
+.uni-icon-download {
+  color: #007aff;
+}
+.uni-icon-search {
+  color: #b2b2b2;
+}
+.uni-icon-clear {
+  color: #b2b2b2;
+}
+
+uni-image {
+		width: 320px;
+		height: 240px;
+		display: inline-block;
+		overflow: hidden;
+		position: relative;
+}
+uni-image[hidden] {
+		display: none;
+}
+uni-image>div {
+		width: 100%;
+		height: 100%;
+}
+uni-image>img {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+}
+uni-image>.uni-image-will-change {
+		will-change: transform;
+}
+
+uni-input {
+  display: block;
+  font-size: 16px;
+  line-height: 1.4em;
+  height: 1.4em;
+  min-height: 1.4em;
+  overflow: hidden;
+}
+uni-input[hidden] {
+  display: none;
+}
+.uni-input-wrapper,
+.uni-input-placeholder,
+.uni-input-form,
+.uni-input-input {
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-decoration: inherit;
+}
+.uni-input-wrapper,
+.uni-input-form {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+.uni-input-placeholder,
+.uni-input-input {
+  width: 100%;
+}
+.uni-input-placeholder {
+  position: absolute;
+  top: auto !important;
+  left: 0;
+  color: gray;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: pre;
+  word-break: keep-all;
+  pointer-events: none;
+  line-height: inherit;
+}
+.uni-input-input {
+  display: block;
+  height: 100%;
+  background: none;
+  color: inherit;
+  opacity: 1;
+  -webkit-text-fill-color: currentcolor;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-indent: inherit;
+  text-transform: inherit;
+  text-shadow: inherit;
+}
+.uni-input-input[type="search"]::-webkit-search-cancel-button {
+  display: none;
+}
+.uni-input-input::-webkit-outer-spin-button,
+.uni-input-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.uni-input-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.uni-label-pointer {
+  cursor: pointer;
+}
+
+uni-movable-view {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  cursor: grab;
+}
+uni-movable-view[hidden] {
+  display: none;
+}
+
+uni-navigator {
+    height: auto;
+    width: auto;
+    display: block;
+    cursor: pointer;
+}
+uni-navigator[hidden] {
+    display: none;
+}
+.navigator-hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    opacity: 0.7;
+}
+
+uni-radio {
+		-webkit-tap-highlight-color: transparent;
+		display: inline-block;
+		cursor: pointer;
+}
+uni-radio[hidden] {
+		display: none;
+}
+uni-radio[disabled] {
+		cursor: not-allowed;
+}
+uni-radio .uni-radio-wrapper {
+		display: -webkit-inline-flex;
+		display: inline-flex;
+		-webkit-align-items: center;
+		align-items: center;
+		vertical-align: middle;
+}
+uni-radio .uni-radio-input {
+		-webkit-appearance: none;
+		appearance: none;
+		margin-right: 5px;
+		outline: 0;
+		border: 1px solid #D1D1D1;
+		background-color: #ffffff;
+		border-radius: 50%;
+		width: 22px;
+		height: 22px;
+		position: relative;
+}
+uni-radio:not([disabled]) .uni-radio-input:hover {
+		border-color: #007aff;
+}
+uni-radio .uni-radio-input.uni-radio-input-checked:before {
+		font: normal normal normal 14px/1 "uni";
+		content: "\EA08";
+		color: #ffffff;
+		font-size: 18px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -48%) scale(0.73);
+		-webkit-transform: translate(-50%, -48%) scale(0.73);
+}
+uni-radio .uni-radio-input.uni-radio-input-disabled {
+		background-color: #E1E1E1;
+		border-color: #D1D1D1;
+}
+uni-radio .uni-radio-input.uni-radio-input-disabled:before {
+		color: #ADADAD;
+}
+uni-radio-group {
+		display: block;
+}
+
+uni-radio-group[hidden] {
+		display: none;
+}
+
+@keyframes once-show {
+from {
+    top: 0;
+}
+}
+uni-resize-sensor,
+uni-resize-sensor > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+uni-resize-sensor {
+  display: block;
+  z-index: -1;
+  visibility: hidden;
+  animation: once-show 1ms;
+}
+uni-resize-sensor > div > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+uni-resize-sensor > div:first-child > div {
+  width: 100000px;
+  height: 100000px;
+}
+uni-resize-sensor > div:last-child > div {
+  width: 200%;
+  height: 200%;
+}
+
+uni-scroll-view {
+  display: block;
+  width: 100%;
+}
+uni-scroll-view[hidden] {
+  display: none;
+}
+.uni-scroll-view {
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  /* display: flex; 时在安卓下会导致scrollWidth和offsetWidth一样 */
+  height: 100%;
+  max-height: inherit;
+}
+.uni-scroll-view-content {
+  width: 100%;
+  height: 100%;
+}
+.uni-scroll-view-refresher {
+  position: relative;
+  overflow: hidden;
+}
+.uni-scroll-view-refresh {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.uni-scroll-view-refresh-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
+    0 1px 4px rgba(0, 0, 0, 0.117647);
+}
+.uni-scroll-view-refresh__spinner {
+  transform-origin: center center;
+  animation: uni-scroll-view-refresh-rotate 2s linear infinite;
+}
+.uni-scroll-view-refresh__spinner > circle {
+  stroke: currentColor;
+  stroke-linecap: round;
+  animation: uni-scroll-view-refresh-dash 2s linear infinite;
+}
+@keyframes uni-scroll-view-refresh-rotate {
+0% {
+    transform: rotate(0deg);
+}
+100% {
+    transform: rotate(360deg);
+}
+}
+@keyframes uni-scroll-view-refresh-dash {
+0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+}
+50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+}
+100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+}
+}
+
+uni-swiper-item {
+  display: block;
+  overflow: hidden;
+  will-change: transform;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+uni-swiper-item[hidden] {
+  display: none;
+}
+
+uni-switch {
+		-webkit-tap-highlight-color: transparent;
+		display: inline-block;
+		cursor: pointer;
+}
+uni-switch[hidden] {
+		display: none;
+}
+uni-switch[disabled] {
+		cursor: not-allowed;
+}
+uni-switch .uni-switch-wrapper {
+		display: -webkit-inline-flex;
+		display: inline-flex;
+		-webkit-align-items: center;
+		align-items: center;
+		vertical-align: middle;
+}
+uni-switch .uni-switch-input {
+		-webkit-appearance: none;
+		appearance: none;
+		position: relative;
+		width: 52px;
+		height: 32px;
+		margin-right: 5px;
+		border: 1px solid #DFDFDF;
+		outline: 0;
+		border-radius: 16px;
+		box-sizing: border-box;
+		background-color: #DFDFDF;
+		transition: background-color 0.1s, border 0.1s;
+}
+uni-switch[disabled] .uni-switch-input {
+		opacity: .7;
+}
+uni-switch .uni-switch-input:before {
+		content: " ";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 50px;
+		height: 30px;
+		border-radius: 15px;
+		background-color: #FDFDFD;
+		transition: -webkit-transform 0.3s;
+		transition: transform 0.3s;
+		transition: transform 0.3s, -webkit-transform 0.3s;
+}
+uni-switch .uni-switch-input:after {
+		content: " ";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 30px;
+		height: 30px;
+		border-radius: 15px;
+		background-color: #FFFFFF;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+		transition: -webkit-transform 0.3s;
+		transition: transform 0.3s;
+		transition: transform 0.3s, -webkit-transform 0.3s;
+}
+uni-switch .uni-switch-input.uni-switch-input-checked {
+		border-color: #007aff;
+		background-color: #007aff;
+}
+uni-switch .uni-switch-input.uni-switch-input-checked:before {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+}
+uni-switch .uni-switch-input.uni-switch-input-checked:after {
+		-webkit-transform: translateX(20px);
+		transform: translateX(20px);
+}
+uni-switch .uni-checkbox-input {
+		margin-right: 5px;
+		-webkit-appearance: none;
+		appearance: none;
+		outline: 0;
+		border: 1px solid #D1D1D1;
+		background-color: #FFFFFF;
+		border-radius: 3px;
+		width: 22px;
+		height: 22px;
+		position: relative;
+		color: #007aff;
+}
+uni-switch:not([disabled]) .uni-checkbox-input:hover {
+		border-color: #007aff;
+}
+uni-switch .uni-checkbox-input.uni-checkbox-input-checked:before {
+		font: normal normal normal 14px/1 "uni";
+		content: "\EA08";
+		color: inherit;
+		font-size: 22px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -48%) scale(0.73);
+		-webkit-transform: translate(-50%, -48%) scale(0.73);
+}
+uni-switch .uni-checkbox-input.uni-checkbox-input-disabled {
+		background-color: #E1E1E1;
+}
+uni-switch .uni-checkbox-input.uni-checkbox-input-disabled:before {
+		color: #ADADAD;
+}
+
+uni-text[selectable] {
+    cursor: auto;
+		user-select: text;
+		-webkit-user-select: text;
+}
+
+uni-textarea {
+  width: 300px;
+  height: 150px;
+  display: block;
+  position: relative;
+  font-size: 16px;
+  line-height: normal;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+uni-textarea[hidden] {
+  display: none;
+}
+.uni-textarea-wrapper,
+.uni-textarea-placeholder,
+.uni-textarea-line,
+.uni-textarea-compute,
+.uni-textarea-textarea {
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-decoration: inherit;
+}
+.uni-textarea-wrapper {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.uni-textarea-placeholder,
+.uni-textarea-line,
+.uni-textarea-compute,
+.uni-textarea-textarea {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  white-space: inherit;
+  word-break: inherit;
+}
+.uni-textarea-placeholder {
+  color: grey;
+  overflow: hidden;
+}
+.uni-textarea-line,
+.uni-textarea-compute {
+  visibility: hidden;
+  height: auto;
+}
+.uni-textarea-line {
+  width: 1em;
+}
+.uni-textarea-textarea {
+  resize: none;
+  background: none;
+  color: inherit;
+  opacity: 1;
+  -webkit-text-fill-color: currentcolor;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-indent: inherit;
+  text-transform: inherit;
+  text-shadow: inherit;
+}
+/* 用于解决 iOS textarea 内部默认边距 */
+.uni-textarea-textarea-fix-margin {
+  width: auto;
+  right: 0;
+  margin: 0 -3px;
+}
+
+uni-view {
+  display: block;
+}
+uni-view[hidden] {
+  display: none;
+}

packages/uni-h5/dist/assets/index-a549e8ca.css

+
+uni-canvas {
+  width: 300px;
+  height: 150px;
+  display: block;
+  position: relative;
+}
+uni-canvas > canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+uni-checkbox-group[hidden] {
+        display: none;
+}
+.ql-container {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-user-select: text;
+  user-select: text;
+  outline: none;
+  overflow: hidden;
+  width: 100%;
+  height: 200px;
+  min-height: 200px;
+}
+.ql-container[hidden] {
+  display: none;
+}
+.ql-container .ql-editor {
+  position: relative;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  min-height: inherit;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-overflow-scrolling: touch;
+}
+.ql-container .ql-editor::-webkit-scrollbar {
+  width: 0 !important;
+}
+.ql-container .ql-editor.scroll-disabled {
+  overflow: hidden;
+}
+.ql-container .ql-image-overlay {
+  display: flex;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed #ccc;
+  justify-content: center;
+  align-items: center;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.ql-container .ql-image-overlay .ql-image-size {
+  position: absolute;
+  padding: 4px 8px;
+  text-align: center;
+  background-color: #fff;
+  color: #888;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  opacity: 0.8;
+  right: 4px;
+  top: 4px;
+  font-size: 12px;
+  display: inline-block;
+  width: auto;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar {
+  position: relative;
+  text-align: center;
+  box-sizing: border-box;
+  background: #000;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 0;
+  min-height: 24px;
+  z-index: 100;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar span {
+  display: inline-block;
+  cursor: pointer;
+  padding: 5px;
+  font-size: 12px;
+  border-right: 1px solid #fff;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar span:last-child {
+  border-right: 0;
+}
+.ql-container .ql-image-overlay .ql-image-toolbar span.triangle-up {
+  padding: 0;
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translatex(-50%);
+  width: 0;
+  height: 0;
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+.ql-container .ql-image-overlay .ql-image-handle {
+  position: absolute;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  background: #fff;
+}
+.ql-container img {
+  display: inline-block;
+  max-width: 100%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 2em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 2em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 2em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 2em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 2em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 4em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 4em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 4em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 4em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 8em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 8em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 8em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 8em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 10em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 10em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 10em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 10em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 14em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 14em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 14em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 14em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 16em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 16em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 16em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 16em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0, 0, 0, 0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  pointer-events: none;
+  position: absolute;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+
+
+
+uni-icon {
+  display: inline-block;
+  font-size: 0;
+  box-sizing: border-box;
+}
+uni-icon[hidden] {
+  display: none;
+}
+uni-icon > i {
+  font: normal normal normal 14px/1 'weui';
+}
+uni-icon > i:before {
+  margin: 0;
+  box-sizing: border-box;
+}
+@font-face {
+  font-weight: normal;
+  font-style: normal;
+  font-family: 'weui';
+  src: url('data:application/octet-stream;base64,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')
+    format('truetype');
+}
+.uni-icon-success:before {
+  content: '\EA06';
+}
+.uni-icon-success_circle:before {
+  content: '\EA07';
+}
+.uni-icon-success_no_circle:before {
+  content: '\EA08';
+}
+.uni-icon-safe_success:before {
+  content: '\EA04';
+}
+.uni-icon-safe_warn:before {
+  content: '\EA05';
+}
+.uni-icon-info:before {
+  content: '\EA03';
+}
+.uni-icon-info_circle:before {
+  content: '\EA0C';
+}
+.uni-icon-warn:before {
+  content: '\EA0B';
+}
+.uni-icon-waiting:before {
+  content: '\EA09';
+}
+.uni-icon-waiting_circle:before {
+  content: '\EA0A';
+}
+.uni-icon-circle:before {
+  content: '\EA01';
+}
+.uni-icon-cancel:before {
+  content: '\EA0D';
+}
+.uni-icon-download:before {
+  content: '\EA02';
+}
+.uni-icon-search:before {
+  content: '\EA0E';
+}
+.uni-icon-clear:before {
+  content: '\EA0F';
+}
+.uni-icon-success {
+  color: #007aff;
+}
+.uni-icon-success_circle {
+  color: #007aff;
+}
+.uni-icon-success_no_circle {
+  color: #007aff;
+}
+.uni-icon-safe_success {
+  color: #007aff;
+}
+.uni-icon-safe_warn {
+  color: #ffbe00;
+}
+.uni-icon-info {
+  color: #10aeff;
+}
+.uni-icon-info_circle {
+  color: #007aff;
+}
+.uni-icon-warn {
+  color: #f76260;
+}
+.uni-icon-waiting {
+  color: #10aeff;
+}
+.uni-icon-waiting_circle {
+  color: #10aeff;
+}
+.uni-icon-circle {
+  color: #c9c9c9;
+}
+.uni-icon-cancel {
+  color: #f43530;
+}
+.uni-icon-download {
+  color: #007aff;
+}
+.uni-icon-search {
+  color: #b2b2b2;
+}
+.uni-icon-clear {
+  color: #b2b2b2;
+}
+
+uni-image {
+		width: 320px;
+		height: 240px;
+		display: inline-block;
+		overflow: hidden;
+		position: relative;
+}
+uni-image[hidden] {
+		display: none;
+}
+uni-image>div {
+		width: 100%;
+		height: 100%;
+}
+uni-image>img {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+}
+uni-image>.uni-image-will-change {
+		will-change: transform;
+}
+
+uni-input {
+  display: block;
+  font-size: 16px;
+  line-height: 1.4em;
+  height: 1.4em;
+  min-height: 1.4em;
+  overflow: hidden;
+}
+uni-input[hidden] {
+  display: none;
+}
+.uni-input-wrapper,
+.uni-input-placeholder,
+.uni-input-form,
+.uni-input-input {
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-decoration: inherit;
+}
+.uni-input-wrapper,
+.uni-input-form {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+.uni-input-placeholder,
+.uni-input-input {
+  width: 100%;
+}
+.uni-input-placeholder {
+  position: absolute;
+  top: auto !important;
+  left: 0;
+  color: gray;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: pre;
+  word-break: keep-all;
+  pointer-events: none;
+  line-height: inherit;
+}
+.uni-input-input {
+  display: block;
+  height: 100%;
+  background: none;
+  color: inherit;
+  opacity: 1;
+  -webkit-text-fill-color: currentcolor;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-indent: inherit;
+  text-transform: inherit;
+  text-shadow: inherit;
+}
+.uni-input-input[type="search"]::-webkit-search-cancel-button {
+  display: none;
+}
+.uni-input-input::-webkit-outer-spin-button,
+.uni-input-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.uni-input-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.uni-label-pointer {
+  cursor: pointer;
+}
+
+uni-movable-view {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  cursor: grab;
+}
+uni-movable-view[hidden] {
+  display: none;
+}
+
+uni-navigator {
+    height: auto;
+    width: auto;
+    display: block;
+    cursor: pointer;
+}
+uni-navigator[hidden] {
+    display: none;
+}
+.navigator-hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    opacity: 0.7;
+}
+
+uni-radio {
+		-webkit-tap-highlight-color: transparent;
+		display: inline-block;
+		cursor: pointer;
+}
+uni-radio[hidden] {
+		display: none;
+}
+uni-radio[disabled] {
+		cursor: not-allowed;
+}
+uni-radio .uni-radio-wrapper {
+		display: -webkit-inline-flex;
+		display: inline-flex;
+		-webkit-align-items: center;
+		align-items: center;
+		vertical-align: middle;
+}
+uni-radio .uni-radio-input {
+		-webkit-appearance: none;
+		appearance: none;
+		margin-right: 5px;
+		outline: 0;
+		border: 1px solid #D1D1D1;
+		background-color: #ffffff;
+		border-radius: 50%;
+		width: 22px;
+		height: 22px;
+		position: relative;
+}
+uni-radio:not([disabled]) .uni-radio-input:hover {
+		border-color: #007aff;
+}
+uni-radio .uni-radio-input.uni-radio-input-checked:before {
+		font: normal normal normal 14px/1 "uni";
+		content: "\EA08";
+		color: #ffffff;
+		font-size: 18px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -48%) scale(0.73);
+		-webkit-transform: translate(-50%, -48%) scale(0.73);
+}
+uni-radio .uni-radio-input.uni-radio-input-disabled {
+		background-color: #E1E1E1;
+		border-color: #D1D1D1;
+}
+uni-radio .uni-radio-input.uni-radio-input-disabled:before {
+		color: #ADADAD;
+}
+uni-radio-group {
+		display: block;
+}
+
+uni-radio-group[hidden] {
+		display: none;
+}
+
+@keyframes once-show {
+from {
+    top: 0;
+}
+}
+uni-resize-sensor,
+uni-resize-sensor > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+uni-resize-sensor {
+  display: block;
+  z-index: -1;
+  visibility: hidden;
+  animation: once-show 1ms;
+}
+uni-resize-sensor > div > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+uni-resize-sensor > div:first-child > div {
+  width: 100000px;
+  height: 100000px;
+}
+uni-resize-sensor > div:last-child > div {
+  width: 200%;
+  height: 200%;
+}
+
+uni-scroll-view {
+  display: block;
+  width: 100%;
+}
+uni-scroll-view[hidden] {
+  display: none;
+}
+.uni-scroll-view {
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  /* display: flex; 时在安卓下会导致scrollWidth和offsetWidth一样 */
+  height: 100%;
+  max-height: inherit;
+}
+.uni-scroll-view-content {
+  width: 100%;
+  height: 100%;
+}
+.uni-scroll-view-refresher {
+  position: relative;
+  overflow: hidden;
+}
+.uni-scroll-view-refresh {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.uni-scroll-view-refresh-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
+    0 1px 4px rgba(0, 0, 0, 0.117647);
+}
+.uni-scroll-view-refresh__spinner {
+  transform-origin: center center;
+  animation: uni-scroll-view-refresh-rotate 2s linear infinite;
+}
+.uni-scroll-view-refresh__spinner > circle {
+  stroke: currentColor;
+  stroke-linecap: round;
+  animation: uni-scroll-view-refresh-dash 2s linear infinite;
+}
+@keyframes uni-scroll-view-refresh-rotate {
+0% {
+    transform: rotate(0deg);
+}
+100% {
+    transform: rotate(360deg);
+}
+}
+@keyframes uni-scroll-view-refresh-dash {
+0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+}
+50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+}
+100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+}
+}
+
+uni-swiper-item {
+  display: block;
+  overflow: hidden;
+  will-change: transform;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+uni-swiper-item[hidden] {
+  display: none;
+}
+
+uni-switch {
+		-webkit-tap-highlight-color: transparent;
+		display: inline-block;
+		cursor: pointer;
+}
+uni-switch[hidden] {
+		display: none;
+}
+uni-switch[disabled] {
+		cursor: not-allowed;
+}
+uni-switch .uni-switch-wrapper {
+		display: -webkit-inline-flex;
+		display: inline-flex;
+		-webkit-align-items: center;
+		align-items: center;
+		vertical-align: middle;
+}
+uni-switch .uni-switch-input {
+		-webkit-appearance: none;
+		appearance: none;
+		position: relative;
+		width: 52px;
+		height: 32px;
+		margin-right: 5px;
+		border: 1px solid #DFDFDF;
+		outline: 0;
+		border-radius: 16px;
+		box-sizing: border-box;
+		background-color: #DFDFDF;
+		transition: background-color 0.1s, border 0.1s;
+}
+uni-switch[disabled] .uni-switch-input {
+		opacity: .7;
+}
+uni-switch .uni-switch-input:before {
+		content: " ";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 50px;
+		height: 30px;
+		border-radius: 15px;
+		background-color: #FDFDFD;
+		transition: -webkit-transform 0.3s;
+		transition: transform 0.3s;
+		transition: transform 0.3s, -webkit-transform 0.3s;
+}
+uni-switch .uni-switch-input:after {
+		content: " ";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 30px;
+		height: 30px;
+		border-radius: 15px;
+		background-color: #FFFFFF;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+		transition: -webkit-transform 0.3s;
+		transition: transform 0.3s;
+		transition: transform 0.3s, -webkit-transform 0.3s;
+}
+uni-switch .uni-switch-input.uni-switch-input-checked {
+		border-color: #007aff;
+		background-color: #007aff;
+}
+uni-switch .uni-switch-input.uni-switch-input-checked:before {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+}
+uni-switch .uni-switch-input.uni-switch-input-checked:after {
+		-webkit-transform: translateX(20px);
+		transform: translateX(20px);
+}
+uni-switch .uni-checkbox-input {
+		margin-right: 5px;
+		-webkit-appearance: none;
+		appearance: none;
+		outline: 0;
+		border: 1px solid #D1D1D1;
+		background-color: #FFFFFF;
+		border-radius: 3px;
+		width: 22px;
+		height: 22px;
+		position: relative;
+		color: #007aff;
+}
+uni-switch:not([disabled]) .uni-checkbox-input:hover {
+		border-color: #007aff;
+}
+uni-switch .uni-checkbox-input.uni-checkbox-input-checked:before {
+		font: normal normal normal 14px/1 "uni";
+		content: "\EA08";
+		color: inherit;
+		font-size: 22px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -48%) scale(0.73);
+		-webkit-transform: translate(-50%, -48%) scale(0.73);
+}
+uni-switch .uni-checkbox-input.uni-checkbox-input-disabled {
+		background-color: #E1E1E1;
+}
+uni-switch .uni-checkbox-input.uni-checkbox-input-disabled:before {
+		color: #ADADAD;
+}
+
+uni-text[selectable] {
+    cursor: auto;
+		user-select: text;
+		-webkit-user-select: text;
+}
+
+uni-textarea {
+  width: 300px;
+  height: 150px;
+  display: block;
+  position: relative;
+  font-size: 16px;
+  line-height: normal;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+uni-textarea[hidden] {
+  display: none;
+}
+.uni-textarea-wrapper,
+.uni-textarea-placeholder,
+.uni-textarea-line,
+.uni-textarea-compute,
+.uni-textarea-textarea {
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-decoration: inherit;
+}
+.uni-textarea-wrapper {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.uni-textarea-placeholder,
+.uni-textarea-line,
+.uni-textarea-compute,
+.uni-textarea-textarea {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  white-space: inherit;
+  word-break: inherit;
+}
+.uni-textarea-placeholder {
+  color: grey;
+  overflow: hidden;
+}
+.uni-textarea-line,
+.uni-textarea-compute {
+  visibility: hidden;
+  height: auto;
+}
+.uni-textarea-line {
+  width: 1em;
+}
+.uni-textarea-textarea {
+  resize: none;
+  background: none;
+  color: inherit;
+  opacity: 1;
+  -webkit-text-fill-color: currentcolor;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-indent: inherit;
+  text-transform: inherit;
+  text-shadow: inherit;
+}
+/* 用于解决 iOS textarea 内部默认边距 */
+.uni-textarea-textarea-fix-margin {
+  width: auto;
+  right: 0;
+  margin: 0 -3px;
+}
+
+uni-view {
+  display: block;
+}
+uni-view[hidden] {
+  display: none;
+}
+
+uni-page-head {
+  display: block;
+  box-sizing: border-box;
+}
+uni-page-head .uni-page-head {
+  position: fixed;
+  left: var(--window-left);
+  right: var(--window-right);
+  height: 44px;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
+  padding: 7px 3px;
+  padding-top: calc(7px + constant(safe-area-inset-top));
+  padding-top: calc(7px + env(safe-area-inset-top));
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+  box-sizing: border-box;
+  z-index: 998;
+  color: #fff;
+  background-color: #000;
+  transition-property: all;
+}
+uni-page-head .uni-page-head-titlePenetrate,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
+  pointer-events: none;
+}
+uni-page-head .uni-page-head-titlePenetrate * {
+  pointer-events: auto;
+}
+uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
+  justify-content: center;
+}
+uni-page-head .uni-page-head ~ .uni-placeholder {
+  width: 100%;
+  height: 44px;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
+}
+uni-page-head .uni-placeholder-titlePenetrate {
+  pointer-events: none;
+}
+uni-page-head .uni-page-head * {
+  box-sizing: border-box;
+}
+uni-page-head .uni-page-head-hd {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+uni-page-head .uni-page-head-bd {
+  position: absolute;
+  left: 70px;
+  right: 70px;
+  min-width: 0;
+  user-select: auto;
+}
+.uni-page-head-btn {
+  position: relative;
+  width: auto;
+  margin: 0 2px;
+  word-break: keep-all;
+  white-space: pre;
+  cursor: pointer;
+}
+.uni-page-head-transparent .uni-page-head-btn {
+  display: flex;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+uni-page-head .uni-btn-icon {
+  overflow: hidden;
+  min-width: 1em;
+}
+.uni-page-head-btn-red-dot::after {
+  content: attr(badge-text);
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: red;
+  color: white;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 18px;
+  overflow: hidden;
+  transform: scale(0.5) translate(40%, -40%);
+  transform-origin: 100% 0;
+}
+.uni-page-head-btn-red-dot[badge-text]::after {
+  font-size: 12px;
+  width: auto;
+  min-width: 18px;
+  max-width: 42px;
+  text-align: center;
+  padding: 0 3px;
+  transform: scale(0.7) translate(40%, -40%);
+}
+.uni-page-head-btn-select > .uni-btn-icon::after {
+  display: inline-block;
+  font-family: 'unibtn';
+  content: '\e601';
+  margin-left: 2px;
+  transform: rotate(-90deg) scale(0.8);
+}
+.uni-page-head-search {
+  position: relative;
+  display: flex;
+  flex: 1;
+  margin: 0 2px;
+  line-height: 30px;
+  font-size: 15px;
+}
+.uni-page-head-search-input {
+  width: 100%;
+  height: 100%;
+  padding-left: 34px;
+  text-align: left;
+}
+.uni-page-head-search-placeholder {
+  position: absolute;
+  max-width: 100%;
+  height: 100%;
+  padding-left: 34px;
+  overflow: hidden;
+  word-break: keep-all;
+  white-space: pre;
+}
+.uni-page-head-search-placeholder-right {
+  right: 0;
+}
+.uni-page-head-search-placeholder-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.uni-page-head-search-placeholder::before {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  width: 30px;
+  content: '\ea0e';
+  display: block;
+  font-size: 20px;
+  font-family: 'uni';
+  text-align: center;
+}
+uni-page-head .uni-page-head-ft {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  font-size: 13px;
+}
+uni-page-head .uni-page-head__title {
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 30px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+uni-page-head .uni-page-head__title .uni-loading {
+  width: 16px;
+  height: 16px;
+  margin-top: -3px;
+}
+uni-page-head .uni-page-head__title .uni-page-head__title_image {
+  width: auto;
+  height: 26px;
+  vertical-align: middle;
+}
+uni-page-head .uni-page-head-shadow {
+  overflow: visible;
+}
+uni-page-head .uni-page-head-shadow::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 5px;
+  background-size: 100% 100%;
+}
+uni-page-head .uni-page-head-shadow-grey::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-grey.png');
+}
+uni-page-head .uni-page-head-shadow-blue::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-blue.png');
+}
+uni-page-head .uni-page-head-shadow-green::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-green.png');
+}
+uni-page-head .uni-page-head-shadow-orange::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-orange.png');
+}
+uni-page-head .uni-page-head-shadow-red::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-red.png');
+}
+uni-page-head .uni-page-head-shadow-yellow::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-yellow.png');
+}
+
+uni-page-wrapper {
+  display: block;
+  height: 100%;
+  position: relative;
+}
+uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
+  height: calc(100% - 44px);
+  height: calc(100% - 44px - constant(safe-area-inset-top));
+  height: calc(100% - 44px - env(safe-area-inset-top));
+}
+uni-page-body {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+uni-page-refresh {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 40px;
+		display: block;
+		box-sizing: border-box;
+}
+uni-page-refresh .uni-page-refresh {
+		position: absolute;
+		top: -45px;
+		left: 50%;
+		transform: translate3d(-50%, 0, 0);
+		width: 40px;
+		height: 40px;
+		justify-content: center;
+		align-items: center;
+		background: #fff;
+		border-radius: 50%;
+		box-shadow: 0 1px 6px rgba(0, 0, 0, .117647), 0 1px 4px rgba(0, 0, 0, .117647);
+		display: none;
+    z-index: 997;
+}
+uni-page-refresh .uni-page-refresh-inner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+}
+uni-page-refresh.uni-page-refresh--pulling .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--aborting .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--reached .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh,
+	uni-page-refresh.uni-page-refresh--restoring .uni-page-refresh {
+		display: flex;
+}
+uni-page-refresh.uni-page-refresh--pulling .uni-page-refresh__spinner,
+	uni-page-refresh.uni-page-refresh--aborting .uni-page-refresh__spinner,
+	uni-page-refresh.uni-page-refresh--reached .uni-page-refresh__spinner,
+	uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh__icon,
+	uni-page-refresh.uni-page-refresh--restoring .uni-page-refresh__icon {
+		display: none;
+}
+uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh__spinner {
+		transform-origin: center center;
+		animation: uni-page-refresh-rotate 2s linear infinite;
+}
+uni-page-refresh.uni-page-refresh--refreshing .uni-page-refresh__path {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+		stroke-linecap: round;
+		animation: uni-page-refresh-dash 1.5s ease-in-out infinite, uni-page-refresh-colorful 6s ease-in-out infinite;
+}
+@keyframes uni-page-refresh-rotate {
+100% {
+			-webkit-transform: rotate(360deg);
+			transform: rotate(360deg);
+}
+}
+@keyframes uni-page-refresh-dash {
+0% {
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+}
+50% {
+			stroke-dasharray: 89, 200;
+			stroke-dashoffset: -35px;
+}
+100% {
+			stroke-dasharray: 89, 200;
+			stroke-dashoffset: -124px;
+}
+}
+
+uni-page {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.uni-async-error {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		color: #999;
+		padding: 100px 10px;
+		text-align: center;
+}
+
+.uni-async-loading {
+    box-sizing: border-box;
+		width: 100%;
+		padding: 50px;
+		text-align: center;
+}
+.uni-async-loading .uni-loading {
+		width: 30px;
+		height: 30px;
+}

packages/uni-h5/src/framework/components/app/components.js

-import TabBar from './tabBar.vue'
-import Components from './popup'
-
-export default {
-  TabBar,
-  ...Components
-}

packages/uni-h5/src/framework/components/app/customTabBar.vue

+<template>
+  <uni-tabbar
+    v-if="hasTabBar"
+    v-show="showTabBar"
+  >
+    <div
+      :style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
+      class="uni-tabbar"
+    >
+      <div
+        v-for="(item,index) in tabBarOptions.list"
+        :key="item.pagePath"
+        class="uni-tabbar__item"
+        @click="_switchTab(item,index)"
+      >
+        <div class="uni-tabbar__bd">
+          <div
+            v-if="showIcon && item.iconPath"
+            :class="{'uni-tabbar__icon__diff':!item.text}"
+            class="uni-tabbar__icon"
+          >
+            <img :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)">
+            <div
+              v-if="item.redDot"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
+            >
+              {{ item.badge }}
+            </div>
+          </div>
+          <div
+            v-if="item.text"
+            :style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon&&item.iconPath?'10px':'14px'}"
+            class="uni-tabbar__label"
+          >
+            {{ item.text }}
+            <div
+              v-if="item.redDot&&(!showIcon || !item.iconPath)"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
+            >
+              {{ item.badge }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </uni-tabbar>
+</template>
+
+<script>
+import getRealPath from 'uni-platform/helpers/get-real-path'
+import {
+  tabBar
+} from './observable'
+export default {
+  name: 'CustomTabBar',
+  props: {
+    selected: {
+      type: Number,
+      default: 0
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    }
+  },
+  data () {
+    return {
+      selectedIndex: this.selected
+    }
+  },
+  computed: {
+    tabBarOptions () {
+      return tabBar
+    },
+    hasTabBar () {
+      return tabBar.list && tabBar.list.length
+    },
+    showTabBar () {
+      const app = getApp()
+      if (app) {
+        return !app.$children[0].hideTabBar
+      }
+      return true
+    }
+  },
+  watch: {
+    selected (val) {
+      this.selectedIndex = val
+      // 同步至内置tabBar
+      const tabBar = getApp().$children[0].$refs.tabBar
+      if (tabBar) {
+        tabBar.selectedIndex = val
+      }
+    },
+    '$route' (to, from) {
+      if (to.meta.isTabBar) {
+        const index = tabBar.list.findIndex(item => to.meta.pagePath === item.pagePath)
+        if (index > -1) {
+          this.selectedIndex = index
+        }
+      }
+    }
+  },
+  methods: {
+    _getRealPath (filePath) {
+      const SCHEME_RE = /^([a-z-]+:)?\/\//i
+      const DATA_RE = /^data:.*,.*/
+      if (!(SCHEME_RE.test(filePath) || DATA_RE.test(filePath)) && filePath.indexOf('/') !== 0) {
+        filePath = '/' + filePath
+      }
+      return getRealPath(filePath)
+    },
+    _switchTab ({
+      text,
+      pagePath
+    }, index) {
+      this.selectedIndex = index
+      let url = '/' + pagePath
+      if (url === __uniRoutes[0].alias) {
+        url = '/'
+      }
+      const detail = {
+        index,
+        text,
+        pagePath
+      }
+      this.$emit('onTabItemTap', detail)
+      if (this.$route.path === url) {
+        UniServiceJSBridge.emit('onTabItemTap', detail)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

packages/uni-h5/src/framework/components/app/index.css

-* {
-    margin: 0;
-    -webkit-tap-highlight-color: transparent;
-}
-
-@font-face {
-    font-weight: normal;
-    font-style: normal;
-    font-family: "uni";
-    src: url('data:application/octet-stream;base64,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') format('truetype');
-}
-
-@font-face {
-    font-weight: normal;
-    font-style: normal;
-    font-family: "unibtn";
-    src: url('data:application/octet-stream;base64,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') format('truetype')
-}
-
-html,
-body {
-    -webkit-user-select: none;
-    user-select: none;
-    width: 100%;
-    height: 100%;
-}
-
-/* html {
-	height: 100%
-} */
-
-body {
-    overflow-x: hidden;
-}
-
-[class^="uni-icon-"],
-[class*=" uni-icon-"] {
-    display: inline-block;
-    vertical-align: middle;
-    font: normal normal normal 14px/1 "uni";
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-}
-
-
-
-[class^="uni-btn-icon"],
-[class*=" uni-btn-icon"] {
-    display: inline-block;
-    font: normal normal normal 14px/1 "unibtn";
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-}
-
-[class^="uni-btn-icon"]:before,
-[class*=" uni-btn-icon"]:before {
-    margin: 0;
-    box-sizing: border-box;
-}
-
-.uni-icon-success-no-circle:before {
-    content: "\EA08";
-}
-
-.uni-loading,
-uni-button[loading]:before {
-    background: transparent url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=") no-repeat;
-}
-
-.uni-loading {
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    vertical-align: middle;
-    animation: uni-loading 1s steps(12, end) infinite;
-    background-size: 100%;
-}
-
-@keyframes uni-loading {
-    0% {
-        transform: rotate3d(0, 0, 1, 0deg);
-    }
-
-    100% {
-        transform: rotate3d(0, 0, 1, 360deg);
-    }
-}
-
-/*
-html,
-body,
-uni-app,
-uni-page {
-	height: 100%;
-} */
-
-.uni-mask {
-    position: fixed;
-    z-index: 999;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
-}
-
-
-
-
-.uni-fade-enter-active,
-.uni-fade-leave-active {
-    transition-duration: 0.25s;
-    transition-property: opacity;
-    transition-timing-function: ease;
-}
-
-.uni-fade-enter,
-.uni-fade-leave-active {
-    opacity: 0
-}
-
-[nvue] uni-view,
-[nvue] uni-swiper-item,
-[nvue] uni-scroll-view {
-    display: flex;
-    flex-shrink: 0;
-    flex-grow: 0;
-    flex-basis: auto;
-    align-items: stretch;
-    align-content: flex-start;
-}
-
-[nvue-dir-row] uni-view,
-[nvue-dir-row] uni-swiper-item {
-    flex-direction: row;
-}
-
-[nvue-dir-column] uni-view,
-[nvue-dir-column] uni-swiper-item {
-    flex-direction: column;
-}
-
-[nvue-dir-row-reverse] uni-view,
-[nvue-dir-row-reverse] uni-swiper-item {
-    flex-direction: row-reverse;
-}
-
-[nvue-dir-column-reverse] uni-view,
-[nvue-dir-column-reverse] uni-swiper-item {
-    flex-direction: column-reverse;
-}
-
-[nvue] uni-view,
-[nvue] uni-image,
-[nvue] uni-input,
-[nvue] uni-scroll-view,
-[nvue] uni-swiper,
-[nvue] uni-swiper-item,
-[nvue] uni-text,
-[nvue] uni-textarea,
-[nvue] uni-video {
-    position: relative;
-    border: 0px solid #000000;
-    box-sizing: border-box;
-}
-
-[nvue] uni-swiper-item {
-    position: absolute;
-}

packages/uni-h5/src/framework/components/app/index.ts

+import {
+  ref,
+  onMounted,
+  computed,
+  openBlock,
+  createBlock,
+  createVNode,
+  defineComponent,
+} from 'vue'
+
+import Layout from './layout'
+
+import { updateCssVar } from '../../../helpers/dom'
+
+const CSS_VARS = [
+  '--status-bar-height',
+  '--top-window-height',
+  '--window-left',
+  '--window-right',
+  '--window-margin',
+]
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    useCssVar()
+    useAppLifecycle()
+    const { appClass, onLayoutChange } = useAppClass()
+
+    return () => (
+      openBlock(),
+      createBlock(
+        'uni-app',
+        {
+          class: appClass.value,
+        },
+        [
+          createVNode(
+            Layout,
+            {
+              onChange: onLayoutChange,
+            },
+            null,
+            8 /* PROPS */,
+            ['onChange']
+          ),
+        ],
+        2 /* CLASS */
+      )
+    )
+  },
+})
+
+function useCssVar() {
+  CSS_VARS.forEach((name) => updateCssVar(name, '0px'))
+}
+
+function useAppLifecycle() {
+  onMounted(() => {
+    document.addEventListener('visibilitychange', function () {
+      if (document.visibilityState === 'visible') {
+        UniServiceJSBridge.emit('onAppEnterForeground')
+      } else {
+        UniServiceJSBridge.emit('onAppEnterBackground')
+      }
+    })
+  })
+}
+
+function useAppClass() {
+  const showTabBar = ref(false)
+  const showMaxWidth = ref(false)
+  function onLayoutChange(type: string, value: boolean) {
+    if (type === 'showTabBar') {
+      showTabBar.value = value
+    } else if (type === 'showMaxWidth') {
+      showMaxWidth.value = value
+    }
+  }
+  const appClass = computed(() => {
+    return {
+      'uni-app--showtabbar': showTabBar.value,
+      'uni-app--maxwidth': showMaxWidth.value,
+    }
+  })
+  return {
+    appClass,
+    onLayoutChange,
+  }
+}

packages/uni-h5/src/framework/components/app/index.vue

-<template>
-  <uni-app :class="{ 'uni-app--showtabbar': showTabBar }">
-    <!-- <transition :name="transitionName"> -->
-    <!-- TODO -->
-    <router-view v-slot="{ Component }">
-      <keep-alive :cache="routeCache">
-        <component :is="Component" :key="routeKey" />
-      </keep-alive>
-    </router-view>
-    <!-- </transition> -->
-    <tab-bar v-if="hasTabBar" v-show="showTabBar" v-bind="tabBar" />
-  </uni-app>
-</template>
-<script>
-import { isPlainObject } from '@vue/shared'
-
-import { TABBAR_HEIGHT } from '@dcloudio/uni-shared'
-
-import components from './components'
-
-import mixins from './popup/mixins'
-
-import { canIUse } from '../../../service/api'
-
-import { useKeepAliveRoute } from '../../plugin/page'
-
-export default {
-  name: 'App',
-  components,
-  mixins,
-  data() {
-    return {
-      transitionName: 'fade',
-      hideTabBar: false,
-      tabBar: __uniConfig.tabBar || {},
-      sysComponents: this.$sysComponents,
-    }
-  },
-  computed: {
-    key() {
-      return this.$route.path + '-' + (history.state.__id__ || 0)
-    },
-    hasTabBar() {
-      return (
-        __uniConfig.tabBar &&
-        __uniConfig.tabBar.list &&
-        __uniConfig.tabBar.list.length
-      )
-    },
-    showTabBar() {
-      return this.$route.meta.isTabBar && !this.hideTabBar
-    },
-  },
-  watch: {
-    $route(newRoute, oldRoute) {
-      UniServiceJSBridge.emit('onHidePopup')
-    },
-    hideTabBar(newVal, oldVal) {
-      // TODO 不支持 css 变量时
-      if (canIUse('css.var')) {
-        const windowBottomValue = !newVal ? TABBAR_HEIGHT : 0
-        const envMethod = canIUse('css.env')
-          ? 'env'
-          : canIUse('css.constant')
-          ? 'constant'
-          : ''
-        const windowBottom =
-          windowBottomValue && envMethod
-            ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))`
-            : `${windowBottomValue}px`
-        document.documentElement.style.setProperty(
-          '--window-bottom',
-          windowBottom
-        )
-        console.debug(
-          `uni.${
-            windowBottom ? 'showTabBar' : 'hideTabBar'
-          }：--window-bottom=${windowBottom}`
-        )
-      }
-      // 触发 resize 事件
-      window.dispatchEvent(new CustomEvent('resize'))
-    },
-  },
-  setup() {
-    const { routeKey, routeCache } = useKeepAliveRoute()
-    return {
-      routeKey,
-      routeCache,
-    }
-  },
-  created() {
-    if (canIUse('css.var')) {
-      document.documentElement.style.setProperty('--status-bar-height', '0px')
-    }
-  },
-  mounted() {
-    window.addEventListener('message', function (evt) {
-      if (
-        isPlainObject(evt.data) &&
-        evt.data.type === 'WEB_INVOKE_APPSERVICE'
-      ) {
-        UniServiceJSBridge.emit(
-          'onWebInvokeAppService',
-          evt.data.data,
-          evt.data.pageId
-        )
-      }
-    })
-    document.addEventListener('visibilitychange', function () {
-      if (document.visibilityState === 'visible') {
-        UniServiceJSBridge.emit('onAppEnterForeground')
-      } else {
-        UniServiceJSBridge.emit('onAppEnterBackground')
-      }
-    })
-  },
-}
-</script>

packages/uni-h5/src/framework/components/app/layout/index.ts

+import {
+  vShow,
+  withCtx,
+  Fragment,
+  KeepAlive,
+  openBlock,
+  mergeProps,
+  createBlock,
+  createVNode,
+  withDirectives,
+  defineComponent,
+  resolveComponent,
+  ConcreteComponent,
+  createCommentVNode,
+  resolveDynamicComponent,
+} from 'vue'
+
+import { RouteLocationNormalizedLoaded, RouterView, useRoute } from 'vue-router'
+
+import TabBar from '../tabBar'
+
+import { useKeepAliveRoute } from '../../../plugin/page'
+
+type KeepAliveRoute = ReturnType<typeof useKeepAliveRoute>
+
+export default defineComponent({
+  name: 'Layout',
+  emits: ['change'],
+  setup() {
+    const route = __UNI_FEATURE_TABBAR__ ? useRoute() : null
+    const keepAliveRoute = __UNI_FEATURE_PAGES__ ? useKeepAliveRoute() : null
+    const topWindow = __UNI_FEATURE_TOPWINDOW__ ? useTopWindow() : null
+    const leftWindow = __UNI_FEATURE_LEFTWINDOW__ ? useLeftWindow() : null
+    const rightWindow = __UNI_FEATURE_RIGHTWINDOW__ ? useRightWindow() : null
+    return () => {
+      return (
+        openBlock(),
+        createBlock(
+          Fragment,
+          null,
+          [
+            createLayoutVNode(
+              keepAliveRoute,
+              topWindow,
+              leftWindow,
+              rightWindow
+            ),
+            createTabBarVNode(route),
+          ],
+          64 /* STABLE_FRAGMENT */
+        )
+      )
+    }
+  },
+})
+
+function createLayoutVNode(
+  keepAliveRoute: KeepAliveRoute | null,
+  topWindow: unknown,
+  leftWindow: unknown,
+  rightWindow: unknown
+) {
+  const routerVNode = __UNI_FEATURE_PAGES__
+    ? createRouterViewVNode(keepAliveRoute!)
+    : createPageVNode()
+  // 非响应式
+  if (!__UNI_FEATURE_RESPONSIVE__) {
+    return routerVNode
+  }
+  const topWindowVNode = __UNI_FEATURE_TOPWINDOW__
+    ? createTopWindowVNode(topWindow)
+    : createCommentVNode('', true)
+  const leftWindowVNode = __UNI_FEATURE_LEFTWINDOW__
+    ? createLeftWindowVNode(leftWindow)
+    : createCommentVNode('', true)
+  const rightWindowVNode = __UNI_FEATURE_RIGHTWINDOW__
+    ? createRightWindowVNode(rightWindow)
+    : createCommentVNode('', true)
+  return createVNode('uni-layout', null, [
+    topWindowVNode,
+    createVNode('uni-content', null, [
+      createVNode('uni-main', null, [routerVNode]),
+      leftWindowVNode,
+      rightWindowVNode,
+    ]),
+  ])
+}
+
+function createTabBarVNode(route: RouteLocationNormalizedLoaded | null) {
+  return __UNI_FEATURE_TABBAR__
+    ? withDirectives(createVNode(TabBar, null, null, 512 /* NEED_PATCH */), [
+        [vShow, route!.meta.isTabBar], // TODO mediaQuery and api
+      ])
+    : createCommentVNode('', true)
+}
+
+function createPageVNode() {
+  return createVNode(__uniRoutes[1].component)
+}
+
+function createRouterViewVNode(
+  keepAliveRoute: ReturnType<typeof useKeepAliveRoute>
+) {
+  return createVNode(RouterView, null, {
+    default: withCtx(({ Component }) => [
+      (openBlock(),
+      createBlock(
+        KeepAlive,
+        { cache: keepAliveRoute.routeCache },
+        [
+          (openBlock(),
+          createBlock(resolveDynamicComponent(Component), {
+            key: keepAliveRoute.routeKey.value,
+          })),
+        ],
+        1032 /* PROPS, DYNAMIC_SLOTS */,
+        ['cache']
+      )),
+    ]),
+    _: 1 /* STABLE */,
+  })
+}
+
+function useTopWindow() {
+  const component = resolveComponent('VUniTopWindow') as ConcreteComponent
+  return {
+    component,
+    style: (component as any).style,
+    height: 0,
+    show: false,
+  }
+}
+function useLeftWindow() {
+  const component = resolveComponent('VUniLeftWindow') as ConcreteComponent
+  return {
+    component,
+    style: (component as any).style,
+    height: 0,
+  }
+}
+function useRightWindow() {
+  const component = resolveComponent('VUniRightWindow') as ConcreteComponent
+  return {
+    component,
+    style: (component as any).style,
+    height: 0,
+  }
+}
+
+function createTopWindowVNode(topWindow: unknown) {
+  if (!__UNI_FEATURE_TOPWINDOW__) {
+    return createCommentVNode('', true)
+  }
+  const { component, style, height, show } = useTopWindow()
+  return withDirectives(
+    createVNode(
+      'uni-top-window',
+      null,
+      [
+        createVNode(
+          'div',
+          {
+            ref: 'topWindow',
+            class: 'uni-top-window',
+            style,
+          },
+          [
+            createVNode(
+              component,
+              mergeProps(
+                {
+                  onVnodeMounted(vnode) {
+                    // update style.offsetHeight
+                  },
+                  'navigation-bar-title-text': '',
+                }
+                //bindWindow
+              ),
+              null,
+              16 /* FULL_PROPS */,
+              ['navigation-bar-title-text']
+            ),
+          ],
+          4 /* STYLE */
+        ),
+        createVNode(
+          'div',
+          {
+            class: 'uni-top-window--placeholder',
+            style: { height },
+          },
+          null,
+          4 /* STYLE */
+        ),
+      ],
+      512 /* NEED_PATCH */
+    ),
+    [[vShow, show]]
+  )
+}
+
+function createLeftWindowVNode(leftWindow: unknown) {}
+function createRightWindowVNode(leftWindow: unknown) {}

packages/uni-h5/src/framework/components/app/observable.js

+import Vue from 'vue'
+__uniConfig.tabBar = Vue.observable(__uniConfig.tabBar || {})
+export const tabBar = __uniConfig.tabBar

packages/uni-h5/src/framework/components/app/popup/actionSheet.vue

 <template>
-  <uni-actionsheet @touchmove.prevent.passive>
+  <uni-actionsheet @touchmove.prevent>
     <transition name="uni-fade">
-      <div
-        v-show="visible"
-        class="uni-mask"
-        @click="_close(-1)"
+      <div
+        v-show="visible"
+        class="uni-mask uni-actionsheet__mask"
+        @click="_close(-1)"
       />
     </transition>
-    <div
-      :class="{'uni-actionsheet_toggle':visible}"
-      class="uni-actionsheet"
+    <div
+      :class="{ 'uni-actionsheet_toggle': visible }"
+      :style="popupStyle.content"
+      class="uni-actionsheet"
     >
-      <div class="uni-actionsheet__menu">
-        <div
-          v-if="title"
-          class="uni-actionsheet__title"
+      <div
+        ref="main"
+        class="uni-actionsheet__menu"
+        @wheel="_handleWheel"
+      >
+        <!-- title占位 -->
+        <div
+          v-if="title"
+          class="uni-actionsheet__cell"
+          :style="{height:`${titleHeight}px`}"
+        />
+        <div
+          v-if="title"
+          class="uni-actionsheet__title"
         >
           {{ title }}
         </div>
-        <div
-          v-for="(itemTitle,index) in itemList"
-          :key="index"
-          :style="{color:itemColor}"
-          class="uni-actionsheet__cell"
-          @click="_close(index)"
-        >
-          {{ itemTitle }}
+        <div :style="{maxHeight:`${HEIGHT}px`,overflow:'hidden'}">
+          <div ref="content">
+            <div
+              v-for="(itemTitle, index) in itemList"
+              :key="index"
+              :style="{ color: itemColor }"
+              class="uni-actionsheet__cell"
+              @click="_close(index)"
+            >
+              {{ itemTitle }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="uni-actionsheet__action">
-        <div
-          :style="{color:itemColor}"
-          class="uni-actionsheet__cell"
-          @click="_close(-1)"
+        <div
+          :style="{ color: itemColor }"
+          class="uni-actionsheet__cell"
+          @click="_close(-1)"
         >
-          取消
+          {{ $$t('uni.showActionSheet.cancel') }}
         </div>
       </div>
+      <div :style="popupStyle.triangle" />
     </div>
+    <keypress
+      :disable="!visible"
+      @esc="_close(-1)"
+    />
   </uni-actionsheet>
 </template>
 <script>
+import popup from './mixins/popup'
+import keypress from '../../../helpers/keypress'
+import {
+  i18nMixin
+} from 'uni-core/helpers/i18n'
+import touchtrack from 'uni-mixins/touchtrack'
+import scroller from 'uni-mixins/scroller/index'
+import {
+  Friction
+} from 'uni-mixins/scroller/Friction'
+import {
+  Spring
+} from 'uni-mixins/scroller/Spring'
+import {
+  initScrollBounce,
+  disableScrollBounce
+} from 'uni-platform/helpers/scroll'
+
+// 由于模拟滚动阻止了点击，使用自定义事件来触发点击事件
+function initClick (dom) {
+  const MAX_MOVE = 20
+  let x = 0
+  let y = 0
+  dom.addEventListener('touchstart', (event) => {
+    const info = event.changedTouches[0]
+    x = info.clientX
+    y = info.clientY
+  })
+  dom.addEventListener('touchend', (event) => {
+    const info = event.changedTouches[0]
+    if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) {
+      const customEvent = new CustomEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        target: event.target,
+        currentTarget: event.currentTarget
+      });
+      ['screenX', 'screenY', 'clientX', 'clientY', 'pageX', 'pageY'].forEach(key => {
+        customEvent[key] = info[key]
+      })
+      event.target.dispatchEvent(customEvent)
+    }
+  })
+}
+
 export default {
   name: 'ActionSheet',
+  components: {
+    keypress
+  },
+  mixins: [i18nMixin, popup, touchtrack, scroller],
   props: {
     title: {
       type: String,
@@ -58,80 +127,209 @@ export default {
       type: String,
       default: '#000000'
     },
+    popover: {
+      type: Object,
+      default: null
+    },
     visible: {
       type: Boolean,
       default: false
     }
   },
+  data () {
+    return {
+      HEIGHT: 260,
+      contentHeight: 0,
+      titleHeight: 0,
+      deltaY: 0,
+      scrollTop: 0
+    }
+  },
+  watch: {
+    visible (newValue) {
+      if (newValue) {
+        this.$nextTick(() => {
+          // title 占位
+          if (this.title) {
+            this.titleHeight = document.querySelector('.uni-actionsheet__title').offsetHeight
+          }
+          // 滚动条更新
+          this._scroller.update()
+          // 获取contentHeight 滚动时使用
+          this.contentHeight = this.$refs.content.clientHeight - this.HEIGHT
+          // 给每一个项添加点击事件
+          document.querySelectorAll('.uni-actionsheet__cell').forEach(item => {
+            initClick(item)
+          })
+        })
+      }
+    }
+  },
+  mounted () {
+    // 模拟滚动使用
+    this.touchtrack(this.$refs.content, '_handleTrack', true)
+    this.$nextTick(() => {
+      this.initScroller(this.$refs.content, {
+        enableY: true,
+        friction: new Friction(0.0001),
+        spring: new Spring(2, 90, 20),
+        onScroll: (e) => {
+          this.scrollTop = e.target.scrollTop
+        }
+      })
+    })
+    initScrollBounce()
+  },
   methods: {
     _close (tapIndex) {
       this.$emit('close', tapIndex)
+    },
+    _handleTrack: function (e) {
+      if (this._scroller) {
+        switch (e.detail.state) {
+          case 'start':
+            this._handleTouchStart(e)
+            disableScrollBounce({
+              disable: true
+            })
+            break
+          case 'move':
+            this._handleTouchMove(e)
+            break
+          case 'end':
+          case 'cancel':
+            this._handleTouchEnd(e)
+            disableScrollBounce({
+              disable: false
+            })
+        }
+      }
+    },
+    _handleWheel ($event) {
+      const deltaY = this.deltaY + $event.deltaY
+      if (Math.abs(deltaY) > 10) {
+        this.scrollTop += deltaY / 3
+        this.scrollTop = this.scrollTop >= this.contentHeight
+          ? this.contentHeight
+          : this.scrollTop <= 0
+            ? 0
+            : this.scrollTop
+        this._scroller.scrollTo(this.scrollTop)
+      } else {
+        this.deltaY = deltaY
+      }
+      $event.preventDefault()
     }
   }
 }
 </script>
 <style>
-	uni-actionsheet {
-		display: block;
-		box-sizing: border-box;
-	}
-
-	uni-actionsheet .uni-actionsheet {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		transform: translate(0, 100%);
-		backface-visibility: hidden;
-		z-index: 999;
-		width: 100%;
-		background-color: #efeff4;
+  uni-actionsheet {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  uni-actionsheet .uni-actionsheet {
+    position: fixed;
+    left: 6px;
+    right: 6px;
+    bottom: 6px;
+    transform: translate(0, 100%);
+    backface-visibility: hidden;
+    z-index: 999;
     visibility: hidden;
-		transition: transform 0.3s, visibility 0.3s;
-	}
+    transition: transform 0.3s, visibility 0.3s;
+  }
 
-	uni-actionsheet .uni-actionsheet.uni-actionsheet_toggle {
+  uni-actionsheet .uni-actionsheet.uni-actionsheet_toggle {
     visibility: visible;
-		transform: translate(0, 0);
-	}
-
-	uni-actionsheet .uni-actionsheet * {
-		box-sizing: border-box;
-	}
-
-	uni-actionsheet .uni-actionsheet__menu {
-		background-color: #fcfcfd;
-	}
-
-	uni-actionsheet .uni-actionsheet__action {
-		margin-top: 6px;
-		background-color: #fcfcfd;
-	}
-
-	uni-actionsheet .uni-actionsheet__cell ,
-	uni-actionsheet .uni-actionsheet__title {
-		position: relative;
-		padding: 10px 0;
-		text-align: center;
-		font-size: 18px;
-	}
-	uni-actionsheet .uni-actionsheet__cell:before {
-		content: " ";
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		height: 1px;
-		border-top: 1px solid #e5e5e5;
-		color: #e5e5e5;
-		transform-origin: 0 0;
-		transform: scaleY(0.5);
-	}
-
-	uni-actionsheet .uni-actionsheet__cell:active {
-		background-color: #ececec;
-	}
-
-	uni-actionsheet .uni-actionsheet__cell:first-child:before {
-		display: none;
-	}
-</style>
+    transform: translate(0, 0);
+  }
+
+  uni-actionsheet .uni-actionsheet * {
+    box-sizing: border-box;
+  }
+
+  uni-actionsheet .uni-actionsheet__menu,
+  uni-actionsheet .uni-actionsheet__action {
+    border-radius: 5px;
+    background-color: #fcfcfd;
+  }
+
+  uni-actionsheet .uni-actionsheet__action {
+    margin-top: 6px;
+  }
+
+  uni-actionsheet .uni-actionsheet__cell,
+  uni-actionsheet .uni-actionsheet__title {
+    position: relative;
+    padding: 10px 6px;
+    text-align: center;
+    font-size: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  uni-actionsheet .uni-actionsheet__title {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 1px solid #e5e5e5;
+  }
+
+  uni-actionsheet .uni-actionsheet__cell:before {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px solid #e5e5e5;
+    color: #e5e5e5;
+    transform-origin: 0 0;
+    transform: scaleY(0.5);
+  }
+
+  uni-actionsheet .uni-actionsheet__cell:active {
+    background-color: #ececec;
+  }
+
+  uni-actionsheet .uni-actionsheet__cell:first-child:before {
+    display: none;
+  }
+
+  @media screen and (min-width: 500px) and (min-height: 500px) {
+    .uni-mask.uni-actionsheet__mask {
+      background: none;
+    }
+
+    uni-actionsheet .uni-actionsheet {
+      width: 300px;
+      left: 50%;
+      right: auto;
+      top: 50%;
+      bottom: auto;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      transition: opacity 0.3s, visibility 0.3s;
+    }
+
+    uni-actionsheet .uni-actionsheet.uni-actionsheet_toggle {
+      opacity: 1;
+      transform: translate(-50%, -50%);
+    }
+
+    uni-actionsheet .uni-actionsheet__menu {
+      box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
+    }
+
+    uni-actionsheet .uni-actionsheet__action {
+      display: none;
+    }
+  }
+</style>

packages/uni-h5/src/framework/components/app/popup/index.js

-import Toast from './toast.vue'
-import Modal from './modal.vue'
-import ActionSheet from './actionSheet.vue'
-
-export default {
-  Toast,
-  Modal,
-  ActionSheet
-}
+import Toast from './toast'
+import Modal from './modal'
+import ActionSheet from './actionSheet'
+
+export default {
+  Toast,
+  Modal,
+  ActionSheet,
+}

packages/uni-h5/src/framework/components/app/popup/mixins/action-sheet.js

-import { isFunction } from '@vue/shared'
-
-export default {
-  data() {
-    return {
-      showActionSheet: {
-        visible: false
-      }
-    }
-  },
-  created() {
-    UniServiceJSBridge.on('onShowActionSheet', (args, callback) => {
-      this.showActionSheet = args
-      this.onActionSheetCloseCallback = callback
-    })
-    UniServiceJSBridge.on('onHidePopup', args => {
-      this.showActionSheet.visible = false
-    })
-  },
-  methods: {
-    // 处理 actionSheet close 回调
-    _onActionSheetClose(type) {
-      this.showActionSheet.visible = false
-      isFunction(this.onActionSheetCloseCallback) &&
-        this.onActionSheetCloseCallback(type)
-    }
-  }
-}
+import { isFn } from 'uni-shared'
+
+export default {
+  data() {
+    return {
+      showActionSheet: {
+        visible: false,
+      },
+    }
+  },
+  created() {
+    UniServiceJSBridge.on('onShowActionSheet', (args, callback) => {
+      this.showActionSheet = args
+      this.onActionSheetCloseCallback = callback
+    })
+    UniServiceJSBridge.on('onHidePopup', (args) => {
+      this.showActionSheet.visible = false
+    })
+  },
+  methods: {
+    // 处理 actionSheet close 回调
+    _onActionSheetClose(type) {
+      this.showActionSheet.visible = false
+      isFn(this.onActionSheetCloseCallback) &&
+        this.onActionSheetCloseCallback(type)
+    },
+  },
+}

packages/uni-h5/src/framework/components/app/popup/mixins/index.js

-import ActionSheet from './action-sheet'
-import Modal from './modal'
-import Toast from './toast'
-import Transtion from './transition'
-export default [ActionSheet, Modal, Toast, Transtion]
+const mixins = []
+const context = require.context('./', false, /\.js$/)
+context.keys().forEach(function (key) {
+  if (key !== './index.js') {
+    mixins.push(context(key).default)
+  }
+})
+export default mixins

packages/uni-h5/src/framework/components/app/popup/mixins/modal.js

-import { isFunction } from '@vue/shared'
-
-export default {
-  data() {
-    return {
-      showModal: {
-        visible: false
-      }
-    }
-  },
-  created() {
-    UniServiceJSBridge.on('onShowModal', (args, callback) => {
-      this.showModal = args
-      this.onModalCloseCallback = callback
-    })
-    UniServiceJSBridge.on('onHidePopup', args => {
-      this.showModal.visible = false
-    })
-  },
-  methods: {
-    // 处理 modal close 回调
-    _onModalClose(type) {
-      this.showModal.visible = false
-      isFunction(this.onModalCloseCallback) && this.onModalCloseCallback(type)
-    }
-  }
-}
+import { isFn } from 'uni-shared'
+
+export default {
+  data() {
+    return {
+      showModal: {
+        visible: false,
+      },
+    }
+  },
+  created() {
+    UniServiceJSBridge.on('onShowModal', (args, callback) => {
+      this.showModal = args
+      this.onModalCloseCallback = callback
+    })
+    UniServiceJSBridge.on('onHidePopup', (args) => {
+      this.showModal.visible = false
+    })
+  },
+  methods: {
+    // 处理 modal close 回调
+    _onModalClose(type) {
+      this.showModal.visible = false
+      isFn(this.onModalCloseCallback) && this.onModalCloseCallback(type)
+    },
+  },
+}

packages/uni-h5/src/framework/components/app/popup/mixins/popup.js

+export default {
+  data() {
+    return {
+      popupWidth: 0,
+      popupHeight: 0,
+    }
+  },
+  computed: {
+    isDesktop() {
+      return this.popupWidth >= 500 && this.popupHeight >= 500
+    },
+    popupStyle() {
+      const style = {}
+      const contentStyle = (style.content = {})
+      const triangleStyle = (style.triangle = {})
+      const popover = this.popover
+      function getNumber(value) {
+        return Number(value) || 0
+      }
+      if (this.isDesktop && popover) {
+        Object.assign(triangleStyle, {
+          position: 'absolute',
+          width: '0',
+          height: '0',
+          'margin-left': '-6px',
+          'border-style': 'solid',
+        })
+        const popoverLeft = getNumber(popover.left)
+        const popoverWidth = getNumber(popover.width)
+        const popoverTop = getNumber(popover.top)
+        const popoverHeight = getNumber(popover.height)
+        const center = popoverLeft + popoverWidth / 2
+        contentStyle.transform = 'none !important'
+        const contentLeft = Math.max(0, center - 300 / 2)
+        contentStyle.left = `${contentLeft}px`
+        let triangleLeft = Math.max(12, center - contentLeft)
+        triangleLeft = Math.min(300 - 12, triangleLeft)
+        triangleStyle.left = `${triangleLeft}px`
+        const vcl = this.popupHeight / 2
+        if (popoverTop + popoverHeight - vcl > vcl - popoverTop) {
+          contentStyle.top = 'auto'
+          contentStyle.bottom = `${this.popupHeight - popoverTop + 6}px`
+          triangleStyle.bottom = '-6px'
+          triangleStyle['border-width'] = '6px 6px 0 6px'
+          triangleStyle['border-color'] =
+            '#fcfcfd transparent transparent transparent'
+        } else {
+          contentStyle.top = `${popoverTop + popoverHeight + 6}px`
+          triangleStyle.top = '-6px'
+          triangleStyle['border-width'] = '0 6px 6px 6px'
+          triangleStyle['border-color'] =
+            'transparent transparent #fcfcfd transparent'
+        }
+      }
+      return style
+    },
+  },
+  mounted() {
+    const fixSize = () => {
+      const { windowWidth, windowHeight, windowTop } = uni.getSystemInfoSync()
+      this.popupWidth = windowWidth
+      this.popupHeight = windowHeight + windowTop
+    }
+    window.addEventListener('resize', fixSize)
+    fixSize()
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('resize', fixSize)
+    })
+  },
+}

packages/uni-h5/src/framework/components/app/popup/mixins/toast.js

-export default {
-  data() {
-    return {
-      showToast: {
-        visible: false
-      }
-    }
-  },
-  created() {
-    let showType = ''
-
-    const createOnShow = type => {
-      return args => {
-        showType = type
-        setTimeout(() => {
-          // 延迟一下 show 可解决窗口打开前调用 showToast 在 onHidePopup 之后触发
-          this.showToast = args
-        }, 10)
-      }
-    }
-
-    UniServiceJSBridge.on('onShowToast', createOnShow('onShowToast'))
-    UniServiceJSBridge.on('onShowLoading', createOnShow('onShowLoading'))
-
-    const createOnHide = type => {
-      return () => {
-        if (!showType) {
-          return
-        }
-        let warnMsg = ''
-        if (type === 'onHideToast' && showType !== 'onShowToast') {
-          warnMsg = '请注意 showToast 与 hideToast 必须配对使用'
-        } else if (type === 'onHideLoading' && showType !== 'onShowLoading') {
-          warnMsg = '请注意 showLoading 与 hideLoading 必须配对使用'
-        }
-        if (warnMsg) {
-          return console.warn(warnMsg)
-        }
-        showType = ''
-        setTimeout(() => {
-          // 与 show 对应延迟10ms，避免快速调用 show，hide 导致无法关闭
-          this.showToast.visible = false
-        }, 10)
-      }
-    }
-
-    UniServiceJSBridge.on('onHidePopup', createOnHide('onHidePopup'))
-    UniServiceJSBridge.on('onHideToast', createOnHide('onHideToast'))
-    UniServiceJSBridge.on('onHideLoading', createOnHide('onHideLoading'))
-  }
-}
+import { t } from 'uni-core/helpers/i18n'
+export default {
+  data() {
+    return {
+      showToast: {
+        visible: false,
+      },
+    }
+  },
+  created() {
+    let showType = ''
+
+    const createOnShow = (type) => {
+      return (args) => {
+        showType = type
+        setTimeout(() => {
+          // 延迟一下 show 可解决窗口打开前调用 showToast 在 onHidePopup 之后触发
+          this.showToast = args
+        }, 10)
+      }
+    }
+
+    UniServiceJSBridge.on('onShowToast', createOnShow('onShowToast'))
+    UniServiceJSBridge.on('onShowLoading', createOnShow('onShowLoading'))
+
+    const createOnHide = (type) => {
+      return () => {
+        if (!showType) {
+          return
+        }
+        let warnMsg = ''
+        if (type === 'onHideToast' && showType !== 'onShowToast') {
+          warnMsg = t('uni.showToast.unpaired')
+        } else if (type === 'onHideLoading' && showType !== 'onShowLoading') {
+          warnMsg = t('uni.showLoading.unpaired')
+        }
+        if (warnMsg) {
+          return console.warn(warnMsg)
+        }
+        showType = ''
+        setTimeout(() => {
+          // 与 show 对应延迟10ms，避免快速调用 show，hide 导致无法关闭
+          this.showToast.visible = false
+        }, 10)
+      }
+    }
+
+    UniServiceJSBridge.on('onHidePopup', createOnHide('onHidePopup'))
+    UniServiceJSBridge.on('onHideToast', createOnHide('onHideToast'))
+    UniServiceJSBridge.on('onHideLoading', createOnHide('onHideLoading'))
+  },
+}

packages/uni-h5/src/framework/components/app/popup/mixins/transition.js

-export default {
-  methods: {
-    beforeTransition() {},
-    afterTransition() {}
-  }
-}
+export default {
+  methods: {
+    beforeTransition() {},
+    afterTransition() {},
+  },
+}

packages/uni-h5/src/framework/components/app/popup/modal.vue

@@ -2,7 +2,7 @@
   <transition name="uni-fade">
     <uni-modal
       v-show="visible"
-      @touchmove.prevent.passive
+      @touchmove.prevent
     >
       <div class="uni-mask" />
       <div class="uni-modal">
@@ -17,7 +17,7 @@
         </div>
         <div
           class="uni-modal__bd"
-          @touchmove.stop.passive
+          @touchmove.stop
           v-text="content"
         />
         <div class="uni-modal__ft">
@@ -38,13 +38,21 @@
           </div>
         </div>
       </div>
+      <keypress
+        :disable="!visible"
+        @esc="_close('cancel')"
+        @enter="_close('confirm')"
+      />
     </uni-modal>
   </transition>
 </template>
 <script>
 import transition from './mixins/transition'
+import keypress from '../../../helpers/keypress'
+
 export default {
   name: 'Modal',
+  components: { keypress },
   mixins: [transition],
   props: {
     title: {
@@ -61,7 +69,7 @@ export default {
     },
     cancelText: {
       type: String,
-      default: '取消'
+      default: 'Cancel'
     },
     cancelColor: {
       type: String,
@@ -69,7 +77,7 @@ export default {
     },
     confirmText: {
       type: String,
-      default: '确定'
+      default: 'OK'
     },
     confirmColor: {
       type: String,
@@ -144,6 +152,7 @@ export default {
 		white-space: pre-wrap;
 		color: #999999;
 		max-height: 400px;
+		overflow-x: hidden;
 		overflow-y: auto;
 	}
 
@@ -174,6 +183,7 @@ export default {
 		text-decoration: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		position: relative;
+		cursor: pointer;
 	}
 
 	uni-modal .uni-modal__btn:active {

packages/uni-h5/src/framework/components/app/popup/toast.vue

@@ -8,7 +8,7 @@
         v-if="mask"
         class="uni-mask"
         style="background: transparent;"
-        @touchmove.prevent.passive
+        @touchmove.prevent
       />
       <div
         v-if="!image&&!iconClass"
@@ -104,6 +104,7 @@ uni-toast {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
+  font-size: 16px;
 }
 
 uni-toast .uni-sample-toast {

packages/uni-h5/src/framework/components/app/tabBar.ts

+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'TabBar',
+})

packages/uni-h5/src/framework/components/app/tabBar.vue

 <template>
-  <uni-tabbar>
+  <uni-tabbar :class="['uni-tabbar-'+position]">
     <div
-      :style="{backgroundColor:backgroundColor}"
+      :style="{
+        backgroundColor:tabbarBackgroundColor,
+        'backdrop-filter':blurEffect !== 'none' ? 'blur(10px)' : blurEffect
+      }"
       class="uni-tabbar"
     >
       <div
@@ -10,18 +13,37 @@
       />
       <div
         v-for="(item,index) in list"
-        :key="item.pagePath"
+        :key="item.isMidButton ? index : item.pagePath"
+        :style="item.isMidButton ? {flex:'0 0 ' + item.width,position:'relative'} : {}"
         class="uni-tabbar__item"
         @click="_switchTab(item,index)"
       >
-        <div class="uni-tabbar__bd">
-          <div
+        <!-- midButton iconPath -->
+        <div
+          v-if="item.isMidButton"
+          class="uni-tabbar__mid"
+          :style="_uniTabbarBdStyle(item)"
+        >
+          <img
             v-if="item.iconPath"
+            :style="{width: item.iconWidth,height:item.iconWidth}"
+            :src="_getRealPath(item.iconPath)"
+          >
+        </div>
+        <!-- tabbar button -->
+        <div
+          class="uni-tabbar__bd"
+          :style="{height:height}"
+        >
+          <div
+            v-if="item.iconPath || item.isMidButton"
             :class="{'uni-tabbar__icon__diff':!item.text}"
             class="uni-tabbar__icon"
+            :style="{width: iconWidth,height:iconWidth}"
           >
             <img
-              :src="_getRealPath($route.meta.pagePath===item.pagePath?item.selectedIconPath:item.iconPath)"
+              v-if="!item.isMidButton"
+              :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)"
             >
             <div
               v-if="item.redDot"
@@ -33,7 +55,12 @@
           </div>
           <div
             v-if="item.text"
-            :style="{color:$route.meta.pagePath===item.pagePath?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
+            :style="{
+              color:selectedIndex === index ? selectedColor : color,
+              fontSize: fontSize,
+              lineHeight: !item.iconPath ? 1.8 : 'normal',
+              marginTop: !item.iconPath ? 'inherit' : spacing
+            }"
             class="uni-tabbar__label"
           >
             {{ item.text }}
@@ -48,130 +75,154 @@
         </div>
       </div>
     </div>
-    <div class="uni-placeholder" />
+    <div
+      class="uni-placeholder"
+      :style="{height:height}"
+    />
   </uni-tabbar>
 </template>
 
 <style>
-uni-tabbar {
-  display: block;
-  box-sizing: border-box;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 998;
-}
+  uni-tabbar {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 998;
+  }
 
-uni-tabbar .uni-tabbar {
-  display: flex;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 998;
-  box-sizing: border-box;
-  padding-bottom: 0;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-}
+  uni-tabbar .uni-tabbar {
+    display: flex;
+    z-index: 998;
+    box-sizing: border-box;
+  }
 
-uni-tabbar .uni-tabbar ~ .uni-placeholder {
-  width: 100%;
-  height: 50px;
-  margin-bottom: 0;
-  margin-bottom: constant(safe-area-inset-bottom);
-  margin-bottom: env(safe-area-inset-bottom);
-}
+  uni-tabbar.uni-tabbar-top,
+  uni-tabbar.uni-tabbar-bottom,
+  uni-tabbar.uni-tabbar-top .uni-tabbar,
+  uni-tabbar.uni-tabbar-bottom .uni-tabbar {
+    position: fixed;
+    left: var(--window-left);
+    right: var(--window-right);
+  }
 
-uni-tabbar .uni-tabbar * {
-  box-sizing: border-box;
-}
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-top,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-bottom,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-top .uni-tabbar,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-bottom .uni-tabbar {
+    left: var(--window-margin);
+    right: var(--window-margin);
+  }
 
-uni-tabbar .uni-tabbar__item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  flex: 1;
-  font-size: 0;
-  text-align: center;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
+  uni-tabbar.uni-tabbar-bottom .uni-tabbar {
+    bottom: 0;
+    padding-bottom: 0;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 
-uni-tabbar .uni-tabbar__bd {
-  position: relative;
-  height: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
+  uni-tabbar .uni-tabbar~.uni-placeholder {
+    width: 100%;
+    margin-bottom: 0;
+    margin-bottom: constant(safe-area-inset-bottom);
+    margin-bottom: env(safe-area-inset-bottom);
+  }
 
-uni-tabbar .uni-tabbar__icon {
-  position: relative;
-  display: inline-block;
-  margin-top: 5px;
-  width: 24px;
-  height: 24px;
-}
+  uni-tabbar .uni-tabbar * {
+    box-sizing: border-box;
+  }
 
-uni-tabbar .uni-tabbar__icon.uni-tabbar__icon__diff {
-  margin-top: 0px;
-  width: 34px;
-  height: 34px;
-}
+  uni-tabbar .uni-tabbar__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex: 1;
+    font-size: 0;
+    text-align: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
 
-uni-tabbar .uni-tabbar__icon img {
-  width: 100%;
-  height: 100%;
-}
+  uni-tabbar .uni-tabbar__bd {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
 
-uni-tabbar .uni-tabbar__label {
-  position: relative;
-  text-align: center;
-  font-size: 10px;
-  line-height: 1.8;
-}
+  uni-tabbar .uni-tabbar__icon {
+    position: relative;
+    display: inline-block;
+    margin-top: 5px;
+  }
 
-uni-tabbar .uni-tabbar-border {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 1px;
-  transform: scaleY(0.5);
-}
+  uni-tabbar .uni-tabbar__icon.uni-tabbar__icon__diff {
+    margin-top: 0px;
+    width: 34px;
+    height: 34px;
+  }
 
-uni-tabbar .uni-tabbar__reddot {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: #f43530;
-  color: #ffffff;
-  transform: translate(40%, -20%);
-}
+  uni-tabbar .uni-tabbar__icon img {
+    width: 100%;
+    height: 100%;
+  }
 
-uni-tabbar .uni-tabbar__badge {
-  width: auto;
-  height: 16px;
-  line-height: 16px;
-  border-radius: 16px;
-  min-width: 16px;
-  padding: 0 2px;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-</style>
+  uni-tabbar .uni-tabbar__label {
+    position: relative;
+    text-align: center;
+    font-size: 10px;
+  }
 
-<script>
+  uni-tabbar .uni-tabbar-border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleY(0.5);
+  }
+
+  uni-tabbar .uni-tabbar__reddot {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #f43530;
+    color: #ffffff;
+    transform: translate(40%, -20%);
+  }
 
+  uni-tabbar .uni-tabbar__badge {
+    width: auto;
+    height: 16px;
+    line-height: 16px;
+    border-radius: 16px;
+    min-width: 16px;
+    padding: 0 2px;
+    font-size: 12px;
+    text-align: center;
+    white-space: nowrap;
+  }
 
+  uni-tabbar .uni-tabbar__mid {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    background-size: 100% 100%;
+  }
+</style>
+
+<script>
+import getRealPath from 'uni-platform/helpers/get-real-path'
+import { isPlainObject } from 'uni-shared'
+import { publish } from 'uni-platform/service/bridge'
+function cssSupports (css) {
+  return window.CSS && CSS.supports && (CSS.supports(css) || CSS.supports.apply(CSS, css.split(':')))
+}
 export default {
   name: 'TabBar',
   props: {
@@ -191,49 +242,119 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: '#f7f7fa'
+      default: ''
     },
     borderStyle: {
-      default: 'black',
-      validator (value) {
-        return ['black', 'white'].indexOf(value) !== -1
-      }
+      type: String,
+      default: 'black'
     },
     list: {
       type: Array,
       default: function () {
         return []
       }
+    },
+    matchMedia: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    blurEffect: {
+      type: String,
+      default: 'none'
+    },
+    fontSize: {
+      type: String,
+      default: '10px'
+    },
+    iconWidth: {
+      type: String,
+      default: '24px'
+    },
+    spacing: {
+      type: String,
+      default: '3px'
+    },
+    height: {
+      type: String,
+      default: '50px'
+    },
+    midButton: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      selectedIndex: 0
     }
   },
   computed: {
+    tabbarBackgroundColor () {
+      // 背景色 区分 高斯模糊 分别返回
+      const DefaultBgColor = '#f7f7fa'
+
+      if (this.backgroundColor) return this.backgroundColor
+
+      if (cssSupports('backdrop-filter:blur(10px)') && this.blurEffect !== 'none') {
+        if (this.blurEffect === 'dark') {
+          return 'rgb(0, 0, 0, 0.8)'
+        }
+
+        if (['light', 'extralight'].includes(this.blurEffect)) {
+          return 'rgb(250, 250, 250, 0.8)'
+        }
+      }
+
+      return DefaultBgColor
+    },
     borderColor () {
-      return this.borderStyle === 'white'
-        ? 'rgba(255, 255, 255, 0.33)'
-        : 'rgba(0, 0, 0, 0.33)'
+      // 不再限制可配置颜色值
+      if (this.borderStyle === 'white') return 'rgba(255, 255, 255, 0.33)'
+      if (this.borderStyle === 'black') return 'rgba(0, 0, 0, 0.33)'
+      return this.borderStyle
     }
   },
   watch: {
-    '$route' (to, from) {
-      if (to.meta.isTabBar) {
-        this.__path__ = to.path
+    $route: {
+      immediate: true,
+      handler (to) {
+        if (to.meta.isTabBar) {
+          this.__path__ = to.path
+          const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
+          if (index > -1) {
+            this.selectedIndex = index
+          }
+        }
       }
     }
   },
+  created () {
+    this._initMidButton()
+  },
   beforeCreate () {
     this.__path__ = this.$route.path
   },
   methods: {
     _getRealPath (filePath) {
-      if (filePath.indexOf('/') !== 0) {
+      const SCHEME_RE = /^([a-z-]+:)?\/\//i
+      const DATA_RE = /^data:.*,.*/
+      if (!(SCHEME_RE.test(filePath) || DATA_RE.test(filePath)) && filePath.indexOf('/') !== 0) {
         filePath = '/' + filePath
       }
-      return this.$getRealPath(filePath)
+      return getRealPath(filePath)
     },
     _switchTab ({
       text,
-      pagePath
+      pagePath,
+      isMidButton = false
     }, index) {
+      if (isMidButton) {
+        publish('onTabBarMidButtonTap')
+        return
+      }
+      this.selectedIndex = index
       let url = '/' + pagePath
       if (url === __uniRoutes[0].alias) {
         url = '/'
@@ -253,6 +374,29 @@ export default {
       } else {
         UniServiceJSBridge.emit('onTabItemTap', detail)
       }
+    },
+    _initMidButton () {
+      const listLength = this.list.length
+      // 偶数则添加midButton
+      if (listLength % 2 === 0 && isPlainObject(this.midButton)) {
+        // 给midButton赋值默认值
+        const DefaultMidButton = {
+          width: '50px',
+          height: '50px',
+          iconWidth: '24px'
+        }
+        for (const key in DefaultMidButton) {
+          this.midButton[key] = this.midButton[key] || DefaultMidButton[key]
+        }
+        this.list.splice(~~(listLength / 2), 0, Object.assign({}, this.midButton, { isMidButton: true }))
+      }
+    },
+    _uniTabbarBdStyle (item) {
+      return Object.assign({}, {
+        width: item.width,
+        height: item.height,
+        backgroundImage: item.backgroundImage ? 'url(\'' + this._getRealPath(item.backgroundImage) + '\')' : ''
+      })
     }
   }
 }

packages/uni-h5/src/framework/components/app/test.vue

+<template>
+  <uni-layout>
+    <uni-top-window> </uni-top-window>
+    <uni-content>
+      <uni-main>
+        <keep-alive>
+          <router-view />
+        </keep-alive>
+      </uni-main>
+    </uni-content>
+  </uni-layout>
+</template>
+

packages/uni-h5/src/framework/components/async-error/index.vue

 <template>
-  <div class="uni-async-error" @click="_onClick">
-    连接服务器超时，点击屏幕重试
+  <div
+    class="uni-async-error"
+    @click="_onClick"
+  >
+    {{ $$t("uni.async.error") }}
   </div>
 </template>
 <style>
-.uni-async-error {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: #999;
-  padding: 100px 0;
-  text-align: center;
-}
+	.uni-async-error {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		color: #999;
+		padding: 100px 10px;
+		text-align: center;
+	}
 </style>
 <script>
+import {
+  i18nMixin
+} from '@dcloudio/uni-core/helpers/i18n'
+
 export default {
   name: 'AsyncError',
+  mixins: [i18nMixin],
   methods: {
-    _onClick() {
+    _onClick () {
       // TODO 临时采用 reload
       window.location.reload()
-    },
-  },
+    }
+  }
 }
 </script>

packages/uni-h5/src/framework/components/async-loading/index.vue

@@ -4,20 +4,20 @@
   </div>
 </template>
 <style>
-.uni-async-loading {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 50px;
-  text-align: center;
-}
+	.uni-async-loading {
+    box-sizing: border-box;
+		width: 100%;
+		padding: 50px;
+		text-align: center;
+	}
 
-.uni-async-loading .uni-loading {
-  width: 30px;
-  height: 30px;
-}
+	.uni-async-loading .uni-loading {
+		width: 30px;
+		height: 30px;
+	}
 </style>
 <script>
 export default {
-  name: 'AsyncLoading',
+  name: 'AsyncLoading'
 }
-</script>
+</script>

packages/uni-h5/src/framework/components/page/append-css.js

-export function appendCss(css, cssId, replace = false) {
-  let style = document.getElementById(cssId)
-  if (style && replace) {
-    style.parentNode.removeChild(style)
-    style = null
-  }
-  if (!style) {
-    style = document.createElement('style')
-    style.type = 'text/css'
-    cssId && (style.id = cssId)
-    document.getElementsByTagName('head')[0].appendChild(style)
-  }
-  style.appendChild(document.createTextNode(css))
-}

packages/uni-h5/src/framework/components/page/index.vue

 <template>
-  <uni-page :data-page="$route.meta.pagePath">
-    <page-head v-if="navigationBar.type!=='none'" v-bind="navigationBar" />
+  <uni-page>
+    <page-head v-if="navigationBar.type !== 'none'" v-bind="navigationBar" />
     <page-refresh
       v-if="enablePullDownRefresh"
       ref="refresh"
@@ -9,10 +9,10 @@
     />
     <page-body
       v-if="enablePullDownRefresh"
-      @touchstart.native.passive="_touchstart"
-      @touchmove.native.passive="_touchmove"
-      @touchend.native.passive="_touchend"
-      @touchcancel.native.passive="_touchend"
+      @touchstart.native="_touchstart"
+      @touchmove.native="_touchmove"
+      @touchend.native="_touchend"
+      @touchcancel.native="_touchend"
     >
       <slot name="page" />
     </page-body>
@@ -29,17 +29,11 @@ uni-page {
 }
 </style>
 <script>
-import {
-  NAVBAR_HEIGHT
-} from '@dcloudio/uni-shared'
+import { NAVBAR_HEIGHT } from '@dcloudio/uni-shared'
 
-import {
-  isPlainObject
-} from '@vue/shared'
+import { isPlainObject } from '@vue/shared'
 
-import {
-  mergeTitleNView
-} from './merge-title-nview'
+import { mergeTitleNView } from './merge-title-nview'
 
 import PageHead from './pageHead.vue'
 import PageBody from './pageBody.vue'
@@ -54,163 +48,182 @@ export default {
   components: {
     PageHead,
     PageBody,
-    PageRefresh
+    PageRefresh,
   },
   mixins: [pullToRefresh],
   props: {
     isQuit: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isEntry: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isTabBar: {
       type: Boolean,
-      default: false
+      default: false,
     },
     tabBarIndex: {
       type: Number,
-      default: -1
+      default: -1,
     },
     navigationBarBackgroundColor: {
       type: String,
-      default: '#000'
+      default: '#000',
     },
     navigationBarTextStyle: {
       default: 'white',
-      validator (value) {
+      validator(value) {
         return ['white', 'black'].indexOf(value) !== -1
-      }
+      },
     },
     navigationBarTitleText: {
       type: String,
-      default: ''
+      default: '',
     },
     navigationStyle: {
       default: 'default',
-      validator (value) {
+      validator(value) {
         return ['default', 'custom'].indexOf(value) !== -1
-      }
+      },
     },
     backgroundColor: {
       type: String,
-      default: '#ffffff'
+      default: '#ffffff',
     },
     backgroundTextStyle: {
       default: 'dark',
-      validator (value) {
+      validator(value) {
         return ['dark', 'light'].indexOf(value) !== -1
-      }
+      },
     },
     backgroundColorTop: {
       type: String,
-      default: '#fff'
+      default: '#fff',
     },
     backgroundColorBottom: {
       type: String,
-      default: '#fff'
+      default: '#fff',
     },
     enablePullDownRefresh: {
       type: Boolean,
-      default: false
+      default: false,
     },
     onReachBottomDistance: {
       type: Number,
-      default: 50
+      default: 50,
     },
     disableScroll: {
       type: Boolean,
-      default: false
+      default: false,
     },
     titleNView: {
       type: [Boolean, Object, String],
-      default: ''
+      default: '',
     },
     pullToRefresh: {
       type: Object,
-      default () {
+      default() {
         return {}
-      }
+      },
     },
     titleImage: {
       type: String,
-      default: ''
+      default: '',
     },
     transparentTitle: {
       type: String,
-      default: ''
+      default: '',
     },
     titlePenetrate: {
       type: String,
-      default: 'NO'
+      default: 'NO',
     },
     navigationBarShadow: {
       type: Object,
-      default () {
+      default() {
         return {}
-      }
-    }
+      },
+    },
+    topWindow: {
+      type: Boolean,
+      default: true,
+    },
   },
-  data () {
+  data() {
+    // 目前简单处理，存在topWindow时，始终不显示page head
+    let navigationBar = {}
     const titleNViewTypeList = {
       none: 'default',
       auto: 'transparent',
-      always: 'float'
+      always: 'float',
     }
     // 将 navigationStyle 和 transparentTitle 都合并到 titleNView
     let titleNView = this.titleNView
-    if ( // 无头
+    if (
+      // 无头
       titleNView === false ||
-        titleNView === 'false' ||
-        (
-          this.navigationStyle === 'custom' &&
-          !isPlainObject(titleNView)
-        ) || (
-        this.transparentTitle === 'always' &&
-          !isPlainObject(titleNView)
-      )
+      titleNView === 'false' ||
+      (this.navigationStyle === 'custom' && !isPlainObject(titleNView)) ||
+      (this.transparentTitle === 'always' && !isPlainObject(titleNView))
     ) {
       titleNView = {
-        type: 'none'
+        type: 'none',
       }
     } else {
-      titleNView = Object.assign({}, {
-        type: this.navigationStyle === 'custom' ? 'none' : 'default'
-      }, this.transparentTitle in titleNViewTypeList ? {
-        type: titleNViewTypeList[this.transparentTitle]
-      } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
-        type: titleNView ? 'default' : 'none'
-      } : null))
+      titleNView = Object.assign(
+        {},
+        {
+          type: this.navigationStyle === 'custom' ? 'none' : 'default',
+        },
+        this.transparentTitle in titleNViewTypeList
+          ? {
+              type: titleNViewTypeList[this.transparentTitle],
+            }
+          : null,
+        typeof titleNView === 'object'
+          ? titleNView
+          : typeof titleNView === 'boolean'
+          ? {
+              type: titleNView ? 'default' : 'none',
+            }
+          : null
+      )
     }
 
     const yesNoParseList = {
       YES: true,
-      NO: false
+      NO: false,
     }
 
-    const navigationBar = mergeTitleNView({
-      loading: false,
-      backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
-      backgroundColor: this.navigationBarBackgroundColor,
-      textColor: this.navigationBarTextStyle === 'black' ? '#000' : '#fff',
-      titleText: this.navigationBarTitleText,
-      titleImage: this.titleImage,
-      duration: '0',
-      timingFunc: '',
-      titlePenetrate: yesNoParseList[this.titlePenetrate]
-    }, titleNView)
+    navigationBar = mergeTitleNView(
+      {
+        loading: false,
+        backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
+        backgroundColor: this.navigationBarBackgroundColor,
+        textColor: this.navigationBarTextStyle === 'black' ? '#000' : '#fff',
+        titleText: this.navigationBarTitleText,
+        titleImage: this.titleImage,
+        duration: '0',
+        timingFunc: '',
+        titlePenetrate: yesNoParseList[this.titlePenetrate],
+      },
+      titleNView
+    )
     navigationBar.shadow = this.navigationBarShadow
 
-    const refreshOptions = Object.assign({
-      support: true,
-      color: '#2BD009',
-      style: 'circle',
-      height: 70,
-      range: 150,
-      offset: 0
-    }, this.pullToRefresh)
+    const refreshOptions = Object.assign(
+      {
+        support: true,
+        color: '#2BD009',
+        style: 'circle',
+        height: 70,
+        range: 150,
+        offset: 0,
+      },
+      this.pullToRefresh
+    )
 
     let offset = uni.upx2px(refreshOptions.offset)
 
@@ -224,13 +237,13 @@ export default {
 
     return {
       navigationBar,
-      refreshOptions
+      refreshOptions,
     }
   },
-  created () {
+  created() {
     const navigationBar = this.navigationBar
     document.title = navigationBar.titleText
     UniServiceJSBridge.emit('onNavigationBarChange', navigationBar)
-  }
+  },
 }
 </script>

packages/uni-h5/src/framework/components/page/merge-title-nview.js

 import { hasOwn, isPlainObject } from '@vue/shared'
 
+/**
+ * app-plus titleNView
+ */
 export function mergeTitleNView(navigationBar, titleNView) {
   if (isPlainObject(titleNView)) {
     if (hasOwn(titleNView, 'backgroundColor')) {
@@ -33,7 +36,7 @@ export function mergeTitleNView(navigationBar, titleNView) {
           borderRadius: '0px',
           placeholder: '',
           placeholderColor: '#CCCCCC',
-          disabled: false
+          disabled: false,
         },
         titleNView.searchInput
       )

packages/uni-h5/src/framework/components/page/pageBody.vue

@@ -12,34 +12,12 @@ uni-page-wrapper {
   position: relative;
 }
 
-uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
+uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
   height: calc(100% - 44px);
   height: calc(100% - 44px - constant(safe-area-inset-top));
   height: calc(100% - 44px - env(safe-area-inset-top));
 }
 
-.uni-app--showtabbar uni-page-wrapper {
-  display: block;
-  height: calc(100% - 50px);
-  height: calc(100% - 50px - constant(safe-area-inset-bottom));
-  height: calc(100% - 50px - env(safe-area-inset-bottom));
-}
-
-.uni-app--showtabbar uni-page-wrapper::after {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 50px;
-  height: calc(50px + constant(safe-area-inset-bottom));
-  height: calc(50px + env(safe-area-inset-bottom));
-}
-
-.uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
-  height: calc(100% - 44px - 50px);
-  height: calc(100% - 44px - constant(safe-area-inset-top) - 50px - constant(safe-area-inset-bottom));
-  height: calc(100% - 44px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
-}
-
 uni-page-body {
   display: block;
   box-sizing: border-box;
@@ -47,7 +25,34 @@ uni-page-body {
 }
 </style>
 <script>
+// import { appendCss } from '../../../helpers/appendCss'
+// import { tabBar } from '../app/observable'
 export default {
-  name: 'PageBody'
+  name: 'PageBody',
+  mounted() {
+    // const HEIGTH = tabBar.height || '50px'
+    // let cssText = `.uni-app--showtabbar uni-page-wrapper {
+    //                 display: block;
+    //                 height: calc(100% - ${HEIGTH});
+    //                 height: calc(100% - ${HEIGTH} - constant(safe-area-inset-bottom));
+    //                 height: calc(100% - ${HEIGTH} - env(safe-area-inset-bottom));
+    //               }`
+    // cssText += '\n'
+    // cssText += `.uni-app--showtabbar uni-page-wrapper::after {
+    //               content: "";
+    //               display: block;
+    //               width: 100%;
+    //               height: ${HEIGTH};
+    //               height: calc(${HEIGTH} + constant(safe-area-inset-bottom));
+    //               height: calc(${HEIGTH} + env(safe-area-inset-bottom));
+    //             }`
+    // cssText += '\n'
+    // cssText += `.uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
+    //               height: calc(100% - 44px - ${HEIGTH});
+    //               height: calc(100% - 44px - constant(safe-area-inset-top) - ${HEIGTH} - constant(safe-area-inset-bottom));
+    //               height: calc(100% - 44px - env(safe-area-inset-top) - ${HEIGTH} - env(safe-area-inset-bottom));
+    //             }`
+    // appendCss(cssText)
+  },
 }
 </script>

packages/uni-h5/src/framework/components/page/pageHead.vue

 <template>
   <uni-page-head :uni-page-head-type="type">
     <div
-      :style="{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
+      :style="{
+        transitionDuration: duration,
+        transitionTimingFunction: timingFunc,
+        backgroundColor: bgColor,
+        color: textColor,
+      }"
       :class="headClass"
       class="uni-page-head"
     >
       <div class="uni-page-head-hd">
         <div v-show="backButton" class="uni-page-head-btn" @click="_back">
-          <i :style="{color:color,fontSize:'27px'}" class="uni-btn-icon">&#xe601;</i>
+          <i :style="{ color: color, fontSize: '27px' }" class="uni-btn-icon"
+            >&#xe601;</i
+          >
         </div>
-        <template v-for="(btn,index) in leftBtns" :key="index">
+        <template v-for="(btn, index) in btns">
           <div
-            :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
+            v-if="btn.float === 'left'"
+            :key="index"
+            :style="{
+              backgroundColor:
+                type === 'transparent' ? btn.background : 'transparent',
+              width: btn.width,
+            }"
             :badge-text="btn.badgeText"
-            :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
+            :class="{
+              'uni-page-head-btn-red-dot': btn.redDot || btn.badgeText,
+              'uni-page-head-btn-select': btn.select,
+            }"
             class="uni-page-head-btn"
           >
             <i
@@ -27,31 +43,47 @@
       </div>
       <div v-if="!searchInput" class="uni-page-head-bd">
         <div
-          :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
+          :style="{
+            fontSize: titleSize,
+            opacity: type === 'transparent' ? 0 : 1,
+          }"
           class="uni-page-head__title"
         >
           <i v-if="loading" class="uni-loading" />
-          <img v-if="titleImage!==''" :src="titleImage" class="uni-page-head__title_image" />
-          <template v-else>{{ titleText }}</template>
+          <img
+            v-if="titleImage !== ''"
+            :src="titleImage"
+            class="uni-page-head__title_image"
+          />
+          <template v-else>
+            {{ titleText }}
+          </template>
         </div>
       </div>
       <div
         v-if="searchInput"
-        :style="{'border-radius':searchInput.borderRadius,'background-color':searchInput.backgroundColor}"
+        :style="{
+          'border-radius': searchInput.borderRadius,
+          'background-color': searchInput.backgroundColor,
+        }"
         class="uni-page-head-search"
       >
         <div
-          :style="{color:searchInput.placeholderColor}"
-          :class="[`uni-page-head-search-placeholder-${focus || text ? 'left' : searchInput.align}`]"
+          :style="{ color: searchInput.placeholderColor }"
+          :class="[
+            `uni-page-head-search-placeholder-${
+              focus || text ? 'left' : searchInput.align
+            }`,
+          ]"
           class="uni-page-head-search-placeholder"
           v-text="text || composing ? '' : searchInput.placeholder"
         />
-        <VUniInput
+        <v-uni-input
           ref="input"
           v-model="text"
           :focus="searchInput.autoFocus"
           :disabled="searchInput.disabled"
-          :style="{color:searchInput.color}"
+          :style="{ color: searchInput.color }"
           :placeholder-style="`color:${searchInput.placeholderColor}`"
           class="uni-page-head-search-input"
           confirm-type="search"
@@ -61,11 +93,20 @@
         />
       </div>
       <div class="uni-page-head-ft">
-        <template v-for="(btn,index) in rightBtns" :key="index">
+        <template v-for="(btn, index) in btns">
           <div
-            :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
+            v-if="btn.float !== 'left'"
+            :key="index"
+            :style="{
+              backgroundColor:
+                type === 'transparent' ? btn.background : 'transparent',
+              width: btn.width,
+            }"
             :badge-text="btn.badgeText"
-            :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
+            :class="{
+              'uni-page-head-btn-red-dot': btn.redDot || btn.badgeText,
+              'uni-page-head-btn-select': btn.select,
+            }"
             class="uni-page-head-btn"
           >
             <i
@@ -79,8 +120,8 @@
       </div>
     </div>
     <div
-      v-if="type!=='transparent'&&type!=='float'"
-      :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
+      v-if="type !== 'transparent' && type !== 'float'"
+      :class="{ 'uni-placeholder-titlePenetrate': titlePenetrate }"
       class="uni-placeholder"
     />
   </uni-page-head>
@@ -93,9 +134,8 @@ uni-page-head {
 
 uni-page-head .uni-page-head {
   position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
+  left: var(--window-left);
+  right: var(--window-right);
   height: 44px;
   height: calc(44px + constant(safe-area-inset-top));
   height: calc(44px + env(safe-area-inset-top));
@@ -327,8 +367,8 @@ uni-page-head .uni-page-head-shadow-yellow::after {
 }
 </style>
 <script>
-import {Input} from '@dcloudio/uni-components'
-import {appendCss} from './append-css'
+import { appendCss } from '../../../helpers/dom'
+import { getRealPath } from '../../../helpers/getRealPath'
 
 import transparent from './transparent'
 
@@ -339,102 +379,99 @@ const FONTS = {
   favorite: '&#xe604;',
   home: '&#xe605;',
   menu: '&#xe606;',
-  close: '&#xe650;'
+  close: '&#xe650;',
 }
 export default {
   name: 'PageHead',
   mixins: [transparent],
-  components:{
-    VUniInput:Input
-  },
   props: {
     backButton: {
       type: Boolean,
-      default: true
+      default: true,
     },
     backgroundColor: {
       type: String,
-      default () {
+      default() {
         return this.type === 'transparent' ? '#000' : '#F8F8F8'
-      }
+      },
     },
     textColor: {
       type: String,
-      default: '#fff'
+      default: '#fff',
     },
     titleText: {
       type: String,
-      default: ''
+      default: '',
     },
     duration: {
       type: String,
-      default: '0'
+      default: '0',
     },
     timingFunc: {
       type: String,
-      default: ''
+      default: '',
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     titleSize: {
       type: String,
-      default: '16px'
+      default: '16px',
     },
     type: {
       default: 'default',
-      validator (value) {
+      validator(value) {
         return ['default', 'transparent', 'float'].indexOf(value) !== -1
-      }
+      },
     },
     coverage: {
       type: String,
-      default: '132px'
+      default: '132px',
     },
     buttons: {
       type: Array,
-      default () {
+      default() {
         return []
-      }
+      },
     },
     searchInput: {
       type: [Object, Boolean],
-      default () {
+      default() {
         return false
-      }
+      },
     },
     titleImage: {
       type: String,
-      default: ''
+      default: '',
     },
     titlePenetrate: {
       type: Boolean,
-      default: false
+      default: false,
     },
     shadow: {
       type: Object,
-      default () {
+      default() {
         return {}
-      }
-    }
+      },
+    },
   },
-  data () {
+  data() {
     return {
       focus: false,
       text: '',
-      composing: false
+      composing: false,
     }
   },
   computed: {
-    btns () {
+    btns() {
       const btns = []
       const fonts = {}
       if (this.buttons.length) {
-        this.buttons.forEach(button => {
+        this.buttons.forEach((button) => {
           const btn = Object.assign({}, button)
           if (btn.fontSrc && !btn.fontFamily) {
-            const fontSrc = btn.fontSrc = this.$getRealPath(btn.fontSrc)
+            const fontSrc = (btn.fontSrc = getRealPath(btn.fontSrc))
             let fontFamily
             if (fontSrc in fonts) {
               fontFamily = fonts[fontSrc]
@@ -446,8 +483,13 @@ export default {
             }
             btn.fontFamily = fontFamily
           }
-          btn.color = this.type === 'transparent' ? '#fff' : (btn.color || this.textColor)
-          let fontSize = btn.fontSize || (this.type === 'transparent' || /\\u/.test(btn.text) ? '22px' : '27px')
+          btn.color =
+            this.type === 'transparent' ? '#fff' : btn.color || this.textColor
+          let fontSize =
+            btn.fontSize ||
+            (this.type === 'transparent' || /\\u/.test(btn.text)
+              ? '22px'
+              : '27px')
           if (/\d$/.test(fontSize)) {
             fontSize += 'px'
           }
@@ -458,29 +500,23 @@ export default {
       }
       return btns
     },
-    leftBtns(){
-      return this.btns.filter(btn=>btn.float === 'left')
-    },
-    rightBtns(){
-      return this.btns.filter(btn=>btn.float !== 'left')
-    },
-    headClass () {
+    headClass() {
       const shadowColorType = this.shadow.colorType
       const data = {
         'uni-page-head-transparent': this.type === 'transparent',
         'uni-page-head-titlePenetrate': this.titlePenetrate,
-        'uni-page-head-shadow': shadowColorType
+        'uni-page-head-shadow': shadowColorType,
       }
       if (shadowColorType) {
         data[`uni-page-head-shadow-${shadowColorType}`] = shadowColorType
       }
       return data
-    }
+    },
   },
-  mounted () {
+  mounted() {
     if (this.searchInput) {
       const input = this.$refs.input
-      input.$watch('composing', val => {
+      input.$watch('composing', (val) => {
         this.composing = val
       })
       if (this.searchInput.disabled) {
@@ -488,44 +524,47 @@ export default {
           UniServiceJSBridge.emit('onNavigationBarSearchInputClicked', '')
         })
       } else {
-        input.$refs.input.addEventListener('keyup', event => {
+        input.$refs.input.addEventListener('keyup', (event) => {
           if (event.key.toUpperCase() === 'ENTER') {
             UniServiceJSBridge.emit('onNavigationBarSearchInputConfirmed', {
-              text: this.text
+              text: this.text,
             })
           }
         })
         input.$refs.input.addEventListener('focus', () => {
           UniServiceJSBridge.emit('onNavigationBarSearchInputFocusChanged', {
-            focus: true
+            focus: true,
           })
         })
         input.$refs.input.addEventListener('blur', () => {
           UniServiceJSBridge.emit('onNavigationBarSearchInputFocusChanged', {
-            focus: false
+            focus: false,
           })
         })
       }
     }
   },
   methods: {
-    _back () {
+    _back() {
       if (getCurrentPages().length === 1) {
         uni.reLaunch({
-          url: '/'
+          url: '/',
         })
       } else {
         uni.navigateBack({
-          from: 'backbutton'
+          from: 'backbutton',
         })
       }
     },
-    _onBtnClick (index) {
-      UniServiceJSBridge.emit('onNavigationBarButtonTap', Object.assign({}, this.btns[index], {
-        index
-      }))
+    _onBtnClick(index) {
+      UniServiceJSBridge.emit(
+        'onNavigationBarButtonTap',
+        Object.assign({}, this.btns[index], {
+          index,
+        })
+      )
     },
-    _formatBtnFontText (btn) {
+    _formatBtnFontText(btn) {
       if (btn.fontSrc && btn.fontFamily) {
         return btn.text.replace('\\u', '&#x')
       } else if (FONTS[btn.type]) {
@@ -533,28 +572,28 @@ export default {
       }
       return btn.text || ''
     },
-    _formatBtnStyle (btn) {
+    _formatBtnStyle(btn) {
       const style = {
         color: btn.color,
         fontSize: btn.fontSize,
-        fontWeight: btn.fontWeight
+        fontWeight: btn.fontWeight,
       }
       if (btn.fontFamily) {
         style.fontFamily = btn.fontFamily
       }
       return style
     },
-    _focus () {
+    _focus() {
       this.focus = true
     },
-    _blur () {
+    _blur() {
       this.focus = false
     },
-    _input (text) {
+    _input(text) {
       UniServiceJSBridge.emit('onNavigationBarSearchInputChanged', {
-        text
+        text,
       })
-    }
-  }
+    },
+  },
 }
 </script>

packages/uni-h5/src/framework/components/page/pull-to-refresh.js

-function processDeltaY(evt, identifier, startY) {
-  const touch = Array.prototype.slice
-    .call(evt.changedTouches)
-    .filter(touch => touch.identifier === identifier)[0]
-  if (!touch) {
-    return false
-  }
-  evt.deltaY = touch.pageY - startY
-  return true
-}
-
-// const ratio = 2.2
-
-const PULLING = 'pulling'
-const REACHED = 'reached'
-
-const ABORTING = 'aborting'
-const REFRESHING = 'refreshing'
-const RESTORING = 'restoring'
-
-export default {
-  mounted() {
-    if (this.enablePullDownRefresh) {
-      this.refreshContainerElem = this.$refs.refresh.$el
-      this.refreshControllerElem = this.refreshContainerElem.querySelector(
-        '.uni-page-refresh'
-      )
-      this.refreshInnerElemStyle = this.refreshControllerElem.querySelector(
-        '.uni-page-refresh-inner'
-      ).style
-
-      UniServiceJSBridge.on(
-        this.$route.params.__id__ + '.startPullDownRefresh',
-        () => {
-          if (!this.state) {
-            this.state = REFRESHING
-            this._addClass()
-            setTimeout(() => {
-              this._refreshing()
-            }, 50)
-          }
-        }
-      )
-
-      UniServiceJSBridge.on(
-        this.$route.params.__id__ + '.stopPullDownRefresh',
-        () => {
-          if (this.state === REFRESHING) {
-            this._removeClass()
-            this.state = RESTORING
-            this._addClass()
-
-            this._restoring(() => {
-              this._removeClass()
-              this.state = this.distance = this.offset = null
-            })
-          }
-        }
-      )
-    }
-  },
-  methods: {
-    _touchstart(evt) {
-      const touch = evt.changedTouches[0]
-      this.touchId = touch.identifier
-      this.startY = touch.pageY
-      if ([ABORTING, REFRESHING, RESTORING].indexOf(this.state) >= 0) {
-        this.canRefresh = false
-      } else {
-        this.canRefresh = true
-      }
-    },
-    _touchmove(evt) {
-      if (!this.canRefresh) {
-        return
-      }
-      if (!processDeltaY(evt, this.touchId, this.startY)) {
-        return
-      }
-
-      let { deltaY } = evt
-
-      if (
-        (document.documentElement.scrollTop || document.body.scrollTop) !== 0
-      ) {
-        this.touchId = null
-        return
-      }
-
-      if (deltaY < 0 && !this.state) {
-        return
-      }
-
-      evt.preventDefault()
-
-      if (this.distance == null) {
-        this.offset = deltaY
-        this.state = PULLING
-        this._addClass()
-      }
-
-      deltaY = deltaY - this.offset
-
-      if (deltaY < 0) {
-        deltaY = 0
-      }
-
-      this.distance = deltaY
-
-      const reached =
-        deltaY >= this.refreshOptions.range && this.state !== REACHED
-      const pulling =
-        deltaY < this.refreshOptions.range && this.state !== PULLING
-
-      if (reached || pulling) {
-        this._removeClass()
-        this.state = this.state === REACHED ? PULLING : REACHED
-        this._addClass()
-      }
-
-      this._pulling(deltaY)
-    },
-    _touchend(evt) {
-      if (!processDeltaY(evt, this.touchId, this.startY)) {
-        return
-      }
-      if (this.state === null) {
-        return
-      }
-      if (this.state === PULLING) {
-        this._removeClass()
-        this.state = ABORTING
-        this._addClass()
-        this._aborting(() => {
-          this._removeClass()
-          this.state = this.distance = this.offset = null
-        })
-      } else if (this.state === REACHED) {
-        this._removeClass()
-        this.state = REFRESHING
-        this._addClass()
-        this._refreshing()
-      }
-    },
-    _toggleClass(type) {
-      if (!this.state) {
-        return
-      }
-      const elem = this.refreshContainerElem
-      if (elem) {
-        elem.classList[type]('uni-page-refresh--' + this.state)
-      }
-    },
-    _addClass() {
-      this._toggleClass('add')
-    },
-    _removeClass() {
-      this._toggleClass('remove')
-    },
-    _pulling(deltaY) {
-      const elem = this.refreshControllerElem
-      if (!elem) {
-        return
-      }
-
-      const style = elem.style
-
-      let rotate = deltaY / this.refreshOptions.range
-
-      if (rotate > 1) {
-        rotate = 1
-      } else {
-        rotate = rotate * rotate * rotate
-      }
-
-      const y = Math.round(
-        deltaY / (this.refreshOptions.range / this.refreshOptions.height)
-      )
-
-      const transform = y ? 'translate3d(-50%, ' + y + 'px, 0)' : 0
-
-      style.webkitTransform = transform
-      style.clip = 'rect(' + (45 - y) + 'px,45px,45px,-5px)'
-
-      this.refreshInnerElemStyle.webkitTransform =
-        'rotate(' + 360 * rotate + 'deg)'
-    },
-    _aborting(callback) {
-      const elem = this.refreshControllerElem
-      if (!elem) {
-        return
-      }
-
-      const style = elem.style
-
-      if (style.webkitTransform) {
-        style.webkitTransition = '-webkit-transform 0.3s'
-        style.webkitTransform = 'translate3d(-50%, 0, 0)'
-        const abortTransitionEnd = function() {
-          timeout && clearTimeout(timeout)
-          elem.removeEventListener('webkitTransitionEnd', abortTransitionEnd)
-          style.webkitTransition = ''
-          callback()
-        }
-        elem.addEventListener('webkitTransitionEnd', abortTransitionEnd)
-        const timeout = setTimeout(abortTransitionEnd, 350) // 部分手机，部分情况webkitTransitionEnd不触发
-      } else {
-        callback()
-      }
-    },
-    _refreshing() {
-      const elem = this.refreshControllerElem
-      if (!elem) {
-        return
-      }
-
-      const style = elem.style
-      style.webkitTransition = '-webkit-transform 0.2s'
-      style.webkitTransform =
-        'translate3d(-50%, ' + this.refreshOptions.height + 'px, 0)'
-
-      // Service 执行 refresh
-      UniServiceJSBridge.emit(
-        'onPullDownRefresh',
-        {},
-        this.$route.params.__id__
-      )
-    },
-    _restoring(callback) {
-      const elem = this.refreshControllerElem
-      if (!elem) {
-        return
-      }
-
-      const style = elem.style
-
-      style.webkitTransition = '-webkit-transform 0.3s'
-      style.webkitTransform += ' scale(0.01)'
-
-      const restoreTransitionEnd = function() {
-        timeout && clearTimeout(timeout)
-        elem.removeEventListener('webkitTransitionEnd', restoreTransitionEnd)
-        style.webkitTransition = ''
-        style.webkitTransform = 'translate3d(-50%, 0, 0)'
-        callback()
-      }
-
-      elem.addEventListener('webkitTransitionEnd', restoreTransitionEnd)
-      const timeout = setTimeout(restoreTransitionEnd, 350) // 部分手机，部分情况webkitTransitionEnd不触发
-    }
-  }
-}
+function processDeltaY(evt, identifier, startY) {
+  const touch = Array.prototype.slice
+    .call(evt.changedTouches)
+    .filter((touch) => touch.identifier === identifier)[0]
+  if (!touch) {
+    return false
+  }
+  evt.deltaY = touch.pageY - startY
+  return true
+}
+
+// const ratio = 2.2
+
+const PULLING = 'pulling'
+const REACHED = 'reached'
+
+const ABORTING = 'aborting'
+const REFRESHING = 'refreshing'
+const RESTORING = 'restoring'
+
+export default {
+  mounted() {
+    if (this.enablePullDownRefresh) {
+      this.refreshContainerElem = this.$refs.refresh.$el
+      this.refreshControllerElem = this.refreshContainerElem.querySelector(
+        '.uni-page-refresh'
+      )
+      this.refreshInnerElemStyle = this.refreshControllerElem.querySelector(
+        '.uni-page-refresh-inner'
+      ).style
+
+      UniServiceJSBridge.on(
+        this.$route.params.__id__ + '.startPullDownRefresh',
+        () => {
+          if (!this.state) {
+            this.state = REFRESHING
+            this._addClass()
+            setTimeout(() => {
+              this._refreshing()
+            }, 50)
+          }
+        }
+      )
+
+      UniServiceJSBridge.on(
+        this.$route.params.__id__ + '.stopPullDownRefresh',
+        () => {
+          if (this.state === REFRESHING) {
+            this._removeClass()
+            this.state = RESTORING
+            this._addClass()
+
+            this._restoring(() => {
+              this._removeClass()
+              this.state = this.distance = this.offset = null
+            })
+          }
+        }
+      )
+    }
+  },
+  methods: {
+    _touchstart(evt) {
+      const touch = evt.changedTouches[0]
+      this.touchId = touch.identifier
+      this.startY = touch.pageY
+      if ([ABORTING, REFRESHING, RESTORING].indexOf(this.state) >= 0) {
+        this.canRefresh = false
+      } else {
+        this.canRefresh = true
+      }
+    },
+    _touchmove(evt) {
+      if (!this.canRefresh) {
+        return
+      }
+      if (!processDeltaY(evt, this.touchId, this.startY)) {
+        return
+      }
+
+      let { deltaY } = evt
+
+      if (
+        (document.documentElement.scrollTop || document.body.scrollTop) !== 0
+      ) {
+        this.touchId = null
+        return
+      }
+
+      if (deltaY < 0 && !this.state) {
+        return
+      }
+
+      evt.preventDefault()
+
+      if (this.distance == null) {
+        this.offset = deltaY
+        this.state = PULLING
+        this._addClass()
+      }
+
+      deltaY = deltaY - this.offset
+
+      if (deltaY < 0) {
+        deltaY = 0
+      }
+
+      this.distance = deltaY
+
+      const reached =
+        deltaY >= this.refreshOptions.range && this.state !== REACHED
+      const pulling =
+        deltaY < this.refreshOptions.range && this.state !== PULLING
+
+      if (reached || pulling) {
+        this._removeClass()
+        this.state = this.state === REACHED ? PULLING : REACHED
+        this._addClass()
+      }
+
+      this._pulling(deltaY)
+    },
+    _touchend(evt) {
+      if (!processDeltaY(evt, this.touchId, this.startY)) {
+        return
+      }
+      if (this.state === null) {
+        return
+      }
+      if (this.state === PULLING) {
+        this._removeClass()
+        this.state = ABORTING
+        this._addClass()
+        this._aborting(() => {
+          this._removeClass()
+          this.state = this.distance = this.offset = null
+        })
+      } else if (this.state === REACHED) {
+        this._removeClass()
+        this.state = REFRESHING
+        this._addClass()
+        this._refreshing()
+      }
+    },
+    _toggleClass(type) {
+      if (!this.state) {
+        return
+      }
+      const elem = this.refreshContainerElem
+      if (elem) {
+        elem.classList[type]('uni-page-refresh--' + this.state)
+      }
+    },
+    _addClass() {
+      this._toggleClass('add')
+    },
+    _removeClass() {
+      this._toggleClass('remove')
+    },
+    _pulling(deltaY) {
+      const elem = this.refreshControllerElem
+      if (!elem) {
+        return
+      }
+
+      const style = elem.style
+
+      let rotate = deltaY / this.refreshOptions.range
+
+      if (rotate > 1) {
+        rotate = 1
+      } else {
+        rotate = rotate * rotate * rotate
+      }
+
+      const y = Math.round(
+        deltaY / (this.refreshOptions.range / this.refreshOptions.height)
+      )
+
+      const transform = y ? 'translate3d(-50%, ' + y + 'px, 0)' : 0
+
+      style.webkitTransform = transform
+      style.clip = 'rect(' + (45 - y) + 'px,45px,45px,-5px)'
+
+      this.refreshInnerElemStyle.webkitTransform =
+        'rotate(' + 360 * rotate + 'deg)'
+    },
+    _aborting(callback) {
+      const elem = this.refreshControllerElem
+      if (!elem) {
+        return
+      }
+
+      const style = elem.style
+
+      if (style.webkitTransform) {
+        style.webkitTransition = '-webkit-transform 0.3s'
+        style.webkitTransform = 'translate3d(-50%, 0, 0)'
+        const abortTransitionEnd = function () {
+          timeout && clearTimeout(timeout)
+          elem.removeEventListener('webkitTransitionEnd', abortTransitionEnd)
+          style.webkitTransition = ''
+          callback()
+        }
+        elem.addEventListener('webkitTransitionEnd', abortTransitionEnd)
+        const timeout = setTimeout(abortTransitionEnd, 350) // 部分手机，部分情况webkitTransitionEnd不触发
+      } else {
+        callback()
+      }
+    },
+    _refreshing() {
+      const elem = this.refreshControllerElem
+      if (!elem) {
+        return
+      }
+
+      const style = elem.style
+      style.webkitTransition = '-webkit-transform 0.2s'
+      style.webkitTransform =
+        'translate3d(-50%, ' + this.refreshOptions.height + 'px, 0)'
+
+      // Service 执行 refresh
+      UniServiceJSBridge.emit(
+        'onPullDownRefresh',
+        {},
+        this.$route.params.__id__
+      )
+    },
+    _restoring(callback) {
+      const elem = this.refreshControllerElem
+      if (!elem) {
+        return
+      }
+
+      const style = elem.style
+
+      style.webkitTransition = '-webkit-transform 0.3s'
+      style.webkitTransform += ' scale(0.01)'
+
+      const restoreTransitionEnd = function () {
+        timeout && clearTimeout(timeout)
+        elem.removeEventListener('webkitTransitionEnd', restoreTransitionEnd)
+        style.webkitTransition = ''
+        style.webkitTransform = 'translate3d(-50%, 0, 0)'
+        callback()
+      }
+
+      elem.addEventListener('webkitTransitionEnd', restoreTransitionEnd)
+      const timeout = setTimeout(restoreTransitionEnd, 350) // 部分手机，部分情况webkitTransitionEnd不触发
+    },
+  },
+}

packages/uni-h5/src/framework/components/page/transparent.js

-import { hexToRgba } from './hex-to-rgba'
-
-export default {
-  mounted() {
-    if (this.type === 'transparent') {
-      const transparentElemStyle = this.$el.querySelector(
-        '.uni-page-head-transparent'
-      ).style
-      const titleElem = this.$el.querySelector('.uni-page-head__title')
-      const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
-      const iconElemsStyles = []
-      const textColor = this.textColor
-      for (let i = 0; i < iconElems.length; i++) {
-        iconElemsStyles.push(iconElems[i].style)
-      }
-      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
-      const oldColors = []
-      const borderRadiusElemsStyles = []
-      for (let i = 0; i < borderRadiusElems.length; i++) {
-        const borderRadiusElem = borderRadiusElems[i]
-        oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
-        borderRadiusElemsStyles.push(borderRadiusElem.style)
-      }
-      this._A = 0
-      UniViewJSBridge.on('onPageScroll', ({ scrollTop }) => {
-        const alpha = Math.min(scrollTop / this.offset, 1)
-        if (alpha === 1 && this._A === 1) {
-          return
-        }
-        if (alpha > 0.5 && this._A <= 0.5) {
-          iconElemsStyles.forEach(function(iconElemStyle) {
-            iconElemStyle.color = textColor
-          })
-        } else if (alpha <= 0.5 && this._A > 0.5) {
-          iconElemsStyles.forEach(function(iconElemStyle) {
-            iconElemStyle.color = '#fff'
-          })
-        }
-        this._A = alpha
-        // TODO 暂时仅处理背景色
-        if (titleElem) {
-          titleElem.style.opacity = alpha
-        }
-        transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${
-          this._B
-        },${alpha})`
-        borderRadiusElemsStyles.forEach(function(borderRadiusElemStyle, index) {
-          const oldColor = oldColors[index]
-          // eslint-disable-next-line
-          let rgba = oldColor.match(/[\d+\.]+/g)
-          rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1)
-          borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
-        })
-      })
-    } else if (this.type === 'float') {
-      const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
-      const iconElemsStyles = []
-      for (let i = 0; i < iconElems.length; i++) {
-        iconElemsStyles.push(iconElems[i].style)
-      }
-      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
-      const oldColors = []
-      const borderRadiusElemsStyles = []
-      for (let i = 0; i < borderRadiusElems.length; i++) {
-        const borderRadiusElem = borderRadiusElems[i]
-        oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
-        borderRadiusElemsStyles.push(borderRadiusElem.style)
-      }
-    }
-  },
-  computed: {
-    color() {
-      return this.type === 'transparent' ? '#fff' : this.textColor
-    },
-    offset() {
-      return parseInt(this.coverage)
-    },
-    bgColor() {
-      if (this.type === 'transparent') {
-        const { r, g, b } = hexToRgba(this.backgroundColor)
-        this._R = r
-        this._G = g
-        this._B = b
-        return `rgba(${r},${g},${b},0)`
-      }
-      return this.backgroundColor
-    }
-  }
-}
+import { hexToRgba } from '../../../helpers/hexToRgba'
+
+export default {
+  mounted() {
+    if (this.type === 'transparent') {
+      const transparentElemStyle = this.$el.querySelector(
+        '.uni-page-head-transparent'
+      ).style
+      const titleElem = this.$el.querySelector('.uni-page-head__title')
+      const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
+      const iconElemsStyles = []
+      const textColor = this.textColor
+      for (let i = 0; i < iconElems.length; i++) {
+        iconElemsStyles.push(iconElems[i].style)
+      }
+      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
+      const oldColors = []
+      const borderRadiusElemsStyles = []
+      for (let i = 0; i < borderRadiusElems.length; i++) {
+        const borderRadiusElem = borderRadiusElems[i]
+        oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
+        borderRadiusElemsStyles.push(borderRadiusElem.style)
+      }
+      this._A = 0
+      UniViewJSBridge.on('onPageScroll', ({ scrollTop }) => {
+        const alpha = Math.min(scrollTop / this.offset, 1)
+        if (alpha === 1 && this._A === 1) {
+          return
+        }
+        if (alpha > 0.5 && this._A <= 0.5) {
+          iconElemsStyles.forEach(function (iconElemStyle) {
+            iconElemStyle.color = textColor
+          })
+        } else if (alpha <= 0.5 && this._A > 0.5) {
+          iconElemsStyles.forEach(function (iconElemStyle) {
+            iconElemStyle.color = '#fff'
+          })
+        }
+        this._A = alpha
+        // TODO 暂时仅处理背景色
+        if (titleElem) {
+          titleElem.style.opacity = alpha
+        }
+        transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${this._B},${alpha})`
+        borderRadiusElemsStyles.forEach(function (
+          borderRadiusElemStyle,
+          index
+        ) {
+          const oldColor = oldColors[index]
+          // eslint-disable-next-line
+          let rgba = oldColor.match(/[\d+\.]+/g)
+          rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1)
+          borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
+        })
+      })
+    } else if (this.type === 'float') {
+      const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
+      const iconElemsStyles = []
+      for (let i = 0; i < iconElems.length; i++) {
+        iconElemsStyles.push(iconElems[i].style)
+      }
+      const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
+      const oldColors = []
+      const borderRadiusElemsStyles = []
+      for (let i = 0; i < borderRadiusElems.length; i++) {
+        const borderRadiusElem = borderRadiusElems[i]
+        oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
+        borderRadiusElemsStyles.push(borderRadiusElem.style)
+      }
+    }
+  },
+  computed: {
+    color() {
+      return this.type === 'transparent' ? '#fff' : this.textColor
+    },
+    offset() {
+      return parseInt(this.coverage)
+    },
+    bgColor() {
+      if (this.type === 'transparent') {
+        const { r, g, b } = hexToRgba(this.backgroundColor)
+        this._R = r
+        this._G = g
+        this._B = b
+        return `rgba(${r},${g},${b},0)`
+      }
+      return this.backgroundColor
+    },
+  },
+}

packages/uni-h5/src/framework/components/system-routes/choose-location/index.vue

 <template>
   <div class="uni-system-choose-location">
-    <system-header
-      :confirm="!!data"
-      @back="_back"
-      @confirm="_choose"
+    <v-uni-map
+      v-if="latitude"
+      :latitude="latitude"
+      :longitude="longitude"
+      class="map"
+      show-location
+      @regionchange="_regionchange"
     >
-      选择位置
-    </system-header>
-    <div class="map-content">
-      <iframe
-        :src="src"
-        allow="geolocation"
-        seamless
-        sandbox="allow-scripts allow-same-origin allow-forms"
-        frameborder="0"
-      />
+      <div class="map-location" />
+      <div
+        class="map-move"
+        @click="_moveToLocation"
+      >
+        <i>&#xec32;</i>
+      </div>
+    </v-uni-map>
+    <div class="nav">
+      <div
+        class="nav-btn back"
+        @click="_back"
+      >
+        <i class="uni-btn-icon">&#xe650;</i>
+      </div>
+      <div
+        class="nav-btn confirm"
+        :class="{ disable: !selected }"
+        @click="_choose"
+      >
+        <i class="uni-btn-icon">&#xe651;</i>
+      </div>
+    </div>
+    <div class="menu">
+      <div class="search">
+        <v-uni-input
+          v-model="keyword"
+          class="search-input"
+          placeholder="搜索地点"
+          @focus="searching = true"
+          @input="_input"
+        />
+        <div
+          v-if="searching"
+          class="search-btn"
+          @click="
+            searching = false;
+            keyword = '';
+          "
+        >
+          取消
+        </div>
+      </div>
+      <v-uni-scroll-view
+        scroll-y
+        class="list"
+        @scrolltolower="_scrolltolower"
+      >
+        <div
+          v-if="loading"
+          class="list-loading"
+        >
+          <i class="uni-loading" />
+        </div>
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+          class="list-item"
+          :class="{ selected: selectedIndex === index }"
+          @click="
+            selectedIndex = index;
+            latitude = item.latitude;
+            longitude = item.longitude;
+          "
+        >
+          <div class="list-item-title">
+            {{ item.name }}
+          </div>
+          <div class="list-item-detail">
+            {{ item.distance ? item.distance + "米 | " : "" }}{{ item.address }}
+          </div>
+        </div>
+      </v-uni-scroll-view>
     </div>
   </div>
 </template>
 <script>
-import SystemHeader from '../system-header'
+import {
+  debounce
+} from 'uni-shared'
+import {
+  getJSONP
+} from 'uni-platform/helpers/get-jsonp'
+const key = __uniConfig.qqMapKey
 
 export default {
   name: 'SystemChooseLocation',
-  components: {
-    SystemHeader
-  },
   data () {
-    const key = __uniConfig.qqMapKey
     return {
-      src: `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=uniapp`,
-      data: null
+      latitude: 0,
+      longitude: 0,
+      pageSize: 15,
+      pageIndex: 1,
+      selectedIndex: -1,
+      list: [],
+      keyword: '',
+      searching: false,
+      loading: true
     }
   },
-  mounted () {
-    function handler (event) {
-      var loc = event.data
-      if (loc && loc.module === 'locationPicker') {
-        this.data = {
-          name: loc.poiname,
-          address: loc.poiaddress,
-          latitude: loc.latlng.lat,
-          longitude: loc.latlng.lng
-        }
-      }
+  computed: {
+    selected () {
+      return this.list[this.selectedIndex]
     }
-    this.__messageHandle = handler.bind(this)
-    window.addEventListener('message', this.__messageHandle, false)
+  },
+  created () {
+    this._moveToLocation()
+    this._search = debounce(() => {
+      this._reset()
+      if (this.keyword) {
+        this._getList()
+      }
+    }, 1000)
+    this.$watch('searching', val => {
+      this._reset()
+      if (!val) {
+        this._getList()
+      }
+    })
   },
   beforeDestroy () {
     window.removeEventListener('message', this.__messageHandle, false)
   },
   methods: {
     _choose () {
-      if (this.data) {
-        UniViewJSBridge.publishHandler('onChooseLocation', Object.assign({}, this.data))
+      if (this.selected) {
+        UniViewJSBridge.publishHandler('onChooseLocation', Object.assign({}, this.selected))
         getApp().$router.back()
       }
     },
     _back () {
       UniViewJSBridge.publishHandler('onChooseLocation', null)
       getApp().$router.back()
+    },
+    _moveToLocation () {
+      uni.getLocation({
+        type: 'gcj02',
+        success: this._move.bind(this),
+        fail: () => {
+          this._move({
+            latitude: 39.90960456049752,
+            longitude: 116.3972282409668
+          })
+        }
+      })
+    },
+    _regionchange ({ detail: { centerLocation } }) {
+      if (centerLocation) {
+        // TODO 图钉 icon 动画
+        this._move(centerLocation)
+      }
+    },
+    _pushData (array) {
+      array.forEach(item => {
+        this.list.push({
+          name: item.title,
+          address: item.address,
+          distance: item._distance,
+          latitude: item.location.lat,
+          longitude: item.location.lng
+        })
+      })
+    },
+    _getList () {
+      this.loading = true
+      const url = this.searching ? `https://apis.map.qq.com/ws/place/v1/search?output=jsonp&key=${key}&boundary=nearby(${this.latitude},${this.longitude},1000)&keyword=${this.keyword}&page_size=${this.pageSize}&page_index=${this.pageIndex}` : `https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=${key}&location=${this.latitude},${this.longitude}&get_poi=1&poi_options=page_size=${this.pageSize};page_index=${this.pageIndex}`
+      // TODO 列表加载失败提示
+      getJSONP(url, {
+        callback: 'callback'
+      }, (res) => {
+        this.loading = false
+        if (this.searching && 'data' in res && res.data.length) {
+          this._pushData(res.data)
+        } else if ('result' in res && res.result.pois) {
+          this._pushData(res.result.pois)
+        }
+      }, () => {
+        this.loading = false
+      })
+    },
+    _scrolltolower () {
+      if (!this.loading && this.list.length === this.pageSize * this.pageIndex) {
+        this.pageIndex++
+        this._getList()
+      }
+    },
+    _reset () {
+      this.selectedIndex = -1
+      this.pageIndex = 1
+      this.list = []
+    },
+    _move ({ latitude, longitude }) {
+      this.latitude = latitude
+      this.longitude = longitude
+      if (!this.searching) {
+        this._reset()
+        this._getList()
+      }
+    },
+    _input () {
+      this._search()
     }
   }
 }
 </script>
 <style>
-	.uni-system-choose-location {
-		display: block;
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background: #f8f8f8;
-	}
-
-	.map-content {
-		position: absolute;
-		left: 0;
-		top: 44px;
-		width: 100%;
-		bottom: 0;
-		overflow: hidden;
-	}
-
-	.map-content>iframe {
-		width: 100%;
-		height: 100%;
-	}
+@font-face {
+  font-weight: normal;
+  font-style: normal;
+  font-family: "unimapbtn";
+  src: url("data:application/octet-stream;base64,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")
+    format("truetype");
+}
+
+.uni-system-choose-location {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #f8f8f8;
+}
+
+.uni-system-choose-location .map {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  width: 100%;
+  height: 380px;
+}
+
+.uni-system-choose-location .map-location {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 32px;
+  height: 52px;
+  margin-left: -16px;
+  cursor: pointer;
+  background-image: url("data:image/png;base64,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");
+  background-size: 100%;
+}
+
+.uni-system-choose-location .map-move {
+  position: absolute;
+  bottom: 50px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  line-height: 40px;
+  background-color: white;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0px 0 5px 1px rgba(0, 0, 0, 0.3);
+}
+
+.uni-system-choose-location .map-move > i {
+  display: block;
+  width: 100%;
+  height: 100%;
+  font: normal normal normal 14px/1 "unimapbtn";
+  line-height: inherit;
+  text-align: center;
+  font-size: 24px;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.uni-system-choose-location .nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  background-color: transparent;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.3),
+    rgba(0, 0, 0, 0)
+  );
+}
+
+.uni-system-choose-location .nav-btn {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 44px;
+  padding: 6px;
+  line-height: 32px;
+  font-size: 26px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+}
+
+.uni-system-choose-location .nav-btn.confirm {
+  left: auto;
+  right: 0;
+}
+
+.uni-system-choose-location .nav-btn.disable {
+  opacity: 0.4;
+}
+
+.uni-system-choose-location .nav-btn > .uni-btn-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  line-height: inherit;
+  border-radius: 2px;
+}
+
+.uni-system-choose-location .nav-btn.confirm > .uni-btn-icon {
+  background-color: #007aff;
+}
+
+.uni-system-choose-location .menu {
+  position: absolute;
+  top: 300px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: white;
+}
+
+.uni-system-choose-location .search {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  padding: 8px;
+  line-height: 34px;
+  box-sizing: border-box;
+  background-color: white;
+}
+
+.uni-system-choose-location .search-input {
+  flex: 1;
+  height: 100%;
+  border-radius: 5px;
+  padding: 0 5px;
+  background: #ebebeb;
+}
+
+.uni-system-choose-location .search-btn {
+  width: 2.8em;
+  color: #007aff;
+  font-size: 17px;
+  text-align: center;
+}
+
+.uni-system-choose-location .list {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  padding-bottom: 10px;
+  /* background-color: #f6f6f6; */
+}
+
+.uni-system-choose-location .list-loading {
+  display: flex;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+}
+
+.uni-system-choose-location .list-item {
+  position: relative;
+  padding: 10px;
+  padding-right: 40px;
+  cursor: pointer;
+}
+
+.uni-system-choose-location .list-item.selected::before {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  text-align: center;
+  content: "\e651";
+  font: normal normal normal 14px/1 "unibtn";
+  font-size: 24px;
+  line-height: 30px;
+  color: #007aff;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.uni-system-choose-location .list-item:not(:last-child)::after {
+  position: absolute;
+  content: "";
+  height: 1px;
+  left: 10px;
+  bottom: 0;
+  width: 100%;
+  background-color: #d3d3d3;
+}
+
+.uni-system-choose-location .list-item-title {
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.uni-system-choose-location .list-item-detail {
+  font-size: 12px;
+  color: #808080;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media screen and (min-width: 800px) {
+  .uni-system-choose-location .map {
+    top: 0;
+    height: 100%;
+  }
+  .uni-system-choose-location .map-move {
+    bottom: 10px;
+    right: 320px;
+  }
+  .uni-system-choose-location .menu {
+    top: 54px;
+    left: auto;
+    right: 10px;
+    width: 300px;
+    bottom: 10px;
+    max-height: 600px;
+    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
+  }
+}
 </style>

packages/uni-h5/src/framework/components/system-routes/index.js

-import ChooseLocation from './choose-location'
-import OpenLocation from './open-location'
-import PreviewImage from './preview-image'
-
-export default {
-  ChooseLocation,
-  OpenLocation,
-  PreviewImage
-}
+import ChooseLocation from './choose-location'
+import OpenLocation from './open-location'
+import PreviewImage from './preview-image'
+
+export default {
+  ChooseLocation,
+  OpenLocation,
+  PreviewImage,
+}

packages/uni-h5/src/framework/components/system-routes/open-location/index.vue

 <template>
   <div class="uni-system-open-location">
-    <system-header @back="_back">
-      位置
-    </system-header>
-    <div class="map-content">
+    <div
+      class="map-content"
+      :class="{ 'fix-position': isPoimarkerSrc }"
+    >
       <iframe
         ref="map"
         :src="src"
         allow="geolocation"
         sandbox="allow-scripts allow-same-origin allow-forms allow-top-navigation allow-modals allow-popups"
         frameborder="0"
-        @load="_load"
+        @load="_check"
       />
       <!-- 去这里 -->
-      <div
-        v-if="isPoimarkerSrc"
-        class="actTonav"
-        @click="_nav"
+      <div
+        v-if="isPoimarkerSrc"
+        class="actTonav"
+        @click="_nav"
       />
     </div>
+    <div
+      class="nav-btn-back"
+      @click="_back"
+    >
+      <i class="uni-btn-icon">&#xe601;</i>
+    </div>
   </div>
 </template>
 <script>
-import SystemHeader from '../system-header'
-
 const key = __uniConfig.qqMapKey
 const referer = 'uniapp'
 const poimarkerSrc = 'https://apis.map.qq.com/tools/poimarker'
 
 export default {
   name: 'SystemOpenLocation',
-  components: {
-    SystemHeader
-  },
   data () {
     const {
       latitude,
@@ -48,7 +49,7 @@ export default {
       name,
       address,
       src: latitude && longitude ? `${poimarkerSrc}?type=0&marker=coord:${latitude},${longitude};title:${name};addr:${address};&key=${key}&referer=${referer}` : '',
-      isPoimarkerSrc: false
+      isPoimarkerSrc: true
     }
   },
   methods: {
@@ -58,8 +59,9 @@ export default {
       } else {
         getApp().$router.back()
       }
+      this._check()
     },
-    _load () {
+    _check () {
       if (this.$refs.map.src.indexOf(poimarkerSrc) === 0) {
         this.isPoimarkerSrc = true
       } else {
@@ -68,44 +70,73 @@ export default {
     },
     _nav () {
       var url =
-          `https://map.qq.com/nav/drive#routes/page?transport=2&epointy=${this.latitude}&epointx=${this.longitude}&eword=${encodeURIComponent(this.name || '目的地')}&referer=${referer}`
+        `https://map.qq.com/nav/drive#routes/page?transport=2&epointy=${this.latitude}&epointx=${this.longitude}&eword=${encodeURIComponent(this.name || '目的地')}&referer=${referer}`
       this.$refs.map.src = url
     }
   }
 }
 </script>
 <style>
-	.uni-system-open-location {
-		display: block;
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background: #f8f8f8;
-	}
+.uni-system-open-location {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #f8f8f8;
+}
 
-	.map-content {
-		position: absolute;
-		left: 0;
-		top: 44px;
-		width: 100%;
-		bottom: 0;
-		overflow: hidden;
-	}
+.uni-system-open-location .nav-btn-back {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 44px;
+  height: 44px;
+  padding: 6px;
+  line-height: 32px;
+  font-size: 26px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+}
 
-	.map-content>iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-	}
+.uni-system-open-location .nav-btn-back > .uni-btn-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  line-height: inherit;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
 
-	.actTonav {
-		position: absolute;
-		right: 16px;
-		bottom: 56px;
-		width: 60px;
-		height: 60px;
-		border-radius: 60px;
-	}
+.uni-system-open-location .map-content {
+  position: absolute;
+  left: 0;
+  top: 0px;
+  width: 100%;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.uni-system-open-location .map-content.fix-position {
+  top: -74px;
+  bottom: -44px;
+}
+
+.uni-system-open-location .map-content > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.uni-system-open-location .actTonav {
+  position: absolute;
+  right: 16px;
+  bottom: 56px;
+  width: 60px;
+  height: 60px;
+  border-radius: 60px;
+}
 </style>

packages/uni-h5/src/framework/components/system-routes/preview-image/image-view.vue

+<template>
+  <v-uni-movable-area
+    class="image-view-area"
+    @touchstart.native="onTouchStart"
+    @touchmove.native="checkDirection"
+    @touchend.native="onTouchEnd"
+  >
+    <v-uni-movable-view
+      class="image-view-view"
+      :direction="direction"
+      inertia
+      scale
+      scale-min="1"
+      scale-max="4"
+      @scale="onScale"
+    >
+      <img
+        :src="src"
+        class="image-view-img"
+        @load="onImgLoad"
+      >
+    </v-uni-movable-view>
+  </v-uni-movable-area>
+</template>
+
+<script>
+export default {
+  name: 'ImageView',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      direction: 'none'
+    }
+  },
+  created () {
+    this.scale = 1
+    this.imgWidth = 0
+    this.imgHeight = 0
+    this.width = 0
+    this.height = 0
+  },
+  methods: {
+    onScale ({ detail: { scale } }) {
+      this.scale = scale
+    },
+    onImgLoad (event) {
+      const target = event.target
+      const rect = target.getBoundingClientRect()
+      this.imgWidth = rect.width
+      this.imgHeight = rect.height
+    },
+    onTouchStart (event) {
+      const $el = this.$el
+      const rect = $el.getBoundingClientRect()
+      this.width = rect.width
+      this.height = rect.height
+      this.checkDirection(event)
+    },
+    onTouchEnd (event) {
+      const scale = this.scale
+      const horizontal = scale * this.imgWidth > this.width
+      const vertical = scale * this.imgHeight > this.height
+      if (horizontal && vertical) {
+        this.direction = 'all'
+      } else if (horizontal) {
+        this.direction = 'horizontal'
+      } else if (vertical) {
+        this.direction = 'vertical'
+      } else {
+        this.direction = 'none'
+      }
+      this.checkDirection(event)
+    },
+    checkDirection (event) {
+      // 避免水平滑动和 swiper 冲突
+      const direction = this.direction
+      if (direction === 'all' || direction === 'horizontal') {
+        event.stopPropagation()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.image-view-area,
+.image-view-view {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.image-view-img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 100%;
+  max-width: 100%;
+}
+</style>

packages/uni-h5/src/framework/components/system-routes/preview-image/index.vue

 <template>
   <div
     class="uni-system-preview-image"
-    @click="_click"
+    @click="_click"
   >
     <v-uni-swiper
       :current.sync="index"
       :indicator-dots="false"
       :autoplay="false"
-      class="uni-swiper"
+      class="uni-system-preview-image-swiper"
     >
       <v-uni-swiper-item
         v-for="(src,key) in urls"
-        :key="key"
+        :key="key"
       >
-        <img
-          :src="src"
-          class="uni-preview-image"
-        >
+        <image-view :src="src" />
       </v-uni-swiper-item>
     </v-uni-swiper>
   </div>
 </template>
 
 <script>
+import imageView from './image-view'
+
 export default {
   name: 'SystemPreviewImage',
+  components: {
+    imageView
+  },
   data () {
     const {
       urls,
@@ -71,22 +73,15 @@ export default {
   left: 0;
   top: 0;
   width: 100%;
-  height: 100%;
-  background: black;
+  height: 100%;
+  z-index: 999;
+  background: rgba(0,0,0,0.8);
 }
-.uni-swiper {
+.uni-system-preview-image-swiper {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
 }
-.uni-preview-image {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  max-height: 100%;
-  max-width: 100%;
-}
 </style>

packages/uni-h5/src/framework/components/system-routes/system-header.vue

-<template>
-  <div class="system-header">
-    <div class="header-text">
-      <slot />
-    </div>
-    <div
-      class="header-btn header-back uni-btn-icon header-btn-icon"
-      @click="_back"
-    >
-      &#xe601;
-    </div>
-    <div
-      v-if="confirm"
-      class="header-btn header-confirm"
-      @click="_confirm"
-    >
-      <svg
-        class="header-btn-img"
-        width="200px"
-        height="200.00px"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M939.6960642844446 226.08613831111114c-14.635971697777777-13.725872355555557-37.719236835555556-13.070208568888889-51.445109191111115 1.6029502577777779L402.69993870222225 744.6571451733333 137.46159843555557 483.31364238222227c-14.344349013333334-14.12709944888889-37.392384-13.98030904888889-51.51948344888889 0.3640399644444444-14.12709944888889 14.30911886222222-13.945078897777778 37.392384 0.40122709333333334 51.482296319999996l291.8171704888889 287.48392106666665c0.10960327111111111 0.10960327111111111 0.2544366933333333 0.1448334222222222 0.3640399644444444 0.2544366933333333s0.1448334222222222 0.2544366933333333 0.2544366933333333 0.3640399644444444c2.293843057777778 2.1842397866666667 5.061329351111111 3.4231500799999997 7.719212373333333 4.879309937777777 1.3113264355555554 0.7652670577777777 2.43867648 1.8926159644444445 3.822419057777778 2.43867648 4.2960634311111106 1.6753664 8.846562417777779 2.548279751111111 13.361832391111111 2.548279751111111 4.769706666666666 0 9.539412195555554-0.9472864711111111 13.98030904888889-2.839903573333333 1.4933469866666664-0.6184766577777778 2.6578830222222223-1.8926159644444445 4.0416267377777775-2.6950701511111115 2.7302991644444448-1.6029502577777779 5.5702027377777785-2.9495068444444446 7.901232924444444-5.315766044444445 0.10960327111111111-0.10960327111111111 0.1448334222222222-0.2916238222222222 0.2544366933333333-0.40122709333333334 0.07241614222222222-0.10960327111111111 0.21920654222222222-0.1448334222222222 0.3268528355555555-0.2544366933333333L941.2579134577779 277.5273335466667C955.0953460622222 262.9305059555556 954.3320359822221 239.8844279466666 939.6960642844446 226.08613831111114z" />
-      </svg>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'SystemHeader',
-  props: {
-    confirm: {
-      type: Boolean,
-      default: false
-    }
-  },
-  created () {
-    document.title = this.$slots.default[0].text
-    UniServiceJSBridge.emit('onNavigationBarChange', {
-      titleText: document.title,
-      textColor: '#fff',
-      backgroundColor: '#000'
-    })
-  },
-  methods: {
-    _back () {
-      this.$emit('back')
-    },
-    _confirm () {
-      this.$emit('confirm')
-    }
-  }
-}
-</script>
-
-<style>
-  .system-header {
-    position: relative;
-    width: 100%;
-    height: 44px;
-    color: #fff;
-    background-color: black;
-    padding: 0 44px;
-    text-align: center;
-    line-height: 44px;
-    font-size: 16px;
-    box-sizing: border-box;
-  }
-
-  .system-header * {
-    box-sizing: border-box;
-  }
-
-  .header-text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .header-btn {
-    position: absolute;
-    width: 44px;
-    height: 44px;
-    top: 0;
-  }
-
-  .header-btn-img {
-    fill: #fff;
-    width: 50%;
-    height: 50%;
-    margin: 25%;
-  }
-
-  .header-back {
-    left: 0;
-  }
-
-  .header-confirm {
-    right: 0;
-  }
-
-  .header-btn-icon {
-    font-size: 27px;
-    line-height: 44px;
-  }
-</style>

packages/uni-h5/src/framework/plugin/components.ts

@@ -2,24 +2,28 @@ import { App } from 'vue'
 
 import { COMPONENT_NAME_PREFIX } from '@dcloudio/uni-shared'
 
-import AppComponent from '../components/app/index.vue'
-import PageComponent from '../components/page/index.vue'
-import AsyncErrorComponent from '../components/async-error/index.vue'
-import AsyncLoadingComponent from '../components/async-loading/index.vue'
+import AppComponent from '../components/app/index'
+// import PageComponent from '../components/page/index.vue'
+// import AsyncErrorComponent from '../components/async-error/index.vue'
+// import AsyncLoadingComponent from '../components/async-loading/index.vue'
+
+import LayoutComponent from '../components/app/test.vue'
 
 export function initSystemComponents(app: App) {
   // @ts-ignore
   AppComponent.name = COMPONENT_NAME_PREFIX + AppComponent.name
   // @ts-ignore
-  PageComponent.name = COMPONENT_NAME_PREFIX + PageComponent.name
+  // PageComponent.name = COMPONENT_NAME_PREFIX + PageComponent.name
   // @ts-ignore
-  AsyncErrorComponent.name = COMPONENT_NAME_PREFIX + AsyncErrorComponent.name
+  // AsyncErrorComponent.name = COMPONENT_NAME_PREFIX + AsyncErrorComponent.name
   // @ts-ignore
-  AsyncLoadingComponent.name =
-    COMPONENT_NAME_PREFIX + AsyncLoadingComponent.name
+  // AsyncLoadingComponent.name =
+  //   COMPONENT_NAME_PREFIX + AsyncLoadingComponent.name
 
   app.component(AppComponent.name, AppComponent)
-  app.component(PageComponent.name, PageComponent)
-  app.component(AsyncErrorComponent.name, AsyncErrorComponent)
-  app.component(AsyncLoadingComponent.name, AsyncLoadingComponent)
+  // app.component(PageComponent.name, PageComponent)
+  // app.component(AsyncErrorComponent.name, AsyncErrorComponent)
+  // app.component(AsyncLoadingComponent.name, AsyncLoadingComponent)
+
+  app.component(LayoutComponent.name, LayoutComponent)
 }

packages/uni-h5/src/framework/plugin/index.ts

@@ -5,8 +5,9 @@ import { initView, initService } from '@dcloudio/uni-core'
 import { isCustomElement } from '@dcloudio/uni-shared'
 
 import { initRouter } from './router'
-// import { initSystemComponents } from './components'
+import { initSystemComponents } from './components'
 import { initMixin } from './mixin'
+import { initProvide } from './provide'
 
 export default {
   install(app: App) {
@@ -15,12 +16,9 @@ export default {
     initApp(app)
     initView(app)
     initService(app)
-    // initSystemComponents(app)
+    initSystemComponents(app)
 
     initMixin(app)
-
-    if (__UNI_FEATURE_PAGES__) {
-      initRouter(app)
-    }
+    initProvide(app, (__UNI_FEATURE_PAGES__ && initRouter(app)) || undefined)
   },
 }

packages/uni-h5/src/framework/plugin/page.ts

-import { computed, nextTick, VNode, ComponentPublicInstance } from 'vue'
+import {
+  computed,
+  nextTick,
+  VNode,
+  ComponentPublicInstance,
+  ComputedRef,
+} from 'vue'
 import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'
 
 const SEP = '$$'
@@ -24,6 +30,10 @@ export function isPage(vm: ComponentPublicInstance) {
 }
 
 function initPublicPage(route: RouteLocationNormalizedLoaded) {
+  if (!route) {
+    const { path } = __uniRoutes[0]
+    return { id, path, route: path.substr(1), fullPath: path }
+  }
   return {
     id,
     path: route.path,

packages/uni-h5/src/framework/plugin/provide/index.ts

+import { App } from 'vue'
+import { Router } from 'vue-router'
+import { PolySymbol } from '@dcloudio/uni-core'
+import { initLayout } from './layout'
+
+const layoutKey = PolySymbol(__DEV__ ? 'layout' : 'l')
+
+export function initProvide(app: App, router?: Router) {
+  app.provide(layoutKey, initLayout(router))
+}

packages/uni-h5/src/framework/plugin/provide/layout.ts

+import { computed, nextTick, Ref, ref } from 'vue'
+import { Router } from 'vue-router'
+import { hasOwn } from '@vue/shared'
+import { RESPONSIVE_MIN_WIDTH } from '@dcloudio/uni-shared'
+import { checkMinWidth } from '../../../helpers/dom'
+
+interface ProvideLayout {}
+
+// const windowTypes = ['top', 'left', 'right']
+
+// 1. 查找minWidth，确认是否需要responsive
+export function initLayout(router?: Router): ProvideLayout {
+  if (!__UNI_FEATURE_RESPONSIVE__) {
+    return {}
+  }
+  initTopWindow(router)
+  initLeftWindow()
+  initRightWindow()
+  return {}
+}
+
+function initMediaQuery(
+  minWidth: number,
+  callback: (ev: MediaQueryListEvent) => void
+) {
+  const mediaQueryList = window.matchMedia('(min-width: ' + minWidth + 'px)')
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener('change', callback)
+  } else {
+    mediaQueryList.addListener(callback)
+  }
+}
+
+interface TopWindowRes {
+  matchTopWindow: Ref<boolean>
+  topWindowStyle: Ref<Record<string, any>>
+  showTopWindow: Ref<boolean>
+}
+
+function initTopWindow(router?: Router) {
+  const res: TopWindowRes = {
+    matchTopWindow: ref(false),
+    topWindowStyle: ref({}),
+    showTopWindow: ref(false),
+  }
+  if (__UNI_FEATURE_TOPWINDOW__) {
+    return _initTopWindow(res, router)
+  }
+  return res
+}
+
+function _initTopWindow(res: TopWindowRes, router?: Router) {
+  let topWindowMinWidth = RESPONSIVE_MIN_WIDTH
+  const { matchMedia, style } = __uniConfig.topWindow!
+  if (matchMedia && hasOwn(matchMedia, 'minWidth')) {
+    topWindowMinWidth = matchMedia.minWidth!
+  }
+  if (checkMinWidth(topWindowMinWidth)) {
+    initMediaQuery(topWindowMinWidth, (ev) => {
+      res.matchTopWindow.value = ev.matches
+      nextTick(() => {})
+    })
+  }
+  res.topWindowStyle = ref(style!)
+  res.showTopWindow = computed(() => {
+    if (!res.matchTopWindow.value) {
+      // 未match
+      return false
+    }
+    if (router && !router.currentRoute.value.meta.topWindow) {
+      // 当前路由不支持
+      return false
+    }
+    // TODO API
+    return true
+  })
+  return res
+}
+
+function initLeftWindow() {
+  let leftWindowMinWidth = RESPONSIVE_MIN_WIDTH
+  if (__UNI_FEATURE_LEFTWINDOW__) {
+    const { matchMedia } = __uniConfig.leftWindow!
+    if (matchMedia && hasOwn(matchMedia, 'minWidth')) {
+      leftWindowMinWidth = matchMedia.minWidth!
+    }
+  }
+  return { leftWindowMinWidth }
+}
+
+function initRightWindow() {
+  let rightWindowMinWidth = RESPONSIVE_MIN_WIDTH
+  if (__UNI_FEATURE_RIGHTWINDOW__) {
+    const { matchMedia } = __uniConfig.rightWindow!
+    if (matchMedia && hasOwn(matchMedia, 'minWidth')) {
+      rightWindowMinWidth = matchMedia.minWidth!
+    }
+  }
+  return { rightWindowMinWidth }
+}

packages/uni-h5/src/framework/plugin/router.ts

@@ -14,7 +14,9 @@ import {
 import { getApp } from './app'
 
 export function initRouter(app: App) {
-  app.use(createAppRouter(createRouter(createRouterOptions())))
+  const router = createAppRouter(createRouter(createRouterOptions()))
+  app.use(router)
+  return router
 }
 
 const scrollBehavior: RouterOptions['scrollBehavior'] = (

packages/uni-h5/src/helpers/dom.ts

+export function appendCss(css: string, cssId: string, replace = false) {
+  let style = document.getElementById(cssId) as HTMLStyleElement | null
+  if (style && replace) {
+    style.parentNode!.removeChild(style)
+    style = null
+  }
+  if (!style) {
+    style = document.createElement('style')
+    style.type = 'text/css'
+    cssId && (style.id = cssId)
+    document.getElementsByTagName('head')[0].appendChild(style)
+  }
+  style.appendChild(document.createTextNode(css))
+}
+
+const screen = window.screen
+const documentElement = document.documentElement
+
+let styleObj: CSSStyleDeclaration
+export function updateCssVar(name: string, value: string) {
+  if (!styleObj) {
+    styleObj = documentElement.style
+  }
+  styleObj.setProperty(name, value)
+}
+
+export function checkMinWidth(minWidth: number) {
+  const sizes = [
+    window.outerWidth,
+    window.outerHeight,
+    screen.width,
+    screen.height,
+    documentElement.clientWidth,
+    documentElement.clientHeight,
+  ]
+  return Math.max.apply(null, sizes) > minWidth
+}

packages/uni-h5/src/helpers/getRealPath.ts

+import { getRealRoute } from '@dcloudio/uni-core/helpers/getRealRoute'
+
+const SCHEME_RE = /^([a-z-]+:)?\/\//i
+const DATA_RE = /^data:.*,.*/
+
+function addBase(filePath: string) {
+  const base = __uniConfig.router.base
+  if (!base) {
+    return filePath
+  }
+  if (base !== '/') {
+    // 部分地址已经带了base(如被webpack处理过的资源自动带了publicPath)
+    if (('/' + filePath).indexOf(base) === 0) {
+      return '/' + filePath
+    }
+  }
+  return base + filePath
+}
+
+export function getRealPath(filePath: string) {
+  // 相对路径模式对静态资源路径特殊处理
+  if (__uniConfig.router.base === './') {
+    filePath = filePath.replace(/^\.\/static\//, '/static/')
+  }
+  if (filePath.indexOf('/') === 0) {
+    if (filePath.indexOf('//') === 0) {
+      filePath = 'https:' + filePath
+    } else {
+      return addBase(filePath.substr(1))
+    }
+  }
+  // 网络资源或base64
+  if (
+    SCHEME_RE.test(filePath) ||
+    DATA_RE.test(filePath) ||
+    filePath.indexOf('blob:') === 0
+  ) {
+    return filePath
+  }
+
+  const pages = getCurrentPages()
+  if (pages.length) {
+    return addBase(
+      getRealRoute(pages[pages.length - 1].$page.route, filePath).substr(1)
+    )
+  }
+
+  return filePath
+}

packages/uni-h5/src/framework/components/page/hex-to-rgba.js → packages/uni-h5/src/helpers/hexToRgba.ts

-export function hexToRgba(hex) {
+export function hexToRgba(hex: string) {
   let r
   let g
   let b
@@ -29,6 +29,6 @@ export function hexToRgba(hex) {
   return {
     r,
     g,
-    b
+    b,
   }
 }

packages/uni-h5/types/shims-vue-router.d.ts

@@ -3,5 +3,8 @@ declare module 'vue-router' {
   interface RouteMeta {
     isEntry: boolean
     isTabBar: boolean
+    topWindow?: boolean
+    leftWindow?: boolean
+    rightWindow?: boolean
   }
 }

packages/uni-h5/vite.config.ts

@@ -2,7 +2,7 @@ import path from 'path'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import replace from '@rollup/plugin-replace'
 
 import { isCustomElement } from '../uni-shared'
@@ -31,7 +31,7 @@ export default defineConfig({
       },
       {
         find: '@dcloudio/uni-core',
-        replacement: resolve('../uni-core/src/index.ts'),
+        replacement: resolve('../uni-core/src'),
       },
       {
         find: '@dcloudio/uni-components',
@@ -47,6 +47,7 @@ export default defineConfig({
         },
       },
     }),
+    vueJsx({ optimize: true, isCustomElement }),
   ],
   build: {
     minify: false,

packages/uni-shared/dist/uni-shared.cjs.js

@@ -6,6 +6,7 @@ var shared = require('@vue/shared');
 
 const NAVBAR_HEIGHT = 44;
 const TABBAR_HEIGHT = 50;
+const RESPONSIVE_MIN_WIDTH = 768;
 const COMPONENT_NAME_PREFIX = 'VUni';
 
 function debounce(fn, delay) {
@@ -52,68 +53,68 @@ function stringifyQuery(obj, encodeStr = encode) {
 }
 
 const BUILT_IN_TAGS = [
-    'uni-ad',
-    'uni-audio',
-    'uni-button',
-    'uni-camera',
-    'uni-canvas',
-    'uni-checkbox',
-    'uni-checkbox-group',
-    'uni-cover-image',
-    'uni-cover-view',
-    'uni-editor',
-    'uni-form',
-    'uni-functional-page-navigator',
-    'uni-icon',
-    'uni-image',
-    'uni-input',
-    'uni-label',
-    'uni-live-player',
-    'uni-live-pusher',
-    'uni-map',
-    'uni-movable-area',
-    'uni-movable-view',
-    'uni-navigator',
-    'uni-official-account',
-    'uni-open-data',
-    'uni-picker',
-    'uni-picker-view',
-    'uni-picker-view-column',
-    'uni-progress',
-    'uni-radio',
-    'uni-radio-group',
-    'uni-rich-text',
-    'uni-scroll-view',
-    'uni-slider',
-    'uni-swiper',
-    'uni-swiper-item',
-    'uni-switch',
-    'uni-text',
-    'uni-textarea',
-    'uni-video',
-    'uni-view',
-    'uni-web-view',
-];
+    'ad',
+    'audio',
+    'button',
+    'camera',
+    'canvas',
+    'checkbox',
+    'checkbox-group',
+    'cover-image',
+    'cover-view',
+    'editor',
+    'form',
+    'functional-page-navigator',
+    'icon',
+    'image',
+    'input',
+    'label',
+    'live-player',
+    'live-pusher',
+    'map',
+    'movable-area',
+    'movable-view',
+    'navigator',
+    'official-account',
+    'open-data',
+    'picker',
+    'picker-view',
+    'picker-view-column',
+    'progress',
+    'radio',
+    'radio-group',
+    'rich-text',
+    'scroll-view',
+    'slider',
+    'swiper',
+    'swiper-item',
+    'switch',
+    'text',
+    'textarea',
+    'video',
+    'view',
+    'web-view',
+].map((tag) => 'uni-' + tag);
 const TAGS = [
-    'uni-app',
-    'uni-layout',
-    'uni-content',
-    'uni-main',
-    'uni-top-window',
-    'uni-left-window',
-    'uni-right-window',
-    'uni-tabbar',
-    'uni-page',
-    'uni-page-head',
-    'uni-page-wrapper',
-    'uni-page-body',
-    'uni-page-refresh',
-    'uni-actionsheet',
-    'uni-modal',
-    'uni-toast',
-    'uni-resize-sensor',
-    'uni-shadow-root',
-];
+    'app',
+    'layout',
+    'content',
+    'main',
+    'top-window',
+    'left-window',
+    'right-window',
+    'tabbar',
+    'page',
+    'page-head',
+    'page-wrapper',
+    'page-body',
+    'page-refresh',
+    'actionsheet',
+    'modal',
+    'toast',
+    'resize-sensor',
+    'shadow-root',
+].map((tag) => 'uni-' + tag);
 function isBuiltInComponent(tag) {
     return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1;
 }
@@ -129,6 +130,7 @@ exports.BUILT_IN_TAGS = BUILT_IN_TAGS;
 exports.COMPONENT_NAME_PREFIX = COMPONENT_NAME_PREFIX;
 exports.COMPONENT_PREFIX = COMPONENT_PREFIX;
 exports.NAVBAR_HEIGHT = NAVBAR_HEIGHT;
+exports.RESPONSIVE_MIN_WIDTH = RESPONSIVE_MIN_WIDTH;
 exports.TABBAR_HEIGHT = TABBAR_HEIGHT;
 exports.TAGS = TAGS;
 exports.debounce = debounce;

packages/uni-shared/dist/uni-shared.d.ts

@@ -20,6 +20,8 @@ export declare const NAVBAR_HEIGHT = 44;
 
 export declare function plusReady(callback: () => void): void;
 
+export declare const RESPONSIVE_MIN_WIDTH = 768;
+
 export declare function stringifyQuery(obj?: Record<string, any>, encodeStr?: typeof encodeURIComponent): string;
 
 export declare const TABBAR_HEIGHT = 50;

packages/uni-shared/dist/uni-shared.esm.js

@@ -2,6 +2,7 @@ import { isPlainObject, isHTMLTag, isSVGTag } from '@vue/shared';
 
 const NAVBAR_HEIGHT = 44;
 const TABBAR_HEIGHT = 50;
+const RESPONSIVE_MIN_WIDTH = 768;
 const COMPONENT_NAME_PREFIX = 'VUni';
 
 function debounce(fn, delay) {
@@ -48,68 +49,68 @@ function stringifyQuery(obj, encodeStr = encode) {
 }
 
 const BUILT_IN_TAGS = [
-    'uni-ad',
-    'uni-audio',
-    'uni-button',
-    'uni-camera',
-    'uni-canvas',
-    'uni-checkbox',
-    'uni-checkbox-group',
-    'uni-cover-image',
-    'uni-cover-view',
-    'uni-editor',
-    'uni-form',
-    'uni-functional-page-navigator',
-    'uni-icon',
-    'uni-image',
-    'uni-input',
-    'uni-label',
-    'uni-live-player',
-    'uni-live-pusher',
-    'uni-map',
-    'uni-movable-area',
-    'uni-movable-view',
-    'uni-navigator',
-    'uni-official-account',
-    'uni-open-data',
-    'uni-picker',
-    'uni-picker-view',
-    'uni-picker-view-column',
-    'uni-progress',
-    'uni-radio',
-    'uni-radio-group',
-    'uni-rich-text',
-    'uni-scroll-view',
-    'uni-slider',
-    'uni-swiper',
-    'uni-swiper-item',
-    'uni-switch',
-    'uni-text',
-    'uni-textarea',
-    'uni-video',
-    'uni-view',
-    'uni-web-view',
-];
+    'ad',
+    'audio',
+    'button',
+    'camera',
+    'canvas',
+    'checkbox',
+    'checkbox-group',
+    'cover-image',
+    'cover-view',
+    'editor',
+    'form',
+    'functional-page-navigator',
+    'icon',
+    'image',
+    'input',
+    'label',
+    'live-player',
+    'live-pusher',
+    'map',
+    'movable-area',
+    'movable-view',
+    'navigator',
+    'official-account',
+    'open-data',
+    'picker',
+    'picker-view',
+    'picker-view-column',
+    'progress',
+    'radio',
+    'radio-group',
+    'rich-text',
+    'scroll-view',
+    'slider',
+    'swiper',
+    'swiper-item',
+    'switch',
+    'text',
+    'textarea',
+    'video',
+    'view',
+    'web-view',
+].map((tag) => 'uni-' + tag);
 const TAGS = [
-    'uni-app',
-    'uni-layout',
-    'uni-content',
-    'uni-main',
-    'uni-top-window',
-    'uni-left-window',
-    'uni-right-window',
-    'uni-tabbar',
-    'uni-page',
-    'uni-page-head',
-    'uni-page-wrapper',
-    'uni-page-body',
-    'uni-page-refresh',
-    'uni-actionsheet',
-    'uni-modal',
-    'uni-toast',
-    'uni-resize-sensor',
-    'uni-shadow-root',
-];
+    'app',
+    'layout',
+    'content',
+    'main',
+    'top-window',
+    'left-window',
+    'right-window',
+    'tabbar',
+    'page',
+    'page-head',
+    'page-wrapper',
+    'page-body',
+    'page-refresh',
+    'actionsheet',
+    'modal',
+    'toast',
+    'resize-sensor',
+    'shadow-root',
+].map((tag) => 'uni-' + tag);
 function isBuiltInComponent(tag) {
     return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1;
 }
@@ -121,4 +122,4 @@ function isNativeTag(tag) {
 }
 const COMPONENT_PREFIX = 'v-uni-';
 
-export { BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, NAVBAR_HEIGHT, TABBAR_HEIGHT, TAGS, debounce, isBuiltInComponent, isCustomElement, isNativeTag, plusReady, stringifyQuery };
+export { BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, NAVBAR_HEIGHT, RESPONSIVE_MIN_WIDTH, TABBAR_HEIGHT, TAGS, debounce, isBuiltInComponent, isCustomElement, isNativeTag, plusReady, stringifyQuery };

packages/uni-shared/src/constants.ts

 export const NAVBAR_HEIGHT = 44
 export const TABBAR_HEIGHT = 50
+export const RESPONSIVE_MIN_WIDTH = 768
 
 export const COMPONENT_NAME_PREFIX = 'VUni'

packages/uni-shared/src/tags.ts

 import { isHTMLTag, isSVGTag } from '@vue/shared'
 
 export const BUILT_IN_TAGS = [
-  'uni-ad',
-  'uni-audio',
-  'uni-button',
-  'uni-camera',
-  'uni-canvas',
-  'uni-checkbox',
-  'uni-checkbox-group',
-  'uni-cover-image',
-  'uni-cover-view',
-  'uni-editor',
-  'uni-form',
-  'uni-functional-page-navigator',
-  'uni-icon',
-  'uni-image',
-  'uni-input',
-  'uni-label',
-  'uni-live-player',
-  'uni-live-pusher',
-  'uni-map',
-  'uni-movable-area',
-  'uni-movable-view',
-  'uni-navigator',
-  'uni-official-account',
-  'uni-open-data',
-  'uni-picker',
-  'uni-picker-view',
-  'uni-picker-view-column',
-  'uni-progress',
-  'uni-radio',
-  'uni-radio-group',
-  'uni-rich-text',
-  'uni-scroll-view',
-  'uni-slider',
-  'uni-swiper',
-  'uni-swiper-item',
-  'uni-switch',
-  'uni-text',
-  'uni-textarea',
-  'uni-video',
-  'uni-view',
-  'uni-web-view',
-]
+  'ad',
+  'audio',
+  'button',
+  'camera',
+  'canvas',
+  'checkbox',
+  'checkbox-group',
+  'cover-image',
+  'cover-view',
+  'editor',
+  'form',
+  'functional-page-navigator',
+  'icon',
+  'image',
+  'input',
+  'label',
+  'live-player',
+  'live-pusher',
+  'map',
+  'movable-area',
+  'movable-view',
+  'navigator',
+  'official-account',
+  'open-data',
+  'picker',
+  'picker-view',
+  'picker-view-column',
+  'progress',
+  'radio',
+  'radio-group',
+  'rich-text',
+  'scroll-view',
+  'slider',
+  'swiper',
+  'swiper-item',
+  'switch',
+  'text',
+  'textarea',
+  'video',
+  'view',
+  'web-view',
+].map((tag) => 'uni-' + tag)
 
 export const TAGS = [
-  'uni-app',
-  'uni-layout',
-  'uni-content',
-  'uni-main',
-  'uni-top-window',
-  'uni-left-window',
-  'uni-right-window',
-  'uni-tabbar',
-  'uni-page',
-  'uni-page-head',
-  'uni-page-wrapper',
-  'uni-page-body',
-  'uni-page-refresh',
-  'uni-actionsheet',
-  'uni-modal',
-  'uni-toast',
-  'uni-resize-sensor',
-  'uni-shadow-root',
-]
+  'app',
+  'layout',
+  'content',
+  'main',
+  'top-window',
+  'left-window',
+  'right-window',
+  'tabbar',
+  'page',
+  'page-head',
+  'page-wrapper',
+  'page-body',
+  'page-refresh',
+  'actionsheet',
+  'modal',
+  'toast',
+  'resize-sensor',
+  'shadow-root',
+].map((tag) => 'uni-' + tag)
 
 export function isBuiltInComponent(tag: string) {
   return BUILT_IN_TAGS.indexOf('uni-' + tag) !== -1

packages/vite-plugin-uni/src/config/define.ts

@@ -4,17 +4,30 @@ import { parse } from 'jsonc-parser'
 import { ConfigEnv, UserConfig } from 'vite'
 import { VitePluginUniResolvedOptions } from '..'
 
+interface ProjectFeatures {}
 interface PagesFeatures {
   pages: boolean
   tabBar: boolean
+  topWindow: boolean
+  leftWindow: boolean
+  rightWindow: boolean
+  pullDownRefresh: boolean
 }
 interface ManifestFeatures {
   wx: boolean
   wxs: boolean
   promise: boolean
+  longpress: boolean
   routerMode: '"hash"' | '"history"'
 }
 
+function resolveProjectFeature(inputDir: string, { command }: ConfigEnv) {
+  const features: ProjectFeatures = {}
+  if (command === 'build') {
+  }
+  return features
+}
+
 function resolvePagesFeature(
   inputDir: string,
   { command }: ConfigEnv
@@ -22,18 +35,48 @@ function resolvePagesFeature(
   const features: PagesFeatures = {
     pages: true, // 是否多页面
     tabBar: true, // 是否启用tabBar
+    topWindow: false, // 是否启用topWindow
+    leftWindow: false, // 是否启用leftWindow
+    rightWindow: false, // 是否启用rightWindow
+    pullDownRefresh: false, // 是否启用下拉刷新
   }
-  if (command === 'build') {
-    const { tabBar, pages } = parse(
-      fs.readFileSync(path.join(inputDir, 'pages.json'), 'utf8')
-    )
-    if (pages && pages.length === 1) {
-      features.pages = false
-    }
-    if (!(tabBar && tabBar.list && tabBar.list.length)) {
-      features.tabBar = false
+
+  const {
+    tabBar,
+    pages,
+    topWindow,
+    leftWindow,
+    rightWindow,
+    globalStyle,
+  } = parse(fs.readFileSync(path.join(inputDir, 'pages.json'), 'utf8'))
+  if (pages && pages.length === 1) {
+    features.pages = false
+  }
+  if (!(tabBar && tabBar.list && tabBar.list.length)) {
+    features.tabBar = false
+  }
+  if (topWindow && topWindow.path) {
+    features.topWindow = true
+  }
+  if (leftWindow && leftWindow.path) {
+    features.leftWindow = true
+  }
+  if (rightWindow && rightWindow.path) {
+    features.rightWindow = true
+  }
+  if (globalStyle && globalStyle.enablePullDownRefresh) {
+    features.pullDownRefresh = true
+  } else {
+    if (
+      pages.find(
+        (page: { style: { enablePullDownRefresh: any } }) =>
+          page.style && page.style.enablePullDownRefresh
+      )
+    ) {
+      features.pullDownRefresh = true
     }
   }
+
   return features
 }
 
@@ -42,6 +85,7 @@ function resolveManifestFeature(inputDir: string): ManifestFeatures {
     wx: true, // 是否启用小程序的组件实例 API，如：selectComponent 等（uni-core/src/service/plugin/appConfig）
     wxs: true, // 是否启用 wxs 支持，如：getComponentDescriptor 等（uni-core/src/view/plugin/appConfig）
     promise: false, // 是否启用旧版本的 promise 支持（即返回[err,res]的格式）
+    longpress: true, // 是否启用longpress
     routerMode: '"hash"', // 启用的 router 类型（uni-h5/src/framework/plugin/router）
   }
   const manifest = parse(
@@ -62,16 +106,35 @@ export function createDefine(
   { inputDir }: VitePluginUniResolvedOptions,
   env: ConfigEnv
 ): UserConfig['define'] {
-  const { wx, wxs, promise, routerMode, pages, tabBar } = Object.assign(
+  const {
+    wx,
+    wxs,
+    pages,
+    tabBar,
+    promise,
+    longpress,
+    routerMode,
+    topWindow,
+    leftWindow,
+    rightWindow,
+    pullDownRefresh,
+  } = Object.assign(
     resolveManifestFeature(inputDir),
-    resolvePagesFeature(inputDir, env)
+    resolvePagesFeature(inputDir, env),
+    resolveProjectFeature(inputDir, env)
   )
   return {
     __UNI_FEATURE_WX__: wx,
     __UNI_FEATURE_WXS__: wxs,
     __UNI_FEATURE_PROMISE__: promise,
+    __UNI_FEATURE_LONGPRESS__: longpress,
     __UNI_FEATURE_ROUTER_MODE__: routerMode,
     __UNI_FEATURE_PAGES__: pages,
     __UNI_FEATURE_TABBAR__: tabBar,
+    __UNI_FEATURE_TOPWINDOW__: topWindow,
+    __UNI_FEATURE_LEFTWINDOW__: leftWindow,
+    __UNI_FEATURE_RIGHTWINDOW__: rightWindow,
+    __UNI_FEATURE_RESPONSIVE__: topWindow || leftWindow || rightWindow,
+    __UNI_FEATURE_PULL_DOWN_REFRESH__: pullDownRefresh,
   }
 }

packages/vite-plugin-uni/src/configResolved/plugins/pagesJson.ts

@@ -40,15 +40,6 @@ export function uniPagesJsonPlugin(
   }
 }
 
-interface PageOptions {
-  path: string
-  style?: Record<string, any>
-}
-interface SubpackagesOptions {
-  root: string
-  pages: PageOptions[]
-}
-
 interface PageRouteOptions {
   name: string
   path: string
@@ -76,6 +67,7 @@ function parsePagesJson(
   const manifestJsonPath = slash(
     path.resolve(options.inputDir, 'manifest.json.js')
   )
+
   return `
 import { defineAsyncComponent, resolveComponent, createVNode, withCtx, openBlock, createBlock } from 'vue'
 import { PageComponent, AsyncLoadingComponent, AsyncErrorComponent } from '@dcloudio/uni-h5'
@@ -131,8 +123,8 @@ function formatPageStyle(pageStyle?: Record<string, any>) {
   }
 }
 
-function formatSubpackages(subpackages: SubpackagesOptions[]) {
-  const pages: PageOptions[] = []
+function formatSubpackages(subpackages?: UniApp.PagesJsonSubpackagesOptions[]) {
+  const pages: UniApp.PagesJsonPageOptions[] = []
   if (Array.isArray(subpackages)) {
     subpackages.forEach(({ root, pages: subPages }) => {
       if (root && subPages.length) {
@@ -147,7 +139,7 @@ function formatSubpackages(subpackages: SubpackagesOptions[]) {
 }
 
 function formatPagesJson(jsonStr: string) {
-  let pagesJson: Record<string, any> = {
+  let pagesJson: UniApp.PagesJson = {
     pages: [],
   }
   // preprocess
@@ -171,7 +163,7 @@ function formatPageIdentifier(path: string) {
   return capitalize(camelize(path.replace(/\//g, '-')))
 }
 
-function generatePageDefineCode(pageOptions: PageOptions) {
+function generatePageDefineCode(pageOptions: UniApp.PagesJsonPageOptions) {
   return `const ${formatPageIdentifier(
     pageOptions.path
   )} = defineAsyncComponent({
@@ -184,16 +176,16 @@ function generatePageDefineCode(pageOptions: PageOptions) {
 })`
 }
 
-function generatePagesDefineCode(pagesJson: Record<string, any>) {
-  return (pagesJson.pages as PageOptions[])
+function generatePagesDefineCode(pagesJson: UniApp.PagesJson) {
+  return pagesJson.pages
     .map((pageOptions) => generatePageDefineCode(pageOptions))
     .join('\n')
 }
 
-function formatPagesRoute(pagesJson: Record<string, any>): PageRouteOptions[] {
+function formatPagesRoute(pagesJson: UniApp.PagesJson): PageRouteOptions[] {
   const firstPagePath = pagesJson.pages[0].path
   const tabBarList = (pagesJson.tabBar && pagesJson.tabBar.list) || []
-  return (pagesJson.pages as PageOptions[]).map((pageOptions) => {
+  return pagesJson.pages.map((pageOptions) => {
     const path = pageOptions.path
     const name = formatPageIdentifier(path)
     const isEntry = firstPagePath === path ? true : undefined
@@ -242,7 +234,7 @@ function generatePagesRoute(pagesRouteOptions: PageRouteOptions[]) {
   return pagesRouteOptions.map((pageOptions) => generatePageRoute(pageOptions))
 }
 
-function generateRoutes(pagesJson: Record<string, any>) {
+function generateRoutes(pagesJson: UniApp.PagesJson) {
   return `window.__uniRoutes=[${[
     `{ path: '/${pagesJson.pages[0].path}', redirect: '/' }`,
     ...generatePagesRoute(formatPagesRoute(pagesJson)),

packages/vite-plugin-uni/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src"]
+  "include": ["src", "../shims-uni-app.d.ts"]
 }

tsconfig.json

@@ -13,6 +13,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "removeComments": false,
+    "skipLibCheck": true,
     "jsx": "preserve",
     "lib": ["esnext", "dom"],
     "types": [

yarn.lock

@@ -21,7 +21,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.11.tgz#9c8fe523c206979c9a81b1e12fe50c1254f1aa35"
   integrity sha512-BwKEkO+2a67DcFeS3RLl0Z3Gs2OvdXewuWjc1Hfokhb5eQWP9YRYH1/+VrVZvql2CfjOiNGqSAFOYt4lsqTHzg==
 
-"@babel/core@^7.1.0", "@babel/core@^7.7.5":
+"@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.7.5":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.10.tgz#07de050bbd8193fcd8a3c27918c0890613a94559"
   integrity sha512-bfIYcT0BdKeAZrovpMqX2Mx5NrgAckGbwT982AkdS5GNfn3KMGiprlBAtmBcFZRUmpaufS6WZFP8trvx8ptFDw==
@@ -62,6 +62,17 @@
     browserslist "^4.14.5"
     semver "^6.3.0"
 
+"@babel/helper-create-class-features-plugin@^7.13.0":
+  version "7.13.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz#30d30a005bca2c953f5653fc25091a492177f4f6"
+  integrity sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==
+  dependencies:
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-member-expression-to-functions" "^7.13.0"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/helper-replace-supers" "^7.13.0"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+
 "@babel/helper-function-name@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
@@ -85,7 +96,7 @@
   dependencies:
     "@babel/types" "^7.13.0"
 
-"@babel/helper-module-imports@^7.12.13":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
   integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
@@ -114,7 +125,7 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.8.0":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.8.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
@@ -197,7 +208,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-syntax-import-meta@^7.8.3":
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -211,6 +222,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.0.0":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15"
+  integrity sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -260,7 +278,23 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/template@^7.12.13", "@babel/template@^7.3.3":
+"@babel/plugin-syntax-typescript@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz#9dff111ca64154cef0f4dc52cf843d9f12ce4474"
+  integrity sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-transform-typescript@^7.12.1":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz#4a498e1f3600342d2a9e61f60131018f55774853"
+  integrity sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.13.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-typescript" "^7.12.13"
+
+"@babel/template@^7.0.0", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
   integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
@@ -269,7 +303,7 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.0.tgz#6d95752475f86ee7ded06536de309a65fc8966cc"
   integrity sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==
@@ -704,9 +738,9 @@
   integrity sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==
 
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
-  version "7.1.13"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.13.tgz#bc6eea53975fdf163aff66c086522c6f293ae4cf"
-  integrity sha512-CC6amBNND16pTk4K3ZqKIaba6VGKAQs3gMjEY17FVd56oI/ZWt9OhS6riYiWv9s8ENbYUi7p8lgqb0QHQvUKQQ==
+  version "7.1.14"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
+  integrity sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
@@ -911,11 +945,42 @@
     "@typescript-eslint/types" "4.18.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vitejs/plugin-vue-jsx@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-1.1.2.tgz#d240d8d73c2f8e34f32ade6d06e709a959d1f2a1"
+  integrity sha512-3m+0amZwkn0g/D3OqqTsG2qe82LvIaQYqAi3Klpx2vEdaBU5pgok5Qlp6eMGr6QQRDLa7HAKZbPCVV5yAPfOpg==
+  dependencies:
+    "@babel/core" "^7.12.10"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.12.1"
+    "@vue/babel-plugin-jsx" "^1.0.3"
+    hash-sum "^2.0.0"
+
 "@vitejs/plugin-vue@^1.0.4":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.1.5.tgz#fa1e8e5e049c35e213672e33f73fe81706ad5dbe"
   integrity sha512-4DV8VPYo8/OR1YsnK39QN16xhKENt2XvcmJxqfRtyz75kvbjBYh1zTSHLp7XsXqv4R2I+fOZlbEBvxosMYLcPA==
 
+"@vue/babel-helper-vue-transform-on@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
+  integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
+
+"@vue/babel-plugin-jsx@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.3.tgz#ad5ee86ebc9fc40900add9914534e223c719eace"
+  integrity sha512-+52ZQFmrM0yh61dQlgwQlfHZXmYbswbQEL25SOSt9QkjegAdfIGu87oELw0l8H6cuJYazZCiNjPR9eU++ZIbxg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    "@vue/babel-helper-vue-transform-on" "^1.0.2"
+    camelcase "^6.0.0"
+    html-tags "^3.1.0"
+    svg-tags "^1.0.0"
+
 "@vue/compiler-core@3.0.7":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.7.tgz#421782a4c67cc3f2b7c30457ef446d74f8524f74"
@@ -1063,9 +1128,9 @@ ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
     uri-js "^4.2.2"
 
 ajv@^7.0.2:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-7.2.1.tgz#a5ac226171912447683524fa2f1248fcf8bac83d"
-  integrity sha512-+nu0HDv7kNSOua9apAVc979qd932rrZeb3WOvoiD31A/p1mIE5/9bN2027pE2rOPYEdS3UHzsvof4hY+lM9/WQ==
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-7.2.3.tgz#ca78d1cf458d7d36d1c3fa0794dd143406db5772"
+  integrity sha512-idv5WZvKVXDqKralOImQgPM9v6WOdLNa0IY3B3doOjw/YxRGT8I+allIJ6kd7Uaj+SF1xZUSU+nPM5aDNBVtnw==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -1538,9 +1603,9 @@ camelcase@^6.0.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001181:
-  version "1.0.30001203"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001203.tgz#a7a34df21a387d9deffcd56c000b8cf5ab540580"
-  integrity sha512-/I9tvnzU/PHMH7wBPrfDMSuecDeUKerjCPX7D0xBbaJZPxoT9m+yYxt0zCTkcijCkjTdim3H56Zm0i5Adxch4w==
+  version "1.0.30001204"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz#256c85709a348ec4d175e847a3b515c66e79f2aa"
+  integrity sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -2083,9 +2148,9 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 electron-to-chromium@^1.3.649:
-  version "1.3.692"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.692.tgz#4d00479055a7282cdd1b19caec09ed7779529640"
-  integrity sha512-Ix+zDUAXWZuUzqKdhkgN5dP7ZM+IwMG4yAGFGDLpGJP/3vNEEwuHG1LIhtXUfW0FFV0j38t5PUv2n/3MFSRviQ==
+  version "1.3.693"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.693.tgz#5089c506a925c31f93fcb173a003a22e341115dd"
+  integrity sha512-vUdsE8yyeu30RecppQtI+XTz2++LWLVEIYmzeCaCRLSdtKZ2eXqdJcrs85KwLiPOPVc6PELgWyXBsfqIvzGZag==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -2144,9 +2209,9 @@ error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 esbuild@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.3.tgz#09293a0b824159c6aa2488d1c6c22f57d8448f74"
-  integrity sha512-G8k0olucZp3LJ7I/p8y388t+IEyb2Y78nHrLeIxuqZqh6TYqDYP/B/7drAvYKfh83CGwKal9txVP+FTypsPJug==
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.6.tgz#2cae519e7ce2328ecf57ae738090d07ce7245850"
+  integrity sha512-F6vASxU0wT/Davt9aj2qtDwDNSkQxh9VbyO56M7PDWD+D/Vgq/rmUDGDQo7te76W5auauVojjnQr/wTu3vpaUA==
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -2882,6 +2947,11 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-tags@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
+  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -4813,9 +4883,9 @@ qs@~6.5.2:
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
 queue-microtask@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.2.tgz#abf64491e6ecf0f38a6502403d4cda04f372dfd3"
-  integrity sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
@@ -5128,9 +5198,9 @@ rollup-pluginutils@^2.3.1, rollup-pluginutils@^2.8.2:
     estree-walker "^0.6.1"
 
 rollup@^2.35.1, rollup@^2.38.5:
-  version "2.41.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.41.5.tgz#e79cef8cc5c121612528f590319639b1f32da2d7"
-  integrity sha512-uG+WNNxhOYyeuO7oRt98GA2CNVRgQ67zca75UQVMPzMrLG9FUKzTCgvYVWhtB18TNbV7Uqxo97h+wErAnpFNJw==
+  version "2.42.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.42.2.tgz#4ea90d60539f47c5739df6ccce60bf47e2011992"
+  integrity sha512-o34Ar4rf01ky4EV1RFlTPd+tXICDz13a2o1PARLPFBxighJoPsxvliJTrULqjmIVpZP+JPm499ZPkvnPzRxUYA==
   optionalDependencies:
     fsevents "~2.3.1"
 
@@ -5596,6 +5666,11 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -5966,7 +6041,7 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vite@^2.1.1:
+vite@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.1.2.tgz#0aecaf6d34112b24536df1a14cd8d74fdcab6e20"
   integrity sha512-K96k5Nb1kywggFwZNGf/NQVZIrjMSvjebYWFIEQRu8AQWtzxatMF8/reExFXebmrfWAT3PTUk6l4zJBkpMtyVg==