Skip to main content

​
概述

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

​
组件目录结构

components
feature
common
chat
generator

​
布局切换

// app/generator/page.tsx
import { PCGeneratorLayout } from '@/components/feature/pc/generator';
import { MobileGeneratorLayout } from '@/components/feature/mobile/generator';

export default function GeneratorPage() {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return isMobile ? <MobileGeneratorLayout /> : <PCGeneratorLayout />;
}

​
PC vs 移动端差异

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

​
共享逻辑

PC 和移动端组件共享业务逻辑，通过 hooks 复用： 
// hooks/useImageEditor.ts
export function useImageEditor() {
  const { currentImage, setCurrentImage } = useGeneratorStore();

  const applyEdit = async (edit: EditOperation) => {
    // 共享的编辑逻辑
  };

  return { currentImage, applyEdit };
}

​
最佳实践

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