解决遗留问题
内容区域的高度没有生效,会随着菜单的高度自动变化。
解决方案:给侧边加上一个最小高度。
首页设计
另一种设计:
进来以后,是所有的文件夹和最近的文件。
有一张表格,类似于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>