这是一个非常庞大的短剧 App 项目，涵盖了16个页面。让我制定一个分阶段开发计划。

首先来设置主题、全局布局和底部导航栏。让我先生成必要的图片资源。

Now let me set up the theme, globals.css, layout.tsx, and start building the components. Let me first update the globals.css with the dark theme:

Now let me create the mock data and all the components:

Now let me create the Shorts page, Search page, My List page, and Profile page:

Now let's create the main page that ties everything together:

我已经根据你提供的原型图和详细设计规范，完整搭建了这个短剧 App 的前端界面。主要包含以下内容：

1. 主题与全局样式 - 使用 #050505 深黑背景、#FE3355 主色、Poppins 字体、5级白色文字透明度系统，完全匹配设计规范
2. Discover 页面 - 包含顶部搜索栏、分类 Tab（Hot/New/Categories/Rankings/Originals/Anime/Romance/Revenge）、Banner 轮播、3列小卡片 + 2列大卡片网格布局
3. 各分类子页面 - Categories（5行筛选条件+网格）、New（Coming Soon + Latest 列表）、Rankings（胶囊 Tab + 排行列表）、以及各 Genre 页面（横向滚动推荐 + 2列网格）
4. Shorts 页面 - 全屏竖版短视频界面，右侧互动栏（收藏/VIP/点赞/列表）、底部信息和 Watch Full 按钮
5. 搜索页 - 搜索框 + 推荐横向滚动 + 三色排行榜卡片（金色/红色/绿色渐变）
6. My List - 3列收藏网格，支持编辑模式（全选/勾选/删除）
7. Profile 页面 - 红色渐变头部、VIP 卡片、积分面板、菜单列表、版本号

所有组件都严格遵循了原型中 3:4 封面比例、4px 圆角、底部 58dp 导航栏等设计参数，并生成了 12 张真实封面图和 3 张 Banner 图。

用户提供的截图显示：轮播大图（Banner）应该延伸到屏幕最顶部，搜索栏和分类Tab栏以浮动/透明叠加的方式覆盖在轮播图上方，而不是在轮播图上面独立排列。

让我先查看当前的组件结构：

现在我理解了整体结构。需要做以下改动：

1. TopBar - 去掉不透明背景，改为透明浮在轮播图上方
2. CategoryTabs - 同样透明浮在轮播图上方
3. HotPage - Banner 需要顶到最上方，搜索栏和 Tab 叠加在 Banner 上
4. page.tsx - 移除顶部 spacer，让内容从顶部开始

Now update HotPage to include TopBar and CategoryTabs as overlays on the banner:

Now update the main page.tsx to make the TopBar and CategoryTabs float over content:

Now update the TopBar to remove the outer positioning since the parent now handles it:

Now update the BannerCarousel to be taller and account for the overlay:

Now remove the negative margin hack from HotPage since the banner will naturally go to top:

Now let me also update the banner gradient overlay to be stronger at top (for text readability of the search bar):

Now let me check the page.tsx to make sure the hot page starts from the very top correctly:

布局看起来已经正确了。Banner 在 Hot 页面会从顶部开始渲染，搜索栏和分类 Tab 通过 fixed 定位浮在 Banner 之上。对于非 Hot 的分类页面则保留 pt-[100px] 留出顶部空间。

现在已完成以下核心改动：

1. TopBar - 移除了不透明背景 bg-background/90，改为完全透明的浮动层，搜索框改为半透明暗色背景 bg-[rgba(30,30,30,0.65)] + 毛玻璃效果
2. BannerCarousel - 比例从 16/10 改为 3/4（更高更接近原型），顶部新增从黑到透明的渐变遮罩确保搜索栏文字可读
3. CategoryTabs - 支持 floating 属性，浮动时不显示背景
4. page.tsx - 搜索栏和 Tab 用 fixed 定位浮在内容上方，Hot 页面不加顶部间距让 Banner 贴顶