@liujitcn/kratos-admin-core 0.0.20 → 0.0.23

package/dist/package/src/layouts/components/Header/components/Fullscreen.vue

@@ -10,9 +10,11 @@
 import { computed, onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import screenfull from "screenfull";
+import { useLocaleStore } from "../../../../locales";
 
 const isFullscreen = ref(screenfull.isFullscreen);
-const fullscreenTooltip = computed(() => (isFullscreen.value ? "退出全屏" : "全屏"));
+const { t } = useLocaleStore();
+const fullscreenTooltip = computed(() => (isFullscreen.value ? t("core.header.fullscreen_exit") : t("core.header.fullscreen")));
 
 onMounted(() => {
   screenfull.on("change", () => {
@@ -22,7 +24,7 @@ onMounted(() => {
 });
 
 const handleFullScreen = () => {
-  if (!screenfull.isEnabled) ElMessage.warning("当前您的浏览器不支持全屏 ❌");
+  if (!screenfull.isEnabled) ElMessage.warning(t("core.header.fullscreen_unsupported"));
   screenfull.toggle();
 };
 </script>

package/dist/package/src/layouts/components/Header/components/InfoDialog.vue

@@ -1,16 +1,19 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
+  <el-dialog v-model="dialogVisible" :title="t('core.layout.info')" width="500px" draggable>
     <span>This is userInfo</span>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+        <el-button @click="dialogVisible = false">{{ t("common.action.cancel") }}</el-button>
+        <el-button type="primary" @click="dialogVisible = false">{{ t("common.action.confirm") }}</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
+import { useLocaleStore } from "../../../../locales";
+
+const { t } = useLocaleStore();
 import { ref } from "vue";
 
 const dialogVisible = ref(false);

package/dist/package/src/layouts/components/Header/components/PasswordDialog.vue

@@ -1,16 +1,19 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
+  <el-dialog v-model="dialogVisible" :title="t('core.layout.password_change')" width="500px" draggable>
     <span>This is Password</span>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+        <el-button @click="dialogVisible = false">{{ t("common.action.cancel") }}</el-button>
+        <el-button type="primary" @click="dialogVisible = false">{{ t("common.action.confirm") }}</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
+import { useLocaleStore } from "../../../../locales";
+
+const { t } = useLocaleStore();
 import { ref } from "vue";
 
 const dialogVisible = ref(false);

package/dist/package/src/layouts/components/Header/components/SearchMenu.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="search-menu">
-    <el-tooltip effect="dark" content="菜单搜索" placement="bottom" :show-after="200">
+    <el-tooltip effect="dark" :content="t('core.header.menu_search')" placement="bottom" :show-after="200">
       <i :class="'iconfont icon-sousuo'" class="toolBar-icon" @click="handleOpen"></i>
     </el-tooltip>
     <el-dialog class="search-dialog" v-model="isShowSearch" :width="600" :show-close="false" top="10vh">
       <el-input
         v-model="searchMenu"
         ref="menuInputRef"
-        placeholder="菜单搜索：支持菜单名称、路径"
+        :placeholder="t('core.header.menu_search_placeholder')"
         size="large"
         clearable
         :prefix-icon="Search"
@@ -29,7 +29,7 @@
           <i :class="'iconfont icon-huiche'" class="menu-enter" @click="handleOpen"></i>
         </div>
       </div>
-      <el-empty v-else class="mt20 mb20" :image-size="100" description="暂无菜单" />
+      <el-empty v-else class="mt20 mb20" :image-size="100" :description="t('core.header.menu_search_empty')" />
     </el-dialog>
   </div>
 </template>
@@ -43,6 +43,7 @@ import { useRouter } from "vue-router";
 import { useDebounceFn } from "@vueuse/core";
 import type { RouteItem } from "../../../../rpc/system/admin/v1/auth";
 import { getRouteMetaHidden, getRouteMetaIcon, getRouteMetaTitle, getRouteTarget, isExternalPath } from "../../../../utils";
+import { useLocaleStore } from "../../../../locales";
 
 /** 可被菜单搜索展示的路由项。 */
 interface SearchRouteItem extends RouteItem {
@@ -51,6 +52,7 @@ interface SearchRouteItem extends RouteItem {
 
 const router = useRouter();
 const authStore = useAuthStore();
+const { t } = useLocaleStore();
 const menuList = computed<SearchRouteItem[]>(() => {
   return authStore.flatMenuListGet.filter((item): item is SearchRouteItem => {
     return Boolean(item.path) && !getRouteMetaHidden(item.meta);

package/dist/package/src/layouts/components/Header/components/ThemeSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="theme-setting">
-    <el-tooltip effect="dark" content="主题设置" placement="bottom" :show-after="200">
+    <el-tooltip effect="dark" :content="t('core.header.theme')" placement="bottom" :show-after="200">
       <i :class="'iconfont icon-zhuti'" class="toolBar-icon" @click="openDrawer"></i>
     </el-tooltip>
   </div>
@@ -8,6 +8,8 @@
 
 <script setup lang="ts">
 import mittBus from "../../../../utils/mittBus";
+import { useLocaleStore } from "../../../../locales";
+const { t } = useLocaleStore();
 const openDrawer = () => {
   mittBus.emit("openThemeDrawer");
 };

package/dist/package/src/layouts/components/Main/index.vue

@@ -79,6 +79,7 @@ const listeningWindow = useDebounceFn(() => {
   if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
   if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
 }, 100);
+listeningWindow();
 window.addEventListener("resize", listeningWindow, false);
 onBeforeUnmount(() => {
   window.removeEventListener("resize", listeningWindow);

package/dist/package/src/layouts/components/Tabs/components/MoreButton.vue

@@ -6,25 +6,25 @@
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item @click="refresh">
-          <el-icon><Refresh /></el-icon>刷新当前
+          <el-icon><Refresh /></el-icon>{{ t("core.tabs.refresh") }}
         </el-dropdown-item>
         <el-dropdown-item @click="maximize">
-          <el-icon><FullScreen /></el-icon>最大化
+          <el-icon><FullScreen /></el-icon>{{ t("core.tabs.maximize") }}
         </el-dropdown-item>
         <el-dropdown-item divided @click="closeCurrentTab">
-          <el-icon><Remove /></el-icon>关闭当前
+          <el-icon><Remove /></el-icon>{{ t("core.tabs.close_current") }}
         </el-dropdown-item>
         <el-dropdown-item @click="tabStore.closeTabsOnSide(currentTabPath, 'left')">
-          <el-icon><DArrowLeft /></el-icon>关闭左侧
+          <el-icon><DArrowLeft /></el-icon>{{ t("core.tabs.close_left") }}
         </el-dropdown-item>
         <el-dropdown-item @click="tabStore.closeTabsOnSide(currentTabPath, 'right')">
-          <el-icon><DArrowRight /></el-icon>关闭右侧
+          <el-icon><DArrowRight /></el-icon>{{ t("core.tabs.close_right") }}
         </el-dropdown-item>
         <el-dropdown-item divided @click="tabStore.closeMultipleTab(currentTabPath)">
-          <el-icon><CircleClose /></el-icon>关闭其他
+          <el-icon><CircleClose /></el-icon>{{ t("core.tabs.close_other") }}
         </el-dropdown-item>
         <el-dropdown-item @click="closeAllTab">
-          <el-icon><FolderDelete /></el-icon>关闭全部
+          <el-icon><FolderDelete /></el-icon>{{ t("core.tabs.close_all") }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -39,12 +39,14 @@ import { useTabsStore } from "../../../../stores/modules/tabs";
 import { useGlobalStore } from "../../../../stores/modules/global";
 import { useKeepAliveStore } from "../../../../stores/modules/keepAlive";
 import { useRoute, useRouter } from "vue-router";
+import { useLocaleStore } from "../../../../locales";
 
 const route = useRoute();
 const router = useRouter();
 const tabStore = useTabsStore();
 const globalStore = useGlobalStore();
 const keepAliveStore = useKeepAliveStore();
+const { t } = useLocaleStore();
 const currentTabPath = computed(() => getAdminTabPath(route));
 
 // refresh current page

package/dist/package/src/layouts/components/Tabs/index.vue

@@ -27,17 +27,25 @@ import { TabsPaneContext, TabPaneName } from "element-plus";
 import { getRouteMetaAffix, getRouteMetaFull, getRouteMetaIcon, getRouteMetaKeepAlive, getRouteMetaTitle } from "../../../utils";
 import MoreButton from "./components/MoreButton.vue";
 import { getAdminTabPath } from "../../../modules";
+import { useLocaleStore } from "../../../locales";
 
 const route = useRoute();
 const router = useRouter();
 const tabStore = useTabsStore();
 const authStore = useAuthStore();
 const globalStore = useGlobalStore();
+const { locale, t } = useLocaleStore();
 
 const tabsMenuValue = ref(getAdminTabPath(route));
 const tabsMenuList = computed(() => tabStore.tabsMenuList);
 const tabsIcon = computed(() => globalStore.tabsIcon);
 
+/** 获取当前路由标签标题，兼容静态路由的多语言标题键。 */
+const getCurrentRouteTitle = () => {
+  const titleKey = typeof route.meta.titleKey === "string" ? route.meta.titleKey : "";
+  return titleKey ? t(titleKey) : String(route.meta.title ?? "");
+};
+
 onMounted(() => {
   tabsDrop();
   initTabs();
@@ -52,7 +60,7 @@ watch(
     tabsMenuValue.value = tabPath;
     const tabsParams = {
       icon: route.meta.icon as string,
-      title: route.meta.title as string,
+      title: getCurrentRouteTitle(),
       path: tabPath,
       name: route.name as string,
       close: !route.meta.affix,
@@ -63,6 +71,12 @@ watch(
   { immediate: true }
 );
 
+watch(locale, () => {
+  const currentTabPath = getAdminTabPath(route);
+  const currentTab = tabStore.tabsMenuList.find(item => item.path === currentTabPath);
+  if (currentTab && route.meta.titleKey) currentTab.title = getCurrentRouteTitle();
+});
+
 // 初始化固定标签
 const initTabs = () => {
   authStore.flatMenuListGet.forEach(item => {

package/dist/package/src/layouts/components/ThemeDrawer/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
+  <el-drawer v-model="drawerVisible" :title="t('core.theme.settings')" size="290px">
     <!-- 布局样式 -->
     <el-divider class="divider" content-position="center">
       <el-icon><Notification /></el-icon>
-      布局样式
+      {{ t("core.theme.layout") }}
     </el-divider>
     <div class="layout-box">
-      <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
+      <el-tooltip effect="dark" :content="t('core.theme.layout.vertical')" placement="top" :show-after="200">
         <div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
           <div class="layout-dark"></div>
           <div class="layout-container">
@@ -18,7 +18,7 @@
           </el-icon>
         </div>
       </el-tooltip>
-      <el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
+      <el-tooltip effect="dark" :content="t('core.theme.layout.classic')" placement="top" :show-after="200">
         <div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
           <div class="layout-dark"></div>
           <div class="layout-container">
@@ -30,7 +30,7 @@
           </el-icon>
         </div>
       </el-tooltip>
-      <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
+      <el-tooltip effect="dark" :content="t('core.theme.layout.transverse')" placement="top" :show-after="200">
         <div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')">
           <div class="layout-dark"></div>
           <div class="layout-content"></div>
@@ -39,7 +39,7 @@
           </el-icon>
         </div>
       </el-tooltip>
-      <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
+      <el-tooltip effect="dark" :content="t('core.theme.layout.columns')" placement="top" :show-after="200">
         <div :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]" @click="setLayout('columns')">
           <div class="layout-dark"></div>
           <div class="layout-light"></div>
@@ -52,8 +52,8 @@
     </div>
     <div class="theme-item">
       <span>
-        侧边栏反转色
-        <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
+        {{ t("core.theme.aside_inverted") }}
+        <el-tooltip effect="dark" :content="t('core.theme.aside_inverted_tip')" placement="top">
           <el-icon><QuestionFilled /></el-icon>
         </el-tooltip>
       </span>
@@ -61,8 +61,8 @@
     </div>
     <div class="theme-item mb50">
       <span>
-        头部反转色
-        <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
+        {{ t("core.theme.header_inverted") }}
+        <el-tooltip effect="dark" :content="t('core.theme.header_inverted_tip')" placement="top">
           <el-icon><QuestionFilled /></el-icon>
         </el-tooltip>
       </span>
@@ -72,60 +72,60 @@
     <!-- 全局主题 -->
     <el-divider class="divider" content-position="center">
       <el-icon><ColdDrink /></el-icon>
-      全局主题
+      {{ t("core.theme.global") }}
     </el-divider>
     <div class="theme-item">
-      <span>主题颜色</span>
+      <span>{{ t("core.theme.color") }}</span>
       <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
     </div>
     <div class="theme-item">
-      <span>暗黑模式</span>
+      <span>{{ t("core.theme.dark") }}</span>
       <SwitchDark />
     </div>
     <div class="theme-item">
-      <span>灰色模式</span>
+      <span>{{ t("core.theme.grey") }}</span>
       <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
     </div>
     <div class="theme-item mb40">
-      <span>色弱模式</span>
+      <span>{{ t("core.theme.weak") }}</span>
       <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
     </div>
 
     <!-- 界面设置 -->
     <el-divider class="divider" content-position="center">
       <el-icon><Setting /></el-icon>
-      界面设置
+      {{ t("core.theme.interface") }}
     </el-divider>
     <div class="theme-item">
-      <span>菜单折叠</span>
+      <span>{{ t("core.theme.menu_collapse") }}</span>
       <el-switch v-model="isCollapse" />
     </div>
     <div class="theme-item">
-      <span>菜单手风琴</span>
+      <span>{{ t("core.theme.accordion") }}</span>
       <el-switch v-model="accordion" />
     </div>
     <div class="theme-item">
-      <span>水印</span>
+      <span>{{ t("core.theme.watermark") }}</span>
       <el-switch v-model="watermark" />
     </div>
     <div class="theme-item">
-      <span>面包屑</span>
+      <span>{{ t("core.theme.breadcrumb") }}</span>
       <el-switch v-model="breadcrumb" />
     </div>
     <div class="theme-item">
-      <span>面包屑图标</span>
+      <span>{{ t("core.theme.breadcrumb_icon") }}</span>
       <el-switch v-model="breadcrumbIcon" />
     </div>
     <div class="theme-item">
-      <span>标签栏</span>
+      <span>{{ t("core.theme.tabs") }}</span>
       <el-switch v-model="tabs" />
     </div>
     <div class="theme-item">
-      <span>标签栏图标</span>
+      <span>{{ t("core.theme.tabs_icon") }}</span>
       <el-switch v-model="tabsIcon" />
     </div>
     <div class="theme-item">
-      <span>页脚</span>
+      <span>{{ t("core.theme.footer") }}</span>
       <el-switch v-model="footer" />
     </div>
   </el-drawer>
@@ -140,6 +140,9 @@ import { LayoutType } from "../../../stores/interface";
 import { DEFAULT_PRIMARY } from "../../../config";
 import mittBus from "../../../utils/mittBus";
 import SwitchDark from "../../../components/SwitchDark/index.vue";
+import { useLocaleStore } from "../../../locales";
+
+const { t } = useLocaleStore();
 
 const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();
 

package/dist/package/src/locales/README.md

@@ -0,0 +1,15 @@
+# 管理端 Core 语言包
+
+本目录提供管理端底座和公共组件使用的稳定文案，包括通用操作、字段、状态、登录认证、上传、校验和错误提示。语言包由 `../modules/kratosAdmin.ts` 导入，作为 `kratos-admin` 模块注册到 `packages/core/src/locales/index.ts`，最终由 `bootstrap.ts` 合并到 Vue I18n；core 内组件、hooks、请求错误处理和登录页通过 `t()` 或 `useLocaleStore()` 使用。
+
+| 文件 | 用途 | 使用位置 |
+| --- | --- | --- |
+| `zh-CN.json` | 简体中文固定 UI 默认语言包，也是所有语言键集合和占位符校验基准。 | 管理端固定文案默认语言及缺失翻译回退。 |
+| `zh-TW.json` | 繁体中文公共语言包。 | 管理端切换为繁体中文时由 Vue I18n 使用。 |
+| `en-US.json` | 英文公共语言包。 | 管理端切换为英文时由 Vue I18n 使用。 |
+| `ja-JP.json` | 日文公共语言包。 | 管理端切换为日文时由 Vue I18n 使用。 |
+| `ko-KR.json` | 韩语公共语言包。 | 管理端切换为韩语时由 Vue I18n 使用。 |
+| `fr-FR.json` | 法语公共语言包。 | 管理端切换为法语时由 Vue I18n 使用。 |
+| `es-ES.json` | 西班牙语公共语言包。 | 管理端切换为西班牙语时由 Vue I18n 使用。 |
+
+语言包是标准 JSON，不能在文件内直接写注释；新增语言或修改键后执行仓库根目录的 `make i18n-sync`，脚本会校验所有语言并生成注册产物。语言切换选项固定显示后端 `base_language.native_name`，接口不可用时使用代码内置的原生名称；`common.language.*` 仅用于普通文案和语言迁移初始数据。新增语言的完整文件清单见[国际化语言扩展指南](../../../../../../docs/国际化语言扩展指南.md)。