Skip to main content

Documentation Index

Fetch the complete documentation index at: https://tech.illasoft.com/llms.txt

Use this file to discover all available pages before exploring further.

​
概述

根据屏幕尺寸加载不同布局组件，实现 PC 和移动端的差异化体验。2026-03+ 对移动端做了大量重构，引入了独立的 mobile tool panel + 动态 safe-area。

​
组件目录结构

components/feature
common
chat
generator
feed
home
mobile
generator
mobile-adjust-selector.tsx
mobile-crop-selector.tsx
feed
home
setting

​
布局切换

// app/generator/[threadId]/layout.tsx
export default function GeneratorLayout() {
  const isMobile = useIsMobile();  // from IsMobileProvider, breakpoint: 1024px
  return <GeneratorThreadLayout />;
}
GeneratorThreadLayout 根据 isMobile 内部切换 PC / Mobile 分支。

​
移动端重构（2026-03+）

​
新增核心组件

组件文件用途
MobileHeadermobile/generator/tool/mobile-header.tsx顶部 Tab（mobileViewMode: chat / tool）
MobileToolPanelmobile/generator/tool/mobile-tool-panel.tsx底部工具面板（含 basic / audio / video 三个子 tab）
MobileAudioToolBarmobile/generator/tool/mobile-audio-tool-bar.tsx音频专用工具栏
MobileAddButtonmobile/generator/tool/mobile-add-button.tsxFAB 新建按钮

​
mobileViewMode 切换

移动端通过 mobileViewMode: "chat" | "tool" 做聊天输入栏 vs 工具栏互斥显示，避免软键盘和工具栏同时出现。

​
动态 safe-area

移动端重构了安全区计算，放弃了”静态推断”的旧方案：
  • 使用 dvh（dynamic viewport height） CSS 单位代替固定 vh
    • 例：h-dvh / max-h-[calc(100dvh-70px)]
  • 使用 env(safe-area-inset-*) 处理刘海屏 / 底部手势条
/* 主画布安全高度 */
height: calc(100dvh - var(--mobile-header) - var(--mobile-tool) - env(safe-area-inset-bottom));
没有自定义 useSafeArea hook。safe-area 完全通过 CSS 原生单位实现（dvh + env()）。

​
聊天输入栏 collapsed / expanded

移动端聊天输入栏有独立的”折叠高度”语义，展开输入不影响主画布安全区（通过绝对定位 + overlay）。

​
PC vs 移动端差异

特性PC移动端
布局左右分栏（侧栏+主画布+聊天）mobileViewMode 切换（chat 或 tool）
工具栏固定右侧MobileToolPanel 底部弹层
Header顶部一行MobileHeader + Tab
SelectorPCAdjust / PCCrop 独立MobileAdjust / MobileCrop 独立
画布大区域，鼠标滚轮缩放dvh 动态安全区，双指缩放

​
共享逻辑

  • 业务逻辑在 common/
  • 平台特定 UI 在 pc/ / mobile/
  • hooks 和 store 完全共享

​
最佳实践

  1. 移动端优先考虑触摸交互
  2. PC 和 Mobile 共享业务逻辑，只拆分布局/Selector
  3. 使用 useIsMobile()（来自 IsMobileProvider）
  4. 尺寸用 dvh / env(safe-area-inset-*)，不自建 safe-area hook

​
相关