fred-admin 1.0.0__py3-none-any.whl

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

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

@@ -0,0 +1,42 @@
+<!-- 💥 这里是一次性加载 LayoutComponents -->
+<template>
+  <el-watermark id="watermark" :font="font" :content="watermark ? ['Geeker Admin', 'Happy Working'] : ''">
+    <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 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 isDark = computed(() => globalStore.isDark);
+const layout = computed(() => globalStore.layout);
+const watermark = computed(() => globalStore.watermark);
+
+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>

fred_admin/demo/modules/admin/frontend/src/layouts/indexAsync.vue

@@ -0,0 +1,46 @@
+<!-- 💥 这里是异步加载 LayoutComponents -->
+<template>
+  <el-watermark id="watermark" :font="font" :content="watermark ? ['Geeker Admin', 'Happy Working'] : ''">
+    <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 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 isDark = computed(() => globalStore.isDark);
+const layout = computed(() => globalStore.layout);
+const watermark = computed(() => globalStore.watermark);
+
+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>

fred_admin/demo/modules/admin/frontend/src/main.ts

@@ -0,0 +1,45 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+// reset style sheet
+import "@/styles/reset.scss";
+// CSS common style sheet
+import "@/styles/common.scss";
+// iconfont css
+import "@/assets/iconfont/iconfont.scss";
+// font css
+import "@/assets/fonts/font.scss";
+// element css
+import "element-plus/dist/index.css";
+// element dark css
+import "element-plus/theme-chalk/dark/css-vars.css";
+// custom element dark css
+import "@/styles/element-dark.scss";
+// custom element css
+import "@/styles/element.scss";
+// svg icons
+import "virtual:svg-icons-register";
+// element plus
+import ElementPlus from "element-plus";
+// element icons
+import * as Icons from "@element-plus/icons-vue";
+// custom directives
+import directives from "@/directives/index";
+// vue Router
+import router from "@/routers";
+// vue i18n
+import I18n from "@/languages/index";
+// pinia store
+import pinia from "@/stores";
+// errorHandler
+import errorHandler from "@/utils/errorHandler";
+
+const app = createApp(App);
+
+app.config.errorHandler = errorHandler;
+
+// register the element Icons component
+Object.keys(Icons).forEach(key => {
+  app.component(key, Icons[key as keyof typeof Icons]);
+});
+
+app.use(ElementPlus).use(directives).use(router).use(I18n).use(pinia).mount("#app");

fred_admin/demo/modules/admin/frontend/src/routers/index.ts

@@ -0,0 +1,106 @@
+import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
+import { useUserStore } from "@/stores/modules/user";
+import { useAuthStore } from "@/stores/modules/auth";
+import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config";
+import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
+import { staticRouter, errorRouter } from "@/routers/modules/staticRouter";
+import NProgress from "@/config/nprogress";
+
+const mode = import.meta.env.VITE_ROUTER_MODE;
+
+const routerMode = {
+  hash: () => createWebHashHistory(),
+  history: () => createWebHistory()
+};
+
+/**
+ * @description 📚 路由参数配置简介
+ * @param path ==> 路由菜单访问路径
+ * @param name ==> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
+ * @param redirect ==> 路由重定向地址
+ * @param component ==> 视图文件路径
+ * @param meta ==> 路由菜单元信息
+ * @param meta.icon ==> 菜单和面包屑对应的图标
+ * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
+ * @param meta.activeMenu ==> 当前路由为详情页时，需要高亮的菜单
+ * @param meta.isLink ==> 路由外链时填写的访问地址
+ * @param meta.isHide ==> 是否在菜单中隐藏 (通常列表详情页需要隐藏)
+ * @param meta.isFull ==> 菜单是否全屏 (示例：数据大屏页面)
+ * @param meta.isAffix ==> 菜单是否固定在标签页中 (首页通常是固定项)
+ * @param meta.isKeepAlive ==> 当前路由是否缓存
+ * */
+const router = createRouter({
+  history: routerMode[mode](),
+  routes: [...staticRouter, ...errorRouter],
+  strict: false,
+  scrollBehavior: () => ({ left: 0, top: 0 })
+});
+
+/**
+ * @description 路由拦截 beforeEach
+ * */
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore();
+  const authStore = useAuthStore();
+
+  // 1.NProgress 开始
+  NProgress.start();
+
+  // 2.动态设置标题
+  const title = import.meta.env.VITE_GLOB_APP_TITLE;
+  document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
+
+  // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由到登陆页
+  if (to.path.toLocaleLowerCase() === LOGIN_URL) {
+    if (userStore.token) return next(from.fullPath);
+    resetRouter();
+    return next();
+  }
+
+  // 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
+  if (ROUTER_WHITE_LIST.includes(to.path)) return next();
+
+  // 5.判断是否有 Token，没有重定向到 login 页面
+  if (!userStore.token) return next({ path: LOGIN_URL, replace: true });
+
+  // 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
+  if (!authStore.authMenuListGet.length) {
+    await initDynamicRouter();
+    return next({ ...to, replace: true });
+  }
+
+  // 7.存储 routerName 和 menuName 做按钮权限筛选
+  authStore.setRouteName(to.name as string);
+  authStore.setMenuName((to.meta?.title as string) || "");
+
+  // 8.正常访问页面
+  next();
+});
+
+/**
+ * @description 重置路由
+ * */
+export const resetRouter = () => {
+  const authStore = useAuthStore();
+  authStore.flatMenuListGet.forEach(route => {
+    const { name } = route;
+    if (name && router.hasRoute(name)) router.removeRoute(name);
+  });
+};
+
+/**
+ * @description 路由跳转错误
+ * */
+router.onError(error => {
+  NProgress.done();
+  console.warn("路由错误", error.message);
+});
+
+/**
+ * @description 路由跳转结束
+ * */
+router.afterEach(() => {
+  NProgress.done();
+});
+
+export default router;

fred_admin/demo/modules/admin/frontend/src/routers/modules/dynamicRouter.ts

@@ -0,0 +1,99 @@
+import { LOGIN_URL } from "@/config";
+import router from "@/routers/index";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useUserStore } from "@/stores/modules/user";
+import { ElNotification } from "element-plus";
+import { RouteRecordRaw } from "vue-router";
+
+// 引入 views 文件夹下所有 vue 文件
+const modules = import.meta.glob("@/views/**/*.vue");
+
+/**
+ * @description 初始化动态路由
+ */
+export const initDynamicRouter = async () => {
+  const userStore = useUserStore();
+  const authStore = useAuthStore();
+
+  try {
+    // 1.获取菜单列表 && 按钮权限列表
+    await authStore.getAuthMenuList();
+    await authStore.getAuthButtonList();
+
+    // 2.判断当前用户有没有菜单权限
+    if (!authStore.authMenuListGet.length) {
+      ElNotification({
+        title: "无权限访问",
+        message: "当前账号无任何菜单权限，请联系系统管理员！",
+        type: "warning",
+        duration: 3000
+      });
+      userStore.setToken("");
+      router.replace(LOGIN_URL);
+      return Promise.reject("No permission");
+    }
+
+    // 3.添加动态路由
+    authStore.flatMenuListGet.forEach(item => {
+      if (item.children) {
+        delete item.children;
+      }
+      if (item.component && typeof item.component == "string") {
+        item.component = modules["/src/views" + item.component + ".vue"];
+      }
+      if (item.meta.isFull) {
+        router.addRoute(item as unknown as RouteRecordRaw);
+      } else {
+        router.addRoute("layout", item as unknown as RouteRecordRaw);
+      }
+    });
+
+    // 4.手动添加模型日志页面路由（如果不存在）
+    // 检查是否已存在modelManage/log的路由
+    const hasModelLogRoute = router.hasRoute("modelManage/log");
+    if (!hasModelLogRoute) {
+      const modelLogRoute: RouteRecordRaw = {
+        path: "/modelManage/log",
+        name: "modelManage/log",
+        component: modules["/src/views/modelManage/log.vue"],
+        meta: {
+          title: "模型日志",
+          icon: "el-icon-document",
+          isLink: "",
+          isHide: false,
+          isFull: false,
+          isAffix: false,
+          isKeepAlive: true
+        }
+      };
+      router.addRoute("layout", modelLogRoute);
+    }
+
+    // 5.手动添加素材图片预览页面路由（如果不存在）
+    // 检查是否已存在materialImages的路由
+    const hasMaterialImagesRoute = router.hasRoute("materialImages");
+    if (!hasMaterialImagesRoute) {
+      const materialImagesRoute: RouteRecordRaw = {
+        path: "/annotation/material-images",
+        name: "materialImages",
+        component: modules["/src/views/annotation/materialImages.vue"],
+        meta: {
+          title: "查看素材",
+          icon: "el-icon-picture",
+          isLink: "",
+          isHide: true,
+          isFull: false,
+          isAffix: false,
+          isKeepAlive: true,
+          activeMenu: "/annotation"
+        }
+      };
+      router.addRoute("layout", materialImagesRoute);
+    }
+  } catch (error) {
+    // 当按钮 || 菜单请求出错时，重定向到登陆页
+    userStore.setToken("");
+    router.replace(LOGIN_URL);
+    return Promise.reject(error);
+  }
+};

fred_admin/demo/modules/admin/frontend/src/routers/modules/staticRouter.ts

@@ -0,0 +1,63 @@
+import { RouteRecordRaw } from "vue-router";
+import { HOME_URL, LOGIN_URL } from "@/config";
+
+/**
+ * staticRouter (静态路由)
+ */
+export const staticRouter: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: HOME_URL
+  },
+  {
+    path: LOGIN_URL,
+    name: "login",
+    component: () => import("@/views/login/index.vue"),
+    meta: {
+      title: "登录"
+    }
+  },
+  {
+    path: "/layout",
+    name: "layout",
+    component: () => import("@/layouts/index.vue"),
+    // component: () => import("@/layouts/indexAsync.vue"),
+    redirect: HOME_URL,
+    children: []
+  }
+];
+
+/**
+ * errorRouter (错误页面路由)
+ */
+export const errorRouter = [
+  {
+    path: "/403",
+    name: "403",
+    component: () => import("@/components/ErrorMessage/403.vue"),
+    meta: {
+      title: "403页面"
+    }
+  },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/components/ErrorMessage/404.vue"),
+    meta: {
+      title: "404页面"
+    }
+  },
+  {
+    path: "/500",
+    name: "500",
+    component: () => import("@/components/ErrorMessage/500.vue"),
+    meta: {
+      title: "500页面"
+    }
+  },
+  // Resolve refresh page, route warnings
+  {
+    path: "/:pathMatch(.*)*",
+    component: () => import("@/components/ErrorMessage/404.vue")
+  }
+];

fred_admin/demo/modules/admin/frontend/src/stores/helper/persist.ts

@@ -0,0 +1,19 @@
+import { PersistedStateOptions } from "pinia-plugin-persistedstate";
+
+/**
+ * @description pinia 持久化参数配置
+ * @param {String} key 存储到持久化的 name
+ * @param {Array} paths 需要持久化的 state name
+ * @return persist
+ * */
+const piniaPersistConfig = (key: string, paths?: string[]) => {
+  const persist: PersistedStateOptions = {
+    key,
+    storage: localStorage,
+    // storage: sessionStorage,
+    paths
+  };
+  return persist;
+};
+
+export default piniaPersistConfig;

fred_admin/demo/modules/admin/frontend/src/stores/index.ts

@@ -0,0 +1,8 @@
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+// pinia persist
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+export default pinia;

fred_admin/demo/modules/admin/frontend/src/stores/interface/index.ts

@@ -0,0 +1,63 @@
+export type LayoutType = "vertical" | "classic" | "transverse" | "columns";
+
+export type AssemblySizeType = "large" | "default" | "small";
+
+export type LanguageType = "zh" | "en" | null;
+
+/* GlobalState */
+export interface GlobalState {
+  layout: LayoutType;
+  assemblySize: AssemblySizeType;
+  language: LanguageType;
+  maximize: boolean;
+  primary: string;
+  isDark: boolean;
+  isGrey: boolean;
+  isWeak: boolean;
+  asideInverted: boolean;
+  headerInverted: boolean;
+  isCollapse: boolean;
+  accordion: boolean;
+  watermark: boolean;
+  breadcrumb: boolean;
+  breadcrumbIcon: boolean;
+  tabs: boolean;
+  tabsIcon: boolean;
+  footer: boolean;
+}
+
+/* UserState */
+export interface UserState {
+  token: string;
+  userInfo: { name: string };
+}
+
+/* tabsMenuProps */
+export interface TabsMenuProps {
+  icon: string;
+  title: string;
+  path: string;
+  name: string;
+  close: boolean;
+  isKeepAlive: boolean;
+}
+
+/* TabsState */
+export interface TabsState {
+  tabsMenuList: TabsMenuProps[];
+}
+
+/* AuthState */
+export interface AuthState {
+  routeName: string;
+  menuName: string;
+  authButtonList: {
+    [key: string]: string[];
+  };
+  authMenuList: Menu.MenuOptions[];
+}
+
+/* KeepAliveState */
+export interface KeepAliveState {
+  keepAliveName: string[];
+}