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