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

UI库架构设计

UI库架构设计

  • 分层
    • rc-xxx,提供基础组件,unstyled component (headless) ,只具备功能交互,不具备UI表现
    • 样式体系
    • 基础组件
    • 复合组件,Search:Input + Select ,IconButton:Icon + Button
    • 业务组件
  • 解耦
    • 对于每个组件都需要定义样式、ts、类型、基础操作、工具方法
  • 响应式设计
    • 媒体查询 media query、ResizeObserver、grid布局

全局状态

  • 全局状态,基础配置、国际化配置、主题配置,react >> Context 、useSyncExternalStore,vue >> vue-demi
  • 局部状态,表单场景,受控和非受控(状态是否跟表单值双向绑定)
    • 受控:<input value={v} onChange={(v)=>setV(v)}
    • 非受控 defaultValue + ref

样式体系与主题设计

  • Color Tokens:颜色色值系统,(antdDesign、arcoDesign (css in js方案)| mantineUI | mui |shadcn/ui)
  • 样式模块化方案:
    • css-in-js(弊端:运行时(运行时的内存损耗)、srr支持不好):emotion、styled-component
    • module css
  • 样式优先级与覆盖:控制样式优先级

模块化

  • 可复用性
  • 公共方法:颜色计算函数,格式化处理,本地化,工具函数

组件开发流程

  • 工程架构:monorepo,core + components + hooks +utils …

  • TypeScript

  • 流程化、规范化、自动化,

    • script如何定义(CI/CD 源头)
    • 规范化(eslint、stylelint、commitlint)
    • 颜色值生成,自动构建,增量构建,构建缓存
  • 构建打包:rollup、esbuild、swc

  • 测试,单元测试,vitest,jest+react-testing-library

相关文章:

UI库架构设计

UI库架构设计 分层 rc-xxx&#xff0c;提供基础组件&#xff0c;unstyled component (headless) &#xff0c;只具备功能交互&#xff0c;不具备UI表现样式体系基础组件复合组件&#xff0c;Search&#xff1a;Input Select &#xff0c;IconButton&#xff1a;Icon Button业…...

电子应用产品设计方案-9:全自动智能马桶系统设计方案

一、系统概述 本全自动智能马桶系统旨在提供舒适、卫生、便捷和智能化的如厕体验。通过融合多种传感器技术、电子控制单元和机械执行机构&#xff0c;实现马桶的自动冲洗、座圈加热、臀部清洗、烘干等功能&#xff0c;并具备智能感应、用户个性化设置和健康监测等特色功能。 二…...

My_SQL day3

知识点&#xff1a;约束 1.dafault 默认约束 2.not null 非空约束 3.unique key 唯一约束 4.primary key 主键约束 5.anto_increment 自增长约束 6.foreign key 外键约束 知识点&#xff1a;表关系 1.一对一 2.一对多 3.多对多 知识点&#xff1a;约束 1.default 默认约束 …...

【代码随想录day31】【C++复健】56. 合并区间;738.单调递增的数字

56. 合并区间 遇到了三个问题&#xff0c;一一说来&#xff1a; 1 比较应该按左区间排序&#xff0c;我却写了右区间。由于本题是合并区间&#xff0c;判断是否连续显然是用下一个的左区间与前一个的右区间比较&#xff0c;属于没想清楚了。 2 在写for循环时写成了如下的代码…...

jmeter常用配置元件介绍总结之逻辑控制器

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之逻辑控制器 逻辑控制器1.IF控制器2.事务控制器3.循环控制器4.While控制器5.ForEach控制器6.Include控制器7.Runtime控制器8.临界部分控制器9.交替控制器10.仅一次控制器11.简单控制器12.随机控制器13.随机顺序控制器14.吞…...

解决Windows远程桌面 “为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多。请稍后片刻再重试,或与系统管理员或技术支持联系“问题

当我们远程连接服务器连接不上并提示“为安全考虑&#xff0c;已锁定该用户账户&#xff0c;原因是登录尝试或密码更改尝试过多。请稍候片刻再重试&#xff0c;或与系统管理员或技术支持联系”时&#xff0c;根本原因是当前计算机远程连接时输入了过多的错误密码&#xff0c;触…...

中文书籍对《人月神话》的引用(161-210本):微软的秘密

中文书籍对《人月神话》的引用&#xff08;第001到160本&#xff09;>> 《人月神话》于1975年出版&#xff0c;1995年出二十周年版。自出版以来&#xff0c;该书被大量的书籍和文章引用&#xff0c;直到现在热潮不退。 2023年&#xff0c;清华大学出版社推出《人月神话》…...

关于写React的一些反思和总结

这两个星期我都一直在写IT资产管理这个模块。关于这个模块&#xff0c;前端和后端都是我来处理&#xff0c;对于后端&#xff0c;我碰到了很多问题&#xff0c;但是很多问题都可以在比较短的时间内解决&#xff0c;而且不会说完全没有头绪的那种&#xff0c;这一方面源于我本身…...

Qt 每日面试题 -10

91、Qt设计界面有哪些方式? 手工编写创建界面的代码︰此方法比较复杂&#xff0c;不够直观;使用Qt Designer界面编辑器设计︰可直接拖放控件、设置控件的属性&#xff0c;简单、直观、易于操作;动态加载Ul文件并生成界面︰(QUiLoader类加载xx.ui)此方法很灵活&#xff0c;当需…...

三正科技笔试题

&#xff08;15题&#xff0c;45分钟&#xff0c;闭卷&#xff09; 一、( 8 分 &#xff09;请问以下程序输出什么结果&#xff1f; char *getStr(void) 。 &#xff5b; char p[] "hellow world"; return p; &#xff5d; void test(void) &#xff5b; ch…...

Selective attention improves transformer详细解读

Selective attention improves transformer Google 2024.10.3 一句话&#xff1a;简单且无需额外参数的选择性注意力机制&#xff0c;通过选择性忽略不相关信息并进行上下文剪枝&#xff0c;在不增加计算复杂度的情况下显著提升了Transformer模型的语言建模性能和推理效率。 论…...

git配置用户信息

在 Git 中配置用户信息&#xff0c;主要是设置你的用户名和电子邮件地址&#xff0c;这些信息会被 Git 用来记录提交的作者信息。以下是配置用户信息的步骤&#xff1a; 打开命令行工具。 设置你的用户名&#xff1a; git config --global user.name "你的名字"例如…...

【eNSP】路由基础与路由来源——静态路由实验

路由是数据包从源地址到目的地址的传输路径&#xff0c;静态路由是指网络管理员手动配置的路由条目&#xff0c;用于指定数据包从源地址到目的地址的固定路径。以下是关于静态路由的详细介绍。 一、路由的基础知识点 路由的定义&#xff1a; 路由是指在计算机网络中&#xff…...

Python Web 应用开发基础知识

Python Web 应用开发基础知识 引言 随着互联网的快速发展&#xff0c;Web 应用程序的需求日益增加。Python 作为一种简单易学且功能强大的编程语言&#xff0c;已经成为 Web 开发中广受欢迎的选择之一。本文将深入探讨 Python Web 开发的基础知识&#xff0c;包括常用框架、基…...

STM32 标准库函数 GPIO_SetBits、GPIO_ResetBits、GPIO_WriteBit、GPIO_Write 区别

GPIO_SetBits&#xff1a; 使用例&#xff1a; GPIO_SetBits(GPIOA, GPIO_Pin_1 | GPIO_Pin_2);意思是将GPIOA1和GPIOA2设为高电平 GPIO_SetBits(GPIOA, 0x0003);意思也是将GPIOA1和GPIOA2设为高电平 实际上当选中GPIOA时&#xff0c;它会按位遍历&#xff0c;在哪一位有1说…...

【Redis_Day4】内部编码和单线程模型

【Redis_Day4】内部编码和单线程模型 五大数据类型内部编码object encoding key1&#xff1a;查询key1对应值的内部编码 redis中的单线程模型 redis中的数据都是以键值对的方式存的&#xff0c;redis内部用哈希表组织这些键值对。 五大数据类型 站在用户角度&#xff0c; 在一…...

Vue模块化开发的理解

Vue模块化是指在Vue.js开发中&#xff0c;将代码按功能拆分成多个独立的模块&#xff0c;以提高代码的可维护性、可读性和复用性。以下是对Vue模块化的详细理解&#xff1a; 一、Vue模块化的实现方式 组件化开发&#xff1a; Vue组件是模块化的基本单元&#xff0c;每个组件封…...

在Ubuntu22.04上源码构建ROS noetic环境

Ubuntu22.04上源码构建ROS noetic 起因准备环境创建工作目录并下载源码安装编译依赖包安装ros_comm和rosconsole包的两个补丁并修改pluginlib包的CMakeLists的编译器版本编译安装ROS noetic和ros_test验证 起因 最近在研究VINS-Mono从ROS移植到ROS2&#xff0c;发现在编写feat…...

算法--解决二叉树遍历问题

第一 实现树的结构 class Node(): # 构造函数&#xff0c;初始化节点对象&#xff0c;包含数据和左右子节点 def __init__(self, dataNone): self.data data # 节点存储的数据 self.left None # 左子节点&#xff0c;默认为None self.rig…...

[刷题]入门1.矩阵转置

博客主页&#xff1a;算法歌者本篇专栏&#xff1a;[刷题]您的支持&#xff0c;是我的创作动力。 文章目录 1、题目2、基础3、思路4、结果 1、题目 链接&#xff1a;洛谷-B2106-矩阵转置 2、基础 此题目主要考察二维数组的掌控能力。 3、思路 观察&#xff0c;可知&#…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

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

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

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...

智能体革命:企业如何构建自主决策的AI代理?

OpenAI智能代理构建实用指南详解 随着大型语言模型&#xff08;LLM&#xff09;在推理、多模态理解和工具调用能力上的进步&#xff0c;智能代理&#xff08;Agents&#xff09;成为自动化领域的新突破。与传统软件仅帮助用户自动化流程不同&#xff0c;智能代理能够自主执行工…...

无头浏览器技术:Python爬虫如何精准模拟搜索点击

1. 无头浏览器技术概述 1.1 什么是无头浏览器&#xff1f; 无头浏览器是一种没有图形用户界面&#xff08;GUI&#xff09;的浏览器&#xff0c;它通过程序控制浏览器内核&#xff08;如Chromium、Firefox&#xff09;执行页面加载、JavaScript渲染、表单提交等操作。由于不渲…...

GitHub 常见高频问题与解决方案(实用手册)

1.Push 提示权限错误&#xff08;Permission denied&#xff09; 问题&#xff1a; Bash Permission denied (publickey) fatal: Could not read from remote repository. 原因&#xff1a; 没有配置 SSH key 或使用了 HTTPS 而没有权限…...