@liujitcn/kratos-admin-core 0.0.1

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

@@ -0,0 +1,119 @@
+<!-- 纵向布局 -->
+<template>
+  <el-container class="layout">
+    <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" />
+          <span
+            v-show="!isCollapse"
+            ref="logoTextRef"
+            :class="['logo-text', { 'logo-text--with-icon': showLogoIcon, 'logo-text--full': !showLogoIcon && !isCollapse }]"
+          >
+            {{ title }}
+          </span>
+        </div>
+        <el-scrollbar>
+          <el-menu
+            :router="false"
+            :default-active="activeMenu"
+            :collapse="isCollapse"
+            :unique-opened="accordion"
+            :collapse-transition="false"
+          >
+            <SubMenu :menu-list="menuList" />
+          </el-menu>
+        </el-scrollbar>
+      </div>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <ToolBarLeft />
+        <ToolBarRight />
+      </el-header>
+      <Main />
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutVertical">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useAuthStore } from "../../stores/modules/auth";
+import { useConfigStore } from "../../stores/modules/config";
+import { useGlobalStore } from "../../stores/modules/global";
+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";
+
+const route = useRoute();
+const authStore = useAuthStore();
+const configStore = useConfigStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+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);
+const logoUrl = computed(() => configStore.display.adminLogo);
+const logoWrapperRef = ref<HTMLElement>();
+const logoIconRef = ref<HTMLImageElement>();
+const logoTextRef = ref<HTMLElement>();
+const showLogoIcon = ref(true);
+
+let logoResizeObserver: ResizeObserver | null = null;
+
+/**
+ * 同步左侧标题区布局。
+ * 优先展示 Logo 和文字，若长标题在单行下放不下，则自动隐藏 Logo，仅保留文字。
+ */
+async function updateLogoLayout() {
+  await nextTick();
+
+  if (isCollapse.value) {
+    showLogoIcon.value = true;
+    return;
+  }
+
+  const wrapperElement = logoWrapperRef.value;
+  const iconElement = logoIconRef.value;
+  const textElement = logoTextRef.value;
+  if (!wrapperElement || !textElement) return;
+
+  showLogoIcon.value = true;
+  await nextTick();
+
+  const iconWidth = iconElement?.getBoundingClientRect().width ?? 0;
+  const availableWidth = Math.max(wrapperElement.clientWidth - iconWidth - 8 - 24, 0);
+
+  // 标题单行溢出时与登录页保持一致，直接隐藏 Logo，让完整名称优先展示。
+  if (textElement.scrollWidth > availableWidth) {
+    showLogoIcon.value = false;
+  }
+}
+
+onMounted(() => {
+  updateLogoLayout();
+  logoResizeObserver = new ResizeObserver(() => {
+    updateLogoLayout();
+  });
+
+  if (logoWrapperRef.value) {
+    logoResizeObserver.observe(logoWrapperRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  logoResizeObserver?.disconnect();
+  logoResizeObserver = null;
+});
+
+watch([title, logoUrl, isCollapse], () => {
+  updateLogoLayout();
+});
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

package/dist/package/src/layouts/components/Footer/index.scss

@@ -0,0 +1,11 @@
+.footer {
+  height: 30px;
+  background-color: var(--el-bg-color);
+  border-top: 1px solid var(--el-border-color-light);
+  a {
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+    letter-spacing: 0.5px;
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="footer flx-center">
+    <a :href="icpLink" target="_blank" rel="noopener noreferrer">{{ footerText }}</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useConfigStore } from "../../../stores/modules/config";
+
+const configStore = useConfigStore();
+const footerText = computed(() => {
+  const footerTextList = [configStore.display.copyright, configStore.display.icp].filter(Boolean);
+  return footerTextList.join(" ");
+});
+const icpLink = computed(() => (configStore.display.icp ? "https://beian.miit.gov.cn/" : "/"));
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="tool-bar-lf">
+    <CollapseIcon id="collapseIcon" />
+    <Breadcrumb v-show="globalStore.breadcrumb" id="breadcrumb" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "../../../stores/modules/global";
+import CollapseIcon from "./components/CollapseIcon.vue";
+import Breadcrumb from "./components/Breadcrumb.vue";
+const globalStore = useGlobalStore();
+</script>
+
+<style scoped lang="scss">
+.tool-bar-lf {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="tool-bar-ri">
+    <div class="header-icon">
+      <component :is="tool.component" v-for="tool in headerTools" :id="tool.name" :key="tool.name" />
+      <AssemblySize id="assemblySize" />
+      <SearchMenu id="searchMenu" />
+      <ThemeSetting id="themeSetting" />
+      <Fullscreen id="fullscreen" />
+    </div>
+    <Avatar />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getAdminHeaderTools } from "../../../modules";
+import AssemblySize from "./components/AssemblySize.vue";
+import SearchMenu from "./components/SearchMenu.vue";
+import ThemeSetting from "./components/ThemeSetting.vue";
+import Fullscreen from "./components/Fullscreen.vue";
+import Avatar from "./components/Avatar.vue";
+
+const headerTools = getAdminHeaderTools();
+</script>
+
+<style scoped lang="scss">
+.tool-bar-ri {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .header-icon {
+    display: flex;
+    align-items: center;
+    & > * {
+      margin-left: 21px;
+      color: var(--el-header-text-color);
+    }
+  }
+
+  // 头像入口与工具组之间保留呼吸感，避免顶部右侧元素粘连。
+  :deep(.el-dropdown) {
+    margin-left: 18px;
+  }
+}
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <el-tooltip effect="dark" content="组件大小" placement="bottom" :show-after="200">
+    <el-dropdown trigger="click" @command="setAssemblySize">
+      <i :class="'iconfont icon-contentright'" class="toolBar-icon"></i>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="item in assemblySizeList"
+            :key="item.value"
+            :command="item.value"
+            :disabled="assemblySize === item.value"
+          >
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useGlobalStore } from "../../../../stores/modules/global";
+import { AssemblySizeType } from "../../../../stores/interface";
+
+const globalStore = useGlobalStore();
+const assemblySize = computed(() => globalStore.assemblySize);
+
+const assemblySizeList = [
+  { label: "默认", value: "default" },
+  { label: "大型", value: "large" },
+  { label: "小型", value: "small" }
+];
+
+const setAssemblySize = (item: AssemblySizeType) => {
+  if (assemblySize.value === item) return;
+  globalStore.setGlobalState("assemblySize", item);
+};
+</script>

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

@@ -0,0 +1,226 @@
+<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" />
+    </div>
+    <template #dropdown>
+      <div class="user-panel">
+        <div class="user-panel__summary">
+          <div class="user-panel__avatar">
+            <img :src="avatarSrc" alt="avatar" @error="handleAvatarError" />
+          </div>
+          <div class="user-panel__identity">
+            <div class="user-panel__name">{{ displayName }}</div>
+            <div class="user-panel__meta">{{ profileSummary }}</div>
+          </div>
+        </div>
+        <div class="user-panel__actions">
+          <button
+            v-for="action in availableUserMenuActions"
+            :key="action.name"
+            class="action-btn action-btn--primary"
+            type="button"
+            @click.stop="handleUserMenuAction(action.path)"
+          >
+            <el-icon v-if="action.icon"><component :is="action.icon" /></el-icon>
+            <span>{{ action.label }}</span>
+          </button>
+          <button class="action-btn action-btn--danger" type="button" @click="logout">
+            <el-icon><SwitchButton /></el-icon>
+            <span>退出登录</span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+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";
+
+const router = useRouter();
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const userMenuActions = getAdminUserMenuActions();
+const dropdownRef = ref<DropdownInstance>();
+const avatarSrc = ref(defaultAvatar);
+const displayName = computed(() => userStore.userInfo.nick_name || userStore.userInfo.user_name || "未设置");
+const roleName = computed(() => userStore.userInfo.role_name || "未分配角色");
+const deptName = computed(() => userStore.userInfo.dept_name || "未分配部门");
+const profileSummary = computed(() => `${roleName.value} / ${deptName.value}`);
+const availableUserMenuActions = computed(() => {
+  return userMenuActions.flatMap(action => {
+    const menu = authStore.flatMenuListGet.find(item => item.name === action.menuName && item.path);
+    return menu?.path ? [{ ...action, path: menu.path }] : [];
+  });
+});
+
+/**
+ * 同步头部头像展示，优先使用用户头像，为空时回退默认头像。
+ *
+ * @param avatar 用户头像地址
+ */
+const syncAvatarSrc = (avatar?: string) => {
+  // 用户未上传头像时，统一回退到本地默认头像。
+  avatarSrc.value = avatar || defaultAvatar;
+};
+
+watch(
+  () => userStore.userInfo.avatar,
+  avatar => {
+    syncAvatarSrc(avatar);
+  },
+  { immediate: true }
+);
+
+/** 退出登录并清理当前登录态。 */
+const logout = () => {
+  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(async () => {
+    // 1.执行退出登录接口并清理本地状态
+    await userStore.logout();
+
+    // 2.重定向到登录页
+    router.replace(LOGIN_URL);
+    ElMessage.success("退出登录成功！");
+  });
+};
+
+/** 头像加载失败时兜底显示默认头像，避免出现破图。 */
+const handleAvatarError = () => {
+  avatarSrc.value = defaultAvatar;
+};
+
+/**
+ * 根据模块注册的用户菜单操作跳转到对应页面。
+ */
+const handleUserMenuAction = async (path: string) => {
+  dropdownRef.value?.handleClose();
+  await navigateTo(router, path);
+};
+</script>
+
+<style scoped lang="scss">
+.avatar {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid rgb(255 255 255 / 85%);
+  border-radius: 50%;
+  box-shadow: 0 8px 18px rgb(15 23 42 / 12%);
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.user-panel {
+  width: 280px;
+  padding: 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
+  border: 1px solid rgb(15 23 42 / 8%);
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgb(15 23 42 / 14%);
+  &__summary {
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    border-bottom: 1px solid rgb(15 23 42 / 8%);
+  }
+  &__avatar {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    background: #edf2f7;
+    border-radius: 50%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  &__identity {
+    min-width: 0;
+    margin-left: 12px;
+  }
+  &__name {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    color: #1f2937;
+  }
+  &__meta {
+    margin-top: 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    line-height: 18px;
+    color: #6b7280;
+    white-space: nowrap;
+  }
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 14px;
+  }
+}
+.action-btn {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 38px;
+  cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+
+  // 悬浮时仅做轻微上浮，避免头部浮层交互显得过重。
+  &:hover {
+    transform: translateY(-1px);
+  }
+  &--primary {
+    color: #1d4ed8;
+    background: rgb(37 99 235 / 10%);
+    &:hover {
+      background: rgb(37 99 235 / 14%);
+      box-shadow: 0 8px 18px rgb(37 99 235 / 16%);
+    }
+  }
+  &--danger {
+    color: #dc2626;
+    background: rgb(220 38 38 / 8%);
+    &:hover {
+      background: rgb(220 38 38 / 12%);
+      box-shadow: 0 8px 18px rgb(220 38 38 / 14%);
+    }
+  }
+}
+:deep(.header-avatar-dropdown) {
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
+    <el-breadcrumb :separator-icon="ArrowRight">
+      <transition-group name="breadcrumb">
+        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="`${item.path}-${item.name || index}`">
+          <div
+            class="el-breadcrumb__inner is-link"
+            :class="{ 'item-no-icon': !getRouteMetaIcon(item.meta) }"
+            @click="onBreadcrumbClick(item, index)"
+          >
+            <el-icon v-if="getRouteMetaIcon(item.meta) && globalStore.breadcrumbIcon" class="breadcrumb-icon">
+              <component :is="getRouteMetaIcon(item.meta)"></component>
+            </el-icon>
+            <span class="breadcrumb-title">{{ getRouteMetaTitle(item.meta) }}</span>
+          </div>
+        </el-breadcrumb-item>
+      </transition-group>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { HOME_URL } from "../../../../config";
+import { useRoute, useRouter } from "vue-router";
+import { ArrowRight } from "@element-plus/icons-vue";
+import { useAuthStore } from "../../../../stores/modules/auth";
+import { useGlobalStore } from "../../../../stores/modules/global";
+import type { RouteItem } from "../../../../rpc/system/admin/v1/auth";
+import { BaseMenuType } from "../../../../rpc/system/common/v1/enum";
+import { getRouteMetaIcon, getRouteMetaTitle, getRouteTarget, isExternalPath } from "../../../../utils";
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+
+const breadcrumbList = computed(() => {
+  let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
+  // 🙅‍♀️不需要首页面包屑可删除以下判断
+  if (breadcrumbData[0]?.path !== HOME_URL && getRouteMetaTitle(breadcrumbData[0]?.meta) !== "首页") {
+    breadcrumbData = [
+      { path: HOME_URL, name: "home", type: BaseMenuType.MENU, meta: { icon: "HomeFilled", title: "首页", params: [] }, children: [] },
+      ...breadcrumbData
+    ];
+  }
+  return breadcrumbData;
+});
+
+// 处理面包屑点击，兼容模板索引可能被推断为字符串或数字的情况。
+const onBreadcrumbClick = (item: RouteItem, index: string | number) => {
+  const routeIndex = Number(index);
+  const target = getRouteTarget(item);
+  if (routeIndex === breadcrumbList.value.length - 1 || !target) return;
+  if (isExternalPath(target)) {
+    window.open(target, "_blank", "noopener,noreferrer");
+    return;
+  }
+  router.push(target);
+};
+</script>
+
+<style scoped lang="scss">
+.breadcrumb-box {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  .el-breadcrumb {
+    white-space: nowrap;
+    .el-breadcrumb__item {
+      position: relative;
+      float: none;
+      display: inline-block;
+      .item-no-icon {
+        transform: translateY(-3px);
+      }
+      .el-breadcrumb__inner {
+        display: inline-flex;
+        &.is-link {
+          color: var(--el-header-text-color);
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+        .breadcrumb-icon {
+          margin-top: 1px;
+          margin-right: 6px;
+          font-size: 16px;
+        }
+        .breadcrumb-title {
+          margin-top: 2px;
+        }
+      }
+      &:last-child .el-breadcrumb__inner,
+      &:last-child .el-breadcrumb__inner:hover {
+        color: var(--el-header-text-color-regular);
+      }
+      :deep(.el-breadcrumb__separator) {
+        transform: translateY(-1px);
+      }
+    }
+  }
+}
+.no-icon {
+  .el-breadcrumb {
+    .el-breadcrumb__item {
+      top: -2px;
+      :deep(.el-breadcrumb__separator) {
+        top: 4px;
+      }
+      .item-no-icon {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <el-icon class="collapse-icon" @click="changeCollapse">
+    <component :is="globalStore.isCollapse ? 'expand' : 'fold'"></component>
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "../../../../stores/modules/global";
+
+const globalStore = useGlobalStore();
+const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
+</script>
+
+<style scoped lang="scss">
+.collapse-icon {
+  margin-right: 20px;
+  font-size: 22px;
+  color: var(--el-header-text-color);
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="fullscreen">
+    <el-tooltip effect="dark" :content="fullscreenTooltip" placement="bottom" :show-after="200">
+      <i :class="['iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon" @click="handleFullScreen"></i>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import screenfull from "screenfull";
+
+const isFullscreen = ref(screenfull.isFullscreen);
+const fullscreenTooltip = computed(() => (isFullscreen.value ? "退出全屏" : "全屏"));
+
+onMounted(() => {
+  screenfull.on("change", () => {
+    if (screenfull.isFullscreen) isFullscreen.value = true;
+    else isFullscreen.value = false;
+  });
+});
+
+const handleFullScreen = () => {
+  if (!screenfull.isEnabled) ElMessage.warning("当前您的浏览器不支持全屏 ❌");
+  screenfull.toggle();
+};
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="个人信息" 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>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const dialogVisible = ref(false);
+const openDialog = () => {
+  dialogVisible.value = true;
+};
+
+defineExpose({ openDialog });
+</script>