ios-projects/react/src/pages/ImportPage.tsx

// Page 20: Import Page - 导入资料页
import { ArrowLeftIcon, UploadIcon, LinkIcon, FileTextIcon, FileIcon, CheckCircleIcon, SparklesIcon } from 'lucide-react';

const recentImports = [
  { name: `CS229 Lecture Notes.pdf`, size: `2.4 MB`, items: 12, status: 'done' },
  { name: `统计学基础.docx`, size: `1.1 MB`, items: 8, status: 'done' },
  { name: `attention_is_all_you_need.pdf`, size: `3.8 MB`, items: 0, status: 'processing' },
];

const ImportPage = () => {
  return (
    <div
      data-cmp="ImportPage"
      className="absolute inset-0 flex flex-col"
      style={{ background: '#0F0F1A', paddingTop: '44px' }}
    >
      {/* Nav */}
      <div className="flex items-center justify-between px-4 py-3"
        style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}
      >
        <button
          style={{
            width: '36px', height: '36px', borderRadius: '10px',
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(255,255,255,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <ArrowLeftIcon size={18} style={{ color: 'rgba(240,240,255,0.7)' }} />
        </button>
        <p style={{ fontSize: '15px', fontWeight: '700', color: '#F0F0FF' }}>导入资料</p>
        <div style={{ width: '36px' }} />
      </div>

      <div className="flex-1 overflow-y-auto px-5 py-5">
        {/* Target library */}
        <div
          className="flex items-center gap-3 px-4 py-3 mb-5"
          style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: '14px',
          }}
        >
          <span style={{ fontSize: '16px' }}>🤖</span>
          <span style={{ flex: 1, fontSize: '13px', color: 'rgba(240,240,255,0.6)' }}>
            导入到：<span style={{ color: '#F0F0FF', fontWeight: '700' }}>机器学习</span>
          </span>
          <span style={{ fontSize: '12px', color: '#7C6EFA' }}>更改</span>
        </div>

        {/* Import methods */}
        <div className="flex flex-col gap-4 mb-6">
          {/* Upload file */}
          <div
            style={{
              background: 'rgba(124,110,250,0.08)',
              border: '2px dashed rgba(124,110,250,0.3)',
              borderRadius: '20px',
              padding: '24px',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '8px',
            }}
          >
            <div
              style={{
                width: '52px', height: '52px', borderRadius: '16px',
                background: 'rgba(124,110,250,0.2)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: '4px',
              }}
            >
              <UploadIcon size={24} style={{ color: '#7C6EFA' }} />
            </div>
            <p style={{ fontSize: '15px', fontWeight: '700', color: '#F0F0FF' }}>上传文件</p>
            <p style={{ fontSize: '12px', color: 'rgba(240,240,255,0.4)', textAlign: 'center', lineHeight: '1.6' }}>
              支持 PDF、Word、PPT、TXT、Markdown
            </p>
            <button
              style={{
                marginTop: '4px',
                padding: '10px 24px',
                background: 'linear-gradient(135deg, #7C6EFA, #9B8BFF)',
                borderRadius: '12px',
                fontSize: '13px', fontWeight: '700', color: 'white',
                boxShadow: '0 4px 12px rgba(124,110,250,0.25)',
              }}
            >
              选择文件
            </button>
          </div>

          {/* Row: Paste text + Link */}
          <div className="flex gap-3">
            {/* Paste text */}
            <div
              className="flex-1 flex flex-col items-center gap-2 py-5"
              style={{
                background: 'rgba(45,212,191,0.07)',
                border: '1px solid rgba(45,212,191,0.2)',
                borderRadius: '16px',
              }}
            >
              <div
                style={{
                  width: '44px', height: '44px', borderRadius: '14px',
                  background: 'rgba(45,212,191,0.15)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}
              >
                <FileTextIcon size={20} style={{ color: '#2DD4BF' }} />
              </div>
              <p style={{ fontSize: '13px', fontWeight: '700', color: '#F0F0FF' }}>粘贴文本</p>
              <p style={{ fontSize: '11px', color: 'rgba(240,240,255,0.35)', textAlign: 'center', padding: '0 8px', lineHeight: '1.5' }}>
                直接粘贴文章、笔记或教材内容
              </p>
            </div>

            {/* URL import */}
            <div
              className="flex-1 flex flex-col items-center gap-2 py-5"
              style={{
                background: 'rgba(249,115,22,0.07)',
                border: '1px solid rgba(249,115,22,0.2)',
                borderRadius: '16px',
              }}
            >
              <div
                style={{
                  width: '44px', height: '44px', borderRadius: '14px',
                  background: 'rgba(249,115,22,0.15)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}
              >
                <LinkIcon size={20} style={{ color: '#F97316' }} />
              </div>
              <p style={{ fontSize: '13px', fontWeight: '700', color: '#F0F0FF' }}>链接导入</p>
              <p style={{ fontSize: '11px', color: 'rgba(240,240,255,0.35)', textAlign: 'center', padding: '0 8px', lineHeight: '1.5' }}>
                支持网页、arXiv 论文、在线文档
              </p>
            </div>
          </div>
        </div>

        {/* AI Processing Info */}
        <div
          className="mb-6 px-4 py-4"
          style={{
            background: 'rgba(124,110,250,0.07)',
            border: '1px solid rgba(124,110,250,0.18)',
            borderRadius: '16px',
          }}
        >
          <div className="flex items-center gap-2 mb-3">
            <SparklesIcon size={15} style={{ color: '#A78BFA' }} />
            <p style={{ fontSize: '13px', fontWeight: '700', color: '#F0F0FF' }}>AI 智能处理流程</p>
          </div>
          <div className="flex flex-col gap-2">
            {[
              '解析文档内容，提取核心知识点',
              '自动分类并补充背景信息',
              '生成费曼测试题和间隔复习计划',
              '识别关联已有知识，建立知识网络',
            ].map((step, i) => (
              <div key={i} className="flex items-start gap-3">
                <div
                  style={{
                    width: '18px', height: '18px', borderRadius: '50%',
                    background: 'rgba(124,110,250,0.2)',
                    border: '1px solid rgba(124,110,250,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: '9px', fontWeight: '700',
                    color: '#A78BFA',
                    flexShrink: 0, marginTop: '1px',
                  }}
                >
                  {i + 1}
                </div>
                <span style={{ fontSize: '12px', color: 'rgba(240,240,255,0.55)', lineHeight: '1.6' }}>{step}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Recent imports */}
        <div>
          <h2 style={{ fontSize: '14px', fontWeight: '700', color: '#F0F0FF', marginBottom: '12px' }}>最近导入</h2>
          <div className="flex flex-col gap-3">
            {recentImports.map((file, i) => (
              <div
                key={i}
                className="flex items-center gap-3 px-4 py-3"
                style={{
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid rgba(255,255,255,0.07)',
                  borderRadius: '14px',
                }}
              >
                <div
                  style={{
                    width: '40px', height: '40px', borderRadius: '12px',
                    background: 'rgba(255,255,255,0.07)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}
                >
                  <FileIcon size={18} style={{ color: 'rgba(240,240,255,0.4)' }} />
                </div>
                <div className="flex-1 min-w-0">
                  <p
                    style={{
                      fontSize: '13px', fontWeight: '600', color: '#F0F0FF',
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}
                  >
                    {file.name}
                  </p>
                  <p style={{ fontSize: '11px', color: 'rgba(240,240,255,0.35)', marginTop: '2px' }}>
                    {file.size}
                  </p>
                </div>
                {file.status === 'done' ? (
                  <div className="flex items-center gap-1">
                    <CheckCircleIcon size={14} style={{ color: '#34D399' }} />
                    <span style={{ fontSize: '11px', color: '#34D399' }}>{file.items} 个知识点</span>
                  </div>
                ) : (
                  <div className="flex items-center gap-2">
                    <div
                      style={{
                        width: '16px', height: '16px', borderRadius: '50%',
                        border: '2px solid rgba(124,110,250,0.3)',
                        borderTopColor: '#7C6EFA',
                        animation: 'spin 1s linear infinite',
                      }}
                    />
                    <span style={{ fontSize: '11px', color: '#A78BFA' }}>处理中…</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ImportPage;