@liujitcn/kratos-uni-app-core 0.0.83 → 0.0.85

package/README.md

@@ -10,7 +10,7 @@
 packages/core
 ├── src
 │   ├── api                    # 与 Proto 完整路径一致的接口 service
-│   ├── components             # 启动状态、自绘 tabBar、公共设置页和 MFA 组件
+│   ├── components             # 通用导航栏、自绘 tabBar、公共设置页和 MFA 组件
 │   ├── rpc                    # Buf 生成的 TypeScript 接口类型
 │   ├── static                 # 底座图片和 tab 图标
 │   ├── stores                 # Pinia 设置与用户状态
@@ -34,6 +34,8 @@ packages/core
 
 - 定义 `KratosAppModule`、`viewKey`、静态页面覆盖和模块图标协议。
 - 从 `/v1/app/base/menu` 加载 `99000000` 下的扁平菜单，按 `parent_id` 构建树，以二级页面生成 tabBar，并原子更新动态路由和层级导航。
+- tabBar 统一自绘，宿主不声明原生 `tabBar`；H5 替换当前路由，微信端复用普通页面栈，栈满时替换栈顶，切换不重建整个页面栈。
+- 页面装配插件在编译配置中移除宿主的原生 `tabBar`，退出后恢复宿主原文件。导航按模块注册的 `viewKey` 解析物理页面，支持业务模块覆盖首页和扩展 tab；引用项目升级 core 包后即可使用相同策略。
 - 按匿名态、登录态缓存导航，并在远端不可用时回退到最近缓存或默认菜单。
 - 统一认证、token、MFA、HTTP、上传、配置、Pinia 和基础页面能力。
 - 提供可复用的 `KratosSettingsPage`，统一语言、MFA、微信设置和退出登录，并允许产品在最上方追加业务设置。
@@ -50,6 +52,41 @@ packages/core
 - `@liujitcn/kratos-uni-app-core/vite`：Vite 配置、页面装配插件和构建错误文案格式化器。
 - `@liujitcn/kratos-uni-app-core/api/*`、`components/*.vue`、`utils/*`、`views/*`：白名单子路径。
 
+## 通用顶部导航
+
+所有自定义顶部导航统一使用公开组件 `KratosNavBar`，页面只提供标题和业务操作，不再定义导航高度、安全区、标题居中、按钮尺寸或微信胶囊避让。普通页与 tabBar 页的标题栏使用相同高度，按钮显隐不会改变标题位置。页面外层只维护水平与底部留白，顶部留白由组件处理；tabBar 页的导航栏还统一预留内容间距。
+
+```vue
+<script setup lang="ts">
+import KratosNavBar from '@liujitcn/kratos-uni-app-core/components/KratosNavBar.vue'
+</script>
+
+<template>
+  <!-- 普通页：默认带返回，无法返回时回到首页 -->
+  <KratosNavBar title="个人信息" />
+  <!-- tabBar 页：默认不带返回，也可以不传操作按钮 -->
+  <KratosNavBar title="首页" variant="tab" />
+  <KratosNavBar
+    title="我的"
+    variant="tab"
+    :action="{ icon: 'settings', label: '设置', onClick: openSettings }"
+  />
+</template>
+```
+
+`back` 可显式控制返回按钮，`onBack` 可覆盖默认返回操作。`action` 包含 `label`、可选 `icon`、可选 `display` 和 `onClick`；`display` 支持 `icon`（纯图标）、`text`（纯文字）和 `both`（图标加文字），默认有图标时显示图标，否则显示文字。图标支持内置 `settings`、`read-all`、`history`，以及自定义图片地址。不传 `action` 时不渲染操作按钮。三种按钮形式共用相同高度；纯图标保持方形，文字与组合按钮按内容增宽，空间不足时省略文字。组件通过公开的 `components/KratosNavBar.vue` 子路径导入；`KratosNavBarProps`、`KratosNavBarAction` 类型从包根公开导出。小程序的 Vue 组件必须直接导入 `.vue` 文件，避免经 TypeScript 入口重导出导致编译产物漏登记 `usingComponents`；业务模块应传入翻译后的标题和按钮名称。
+
+```ts
+import type { KratosNavBarAction } from '@liujitcn/kratos-uni-app-core'
+
+// 纯图标
+const iconAction: KratosNavBarAction = { icon: 'settings', label: '设置', display: 'icon', onClick: openSettings }
+// 纯文字
+const textAction: KratosNavBarAction = { label: '全部已读', display: 'text', onClick: markAllRead }
+// 图标加文字
+const combinedAction: KratosNavBarAction = { icon: 'history', label: '历史', display: 'both', onClick: openHistory }
+```
+
 ## 公共设置页
 
 产品设置页通过公开子路径引用 `KratosSettingsPage`。`extensions` 是唯一业务扩展插槽，固定直接渲染在页面视口最上方；没有传入内容时不会生成容器或额外间距。

package/dist/vite.mjs

@@ -239,6 +239,7 @@ function preparePageAssembly(options) {
       restoreBuildTransaction(transaction, options.transactionFile);
     }
     const manifest = JSON.parse(originalPages);
+    delete manifest.tabBar;
     manifest.pages ??= [];
     const generatedFiles = options.pageMap.map((page) => resolve(options.inputDir, `${page.route}.vue`)).filter((target) => !existsSync(target));
     const staticTarget = resolve(options.inputDir, "static");

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.83",
+  "version": "0.0.85",
   "type": "module",
   "files": [
     "dist",

package/src/components/KratosNavBar.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '../locales'
+import { useThemeStore } from '../stores'
+import { getMpCapsuleRightGap } from '../utils'
+import { homeTabPage } from '../utils/navigation'
+import type { KratosNavBarProps } from '../types/nav-bar'
+
+defineOptions({ name: 'KratosNavBar' })
+
+const props = withDefaults(defineProps<KratosNavBarProps>(), {
+  variant: 'page',
+  back: undefined,
+})
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const capsuleGap = getMpCapsuleRightGap()
+const showBack = computed(() => props.back ?? props.variant === 'page')
+const iconPaths: Record<string, string> = {
+  settings:
+    '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8 2 2 0 1 1-2.8 2.8 1.6 1.6 0 0 0-2.7 1.1 2 2 0 1 1-4 0 1.6 1.6 0 0 0-2.6-1.1 2 2 0 1 1-2.8-2.8A1.6 1.6 0 0 0 3 13.9a2 2 0 1 1 0-4 1.6 1.6 0 0 0 1.5-2.7 2 2 0 1 1 2.8-2.8A1.6 1.6 0 0 0 10 4.6a2 2 0 1 1 4 0 1.6 1.6 0 0 0 2.7.6 2 2 0 1 1 2.8 2.8 1.6 1.6 0 0 0-.1 2.6a2.2 2.2 0 1 1 0 4.4Z"/>',
+  'read-all': '<path d="m3 12 4 4L17 6m-5 10 9-9"/>',
+  history: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+}
+const actionIcon = computed(() => {
+  const icon = props.action?.icon
+  if (!icon || !iconPaths[icon]) return icon
+  const color = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">${iconPaths[icon]}</svg>`
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+})
+const actionDisplay = computed(() => props.action?.display ?? (actionIcon.value ? 'icon' : 'text'))
+const showActionIcon = computed(() => !!actionIcon.value && actionDisplay.value !== 'text')
+const showActionLabel = computed(() => !actionIcon.value || actionDisplay.value !== 'icon')
+
+/** goBack 优先执行页面返回操作，否则返回上一页并在失败时回到首页。 */
+function goBack() {
+  if (props.onBack) {
+    props.onBack()
+    return
+  }
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: homeTabPage }) })
+}
+</script>
+
+<template>
+  <view
+    class="kratos-nav-bar"
+    :class="{ 'kratos-nav-bar--tab': variant === 'tab' }"
+    :style="{ '--kratos-nav-bar-capsule-gap': `${capsuleGap}px` }"
+  >
+    <view class="kratos-nav-bar__row">
+      <view
+        v-if="showBack"
+        class="kratos-nav-bar__button kratos-nav-bar__back"
+        :aria-label="t('common.action.back')"
+        @tap="goBack"
+      />
+      <view class="kratos-nav-bar__title">{{ title }}</view>
+      <view
+        v-if="action"
+        class="kratos-nav-bar__button kratos-nav-bar__action"
+        :class="{ 'kratos-nav-bar__action--label': showActionLabel }"
+        :aria-label="action.label"
+        @tap="action.onClick"
+      >
+        <image
+          v-if="showActionIcon"
+          class="kratos-nav-bar__icon"
+          :src="actionIcon"
+          mode="aspectFit"
+          aria-hidden="true"
+        />
+        <text v-if="showActionLabel" class="kratos-nav-bar__label">{{ action.label }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.kratos-nav-bar {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding-top: calc(env(safe-area-inset-top) + 24rpx);
+}
+
+.kratos-nav-bar--tab {
+  margin-bottom: 16rpx;
+}
+
+.kratos-nav-bar__row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  height: 76rpx;
+}
+
+.kratos-nav-bar__title {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: calc(100% - 190rpx);
+  overflow: hidden;
+  color: var(--kratos-color-text);
+  font-size: 32rpx;
+  font-weight: 700;
+  line-height: 44rpx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+}
+
+.kratos-nav-bar__button {
+  display: flex;
+  flex: 0 0 76rpx;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 76rpx;
+  height: 76rpx;
+  border: 1px solid var(--kratos-color-border);
+  border-radius: 24rpx;
+  background: var(--kratos-color-surface);
+  color: var(--kratos-color-text);
+}
+
+.kratos-nav-bar__back::before {
+  width: 16rpx;
+  height: 16rpx;
+  border-left: 2px solid var(--kratos-color-primary);
+  border-bottom: 2px solid var(--kratos-color-primary);
+  content: '';
+  transform: rotate(45deg);
+}
+
+.kratos-nav-bar__action {
+  margin-left: auto;
+}
+
+.kratos-nav-bar__action--label {
+  flex: 0 1 auto;
+  gap: 10rpx;
+  min-width: 76rpx;
+  max-width: calc(50% - 48rpx);
+  width: auto;
+  padding: 0 20rpx;
+}
+
+.kratos-nav-bar__icon {
+  flex-shrink: 0;
+  width: 34rpx;
+  height: 34rpx;
+}
+
+.kratos-nav-bar__label {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 22rpx;
+  line-height: 28rpx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* #ifdef MP-WEIXIN */
+.kratos-nav-bar {
+  padding-top: 44px;
+}
+
+.kratos-nav-bar__row {
+  height: 88rpx;
+}
+
+/* 原生胶囊占据右侧，操作按钮与返回按钮统一放在左侧。 */
+.kratos-nav-bar__action {
+  margin-left: 0;
+}
+
+.kratos-nav-bar__title {
+  max-width: calc(100% - 190rpx - var(--kratos-nav-bar-capsule-gap));
+}
+/* #endif */
+</style>

package/src/components/KratosSettingsPage.vue

@@ -6,6 +6,7 @@ import { getLanguageOptions, useI18n, type SupportedLocale } from '../locales'
 import { isAuthExpiredError } from '../utils/http'
 import { defMfaService } from '../api/base/v1/mfa'
 import MfaManageDialog from './MfaManageDialog.vue'
+import KratosNavBar from './KratosNavBar.vue'
 
 defineOptions({ name: 'KratosSettingsPage' })
 
@@ -150,15 +151,6 @@ const onMfaDisabled = async () => {
   uni.reLaunch({ url: '/pages/login/login' })
 }
 
-/** 返回个人中心，页面栈不可返回时回到首页。 */
-const onBack = () => {
-  uni.navigateBack({
-    fail: () => {
-      uni.reLaunch({ url: '/pages/index/index' })
-    },
-  })
-}
-
 // 公共设置模块挂载时加载 MFA 状态，兼容页面包装和业务插槽场景。
 onMounted(() => {
   if (!userStore.ensureAuthenticated()) {
@@ -208,11 +200,7 @@ const onLogout = () => {
 <template>
   <view class="settings-page" :class="themeStore.themeClass">
     <slot name="extensions" />
-    <view class="k-page-nav">
-      <view class="k-page-nav__back" :aria-label="t('common.action.back')" @tap="onBack"></view>
-      <view class="k-page-nav__title">{{ t('core.settings.title') }}</view>
-      <view class="k-page-nav__side" aria-hidden="true"></view>
-    </view>
+    <KratosNavBar :title="t('core.settings.title')" />
     <view class="settings-content">
       <view class="k-set-cat">{{ t('core.settings.section_appearance') }}</view>
       <picker :range="themeModeLabels" :value="themeModeIndex" @change="onThemeModeChange">

package/src/components/KratosTabBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, onMounted } from 'vue'
+import { computed } from 'vue'
 import { resolveModuleIcon, resolveStaticView } from '../module'
 import { APP_MENU_ROOT_ID, useAppMenuBadge, useAppNavigation } from '../navigation'
 import { useThemeStore } from '../stores'
@@ -41,15 +41,6 @@ const activeMenu = computed(() => {
 })
 const visible = computed(() => Boolean(activeMenu.value && tabBar.value.length))
 const messageBadge = useAppMenuBadge('MESSAGE_INBOX')
-// #ifdef H5
-// H5 端 tabBar.custom 不隐藏内置 tabbar,需手动隐藏,否则其边线从自定义栏上方露出形成双线。
-const hideNativeTabBar = () => {
-  uni.hideTabBar({ fail: () => {} })
-}
-onBeforeMount(hideNativeTabBar)
-// H5 runtime 可能在页面挂载时重新同步内置 tabbar 状态，挂载后幂等重试避免首次切换露出一帧。
-onMounted(hideNativeTabBar)
-// #endif
 </script>
 
 <template>

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './bootstrap'
 export * from './module'
 export * from './locales'
 export * from './navigation'
+export type { KratosNavBarAction, KratosNavBarProps } from './types/nav-bar'
 /** KratosSettingsPage 可通过顶部插槽扩展业务内容的公共设置页。 */
 export { default as KratosSettingsPage } from './components/KratosSettingsPage.vue'
 export { default as KratosTabBar } from './components/KratosTabBar.vue'

package/src/navigation.ts

@@ -166,7 +166,6 @@ let adapter: AppNavigationAdapter = {
   list: () => defBaseMenuService.ListBaseMenu(),
 }
 
-const nativeTabViewKeys = ['HOME', 'PROFILE_HOME']
 const pageTitleKeys: Record<string, string> = {
   'pages/index/index': 'core.home.main_title',
   'pages/login/login': 'common.action.login',
@@ -178,7 +177,6 @@ const pageTitleKeys: Record<string, string> = {
   'pagesMember/profile/profile': 'system.profile.title',
   'pagesMember/settings/settings': 'core.settings.title',
 }
-const resetTabViewKeys = ['MESSAGE_INBOX']
 
 /** 替换导航远端适配器，供宿主接入自定义契约。 */
 export function setAppNavigationAdapter(nextAdapter: AppNavigationAdapter): void {
@@ -268,7 +266,7 @@ export function navigateAppRoute(rawRoute: string, options: { replace?: boolean
   uni.navigateTo({ url, fail: () => uni.reLaunch({ url }) })
 }
 
-/** 切换 tab 页面，优先复用已有页面，避免重建页面栈产生空白帧。 */
+/** 切换自绘 tab：H5 替换路由，微信端复用页面栈，避免重建整个页面栈。 */
 function navigateTabRoute(url: string): void {
   const targetRoute = url.slice(1).split('?', 1)[0].replace(/^\/+/, '')
   const pages = getCurrentPages()
@@ -284,36 +282,10 @@ function navigateTabRoute(url: string): void {
     uni.redirectTo({
       url,
       success: release,
-      fail: () => {
-        uni.reLaunch({ url, success: release, fail: release, complete: release })
-      },
-    })
-    return
-  }
-  if (nativeTabViewKeys.some((viewKey) => resolveStaticView(viewKey) === targetRoute)) {
-    uni.switchTab({
-      url,
-      success: release,
-      fail: () => navigateTabRouteInStack(url, targetRoute, pages, currentIndex, release),
-      complete: release,
+      fail: release,
     })
     return
   }
-  if (resetTabViewKeys.some((viewKey) => resolveStaticView(viewKey) === targetRoute)) {
-    uni.reLaunch({ url, success: release, fail: release, complete: release })
-    return
-  }
-  navigateTabRouteInStack(url, targetRoute, pages, currentIndex, release)
-}
-
-/** 在没有原生 tab 路由的动态菜单上复用页面栈。 */
-function navigateTabRouteInStack(
-  url: string,
-  targetRoute: string,
-  pages: ReturnType<typeof getCurrentPages>,
-  currentIndex: number,
-  release: () => void,
-): void {
   const targetIndex = pages.findIndex((page) => page.route?.replace(/^\/+/, '') === targetRoute)
   if (targetIndex >= 0 && targetIndex < currentIndex) {
     uni.navigateBack({
@@ -328,7 +300,8 @@ function navigateTabRouteInStack(
     url,
     success: release,
     fail: () => {
-      uni.reLaunch({ url, success: release, fail: release, complete: release })
+      // 小程序页面栈满时只替换栈顶，保留其他 tab 的已加载页面。
+      uni.redirectTo({ url, success: release, fail: release, complete: release })
     },
   })
 }

package/src/styles/components.scss

@@ -108,90 +108,6 @@
   box-shadow: var(--kratos-glow);
 }
 
-/* 顶栏 */
-.k-page-nav {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  height: calc(88rpx + env(safe-area-inset-top));
-  padding-top: env(safe-area-inset-top);
-}
-/* #ifdef MP-WEIXIN */
-.k-page-nav {
-  height: calc(88rpx + 44px);
-  padding-top: 44px;
-}
-/* #endif */
-.k-page-nav__back,
-.k-page-nav__side {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 76rpx;
-  width: 76rpx;
-  height: 76rpx;
-}
-.k-page-nav__back {
-  border: 1px solid var(--kratos-color-border);
-  border-radius: 24rpx;
-  background: var(--kratos-color-surface);
-}
-.k-page-nav__back::before {
-  width: 16rpx;
-  height: 16rpx;
-  border-left: 2px solid var(--kratos-color-primary);
-  border-bottom: 2px solid var(--kratos-color-primary);
-  content: '';
-  transform: rotate(45deg);
-}
-.k-page-nav__title {
-  position: absolute;
-  left: 50%;
-  max-width: calc(100% - 190rpx);
-  overflow: hidden;
-  color: var(--kratos-color-text);
-  font-size: 32rpx;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  transform: translateX(-50%);
-  white-space: nowrap;
-}
-.k-top {
-  position: relative;
-  display: flex;
-  align-items: center;
-  /* 标题绝对居中后，流内子元素（右侧动作按钮）统一靠右排布 */
-  justify-content: flex-end;
-  gap: 16rpx;
-  /* MP-WEIXIN 原生胶囊避让：页面通过 getMpCapsuleRightGap() 写入该变量，
-     其余平台未设置时回退 0，不影响布局。 */
-  padding-right: var(--mp-capsule-gap, 0px);
-}
-/* #ifdef MP-WEIXIN */
-/* 双写类名提高优先级：页面级 padding 简写（如 .message-header）不得压掉导航带 */
-.k-top.k-top {
-  /* 小程序右上角是原生胶囊：操作按钮靠左，标题行与胶囊同行（同 k-page-nav 几何） */
-  justify-content: flex-start;
-  height: calc(88rpx + 44px);
-  padding-top: 44px;
-  padding-right: 0;
-}
-/* #endif */
-.k-top__title {
-  position: absolute;
-  left: 50%;
-  max-width: calc(100% - 190rpx);
-  overflow: hidden;
-  color: var(--kratos-color-text);
-  font-size: 32rpx;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  transform: translateX(-50%);
-  white-space: nowrap;
-}
-
 /* 方形图标按钮 + 角标 */
 .k-ic {
   position: relative;

package/src/types/nav-bar.ts

@@ -0,0 +1,25 @@
+/** KratosNavBarAction 导航栏操作按钮，统一渲染尺寸、图标与无障碍文案。 */
+export interface KratosNavBarAction {
+  /** 按钮名称，同时用作可见文字与无障碍文案。 */
+  label: string
+  /** 内置 settings、read-all、history 图标名称，或自定义图片地址。 */
+  icon?: string
+  /** 显示方式；默认有图标时显示图标，否则显示文字。 */
+  display?: 'icon' | 'text' | 'both'
+  /** 点击按钮后执行的业务操作。 */
+  onClick: () => void
+}
+
+/** KratosNavBarProps 普通页面与 tabBar 页面共用的顶部导航属性。 */
+export interface KratosNavBarProps {
+  /** 居中显示的页面标题。 */
+  title: string
+  /** 普通页面默认显示返回按钮，tabBar 页面默认隐藏返回按钮。 */
+  variant?: 'page' | 'tab'
+  /** 显式覆盖返回按钮的显隐。 */
+  back?: boolean
+  /** 可选的页面操作按钮。 */
+  action?: KratosNavBarAction
+  /** 自定义返回操作；不传时返回上一页，失败后回到首页。 */
+  onBack?: () => void
+}

package/src/views/pages/index/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onLoad } from '@dcloudio/uni-app'
+import KratosNavBar from '../../../components/KratosNavBar.vue'
 import { computed, ref, watch } from 'vue'
 import { useSettingStore, useThemeStore } from '../../../stores'
 import defaultLogo from '../../../static/images/logo_icon.png'
@@ -41,9 +42,7 @@ onLoad(() => {
   <view class="home-page" :class="themeStore.themeClass">
     <view class="k-grid-bg" aria-hidden="true"></view>
     <view class="home-content">
-      <view class="home-top">
-        <view class="home-top__title">{{ mainTitle }}</view>
-      </view>
+      <KratosNavBar :title="mainTitle" variant="tab" />
 
       <view class="k-glass k-glass--lit home-hero">
         <view class="home-hero__main">
@@ -126,41 +125,7 @@ onLoad(() => {
 .home-content {
   position: relative;
   z-index: 1;
-  padding: calc(env(safe-area-inset-top) + 20rpx) 32rpx 220rpx;
-
-  /* #ifdef MP-WEIXIN */
-  /* 首页标题在小程序端占导航带，页面不再额外让出顶部空间 */
-  padding-top: 0;
-  /* #endif */
-}
-
-/* 小程序端首页标题占导航带：与 k-page-nav 同几何，标题与胶囊同行 */
-/* #ifdef MP-WEIXIN */
-.home-top {
-  box-sizing: border-box;
-  height: calc(88rpx + 44px);
-  padding: 44px 4rpx 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.home-top__title {
-  margin-top: 0;
-}
-/* #endif */
-
-.home-top {
-  padding: 8rpx 4rpx 24rpx;
-}
-
-/* 页面大标题：与其他页面导航标题同规格，向原生导航栏看齐 */
-.home-top__title {
-  margin-top: 14rpx;
-  color: var(--kratos-color-text);
-  font-size: 32rpx;
-  font-weight: 700;
-  text-align: center;
+  padding: 0 20rpx 220rpx;
 }
 
 .home-hero {

package/src/views/pages/login/protocal.vue

@@ -3,7 +3,7 @@ import { onLoad } from '@dcloudio/uni-app'
 import { useSettingStore, useThemeStore } from '../../../stores'
 import { ref } from 'vue'
 import { useI18n } from '../../../locales'
-import { homeTabPage } from '../../../utils/navigation'
+import KratosNavBar from '../../../components/KratosNavBar.vue'
 
 const settingStore = useSettingStore()
 const themeStore = useThemeStore()
@@ -77,19 +77,10 @@ const loadProtocol = async (type?: string) => {
 onLoad((query) => {
   void loadProtocol(query?.type)
 })
-
-/** 返回来源页，页面栈为空时回到首页。 */
-const onBack = () => {
-  uni.navigateBack({ fail: () => uni.reLaunch({ url: homeTabPage }) })
-}
 </script>
 <template>
   <view class="protocol-page" :class="themeStore.themeClass">
-    <view class="k-page-nav">
-      <view class="k-page-nav__back" :aria-label="t('common.action.back')" @tap="onBack"></view>
-      <view class="k-page-nav__title">{{ pageTitle }}</view>
-      <view class="k-page-nav__side" aria-hidden="true"></view>
-    </view>
+    <KratosNavBar :title="pageTitle" />
     <view class="protocol-card">
       <rich-text class="protocol-content" :nodes="content" />
     </view>
@@ -99,7 +90,7 @@ const onBack = () => {
 <style lang="scss">
 .protocol-page {
   min-height: 100vh;
-  padding: 24rpx;
+  padding: 0 24rpx 24rpx;
   box-sizing: border-box;
   background: var(--kratos-bg-gradient);
 }

package/src/vite.ts

@@ -257,6 +257,7 @@ export function kratosApp(options: KratosAppViteOptions): Plugin {
   }
 }
 
+/** preparePageAssembly 装配自绘导航页面，并通过事务保留宿主原配置。 */
 function preparePageAssembly(options: {
   inputDir: string
   pagesFile: string
@@ -288,6 +289,8 @@ function preparePageAssembly(options: {
     }
 
     const manifest = JSON.parse(originalPages) as PagesManifest
+    // 所有宿主统一使用 KratosTabBar，原生 tab 声明会限制普通页面跳转并要求额外组件。
+    delete manifest.tabBar
     manifest.pages ??= []
     const generatedFiles = options.pageMap
       .map((page) => resolve(options.inputDir, `${page.route}.vue`))