@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/hooks/useTime.ts

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+
+/**
+ * @description 获取本地时间
+ */
+export const useTime = () => {
+  const year = ref(0); // 年份
+  const month = ref(0); // 月份
+  const week = ref(""); // 星期几
+  const day = ref(0); // 天数
+  const hour = ref<number | string>(0); // 小时
+  const minute = ref<number | string>(0); // 分钟
+  const second = ref<number | string>(0); // 秒
+  const nowTime = ref<string>(""); // 当前时间
+
+  // 更新时间
+  const updateTime = () => {
+    const date = new Date();
+    year.value = date.getFullYear();
+    month.value = date.getMonth() + 1;
+    week.value = "日一二三四五六".charAt(date.getDay());
+    day.value = date.getDate();
+    hour.value =
+      (date.getHours() + "")?.padStart(2, "0") ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
+    minute.value =
+      (date.getMinutes() + "")?.padStart(2, "0") ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
+    second.value =
+      (date.getSeconds() + "")?.padStart(2, "0") ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds());
+    nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`;
+  };
+
+  updateTime();
+
+  return { year, month, day, hour, minute, second, week, nowTime };
+};

package/dist/package/src/index.ts

@@ -0,0 +1,9 @@
+/// <reference path="./vite-env.d.ts" />
+/// <reference path="./typings/global.d.ts" />
+/// <reference path="./typings/utils.d.ts" />
+/// <reference path="../types/generated/auto-imports.d.ts" />
+/// <reference path="../types/generated/components.d.ts" />
+
+export * from "./modules";
+export { kratosAdminModule } from "./modules/kratosAdmin";
+export { bootstrapAdminApp } from "./bootstrap";

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

@@ -0,0 +1,60 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .header-lf {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      white-space: nowrap;
+      .logo {
+        flex-shrink: 0;
+        width: 210px;
+        margin-right: 16px;
+        .logo-img {
+          width: 28px;
+          object-fit: contain;
+        }
+        .logo-text {
+          margin-left: 6px;
+          font-size: 21.5px;
+          font-weight: bold;
+          color: var(--el-header-logo-text-color);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .classic-content {
+    display: flex;
+    height: calc(100% - 55px);
+    :deep(.el-aside) {
+      width: auto;
+      background-color: var(--el-menu-bg-color);
+      border-right: 1px solid var(--el-aside-border-color);
+      .aside-box {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        transition: width 0.3s ease;
+        .el-menu {
+          width: 100%;
+          overflow-x: hidden;
+          border-right: none;
+        }
+      }
+    }
+    .classic-main {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+<!-- 经典布局 -->
+<template>
+  <el-container class="layout">
+    <el-header>
+      <div class="header-lf mask-image">
+        <div class="logo flx-center">
+          <img class="logo-img" :src="logoUrl" alt="logo" />
+          <span class="logo-text">{{ title }}</span>
+        </div>
+        <ToolBarLeft />
+      </div>
+      <div class="header-ri">
+        <ToolBarRight />
+      </div>
+    </el-header>
+    <el-container class="classic-content">
+      <el-aside>
+        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+          <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 class="classic-main">
+        <Main />
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutClassic">
+import { computed } 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 SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "../../layouts/components/Header/ToolBarRight.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);
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,95 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  .aside-split {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    width: 70px;
+    height: 100%;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    .logo {
+      box-sizing: border-box;
+      height: 55px;
+      .logo-img {
+        width: 32px;
+        object-fit: contain;
+      }
+    }
+    .el-scrollbar {
+      height: calc(100% - 55px);
+      .split-list {
+        flex: 1;
+        .split-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 70px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          .el-icon {
+            font-size: 20px;
+          }
+          .title {
+            margin-top: 6px;
+            font-size: 12px;
+          }
+          .el-icon,
+          .title {
+            color: var(--el-menu-text-color);
+          }
+        }
+        .split-active {
+          background-color: var(--el-color-primary) !important;
+          .el-icon,
+          .title {
+            color: #ffffff !important;
+          }
+        }
+      }
+    }
+  }
+  .not-aside {
+    width: 0 !important;
+    border-right: none !important;
+  }
+  .el-aside {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    transition: width 0.3s ease;
+    .el-scrollbar {
+      height: calc(100% - 55px);
+      .el-menu {
+        width: 100%;
+        overflow-x: hidden;
+        border-right: none;
+      }
+    }
+    .logo {
+      box-sizing: border-box;
+      height: 55px;
+      .logo-text {
+        font-size: 24px;
+        font-weight: bold;
+        color: var(--el-aside-logo-text-color);
+        white-space: nowrap;
+      }
+    }
+  }
+  .el-header {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-border-color-light);
+  }
+}

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

@@ -0,0 +1,113 @@
+<!-- 分栏布局 -->
+<template>
+  <el-container class="layout">
+    <div class="aside-split">
+      <div class="logo flx-center">
+        <img class="logo-img" :src="logoUrl" alt="logo" />
+      </div>
+      <el-scrollbar>
+        <div class="split-list">
+          <div
+            v-for="item in menuList"
+            :key="getRouteMenuKey(item)"
+            class="split-item"
+            :class="{ 'split-active': splitActive === getRouteMenuKey(item) }"
+            @click="changeSubMenu(item)"
+          >
+            <el-icon>
+              <component :is="getRouteMetaIcon(item.meta)"></component>
+            </el-icon>
+            <span class="title">{{ getRouteMetaTitle(item.meta) }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+    <el-aside :class="{ 'not-aside': !subMenuList.length }" :style="{ width: isCollapse ? '65px' : '210px' }">
+      <div class="logo flx-center">
+        <span v-show="subMenuList.length" class="logo-text">{{ isCollapse ? collapseTitle : title }}</span>
+      </div>
+      <el-scrollbar>
+        <el-menu
+          :router="false"
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :unique-opened="accordion"
+          :collapse-transition="false"
+        >
+          <SubMenu :menu-list="subMenuList" />
+        </el-menu>
+      </el-scrollbar>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <ToolBarLeft />
+        <ToolBarRight />
+      </el-header>
+      <Main />
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutColumns">
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "../../stores/modules/auth";
+import { useConfigStore } from "../../stores/modules/config";
+import { useGlobalStore } from "../../stores/modules/global";
+import type { RouteItem } from "../../rpc/system/admin/v1/auth";
+import { getRouteMenuKey, getRouteMetaIcon, getRouteMetaTitle, getRouteTarget, isExternalPath, isRouteMenuActive } from "../../utils";
+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 router = useRouter();
+const authStore = useAuthStore();
+const configStore = useConfigStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+const menuList = computed(() => authStore.showMenuListGet.filter(item => Boolean(item.path) || Boolean(item.children?.length)));
+const activeMenu = computed(() => route.path as string);
+const title = computed(() => configStore.display.sysName || import.meta.env.VITE_GLOB_APP_TITLE);
+const collapseTitle = computed(() => title.value.slice(0, 1).toUpperCase() || "S");
+const logoUrl = computed(() => configStore.display.adminLogo);
+
+const subMenuList = ref<RouteItem[]>([]);
+const splitActive = ref("");
+watch(
+  () => [menuList, route],
+  () => {
+    // 当前菜单没有数据直接 return
+    if (!menuList.value.length) return;
+    const menuItem = menuList.value.find((item: RouteItem) => isRouteMenuActive(item, route.path));
+    if (!menuItem) return (subMenuList.value = []);
+    splitActive.value = getRouteMenuKey(menuItem);
+    if (menuItem.children?.length) return (subMenuList.value = menuItem.children);
+    subMenuList.value = [];
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
+/** 切换分栏布局的二级菜单。 */
+const changeSubMenu = (item: RouteItem) => {
+  splitActive.value = getRouteMenuKey(item);
+  if (item.children?.length) return (subMenuList.value = item.children);
+  subMenuList.value = [];
+  const target = getRouteTarget(item);
+  if (!target) return;
+  if (isExternalPath(target)) {
+    window.open(target, "_blank", "noopener,noreferrer");
+    return;
+  }
+  router.push(target);
+};
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,60 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .logo {
+      width: 210px;
+      margin-right: 30px;
+      .logo-img {
+        width: 28px;
+        object-fit: contain;
+      }
+      .logo-text {
+        margin-left: 6px;
+        font-size: 21.5px;
+        font-weight: bold;
+        color: var(--el-header-logo-text-color);
+        white-space: nowrap;
+      }
+    }
+    .el-menu {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+      border-bottom: none;
+      .el-sub-menu__hide-arrow {
+        width: 65px;
+        height: 55px;
+      }
+      .el-menu-item.is-active {
+        color: #ffffff !important;
+      }
+      .is-active {
+        background-color: var(--el-color-primary) !important;
+        border-bottom-color: var(--el-color-primary) !important;
+        &::before {
+          width: 0;
+        }
+        .el-sub-menu__title {
+          color: #ffffff !important;
+          background-color: var(--el-color-primary) !important;
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+    }
+  }
+
+  @media screen and (width <= 730px) {
+    .logo {
+      display: none !important;
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+<!-- 横向布局 -->
+<template>
+  <el-container class="layout">
+    <el-header>
+      <div class="logo flx-center">
+        <img class="logo-img" :src="logoUrl" alt="logo" />
+        <span class="logo-text">{{ title }}</span>
+      </div>
+      <el-menu mode="horizontal" :router="false" :default-active="activeMenu">
+        <!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
+        <template v-for="subItem in menuList" :key="getRouteMenuKey(subItem)">
+          <el-sub-menu v-if="subItem.children?.length" :index="getRouteMenuKey(subItem)">
+            <template #title>
+              <el-icon>
+                <component :is="getRouteMetaIcon(subItem.meta)"></component>
+              </el-icon>
+              <span>{{ getRouteMetaTitle(subItem.meta) }}</span>
+            </template>
+            <SubMenu :menu-list="subItem.children" />
+          </el-sub-menu>
+          <el-menu-item v-else :index="getRouteMenuKey(subItem)" @click="handleClickMenu(subItem)">
+            <el-icon>
+              <component :is="getRouteMetaIcon(subItem.meta)"></component>
+            </el-icon>
+            <template #title>
+              <span>{{ getRouteMetaTitle(subItem.meta) }}</span>
+            </template>
+          </el-menu-item>
+        </template>
+      </el-menu>
+      <ToolBarRight />
+    </el-header>
+    <Main />
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutTransverse">
+import { computed } from "vue";
+import { useAuthStore } from "../../stores/modules/auth";
+import { useConfigStore } from "../../stores/modules/config";
+import { useRoute, useRouter } from "vue-router";
+import type { RouteItem } from "../../rpc/system/admin/v1/auth";
+import { getRouteMenuKey, getRouteMetaIcon, getRouteMetaTitle, getRouteTarget, isExternalPath } from "../../utils";
+import Main from "../../layouts/components/Main/index.vue";
+import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
+import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const configStore = useConfigStore();
+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 handleClickMenu = (subItem: RouteItem) => {
+  const target = getRouteTarget(subItem);
+  if (!target) return;
+  if (isExternalPath(target)) {
+    window.open(target, "_blank", "noopener,noreferrer");
+    return;
+  }
+  router.push(target);
+};
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,70 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-aside) {
+    width: auto;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    .aside-box {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      transition: width 0.3s ease;
+      .el-scrollbar {
+        height: calc(100% - 55px);
+        .el-menu {
+          width: 100%;
+          overflow-x: hidden;
+          border-right: none;
+        }
+      }
+      .logo {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        height: 55px;
+        padding: 0 12px;
+        overflow: hidden;
+        &--text-only {
+          justify-content: flex-start;
+        }
+        .logo-img {
+          flex-shrink: 0;
+          width: 28px;
+          object-fit: contain;
+        }
+        .logo-text {
+          display: block;
+          flex: 1;
+          width: 100%;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 18px;
+          font-weight: bold;
+          line-height: 1;
+          color: var(--el-aside-logo-text-color);
+          white-space: nowrap;
+        }
+        .logo-text--with-icon {
+          margin-left: 8px;
+        }
+        .logo-text--full {
+          flex: none;
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .el-header {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+  }
+}