feat: add pure-admin-thin

src/layout/components/sidebar/breadCrumb.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+
+const levelList = ref([]);
+const route = useRoute();
+const router = useRouter();
+
+const isDashboard = (route: RouteLocationMatched): boolean | string => {
+  const name = route && (route.name as string);
+  if (!name) {
+    return false;
+  }
+  return name.trim().toLocaleLowerCase() === "welcome".toLocaleLowerCase();
+};
+
+const getBreadcrumb = (): void => {
+  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  const first = matched[0];
+  if (!isDashboard(first)) {
+    matched = [
+      {
+        path: "/welcome",
+        parentPath: "/",
+        meta: { title: "message.hshome" }
+      } as unknown as RouteLocationMatched
+    ].concat(matched);
+  }
+  levelList.value = matched.filter(
+    item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+  );
+};
+
+getBreadcrumb();
+
+watch(
+  () => route.path,
+  () => getBreadcrumb()
+);
+
+const handleLink = (item: RouteLocationMatched): any => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect.toString());
+    return;
+  }
+  router.push(path);
+};
+</script>
+
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group appear name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ $t(item.meta.title) }}</span
+        >
+        <a v-else @click.prevent="handleLink(item)">
+          {{ $t(item.meta.title) }}
+        </a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/layout/components/sidebar/hamBurger.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+export interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div :class="classes.container" @click="toggleClick">
+    <svg
+      :class="['hamburger', props.isActive ? 'is-active' : '']"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
+    </svg>
+  </div>
+</template>
+
+<style module="classes" scoped>
+.container {
+  padding: 0 15px;
+}
+</style>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/layout/components/sidebar/horizontal.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import {
+  computed,
+  unref,
+  watch,
+  nextTick,
+  onMounted,
+  getCurrentInstance
+} from "vue";
+import { useI18n } from "vue-i18n";
+import { emitter } from "/@/utils/mitt";
+import { templateRef } from "@vueuse/core";
+import SidebarItem from "./sidebarItem.vue";
+import { algorithm } from "/@/utils/algorithm";
+import screenfull from "../screenfull/index.vue";
+import { useRoute, useRouter } from "vue-router";
+import { storageSession } from "/@/utils/storage";
+import { deviceDetection } from "/@/utils/deviceDetection";
+import globalization from "/@/assets/svg/globalization.svg";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+const instance =
+  getCurrentInstance().appContext.config.globalProperties.$storage;
+
+const title =
+  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
+
+const menuRef = templateRef<ElRef | null>("menu", null);
+const routeStore = usePermissionStoreHook();
+const route = useRoute();
+const router = useRouter();
+const routers = useRouter().options.routes;
+let usename = storageSession.getItem("info")?.username;
+const { locale, t } = useI18n();
+
+watch(
+  () => locale.value,
+  () => {
+    //@ts-ignore
+    // 动态title
+    document.title = t(unref(route.meta.title));
+  }
+);
+
+// 退出登录
+const logout = (): void => {
+  storageSession.removeItem("info");
+  router.push("/login");
+};
+
+function onPanel() {
+  emitter.emit("openPanel");
+}
+
+const activeMenu = computed((): string => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    // @ts-ignore
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const menuSelect = (indexPath: string): void => {
+  let parentPath = "";
+  let parentPathIndex = indexPath.lastIndexOf("/");
+  if (parentPathIndex > 0) {
+    parentPath = indexPath.slice(0, parentPathIndex);
+  }
+  // 找到当前路由的信息
+  function findCurrentRoute(routes) {
+    return routes.map(item => {
+      if (item.path === indexPath) {
+        // 切换左侧菜单 通知标签页
+        emitter.emit("changLayoutRoute", {
+          indexPath,
+          parentPath
+        });
+      } else {
+        if (item.children) findCurrentRoute(item.children);
+      }
+    });
+  }
+  findCurrentRoute(algorithm.increaseIndexes(routers));
+};
+
+function backHome() {
+  router.push("/welcome");
+}
+
+function handleResize() {
+  // @ts-ignore
+  menuRef.value.handleResize();
+}
+
+// 简体中文
+function translationCh() {
+  instance.locale = { locale: "zh" };
+  locale.value = "zh";
+  handleResize();
+}
+
+// English
+function translationEn() {
+  instance.locale = { locale: "en" };
+  locale.value = "en";
+  handleResize();
+}
+
+onMounted(() => {
+  nextTick(() => {
+    handleResize();
+  });
+});
+</script>
+
+<template>
+  <div class="horizontal-header">
+    <div class="horizontal-header-left" @click="backHome">
+      <i class="fa fa-optin-monster"></i>
+      <h4>{{ title }}</h4>
+    </div>
+    <el-menu
+      ref="menu"
+      :default-active="activeMenu"
+      unique-opened
+      router
+      class="horizontal-header-menu"
+      mode="horizontal"
+      @select="menuSelect"
+    >
+      <sidebar-item
+        v-for="route in routeStore.wholeRoutes"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 全屏 -->
+      <screenfull v-show="!deviceDetection()" />
+      <!-- 国际化 -->
+      <el-dropdown trigger="click">
+        <globalization />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="{
+                background: locale === 'zh' ? '#1b2a47' : '',
+                color: locale === 'zh' ? '#f4f4f5' : '#000'
+              }"
+              @click="translationCh"
+              >简体中文</el-dropdown-item
+            >
+            <el-dropdown-item
+              :style="{
+                background: locale === 'en' ? '#1b2a47' : '',
+                color: locale === 'en' ? '#f4f4f5' : '#000'
+              }"
+              @click="translationEn"
+              >English</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 退出登陆 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link">
+          <img
+            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
+          />
+          <p>{{ usename }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
+              $t("message.hsLoginOut")
+            }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <i
+        class="el-icon-setting"
+        :title="$t('message.hssystemSet')"
+        @click="onPanel"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.translation {
+  .el-dropdown-menu__item {
+    padding: 0 40px !important;
+  }
+
+  .el-dropdown-menu__item:focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    color: #606266;
+    background: #f0f0f0;
+  }
+}
+
+.logout {
+  .el-dropdown-menu__item {
+    padding: 0 18px !important;
+  }
+
+  .el-dropdown-menu__item:focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    color: #606266;
+    background: #f0f0f0;
+  }
+}
+</style>

src/layout/components/sidebar/logo.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { getCurrentInstance } from "vue";
+const props = defineProps({
+  collapse: Boolean
+});
+
+const title =
+  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
+</script>
+
+<template>
+  <div class="sidebar-logo-container" :class="{ collapse: props.collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="props.collapse"
+        key="props.collapse"
+        :title="title"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <i class="fa fa-optin-monster"></i>
+        <h1 class="sidebar-title">{{ title }}</h1>
+      </router-link>
+      <router-link
+        v-else
+        key="expand"
+        :title="title"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <i class="fa fa-optin-monster"></i>
+        <h1 class="sidebar-title">{{ title }}</h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  text-align: center;
+  overflow: hidden;
+
+  .sidebar-logo-link {
+    height: 100%;
+
+    .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #1890ff;
+      font-weight: 600;
+      font-size: 20px;
+      margin-top: 16px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+    }
+
+    .fa-optin-monster {
+      font-size: 30px;
+      color: #1890ff;
+      margin-top: 5px;
+    }
+  }
+
+  .collapse {
+    .sidebar-logo {
+      margin-right: 0;
+    }
+  }
+}
+</style>

src/layout/components/sidebar/sidebarItem.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import path from "path";
+import { PropType, ref } from "vue";
+import { childrenType } from "../../types";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<childrenType>
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ""
+  }
+});
+
+const onlyOneChild: childrenType = ref(null);
+
+function hasOneShowingChild(
+  children: childrenType[] = [],
+  parent: childrenType
+) {
+  const showingChildren = children.filter((item: any) => {
+    onlyOneChild.value = item;
+    return true;
+  });
+
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
+    return true;
+  }
+  return false;
+}
+
+function resolvePath(routePath) {
+  return path.resolve(props.basePath, routePath);
+}
+</script>
+
+<template>
+  <template
+    v-if="
+      hasOneShowingChild(props.item.children, props.item) &&
+      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+    "
+  >
+    <el-menu-item
+      :index="resolvePath(onlyOneChild.path)"
+      :class="{ 'submenu-title-noDropdown': !isNest }"
+    >
+      <i
+        :class="
+          onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
+        "
+      />
+      <template #title>
+        <span>{{ $t(onlyOneChild.meta.title) }}</span>
+        <Icon
+          v-if="onlyOneChild.meta.extraIcon"
+          :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
+          :content="`${onlyOneChild.meta.extraIcon.name}`"
+        />
+      </template>
+    </el-menu-item>
+  </template>
+
+  <el-sub-menu
+    v-else
+    ref="subMenu"
+    :index="resolvePath(props.item.path)"
+    popper-append-to-body
+  >
+    <template #title>
+      <i :class="props.item.meta.icon"></i>
+      <span>{{ $t(props.item.meta.title) }}</span>
+      <Icon
+        v-if="props.item.meta.extraIcon"
+        :svg="props.item.meta.extraIcon.svg ? true : false"
+        :content="`${props.item.meta.extraIcon.name}`"
+      />
+    </template>
+    <sidebar-item
+      v-for="child in props.item.children"
+      :key="child.path"
+      :is-nest="true"
+      :item="child"
+      :base-path="resolvePath(child.path)"
+      class="nest-menu"
+    />
+  </el-sub-menu>
+</template>

src/layout/components/sidebar/vertical.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import Logo from "./logo.vue";
+import { emitter } from "/@/utils/mitt";
+import SidebarItem from "./sidebarItem.vue";
+import { algorithm } from "/@/utils/algorithm";
+import { storageLocal } from "/@/utils/storage";
+import { useRoute, useRouter } from "vue-router";
+import { computed, ref, onBeforeMount } from "vue";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+const route = useRoute();
+const pureApp = useAppStoreHook();
+const router = useRouter().options.routes;
+const routeStore = usePermissionStoreHook();
+const showLogo = ref(storageLocal.getItem("logoVal") || "1");
+const isCollapse = computed(() => {
+  return !pureApp.getSidebarStatus;
+});
+const activeMenu = computed((): string => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    // @ts-ignore
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const menuSelect = (indexPath: string): void => {
+  let parentPath = "";
+  let parentPathIndex = indexPath.lastIndexOf("/");
+  if (parentPathIndex > 0) {
+    parentPath = indexPath.slice(0, parentPathIndex);
+  }
+  // 找到当前路由的信息
+  // eslint-disable-next-line no-inner-declarations
+  function findCurrentRoute(routes) {
+    return routes.map(item => {
+      if (item.path === indexPath) {
+        // 切换左侧菜单 通知标签页
+        emitter.emit("changLayoutRoute", {
+          indexPath,
+          parentPath
+        });
+      } else {
+        if (item.children) findCurrentRoute(item.children);
+      }
+    });
+  }
+  findCurrentRoute(algorithm.increaseIndexes(router));
+};
+
+onBeforeMount(() => {
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
+</script>
+
+<template>
+  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
+    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        unique-opened
+        router
+        :collapse-transition="false"
+        mode="vertical"
+        @select="menuSelect"
+      >
+        <sidebar-item
+          v-for="route in routeStore.wholeRoutes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>