字段

ellipsis

意思是 columns 中的当单元格中内容太长，显示…

const columns: ColumnsType<FileInfo> = [
    {
      title: '文件名',
      dataIndex: 'file_name',
      key: 'file_name',
      ellipsis: true,
      render: (text: string) => <Text strong>{text}</Text>,
    },
    {
      title: '文件大小',
      dataIndex: 'file_size',
      key: 'file_size',
      width: 120,
      render: (size: number) => formatFileSize(size),
    },
    {
      title: '上传时间',
      dataIndex: 'uploaded_at',
      key: 'uploaded_at',
      width: 180,
      render: (date: string) => formatDateTime(date),
    },
    {
      title: '操作',
      key: 'actions',
      width: 220,
      render: (_, record: FileInfo) => (
        <Space size="small">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handlePreview(record)}
          >
            预览
          </Button>
          <Button
            type="link"
            icon={<DownloadOutlined />}
            onClick={() => handleDownload(record)}
          >
            下载
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

移动端页面出现偏移

（我们使用 tailwindcss） 在index.css中，用 vite 构建的 react 应用 body 包含两个 css 属性

body {
  margin: 0;
  display: flex;             <---
  place-items: center;       <---
  min-width: 320px;
  min-height: 100vh;
}

这两个会与我们在App.tsx中定义的移动端视窗出现冲突

return (
    <div className="min-h-screen bg-slate-100 flex items-center justify-center font-sans text-slate-900">
      {/* Mobile Container */}
      <div className="w-full max-w-md h-[100dvh] bg-white shadow-2xl overflow-hidden relative sm:rounded-[2rem] sm:h-[850px] sm:border-8 sm:border-slate-900">
        {/* Notch (Visual only for desktop view) */}
        <div className="hidden sm:block absolute top-0 left-1/2 -translate-x-1/2 w-32 h-7 bg-slate-900 rounded-b-2xl z-50 pointer-events-none" />
)

修改内容：
移除 display: flex 和 place-items: center

  1. 移动端：w-full h-[100dvh] 会让应用占满整个屏幕
  2. 桌面端：min-h-screen flex items-center justify-center 会让模拟的手机容器居中显示

防止滚动

此外，我们为了防止移动端整体 div 根可以滚动，可以修改 App.tsx 返回的内容如下：

function App() {
  const [screen, setScreen] = useState<AppState>('landing');

  return (
    <div className="fixed inset-0 w-full h-[100dvh] overflow-hidden bg-slate-100 font-sans text-slate-900 sm:static sm:min-h-screen sm:h-auto sm:flex sm:items-center sm:justify-center sm:overflow-visible">
      {/* Mobile Container */}
      <div className="w-full h-full max-w-md bg-white shadow-2xl overflow-hidden relative sm:h-[850px] sm:rounded-[2rem] sm:border-8 sm:border-slate-900">
        {/* Notch (Visual only for desktop view) */}
        <div className="hidden sm:block absolute top-0 left-1/2 -translate-x-1/2 w-32 h-7 bg-slate-900 rounded-b-2xl z-50 pointer-events-none" />

将外层容器的 min-h-screen 修改为 fixed 避免最外层可以滚动，内层移动端视图使用 h-full 撑满容器。其他一些 css 属性随之修改