ProLayout -“商业品质，包容，生长”

Open chenshuai2144 opened this issue 2 years ago • 56 comments

基于 css in js 的方案让我们可以动态的设置布局的主题，以下是支持自定的token 列表。

Token

Token 是一种设计系统的基本元素，可以使用 Token 快速的修改组件库的基础样式。Layout 中可以通过 token 属性来配置这些颜色。

默认的 token

默认的 token 部分来自于 antd，可能会有一些改动，以下是 layout 依赖的部分。

token	说明	默认值
primaryColor	主色	`#1677FF`
errorColor	错误色	`#ff4d4f`
successColor	成功色	`#52c41a`
infoColor	通知色	`#1677FF`
warningColor	警告色	`#faad14`
headingColor	标题色	`rgba(0, 0, 0, 0.85)`
textColor	正文色	`rgba(0, 0, 0, 0.65)`
textColorSecondary	次级色	`rgba(0, 0, 0, 0.45)`
borderColorBase	边框基本色	`#d9d9d9`
borderColorSplit	分隔边框的颜色	`rgba(0, 0, 0, 0.06)`
borderRadiusBase	默认圆角	`4px`

Layout 的 token

token	说明	默认值
layoutBgColor	layout 的背景颜色	`#f0f2f5`
appListIconTextColor	跨站点应用的图标颜色	`#666`
appListIconHoverTextColor	跨站点应用的图标 hover 颜色	`rgba(0, 0, 0, 0.65)`
appListIconHoverTextColor	跨站点应用的图标 hover 背景颜色	`rgba(0, 0, 0, 0.04)`

Sider Token

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

token	说明	默认值
menuBackgroundColor	menu 的背景颜色	`transparent`
menuTitleTextColor	sider 的标题字体颜色	`headingColor`
menuItemDividerColor	menuItem 分割线的颜色	`borderColorSplit`
menuSubArrowColor	menuItem 的箭头颜色	`rgba(0, 0, 0, 0.25)`
menuTextColor	menuItem 的字体颜色	`textColor`
menuTextColorSecondary	menu 的二级字体颜色，比如 footer 和 action 的 icon	`textColor`
menuSelectedTextColor	menuItem 的选中字体颜色	`rgb(0,0,0)`
menuItemHoverBgColor	menuItem 的 hover 背景颜色	`rgba(90, 75, 75, 0.03)`
menuItemSelectedBgColor	menuItem 的选中背景颜色	`rgba(0, 0, 0, 0.04)`
menuItemCollapsedHoverBgColor	收起 menuItem 的 hover 背景颜色	`rgba(0, 145, 255, 0.1)`
menuItemCollapsedSelectedBgColor	收起 menuItem 的选中背景颜色	`rgba(0, 145, 255, 0.08)`
collapsedButtonBgColor	展开收起按钮背景颜色	`#fff`
collapsedButtonTextColor	展开收起按钮 hover 字体颜色	`menuTextColorSecondary`
collapsedButtonHoverTextColor	展开收起按钮 hover 时字体颜色	`menuTextColor`

Header Token

token	说明	默认值
headerTitleColor	sider 的标题字体颜色	`headingColor`
menuTextColor	menuItem 的字体颜色	`textColor`
menuTextColorSecondary	menu 的二级字体颜色，比如 footer 和 action 的 icon	`textColor`
menuSelectedTextColor	menuItem 的选中字体颜色	`rgb(0,0,0)`
menuItemHoverBgColor	menuItem 的 hover 背景颜色	`rgba(90, 75, 75, 0.03)`
menuItemSelectedBgColor	menuItem 的选中背景颜色	`rgba(0, 0, 0, 0.04)`
menuItemCollapsedHoverBgColor	收起 menuItem 的 hover 背景颜色	`rgba(0, 145, 255, 0.1)`
menuItemCollapsedSelectedBgColor	收起 menuItem 的选中背景颜色	`rgba(0, 145, 255, 0.08)`
rightActionsItemTextColor	右上角字体颜色	`textColorSecondary`
rightActionsItemHoverBgColor	右上角选中的 hover 颜色	`rgba(0, 0, 0, 0.03)`

pageContainer Token

token	说明	默认值
pageContainerContentMargin	pageContainer 自带的 margin	`#fff`
pageContainerBgColor	pageContainer 的背景颜色	`transparent`
pageContainerFixedBgColor	pageContainer 被固定时的背景颜色	`#FFF`

测试版本暂时包含这部分内容，未来还会增加。

🎏 如何升级到最新版本？

我们可以使用 next 标签来安装最新版本的 ProLayout。

yarn add @ant-design/pro-layout@next
npm i @ant-design/pro-layout@next --save

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

rightContentRender修改为 avatarProps 和 actionsRender, 对头像模式做了默认抽象。
layout=sider 模式下，header 消失，只保留了侧边栏，增大可视面积。
layout=sider 模式下，header 消失后，右侧操作区域修改为左下角。
增加了 appList，用于进行多站点之前的导航。

修改的 API 列表

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

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

🙋‍ 反馈给我们

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

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

Feb 27 '22 16:02 chenshuai2144

⚡️ Deploying PR Preview...

Feb 27 '22 16:02 github-actions[bot]

size-limit report 📦

Path	Size
packages/card/dist/card.js	22.28 KB (0%)
packages/descriptions/dist/descriptions.js	28.24 KB (0%)
packages/field/dist/field.js	102.99 KB (0%)
packages/form/dist/form.js	207.21 KB (0%)
packages/layout/dist/layout.js	164.53 KB (+16.97% 🔺)
packages/list/dist/list.js	165.54 KB (+0.54% 🔺)
packages/provider/dist/provider.js	25.67 KB (0%)
packages/skeleton/dist/skeleton.js	5.31 KB (0%)
packages/table/dist/table.js	104.75 KB (0%)

Feb 27 '22 16:02 github-actions[bot]

This pull request introduces 3 alerts when merging 19c9730a8a0c030b0c3c0a128913eccab34a0871 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 27 '22 16:02 lgtm-com[bot]

Codecov Report

Merging #4734 (4bb3e3f) into master (4bb3e3f) will not change coverage. The diff coverage is n/a.

:exclamation: Current head 4bb3e3f differs from pull request most recent head c9cec43. Consider uploading reports for the commit c9cec43 to get more accurate results

@@           Coverage Diff           @@
##           master    #4734   +/-   ##
=======================================
  Coverage   99.52%   99.52%           
=======================================
  Files         208      208           
  Lines        6927     6927           
  Branches     2467     2467           
=======================================
  Hits         6894     6894           
  Misses         33       33

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

Feb 27 '22 16:02 codecov[bot]

This pull request introduces 3 alerts when merging fc6be746c45c439f979f673f4407e0aaba34bbb2 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 02:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 395ec023f730cbb5f56cdf2283cd9d6ba62d86ea into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 04:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging e7ba49c90f87fe9bf034d1ba2b205333c1a0fdff into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 05:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging d0f29f85303717164597ec5a9369b9cb1c034caa into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 05:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 911fede5443473b11b9f1ed9828d8c1fc037bb3a into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 05:02 lgtm-com[bot]

设计思路和设计稿有没？

Feb 28 '22 07:02 leshalv

This pull request introduces 3 alerts when merging 0c9224f1301fe846fb2ddb03f07392388f9b216f into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 07:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 927f306b12a4575107bee71df91778d179ee6cb6 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 07:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging df01165f1db28d0d0e8566fb3a20c80abcee5937 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 08:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 9d35894f16380d8b7a21ff89aa79cf29a25318a5 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 09:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging e9cb0d2fd8bfeec7266eb07fdb6aacefb78cda3b into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 09:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 463d78ad12440c49e861b8642f3ef92a7bd4088e into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 09:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 3500237a401fc2b85a5f0131fbf9f60368b859dd into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Feb 28 '22 09:02 lgtm-com[bot]

This pull request introduces 3 alerts when merging 59a074461779f1346647041dbcc744d357d3c790 into 66f815ef13a0a7e42ee7f2376740634bce1bf513 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 01 '22 02:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging e80a8f088cbad9d2ebca5b5166edcecb32727b7f into 66f815ef13a0a7e42ee7f2376740634bce1bf513 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 01 '22 03:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging 2b482400e5b39ed12e2eb2df79eece9f0781b1a1 into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 01 '22 13:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging 365e49b0c65101317108e72d05f7d65db8cc37a3 into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 01 '22 14:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging 19faf385e4e83f91c9ba4e16c993ccbb2b22e7ab into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 01 '22 14:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging f4cbf5259246d81bdd65d6ff8b782c362813e7d2 into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 02 '22 03:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging 6b9010e9ee72439435fd6576b5f4b254b8d5f7d0 into 2828fac182e110c11e053085cceac4051c0835c5 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 03 '22 02:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging 2d886afddb79d5d3b3006b0aa70cc02f2e8ce8f8 into 2828fac182e110c11e053085cceac4051c0835c5 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 03 '22 03:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging 1320d0e8704469ec5b98abc5cb9f8abdf71b561b into 2828fac182e110c11e053085cceac4051c0835c5 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 03 '22 04:03 lgtm-com[bot]

This pull request introduces 3 alerts when merging a4c59a2bcf9e8663abbd9807ace8785b6bb871c3 into c7c584ddc3b425bf52508d9c0cb9286ae42aed87 - view on LGTM.com

new alerts:

2 for Useless conditional
1 for Overwritten property

Mar 11 '22 08:03 lgtm-com[bot]

This pull request introduces 2 alerts when merging 81ca764ae0eef0c855c771b4a857333fbdab61c0 into 016e1450e5b633608ef8047ea2792f136ddf9e4d - view on LGTM.com

new alerts:

1 for Useless conditional
1 for Overwritten property

May 10 '22 05:05 lgtm-com[bot]

This pull request introduces 2 alerts when merging b20807d3e9ba29d9c211d7e5005359f16e773234 into 016e1450e5b633608ef8047ea2792f136ddf9e4d - view on LGTM.com

new alerts:

1 for Useless conditional
1 for Overwritten property

May 10 '22 05:05 lgtm-com[bot]

This pull request introduces 2 alerts when merging b947519534c4c6e7bce51eeddc20b0701e9e335a into 016e1450e5b633608ef8047ea2792f136ddf9e4d - view on LGTM.com

new alerts:

1 for Useless conditional
1 for Overwritten property

May 10 '22 06:05 lgtm-com[bot]

pro-components pro-components copied to clipboard

ProLayout -“商业品质，包容，生长”

Token

默认的 token

Layout 的 token

Sider Token

Header Token

pageContainer Token

🎏 如何升级到最新版本？

🙋‍ 反馈给我们

size-limit report 📦

Codecov Report

pro-components
pro-components copied to clipboard