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

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

Closed chenshuai2144 closed 1 year ago

chenshuai2144 commented 2 years ago

基于 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 变化不是很大的。 ​

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 }[] -

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

​

🙋‍ 反馈给我们

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

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

​

​

​

github-actions[bot] commented 2 years ago

⚡️ Deploying PR Preview...

github-actions[bot] commented 2 years ago

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%)
lgtm-com[bot] commented 2 years ago

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

new alerts:

codecov[bot] commented 2 years ago

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.

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

leshalv commented 2 years ago

设计思路和设计稿有没？

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 2 years ago

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

new alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging e48b8caebeef57510dab3abda02c2b80997dfd82 into 155db55b98462b56cfbaa153cc40c8e5ea845039 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 2f97aabe5531ff1ce587d9f18bb75d63e6b1fb4d into 762022c2ecb514e4533de4713f5fa3f4bd8b042d - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 1b52bafd4360eb5515e9ffde7f47d80a2653b844 into 762022c2ecb514e4533de4713f5fa3f4bd8b042d - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 7b9ed1a932589a480a689e13fa0a60b391b32c3b into 762022c2ecb514e4533de4713f5fa3f4bd8b042d - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging a6e3ea79cfd04fba30e8164c3dc6009a027b3a77 into 762022c2ecb514e4533de4713f5fa3f4bd8b042d - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging a396063220a38111e28f0908e97a5030fdef8d4d into 762022c2ecb514e4533de4713f5fa3f4bd8b042d - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging a1f594a8d3e71b2327f00c209b457729a61b61f6 into 242df0ced0a9dcf6d333330b1a2fe3ccf0114db7 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging fe6f9281875222f1f0fc1a2e4d2c0bdd9548d086 into 242df0ced0a9dcf6d333330b1a2fe3ccf0114db7 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 8c76bf239f8fac626fab3e9270e50aa3519fec65 into 242df0ced0a9dcf6d333330b1a2fe3ccf0114db7 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging ed22ded7100d0e3c0fd03f13269f9ec7dc786dce into 177a0e695ca206a70e6a8cafbbf2536b7475e7bf - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging e1cf5c71d008f2dc4ebf7a404a8bf154557e1d36 into b4a44b7168557c2c655737065fb046529e9ba653 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 527e53136087a0288c1c8c189d47589257d503b4 into b4a44b7168557c2c655737065fb046529e9ba653 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 7eb7b511bac00c4bec5790e80a4492eb4f45eefe into 0a2393aa87d75824c98fa58e7bd513d97d12a5a2 - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 38423d0664b76b37e7fafb283b4e1b3104cf8445 into 0c9fea756786731a2635268397bca0d279580deb - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 5445d5f064d1ccdd80d66e6ad79cf23c2a4ceb8e into 0c9fea756786731a2635268397bca0d279580deb - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 7275db98a99783c10c969048e53181f182e51a7a into 895effd500071342ece57f468bfaa9ca4473283b - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging aa8806f8c90b2f63e730c74ad5be1abe187b1533 into 70d6cdc22786313f04fd4481bc64a89477683c1d - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 46625fd55e9debe5043d1462f9307cfb6511193f into 4c7b7d0355b5bf940cccf1924179ced053d09e8f - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 7ba3dcde6fcb2f4b416e16fb9f9cf1a39e0d2055 into f17877804a0cf7c8bf8c86f34255ed2699cc9dbd - view on LGTM.com

new alerts:

fixed alerts:

lgtm-com[bot] commented 1 year ago

This pull request introduces 3 alerts and fixes 1 when merging 05645b48caac41467a20ab041263813d51f868f9 into f17877804a0cf7c8bf8c86f34255ed2699cc9dbd - view on LGTM.com

new alerts:

fixed alerts: