- UI设计: 文件列表页 Draw.io 设计稿 - 架构: 数据库设计文档 - 后端: 用户认证接口实现 (login/register) 待完成: - 前端 Electron 主进程开发 - 文件管理 API 开发 - 测试用例编写
76 lines
4.4 KiB
Plaintext
76 lines
4.4 KiB
Plaintext
<mxfile host="app.diagrams.net" modified="2026-03-10T07:20:00Z" agent="OpenClaw" version="21.0.0">
|
|
<diagram name="文件列表页">
|
|
<mxGraphModel dx="1000" dy="700" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1200" pageHeight="700" math="0" shadow="0">
|
|
<root>
|
|
<mxCell id="0" />
|
|
<mxCell id="1" parent="0" />
|
|
|
|
<!-- 顶部导航栏 -->
|
|
<mxCell id="header" value="CloudDisk - 我的网盘" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#1890ff;strokeColor=#096dd9;fontColor=#ffffff;fontSize=16" vertex="1" parent="1">
|
|
<mxGeometry x="0" y="0" width="1200" height="50" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 搜索栏 -->
|
|
<mxCell id="search" value="🔍 搜索文件..." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="400" y="10" width="300" height="30" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 侧边栏 -->
|
|
<mxCell id="sidebar" value="我的文件
最近访问
共享文件
回收站
──────
存储空间: 2.1GB/10GB" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fafafa;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="0" y="50" width="200" height="650" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 工具栏 -->
|
|
<mxCell id="toolbar" value="⬆ 上传 📁 新建文件夹 ⬜ 全选 🗑 删除" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="200" y="50" width="1000" height="40" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 面包屑 -->
|
|
<mxCell id="breadcrumb" value="全部文件 > Documents > Project" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="200" y="90" width="1000" height="30" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件列表区域 -->
|
|
<mxCell id="fileArea" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#ffffff" vertex="1" parent="1">
|
|
<mxGeometry x="200" y="120" width="1000" height="580" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件1 -->
|
|
<mxCell id="file1" value="📁 Project" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7e6;strokeColor=#ffd591" vertex="1" parent="1">
|
|
<mxGeometry x="220" y="140" width="180" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件2 -->
|
|
<mxCell id="file2" value="📄 report.pdf
2.5MB · 2026-03-01" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="420" y="140" width="180" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件3 -->
|
|
<mxCell id="file3" value="🖼 photo.jpg
3.2MB · 2026-02-28" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="620" y="140" width="180" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件4 -->
|
|
<mxCell id="file4" value="📄 notes.docx
156KB · 2026-02-25" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="820" y="140" width="180" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件5 -->
|
|
<mxCell id="file5" value="📁 Documents" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7e6;strokeColor=#ffd591" vertex="1" parent="1">
|
|
<mxGeometry x="220" y="240" width="180" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 文件6 -->
|
|
<mxCell id="file6" value="🎵 music.mp3
5.1MB · 2026-02-20" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="420" y="240" width="180" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- 底部状态栏 -->
|
|
<mxCell id="status" value="已选择 3 个文件 · 共 15.2GB" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#d9d9d9" vertex="1" parent="1">
|
|
<mxGeometry x="200" y="650" width="1000" height="30" as="geometry" />
|
|
</mxCell>
|
|
</root>
|
|
</mxGraphModel>
|
|
</diagram>
|
|
</mxfile>
|