252 lines
9.9 KiB
TypeScript
252 lines
9.9 KiB
TypeScript
|
// 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;
|