@liujitcn/kratos-admin-core 0.0.29 → 0.0.32

package/dist/package/src/index.ts

@@ -6,6 +6,7 @@
 
 export * from "./modules";
 export * from "./locales";
-export { defLanguageService } from "./api/base/language";
+export { defLanguageService } from "./api/base/v1/language";
+export { setAdminDocumentTitle } from "./documentTitle";
 export { kratosAdminModule } from "./modules/kratosAdmin";
 export { bootstrapAdminApp } from "./bootstrap";

package/dist/package/src/layouts/LayoutClassic/index.vue

@@ -4,7 +4,7 @@
     <el-header>
       <div class="header-lf mask-image">
         <div class="logo flx-center">
-          <img class="logo-img" :src="logoUrl" alt="logo" />
+          <img class="logo-img" :src="logoUrl" :alt="t('core.layout.logo_alt')" />
           <span class="logo-text">{{ title }}</span>
         </div>
         <ToolBarLeft />
@@ -46,11 +46,13 @@ import Main from "../../layouts/components/Main/index.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
 import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const globalStore = useGlobalStore();
+const { t } = useLocaleStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);

package/dist/package/src/layouts/LayoutColumns/index.vue

@@ -3,7 +3,7 @@
   <el-container class="layout">
     <div class="aside-split">
       <div class="logo flx-center">
-        <img class="logo-img" :src="logoUrl" alt="logo" />
+        <img class="logo-img" :src="logoUrl" :alt="t('core.layout.logo_alt')" />
       </div>
       <el-scrollbar>
         <div class="split-list">
@@ -60,12 +60,14 @@ import Main from "../../layouts/components/Main/index.vue";
 import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const globalStore = useGlobalStore();
+const { t } = useLocaleStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet.filter(item => Boolean(item.path) || Boolean(item.children?.length)));

package/dist/package/src/layouts/LayoutTransverse/index.vue

@@ -3,7 +3,7 @@
   <el-container class="layout">
     <el-header>
       <div class="logo flx-center">
-        <img class="logo-img" :src="logoUrl" alt="logo" />
+        <img class="logo-img" :src="logoUrl" :alt="t('core.layout.logo_alt')" />
         <span class="logo-text">{{ title }}</span>
       </div>
       <el-menu mode="horizontal" :router="false" :default-active="activeMenu">
@@ -44,11 +44,13 @@ import { getRouteMenuKey, getRouteMetaIcon, getRouteMetaTitle, getRouteTarget, i
 import Main from "../../layouts/components/Main/index.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
+const { t } = useLocaleStore();
 const menuList = computed(() => authStore.showMenuListGet);
 const activeMenu = computed(() => route.path as string);
 const title = computed(() => configStore.display.sysName || import.meta.env.VITE_GLOB_APP_TITLE);

package/dist/package/src/layouts/LayoutVertical/index.vue

@@ -4,7 +4,13 @@
     <el-aside>
       <div class="aside-box" :style="{ width: isCollapse ? '65px' : '240px' }">
         <div ref="logoWrapperRef" :class="['logo', { 'logo--text-only': !showLogoIcon && !isCollapse }]">
-          <img v-show="isCollapse || showLogoIcon" ref="logoIconRef" class="logo-img" :src="logoUrl" alt="logo" />
+          <img
+            v-show="isCollapse || showLogoIcon"
+            ref="logoIconRef"
+            class="logo-img"
+            :src="logoUrl"
+            :alt="t('core.layout.logo_alt')"
+          />
           <span
             v-show="!isCollapse"
             ref="logoTextRef"
@@ -46,11 +52,13 @@ import Main from "../../layouts/components/Main/index.vue";
 import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const globalStore = useGlobalStore();
+const { t } = useLocaleStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);

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

@@ -1,13 +1,13 @@
 <template>
   <el-dropdown ref="dropdownRef" trigger="click" placement="bottom-end" popper-class="header-avatar-dropdown">
     <div class="avatar">
-      <img :src="avatarSrc" alt="avatar" @error="handleAvatarError" />
+      <img :src="avatarSrc" :alt="t('core.layout.avatar')" @error="handleAvatarError" />
     </div>
     <template #dropdown>
       <div class="user-panel">
         <div class="user-panel__summary">
           <div class="user-panel__avatar">
-            <img :src="avatarSrc" alt="avatar" @error="handleAvatarError" />
+            <img :src="avatarSrc" :alt="t('core.layout.avatar')" @error="handleAvatarError" />
           </div>
           <div class="user-panel__identity">
             <div class="user-panel__name">{{ displayName }}</div>
@@ -23,7 +23,11 @@
             @click.stop="handleUserMenuAction(action.path)"
           >
             <el-icon v-if="action.icon"><component :is="action.icon" /></el-icon>
-            <span>{{ action.labelKey ? t(action.labelKey) : action.label }}</span>
+			<span>{{ t(action.labelKey) }}</span>
+          </button>
+          <button class="action-btn action-btn--lock" type="button" @click.stop="lockScreen">
+            <el-icon><Lock /></el-icon>
+            <span>{{ t("core.layout.lock_screen") }}</span>
           </button>
           <button class="action-btn action-btn--danger" type="button" @click="logout">
             <el-icon><SwitchButton /></el-icon>
@@ -41,16 +45,17 @@ import { LOGIN_URL } from "../../../../config";
 import { useRouter } from "vue-router";
 import { useUserStore } from "../../../../stores/modules/user";
 import { useAuthStore } from "../../../../stores/modules/auth";
-import { ElMessageBox, ElMessage } from "element-plus";
 import type { DropdownInstance } from "element-plus";
 import defaultAvatar from "../../../../assets/images/avatar.png";
 import { navigateTo } from "../../../../utils/router";
 import { getAdminUserMenuActions } from "../../../../modules";
 import { useLocaleStore } from "../../../../locales";
+import { useLockScreenStore } from "../../../../stores/modules/lockScreen";
 
 const router = useRouter();
 const userStore = useUserStore();
 const authStore = useAuthStore();
+const lockScreenStore = useLockScreenStore();
 const userMenuActions = getAdminUserMenuActions();
 const dropdownRef = ref<DropdownInstance>();
 const { t } = useLocaleStore();
@@ -112,6 +117,12 @@ const handleUserMenuAction = async (path: string) => {
   dropdownRef.value?.handleClose();
   await navigateTo(router, path);
 };
+
+/** 打开锁屏密码设置界面并关闭头像菜单。 */
+const lockScreen = () => {
+  dropdownRef.value?.handleClose();
+  lockScreenStore.openSetup();
+};
 </script>
 
 <style scoped lang="scss">
@@ -135,7 +146,7 @@ const handleUserMenuAction = async (path: string) => {
   padding: 16px;
   background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
   border: 1px solid rgb(15 23 42 / 8%);
-  border-radius: 12px;
+  border-radius: var(--admin-page-radius);
   box-shadow: 0 16px 40px rgb(15 23 42 / 14%);
   &__summary {
     display: flex;
@@ -192,7 +203,7 @@ const handleUserMenuAction = async (path: string) => {
   height: 38px;
   cursor: pointer;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--admin-page-radius);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
@@ -218,6 +229,15 @@ const handleUserMenuAction = async (path: string) => {
       box-shadow: 0 8px 18px rgb(220 38 38 / 14%);
     }
   }
+  &--lock {
+    color: var(--el-color-warning-dark-2);
+    background: var(--el-color-warning-light-9);
+    &:hover {
+      color: var(--el-color-warning-dark-2);
+      background: var(--el-color-warning-light-8);
+      box-shadow: 0 8px 18px rgb(230 162 60 / 14%);
+    }
+  }
 }
 :deep(.header-avatar-dropdown) {
   padding: 0;

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

@@ -1,17 +1,18 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="t('core.layout.info')" width="500px" draggable>
-    <span>This is userInfo</span>
+  <ProDialog v-model="dialogVisible" :title="t('core.layout.info')" width="500px" draggable>
+    <span>{{ t("core.layout.info_content") }}</span>
     <template #footer>
       <span class="dialog-footer">
         <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>
+  </ProDialog>
 </template>
 
 <script setup lang="ts">
 import { useLocaleStore } from "../../../../locales";
+import ProDialog from "../../../../components/Dialog/ProDialog.vue";
 
 const { t } = useLocaleStore();
 import { ref } from "vue";

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

@@ -1,17 +1,18 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="t('core.layout.password_change')" width="500px" draggable>
-    <span>This is Password</span>
+  <ProDialog v-model="dialogVisible" :title="t('core.layout.password_change')" width="500px" draggable>
+    <span>{{ t("core.layout.password_content") }}</span>
     <template #footer>
       <span class="dialog-footer">
         <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>
+  </ProDialog>
 </template>
 
 <script setup lang="ts">
 import { useLocaleStore } from "../../../../locales";
+import ProDialog from "../../../../components/Dialog/ProDialog.vue";
 
 const { t } = useLocaleStore();
 import { ref } from "vue";

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

@@ -3,7 +3,14 @@
     <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">
+    <ProDialog
+      class="search-dialog"
+      v-model="isShowSearch"
+      :width="600"
+      :show-close="false"
+      :show-footer="false"
+      top="10vh"
+    >
       <el-input
         v-model="searchMenu"
         ref="menuInputRef"
@@ -30,7 +37,7 @@
         </div>
       </div>
       <el-empty v-else class="mt20 mb20" :image-size="100" :description="t('core.header.menu_search_empty')" />
-    </el-dialog>
+    </ProDialog>
   </div>
 </template>
 
@@ -44,6 +51,7 @@ 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";
+import ProDialog from "../../../../components/Dialog/ProDialog.vue";
 
 /** 可被菜单搜索展示的路由项。 */
 interface SearchRouteItem extends RouteItem {
@@ -152,11 +160,11 @@ const handleClickMenu = () => {
 
 <style scoped lang="scss">
 .search-menu {
-  :deep(.el-dialog) {
-    border-radius: 4px;
-    .el-dialog__header {
-      display: none;
-    }
+  :global(.search-dialog) {
+    border-radius: var(--admin-page-radius);
+  }
+  :global(.search-dialog .el-dialog__header) {
+    display: none;
   }
   .menu-list {
     max-height: 515px;
@@ -174,7 +182,7 @@ const handleClickMenu = () => {
       cursor: pointer;
       background-color: transparent;
       border: 1px solid var(--el-border-color);
-      border-radius: 6px;
+      border-radius: var(--admin-page-radius);
       transition: all 0.2s ease;
       .menu-lf {
         display: flex;