Skip to main content

​
概述

根据屏幕尺寸加载不同布局组件，实现 PC 和移动端的差异化体验。

​
组件目录结构

components
feature
common
chat
generator

​
布局切换

// app/generator/[threadId]/layout.tsx
import { GeneratorThreadLayout } from '@/components/feature/common/generator';

export default function GeneratorLayout() {
  const isMobile = useIsMobile(); // from IsMobileProvider, breakpoint: 1024px

  return <GeneratorThreadLayout />;
}

​
PC vs 移动端差异

特性PC移动端
布局左右分栏上下布局
工具栏固定侧边底部弹出
对话面板常驻左侧可折叠
图片查看大画布全屏模式
手势鼠标滚轮缩放双指缩放

​
共享逻辑

PC 和移动端组件共享业务逻辑，通过 hooks 和 common 组件复用。共享组件位于 components/feature/common/，平台特定组件分别位于 components/feature/pc/ 和 components/feature/mobile/。

​
最佳实践

  1. 移动端优先考虑触摸交互
  2. PC 和移动端共享业务逻辑，只拆分布局组件
  3. 使用 useIsMobile（来自 IsMobileProvider）判断设备类型