当前位置：首页 > news >正文

python+vue3+onlyoffice在线文档系统实战20240725笔记，首页开发

news 来源：原创 2024/9/22 15:41:15

解决遗留问题

内容区域的高度没有生效，会随着菜单的高度自动变化。
在这里插入图片描述

解决方案：给侧边加上一个最小高度。
在这里插入图片描述

首页设计

另一种设计：
在这里插入图片描述

进来以后，是所有的文件夹和最近的文件。

有一张表格，类似于Windows目录详情，先展示所有的目录，再接着展示所有的文件。

顶部不要了，所有菜单放左侧。

最近文档，纯粹文档
我的文档，既包括文件夹也包括文件
共享文档，别人分享给我的

文件夹需要支持子文件夹吗？不需要，一级就够了！！！

得到结论：

布局改为左右布局
菜单项：最近文档，我的文档，共享文档

先改布局

效果预览：
在这里插入图片描述

此时的完整代码：

<script setup>
import {ref} from 'vue';const collapsed = ref(false);
const selectedKeys = ref(['1']);
</script><template><a-layout style="min-height: 100vh"><a-layout-sider><div class="logo">XX内部文档系统</div><div class="avatar"><a-avatar class="username">U</a-avatar></div><a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"><a-menu-item key="1"><pie-chart-outlined/><span>Option 1</span></a-menu-item><a-menu-item key="2"><desktop-outlined/><span>Option 2</span></a-menu-item><a-sub-menu key="sub1"><template #title><span><user-outlined/><span>User</span></span></template><a-menu-item key="3">Tom</a-menu-item><a-menu-item key="4">Bill</a-menu-item><a-menu-item key="5">Alex</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><team-outlined/><span>Team</span></span></template><a-menu-item key="6">Team 1</a-menu-item><a-menu-item key="8">Team 2</a-menu-item></a-sub-menu><a-menu-item key="9"><file-outlined/><span>File</span></a-menu-item></a-menu></a-layout-sider><a-layout><a-layout-header style="background: #fff; padding: 0"/><a-layout-content style="margin: 0 16px"><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>User</a-breadcrumb-item><a-breadcrumb-item>Bill</a-breadcrumb-item></a-breadcrumb><div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">Bill is a cat.</div></a-layout-content><a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer></a-layout></a-layout>
</template><style scoped>
.logo {color: #ffffff;font-weight: bold;font-size: 24px;text-align: center;padding: 20px 0;
}.avatar {display: flex;justify-content: center;margin-bottom: 20px;
}.avatar .username {color: #f56a00;background-color: #fde3cf;margin: 0 auto;
}
</style>