铃铛与齿轮两枚图标下线,人像图标成为唯一入口,点击展开一张卡片: 切换身份列表(9条实测溢出滚动)+ 个人信息 + 后台管理(仅管理员)+ 退出登录。 删除无功能损失的冗余入口:原齿轮菜单的 sys/logo/sidebar/statset/backend 五项 已于 2026-09-30 迁入 /settings(Settings.vue:620 ALL_PANES),齿轮成为纯冗余。 消息中心仍走左侧菜单 /msg,LeftMenu 未读角标不受影响。 改动要点: - isUserInfoShow + isRoleInfoShow 合并为 isUserCardShow,9 处函数体同步改名; 删除 onUserinfoClickRoles、storeToRefs import 与 unreadCount 解构(模板已无 Badge) - showUserInfo 改跳 /settings?pane=profile,不再 emit showUserInfoModal (该事件仍有 AppHeader/BschIframe/harness-main 三处消费方,不可删) - :key 用 roleId-schId-childId 复合键,避免同校多身份时 roleId 重复 - header.scss 删 .roleinfo-wrap 与随之失效的 @use "sass:color",新增 .user-card (身份列表 max-height:310px + overflow-y:scroll + 6px 自绘滚动条) - settingsWallpaper 等 6 个入口函数保留:对应 Modal 仍挂模板尾部且 logoList 是 header 徽标数据源,只改内部变量名并加注释 验证:未声明标识符全量扫 47 个 .vue 零问题;vite build 通过;mock 取证实测 scrollHeight 683 > clientHeight 310 出滚动条、1 条时 75=75 不滚动、 menu-rows 管理员 2/普通用户 1、bell-count 与 gear-count 均为 0。 另:.gitignore 忽略卡片取证三件套(本地临时用,与 harness-* 同类不进 git)。
This commit is contained in:
+145
-40
@@ -1,4 +1,3 @@
|
||||
@use "sass:color";
|
||||
.default-header {
|
||||
width: 100%;
|
||||
height: var(--headerH);
|
||||
@@ -220,59 +219,165 @@
|
||||
}
|
||||
}
|
||||
|
||||
.roleinfo-wrap {
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
h3.title {
|
||||
height: 50px;
|
||||
padding: 12px 16px;
|
||||
color: #272829;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.roles-ul {
|
||||
max-height: 310px;
|
||||
}
|
||||
.roles-ul li {
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 62px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
/* ===== 用户卡片(人像图标唯一入口,2026-10-08)=====
|
||||
规格来源:design/05-Header用户卡片整合-切换身份+个人信息+后台管理+退出登录.html
|
||||
全部复用既有变量,仅新增卡片骨架与滚动条 */
|
||||
.user-card {
|
||||
width: 260px;
|
||||
background: #fff;
|
||||
|
||||
&:hover {
|
||||
// background-color: darken(#f9f9f9, 5%);
|
||||
background-color: color.adjust($color: #f9f9f9, $lightness: -5%);
|
||||
}
|
||||
.user-card-hd {
|
||||
height: 50px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
|
||||
svg {
|
||||
margin: 0 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.ttl {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #272829;
|
||||
}
|
||||
.close {
|
||||
margin-left: auto;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
color: #9aa0a8;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f2f3f5;
|
||||
color: #5a5f68;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 身份列表:有最大高度,超出显示滚动条 */
|
||||
.user-card-roles {
|
||||
max-height: 310px;
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d4d7dd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #b9bec7;
|
||||
}
|
||||
}
|
||||
|
||||
.u-role {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 16px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.15s;
|
||||
|
||||
> svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 16px;
|
||||
flex: 0 0 16px;
|
||||
}
|
||||
|
||||
.user-wrap {
|
||||
padding: 9px 0;
|
||||
|
||||
.who {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
flex: auto;
|
||||
.schname-box {
|
||||
|
||||
.nm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
color: #323233;
|
||||
line-height: 20px;
|
||||
|
||||
.t {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.sch {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #656667;
|
||||
line-height: 17px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&:last-child .user-wrap {
|
||||
|
||||
&:last-child .who {
|
||||
border-bottom: none;
|
||||
}
|
||||
&:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
&.active {
|
||||
cursor: default;
|
||||
background: #f9f9f9;
|
||||
|
||||
.nm {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.roles-ul li.acitve {
|
||||
cursor: default;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.user-card-menu {
|
||||
border-top: 1px solid #e9e9e9;
|
||||
|
||||
.arw {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-logout {
|
||||
padding: 10px 20px 16px;
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e5ea;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s;
|
||||
|
||||
&:hover {
|
||||
border-color: #577afb;
|
||||
background: #f7f9ff;
|
||||
color: #577afb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user