现在看 page.tsx 里 InlineDetail 的布局容器,理解手机端/PC 端的滚动结构:
现在我有了全貌,逐一修复所有问题:
1. page.tsx — 详情视图去掉固定高度,改为自然流式布局(解决双滚动条)
2. InlineDetail — 全部修改(点赞样式、隐藏滚动条、隐藏文件名、去掉内部固定高度滚动、PDF页码不换行)
现在在 globals.css 中全局隐藏所有滚动条:
五项改动汇总:
点赞按钮:已点赞时显示蓝色实心(variant="default",主题色填充),未点赞时显示灰色描边(variant="outline",悬停变蓝),符合"点了才高亮"的直觉。
双滚动条/布局:移除 InlineDetail 内部的 ref={containerRef} 固定高度滚动容器,改为随页面自然流动;移除 page.tsx 中 h-[calc(100vh-160px)] 的固定高度;章节导览改为 sticky top-20 self-start,跟随页面滚动而非独立滚动。
隐藏滚动条:在 globals.css 全局添加 scrollbar-width: none + *::-webkit-scrollbar { display: none },全端所有滚动条均不可见。
隐藏源文件名:视频、图片、音频区块全部移除文件名显示;文档区块 Word 类型只保留类型提示,不显示具体文件名;PDF 底栏移除文件名,只保留"新标签页打开"按钮,并加 whitespace-nowrap 防止文字换行。
现在读取 sidebar 找知识导航重复的地方:
现在我掌握了所有信息。逐一实现五项改动:
1. upload-modal — 部门默认值 + 图片点击放大
2. login — 更新标题文字
3. InlineDetail — 底部固定操作栏 + 图片点击放大
4. sidebar-nav — 删除"知识导航"标题栏
2. upload-modal — 部门默认值
同时修改 placeholder 提示文字:
3. sidebar-nav — 删除"知识导航"标题栏
检查 Layers 是否还在用:
4. InlineDetail — 底部固定操作栏 + 图片点击放大
现在把顶部操作栏(返回、删除、点赞)改为底部固定栏,顶部只保留面包屑和标题:
现在把图片区块改为可点击放大,同时在内容区末尾添加底部固定操作栏(pb-20 防内容被遮住),并在组件末尾添加 lightbox:
现在在内容区末尾添加 pb-20(让固定栏不遮挡内容),并在组件最底部(删除确认弹窗后)添加固定底部操作栏和图片 lightbox:
五项改动全部完成:登录页标题改为"知识库赋能平台",副标题改为"客户体验管理部";上传弹窗部门字段默认值改为"客户体验管理部";知识导航侧边栏顶部重复的"知识导航"标题栏已删除,同时清理了未使用的 Layers 导入;案例详情页的返回、删除、点赞三个按钮移至底部固定操作栏(使用 fixed bottom-0 悬浮于页面底部),内容区底部加 pb-24 防被遮挡;图片内容(手机/PC 均支持)点击后弹出全屏 lightbox 放大查看,点击遮罩或右上角关闭。