chore: 同步完整版代码

2023-02-28 22:42:12 +08:00
parent 2c887ee1d9
commit 1e30b31be2
34 changed files with 1552 additions and 1436 deletions
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -2,6 +2,7 @@
 import { ListItem } from "./data";
 import { ref, PropType, nextTick } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
+import { deviceDetection } from "@pureadmin/utils";

 const props = defineProps({
  noticeItem: {
@@ -15,6 +16,7 @@ const titleTooltip = ref(false);
 const descriptionRef = ref(null);
 const descriptionTooltip = ref(false);
 const { tooltipEffect } = useNav();
+const isMobile = deviceDetection();

 function hoverTitle() {
  nextTick(() => {
@@ -63,6 +65,7 @@ function hoverDescription(event, description) {
          :disabled="!titleTooltip"
          :content="props.noticeItem.title"
          placement="top-start"
+          :enterable="!isMobile"
        >
          <div
            ref="titleRef"
--- a/src/layout/components/screenfull/index.vue
+++ b/src/layout/components/screenfull/index.vue
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useFullscreen } from "@vueuse/core";
-
-const { isFullscreen, toggle } = useFullscreen();
-</script>
-
-<template>
-  <div
-    class="screen-full w-[36px] h-[48px] flex-ac cursor-pointer navbar-bg-hover"
-    @click="toggle"
-  >
-    <FontIcon
-      :title="isFullscreen ? '退出全屏' : '全屏'"
-      :icon="isFullscreen ? 'team-iconexit-fullscreen' : 'team-iconfullscreen'"
-    />
-  </div>
-</template>
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -3,10 +3,9 @@ import { useRouter } from "vue-router";
 import { cloneDeep } from "@pureadmin/utils";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
-import { deleteChildren } from "@/utils/tree";
 import { useNav } from "@/layout/hooks/useNav";
+import { ref, computed, shallowRef } from "vue";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
-import { ref, watch, computed, nextTick, shallowRef } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import Search from "@iconify-icons/ep/search";

@@ -32,7 +31,7 @@ const handleSearch = useDebounceFn(search, 300);

 /** 菜单树形结构 */
 const menusData = computed(() => {
-  return deleteChildren(cloneDeep(usePermissionStoreHook().wholeMenus));
+  return cloneDeep(usePermissionStoreHook().wholeMenus);
 });

 const show = computed({
@@ -44,14 +43,6 @@ const show = computed({
  }
 });

-watch(show, async val => {
-  if (val) {
-    /** 自动聚焦 */
-    await nextTick();
-    inputRef.value?.focus();
-  }
-});
-
 /** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
 function flatTree(arr) {
  const res = [];
@@ -135,9 +126,11 @@ onKeyStroke("ArrowDown", handleDown);
 <template>
  <el-dialog
    top="5vh"
-    :width="device === 'mobile' ? '80vw' : '50vw'"
    v-model="show"
+    :width="device === 'mobile' ? '80vw' : '50vw'"
    :before-close="handleClose"
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
  >
    <el-input
      ref="inputRef"
--- a/src/layout/components/sidebar/extraIcon.vue
+++ b/src/layout/components/sidebar/extraIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toRaw } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+const props = defineProps({
+  extraIcon: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.extraIcon" class="flex justify-center items-center">
+    <component
+      :is="useRenderIcon(toRaw(props.extraIcon))"
+      class="w-[30px] h-[30px]"
+    />
+  </div>
+</template>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -40,8 +40,8 @@ watch(
    class="horizontal-header"
  >
    <div class="horizontal-header-left" @click="backHome">
-      <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
-      <h4>{{ title }}</h4>
+      <img src="/logo.svg" alt="logo" />
+      <span>{{ title }}</span>
    </div>
    <el-menu
      router
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -24,7 +24,7 @@ const iconClass = computed(() => {
    "align-middle",
    "text-primary",
    "cursor-pointer",
-    "duration-[360ms]",
+    "duration-[100ms]",
    "hover:text-primary",
    "dark:hover:!text-white"
  ];
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -18,7 +18,7 @@ const { title } = useNav();
        class="sidebar-logo-link"
        to="/"
      >
-        <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
+        <img src="/logo.svg" alt="logo" />
        <span class="sidebar-title">{{ title }}</span>
      </router-link>
      <router-link
@@ -28,7 +28,7 @@ const { title } = useNav();
        class="sidebar-logo-link"
        to="/"
      >
-        <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
+        <img src="/logo.svg" alt="logo" />
        <span class="sidebar-title">{{ title }}</span>
      </router-link>
    </transition>
@@ -37,37 +37,33 @@ const { title } = useNav();

 <style lang="scss" scoped>
 .sidebar-logo-container {
-  position: relative;
  width: 100%;
  height: 48px;
-  text-align: center;
  overflow: hidden;
+  position: relative;

  .sidebar-logo-link {
    height: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-top: 5px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    img {
+      height: 32px;
+      display: inline-block;
+    }

    .sidebar-title {
-      display: block;
-      width: 160px;
+      height: 32px;
+      line-height: 32px;
+      margin: 2px 0 0 12px;
+      color: $subMenuActiveText;
+      display: inline-block;
      overflow: hidden;
-      text-overflow: ellipsis;
      white-space: nowrap;
-      text-align: left;
-      color: #1890ff;
+      text-overflow: ellipsis;
+      font-size: 18px;
      font-weight: 600;
-      font-size: 20px;
-      margin-top: 10px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-    }
-  }
-
-  .collapses {
-    .sidebar-logo {
-      margin-right: 0;
    }
  }
 }
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
 import { useNav } from "@/layout/hooks/useNav";
@@ -21,6 +22,7 @@ const {
  menuSelect,
  resolvePath,
  username,
+  getDivStyle,
  avatarsStyle
 } = useNav();

@@ -78,15 +80,12 @@ watch(
              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
            />
          </div>
-          <span class="select-none">{{ route.meta.title }}</span>
-          <FontIcon
-            v-if="route.meta.extraIcon"
-            width="30px"
-            height="30px"
-            style="position: absolute; right: 10px"
-            :icon="route.meta.extraIcon.name"
-            :svg="route.meta.extraIcon.svg ? true : false"
-          />
+          <div :style="getDivStyle">
+            <span class="select-none">
+              {{ route.meta.title }}
+            </span>
+            <extraIcon :extraIcon="route.meta.extraIcon" />
+          </div>
        </template>
      </el-menu-item>
    </el-menu>
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import path from "path";
 import { getConfig } from "@/config";
+import extraIcon from "./extraIcon.vue";
 import { childrenType } from "../../types";
 import { useNav } from "@/layout/hooks/useNav";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";

-import ArrowUp from "@iconify-icons/ep/arrow-up";
-import EpArrowDown from "@iconify-icons/ep/arrow-down";
-import ArrowLeft from "@iconify-icons/ep/arrow-left";
-import ArrowRight from "@iconify-icons/ep/arrow-right";
+import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
+import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
+import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
+import ArrowRight from "@iconify-icons/ep/arrow-right-bold";

-const { layout, isCollapse, tooltipEffect } = useNav();
+const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();

 const props = defineProps({
  item: {
@@ -27,17 +28,11 @@ const props = defineProps({
  }
 });

-const getExtraIconStyle = computed((): CSSProperties => {
-  if (!isCollapse.value) {
-    return {
-      position: "absolute",
-      right: "10px"
-    };
-  } else {
-    return {
-      position: "static"
-    };
-  }
+const getSpanStyle = computed((): CSSProperties => {
+  return {
+    width: "100%",
+    textAlign: "center"
+  };
 });

 const getNoDropdownStyle = computed((): CSSProperties => {
@@ -47,16 +42,6 @@ const getNoDropdownStyle = computed((): CSSProperties => {
  };
 });

-const getDivStyle = computed((): CSSProperties => {
-  return {
-    width: !isCollapse.value ? "" : "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    overflow: "hidden"
-  };
-});
-
 const getMenuTextStyle = computed(() => {
  return {
    overflow: "hidden",
@@ -65,19 +50,54 @@ const getMenuTextStyle = computed(() => {
  };
 });

-const getSubTextStyle = computed((): CSSProperties => {
+const getsubMenuIconStyle = computed((): CSSProperties => {
  return {
-    width: !isCollapse.value ? "210px" : "",
-    display: "inline-block",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    margin:
+      layout.value === "horizontal"
+        ? "0 5px 0 0"
+        : isCollapse.value
+        ? "0 auto"
+        : "0 5px 0 0"
  };
 });

-const getSpanStyle = computed(() => {
-  return {
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+const getSubTextStyle = computed((): CSSProperties => {
+  if (!isCollapse.value) {
+    return {
+      width: "210px",
+      display: "inline-block",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    };
+  } else {
+    return {
+      width: ""
+    };
+  }
+});
+
+const getSubMenuDivStyle = computed((): any => {
+  return item => {
+    return !isCollapse.value
+      ? {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          overflow: "hidden"
+        }
+      : {
+          width: "100%",
+          textAlign:
+            item?.parentId === null
+              ? "center"
+              : layout.value === "mix" && item?.pathList?.length === 2
+              ? "center"
+              : ""
+        };
  };
 });

@@ -114,6 +134,20 @@ function hoverMenu(key) {
  });
 }

+// 左侧菜单折叠后，当菜单没有图标时只显示第一个文字并加上省略号
+function overflowSlice(text, item?: any) {
+  const newText =
+    (text?.length > 1 ? text.toString().slice(0, 1) : text) + "...";
+  if (item && !(isCollapse.value && item?.parentId === null)) {
+    return layout.value === "mix" &&
+      item?.pathList?.length === 2 &&
+      isCollapse.value
+      ? newText
+      : text;
+  }
+  return newText;
+}
+
 function hasOneShowingChild(
  children: childrenType[] = [],
  parent: childrenType
@@ -150,84 +184,78 @@ function resolvePath(routePath) {
 </script>

 <template>
-  <template
+  <el-menu-item
    v-if="
      hasOneShowingChild(props.item.children, props.item) &&
      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
    "
+    :index="resolvePath(onlyOneChild.path)"
+    :class="{ 'submenu-title-noDropdown': !isNest }"
+    :style="getNoDropdownStyle"
  >
-    <el-menu-item
-      :index="resolvePath(onlyOneChild.path)"
-      :class="{ 'submenu-title-noDropdown': !isNest }"
-      :style="getNoDropdownStyle"
+    <div
+      v-if="toRaw(props.item.meta.icon)"
+      class="sub-menu-icon"
+      :style="getsubMenuIconStyle"
    >
-      <div class="sub-menu-icon" v-if="toRaw(props.item.meta.icon)">
-        <component
-          :is="
-            useRenderIcon(
-              toRaw(onlyOneChild.meta.icon) ||
-                (props.item.meta && toRaw(props.item.meta.icon))
-            )
-          "
-        />
-      </div>
-      <div
-        v-if="
-          isCollapse &&
-          layout === 'vertical' &&
-          props.item?.pathList?.length === 1
+      <component
+        :is="
+          useRenderIcon(
+            toRaw(onlyOneChild.meta.icon) ||
+              (props.item.meta && toRaw(props.item.meta.icon))
+          )
        "
-        :style="getDivStyle"
-      >
-        <span :style="getMenuTextStyle">
+      />
+    </div>
+    <span
+      v-if="
+        !props.item?.meta.icon &&
+        isCollapse &&
+        layout === 'vertical' &&
+        props.item?.pathList?.length === 1
+      "
+      :style="getSpanStyle"
+    >
+      {{ overflowSlice(onlyOneChild.meta.title) }}
+    </span>
+    <span
+      v-if="
+        !onlyOneChild.meta.icon &&
+        isCollapse &&
+        layout === 'mix' &&
+        props.item?.pathList?.length === 2
+      "
+      :style="getSpanStyle"
+    >
+      {{ overflowSlice(onlyOneChild.meta.title) }}
+    </span>
+    <template #title>
+      <div :style="getDivStyle">
+        <span v-if="layout === 'horizontal'">
          {{ onlyOneChild.meta.title }}
        </span>
-      </div>
-      <div
-        v-if="
-          isCollapse && layout === 'mix' && props.item?.pathList?.length === 2
-        "
-        :style="getDivStyle"
-      >
-        <span :style="getMenuTextStyle">
-          {{ onlyOneChild.meta.title }}
-        </span>
-      </div>
-      <template #title>
-        <div :style="getDivStyle">
-          <span v-if="layout === 'horizontal'">
+        <el-tooltip
+          v-else
+          placement="top"
+          :effect="tooltipEffect"
+          :offset="-10"
+          :disabled="!onlyOneChild.showTooltip"
+        >
+          <template #content>
+            {{ onlyOneChild.meta.title }}
+          </template>
+          <span
+            ref="menuTextRef"
+            :style="getMenuTextStyle"
+            @mouseover="hoverMenu(onlyOneChild)"
+          >
            {{ onlyOneChild.meta.title }}
          </span>
-          <el-tooltip
-            v-else
-            placement="top"
-            :effect="tooltipEffect"
-            :offset="-10"
-            :disabled="!onlyOneChild.showTooltip"
-          >
-            <template #content>
-              {{ onlyOneChild.meta.title }}
-            </template>
-            <span
-              ref="menuTextRef"
-              :style="getMenuTextStyle"
-              @mouseover="hoverMenu(onlyOneChild)"
-            >
-              {{ onlyOneChild.meta.title }}
-            </span>
-          </el-tooltip>
-          <FontIcon
-            v-if="onlyOneChild.meta.extraIcon"
-            width="30px"
-            height="30px"
-            :style="getExtraIconStyle"
-            :icon="onlyOneChild.meta.extraIcon.name"
-            :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
-          />
-        </div>
-      </template>
-    </el-menu-item>
-  </template>
+        </el-tooltip>
+        <extraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
+      </div>
+    </template>
+  </el-menu-item>

  <el-sub-menu
    v-else
@@ -236,7 +264,11 @@ function resolvePath(routePath) {
    :index="resolvePath(props.item.path)"
  >
    <template #title>
-      <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
+      <div
+        v-if="toRaw(props.item.meta.icon)"
+        :style="getsubMenuIconStyle"
+        class="sub-menu-icon"
+      >
        <component
          :is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))"
        />
@@ -244,34 +276,36 @@ function resolvePath(routePath) {
      <span v-if="layout === 'horizontal'">
        {{ props.item.meta.title }}
      </span>
-      <el-tooltip
-        v-else
-        placement="top"
-        :effect="tooltipEffect"
-        :offset="-10"
-        :disabled="!props.item.showTooltip"
+      <div
+        :style="getSubMenuDivStyle(props.item)"
+        v-if="
+          !(
+            isCollapse &&
+            toRaw(props.item.meta.icon) &&
+            props.item.parentId === null
+          )
+        "
      >
-        <template #content>
-          {{ props.item.meta.title }}
-        </template>
-        <div
-          ref="menuTextRef"
-          :style="getSubTextStyle"
-          @mouseover="hoverMenu(props.item)"
+        <el-tooltip
+          v-if="layout !== 'horizontal'"
+          placement="top"
+          :effect="tooltipEffect"
+          :offset="-10"
+          :disabled="!props.item.showTooltip"
        >
-          <span :style="getSpanStyle">
+          <template #content>
            {{ props.item.meta.title }}
+          </template>
+          <span
+            ref="menuTextRef"
+            :style="getSubTextStyle"
+            @mouseover="hoverMenu(props.item)"
+          >
+            {{ overflowSlice(props.item.meta.title, props.item) }}
          </span>
-        </div>
-      </el-tooltip>
-      <FontIcon
-        v-if="props.item.meta.extraIcon"
-        width="30px"
-        height="30px"
-        style="position: absolute; right: 10px"
-        :icon="props.item.meta.extraIcon.name"
-        :svg="props.item.meta.extraIcon.svg ? true : false"
-      />
+        </el-tooltip>
+        <extraIcon v-if="!isCollapse" :extraIcon="props.item.meta.extraIcon" />
+      </div>
    </template>
    <sidebar-item
      v-for="child in props.item.children"
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -281,7 +281,7 @@
  left: 0;
  bottom: 0;
  background: var(--el-color-primary);
-  animation: scheduleInWidth 400ms ease-in;
+  animation: scheduleInWidth 200ms ease-in;
 }

 /* 灵动模式下鼠标移出隐藏蓝色进度条 */
@@ -292,5 +292,5 @@
  left: 0;
  bottom: 0;
  background: var(--el-color-primary);
-  animation: scheduleOutWidth 400ms ease-in;
+  animation: scheduleOutWidth 200ms ease-in;
 }
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -63,7 +63,7 @@ const dynamicTagView = () => {
  moveToView(index);
 };

-const moveToView = (index: number): void => {
+const moveToView = async (index: number): Promise<void> => {
  const tabNavPadding = 10;
  if (!instance.refs["dynamic" + index]) return;
  const tabItemEl = instance.refs["dynamic" + index][0];
@@ -73,8 +73,13 @@ const moveToView = (index: number): void => {
  const scrollbarDomWidth = scrollbarDom.value
    ? scrollbarDom.value?.offsetWidth
    : 0;
+
+  // 获取视图更新后dom
+  await nextTick();
+
  // 已有标签页总长度（包含溢出部分）
  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
+
  scrollbarDomWidth <= tabDomWidth
    ? (isShowArrow.value = true)
    : (isShowArrow.value = false);
@@ -192,6 +197,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
        length
      }) as any;
    }
+    dynamicTagView();
  };

  if (tag === "other") {
@@ -488,6 +494,11 @@ watch([route], () => {
  dynamicTagView();
 });

+watch(isFullscreen, () => {
+  tagsViews[6].icon = Fullscreen;
+  tagsViews[6].text = "全屏";
+});
+
 onMounted(() => {
  useResizeObserver(
    scrollbarDom,
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -38,7 +38,7 @@ export function useDataThemeChange() {
  const body = document.documentElement as HTMLElement;

  /** 设置导航主题色 */
-  function setLayoutThemeColor(theme = "default") {
+  function setLayoutThemeColor(theme = getConfig().Theme ?? "default") {
    layoutTheme.value.theme = theme;
    toggleTheme({
      scopeName: `layout-theme-${theme}`
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -1,9 +1,9 @@
-import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import { getConfig } from "@/config";
 import { emitter } from "@/utils/mitt";
 import { routeMetaType } from "../types";
 import { useGlobal } from "@pureadmin/utils";
+import { computed, CSSProperties } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { router, remainingPaths } from "@/router";
 import { useAppStoreHook } from "@/store/modules/app";
@@ -20,6 +20,16 @@ export function useNav() {
  /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
  const tooltipEffect = getConfig()?.TooltipEffect ?? "light";

+  const getDivStyle = computed((): CSSProperties => {
+    return {
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      overflow: "hidden"
+    };
+  });
+
  /** 用户名 */
  const username = computed(() => {
    return useUserStoreHook()?.username;
@@ -130,6 +140,7 @@ export function useNav() {
    $storage,
    backHome,
    onPanel,
+    getDivStyle,
    changeTitle,
    toggleSideBar,
    menuSelect,
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -11,10 +11,15 @@ import {
 import { tagsViewsType } from "../types";
 import { useEventListener } from "@vueuse/core";
 import { useRoute, useRouter } from "vue-router";
-import { isEqual, isBoolean } from "@pureadmin/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
+import {
+  isEqual,
+  isBoolean,
+  storageLocal,
+  toggleClass,
+  hasClass
+} from "@pureadmin/utils";

 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
 import CloseAllTags from "@iconify-icons/ri/subtract-line";
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -67,10 +67,7 @@ export type childrenType = {
    icon?: string;
    title?: string;
    showParent?: boolean;
-    extraIcon?: {
-      svg?: boolean;
-      name?: string;
-    };
+    extraIcon?: string;
  };
  showTooltip?: boolean;
  parentId?: number;