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

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笔记,首页开发

解决遗留问题 内容区域的高度没有生效&#xff0c;会随着菜单的高度自动变化。 解决方案&#xff1a;给侧边加上一个最小高度。 首页设计 另一种设计&#xff1a; 进来以后&#xff0c;是所有的文件夹和最近的文件。 有一张表格&#xff0c;类似于Windows目录详情&…...

映美精彩色相机IFrameQueueBuffer转halcon的HObject

1.之前写了黑白IFrameQueueBuffer转halcon的HObject&#xff0c;下载这边文件写&#xff0c;彩色IFrameQueueBuffer转halcon的HObject 2.相机的部署跟黑白的一样&#xff0c;不同的是取图的格式改变 if (CamerTakeImageOne._camer_take_image_static._camer_is_exit){textbox_m…...

写代码对人的影响

1 代码是需要跑起来的&#xff0c;不能你写了一段代码运行不了 2 代码过程中有大量的bug&#xff0c;经常异常报错&#xff0c;你需要花费时间去解决 对人的影响就是解决问题的态度得到强化&#xff0c;解决问题要比坚持正确困难&#xff0c;坚持正确只是需要自然而然的努力&…...

Hive-基础介绍

简介 Apache Hive是一款数据仓库系统 功能 可以将存储在Hadoop(HDFS)中的数据映射为一张数据库表。核心是将HQL语句转化为MapRece程序&#xff0c;然后提交到Hadoop执行。 组件 用户接口&#xff1a;CLI(shell命令行)、WebGUI、Thrift Server元数据存储(Metastore)&#x…...

网站如何从0-1搭建部署蓝图介绍

第一步&#xff1a;网站规划 确定网站目的&#xff1a;明确网站的目标和预期的受众。内容规划&#xff1a;决定网站将包含哪些内容和功能。技术需求分析&#xff1a;确定所需的技术栈&#xff0c;例如前端和后端技术。 第二步&#xff1a;设计 草图和布局&#xff1a;绘制网…...

面向对象(封装)练习题 巩固一下啦!

# 设计一个类&#xff0c;用来描述手机 class Phone:# 提供私有成员变量&#xff1a;__is_5g_enable__is_5g_enable False # 5g状态# 提供私有成员方法&#xff1a;__check_5gdef __check_5g(self):if self.__is_5g_enable:print("5g开启")else:print("5g关闭…...

一些问题 7/28

get post可以public吗 在Java Servlet中&#xff0c;doGet()和doPost()方法的访问修饰符通常是public&#xff0c;因为这些方法需要被Servlet容器&#xff08;如Tomcat&#xff09;调用。 如果将这些方法声明为private或protected&#xff0c;Servlet容器将无法访问它们&…...

昇思MindSpore 应用学习-基于MobileNetv2的垃圾分类

基于MobileNetv2的垃圾分类 本文档主要介绍垃圾分类代码开发的方法。通过读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并将检测结果图片保存到文件中。 1、实验目的 了解熟悉垃圾分类应用代码的编写&#xff08;Python语言&#xff09;&…...

matlab 常用数据类型的转换

目录 一、数据类型1、整型2、浮点型3、逻辑型4、元胞数组5、结构体 二、数据类型转换三、图像数据类型转换四、参考链接 一、数据类型 1、整型 int和unit都是整型&#xff0c;只是前一个有符号&#xff0c;后一个没有符号&#xff0c;比如在16位系统中&#xff0c;int范围是-3…...

Cocos Creator2D游戏开发(6)-飞机大战(4)-敌机产生

敌机产生&玩家发射子弹 敌机产生: 创建一个空节点 创建一个敌机预制体 把敌机图片拖入预制体内 使用代码生成敌机 让敌机动起来 创建一个预制体enemy_prefab双击预制体enemy_prefab,然后拖入一个敌机图片,设置好方向和尺寸,一定要记得保存然后关闭(场景编辑器里面的保存)…...

Hugo部署到Vercel踩大坑——全是XML文件?

问题描述 部署到Vercel全都是XML文件 Vercel是著名PAAS服务&#xff0c;相比于 Github Pages&#xff0c;其中国大陆可直接访问&#xff0c;因此尝试把Hugo站点发布到vercel中&#xff0c;部署后遇到问题&#xff0c;所有页面都为xml文件&#xff0c;如下所示&#xff1a; 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&#xff0c;然后用i平衡左两个区间,…...

Nginx系列-11 HTTP消息处理流程

背景 了解Nginx处理HTTP请求的11个阶段&#xff0c;有助于理解和配置nginx、自定义模块、基于lua模块自定义功能。按如下配置&#xff0c;执行"curl http://localhost:8001/query/test.html"&#xff0c;如果读者对结果不是很确定&#xff0c;建议阅读本文。 serve…...

前端知识--前端访问后端技术Ajax及框架Axios

一、异步数据请求技术----Ajax Ajax是前端访问后端的技术&#xff0c;为异步请求&#xff08;不刷新页面&#xff0c;请求数据&#xff0c;只更新局部数据&#xff09;。 例如&#xff1a;在京东网站中搜索电脑&#xff0c;就会出现一些联想搜索&#xff0c;但此时页面并没有…...

【前端/js】使用js读取本地文件(xml、二进制)内容

目录 说在前面FileReaderDOMParser文本文件二进制文件 说在前面 浏览器版本&#xff1a;Microsoft Edge 126.0.2 (正式版本) (64 位) FileReader MDNFileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件&#xff08;或原始数据缓冲区&#xff09;的内容&#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" <<…...

什么是技术作家风格指南?

技术写作风格指南旨在提供必要的格式风格&#xff0c;以帮助技术作家为读者创建引人入胜且一致的内容。然而&#xff0c;技术写作与普通的自由写作有很大不同。目的是将复杂的技术主题分解为易于理解的内容&#xff0c;以帮助读者了解如何使用产品或服务。 在本文中&#xff0…...

WebGIS学习——Cesium|Javascript

1.Cesium学习什么&#xff1a;Cesium实战项目说明-CSDN博客 2.Cesium绘制图形(箭头等):Cesium 态势标绘 _cesium态势标绘-CSDN博客 3.CesiumThree集成 4.Cesium深度图相关&#xff1a;Cesium离屏渲染深度图实验_cesium 离屏渲染-CSDN博客 5.洪涝&#xff1a;cesium淹没分析…...

Qt,获取其他.exe文件的标准输出流的信息(printf/print的输出信息)

比如&#xff0c;通过Python编写爬虫软件功能是运行程序获取豆瓣电影排行榜信息&#xff0c;并通过print打印出来。将其打包成.exe,通过Qt来调用&#xff0c;并获取到.exe程序运行的结果 简单示例代码&#xff1a; // 创建 QProcess 对象QProcess process;// 连接信号槽以获取…...

LeetCode 热题 HOT 100 (010/100)【宇宙最简单版】

【链表】No. 0206 反转链表 【简单】&#x1f449;力扣对应题目指路 希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&#xf…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...