@liujitcn/kratos-uni-app-system 0.0.84 → 0.0.86

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.84",
+  "version": "0.0.86",
   "type": "module",
   "files": [
     "dist",
@@ -36,7 +36,7 @@
     "@dcloudio/uni-app": "3.0.0-5010520260709002",
     "@dcloudio/uni-ui": "^1.4.28",
     "vue": "^3.4.21",
-    "@liujitcn/kratos-uni-app-core": "^0.0.84"
+    "@liujitcn/kratos-uni-app-core": "^0.0.86"
   },
   "devDependencies": {
     "esbuild": "^0.20.2",

package/src/components/KratosMyPage.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useSettingStore, useThemeStore, useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
 import { computed } from 'vue'
-import { formatSrc, getMpCapsuleRightGap } from '@liujitcn/kratos-uni-app-core/utils/index'
+import { formatSrc } from '@liujitcn/kratos-uni-app-core/utils/index'
 import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
 import { navigateAppRoute } from '@liujitcn/kratos-uni-app-core'
+import KratosNavBar from '@liujitcn/kratos-uni-app-core/components/KratosNavBar.vue'
 import defaultAvatar from '@liujitcn/kratos-uni-app-core/static/images/avatar.png'
 import { useI18n } from '@liujitcn/kratos-uni-app-core'
 
@@ -22,19 +23,9 @@ const { t } = useI18n()
 const isLoggedIn = computed(() => userStore.isAuthenticated())
 const profile = computed(() => userStore.userInfo)
 
-/** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
-const capsuleGap = getMpCapsuleRightGap()
-
 /** 昵称或占位账号首字符，用于渐变头像兜底。 */
 const avatarText = computed(() => (profile.value?.nick_name || 'U').slice(0, 1))
 
-/** 设计稿齿轮线稿，随主题取色的 data URI，替代 CSS 手绘图标。 */
-const gearIcon = computed(() => {
-  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"><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>`
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
-})
-
 /** 个人卡账号行：登录展示账号，未登录提示去登录。 */
 const accountText = computed(() => {
   if (isLoggedIn.value && profile.value) {
@@ -68,13 +59,15 @@ const navigateToProfile = () => navigateAppRoute('app/profile')
 <template>
   <scroll-view enable-back-to-top class="my-viewport" scroll-y :class="themeStore.themeClass">
     <view class="my-content">
-      <!-- 顶栏：标题 + 设置入口（Tab 根页，无返回） -->
-      <view class="k-top" :style="{ '--mp-capsule-gap': `${capsuleGap}px` }">
-        <view class="k-top__title">{{ t('core.navigation.my') }}</view>
-        <view class="k-ic" @tap="navigateToSettings">
-          <image class="my-gear" :src="gearIcon" mode="aspectFit" />
-        </view>
-      </view>
+      <KratosNavBar
+        :title="t('core.navigation.my')"
+        variant="tab"
+        :action="{
+          icon: 'settings',
+          label: t('core.settings.title'),
+          onClick: navigateToSettings,
+        }"
+      />
 
       <view class="my-stack">
         <!-- 个人资料 -->
@@ -122,24 +115,13 @@ const navigateToProfile = () => navigateAppRoute('app/profile')
 }
 
 .my-content {
-  padding: calc(env(safe-area-inset-top) + 24rpx) 32rpx calc(40rpx + env(safe-area-inset-bottom));
-
-  /* #ifdef MP-WEIXIN */
-  /* k-top 在小程序端自带 44px 状态栏高度的导航带，页面不再额外让出顶部空间 */
-  padding-top: 0;
-  /* #endif */
+  padding: 0 20rpx calc(40rpx + env(safe-area-inset-bottom));
 }
 
 .my-stack {
   display: flex;
   flex-direction: column;
   gap: 24rpx;
-  margin-top: 16rpx;
-}
-
-.my-gear {
-  width: 34rpx;
-  height: 34rpx;
 }
 
 /* k-pfx 仅定义 flex 排布，卡片内边距交由页面控制 */

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import KratosNavBar from '@liujitcn/kratos-uni-app-core/components/KratosNavBar.vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import {
@@ -22,7 +23,7 @@ import { isAuthExpiredError } from '@liujitcn/kratos-uni-app-core/utils/http'
 import Composer from './components/Composer.vue'
 import SessionDrawer from './components/SessionDrawer.vue'
 import WelcomePanel from './components/WelcomePanel.vue'
-import { navigateAppRoute, useI18n } from '@liujitcn/kratos-uni-app-core'
+import { useI18n } from '@liujitcn/kratos-uni-app-core'
 import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
 import {
   type AiStreamEvent,
@@ -74,9 +75,6 @@ const MAX_ATTACHMENT_COUNT = 6
 const STARTER_PROMPT_PAGE_SIZE = 4
 const { locale, t } = useI18n()
 const themeStore = useThemeStore()
-/** 导航图标随主题取色，uni-icons 的 color 属性不接受 CSS 变量。 */
-const navIconColor = computed(() => (themeStore.theme === 'light' ? '#102232' : '#e9f4f6'))
-
 const windowInfo = uni.getWindowInfo()
 let safeAreaTop =
   windowInfo.safeArea?.top || windowInfo.statusBarHeight || windowInfo.safeAreaInsets?.top || 0
@@ -362,15 +360,6 @@ const handleMessageAction = (item: ChatMessageItem) => {
   })
 }
 
-const navigateBack = () => {
-  const pages = getCurrentPages()
-  if (pages.length > 1) {
-    uni.navigateBack()
-    return
-  }
-  navigateAppRoute('app/home')
-}
-
 const handleSend = async () => {
   if (isSubmitDisabled.value) {
     return
@@ -1277,20 +1266,11 @@ function showError(error: unknown, fallback: string) {
 
 <template>
   <view class="ai-page" :class="themeStore.themeClass">
-    <view class="ai-navbar k-page-nav">
-      <view
-        class="k-page-nav__back"
-        :aria-label="t('common.action.back')"
-        @tap="navigateBack"
-      ></view>
-      <view class="k-page-nav__title">{{ t('system.ai.chat_title') }}</view>
-      <view
-        class="k-page-nav__side k-ic"
-        :aria-label="t('system.ai.history')"
-        @tap="toggleSessionDrawer"
-      >
-        <uni-icons type="bars" size="22" :color="navIconColor" />
-      </view>
+    <view class="ai-navbar">
+      <KratosNavBar
+        :title="t('system.ai.chat_title')"
+        :action="{ icon: 'history', label: t('system.ai.history'), onClick: toggleSessionDrawer }"
+      />
     </view>
 
     <scroll-view

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import KratosNavBar from '@liujitcn/kratos-uni-app-core/components/KratosNavBar.vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
 import { navigateAppView, t } from '@liujitcn/kratos-uni-app-core'
 import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
-import { homeTabPage } from '@liujitcn/kratos-uni-app-core/utils/navigation'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification } from '../../../rpc/base/v1/notification'
 import { MessageActionType, MessageContentFormat } from '../../../rpc/base/v1/notification'
@@ -52,20 +52,11 @@ function openAction() {
   }
   navigateAppView(detail.value.action_target, params)
 }
-
-/** 返回消息列表，页面栈为空时回到首页。 */
-function onBack() {
-  uni.navigateBack({ fail: () => uni.reLaunch({ url: homeTabPage }) })
-}
 </script>
 
 <template>
   <view class="detail-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">{{ t('system.notification.title') }}</view>
-      <view class="k-page-nav__side" aria-hidden="true"></view>
-    </view>
+    <KratosNavBar :title="t('system.notification.title')" />
     <template v-if="detail">
       <text class="detail-title">{{ detail.title }}</text>
       <view class="detail-meta">
@@ -104,7 +95,7 @@ function onBack() {
 .detail-page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: 24rpx 30rpx calc(96rpx + env(safe-area-inset-bottom));
+  padding: 0 30rpx calc(96rpx + env(safe-area-inset-bottom));
   background: var(--kratos-bg-gradient);
   color: var(--kratos-color-text);
 }

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import KratosEmpty from '@liujitcn/kratos-uni-app-core/components/KratosEmpty.vue'
+import KratosNavBar from '@liujitcn/kratos-uni-app-core/components/KratosNavBar.vue'
 import { onShow } from '@dcloudio/uni-app'
 import { computed, ref } from 'vue'
-import { KratosEmpty, navigateAppView, t } from '@liujitcn/kratos-uni-app-core'
+import { navigateAppView, t } from '@liujitcn/kratos-uni-app-core'
 import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
-import { getMpCapsuleRightGap } from '@liujitcn/kratos-uni-app-core/utils/index'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification, NotificationCategory } from '../../../rpc/base/v1/notification'
 import { NotificationView } from '../../../rpc/base/v1/notification'
@@ -11,8 +12,6 @@ import { notificationUnreadTotal, refreshNotificationSummary } from '../../../no
 import { resolveMessageCategoryIcon } from './icons'
 
 const themeStore = useThemeStore()
-/** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
-const capsuleGap = getMpCapsuleRightGap()
 const items = ref<Notification[]>([])
 const loading = ref(false)
 const cursorId = ref(0)
@@ -128,22 +127,19 @@ const emptyHintKey = computed(() => {
 
 <template>
   <view class="message-page" :class="themeStore.themeClass">
-    <view class="k-top message-header" :style="{ '--mp-capsule-gap': `${capsuleGap}px` }">
-      <view class="message-header__title">
-        <text class="message-header__text">{{ t('system.notification.title') }}</text>
-        <view v-if="notificationUnreadTotal > 0" class="message-unread-dot" aria-hidden="true" />
-      </view>
-      <view
-        v-if="
-          selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED &&
-          notificationUnreadTotal > 0
-        "
-        class="k-ch k-ch--pri"
-        @tap="markAllRead"
-      >
-        {{ t('system.notification.mark_all_read') }}
-      </view>
-    </view>
+    <KratosNavBar
+      :title="t('system.notification.title')"
+      variant="tab"
+      :action="
+        selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && notificationUnreadTotal > 0
+          ? {
+              display: 'text',
+              label: t('system.notification.mark_all_read'),
+              onClick: markAllRead,
+            }
+          : undefined
+      "
+    />
     <view class="k-chips">
       <view class="k-ch" :class="{ 'k-ch--pri': categoryId === undefined }" @tap="changeCategory()">
         {{ t('system.notification.view.inbox') }}
@@ -247,50 +243,10 @@ const emptyHintKey = computed(() => {
 .message-page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: calc(16rpx + env(safe-area-inset-top)) 24rpx calc(200rpx + env(safe-area-inset-bottom));
+  padding: 0 20rpx calc(200rpx + env(safe-area-inset-bottom));
   background: var(--kratos-bg-gradient);
   color: var(--kratos-color-text);
 }
-/* #ifdef MP-WEIXIN */
-.message-page {
-  /* k-top 在小程序端自带 44px 状态栏高度的导航带，页面不再额外让出顶部空间 */
-  padding-top: 0;
-}
-/* #endif */
-.message-header {
-  /* 标题绝对居中后头部不再依赖流内内容撑高，保证标题行与筛选行留出间距 */
-  min-height: 76rpx;
-  padding: 20rpx 4rpx 24rpx;
-}
-/* 标题排版与 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% - 190rpx);
-  overflow: hidden;
-  font-size: 32rpx;
-  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: 12rpx;
-  height: 12rpx;
-  margin-left: 12rpx;
-  border-radius: 50%;
-  background: var(--kratos-color-danger);
-  box-shadow: 0 0 16rpx var(--kratos-color-danger);
-}
 .message-tabs {
   display: flex;
   margin-top: 4rpx;

package/src/views/pagesMember/profile/profile.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import KratosNavBar from '@liujitcn/kratos-uni-app-core/components/KratosNavBar.vue'
 import { defAuthService } from '@liujitcn/kratos-uni-app-core/api/system/app/v1/auth'
 import { useThemeStore, useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
 import type { UserProfileForm } from '@liujitcn/kratos-uni-app-core/rpc/system/app/v1/auth'
@@ -17,9 +18,6 @@ const userStore = useUserStore()
 const themeStore = useThemeStore()
 const { t } = useI18n()
 
-/** 返回上一页。 */
-const onBack = () => uni.navigateBack()
-
 const imgMaxSize = ref(1024 * 1024)
 const submitting = ref(false)
 let navigateBackTimer: ReturnType<typeof setTimeout> | undefined
@@ -251,11 +249,7 @@ const onSubmit = async () => {
   <view class="profile-viewport" :class="themeStore.themeClass">
     <view class="profile-content">
       <!-- 导航栏：统一子页头（单一返回 + 标题） -->
-      <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('system.profile.title') }}</view>
-        <view class="k-page-nav__side" aria-hidden="true"></view>
-      </view>
+      <KratosNavBar :title="t('system.profile.title')" />
 
       <!-- 头像卡：点击更换头像 -->
       <view class="k-glass k-glass--lit k-pfx profile-id" @tap="onAvatarChange">
@@ -367,7 +361,7 @@ const onSubmit = async () => {
   background: var(--kratos-bg-gradient);
 }
 
-/* k-page-nav 自带安全区顶部内边距，这里只补水平与底部 */
+/* 导航组件统一处理顶部空间，页面只维护内容的水平与底部留白。 */
 .profile-content {
   padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
 }