@done-coding/admin-core 0.30.1-alpha.0 → 0.31.1-alpha.0

package/es/bridge/config-hook.mjs

@@ -9,6 +9,7 @@ function createBridgeConfigHook(init) {
   const reactiveBody = reactive(init.APP_LAYOUT_BODY_CONFIG);
   const reactiveViewport = reactive(init.APP_LAYOUT_VIEWPORT_CONFIG);
   const reactiveGap = reactive(init.APP_LAYOUT_GAP_CONFIG);
+  const reactiveForm = reactive(init.APP_FORM_CONFIG);
   const reactiveTheme = reactive(init.APP_THEME_CONFIG);
   const reactiveMap = {
     APP_BASE_INFO: reactiveBaseInfo,
@@ -20,6 +21,7 @@ function createBridgeConfigHook(init) {
     APP_LAYOUT_BODY_CONFIG: reactiveBody,
     APP_LAYOUT_VIEWPORT_CONFIG: reactiveViewport,
     APP_LAYOUT_GAP_CONFIG: reactiveGap,
+    APP_FORM_CONFIG: reactiveForm,
     APP_THEME_CONFIG: reactiveTheme
   };
   const layoutAggregate = reactive({
@@ -46,6 +48,7 @@ function createBridgeConfigHook(init) {
     roBody: readonly(reactiveBody),
     roViewport: readonly(reactiveViewport),
     roGap: readonly(reactiveGap),
+    roForm: readonly(reactiveForm),
     roTheme: readonly(reactiveTheme),
     roLayout: readonly(layoutAggregate)
   };

package/es/bridge/index.mjs

@@ -38,8 +38,13 @@ function createCoreBridge(options) {
     size: 8,
     ...options.APP_LAYOUT_GAP_CONFIG
   };
+  const formConfig = {
+    layoutByContainer: true,
+    ...options.APP_FORM_CONFIG
+  };
   const configHook = createBridgeConfigHook({
     APP_BASE_INFO: options.APP_BASE_INFO,
+    APP_FORM_CONFIG: formConfig,
     APP_THEME_CONFIG: options.APP_THEME_CONFIG,
     APP_LAYOUT_HEADER_CONFIG: options.APP_LAYOUT_HEADER_CONFIG,
     APP_LAYOUT_FOOTER_CONFIG: options.APP_LAYOUT_FOOTER_CONFIG,
@@ -218,6 +223,7 @@ function createCoreBridge(options) {
      * [MUST NOT] 解构/快照（⚠️ 定格）。
      */
     APP_LAYOUT_GAP_CONFIG: configHook.roGap,
+    APP_FORM_CONFIG: configHook.roForm,
     /**
      * 应用布局聚合配置（**响应式只读视图**，插件系统一期改）。
      *

package/es/bridge/theme/index.mjs

@@ -63,7 +63,7 @@ function createBridgeThemeHook(init) {
   const applyConfig = (config) => {
     init.update("APP_THEME_CONFIG", { light: config.light, dark: config.dark });
   };
-  const applyLayout = (layout) => {
+  const applyLayout = (layout, presetId = "") => {
     const baseline = init.layoutBaseline;
     if (baseline) {
       init.update("APP_LAYOUT_HEADER_CONFIG", { ...baseline.header });
@@ -83,7 +83,15 @@ function createBridgeThemeHook(init) {
       if (layout.aside) init.update("APP_LAYOUT_ASIDE_CONFIG", layout.aside);
       if (layout.breadcrumb)
         init.update("APP_LAYOUT_BREADCRUMB_CONFIG", layout.breadcrumb);
-      if (layout.body) init.update("APP_LAYOUT_BODY_CONFIG", layout.body);
+      if (layout.body) {
+        const { shimPadding, ...bodyRest } = layout.body;
+        if (shimPadding) {
+          console.warn(
+            `[dc-layout] 主题预设「${presetId}」的 layout.body.shimPadding（${shimPadding}）已废弃且**不再影响任何渲染**，已忽略。内容四周留白改由间距阶梯的外圈档（gap × 2）给出 —— 预设要调留白请改自己的 layout.gap.size。本字段将在下一个版本移除。`
+          );
+        }
+        init.update("APP_LAYOUT_BODY_CONFIG", bodyRest);
+      }
       if (layout.viewport)
         init.update("APP_LAYOUT_VIEWPORT_CONFIG", layout.viewport);
       if (layout.gap) init.update("APP_LAYOUT_GAP_CONFIG", layout.gap);
@@ -111,7 +119,7 @@ function createBridgeThemeHook(init) {
     if (prev === target) return;
     fireHook((_a2 = hookMap.get(prev)) == null ? void 0 : _a2.onDeactivate, prev);
     applyConfig(targetConfig);
-    applyLayout(layoutMap.get(target));
+    applyLayout(layoutMap.get(target), target);
     const rhythm = rhythmMap.get(target);
     themeDensity.value = (rhythm == null ? void 0 : rhythm.density) ?? DEFAULT_DENSITY;
     themeMotion.value = (rhythm == null ? void 0 : rhythm.motion) ?? DEFAULT_MOTION;

package/es/components/app-layout/AppBody.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./AppBody.vue2.mjs";
 /* empty css              */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const AppBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ca48e9a0"]]);
+const AppBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84bfe27d"]]);
 export {
   AppBody as default
 };

package/es/components/app-layout/AppBody.vue2.mjs

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "ece8e1ac": contentViewHeight.value
+      "v645a9d15": contentViewHeight.value
     }));
     const appStore = inject(APP_LAYOUT_APP_STORE_KEY);
     const bridge = inject(APP_LAYOUT_BRIDGE_KEY);
@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (bodyShimPadding.value) {
         console.warn(
-          `[dc-layout] APP_LAYOUT_BODY_CONFIG.shimPadding（当前 ${bodyShimPadding.value}）已废弃且**不再影响任何渲染**。内容四周留白改由间距阶梯的外圈档（gap × 2）给出 —— 要调留白请改 APP_LAYOUT_GAP_CONFIG.size，一个旋钮按比例缩放「外圈 / 呼吸 / 模块 / 分段」四档。本字段将在下一个版本移除。`
+          `[dc-layout] APP_LAYOUT_BODY_CONFIG.shimPadding（当前 ${bodyShimPadding.value}）已废弃且**不再影响任何渲染**。来源只可能是这两处之一：① createCoreBridge 的 APP_LAYOUT_BODY_CONFIG.shimPadding；② 当前路由的 meta.layout.bodyShimPadding（优先级更高）。内置主题预设自 v0.32.0 起已全部清空该字段、且第三方预设写了也会被忽略并单独告警 —— 不必去翻预设。内容四周留白改由间距阶梯的外圈档（gap × 2）给出 —— 要调留白请改 APP_LAYOUT_GAP_CONFIG.size，一个旋钮按比例缩放「外圈 / 呼吸 / 模块 / 分段」四档。本字段将在下一个版本移除。`
         );
       }
     });

package/es/components/app-layout/AppPage.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./AppPage.vue2.mjs";
 /* empty css              */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const AppPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-73e3d4a9"]]);
+const AppPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f05fad7f"]]);
 export {
   AppPage as default
 };

package/es/components/app-layout/AppPage.vue2.mjs

@@ -1,10 +1,14 @@
-import { defineComponent, useCssVars, computed, useSlots, ref, shallowRef, inject, provide, readonly, openBlock, createElementBlock, normalizeStyle, createElementVNode, unref, createVNode, withCtx, renderSlot, createBlock, createCommentVNode } from "vue";
+import { defineComponent, useCssVars, useModel, computed, useSlots, ref, shallowRef, inject, watch, provide, readonly, openBlock, createElementBlock, normalizeStyle, createElementVNode, unref, createVNode, withCtx, renderSlot, createBlock, createSlots, normalizeProps, guardReactiveProps, createCommentVNode, mergeModels } from "vue";
 import _debounce from "lodash/debounce";
 import _sfc_main$1 from "../modal/ModalShelf.vue.mjs";
 import _sfc_main$2 from "../display/WatchSize.vue.mjs";
-import { computeAppPageReducedViewportHeight, computeAppPageReducedViewportWidth, computeAppPageContentInset, computeAppPageSlotStyles, computeAppPageSlotShimStyles } from "./app-page-geometry.mjs";
+import AppPageNavBar from "./AppPageNavBar.vue.mjs";
+import { APP_PAGE_TITLE_FIELD_CLAIM } from "./use-app-page-title-field.mjs";
+import { appPageSlotInset, APP_PAGE_SLOT_Z_INDEX, computeAppPageReducedViewportHeight, computeAppPageReducedViewportWidth, computeAppPageContentInset, computeAppPageSlotStyles, computeAppPageSlotShimStyles } from "./app-page-geometry.mjs";
 import { useAppPageContentBox } from "./use-content-box.mjs";
 import { useAppPageSlotMisuseWarn } from "./use-slot-misuse-warn.mjs";
+import { countSlotSurfaceHosts } from "./app-page-slot-surface.mjs";
+import { useIsDev } from "../../hooks/use-is-dev.mjs";
 import { APP_PAGE_LIST_LAYOUT_RECOMMENDED } from "./app-page-recommended.mjs";
 import { BODY_CONTENT_VIEWPORT_RECT, APP_LAYOUT_BRIDGE_KEY, SCOPE_VIEWPORT_MAX_HEIGHT, BODY_CONTENT_VIEWPORT_HEIGHT, BODY_CONTENT_VIEWPORT_INSET, APP_PAGE_CONTENT_INSET } from "../../inject/key.mjs";
 import { useActivated } from "../../hooks/activated.mjs";
@@ -15,13 +19,14 @@ const _hoisted_2 = ["data-dc-slot"];
 const _hoisted_3 = ["data-dc-slot"];
 const _hoisted_4 = ["data-dc-slot"];
 const _hoisted_5 = ["data-dc-slot"];
+const DEFAULT_SLOT_BG = "var(--el-bg-color)";
 const cssVar = "--app-viewport-max-height";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AppPage"
   },
   __name: "AppPage",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     fullViewport: { type: Boolean, default: false },
     fullMode: { default: "min-height" },
     nextViewportMaxHeight: { default: `var(--app-viewport-max-height)` },
@@ -38,19 +43,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     leftWidth: {},
     rightWidth: {},
     contentCentered: { type: Boolean, default: false },
-    contentMaxWidth: { default: 1200 }
-  },
+    contentMaxWidth: { default: 1200 },
+    showNavBar: { type: Boolean, default: false },
+    back: {},
+    moreOptions: {},
+    onMoreSelect: {},
+    onMore: {},
+    navBarObserveResize: { type: Boolean, default: false },
+    titleField: {}
+  }, {
+    "title": {},
+    "titleModifiers": {}
+  }),
+  emits: ["update:title"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v62d8191f": pageCssVars.value.top,
-      "v7adfb621": pageCssVars.value.bottom,
-      "v0fb17d06": pageCssVars.value.left,
-      "v0d174f66": pageCssVars.value.right,
-      "v0d5dbb10": pageCssVars.value.width,
-      "f6eaa5c6": pageCssVars.value.height,
-      "v4ad30b28": props.nextViewportMaxHeight
+      "v14128d84": pageCssVars.value.top,
+      "v8762a8c8": pageCssVars.value.bottom,
+      "v6e3b59b8": pageCssVars.value.left,
+      "v59863e8b": pageCssVars.value.right,
+      "v59ccaa35": pageCssVars.value.width,
+      "v740cbad0": pageCssVars.value.height,
+      "v0517015e": props.nextViewportMaxHeight
     }));
     const props = __props;
+    const title = useModel(__props, "title");
+    const isDev = useIsDev();
     const style = computed(() => {
       return {
         background: props.background,
@@ -127,6 +145,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const outerGap = computed(
       () => gapScaleValue(gapBase.value, "outer", layoutBridge == null ? void 0 : layoutBridge.themeDensity.value)
     );
+    const navBarH = ref(0);
+    const onNavBarH = (v) => {
+      navBarH.value = v;
+    };
+    const navBarInset = computed(
+      () => (
+        // 🔴 [MUST] 先过 `showNavBar`：`WatchSize` 卸载时**不会**补发一个 0，
+        // 只看 `navBarH` 会让关掉 navbar 后内容仍让着最后量到的那一截（真机实测 99px 死留白）。
+        // 四向槽没这个问题只是因为它们由**非响应式的插槽集**决定、运行期不切换。
+        props.showNavBar ? appPageSlotInset(navBarH.value, outerGap.value) : 0
+      )
+    );
+    const keylinePx = computed(() => `${outerGap.value}px`);
+    const navBarBandStyle = computed(() => ({
+      position: "fixed",
+      top: rectInset.value.top,
+      left: rectInset.value.left,
+      right: rectInset.value.right,
+      zIndex: APP_PAGE_SLOT_Z_INDEX
+    }));
+    const navBarTitleBox = shallowRef();
+    const onTitleBox = (el) => {
+      var _a, _b;
+      navBarTitleBox.value = el;
+      (_b = (_a = props.titleField) == null ? void 0 : _a[APP_PAGE_TITLE_FIELD_CLAIM]) == null ? void 0 : _b.claimBox(el);
+    };
+    watch(
+      () => props.titleField,
+      (field, prev) => {
+        var _a;
+        (_a = prev == null ? void 0 : prev[APP_PAGE_TITLE_FIELD_CLAIM]) == null ? void 0 : _a.claimWrite(() => void 0);
+        const claim = field == null ? void 0 : field[APP_PAGE_TITLE_FIELD_CLAIM];
+        if (!claim) return;
+        claim.claimWrite((t) => {
+          title.value = t;
+        });
+        claim.claimBox(navBarTitleBox.value);
+      },
+      { immediate: true }
+    );
     const slotSizes = computed(() => ({
       topH: topH.value,
       bottomH: bottomH.value,
@@ -136,7 +194,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const parentScope = inject(SCOPE_VIEWPORT_MAX_HEIGHT, void 0);
     const reducedViewportHeight = computed(
       () => computeAppPageReducedViewportHeight(
-        (parentScope == null ? void 0 : parentScope.viewportMaxHeight.value) ?? 0,
+        // 🔴 navbar 档**预扣在输入上**（vq3mzn D3）：四处几何出口全从这三个输入派生
+        // ⇒ 预加即四处自动一致，[MUST NOT] 在四处各写一遍加法（huhyx7 漏三处的形状）。
+        Math.max(
+          0,
+          ((parentScope == null ? void 0 : parentScope.viewportMaxHeight.value) ?? 0) - navBarInset.value
+        ),
         slotSizes.value,
         // 🔴 [MUST] outerGap，[MUST NOT] shimPadding —— 后者 huhyx7 起恒 0
         // （AppBody 写死 `shimPadding: 0`），传它等于「让位不含 gap」，可用高多算
@@ -192,7 +255,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const bodyInset = inject(BODY_CONTENT_VIEWPORT_INSET, NO_APP_CHROME_INSET);
     const contentInset = computed(() => {
       const base = computeAppPageContentInset(
-        bodyInset.value,
+        // navbar 档预加在 app 级 chrome 的上沿上（同上，输入侧一处加）
+        navBarInset.value ? { ...bodyInset.value, top: bodyInset.value.top + navBarInset.value } : bodyInset.value,
         slotSizes.value,
         props.gap
       );
@@ -214,28 +278,63 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         height: `${reducedViewportHeight.value}px`
       };
     });
+    const rectInsetBelowNavBar = computed(
+      () => navBarInset.value ? {
+        ...rectInset.value,
+        top: `calc(${rectInset.value.top} + ${navBarInset.value}px)`
+      } : rectInset.value
+    );
     const slotStyles = computed(
-      () => computeAppPageSlotStyles(rectInset.value, slotSizes.value, {
+      () => computeAppPageSlotStyles(rectInsetBelowNavBar.value, slotSizes.value, {
         outerGap: outerGap.value,
         sideWidth: { left: props.leftWidth, right: props.rightWidth }
       })
     );
-    const shimStyles = computed(() => {
-      const base = computeAppPageSlotShimStyles();
-      return {
-        top: { ...base.top, background: props.topBg },
-        bottom: { ...base.bottom, background: props.bottomBg },
-        left: { ...base.left, background: props.leftBg },
-        right: { ...base.right, background: props.rightBg }
-      };
-    });
+    const moduleGap = computed(
+      () => gapScaleValue(gapBase.value, "module", layoutBridge == null ? void 0 : layoutBridge.themeDensity.value)
+    );
+    const slotSurfaceProjected = (name) => {
+      var _a;
+      const hits = countSlotSurfaceHosts((_a = slots[name]) == null ? void 0 : _a.call(slots, { listLayoutRecommended }));
+      if (hits > 1) {
+        if (isDev()) {
+          console.warn(
+            `[dc-page] AppPage 的 #${name} 槽里有 ${hits} 个 ListLayout ——「面归谁」无法判定，本槽按**不下放**处理（槽照旧自带面）。出口：一个槽只放一个列表；确要并排多个，请自行在槽内组织面。`
+          );
+        }
+        return false;
+      }
+      return hits === 1;
+    };
+    const slotShimStyle = (name) => {
+      const base = computeAppPageSlotShimStyles(moduleGap.value)[name];
+      const bg = {
+        top: props.topBg,
+        bottom: props.bottomBg,
+        left: props.leftBg,
+        right: props.rightBg
+      }[name];
+      const explicitBg = {
+        top: "topBg",
+        bottom: "bottomBg",
+        left: "leftBg",
+        right: "rightBg"
+      }[name];
+      const isExplicit = props[explicitBg] !== DEFAULT_SLOT_BG;
+      if (!isExplicit && slotSurfaceProjected(name)) {
+        return { padding: "0px", background: void 0, borderRadius: "0px" };
+      }
+      return { ...base, background: bg };
+    };
     const shimStyle = computed(() => {
       const o = outerGap.value;
       const g = contentGutter.value;
       const inset = (v) => `${v ? v + o : 0}px`;
       const insetX = (v) => `${(v ? v + o : 0) + g}px`;
       return {
-        paddingTop: inset(topH.value),
+        // navbar 档叠在 top 槽让位之上（navbar 未开启时恒 0）；
+        // 让位式仍走共享的 appPageSlotInset，[MUST NOT] 在此把公式再抄一遍
+        paddingTop: `${appPageSlotInset(topH.value, o) + navBarInset.value}px`,
         paddingBottom: inset(bottomH.value),
         paddingLeft: insetX(leftW.value),
         paddingRight: insetX(rightW.value)
@@ -260,9 +359,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _: 3
           })
         ], 12, _hoisted_1),
-        hasTop.value ? (openBlock(), createBlock(unref(_sfc_main$2), {
+        __props.showNavBar ? (openBlock(), createBlock(unref(_sfc_main$2), {
           key: 0,
           mode: "height",
+          "observe-resize": __props.navBarObserveResize,
+          class: "app-page-nav-bar-band",
+          style: normalizeStyle(navBarBandStyle.value),
+          onHeightChange: onNavBarH
+        }, {
+          default: withCtx(() => [
+            createVNode(AppPageNavBar, {
+              title: title.value,
+              back: __props.back,
+              moreOptions: __props.moreOptions,
+              onMoreSelect: __props.onMoreSelect,
+              onMore: __props.onMore,
+              keylinePx: keylinePx.value,
+              onTitleBox
+            }, createSlots({ _: 2 }, [
+              _ctx.$slots.navTitle ? {
+                name: "navTitle",
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, "navTitle", normalizeProps(guardReactiveProps(scope)), void 0, true)
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.more ? {
+                name: "more",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "more", {}, void 0, true)
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.tabbar ? {
+                name: "tabbar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "tabbar", {}, void 0, true)
+                ]),
+                key: "2"
+              } : void 0
+            ]), 1032, ["title", "back", "moreOptions", "onMoreSelect", "onMore", "keylinePx"])
+          ]),
+          _: 3
+        }, 8, ["observe-resize", "style"])) : createCommentVNode("", true),
+        hasTop.value ? (openBlock(), createBlock(unref(_sfc_main$2), {
+          key: 1,
+          mode: "height",
           "observe-resize": __props.topObserveResize,
           class: "app-page-slot app-page-slot--top",
           style: normalizeStyle(slotStyles.value.top),
@@ -271,7 +413,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createElementVNode("div", {
               class: "app-page-slot-shim",
-              style: normalizeStyle(shimStyles.value.top),
+              style: normalizeStyle(slotShimStyle("top")),
               "data-dc-slot": unref(SlotRegion).AppPage_Top
             }, [
               renderSlot(_ctx.$slots, "top", {}, void 0, true)
@@ -280,7 +422,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _: 3
         }, 8, ["observe-resize", "style"])) : createCommentVNode("", true),
         hasBottom.value ? (openBlock(), createBlock(unref(_sfc_main$2), {
-          key: 1,
+          key: 2,
           mode: "height",
           "observe-resize": __props.bottomObserveResize,
           class: "app-page-slot app-page-slot--bottom",
@@ -290,7 +432,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createElementVNode("div", {
               class: "app-page-slot-shim",
-              style: normalizeStyle(shimStyles.value.bottom),
+              style: normalizeStyle(slotShimStyle("bottom")),
               "data-dc-slot": unref(SlotRegion).AppPage_Bottom
             }, [
               renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
@@ -299,7 +441,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _: 3
         }, 8, ["observe-resize", "style"])) : createCommentVNode("", true),
         hasLeft.value ? (openBlock(), createBlock(unref(_sfc_main$2), {
-          key: 2,
+          key: 3,
           mode: "width",
           "observe-resize": __props.leftObserveResize,
           class: "app-page-slot app-page-slot--left",
@@ -309,7 +451,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createElementVNode("div", {
               class: "app-page-slot-shim",
-              style: normalizeStyle(shimStyles.value.left),
+              style: normalizeStyle(slotShimStyle("left")),
               "data-dc-slot": unref(SlotRegion).AppPage_Left
             }, [
               renderSlot(_ctx.$slots, "left", { listLayoutRecommended: unref(listLayoutRecommended) }, void 0, true)
@@ -318,7 +460,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _: 3
         }, 8, ["observe-resize", "style"])) : createCommentVNode("", true),
         hasRight.value ? (openBlock(), createBlock(unref(_sfc_main$2), {
-          key: 3,
+          key: 4,
           mode: "width",
           "observe-resize": __props.rightObserveResize,
           class: "app-page-slot app-page-slot--right",
@@ -328,7 +470,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createElementVNode("div", {
               class: "app-page-slot-shim",
-              style: normalizeStyle(shimStyles.value.right),
+              style: normalizeStyle(slotShimStyle("right")),
               "data-dc-slot": unref(SlotRegion).AppPage_Right
             }, [
               renderSlot(_ctx.$slots, "right", { listLayoutRecommended: unref(listLayoutRecommended) }, void 0, true)

package/es/components/app-layout/AppPageNavBar.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./AppPageNavBar.vue2.mjs";
+/* empty css                    */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const AppPageNavBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1f8c3893"]]);
+export {
+  AppPageNavBar as default
+};

package/es/components/app-layout/AppPageNavBar.vue2.mjs

@@ -0,0 +1,148 @@
+import { defineComponent, useSlots, shallowRef, watch, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, withKeys, withModifiers, createVNode, unref, withCtx, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createBlock, Fragment, renderList } from "vue";
+import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
+import { ArrowLeft, MoreFilled } from "@element-plus/icons-vue";
+const _hoisted_1 = { class: "dc-app-page__nav-bar app-page-nav-bar" };
+const _hoisted_2 = { class: "app-page-nav-bar__more" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppPageNavBar",
+  props: {
+    title: {},
+    back: { type: Function },
+    moreOptions: {},
+    onMoreSelect: { type: Function },
+    onMore: { type: Function },
+    keylinePx: {}
+  },
+  emits: ["titleBox"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const titleBoxEl = shallowRef();
+    watch(titleBoxEl, (el) => emit("titleBox", el), { immediate: true });
+    const hasMoreMenu = computed(() => {
+      var _a;
+      return !!((_a = props.moreOptions) == null ? void 0 : _a.length);
+    });
+    const showMore = () => hasMoreMenu.value || !!props.onMore || !!slots.more;
+    const hasTabbar = () => !!slots.tabbar;
+    const mainStyle = computed(() => ({
+      padding: `0 ${props.keylinePx}`
+    }));
+    const tabbarStyle = computed(() => ({
+      padding: `0 ${props.keylinePx}`
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "app-page-nav-bar__main",
+          style: normalizeStyle(mainStyle.value)
+        }, [
+          __props.back ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "app-page-nav-bar__back",
+            role: "button",
+            tabindex: "0",
+            "aria-label": "返回",
+            onClick: _cache[0] || (_cache[0] = ($event) => __props.back()),
+            onKeydown: [
+              _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => __props.back(), ["prevent"]), ["enter"])),
+              _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => __props.back(), ["prevent"]), ["space"]))
+            ]
+          }, [
+            createVNode(unref(ElIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(ArrowLeft))
+              ]),
+              _: 1
+            })
+          ], 32)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "titleBoxEl",
+            ref: titleBoxEl,
+            class: "app-page-nav-bar__title"
+          }, [
+            renderSlot(_ctx.$slots, "navTitle", { title: __props.title }, () => [
+              createTextVNode(toDisplayString(__props.title), 1)
+            ], true)
+          ], 512),
+          showMore() && hasMoreMenu.value ? (openBlock(), createBlock(unref(ElDropdown), {
+            key: 1,
+            trigger: "click",
+            onCommand: __props.onMoreSelect
+          }, {
+            dropdown: withCtx(() => [
+              createVNode(unref(ElDropdownMenu), null, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.moreOptions, (item) => {
+                    return openBlock(), createBlock(unref(ElDropdownItem), {
+                      key: item.value,
+                      command: item
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.label), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["command"]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_2, [
+                renderSlot(_ctx.$slots, "more", {}, () => [
+                  createVNode(unref(ElIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(MoreFilled))
+                    ]),
+                    _: 1
+                  })
+                ], true)
+              ])
+            ]),
+            _: 3
+          }, 8, ["onCommand"])) : showMore() ? (openBlock(), createElementBlock("span", {
+            key: 2,
+            class: "app-page-nav-bar__more",
+            role: "button",
+            tabindex: "0",
+            onClick: _cache[3] || (_cache[3] = ($event) => {
+              var _a;
+              return (_a = __props.onMore) == null ? void 0 : _a.call(__props);
+            }),
+            onKeydown: [
+              _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => {
+                var _a;
+                return (_a = __props.onMore) == null ? void 0 : _a.call(__props);
+              }, ["prevent"]), ["enter"])),
+              _cache[5] || (_cache[5] = withKeys(withModifiers(($event) => {
+                var _a;
+                return (_a = __props.onMore) == null ? void 0 : _a.call(__props);
+              }, ["prevent"]), ["space"]))
+            ]
+          }, [
+            renderSlot(_ctx.$slots, "more", {}, () => [
+              createVNode(unref(ElIcon), null, {
+                default: withCtx(() => [
+                  createVNode(unref(MoreFilled))
+                ]),
+                _: 1
+              })
+            ], true)
+          ], 32)) : createCommentVNode("", true)
+        ], 4),
+        hasTabbar() ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "app-page-nav-bar__tabbar",
+          style: normalizeStyle(tabbarStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "tabbar", {}, void 0, true)
+        ], 4)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/app-layout/app-page-geometry.mjs

@@ -66,12 +66,13 @@ function computeAppPageSlotStyles(rect, slotSizes, options) {
     }
   };
 }
-function computeAppPageSlotShimStyles() {
-  const pad = { padding: "8px" };
+function computeAppPageSlotShimStyles(moduleGap) {
+  const pad = { padding: `${moduleGap}px` };
   return { top: pad, bottom: pad, left: pad, right: pad };
 }
 export {
   APP_PAGE_SLOT_Z_INDEX,
+  appPageSlotInset,
   computeAppPageContentInset,
   computeAppPageReducedViewportHeight,
   computeAppPageReducedViewportWidth,

package/es/components/app-layout/app-page-slot-surface.mjs

@@ -0,0 +1,31 @@
+import { Text, Comment, Fragment } from "vue";
+const SURFACE_HOST_NAME = "ListLayout";
+const componentNameOf = (node) => {
+  const t = node.type;
+  if (!t || typeof t === "string") return void 0;
+  return t.name ?? t.__name;
+};
+const countSlotSurfaceHosts = (nodes) => {
+  if (!(nodes == null ? void 0 : nodes.length)) return 0;
+  let hit = 0;
+  const walk = (list) => {
+    list.forEach((raw) => {
+      const node = raw;
+      if (!node || typeof node !== "object") return;
+      if (node.type === Text || node.type === Comment) return;
+      if (componentNameOf(node) === SURFACE_HOST_NAME) {
+        hit += 1;
+        return;
+      }
+      if (Array.isArray(node.children)) walk(node.children);
+      else if (node.type === Fragment && node.children) {
+        walk([node.children]);
+      }
+    });
+  };
+  walk(nodes);
+  return hit;
+};
+export {
+  countSlotSurfaceHosts
+};