feat: add hmr

packages/shims-uni-app.d.ts

@@ -22,6 +22,13 @@ declare namespace UniApp {
   interface PageNavigationBar {
     type: 'default' | 'transparent' | 'float' | 'none'
     titleText: string
+    textStyle: 'black' | 'white'
+    timingFunc: string
+    duration: string
+    backgroundColor: string
+    titlePenetrate: 'YES' | 'NO'
+    shadowColorType: 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow'
+    backButton: boolean
   }
   interface PageRefreshOptions {
     support: boolean

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

 import {isFunction, extend, isPlainObject, hasOwn as hasOwn$1, hyphenate, isArray, isObject as isObject$1, capitalize, toRawType, makeMap as makeMap$1, isPromise} from "@vue/shared";
-import {injectHook, defineComponent, nextTick, computed, openBlock, createBlock, Fragment, withDirectives, createVNode, vShow, createCommentVNode, withCtx, KeepAlive, resolveDynamicComponent, resolveComponent, mergeProps, onMounted, ref, toDisplayString, toHandlers, renderSlot, withModifiers, vModelDynamic, renderList, vModelText, inject, provide, reactive} from "vue";
-import {COMPONENT_NAME_PREFIX, isCustomElement, plusReady, debounce, NAVBAR_HEIGHT} from "@dcloudio/uni-shared";
+import {injectHook, defineComponent, inject, provide, reactive, nextTick, computed, openBlock, createBlock, Fragment, withDirectives, createVNode, vShow, createCommentVNode, withCtx, KeepAlive, resolveDynamicComponent, resolveComponent, mergeProps, onMounted, ref, toDisplayString, toHandlers, renderSlot, withModifiers, vModelDynamic, renderList, vModelText, createTextVNode} from "vue";
+import {NAVBAR_HEIGHT, COMPONENT_NAME_PREFIX, isCustomElement, plusReady, debounce} from "@dcloudio/uni-shared";
 import {createRouter, createWebHistory, createWebHashHistory, useRoute, RouterView} from "vue-router";
 function applyOptions(options, instance2, publicThis) {
   Object.keys(options).forEach((name) => {
@@ -756,9 +756,65 @@ const afterEach = (to, from, failure) => {
 var TabBar = defineComponent({
   name: "TabBar"
 });
+const pageMetaKey = PolySymbol(process.env.NODE_ENV !== "production" ? "pageMeta" : "pm");
+function usePageMeta() {
+  return inject(pageMetaKey);
+}
+function providePageMeta() {
+  provide(pageMetaKey, initPageMeta());
+}
+function initPageMeta() {
+  if (__UNI_FEATURE_PAGES__) {
+    return reactive(normalizePageMeta(JSON.parse(JSON.stringify(mergePageMeta(useRoute().meta)))));
+  }
+  return reactive(normalizePageMeta(JSON.parse(JSON.stringify(mergePageMeta(__uniRoutes[1].meta)))));
+}
+const PAGE_META_KEYS = [
+  "navigationBar",
+  "refreshOptions"
+];
+function mergePageMeta(pageMeta) {
+  const res = Object.assign({}, __uniConfig.globalStyle, pageMeta);
+  PAGE_META_KEYS.forEach((name) => {
+    res[name] = Object.assign({}, __uniConfig.globalStyle[name] || {}, pageMeta[name] || {});
+  });
+  return res;
+}
+function normalizePageMeta(pageMeta) {
+  const {enablePullDownRefresh, navigationBar} = pageMeta;
+  if (enablePullDownRefresh) {
+    const refreshOptions = Object.assign({
+      support: true,
+      color: "#2BD009",
+      style: "circle",
+      height: 70,
+      range: 150,
+      offset: 0
+    }, pageMeta.refreshOptions || {});
+    let offset = rpx2px(refreshOptions.offset);
+    const {type} = navigationBar;
+    if (type !== "transparent" && type !== "none") {
+      offset += NAVBAR_HEIGHT + out.top;
+    }
+    refreshOptions.height = rpx2px(refreshOptions.height);
+    refreshOptions.range = rpx2px(refreshOptions.range);
+    pageMeta.refreshOptions = refreshOptions;
+  }
+  return pageMeta;
+}
+const documentElement = document.documentElement;
+let styleObj;
+function updateCssVar(name, value) {
+  if (!styleObj) {
+    styleObj = documentElement.style;
+  }
+  styleObj.setProperty(name, value);
+}
+PolySymbol(process.env.NODE_ENV !== "production" ? "layout" : "l");
 const SEP = "$$";
+const currentPages = [];
 function getCurrentPages$1() {
-  return [];
+  return currentPages;
 }
 let id = history.state && history.state.__id__ || 1;
 function createPageState(type) {
@@ -780,10 +836,12 @@ function initPublicPage(route) {
     path: route.path,
     route: route.meta.pagePath,
     fullPath: route.meta.isEntry ? route.meta.pagePath : route.fullPath,
-    options: {}
+    options: {},
+    meta: usePageMeta()
   };
 }
 function initPage(vm) {
+  currentPages.push(vm);
   const route = vm.$route;
   vm.__page__ = initPublicPage(route);
 }
@@ -917,14 +975,6 @@ function createLeftWindowVNode(leftWindow) {
 }
 function createRightWindowVNode(leftWindow) {
 }
-const documentElement = document.documentElement;
-let styleObj;
-function updateCssVar(name, value) {
-  if (!styleObj) {
-    styleObj = documentElement.style;
-  }
-  styleObj.setProperty(name, value);
-}
 const CSS_VARS = [
   "--status-bar-height",
   "--top-window-height",
@@ -8031,61 +8081,70 @@ const UniServiceJSBridge$1 = extend(ServiceJSBridge, {
     window.UniViewJSBridge.subscribeHandler(event2, args, pageId);
   }
 });
-const pageMetaKey = PolySymbol(process.env.NODE_ENV !== "production" ? "pageMeta" : "pm");
-function usePageMeta() {
-  return inject(pageMetaKey);
-}
-function providePageMeta() {
-  provide(pageMetaKey, initPageMeta());
-}
-function initPageMeta() {
-  if (__UNI_FEATURE_PAGES__) {
-    return reactive(normalizePageMeta(JSON.parse(JSON.stringify(mergePageMeta(useRoute().meta)))));
-  }
-  return reactive(normalizePageMeta(JSON.parse(JSON.stringify(mergePageMeta(__uniRoutes[1].meta)))));
-}
-const PAGE_META_KEYS = [
-  "navigationBar",
-  "refreshOptions"
-];
-function mergePageMeta(pageMeta) {
-  const res = Object.assign({}, __uniConfig.globalStyle, pageMeta);
-  PAGE_META_KEYS.forEach((name) => {
-    res[name] = Object.assign({}, __uniConfig.globalStyle[name] || {}, pageMeta[name] || {});
-  });
-  return res;
-}
-function normalizePageMeta(pageMeta) {
-  const {enablePullDownRefresh, navigationBar} = pageMeta;
-  if (enablePullDownRefresh) {
-    const refreshOptions = Object.assign({
-      support: true,
-      color: "#2BD009",
-      style: "circle",
-      height: 70,
-      range: 150,
-      offset: 0
-    }, pageMeta.refreshOptions || {});
-    let offset = rpx2px(refreshOptions.offset);
-    const {type} = navigationBar;
-    if (type !== "transparent" && type !== "none") {
-      offset += NAVBAR_HEIGHT + out.top;
-    }
-    refreshOptions.height = rpx2px(refreshOptions.height);
-    refreshOptions.range = rpx2px(refreshOptions.range);
-    pageMeta.refreshOptions = refreshOptions;
-  }
-  return pageMeta;
-}
-PolySymbol(process.env.NODE_ENV !== "production" ? "layout" : "l");
 var PageHead = defineComponent({
   name: "PageHead",
   setup() {
     const pageMeta = usePageMeta();
-    UniServiceJSBridge.emit("onNavigationBarChange", pageMeta.navigationBar.titleText);
-    return () => (openBlock(), createBlock("uni-page-head", null, pageMeta.navigationBar.titleText));
+    const navigationBar = pageMeta.navigationBar;
+    UniServiceJSBridge.emit("onNavigationBarChange", navigationBar.titleText);
+    const {
+      clazz,
+      style
+    } = usePageHead(navigationBar);
+    const backButtonJsx = createBackButtonJsx(navigationBar);
+    return () => createVNode("uni-page-head", {
+      "uni-page-head-type": navigationBar.type
+    }, {
+      default: () => [createVNode("div", {
+        class: clazz.value,
+        style: style.value
+      }, [createVNode("div", {
+        class: "uni-page-head-hd"
+      }, [backButtonJsx])], 6)]
+    }, 8, ["uni-page-head-type"]);
   }
 });
+function createBackButtonJsx(navigationBar) {
+  if (navigationBar.backButton) {
+    return createVNode("div", {
+      class: "uni-page-head-btn"
+    }, [createVNode("i", {
+      style: "{color:color,fontSize:'27px'}",
+      class: "uni-btn-icon"
+    }, [createTextVNode("\uE601")])]);
+  }
+}
+function usePageHead(navigationBar) {
+  const clazz = computed(() => {
+    const {
+      type,
+      titlePenetrate,
+      shadowColorType
+    } = navigationBar;
+    const clazz2 = {
+      "uni-page-head": true,
+      "uni-page-head-transparent": type === "transparent",
+      "uni-page-head-titlePenetrate": titlePenetrate === "YES",
+      "uni-page-head-shadow": !!shadowColorType
+    };
+    if (shadowColorType) {
+      clazz2[`uni-page-head-shadow-${shadowColorType}`] = true;
+    }
+    return clazz2;
+  });
+  const style = computed(() => {
+    return {
+      transitionDuration: navigationBar.duration,
+      transitionTimingFunction: navigationBar.timingFunc,
+      backgroundColor: navigationBar.backgroundColor,
+      color: navigationBar.textStyle === "black" ? "#000" : "#fff"
+    };
+  });
+  return {
+    clazz,
+    style
+  };
+}
 var _sfc_main$2 = {
   name: "PageRefresh",
   setup() {

packages/uni-h5/src/framework/components/page/page-refresh/index.ts

@@ -93,7 +93,6 @@ export function usePageRefresh(refreshRef: Ref) {
   function removeClass() {
     toggleClass('remove')
   }
-
   function pulling(deltaY: number) {
     if (!refreshControllerElem) {
       return

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

-import {
-  createBlock,
-  //   createCommentVNode,
-  //   createVNode,
-  defineComponent,
-  openBlock,
-  //   renderSlot,
-  //   SetupContext,
-  //   withCtx,
-} from 'vue'
-
-import { usePageMeta } from '../../plugin/provide'
-
-export default defineComponent({
-  name: 'PageHead',
-  setup() {
-    const pageMeta = usePageMeta()
-    UniServiceJSBridge.emit(
-      'onNavigationBarChange',
-      pageMeta.navigationBar.titleText
-    )
-    return () => (
-      openBlock(),
-      createBlock('uni-page-head', null, pageMeta.navigationBar.titleText)
-    )
-  },
-})

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

+import {
+  computed,
+  createBlock,
+  //   createCommentVNode,
+  //   createVNode,
+  defineComponent,
+  openBlock,
+  //   renderSlot,
+  //   SetupContext,
+  //   withCtx,
+} from 'vue'
+
+import { usePageMeta } from '../../plugin/provide'
+
+export default defineComponent({
+  name: 'PageHead',
+  setup() {
+    const pageMeta = usePageMeta()
+    const navigationBar = pageMeta.navigationBar
+    UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
+    const { clazz, style } = usePageHead(navigationBar)
+    const backButtonJsx = createBackButtonJsx(navigationBar)
+    return () => (
+      <uni-page-head uni-page-head-type={navigationBar.type}>
+        <div class={clazz.value} style={style.value}>
+          <div class="uni-page-head-hd">{backButtonJsx}</div>
+        </div>
+      </uni-page-head>
+    )
+  },
+})
+
+function createBackButtonJsx(navigationBar: UniApp.PageNavigationBar) {
+  if (navigationBar.backButton) {
+    return (
+      <div class="uni-page-head-btn">
+        <i style="{color:color,fontSize:'27px'}" class="uni-btn-icon">
+          &#xe601;
+        </i>
+      </div>
+    )
+  }
+}
+
+function usePageHead(navigationBar: UniApp.PageNavigationBar) {
+  const clazz = computed(() => {
+    const { type, titlePenetrate, shadowColorType } = navigationBar
+    const clazz: Record<string, boolean> = {
+      'uni-page-head': true,
+      'uni-page-head-transparent': type === 'transparent',
+      'uni-page-head-titlePenetrate': titlePenetrate === 'YES',
+      'uni-page-head-shadow': !!shadowColorType,
+    }
+    if (shadowColorType) {
+      clazz[`uni-page-head-shadow-${shadowColorType}`] = true
+    }
+    return clazz
+  })
+  const style = computed(() => {
+    return {
+      transitionDuration: navigationBar.duration,
+      transitionTimingFunction: navigationBar.timingFunc,
+      backgroundColor: navigationBar.backgroundColor,
+      color: navigationBar.textStyle === 'black' ? '#000' : '#fff',
+    }
+  })
+  return {
+    clazz,
+    style,
+  }
+}

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

 import { computed, nextTick, VNode, ComponentPublicInstance } from 'vue'
 import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'
+import { usePageMeta } from './provide'
 
 const SEP = '$$'
 
+const currentPages: Page.PageInstance[] = []
+
 export function getCurrentPages() {
-  return []
+  return currentPages
 }
 
 let id = (history.state && history.state.__id__) || 1
@@ -34,10 +37,12 @@ function initPublicPage(route: RouteLocationNormalizedLoaded) {
     route: route.meta.pagePath,
     fullPath: route.meta.isEntry ? route.meta.pagePath : route.fullPath,
     options: {}, // $route.query
+    meta: usePageMeta(),
   }
 }
 
 export function initPage(vm: ComponentPublicInstance) {
+  currentPages.push(vm as Page.PageInstance)
   const route = vm.$route
   ;(vm as any).__page__ = initPublicPage(route)
 }

packages/uni-h5/style/base.css

@@ -3,22 +3,6 @@
   -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;
@@ -27,158 +11,12 @@ body {
   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.5);
-}
-
-.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-label,
-[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] uni-button {
-  margin: 0;
-}
-
-[nvue-dir-row] uni-view,
-[nvue-dir-row] uni-label,
-[nvue-dir-row] uni-swiper-item {
-  flex-direction: row;
-}
-
-[nvue-dir-column] uni-view,
-[nvue-dir-column] uni-label,
-[nvue-dir-column] uni-swiper-item {
-  flex-direction: column;
-}
-
-[nvue-dir-row-reverse] uni-view,
-[nvue-dir-row-reverse] uni-label,
-[nvue-dir-row-reverse] uni-swiper-item {
-  flex-direction: row-reverse;
-}
-
-[nvue-dir-column-reverse] uni-view,
-[nvue-dir-column-reverse] uni-label,
-[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;
-}
-
-uni-app {
   display: block;
   box-sizing: border-box;
   width: 100%;

packages/uni-h5/style/layout.css

+uni-content {
+  display: flex;
+  flex: 1 0 auto;
+  height: 100%;
+}
+
+uni-main {
+  flex: 1;
+  width: 100%;
+}
+
+uni-top-window + uni-content {
+  height: calc(100vh - var(--top-window-height));
+}
+
+uni-left-window {
+  position: relative;
+  width: var(--window-left);
+  order: -1;
+  overflow-x: hidden;
+}
+
+uni-right-window {
+  position: relative;
+  width: var(--window-right);
+  overflow-x: hidden;
+}
+
+uni-left-window[data-show],
+uni-right-window[data-show] {
+  position: absolute;
+}
+
+uni-right-window[data-show] {
+  right: 0;
+}
+
+uni-content .uni-mask,
+.uni-left-window,
+.uni-right-window {
+  z-index: 997;
+}
+
+.uni-mask + .uni-left-window,
+.uni-mask + .uni-right-window {
+  position: fixed;
+}
+
+.uni-top-window {
+  position: fixed;
+  left: var(--window-margin);
+  right: var(--window-margin);
+  top: 0;
+  z-index: 998;
+  overflow: hidden;
+}

packages/uni-h5/style/nvue.css

+[nvue] uni-view,
+[nvue] uni-label,
+[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] uni-button {
+  margin: 0;
+}
+
+[nvue-dir-row] uni-view,
+[nvue-dir-row] uni-label,
+[nvue-dir-row] uni-swiper-item {
+  flex-direction: row;
+}
+
+[nvue-dir-column] uni-view,
+[nvue-dir-column] uni-label,
+[nvue-dir-column] uni-swiper-item {
+  flex-direction: column;
+}
+
+[nvue-dir-row-reverse] uni-view,
+[nvue-dir-row-reverse] uni-label,
+[nvue-dir-row-reverse] uni-swiper-item {
+  flex-direction: row-reverse;
+}
+
+[nvue-dir-column-reverse] uni-view,
+[nvue-dir-column-reverse] uni-label,
+[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/style/pageHead.css

+uni-page-head {
+  display: block;
+  box-sizing: border-box;
+}
+
+.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 * {
+  box-sizing: border-box;
+}
+
+.uni-page-head .uni-btn-icon {
+  overflow: hidden;
+  min-width: 1em;
+}
+
+.uni-page-head-titlePenetrate,
+.uni-page-head-titlePenetrate .uni-page-head-bd,
+.uni-page-head-titlePenetrate .uni-page-head-bd * {
+  pointer-events: none;
+}
+
+.uni-page-head-titlePenetrate * {
+  pointer-events: auto;
+}
+
+.uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
+  justify-content: center;
+}
+
+.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-placeholder-titlePenetrate {
+  pointer-events: none;
+}
+
+.uni-page-head-hd {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+
+.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-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-ft {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  font-size: 13px;
+}
+
+.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__title .uni-loading {
+  width: 16px;
+  height: 16px;
+  margin-top: -3px;
+}
+
+.uni-page-head__title .uni-page-head__title_image {
+  width: auto;
+  height: 26px;
+  vertical-align: middle;
+}
+
+.uni-page-head-shadow {
+  overflow: visible;
+}
+
+.uni-page-head-shadow::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 5px;
+  background-size: 100% 100%;
+}
+
+.uni-page-head-shadow-grey::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-grey.png');
+}
+
+.uni-page-head-shadow-blue::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-blue.png');
+}
+
+.uni-page-head-shadow-green::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-green.png');
+}
+
+.uni-page-head-shadow-orange::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-orange.png');
+}
+
+.uni-page-head-shadow-red::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-red.png');
+}
+
+.uni-page-head-shadow-yellow::after {
+  background-image: url('https://cdn.dcloud.net.cn/img/shadow-yellow.png');
+}

packages/uni-h5/vite.config.ts

@@ -54,7 +54,18 @@ export default defineConfig({
     assetsDir: '.',
     rollupOptions: {
       input: path.resolve(__dirname, 'src/index.ts'),
-      external: ['vue', 'vue-router', '@vue/shared', '@dcloudio/uni-shared'],
+      external(source) {
+        if (
+          ['vue', 'vue-router', '@vue/shared', '@dcloudio/uni-shared'].includes(
+            source
+          )
+        ) {
+          return true
+        }
+        if (source.startsWith('@dcloudio/uni-h5/style')) {
+          return true
+        }
+      },
       preserveEntrySignatures: 'strict',
       plugins: [
         replace({

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

@@ -16,6 +16,7 @@ export function createConfig(
     if (config.root) {
       options.root = config.root
     }
+    options.command = env.command
     return {
       base: options.base,
       define: createDefine(options, env),

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

@@ -6,7 +6,7 @@ export function createServer(
 ): UserConfig['server'] {
   return {
     watch: {
-      ignored: ['**/node_modules/**', '**/.git/**', '**/uniCloud**'],
+      ignored: ['**/uniCloud**'],
     },
   }
 }

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

@@ -26,7 +26,7 @@ export function uniPagesJsonPlugin(
       if (id.endsWith(PAGES_JSON_JS)) {
         return {
           code:
-            (options.devServer ? registerGlobalCode : '') +
+            (options.command === 'serve' ? registerGlobalCode : '') +
             parsePagesJson(code, options),
           map: { mappings: '' },
         }
@@ -65,9 +65,16 @@ import { appid, debug, networkTimeout, router, async, sdkConfigs, qqMapKey, nvue
 ${uniConfigCode}
 ${definePagesCode}
 ${uniRoutesCode}
+${options.command === 'serve' ? hmrCode : ''}
 `
 }
 
+const hmrCode = `if(import.meta.hot){
+  import.meta.hot.on('invalidate', (data) => {
+      import.meta.hot.invalidate()
+  })
+}`
+
 const registerGlobalCode = `import {uni,getCurrentPages,getApp,UniServiceJSBridge,UniViewJSBridge} from '@dcloudio/uni-h5'
 window.getApp = getApp
 window.getCurrentPages = getCurrentPages
@@ -103,24 +110,34 @@ const navigationBarMaps = {
   navigationBarBackgroundColor: 'backgroundColor',
   navigationBarTextStyle: 'textStyle',
   navigationBarTitleText: 'titleText',
-  navigationBarShadow: 'shadow',
   navigationStyle: 'style',
   titleImage: 'titleImage',
   titlePenetrate: 'titlePenetrate',
 }
 
-function normalizeNavigationBar(pageStyle: Record<string, any>) {
-  const navigationBar = Object.create(null)
+function normalizeNavigationBar(
+  pageStyle: Record<string, any>
+): UniApp.PageNavigationBar {
+  const navigationBar = Object.create(null) as UniApp.PageNavigationBar
   Object.keys(navigationBarMaps).forEach((name) => {
     if (hasOwn(pageStyle, name)) {
+      // @ts-ignore
       navigationBar[navigationBarMaps[name]] = pageStyle[name]
       delete pageStyle[name]
     }
   })
+  if (
+    pageStyle.navigationBarShadow &&
+    pageStyle.navigationBarShadow.colorType
+  ) {
+    navigationBar.shadowColorType = pageStyle.navigationBarShadow.colorType
+    delete pageStyle.navigationBarShadow
+  }
   const { titleNView } = pageStyle
   if (isPlainObject(titleNView)) {
     Object.assign(navigationBar, titleNView)
   }
+
   return navigationBar
 }
 
@@ -267,7 +284,7 @@ function generateConfig(
   delete pagesJson.subpackages
   pagesJson.compilerVersion = pkg['uni-app'].compilerVersion
   return (
-    (options.devServer
+    (options.command === 'serve'
       ? ''
       : `window['____'+appid+'____']=true
 delete window['____'+appid+'____']

packages/vite-plugin-uni/src/handleHotUpdate/index.ts

+import debug from 'debug'
+import { Plugin } from 'vite'
+import { VitePluginUniResolvedOptions } from '..'
+
+const debugHmr = debug('uni:hmr')
+
+export function createHandleHotUpdate(
+  _options: VitePluginUniResolvedOptions
+): Plugin['handleHotUpdate'] {
+  return function ({ file, server }) {
+    // TODO 目前简单处理，当pages.json,manifest.json发生变化，就直接刷新，理想情况下，应该区分变化的内容，仅必要时做整页面刷新
+    if (file.endsWith('pages.json') || file.endsWith('manifest.json')) {
+      debugHmr(file)
+      server.ws.send({
+        type: 'custom',
+        event: 'invalidate',
+        data: {},
+      })
+      return []
+    }
+  }
+}

packages/vite-plugin-uni/src/index.ts

@@ -2,19 +2,21 @@ import fs from 'fs'
 import path from 'path'
 import { parse } from 'jsonc-parser'
 
-import { Plugin, ViteDevServer } from 'vite'
+import { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 
 import { initEnv } from './env'
 import { createConfig } from './config'
 import { createResolveId } from './resolveId'
 import { createConfigResolved } from './configResolved'
 import { createConfigureServer } from './configureServer'
+import { createHandleHotUpdate } from './handleHotUpdate'
 export interface VitePluginUniOptions {
   inputDir?: string
 }
 export interface VitePluginUniResolvedOptions extends VitePluginUniOptions {
   root: string
   base: string
+  command: ResolvedConfig['command']
   inputDir: string
   assetsDir: string
   devServer?: ViteDevServer
@@ -39,6 +41,7 @@ export default function uniPlugin(
     base: resolveBase(inputDir),
     assetsDir: 'assets',
     inputDir,
+    command: 'serve',
   }
   initEnv(options)
   return {
@@ -47,5 +50,6 @@ export default function uniPlugin(
     configResolved: createConfigResolved(options),
     configureServer: createConfigureServer(options),
     resolveId: createResolveId(options),
+    handleHotUpdate: createHandleHotUpdate(options),
   }
 }

packages/vite-plugin-uni/src/resolveId.ts → packages/vite-plugin-uni/src/resolveId/index.ts

 import debug from 'debug'
 import { Plugin } from 'vite'
-import { VitePluginUniResolvedOptions } from '.'
+import { VitePluginUniResolvedOptions } from '..'
 
 const debugResolve = debug('uni:resolve')
 
 const VUES = ['vue', 'vue.js', './vue.js', 'dist/vue.runtime.esm-bundler.js']
 
 export function createResolveId(
-  options: VitePluginUniResolvedOptions
+  _options: VitePluginUniResolvedOptions
 ): Plugin['resolveId'] {
   return function (id) {
     if (VUES.includes(id)) {