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

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.84",
+  "version": "0.0.85",
   "type": "module",
   "files": [
     "dist",
@@ -39,8 +39,8 @@
     "@tarojs/components": "4.2.1",
     "@tarojs/taro": "4.2.1",
     "react": "18.3.1",
-    "@liujitcn/kratos-taro-app-core": "^0.0.84",
-    "@liujitcn/kratos-taro-app-ui": "^0.0.84"
+    "@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/components/KratosMyPage.scss

@@ -11,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

@@ -1,9 +1,9 @@
-import type { CSSProperties, ReactNode } from 'react'
+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,
-  getMpCapsuleRightGap,
+  KratosNavBar,
   navigateAppRoute,
   navigateToLogin,
   useI18n,
@@ -28,15 +28,6 @@ export default function KratosMyPage({ children }: KratosMyPageProps) {
   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')
@@ -54,17 +45,16 @@ export default function KratosMyPage({ children }: KratosMyPageProps) {
     <ScrollView
       enableBackToTop
       scrollY
-      className={`my-viewport${process.env.TARO_ENV === 'weapp' ? ' my-viewport--weapp' : ''} ${
+      className={`my-viewport ${
         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>
+        <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

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>