python+vue3+onlyoffice在线文档系统实战20240723笔记，项目界面设计和初步开发

news2024/11/15 4:22:05

经过之前的学习，已经能够正常打开文档了。

在这里插入图片描述

目前为止，我们的代码能够实现：

打开文档
编辑文档
手动保存
自动保存

虽然功能依然比较少，但是我们已经基本实现了文档管理最核心的功能，而且我们有个非常大的优势，就是支持多人同时在线协同编辑。

现在我们要开发项目，我们得做基本的项目架构设计。技术架构就不用设计了，但是我们的页面需要规划。交互也需要规划。

我们要做的到底是一个什么样的项目？

我们的基本方向是模仿腾讯文档：https://docs.qq.com/desktop/?_t=1721740429613&u=a54febc2d1484b1db8fe368f479f21ac

这个是首页：
在这里插入图片描述

首页的结构分析大致如下：
在这里插入图片描述

当我们点击新建的时候，会弹出一个下拉菜单。但是这个菜单比较大，内容很多。
在这里插入图片描述

当我们点击文档的时候，会弹出一个对话框：
在这里插入图片描述

模板这个事儿本身并不复杂，但是我们第一个版本的目标是内部使用，所以我们可以不打开对话框，而是直接新建一个空白的文档，并跳转到文档编辑页面。

我们第一个版本的大目标是先实现Word文档的管理，所以其他的功能可以暂时不考虑。

上面首页的布局我们是要重点的参考的，其他的就可以从简，我们直接跳转到onlyoffice的编辑页面即可。

当我们新建了文档，并选择了保存以后，我们回到首页，应该能够在一个表格中，看到我最近创建或者更新的文档列表。
在这里插入图片描述
关于表格的交互我们可以简单点，通过一些按钮去控制，比如删除按钮，编辑按钮，复制按钮等等。

接下来就开始准备开发吧。

先安装antd组件库：

pnpm i ant-design-vue
pnpm i @ant-design/icons-vue

接着添加一个布局页面：
在这里插入图片描述

完整代码如下：

<script setup>
import {
     ref} from 'vue';
import {
     
  Layout, LayoutHeader, Menu,
  MenuItem, LayoutSider, SubMenu,
  Breadcrumb, BreadcrumbItem, LayoutContent,
} from "ant-design-vue"
import {
     
  UserOutlined, LaptopOutlined, NotificationOutlined,
} from "@ant-design/icons-vue"

const selectedKeys1 = ref(['2']);
const selectedKeys2 = ref(['1']);
const openKeys = ref(['sub1']);
</script>

<template>
  <Layout>
    <LayoutHeader class="header">
      <div class="logo"/>
      <Menu
          v-model:selectedKeys="selectedKeys1"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <MenuItem key="1">nav 1</MenuItem>
        <MenuItem key="2">nav 2</MenuItem