Merge pull request #562 from oceanbase/master

[Feature Branch] chore(merge): Merge master branch of v0.3.2

.dumirc.ts

@@ -134,9 +134,12 @@ export default defineConfig({
         {
           title: '数据录入',
           children: [
+            { title: 'Cascader 级联选择', link: '/components/cascader' },
             { title: 'Form 表单', link: '/components/form' },
+            { title: 'Input 输入框', link: '/components/input' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
             { title: 'Select 选择器', link: '/components/select' },
+            { title: 'TreeSelect 树选择', link: '/components/tree-select' },
           ],
         },
         {
@@ -187,6 +190,13 @@ export default defineConfig({
             { title: 'Welcome 欢迎页', link: '/biz-components/welcome' },
           ],
         },
+        {
+          title: 'ProComponents 组件',
+          children: [
+            { title: 'ProTable 高级表格', link: '/biz-components/pro-table' },
+            { title: 'LightFilter 轻量筛选', link: '/biz-components/light-filter' },
+          ],
+        },
         {
           title: '可视化',
           children: [
@@ -253,14 +263,14 @@ export default defineConfig({
               title: 'Histogram 直方图',
               link: '/charts/histogram',
             },
-            {
-              title: 'Pie 饼图&环图',
-              link: '/charts/pie',
-            },
             {
               title: 'DualAxes 双轴图',
               link: '/charts/dual-axes',
             },
+            {
+              title: 'Pie 饼图&环图',
+              link: '/charts/pie',
+            },
             {
               title: 'Gauge 仪表盘',
               link: '/charts/gauge',

docs/charts/charts-CHANGELOG.md

@@ -8,6 +8,18 @@ group: 可视化图表
 
 ---
 
+## 0.3.1
+
+`2024-04-12`
+
+- 🐞 Line、Area、Column 和 DualAxes 去掉不合理的 `xAxis.tickCount` 计算逻辑，改由上层进行控制。[#560](https://github.com/oceanbase/oceanbase-design/pull/560)
+- 💄 去掉 Bar 条形的固定宽度，改为自适应。
+- 💄 去掉 Column 和 DualAxes 柱形的固定宽度，改为自适应。
+
+## 0.3.0
+
+`2024-03-22`
+
 ## 0.2.22
 
 `2024-01-18`

docs/codemod/codemod-CHANGELOG.md

@@ -8,6 +8,12 @@ group: 自动化迁移工具
 
 ---
 
+## 0.3.1
+
+`2024-04-12`
+
+- ⭐️ 支持 @oceanbase/design 颜色值到 Design Token 的自动改写。[#539](https://github.com/oceanbase/oceanbase-design/pull/539)
+
 ## 0.3.0
 
 `2024-03-22`

docs/design/design-CHANGELOG.md

@@ -8,6 +8,23 @@ group: 基础组件
 
 ---
 
+## 0.3.2
+
+`2024-04-12`
+
+- 📢 Input `placeholder` 默认为 `请输入`。[#540](https://github.com/oceanbase/oceanbase-design/pull/540)
+- 📢 InputNumber `placeholder` 默认为 `请输入`。[#548](https://github.com/oceanbase/oceanbase-design/pull/548)
+- 📢 Select `placeholder` 默认为 `请选择`。[#546](https://github.com/oceanbase/oceanbase-design/pull/546)
+- 📢 TreeSelect `placeholder` 默认为 `请选择`。[#547](https://github.com/oceanbase/oceanbase-design/pull/547)
+- ConfigProvider
+  - 🆕 ConfigProvider 新增 `locale.Input.placeholder` 属性，用于配置 Input 的默认 placeholder。[#540](https://github.com/oceanbase/oceanbase-design/pull/540)
+  - 🆕 ConfigProvider 新增 `locale.global.inputPlaceholder` 和 `locale.InputNumber.placeholder` 属性，用于配置 InputNumber 的默认 placeholder。[#548](https://github.com/oceanbase/oceanbase-design/pull/548)
+  - 🆕 ConfigProvider 新增 `locale.Select.placeholder` 属性，用于配置 Select 的默认 placeholder。[#546](https://github.com/oceanbase/oceanbase-design/pull/546)
+  - 🆕 ConfigProvider 新增 `locale.TreeSelect.placeholder` 属性，用于配置 Select 的默认 `placeholder`。[#547](https://github.com/oceanbase/oceanbase-design/pull/547)
+- 🐞 修复主题 Token `boxShadow` 和 `boxShadowSecondary` 通过静态 token 对象和 less 变量访问时值不正确的问题。[#552](https://github.com/oceanbase/oceanbase-design/pull/552)
+- 💄 优化 Select、TreeSelect 和 Cascader 多选项的背景色和边框色，以对齐设计规范。[#553](https://github.com/oceanbase/oceanbase-design/pull/553)
+- 💄 Table 分页器配置默认改为 `{ defaultPageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100'], showTotal: total => \`共 ${total} 条\` }`。
+
 ## 0.3.1
 
 `2024-03-29`

docs/ui/ui-CHANGELOG.md

@@ -8,6 +8,16 @@ group: 业务组件
 
 ---
 
+## 0.3.2
+
+`2024-04-12`
+
+- 💄 优化 LightFilter 圆角、内间距、背景色等样式，以对齐设计规范。[#554](https://github.com/oceanbase/oceanbase-design/pull/554)
+- ProTable [#549](https://github.com/oceanbase/oceanbase-design/pull/549)
+  - 🐞 修复 ProTable 没有继承 Table 样式的问题。
+  - 🐞 修复 ProTable 查询表单带有 `requiredMark` 可选样式的问题。
+  - 💄 ProTable 分页器配置默认改为 `{ defaultPageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100'], showTotal: total => \`共 ${total} 条\` }`。
+
 ## 0.3.1
 
 `2024-03-29`

package.json

@@ -22,9 +22,10 @@
     "site:deploy": "gh-pages -d site",
     "postpublish": "npm run sync:other-npm",
     "sync:other-npm": "node -e 'require(\"./scripts/sync-cnpm-and-tnpm\")()'",
-    "test": "cross-env vitest",
-    "test:coverage": "cross-env TEST_LOG=none vitest --coverage",
-    "test:update": "cross-env vitest -u",
+    "test:prepare": "tsc --skipLibCheck packages/design/src/theme/default.ts --outDir packages/design/lib/theme",
+    "test": "npm run test:prepare && cross-env vitest",
+    "test:coverage": "npm run test:prepare && cross-env TEST_LOG=none vitest --coverage",
+    "test:update": "npm run test:prepare && cross-env vitest -u",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint --cache --ext .js,.jsx,.ts,.tsx --fix --format=pretty",
     "prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,less,md,json}\"",
@@ -42,10 +43,10 @@
   },
   "devDependencies": {
     "@ant-design/colors": "^7.0.2",
-    "@ant-design/cssinjs": "^1.18.4",
-    "@ant-design/icons": "^5.3.4",
-    "@babel/cli": "^7.23.9",
-    "@babel/preset-env": "^7.24.0",
+    "@ant-design/cssinjs": "^1.19.1",
+    "@ant-design/icons": "^5.3.6",
+    "@babel/cli": "^7.24.1",
+    "@babel/preset-env": "^7.24.4",
     "@chenshuai2144/less2cssinjs": "^1.0.7",
     "@ctrl/tinycolor": "^4.0.3",
     "@emotion/babel-preset-css-prop": "^11.11.0",
@@ -57,17 +58,17 @@
     "@stackblitz/sdk": "^1.9.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.25",
-    "@types/react": "^18.2.64",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.12.5",
+    "@types/react": "^18.2.74",
     "@umijs/fabric": "^4.0.1",
-    "@umijs/test": "^4.1.2",
+    "@umijs/test": "^4.1.8",
     "@vercel/analytics": "^1.2.2",
-    "antd": "^5.15.3",
-    "antd-style": "^3.6.1",
+    "antd": "^5.16.1",
+    "antd-style": "^3.6.2",
     "antd-token-previewer": "^2.0.8",
     "babel-jest": "^29.7.0",
     "classnames": "^2.5.1",
@@ -80,7 +81,7 @@
     "father": "^4.4.0",
     "fs-extra": "^11.2.0",
     "gh-pages": "^6.1.1",
-    "glob": "^10.3.10",
+    "glob": "^10.3.12",
     "html2sketch": "^1.0.2",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
@@ -106,13 +107,13 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.4",
-    "react-intl": "^6.6.2",
+    "react-intl": "^6.6.5",
     "react-router-dom": "^6.22.3",
     "runscript": "^1.6.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.2",
-    "vanilla-jsoneditor": "^0.23.0",
-    "vitest": "^1.4.0",
+    "typescript": "^5.4.4",
+    "vanilla-jsoneditor": "^0.23.1",
+    "vitest": "^1.5.0",
     "vitest-canvas-mock": "^0.3.3",
     "vitest-fetch-mock": "^0.2.2",
     "web-vitals": "^3.5.2"

packages/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/charts",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The Chart library for OceanBase",
   "homepage": "https://github.com/oceanbase/oceanbase-design/packages/charts",
   "repository": {
@@ -31,7 +31,7 @@
     "@oceanbase/util": "workspace:^",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
-    "rc-util": "^5.38.1",
+    "rc-util": "^5.39.1",
     "tinycolor2": "^1.6.0",
     "use-resize-observer": "^9.1.0"
   },

packages/charts/src/Area/demo/basic.tsx

@@ -18,6 +18,9 @@ export default () => {
     data,
     xField: 'timePeriod',
     yField: 'value',
+    xAxis: {
+      tickCount: 7,
+    },
   };
   return <Area {...config} />;
 };

packages/charts/src/Area/demo/stack.tsx

@@ -19,6 +19,9 @@ export default () => {
     xField: 'date',
     yField: 'value',
     seriesField: 'country',
+    xAxis: {
+      tickCount: 7,
+    },
   };
   return <Area {...config} />;
 };

packages/charts/src/Area/demo/tooltip-scrollable.tsx

@@ -22,6 +22,9 @@ export default () => {
     xField: 'date',
     yField: 'value',
     seriesField: 'country',
+    xAxis: {
+      tickCount: 7,
+    },
     tooltip: {
       scrollable: true,
     },

packages/charts/src/Area/index.tsx

@@ -47,8 +47,6 @@ const Area = forwardRef<unknown, AreaConfig>(
         // type 为 time 时需要关闭自动美化，否则 X 轴两侧会留白
         // issue: https://github.com/antvis/G2Plot/issues/1951
         nice: xAxis?.type === 'time' ? false : undefined,
-        // 点数 >= 14 时，x 方向展示 7 个刻度线和网格
-        tickCount: data?.length >= 14 ? 7 : undefined,
         ...xAxis,
         // x 方向增加虚线网格
         grid:

packages/charts/src/Bar/demo/basic.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
 import type { BarConfig } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
 
 export default () => {
   const data = [
@@ -34,14 +33,6 @@ export default () => {
       position: 'top-left',
     },
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={200} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar height={200} {...config} data={data.slice(0, 2)} />
-      </Col>
-    </Row>
-  );
+
+  return <Bar {...config} />;
 };

packages/charts/src/Bar/demo/group.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { BarConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -55,24 +55,13 @@ export default () => {
       value: 100,
     },
   ];
-  const config = {
+  const config: BarConfig = {
+    data,
     isGroup: true,
     xField: 'value',
     yField: 'label',
     seriesField: 'type',
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={250} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar
-          height={250}
-          data={data.filter(item => ['Mon.', 'Tues.'].includes(item.label))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+
+  return <Bar {...config} />;
 };

packages/charts/src/Bar/demo/percent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { BarConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -110,25 +110,13 @@ export default () => {
       value: 628,
     },
   ];
-  const config = {
+  const config: BarConfig = {
+    data,
     xField: 'value',
     yField: 'year',
     seriesField: 'country',
     isPercent: true,
     isStack: true,
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={200} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar
-          height={200}
-          data={data.filter(item => ['1750', '1800'].includes(item.year))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+  return <Bar data={data} {...config} />;
 };

packages/charts/src/Bar/demo/progress.tsx

@@ -26,10 +26,9 @@ export default () => {
     },
   ];
   const config1 = {
+    isProgress: true,
     xField: 'value',
     yField: 'type',
-    isProgress: true,
-
     meta: {
       value: {
         alias: '比赛进度',