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>相关文章:
python+vue3+onlyoffice在线文档系统实战20240725笔记,首页开发
解决遗留问题 内容区域的高度没有生效,会随着菜单的高度自动变化。 解决方案:给侧边加上一个最小高度。 首页设计 另一种设计: 进来以后,是所有的文件夹和最近的文件。 有一张表格,类似于Windows目录详情&…...
映美精彩色相机IFrameQueueBuffer转halcon的HObject
1.之前写了黑白IFrameQueueBuffer转halcon的HObject,下载这边文件写,彩色IFrameQueueBuffer转halcon的HObject 2.相机的部署跟黑白的一样,不同的是取图的格式改变 if (CamerTakeImageOne._camer_take_image_static._camer_is_exit){textbox_m…...
写代码对人的影响
1 代码是需要跑起来的,不能你写了一段代码运行不了 2 代码过程中有大量的bug,经常异常报错,你需要花费时间去解决 对人的影响就是解决问题的态度得到强化,解决问题要比坚持正确困难,坚持正确只是需要自然而然的努力&…...
Hive-基础介绍
简介 Apache Hive是一款数据仓库系统 功能 可以将存储在Hadoop(HDFS)中的数据映射为一张数据库表。核心是将HQL语句转化为MapRece程序,然后提交到Hadoop执行。 组件 用户接口:CLI(shell命令行)、WebGUI、Thrift Server元数据存储(Metastore)&#x…...
网站如何从0-1搭建部署蓝图介绍
第一步:网站规划 确定网站目的:明确网站的目标和预期的受众。内容规划:决定网站将包含哪些内容和功能。技术需求分析:确定所需的技术栈,例如前端和后端技术。 第二步:设计 草图和布局:绘制网…...
面向对象(封装)练习题 巩固一下啦!
# 设计一个类,用来描述手机 class Phone:# 提供私有成员变量:__is_5g_enable__is_5g_enable False # 5g状态# 提供私有成员方法:__check_5gdef __check_5g(self):if self.__is_5g_enable:print("5g开启")else:print("5g关闭…...
一些问题 7/28
get post可以public吗 在Java Servlet中,doGet()和doPost()方法的访问修饰符通常是public,因为这些方法需要被Servlet容器(如Tomcat)调用。 如果将这些方法声明为private或protected,Servlet容器将无法访问它们&…...
昇思MindSpore 应用学习-基于MobileNetv2的垃圾分类
基于MobileNetv2的垃圾分类 本文档主要介绍垃圾分类代码开发的方法。通过读取本地图像数据作为输入,对图像中的垃圾物体进行检测,并将检测结果图片保存到文件中。 1、实验目的 了解熟悉垃圾分类应用代码的编写(Python语言)&…...
matlab 常用数据类型的转换
目录 一、数据类型1、整型2、浮点型3、逻辑型4、元胞数组5、结构体 二、数据类型转换三、图像数据类型转换四、参考链接 一、数据类型 1、整型 int和unit都是整型,只是前一个有符号,后一个没有符号,比如在16位系统中,int范围是-3…...
Cocos Creator2D游戏开发(6)-飞机大战(4)-敌机产生
敌机产生&玩家发射子弹 敌机产生: 创建一个空节点 创建一个敌机预制体 把敌机图片拖入预制体内 使用代码生成敌机 让敌机动起来 创建一个预制体enemy_prefab双击预制体enemy_prefab,然后拖入一个敌机图片,设置好方向和尺寸,一定要记得保存然后关闭(场景编辑器里面的保存)…...
Hugo部署到Vercel踩大坑——全是XML文件?
问题描述 部署到Vercel全都是XML文件 Vercel是著名PAAS服务,相比于 Github Pages,其中国大陆可直接访问,因此尝试把Hugo站点发布到vercel中,部署后遇到问题,所有页面都为xml文件,如下所示: Ve…...
2024 暑假友谊赛-热身1
[ABC102D] Equal Cut - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:找在区间[2,n-1]中找到i,j,k三个点,把序列分割成4个区间:[1,i],[i1,j],[j1,k],[k1,n] 暴力的做法是枚举i,j,k加上前缀和是o(n^3)的 key:"考虑枚举处于中间的j,然后用i平衡左两个区间,…...
Nginx系列-11 HTTP消息处理流程
背景 了解Nginx处理HTTP请求的11个阶段,有助于理解和配置nginx、自定义模块、基于lua模块自定义功能。按如下配置,执行"curl http://localhost:8001/query/test.html",如果读者对结果不是很确定,建议阅读本文。 serve…...
前端知识--前端访问后端技术Ajax及框架Axios
一、异步数据请求技术----Ajax Ajax是前端访问后端的技术,为异步请求(不刷新页面,请求数据,只更新局部数据)。 例如:在京东网站中搜索电脑,就会出现一些联想搜索,但此时页面并没有…...
【前端/js】使用js读取本地文件(xml、二进制)内容
目录 说在前面FileReaderDOMParser文本文件二进制文件 说在前面 浏览器版本:Microsoft Edge 126.0.2 (正式版本) (64 位) FileReader MDNFileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容&#x…...
初步入门C ++之类的概念
文章目录 0 Hello World!1 编译过程2 类2.1 类的概念2.2 构造函数与析构函数 0 Hello World! #include <iostream> //相当于#include <stdio.h>int main(int argc, char argv[]) {char c;std::cout << "Hello World!\n" <<…...
什么是技术作家风格指南?
技术写作风格指南旨在提供必要的格式风格,以帮助技术作家为读者创建引人入胜且一致的内容。然而,技术写作与普通的自由写作有很大不同。目的是将复杂的技术主题分解为易于理解的内容,以帮助读者了解如何使用产品或服务。 在本文中࿰…...
WebGIS学习——Cesium|Javascript
1.Cesium学习什么:Cesium实战项目说明-CSDN博客 2.Cesium绘制图形(箭头等):Cesium 态势标绘 _cesium态势标绘-CSDN博客 3.CesiumThree集成 4.Cesium深度图相关:Cesium离屏渲染深度图实验_cesium 离屏渲染-CSDN博客 5.洪涝:cesium淹没分析…...
Qt,获取其他.exe文件的标准输出流的信息(printf/print的输出信息)
比如,通过Python编写爬虫软件功能是运行程序获取豆瓣电影排行榜信息,并通过print打印出来。将其打包成.exe,通过Qt来调用,并获取到.exe程序运行的结果 简单示例代码: // 创建 QProcess 对象QProcess process;// 连接信号槽以获取…...
LeetCode 热题 HOT 100 (010/100)【宇宙最简单版】
【链表】No. 0206 反转链表 【简单】👉力扣对应题目指路 希望对你有帮助呀!!💜💜 如有更好理解的思路,欢迎大家留言补充 ~ 一起加油叭 💦 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
