1、修改菜单tab激活时自动刷新界面 2、修改报告厅预约界面的样式

This commit is contained in:
zlwu committed 2025-07-10 09:14:28 +08:00
1 parent 210313e9ba
commit eabe865c6c
2 files changed
+36 -7

No files matched your search

@@ -9,6 +9,7 @@
:to="{ path: tag.path ? tag.path : '', query: tag.query }"
class="tags-view-item"
:style="activeStyle(tag)"
@click="handleTagClick(tag, $event)"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
>
@@ -232,6 +233,27 @@ const handleScroll = () => {
closeMenu();
};
// 点击标签时,如果标签已激活,则执行刷新操作
const handleTagClick = (tag: RouteLocationNormalized, e: MouseEvent) => {
// 阻止 router-link 默认行为,统一由脚本控制导航和刷新
e.preventDefault();
if (isActive(tag)) {
// 当前已激活,直接刷新
refreshSelectedTag(tag);
} else {
// 尚未激活,先导航到对应路由,导航成功后再刷新
router
.push({ path: tag.path || '', query: tag.query })
.then(() => {
refreshSelectedTag(tag);
})
.catch(() => {
/* 忽略重复导航错误 */
});
}
};
onMounted(() => {
initTags();
addTags();
+14 -7
View File
@@ -181,7 +181,7 @@
<span class="hall-id">(ID: {{ hall.id }})</span>
</div>
<div class="hall-description" v-if="hall.hallDescription">
{{ hall.hallDescription }}
{{ displayHallDescription(hall.hallDescription) }}
</div>
<div class="hall-images">
<template v-if="getHallImages(hall.hallImage || '').length > 0">
@@ -826,6 +826,13 @@ const handleExport = () => {
);
};
// 在 <script setup> 部分适当位置添加工具函数
/** 将文本截断到指定长度(默认20个字符),超出部分以省略号结尾 */
const displayHallDescription = (desc: string, maxLen = 20) => {
if (!desc) return '';
return desc.length > maxLen ? desc.slice(0, maxLen) + '...' : desc;
};
onMounted(() => {
getList();
getHallList();
@@ -887,19 +894,19 @@ onMounted(() => {
font-size: 12px;
color: #606266;
margin-bottom: 4px;
line-height: 1.3;
max-height: 36px;
max-width: 240px; /* 新增:限制最大宽度,防止下拉框过宽 */
overflow: hidden;
white-space: nowrap; /* 单行显示 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: block;
}
/* 下拉框图片容器:每行最多 6 张图片 */
.hall-images {
display: flex;
display: grid;
grid-template-columns: repeat(6, 40px); /* 6 列,每列宽 40px */
gap: 4px;
flex-wrap: wrap;
}
.hall-image {