@utogether/udp-core 1.0.0

package/src/components/SuQrcode/src/index.tsx

@@ -0,0 +1,236 @@
+import { ref, unref, watch, nextTick, computed, type PropType, defineComponent } from 'vue';
+import './index.scss';
+import { isString, clone } from 'xe-utils';
+import propTypes from '@/utils/propTypes';
+import { IconifyIconOffline } from '../../ReIcon';
+import QRCode, { type QRCodeRenderersOptions } from 'qrcode';
+
+interface QrcodeLogo {
+  src?: string;
+  logoSize?: number;
+  bgColor?: string;
+  borderSize?: number;
+  crossOrigin?: string;
+  borderRadius?: number;
+  logoRadius?: number;
+}
+
+const props = {
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string.validate((v: string) => ['canvas', 'img'].includes(v)).def('canvas'),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: (): QRCodeRenderersOptions => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: (): QrcodeLogo | string => ''
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def('')
+};
+
+export default defineComponent({
+  name: 'SuQrcode',
+  props,
+  emits: ['done', 'click', 'disabled-click'],
+  setup(props, { emit }) {
+    const { toCanvas, toDataURL } = QRCode;
+    const loading = ref(true);
+    const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
+    const renderText = computed(() => String(props.text));
+    const wrapStyle = computed(() => {
+      return {
+        width: props.width + 'px',
+        height: props.width + 'px'
+      };
+    });
+    const initQrcode = async () => {
+      await nextTick();
+      const options = clone(props.options || {}, true);
+      if (props.tag === 'canvas') {
+        // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+        options.errorCorrectionLevel =
+          options.errorCorrectionLevel || getErrorCorrectionLevel(unref(renderText));
+        const _width: number = await getOriginWidth(unref(renderText), options);
+        options.scale = props.width === 0 ? undefined : (props.width / _width) * 4;
+        const canvasRef: any = await toCanvas(
+          unref(wrapRef) as HTMLCanvasElement,
+          unref(renderText),
+          options
+        );
+        if (props.logo) {
+          const url = await createLogoCode(canvasRef);
+          emit('done', url);
+          loading.value = false;
+        } else {
+          emit('done', canvasRef.toDataURL());
+          loading.value = false;
+        }
+      } else {
+        const url = await toDataURL(renderText.value, {
+          errorCorrectionLevel: 'H',
+          width: props.width,
+          ...options
+        });
+        (unref(wrapRef) as HTMLImageElement).src = url;
+        emit('done', url);
+        loading.value = false;
+      }
+    };
+    watch(
+      () => renderText.value,
+      val => {
+        if (!val) return;
+        initQrcode();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+      const canvasWidth = canvasRef.width;
+      const logoOptions: QrcodeLogo = Object.assign(
+        {
+          logoSize: 0.15,
+          bgColor: '#ffffff',
+          borderSize: 0.05,
+          crossOrigin: 'anonymous',
+          borderRadius: 8,
+          logoRadius: 0
+        },
+        isString(props.logo) ? {} : props.logo
+      );
+      const {
+        logoSize = 0.15,
+        bgColor = '#ffffff',
+        borderSize = 0.05,
+        crossOrigin = 'anonymous',
+        borderRadius = 8,
+        logoRadius = 0
+      } = logoOptions;
+      const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
+      const logoWidth = canvasWidth * logoSize;
+      const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+      const logoBgWidth = canvasWidth * (logoSize + borderSize);
+      const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+      const ctx = canvasRef.getContext('2d');
+      if (!ctx) return;
+      // logo 底色
+      canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius);
+      ctx.fillStyle = bgColor;
+      ctx.fill();
+      // logo
+      const image = new Image();
+      if (crossOrigin || logoRadius) {
+        image.setAttribute('crossOrigin', crossOrigin);
+      }
+      (image as any).src = logoSrc;
+      // 使用image绘制可以避免某些跨域情况
+      const drawLogoWithImage = (image: HTMLImageElement) => {
+        ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+      };
+      // 使用canvas绘制以获得更多的功能
+      const drawLogoWithCanvas = (image: HTMLImageElement) => {
+        const canvasImage = document.createElement('canvas');
+        canvasImage.width = logoXY + logoWidth;
+        canvasImage.height = logoXY + logoWidth;
+        const imageCanvas = canvasImage.getContext('2d');
+        if (!imageCanvas || !ctx) return;
+        imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+        canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+        if (!ctx) return;
+        const fillStyle = ctx.createPattern(canvasImage, 'no-repeat');
+        if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fill();
+        }
+      };
+      // 将 logo绘制到 canvas上
+      return new Promise((resolve: any) => {
+        image.onload = () => {
+          logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+          resolve(canvasRef.toDataURL());
+        };
+      });
+    };
+    // 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+    const getOriginWidth = async (content: string, options: QRCodeRenderersOptions) => {
+      const _canvas = document.createElement('canvas');
+      await toCanvas(_canvas, content, options);
+      return _canvas.width;
+    };
+    // 对于内容少的QrCode，增大容错率
+    const getErrorCorrectionLevel = (content: string) => {
+      if (content.length > 36) {
+        return 'M';
+      } else if (content.length > 16) {
+        return 'Q';
+      } else {
+        return 'H';
+      }
+    };
+    // 用于绘制圆角
+    const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+      return (x: number, y: number, w: number, h: number, r: number) => {
+        const minSize = Math.min(w, h);
+        if (r > minSize / 2) {
+          r = minSize / 2;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        return ctx;
+      };
+    };
+    const clickCode = () => {
+      emit('click');
+    };
+    const disabledClick = () => {
+      emit('disabled-click');
+    };
+    return () => (
+      <>
+        <div v-loading={unref(loading)} class="qrcode relative inline-block" style={unref(wrapStyle)}>
+          {props.tag === 'canvas' ? (
+            <canvas ref={wrapRef} onClick={clickCode}></canvas>
+          ) : (
+            <img ref={wrapRef} onClick={clickCode}></img>
+          )}
+          {props.disabled && (
+            <div
+              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              onClick={disabledClick}
+            >
+              <div class="absolute top-[50%] left-[50%] font-bold">
+                <IconifyIconOffline
+                  class="cursor-pointer"
+                  icon="refresh-right"
+                  width="30"
+                  color="var(--el-color-primary)"
+                />
+                <div>{props.disabledText}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+});

package/src/components/SuScrollTree/ScrollPanel.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="u-scroll-panel" @click.prevent="handleClickPanel">
+    <div class="u-panel-header">
+      <h2>{{ title }}</h2>
+      <ut-button v-if="showAllButton" content="BtnExpand" @click="handleExpand(data, true)" />
+      <ut-button
+        v-if="showAllButton"
+        status="warning"
+        content="BtnCollapse"
+        @click="handleExpand(data, false)"
+      />
+      <vxe-button icon="vxe-icon-refresh" @click="onRefresh" />
+    </div>
+    <div class="u-panel-content system-scrollbar">
+      <el-tree
+        ref="tree"
+        :data="data"
+        :props="treeOtions"
+        :expand-on-click-node="false"
+        style="background-color: #fff"
+        class="u-tree-panel"
+        node-key="id"
+        highlight-current
+        @node-click="handleNodeClick"
+      >
+        <template #default="{ node }">
+          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">
+            <i class="ri-folder-2-fill ri-lg mr-1" style="color: #fadb14" />
+          </span>
+          <span>{{ node.label }}</span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getServiceApi } from '../../api';
+import type { Ref } from 'vue';
+import { ref, inject, watch, nextTick } from 'vue';
+
+interface IProps {
+  title: string;
+  url: string;
+  showAllButton?: boolean;
+  treeOtions: Object;
+  extParam?: Object;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  treeOtions: () => {
+    return {
+      children: 'children',
+      label: 'label'
+    };
+  },
+  extParam: () => {
+    return {};
+  },
+  showAllButton: false
+});
+
+const data = ref<any>([]);
+const tree: Ref<any | null> = ref(null);
+// 当前激活item
+const active: IRecord = inject('active');
+// tree面板变更
+const scrollPanelChange: IRecord = inject('scrollPanelChange');
+// tree 列表
+const treeList: IRecord = inject('treeList');
+
+watch(
+  () => scrollPanelChange.value,
+  () => {
+    scrollPanelChange.value && getDataList();
+  }
+);
+
+const getDataList = async (params = {}) => {
+  const query = Object.assign(params, props.extParam);
+  const serverData = (await getServiceApi().get(props.url, query)) as IResponseData;
+  data.value = serverData.list || serverData;
+  treeList.value = serverData.list || serverData;
+  active.value = serverData.list ? serverData.list[0] : serverData[0];
+  nextTick(() => {
+    tree.value && tree?.value.setCurrentKey(active.value?.id || '');
+  });
+  scrollPanelChange.value = false;
+};
+const handleNodeClick = (row: any) => {
+  active.value = row;
+};
+
+const handleClickPanel = () => {
+  active.value = {};
+};
+
+const handleExpand = (array, expanded) => {
+  array.forEach(el => {
+    tree.value.store.nodesMap[el.id].expanded = expanded;
+    if (el.children?.length) {
+      handleExpand(el.children, expanded);
+    }
+  });
+  console.log('[ tree.value ] >', tree.value);
+};
+
+const onRefresh = () => {
+  getDataList();
+};
+defineExpose({
+  onRefresh
+});
+getDataList();
+</script>
+
+<style lang="scss">
+.u-scroll-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+
+  .u-panel-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+
+    h2 {
+      // display: box;
+      height: 30px;
+      padding: 0;
+      margin: 0;
+      margin-right: 20px;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      font-size: 14px;
+      line-height: 30px;
+      -webkit-box-orient: vertical;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .u-panel-content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .u-tree-panel {
+    height: 100%; // 0630
+    :deep(.el-tree-node__content) {
+      height: 36px;
+    }
+
+    :deep(.el-tree-node.is-current > .el-tree-node__content) {
+      background-color: rgb(64 158 255 / 40%);
+    }
+
+    :deep(.el-tree-node > .el-tree-node__content) {
+      transition: 0.2s;
+    }
+  }
+
+  .el-vl__window {
+    height: 360px !important;
+    // &:first-child {
+    //   height: 100% !important;
+    // }
+  }
+}
+</style>