js实现瀑布流布局

前言 我的导航站点项目需要将每一个二级分类分成一块一块的布局,如下图所示 不同的瀑布流布局实现方案 参考 https://jueji


利用IntersectionObserver API实现图片懒加载

前言 在我的导航站点项目编写过程中,不同一级分类可以切换显示隐藏,每一个一级分类下都有很多导航地址(图标+名称)效果如下 考虑到性能问题,可以先通过调用api查询基础的导航站点信息渲染展示,然后通过IntersectionObserver API实现图标的懒加载 多种懒加载方法 参考


vue声明式弹窗

背景 在公司低代码大屏开发过程中,有一个需求是在一个大屏中可以点按钮打开另一个嵌入的大屏,一开始的效果是页面加载后两个大屏的资源同时加载,会因为资源加载多和慢导致页面渲染也会有些慢,所以这里使用了声明式弹窗组件封装了大屏壳子,使得每一个大屏都可以通过函数创建和销毁。 思路 首先我们需要一个通用的方法


iframe嵌入jupyterlab

前言 公司的AI Pass平台能够在前端页面通过选择不同的配置和镜像,去启动不同的服务,jupyter也是这些服务之一,以供算法团队在线开发训练。 思路 用户选择完相应配置并点击启动服务后,在前端页面异步等待jupyterlab服务启动完可以新打开一个浏览器窗口,通过iframe嵌入的方式去操作ju


web终端笔记

前言 公司的AI Pass平台需要能在网页上查看一些跑在k8s容器中的服务相关的信息或进行一些操作。 思路 在前端页面上打开一个终端,前后端建立websocket通信,前端每输入一个字符,后端都与k8s进行交互然后把返回信息封装了发送到前端并展示在页面终端上。 实现代码 <script setup


前端文件预览组件的封装

前言 公司的AI Pass平台需要能够预览数据集文件,然而数据集文件类型很多很杂,这就需要封装一个稍微通用的预览组件(vue实现),使得大部分常用的数据集文件都支持预览。 思路 考虑到每种类型的文件或许需要不同的代码实现,所以这边通过写一个类型组件映射配置,通过主入口的<component>标签传入


前端系统的使用pinia封装授权逻辑

环境 前端框架:fantastic-admin框架 前言 前端项目现在是多入口的,分为portal和console两个入口,当前的需求是portal进去登录如果无授权的话直接退出登录,console入口进去无授权的话页面跳转到授权管理页面,且其他菜单全部隐藏掉。 实现思路 1.首先我们需要封装一个公