@liujitcn/kratos-uni-app-core 0.0.97 → 0.0.99

package/README.md

@@ -34,7 +34,7 @@ packages/core
 
 - 定义 `KratosAppModule`、`viewKey`、静态页面覆盖和模块图标协议。
 - 从 `/v1/app/base/menu` 加载 `99000000` 下的扁平菜单，按 `parent_id` 构建树，以二级页面生成 tabBar，并原子更新动态路由和层级导航。
-- tabBar 统一自绘，宿主不声明原生 `tabBar`；H5 替换当前路由，微信端复用普通页面栈，栈满时替换栈顶，切换不重建整个页面栈。
+- tabBar 统一自绘，宿主不声明原生 `tabBar`；H5 和微信端优先替换当前路由，微信端替换失败时再复用普通页面栈，避免页面入栈/出栈动画。
 - 页面装配插件在编译配置中移除宿主的原生 `tabBar`，退出后恢复宿主原文件。导航按模块注册的 `viewKey` 解析物理页面，支持业务模块覆盖首页和扩展 tab；引用项目升级 core 包后即可使用相同策略。
 - 按匿名态、登录态缓存导航，并在远端不可用时回退到最近缓存或默认菜单。
 - 统一认证、token、MFA、HTTP、上传、配置、Pinia 和基础页面能力。
@@ -43,6 +43,17 @@ packages/core
 - 登录阶段支持 TOTP、WebAuthn 和一次性恢复码校验；WebAuthn 编解码封装在 `src/utils/webauthn.ts`。
 - 构建时扫描模块 `src/views/**/*.vue`，逐文件合并模块 static，生成宿主页并在退出时按事务精确恢复。
 
+主题 store 公开 `themeStore.colors` 和 `registerThemeColors`。页面脚本使用语义颜色（例如 `colors.primary`、`colors.textMuted`），业务模块可以在初始化时传入 `light`、`dark` 的局部字段覆盖 Core 默认值；未传入的字段保持默认值，覆盖会立即作用于当前主题。
+
+```ts
+import { registerThemeColors } from '@liujitcn/kratos-uni-app-core/stores'
+
+registerThemeColors({
+  light: { primary: '#039e8c' },
+  dark: { primary: '#28f0d4' },
+})
+```
+
 ## 公开入口
 
 登录页返回会清理本次回跳并替换到首页；直接打开登录页清理旧 `lastRoute`，登录成功默认进入首页。主动登录、路由守卫和会话过期重登通过 `redirect=1` 标记保留本次业务目标及查询参数，成功跳转后才清理目标。登录页每次显示都会检查有效登录态，已登录则替换回首页，避免浏览器回退重新停留在登录页。H5 与微信小程序统一使用 `reLaunch` 替换登录入口并重置应用页面栈。

package/package.json

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

package/src/components/KratosNavBar.vue

@@ -25,7 +25,7 @@ const iconPaths: Record<string, string> = {
 const actionIcon = computed(() => {
   const icon = props.action?.icon
   if (!icon || !iconPaths[icon]) return icon
-  const color = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
+  const color = themeStore.colors.text
   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)}`
 })

package/src/components/KratosSettingsPage.vue

@@ -46,9 +46,9 @@ const localeIndex = computed(() =>
 )
 
 const settingsIcons = computed(() => {
-  const primary = themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'
-  const warning = themeStore.theme === 'light' ? '#d9880f' : '#ffb648'
-  const violet = themeStore.theme === 'light' ? '#5f4fe0' : '#9b8cff'
+  const primary = themeStore.colors.primary
+  const warning = themeStore.colors.warning
+  const violet = themeStore.colors.violet
   const createIcon = (body: string, color: string) =>
     `data:image/svg+xml;charset=utf-8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`)}`
 
@@ -170,8 +170,8 @@ const onLogout = () => {
   // 模态弹窗
   uni.showModal({
     content: t('core.settings.logout_confirm'),
-    confirmColor: themeStore.theme === 'light' ? '#039e8c' : '#28f0d4',
-    cancelColor: themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4',
+    confirmColor: themeStore.colors.primary,
+    cancelColor: themeStore.colors.textMuted,
     success: async (res) => {
       if (!res.confirm) {
         return

package/src/components/KratosTabBar.vue

@@ -22,13 +22,7 @@ const TAB_ICON_PATHS: Record<string, string> = {
 const tabIconSrc = (viewKey: string, active: boolean): string => {
   const path = TAB_ICON_PATHS[viewKey]
   if (!path) return ''
-  const color = active
-    ? themeStore.theme === 'light'
-      ? '#039e8c'
-      : '#28f0d4'
-    : themeStore.theme === 'light'
-      ? '#9aabbb'
-      : '#4e6378'
+  const color = active ? themeStore.colors.primary : themeStore.colors.textDim
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
 }
@@ -79,7 +73,10 @@ const messageBadge = useAppMenuBadge('MESSAGE_INBOX')
         :class="{ 'kratos-tab-bar__message-icon--active': activeMenu?.id === item.id }"
         aria-hidden="true"
       />
-      <text :class="{ 'kratos-tab-bar__text--active': activeMenu?.id === item.id }">
+      <text
+        class="kratos-tab-bar__text"
+        :class="{ 'kratos-tab-bar__text--active': activeMenu?.id === item.id }"
+      >
         {{ item.title }}
       </text>
     </view>
@@ -97,13 +94,13 @@ const messageBadge = useAppMenuBadge('MESSAGE_INBOX')
   left: 20rpx;
   z-index: 999;
   display: flex;
+  box-sizing: border-box;
   height: 104rpx;
   padding: 0 8rpx;
-  border: 1px solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
+  border: 1rpx solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
   border-radius: 30rpx;
   background: var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
-  box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(32rpx);
+  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
 }
 .kratos-tab-bar__item {
   position: relative;
@@ -112,47 +109,50 @@ const messageBadge = useAppMenuBadge('MESSAGE_INBOX')
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  height: 100%;
+  padding: 10rpx 0 8rpx;
+  box-sizing: border-box;
   color: var(--kratos-tab-bar-color);
-  font-size: 10px;
-  line-height: 12px;
+  font-size: 20rpx;
+  line-height: 28rpx;
 }
 
 .kratos-tab-bar__icon {
   flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  margin-bottom: 4px;
+  width: 44rpx;
+  height: 44rpx;
+  margin-bottom: 4rpx;
 }
 .kratos-tab-bar__message-icon {
   position: relative;
-  width: 22px;
-  height: 18px;
-  margin-bottom: 6px;
-  border: 2px solid var(--kratos-tab-bar-color);
-  border-radius: 6px;
+  width: 36rpx;
+  height: 30rpx;
+  margin-bottom: 8rpx;
+  border: 2rpx solid var(--kratos-tab-bar-color);
+  border-radius: 8rpx;
   box-sizing: border-box;
 }
 .kratos-tab-bar__message-icon::before {
   position: absolute;
-  top: 5px;
-  left: 4px;
-  width: 3px;
-  height: 3px;
+  top: 8rpx;
+  left: 7rpx;
+  width: 4rpx;
+  height: 4rpx;
   border-radius: 50%;
   background: var(--kratos-tab-bar-color);
   box-shadow:
-    5px 0 var(--kratos-tab-bar-color),
-    10px 0 var(--kratos-tab-bar-color);
+    8rpx 0 var(--kratos-tab-bar-color),
+    16rpx 0 var(--kratos-tab-bar-color);
   content: '';
 }
 .kratos-tab-bar__message-icon::after {
   position: absolute;
-  bottom: -5px;
-  left: 3px;
-  width: 7px;
-  height: 7px;
-  border-right: 2px solid var(--kratos-tab-bar-color);
-  border-bottom: 2px solid var(--kratos-tab-bar-color);
+  bottom: -8rpx;
+  left: 5rpx;
+  width: 10rpx;
+  height: 10rpx;
+  border-right: 2rpx solid var(--kratos-tab-bar-color);
+  border-bottom: 2rpx solid var(--kratos-tab-bar-color);
   background: var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
   content: '';
   transform: rotate(45deg);
@@ -163,27 +163,32 @@ const messageBadge = useAppMenuBadge('MESSAGE_INBOX')
 .kratos-tab-bar__message-icon--active::before {
   background: var(--kratos-tab-bar-active-color);
   box-shadow:
-    5px 0 var(--kratos-tab-bar-active-color),
-    10px 0 var(--kratos-tab-bar-active-color);
+    8rpx 0 var(--kratos-tab-bar-active-color),
+    16rpx 0 var(--kratos-tab-bar-active-color);
 }
 .kratos-tab-bar__message-icon--active::after {
   border-color: var(--kratos-tab-bar-active-color);
 }
+.kratos-tab-bar__text {
+  display: block;
+  min-height: 28rpx;
+  text-align: center;
+  white-space: nowrap;
+}
 .kratos-tab-bar__text--active {
   color: var(--kratos-tab-bar-active-color);
   font-weight: 700;
-  text-shadow: 0 0 12px currentColor;
 }
 .kratos-tab-bar__badge {
   position: absolute;
   top: 0;
-  right: calc(50% - 19px);
-  width: 10px;
-  height: 10px;
+  right: calc(50% - 30rpx);
+  width: 16rpx;
+  height: 16rpx;
   box-sizing: border-box;
-  border: 2px solid var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
+  border: 2rpx solid var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
   border-radius: 50%;
   background: var(--kratos-color-danger, #ff4d6d);
-  box-shadow: 0 0 12px var(--kratos-color-danger, #ff4d6d);
+  box-shadow: 0 0 12rpx var(--kratos-color-danger, #ff4d6d);
 }
 </style>

package/src/navigation.ts

@@ -178,6 +178,12 @@ const pageTitleKeys: Record<string, string> = {
   'pagesMember/settings/settings': 'core.settings.title',
 }
 
+const fallbackMenuTitleKeys: Record<string, string> = {
+  HOME: 'core.navigation.home',
+  MESSAGE_INBOX: 'core.navigation.message',
+  PROFILE_HOME: 'core.navigation.my',
+}
+
 /** 替换导航远端适配器，供宿主接入自定义契约。 */
 export function setAppNavigationAdapter(nextAdapter: AppNavigationAdapter): void {
   adapter = nextAdapter
@@ -266,7 +272,7 @@ export function navigateAppRoute(rawRoute: string, options: { replace?: boolean
   uni.navigateTo({ url, fail: () => uni.reLaunch({ url }) })
 }
 
-/** 切换自绘 tab：H5 替换路由，微信端复用页面栈，避免重建整个页面栈。 */
+/** 切换自绘 tab：直接替换当前页面，避免微信端页面入栈/出栈动画造成闪烁。 */
 function navigateTabRoute(url: string): void {
   const targetRoute = url.slice(1).split('?', 1)[0].replace(/^\/+/, '')
   const pages = getCurrentPages()
@@ -286,6 +292,21 @@ function navigateTabRoute(url: string): void {
     })
     return
   }
+  uni.redirectTo({
+    url,
+    success: release,
+    fail: () => navigateTabRouteInStack(url, targetRoute, pages, currentIndex, release),
+  })
+}
+
+/** 微信端替换路由失败时复用已有页面栈。 */
+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({
@@ -384,7 +405,7 @@ function readCachedMenus(cacheKey: string): AppMenu[] | undefined {
           ? t('core.navigation.home')
           : menu.viewKey === 'MESSAGE_INBOX'
             ? t('core.navigation.message')
-            : menu.title,
+            : resolveMenuTitle(menu.viewKey, menu.title),
     }))
     return validateMenus(cachedMenus)
   } catch {
@@ -399,18 +420,14 @@ function normalizeMenuResponse(response: ListBaseMenuResponse): AppMenu[] {
 function normalizeMenu(item: BaseMenu): AppMenu {
   const meta = item.meta
   const app = meta?.app
+  const viewKey = app?.view_key ?? ''
   return {
     id: item.id,
     parentId: item.parent_id,
     name: item.name,
     path: item.path,
-    viewKey: app?.view_key ?? '',
-    title:
-      app?.view_key === 'HOME'
-        ? t('core.navigation.home')
-        : app?.view_key === 'MESSAGE_INBOX'
-          ? t('core.navigation.message')
-          : (meta?.title ?? ''),
+    viewKey,
+    title: resolveMenuTitle(viewKey, meta?.title ?? ''),
     access: (app?.access ?? 'AUTHENTICATED') as AppMenuAccess,
     inTabBar: app?.in_tab_bar ?? false,
     icon: meta?.icon,
@@ -418,6 +435,13 @@ function normalizeMenu(item: BaseMenu): AppMenu {
   }
 }
 
+/** 为缺少后端标题的菜单提供稳定的本地化文案。 */
+function resolveMenuTitle(viewKey: string, title: string): string {
+  if (title) return title
+  const titleKey = fallbackMenuTitleKeys[viewKey]
+  return titleKey ? t(titleKey) : ''
+}
+
 function validateMenus(nextMenus: AppMenu[]): AppMenu[] {
   // 多端共用后端时菜单可能携带本应用未注册的视图键，过滤跳过而不是让整份菜单失效。
   const knownMenus = nextMenus.filter((menu) => {

package/src/stores/modules/theme.ts

@@ -1,11 +1,109 @@
 import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 /** 主题模式：暗黑、明亮、跟随系统。 */
 export type ThemeMode = 'dark' | 'light' | 'auto'
 /** 实际生效的主题。 */
 export type ResolvedTheme = 'dark' | 'light'
 
+/** 当前主题可供脚本使用的语义颜色。 */
+export interface ThemeColors {
+  background: string
+  surface: string
+  surface2: string
+  surfaceRgb: string
+  primary: string
+  primaryDeep: string
+  onPrimary: string
+  info: string
+  warning: string
+  danger: string
+  violet: string
+  text: string
+  textMuted: string
+  textDim: string
+  aiPrimary: string
+  aiDanger: string
+  aiWarning: string
+  aiViolet: string
+  aiTextMuted: string
+  aiTextDim: string
+  navigationBarText: string
+}
+
+/** 引用模块可按主题覆盖的颜色字段。未提供的字段继续使用 Core 默认值。 */
+export type ThemeColorOverrides = {
+  light?: Partial<ThemeColors>
+  dark?: Partial<ThemeColors>
+}
+
+/** 明暗主题的统一语义颜色表；页面脚本禁止直接维护主题颜色三元表达式。 */
+export const themeColors: Record<ResolvedTheme, ThemeColors> = {
+  light: {
+    background: '#eef3f8',
+    surface: '#f4f9fd',
+    surface2: '#eef4fa',
+    surfaceRgb: '255, 255, 255',
+    primary: '#039e8c',
+    primaryDeep: '#00b3a0',
+    onPrimary: '#ffffff',
+    info: '#1a93d8',
+    warning: '#d9880f',
+    danger: '#e0324f',
+    violet: '#5f4fe0',
+    text: '#102232',
+    textMuted: '#5a7083',
+    textDim: '#9aabbb',
+    aiPrimary: '#039e8c',
+    aiDanger: '#e0324f',
+    aiWarning: '#d9880f',
+    aiViolet: '#5f4fe0',
+    aiTextMuted: '#5a7083',
+    aiTextDim: '#9aabbb',
+    navigationBarText: '#000000',
+  },
+  dark: {
+    background: '#060a12',
+    surface: '#060a12',
+    surface2: '#121b2a',
+    surfaceRgb: '255, 255, 255',
+    primary: '#28f0d4',
+    primaryDeep: '#13c7b4',
+    onPrimary: '#031513',
+    info: '#45c2ff',
+    warning: '#ffb648',
+    danger: '#ff4d6d',
+    violet: '#9b8cff',
+    text: '#e9f4f6',
+    textMuted: '#8aa0b4',
+    textDim: '#4e6378',
+    aiPrimary: '#28f0d4',
+    aiDanger: '#ff4d6d',
+    aiWarning: '#ffb648',
+    aiViolet: '#9b8cff',
+    aiTextMuted: '#8aa0b4',
+    aiTextDim: '#8aa0b4',
+    navigationBarText: '#ffffff',
+  },
+}
+
+const themeColorOverrides: Record<ResolvedTheme, Partial<ThemeColors>> = reactive({
+  light: {},
+  dark: {},
+})
+
+/** 获取指定主题的语义颜色。 */
+export const getThemeColors = (theme: ResolvedTheme): ThemeColors => ({
+  ...themeColors[theme],
+  ...themeColorOverrides[theme],
+})
+
+/** 注册引用模块的主题颜色覆盖，并立即刷新已创建的主题 store。 */
+export const registerThemeColors = (overrides: ThemeColorOverrides): void => {
+  if (overrides.light) Object.assign(themeColorOverrides.light, overrides.light)
+  if (overrides.dark) Object.assign(themeColorOverrides.dark, overrides.dark)
+}
+
 const THEME_MODE_STORAGE_KEY = 'kratos_theme_mode'
 const DEFAULT_THEME_MODE: ThemeMode = 'light'
 
@@ -45,13 +143,13 @@ const readStoredMode = (): ThemeMode => {
 /** 主题实际生效时给导航栏与页面底色染色，覆盖 pages.json 的静态浅色配置。 */
 const applyChrome = (theme: ResolvedTheme) => {
   try {
-    const navigationBarColor = theme === 'light' ? '#f4f9fd' : '#060a12'
+    const colors = getThemeColors(theme)
     uni.setNavigationBarColor({
-      frontColor: theme === 'light' ? '#000000' : '#ffffff',
-      backgroundColor: navigationBarColor,
+      frontColor: colors.navigationBarText,
+      backgroundColor: colors.surface,
       fail: () => undefined,
     })
-    uni.setBackgroundColor({ backgroundColor: navigationBarColor, fail: () => undefined })
+    uni.setBackgroundColor({ backgroundColor: colors.background, fail: () => undefined })
   } catch {
     // 部分平台/版本未暴露导航栏染色 API，跳过不影响主题类。
   }
@@ -71,6 +169,7 @@ export const useThemeStore = defineStore('theme', () => {
     mode.value === 'auto' ? systemTheme.value : mode.value,
   )
   const themeClass = computed(() => `theme-${theme.value}`)
+  const colors = computed(() => getThemeColors(theme.value))
 
   /** 切换主题模式并持久化。 */
   const setMode = (nextMode: ThemeMode) => {
@@ -107,5 +206,5 @@ export const useThemeStore = defineStore('theme', () => {
 
   watch(theme, (value) => applyChrome(value), { immediate: true })
 
-  return { mode, theme, themeClass, setMode }
+  return { mode, theme, themeClass, colors, setMode }
 })

package/src/styles/base.scss

@@ -4,9 +4,8 @@
 page,
 body,
 uni-page-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', sans-serif;
+  font-family: var(--kratos-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif);
+  font-size: 28rpx;
 }
 
 view,

package/src/styles/theme.scss

@@ -31,7 +31,10 @@
   --kratos-dock-bg: rgba(10, 18, 30, 0.72);
   --kratos-glow: 0 0 24px rgba(40, 240, 212, 0.35);
   --kratos-glow-soft: 0 0 40px rgba(40, 240, 212, 0.06);
-  --kratos-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+  --kratos-font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', sans-serif;
+  --kratos-font-mono: var(--kratos-font-sans);
 }
 
 /* 明亮主题 */
@@ -62,5 +65,8 @@
   --kratos-dock-bg: rgba(255, 255, 255, 0.82);
   --kratos-glow: 0 10px 26px rgba(0, 120, 110, 0.14);
   --kratos-glow-soft: none;
-  --kratos-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+  --kratos-font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', sans-serif;
+  --kratos-font-mono: var(--kratos-font-sans);
 }

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

@@ -57,7 +57,7 @@ const appLogo = ref(defaultLogo)
 const showTenantCode = computed(() => settingStore.getData('showTenantCode') !== 'false')
 /** 按管理端 View、Hide 视觉生成本端密码可见性图标。 */
 const passwordIconSrc = (visible: boolean) => {
-  const color = themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4'
+  const color = themeStore.colors.textMuted
   const path = visible ? passwordIconPaths.hide : passwordIconPaths.view
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="${color}"><path d="${path}"/></svg>`
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
@@ -819,8 +819,8 @@ const checkedAgreePrivacy = async () => {
       content: t('core.login.protocol_prompt'),
       confirmText: t('common.action.confirm'),
       cancelText: t('common.action.cancel'),
-      confirmColor: themeStore.theme === 'light' ? '#039e8c' : '#28f0d4',
-      cancelColor: themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4',
+      confirmColor: themeStore.colors.primary,
+      cancelColor: themeStore.colors.textMuted,
       success: ({ confirm }) => {
         if (confirm) {
           isAgreePrivacy.value = true