@liujitcn/kratos-taro-app-system 0.0.83 → 0.0.85

package/README.md

@@ -13,6 +13,34 @@
 
 页面配置统一登记在 `src/pages.ts`，运行时映射位于 `src/index.ts`，构建期描述位于 `src/build.ts`。页面私有组件放在页面目录的 `components` 中，不会被 runner 扫描为路由。
 
+## 个人中心扩展
+
+公共组件 `KratosMyPage` 保留顶部标题与设置、个人信息和 AI 助手入口；AI 卡片继续由应用的 `aiEnabled` 配置控制显隐。React `children` 作为业务扩展区，位于这些固定内容之后，与它们共用滚动区域、主题和卡片间距。未传入内容时不增加容器或留白，业务卡片、数据请求和权限由项目模块维护。
+
+公共组件与样式位于 `src/components/KratosMyPage.tsx` 和 `KratosMyPage.scss`。内置 [我的页面](src/views/pages/my/my.tsx) 已使用该组件，并挂载 [MyExtensions 空实现](src/views/pages/my/components/MyExtensions.tsx)。空实现返回 `null`，不显示占位卡片；项目可以按这个结构组织自己的业务内容。
+
+在项目业务模块的 `src/views/pages/my/my.tsx` 复用公开组件入口：
+
+```tsx
+import KratosMyPage from '@liujitcn/kratos-taro-app-system/components/KratosMyPage'
+import OrderSection from './components/OrderSection'
+import ServiceSection from './components/ServiceSection'
+
+/** MyPage 组合公共个人中心与项目业务卡片。 */
+export default function MyPage() {
+  return (
+    <KratosMyPage>
+      <OrderSection />
+      <ServiceSection />
+    </KratosMyPage>
+  )
+}
+```
+
+项目模块的 `pages` 声明 `'pages/my/my': { style: { navigationStyle: 'custom', navigationBarTitleText: '' } }`，`views` 声明 `PROFILE_HOME: 'pages/my/my'`，并在宿主 `module-manifest.ts` 中排在 system 模块之后。构建期 `buildModule.pages` 复用相同页面配置。使用相同的物理路由可以保留微信原生 tab 切换；页面 wrapper 和底部 tabBar 继续由 runner 生成，不在业务页面重复挂载。
+
+扩展区可以直接放多个业务卡片，不需要复制公共页面或给顶部入口提供替换内容。需要登录态、用户资料或导航时，通过 core 的公开 store 与导航 API 获取。
+
 ## AI 助手
 
 AI 页面支持会话创建与切换、历史会话搜索、消息加载、附件上传、复制、删除、再生成、工具提示和快捷入口。Provider 与模型通过 `AiModelService` 加载，知识库通过 `AiKnowledgeService` 加载并可多选，发送消息时携带所选知识库编号。H5 使用 Fetch SSE，微信小程序使用 chunked 请求，两端共用增量 SSE 解析器和相同事件契约。

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",
@@ -28,6 +28,7 @@
     },
     "./api/*": "./src/api/*",
     "./rpc/*": "./src/rpc/*",
+    "./components/*": "./src/components/*.tsx",
     "./views/*": "./src/views/*",
     "./package.json": "./package.json"
   },
@@ -38,8 +39,8 @@
     "@tarojs/components": "4.2.1",
     "@tarojs/taro": "4.2.1",
     "react": "18.3.1",
-    "@liujitcn/kratos-taro-app-core": "^0.0.83",
-    "@liujitcn/kratos-taro-app-ui": "^0.0.83"
+    "@liujitcn/kratos-taro-app-core": "^0.0.85",
+    "@liujitcn/kratos-taro-app-ui": "^0.0.85"
   },
   "scripts": {
     "build": "pnpm run build:entries && pnpm pack --pack-destination ../../../dist/npm",

package/src/{views/pages/my/my.scss → components/KratosMyPage.scss}

@@ -1,3 +1,4 @@
+/* 公共个人中心与业务扩展共用完整页面视口。 */
 page {
   height: 100%;
   overflow: hidden;
@@ -10,24 +11,13 @@ page {
 }
 
 .my-content {
-  padding: calc(env(safe-area-inset-top) + 24px) 32px calc(40px + env(safe-area-inset-bottom));
-}
-
-.my-viewport--weapp .my-content {
-  /* k-top 在小程序端自带 44PX 状态栏高度的导航带，页面不再额外让出顶部空间 */
-  padding-top: 0;
+  padding: 0 20px calc(40px + env(safe-area-inset-bottom));
 }
 
 .my-stack {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  margin-top: 16px;
-}
-
-.my-gear {
-  width: 34px;
-  height: 34px;
 }
 
 /* k-pfx 仅定义 flex 排布，卡片内边距交由页面控制 */

package/src/components/KratosMyPage.tsx

@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react'
+import { Image, ScrollView, View } from '@tarojs/components'
+import defaultAvatar from '@liujitcn/kratos-taro-app-core/static/images/avatar.png'
+import {
+  formatSrc,
+  KratosNavBar,
+  navigateAppRoute,
+  navigateToLogin,
+  useI18n,
+  useSettingStore,
+  useThemeStore,
+  useUserStore,
+} from '@liujitcn/kratos-taro-app-core'
+import './KratosMyPage.scss'
+
+/** KratosMyPageProps 个人中心的项目业务扩展属性。 */
+export interface KratosMyPageProps {
+  /** 在个人信息和 AI 助手之后渲染的项目业务内容。 */
+  children?: ReactNode
+}
+
+/** KratosMyPage 保留公共个人中心入口，并在下方渲染项目业务内容。 */
+export default function KratosMyPage({ children }: KratosMyPageProps) {
+  const { t } = useI18n()
+  const themeStore = useThemeStore()
+  const profile = useUserStore((state) => state.userInfo)
+  const isLoggedIn = useUserStore((state) => state.isAuthenticated())
+  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
+  const aiEnabled = useSettingStore((state) => state.aiEnabled)
+  const avatarText = (profile?.nick_name || 'U').slice(0, 1)
+  /** 个人卡账号行：登录展示账号，未登录提示去登录。 */
+  const accountText =
+    isLoggedIn && profile ? profile.user_name || profile.nick_name || '' : t('system.profile.login_prompt')
+
+  /** 打开需要登录的公共页面。 */
+  const openAuthenticatedPage = (route: string) => {
+    if (!ensureAuthenticated()) {
+      navigateToLogin()
+      return
+    }
+    navigateAppRoute(route)
+  }
+
+  return (
+    <ScrollView
+      enableBackToTop
+      scrollY
+      className={`my-viewport ${
+        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
+      }`}
+    >
+      <View className='my-content'>
+        <KratosNavBar
+          title={t('core.navigation.my')}
+          variant='tab'
+          action={{ icon: 'settings', label: t('system.settings.title'), onClick: () => openAuthenticatedPage('app/settings') }}
+        />
+
+        <View className='my-stack'>
+          <View
+            className='k-glass k-glass--lit k-pfx my-profile'
+            onClick={() => navigateAppRoute('app/profile')}
+          >
+            <View className='my-pfx-main'>
+              {isLoggedIn && profile ? (
+                <Image
+                  className='k-pfx__av'
+                  src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
+                  mode='aspectFill'
+                />
+              ) : (
+                <View className='k-pfx__av'>{avatarText}</View>
+              )}
+              <View className='my-pfx-meta'>
+                <View className='k-pfx__nm'>
+                  {isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in')}
+                </View>
+                <View className='k-pfx__ac'>{accountText}</View>
+              </View>
+            </View>
+            <View className='k-pfx__ent'>{t('system.profile.title')} ›</View>
+          </View>
+
+          {aiEnabled ? (
+            <View className='k-aix' onClick={() => openAuthenticatedPage('app/ai')}>
+              <View className='k-aix__ic'>AI</View>
+              <View className='my-aix-copy'>
+                <View className='k-aix__t'>{t('system.settings.ai_title')}</View>
+                <View className='k-aix__d'>{t('system.settings.ai_description')}</View>
+              </View>
+              <View className='k-aix__b'>{t('system.settings.go_ask')}</View>
+            </View>
+          ) : null}
+
+          {children}
+        </View>
+      </View>
+    </ScrollView>
+  )
+}

package/src/views/pages/my/components/MyExtensions.tsx

@@ -0,0 +1,4 @@
+/** MyExtensions 项目业务扩展的空实现，可添加订单、收藏或统计卡片。 */
+export default function MyExtensions() {
+  return null
+}

package/src/views/pages/my/my.tsx

@@ -1,101 +1,11 @@
-import type { CSSProperties } from 'react'
-import { Image, ScrollView, View } from '@tarojs/components'
-import defaultAvatar from '@liujitcn/kratos-taro-app-core/static/images/avatar.png'
-import {
-  formatSrc,
-  getMpCapsuleRightGap,
-  navigateAppRoute,
-  navigateToLogin,
-  useI18n,
-  useSettingStore,
-  useThemeStore,
-  useUserStore,
-} from '@liujitcn/kratos-taro-app-core'
-import './my.scss'
+import KratosMyPage from '@liujitcn/kratos-taro-app-system/components/KratosMyPage'
+import MyExtensions from './components/MyExtensions'
 
-/** 个人中心首页。 */
+/** MyPage 组合公共个人中心与项目业务扩展。 */
 export default function MyPage() {
-  const { t } = useI18n()
-  const themeStore = useThemeStore()
-  const profile = useUserStore((state) => state.userInfo)
-  const isLoggedIn = useUserStore((state) => state.isAuthenticated())
-  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
-  const aiEnabled = useSettingStore((state) => state.aiEnabled)
-  const avatarText = (profile?.nick_name || 'U').slice(0, 1)
-  /** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
-  const capsuleGap = getMpCapsuleRightGap()
-  const topNavStyle = { '--mp-capsule-gap': `${capsuleGap}px` } as CSSProperties
-  /** 设计稿齿轮线稿，随主题取色的 data URI，替代 CSS 手绘图标。 */
-  const gearIcon = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${
-      themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
-    }" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>`,
-  )}`
-  /** 个人卡账号行：登录展示账号，未登录提示去登录。 */
-  const accountText =
-    isLoggedIn && profile ? profile.user_name || profile.nick_name || '' : t('system.profile.login_prompt')
-
-  const openAuthenticatedPage = (route: string) => {
-    if (!ensureAuthenticated()) {
-      navigateToLogin()
-      return
-    }
-    navigateAppRoute(route)
-  }
-
   return (
-    <ScrollView
-      enableBackToTop
-      scrollY
-      className={`my-viewport${process.env.TARO_ENV === 'weapp' ? ' my-viewport--weapp' : ''} ${
-        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
-      }`}
-    >
-      <View className='my-content'>
-        <View className='k-top' style={topNavStyle}>
-          <View className='k-top__title'>{t('core.navigation.my')}</View>
-          <View className='k-ic' onClick={() => openAuthenticatedPage('app/settings')}>
-            <Image className='my-gear' src={gearIcon} mode='aspectFit' />
-          </View>
-        </View>
-
-        <View className='my-stack'>
-          <View
-            className='k-glass k-glass--lit k-pfx my-profile'
-            onClick={() => navigateAppRoute('app/profile')}
-          >
-            <View className='my-pfx-main'>
-              {isLoggedIn && profile ? (
-                <Image
-                  className='k-pfx__av'
-                  src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
-                  mode='aspectFill'
-                />
-              ) : (
-                <View className='k-pfx__av'>{avatarText}</View>
-              )}
-              <View className='my-pfx-meta'>
-                <View className='k-pfx__nm'>
-                  {isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in')}
-                </View>
-                <View className='k-pfx__ac'>{accountText}</View>
-              </View>
-            </View>
-            <View className='k-pfx__ent'>{t('system.profile.title')} ›</View>
-          </View>
-
-          {aiEnabled ? (
-            <View className='k-aix' onClick={() => openAuthenticatedPage('app/ai')}>
-              <View className='k-aix__ic'>AI</View>
-              <View className='my-aix-copy'>
-                <View className='k-aix__t'>{t('system.settings.ai_title')}</View>
-                <View className='k-aix__d'>{t('system.settings.ai_description')}</View>
-              </View>
-              <View className='k-aix__b'>{t('system.settings.go_ask')}</View>
-            </View>
-          ) : null}
-        </View>
-      </View>
-    </ScrollView>
+    <KratosMyPage>
+      <MyExtensions />
+    </KratosMyPage>
   )
 }

package/src/views/pagesMember/ai/index.tsx

@@ -1,16 +1,15 @@
 import { ScrollView, Text, View } from '@tarojs/components'
-import Taro, { getCurrentPages, useLoad } from '@tarojs/taro'
+import Taro, { useLoad } from '@tarojs/taro'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   formatSrc,
   getCurrentLocale,
-  navigateAppRoute,
+  KratosNavBar,
   t,
   uploadFile,
   useI18n,
   useThemeStore,
 } from '@liujitcn/kratos-taro-app-core'
-import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
 import { isAuthExpiredError } from '@liujitcn/kratos-taro-app-core/utils/http'
 import { defAiMessageService, StreamAiMessageByChunkedRequest } from '../../../api/base/v1/ai_message'
 import { defAiSessionService } from '../../../api/base/v1/ai_session'
@@ -67,12 +66,10 @@ const PENDING_MESSAGE_ID = 'pending'
 const MAX_ATTACHMENT_COUNT = 6
 const STARTER_PROMPT_PAGE_SIZE = 4
 
-/** AI 助手页面。 */
+/** AiPage 展示 AI 助手对话与会话历史。 */
 export default function AiPage() {
   const { locale } = useI18n()
   const themeStore = useThemeStore()
-  /** 导航图标随主题取色，UniIcon 的 color 属性不接受 CSS 变量。 */
-  const navIconColor = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
   const windowInfo = Taro.getWindowInfo() as ReturnType<typeof Taro.getWindowInfo> & {
     safeAreaInsets?: { top?: number; bottom?: number }
   }
@@ -658,14 +655,6 @@ export default function AiPage() {
     }
   }
 
-  const navigateBack = () => {
-    if (getCurrentPages().length > 1) {
-      void Taro.navigateBack()
-      return
-    }
-    navigateAppRoute('app/home')
-  }
-
   const handleSend = async () => {
     if (isSubmitDisabled) return
     const text = inputText.trim() || t('system.ai.attachment_answer')
@@ -724,16 +713,11 @@ export default function AiPage() {
     <View
       className={`ai-page ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}
     >
-      <View className={`ai-navbar k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
-        <View className='k-page-nav__back' aria-label={t('common.action.back')} onClick={navigateBack} />
-        <View className='k-page-nav__title'>{t('system.ai.chat_title')}</View>
-        <View
-          className='k-page-nav__side k-ic'
-          aria-label={t('system.ai.history')}
-          onClick={() => setShowSessionDrawer((open) => !open)}
-        >
-          <UniIcon type='bars' size={22} color={navIconColor} />
-        </View>
+      <View className='ai-navbar'>
+        <KratosNavBar
+          title={t('system.ai.chat_title')}
+          action={{ icon: 'history', label: t('system.ai.history'), onClick: () => setShowSessionDrawer((open) => !open) }}
+        />
       </View>
       <ScrollView
         className='ai-body'

package/src/views/pagesMember/message/detail.tsx

@@ -1,7 +1,7 @@
-import Taro, { useLoad } from '@tarojs/taro'
+import { useLoad } from '@tarojs/taro'
 import { Button, RichText, Text, View } from '@tarojs/components'
 import { useState } from 'react'
-import { homeTabPage, navigateAppView, t, useThemeStore } from '@liujitcn/kratos-taro-app-core'
+import { KratosNavBar, navigateAppView, t, useThemeStore } from '@liujitcn/kratos-taro-app-core'
 import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification } from '../../../rpc/base/v1/notification'
@@ -9,7 +9,7 @@ import { MessageActionType, MessageContentFormat } from '../../../rpc/base/v1/no
 import { resolveMessageCategoryIcon } from './icons'
 import './message.scss'
 
-/** Taro 站内信详情页面。 */
+/** MessageDetailPage 展示站内信详情与通知操作。 */
 export default function MessageDetailPage() {
   const themeStore = useThemeStore()
   const [detail, setDetail] = useState<Notification>()
@@ -55,20 +55,11 @@ export default function MessageDetailPage() {
     navigateAppView(detail.action_target, params)
   }
 
-  /** 返回消息列表，页面栈为空时回到首页。 */
-  function onBack() {
-    void Taro.navigateBack({ fail: () => void Taro.reLaunch({ url: homeTabPage }) })
-  }
-
   return (
     <View
       className={`detail-page ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}
     >
-      <View className={`k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
-        <View className='k-page-nav__back' aria-label={t('common.action.back')} onClick={onBack} />
-        <View className='k-page-nav__title'>{t('system.notification.title')}</View>
-        <View className='k-page-nav__side' aria-hidden />
-      </View>
+      <KratosNavBar title={t('system.notification.title')} />
       {detail ? (
         <>
           <Text className='detail-title'>{detail.title}</Text>

package/src/views/pagesMember/message/index.tsx

@@ -1,9 +1,8 @@
-import type { CSSProperties } from 'react'
 import { useDidShow } from '@tarojs/taro'
 import { Button, Text, View } from '@tarojs/components'
 import { useRef, useState } from 'react'
 import {
-  getMpCapsuleRightGap,
+  KratosNavBar,
   KratosEmpty,
   navigateAppView,
   t,
@@ -17,12 +16,9 @@ import { refreshNotificationSummary } from '../../../notification'
 import { resolveMessageCategoryIcon } from './icons'
 import './message.scss'
 
-/** Taro 站内信收件箱页面。 */
+/** MessageInboxPage 展示站内信收件箱，并提供全部已读操作。 */
 export default function MessageInboxPage() {
   const themeStore = useThemeStore()
-  /** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
-  const capsuleGap = getMpCapsuleRightGap()
-  const topNavStyle = { '--mp-capsule-gap': `${capsuleGap}px` } as CSSProperties
   const [items, setItems] = useState<Notification[]>([])
   const [cursorId, setCursorId] = useState(0)
   const [loading, setLoading] = useState(false)
@@ -176,20 +172,13 @@ export default function MessageInboxPage() {
         themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
       }`}
     >
-      <View className='k-top message-header' style={topNavStyle}>
-        <View className='message-header__title'>
-          <Text className='message-header__text'>{t('system.notification.title')}</Text>
-          {unreadTotal > 0 && <View className='message-unread-dot' aria-hidden='true' />}
-        </View>
-        {selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && unreadTotal > 0 && (
-          <View
-            className='k-ch k-ch--pri'
-            onClick={() => void markAllRead().catch(() => undefined)}
-          >
-            {t('system.notification.mark_all_read')}
-          </View>
-        )}
-      </View>
+      <KratosNavBar
+        title={t('system.notification.title')}
+        variant='tab'
+        action={selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && unreadTotal > 0
+          ? { display: 'text', label: t('system.notification.mark_all_read'), onClick: () => void markAllRead().catch(() => undefined) }
+          : undefined}
+      />
       <View className='k-chips'>
         <View
           className={`k-ch${categoryId === undefined ? ' k-ch--pri' : ''}`}

package/src/views/pagesMember/message/message.scss

@@ -1,49 +1,11 @@
 .message-page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: 16px 24px calc(200px + env(safe-area-inset-bottom));
+  padding: 0 20px calc(200px + env(safe-area-inset-bottom));
   background: var(--kratos-bg-gradient);
   color: var(--kratos-color-text);
 }
 
-.message-header {
-  /* 标题绝对居中后头部不再依赖流内内容撑高，保证标题行与筛选行留出间距 */
-  min-height: 76px;
-  padding: 20px 4px 24px;
-}
-
-/* 标题排版与 k-page-nav__title/k-top__title 同规格，绝对居中后文字与红点同行排布 */
-.message-header__title {
-  position: absolute;
-  left: 50%;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  max-width: calc(100% - 190px);
-  overflow: hidden;
-  font-size: 16PX;
-  font-weight: 700;
-  color: var(--kratos-color-text);
-  transform: translateX(-50%);
-  white-space: nowrap;
-}
-
-.message-header__text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.message-unread-dot {
-  flex-shrink: 0;
-  width: 12px;
-  height: 12px;
-  margin-left: 12px;
-  border-radius: 50%;
-  background: var(--kratos-color-danger);
-  box-shadow: 0 0 16px var(--kratos-color-danger);
-}
-
 .message-tabs {
   display: flex;
   margin-top: 4px;
@@ -79,7 +41,7 @@
 .detail-page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: 24px 30px calc(96px + env(safe-area-inset-bottom));
+  padding: 0 30px calc(96px + env(safe-area-inset-bottom));
   background: var(--kratos-bg-gradient);
   color: var(--kratos-color-text);
 }

package/src/views/pagesMember/profile/profile.scss

@@ -4,7 +4,7 @@
   color: var(--kratos-color-text);
 }
 
-/* k-page-nav 自带安全区顶部内边距，这里只补水平与底部 */
+/* 导航组件统一处理顶部空间，页面只维护内容的水平与底部留白。 */
 .profile-content {
   padding: 0 32px calc(40px + env(safe-area-inset-bottom));
 }

package/src/views/pagesMember/profile/profile.tsx

@@ -18,6 +18,7 @@ import type { BaseDictForm_DictItem } from '@liujitcn/kratos-taro-app-core/rpc/s
 import type { UserProfileForm } from '@liujitcn/kratos-taro-app-core/rpc/system/app/v1/auth'
 import { BaseUserIDType } from '@liujitcn/kratos-taro-app-core/rpc/system/common/v1/common'
 import {
+  KratosNavBar,
   formatSrc,
   navigateToLogin,
   uploadFile,
@@ -31,7 +32,7 @@ const IMG_MAX_SIZE = 1024 * 1024
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const ID_CODE_PATTERN = /^[A-Za-z0-9][A-Za-z0-9-]{0,63}$/
 
-/** 用户个人资料编辑页。 */
+/** ProfilePage 展示并编辑用户个人资料。 */
 export default function ProfilePage() {
   const { t } = useI18n()
   const themeStore = useThemeStore()
@@ -153,15 +154,7 @@ export default function ProfilePage() {
       className={`profile-viewport ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}
     >
       <View className='profile-content'>
-        <View className={`k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
-          <View
-            className='k-page-nav__back'
-            aria-label={t('common.action.back')}
-            onClick={() => void Taro.navigateBack()}
-          />
-          <View className='k-page-nav__title'>{t('system.profile.title')}</View>
-          <View className='k-page-nav__side' aria-hidden />
-        </View>
+        <KratosNavBar title={t('system.profile.title')} />
 
         <View className='k-glass k-glass--lit k-pfx profile-id' onClick={() => void onAvatarChange()}>
           <View className='profile-id__main'>

package/src/views/pagesMember/settings/settings.tsx

@@ -9,14 +9,14 @@ import {
   useThemeStore,
   useUserStore,
   type ThemeMode,
-  homeTabPage,
+  KratosNavBar,
 } from '@liujitcn/kratos-taro-app-core'
 import { defMfaService } from '@liujitcn/kratos-taro-app-core/api/base/v1/mfa'
 import { isAuthExpiredError } from '@liujitcn/kratos-taro-app-core/utils/http'
 import PasswordVerifyDialog from './components/PasswordVerifyDialog'
 import './settings.scss'
 
-/** 应用设置页。 */
+/** SettingsPage 展示应用设置与账号安全操作。 */
 export default function SettingsPage() {
   const { locale, setLocale, t } = useI18n()
   const themeStore = useThemeStore()
@@ -140,13 +140,7 @@ export default function SettingsPage() {
     void loadMfaStatus()
   })
 
-  /** 返回个人中心，页面栈不可返回时回到首页。 */
-  const onBack = () => {
-    void Taro.navigateBack({
-      fail: () => void Taro.reLaunch({ url: homeTabPage }),
-    })
-  }
-
+  /** onLogout 确认后退出当前账号并返回来源页面。 */
   const onLogout = async () => {
     if (logoutLoading) return
     const result = await Taro.showModal({
@@ -175,12 +169,7 @@ export default function SettingsPage() {
           themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
         }`}
       >
-        <View className={`k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
-          <View className='k-page-nav__back' aria-label={t('common.action.back')} onClick={onBack}>
-          </View>
-          <View className='k-page-nav__title'>{t('system.settings.title')}</View>
-          <View className='k-page-nav__side' aria-hidden />
-        </View>
+        <KratosNavBar title={t('system.settings.title')} />
 
         <View className='settings-content'>
           <View className='k-set-cat'>{t('system.settings.section_appearance')}</View>