search

ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

ProComponents 2.0: Design Token 前瞻 #5828

Closed chenshuai2144 closed 1 year ago

chenshuai2144 commented 1 year ago

ProComponents 2.0 是一个前瞻版本，为了减少大家升级到的 antd5.0 的阵痛感，除了 layout 带来了新的设计，其他组件没有带来新的特性。

ProComponents 2.0 是后续版本的基石，2.0 之后 ProComponents 将会抛弃 less 全部改为 css in js，整体设计系统也将全部使用 Design Token 进行重构。

渐进式升级

2.0 的主要目标是同时兼容 antd 4.0 和 antd 5.0，我们的目标是在 antd@4 的时候使用几乎不受影响，升级到 antd@5 是无需修改任何代码。升级 2.0 之后，那么你可以把升级 antd@5 这件事变成几个小的挫折，让过程顺滑很多。当然你也可以一起升级 antd 5 到 ProComponents 2.0 , 但是相信我这会非常痛苦。

如何安装

npm i @ant-design/pro-components --save

将 @ant-design/pro-xxx 全部修改为 @ant-design/pro-components

不兼容变更

在 1.0 时代，layout ，table 和 form 这三个组件是在不同的时期加入到 components 中的，他们之间并没有很好的做了很多 API 的抽象和 classname 的统一，借着 css in js 的东风，我将其整理了一番。所以也就造成了一些 不兼容的改动。

- li.ant-pro-menu-item
+ li.ant-pro-base-menu-submenu

- li.ant-pro-menu-submenu
+ li.ant-pro-base-menu-submenu

我们推荐在任何时候都不要依赖 classname 或者 dom 结构，以保证项目的健壮性。 2.0 中有多处的 className 进行了修改，如果更新后样式出现问题你可以检查一下，当然更推荐的是使用 token 的方式进行定制。

Design Token

Design Token 作为 antd@5 的主打能力，为我们的业务带来了更多的可能性。Token 是一种设计系统的基本元素，可以使用 Token 快速的修改组件库的基础样式。Layout 中可以通过 token 属性来配置样式

Layout 的 token

token 说明 默认值
bgLayout layout 的背景颜色 #f7f8fa
colorTextAppListIcon 跨站点应用的图标颜色 #666
colorTextAppListIconHover 跨站点应用的图标 hover 颜色 rgba(0, 0, 0, 0.65)
colorTextAppListIconHover 跨站点应用的图标 hover 背景颜色 rgba(0, 0, 0, 0.04)

Sider Token

Sider Token 是 侧边菜单的色值，与顶部菜单不同。

token 说明 默认值
colorMenuBackground menu 的背景颜色 transparent
colorTextMenuTitle sider 的标题字体颜色 colorTextHeading
colorMenuItemDivider menuItem 分割线的颜色 colorSplit
colorTextMenu menuItem 的字体颜色 colorText
colorTextMenuSecondary menu 的二级字体颜色，比如 footer 和 action 的 icon colorText
colorTextMenuSelected menuItem 的选中字体颜色 rgb(0,0,0)
colorBgMenuItemHover menuItem 的 hover 背景颜色 rgba(90, 75, 75, 0.03)
colorBgMenuItemSelected menuItem 的选中背景颜色 rgba(0, 0, 0, 0.04)
colorBgMenuItemCollapsedHover 收起 menuItem 的 hover 背景颜色 rgba(0, 145, 255, 0.1)
colorBgMenuItemCollapsedSelected 收起 menuItem 的选中背景颜色 rgba(0, 145, 255, 0.08)
colorBgCollapsedButton 展开收起按钮背景颜色 #fff
colorTextCollapsedButton 展开收起按钮 hover 字体颜色 colorTextMenuSecondary
colorTextCollapsedButtonHover 展开收起按钮 hover 时字体颜色 colorTextMenu

Header Token

token 说明 默认值
colorHeaderTitle sider 的标题字体颜色 colorTextHeading
colorTextMenu menuItem 的字体颜色 colorText
colorTextMenuSecondary menu 的二级字体颜色，比如 footer 和 action 的 icon colorText
colorTextMenuSelected menuItem 的选中字体颜色 rgb(0,0,0)
colorBgMenuItemHover menuItem 的 hover 背景颜色 rgba(90, 75, 75, 0.03)
colorBgMenuItemSelected menuItem 的选中背景颜色 rgba(0, 0, 0, 0.04)
colorBgMenuItemCollapsedHover 收起 menuItem 的 hover 背景颜色 rgba(0, 145, 255, 0.1)
colorBgMenuItemCollapsedSelected 收起 menuItem 的选中背景颜色 rgba(0, 145, 255, 0.08)
colorTextRightActionsItem 右上角字体颜色 colorTextSecondary
colorBgRightActionsItemHover 右上角选中的 hover 颜色 rgba(0, 0, 0, 0.03)

pageContainer Token

token 说明 默认值
marginBlockPageContainerContent pageContainer 自带的 margin block 24
marginInlinePageContainerContent pageContainer 自带的 margin inline 40
colorBgPageContainer pageContainer 的背景颜色 transparent
colorBgPageContainerFixed pageContainer 被固定时的背景颜色 #FFF

使用 Design Token

 <ProLayout
      token={{
        colorBgAppListIconHover: 'rgba(0,0,0,0.06)',
        colorTextAppListIconHover: 'rgba(255,255,255,0.95)',
        colorTextAppListIcon: 'rgba(255,255,255,0.85)',
        sider: {
          colorBgCollapsedButton: '#fff',
          colorTextCollapsedButtonHover: 'rgba(0,0,0,0.65)',
          colorTextCollapsedButton: 'rgba(0,0,0,0.45)',
          colorMenuBackground: '#004FD9',
          colorBgMenuItemCollapsedHover: 'rgba(0,0,0,0.06)',
          colorBgMenuItemCollapsedSelected: 'rgba(0,0,0,0.15)',
          colorMenuItemDivider: 'rgba(255,255,255,0.15)',
          colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
          colorBgMenuItemSelected: 'rgba(0,0,0,0.15)',
          colorTextMenuSelected: '#fff',
          colorTextMenu: 'rgba(255,255,255,0.75)',
          colorTextMenuSecondary: 'rgba(255,255,255,0.65)',
          colorTextMenuTitle: 'rgba(255,255,255,0.95)',
          colorTextMenuActive: 'rgba(255,255,255,0.95)',
          colorTextSubMenuSelected: '#fff',
        },
      }}
</ProLayout>

这样的配置之后你会得到一个新的 layout 设计。

image

Layout 新设计

新版本的 ProLayout 主要是样式上的升级， API 变化不是很大的。 ​

image.png

image.png

image.png

修改的 API 列表

参数 说明 类型 默认值
avatarProps layout 的头像设置，不同的 layout 放在不同的位置 [AvatarProps](https://ant.design/components/avatar-cn/) -
actionsRender 自定义操作列表 (layoutProps)=>ReactNode[] -
appList 跨站点导航列表 { icon, title, desc:, url }[] -
navTheme 移除使用token 代替 - -
headerTheme 移除使用token 代替 - -

另外此次的最大改变在于样式的重写，减少了 less 的导入，所以样式覆盖的功能需要重新设置。

品牌升级

为了保证大家使用 ProComponents 的负担，我们提供了 @ant-design/pro-components 一个包来管理依赖，同时我们的依赖也全部锁定, 这样可以减少依赖版本匹配导致的问题，在出现问题的时候也可以更简单的排查问题。

  "dependencies": {
    "@ant-design/pro-card": "1.20.21",
    "@ant-design/pro-descriptions": "1.12.5",
    "@ant-design/pro-field": "1.36.5",
    "@ant-design/pro-form": "1.74.5",
    "@ant-design/pro-layout": "6.38.22",
    "@ant-design/pro-list": "1.21.84",
    "@ant-design/pro-provider": "1.10.0",
    "@ant-design/pro-skeleton": "1.0.13",
    "@ant-design/pro-table": "2.80.5",
    "@ant-design/pro-utils": "1.45.3"
  },

ProComponents 是其他组件的组合，功能是相同的，同时提供了 version 变量，可以在控制台中输出

import { version } from "@ant-design/pro-components";

console.log(version);

{
  "@ant-design/pro-card": "2.0.0-experimental.25",
  "@ant-design/pro-components": "2.3.1",
  "@ant-design/pro-descriptions": "2.0.0-experimental.26",
  "@ant-design/pro-field": "2.0.0-experimental.24",
  "@ant-design/pro-form": "2.0.0-experimental.26",
  "@ant-design/pro-layout": "7.0.0-experimental.36",
  "@ant-design/pro-list": "2.0.0-experimental.27",
  "@ant-design/pro-provider": "2.0.0-experimental.14",
  "@ant-design/pro-skeleton": "2.0.0-experimental.9",
  "@ant-design/pro-table": "3.0.0-experimental.27",
  "@ant-design/pro-utils": "2.0.0-experimental.23",
};
export * from "@ant-design/pro-card";
export * from "@ant-design/pro-descriptions";
export * from "@ant-design/pro-field";
export * from "@ant-design/pro-form";
export * from "@ant-design/pro-layout";
export * from "@ant-design/pro-list";
export * from "@ant-design/pro-provider";
export * from "@ant-design/pro-skeleton";
export * from "@ant-design/pro-table";
export * from "@ant-design/pro-utils";
// @ts-ignore
export * from "./version";

无新特性的其他组件

​ Table，Form 等其余组件没有带来新特性，主要是兼容 antd@4 和 css in js 的改造，具体的细节可以看迁移的diff。

https://github.com/ant-design/pro-components/pull/5663

同时部分 dom 也发生了改变，还有一些样式优先级的问题，我不推荐你使用依赖 dom 和 className ，如果你使用了 :global 或者 ant-xxx 这种写法是相当危险的，升级完成之后需要好好检查一下。

维护计划

ProComponents 2.0 是一个兼容版本，我们会维护这个版本一段时间。同时在 antd@5 占有率达到一定程度时我们会发布 3.0 来去除读 antd@4 的兼容，这些工作会在未来的一年内完成，在做决定之时我们会在社区提前进行通知。

🙋‍ 反馈给我们

ProLayout 暂时还在测试模式，并且使用了 css in js 的技术，可能会有一些无法覆盖的角落，如果你在使用中碰到了问题，欢迎来给我们报告。 ​

你可以在钉钉群 和 github 中找到我们。 ​

​

drizzlesconsin commented 1 year ago

不懂就问, css in js 跟之前的 import styles from .less 绑定到className 有啥区别? 有什么好处啊, 你们说的token,我理解就是原子化css(tailwindcss), 基于属性的命名方式(张鑫旭), 这个跟css in js 没啥关系吧, 你在less文件也可以从oem 等风格切到基于属性命名啊

  1. 可以更好的实现动态主题(换肤)
  2. 不会再有烦人的全局样式(h1 ul li..)
codedart2018 commented 1 year ago

难道没有人觉得新版本的ui变丑了嘛！

WT-Road commented 1 year ago

有两个问题请教下: 1.目前项目中大量使用.ant-xxxx去覆盖默认的样式,来达到和UI效果一致,那我升级到2.0,我的改动大不大 2.pro-form和pro-table在之前是单独引用的,现在删除都改成pro-components吗

drizzlesconsin commented 1 year ago

单纯升级pro系列，不升级项目的 antd 到 v5，改动不算大。

aGVsZWk commented 1 year ago

哪个版本 react16.13 能用啊

ibytao commented 1 year ago

怎么不支持ssr

IamLBC commented 1 year ago

ProComponents ProLayout 老版本的文档在哪里看呀，这都没地方看了

lifegit commented 1 year ago

难道没有人觉得新版本的ui变丑了嘛！

我感觉和很多 vue 系列的UI越来越像了。

zhugexinxin commented 1 year ago

难道没有人觉得新版本的ui变丑了嘛！

我觉得好看了，哈哈

ksh033 commented 1 year ago

使用Token的方式更改样式有什么好处？

cc7gs commented 1 year ago

哪个版本 react16.13 能用啊

18了，不尽快解决版本问题吗

tuonioooo commented 1 year ago

@chenshuai2144 如何在老的项目中 不使用layout 新版本，而升级其他的ProComponents组件，官网还有以前老版本的文档么，我看了一下查阅不到了，因为2.0的组件升级版本 有点跨度大呀，还有一个问题是，能出一个 antd 、antd Pro、antd ProComponents 版本依赖对应关系表么？因为每次升级可能都是这种依赖关系导致的问题会很多，这样主要是避免更多的问题吧。

xXAvoraXx commented 1 year ago

Layout side menu cannot be closed while on mobile screen. Token not work on mobile screen

dzcpy commented 1 year ago

大概啥时候能用？

chenshuai2144 commented 1 year ago

已经可以用了，官网已经发布

WillCoco commented 1 year ago

目前pro-layout的theme只含token“colorPrimary”，有没有计划将其他的 token（antd V5 支持的 token）带到pro-layout中？

wanglihuaya commented 9 months ago

使用 Token 的方式更改样式有什么好处？

定制主题，之前没有这个功能

yiyi17 commented 9 months ago

钉钉二维码失效了，官方可以留下个钉钉号或者微信号

luna825 commented 4 months ago

3.0版本什么时候发布，有计划吗