create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/hooks/actionModel.ts

@@ -0,0 +1,54 @@
+import { useGlobalStore } from '@/store';
+import { Component, onBeforeUnmount } from 'vue';
+/**
+ * 创建弹窗action调用
+ * @param component 组件
+ * @param closeRemove 关闭是是否移除组件（默认是）
+ * @param showKey 组件否展示绑定的v-model对应key
+ * @returns
+ */
+export const useActionModel = <T extends Component, const K extends Exclude<string, 'onClosed'> = 'modelValue'>(component: T, closeRemove = true, showKey = 'modelValue' as K) => {
+  const show = ref(false);
+  let key = '' as string | number | symbol;
+  const globalStore = useGlobalStore();
+  const close = () => {
+    show.value = false;
+    if (closeRemove && key) {
+      globalStore.removeGlobalComponents(key); //关闭时移除当前组件
+      key = '';
+    }
+  };
+  const open = (props?: Omit<ComponentProps<T>, K>) => {
+    closeRemove && close();
+    show.value = true;
+    if (!key) {
+      key = globalStore.addGlobalComponents(
+        component,
+        computed(() => ({
+          [showKey]: show.value,
+          ...props,
+          [`onUpdate:${showKey}`]: (value: boolean) => {
+            show.value = value;
+          },
+          onClosed: () => {
+            close();
+            if (typeof (props as ComponentProps<T>)?.onClosed === 'function') {
+              (props as ComponentProps<T>).onClosed();
+            }
+          },
+        })),
+      );
+    }
+  };
+  onBeforeUnmount(() => {
+    if (key) {
+      globalStore.removeGlobalComponents(key); //销毁前移除组件
+      key = '';
+    }
+  });
+  return {
+    open: open,
+    close: close,
+  };
+};
+export default useActionModel;

package/template/meadmin/view/admin/src/hooks/core/computedProxy.ts

@@ -0,0 +1,10 @@
+//计算属性代理对象key 对其进行双向绑定
+export const computedProxy = <O extends Record<any, any>, K extends keyof O>(obj: O, key: K) => {
+  return computed<O[K]>({
+    get: () => obj[key],
+    set: (val) => {
+      obj[key] = val;
+    },
+  });
+};
+export default computedProxy;

package/template/meadmin/view/admin/src/hooks/index.ts

@@ -0,0 +1,24 @@
+import { proxyValue } from '@/utils/helper';
+import { cloneDeep } from 'lodash-es';
+export * from './actionModel.js';
+/**
+ * 用于解耦v-model 对象/数组
+ * 深度代理 对象/数组 响应后触发update方法并传入深copy值
+ * @param v
+ * @param update
+ * @returns
+ */
+export const computedModel = <T extends Record<string | number, any> | any[]>(v: () => T, update: (value: T) => void) => {
+  const data = shallowRef({} as T);
+  watch(
+    v,
+    () => {
+      const value = cloneDeep(toRaw(v()));
+      data.value = proxyValue(value, () => {
+        update(cloneDeep(value));
+      });
+    },
+    { immediate: true, deep: true },
+  );
+  return data;
+};

package/template/meadmin/view/admin/src/icons/index.ts

@@ -0,0 +1,52 @@
+import * as elementPlusIconsVue from '@element-plus/icons-vue';
+import { upperFirst } from 'lodash-es';
+import path from 'path-browserify';
+import { App, Component, h } from 'vue';
+
+export function installIcon(app: App) {
+  function componentIcon(name: string, iconComponent: Component) {
+    app.component(
+      name,
+      defineComponent({
+        props: {
+          size: [Number, String],
+          color: String,
+        },
+        setup(props) {
+          let fontSize: string | undefined;
+          if (props.size) {
+            if (typeof props.size === 'string') {
+              fontSize = props.size;
+            } else if (typeof props.size === 'number') {
+              fontSize = `${props.size}px`;
+            }
+          }
+          return () =>
+            h(
+              'i',
+              {
+                class: 'el-icon',
+                style: {
+                  fontSize,
+                  color: props.color,
+                },
+              },
+              h(iconComponent),
+            );
+        },
+      }),
+    );
+  }
+  // 注册element icons
+  for (const [key, component] of Object.entries(elementPlusIconsVue)) {
+    componentIcon(`MelIcon${key}`, component);
+  }
+  // 注册自定义的svg icons
+  const svgModules = import.meta.glob('./svg/*.svg', {
+    import: 'default',
+    eager: true,
+  });
+  for (const [key, component] of Object.entries(<Record<string, Component>>svgModules)) {
+    componentIcon('MeIcon' + upperFirst(path.parse(key).name), component);
+  }
+}

package/template/meadmin/view/admin/src/icons/svg/dashboard.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 128 100">
+    <path
+        d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z">
+    </path>
+</svg>

package/template/meadmin/view/admin/src/icons/svg/moon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+    <path
+        d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
+        fill="currentColor"></path>
+</svg>

package/template/meadmin/view/admin/src/icons/svg/size.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 128 128">
+    <path
+        d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z">
+    </path>
+</svg>

package/template/meadmin/view/admin/src/icons/svg/sunny.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+    <path
+        d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
+        fill="currentColor"></path>
+</svg>

package/template/meadmin/view/admin/src/icons/svg/translation.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <path fill="currentColor"
+        d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z">
+    </path>
+</svg>

package/template/meadmin/view/admin/src/layout/components/expand.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <mel-icon-expand v-if="themeConfig.menuCollapse" class="fold-expand pointer" @click="setMenuCollapse"> </mel-icon-expand>
+    <mel-icon-fold v-else class="fold-expand pointer" @click="setMenuCollapse"></mel-icon-fold>
+  </div>
+</template>
+
+<script setup lang="ts" name="Expand">
+import { useSettingStore } from '@/store';
+const { themeConfig } = storeToRefs(useSettingStore());
+const setMenuCollapse = () => {
+  themeConfig.value.menuCollapse = !themeConfig.value.menuCollapse;
+};
+</script>
+<style lang="scss" scoped>
+.expand {
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/tagBar/components/contextmenu.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-popover popper-class="me-contextmenu-tooltip el-dropdown__popper" :visible="visible" :virtual-ref="virtualRef" virtual-triggering pure>
+    <ul v-click-outside="closeMenu" class="el-dropdown-menu el-dropdown-menu--default" v-bind="$attrs" style="outline: none" role="menuitem">
+      <li class="el-dropdown-menu__item" @click="reload"><mel-icon-refresh /> {{ $t('重新加载') }}</li>
+      <li
+        :class="{
+          'el-dropdown-menu__item': true,
+          'is-disabled': current.meta.affix || modelValue.length === 1,
+        }"
+        @click="closeCurrent"
+      >
+        <mel-icon-close /> {{ $t('关闭') }}{{ $t(' ') }}{{ $t('当前') }}
+      </li>
+      <li
+        :class="{
+          'el-dropdown-menu__item': true,
+          'is-disabled': index <= canCloseFirst,
+        }"
+        @click="closeLeft"
+      >
+        <mel-icon-download style="transform: rotate(90deg)" />{{ $t('关闭') }}{{ $t(' ') }}{{ $t('左侧') }}
+      </li>
+      <li
+        :class="{
+          'el-dropdown-menu__item': true,
+          'is-disabled': modelValue.length === index + 1,
+        }"
+        @click="closeRight"
+      >
+        <mel-icon-download style="transform: rotate(270deg)" />{{ $t('关闭') }}{{ $t(' ') }}{{ $t('右侧') }}
+      </li>
+      <li
+        :class="{
+          'el-dropdown-menu__item': true,
+          'is-disabled': index <= canCloseFirst && modelValue.length === index + 1,
+        }"
+        @click="closeOther"
+      >
+        <mel-icon-document-delete /> {{ $t('关闭') }}{{ $t(' ') }}{{ $t('其他') }}
+      </li>
+      <li
+        :class="{
+          'el-dropdown-menu__item': true,
+          'is-disabled': canCloseFirst === Infinity,
+        }"
+        @click="closeAll"
+      >
+        <mel-icon-minus /> {{ $t('关闭') }}{{ $t(' ') }}{{ $t('全部') }}
+      </li>
+    </ul>
+  </el-popover>
+</template>
+<script setup lang="ts" name="Contextmenu">
+import { useRouteStore } from '@/store';
+import { PropType } from 'vue';
+import { RouteLocationNormalized } from 'vue-router';
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Array as PropType<RouteLocationNormalized[]>,
+  },
+  current: {
+    required: true,
+    type: Object as PropType<RouteLocationNormalized>,
+  },
+  virtualRef: {
+    required: true,
+    type: Object as PropType<HTMLElement>,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RouteLocationNormalized[]): void;
+  (e: 'update:visible', value: boolean): void;
+}>();
+const tags = ref([] as RouteLocationNormalized[]);
+watch(
+  () => props.modelValue,
+  () => {
+    tags.value = [...props.modelValue];
+  },
+  { immediate: true, deep: true },
+);
+const router = useRouter();
+const route = useRoute();
+let index = computed(() => tags.value.indexOf(props.current));
+let canCloseFirst = computed(() => {
+  const index = tags.value.findIndex((item) => !item.meta.affix);
+  return index > -1 ? index : Infinity;
+});
+const closeMenu = async () => {
+  emit('update:visible', false);
+  await nextTick();
+};
+//清除清除tab对应缓存
+const routeStore = useRouteStore();
+const cleanCache = async (start: number, end: number) => {
+  for (let i = start; i <= end; i++) {
+    routeStore.cacheFullPath.delete(tags.value[i].fullPath);
+  }
+};
+// 刷新
+const reload = () => {
+  router.replace('/redirect/' + encodeURIComponent(props.current.fullPath));
+  closeMenu();
+};
+// 关闭当前
+const closeCurrent = async () => {
+  if (tags.value.length === 0 || props.current.meta.affix) {
+    return;
+  }
+  await closeMenu();
+  const nowIndex = index.value;
+  cleanCache(index.value, index.value);
+  tags.value.splice(index.value, 1);
+  emit('update:modelValue', [...tags.value]);
+  if (props.current.fullPath === route.fullPath) {
+    router.push(tags.value[Math.min(tags.value.length - 1, nowIndex)].fullPath);
+  }
+};
+// 关闭左侧
+const closeLeft = async () => {
+  if (index.value <= canCloseFirst.value) {
+    return;
+  }
+  await closeMenu();
+  cleanCache(canCloseFirst.value, index.value);
+  tags.value.splice(canCloseFirst.value, index.value - canCloseFirst.value);
+  emit('update:modelValue', [...tags.value]);
+  if (tags.value.findIndex((item) => item.fullPath === route.fullPath) === -1) {
+    router.push(tags.value[index.value].fullPath);
+  }
+};
+// 关闭右侧
+const closeRight = async () => {
+  if (index.value + 1 === tags.value.length) {
+    return;
+  }
+  await closeMenu();
+  cleanCache(index.value + 1, tags.value.length - 1);
+  tags.value.splice(index.value + 1);
+  emit('update:modelValue', [...tags.value]);
+  if (tags.value.findIndex((item) => item.fullPath === route.fullPath) === -1) {
+    router.push(tags.value[index.value].fullPath);
+  }
+};
+// 关闭其他
+const closeOther = () => {
+  closeLeft();
+  closeRight();
+};
+// 关闭全部
+const closeAll = async () => {
+  if (canCloseFirst.value === Infinity) {
+    return;
+  }
+  await closeMenu();
+  cleanCache(canCloseFirst.value, tags.value.length - 1);
+  tags.value.splice(canCloseFirst.value);
+  emit('update:modelValue', [...tags.value]);
+  if (tags.value.findIndex((item) => item.fullPath === route.fullPath) === -1) {
+    router.push(tags.value[tags.value.length - 1].fullPath);
+  }
+};
+defineExpose({ closeAll, closeCurrent, closeLeft, closeMenu, closeOther, closeRight });
+</script>
+<style lang="scss">
+.me-contextmenu-tooltip {
+  width: max-content !important;
+  min-width: unset !important;
+
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    background-color: var(--el-dropdown-menuItem-hover-fill);
+    color: var(--el-dropdown-menuItem-hover-color);
+  }
+}
+</style>