@liujitcn/kratos-admin-core 0.0.1

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

@@ -0,0 +1,22 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="修改密码" 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>
+      </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>

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

@@ -0,0 +1,207 @@
+<template>
+  <div class="search-menu">
+    <el-tooltip effect="dark" content="菜单搜索" 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="菜单搜索：支持菜单名称、路径"
+        size="large"
+        clearable
+        :prefix-icon="Search"
+      ></el-input>
+      <div v-if="searchList.length" class="menu-list" ref="menuListRef">
+        <div
+          v-for="item in searchList"
+          :key="item.path"
+          :class="['menu-item', { 'menu-active': item.path === activePath }]"
+          @mouseenter="mouseoverMenuItem(item)"
+          @click="handleClickMenu()"
+        >
+          <div class="menu-lf">
+            <el-icon class="menu-icon">
+              <component :is="getRouteMetaIcon(item.meta)"></component>
+            </el-icon>
+            <span class="menu-title">{{ getRouteMetaTitle(item.meta) }}</span>
+          </div>
+          <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-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, watch } from "vue";
+import { InputInstance } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import { useAuthStore } from "../../../../stores/modules/auth";
+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";
+
+/** 可被菜单搜索展示的路由项。 */
+interface SearchRouteItem extends RouteItem {
+  path: string;
+}
+
+const router = useRouter();
+const authStore = useAuthStore();
+const menuList = computed<SearchRouteItem[]>(() => {
+  return authStore.flatMenuListGet.filter((item): item is SearchRouteItem => {
+    return Boolean(item.path) && !getRouteMetaHidden(item.meta);
+  });
+});
+
+const activePath = ref("");
+/** 鼠标移入菜单项时同步当前高亮路径。 */
+const mouseoverMenuItem = (menu: SearchRouteItem) => {
+  activePath.value = menu.path;
+};
+
+const menuInputRef = ref<InputInstance | null>(null);
+const isShowSearch = ref<boolean>(false);
+const searchMenu = ref<string>("");
+
+watch(isShowSearch, val => {
+  if (val) {
+    document.addEventListener("keydown", keyboardOperation);
+  } else {
+    document.removeEventListener("keydown", keyboardOperation);
+  }
+});
+
+/** 打开菜单搜索弹窗并聚焦输入框。 */
+const handleOpen = () => {
+  isShowSearch.value = true;
+  nextTick(() => {
+    setTimeout(() => {
+      menuInputRef.value?.focus();
+    });
+  });
+};
+
+const searchList = ref<SearchRouteItem[]>([]);
+/** 根据关键词刷新可跳转菜单列表。 */
+const updateSearchList = () => {
+  searchList.value = searchMenu.value
+    ? menuList.value.filter(
+        item =>
+          (item.path.toLowerCase().includes(searchMenu.value.toLowerCase()) ||
+            getRouteMetaTitle(item.meta).toLowerCase().includes(searchMenu.value.toLowerCase())) &&
+          !getRouteMetaHidden(item.meta)
+      )
+    : [];
+  activePath.value = searchList.value.length ? searchList.value[0].path : "";
+};
+
+const debouncedUpdateSearchList = useDebounceFn(updateSearchList, 300);
+
+watch(searchMenu, debouncedUpdateSearchList);
+
+const menuListRef = ref<Element | null>(null);
+/** 处理键盘上下键切换菜单高亮项。 */
+const keyPressUpOrDown = (direction: number) => {
+  const length = searchList.value.length;
+  if (length === 0) return;
+  const index = searchList.value.findIndex(item => item.path === activePath.value);
+  const newIndex = (index + direction + length) % length;
+  activePath.value = searchList.value[newIndex].path;
+  nextTick(() => {
+    if (!menuListRef.value?.firstElementChild) return;
+    const menuItemHeight = menuListRef.value.firstElementChild.clientHeight + 12 || 0;
+    menuListRef.value.scrollTop = newIndex * menuItemHeight;
+  });
+};
+
+/** 处理菜单搜索弹窗内的键盘导航。 */
+const keyboardOperation = (event: KeyboardEvent) => {
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    keyPressUpOrDown(-1);
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    keyPressUpOrDown(1);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    handleClickMenu();
+  }
+};
+
+/** 跳转到当前选中的菜单路径。 */
+const handleClickMenu = () => {
+  const menu = searchList.value.find(item => item.path === activePath.value);
+  if (!menu) return;
+  const target = getRouteTarget(menu);
+  if (!target) return;
+  if (isExternalPath(target)) {
+    window.open(target, "_blank", "noopener,noreferrer");
+  } else {
+    router.push(target);
+  }
+  searchMenu.value = "";
+  isShowSearch.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.search-menu {
+  :deep(.el-dialog) {
+    border-radius: 4px;
+    .el-dialog__header {
+      display: none;
+    }
+  }
+  .menu-list {
+    max-height: 515px;
+    margin-top: 15px;
+    overflow: auto;
+    .menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 45px;
+      padding: 0 20px;
+      margin: 10px 0;
+      color: var(--el-text-color-secondary);
+      cursor: pointer;
+      background-color: transparent;
+      border: 1px solid var(--el-border-color);
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      .menu-lf {
+        display: flex;
+        align-items: center;
+      }
+      .menu-icon {
+        margin-right: 8px;
+        font-size: 16px;
+      }
+      .menu-title {
+        font-size: 14px;
+      }
+      .menu-enter {
+        font-size: 17px;
+      }
+    }
+    .menu-active {
+      color: #ffffff;
+      background-color: var(--el-color-primary);
+      .menu-icon {
+        font-size: 18px;
+      }
+      .menu-title {
+        font-size: 16px;
+      }
+      .menu-enter {
+        font-size: 19px;
+      }
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="maximize" @click="exitMaximize">
+    <i :class="'iconfont icon-tuichu'"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "../../../../stores/modules/global";
+
+const globalStore = useGlobalStore();
+const exitMaximize = () => {
+  globalStore.setGlobalState("maximize", false);
+};
+</script>
+
+<style scoped lang="scss">
+.maximize {
+  position: fixed;
+  top: -25px;
+  right: -25px;
+  z-index: 999;
+  width: 55px;
+  height: 55px;
+  cursor: pointer;
+  background-color: var(--el-color-info);
+  border-radius: 50%;
+  opacity: 0.9;
+  &:hover {
+    background-color: var(--el-color-info-dark-2);
+  }
+  .iconfont {
+    position: relative;
+    top: 46%;
+    left: 19%;
+    font-size: 14px;
+    color: #ffffff;
+  }
+}
+</style>

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

@@ -0,0 +1,14 @@
+.el-main {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 10px 12px;
+  overflow-x: hidden;
+  background-color: var(--el-bg-color-page);
+}
+.el-footer {
+  height: auto;
+  padding: 0;
+}

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

@@ -0,0 +1,90 @@
+<template>
+  <Maximize v-show="maximize" />
+  <Tabs v-show="tabs" />
+  <el-main>
+    <router-view v-slot="{ Component, route }">
+      <transition appear name="fade-transform" mode="out-in">
+        <keep-alive :include="keepAliveName">
+          <component :is="createComponentWrapper(Component, route)" v-if="isRouterShow" :key="route.fullPath" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </el-main>
+  <el-footer v-show="footer">
+    <Footer />
+  </el-footer>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUnmount, provide, watch, h } from "vue";
+import { storeToRefs } from "pinia";
+import { useDebounceFn } from "@vueuse/core";
+import { useGlobalStore } from "../../../stores/modules/global";
+import { useKeepAliveStore } from "../../../stores/modules/keepAlive";
+import Maximize from "./components/Maximize.vue";
+import Tabs from "../../../layouts/components/Tabs/index.vue";
+import Footer from "../../../layouts/components/Footer/index.vue";
+
+const globalStore = useGlobalStore();
+const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
+
+const keepAliveStore = useKeepAliveStore();
+const { keepAliveName } = storeToRefs(keepAliveStore);
+
+// 注入刷新页面方法
+const isRouterShow = ref(true);
+const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
+provide("refresh", refreshCurrentPage);
+
+// 解决详情页 keep-alive 问题
+const wrapperMap = new Map();
+function createComponentWrapper(component, route) {
+  if (!component) return;
+  const wrapperName = route.fullPath;
+  const wrapperCache = wrapperMap.get(wrapperName);
+  if (!wrapperCache || wrapperCache.component !== component) {
+    // 按完整路由生成独立包装组件，避免多标签切换时复用同一个动态组件实例导致内容串页。
+    const wrapper = { name: wrapperName, render: () => h(component) };
+    wrapperMap.set(wrapperName, { component, wrapper });
+    return wrapper;
+  }
+  return wrapperCache.wrapper;
+}
+
+// 监听当前页面是否最大化，动态添加 class
+watch(
+  () => maximize.value,
+  () => {
+    const app = document.getElementById("app") as HTMLElement;
+    if (maximize.value) app.classList.add("main-maximize");
+    else app.classList.remove("main-maximize");
+  },
+  { immediate: true }
+);
+
+// 监听布局变化，在 body 上添加相对应的 layout class
+watch(
+  () => layout.value,
+  () => {
+    const body = document.body as HTMLElement;
+    body.setAttribute("class", layout.value);
+  },
+  { immediate: true }
+);
+
+// 监听窗口大小变化，折叠侧边栏
+const screenWidth = ref(0);
+const listeningWindow = useDebounceFn(() => {
+  screenWidth.value = document.body.clientWidth;
+  if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
+  if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
+}, 100);
+window.addEventListener("resize", listeningWindow, false);
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", listeningWindow);
+});
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

package/dist/package/src/layouts/components/Menu/SubMenu.vue

@@ -0,0 +1,132 @@
+<template>
+  <template v-for="subItem in menuList" :key="getRouteMenuKey(subItem)">
+    <el-sub-menu v-if="isSubMenu(subItem)" :index="getRouteMenuKey(subItem)">
+      <template #title>
+        <el-icon v-if="getRouteMetaIcon(subItem.meta)">
+          <component :is="getRouteMetaIcon(subItem.meta)"></component>
+        </el-icon>
+        <span class="sle">{{ getRouteMetaTitle(subItem.meta) }}</span>
+      </template>
+      <SubMenu :menu-list="getSubMenuChildren(subItem)" />
+    </el-sub-menu>
+    <el-menu-item v-else :index="getRouteMenuKey(getMenuItem(subItem))" @click="handleClickMenu(getMenuItem(subItem))">
+      <el-icon v-if="getRouteMetaIcon(getMenuItem(subItem).meta)">
+        <component :is="getRouteMetaIcon(getMenuItem(subItem).meta)"></component>
+      </el-icon>
+      <template #title>
+        <span class="sle">{{ getRouteMetaTitle(getMenuItem(subItem).meta) }}</span>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import type { RouteItem } from "../../../rpc/system/admin/v1/auth";
+import {
+  getRouteTarget,
+  getRouteMenuKey,
+  getRouteMetaAlwaysShow,
+  getRouteMetaHidden,
+  getRouteMetaIcon,
+  getRouteMetaTitle,
+  isExternalPath
+} from "../../../utils";
+
+defineProps<{ menuList: RouteItem[] }>();
+
+const router = useRouter();
+/** 侧边菜单渲染时必须具备路径的菜单项。 */
+type VisibleRouteItem = RouteItem & { path: string };
+
+const ensureRoutePath = (subItem: RouteItem): VisibleRouteItem => {
+  return {
+    ...subItem,
+    path: subItem.path ?? ""
+  };
+};
+
+/** 获取当前菜单节点应继续渲染的可见子菜单。 */
+const getSubMenuChildren = (subItem: RouteItem) => {
+  const visibleChildren = (subItem.children ?? []).filter(item => !getRouteMetaHidden(item.meta));
+  if (getRouteMetaAlwaysShow(subItem.meta) || visibleChildren.length !== 1) return visibleChildren;
+  return visibleChildren[0].children ?? [];
+};
+
+const getMenuItem = (subItem: RouteItem): VisibleRouteItem => {
+  const visibleChildren = (subItem.children ?? []).filter(item => !getRouteMetaHidden(item.meta));
+  if (getRouteMetaAlwaysShow(subItem.meta) || visibleChildren.length !== 1) return ensureRoutePath(subItem);
+  return ensureRoutePath(visibleChildren[0]);
+};
+
+/** 判断当前节点是否需要渲染为子菜单容器。 */
+const isSubMenu = (subItem: RouteItem) => {
+  const visibleChildren = (subItem.children ?? []).filter(item => !getRouteMetaHidden(item.meta));
+  if (!visibleChildren.length) return false;
+  return getRouteMetaAlwaysShow(subItem.meta) || visibleChildren.length > 1;
+};
+
+/** 处理侧边菜单点击并跳转内部路由或外链。 */
+const handleClickMenu = (subItem: RouteItem) => {
+  const menuItem = getMenuItem(subItem);
+  const target = getRouteTarget(menuItem);
+  if (!target) return;
+  if (isExternalPath(target)) {
+    window.open(target, "_blank", "noopener,noreferrer");
+    return;
+  }
+  router.push(target);
+};
+</script>
+
+<style lang="scss">
+.el-sub-menu .el-sub-menu__title:hover {
+  color: var(--el-menu-hover-text-color) !important;
+  background-color: transparent !important;
+}
+.el-menu--collapse {
+  .is-active {
+    .el-sub-menu__title {
+      color: #ffffff !important;
+      background-color: var(--el-color-primary) !important;
+    }
+  }
+}
+.el-menu-item {
+  &:hover {
+    color: var(--el-menu-hover-text-color);
+  }
+  &.is-active {
+    color: var(--el-menu-active-color) !important;
+    background-color: var(--el-menu-active-bg-color) !important;
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      content: "";
+      background-color: var(--el-color-primary);
+    }
+  }
+}
+.vertical,
+.classic,
+.transverse {
+  .el-menu-item {
+    &.is-active {
+      &::before {
+        left: 0;
+      }
+    }
+  }
+}
+.columns {
+  .el-menu-item {
+    &.is-active {
+      &::before {
+        right: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,83 @@
+<template>
+  <el-dropdown trigger="click" :teleported="false">
+    <div class="more-button">
+      <i :class="'iconfont icon-xiala'"></i>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="refresh">
+          <el-icon><Refresh /></el-icon>刷新当前
+        </el-dropdown-item>
+        <el-dropdown-item @click="maximize">
+          <el-icon><FullScreen /></el-icon>最大化
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="closeCurrentTab">
+          <el-icon><Remove /></el-icon>关闭当前
+        </el-dropdown-item>
+        <el-dropdown-item @click="tabStore.closeTabsOnSide(currentTabPath, 'left')">
+          <el-icon><DArrowLeft /></el-icon>关闭左侧
+        </el-dropdown-item>
+        <el-dropdown-item @click="tabStore.closeTabsOnSide(currentTabPath, 'right')">
+          <el-icon><DArrowRight /></el-icon>关闭右侧
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="tabStore.closeMultipleTab(currentTabPath)">
+          <el-icon><CircleClose /></el-icon>关闭其他
+        </el-dropdown-item>
+        <el-dropdown-item @click="closeAllTab">
+          <el-icon><FolderDelete /></el-icon>关闭全部
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick } from "vue";
+import { HOME_URL } from "../../../../config";
+import { getAdminTabPath } from "../../../../modules";
+import { useTabsStore } from "../../../../stores/modules/tabs";
+import { useGlobalStore } from "../../../../stores/modules/global";
+import { useKeepAliveStore } from "../../../../stores/modules/keepAlive";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const globalStore = useGlobalStore();
+const keepAliveStore = useKeepAliveStore();
+const currentTabPath = computed(() => getAdminTabPath(route));
+
+// refresh current page
+const refreshCurrentPage: Function = inject("refresh") as Function;
+const refresh = () => {
+  setTimeout(() => {
+    route.meta.keepAlive && keepAliveStore.removeKeepAliveName(currentTabPath.value);
+    refreshCurrentPage(false);
+    nextTick(() => {
+      route.meta.keepAlive && keepAliveStore.addKeepAliveName(currentTabPath.value);
+      refreshCurrentPage(true);
+    });
+  }, 0);
+};
+
+// maximize current page
+const maximize = () => {
+  globalStore.setGlobalState("maximize", true);
+};
+
+// Close Current
+const closeCurrentTab = () => {
+  if (route.meta.affix) return;
+  tabStore.removeTabs(currentTabPath.value);
+};
+
+// Close All
+const closeAllTab = () => {
+  tabStore.closeMultipleTab();
+  router.push(HOME_URL);
+};
+</script>
+
+<style scoped lang="scss">
+@use "../index.scss" as *;
+</style>

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

@@ -0,0 +1,69 @@
+.tabs-box {
+  background-color: var(--el-bg-color);
+  .tabs-menu {
+    position: relative;
+    width: 100%;
+    .el-dropdown {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      .more-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 43px;
+        cursor: pointer;
+        border-left: 1px solid var(--el-border-color-light);
+        transition: all 0.3s;
+        &:hover {
+          background-color: var(--el-color-info-light-9);
+        }
+        .iconfont {
+          font-size: 12.5px;
+        }
+      }
+    }
+    :deep(.el-tabs) {
+      .el-tabs__header {
+        box-sizing: border-box;
+        height: 40px;
+        padding: 0 10px;
+        margin: 0;
+        .el-tabs__nav-wrap {
+          position: absolute;
+          width: calc(100% - 70px);
+          .el-tabs__nav {
+            display: flex;
+            border: none;
+            .el-tabs__item {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #afafaf;
+              border: none;
+              .tabs-icon {
+                margin: 1.5px 4px 0 0;
+                font-size: 15px;
+              }
+              .is-icon-close {
+                margin-top: 1px;
+              }
+              &.is-active {
+                color: var(--el-color-primary);
+                &::before {
+                  position: absolute;
+                  bottom: 0;
+                  width: 100%;
+                  height: 0;
+                  content: "";
+                  border-bottom: 2px solid var(--el-color-primary) !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}