fred-admin 1.0.0__py3-none-any.whl

fred_admin/demo/modules/admin/frontend/src/components/ECharts/config/index.ts

@@ -0,0 +1,72 @@
+import * as echarts from "echarts/core";
+import { BarChart, LineChart, LinesChart, PieChart, ScatterChart, RadarChart, GaugeChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  PolarComponent,
+  GeoComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from "echarts/components";
+import { LabelLayout, UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import type {
+  BarSeriesOption,
+  LineSeriesOption,
+  LinesSeriesOption,
+  PieSeriesOption,
+  ScatterSeriesOption,
+  RadarSeriesOption,
+  GaugeSeriesOption
+} from "echarts/charts";
+import type {
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  DatasetComponentOption
+} from "echarts/components";
+import type { ComposeOption } from "echarts/core";
+import "echarts-liquidfill";
+
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | LinesSeriesOption
+  | PieSeriesOption
+  | RadarSeriesOption
+  | GaugeSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | ScatterSeriesOption
+>;
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  PolarComponent,
+  GeoComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  BarChart,
+  LineChart,
+  LinesChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  GaugeChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+export default echarts;

fred_admin/demo/modules/admin/frontend/src/components/ECharts/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="echarts" ref="chartRef" :style="echartsStyle" />
+</template>
+
+<script setup lang="ts" name="ECharts">
+import { ref, onMounted, onBeforeUnmount, watch, computed, markRaw, nextTick, onActivated } from "vue";
+import { EChartsType, ECElementEvent } from "echarts/core";
+import echarts, { ECOption } from "./config";
+import { useDebounceFn } from "@vueuse/core";
+import { useGlobalStore } from "@/stores/modules/global";
+import { storeToRefs } from "pinia";
+
+interface Props {
+  option: ECOption;
+  renderer?: "canvas" | "svg";
+  resize?: boolean;
+  theme?: object | string;
+  width?: number | string;
+  height?: number | string;
+  onClick?: (event: ECElementEvent) => any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  renderer: "canvas",
+  resize: true
+});
+
+const echartsStyle = computed(() => {
+  return props.width || props.height
+    ? { height: props.height + "px", width: props.width + "px" }
+    : { height: "100%", width: "100%" };
+});
+
+const chartRef = ref<HTMLDivElement | HTMLCanvasElement>();
+const chartInstance = ref<EChartsType>();
+
+const draw = () => {
+  if (chartInstance.value) {
+    chartInstance.value.setOption(props.option, { notMerge: true });
+  }
+};
+
+watch(props, () => {
+  draw();
+});
+
+const handleClick = (event: ECElementEvent) => props.onClick && props.onClick(event);
+
+const init = () => {
+  if (!chartRef.value) return;
+  chartInstance.value = echarts.getInstanceByDom(chartRef.value);
+
+  if (!chartInstance.value) {
+    chartInstance.value = markRaw(
+      echarts.init(chartRef.value, props.theme, {
+        renderer: props.renderer
+      })
+    );
+    chartInstance.value.on("click", handleClick);
+    draw();
+  }
+};
+
+const resize = () => {
+  if (chartInstance.value && props.resize) {
+    chartInstance.value.resize({ animation: { duration: 300 } });
+  }
+};
+
+const debouncedResize = useDebounceFn(resize, 300, { maxWait: 800 });
+
+const globalStore = useGlobalStore();
+const { maximize, isCollapse, tabs, footer } = storeToRefs(globalStore);
+
+watch(
+  () => [maximize, isCollapse, tabs, footer],
+  () => {
+    debouncedResize();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => init());
+  window.addEventListener("resize", debouncedResize);
+});
+
+onActivated(() => {
+  if (chartInstance.value) {
+    chartInstance.value.resize();
+  }
+});
+
+onBeforeUnmount(() => {
+  chartInstance.value?.dispose();
+  window.removeEventListener("resize", debouncedResize);
+});
+
+defineExpose({
+  getInstance: () => chartInstance.value,
+  resize,
+  draw
+});
+</script>

fred_admin/demo/modules/admin/frontend/src/components/ErrorMessage/403.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/403.png" class="not-img" alt="403" />
+    <div class="not-detail">
+      <h2>403</h2>
+      <h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>

fred_admin/demo/modules/admin/frontend/src/components/ErrorMessage/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/404.png" class="not-img" alt="404" />
+    <div class="not-detail">
+      <h2>404</h2>
+      <h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="404">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>

fred_admin/demo/modules/admin/frontend/src/components/ErrorMessage/500.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/500.png" class="not-img" alt="500" />
+    <div class="not-detail">
+      <h2>500</h2>
+      <h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="500">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>

fred_admin/demo/modules/admin/frontend/src/components/ErrorMessage/index.scss

@@ -0,0 +1,32 @@
+.not-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .not-img {
+    margin-right: 120px;
+  }
+  .not-detail {
+    display: flex;
+    flex-direction: column;
+    h2,
+    h4 {
+      padding: 0;
+      margin: 0;
+    }
+    h2 {
+      font-size: 60px;
+      color: var(--el-text-color-primary);
+    }
+    h4 {
+      margin: 30px 0 20px;
+      font-size: 19px;
+      font-weight: normal;
+      color: var(--el-text-color-regular);
+    }
+    .el-button {
+      width: 100px;
+    }
+  }
+}

fred_admin/demo/modules/admin/frontend/src/components/Grid/components/GridItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-show="isShow" :style="style">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts" name="GridItem">
+import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
+import { BreakPoint, Responsive } from "../interface/index";
+
+type Props = {
+  offset?: number;
+  span?: number;
+  suffix?: boolean;
+  xs?: Responsive;
+  sm?: Responsive;
+  md?: Responsive;
+  lg?: Responsive;
+  xl?: Responsive;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 0,
+  span: 1,
+  suffix: false,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+});
+
+const attrs = useAttrs() as { index: string };
+const isShow = ref(true);
+
+// 注入断点
+const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
+const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
+watch(
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  n => {
+    if (!!attrs.index) {
+      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
+    }
+  },
+  { immediate: true }
+);
+
+const gap = inject("gap", 0);
+const cols = inject("cols", ref(4));
+const style = computed(() => {
+  let span = props[breakPoint.value]?.span ?? props.span;
+  let offset = props[breakPoint.value]?.offset ?? props.offset;
+  if (props.suffix) {
+    return {
+      gridColumnStart: cols.value - span - offset + 1,
+      gridColumnEnd: `span ${span + offset}`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  } else {
+    return {
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+        span + offset > cols.value ? cols.value : span + offset
+      }`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  }
+});
+</script>

fred_admin/demo/modules/admin/frontend/src/components/Grid/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+import {
+  ref,
+  watch,
+  useSlots,
+  computed,
+  provide,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onDeactivated,
+  onActivated,
+  VNodeArrayChildren,
+  VNode
+} from "vue";
+import type { BreakPoint } from "./interface/index";
+
+type Props = {
+  cols?: number | Record<BreakPoint, number>;
+  collapsed?: boolean;
+  collapsedRows?: number;
+  gap?: [number, number] | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+  collapsed: false,
+  collapsedRows: 1,
+  gap: 0
+});
+
+onBeforeMount(() => props.collapsed && findIndex());
+onMounted(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onActivated(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", resize);
+});
+onDeactivated(() => {
+  window.removeEventListener("resize", resize);
+});
+
+// 监听屏幕变化
+const resize = (e: UIEvent) => {
+  let width = (e.target as Window).innerWidth;
+  switch (!!width) {
+    case width < 768:
+      breakPoint.value = "xs";
+      break;
+    case width >= 768 && width < 992:
+      breakPoint.value = "sm";
+      break;
+    case width >= 992 && width < 1200:
+      breakPoint.value = "md";
+      break;
+    case width >= 1200 && width < 1920:
+      breakPoint.value = "lg";
+      break;
+    case width >= 1920:
+      breakPoint.value = "xl";
+      break;
+  }
+};
+
+// 注入 gap 间距
+provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
+
+// 注入响应式断点
+let breakPoint = ref<BreakPoint>("xl");
+provide("breakPoint", breakPoint);
+
+// 注入要开始折叠的 index
+const hiddenIndex = ref(-1);
+provide("shouldHiddenIndex", hiddenIndex);
+
+// 注入 cols
+const gridCols = computed(() => {
+  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
+  return props.cols;
+});
+provide("cols", gridCols);
+
+// 寻找需要开始折叠的字段 index
+const slots = useSlots().default!();
+
+const findIndex = () => {
+  let fields: VNodeArrayChildren = [];
+  let suffix: VNode | null = null;
+  slots.forEach((slot: any) => {
+    // suffix
+    if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
+    // slot children
+    if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
+  });
+
+  // 计算 suffix 所占用的列
+  let suffixCols = 0;
+  if (suffix) {
+    suffixCols =
+      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
+  }
+  try {
+    let find = false;
+    fields.reduce((prev = 0, current, index) => {
+      prev +=
+        ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
+        ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
+      if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+        hiddenIndex.value = index;
+        find = true;
+        throw "find it";
+      }
+      return prev;
+    }, 0);
+    if (!find) hiddenIndex.value = -1;
+  } catch {
+    // console.warn(e);
+  }
+};
+
+// 断点变化时执行 findIndex
+watch(
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex();
+  }
+);
+
+// 监听 collapsed
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex();
+    hiddenIndex.value = -1;
+  }
+);
+
+// 设置间距
+const gridGap = computed(() => {
+  if (typeof props.gap === "number") return `${props.gap}px`;
+  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
+  return "unset";
+});
+
+// 设置 style
+const style = computed(() => {
+  return {
+    display: "grid",
+    gridGap: gridGap.value,
+    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
+  };
+});
+
+defineExpose({ breakPoint });
+</script>

fred_admin/demo/modules/admin/frontend/src/components/Grid/interface/index.ts

@@ -0,0 +1,6 @@
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type Responsive = {
+  span?: number;
+  offset?: number;
+};

fred_admin/demo/modules/admin/frontend/src/components/ImageCaptcha/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-form-item prop="captcha">
+    <el-input maxlength="4" placeholder="验证码" v-model="captcha" style="width: 50%; margin-right: 20px; font-size: 14px">
+      <template #prefix>
+        <el-icon :size="14"><Picture /></el-icon>
+      </template>
+    </el-input>
+    <div class="captcha-container" style="margin-top: 12px">
+      <img :src="captchaSrc" alt="验证码" @click="refreshCaptcha" :style="{ width, height }" />
+    </div>
+  </el-form-item>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { getImageCaptcha } from "@/api/modules/login";
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: "120px"
+  },
+  height: {
+    type: String,
+    default: "40px"
+  },
+  captchaCode: {
+    type: String,
+    default: ""
+  }
+});
+
+const emit = defineEmits(["update:captcha"]); // 定义一个事件，用于传递 captcha_code
+
+const captchaSrc = ref("");
+const captcha = ref(props.captchaCode); // 初始化 captcha_code
+
+// 监听 captcha_code 的变化，并通过 emit 通知父组件
+watch(captcha, newVal => {
+  emit("update:captcha", newVal);
+});
+
+// 刷新验证码的方法
+const refreshCaptcha = async () => {
+  try {
+    const res = await getImageCaptcha();
+    // 直接从响应中获取 Blob 数据
+    if (res instanceof Blob) {
+      captchaSrc.value = URL.createObjectURL(res);
+    }
+    captcha.value = ""; // 清空输入框中的验证码
+    emit("update:captcha", ""); // 同步清空父组件中的 captcha_code
+  } catch (err) {
+    console.error("获取验证码失败", err);
+  }
+};
+// 清空验证码输入框
+const clearCaptcha = () => {
+  captcha.value = "";
+  emit("update:captcha", ""); // 更新v-model绑定的值
+};
+
+// 暴露 refreshCaptcha 方法给父组件
+defineExpose({
+  refreshCaptcha,
+  clearCaptcha
+});
+
+// 初始化验证码
+refreshCaptcha();
+</script>

fred_admin/demo/modules/admin/frontend/src/components/ImportExcel/index.scss

@@ -0,0 +1,3 @@
+.upload {
+  width: 80%;
+}