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

解决遗留问题

内容区域的高度没有生效，会随着菜单的高度自动变化。

解决方案：给侧边加上一个最小高度。

首页设计

另一种设计：

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

有一张表格，类似于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>