@oceanbase/codemod Development Plan

[dengfuping]

antd 体系迁移到 OBUI

antd => @oceanbase/design

• antd => @oceanbase/design
• antd/locale/xxx => @oceanbase/design/locale/xxx
• antd/es/xxx => @oceanbase/design/es/xxx
• antd/lib/xxx => @oceanbase/design/lib/xxx
• @alipay/bigfish/antd => @oceanbase/design

tech-ui => @oceanbase/design

WelcomeCard 等部分组件不支持，需要进行判断

• @alipay/tech-ui => @oceanbase/ui
• @alipay/tech-ui/es/xxx => @oceanbase/ui/es/xxx
• @alipay/tech-ui/lib/xxx => @oceanbase/ui/lib/xxx

pro-components => @oceanbase/ui

• @ant-design/pro-components => @oceanbase/ui
• @ant-design/pro-components => @oceanbase/ui/es/xxx
• @ant-design/pro-components => @oceanbase/ui/lib/xxx

@ant-design/icons => @oceanbase/icons

• @ant-design/icons => @oceanbase/icons
• @ant-design/icons/es/xxx => @oceanbase/icons/es/xxx
• @ant-design/icons/lib/xxx => @oceanbase/icons/lib/xxx

OBUI 内部包迁移到外部包

ob-ui => @oceanbase/design + @oceanbase/ui

• @alipay/ob-ui => @oceanbase/design
• @alipay/ob-ui => @oceanbase/ui
• @alipay/ob-ui/es/xxx => @oceanbase/design/es/xxx
• @alipay/ob-ui/lib/xxx => @oceanbase/design/lib/xxx
• @alipay/ob-ui/es/xxx => @oceanbase/ui/es/xxx
• @alipay/ob-ui/lib/xxx => @oceanbase/ui/lib/xxx

ob-charts => @oceanbase/charts

• @alipay/ob-charts => @oceanbase/charts

ob-util => @oceanbase/util

• @alipay/ob-util => @oceanbase/util
• getTableData => useTableData

不兼容变更处理

• 不兼容变更需要等社区包 1.0 正式版出来后才能确定。
  • 可以主动修复的，会自动升级到最新用法。
  • 无法主动修复的，则仍然使用原先的内部包作为兼容。

样式迁移

固定样式迁移为 Design Token

• #f0f2f5 => colorBgLayout
• #fafafa => colorBgLayout
• #1890ff 及相关颜色值 => colorInfo
• #52c41a => colorSuccess
• #faad14 => colorWarning
• #ff4d4f => colorError
• #d9d9d9 => colorBorder
• #bfbfbf => colorBorder
• 不规范的颜色值: #F5222D => colorError
• 不规范的颜色值: #F8636B => colorError
• 不规范的颜色值: #73d13d => colorSuccess
• rgba(0, 0, 0, 0.85) & rgba(0,0,0,0.85) & rgba(0, 0, 0, .85) & rgba(0,0,0, .85) => colorText
• rgba(0, 0, 0, 0.65) & rgba(0,0,0,0.65) & rgba(0, 0, 0, .65) & rgba(0,0,0, .65) => colorTextSecondary
• rgba(0, 0, 0, 0.45) & rgba(0,0,0,0.45) & rgba(0, 0, 0, .45) & rgba(0,0,0, .45) => colorTextTertiary
• rgba(0, 0, 0, 0.25) & rgba(0,0,0,0.25) & rgba(0, 0, 0, .25) & rgba(0,0,0, .25)=> colorTextQuaternary
• rgba(0, 0, 0, 0.2) & rgba(0,0,0,0.2) & rgba(0, 0, 0, .2) & rgba(0,0,0, .2)=> colorFillQuaternary
• 自定义圆角 2、4、6 => borderRadius & borderRadiusSM
• 自定义阴影 => boxShadow & boxShadowSecondary
• 不规范的颜色值: rgba(0, 0, 0, 0.04) & rgba(0,0,0,0.04) & rgba(0, 0, 0, .04) & rgba(0,0,0, .04) => colorBgLayout

Less 变量迁移为 Design Token

• 参考: Less 变量迁移 Design Token - Ant Design

[yutingzhao1991]

👀