create-meadminjs 1.0.0

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

@@ -0,0 +1,322 @@
+<template>
+  <div class="tag-bar">
+    <a class="icon pointer" :class="{ 'is-disabled': scrollLeft <= 0 }" @click="back">
+      <mel-icon-d-arrow-left></mel-icon-d-arrow-left>
+    </a>
+    <el-scrollbar ref="scrollbarRef" view-class="list-parent" style="flex-grow: 1" @scroll="({ scrollLeft: left } : any) => (scrollLeft = left)">
+      <div ref="listRef" class="list">
+        <div
+          v-for="tag in tags"
+          :key="tag.fullPath"
+          ref="tagsRef"
+          class="item pointer"
+          :class="{ active: tag.fullPath === currentTag?.fullPath }"
+          @click="push(tag)"
+          @contextmenu.prevent="setContextmenu($event.currentTarget as any, tag)"
+        >
+          {{ $t(tag.meta.title!) }}
+          <div v-if="!tag.meta.affix" class="del-icon" @click.stop="close($event.currentTarget as any, tag)">
+            <mel-icon-close />
+          </div>
+          <div></div>
+        </div>
+      </div>
+    </el-scrollbar>
+    <div class="right">
+      <div class="icon pointer" :class="{ 'is-disabled': Math.ceil(scrollLeft) >= max }" @click="go">
+        <mel-icon-d-arrow-right></mel-icon-d-arrow-right>
+      </div>
+      <div v-if="themeConfig.tagBarRefresh" class="icon pointer" @click="reload">
+        <mel-icon-refresh :class="{ rotate: reoadUrl }"></mel-icon-refresh>
+      </div>
+      <div v-if="themeConfig.tagBarMenu" class="icon pointer" @click.stop="setContextmenu($event.currentTarget as any, currentTag)">
+        <mel-icon-menu></mel-icon-menu>
+      </div>
+    </div>
+  </div>
+  <contextmenu
+    v-if="virtualRef"
+    ref="contextmenuRef"
+    v-model:visible="showContextmenu"
+    :virtual-ref="virtualRef"
+    :current="contextmenuCurrent"
+    :model-value="tags"
+    @update:model-value="
+      ($event:any) => {
+        tags.splice(0, tags.length, ...$event);
+      }
+    "
+  >
+  </contextmenu>
+</template>
+<script setup lang="ts" name="TagBar">
+import { event, mitter } from '@/event';
+import { useRouteStore, useSettingStore } from '@/store';
+import { isExternal } from '@/utils/validate';
+import { ElScrollbar } from 'element-plus';
+import $ from 'jquery';
+import { resolve } from 'path-browserify';
+import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import contextmenu from './components/contextmenu.vue';
+const { themeConfig } = storeToRefs(useSettingStore());
+// 初始化tags
+const tags = reactive([] as RouteLocationNormalized[]);
+const resolvePath = (routePath: string, basePath = '') => {
+  if (isExternal(routePath) || isExternal(basePath)) {
+    return routePath;
+  }
+  return resolve(basePath, routePath);
+};
+const addAffixTags = (routes: RouteRecordRaw[], basePath = '') => {
+  routes.forEach((item) => {
+    if (item.meta?.affix && item.meta.title) {
+      tags.push({
+        fullPath: resolvePath(item.path, basePath),
+        hash: '',
+        query: {},
+        matched: [],
+        redirectedFrom: undefined,
+        meta: { ...item.meta },
+      } as unknown as RouteLocationNormalized);
+    }
+    if (item.children) {
+      addAffixTags(item.children, resolvePath(item.path, basePath));
+    }
+  });
+};
+addAffixTags(useRouteStore().routes);
+
+// 滚动设置
+const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
+const listRef = ref<HTMLDivElement>();
+let scrollLeft = ref(0);
+const setScrollLeft = (left: number, isAdd = false) => {
+  if (isAdd) {
+    left = left + scrollLeft.value;
+  }
+  $(scrollbarRef.value!.$el).find('.el-scrollbar__wrap').animate({ scrollLeft: left }, 300);
+};
+const tagsRef = ref([] as HTMLElement[]);
+const currentTag = ref<RouteLocationNormalized>({
+  fullPath: '/',
+  meta: { title: '' },
+} as RouteLocationNormalized);
+const route = useRoute();
+const max = ref(0);
+const setMax = () => {
+  max.value = listRef.value!.offsetWidth - scrollbarRef.value?.$el.clientWidth;
+};
+onMounted(() => {
+  mitter.on(event.RESIZE, setMax, true);
+  watch(tags, setMax, {
+    flush: 'post',
+    immediate: true,
+  });
+});
+const back = () => {
+  setScrollLeft(0 - scrollbarRef.value!.$el.clientWidth / 2, true);
+};
+const go = () => {
+  setScrollLeft(scrollbarRef.value!.$el.clientWidth / 2, true);
+};
+const jump = (index: number) => {
+  nextTick(() => {
+    if (tagsRef.value[index]) {
+      currentTag.value = tags[index];
+      if (index === 0) {
+        setScrollLeft(0);
+        return;
+      }
+      if (index === tagsRef.value.length - 1) {
+        max.value > 0 && setScrollLeft(max.value);
+        return;
+      }
+      const parentWidth = scrollbarRef.value!.$el.clientWidth;
+      const parentLeft = scrollLeft.value;
+      const parentRight = parentWidth + scrollLeft.value;
+      const lastLeft = tagsRef.value[index - 1].offsetLeft;
+      const offsetLeft = tagsRef.value[index].offsetLeft;
+      const offsetRight = offsetLeft + tagsRef.value[index].offsetWidth;
+      const nextLeft = tagsRef.value[index + 1].offsetLeft;
+      const nextRight = nextLeft + tagsRef.value[index + 1].offsetWidth;
+      if (parentWidth <= offsetRight - lastLeft || parentWidth <= nextRight - offsetLeft) {
+        setScrollLeft(offsetLeft);
+      } else if (lastLeft < parentLeft) {
+        setScrollLeft(lastLeft);
+      } else if (nextRight > parentRight) {
+        setScrollLeft(nextRight - parentWidth);
+      }
+    }
+  });
+};
+// 动态设置active
+const setTag = (route: RouteLocationNormalized) => {
+  if (route.meta.title && !route.meta.hideTag) {
+    let index = tags.findIndex((item) => item.fullPath === route.fullPath);
+    if (index > -1) {
+      return jump(index);
+    }
+    tags.push({ ...route });
+    return jump(tags.length - 1);
+  }
+};
+setTag(route);
+mitter.on(event.BEFORE_ROUTE_CHANGE, ({ to }) => setTag(to), true);
+const router = useRouter();
+const push = (route: RouteLocationNormalized) => {
+  if (route.fullPath !== currentTag.value!.fullPath) {
+    router.push(route.fullPath);
+  }
+};
+const contextmenuCurrent = ref(currentTag.value);
+const virtualRef = ref<HTMLElement>();
+const showContextmenu = ref(false);
+const contextmenuRef = ref<InstanceType<typeof contextmenu>>();
+const setContextmenu = (event: HTMLElement, current: RouteLocationNormalized, show = true) => {
+  virtualRef.value = event;
+  contextmenuCurrent.value = current;
+  showContextmenu.value = show;
+};
+const close = async (event: HTMLElement, current: RouteLocationNormalized) => {
+  setContextmenu(event, current, false);
+  await nextTick();
+  contextmenuRef.value?.closeCurrent();
+};
+const closeContextMenu = () => {
+  showContextmenu.value = false;
+};
+onMounted(() => {
+  document.body.addEventListener('click', closeContextMenu);
+});
+onBeforeUnmount(() => {
+  document.body.removeEventListener('click', closeContextMenu);
+});
+const reload = () => {
+  // 刷新
+  router.replace('/redirect/' + encodeURIComponent(route.fullPath));
+};
+const reoadUrl = ref('');
+watch(route, () => {
+  if (route.name == 'redirect') {
+    reoadUrl.value = route.params.path as string;
+  } else if (reoadUrl.value == route.fullPath) {
+    setTimeout(() => {
+      reoadUrl.value = '';
+    }, 500);
+  }
+});
+</script>
+<style lang="scss" scoped>
+.tag-bar {
+  border-bottom: 1px solid var(--el-border-color);
+  height: $header-tag-height;
+  display: flex;
+  align-items: center;
+  background-color: var(--el-bg-color);
+
+  .is-disabled {
+    color: var(--el-disabled-text-color) !important;
+    cursor: not-allowed;
+  }
+
+  .icon {
+    padding: 0 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid var(--el-border-color);
+    color: var(--el-text-color-regular);
+
+    .rotate {
+      animation: loading-rotate 1s linear infinite;
+    }
+  }
+
+  .icon:hover {
+    color: var(--el-text-color-primary);
+  }
+
+  .right {
+    display: flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    justify-self: right;
+    height: 100%;
+    border-left: 1px solid var(--el-border-color);
+  }
+
+  :deep(.list-parent) {
+    height: 100%;
+  }
+
+  :deep(.list) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    width: max-content;
+
+    .item {
+      border-right: 1px solid var(--el-border-color);
+      height: 100%;
+      align-items: center;
+      display: flex;
+      padding-left: 16px;
+      padding-right: 16px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      position: relative;
+
+      .del-icon {
+        height: 100%;
+        width: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        margin-right: -16px;
+        visibility: hidden;
+      }
+
+      .del-icon:hover {
+        font-size: 14px;
+      }
+    }
+
+    .item:first-child {
+      margin-left: 0;
+    }
+
+    .item:hover {
+      // background-color: rgba(var(--el-color-primary-rgb), 0.5);
+      background-color: rgba(var(--el-color-primary-rgb), 0.1);
+      color: var(--el-color-primary);
+
+      .del-icon {
+        visibility: unset;
+      }
+    }
+
+    .item.active {
+      // color: var(--el-color-primary);
+      background-color: rgba(var(--el-color-primary-rgb), 0.1);
+      color: var(--el-color-primary);
+    }
+
+    .item::after {
+      position: absolute;
+      content: '';
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: var(--el-color-primary);
+      width: 0;
+    }
+
+    .item:hover::after,
+    .item.active::after {
+      width: 100%;
+      transition: width 0.45s;
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/topBar/components/left.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-space class="left">
+    <div></div>
+    <Expand></Expand>
+    <el-scrollbar v-if="!globalStore.isMobile && themeConfig.breadcrumb" :min-size="10" wrap-style="display:flex;align-items:center">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index === breadcrumbList.length - 1 || !item.redirect ? undefined : item">{{
+          $t(item.meta!.title!)
+        }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-scrollbar>
+  </el-space>
+</template>
+<script setup lang="ts" name="Left">
+import { event, mitter } from '@/event';
+import Expand from '@/layout/components/expand.vue';
+import { useGlobalStore, useRouteStore, useSettingStore } from '@/store';
+import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+const { themeConfig } = storeToRefs(useSettingStore());
+const globalStore = useGlobalStore();
+const breadcrumbList = ref([] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[]);
+const route = useRoute();
+const { routes } = storeToRefs(useRouteStore());
+const setBreadcrumbList = (route: RouteLocationNormalized) => {
+  const list = [] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[];
+  let temp = { children: routes.value } as unknown as RouteRecordRaw;
+  route.meta.menuIndex!.forEach((item) => {
+    temp = temp.children![item];
+    if (temp.meta?.title && temp.meta.breadcrumb !== false && (temp.meta.breadcrumb || temp.children?.filter((v) => v.meta?.breadcrumb !== false).length !== 1)) {
+      list.push({
+        name: temp.name,
+        path: temp.path,
+        meta: temp.meta,
+        redirect: temp.redirect === route.path ? undefined : temp.redirect,
+      });
+    }
+  });
+  breadcrumbList.value = list;
+};
+setBreadcrumbList(route);
+mitter.on(event.BEFORE_ROUTE_CHANGE, ({ to }) => setBreadcrumbList(to), true);
+</script>
+<style lang="scss" scoped>
+.left {
+  height: 100%;
+
+  .fold-expand {
+    font-size: 20px;
+  }
+
+  &:deep(.el-breadcrumb__inner.is-link) {
+    font-weight: normal;
+  }
+
+  &:deep(.el-space__item:nth-child(3)) {
+    height: 80%;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/topBar/components/right/components/messageBox.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-dropdown class="message-box" max-height="500px" trigger="click">
+    <div class="flex-center pointer">
+      <el-badge :is-dot="isDot">
+        <mel-icon-bell class="message-icon"></mel-icon-bell>
+      </el-badge>
+    </div>
+    <template #dropdown>
+      <div class="message-tabs">
+        <div class="message-header">
+          <el-link>{{ $t('全部') }}{{ $t(' ') }}{{ $t('已读') }}</el-link>
+          <el-link>{{ $t('查看') }}{{ $t(' ') }}{{ $t('更多') }}</el-link>
+        </div>
+        <el-tabs model-value="notify">
+          <el-tab-pane :label="$t('通知')" name="notify">
+            <div v-for="o in 4" :key="o" class="text notify-item">
+              {{ 'List item ' + o }}
+              <div class="date">2022/08/08</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('消息')" name="message">
+            <div v-for="o in 4" :key="o" class="text notify-item">
+              {{ 'List item ' + o }}
+              <div class="date">2022/08/08</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('待办')" name="agenda">
+            <div v-for="o in 4" :key="o" class="text notify-item">
+              {{ 'List item ' + o }}
+              <div class="date">2022/08/08</div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+<script setup lang="ts" name="MessageBox">
+const isDot = ref(true);
+</script>
+<style lang="scss" scoped>
+.message-box {
+  .flex-center {
+    padding: 0 10px;
+
+    .message-icon {
+      height: 25px;
+      line-height: 25px;
+      font-size: 1.3em;
+    }
+  }
+}
+
+.message-tabs {
+  padding: 15px 10px;
+  height: 300px;
+  font-size: 14px;
+
+  .message-header {
+    display: flex;
+    justify-content: space-between;
+
+    :deep(.el-link) {
+      font-size: 0.85em !important;
+    }
+  }
+
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+  }
+
+  .notify-item {
+    padding: 5px 0;
+    border-bottom: 1px solid #eeeeee;
+
+    .date {
+      font-size: 12px;
+      color: var(--el-text-color-placeholder);
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/topBar/components/right/components/user.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dropdown class="me-size-select" trigger="click" max-height="500px">
+    <div class="flex-center pointer" v-bind="$attrs">
+      <el-avatar size="small" class="avatar" :src="userStore.user.avatar" />
+      <span v-if="!globalStore.isMobile" class="ellipsis-2">{{ userStore.user.name }}</span>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <router-link to="/">
+          <el-dropdown-item>
+            {{ $t('首页') }}
+          </el-dropdown-item>
+        </router-link>
+        <a href="https://github.com/meadmin-cn/meadmin-template">
+          <el-dropdown-item>
+            {{ $t('Github') }}
+          </el-dropdown-item>
+        </a>
+        <a href="https://gitee.com/meadmin-cn/meadmin-template">
+          <el-dropdown-item>
+            {{ $t('Gitee') }}
+          </el-dropdown-item>
+        </a>
+        <a href="https://meadmin-cn.github.io/meadmin-template-doc/">
+          <el-dropdown-item>
+            {{ $t('文档') }}
+          </el-dropdown-item>
+        </a>
+        <el-dropdown-item divided @click="userStore.logOut()">
+          {{ $t('退出登录') }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts" name="User">
+import { useGlobalStore, useUserStore } from '@/store';
+const userStore = useUserStore();
+const globalStore = useGlobalStore();
+</script>
+<style lang="scss" scoped>
+.flex-center {
+  max-width: 120px;
+  padding: 0 10px;
+  line-height: 120%;
+
+  .avatar {
+    margin-right: 5px;
+    flex-shrink: 0;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/topBar/components/right/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="right">
+    <div></div>
+    <me-search-menu v-if="themeConfig.showSearchMenu" class="item"></me-search-menu>
+    <me-dark-switch v-if="themeConfig.showDark" class="item no-hover"></me-dark-switch>
+    <me-locale-select v-if="localeConfig.localeList.length > 1" class="item"></me-locale-select>
+    <me-size-select v-if="themeConfig.showSize" class="item"></me-size-select>
+    <message-box class="item"></message-box>
+    <user class="item"></user>
+    <me-setting v-if="themeConfig.showSetting" class="item"></me-setting>
+  </div>
+</template>
+<script setup lang="ts" name="Right">
+import { localeConfig } from '@/config';
+import { useSettingStore } from '@/store';
+import MessageBox from './components/messageBox.vue';
+import User from './components/user.vue';
+const { themeConfig } = storeToRefs(useSettingStore());
+</script>
+<style lang="scss" scoped>
+.right {
+  font-size: 14px;
+  height: 100%;
+  display: flex;
+
+  .item {
+    height: 100%;
+  }
+
+  .item:hover {
+    background-color: var(--el-fill-color);
+  }
+
+  .no-hover:hover {
+    background-color: unset;
+  }
+
+  &:deep(.el-space__item) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/topBar/components/topMenu.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="position: relative; height: 100%">
+    <el-menu class="top-menu" :default-active="activeMenu" mode="horizontal">
+      <layout-menu-item v-for="item in menus" :key="item.path" :no-child="true" :item="item" :collapse="themeConfig.menuCollapse" />
+    </el-menu>
+  </div>
+</template>
+
+<script setup lang="ts" name="TopMenu">
+import { useRouteStore, useSettingStore } from '@/store';
+const { themeConfig } = storeToRefs(useSettingStore());
+const routeStore = useRouteStore();
+const route = useRoute();
+const menus = computed(() => {
+  return routeStore.routes.filter((item) => {
+    return item.meta && !item.meta.hideMenu && item.meta.title;
+  });
+});
+const activeMenu = computed(() => {
+  return route.meta.menuIndex?.[0] + '';
+});
+</script>
+<style lang="scss" scoped>
+.top-menu {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  right: 0;
+  border-bottom: 0;
+  --el-menu-item-height: #{$header-top-height};
+}
+</style>

package/template/meadmin/view/admin/src/layout/components/header/components/topBar/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="top-bar">
+    <Title v-if="menuType === 'top'"></Title>
+    <Left v-else></Left>
+    <top-menu v-if="menuType === 'top'" class="menu"></top-menu>
+    <Right></Right>
+  </div>
+</template>
+
+<script setup lang="ts" name="TopBar">
+import Title from '@/layout/components/title.vue';
+import { useSettingStore } from '@/store';
+import Left from './components/left.vue';
+import Right from './components/right/index.vue';
+import TopMenu from './components/topMenu.vue';
+const { menuType } = storeToRefs(useSettingStore());
+</script>
+<style lang="scss" scoped>
+.top-bar {
+  height: $header-top-height;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--el-border-color);
+  overflow: hidden;
+  .menu {
+    flex: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="layout-header">
+    <top-bar v-if="themeConfig.topBar"></top-bar>
+  </div>
+</template>
+<script setup lang="ts" name="LayoutHeader">
+import { useSettingStore } from '@/store';
+import TopBar from './components/topBar/index.vue';
+const { themeConfig } = storeToRefs(useSettingStore());
+</script>
+<style lang="scss" scoped>
+.layout-header {
+  background-color: var(--el-bg-color);
+}
+</style>