MediaHub中的卡片实现进展汇报

news2024/9/20 9:04:04

今天刚从家赶到北京,北京和内蒙的温度差别真的太大了。给大家简单汇报一下目前MediaHub的进展:

上节卡片需求我们分析了gamma中卡片的设计,经过几天的开发以及前期的积累,开发进度超预期,功能基本上已经开发完成,还剩2个功能需要开发,整体效果如下:

在开发过程中核心技术点总结一下:

1.卡片布局实现

MediaHub 采用 chakra-ui 作为 UI 组件库,不得不说这个组件库是我用过最好用的,整个项目中基本不用单独写css,与 tiptap的react组件融合起来,可以非常方便实现各种效果。

2.color组件

设置卡片颜色的时候,选择颜色使用的@uiw/react-color-sketch 这个库,效果非常棒:

67cc632122c02179c748e2c15a48e002.png

3.react方面

这个项目是我第一次使用 React,有一些知识还在摸索中,比如到底该不该用 redux 来管理状态,还是直接使用 context,要不要使用 nextjs,我现在的想法是能不用就不用,当面对比较棘手的问题不得不用的时候,再考虑使用这些库。

4. react-icons

网站所有的图标使用的是 react-icons,这让我省了很多查找图标的时间,不过UI整体效果最后再美化一下。等到做主题的时候把这块一起重新设计一下,有了主题,文档就如同有了"衣裳"。

下一步重点实现:

①资源素材,考虑盘点一些可商用的免费资源,或者结合AI能力来生成一些图片素材。也会考虑使用一些SVG图标、表情等,写文档时大概率会用到。

②卡片合并,能够把多个卡片合并到一起。

③部署,现在整个效果只能在我电脑查看,希望能够部署到外网中,这样大家都能看到整体效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1983899.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

认识Mybatis和搭建Mybatis初始环境(Java)

首先我们需要知道在Java中连接数据库的底层就是JDBC,但是JDBC存在诸多弊端,如硬编码,代码重复度高,SQL参数固定,属于底层技术,结果集映射麻烦等。为了解决这些弊端,官方为我们提供了一些ORM模型…

基于大数据的混合音乐推荐系统的设计与设计(论文+源码)_kaic

摘 要 随着数据的不断增长和用户对随听随播的收听方式的习惯,开发一款音乐推荐系统变得越来越必要。为了满足这一需求,本论文采用Java语言、Vue以及数据库MySQL进行开发。系统的主要功能包括登录注册、音乐分类管理、音乐推荐管理、音乐资讯管理、音乐库…

Nacos-2.4.0最新版本,postgresql插件适配器修改分享

1. 背景 自前段时间,发表的一篇博文“Nacos-2.4.0最新版本docker镜像,兼容postgresql最新版本17和16” 有网友在评论区叫我出个修改源码的过程,今天就给大家简单分享一下关于“Nacos最新版(2.4.0)的postgresql插件适…

一些主流在线测长仪品牌!几毫米到几十米均可检测!

在线测长仪应用于生产线中长度尺寸检测,在各种产品中,总有形形色色的产品需要对长度进行检测,本文介绍3个测长仪品牌。 深圳市中图仪器股份有限公司 中图 SJ5100系列测长仪采用超高精度全自动光栅测长机,在 SJ5100光栅测长机的基础…

web通用漏洞

web通用漏洞 文章目录 web通用漏洞1. SSRF1. gopher伪协议2. 常见绕过1. ip地址绕过2. DNS重绑定攻击 3. mysql未授权4. tomcat漏洞5. redis未授权写webshell6. redis 未授权写入ssh公钥7. redis 未授权计划任务shell反弹 2. XXE测试 3. XSS4. CSRF关于vmware的网络参考 1. SSR…

【工具】图片背景移除界面 UI 源码

移除图片背景的UI 照片背景移除和填充颜色的用户界面 仓库地址:https://github.com/MengWoods/remove-background-ui/tree/main 介绍 该项目提供了一个基于 removebg 库的用户界面,用于从输入的照片中移除背景,并用不同的颜色填充背景。 …

设计模式18-中介者模式

设计模式18-中介者模式(Mediator) 动机定义结构类图解释:交互方式:左边流程图右边流程图联系中介者模式 C代码推导优缺点应用总结 动机 在软件构建过程中,经常会出现多个对象互相关联交互的情况。他们之间常常会维持一…

认真学习JVM几种类加载器

【1】类加载器的分类 JVM支持两种类型的类加载器 。分别为引导类加载器(Bootstrap ClassLoader)和自定义类加载器(User-Defined ClassLoader)(JVM规范这样定义的)。 从概念上来讲,自定义类加载…

轻闪PDF v2.14.9 解锁版下载及安装教程 (一款全能PDF转换器,支持自动补全标签)

前言 轻闪PDF(原傲软PDF编辑软件)是一款操作简单的全能PDF转换器,轻松实现PDF转换为Word,Excel或其他格式,以及PDF压缩,合并和图片文字识别OCR等功能.这款pdf编辑转换软件几乎支持所有常见文档格式,一键完成PDF与其他文档互相转换,并含有PDF合并,压缩,图片文字识别OCR等增值功…

[qt] 多线程应用01

源码: 点击此处 一 多线程应用 实现一个多线程的网络时间服务器,利用多线程功能的技术,为每个客户端返回当前的时间,并且在返回后自动退出。同时,服务器也会记录当前受到的请求次数。其实这相当于一个ntp时间服务器 二 服务器实…

C语言 | Leetcode C语言题解之第326题3的幂

题目: 题解: bool isPowerOfThree(int n){int count0;while(n){countn%3;n/3;}return count1?true:false;}

个人对TCP流量控制与拥塞控制的理解

TCP 协议和 UDP 协议 TCP 作为最常用的两大传输层协议之一,无疑是久经生产环境检验的。传输层有两个我们广泛使用的协议:UDP 协议、TCP 协议,我们一般会说前者是面向无连接的,后者是面向连接的。 这里的 “连接” 具体是什么意思…

Prometheus-v2.45.0 + 钉钉告警

目录 1. 创建一个钉钉内部群 2. 添加自定义机器人 3. 配置钉钉发送告警服务 4. 配置alertmanager,接入dingding 5. 配置告警消息发送模板 6. 修改配置规则文件 续接上篇:https://blog.csdn.net/Lzcsfg/article/details/140851688 相关软件包链接…

sqli-labs环境搭建以及部分sql注入

sqli-labs靶场搭建: 安装phpstudy并创建网页 初始化靶场 实现sql注入: less-1(根据数据库的命令在超链接后输入?id1) less-2(如法炮制?id2) less-3(闭合单引号和括号) less-9&am…

新增AI Copilot,DataEase开源数据可视化分析工具v2.9.0发布

2024年8月5日,人人可用的开源数据可视化分析工具DataEase正式发布v2.9.0版本。 这一版本的功能变动包括:导航栏新增Copilot入口,借助AI技术,通过自然语言交互实现即问即答,让数据分析更加直观和便捷;图表方…

vxe-pulldown下拉容器的使用,覆盖样式z-index来解决在Modal中初次显示在Modal的下层的问题。

1、官网的例子&#xff1a; 可以说这个vxe-pulldown用起来还是挺方便的。 2、代码&#xff1a; <template><div><vxe-pulldown ref"pulldownRef" popup-class-name"my-dropdown4" transfer><template #header><div class&quo…

FFMPEG 序列帧图片合成视频

需求&#xff1a; 将多张.png图片合成为视频 注意: 1需要Windows电脑 2将图片重命名 下载EXE 官网 https://ffmpeg.org/download.html#build-windows 解压后长这样 将图片和exe放在同一目录下 文件中找个空白地&#xff0c;Shift右键 进入PowerShell 输入命令: ./ffm…

Chapter 27 封装

欢迎大家订阅【Python从入门到精通】专栏&#xff0c;一起探索Python的无限可能&#xff01; 文章目录 前言一、基本概念二、私有成员 前言 在面向对象编程&#xff08;OOP&#xff09;中&#xff0c;封装是一个重要的概念&#xff0c;旨在保护数据并限制对对象内部状态的直接…

48天笔试训练错题——day41

目录 选择题 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 编程题 1. 五子棋 2. Emacs计算器 选择题 1. 当发生拥塞时&#xff0c;TCP 有个机制&#xff0c;会从慢开始进行发送。 1. 把慢开始的门限值设为当前窗口的一半&#xff0c;即 ssthresh 1/2 * 8 4 KB 2. 把拥塞窗…

【TS】declare 全局声明方式

declare关键字 declare是描述TS文件之外信息的一种机制&#xff0c;它的作用是告诉TS某个类型或变量已经存在&#xff0c;我们可以使用它声明全局变量、函数、类、接口、类型别名、类的属性或方法以及后面会介绍的模块与命名空间。 declare关键字用来告诉编译器&#xff0c;某…