create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/components/meKeepAlive/index.ts

@@ -0,0 +1,347 @@
+import { invokeArrayFns, isArray, isString } from '@vue/shared';
+import {
+  ComponentOptions,
+  ConcreteComponent,
+  RendererElement,
+  RendererNode,
+  SetupContext,
+  VNode,
+  VNodeProps,
+  cloneVNode,
+  getCurrentInstance,
+  isVNode,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  setTransitionHooks,
+  warn,
+  watch,
+} from 'vue';
+import { isAsyncWrapper } from './core/apiAsyncComponent';
+import { getComponentName } from './core/component';
+import { ComponentRenderContext } from './core/componentPublicInstance';
+import { devtoolsComponentAdded } from './core/devtools';
+import { MoveType, RendererInternals, queuePostRenderEffect } from './core/renderer';
+import { ShapeFlags } from './core/shapeFlags';
+import { isSuspense } from './core/Suspense';
+import { invokeVNodeHook } from './core/vnode';
+type MatchPattern = string | RegExp | Array<string | RegExp>;
+export interface MeKeepAliveProps {
+  include?: MatchPattern;
+  exclude?: MatchPattern;
+  max?: number | string;
+  includeKey?: MatchPattern;
+  excludeKey?: MatchPattern;
+}
+
+type CacheKey = string | number | symbol | ConcreteComponent;
+type Cache = Map<CacheKey, VNode>;
+type Keys = Set<CacheKey>;
+export interface KeepAliveContext extends ComponentRenderContext {
+  renderer: RendererInternals;
+  activate: (vnode: VNode, container: RendererElement, anchor: RendererNode | null, isSVG: boolean, optimized: boolean) => void;
+  deactivate: (vnode: VNode) => void;
+}
+
+const KeepAliveImpl: ComponentOptions = {
+  name: `MeKeepAlive`,
+
+  // Marker for special handling inside the renderer. We are not using a ===
+  // check directly on KeepAlive in the renderer, because importing it directly
+  // would prevent it from being tree-shaken.
+  __isKeepAlive: true,
+
+  props: {
+    include: [String, RegExp, Array],
+    exclude: [String, RegExp, Array],
+    max: [String, Number],
+    includeKey: [String, RegExp, Array],
+    excludeKey: [String, RegExp, Array],
+  },
+
+  setup(props: MeKeepAliveProps, { slots }: SetupContext) {
+    const instance = getCurrentInstance()!;
+    // KeepAlive communicates with the instantiated renderer via the
+    // ctx where the renderer passes in its internals,
+    // and the KeepAlive instance exposes activate/deactivate implementations.
+    // The whole point of this is to avoid importing KeepAlive directly in the
+    // renderer to facilitate tree-shaking.
+    const sharedContext = instance.ctx as KeepAliveContext;
+
+    // if the internal renderer is not registered, it indicates that this is server-side rendering,
+    // for KeepAlive, we just need to render its children
+    if (__SSR__ && !sharedContext.renderer) {
+      return () => {
+        const children = slots.default && slots.default();
+        return children && children.length === 1 ? children[0] : children;
+      };
+    }
+
+    const cache: Cache = new Map();
+    const keys: Keys = new Set();
+    let current: VNode | null = null;
+
+    if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+      (instance as any).__v_cache = cache;
+    }
+
+    const parentSuspense = instance.suspense;
+
+    const {
+      renderer: {
+        p: patch,
+        m: move,
+        um: _unmount,
+        o: { createElement },
+      },
+    } = sharedContext;
+    const storageContainer = createElement('div');
+
+    sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
+      const instance = vnode.component!;
+      move(vnode, container, anchor, MoveType.ENTER, parentSuspense);
+      // in case props have changed
+      patch(instance.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, vnode.slotScopeIds, optimized);
+      queuePostRenderEffect(() => {
+        instance.isDeactivated = false;
+        if (instance.a) {
+          invokeArrayFns(instance.a);
+        }
+        const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
+        if (vnodeHook) {
+          invokeVNodeHook(vnodeHook, instance.parent, vnode);
+        }
+      }, parentSuspense);
+
+      if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+        // Update components tree
+        devtoolsComponentAdded(instance);
+      }
+    };
+
+    sharedContext.deactivate = (vnode: VNode) => {
+      const instance = vnode.component!;
+      move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense);
+      queuePostRenderEffect(() => {
+        if (instance.da) {
+          invokeArrayFns(instance.da);
+        }
+        const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
+        if (vnodeHook) {
+          invokeVNodeHook(vnodeHook, instance.parent, vnode);
+        }
+        instance.isDeactivated = true;
+      }, parentSuspense);
+
+      if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+        // Update components tree
+        devtoolsComponentAdded(instance);
+      }
+    };
+
+    function unmount(vnode: VNode) {
+      // reset the shapeFlag so it can be properly unmounted
+      resetShapeFlag(vnode);
+      _unmount(vnode, instance, parentSuspense, true);
+    }
+
+    function pruneCache(filter?: (name: string) => boolean) {
+      cache.forEach((vnode, key) => {
+        const name = getComponentName(vnode.type as ConcreteComponent);
+        if (name && (!filter || !filter(name))) {
+          pruneCacheEntry(key);
+        }
+      });
+    }
+
+    function pruneCacheByKey(filter?: (key: CacheKey) => boolean) {
+      cache.forEach((vnode, key) => {
+        if (!filter || !filter(key)) {
+          pruneCacheEntry(key);
+        }
+      });
+    }
+
+    function pruneCacheEntry(key: CacheKey) {
+      const cached = cache.get(key) as VNode;
+      if (!current || cached.type !== current.type) {
+        unmount(cached);
+      } else if (current) {
+        // current active instance should no longer be kept-alive.
+        // we can't unmount it now but it might be later, so reset its flag now.
+        resetShapeFlag(current);
+      }
+      cache.delete(key);
+      keys.delete(key);
+    }
+
+    // prune cache on include/exclude prop change
+    watch(
+      () => [props.include, props.exclude],
+      ([include, exclude]) => {
+        include && pruneCache((name) => matches(include, name));
+        exclude && pruneCache((name) => !matches(exclude, name));
+      },
+      // prune post-render after `current` has been updated
+      { flush: 'post', deep: true },
+    );
+    // prune cache on includeKey/excludeKey prop change
+    watch(
+      () => [props.includeKey, props.excludeKey],
+      ([includeKey, excludeKey]) => {
+        includeKey && pruneCacheByKey((key) => typeof key === 'string' && matches(includeKey, key));
+        excludeKey &&
+          pruneCacheByKey((key) => {
+            return typeof key !== 'string' || !matches(excludeKey, key);
+          });
+      },
+      // prune post-render after `current` has been updated
+      { flush: 'post', deep: true },
+    );
+
+    // cache sub tree after render
+    let pendingCacheKey: CacheKey | null = null;
+    const cacheSubtree = () => {
+      // fix #1621, the pendingCacheKey could be 0
+      if (pendingCacheKey != null) {
+        cache.set(pendingCacheKey, getInnerChild(instance.subTree));
+      }
+    };
+    onMounted(cacheSubtree);
+    onUpdated(cacheSubtree);
+
+    onBeforeUnmount(() => {
+      cache.forEach((cached) => {
+        const { subTree, suspense } = instance;
+        const vnode = getInnerChild(subTree);
+        if (cached.type === vnode.type) {
+          // current instance will be unmounted as part of keep-alive's unmount
+          resetShapeFlag(vnode);
+          // but invoke its deactivated hook here
+          const da = vnode.component!.da;
+          da && queuePostRenderEffect(da, suspense);
+          return;
+        }
+        unmount(cached);
+      });
+    });
+
+    return () => {
+      pendingCacheKey = null;
+      if (!slots.default) {
+        return null;
+      }
+      const children = slots.default();
+      const rawVNode = children[0];
+      if (children.length > 1) {
+        if (__DEV__) {
+          warn(`KeepAlive should contain exactly one component child.`, current);
+        }
+        current = null;
+        return children;
+      } else if (!isVNode(rawVNode) || (!(rawVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) && !(rawVNode.shapeFlag & ShapeFlags.SUSPENSE))) {
+        current = null;
+        return rawVNode;
+      }
+
+      let vnode = getInnerChild(rawVNode);
+      const comp = vnode.type as ConcreteComponent;
+
+      // for async components, name check should be based in its loaded
+      // inner component if available
+      const name = getComponentName(isAsyncWrapper(vnode) ? (vnode.type as ComponentOptions).__asyncResolved || {} : comp);
+      const key = vnode.key == null ? comp : vnode.key;
+      const { include, exclude, includeKey, excludeKey, max } = props;
+      if (
+        (include && (!name || !matches(include, name))) ||
+        (exclude && name && matches(exclude, name)) ||
+        (includeKey && (typeof key !== 'string' || !matches(includeKey, key))) ||
+        (excludeKey && typeof key === 'string' && matches(excludeKey, key))
+      ) {
+        current = vnode;
+        return rawVNode;
+      }
+      const cachedVNode = cache.get(key);
+
+      // clone vnode if it's reused because we are going to mutate it
+      if (vnode.el) {
+        vnode = cloneVNode(vnode);
+        if (rawVNode.shapeFlag & ShapeFlags.SUSPENSE) {
+          rawVNode.ssContent = vnode;
+        }
+      }
+      // #1513 it's possible for the returned vnode to be cloned due to attr
+      // fallthrough or scopeId, so the vnode here may not be the final vnode
+      // that is mounted. Instead of caching it directly, we store the pending
+      // key and cache `instance.subTree` (the normalized vnode) in
+      // beforeMount/beforeUpdate hooks.
+      pendingCacheKey = key;
+
+      if (cachedVNode) {
+        // copy over mounted state
+        vnode.el = cachedVNode.el;
+        vnode.component = cachedVNode.component;
+        if (vnode.transition) {
+          // recursively update transition hooks on subTree
+          setTransitionHooks(vnode, vnode.transition);
+        }
+        // avoid vnode being mounted as fresh
+        vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE;
+        // make this key the freshest
+        keys.delete(key);
+        keys.add(key);
+      } else {
+        keys.add(key);
+        // prune oldest entry
+        if (max && keys.size > parseInt(max as string, 10)) {
+          pruneCacheEntry(keys.values().next().value!);
+        }
+      }
+      // avoid vnode being unmounted
+      vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE;
+
+      current = vnode;
+      return isSuspense(rawVNode.type) ? rawVNode : vnode;
+    };
+  },
+};
+
+if (__COMPAT__) {
+  KeepAliveImpl.__isBuildIn = true;
+}
+
+// export the public type for h/tsx inference
+// also to avoid inline import() in generated d.ts files
+export default KeepAliveImpl as any as {
+  __isKeepAlive: true;
+  new (): {
+    $props: VNodeProps & MeKeepAliveProps;
+  };
+};
+
+function matches(pattern: MatchPattern, name: string): boolean {
+  if (isArray(pattern)) {
+    return pattern.some((p: string | RegExp) => matches(p, name));
+  } else if (isString(pattern)) {
+    return pattern.split(',').includes(name);
+  } else if (pattern.test) {
+    return pattern.test(name);
+  }
+  /* istanbul ignore next */
+  return false;
+}
+
+function resetShapeFlag(vnode: VNode) {
+  let shapeFlag = vnode.shapeFlag;
+  if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
+    shapeFlag -= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE;
+  }
+  if (shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
+    shapeFlag -= ShapeFlags.COMPONENT_KEPT_ALIVE;
+  }
+  vnode.shapeFlag = shapeFlag;
+}
+
+function getInnerChild(vnode: VNode) {
+  return vnode.shapeFlag & ShapeFlags.SUSPENSE ? vnode.ssContent! : vnode;
+}

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

@@ -0,0 +1,34 @@
+<template>
+  <el-dropdown class="me-locale-select" trigger="click" max-height="500px">
+    <div class="flex-center pointer">
+      <me-icon-translation class="icon"></me-icon-translation>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="(item, index) in localeConfig.localeList" :key="index" :disabled="$i18n.locale === item.locale" @click="setLanguage(item.locale)">{{
+          $t(item.text)
+        }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script setup lang="ts" name="MeTranslation">
+import { localeConfig } from '@/config';
+import { setI18nLanguage } from '@/locales/i18n';
+const setLanguage = (locale: string) => {
+  setI18nLanguage(locale);
+};
+</script>
+<style lang="scss" scoped>
+.me-locale-select {
+  line-height: 100%;
+
+  .flex-center {
+    padding: 0 10px;
+
+    .icon {
+      font-size: 1.3em;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <span>
+    <span class="prefix">{{ numberInfo.prefix }}</span>
+    <span class="output">{{ format(output, numberInfo.decimals) }}</span>
+    <span class="suffix">{{ numberInfo.suffix }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { EasingFunction, TransitionPresets, useTransition } from '@vueuse/core';
+import formatNumber from 'format-number';
+import { PropType } from 'vue';
+const props = defineProps({
+  start: {
+    type: Number,
+    default: 0,
+  },
+  end: [Number, Array] as PropType<number | [number, string?, string?]>,
+  delay: { type: Number, default: 0 }, //开始动画等待的毫秒数
+  disabled: { type: Boolean, default: false }, //禁用动画
+  duration: { type: Number, default: 1000 }, //动画持续毫秒
+  transition: {
+    //动画
+    type: [Function, String] as PropType<EasingFunction | keyof typeof TransitionPresets>,
+    default: 'easeOutExpo',
+  },
+  format: {
+    type: Function as PropType<(number: number, decimals: number) => string | number>,
+    default: (number: number, decimals: number) => formatNumber({ truncate: decimals, padRight: decimals })(number),
+  },
+});
+const emit = defineEmits<{
+  (e: 'finished'): void;
+  (e: 'started'): void;
+}>();
+const numberInfo = reactive({
+  number: props.start,
+  prefix: '',
+  suffix: '',
+  decimals: 0,
+});
+const output = useTransition(
+  computed(() => numberInfo.number),
+  {
+    delay: computed(() => props.delay),
+    disabled: computed(() => props.disabled),
+    duration: computed(() => props.duration),
+    onFinished: () => emit('finished'),
+    onStarted: () => emit('started'),
+    transition: computed(() => (typeof props.transition === 'string' ? TransitionPresets[props.transition] : props.transition)),
+  },
+);
+const getFormatInfo = (value: number | [number, string?, string?]) => {
+  if (typeof value === 'number') {
+    return {
+      prefix: '',
+      number: value,
+      suffix: '',
+      decimals: (value + '').split('.')[1]?.length ?? 0,
+    };
+  }
+  return {
+    prefix: value[1] ?? '',
+    number: value[0],
+    suffix: value[2] ?? '',
+    decimals: (value[0] + '').split('.')[1]?.length ?? 0,
+  };
+};
+watch(
+  () => props.end,
+  (end) => Object.assign(numberInfo, getFormatInfo(end ?? props.start)),
+  { immediate: true, deep: true },
+);
+</script>

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

@@ -0,0 +1,175 @@
+<template>
+  <el-form ref="elFormRef" class="me-search-form" :class="formClass" :label-width="labelWidth!" :label-position="labelPosition">
+    <slot></slot>
+    <el-form-item class="button-item">
+      <slot name="button"></slot>
+      <el-button v-if="searchText !== undefined" type="primary" :loading="loading" @click="search()">
+        {{ searchText ? searchText : $t('查询') }}
+      </el-button>
+      <el-button v-if="resetText !== undefined" @click="onReset ? onReset() : elFormRef!.resetFields()">
+        {{ resetText ? resetText : $t('重置') }}
+      </el-button>
+      <el-button v-if="forever" text bg @click="showAll = !showAll">
+        {{ $t(showAll ? '收起' : '展开') }}
+        <mel-icon-arrow-down class="more-icon" :class="{ reversal: showAll }"></mel-icon-arrow-down>
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts">
+import type { FormInstance } from 'element-plus';
+import { ElForm } from 'element-plus';
+import $ from 'jquery';
+import { PropType } from 'vue';
+const props = {
+  forever: {
+    // 收起后展示的筛选项数量0为不收起
+    type: Number,
+    default: 1,
+  },
+  defaultAll: {
+    type: Boolean,
+    default: false,
+  },
+  searchText: {
+    type: String,
+    default: '',
+  },
+  resetText: {
+    type: String,
+    default: '',
+  },
+  labelWidth: {
+    type: [String, Number],
+    default: '80px',
+  },
+  labelPosition: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right',
+  },
+  onSearch: Function as PropType<() => void>,
+  onReset: Function as PropType<() => void>,
+};
+export default defineComponent({
+  name: 'MeSearchForm',
+  props: props as unknown as ComponentObjectPropsOptionsFromData<InstanceType<typeof ElForm>['$props']> & typeof props,
+  setup(props, { expose }) {
+    const elFormRef = ref<FormInstance>();
+    const showAll = ref(props.defaultAll);
+    const formClass = ref('');
+    const formResize = new ResizeObserver((entries) => {
+      if (entries[0].contentRect.width < 768) {
+        return (formClass.value = '');
+      }
+      if (entries[0].contentRect.width < 1150) {
+        return (formClass.value = 'lg');
+      }
+      if (entries[0].contentRect.width < 1600) {
+        return (formClass.value = 'xl');
+      }
+      return (formClass.value = 'xl-2');
+    });
+
+    onMounted(() => {
+      formResize.observe(elFormRef.value!.$el);
+      watch(
+        showAll,
+        () => {
+          const children = $(elFormRef.value!.$el).children();
+          if (showAll.value) {
+            children.each(function (index) {
+              if (index >= props.forever! && index != children.length - 1) {
+                $(this).css('display', $(this).data('display'));
+              }
+            });
+          } else {
+            children.each(function (index) {
+              if (index >= props.forever! && index != children.length - 1) {
+                $(this).data('display', $(this).css('display'));
+                $(this).css('display', 'none');
+              }
+            });
+          }
+        },
+        { immediate: true },
+      );
+    });
+    onBeforeUnmount(() => {
+      formResize.disconnect();
+    });
+    expose({ elFormRef });
+    const loading = ref(false);
+    const search = async () => {
+      loading.value = true;
+      try {
+        await props.onSearch?.();
+      } finally {
+        loading.value = false;
+      }
+    };
+    return {
+      showAll,
+      elFormRef,
+      search,
+      loading,
+      formClass,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.me-search-form {
+  display: flex;
+  flex-wrap: wrap;
+
+  :deep(> *) {
+    width: 100%;
+    padding-right: 0;
+  }
+
+  .more-icon {
+    transition: transform 0.35s;
+    margin-left: 5px;
+  }
+
+  .reversal {
+    transform: rotateZ(180deg);
+  }
+
+  :deep(.el-form-item__content) {
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    > div {
+      flex: 1;
+    }
+
+    .search-buttons {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.lg {
+  :deep(> *) {
+    width: 50%;
+    padding-right: 20px;
+  }
+}
+
+.xl {
+  :deep(> *) {
+    width: 33.3%;
+    padding-right: 20px;
+  }
+}
+
+.xl-2 {
+  :deep(> *) {
+    width: 25%;
+    padding-right: 20px;
+  }
+}
+</style>