yh-pub 1.0.0

package/layout/main/components/tags-nav/tags-nav.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="tags-nav"
+    ref="tagsNav">
+    <ul
+      v-show="visible"
+      :style="contextMenuStyle"
+      class="contextmenu">
+      <li
+        v-for="(item, key) of menuList"
+        @click="handleTagsOption"
+        :data-key="key">
+        {{ item }}
+      </li>
+    </ul>
+    <el-tabs
+      type="border-card"
+      @tab-change="clickTab"
+      @tab-remove="removeTab"
+      :model-value="route?.fullPath"
+      @contextmenu.prevent.native="contextMenu">
+      <el-tab-pane
+        label="首页"
+        :name="homeFullPath"></el-tab-pane>
+      <el-tab-pane
+        closable
+        v-for="item in tagNavList"
+        :key="`tag-nav-${item.fullPath}`"
+        :label="item.name"
+        :name="item.fullPath"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store/app";
+import { getCurrentInstance } from "vue";
+
+const emits = defineEmits(["close", "input"]);
+const tagInstance = getCurrentInstance();
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+const { tagNavList, tagPaths, homeFullPath } = storeToRefs(appStore);
+
+function clickTab(e) {
+  if (e !== route.fullPath) {
+    router.push(e);
+  }
+}
+
+function removeTab(e) {
+  let index = tagPaths.value.indexOf(e);
+  tagNavList.value.splice(index, 1);
+  tagInstance.parent.ctx._.refs.kpAliveRef._.__v_cache.delete(e);
+  if (e === route.fullPath) {
+    if (tagNavList.value.length > 0) {
+      if (index - 1 > -1) {
+        router.replace(tagNavList.value[index - 1].fullPath);
+      } else {
+        router.replace(tagNavList.value[index].fullPath);
+      }
+    } else {
+      router.replace(homeFullPath.value);
+    }
+  }
+}
+
+const contextMenuLeft = ref(0);
+const contextMenuTop = ref(0);
+const visible = ref(false);
+const menuList = reactive({
+  others: "关闭其他",
+  all: "关闭所有",
+});
+
+const contextTagIndex = ref();
+const contextMenuStyle = computed(() => {
+  return {
+    left: `${contextMenuLeft.value}px`,
+    top: `${contextMenuTop.value}px`,
+  };
+});
+
+function handleTagsOption(e) {
+  let type;
+  if (e.type === "click") {
+    type = e.target.dataset.key;
+    tagsOptions(type);
+  }
+}
+
+function tagsOptions(type) {
+  if (type === "all") {
+    tagNavList.value = [];
+    router.replace(homeFullPath.value);
+  } else if (type === "others") {
+    let tagerNav = tagNavList.value[contextTagIndex.value];
+    tagNavList.value = [tagerNav];
+    router.replace(tagerNav.fullPath);
+  }
+}
+
+function contextMenu(e) {
+  let path = e.target.id.replace("tab-", "");
+  let index = tagPaths.value.indexOf(path);
+  contextTagIndex.value = index;
+  visible.value = true;
+  const offsetLeft = e.target.parentElement?.getBoundingClientRect().left;
+  contextMenuLeft.value = e.clientX - offsetLeft + 10;
+  contextMenuTop.value = e.clientY - 45;
+}
+
+function closeMenu() {
+  visible.value = false;
+}
+
+watch(
+  () => visible.value,
+  (value) => {
+    if (value) {
+      document.addEventListener("click", closeMenu);
+    } else {
+      document.removeEventListener("click", closeMenu);
+    }
+  }
+);
+onMounted(() => {
+  if (localStorage.tagNavList) {
+    tagNavList.value = JSON.parse(localStorage.tagNavList);
+  }
+  window.addEventListener("beforeunload", (e) => {
+    localStorage.tagNavList = JSON.stringify(tagNavList.value.filter((item) => !!item));
+  });
+});
+</script>
+
+<style lang="less">
+@import "./tags-nav.less";
+</style>
+@/store/app

package/layout/main/components/user/user.less

@@ -0,0 +1,12 @@
+.user{
+  &-avatar-dropdown{
+    cursor: pointer;
+    display: inline-block;
+    // height: 64px;
+    vertical-align: middle;
+    // line-height: 64px;
+    .ivu-badge-dot{
+      top: 16px;
+    }
+  }
+}

package/layout/main/components/user/user.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-dropdown
+    split-button
+    class="user-avatar-dropdown"
+    @command="handleClick">
+    {{ userName }}
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="message">
+          消息中心
+          <el-badge
+            style="margin-left: 10px"
+            :value="messageUnreadCount"></el-badge>
+        </el-dropdown-item>
+        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
+        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+  <el-dialog
+    ref="changePwd"
+    class="yh-el-dialog"
+    v-model="showChangePwd"
+    title="修改密码"
+    destroy-on-close>
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="changePwdForm">
+      <el-form-item label="原密码">
+        <el-input
+          v-model="formData.oldPwd"
+          placeholder="请输入原密码"
+          type="password"
+          clearable></el-input>
+      </el-form-item>
+      <el-form-item label="新密码">
+        <el-input
+          v-model="formData.newPwd"
+          placeholder="请输入新密码"
+          type="password"
+          clearable></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码">
+        <el-input
+          v-model="formData.confirmPwd"
+          placeholder="请输入确认密码"
+          type="password"
+          clearable></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button
+        type="primary"
+        @click="changePwd"
+        :loading="btnLoading">
+        提交
+      </el-button>
+      <el-button @click="showChangePwd = false">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import "./user.less";
+import { mapActions } from "pinia";
+import { useUserStore } from "@/store/user";
+import headerPng from "@/assets/images/admin-header.png";
+import { clearStorage } from "@/libs/util";
+
+export default {
+  name: "User",
+  props: {
+    userAvatar: {
+      type: String,
+      default: headerPng,
+    },
+    messageUnreadCount: {
+      type: Number,
+      default: 0,
+    },
+    userName: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      showChangePwd: false,
+      formData: {},
+      rules: {
+        oldPwd: [{ required: true, message: "原密码不为空！" }],
+        newPwd: [{ required: true, message: "新密码不为空！" }],
+        confirmPwd: [
+          {
+            required: true,
+            message: "确认密码不为空！",
+            validator: function ({ itemValue, rule, rules, data, property }) {
+              if (itemValue !== data.newPwd) {
+                return new Error("确认密码与新密码不一致！");
+              }
+            },
+          },
+        ],
+      },
+      btnLoading: false,
+    };
+  },
+  methods: {
+    logout() {
+      const userStore = useUserStore();
+      userStore
+        .handleLogOut()
+        .then(() => {
+          this.$router.push({
+            name: "login",
+          });
+        })
+        .catch((e) => {
+          clearStorage();
+          this.$router.push({
+            name: "login",
+          });
+        });
+    },
+    message() {
+      this.$router.push({
+        name: "message_page",
+      });
+    },
+    handleClick(e) {
+      switch (e) {
+        case "logout":
+          this.logout();
+          break;
+        case "message":
+          this.message();
+          break;
+        case "changePwd":
+          this.showChangePwd = true;
+          break;
+      }
+    },
+    changePwd() {
+      let that = this;
+      let form = this.$refs["changePwdForm"];
+      form.validate().then((result) => {
+        if (typeof result === "undefined") {
+          this.btnLoading = true;
+          this.axios.post("user/modifyPassword", this.formData).then((res) => {
+            if (res.data.result) {
+              this.$message.success(res.data.msg);
+              setTimeout(function () {
+                that.btnLoading = false;
+                that.logout();
+              }, 1000);
+            } else {
+              this.$message.error(res.data.msg);
+              this.btnLoading = false;
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.user-avatar-dropdown {
+  .el-button {
+    --el-button-text-color: var(--el-color-white);
+    --el-button-active-text-color: var(--el-color-white);
+    --el-button-hover-text-color: var(--el-color-white);
+    --el-button-bg-color: transparent;
+    --el-button-active-bg-color: transparent;
+    --el-button-hover-bg-color: transparent;
+    --el-button-outline-color: transparent;
+    --el-button-active-border-color: var(--el-color-white);
+    --el-button-hover-border-color: var(--el-color-white);
+    --el-button-border-color: var(--el-color-white);
+  }
+}
+</style>
+@/libs/util