create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/components/meDialog/hooks/minMax.ts

@@ -0,0 +1,163 @@
+//扩展 el-dailog 最大化最小化可移动
+export default (el: HTMLDivElement & { fullscreen: boolean }) => {
+  if (el.fullscreen !== undefined) {
+    return;
+  }
+  //自定义尺寸变化事件
+  const resizeEvent = new CustomEvent('drag-resize', { detail: '尺寸变化', bubbles: false });
+  el.fullscreen = false;
+  //当前宽高
+  let nowWidth = el.offsetWidth;
+  let nowHight = el.offsetHeight;
+  //弹框可拉伸最小宽高
+  const minWidth = Math.min(nowWidth, 300);
+  const minHeight = Math.min(nowHight, 300);
+  //当前顶部高度
+  let nowMarginTop = '0';
+  //获取弹框头部（这部分可双击全屏）
+  const dialogHeaderEl = el.querySelector('.el-dialog__header') as HTMLDivElement;
+  //弹窗
+  const dragDom = el;
+  const firstWidth = el.style.width;
+  const firstHeight = el.style.height;
+  const setWidthHeight = (width: string, height: string) => {
+    dragDom.style.maxHeight = 'unset';
+    if (width) {
+      dragDom.style.width = width;
+    }
+    if (height) {
+      dragDom.style.height = height;
+    }
+  };
+  //清除选择头部文字效果
+  dialogHeaderEl.onselectstart = () => false;
+  //头部加上可拖动cursor
+  dialogHeaderEl.style.cursor = 'move';
+
+  // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+  const sty = window.getComputedStyle(dragDom, null);
+
+  //头部插入最大化最小化元素
+  const fullscreenSvg =
+    '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"></path></svg>';
+  const cropSvg =
+    '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M256 768h672a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V96a32 32 0 0 1 64 0v672z"></path><path fill="currentColor" d="M832 224v704a32 32 0 1 1-64 0V256H96a32 32 0 0 1 0-64h704a32 32 0 0 1 32 32z"></path></svg>';
+  const maxMinButton = document.createElement('button');
+  maxMinButton.className = 'el-dialog__headerbtn';
+  maxMinButton.style.color = 'var(--el-color-info)';
+  maxMinButton.onmouseover = function () {
+    //设置其背景颜色为主色
+    maxMinButton.style.color = 'var(--el-color-primary)';
+  };
+  maxMinButton.onmouseout = function () {
+    //设置其背景颜色为默认色
+    maxMinButton.style.color = 'var(--el-color-info)';
+  };
+  if (dialogHeaderEl.querySelector('.el-dialog__close')) {
+    maxMinButton.style.right = dialogHeaderEl.querySelector('.el-dialog__close')!.parentElement!.clientWidth + 'px';
+  }
+  const maxMin = document.createElement('i');
+  maxMinButton.appendChild(maxMin);
+  maxMin.style.fontSize = 'inherit';
+  maxMin.className = 'el-icon';
+  maxMin.innerHTML = el.fullscreen ? cropSvg : fullscreenSvg;
+  dialogHeaderEl.appendChild(maxMinButton);
+  const moveDown = (e: MouseEvent) => {
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = e.clientX ?? 0 - dialogHeaderEl.offsetLeft;
+    const disY = e.clientY ?? 0 - dialogHeaderEl.offsetTop;
+    // 获取到的值带px 正则匹配替换
+    let styL: number, styT: number;
+    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+    if (sty.left.includes('%')) {
+      styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);
+      styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);
+    } else {
+      styL = +sty.left.replace(/\px/g, '');
+      styT = +sty.top.replace(/\px/g, '');
+    }
+    document.onmousemove = function (e) {
+      // 通过事件委托，计算移动的距离
+      const l = e.clientX - disX;
+      const t = e.clientY - disY;
+      // 移动当前元素
+      dragDom.style.left = `${l + styL}px`;
+      dragDom.style.top = `${t + styT}px`;
+
+      //将此时的位置传出去
+      //binding.value({x:e.pageX,y:e.pageY})
+    };
+
+    document.onmouseup = function () {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    };
+  };
+  dialogHeaderEl.onmousedown = moveDown;
+  const setMaxMin = () => {
+    if (el.fullscreen) {
+      maxMin.innerHTML = fullscreenSvg;
+      setWidthHeight(nowWidth + 'px', nowHight + 'px');
+      dragDom.style.marginTop = nowMarginTop;
+      dragDom.style.position = 'relative';
+      el.fullscreen = false;
+      dialogHeaderEl.style.cursor = 'move';
+      dialogHeaderEl.onmousedown = moveDown;
+    } else {
+      maxMin.innerHTML = cropSvg;
+      nowHight = dragDom.clientHeight;
+      nowWidth = dragDom.clientWidth;
+      nowMarginTop = dragDom.style.marginTop;
+      dragDom.style.left = '0';
+      dragDom.style.top = '0';
+      setWidthHeight('100vw', '100vh');
+      dragDom.style.marginTop = '0';
+      dragDom.style.position = 'fixed';
+      el.fullscreen = true;
+      dialogHeaderEl.style.cursor = 'initial';
+      dialogHeaderEl.onmousedown = null;
+    }
+    maxMinButton.style.color = 'var(--el-color-info)';
+    el.dispatchEvent(resizeEvent);
+  };
+
+  //点击放大缩小效果
+  maxMinButton.onclick = setMaxMin;
+  //双击头部效果
+  dialogHeaderEl.ondblclick = setMaxMin;
+  //拉伸
+  const resizeEl = document.createElement('div');
+  dragDom.appendChild(resizeEl);
+  //在弹窗右下角加上一个10-10px的控制块
+  resizeEl.style.cursor = 'se-resize';
+  resizeEl.style.position = 'absolute';
+  resizeEl.style.height = '10px';
+  resizeEl.style.width = '10px';
+  resizeEl.style.right = '0px';
+  resizeEl.style.bottom = '0px';
+  resizeEl.style.zIndex = '1999';
+
+  //鼠标拉伸弹窗
+  resizeEl.onmousedown = (e) => {
+    // 记录初始x位置
+    const clientX = e.clientX;
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = e.clientX - resizeEl.offsetLeft;
+    const disY = e.clientY - resizeEl.offsetTop;
+    document.onmousemove = function (e) {
+      e.preventDefault(); // 移动时禁用默认事件
+      // 通过事件委托，计算移动的距离
+      const x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
+      const y = e.clientY - disY;
+      //比较是否小于最小宽高
+      setWidthHeight(x > minWidth ? `${x}px` : minWidth + 'px', y > minHeight ? `${y}px` : minHeight + 'px');
+    };
+    //拉伸结束
+    document.onmouseup = function () {
+      document.onmousemove = null;
+      document.onmouseup = null;
+      el.dispatchEvent(resizeEvent);
+    };
+  };
+  return { resetWH: () => setWidthHeight(firstWidth, firstHeight) };
+};

package/template/meadmin/view/admin/src/components/meDialog/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog ref="elDialogRef" class="me-dialog" :style="{ maxHeight }" @open="openHandle">
+    <template v-for="(item, key) in ($slots as Record<string,any>)" :key="key" #[key]>
+      <component :is="item"></component>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts">
+import { ElDialog } from 'element-plus';
+import minMax from './hooks/minMax';
+const props = {
+  full: {
+    type: Boolean,
+    default: true,
+  },
+  maxHeight: {
+    type: String,
+    default: '80vh',
+  },
+};
+
+const emits = ['open'] as unknown as {
+  open: () => void;
+} & ArrayEmitsOptionsToFns<Parameters<InstanceType<typeof ElDialog>['$emit']>>;
+export default defineComponent({
+  name: 'MeDialog',
+  props: props as unknown as typeof props & ComponentObjectPropsOptionsFromData<InstanceType<typeof ElDialog>['$props']>,
+  emits: emits,
+  setup(props, { expose, emit }) {
+    const elDialogRef = ref<InstanceType<typeof ElDialog>>();
+    let resetWH: undefined | (() => void);
+    watch(
+      [() => elDialogRef.value?.dialogContentRef, () => props.full],
+      async () => {
+        if (elDialogRef.value?.dialogContentRef && props.full) {
+          await nextTick();
+          resetWH = minMax(elDialogRef.value!.dialogContentRef.$el)?.resetWH;
+        }
+      },
+      { immediate: true },
+    );
+    const openHandle = () => {
+      resetWH?.();
+      emit('open');
+    };
+    expose({ elDialogRef });
+    return {
+      elDialogRef,
+      openHandle,
+    };
+  },
+});
+</script>
+<style lang="scss">
+.me-dialog {
+  display: flex;
+  flex-direction: column;
+  .el-dialog__headerbtn {
+    width: 40px;
+  }
+  .el-dialog__header {
+    position: sticky;
+    top: 0;
+    z-index: $z-index-top;
+    background-color: inherit;
+    flex-grow: 0;
+    flex-shrink: 0;
+    padding-right: 80px;
+  }
+  .el-dialog__body {
+    overflow-y: auto;
+    flex: 1;
+    margin-top: 10px;
+    flex-shrink: 0;
+    padding: 0 10px;
+  }
+  .el-dialog__footer {
+    position: sticky;
+    bottom: 0;
+    z-index: $z-index-top;
+    background-color: inherit;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meFilesView.vue

@@ -0,0 +1,52 @@
+<!-- table中展示文件item组件 -->
+<template>
+  <div class="me-files-view">
+    <el-image
+      v-for="(item, index) in fileList?.imageArr ?? []"
+      :key="index"
+      class="view-img"
+      :src="item"
+      :zoom-rate="1.2"
+      :max-scale="7"
+      :min-scale="0.2"
+      :preview-src-list="fileList.imageArr"
+      :initial-index="index"
+      :title="$t('点击预览')"
+      show-progress
+      preview-teleported
+      fit="scale-down"
+    />
+    <el-link v-for="(item, index) in fileList?.fileArr ?? []" :key="index" class="view-link" type="primary" :href="item.url" target="_blank" :title="$t('点击下载')">{{
+      item.name ?? item.url
+    }}</el-link>
+  </div>
+</template>
+
+<script setup lang="ts" name="MeTableFileItem">
+import { isImage } from '@/utils/helper.js';
+const props = defineProps<{ files: { url: string; name?: string }[] }>();
+const fileList = computed(() => {
+  const imageArr = [] as string[];
+  const fileArr = [] as { url: string; name?: string }[];
+  props.files.forEach((item) => {
+    if (isImage(item.url) || isImage(item.name)) {
+      imageArr.push(item.url);
+    } else {
+      fileArr.push(item);
+    }
+  });
+  return { imageArr, fileArr };
+});
+</script>
+<style lang="scss" scoped>
+.me-files-view {
+  .view-img {
+    width: 40px;
+    height: 40px;
+  }
+  .view-img:nth-child(n + 2),
+  .view-link:nth-child(n + 2) {
+    margin-left: 5px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meKeepAlive/core/Suspense.ts

@@ -0,0 +1,15 @@
+import { isArray } from '@vue/shared';
+import { queuePostFlushCb, SuspenseBoundary } from 'vue';
+export function queueEffectWithSuspense(fn: Function | Function[], suspense: SuspenseBoundary | null): void {
+  if (suspense && suspense.pendingBranch) {
+    if (isArray(fn)) {
+      suspense.effects.push(...fn);
+    } else {
+      suspense.effects.push(fn);
+    }
+  } else {
+    queuePostFlushCb(fn);
+  }
+}
+
+export const isSuspense = (type: any): boolean => type.__isSuspense;

package/template/meadmin/view/admin/src/components/meKeepAlive/core/apiAsyncComponent.ts

@@ -0,0 +1,3 @@
+import { ComponentInternalInstance, ComponentOptions, VNode } from 'vue';
+
+export const isAsyncWrapper = (i: ComponentInternalInstance | VNode): boolean => !!(i.type as ComponentOptions).__asyncLoader;

package/template/meadmin/view/admin/src/components/meKeepAlive/core/component.ts

@@ -0,0 +1,5 @@
+import { isFunction } from '@vue/shared';
+import { ConcreteComponent } from 'vue';
+export function getComponentName(Component: ConcreteComponent, includeInferred = true): string | false | undefined {
+  return isFunction(Component) ? Component.displayName || Component.name : Component.name || (includeInferred && Component.__name);
+}

package/template/meadmin/view/admin/src/components/meKeepAlive/core/componentPublicInstance.ts

@@ -0,0 +1,6 @@
+import { ComponentInternalInstance } from 'vue';
+
+export interface ComponentRenderContext {
+  [key: string]: any;
+  _: ComponentInternalInstance;
+}

package/template/meadmin/view/admin/src/components/meKeepAlive/core/devtools.ts

@@ -0,0 +1,43 @@
+import { ComponentInternalInstance, devtools } from 'vue';
+const enum DevtoolsHooks {
+  APP_INIT = 'app:init',
+  APP_UNMOUNT = 'app:unmount',
+  COMPONENT_UPDATED = 'component:updated',
+  COMPONENT_ADDED = 'component:added',
+  COMPONENT_REMOVED = 'component:removed',
+  COMPONENT_EMIT = 'component:emit',
+  PERFORMANCE_START = 'perf:start',
+  PERFORMANCE_END = 'perf:end',
+}
+export const devtoolsComponentAdded = /* #__PURE__ */ createDevtoolsComponentHook(DevtoolsHooks.COMPONENT_ADDED);
+
+function createDevtoolsComponentHook(hook: DevtoolsHooks) {
+  return (component: ComponentInternalInstance) => {
+    emit(hook, component.appContext.app, component.uid, component.parent ? component.parent.uid : undefined, component);
+  };
+}
+
+function emit(event: string, ...args: any[]) {
+  // if (devtools) {
+  //   return devtools.emit(event, ...args)
+  // } else if (!devtoolsNotInstalled) {
+  //   buffer.push({ event, args })
+  // }
+  // TODO::因为拿不到devtoolsNotInstalled和buffer这里只在devtools Installed 成功后处理
+  if (devtools) {
+    return devtools.emit(event, ...args);
+  }
+  // TODO::因为拿不到devtoolsNotInstalled和buffer这里做特别处理
+  // const doEmit = (event: string,frequency:number,...args: any[])=>{
+  //   if (devtools) {
+  //     return devtools.emit(event, ...args)
+  //   }
+  //   if(frequency > 3){
+  //     return console.warn('devtools is Not installed');
+  //   }
+  //   setTimeout(() => {
+  //     doEmit(event,frequency++,...args);
+  //   }, 1000);
+  // }
+  // doEmit(event,1,args);
+}

package/template/meadmin/view/admin/src/components/meKeepAlive/core/errorHandling.ts

@@ -0,0 +1,17 @@
+export const enum ErrorCodes {
+  SETUP_FUNCTION,
+  RENDER_FUNCTION,
+  WATCH_GETTER,
+  WATCH_CALLBACK,
+  WATCH_CLEANUP,
+  NATIVE_EVENT_HANDLER,
+  COMPONENT_EVENT_HANDLER,
+  VNODE_HOOK,
+  DIRECTIVE_HOOK,
+  TRANSITION_HOOK,
+  APP_ERROR_HANDLER,
+  APP_WARN_HANDLER,
+  FUNCTION_REF,
+  ASYNC_COMPONENT_LOADER,
+  SCHEDULER,
+}

package/template/meadmin/view/admin/src/components/meKeepAlive/core/renderer.ts

@@ -0,0 +1,103 @@
+import { ComponentInternalInstance, RendererElement, RendererNode, RendererOptions, SuspenseBoundary, VNode, VNodeArrayChildren, queuePostFlushCb } from 'vue';
+import { queueEffectWithSuspense } from './Suspense';
+
+// An object exposing the internals of a renderer, passed to tree-shakeable
+// features so that they can be decoupled from this file. Keys are shortened
+// to optimize bundle size.
+export interface RendererInternals<HostNode = RendererNode, HostElement = RendererElement> {
+  p: PatchFn;
+  um: UnmountFn;
+  r: RemoveFn;
+  m: MoveFn;
+  mt: MountComponentFn;
+  mc: MountChildrenFn;
+  pc: PatchChildrenFn;
+  pbc: PatchBlockChildrenFn;
+  n: NextFn;
+  o: RendererOptions<HostNode, HostElement>;
+}
+
+// These functions are created inside a closure and therefore their types cannot
+// be directly exported. In order to avoid maintaining function signatures in
+// two places, we declare them once here and use them inside the closure.
+type PatchFn = (
+  n1: VNode | null, // null means this is a mount
+  n2: VNode,
+  container: RendererElement,
+  anchor?: RendererNode | null,
+  parentComponent?: ComponentInternalInstance | null,
+  parentSuspense?: SuspenseBoundary | null,
+  isSVG?: boolean,
+  slotScopeIds?: string[] | null,
+  optimized?: boolean,
+) => void;
+
+type UnmountFn = (vnode: VNode, parentComponent: ComponentInternalInstance | null, parentSuspense: SuspenseBoundary | null, doRemove?: boolean, optimized?: boolean) => void;
+
+type RemoveFn = (vnode: VNode) => void;
+
+type MoveFn = (vnode: VNode, container: RendererElement, anchor: RendererNode | null, type: MoveType, parentSuspense?: SuspenseBoundary | null) => void;
+
+export const enum MoveType {
+  ENTER,
+  LEAVE,
+  REORDER,
+}
+
+export type MountComponentFn = (
+  initialVNode: VNode,
+  container: RendererElement,
+  anchor: RendererNode | null,
+  parentComponent: ComponentInternalInstance | null,
+  parentSuspense: SuspenseBoundary | null,
+  isSVG: boolean,
+  optimized: boolean,
+) => void;
+
+type MountChildrenFn = (
+  children: VNodeArrayChildren,
+  container: RendererElement,
+  anchor: RendererNode | null,
+  parentComponent: ComponentInternalInstance | null,
+  parentSuspense: SuspenseBoundary | null,
+  isSVG: boolean,
+  slotScopeIds: string[] | null,
+  optimized: boolean,
+  start?: number,
+) => void;
+
+type PatchChildrenFn = (
+  n1: VNode | null,
+  n2: VNode,
+  container: RendererElement,
+  anchor: RendererNode | null,
+  parentComponent: ComponentInternalInstance | null,
+  parentSuspense: SuspenseBoundary | null,
+  isSVG: boolean,
+  slotScopeIds: string[] | null,
+  optimized: boolean,
+) => void;
+
+type PatchBlockChildrenFn = (
+  oldChildren: VNode[],
+  newChildren: VNode[],
+  fallbackContainer: RendererElement,
+  parentComponent: ComponentInternalInstance | null,
+  parentSuspense: SuspenseBoundary | null,
+  isSVG: boolean,
+  slotScopeIds: string[] | null,
+) => void;
+
+type NextFn = (vnode: VNode) => RendererNode | null;
+
+export const queuePostRenderEffect = __FEATURE_SUSPENSE__ ? queueEffectWithSuspense : queuePostFlushCb;
+
+export type SetupRenderEffectFn = (
+  instance: ComponentInternalInstance,
+  initialVNode: VNode,
+  container: RendererElement,
+  anchor: RendererNode | null,
+  parentSuspense: SuspenseBoundary | null,
+  isSVG: boolean,
+  optimized: boolean,
+) => void;

package/template/meadmin/view/admin/src/components/meKeepAlive/core/shapeFlags.ts

@@ -0,0 +1,13 @@
+export const enum ShapeFlags {
+  ELEMENT = 1,
+  FUNCTIONAL_COMPONENT = 1 << 1,
+  STATEFUL_COMPONENT = 1 << 2,
+  TEXT_CHILDREN = 1 << 3,
+  ARRAY_CHILDREN = 1 << 4,
+  SLOTS_CHILDREN = 1 << 5,
+  TELEPORT = 1 << 6,
+  SUSPENSE = 1 << 7,
+  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
+  COMPONENT_KEPT_ALIVE = 1 << 9,
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
+}

package/template/meadmin/view/admin/src/components/meKeepAlive/core/vnode.ts

@@ -0,0 +1,9 @@
+import { ComponentInternalInstance, VNode, callWithAsyncErrorHandling } from 'vue';
+import { ErrorCodes } from './errorHandling';
+type VNodeMountHook = (vnode: VNode) => void;
+type VNodeUpdateHook = (vnode: VNode, oldVNode: VNode) => void;
+export type VNodeHook = VNodeMountHook | VNodeUpdateHook | VNodeMountHook[] | VNodeUpdateHook[];
+
+export function invokeVNodeHook(hook: VNodeHook, instance: ComponentInternalInstance | null, vnode: VNode, prevVNode: VNode | null = null) {
+  callWithAsyncErrorHandling(hook, instance, <any>ErrorCodes.VNODE_HOOK, [vnode, prevVNode]);
+}