y-admin-pro 0.0.1

package/packages/ele-watermark/index.vue

@@ -0,0 +1,261 @@
+<!-- 水印 -->
+<template>
+  <div
+    ref="rootRef"
+    :key="rootKey"
+    :style="!wrapPosition || fixed ? void 0 : { position: 'relative' }"
+  >
+    <slot></slot>
+    <div v-if="!disabled || forceRender" ref="imgRef" :style="imgStyle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { Ref } from 'vue';
+  import { ref, onMounted, watch, inject, computed, nextTick } from 'vue';
+  import type { StyleValue } from '../ele-app/types';
+  import {
+    getFont,
+    getGap,
+    getPixelRatio,
+    rotateWatermark,
+    USR_KEY,
+    joinStyle,
+    useMutation
+  } from './util';
+  import { watermarkProps } from './props';
+
+  defineOptions({ name: 'EleWatermark' });
+
+  const props = defineProps(watermarkProps);
+
+  const SIZE = 2;
+
+  const { observe, disconnect } = useMutation({
+    getRoot: () => rootRef.value,
+    getEl: () => imgRef.value,
+    onDeleted: () => {
+      disconnect();
+      rootKey.value = rootKey.value + 1;
+      nextTick(() => {
+        render();
+      });
+    },
+    onDalsified: () => {
+      render();
+    }
+  });
+
+  /** 用于重新渲染根节点 */
+  const rootKey = ref(1);
+
+  /** 根节点 */
+  const rootRef = ref<HTMLDivElement | null>(null);
+
+  /** 水印节点 */
+  const imgRef = ref<HTMLDivElement | null>(null);
+
+  /** 水印样式 */
+  const imgStyle: Ref<StyleValue> = ref<StyleValue>({ display: 'none' });
+
+  /** 设置并冻结水印样式 */
+  const updateStyle = (base64?: string, size?: string) => {
+    const position = props.fixed ? 'fixed' : 'absolute';
+    const width = props.fixed ? '100vw' : '100%';
+    const height = props.fixed ? '100vh' : '100%';
+    const style: StyleValue = {
+      position: `${position} !important` as any,
+      top: '0 !important',
+      left: '0 !important',
+      right: 'auto !important',
+      bottom: 'auto !important',
+      width: `${width} !important`,
+      height: `${height} !important`,
+      pointerEvents: 'none !important' as any,
+      backgroundRepeat: 'repeat !important',
+      opacity: '1 !important',
+      transform: 'none !important',
+      filter: 'none !important',
+      visibility: 'visible !important' as any,
+      transition: 'none !important',
+      maxWidth: 'none !important',
+      maxHeight: 'none !important',
+      zoom: '1 !important',
+      mask: 'none !important',
+      clipPath: 'none !important',
+      display: 'block !important',
+      ...(props.customStyle || {})
+    };
+    if (!base64) {
+      style.display = 'none !important';
+    } else {
+      style.backgroundImage = `url('${base64}') !important`;
+      if (size) {
+        style.backgroundSize = `${size} !important`;
+      }
+      style.zIndex = `${props.zIndex ?? 2147483647} !important` as any;
+    }
+    disconnect();
+    if (imgRef.value && imgRef.value.style && imgRef.value.style.cssText) {
+      imgRef.value.style.cssText = joinStyle(style);
+      observe();
+    } else {
+      imgStyle.value = style;
+      nextTick(() => {
+        observe();
+      });
+    }
+  };
+  const usrResult = inject(USR_KEY, void 0);
+
+  /** 获取默认宽度 */
+  const getDefaultWidth = (ctx: CanvasRenderingContext2D) => {
+    if (props.image || !ctx.measureText) {
+      return 120;
+    }
+    const content = props.content;
+    const contents = Array.isArray(content) ? content : [content];
+    const widths = contents.map((item) => ctx.measureText(item!).width);
+    return Math.ceil(Math.max(...widths));
+  };
+
+  /** 获取默认高度 */
+  const getDefaultHeight = (ctx: CanvasRenderingContext2D) => {
+    if (props.image || !ctx.measureText) {
+      return 64;
+    }
+    const lines = Array.isArray(props.content) ? props.content.length : 1;
+    const { fontSize } = getFont(props.font);
+    return fontSize * lines + (lines - 1) * props.lineGap;
+  };
+
+  /** 获取水印尺寸 */
+  const getMarkSize = (ctx: CanvasRenderingContext2D) => {
+    const width = props.width;
+    const height = props.height;
+    return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
+  };
+  const forceRender = computed(() => {
+    if (usrResult && !usrResult.forbidden) {
+      return true;
+    }
+    return false;
+  });
+
+  /** 绘制文本 */
+  const fillTexts = (
+    ctx: CanvasRenderingContext2D,
+    drawX: number,
+    drawY: number,
+    drawWidth: number,
+    drawHeight: number
+  ) => {
+    const ratio = getPixelRatio();
+    const { color, fontSize, fontStyle, fontWeight, fontFamily } = getFont(
+      props.font
+    );
+    const mergedFontSize = fontSize * ratio;
+    ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'top';
+    ctx.translate(drawWidth / 2, 0);
+    const content = props.content;
+    const contents = forceRender.value
+      ? [
+          `e${'sulp nimda el'.split('').reduce((n, m) => m + n, '')}`.toUpperCase()
+        ]
+      : Array.isArray(content)
+        ? content
+        : content == null
+          ? []
+          : [content];
+    contents.forEach((item, index) => {
+      ctx.fillText(
+        item ?? '',
+        drawX,
+        drawY + index * (mergedFontSize + props.lineGap * ratio)
+      );
+    });
+  };
+
+  /** 渲染 */
+  const render = () => {
+    if (props.disabled && !forceRender.value) {
+      disconnect();
+      imgStyle.value = { display: 'none' };
+      return;
+    }
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    const rotate = props.rotate ?? -22;
+
+    if (!props.image && ctx.measureText != null) {
+      const { fontSize, fontFamily } = getFont(props.font);
+      ctx.font = `${fontSize}px ${fontFamily}`;
+    }
+
+    const [markWidth, markHeight] = getMarkSize(ctx);
+    const ratio = getPixelRatio();
+    const [gapX, gapY] = getGap(props.gap);
+    const canvasWidth = (gapX + markWidth) * ratio;
+    const canvasHeight = (gapY + markHeight) * ratio;
+    canvas.setAttribute('width', `${canvasWidth * SIZE}px`);
+    canvas.setAttribute('height', `${canvasHeight * SIZE}px`);
+
+    const drawWidth = markWidth * ratio;
+    const drawHeight = markHeight * ratio;
+    const rotateX = (drawWidth + gapX * ratio) / 2;
+    const rotateY = (drawHeight + gapY * ratio) / 2;
+    ctx.save();
+    rotateWatermark(ctx, rotateX, rotateY, rotate);
+
+    // 绘制内容
+    const drawX = (gapX * ratio) / 2;
+    const drawY = (gapY * ratio) / 2;
+    const alternateDrawX = drawX + canvasWidth;
+    const alternateDrawY = drawY + canvasHeight;
+    const alternateRotateX = rotateX + canvasWidth;
+    const alternateRotateY = rotateY + canvasHeight;
+    if (props.image) {
+      const img = new Image();
+      img.onload = () => {
+        ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+        ctx.restore();
+        rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+        ctx.drawImage(
+          img,
+          alternateDrawX,
+          alternateDrawY,
+          drawWidth,
+          drawHeight
+        );
+        updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+      };
+      img.crossOrigin = 'anonymous';
+      img.referrerPolicy = 'no-referrer';
+      img.src = props.image;
+    } else {
+      fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
+      ctx.restore();
+      rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+      fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
+      updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+    }
+  };
+
+  onMounted(() => {
+    render();
+  });
+
+  watch(
+    [() => props, forceRender],
+    () => {
+      render();
+    },
+    { deep: true }
+  );
+</script>

package/packages/ele-watermark/props.ts

@@ -0,0 +1,42 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { WatermarkGap, WatermarkOffset, WatermarkFont } from './types';
+
+export const watermarkProps = {
+  /** 宽度 */
+  width: Number,
+  /** 高度 */
+  height: Number,
+  /** 旋转角度 */
+  rotate: Number,
+  /** 层级 */
+  zIndex: Number,
+  /** 图片源 */
+  image: String,
+  /** 文字内容 */
+  content: [String, Array] as PropType<string | string[]>,
+  /** 文字样式 */
+  font: Object as PropType<WatermarkFont>,
+  /** 间距 */
+  gap: Array as unknown as PropType<WatermarkGap>,
+  /** 距离左上角的偏移量 */
+  offset: Array as unknown as PropType<WatermarkOffset>,
+  /** 多行水印的行间距 */
+  lineGap: {
+    type: Number,
+    default: 3
+  },
+  /** 自定义样式 */
+  customStyle: Object as PropType<Exclude<StyleValue, string>>,
+  /** 是否使用固定定位 */
+  fixed: Boolean,
+  /** 是否为外层添加定位样式 */
+  wrapPosition: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否禁用 */
+  disabled: Boolean
+};
+
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/packages/ele-watermark/style/index.ts

@@ -0,0 +1 @@
+//

package/packages/ele-watermark/types.ts

@@ -0,0 +1,39 @@
+/**
+ * 间距
+ */
+export type WatermarkGap = [number, number];
+
+/**
+ * 偏移量
+ */
+export type WatermarkOffset = [number, number];
+
+/**
+ * 文字样式
+ */
+export interface WatermarkFont {
+  /** 字体颜色 */
+  color?: string;
+  /** 字体大小 */
+  fontSize?: number;
+  /** 字体粗细 */
+  fontWeight?: 'normal' | 'light' | 'weight' | number;
+  /** 字体样式 */
+  fontFamily?: string;
+  /** 字体类型 */
+  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+}
+
+/**
+ * 水印篡改观测参数
+ */
+export interface MutationOption {
+  /** 获取根节点 */
+  getRoot: () => HTMLElement | null;
+  /** 获取水印节点 */
+  getEl: () => HTMLElement | null;
+  /** 水印被删除回调 */
+  onDeleted: () => void;
+  /** 水印样式被篡改回调 */
+  onDalsified: () => void;
+}

package/packages/ele-watermark/util.ts

@@ -0,0 +1,117 @@
+import { onBeforeUnmount } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import { STR_KEY as USR_KEY } from '../utils/common';
+import type { WatermarkGap, WatermarkFont, MutationOption } from './types';
+export { USR_KEY };
+
+/**
+ * 获取文字样式
+ */
+export function getFont(font?: WatermarkFont): Required<WatermarkFont> {
+  const style: Required<WatermarkFont> = {
+    color: 'rgba(122, 122, 122, .35)',
+    fontSize: 16,
+    fontWeight: 'normal',
+    fontFamily: 'sans-serif',
+    fontStyle: 'normal'
+  };
+  return Object.assign(style, font);
+}
+
+/**
+ * 获取间距
+ */
+export function getGap(gap?: WatermarkGap) {
+  const [gapX, gapY] = gap ?? [];
+  return [gapX ?? 100, gapY ?? 100];
+}
+
+/**
+ * 返回设备像素密度
+ */
+export function getPixelRatio() {
+  return window.devicePixelRatio || 1;
+}
+
+/**
+ * 旋转水印
+ */
+export function rotateWatermark(
+  ctx: CanvasRenderingContext2D,
+  rotateX: number,
+  rotateY: number,
+  rotate: number
+) {
+  try {
+    ctx.translate(rotateX, rotateY);
+    ctx.rotate((Math.PI / 180) * Number(rotate));
+    ctx.translate(-rotateX, -rotateY);
+  } catch (e) {
+    console.error(e, USR_KEY);
+  }
+}
+
+/**
+ * 样式对象转字符串
+ * @param style 样式
+ */
+export function joinStyle(style: StyleValue) {
+  const result = Object.keys(style).map((key) => {
+    const name = key
+      .replace(/([A-Z])/g, ' $1')
+      .trim()
+      .split(' ')
+      .join('-')
+      .toLowerCase();
+    return `${name}:${style[key]}`;
+  });
+  return result.join(';');
+}
+
+/**
+ * 水印篡改观测
+ */
+export function useMutation(option: MutationOption) {
+  const { getRoot, getEl, onDeleted, onDalsified } = option;
+  /** 节点删除观测器 */
+  const deletedObserver = new MutationObserver((mutations) => {
+    const el = getEl();
+    mutations.forEach((mutation) => {
+      if (
+        mutation.type === 'childList' &&
+        Array.from(mutation.removedNodes).some((n) => n === el)
+      ) {
+        onDeleted();
+      }
+    });
+  });
+
+  /** 样式篡改观测器 */
+  const falsifiedObserver = new MutationObserver(() => {
+    onDalsified();
+  });
+
+  /** 开始观测 */
+  const observe = () => {
+    const el = getEl();
+    if (el) {
+      falsifiedObserver.observe(el, { attributes: true });
+    }
+    const root = getRoot();
+    if (root) {
+      deletedObserver.observe(root, { childList: true });
+    }
+  };
+
+  /** 结束观测 */
+  const disconnect = () => {
+    falsifiedObserver.disconnect();
+    deletedObserver.disconnect();
+  };
+
+  onBeforeUnmount(() => {
+    disconnect();
+  });
+
+  return { observe, disconnect };
+}

package/packages/ele-xg-player/index.vue

@@ -0,0 +1,68 @@
+<!-- 视频播放器 -->
+<template>
+  <div ref="rootRef"></div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+  import Player from 'xgplayer';
+  import type { IPlayerOptions } from 'xgplayer';
+
+  defineOptions({ name: 'EleXgPlayer' });
+
+  const props = defineProps({
+    config: {
+      type: Object as PropType<IPlayerOptions>,
+      required: true
+    }
+  });
+
+  const emit = defineEmits({
+    player: (_player: Player | null) => true
+  });
+
+  /** 播放器实例 */
+  let player: Player | null = null;
+
+  /** 根节点 */
+  const rootRef = ref<HTMLDivElement | null>(null);
+
+  /** 初始化 */
+  const init = () => {
+    destroy();
+    if (rootRef.value && props.config?.url) {
+      player = new Player(
+        Object.assign({}, props.config, { el: rootRef.value })
+      );
+      emit('player', player);
+    }
+  };
+
+  /** 销毁 */
+  const destroy = () => {
+    if (player && typeof player.destroy === 'function') {
+      player.destroy();
+      player = null;
+    }
+  };
+
+  onMounted(() => {
+    init();
+  });
+
+  onBeforeUnmount(() => {
+    destroy();
+  });
+
+  watch(
+    () => props.config,
+    () => {
+      init();
+    }
+  );
+
+  defineExpose({
+    player
+  });
+</script>

package/packages/ele-xg-player/style/index.ts

@@ -0,0 +1 @@
+import 'xgplayer/dist/index.min.css';

package/packages/icons/AnalysisOutlined.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linejoin="round"
+  >
+    <path d="M0.3 7H47.7M6 7V34H42V7M19 34 12 45M29 34 36 45" />
+    <path d="M16 22V27" />
+    <path d="M24 18V27" />
+    <path d="M32 14V27" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'AnalysisOutlined' });
+</script>

package/packages/icons/ApplicationOutlined.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg viewBox="0 0 48 48" fill="currentColor">
+    <circle cx="9" cy="9" r="4" />
+    <circle cx="9" cy="24" r="4" />
+    <circle cx="9" cy="39" r="4" />
+    <circle cx="24" cy="9" r="4" />
+    <circle cx="24" cy="24" r="4" />
+    <circle cx="24" cy="39" r="4" />
+    <circle cx="39" cy="9" r="4" />
+    <circle cx="39" cy="24" r="4" />
+    <circle cx="39" cy="39" r="4" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'ApplicationOutlined' });
+</script>

package/packages/icons/AppstoreAddOutlined.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+  >
+    <path
+      d="M18 6H8C7 6 6 7 6 8V18C6 19 7 20 8 20H18C19 20 20 19 20 18V8C20 7 19 6 18 6Z"
+    />
+    <path
+      d="M40 6H30C29 6 28 7 28 8V18C28 19 29 20 30 20H40C41 20 42 19 42 18V8C42 7 41 6 40 6Z"
+    />
+    <path
+      d="M40 28H30C29 28 28 29 28 30V40C28 41 29 42 30 42H40C41 42 42 41 42 40V30C42 29 41 28 40 28Z"
+    />
+    <path d="M12 27V45M3 36H21" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'AppstoreAddOutlined' });
+</script>

package/packages/icons/AppstoreOutlined.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+  >
+    <path
+      d="M18 6H8C7 6 6 7 6 8V18C6 19 7 20 8 20H18C19 20 20 19 20 18V8C20 7 19 6 18 6Z"
+    />
+    <path
+      d="M40 6H30C29 6 28 7 28 8V18C28 19 29 20 30 20H40C41 20 42 19 42 18V8C42 7 41 6 40 6Z"
+    />
+    <path
+      d="M40 28H30C29 28 28 29 28 30V40C28 41 29 42 30 42H40C41 42 42 41 42 40V30C42 29 41 28 40 28Z"
+    />
+    <path
+      d="M18 28H8C7 28 6 29 6 30V40C6 41 7 42 8 42H18C19 42 20 41 20 40V30C20 29 19 28 18 28Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'AppstoreOutlined' });
+</script>

package/packages/icons/ArrowDown.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="ele-arrow-down"
+  >
+    <path d="M10 17 24 31 38 17" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'ArrowDown' });
+</script>

package/packages/icons/ArrowDownOutlined.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M38 28 24 42 10 28M24 42V6" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'ArrowDownOutlined' });
+</script>

package/packages/icons/ArrowLeft.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="ele-arrow-left"
+  >
+    <path d="M31 38 17 24 31 10" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'ArrowLeft' });
+</script>

package/packages/icons/ArrowLeftOutlined.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M20 38 6 24 20 10M6 24H42" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'ArrowLeftOutlined' });
+</script>