@liujitcn/kratos-admin-core 0.0.20 → 0.0.23

package/dist/package/src/utils/passwordCrypto.ts

@@ -1,6 +1,7 @@
 import { defLoginService } from "../api/base/login";
-import { PasswordCryptoScene } from "../rpc/base/v1/enum";
+import { PasswordCryptoScene } from "../rpc/base/v1/login";
 import type { PasswordCrypto } from "../rpc/common/v1/types";
+import { t } from "../locales";
 
 export const PASSWORD_CRYPTO_SCENE = PasswordCryptoScene;
 export type { PasswordCryptoScene };
@@ -33,7 +34,7 @@ function arrayBufferToBase64(buffer: ArrayBuffer) {
 function getSubtleCrypto() {
   const cryptoApi = globalThis.crypto;
   if (!cryptoApi?.subtle) {
-    throw new Error("当前环境不支持密码加密");
+    throw new Error(t("core.password.crypto_unsupported"));
   }
   return cryptoApi;
 }
@@ -42,7 +43,7 @@ function getSubtleCrypto() {
 export async function encryptPassword(password: string, scene: PasswordCryptoScene): Promise<PasswordCrypto> {
   const plainPassword = password.trim();
   if (!plainPassword) {
-    throw new Error("密码不能为空");
+    throw new Error(t("core.password.required"));
   }
 
   const cryptoApi = getSubtleCrypto();

package/dist/package/src/utils/passwordStrength.ts

@@ -9,18 +9,10 @@ export interface PasswordStrengthResult {
   strengthScore: number;
   /** 强度等级。 */
   level: PasswordStrengthLevel;
-  /** 强度文案。 */
-  text: string;
   /** 是否达到允许提交的最高强度。 */
   isValid: boolean;
 }
 
-/** 密码强度错误提示。 */
-export const PASSWORD_STRENGTH_ERROR_MESSAGE = "密码需同时包含大小写字母、数字、特殊字符，且长度不少于 8 位";
-
-/** 密码强度说明文案。 */
-export const PASSWORD_STRENGTH_TIP = "需同时包含大小写字母、数字、特殊字符，且长度不少于 8 位，达到最高强度后才可提交。";
-
 /**
  * 计算密码强度结果，供表单展示和校验统一复用。
  *
@@ -33,7 +25,6 @@ export function getPasswordStrength(password?: string): PasswordStrengthResult {
       ruleScore: 0,
       strengthScore: 0,
       level: "empty",
-      text: "未输入",
       isValid: false
     };
   }
@@ -49,7 +40,6 @@ export function getPasswordStrength(password?: string): PasswordStrengthResult {
       ruleScore,
       strengthScore: 3,
       level: "high",
-      text: "高",
       isValid: true
     };
   }
@@ -58,7 +48,6 @@ export function getPasswordStrength(password?: string): PasswordStrengthResult {
       ruleScore,
       strengthScore: 2,
       level: "medium",
-      text: "中",
       isValid: false
     };
   }
@@ -66,7 +55,6 @@ export function getPasswordStrength(password?: string): PasswordStrengthResult {
     ruleScore,
     strengthScore: 1,
     level: "low",
-    text: "低",
     isValid: false
   };
 }
@@ -79,8 +67,5 @@ export function getPasswordStrength(password?: string): PasswordStrengthResult {
  */
 export function validatePasswordStrengthValue(password?: string) {
   const result = getPasswordStrength(password);
-  return {
-    valid: result.isValid,
-    message: result.isValid ? "" : PASSWORD_STRENGTH_ERROR_MESSAGE
-  };
+  return { valid: result.isValid };
 }

package/dist/package/src/utils/request.ts

@@ -5,6 +5,7 @@ import router from "../routers";
 import { LOGIN_URL } from "../config";
 import pinia from "../stores";
 import { useUserStore } from "../stores/modules/user";
+import { getLocaleRequestHeaders, t } from "../locales";
 
 const apiBasePath = import.meta.env.VITE_APP_BASE_API || "";
 const apiTargetUrl = import.meta.env.VITE_API_URL || import.meta.env.VITE_APP_API_URL || "";
@@ -13,6 +14,7 @@ const SESSION_URL = "/v1/base/session";
 const TOKEN_URL = "/v1/base/token";
 const CAPTCHA_URL = "/v1/base/captcha";
 const CONFIG_URL = "/v1/base/config";
+const LANGUAGE_URL = "/v1/base/language";
 const PASSWORD_PUBLIC_KEY_URL = "/v1/base/password-public-key";
 const OAUTH_PROVIDER_URL = "/v1/base/oauth/provider";
 const OAUTH_AUTHORIZATION_URL = "/v1/base/oauth/authorization";
@@ -26,6 +28,7 @@ const NO_AUTH_URL_SET = new Set([
   TOKEN_URL,
   CAPTCHA_URL,
   CONFIG_URL,
+  LANGUAGE_URL,
   PASSWORD_PUBLIC_KEY_URL,
   OAUTH_PROVIDER_URL,
   OAUTH_AUTHORIZATION_URL,
@@ -39,6 +42,7 @@ const AUTH_EXPIRED_EXCLUDED_URL_SET = new Set([
   TOKEN_URL,
   CAPTCHA_URL,
   CONFIG_URL,
+  LANGUAGE_URL,
   PASSWORD_PUBLIC_KEY_URL,
   OAUTH_PROVIDER_URL,
   OAUTH_AUTHORIZATION_URL,
@@ -156,9 +160,9 @@ export function handleAuthExpired() {
   }
 
   isHandlingAuthExpired = true;
-  ElMessageBox.confirm("登录状态已失效，请重新登录", "提示", {
-    confirmButtonText: "重新登录",
-    cancelButtonText: "取消",
+  ElMessageBox.confirm(t("core.auth.session_expired"), t("common.title.notice"), {
+    confirmButtonText: t("core.auth.login_again"),
+    cancelButtonText: t("common.action.cancel"),
     type: "warning",
     closeOnClickModal: false,
     closeOnPressEscape: false
@@ -183,6 +187,7 @@ service.interceptors.request.use(
   async (config: InternalAxiosRequestConfig) => {
     const skipAuth = shouldSkipAuth(config);
     const accessToken = skipAuth ? "" : await getRequestAccessToken();
+    Object.assign(config.headers, getLocaleRequestHeaders());
     // 登录、验证码、刷新令牌接口不携带旧 token，避免请求头污染。
     if (!skipAuth && accessToken) {
       config.headers.Authorization = accessToken;
@@ -207,7 +212,7 @@ service.interceptors.response.use(
       return response.data;
     }
 
-    ElMessage.error(message || "系统出错");
+    ElMessage.error(message || t("common.message.system_error"));
     return Promise.reject(new Error(message || "Error"));
   },
   async (error: AxiosError) => {
@@ -235,11 +240,11 @@ service.interceptors.response.use(
         if (message) {
           ElMessage.error(message);
         } else {
-          ElMessage.error("系统出错");
+          ElMessage.error(t("common.message.system_error"));
         }
       }
     } else if (!shouldSkipErrorMessage(requestConfig)) {
-      ElMessage.error(error.message || "系统出错");
+      ElMessage.error(error.message || t("common.message.system_error"));
     }
     return Promise.reject(error.message);
   }
@@ -278,13 +283,13 @@ async function handleTokenRefresh(promptOnFailure = true) {
 async function refreshAccessToken() {
   const userStore = getUserStore();
   if (!userStore.refreshToken) {
-    return Promise.reject(new Error("refresh token 不存在"));
+    return Promise.reject(new Error(t("core.auth.refresh_token_missing")));
   }
 
   const response = await refreshService.post(
     TOKEN_URL,
     { refresh_token: userStore.refreshToken },
-    { headers: { Authorization: "no-auth" } }
+    { headers: { Authorization: "no-auth", ...getLocaleRequestHeaders() } }
   );
   const data = response.data;
   userStore.updateTokenAuth(

package/dist/package/src/views/error/403.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts" name="403">
 import errorImage from "../../assets/images/403.png";
 import ErrorMessage from "../../components/ErrorMessage/index.vue";
+import { useLocaleStore } from "../../locales";
+const { t } = useLocaleStore();
 </script>
 
 <template>
-  <ErrorMessage code="403" :image="errorImage" message="抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️" />
+  <ErrorMessage code="403" :image="errorImage" :message="t('core.error.403.detail')" />
 </template>

package/dist/package/src/views/error/404.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts" name="404">
 import errorImage from "../../assets/images/404.png";
 import ErrorMessage from "../../components/ErrorMessage/index.vue";
+import { useLocaleStore } from "../../locales";
+const { t } = useLocaleStore();
 </script>
 
 <template>
-  <ErrorMessage code="404" :image="errorImage" message="抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️" />
+  <ErrorMessage code="404" :image="errorImage" :message="t('core.error.404.detail')" />
 </template>

package/dist/package/src/views/error/500.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts" name="500">
 import errorImage from "../../assets/images/500.png";
 import ErrorMessage from "../../components/ErrorMessage/index.vue";
+import { useLocaleStore } from "../../locales";
+const { t } = useLocaleStore();
 </script>
 
 <template>
-  <ErrorMessage code="500" :image="errorImage" message="抱歉，您的网络不见了~🤦‍♂️🤦‍♀️" />
+  <ErrorMessage code="500" :image="errorImage" :message="t('core.error.500.detail')" />
 </template>

package/dist/package/src/views/error/pending.vue

@@ -1,8 +1,11 @@
-<script setup lang="ts" name="Pending"></script>
+<script setup lang="ts" name="Pending">
+import { useLocaleStore } from "../../locales";
+const { t } = useLocaleStore();
+</script>
 
 <template>
   <div class="route-pending page-card">
-    <el-empty description="该页面暂不可用，请联系管理员检查菜单组件配置" />
+    <el-empty :description="t('core.error.pending.detail')" />
   </div>
 </template>
 

package/dist/package/src/views/login/components/LoginForm.vue

@@ -1,7 +1,7 @@
 <template>
   <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
     <el-form-item prop="tenant_code">
-      <el-input v-model="loginForm.tenant_code" placeholder="请输入租户编码">
+      <el-input v-model="loginForm.tenant_code" :placeholder="t('core.login.tenant_code')">
         <template #prefix>
           <el-icon class="el-input__icon">
             <office-building />
@@ -10,7 +10,7 @@
       </el-input>
     </el-form-item>
     <el-form-item prop="user_name">
-      <el-input v-model="loginForm.user_name" placeholder="请输入用户名">
+      <el-input v-model="loginForm.user_name" :placeholder="t('core.login.user_name')">
         <template #prefix>
           <el-icon class="el-input__icon">
             <user />
@@ -19,7 +19,13 @@
       </el-input>
     </el-form-item>
     <el-form-item prop="password">
-      <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password autocomplete="new-password">
+      <el-input
+        v-model="loginForm.password"
+        type="password"
+        :placeholder="t('core.login.password')"
+        show-password
+        autocomplete="new-password"
+      >
         <template #prefix>
           <el-icon class="el-input__icon">
             <lock />
@@ -29,7 +35,11 @@
     </el-form-item>
     <el-form-item v-if="!isBehaviorCaptcha" prop="captcha_code">
       <div class="captcha-row">
-        <el-input v-model="loginForm.captcha_code" placeholder="请输入验证码" @keyup.enter="handleLogin(loginFormRef)">
+        <el-input
+          v-model="loginForm.captcha_code"
+          :placeholder="t('core.login.captcha')"
+          @keyup.enter="handleLogin(loginFormRef)"
+        >
           <template #prefix>
             <el-icon class="el-input__icon">
               <Key />
@@ -41,7 +51,7 @@
           class="captcha-image"
           :style="{ width: captchaImageWidth }"
           :src="captcha_base64"
-          alt="验证码"
+          :alt="t('core.login.captcha_alt')"
           @load="handleCaptchaImageLoad"
           @click="getCaptcha"
         />
@@ -49,28 +59,35 @@
     </el-form-item>
   </el-form>
   <div class="login-btn">
-    <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
-    <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading || oauthTicketLoading" @click="handleLogin(loginFormRef)">
-      登录
+    <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)">{{ t("common.action.reset") }}</el-button>
+    <el-button
+      :icon="UserFilled"
+      round
+      size="large"
+      type="primary"
+      :loading="loading || oauthTicketLoading"
+      @click="handleLogin(loginFormRef)"
+    >
+      {{ t("common.action.login") }}
     </el-button>
   </div>
   <div v-if="oauthProviders.length" class="oauth-login">
     <div class="oauth-divider">
-      <span>其他登录方式</span>
+      <span>{{ t("core.login.other_methods") }}</span>
     </div>
     <div class="oauth-provider-list">
       <el-tooltip
         v-for="provider in oauthProviders"
         :key="provider.provider"
-        :content="provider.name"
+        :content="provider.nameKey.includes('.') ? t(provider.nameKey) : provider.nameKey"
         placement="top"
         :trigger="['hover', 'focus']"
       >
         <button
           class="oauth-provider-button"
           type="button"
-          :aria-label="provider.name"
-          :title="provider.name"
+          :aria-label="provider.nameKey.includes('.') ? t(provider.nameKey) : provider.nameKey"
+          :title="provider.nameKey.includes('.') ? t(provider.nameKey) : provider.nameKey"
           :disabled="oauthTicketLoading || oauthLoadingProvider === provider.provider"
           @click="handleOauthLogin(provider)"
         >
@@ -133,6 +150,7 @@ import { PASSWORD_CRYPTO_SCENE, encryptPassword } from "../../../utils/passwordC
 import { useConfigStore } from "../../../stores/modules/config";
 import { Click as GoCaptchaClick, Rotate as GoCaptchaRotate, Slide as GoCaptchaSlide } from "go-captcha-vue";
 import "go-captcha-vue/dist/style.css";
+import { useLocaleStore } from "../../../locales";
 
 const router = useRouter();
 const route = useRoute();
@@ -141,6 +159,7 @@ const configStore = useConfigStore();
 const dictStore = useDictStore();
 const tabsStore = useTabsStore();
 const keepAliveStore = useKeepAliveStore();
+const { t } = useLocaleStore();
 
 /** 登录表单实例类型。 */
 type FormInstance = InstanceType<typeof ElForm>;
@@ -150,12 +169,12 @@ const defaultCaptchaImageWidth = 96;
 const captchaImageWidth = ref(`${defaultCaptchaImageWidth}px`);
 const behaviorDialogVisible = ref(false);
 const behaviorLoading = ref(false);
-const loginRules = reactive({
-  tenant_code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
-  user_name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-  captcha_code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
-});
+const loginRules = computed(() => ({
+  tenant_code: [{ required: true, message: t("core.login.tenant_code"), trigger: "blur" }],
+  user_name: [{ required: true, message: t("core.login.user_name"), trigger: "blur" }],
+  password: [{ required: true, message: t("core.login.password"), trigger: "blur" }],
+  captcha_code: [{ required: true, message: t("core.login.captcha"), trigger: "blur" }]
+}));
 
 const loading = ref(false);
 const oauthLoadingProvider = ref("");
@@ -245,7 +264,9 @@ const behaviorCaptchaSource = reactive({
   thumbHeight: 60,
   thumbSize: 150
 });
-const behaviorCaptchaDisplayHeight = computed(() => Math.round((behaviorCaptchaSource.height * behaviorCaptchaDisplayWidth) / behaviorCaptchaSource.width));
+const behaviorCaptchaDisplayHeight = computed(() =>
+  Math.round((behaviorCaptchaSource.height * behaviorCaptchaDisplayWidth) / behaviorCaptchaSource.width)
+);
 const behaviorCaptchaScaleX = computed(() => behaviorCaptchaDisplayWidth / behaviorCaptchaSource.width);
 const behaviorCaptchaScaleY = computed(() => behaviorCaptchaDisplayHeight.value / behaviorCaptchaSource.height);
 const rotateCaptchaScale = computed(() => rotateCaptchaDisplaySize / behaviorCaptchaSource.width);
@@ -260,10 +281,12 @@ const toDisplayCaptchaY = (value: number) => Math.round(value * behaviorCaptchaS
 const toDisplayRotateSize = (value: number) => Math.round(value * rotateCaptchaScale.value);
 
 /** 将前端展示 X 坐标换算回服务端原始坐标。 */
-const toOriginalCaptchaX = (value: number) => Math.min(behaviorCaptchaSource.width, Math.max(0, Math.round(value / behaviorCaptchaScaleX.value)));
+const toOriginalCaptchaX = (value: number) =>
+  Math.min(behaviorCaptchaSource.width, Math.max(0, Math.round(value / behaviorCaptchaScaleX.value)));
 
 /** 将前端展示 Y 坐标换算回服务端原始坐标。 */
-const toOriginalCaptchaY = (value: number) => Math.min(behaviorCaptchaSource.height, Math.max(0, Math.round(value / behaviorCaptchaScaleY.value)));
+const toOriginalCaptchaY = (value: number) =>
+  Math.min(behaviorCaptchaSource.height, Math.max(0, Math.round(value / behaviorCaptchaScaleY.value)));
 const slideCaptchaConfig = computed(() => ({
   width: behaviorCaptchaDisplayWidth,
   height: behaviorCaptchaDisplayHeight.value,
@@ -273,7 +296,7 @@ const slideCaptchaConfig = computed(() => ({
   verticalPadding: 0,
   horizontalPadding: 0,
   iconSize: 20,
-  title: "请拖动滑块完成拼图"
+  title: t("core.login.behavior_puzzle")
 }));
 const clickCaptchaConfig = computed(() => ({
   width: behaviorCaptchaDisplayWidth,
@@ -283,10 +306,10 @@ const clickCaptchaConfig = computed(() => ({
   showTheme: false,
   verticalPadding: 0,
   horizontalPadding: 0,
-  buttonText: "确认",
+  buttonText: t("core.login.behavior_confirm"),
   iconSize: 20,
   dotSize: 20,
-  title: "请按顺序点击文字"
+  title: t("core.login.behavior_click")
 }));
 const rotateCaptchaConfig = computed(() => ({
   width: behaviorCaptchaDisplayWidth,
@@ -296,7 +319,7 @@ const rotateCaptchaConfig = computed(() => ({
   verticalPadding: 0,
   horizontalPadding: 0,
   iconSize: 20,
-  title: "拖动滑块，将内圈图片转正"
+  title: t("core.login.behavior_rotate")
 }));
 const slideCaptchaEvents = {
   refresh: () => getCaptcha(),
@@ -307,7 +330,10 @@ const clickCaptchaEvents = {
   refresh: () => getCaptcha(),
   close: () => closeBehaviorCaptcha(),
   confirm: (dots: ClickCaptchaPoint[], reset: () => void) =>
-    verifyBehaviorCaptcha(JSON.stringify(dots.map(dot => ({ x: toOriginalCaptchaX(dot.x), y: toOriginalCaptchaY(dot.y) }))), reset)
+    verifyBehaviorCaptcha(
+      JSON.stringify(dots.map(dot => ({ x: toOriginalCaptchaX(dot.x), y: toOriginalCaptchaY(dot.y) }))),
+      reset
+    )
 };
 const rotateCaptchaEvents = {
   refresh: () => getCaptcha(),
@@ -402,7 +428,7 @@ const finishLogin = async () => {
   await navigateTo(router, getLoginRedirectPath());
   ElNotification({
     title: getTimeState(),
-    message: "欢迎登录管理后台",
+    message: t("core.login.welcome"),
     type: "success",
     duration: 3000
   });
@@ -500,7 +526,7 @@ const verifyCaptchaToken = async (captchaCode: string) => {
 const submitLogin = async (captchaToken: string) => {
   loading.value = true;
   try {
-    const password = await encryptPassword(loginForm.password, PASSWORD_CRYPTO_SCENE.LOGIN);
+    const password = await encryptPassword(loginForm.password, PASSWORD_CRYPTO_SCENE.PASSWORD_CRYPTO_SCENE_LOGIN);
     const loginRequest: LoginRequest = {
       tenant_code: loginForm.tenant_code,
       user_name: loginForm.user_name,
@@ -735,13 +761,16 @@ watch(
   height: auto;
   min-height: 24px;
   margin-bottom: 6px;
+  align-items: flex-start;
 }
 
 :global(.behavior-captcha-dialog .go-captcha .gc-header span),
 :global(.behavior-captcha-dialog .go-captcha .gc-header .gc-text) {
+  min-width: 0;
   font-size: 14px;
   line-height: 22px;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 :global(.behavior-captcha-dialog .go-captcha .gc-body) {

package/dist/package/src/views/login/index.scss

@@ -21,6 +21,12 @@
       top: 13px;
       right: 18px;
     }
+    .locale {
+      position: absolute;
+      z-index: 2;
+      top: 19px;
+      right: 72px;
+    }
     .login-left {
       width: 800px;
       margin-right: 10px;

package/dist/package/src/views/login/index.vue

@@ -2,6 +2,7 @@
   <div class="login-container flx-center">
     <div class="login-box">
       <SwitchDark class="dark" />
+      <LocaleSwitch class="locale" />
       <div class="login-left">
         <img class="login-left-img" :src="backgroundUrl" alt="login" />
       </div>
@@ -20,6 +21,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import LoginForm from "./components/LoginForm.vue";
 import SwitchDark from "../../components/SwitchDark/index.vue";
+import LocaleSwitch from "../../components/LocaleSwitch/index.vue";
 import { useConfigStore } from "../../stores/modules/config";
 
 const configStore = useConfigStore();