@liujitcn/kratos-uni-app-core 0.0.79 → 0.0.80

package/src/components/MfaManageDialog.vue

@@ -363,7 +363,7 @@ watch(
 .mfa-bind-dialog__panel {
   width: min(100%, 680rpx);
   overflow: hidden;
-  background-color: #fff;
+  background-color: var(--kratos-color-surface-solid);
   border-radius: 16rpx;
   box-shadow: 0 20rpx 64rpx rgb(0 0 0 / 20%);
 }
@@ -373,17 +373,17 @@ watch(
   align-items: center;
   justify-content: space-between;
   padding: 28rpx 32rpx;
-  border-bottom: 1rpx solid #eee;
+  border-bottom: 1rpx solid var(--kratos-color-border);
 }
 
 .mfa-bind-dialog__title {
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 34rpx;
   font-weight: 600;
 }
 
 .mfa-bind-dialog__close {
-  color: #999;
+  color: var(--kratos-color-text-muted);
   font-size: 42rpx;
   line-height: 1;
 }
@@ -395,7 +395,7 @@ watch(
 .mfa-bind-dialog__label {
   display: block;
   margin-bottom: 12rpx;
-  color: #333;
+  color: var(--kratos-color-text);
   font-size: 28rpx;
 }
 
@@ -403,9 +403,10 @@ watch(
   box-sizing: border-box;
   width: 100%;
   padding: 20rpx 24rpx;
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 30rpx;
-  border: 1rpx solid #ddd;
+  border: 1rpx solid var(--kratos-color-border);
+  background-color: var(--kratos-color-surface-2);
   border-radius: 8rpx;
 }
 
@@ -422,7 +423,7 @@ watch(
 }
 
 .mfa-bind-dialog__error {
-  color: #e64340;
+  color: var(--kratos-color-danger);
 }
 
 .mfa-bind-dialog__footer {
@@ -448,16 +449,16 @@ watch(
 }
 
 .mfa-bind-dialog__button--cancel {
-  color: #555;
-  background-color: #f3f3f3;
+  color: var(--kratos-color-text-muted);
+  background-color: var(--kratos-color-track);
 }
 
 .mfa-bind-dialog__button--confirm {
-  color: #fff;
-  background-color: #27ba9b;
+  color: var(--kratos-color-on-primary);
+  background-color: var(--kratos-color-primary);
 }
 
 .mfa-bind-dialog__button--danger {
-  background-color: #e64340;
+  background-color: var(--kratos-color-danger);
 }
 </style>

package/src/components/MfaRecoveryCodesDialog.vue

@@ -115,18 +115,18 @@ onBeforeUnmount(() => {
 .mfa-recovery-dialog__panel {
   width: min(100%, 640rpx);
   overflow: hidden;
-  background-color: #fff;
+  background-color: var(--kratos-color-surface-solid);
   border-radius: 16rpx;
   box-shadow: 0 20rpx 64rpx rgb(0 0 0 / 20%);
 }
 
 .mfa-recovery-dialog__header {
   padding: 28rpx 32rpx;
-  border-bottom: 1rpx solid #eee;
+  border-bottom: 1rpx solid var(--kratos-color-border);
 }
 
 .mfa-recovery-dialog__title {
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 34rpx;
   font-weight: 600;
 }
@@ -141,10 +141,11 @@ onBeforeUnmount(() => {
   min-height: 220rpx;
   margin-bottom: 16rpx;
   padding: 20rpx 24rpx;
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 30rpx;
   line-height: 1.6;
-  border: 1rpx solid #ddd;
+  border: 1rpx solid var(--kratos-color-border);
+  background-color: var(--kratos-color-surface-2);
   border-radius: 8rpx;
   overflow-wrap: anywhere;
   white-space: pre-wrap;
@@ -156,10 +157,10 @@ onBeforeUnmount(() => {
   height: 58rpx;
   margin: 0;
   padding: 0 18rpx;
-  color: #27ba9b;
+  color: var(--kratos-color-primary);
   font-size: 24rpx;
   line-height: 58rpx;
-  background-color: #f0fbf8;
+  background-color: var(--kratos-color-primary-soft);
   border: 0;
   border-radius: 8rpx;
 }
@@ -170,14 +171,14 @@ onBeforeUnmount(() => {
 }
 
 .mfa-recovery-dialog__copy.is-failed {
-  color: #e64340;
-  background-color: #fff1f0;
+  color: var(--kratos-color-danger);
+  background-color: var(--kratos-color-danger-soft);
 }
 
 .mfa-recovery-dialog__warning {
   display: block;
   margin-top: 12rpx;
-  color: #c58b00;
+  color: var(--kratos-color-warning);
   font-size: 24rpx;
   line-height: 1.5;
 }
@@ -193,10 +194,10 @@ onBeforeUnmount(() => {
   height: 72rpx;
   margin: 0;
   padding: 0 24rpx;
-  color: #fff;
+  color: var(--kratos-color-on-primary);
   font-size: 28rpx;
   line-height: 72rpx;
-  background-color: #27ba9b;
+  background-color: var(--kratos-color-primary);
   border: 0;
   border-radius: 8rpx;
 }

package/src/components/MfaSetupPanel.vue

@@ -88,7 +88,7 @@ onBeforeUnmount(() => {
 .mfa-setup-panel__uri-text {
   flex: 1;
   min-width: 0;
-  color: #666;
+  color: var(--kratos-color-text-muted);
   font-size: 24rpx;
   line-height: 1.5;
   overflow-wrap: anywhere;
@@ -103,8 +103,8 @@ onBeforeUnmount(() => {
   height: 58rpx;
   margin: 0;
   padding: 0;
-  color: #27ba9b;
-  background: #f0fbf8;
+  color: var(--kratos-color-primary);
+  background: var(--kratos-color-primary-soft);
   border: 0;
   border-radius: 8rpx;
 }
@@ -114,13 +114,13 @@ onBeforeUnmount(() => {
 }
 
 .mfa-setup-panel__copy.is-copied {
-  color: #fff;
-  background: #27ba9b;
+  color: var(--kratos-color-on-primary);
+  background: var(--kratos-color-primary);
 }
 
 .mfa-setup-panel__copy.is-failed {
-  color: #e64340;
-  background: #fff1f0;
+  color: var(--kratos-color-danger);
+  background: var(--kratos-color-danger-soft);
 }
 
 .mfa-setup-panel__status {
@@ -155,6 +155,6 @@ onBeforeUnmount(() => {
 .mfa-setup-panel__copy-front {
   right: 0;
   bottom: 0;
-  background-color: #f0fbf8;
+  background-color: var(--kratos-color-primary-soft);
 }
 </style>

package/src/components/PasswordVerifyDialog.vue

@@ -169,7 +169,7 @@ watch(
 .password-verify-dialog__panel {
   width: min(100%, 640rpx);
   overflow: hidden;
-  background-color: #fff;
+  background-color: var(--kratos-color-surface-solid);
   border-radius: 16rpx;
   box-shadow: 0 20rpx 64rpx rgb(0 0 0 / 20%);
 }
@@ -179,18 +179,18 @@ watch(
   align-items: center;
   justify-content: space-between;
   padding: 28rpx 32rpx;
-  border-bottom: 1rpx solid #eee;
+  border-bottom: 1rpx solid var(--kratos-color-border);
 }
 
 .password-verify-dialog__title {
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 34rpx;
   font-weight: 600;
 }
 
 .password-verify-dialog__close {
   padding: 0 8rpx;
-  color: #999;
+  color: var(--kratos-color-text-muted);
   font-size: 42rpx;
   line-height: 1;
 }
@@ -202,7 +202,7 @@ watch(
 .password-verify-dialog__description {
   display: block;
   margin-bottom: 24rpx;
-  color: #666;
+  color: var(--kratos-color-text-muted);
   font-size: 26rpx;
   line-height: 1.6;
 }
@@ -210,7 +210,7 @@ watch(
 .password-verify-dialog__label {
   display: block;
   margin-bottom: 12rpx;
-  color: #333;
+  color: var(--kratos-color-text);
   font-size: 28rpx;
 }
 
@@ -219,20 +219,21 @@ watch(
   width: 100%;
   height: 84rpx;
   padding: 0 24rpx;
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 30rpx;
-  border: 1rpx solid #ddd;
+  border: 1rpx solid var(--kratos-color-border);
+  background-color: var(--kratos-color-surface-2);
   border-radius: 8rpx;
 }
 
 .password-verify-dialog__input:focus {
-  border-color: #27ba9b;
+  border-color: var(--kratos-color-primary);
 }
 
 .password-verify-dialog__error {
   display: block;
   margin-top: 10rpx;
-  color: #e64340;
+  color: var(--kratos-color-danger);
   font-size: 24rpx;
 }
 
@@ -259,13 +260,13 @@ watch(
 }
 
 .password-verify-dialog__button--cancel {
-  color: #555;
-  background-color: #f3f3f3;
+  color: var(--kratos-color-text-muted);
+  background-color: var(--kratos-color-track);
 }
 
 .password-verify-dialog__button--confirm {
-  color: #fff;
-  background-color: #27ba9b;
+  color: var(--kratos-color-on-primary);
+  background-color: var(--kratos-color-primary);
 }
 
 .password-verify-dialog__button[disabled] {

package/src/locales/en-US.json

@@ -115,6 +115,9 @@
   "core.settings.authorization": "Authorization settings",
   "core.settings.contact": "Contact us",
   "core.settings.feedback": "Feedback",
+  "core.settings.section_appearance": "Appearance",
+  "core.settings.section_security": "Account security",
+  "core.settings.section_more": "More · Mini Program",
   "core.settings.logout_confirm": "Log out now?",
   "core.settings.logout_failed": "Logout failed",
   "core.settings.mfa_bind_success": "Multi-factor authentication enabled",
@@ -144,5 +147,9 @@
   "common.action.load_more": "Load more",
   "common.status.loading": "Loading…",
   "core.navigation.analytics": "Analytics",
-  "core.navigation.report": "Reports"
+  "core.navigation.report": "Reports",
+  "core.settings.theme": "Theme Appearance",
+  "core.theme.auto": "Follow System",
+  "core.theme.dark": "Dark",
+  "core.theme.light": "Light"
 }

package/src/locales/ja-JP.json

@@ -115,6 +115,9 @@
   "core.settings.authorization": "認可管理",
   "core.settings.contact": "お問い合わせ",
   "core.settings.feedback": "問題のフィードバック",
+  "core.settings.section_appearance": "外観",
+  "core.settings.section_security": "アカウントセキュリティ",
+  "core.settings.section_more": "その他・ミニプログラム",
   "core.settings.logout_confirm": "ログアウトしますか?",
   "core.settings.logout_failed": "ログアウトに失敗しました",
   "core.settings.mfa_bind_success": "多要素認証を有効にしました",
@@ -144,5 +147,9 @@
   "common.action.load_more": "さらに読み込む",
   "common.status.loading": "読み込み中…",
   "core.navigation.analytics": "分析",
-  "core.navigation.report": "レポート"
+  "core.navigation.report": "レポート",
+  "core.settings.theme": "テーマ外観",
+  "core.theme.auto": "システムに従う",
+  "core.theme.dark": "ダーク",
+  "core.theme.light": "ライト"
 }

package/src/locales/zh-CN.json

@@ -115,6 +115,9 @@
   "core.settings.authorization": "授权管理",
   "core.settings.contact": "联系我们",
   "core.settings.feedback": "问题反馈",
+  "core.settings.section_appearance": "外观",
+  "core.settings.section_security": "账户安全",
+  "core.settings.section_more": "更多 · 小程序端",
   "core.settings.logout_confirm": "是否退出登录？",
   "core.settings.logout_failed": "退出登录失败",
   "core.settings.mfa_bind_success": "多因素认证绑定成功",
@@ -144,5 +147,9 @@
   "common.action.load_more": "加载更多",
   "common.status.loading": "加载中…",
   "core.navigation.analytics": "分析",
-  "core.navigation.report": "报表"
+  "core.navigation.report": "报表",
+  "core.settings.theme": "主题外观",
+  "core.theme.auto": "跟随系统",
+  "core.theme.dark": "暗黑",
+  "core.theme.light": "明亮"
 }

package/src/locales/zh-TW.json

@@ -115,6 +115,9 @@
   "core.settings.authorization": "授權管理",
   "core.settings.contact": "聯絡我們",
   "core.settings.feedback": "問題反饋",
+  "core.settings.section_appearance": "外觀",
+  "core.settings.section_security": "帳戶安全",
+  "core.settings.section_more": "更多・小程式端",
   "core.settings.logout_confirm": "是否退出登入？",
   "core.settings.logout_failed": "退出登入失敗",
   "core.settings.mfa_bind_success": "多因素認證綁定成功",
@@ -144,5 +147,9 @@
   "common.action.load_more": "載入更多",
   "common.status.loading": "載入中…",
   "core.navigation.analytics": "分析",
-  "core.navigation.report": "報表"
+  "core.navigation.report": "報表",
+  "core.settings.theme": "主題外觀",
+  "core.theme.auto": "跟隨系統",
+  "core.theme.dark": "暗黑",
+  "core.theme.light": "明亮"
 }

package/src/navigation.ts

@@ -2,7 +2,7 @@ import { computed, readonly, ref } from 'vue'
 import { defBaseMenuService } from './api/system/app/v1/base_menu'
 import type { BaseMenu, ListBaseMenuResponse } from './rpc/system/app/v1/base_menu'
 import { hasValidToken } from './utils/auth'
-import { navigateToLogin } from './utils/navigation'
+import { redirectToLogin } from './utils/navigation'
 import { resolveStaticView } from './module'
 import { matchLogicalPath, parseLogicalQuery } from './navigation-pattern.mjs'
 import { buildMenuTree } from './navigation-tree.mjs'
@@ -233,8 +233,9 @@ export function navigateAppRoute(rawRoute: string, options: { replace?: boolean
     launchAppStatus('NOT_FOUND')
     return
   }
+  // 守卫拦截用替换式跳转：登录页顶掉当前页，返回时不再弹回被拦截的页面形成循环。
   if (resolved.menu.access === 'AUTHENTICATED' && !hasValidToken()) {
-    navigateToLogin(`/pages/bootstrap/index?route=${encodeURIComponent(rawRoute)}`)
+    redirectToLogin(`/pages/bootstrap/index?route=${encodeURIComponent(rawRoute)}`)
     return
   }
   if (resolved.menu.access === 'GUEST_ONLY' && hasValidToken()) {
@@ -270,7 +271,13 @@ function navigateTabRoute(url: string): void {
     if (tabNavigationTarget === targetRoute) tabNavigationTarget = undefined
   }
   if (isH5Runtime) {
-    uni.reLaunch({ url, success: release, fail: release, complete: release })
+    uni.redirectTo({
+      url,
+      success: release,
+      fail: () => {
+        uni.reLaunch({ url, success: release, fail: release, complete: release })
+      },
+    })
     return
   }
   if (nativeTabViewKeys.some((viewKey) => resolveStaticView(viewKey) === targetRoute)) {

package/src/pages.ts

@@ -9,8 +9,10 @@ export const corePages: Record<string, KratosAppPageConfig> = {
       navigationBarTitleText: '',
     },
   },
-  'pages/login/login': { style: { navigationBarTitleText: '' } },
-  'pages/login/protocal': { style: { navigationBarTitleText: '' } },
+  'pages/login/login': {
+    style: { navigationStyle: 'custom', navigationBarTitleText: '' },
+  },
+  'pages/login/protocal': { style: { navigationStyle: 'custom', navigationBarTitleText: '' } },
   'pages/webview/webview': {
     style: {
       navigationBarTitleText: '',

package/src/stores/index.ts

@@ -13,3 +13,4 @@ export default pinia
 export * from './modules/user'
 export * from './modules/setting'
 export * from './modules/locale'
+export * from './modules/theme'

package/src/stores/modules/theme.ts

@@ -0,0 +1,111 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+/** 主题模式：暗黑、明亮、跟随系统。 */
+export type ThemeMode = 'dark' | 'light' | 'auto'
+/** 实际生效的主题。 */
+export type ResolvedTheme = 'dark' | 'light'
+
+const THEME_MODE_STORAGE_KEY = 'kratos_theme_mode'
+const DEFAULT_THEME_MODE: ThemeMode = 'light'
+
+/** 判断当前运行环境是否为 H5。 */
+const isH5 = () => {
+  // #ifdef H5
+  return true
+  // #endif
+  // #ifndef H5
+  return false
+  // #endif
+}
+
+/** 读取系统主题；系统未上报时回退明亮。 */
+const readSystemTheme = (): ResolvedTheme => {
+  if (isH5() && typeof window.matchMedia === 'function') {
+    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+  }
+  try {
+    return uni.getSystemInfoSync().theme === 'dark' ? 'dark' : 'light'
+  } catch {
+    return 'light'
+  }
+}
+
+/** 读取本地持久化的主题模式。 */
+const readStoredMode = (): ThemeMode => {
+  try {
+    const stored = uni.getStorageSync(THEME_MODE_STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light' || stored === 'auto') return stored
+  } catch {
+    // 存储读取失败时使用默认主题。
+  }
+  return DEFAULT_THEME_MODE
+}
+
+/** 主题实际生效时给导航栏与页面底色染色，覆盖 pages.json 的静态浅色配置。 */
+const applyChrome = (theme: ResolvedTheme) => {
+  try {
+    const navigationBarColor = theme === 'light' ? '#f4f9fd' : '#060a12'
+    uni.setNavigationBarColor({
+      frontColor: theme === 'light' ? '#000000' : '#ffffff',
+      backgroundColor: navigationBarColor,
+      fail: () => undefined,
+    })
+    uni.setBackgroundColor({ backgroundColor: navigationBarColor, fail: () => undefined })
+  } catch {
+    // 部分平台/版本未暴露导航栏染色 API，跳过不影响主题类。
+  }
+  // H5 弹层（showModal/showToast）挂在 body 下，取不到页面根类，把主题类镜像到 html 上。
+  if (isH5() && typeof document !== 'undefined') {
+    document.documentElement.classList.toggle('theme-dark', theme === 'dark')
+    document.documentElement.classList.toggle('theme-light', theme === 'light')
+  }
+}
+
+/** 全局主题状态：模式持久化存储，auto 跟随系统深浅色。 */
+export const useThemeStore = defineStore('theme', () => {
+  const mode = ref<ThemeMode>(readStoredMode())
+  const systemTheme = ref<ResolvedTheme>(readSystemTheme())
+
+  const theme = computed<ResolvedTheme>(() =>
+    mode.value === 'auto' ? systemTheme.value : mode.value,
+  )
+  const themeClass = computed(() => `theme-${theme.value}`)
+
+  /** 切换主题模式并持久化。 */
+  const setMode = (nextMode: ThemeMode) => {
+    mode.value = nextMode
+    try {
+      uni.setStorageSync(THEME_MODE_STORAGE_KEY, nextMode)
+    } catch {
+      // 存储写入失败不影响当前会话主题。
+    }
+  }
+
+  // 跟随系统：H5 监听 matchMedia，小程序监听 onThemeChange。
+  if (isH5()) {
+    if (typeof window.matchMedia === 'function') {
+      const media = window.matchMedia('(prefers-color-scheme: light)')
+      const listener = (event: MediaQueryListEvent) => {
+        systemTheme.value = event.matches ? 'light' : 'dark'
+      }
+      if (typeof media.addEventListener === 'function') {
+        media.addEventListener('change', listener)
+      } else if (typeof media.addListener === 'function') {
+        media.addListener(listener)
+      }
+    }
+  } else {
+    try {
+      uni.onThemeChange?.((result: { theme?: string }) => {
+        systemTheme.value = result.theme === 'light' ? 'light' : 'dark'
+      })
+    } catch {
+      // 平台不支持系统主题回调时保持启动时读取的值。
+    }
+  }
+
+  watch(theme, (value) => applyChrome(value), { immediate: true })
+
+  return { mode, theme, themeClass, setMode }
+})

package/src/styles/base.scss

@@ -1,3 +1,6 @@
+@use './theme.scss';
+@use './components.scss';
+
 view,
 navigator,
 input,
@@ -40,3 +43,57 @@ image {
   color: #dd524d;
   margin-right: 8rpx;
  }
+
+/* ============================================================
+ * H5 系统弹层随主题：uni.showModal/showToast 渲染在 body 下，
+ * 取不到页面根类，用 theme store 镜像到 html 上的主题类着色。
+ * ============================================================ */
+/* #ifdef H5 */
+html.theme-light page {
+  background-color: #eef3f8;
+}
+
+html.theme-dark page {
+  background-color: #060a12;
+}
+
+html.theme-dark .uni-modal {
+  background-color: #070d18;
+}
+
+html.theme-dark .uni-modal__title {
+  color: #e9f4f6;
+}
+
+html.theme-dark .uni-modal__bd {
+  color: #8aa0b4;
+}
+
+html.theme-dark .uni-modal__btn_default {
+  color: #8aa0b4;
+}
+
+html.theme-dark .uni-modal__btn_primary {
+  color: #28f0d4;
+}
+
+html.theme-dark .uni-toast,
+html.theme-dark .uni-sample-toast {
+  background: rgba(10, 18, 30, 0.9);
+  border: 1px solid rgba(120, 230, 215, 0.16);
+  color: #e9f4f6;
+}
+
+/* Chrome 密码自动填充默认涂浅蓝底，用不透明内阴影盖回主题色 */
+html.theme-dark .uni-input-input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #121b2a inset;
+  -webkit-text-fill-color: #e9f4f6;
+  caret-color: #e9f4f6;
+}
+
+html.theme-light .uni-input-input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #eef4fa inset;
+  -webkit-text-fill-color: #102232;
+  caret-color: #102232;
+}
+/* #endif */