@liujitcn/kratos-taro-app-core 0.0.96 → 0.0.99

package/README.md

@@ -12,12 +12,23 @@
 - 登录阶段支持 TOTP、WebAuthn 和一次性恢复码校验。
 - 公开 Base MFA 请求及通用密码弹窗、绑定面板和恢复码弹窗，供登录页与业务模块复用同一套绑定界面。
 - 接口驱动的逻辑路由、访问模式、自绘 tabBar 和稳定 `viewKey`。
-- tab 切换统一使用普通页面路由：H5 替换当前路由，微信端复用页面栈，栈满时替换栈顶，避免整栈重建。
+- tab 切换统一使用普通页面路由：H5 和微信端优先替换当前路由，微信端替换失败时再复用页面栈，避免页面入栈/出栈动画。
 - runner 在编译配置中移除宿主的原生 `tabBar`，退出后恢复宿主原文件；导航按模块注册的 `viewKey` 解析物理页面，支持业务模块覆盖首页和扩展 tab。
 - 页面静态资源 export、动态资源公共路径解析，以及 H5 默认导航栏兼容框架。
 - 首页、登录、协议、WebView、启动/错误状态页面。
 - H5 与微信小程序共用的模块页面装配 runner。
 
+主题 store 公开 `useThemeStore().colors` 和 `registerThemeColors`。页面脚本使用语义颜色（例如 `colors.primary`、`colors.textMuted`），业务模块可以在初始化时传入 `light`、`dark` 的局部字段覆盖 Core 默认值；未传入的字段保持默认值，覆盖会立即作用于当前主题。
+
+```ts
+import { registerThemeColors } from '@liujitcn/kratos-taro-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.96",
+  "version": "0.0.99",
   "type": "module",
   "files": [
     "dist",

package/src/components/KratosNavBar.tsx

@@ -48,7 +48,7 @@ export default function KratosNavBar({ title, variant = 'page', back, action, on
   const navStyle = { '--kratos-nav-bar-capsule-gap': `${capsuleGap}px` } as CSSProperties
   const showBack = back ?? variant === 'page'
   const iconPath = action?.icon ? iconPaths[action.icon] : undefined
-  const color = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
+  const color = themeStore.colors.text
   const actionIcon = iconPath
     ? `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.7" stroke-linecap="round" stroke-linejoin="round">${iconPath}</svg>`)}`
     : action?.icon

package/src/components/KratosTabBar.tsx

@@ -1,7 +1,7 @@
 import { Image, Text, View } from '@tarojs/components'
 import { resolveModuleIcon, resolveStaticView } from '../module'
 import { APP_MENU_ROOT_ID, navigateAppRoute, useAppMenuBadges, useAppNavigation } from '../navigation'
-import { useThemeStore } from '../stores'
+import { useThemeStore, type ThemeColors } from '../stores'
 import { resolveRootMenuId } from '../navigation-tree.mjs'
 import './KratosTabBar.scss'
 
@@ -20,16 +20,10 @@ const TAB_ICON_PATHS: Record<string, string> = {
 }
 
 /** 按设计稿线稿生成随主题与激活态取色的图标地址，未知 viewKey 返回空串走后端图标兜底。 */
-const tabIconSrc = (viewKey: string, active: boolean, theme: string): string => {
+const tabIconSrc = (viewKey: string, active: boolean, colors: ThemeColors): string => {
   const path = TAB_ICON_PATHS[viewKey]
   if (!path) return ''
-  const color = active
-    ? theme === 'light'
-      ? '#039e8c'
-      : '#28f0d4'
-    : theme === 'light'
-      ? '#9aabbb'
-      : '#4e6378'
+  const color = active ? colors.primary : 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)}`
 }
@@ -56,7 +50,7 @@ export function KratosTabBar({ route }: KratosTabBarProps) {
     >
       {tabBar.map((item) => {
         const active = activeMenu.id === item.id
-        const designIcon = tabIconSrc(item.viewKey, active, themeStore.theme)
+        const designIcon = tabIconSrc(item.viewKey, active, themeStore.colors)
         const icon = designIcon || resolveModuleIcon(active && item.selectedIcon ? item.selectedIcon : item.icon)
         return (
           <View

package/src/navigation.ts

@@ -323,7 +323,7 @@ export function navigateAppView(viewKey: string, params: Record<string, string>
   navigateAppRoute(`${path}${query ? `?${query}` : ''}`)
 }
 
-/** 切换自绘 tab：H5 替换路由，微信端复用页面栈，避免重建整个页面栈。 */
+/** 切换自绘 tab：直接替换当前页面，避免微信端页面入栈/出栈动画造成闪烁。 */
 function navigateTabRoute(url: string): void {
   const targetRoute = url.slice(1).split('?', 1)[0].replace(/^\/+/, '')
   const pages = getCurrentPages()
@@ -339,6 +339,19 @@ function navigateTabRoute(url: string): void {
     void Taro.redirectTo({ url }).then(release, release)
     return
   }
+  void Taro.redirectTo({ url }).then(release, () => {
+    navigateTabRouteInStack(url, pages, currentIndex, release)
+  })
+}
+
+/** 微信端替换路由失败时复用已有页面栈。 */
+function navigateTabRouteInStack(
+  url: string,
+  pages: ReturnType<typeof getCurrentPages>,
+  currentIndex: number,
+  release: () => void,
+): void {
+  const targetRoute = url.slice(1).split('?', 1)[0].replace(/^\/+/, '')
   const targetIndex = pages.findIndex((page) => page.route?.replace(/^\/+/, '') === targetRoute)
   if (targetIndex >= 0 && targetIndex < currentIndex) {
     void Taro.navigateBack({ delta: currentIndex - targetIndex }).then(release, release)

package/src/stores/theme.ts

@@ -6,6 +6,98 @@ 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>> = {
+  light: {},
+  dark: {},
+}
+
+/** 获取指定主题的语义颜色。 */
+export const getThemeColors = (theme: ResolvedTheme): ThemeColors => ({
+  ...themeColors[theme],
+  ...themeColorOverrides[theme],
+})
+
 const THEME_MODE_STORAGE_KEY = 'kratos_theme_mode'
 const DEFAULT_THEME_MODE: ThemeMode = 'light'
 
@@ -35,13 +127,13 @@ const readStoredMode = (): ThemeMode => {
 /** 主题实际生效时给导航栏与页面底色染色，覆盖全局配置的静态浅色。 */
 const applyChrome = (theme: ResolvedTheme) => {
   try {
-    const backgroundColor = theme === 'light' ? '#f4f9fd' : '#060a12'
+    const colors = getThemeColors(theme)
     void Taro.setNavigationBarColor({
-      frontColor: theme === 'light' ? '#000000' : '#ffffff',
-      backgroundColor,
+      frontColor: colors.navigationBarText,
+      backgroundColor: colors.surface,
       fail: () => undefined,
     })
-    void Taro.setBackgroundColor({ backgroundColor, fail: () => undefined })
+    void Taro.setBackgroundColor({ backgroundColor: colors.background, fail: () => undefined })
   } catch {
     // 部分平台/版本未暴露导航栏染色 API，跳过不影响主题类。
   }
@@ -77,6 +169,7 @@ const watchSystemTheme = (onChange: (theme: ResolvedTheme) => void) => {
 export interface ThemeStoreState {
   mode: ThemeMode
   theme: ResolvedTheme
+  colors: ThemeColors
   setMode: (mode: ThemeMode) => void
 }
 
@@ -84,6 +177,7 @@ export interface ThemeStoreState {
 export const useThemeStore = create<ThemeStoreState>((set) => ({
   mode: readStoredMode(),
   theme: 'dark',
+  colors: getThemeColors('dark'),
   setMode(mode) {
     const theme = mode === 'auto' ? readSystemTheme() : mode
     try {
@@ -91,16 +185,25 @@ export const useThemeStore = create<ThemeStoreState>((set) => ({
     } catch {
       // 存储写入失败不影响当前会话主题。
     }
-    set({ mode, theme })
+    set({ mode, theme, colors: getThemeColors(theme) })
   },
 }))
 
+/** 注册引用模块的主题颜色覆盖，并立即刷新当前主题颜色。 */
+export const registerThemeColors = (overrides: ThemeColorOverrides): void => {
+  if (overrides.light) Object.assign(themeColorOverrides.light, overrides.light)
+  if (overrides.dark) Object.assign(themeColorOverrides.dark, overrides.dark)
+  useThemeStore.setState({ colors: getThemeColors(useThemeStore.getState().theme) })
+}
+
 // 初始化：解析启动主题、染色导航栏并订阅系统主题变化。
 const initialMode = useThemeStore.getState().mode
 const initialTheme = initialMode === 'auto' ? readSystemTheme() : initialMode
-useThemeStore.setState({ theme: initialTheme })
+useThemeStore.setState({ theme: initialTheme, colors: getThemeColors(initialTheme) })
 watchSystemTheme((theme) => {
-  if (useThemeStore.getState().mode === 'auto') useThemeStore.setState({ theme })
+  if (useThemeStore.getState().mode === 'auto') {
+    useThemeStore.setState({ theme, colors: getThemeColors(theme) })
+  }
 })
 useThemeStore.subscribe((state, prev) => {
   if (state.theme !== prev.theme) applyChrome(state.theme)

package/src/styles/base.scss

@@ -19,10 +19,10 @@ html {
 page,
 body {
   min-height: 100%;
-  color: #333;
-  font-size: 16PX;
+  color: var(--kratos-color-text, #102232);
+  font-size: 14PX;
   line-height: normal;
-  background: #f7f7f8;
+  background: var(--kratos-color-background, #eef3f8);
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
     'Microsoft YaHei', sans-serif;

package/src/utils/http.ts

@@ -278,7 +278,7 @@ async function promptRelogin(): Promise<void> {
   if (isPromptingRelogin) return
   isPromptingRelogin = true
   try {
-    const theme = useThemeStore.getState().theme
+    const colors = useThemeStore.getState().colors
     const modal = await Promise.race([
       // 按钮文案复用通用确认键：平台对 confirmText 限制 4 个汉字/8 字符，长文案会被整体拒绝。
       Taro.showModal({
@@ -286,7 +286,7 @@ async function promptRelogin(): Promise<void> {
         content: t('core.auth.session_expired'),
         showCancel: false,
         confirmText: t('common.action.confirm'),
-        confirmColor: theme === 'light' ? '#039e8c' : '#28f0d4',
+        confirmColor: colors.primary,
       }).catch(() => undefined as undefined),
       new Promise<undefined>((resolve) =>
         setTimeout(() => resolve(undefined), RELOGIN_PROMPT_TIMEOUT),

package/src/views/pages/login/login.tsx

@@ -138,7 +138,7 @@ export default function LoginPage() {
   const showTenantCode = settings?.get('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)}`
@@ -310,8 +310,8 @@ export default function LoginPage() {
       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,
     })
     if (result.confirm) setAgreed(true)
     return result.confirm