fred-admin 1.0.0__py3-none-any.whl

fred_admin/demo/modules/admin/frontend/src/layouts/components/Header/components/ThemeSetting.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="theme-setting">
+    <i :class="'iconfont icon-zhuti'" class="toolBar-icon" @click="openDrawer"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+import mittBus from "@/utils/mittBus";
+const openDrawer = () => {
+  mittBus.emit("openThemeDrawer");
+};
+</script>

fred_admin/demo/modules/admin/frontend/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>

fred_admin/demo/modules/admin/frontend/src/layouts/components/Main/index.scss

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

fred_admin/demo/modules/admin/frontend/src/layouts/components/Main/index.vue

@@ -0,0 +1,88 @@
+<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;
+  let wrapper = wrapperMap.get(wrapperName);
+  if (!wrapper) {
+    wrapper = { name: wrapperName, render: () => h(component) };
+    wrapperMap.set(wrapperName, wrapper);
+  }
+  return h(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";
+</style>

fred_admin/demo/modules/admin/frontend/src/layouts/components/Menu/SubMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <template v-for="subItem in menuList" :key="subItem.path">
+    <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
+      <template #title>
+        <el-icon v-if="subItem.meta.icon">
+          <component :is="subItem.meta.icon"></component>
+        </el-icon>
+        <span class="sle">{{ subItem.meta.title }}</span>
+      </template>
+      <SubMenu :menu-list="subItem.children" />
+    </el-sub-menu>
+    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
+      <el-icon v-if="subItem.meta.icon">
+        <component :is="subItem.meta.icon"></component>
+      </el-icon>
+      <template #title>
+        <span class="sle">{{ subItem.meta.title }}</span>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+defineProps<{ menuList: Menu.MenuOptions[] }>();
+
+const router = useRouter();
+const handleClickMenu = (subItem: Menu.MenuOptions) => {
+  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
+  router.push(subItem.path);
+};
+</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>

fred_admin/demo/modules/admin/frontend/src/layouts/components/Tabs/components/MoreButton.vue

@@ -0,0 +1,85 @@
+<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>{{ $t("tabs.refresh") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="maximize">
+          <el-icon><FullScreen /></el-icon>{{ $t("tabs.maximize") }}
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="closeCurrentTab">
+          <el-icon><Remove /></el-icon>{{ $t("tabs.closeCurrent") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'left')">
+          <el-icon><DArrowLeft /></el-icon>{{ $t("tabs.closeLeft") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'right')">
+          <el-icon><DArrowRight /></el-icon>{{ $t("tabs.closeRight") }}
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="tabStore.closeMultipleTab(route.fullPath)">
+          <el-icon><CircleClose /></el-icon>{{ $t("tabs.closeOther") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="closeAllTab">
+          <el-icon><FolderDelete /></el-icon>{{ $t("tabs.closeAll") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { inject, nextTick } from "vue";
+import { HOME_URL } from "@/config";
+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();
+
+// refresh current page
+const refreshCurrentPage = inject<(val: boolean) => void>("refresh");
+const refresh = () => {
+  setTimeout(() => {
+    if (route.meta.isKeepAlive) {
+      keepAliveStore.removeKeepAliveName(route.fullPath as string);
+    }
+    refreshCurrentPage?.(false);
+    nextTick(() => {
+      if (route.meta.isKeepAlive) {
+        keepAliveStore.addKeepAliveName(route.fullPath as string);
+      }
+      refreshCurrentPage(true);
+    });
+  }, 0);
+};
+
+// maximize current page
+const maximize = () => {
+  globalStore.setGlobalState("maximize", true);
+};
+
+// Close Current
+const closeCurrentTab = () => {
+  if (route.meta.isAffix) return;
+  tabStore.removeTabs(route.fullPath);
+};
+
+// Close All
+const closeAllTab = () => {
+  tabStore.closeMultipleTab();
+  router.push(HOME_URL);
+};
+</script>
+
+<style scoped lang="scss">
+@use "../index";
+</style>

fred_admin/demo/modules/admin/frontend/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;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

fred_admin/demo/modules/admin/frontend/src/layouts/components/Tabs/index.vue

@@ -0,0 +1,115 @@
+<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, nextTick } 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 MoreButton from "./components/MoreButton.vue";
+
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+
+const tabsMenuValue = ref(route.fullPath);
+const tabsMenuList = computed(() => tabStore.tabsMenuList);
+const tabsIcon = computed(() => globalStore.tabsIcon);
+
+onMounted(() => {
+  tabsDrop();
+  initTabs();
+});
+
+// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
+watch(
+  () => route.fullPath,
+  () => {
+    if (route.meta.isFull) return;
+    tabsMenuValue.value = route.fullPath;
+    const tabsParams = {
+      icon: route.meta.icon as string,
+      title: route.meta.title as string,
+      path: route.fullPath,
+      name: route.name as string,
+      close: !route.meta.isAffix,
+      isKeepAlive: route.meta.isKeepAlive as boolean
+    };
+    tabStore.addTabs(tabsParams);
+  },
+  { immediate: true }
+);
+
+// 初始化需要固定的 tabs
+const initTabs = () => {
+  authStore.flatMenuListGet.forEach(item => {
+    if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
+      const tabsParams = {
+        icon: item.meta.icon,
+        title: item.meta.title,
+        path: item.path,
+        name: item.name,
+        close: !item.meta.isAffix,
+        isKeepAlive: item.meta.isKeepAlive
+      };
+      tabStore.addTabs(tabsParams);
+    }
+  });
+};
+
+// tabs 拖拽排序
+const tabsDrop = () => {
+  nextTick(() => {
+    const tabsNav = document.querySelector(".el-tabs__nav") as HTMLElement;
+    if (!tabsNav) {
+      console.warn("Tabs: .el-tabs__nav element not found");
+      return;
+    }
+    Sortable.create(tabsNav, {
+      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 == route.fullPath);
+};
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>

fred_admin/demo/modules/admin/frontend/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%;
+    }
+  }
+}