fix: 修复 AppSidebar 组件未导入导致 prop 序列化错误,大屏幕隐藏副导航避免内容重复

- 添加缺失的 AppSidebar import(修复 types prop 显示为 [object Object] 的问题)
- 大屏幕(≥1200px)隐藏 AppSubNav,避免与 AppSidebar 分类列表重复
- 移除布局调试代码(调试条、updateLayoutInfo、调试 CSS)
This commit is contained in:
bwstudio
2026-06-11 08:12:21 +08:00
parent 1eeadb815b
commit b5194c4965
+20 -7
View File
@@ -70,6 +70,7 @@
import { ref, provide, onMounted, computed, watch } from 'vue' import { ref, provide, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue' import AppHeader from '@/components/AppHeader.vue'
import AppSidebar from '@/components/AppSidebar.vue'
import AppSubNav from '@/components/AppSubNav.vue' import AppSubNav from '@/components/AppSubNav.vue'
import AppRightbar from '@/components/AppRightbar.vue' import AppRightbar from '@/components/AppRightbar.vue'
import Footer from '@/components/Footer.vue' import Footer from '@/components/Footer.vue'
@@ -98,6 +99,7 @@ const filterCrowdIds = ref([])
// 热门笑话(右侧栏) // 热门笑话(右侧栏)
const hotJokes = ref([]) const hotJokes = ref([])
// 右侧栏:仅首页显示 // 右侧栏:仅首页显示
const showRightBar = computed(() => route.path === '/') const showRightBar = computed(() => route.path === '/')
// 副导航:首页/分类/搜索显示,详情页显示推荐列表 // 副导航:首页/分类/搜索显示,详情页显示推荐列表
@@ -186,7 +188,7 @@ onMounted(async () => {
console.warn('[APP] Failed to load hot jokes:', e) console.warn('[APP] Failed to load hot jokes:', e)
hotJokes.value = [] hotJokes.value = []
} }
}) })
</script> </script>
<style> <style>
@@ -274,17 +276,25 @@ onMounted(async () => {
} }
} }
/* 超宽屏填满屏幕,逐步去掉居中限制 */ /* 1024px+ 强制填满屏幕 */
@media (min-width: 1024px) { @media (min-width: 1024px) {
:root { .content-wrapper {
--content-max-width: 100%; max-width: 100% !important;
--content-padding: 20px; margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--content-padding) !important;
padding-right: 0 !important;
}
.app-header .header-inner {
max-width: 100% !important;
padding-left: var(--content-padding) !important;
padding-right: var(--content-padding) !important;
} }
} }
/* 大屏增加内边距 */ /* 大屏增加内边距 */
@media (min-width: 1400px) { @media (min-width: 1400px) {
:root { :root {
--content-max-width: 100%;
--content-padding: 32px; --content-padding: 32px;
} }
} }
@@ -343,7 +353,7 @@ body {
} }
} }
/* 大屏幕显示所有侧边栏 */ /* 大屏幕显示 AppSidebar + 右侧栏,隐藏副导航(避免与 AppSidebar 内容重复) */
@media (min-width: 1200px) { @media (min-width: 1200px) {
.left-sidebar { .left-sidebar {
display: block; display: block;
@@ -351,6 +361,9 @@ body {
min-width: var(--sidebar-width); min-width: var(--sidebar-width);
flex-shrink: 0; flex-shrink: 0;
} }
.left-subnav {
display: none !important;
}
.rightbar { .rightbar {
width: var(--rightbar-width); width: var(--rightbar-width);
min-width: var(--rightbar-width); min-width: var(--rightbar-width);