fix(ai): 窄屏下保证「进入后台」入口与对话区可见
测试反馈学生在 admin 侧看不到后台管理入口。桌面端入口正常;窄屏/手机上侧栏被历史列表的固定高度撑满(接近 100vh),底部按钮落到地址栏之后,对话区也被顶出视口。窄屏改为 dvh + 侧栏限高,历史列表自适应,固定 800px 的对话块改为 100%,并清掉调试日志。
This commit is contained in:
@@ -561,7 +561,6 @@ const userStore = useUserStore();
|
||||
const { push } = useRouter();
|
||||
const route = useRoute();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
console.log('loginUser', loginUser)
|
||||
const userName = computed(
|
||||
() =>
|
||||
loginUser.value.nickname ||
|
||||
@@ -1736,9 +1735,7 @@ const goAdmin = async () => {
|
||||
return;
|
||||
}
|
||||
const authorityTree = buildAuthorityTree(loginUser.value.authorities);
|
||||
console.log('authorityTree', authorityTree)
|
||||
const firstPath = findFirstChildMenuPath(authorityTree);
|
||||
console.log('firstPath', firstPath)
|
||||
|
||||
if (!firstPath) {
|
||||
message.warning("当前用户没有可进入的后台菜单");
|
||||
@@ -2853,23 +2850,55 @@ export default {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
/*
|
||||
窄屏/移动端把侧栏收成顶部一块,而不是让它按历史列表的固定高度撑满整屏:
|
||||
否则 .chat-sidebar 会接近 100vh,底部的「进入后台」「退出登录」被挤到
|
||||
浏览器地址栏/工具栏后面(手机上看起来就是没有入口),对话区也会被顶出视口。
|
||||
这里用 dvh 跟随移动端动态视口,旧浏览器回退到 vh。
|
||||
*/
|
||||
.chat-page {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-sidebar {
|
||||
width: 100%;
|
||||
max-height: 52vh;
|
||||
max-height: 52dvh;
|
||||
padding: 16px 16px 12px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #c7e8ff;
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
padding: 24px 24px 0;
|
||||
.brand-block,
|
||||
.new-chat-btn,
|
||||
.sidebar-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.history-block {
|
||||
height: auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 16px 16px 0;
|
||||
}
|
||||
|
||||
/* 桌面端这些块固定 800px 宽,窄屏下会顶出右边界被裁掉 */
|
||||
.chat-body,
|
||||
.input-shell,
|
||||
.history-banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user