@liujitcn/kratos-admin-core 0.0.1

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="tabs-box">
+    <div class="tabs-menu">
+      <el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
+        <el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path" :closable="item.close">
+          <template #label>
+            <el-icon v-if="item.icon && tabsIcon" class="tabs-icon">
+              <component :is="item.icon"></component>
+            </el-icon>
+            {{ item.title }}
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+      <MoreButton />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import { ref, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useGlobalStore } from "../../../stores/modules/global";
+import { useTabsStore } from "../../../stores/modules/tabs";
+import { useAuthStore } from "../../../stores/modules/auth";
+import { TabsPaneContext, TabPaneName } from "element-plus";
+import { getRouteMetaAffix, getRouteMetaFull, getRouteMetaIcon, getRouteMetaKeepAlive, getRouteMetaTitle } from "../../../utils";
+import MoreButton from "./components/MoreButton.vue";
+import { getAdminTabPath } from "../../../modules";
+
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+
+const tabsMenuValue = ref(getAdminTabPath(route));
+const tabsMenuList = computed(() => tabStore.tabsMenuList);
+const tabsIcon = computed(() => globalStore.tabsIcon);
+
+onMounted(() => {
+  tabsDrop();
+  initTabs();
+});
+
+// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
+watch(
+  () => route.fullPath,
+  () => {
+    if (route.meta.full) return;
+    const tabPath = getAdminTabPath(route);
+    tabsMenuValue.value = tabPath;
+    const tabsParams = {
+      icon: route.meta.icon as string,
+      title: route.meta.title as string,
+      path: tabPath,
+      name: route.name as string,
+      close: !route.meta.affix,
+      isKeepAlive: route.meta.keepAlive as boolean
+    };
+    tabStore.addTabs(tabsParams);
+  },
+  { immediate: true }
+);
+
+// 初始化固定标签
+const initTabs = () => {
+  authStore.flatMenuListGet.forEach(item => {
+    if (item.path && item.name && getRouteMetaAffix(item.meta) && !getRouteMetaFull(item.meta)) {
+      const tabsParams = {
+        icon: getRouteMetaIcon(item.meta),
+        title: getRouteMetaTitle(item.meta),
+        path: item.path,
+        name: item.name,
+        close: !getRouteMetaAffix(item.meta),
+        isKeepAlive: getRouteMetaKeepAlive(item.meta)
+      };
+      tabStore.addTabs(tabsParams);
+    }
+  });
+};
+
+// tabs 拖拽排序
+const tabsDrop = () => {
+  Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
+    draggable: ".el-tabs__item",
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      const tabsList = [...tabStore.tabsMenuList];
+      const currRow = tabsList.splice(oldIndex as number, 1)[0];
+      tabsList.splice(newIndex as number, 0, currRow);
+      tabStore.setTabs(tabsList);
+    }
+  });
+};
+
+// Tab Click
+const tabClick = (tabItem: TabsPaneContext) => {
+  const fullPath = tabItem.props.name as string;
+  router.push(fullPath);
+};
+
+// Remove Tab
+const tabRemove = (fullPath: TabPaneName) => {
+  tabStore.removeTabs(fullPath as string, fullPath === getAdminTabPath(route));
+};
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,137 @@
+.divider {
+  margin-top: 15px;
+  .el-icon {
+    position: relative;
+    top: 2px;
+    right: 5px;
+    font-size: 15px;
+  }
+}
+.theme-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 5px;
+  margin: 14px 0;
+  span {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    .el-icon {
+      margin-left: 3px;
+      font-size: 15px;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+    }
+  }
+}
+.layout-box {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 15px 7px 0;
+  .layout-item {
+    position: relative;
+    box-sizing: border-box;
+    width: 100px;
+    height: 70px;
+    padding: 6px;
+    cursor: pointer;
+    border-radius: 5px;
+    box-shadow: 0 0 5px 1px var(--el-border-color-dark);
+    transition: all 0.2s;
+    .layout-dark {
+      background-color: var(--el-color-primary);
+      border-radius: 3px;
+    }
+    .layout-light {
+      background-color: var(--el-color-primary-light-5);
+      border-radius: 3px;
+    }
+    .layout-content {
+      background-color: var(--el-color-primary-light-8);
+      border: 1px dashed var(--el-color-primary);
+      border-radius: 3px;
+    }
+    .el-icon {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      color: var(--el-color-primary);
+      transition: all 0.2s;
+    }
+    &:hover {
+      box-shadow: 0 0 5px 1px var(--el-text-color-secondary);
+    }
+  }
+  .is-active {
+    box-shadow: 0 0 0 2px var(--el-color-primary) !important;
+  }
+  .layout-vertical {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-dark {
+      width: 20%;
+    }
+    .layout-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 72%;
+      .layout-light {
+        height: 20%;
+      }
+      .layout-content {
+        height: 67%;
+      }
+    }
+  }
+  .layout-classic {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-dark {
+      height: 22%;
+    }
+    .layout-container {
+      display: flex;
+      justify-content: space-between;
+      height: 70%;
+      .layout-light {
+        width: 20%;
+      }
+      .layout-content {
+        width: 70%;
+      }
+    }
+  }
+  .layout-transverse {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    .layout-dark {
+      height: 20%;
+    }
+    .layout-content {
+      height: 67%;
+    }
+  }
+  .layout-columns {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    .layout-dark {
+      width: 14%;
+    }
+    .layout-light {
+      width: 17%;
+    }
+    .layout-content {
+      width: 55%;
+    }
+  }
+}

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

@@ -0,0 +1,191 @@
+<template>
+  <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
+    <!-- 布局样式 -->
+    <el-divider class="divider" content-position="center">
+      <el-icon><Notification /></el-icon>
+      布局样式
+    </el-divider>
+    <div class="layout-box">
+      <el-tooltip effect="dark" content="纵向" 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">
+            <div class="layout-light"></div>
+            <div class="layout-content"></div>
+          </div>
+          <el-icon v-if="layout == 'vertical'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="经典" 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">
+            <div class="layout-light"></div>
+            <div class="layout-content"></div>
+          </div>
+          <el-icon v-if="layout == 'classic'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="横向" 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>
+          <el-icon v-if="layout == 'transverse'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="分栏" 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>
+          <div class="layout-content"></div>
+          <el-icon v-if="layout == 'columns'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+    </div>
+    <div class="theme-item">
+      <span>
+        侧边栏反转色
+        <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
+          <el-icon><QuestionFilled /></el-icon>
+        </el-tooltip>
+      </span>
+      <el-switch v-model="asideInverted" @change="setAsideTheme" />
+    </div>
+    <div class="theme-item mb50">
+      <span>
+        头部反转色
+        <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
+          <el-icon><QuestionFilled /></el-icon>
+        </el-tooltip>
+      </span>
+      <el-switch v-model="headerInverted" @change="setHeaderTheme" />
+    </div>
+
+    <!-- 全局主题 -->
+    <el-divider class="divider" content-position="center">
+      <el-icon><ColdDrink /></el-icon>
+      全局主题
+    </el-divider>
+    <div class="theme-item">
+      <span>主题颜色</span>
+      <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
+    </div>
+    <div class="theme-item">
+      <span>暗黑模式</span>
+      <SwitchDark />
+    </div>
+    <div class="theme-item">
+      <span>灰色模式</span>
+      <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
+    </div>
+    <div class="theme-item mb40">
+      <span>色弱模式</span>
+      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
+    </div>
+
+    <!-- 界面设置 -->
+    <el-divider class="divider" content-position="center">
+      <el-icon><Setting /></el-icon>
+      界面设置
+    </el-divider>
+    <div class="theme-item">
+      <span>菜单折叠</span>
+      <el-switch v-model="isCollapse" />
+    </div>
+    <div class="theme-item">
+      <span>菜单手风琴</span>
+      <el-switch v-model="accordion" />
+    </div>
+    <div class="theme-item">
+      <span>水印</span>
+      <el-switch v-model="watermark" />
+    </div>
+    <div class="theme-item">
+      <span>面包屑</span>
+      <el-switch v-model="breadcrumb" />
+    </div>
+    <div class="theme-item">
+      <span>面包屑图标</span>
+      <el-switch v-model="breadcrumbIcon" />
+    </div>
+    <div class="theme-item">
+      <span>标签栏</span>
+      <el-switch v-model="tabs" />
+    </div>
+    <div class="theme-item">
+      <span>标签栏图标</span>
+      <el-switch v-model="tabsIcon" />
+    </div>
+    <div class="theme-item">
+      <span>页脚</span>
+      <el-switch v-model="footer" />
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useTheme } from "../../../hooks/useTheme";
+import { useGlobalStore } from "../../../stores/modules/global";
+import { LayoutType } from "../../../stores/interface";
+import { DEFAULT_PRIMARY } from "../../../config";
+import mittBus from "../../../utils/mittBus";
+import SwitchDark from "../../../components/SwitchDark/index.vue";
+
+const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();
+
+const globalStore = useGlobalStore();
+const {
+  layout,
+  primary,
+  isGrey,
+  isWeak,
+  asideInverted,
+  headerInverted,
+  isCollapse,
+  accordion,
+  watermark,
+  breadcrumb,
+  breadcrumbIcon,
+  tabs,
+  tabsIcon,
+  footer
+} = storeToRefs(globalStore);
+
+// 预定义主题颜色
+const colorList = [
+  DEFAULT_PRIMARY,
+  "#daa96e",
+  "#0c819f",
+  "#409eff",
+  "#27ae60",
+  "#ff5c93",
+  "#e74c3c",
+  "#fd726d",
+  "#f39c12",
+  "#9b59b6"
+];
+
+// 设置布局方式
+const setLayout = (val: LayoutType) => {
+  globalStore.setGlobalState("layout", val);
+  setAsideTheme();
+};
+
+// 打开主题设置
+const drawerVisible = ref(false);
+mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,50 @@
+<!-- 💥 这里是一次性加载 LayoutComponents -->
+<template>
+  <el-watermark id="watermark" :font="font" :content="watermarkContent">
+    <component :is="LayoutComponents[layout]" />
+    <ThemeDrawer />
+  </el-watermark>
+</template>
+
+<script setup lang="ts" name="Layout">
+import { computed, reactive, watch, type Component } from "vue";
+import { LayoutType } from "../stores/interface";
+import { useGlobalStore } from "../stores/modules/global";
+import { useConfigStore } from "../stores/modules/config";
+import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+import LayoutVertical from "./LayoutVertical/index.vue";
+import LayoutClassic from "./LayoutClassic/index.vue";
+import LayoutTransverse from "./LayoutTransverse/index.vue";
+import LayoutColumns from "./LayoutColumns/index.vue";
+
+const LayoutComponents: Record<LayoutType, Component> = {
+  vertical: LayoutVertical,
+  classic: LayoutClassic,
+  transverse: LayoutTransverse,
+  columns: LayoutColumns
+};
+
+const globalStore = useGlobalStore();
+const configStore = useConfigStore();
+
+const isDark = computed(() => globalStore.isDark);
+const layout = computed(() => globalStore.layout);
+const watermark = computed(() => globalStore.watermark);
+const watermarkContent = computed(() => {
+  if (!watermark.value) return "";
+
+  const watermarkTextList = [configStore.display.sysName, configStore.display.watermark].filter(Boolean);
+  return watermarkTextList.length ? watermarkTextList : "";
+});
+
+const font = reactive({ color: "rgba(0, 0, 0, .15)" });
+watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
+  immediate: true
+});
+</script>
+
+<style scoped lang="scss">
+.layout {
+  min-width: 600px;
+}
+</style>

package/dist/package/src/layouts/indexAsync.vue

@@ -0,0 +1,54 @@
+<!-- 💥 这里是异步加载 LayoutComponents -->
+<template>
+  <el-watermark id="watermark" :font="font" :content="watermarkContent">
+    <suspense>
+      <template #default>
+        <component :is="LayoutComponents[layout]" />
+      </template>
+      <template #fallback>
+        <Loading />
+      </template>
+    </suspense>
+    <ThemeDrawer />
+  </el-watermark>
+</template>
+
+<script setup lang="ts" name="layoutAsync">
+import { computed, defineAsyncComponent, reactive, watch, type Component } from "vue";
+import { LayoutType } from "../stores/interface";
+import { useGlobalStore } from "../stores/modules/global";
+import { useConfigStore } from "../stores/modules/config";
+import Loading from "../components/Loading/index.vue";
+import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+
+const LayoutComponents: Record<LayoutType, Component> = {
+  vertical: defineAsyncComponent(() => import("./LayoutVertical/index.vue")),
+  classic: defineAsyncComponent(() => import("./LayoutClassic/index.vue")),
+  transverse: defineAsyncComponent(() => import("./LayoutTransverse/index.vue")),
+  columns: defineAsyncComponent(() => import("./LayoutColumns/index.vue"))
+};
+
+const globalStore = useGlobalStore();
+const configStore = useConfigStore();
+
+const isDark = computed(() => globalStore.isDark);
+const layout = computed(() => globalStore.layout);
+const watermark = computed(() => globalStore.watermark);
+const watermarkContent = computed(() => {
+  if (!watermark.value) return "";
+
+  const watermarkTextList = [configStore.display.sysName, configStore.display.watermark].filter(Boolean);
+  return watermarkTextList.length ? watermarkTextList : "";
+});
+
+const font = reactive({ color: "rgba(0, 0, 0, .15)" });
+watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
+  immediate: true
+});
+</script>
+
+<style scoped lang="scss">
+.layout {
+  min-width: 600px;
+}
+</style>