From 4ca375b2e3dae98d6ececc1b7b421a12f3fa8a26 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期二, 01 七月 2025 09:00:38 +0800
Subject: [PATCH] 修改bug，验收通过
---
laboratory/src/layouts/components/HeaderNav.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 132 insertions(+), 32 deletions(-)
diff --git a/laboratory/src/layouts/components/HeaderNav.vue b/laboratory/src/layouts/components/HeaderNav.vue
index ddc9159..7eb1f57 100644
--- a/laboratory/src/layouts/components/HeaderNav.vue
+++ b/laboratory/src/layouts/components/HeaderNav.vue
@@ -13,10 +13,17 @@
<!-- 标签列表 -->
<div class="tag-list-container" @wheel.prevent="handleWheel">
<div class="tag-list" v-for="tag in tagList" :key="tag.name">
- <div @click="goTag(tag)" :class="{ 'activeTag': tag.path === $route.path }">
+ <div
+ @click="goTag(tag)"
+ :class="{ activeTag: tag.path === $route.path }"
+ >
{{ tag.meta.title }}
</div>
- <i @click="closeTag(tag)" v-if="tagList.length > 1" class="el-icon-close"></i>
+ <i
+ @click="closeTag(tag)"
+ v-if="tagList.length > 1"
+ class="el-icon-close"
+ ></i>
</div>
</div>
</div>
@@ -30,64 +37,106 @@
</div>
</div>
</div>
+ <el-dialog
+ top="40vh"
+ :visible.sync="show"
+ :show-close="false"
+ :append-to-body="true"
+ :close-on-click-modal="false"
+ width="433px"
+ >
+ <div class="top-con a-center" slot="title">
+ <div class="left">
+ <img
+ src="@/assets/public/notice@2x.png"
+ style="width: 24px; height: 24px; margin-right: 14px"
+ />
+ <div class="title">{{ "提示" }}</div>
+ </div>
+ </div>
+ <div class="lh--32 fs--20">
+ {{ "当前页面可能有未保存数据，确认关闭么" }}
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="show = false">取消</el-button>
+ <el-button type='danger' @click="submitClose">{{ "确认" }}</el-button>
+ </span>
+ </el-dialog>
</div>
</template>
<script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
export default {
data() {
return {
- userInfo: '',
+ userInfo: "",
scrollTimer: null,
- scrollAmount: 0
- }
+ scrollAmount: 0,
+ show: false,
+ pendingCloseTag: null,
+ };
},
props: {
logo: {
type: String,
- default: ''
+ default: "",
},
},
computed: {
- ...mapState(['tagList', 'isFold'])
+ ...mapState(["tagList", "isFold"]),
},
mounted() {
// 获取用户信息
- this.getUserInfo()
+ this.getUserInfo();
},
methods: {
// 点击折叠按钮
clickFold() {
- this.$store.commit('SET_ISFOLD', !this.isFold)
+ this.$store.commit("SET_ISFOLD", !this.isFold);
},
// 获取用户信息
getUserInfo() {
- this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+ this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
},
// 退出登录
outLogin() {
- sessionStorage.clear()
+ sessionStorage.clear();
this.$router.replace({ path: "/" });
},
// 关闭标签
closeTag(tag) {
- this.$store.commit('SET_TAGLIST', this.tagList.filter(item => item.path !== tag.path))
+ if (tag.path && tag.path.includes('add')) {
+ this.pendingCloseTag = tag;
+ this.show = true;
+ return;
+ }
+ this._doCloseTag(tag);
+ },
+ // 真正执行关闭标签的逻辑
+ _doCloseTag(tag) {
+ this.$store.commit(
+ "SET_TAGLIST",
+ this.tagList.filter((item) => item.path !== tag.path)
+ );
// 判断是否是当前标签
if (tag.path === this.$route.path) {
- // if (this.tagList.length > 1) {
- this.$router.push(this.tagList[this.tagList.length - 1].path)
- // } else {
- // // this.$router.push('/welcome')
- // }
+ this.$router.push(this.tagList[this.tagList.length - 1].path);
+ }
+ },
+ submitClose() {
+ this.show = false;
+ if (this.pendingCloseTag) {
+ this._doCloseTag(this.pendingCloseTag);
+ this.pendingCloseTag = null;
}
},
// 跳转标签
goTag(tag) {
this.$router.push({
path: tag.path,
- query: tag.query
- })
+ query: tag.query,
+ });
},
handleWheel(e) {
if (this.scrollTimer) {
@@ -105,9 +154,9 @@
};
this.scrollTimer = setTimeout(scroll, 8); // 减少延迟时间
- }
+ },
},
-}
+};
</script>
<style lang="less" scoped>
@@ -165,29 +214,28 @@
cursor: pointer;
font-weight: 400;
font-size: 18px;
- color: rgba(0, 0, 0, .6);
+ color: rgba(0, 0, 0, 0.6);
margin-right: 40px;
div:hover {
font-weight: bold;
- color: #049C9A;
+ color: #049c9a;
}
i {
margin-left: 10px;
&:hover {
- color: #049C9A;
+ color: #049c9a;
}
}
}
.activeTag {
font-weight: bold;
- color: #049C9A;
+ color: #049c9a;
}
}
-
}
.user-info {
@@ -225,7 +273,7 @@
cursor: pointer;
&::before {
- content: '';
+ content: "";
position: absolute;
top: 0;
left: 0;
@@ -233,9 +281,12 @@
bottom: 0;
border-radius: 12px;
padding: 1px;
- background: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 1));
- -webkit-mask:
- linear-gradient(#fff 0 0) content-box,
+ background: linear-gradient(
+ 180deg,
+ rgba(10, 203, 202, 1),
+ rgba(4, 156, 154, 1)
+ );
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -244,7 +295,7 @@
.user-info-out-text {
font-weight: 400;
font-size: 14px;
- color: #049C9A;
+ color: #049c9a;
line-height: 21px;
position: relative;
z-index: 1;
@@ -260,4 +311,53 @@
}
}
}
+.left {
+ display: flex;
+}
+
+::v-deep .el-dialog {
+ border-radius: 12px;
+
+ .el-dialog__header {
+ padding-top: 28px;
+ padding-right: 27px;
+ padding-left: 34px;
+ padding-bottom: 11px;
+ }
+
+ .el-dialog__body {
+ padding: unset;
+ padding-left: 73px;
+ padding-right: 20px;
+ }
+
+ .el-dialog__footer {
+ padding-top: 18px;
+ padding-right: 27px;
+ padding-bottom: 29px;
+ }
+}
+
+.bgcolor1 {
+ background: rgba(22, 119, 255, 1);
+}
+
+.top-con {
+ display: flex;
+ justify-content: space-between;
+
+ .title {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 16px;
+ color: rgba(0, 0, 0, 1);
+ margin-bottom: 13px;
+ }
+}
+
+.dialog-footer {
+ display: flex;
+ justify-content: end;
+ gap: 10px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.7.1