优维低代码：Theme Mode 页面主题和模式

news2024/11/17 21:30:55

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

连载第三十一期

《高级指引：Theme & Mode 页面主题和模式》

▽

⊙ NOTE

Brick Next 从 2.7.1 开始支持页面主题和模式。

Brick Next 支持两种主题：light 和 dark（默认为 light），以及两种模式：default 和 dashboard（默认为 default）。

在 dark 深色主题下，页面框架及构件将以深色背景样式显示。而在 dashboard 大屏模式下，系统的页面顶栏及侧栏将消失，同时配合 basic-bricks.micro-view 开启 dashboardMode: true 可以实现大屏效果。

目前主要在“大屏”场景下使用，注意该场景需要同时启用深色主题和大屏模式。

# 微应用编排：切换主题和模式

例如在 Storyboard 编排中，希望某个按钮点击后切换到“深色+大屏”场景，可以如下配置：

brick: "your-button"
events:
  click:
    - action: "theme.setDarkTheme"
    - action: "mode.setDashboardMode"

每当页面初始进入、或发生跳转并重新渲染前，系统将自动切回浅色主题和默认模式，但系统开放了一个窗口期 onBeforePageLoad，以支持页面可以设置初始化为深色主题及大屏模式。

例如假设我们希望 URL 中携带参数 mode=dashboard 时自动使用深色主题和大屏模式，可以如下配置：

brick: "basic-bricks.micro-view"
lifeCycle:
  onBeforePageLoad:
    - if: "<% QUERY.mode === 'dashboard' %>"
      action: "theme.setDarkTheme"
    - if: "<% QUERY.mode === 'dashboard' %>"
      action: "mode.setDashboardMode"
properties:
  dashboardMode: "<% QUERY.mode === 'dashboard' %>"

注意 basic-bricks.micro-view 构件在大屏模式下会多一个退出按钮，点击后将发出 mode.dashboard.exit 事件，需要用户自行配置退出大屏需要执行的动作。例如通常应添加如下事件配置：

brick: "basic-bricks.micro-view"
events:
  mode.dashboard.exit:
    - target: "_self"
      properties:
        dashboardMode: false
    - action: "theme.setLightTheme"
    - action: "mode.setDefaultMode"

不内置退出动作的原因是，用户可以通过其他方式退出大屏，例如通过 history.pushQuery 跳转重置 mode=dashboard 参数来实现退出大屏模式：

brick: "basic-bricks.micro-view"
events:
  mode.dashboard.exit:
    - action: "history.pushQuery"
      args:
        - mode: null

⊙ IMPORTANT

不要在编排中为构件配置固定的颜色值，而应使用系统预定义的 CSS custom properties，具体可以参考本文下一节内容。

# 构件开发：适配深色主题和大屏模式

系统通过定义一系列 CSS custom properties（又称 CSS variables）来实现主题样式的实时无缝切换，无论在编排或构件开发时应首先尝试使用这些属性。具体属性列表可以参考这里的源码。

系统当前的主题和模式反馈在<html>元素的 data-theme 及 data-mode 属性上，因此仅使用 css 即可完成大部分深色主题和大屏模式的适配。例如：

.your-class {
  color: black;
}


html[data-theme="dark"] .your-class {
  color: white;
}

当使用系统预定义的 CSS custom properties 时，则无需额外配置 html[data-theme="dark"] 样式：

.your-class {
  color: var(--text-color-default);
}

有时候构件需要在 JavaScript 中判断当前主题或模式，例如图表类构件需要根据当前主题来生成不同的颜色列表，对此系统提供了 React Hooks useCurrentTheme 和 useCurrentMode 来获取当前的主题和模式，例如：

import { useCurrentTheme } from "@next-core/brick-kit";


function YourComponent() {
  const theme = useCurrentTheme();


  const colors = theme === "dark" ? ["red", "green"] : ["blue", "orange"];


  return <YourChart colors={colors} />;
}

# 适配公共 UI 规范样式

使用 Less

Brick Next 的 UI 底层基于 Ant Design，在适配我们自己的 UI 规范相关的样式时，应结合 Ant Design 的底层技术 Less 的能力，尽量通过使用或覆盖已有的 Less 预定义变量值来实现样式更新，而不是使用固定的颜色值。例如：

// ✅ Good:
// In `packages/custom-antd-styles/src/var.less`:
@link-hover-color: #0071eb;


// ❌ Bad:
// In `packages/custom-antd-styles/src/link.less`
a:hover {
  color: #0071eb;
}
// ✅ Good:
// In `bricks/your-brick/src/style.less`:
.your-class {
  color: @link-hover-color;
}


// ❌ Bad:
// In `bricks/your-brick/src/style.less`
.your-class {
  color: #0071eb;
}

Brick Next 的 Antd Less 变量统一管理在 next-core 仓库的
packages/custom-antd-styles/src/var.less 中。

# 使用 CSS Variables

由于 Less 的处理发生在编译阶段，无法在运行时提供切换变量的能力，因此为了实现运行时深色主题的自由切换，我们还需要结合使用 CSS custom properties（又称 CSS variables）。

对于色值一类的样式（例如 color: #fff）通常需要为默认主题和深色主题配置不同的色值，此时，我们可以将 Antd 中对应的 Less 变量设置为 CSS variables，并针对不同主题分别设置不同的色值。例如：

// In `packages/custom-antd-styles/src/var.less`:
@text-color: var(--antd-text-color);
/* In `packages/brick-container/src/styles/variables.css`: */
:root {
  --antd-text-color: rgba(0, 0, 0, 0.85);
}


html[data-theme="dark"] {
  --antd-text-color: #c6cfd9;
}

⊙ NOTE

注意我们统一使用 --antd- 作为前缀加上对应的 Antd Less 变量名作为 Antd 相关的 CSS variable name。

Brick Next 的 CSS variables 统一管理在 next-core 仓库的
packages/brick-container/src/styles/variables.css 中。

# 处理 Less 编译报错

由于 Antd 大量使用了色值计算（例如 darken(...) lighten(...) 等），这些计算无法兼容 CSS variable，因此有时当我们使用 CSS variable 作为 Less 的变量值时，构建 Less 可能会报错，对此的解决方案是使用我们自定义的 LessReplacer 插件，将这些报错的色值计算代码进行替换。

例如：

// In `packages/less-plugin-css-variables/src/LessReplacer.js`:
const rawStringMap = {
  "darken(@item-active-bg, 2%)": "var(--antd-item-active-bg-darken-2)",
};

以上配置将把 Antd Less 文件中所有的 darken(@item-active-bg, 2%) 替换为 var(
--antd-item-active-bg-darken-2)，注意变量命名方法为「--antd- 前缀 + Antd Less 变量名 + 方法名 + 参数值」。

又例如：

// In `packages/less-plugin-css-variables/src/LessReplacer.js`:
const variableMap = {
  "table-header-sort-active-bg": true,
};

以上配置将把 Antd Less 文件中所有的 @
table-header-sort-active-bg: **;（假设 ** 为包含色值计算等导致 Less 编译报错的代码）的定义替换为 @
table-header-sort-active-bg: var(--antd-table-header-sort-active-bg)。

注意这些新增的 --antd-* 需要在
packages/brick-container/src/styles/variables.css 中写好定义。

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

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

相关文章

React 18：state概念与使用、注意问题

React 18：state概念与使用、注意问题

一、概念与基本使用 props中的所有属性都是不可变的&#xff0c;这使得React组件不能随着props的改变而改变。但在实际的开发中&#xff0c;我们更希望的是数据发生变化时&#xff0c;页面也会随着数据一起变化。React为我们提供了state用来解决这个问题。 state和props类似&…
阅读更多...
类的赋值与浅拷贝

类的赋值与浅拷贝

类的浅拷贝与深拷贝 变量的赋值操作 只是形成两个变量&#xff0c;实际上还是指向同一个对象浅拷贝 Python拷贝一般都是浅拷贝&#xff0c;拷贝时&#xff0c;对象包含的子对象内容不拷贝因此&#xff0c;源对象与拷贝对象会引用同一个子对象深拷贝 使用copy模块的deepcopy函数…
阅读更多...
[附源码]JAVA毕业设计疫情防控期间网上教学管理（系统+LW）

[附源码]JAVA毕业设计疫情防控期间网上教学管理（系统+LW）

[附源码]JAVA毕业设计疫情防控期间网上教学管理&#xff08;系统LW&#xff09; 项目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 …
阅读更多...
window下生成SANs证书给ingress用

window下生成SANs证书给ingress用

1.安装openssl openssl下载地址&#xff1a;http://slproweb.com/products/Win32OpenSSL.html http://slproweb.com/products/Win32OpenSSL.html 下载指定版本exe安装。 2. 修改openssl配置 为了方便我们copy一份openssl.cfg&#xff0c;用来修改 C:\Users\vamcl\Deskto…
阅读更多...
做自媒体18个月,倒欠38万,一个自媒体创作者的自述

做自媒体18个月,倒欠38万,一个自媒体创作者的自述

做自媒体18个月,倒欠38万,一个自媒体创作者的自述 疫情开始后&#xff0c;长期居家&#xff0c;工作和生活都受到了明显影响&#xff0c;偶然在网上看到了自媒体这个行业&#xff0c;号称日入几千几万。 前前后后花非不少钱买设备、买课、买会员等等&#xff0c;花费近40w颗粒…
阅读更多...
Java网络编程，超详细

Java网络编程，超详细

计算机网络分为网络协议和网络体系结构 通过网络发送数据是一项复杂的操作&#xff0c;必须仔细地协调网络的物理特性以及所发送数据的逻辑特征。通过网络将数据从一台主机发送到另外的主机&#xff0c;这个过程是通过计算机网络通信来完成。 网络通信的不同方面被分解为多个…
阅读更多...
爆火的OpenAI及ChatGPT注册详细说明

爆火的OpenAI及ChatGPT注册详细说明

1 准备条件 ① 需要梯子 ② 准备一个能够接收openai的手机号&#xff0c;用于接收注册验证码 (如果没有也不要紧&#xff0c;下面会介绍通过第三方接码平台来注册) 2 注册手机号接收验证码 网址&#xff1a;https://sms-activate.org/cn/getNumber 2.1 点击右上角注册 这里…
阅读更多...
在word表格中一键生成序号，如何操作？

在word表格中一键生成序号，如何操作？

在word表格中一键生成序号&#xff0c;如何操作&#xff1f; 目录 在word表格中一键生成序号&#xff0c;如何操作&#xff1f; 1、首先选中需要填序号的这一列​ 2、在【开始】菜单中找到【多级列表】点击&#xff0c;再点击【定义新的多级列表】​ 3、点击【修改级别中的1…
阅读更多...
ELK企业级日志收集

ELK企业级日志收集

目录 一、ELK简介 二、ELK各组件介绍 ElasticSearch&#xff1a; Kibana&#xff1a; Logstash&#xff1a; 三、ELK可以添加的其他组件 Filebeat&#xff1a; 缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09;&#xff1a; Fluentd&#xff1a; 四、为…
阅读更多...
【C初阶】第五篇——数组

【C初阶】第五篇——数组

一维数组的创建和初始化 数组的创建 数组的初始化 一维数组的使用 一维数组在内存中的存储 二维数组的创建和初始化 二维数组的创建 二维数组的初始化 二维数组的使用 二维数组在内存中的存储 数组越界 数组作为函数参数 冒泡排序函数的错误设计 数组名是什么? …
阅读更多...
[附源码]Python计算机毕业设计SSM基于的汉服服装租赁系统（程序+LW)

[附源码]Python计算机毕业设计SSM基于的汉服服装租赁系统（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
[附源码]Python计算机毕业设计Django大学生志愿者服务管理系统

[附源码]Python计算机毕业设计Django大学生志愿者服务管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
配置vue3适用的vue-devtools

配置vue3适用的vue-devtools

1、下载最新的vue/devtools的github项目库 项目库地址为 &#xff1a;GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 2、安装yarn vue/devtools的项目库&#xff0c;必须使用yarn来编译&#xff0c;npm会报错。 npm i 会报…
阅读更多...
SQLyog Ultimate最流行的数据库管理工具之一

SQLyog Ultimate最流行的数据库管理工具之一

SQLyog Ultimate最流行的数据库管理工具之一 SQLyog是为Windows提供的最流行的SQL数据库管理工具之一。该软件是世界上任何地方的数据库管理工具&#xff0c;非常快速&#xff0c;易于使用和维护图形环境。使用此程序&#xff0c;您可以构建漂亮的数据&#xff0c;并在可视摄像…
阅读更多...
Java教程-特性/语法/对象和类/基本数据类型/变量修饰符运算符/循环结构和条件语句/数组/正则/文件IO/异常处理详细总结

Java教程-特性/语法/对象和类/基本数据类型/变量修饰符运算符/循环结构和条件语句/数组/正则/文件IO/异常处理详细总结

文章目录教程简介主要特性Java 语言是简单的&#xff1a;Java 语言是面向对象的&#xff1a;Java语言是分布式的&#xff1a;Java 语言是健壮的&#xff1a;Java语言是安全的&#xff1a;Java 语言是体系结构中立的&#xff1a;Java 语言是可移植的&#xff1a;Java 语言是解释…
阅读更多...
stm32 如何查看系统各个时钟

stm32 如何查看系统各个时钟

在主函数main中会通过定义SystemInit()函数中设置的系统时钟大小&#xff1a; SYSCLK&#xff08;系统时钟&#xff09; 72MHz AHB 总线时钟(使用 SYSCLK) 72MHz APB1 总线时钟(PCLK1) 36MHz APB2 总线时钟(PCLK2) 72MH…
阅读更多...
消息队列---MQ介绍

消息队列---MQ介绍

文章目录前言一、MQ是什么&#xff1f;1.1基本概念1.2MQ的优势和劣势优势应用解耦异步提速削峰填谷劣势二、常见的MQ产品总结前言 实习之MQ学习历程 一、MQ是什么&#xff1f; 1.1基本概念 MQ全称Message Queue(消息队列),是在消息的传输过程中保存消息的容器。多用于分布式系…
阅读更多...
【数据结构】堆排序 (超详细)

【数据结构】堆排序 (超详细)

前言:      前几次讲了如何构建一个堆以及TopK算法&#xff0c;那么这次给大家分享一下堆排序的两种方法。 方法一 直接暴力解决&#xff0c;建一个小堆&#xff0c;把数组的数据依次push&#xff0c;随后每次Pop堆顶&#xff0c;放进数组里。不过该方法因为建堆有消耗&…
阅读更多...
字体图标、平面转换、渐变

字体图标、平面转换、渐变

1、字体图标 字体图标 字体图标展示的是图标&#xff0c;本质是字体。处理简单的、颜色单一的图片 1.1、字体图标的优点&#xff1a; 灵活性&#xff1a;灵活地修改样式&#xff0c;例如&#xff1a;尺寸、颜色等轻量级&#xff1a;体积小、渲染快、降低服务器请求次数兼容性…
阅读更多...
SQL ALTER TABLE 语句

SQL ALTER TABLE 语句

&#x1f4d2;博客主页&#xff1a; ​​开心档博客主页​​ &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐留言&#x1f4dd; &#x1f4cc;本文由开心档原创&#xff01; &#x1f4c6;51CTO首发时间&#xff1a;&#x1f334;2022年12月12日&#x1f334; ✉…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023