style: revision style

2025-11-03 13:44:47 +08:00 · 2021-04-26 02:28:27 +08:00
parent 275ee39b0f
commit 8fe2b78c87
14 changed files with 296 additions and 71 deletions
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -14,6 +14,14 @@
        <span>隐藏标签页</span>
        <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
      </li>
+
+      <li>
+        <span>标签风格</span>
+        <vxe-radio-group v-model="markValue" @change="onChange">
+          <vxe-radio label="card" content="卡片"></vxe-radio>
+          <vxe-radio label="smart" content="灵动"></vxe-radio>
+        </vxe-radio-group>
+      </li>
    </ul>
    <el-divider />
    <vxe-button
@@ -28,7 +36,7 @@

 <script lang='ts'>
 import panel from "../panel/index.vue";
-import { onMounted, reactive, toRefs } from "vue";
+import { onMounted, reactive, toRefs, ref, unref } from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { toggleClass } from "/@/utils/operate";
 import { emitter } from "/@/utils/mitt";
@@ -40,6 +48,9 @@ export default {
  setup() {
    const router = useRouter();

+    // 默认卡片模式
+    const markValue = ref(storageLocal.getItem("showModel") || "card");
+
    function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
      const targetEl = target || document.body;
      let { className } = targetEl;
@@ -104,13 +115,20 @@ export default {
      router.push("/login");
    }

+    function onChange({ label }) {
+      storageLocal.setItem("showModel", label);
+      emitter.emit("tagViewsShowModel", label);
+    }
+
    return {
      ...toRefs(settings),
      localOperate,
      greyChange,
      weekChange,
      tagsChange,
-      onReset
+      onReset,
+      markValue,
+      onChange
    };
  }
 };
--- a/src/layout/components/sidebar/index.vue
+++ b/src/layout/components/sidebar/index.vue
@@ -3,10 +3,10 @@
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
-      background-color="#1b2a47"
-      text-color="#7a80b4"
-      :unique-opened="false"
-      active-text-color="#fff"
+      background-color="#fff"
+      unique-opened
+      text-color="#000"
+      active-text-color="#409eff"
      :collapse-transition="false"
      mode="vertical"
      @select="menuSelect"
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -4,11 +4,23 @@
      <div
        v-for="(item, index) in dynamicTagList"
        :key="index"
-        :class="['scroll-item', $route.path === item.path ? 'active' : '']"
+        :ref="'dynamic' + index"
+        :class="['scroll-item', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card'  ? 'card-active' : '' ]"
        @contextmenu.prevent.native="openMenu(item, $event)"
+        @mouseenter.prevent="onMouseenter(item, index)"
+        @mouseleave.prevent="onMouseleave(item, index)"
      >
        <router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
-        <span v-if="index !== 0 " class="el-icon-close" @click="deleteMenu(item)"></span>
+        <i
+          v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0"
+          class="iconfont team-iconshanchu"
+          @click="deleteMenu(item)"
+        ></i>
+        <div
+          :ref="'schedule' + index"
+          v-if="showModel !=='card'"
+          :class="[$route.path === item.path ? 'schedule-active' : '']"
+        ></div>
      </div>
    </el-scrollbar>
    <!-- 右键菜单按钮 -->
@@ -62,16 +74,25 @@
 <script lang='ts'>
 import { useDynamicRoutesHook } from "./tagsHook";
 import { useRoute, useRouter } from "vue-router";
-import { ref, watchEffect, watch, onBeforeMount, unref, nextTick } from "vue";
+import {
+  ref,
+  watchEffect,
+  watch,
+  onBeforeMount,
+  unref,
+  nextTick,
+  getCurrentInstance
+} from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
-import { toggleClass, removeClass } from "/@/utils/operate";
+import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef } from "@vueuse/core";
 import { homeRoute } from "./type";
-let refreshDiv = "refresh-div";
+let refreshButton = "refresh-button";

 export default {
  setup() {
+    let vm: any;
    const {
      deleteDynamicTag,
      dynamicRouteTags,
@@ -82,7 +103,7 @@ export default {
    const router = useRouter();
    const showTags = ref(storageLocal.getItem("tagsVal") || false);
    const containerDom = templateRef<HTMLElement | null>("containerDom", null);
-
+    const activeIndex = ref(-1);
    const tagsViews = ref([
      {
        icon: "el-icon-refresh-right",
@@ -114,6 +135,12 @@ export default {
      }
    ]);

+    // 显示模式，默认卡片模式显示
+    const showModel = ref(storageLocal.getItem("showModel") || "card");
+    if (!showModel) {
+      storageLocal.setItem("showModel", "card");
+    }
+
    let visible = ref(false);
    let buttonLeft = ref(0);
    let buttonTop = ref(0);
@@ -146,13 +173,13 @@ export default {
    });

    function onFresh() {
-      toggleClass(true, refreshDiv, document.querySelector(".rotate"));
+      toggleClass(true, refreshButton, document.querySelector(".rotate"));
      const { path, fullPath } = unref(route);
      router.replace({
        path: "/redirect" + fullPath
      });
      setTimeout(() => {
-        removeClass(document.querySelector(".rotate"), refreshDiv);
+        removeClass(document.querySelector(".rotate"), refreshButton);
      }, 600);
    }

@@ -225,7 +252,7 @@ export default {
      } else {
        buttonLeft.value = left;
      }
-      buttonTop.value = e.offsetY * 2;
+      buttonTop.value = e.clientY;
      visible.value = true;
    }

@@ -244,12 +271,46 @@ export default {
      }
    );

+    // 鼠标移入
+    function onMouseenter(item, index) {
+      if (index) activeIndex.value = index;
+      if (unref(showModel) === "smart") {
+        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
+        toggleClass(true, "schedule-in", vm.refs["schedule" + index]);
+        toggleClass(false, "schedule-out", vm.refs["schedule" + index]);
+      } else {
+        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
+        toggleClass(true, "card-in", vm.refs["dynamic" + index]);
+        toggleClass(false, "card-out", vm.refs["dynamic" + index]);
+      }
+    }
+
+    // 鼠标移出
+    function onMouseleave(item, index) {
+      activeIndex.value = -1;
+      if (unref(showModel) === "smart") {
+        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
+        toggleClass(false, "schedule-in", vm.refs["schedule" + index]);
+        toggleClass(true, "schedule-out", vm.refs["schedule" + index]);
+      } else {
+        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
+        toggleClass(false, "card-in", vm.refs["dynamic" + index]);
+        toggleClass(true, "card-out", vm.refs["dynamic" + index]);
+      }
+    }
+
    onBeforeMount(() => {
+      vm = getCurrentInstance();
+
      emitter.on("tagViewsChange", key => {
        if (unref(showTags) === key) return;
        showTags.value = key;
      });

+      emitter.on("tagViewsShowModel", key => {
+        showModel.value = key;
+      });
+
      emitter.on("changLayoutRoute", indexPath => {
        let currentLen = storageLocal.getItem("routesInStorage").length;
        if (currentLen === 1) {
@@ -278,7 +339,11 @@ export default {
      openMenu,
      closeMenu,
      selectTag,
-      currentSelect
+      currentSelect,
+      onMouseenter,
+      onMouseleave,
+      activeIndex,
+      showModel
    };
  }
 };
@@ -287,16 +352,20 @@ export default {
 <style lang="scss" scoped>
 .tags-view {
  width: 100%;
-  height: 34px;
+  height: 40px;
  font-size: 14px;
  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
  .scroll-item {
-    border-radius: 3px;
+    border-radius: 3px 3px 0 0;
    padding: 2px 8px;
    display: inline-block;
+    position: relative;
+    margin-right: 5px;
+    height: 28px;
+    line-height: 25px;
+    &:hover {
+      background-color: #eaf4fe;
+    }
  }
  a {
    text-decoration: none;
@@ -309,7 +378,6 @@ export default {
    padding: 5px 0;
    white-space: nowrap;
    position: relative;
-    overflow: hidden;
    width: 100%;
    background: #fff;
    border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
@@ -343,22 +411,6 @@ export default {
  }
 }

-.el-icon-close {
-  cursor: pointer;
-  border-radius: 50%;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.el-icon-close:hover {
-  background: #b4bccc;
-}
-.active {
-  background: #409eff;
-  position: relative;
-  color: #fff;
-  a {
-    color: #fff;
-  }
-}
 :deep(.el-scrollbar__wrap) {
  height: 100vh;
 }
@@ -379,7 +431,112 @@ export default {
  }
 }

-.refresh-div {
+.el-dropdown-menu {
+  padding: 0;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+.el-dropdown-menu__item,
+.el-menu-item {
+  padding: 0 14px;
+  overflow: hidden;
+}
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
+
+.is-active {
+  background-color: #eaf4fe;
+  position: relative;
+  color: #fff;
+  a {
+    color: #1890ff;
+  }
+}
+
+// 关闭图标
+.team-iconshanchu {
+  color: #1890ff;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.team-iconshanchu:hover {
+  border-radius: 50%;
+  color: #fff;
+  background: #b4bccc;
+}
+
+// 卡片模式
+.card-active {
+  border: 1px solid #1890ff;
+}
+// 卡片模式下鼠标移入显示蓝色边框
+.card-in {
+  border: 1px solid #1890ff;
+  color: #1890ff;
+  a {
+    color: #1890ff;
+  }
+}
+// 卡片模式下鼠标移出隐藏蓝色边框
+.card-out {
+  border: none;
+  color: #666;
+  a {
+    color: #666;
+  }
+}
+
+// 灵动模式
+.schedule-active {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #1890ff;
+}
+// 灵动模式下鼠标移入显示蓝色进度条
+.schedule-in {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #1890ff;
+  animation: scheduleInWidth 400ms ease-in;
+}
+@keyframes scheduleInWidth {
+  from {
+    width: 0px;
+  }
+  to {
+    width: 100%;
+  }
+}
+// 灵动模式下鼠标移出隐藏蓝色进度条
+.schedule-out {
+  width: 0;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #1890ff;
+  animation: scheduleOutWidth 400ms ease-in;
+}
+@keyframes scheduleOutWidth {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+// 刷新按钮动画效果
+.refresh-button {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 600ms;
  -moz-transition-property: -moz-transform;
@@ -421,19 +578,4 @@ export default {
    transform: rotate(360deg);
  }
 }
-.el-dropdown-menu {
-  padding: 0;
-}
-.el-dropdown-menu__item:not(.is-disabled):hover {
-  color: #606266;
-  background: #f0f0f0;
-}
-.el-dropdown-menu__item,
-.el-menu-item {
-  padding: 0 14px;
-  overflow: hidden;
-}
-:deep(.el-dropdown-menu__item) i {
-  margin-right: 10px;
-}
 </style>