@liujitcn/kratos-uni-app-core 0.0.29 → 0.0.32

package/src/api/base/v1/mfa.ts

@@ -0,0 +1,127 @@
+import { http } from '../../../utils/http'
+import type { LoginResponse } from '../../../rpc/base/v1/login'
+import type {
+  BeginMfaDisableRequest,
+  BeginMfaDisableResponse,
+  BeginMfaEnrollmentRequest,
+  BeginMfaEnrollmentResponse,
+  BeginMfaSetupRequest,
+  BeginMfaSetupResponse,
+  ConfirmMfaEnrollmentRequest,
+  ConfirmMfaEnrollmentResponse,
+  ConfirmMfaSetupRequest,
+  ConfirmMfaSetupResponse,
+  DisableMfaRequest,
+  GetMfaStatusRequest,
+  MfaService,
+  MfaStatusResponse,
+  RecoveryCodesResponse,
+  RegenerateMfaRecoveryCodesRequest,
+  VerifyMfaRequest,
+} from '../../../rpc/base/v1/mfa'
+import type { Empty } from '../../../rpc/google/protobuf/empty'
+
+const MFA_URL = '/v1/base/mfa'
+
+/** 多因素认证公共服务。 */
+export class MfaServiceImpl implements MfaService {
+  /** 校验登录阶段多因素认证。 */
+  VerifyMfa(request: VerifyMfaRequest): Promise<LoginResponse> {
+    return http<LoginResponse>({
+      url: `${MFA_URL}/verify`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 开始登录阶段的强制多因素认证绑定。 */
+  BeginMfaEnrollment(request: BeginMfaEnrollmentRequest): Promise<BeginMfaEnrollmentResponse> {
+    return http<BeginMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 确认登录阶段的强制多因素认证绑定。 */
+  ConfirmMfaEnrollment(
+    request: ConfirmMfaEnrollmentRequest,
+  ): Promise<ConfirmMfaEnrollmentResponse> {
+    return http<ConfirmMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment/confirm`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 查询当前用户多因素认证状态。 */
+  GetMfaStatus(request: GetMfaStatusRequest): Promise<MfaStatusResponse> {
+    return http<MfaStatusResponse>({
+      url: MFA_URL,
+      method: 'GET',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 开始绑定当前用户的多因素认证方式。 */
+  BeginMfaSetup(request: BeginMfaSetupRequest): Promise<BeginMfaSetupResponse> {
+    return http<BeginMfaSetupResponse>({
+      url: `${MFA_URL}/setup`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 确认绑定当前用户的多因素认证方式。 */
+  ConfirmMfaSetup(request: ConfirmMfaSetupRequest): Promise<ConfirmMfaSetupResponse> {
+    return http<ConfirmMfaSetupResponse>({
+      url: `${MFA_URL}/setup/confirm`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 开始禁用 WebAuthn 多因素认证的 Passkey 验证。 */
+  BeginMfaDisable(request: BeginMfaDisableRequest): Promise<BeginMfaDisableResponse> {
+    return http<BeginMfaDisableResponse>({
+      url: `${MFA_URL}/disable/challenge`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 禁用当前用户的多因素认证。 */
+  DisableMfa(request: DisableMfaRequest): Promise<Empty> {
+    return http<Empty>({
+      url: `${MFA_URL}/disable`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 重新生成当前用户的多因素认证恢复码。 */
+  RegenerateMfaRecoveryCodes(
+    request: RegenerateMfaRecoveryCodesRequest,
+  ): Promise<RecoveryCodesResponse> {
+    return http<RecoveryCodesResponse>({
+      url: `${MFA_URL}/recovery-codes`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+}
+
+/** defMfaService 多因素认证公共服务实例。 */
+export const defMfaService = new MfaServiceImpl()

package/src/api/base/{oauth.ts → v1/oauth.ts}

@@ -1,4 +1,4 @@
-import { http } from '../../utils/http'
+import { http } from '../../../utils/http'
 import type {
   CreateOauthAuthorizationRequest,
   CreateOauthAuthorizationResponse,
@@ -19,8 +19,8 @@ import type {
   ListOauthProviderResponse,
   OauthService,
   UnbindOauthAccountRequest,
-} from '../../rpc/base/v1/oauth'
-import type { Empty } from '../../rpc/google/protobuf/empty'
+} from '../../../rpc/base/v1/oauth'
+import type { Empty } from '../../../rpc/google/protobuf/empty'
 
 const OAUTH_PROVIDER_URL = '/v1/base/oauth/provider'
 const OAUTH_AUTHORIZATION_URL = '/v1/base/oauth/authorization'

package/src/api/system/{auth.ts → app/v1/auth.ts}

@@ -1,26 +1,20 @@
-import { http } from '../../utils/http'
+import { http } from '../../../../utils/http'
 import {
   type AuthService,
   type BindUserPhoneRequest,
   type BindUserPhoneResponse,
+  type GetUserProfileRequest,
+  type UpdateUserProfileRequest,
   type UserProfileForm,
-} from '../../rpc/system/app/v1/auth'
-import type { Empty } from '../../rpc/google/protobuf/empty'
+} from '../../../../rpc/system/app/v1/auth'
+import type { Empty } from '../../../../rpc/google/protobuf/empty'
 
 const AUTH_URL = '/v1/app/auth'
 
-/** 获取用户资料请求兼容空请求结构。 */
-type GetUserProfileRequestCompat = Empty
-
-/** 更新用户资料请求兼容新旧两种表单包裹方式。 */
-type UpdateUserProfileRequestCompat = Partial<UserProfileForm> & {
-  user_profile?: UserProfileForm
-}
-
 /** 用户认证资料服务 */
 export class AuthServiceImpl implements AuthService {
   /** 获取已登录用户资料 */
-  GetUserProfile(request: GetUserProfileRequestCompat): Promise<UserProfileForm> {
+  GetUserProfile(request: GetUserProfileRequest): Promise<UserProfileForm> {
     return http<UserProfileForm>({
       url: `${AUTH_URL}/profile`,
       method: 'GET',
@@ -30,13 +24,12 @@ export class AuthServiceImpl implements AuthService {
   }
 
   /** 修改个人中心用户信息 */
-  UpdateUserProfile(request: UpdateUserProfileRequestCompat): Promise<Empty> {
-    const userProfile = request.user_profile ?? (request as UserProfileForm)
+  UpdateUserProfile(request: UpdateUserProfileRequest): Promise<Empty> {
     return http<Empty>({
       url: `${AUTH_URL}/profile`,
       method: 'PUT',
       authMode: 'required',
-      data: userProfile,
+      data: request.user_profile,
     })
   }
 

package/src/api/system/{base_area.ts → app/v1/base_area.ts}

@@ -1,9 +1,9 @@
-import { http } from '../../utils/http'
+import { http } from '../../../../utils/http'
 import type {
   BaseAreaService,
   TreeBaseAreaRequest,
   TreeBaseAreaResponse,
-} from '../../rpc/system/app/v1/base_area'
+} from '../../../../rpc/system/app/v1/base_area'
 
 const BASE_AREA_URL = '/v1/app/base/area'
 

package/src/api/system/app/v1/base_dict.ts

@@ -0,0 +1,21 @@
+import { http } from '../../../../utils/http'
+import type {
+  BaseDictForm,
+  BaseDictService,
+  GetBaseDictRequest,
+} from '../../../../rpc/system/app/v1/base_dict'
+
+const BASE_DICT_URL = '/v1/app/base/dict'
+
+/** 字典服务 */
+export class BaseDictServiceImpl implements BaseDictService {
+  /** 查询单个字典 */
+  GetBaseDict(request: GetBaseDictRequest): Promise<BaseDictForm> {
+    return http<BaseDictForm>({
+      url: `${BASE_DICT_URL}/${request.code}`,
+      method: 'GET',
+    })
+  }
+}
+
+export const defBaseDictService = new BaseDictServiceImpl()

package/src/api/{base/menu.ts → system/app/v1/base_menu.ts}

@@ -1,5 +1,5 @@
-import { http } from '../../utils/http'
-import type { ListBaseMenuResponse } from '../../rpc/system/app/v1/base_menu'
+import { http } from '../../../../utils/http'
+import type { ListBaseMenuResponse } from '../../../../rpc/system/app/v1/base_menu'
 
 /** 远端移动菜单服务。 */
 export class BaseMenuServiceImpl {

package/src/bootstrap.ts

@@ -9,7 +9,7 @@ import {
 } from './locales'
 import { initializeAppNavigation } from './navigation'
 import { useSettingStore } from './stores'
-import { defLanguageService } from './api/base/language'
+import { defLanguageService } from './api/base/v1/language'
 
 /** uni-app 启动参数。 */
 export interface KratosAppBootstrapOptions {

package/src/components/KratosSettingsPage.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '../stores'
+import { navigateToLogin } from '../utils/navigation'
+import { getLanguageOptions, useI18n, type SupportedLocale } from '../locales'
+import { defMfaService } from '../api/base/v1/mfa'
+import MfaManageDialog from './MfaManageDialog.vue'
+
+defineOptions({ name: 'KratosSettingsPage' })
+
+defineSlots<{
+  /** 在所有公共设置卡片之前渲染的业务扩展内容。 */
+  extensions?: () => unknown
+}>()
+
+const userStore = useUserStore()
+const { locale, setLocale, t } = useI18n()
+const logoutLoading = ref(false)
+const mfaDialogVisible = ref(false)
+const mfaDialogMode = ref<'setup' | 'disable'>('setup')
+const mfaEnabled = ref(false)
+const mfaMethod = ref('totp')
+const mfaStatusLoading = ref(false)
+const localeOptions = computed(() => getLanguageOptions())
+const localeLabels = computed(() => localeOptions.value.map((item) => item.native_name))
+const localeIndex = computed(() =>
+  Math.max(
+    0,
+    localeOptions.value.findIndex((item) => item.language_code === locale.value),
+  ),
+)
+
+watch(locale, () => void uni.setNavigationBarTitle({ title: t('core.settings.title') }), {
+  immediate: true,
+})
+
+/** 处理语言选择并刷新动态本地化数据。 */
+const onLocaleChange = (event: { detail: { value: string | number } }) => {
+  const nextLocale = localeOptions.value[Number(event.detail.value)]?.language_code as
+    | SupportedLocale
+    | undefined
+  if (nextLocale) void setLocale(nextLocale)
+}
+
+/** 加载当前用户的多因素认证状态。 */
+const loadMfaStatus = async (force = false) => {
+  if (!userStore.isAuthenticated() || (mfaStatusLoading.value && !force)) return
+  mfaStatusLoading.value = true
+  try {
+    const result = await defMfaService.GetMfaStatus({})
+    mfaEnabled.value = result.enabled
+    mfaMethod.value = result.method || 'totp'
+  } finally {
+    mfaStatusLoading.value = false
+  }
+}
+
+/** 当前多因素认证状态展示文案。 */
+const mfaStatusText = computed(() => {
+  if (!mfaEnabled.value) return t('core.settings.mfa_disabled')
+  const method =
+    mfaMethod.value === 'webauthn'
+      ? t('core.settings.mfa_method_webauthn')
+      : t('core.settings.mfa_method_totp')
+  return t('core.settings.mfa_enabled_method', { method })
+})
+
+/** 根据当前状态打开多因素认证操作组件。 */
+const onMfaTap = async () => {
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+  const currentMfaEnabled = mfaEnabled.value
+  try {
+    await loadMfaStatus(true)
+  } catch {
+    // 状态刷新失败时保留页面已有状态，避免已启用用户无法进入禁用流程。
+    mfaEnabled.value = currentMfaEnabled
+  }
+  if (mfaEnabled.value) {
+    mfaDialogMode.value = 'disable'
+    mfaDialogVisible.value = true
+    return
+  }
+  mfaDialogMode.value = 'setup'
+  mfaDialogVisible.value = true
+}
+
+/** 绑定成功后清理旧会话并重新登录。 */
+const onMfaSuccess = async (method: string) => {
+  mfaEnabled.value = true
+  mfaMethod.value = method || 'totp'
+  await uni.showToast({ icon: 'none', title: t('core.settings.mfa_bind_success') })
+  // 绑定 MFA 后后端会撤销当前会话，不能再调用登出接口或继续使用旧 token。
+  await userStore.clearUserData()
+  uni.reLaunch({ url: '/pages/login/login' })
+}
+
+/** 禁用成功后清理旧会话并重新登录。 */
+const onMfaDisabled = async () => {
+  mfaEnabled.value = false
+  await uni.showToast({ icon: 'none', title: t('core.settings.mfa_disable_success') })
+  await userStore.clearUserData()
+  uni.reLaunch({ url: '/pages/login/login' })
+}
+
+// 公共设置模块挂载时加载 MFA 状态，兼容页面包装和业务插槽场景。
+onMounted(() => {
+  if (!userStore.ensureAuthenticated()) {
+    // #ifndef MP-WEIXIN
+    navigateToLogin()
+    // #endif
+    return
+  }
+  void loadMfaStatus()
+})
+
+/** 确认后退出登录并返回上一页。 */
+const onLogout = () => {
+  if (logoutLoading.value) {
+    return
+  }
+  // 模态弹窗
+  uni.showModal({
+    content: t('core.settings.logout_confirm'),
+    confirmColor: '#27BA9B',
+    success: async (res) => {
+      if (!res.confirm) {
+        return
+      }
+
+      logoutLoading.value = true
+      try {
+        // 先完成退出和本地登录态清理，再返回个人中心，避免 onShow 读取到旧登录态。
+        await userStore.logout()
+        uni.navigateBack()
+      } catch (error) {
+        await uni.showToast({
+          icon: 'none',
+          title: t('core.settings.logout_failed'),
+        })
+      } finally {
+        logoutLoading.value = false
+      }
+    },
+  })
+}
+</script>
+
+<template>
+  <view class="viewport">
+    <slot name="extensions" />
+    <view class="list">
+      <view v-if="userStore.isAuthenticated()" class="item arrow mfa-item" @tap="onMfaTap">
+        <text>{{ t('core.settings.mfa_title') }}</text>
+        <text class="mfa-value">{{ mfaStatusText }}</text>
+      </view>
+      <picker :range="localeLabels" :value="localeIndex" @change="onLocaleChange">
+        <view class="item arrow locale-item">
+          <text>{{ t('common.field.language') }}</text>
+          <text class="locale-value">{{ localeLabels[localeIndex] }}</text>
+        </view>
+      </picker>
+    </view>
+    <!-- #ifdef MP-WEIXIN -->
+    <!-- 列表2 -->
+    <view class="list">
+      <button hover-class="none" class="item arrow" open-type="openSetting">
+        {{ t('core.settings.authorization') }}
+      </button>
+      <button hover-class="none" class="item arrow" open-type="feedback">
+        {{ t('core.settings.feedback') }}
+      </button>
+      <button hover-class="none" class="item arrow" open-type="contact">
+        {{ t('core.settings.contact') }}
+      </button>
+    </view>
+    <!-- #endif -->
+    <!-- 操作按钮 -->
+    <view class="action" v-if="userStore.isAuthenticated()">
+      <view @tap="onLogout" class="button">{{ t('common.action.logout') }}</view>
+    </view>
+  </view>
+  <MfaManageDialog
+    v-model="mfaDialogVisible"
+    :mode="mfaDialogMode"
+    :method="mfaMethod"
+    @success="onMfaSuccess"
+    @disabled="onMfaDisabled"
+  />
+</template>
+
+<style scoped lang="scss">
+.viewport {
+  min-height: 100vh;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: #f4f4f4;
+}
+
+/* 列表 */
+.list {
+  padding: 0 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 10rpx;
+  .item {
+    line-height: 90rpx;
+    padding-left: 10rpx;
+    font-size: 30rpx;
+    color: #333;
+    border-top: 1rpx solid #ddd;
+    position: relative;
+    text-align: left;
+    border-radius: 0;
+    background-color: #fff;
+    &::after {
+      width: auto;
+      height: auto;
+      left: auto;
+      border: none;
+    }
+    &::after {
+      right: 5rpx;
+    }
+  }
+  > .item:first-child {
+    border: none;
+  }
+  .arrow::after {
+    content: '›';
+    position: absolute;
+    top: 50%;
+    color: #ccc;
+    font-size: 36rpx;
+    transform: translateY(-50%);
+  }
+}
+
+.locale-item {
+  display: flex;
+  min-width: 0;
+  justify-content: space-between;
+  padding-right: 42rpx;
+
+  > text:first-child {
+    flex-shrink: 0;
+  }
+}
+
+.locale-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  margin-left: 24rpx;
+  color: #888;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mfa-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 42rpx;
+}
+
+.mfa-value {
+  max-width: 55%;
+  overflow: hidden;
+  color: #888;
+  font-size: 26rpx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 操作按钮 */
+.action {
+  text-align: center;
+  line-height: 90rpx;
+  margin-top: 40rpx;
+  font-size: 32rpx;
+  color: #333;
+  .button {
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    border-radius: 10rpx;
+  }
+}
+</style>

package/src/components/KratosTabBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { resolveModuleIcon, resolveStaticView } from '../module'
-import { APP_MENU_ROOT_ID, useAppNavigation } from '../navigation'
+import { APP_MENU_ROOT_ID, useAppMenuBadge, useAppNavigation } from '../navigation'
 import { resolveRootMenuId } from '../navigation-tree.mjs'
 
 const props = defineProps<{ route: string }>()
@@ -13,6 +13,7 @@ const activeMenu = computed(() => {
   return tabBar.value.find((menu) => menu.id === tabMenuId)
 })
 const visible = computed(() => Boolean(activeMenu.value && tabBar.value.length))
+const messageBadge = useAppMenuBadge('MESSAGE_INBOX')
 </script>
 
 <template>
@@ -23,6 +24,11 @@ const visible = computed(() => Boolean(activeMenu.value && tabBar.value.length))
       class="kratos-tab-bar__item"
       @tap="navigate(item.path)"
     >
+      <view
+        v-if="item.viewKey === 'MESSAGE_INBOX' && messageBadge"
+        class="kratos-tab-bar__badge"
+        aria-hidden="true"
+      />
       <image
         v-if="resolveModuleIcon(item.icon)"
         class="kratos-tab-bar__icon"
@@ -33,6 +39,12 @@ const visible = computed(() => Boolean(activeMenu.value && tabBar.value.length))
         "
         mode="aspectFit"
       />
+      <view
+        v-else-if="item.viewKey === 'MESSAGE_INBOX'"
+        class="kratos-tab-bar__message-icon"
+        :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 }">
         {{ item.title }}
       </text>
@@ -55,6 +67,7 @@ const visible = computed(() => Boolean(activeMenu.value && tabBar.value.length))
   background: #fff;
 }
 .kratos-tab-bar__item {
+  position: relative;
   display: flex;
   flex: 1;
   align-items: center;
@@ -70,7 +83,64 @@ const visible = computed(() => Boolean(activeMenu.value && tabBar.value.length))
   height: 28px;
   margin-bottom: 4px;
 }
+.kratos-tab-bar__message-icon {
+  position: relative;
+  width: 22px;
+  height: 18px;
+  margin-bottom: 6px;
+  border: 2px solid #9aa4b2;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+.kratos-tab-bar__message-icon::before {
+  position: absolute;
+  top: 5px;
+  left: 4px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #9aa4b2;
+  box-shadow:
+    5px 0 #9aa4b2,
+    10px 0 #9aa4b2;
+  content: '';
+}
+.kratos-tab-bar__message-icon::after {
+  position: absolute;
+  bottom: -5px;
+  left: 3px;
+  width: 7px;
+  height: 7px;
+  border-right: 2px solid #9aa4b2;
+  border-bottom: 2px solid #9aa4b2;
+  background: #fff;
+  content: '';
+  transform: rotate(45deg);
+}
+.kratos-tab-bar__message-icon--active {
+  border-color: #27ba9b;
+}
+.kratos-tab-bar__message-icon--active::before {
+  background: #27ba9b;
+  box-shadow:
+    5px 0 #27ba9b,
+    10px 0 #27ba9b;
+}
+.kratos-tab-bar__message-icon--active::after {
+  border-color: #27ba9b;
+}
 .kratos-tab-bar__text--active {
   color: #27ba9b;
 }
+.kratos-tab-bar__badge {
+  position: absolute;
+  top: 0;
+  right: calc(50% - 19px);
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: #e5484d;
+}
 </style>