From 43fb832520b17e16cbd7b9286a25e6a7153f0115 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Jun 2026 11:03:15 +0800 Subject: [PATCH 01/32] chore: standardize repository tooling --- .github/FUNDING.yml | 17 +- .../workflows/cloudflare-pages-preview.yml | 38 ++++ .github/workflows/react-component-ci.yml | 4 +- .github/workflows/react-doctor.yml | 26 +++ .github/workflows/surge-preview.yml | 33 +++ README.md | 192 +++++++++++------- package.json | 5 +- vercel.json | 6 + 8 files changed, 230 insertions(+), 91 deletions(-) create mode 100644 .github/workflows/cloudflare-pages-preview.yml create mode 100644 .github/workflows/react-doctor.yml create mode 100644 .github/workflows/surge-preview.yml create mode 100644 vercel.json diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 33b1999c..758659af 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,15 +1,2 @@ -# These are supported funding model platforms - -github: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] -patreon: # Replace with a single Patreon username -open_collective: ant-design # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry -liberapay: # Replace with a single Liberapay username -issuehunt: # Replace with a single IssueHunt username -lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry -polar: # Replace with a single Polar username -buy_me_a_coffee: # Replace with a single Buy Me a Coffee username -thanks_dev: # Replace with a single thanks.dev username -custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] +github: ant-design +open_collective: ant-design diff --git a/.github/workflows/cloudflare-pages-preview.yml b/.github/workflows/cloudflare-pages-preview.yml new file mode 100644 index 00000000..c1738dfe --- /dev/null +++ b/.github/workflows/cloudflare-pages-preview.yml @@ -0,0 +1,38 @@ +name: Cloudflare Pages Preview + +on: + pull_request: + +permissions: + contents: read + deployments: write + +jobs: + preview: + runs-on: ubuntu-latest + env: + CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} + CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + CLOUDFLARE_PAGES_PROJECT: ${{ vars.CLOUDFLARE_PAGES_PROJECT }} + PREVIEW: true + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false + - name: Skip Cloudflare Pages preview + if: ${{ env.CLOUDFLARE_API_TOKEN == '' || env.CLOUDFLARE_ACCOUNT_ID == '' || env.CLOUDFLARE_PAGES_PROJECT == '' }} + run: echo "Cloudflare Pages preview is not configured; skip deployment." + - name: Install dependencies + if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} + run: npm install + - name: Build site + if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} + run: npm run build + - name: Deploy preview + if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} + uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 + with: + apiToken: ${{ env.CLOUDFLARE_API_TOKEN }} + accountId: ${{ env.CLOUDFLARE_ACCOUNT_ID }} + command: pages deploy dist --project-name=${{ env.CLOUDFLARE_PAGES_PROJECT }} --branch=${{ github.head_ref }} + gitHubToken: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 5735e2d2..f8482b63 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -2,5 +2,5 @@ name: ✅ test on: [push, pull_request] jobs: test: - uses: react-component/rc-test/.github/workflows/test.yml@main - secrets: inherit \ No newline at end of file + uses: react-component/rc-test/.github/workflows/test-utoo.yml@main + secrets: inherit diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml new file mode 100644 index 00000000..f820dc07 --- /dev/null +++ b/.github/workflows/react-doctor.yml @@ -0,0 +1,26 @@ +name: React Doctor +on: + pull_request: + types: [opened, synchronize, reopened, ready_for_review] + push: + branches: [master] + +permissions: + contents: read + pull-requests: write + issues: write + statuses: write + +concurrency: + group: react-doctor-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +jobs: + react-doctor: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + fetch-depth: 0 + persist-credentials: false + - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml new file mode 100644 index 00000000..1f63ec71 --- /dev/null +++ b/.github/workflows/surge-preview.yml @@ -0,0 +1,33 @@ +name: Surge Preview + +on: + pull_request: + +permissions: + contents: read + pull-requests: write + checks: write + +jobs: + preview: + runs-on: ubuntu-latest + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false + - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec + if: ${{ env.SURGE_TOKEN != '' }} + with: + surge_token: ${{ env.SURGE_TOKEN }} + github_token: ${{ secrets.GITHUB_TOKEN }} + dist: dist + failOnError: true + setCommitStatus: true + build: | + npm install + npm run build + - name: Skip Surge preview + if: ${{ env.SURGE_TOKEN == '' }} + run: echo "SURGE_TOKEN is not configured; skip Surge preview." diff --git a/README.md b/README.md index 70f3e8ae..3892d5dc 100755 --- a/README.md +++ b/README.md @@ -1,91 +1,139 @@ -# @rc-component/drawer +
+

@rc-component/drawer

+

🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.

+ +

+ NPM version + npm downloads + build status + codecov + bundle size + dumi +

+
+ +

+ + + Ant Design + + Part of the Ant Design ecosystem. + +

+ +## Highlights + +| Area | Support | +| ----------- | ------------------------------------------------------ | +| Placement | Left, right, top, and bottom drawers | +| Interaction | Mask click, keyboard close, focus management | +| Composition | Nested drawers with push behavior | +| Layout | Fixed drawer size, resizable panels, custom containers | +| Motion | Configurable open and close transitions | -[![NPM version][npm-image]][npm-url] -[![npm download][download-image]][download-url] -[![build status][github-actions-image]][github-actions-url] -[![codecov][codecov-image]][codecov-url] -[![dumi][dumi-image]][dumi-url] - -[npm-image]: http://img.shields.io/npm/v/@rc-component/drawer.svg?style=flat-square -[npm-url]: http://npmjs.org/package/@rc-component/drawer -[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square -[dumi-url]: https://github.com/umijs/dumi -[github-actions-image]: https://github.com/react-component/drawer/actions/workflows/react-component-ci.yml/badge.svg -[github-actions-url]: https://github.com/react-component/drawer/actions/workflows/react-component-ci.yml -[download-image]: https://img.shields.io/npm/dm/@rc-component/drawer.svg?style=flat-square -[download-url]: https://npmjs.org/package/@rc-component/drawer -[codecov-image]: https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg -[codecov-url]: https://codecov.io/gh/react-component/drawer - - -## Example +## Install -https://drawer-react-component.vercel.app/ +```bash +npm install @rc-component/drawer +``` ## Usage -```js +```tsx | pure import Drawer from '@rc-component/drawer'; import React from 'react'; -import ReactDom from 'react-dom'; - -ReactDom.render( - - {menu children} - -, mountNode); +import { createRoot } from 'react-dom/client'; + +const App = () => { + const [open, setOpen] = React.useState(false); + + return ( + <> + + setOpen(false)}> + Drawer content + + + ); +}; + +createRoot(document.getElementById('root')!).render(); ``` -## Install - -[![@rc-component/drawer](https://nodei.co/npm/@rc-component/drawer.png)](https://npmjs.org/package/@rc-component/drawer) +## Examples -## Browser Support - -| ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) | -| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | +Visit the [online examples](https://drawer-react-component.vercel.app/) for placement, container, nested drawer, mask, force render, and resizable demos. ## API -| props | type | default | description | -| ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- | -| className | string | null | - | -| classNames | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area | -| styles | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | `rc-drawer` | pass style to target area | -| prefixCls | string | 'drawer' | prefix class | -| width | string \| number | null | drawer content wrapper width, drawer level transition width | -| height | string \| number | null | drawer content wrapper height, drawer level transition height | -| defaultWidth | string \| number | null | default width for uncontrolled resizable drawer | -| defaultHeight | string \| number | null | default height for uncontrolled resizable drawer | -| open | boolean | false | open or close menu | -| defaultOpen | boolean | false | default open menu | -| placement | string | `left` | `left` `top` `right` `bottom` | -| level | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array | -| levelMove | number \| array \| func | null | level move value. default is drawer width | -| duration | string | `.3s` | level animation duration | -| ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function | -| getContainer | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement | -| showMask | boolean | true | mask is show | -| maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | -| maskStyle | CSSProperties | null | mask style | -| afterOpenChange | func | null | transition end callback(open) | -| onClose | func | null | close click function | -| keyboard | boolean | true | Whether support press esc to close | -| autoFocus | boolean | true | Whether focusing on the drawer after it opened | -| resizable | { onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void; } | - | Resizable configuration with optional callbacks | -| onMouseEnter | React.MouseEventHandler\ | - | Trigger when mouse enter drawer panel | -| onMouseOver | React.MouseEventHandler\ | - | Trigger when mouse over drawer panel | -| onMouseLeave | React.MouseEventHandler\ | - | Trigger when mouse leave drawer panel | -| onClick | React.MouseEventHandler\ | - | Trigger when mouse click drawer panel | -| onKeyDown | React.MouseEventHandler\ | - | Trigger when mouse keydown on drawer panel | -| onKeyUp | React.MouseEventHandler\ | - | Trigger when mouse keyup on drawer panel | - -> 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`. +| Property | Type | Default | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | +| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | +| autoFocus | boolean | true | Whether to focus the drawer after it opens. | +| children | ReactNode | - | Drawer content. | +| className | string | - | Class name for the drawer panel. | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | +| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | +| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | +| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | +| focusTrap | boolean | - | Whether to trap focus inside the drawer. | +| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | +| forceRender | boolean | false | Render the drawer before it is opened. | +| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | +| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | +| keyboard | boolean | true | Whether pressing Esc closes the drawer. | +| mask | boolean | true | Whether to show the mask. | +| maskClassName | string | - | Class name for the mask. | +| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | +| maskMotion | CSSMotionProps | - | Motion config for the mask. | +| maskStyle | CSSProperties | - | Style for the mask. | +| maxSize | number | - | Maximum size for a resizable drawer. | +| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | +| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | +| open | boolean | false | Whether the drawer is open. | +| panelRef | Ref | - | Ref for the drawer panel. | +| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | +| prefixCls | string | `rc-drawer` | Class name prefix. | +| push | boolean \| `{ distance?: number \| string }` | - | Push parent drawers when nested. | +| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | Enable resizing and optional resize callbacks. | +| rootClassName | string | - | Class name for the root wrapper. | +| rootStyle | CSSProperties | - | Style for the root wrapper. | +| size | number \| string | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. | +| style | CSSProperties | - | Style for the drawer panel. | +| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | +| width | number \| string | - | Deprecated. Use `size` for left or right placement. | +| zIndex | number | - | Root wrapper z-index. | + +Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel. ## Development -``` +```bash npm install npm start ``` + +Common commands: + +```bash +npm run lint +npm test +npm run tsc +npm run compile +``` + +## Release + +This package uses `prepublishOnly` to run the compile and release checks before publishing: + +```bash +npm publish +``` + +The publish lifecycle runs: + +```bash +npm run compile && rc-np +``` diff --git a/package.json b/package.json index 012cca3d..c9ec1283 100644 --- a/package.json +++ b/package.json @@ -34,12 +34,13 @@ "scripts": { "build": "dumi build", "compile": "father build && lessc assets/index.less assets/index.css", - "lint": "eslint src/ --ext .tsx,.ts", + "lint": "eslint src/ docs/ tests/ --ext .tsx,.ts,.jsx,.js", "now-build": "npm run build", "prepublishOnly": "npm run compile && rc-np", "start": "dumi dev", "test": "rc-test", - "prettier": "prettier --write .", + "tsc": "tsc --noEmit", + "prettier": "prettier --write --ignore-unknown .", "prepare": "husky" }, "dependencies": { diff --git a/vercel.json b/vercel.json new file mode 100644 index 00000000..e884e1b3 --- /dev/null +++ b/vercel.json @@ -0,0 +1,6 @@ +{ + "framework": "umijs", + "installCommand": "npm install", + "buildCommand": "npm run build", + "outputDirectory": "dist" +} From 517478a7fd70fd8bd93c7e993be11d1cb5fd89a6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Jun 2026 15:03:49 +0800 Subject: [PATCH 02/32] chore: remove cloudflare preview and now-build --- .../workflows/cloudflare-pages-preview.yml | 38 ------------------- package.json | 1 - 2 files changed, 39 deletions(-) delete mode 100644 .github/workflows/cloudflare-pages-preview.yml diff --git a/.github/workflows/cloudflare-pages-preview.yml b/.github/workflows/cloudflare-pages-preview.yml deleted file mode 100644 index c1738dfe..00000000 --- a/.github/workflows/cloudflare-pages-preview.yml +++ /dev/null @@ -1,38 +0,0 @@ -name: Cloudflare Pages Preview - -on: - pull_request: - -permissions: - contents: read - deployments: write - -jobs: - preview: - runs-on: ubuntu-latest - env: - CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} - CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} - CLOUDFLARE_PAGES_PROJECT: ${{ vars.CLOUDFLARE_PAGES_PROJECT }} - PREVIEW: true - steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 - with: - persist-credentials: false - - name: Skip Cloudflare Pages preview - if: ${{ env.CLOUDFLARE_API_TOKEN == '' || env.CLOUDFLARE_ACCOUNT_ID == '' || env.CLOUDFLARE_PAGES_PROJECT == '' }} - run: echo "Cloudflare Pages preview is not configured; skip deployment." - - name: Install dependencies - if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} - run: npm install - - name: Build site - if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} - run: npm run build - - name: Deploy preview - if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} - uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 - with: - apiToken: ${{ env.CLOUDFLARE_API_TOKEN }} - accountId: ${{ env.CLOUDFLARE_ACCOUNT_ID }} - command: pages deploy dist --project-name=${{ env.CLOUDFLARE_PAGES_PROJECT }} --branch=${{ github.head_ref }} - gitHubToken: ${{ secrets.GITHUB_TOKEN }} diff --git a/package.json b/package.json index c9ec1283..3ea1664c 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "build": "dumi build", "compile": "father build && lessc assets/index.less assets/index.css", "lint": "eslint src/ docs/ tests/ --ext .tsx,.ts,.jsx,.js", - "now-build": "npm run build", "prepublishOnly": "npm run compile && rc-np", "start": "dumi dev", "test": "rc-test", From 7df088cb4a40abf4031fd4d641d765c2ff979302 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 00:41:35 +0800 Subject: [PATCH 03/32] docs: add Ant Design logo to README header --- README.md | 1 + 1 file changed, 1 insertion(+) mode change 100755 => 100644 README.md diff --git a/README.md b/README.md old mode 100755 new mode 100644 index 3892d5dc..e8794d4f --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@

@rc-component/drawer

+ Ant Design

🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.

From 963742e7f1e5adbe88d34947fcf412216831ce25 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 01:59:35 +0800 Subject: [PATCH 04/32] docs: standardize README release details --- README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e8794d4f..e1269d9a 100644 --- a/README.md +++ b/README.md @@ -127,14 +127,12 @@ npm run compile ## Release -This package uses `prepublishOnly` to run the compile and release checks before publishing: - ```bash -npm publish +npm run prepublishOnly ``` -The publish lifecycle runs: +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. -```bash -npm run compile && rc-np -``` +## License + +@rc-component/drawer is released under the [MIT](./LICENSE) license. From 25b0730637e41677542fdc73feb94b7b83cbec6b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 02:13:56 +0800 Subject: [PATCH 05/32] ci: make surge preview non-blocking --- .github/workflows/surge-preview.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index 1f63ec71..da133488 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -23,7 +23,7 @@ jobs: surge_token: ${{ env.SURGE_TOKEN }} github_token: ${{ secrets.GITHUB_TOKEN }} dist: dist - failOnError: true + failOnError: false setCommitStatus: true build: | npm install From 3ab4b0380047e58ae5444d7a35990ab3a728e0e7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 02:17:43 +0800 Subject: [PATCH 06/32] docs: clarify Ant Design ecosystem note --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1269d9a..9a215a48 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Ant Design - Part of the Ant Design ecosystem. + Part of the Ant Design ecosystem.

From 8a27c9a258a833032ee78bf47bfc7700c6d8a10f Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 02:25:40 +0800 Subject: [PATCH 07/32] ci: keep surge preview as fallback --- .github/workflows/surge-preview.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index da133488..777206d3 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -24,7 +24,7 @@ jobs: github_token: ${{ secrets.GITHUB_TOKEN }} dist: dist failOnError: false - setCommitStatus: true + setCommitStatus: false build: | npm install npm run build From 471f33d057fee58ae2cb20a43570876f6f5e5b4c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 13:03:58 +0800 Subject: [PATCH 08/32] docs: refine README usage and ecosystem note --- README.md | 34 +++++++--------------------------- 1 file changed, 7 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 9a215a48..0fb87f76 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@

@rc-component/drawer

+

Part of the Ant Design ecosystem.

Ant Design

🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.

@@ -13,14 +14,6 @@

-

- - - Ant Design - - Part of the Ant Design ecosystem. - -

## Highlights @@ -42,25 +35,12 @@ npm install @rc-component/drawer ```tsx | pure import Drawer from '@rc-component/drawer'; -import React from 'react'; -import { createRoot } from 'react-dom/client'; - -const App = () => { - const [open, setOpen] = React.useState(false); - - return ( - <> - - setOpen(false)}> - Drawer content - - - ); -}; - -createRoot(document.getElementById('root')!).render(); + +export default () => ( + {}}> + Drawer content + +); ``` ## Examples From 04f337f2ed1629fe4356fa5ae5c7b9cb3896301c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 13:22:13 +0800 Subject: [PATCH 09/32] ci: isolate surge preview token --- .github/workflows/surge-preview.yml | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index 777206d3..30f70a85 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -11,23 +11,25 @@ permissions: jobs: preview: runs-on: ubuntu-latest - env: - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} steps: - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 with: persist-credentials: false + - name: Build preview + if: ${{ secrets.SURGE_TOKEN != '' }} + run: | + npm install + npm run build - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec - if: ${{ env.SURGE_TOKEN != '' }} + if: ${{ secrets.SURGE_TOKEN != '' }} + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} with: surge_token: ${{ env.SURGE_TOKEN }} github_token: ${{ secrets.GITHUB_TOKEN }} dist: dist failOnError: false setCommitStatus: false - build: | - npm install - npm run build - name: Skip Surge preview - if: ${{ env.SURGE_TOKEN == '' }} + if: ${{ secrets.SURGE_TOKEN == '' }} run: echo "SURGE_TOKEN is not configured; skip Surge preview." From 098ca208e284bca1c389f880de22dcfc1645745b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 13:50:35 +0800 Subject: [PATCH 10/32] chore: address review comments --- .github/workflows/react-component-ci.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index f8482b63..9503b960 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -1,5 +1,7 @@ name: ✅ test on: [push, pull_request] +permissions: + contents: read jobs: test: uses: react-component/rc-test/.github/workflows/test-utoo.yml@main From 3de63014762af40bc9cab6dcf4433b81aad41976 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 22:00:32 +0800 Subject: [PATCH 11/32] docs: update Ant Design logo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0fb87f76..d1774ed3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

@rc-component/drawer

Part of the Ant Design ecosystem.

- Ant Design + Ant Design

🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.

From 12b3f535744e33eff9a607b2207d6652cf19ae26 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 22:19:17 +0800 Subject: [PATCH 12/32] docs: add Chinese README --- README.md | 2 + README.zh-CN.md | 120 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+) create mode 100644 README.zh-CN.md diff --git a/README.md b/README.md index d1774ed3..8b6e1e36 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,8 @@

+

English | 简体中文

+ ## Highlights diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 00000000..8e710642 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,120 @@ +
+

@rc-component/drawer

+

Ant Design 生态的一部分。

+ Ant Design +

🚪 React 抽屉组件，支持遮罩、动画、自定义容器和语义化样式。

+ +

+ NPM version + npm downloads + build status + codecov + bundle size + dumi +

+
+ +

English | 简体中文

+ + +## 特性 + +| 范围 | 支持 | +| ----------- | ------------------------------------------------------ | +| Placement | Left, right, top, and bottom drawers | +| Interaction | Mask click, keyboard close, focus management | +| Composition | Nested drawers with push behavior | +| Layout | Fixed drawer size, resizable panels, custom containers | +| Motion | Configurable open and close transitions | + +## 安装 + +```bash +npm install @rc-component/drawer +``` + +## 使用 + +```tsx | pure +import Drawer from '@rc-component/drawer'; + +export default () => ( + {}}> + Drawer content + +); +``` + +## 示例 + +查看[在线示例](https://drawer-react-component.vercel.app/)，了解 placement, container, nested drawer, mask, force render, and resizable demos。 + +## API + +| 参数 | 类型 | 默认值 | 说明 | +| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | +| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | +| autoFocus | boolean | true | Whether to focus the drawer after it opens. | +| children | ReactNode | - | Drawer content. | +| className | string | - | Class name for the drawer panel. | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | +| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | +| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | +| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | +| focusTrap | boolean | - | Whether to trap focus inside the drawer. | +| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | +| forceRender | boolean | false | Render the drawer before it is opened. | +| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | +| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | +| keyboard | boolean | true | Whether pressing Esc closes the drawer. | +| mask | boolean | true | Whether to show the mask. | +| maskClassName | string | - | Class name for the mask. | +| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | +| maskMotion | CSSMotionProps | - | Motion config for the mask. | +| maskStyle | CSSProperties | - | Style for the mask. | +| maxSize | number | - | Maximum size for a resizable drawer. | +| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | +| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | +| open | boolean | false | Whether the drawer is open. | +| panelRef | Ref | - | Ref for the drawer panel. | +| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | +| prefixCls | string | `rc-drawer` | Class name prefix. | +| push | boolean \| `{ distance?: number \| string }` | - | Push parent drawers when nested. | +| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | Enable resizing and optional resize callbacks. | +| rootClassName | string | - | Class name for the root wrapper. | +| rootStyle | CSSProperties | - | Style for the root wrapper. | +| size | number \| string | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. | +| style | CSSProperties | - | Style for the drawer panel. | +| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | +| width | number \| string | - | Deprecated. Use `size` for left or right placement. | +| zIndex | number | - | Root wrapper z-index. | + +Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel. + +## 本地开发 + +```bash +npm install +npm start +``` + +Common commands: + +```bash +npm run lint +npm test +npm run tsc +npm run compile +``` + +## 发布 + +```bash +npm run prepublishOnly +``` + +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. + +## 许可证 + +@rc-component/drawer is released under the [MIT](./LICENSE) license. From 9238280fae75841cd71504bb8ef7982b9ec08e72 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 27 Jun 2026 23:02:51 +0800 Subject: [PATCH 13/32] docs: refine bilingual README branding --- README.md | 3 +- README.zh-CN.md | 91 ++++++++++++++++++++++++------------------------- 2 files changed, 46 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 8b6e1e36..939e1efc 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@

@rc-component/drawer

-

Part of the Ant Design ecosystem.

- Ant Design +

Ant Design Part of the Ant Design ecosystem.

🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.

diff --git a/README.zh-CN.md b/README.zh-CN.md index 8e710642..ff3a2bae 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,7 +1,6 @@

@rc-component/drawer

-

Ant Design 生态的一部分。

- Ant Design +

Ant Design Ant Design 生态的一部分。

🚪 React 抽屉组件，支持遮罩、动画、自定义容器和语义化样式。

@@ -21,11 +20,11 @@ | 范围 | 支持 | | ----------- | ------------------------------------------------------ | -| Placement | Left, right, top, and bottom drawers | -| Interaction | Mask click, keyboard close, focus management | -| Composition | Nested drawers with push behavior | -| Layout | Fixed drawer size, resizable panels, custom containers | -| Motion | Configurable open and close transitions | +| Placement | 左、右、上、下四个方向的抽屉 | +| Interaction | 遮罩点击、键盘关闭和焦点管理 | +| Composition | 支持带 push 行为的嵌套抽屉 | +| Layout | 固定抽屉尺寸、可调整大小面板和自定义容器 | +| 运动 | 可配置打开和关闭动画 | ## 安装 @@ -47,49 +46,49 @@ export default () => ( ## 示例 -查看[在线示例](https://drawer-react-component.vercel.app/)，了解 placement, container, nested drawer, mask, force render, and resizable demos。 +查看[在线示例](https://drawer-react-component.vercel.app/)，了解放置、容器、嵌套抽屉、遮罩、强制渲染和可调整大小的演示。 ## API | 参数 | 类型 | 默认值 | 说明 | | ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | -| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | -| autoFocus | boolean | true | Whether to focus the drawer after it opens. | -| children | ReactNode | - | Drawer content. | -| className | string | - | Class name for the drawer panel. | -| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | -| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | -| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | -| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | -| focusTrap | boolean | - | Whether to trap focus inside the drawer. | -| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | -| forceRender | boolean | false | Render the drawer before it is opened. | -| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | -| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | -| keyboard | boolean | true | Whether pressing Esc closes the drawer. | -| mask | boolean | true | Whether to show the mask. | -| maskClassName | string | - | Class name for the mask. | -| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | -| maskMotion | CSSMotionProps | - | Motion config for the mask. | -| maskStyle | CSSProperties | - | Style for the mask. | -| maxSize | number | - | Maximum size for a resizable drawer. | -| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | -| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | -| open | boolean | false | Whether the drawer is open. | -| panelRef | Ref | - | Ref for the drawer panel. | +| afterOpenChange | `(open: boolean) => void` | - | 打开或关闭动画结束后调用。 | +| autoFocus | boolean | true | 抽屉打开后是否聚焦。 | +| children们 | ReactNode | - | 抽屉内容。 | +| className | string | - | 抽屉面板的className称。 | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义className称。 | +| defaultSize | number \| string | - | 非受控可调整大小抽屉的默认尺寸。 | +| destroyOnHidden | boolean | false | 抽屉完全关闭后将其卸下。 | +| drawerRender | `(node: ReactNode) => ReactNode` | - | 自定义渲染的抽屉面板内容。 | +| focusTrap | boolean | - | 是否将焦点限制在抽屉内。 | +| focusTriggerAfterClose | boolean | true | 关闭后是否将焦点返回到触发器。 | +| forceRender | boolean | false | 在抽屉打开之前对其进行渲染。 | +| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | 返回挂载节点。设置为 `false` 时内联渲染。 | +| 高度 | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 | +| keyboard | boolean | true | 按 Esc 是否关闭抽屉。 | +| mask | boolean | true | 是否显示遮罩。 | +| maskClassName | string | - | 掩码的className称。 | +| maskClosable | boolean | true | 单击蒙版是否会关闭抽屉。 | +| maskMotion | CSSMotionProps | - | 遮罩动画配置。 | +| maskStyle | CSSProperties | - | 遮罩样式。 | +| maxSize | number | - | 可调整大小的抽屉的最大尺寸。 | +| 运动 | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | 抽屉面板动画配置。 | +| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | 当抽屉请求关闭时调用。 | +| 打开 | boolean | false | 抽屉是否打开。 | +| panelRef | Ref | - | 抽屉面板参考。 | | placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | -| prefixCls | string | `rc-drawer` | Class name prefix. | -| push | boolean \| `{ distance?: number \| string }` | - | Push parent drawers when nested. | -| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | Enable resizing and optional resize callbacks. | -| rootClassName | string | - | Class name for the root wrapper. | -| rootStyle | CSSProperties | - | Style for the root wrapper. | -| size | number \| string | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. | -| style | CSSProperties | - | Style for the drawer panel. | -| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | -| width | number \| string | - | Deprecated. Use `size` for left or right placement. | -| zIndex | number | - | Root wrapper z-index. | - -Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel. +| prefixCls | string | `rc-drawer` | className前缀。 | +| push | boolean \| `{ distance?: number \| string }` | - | 嵌套时推动父抽屉。 | +| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | 启用调整大小和可选的调整大小回调。 | +| rootClassName | string | - | 根包装器的className。 | +| rootStyle | CSSProperties | - | 根包装器的样式。 | +| size | number \| string | `378` for left/right | 抽屉尺寸。控制左/右的宽度和顶部/底部放置的高度。 | +| 风格 | CSSProperties | - | 抽屉面板的样式。 | +| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | 内部抽屉元素的语义样式。 | +| 宽度 | number \| string | - | 已废弃。请使用 `size` 进行左侧或右侧放置。 | +| zIndex | number | - | 根包装器 z 索引。 | + +鼠标和键盘事件处理程序（例如 `onClick` 、 `onMouseEnter` 、 `onMouseLeave` 、 `onKeyDown` 和 `onKeyUp`）将传递到抽屉面板。 ## 本地开发 @@ -113,8 +112,8 @@ npm run compile npm run prepublishOnly ``` -The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. +包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。 ## 许可证 -@rc-component/drawer is released under the [MIT](./LICENSE) license. +@rc-component/drawer 基于 [MIT](./LICENSE) 许可证发布。 From 4d2f9bfb0adaeb3b02de3292ed8903cfe4f181f1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 01:28:38 +0800 Subject: [PATCH 14/32] chore: standardize rc tooling and docs --- .dumirc.ts | 6 ++++ .github/workflows/surge-preview.yml | 2 +- README.md | 9 +++++- README.zh-CN.md | 9 +++++- package.json | 44 ++++++++++++++--------------- tsconfig.json | 21 ++++++++++---- vercel.json | 2 +- 7 files changed, 62 insertions(+), 31 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index 263f4161..c5182571 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,7 +1,13 @@ import { defineConfig } from 'dumi'; import path from 'path'; +const basePath = process.env.GH_PAGES ? '/drawer/' : '/'; +const publicPath = basePath; + export default defineConfig({ + outputPath: 'docs-dist', + base: basePath, + publicPath, alias: { 'rc-drawer$': path.resolve('src'), 'rc-drawer/es': path.resolve('src'), diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index 30f70a85..633f829c 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -27,7 +27,7 @@ jobs: with: surge_token: ${{ env.SURGE_TOKEN }} github_token: ${{ secrets.GITHUB_TOKEN }} - dist: dist + dist: docs-dist failOnError: false setCommitStatus: false - name: Skip Surge preview diff --git a/README.md b/README.md index 939e1efc..46161ab9 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,14 @@ export default () => ( ## Examples -Visit the [online examples](https://drawer-react-component.vercel.app/) for placement, container, nested drawer, mask, force render, and resizable demos. +Run the local dumi site: + +```bash +npm install +npm start +``` + +Then open `http://localhost:8000`. ## API diff --git a/README.zh-CN.md b/README.zh-CN.md index ff3a2bae..df0b88a3 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -46,7 +46,14 @@ export default () => ( ## 示例 -查看[在线示例](https://drawer-react-component.vercel.app/)，了解放置、容器、嵌套抽屉、遮罩、强制渲染和可调整大小的演示。 +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 ## API diff --git a/package.json b/package.json index 3ea1664c..9ce0c611 100644 --- a/package.json +++ b/package.json @@ -51,32 +51,32 @@ "devDependencies": { "@ant-design/icons": "^6.2.5", "@rc-component/father-plugin": "^2.2.0", - "@rc-component/np": "^1.0.0", - "@testing-library/jest-dom": "^6.2.0", - "@testing-library/react": "^16.3.0", - "@types/jest": "^29.5.11", - "@types/node": "^25.0.0", + "@rc-component/np": "^1.0.4", + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^15.0.7", + "@types/jest": "^29.5.14", + "@types/node": "^26.0.1", "@types/raf": "^3.4.0", - "@types/react": "^19.0.0", - "@types/react-dom": "^19.0.0", - "@types/warning": "^3.0.0", + "@types/react": "^18.3.31", + "@types/react-dom": "^18.3.7", + "@types/warning": "^3.0.4", "antd": "^6.3.4", - "dumi": "^2.2.0", - "eslint": "^8.56.0", - "eslint-plugin-jest": "^29.0.1", - "eslint-plugin-unicorn": "^51.0.1", - "father": "^4.0.0", - "glob": "^10.3.10", - "husky": "^9.0.10", - "less": "^4.2.0", - "lint-staged": "^16.1.5", - "prettier": "^3.0.0", - "rc-test": "^7.0.9", - "react": "^19.0.0", - "react-dom": "^19.0.0", + "dumi": "^2.4.35", + "eslint": "^8.57.1", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-unicorn": "^56.0.1", + "father": "^4.6.23", + "glob": "^13.0.6", + "husky": "^9.1.7", + "less": "^4.6.7", + "lint-staged": "^16.4.0", + "prettier": "^3.9.0", + "rc-test": "^7.1.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", "stylelint": "^17.1.0", "stylelint-config-standard-less": "^4.0.0", - "typescript": "^5.3.3" + "typescript": "^5.9.3" }, "peerDependencies": { "react": ">=18.0.0", diff --git a/tsconfig.json b/tsconfig.json index 2045db31..eeeb0aec 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,21 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": ["src/.umi/*"], - "@rc-component/drawer": ["src/index.ts"] - } + "@/*": [ + "src/*" + ], + "@@/*": [ + "src/.umi/*" + ], + "@rc-component/drawer": [ + "src/index.ts" + ] + }, + "ignoreDeprecations": "5.0" }, - "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"] + "include": [ + ".dumirc.ts", + "**/*.ts", + "**/*.tsx" + ] } diff --git a/vercel.json b/vercel.json index e884e1b3..5f9139ef 100644 --- a/vercel.json +++ b/vercel.json @@ -2,5 +2,5 @@ "framework": "umijs", "installCommand": "npm install", "buildCommand": "npm run build", - "outputDirectory": "dist" + "outputDirectory": "docs-dist" } From 113f8dbc44159801af31e6f089bc3e857286692a Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 02:01:04 +0800 Subject: [PATCH 15/32] chore: address standardization review comments --- .github/workflows/surge-preview.yml | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index 633f829c..50782cc0 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -15,13 +15,23 @@ jobs: - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 with: persist-credentials: false + - name: Check Surge token + id: surge-token + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + run: | + if [ -n "$SURGE_TOKEN" ]; then + echo "enabled=true" >> "$GITHUB_OUTPUT" + else + echo "enabled=false" >> "$GITHUB_OUTPUT" + fi - name: Build preview - if: ${{ secrets.SURGE_TOKEN != '' }} + if: ${{ steps.surge-token.outputs.enabled == 'true' }} run: | npm install npm run build - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec - if: ${{ secrets.SURGE_TOKEN != '' }} + if: ${{ steps.surge-token.outputs.enabled == 'true' }} env: SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} with: @@ -31,5 +41,5 @@ jobs: failOnError: false setCommitStatus: false - name: Skip Surge preview - if: ${{ secrets.SURGE_TOKEN == '' }} + if: ${{ steps.surge-token.outputs.enabled != 'true' }} run: echo "SURGE_TOKEN is not configured; skip Surge preview." From 9969cd854749575cc14f8873c15789b9b50b4dbc Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 13:06:30 +0800 Subject: [PATCH 16/32] chore: ignore dumi build output --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 37c54b7a..298b598f 100755 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,7 @@ storybook # dumi .dumi/tmp .dumi/tmp-production +docs-dist pnpm-lock.yaml -bun.lockb \ No newline at end of file +bun.lockb From 61e1fd3bd2ea138a85f9ccf39b88f5b7988a8374 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 13:59:47 +0800 Subject: [PATCH 17/32] ci: use actions checkout v7 --- .github/workflows/react-doctor.yml | 2 +- .github/workflows/surge-preview.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml index f820dc07..01760580 100644 --- a/.github/workflows/react-doctor.yml +++ b/.github/workflows/react-doctor.yml @@ -19,7 +19,7 @@ jobs: react-doctor: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + - uses: actions/checkout@v7 with: fetch-depth: 0 persist-credentials: false diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index 50782cc0..ef5a81d8 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -12,7 +12,7 @@ jobs: preview: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + - uses: actions/checkout@v7 with: persist-credentials: false - name: Check Surge token From 2e68a0c79cf118f6d6f806a199591e1646ce35dc Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 14:30:11 +0800 Subject: [PATCH 18/32] chore: standardize package metadata --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 9ce0c611..a2dbb89d 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "drawer-motion", "drawer-animation" ], - "homepage": "https://github.com/react-component/drawer", + "homepage": "https://react-component.github.io/drawer", "bugs": { "url": "https://github.com/react-component/drawer/issues" }, @@ -86,5 +86,8 @@ "*.{js,jsx,ts,tsx}": "eslint --fix", "*.{css,less}": "stylelint --fix", "*.{js,jsx,ts,tsx,json,less,css,md}": "prettier --write" + }, + "publishConfig": { + "access": "public" } } From 9307467bcda4ee371275a022e0b04fab835d093b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 14:36:37 +0800 Subject: [PATCH 19/32] ci: standardize dependabot updates --- .github/dependabot.yml | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 2e210cb6..3b730ef9 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -3,29 +3,17 @@ updates: - package-ecosystem: npm directory: '/' schedule: - interval: daily + interval: weekly + day: monday time: '21:00' + timezone: Asia/Shanghai + open-pull-requests-limit: 10 + + - package-ecosystem: github-actions + directory: '/' + schedule: + interval: weekly + day: monday + time: '21:00' + timezone: Asia/Shanghai open-pull-requests-limit: 10 - ignore: - - dependency-name: np - versions: - - 7.2.0 - - 7.3.0 - - 7.4.0 - - dependency-name: '@types/react' - versions: - - 17.0.0 - - 17.0.1 - - 17.0.2 - - 17.0.3 - - dependency-name: '@types/react-dom' - versions: - - 17.0.0 - - 17.0.1 - - 17.0.2 - - dependency-name: react - versions: - - 17.0.1 - - dependency-name: less - versions: - - 4.1.0 From ffb12f57926e8b381925dac589c14d94fe939465 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 16:08:10 +0800 Subject: [PATCH 20/32] docs: localize Chinese README labels --- README.zh-CN.md | 87 ++++++++++++++++++++++++------------------------- 1 file changed, 43 insertions(+), 44 deletions(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index df0b88a3..d4d37e45 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -15,16 +15,15 @@

English | 简体中文

- ## 特性 -| 范围 | 支持 | -| ----------- | ------------------------------------------------------ | -| Placement | 左、右、上、下四个方向的抽屉 | -| Interaction | 遮罩点击、键盘关闭和焦点管理 | -| Composition | 支持带 push 行为的嵌套抽屉 | -| Layout | 固定抽屉尺寸、可调整大小面板和自定义容器 | -| 运动 | 可配置打开和关闭动画 | +| 范围 | 支持 | +| ---- | ---------------------------------------- | +| 位置 | 左、右、上、下四个方向的抽屉 | +| 交互 | 遮罩点击、键盘关闭和焦点管理 | +| 组合 | 支持带 push 行为的嵌套抽屉 | +| 布局 | 固定抽屉尺寸、可调整大小面板和自定义容器 | +| 运动 | 可配置打开和关闭动画 | ## 安装 @@ -57,43 +56,43 @@ npm start ## API -| 参数 | 类型 | 默认值 | 说明 | -| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | -| afterOpenChange | `(open: boolean) => void` | - | 打开或关闭动画结束后调用。 | -| autoFocus | boolean | true | 抽屉打开后是否聚焦。 | -| children们 | ReactNode | - | 抽屉内容。 | -| className | string | - | 抽屉面板的className称。 | -| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义className称。 | -| defaultSize | number \| string | - | 非受控可调整大小抽屉的默认尺寸。 | -| destroyOnHidden | boolean | false | 抽屉完全关闭后将其卸下。 | -| drawerRender | `(node: ReactNode) => ReactNode` | - | 自定义渲染的抽屉面板内容。 | -| focusTrap | boolean | - | 是否将焦点限制在抽屉内。 | -| focusTriggerAfterClose | boolean | true | 关闭后是否将焦点返回到触发器。 | -| forceRender | boolean | false | 在抽屉打开之前对其进行渲染。 | -| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | 返回挂载节点。设置为 `false` 时内联渲染。 | -| 高度 | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 | -| keyboard | boolean | true | 按 Esc 是否关闭抽屉。 | -| mask | boolean | true | 是否显示遮罩。 | -| maskClassName | string | - | 掩码的className称。 | -| maskClosable | boolean | true | 单击蒙版是否会关闭抽屉。 | -| maskMotion | CSSMotionProps | - | 遮罩动画配置。 | -| maskStyle | CSSProperties | - | 遮罩样式。 | -| maxSize | number | - | 可调整大小的抽屉的最大尺寸。 | -| 运动 | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | 抽屉面板动画配置。 | -| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | 当抽屉请求关闭时调用。 | -| 打开 | boolean | false | 抽屉是否打开。 | -| panelRef | Ref | - | 抽屉面板参考。 | -| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | -| prefixCls | string | `rc-drawer` | className前缀。 | -| push | boolean \| `{ distance?: number \| string }` | - | 嵌套时推动父抽屉。 | -| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | 启用调整大小和可选的调整大小回调。 | -| rootClassName | string | - | 根包装器的className。 | -| rootStyle | CSSProperties | - | 根包装器的样式。 | +| 参数 | 类型 | 默认值 | 说明 | +| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------ | +| afterOpenChange | `(open: boolean) => void` | - | 打开或关闭动画结束后调用。 | +| autoFocus | boolean | true | 抽屉打开后是否聚焦。 | +| children们 | ReactNode | - | 抽屉内容。 | +| className | string | - | 抽屉面板的className称。 | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义className称。 | +| defaultSize | number \| string | - | 非受控可调整大小抽屉的默认尺寸。 | +| destroyOnHidden | boolean | false | 抽屉完全关闭后将其卸下。 | +| drawerRender | `(node: ReactNode) => ReactNode` | - | 自定义渲染的抽屉面板内容。 | +| focusTrap | boolean | - | 是否将焦点限制在抽屉内。 | +| focusTriggerAfterClose | boolean | true | 关闭后是否将焦点返回到触发器。 | +| forceRender | boolean | false | 在抽屉打开之前对其进行渲染。 | +| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | 返回挂载节点。设置为 `false` 时内联渲染。 | +| 高度 | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 | +| keyboard | boolean | true | 按 Esc 是否关闭抽屉。 | +| mask | boolean | true | 是否显示遮罩。 | +| maskClassName | string | - | 掩码的className称。 | +| maskClosable | boolean | true | 单击蒙版是否会关闭抽屉。 | +| maskMotion | CSSMotionProps | - | 遮罩动画配置。 | +| maskStyle | CSSProperties | - | 遮罩样式。 | +| maxSize | number | - | 可调整大小的抽屉的最大尺寸。 | +| 运动 | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | 抽屉面板动画配置。 | +| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | 当抽屉请求关闭时调用。 | +| 打开 | boolean | false | 抽屉是否打开。 | +| panelRef | Ref | - | 抽屉面板参考。 | +| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | +| prefixCls | string | `rc-drawer` | className前缀。 | +| push | boolean \| `{ distance?: number \| string }` | - | 嵌套时推动父抽屉。 | +| resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | 启用调整大小和可选的调整大小回调。 | +| rootClassName | string | - | 根包装器的className。 | +| rootStyle | CSSProperties | - | 根包装器的样式。 | | size | number \| string | `378` for left/right | 抽屉尺寸。控制左/右的宽度和顶部/底部放置的高度。 | -| 风格 | CSSProperties | - | 抽屉面板的样式。 | -| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | 内部抽屉元素的语义样式。 | -| 宽度 | number \| string | - | 已废弃。请使用 `size` 进行左侧或右侧放置。 | -| zIndex | number | - | 根包装器 z 索引。 | +| 风格 | CSSProperties | - | 抽屉面板的样式。 | +| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | 内部抽屉元素的语义样式。 | +| 宽度 | number \| string | - | 已废弃。请使用 `size` 进行左侧或右侧放置。 | +| zIndex | number | - | 根包装器 z 索引。 | 鼠标和键盘事件处理程序（例如 `onClick` 、 `onMouseEnter` 、 `onMouseLeave` 、 `onKeyDown` 和 `onKeyUp`）将传递到抽屉面板。 From 172a6a6470852e30274d43daa9605935b287470d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 16:24:13 +0800 Subject: [PATCH 21/32] docs: fix Chinese README API names --- README.zh-CN.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index d4d37e45..d18895a2 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -60,7 +60,7 @@ npm start | ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------ | | afterOpenChange | `(open: boolean) => void` | - | 打开或关闭动画结束后调用。 | | autoFocus | boolean | true | 抽屉打开后是否聚焦。 | -| children们 | ReactNode | - | 抽屉内容。 | +| children | ReactNode | - | 抽屉内容。 | | className | string | - | 抽屉面板的className称。 | | classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义className称。 | | defaultSize | number \| string | - | 非受控可调整大小抽屉的默认尺寸。 | @@ -70,7 +70,7 @@ npm start | focusTriggerAfterClose | boolean | true | 关闭后是否将焦点返回到触发器。 | | forceRender | boolean | false | 在抽屉打开之前对其进行渲染。 | | getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | 返回挂载节点。设置为 `false` 时内联渲染。 | -| 高度 | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 | +| height | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 | | keyboard | boolean | true | 按 Esc 是否关闭抽屉。 | | mask | boolean | true | 是否显示遮罩。 | | maskClassName | string | - | 掩码的className称。 | @@ -78,9 +78,9 @@ npm start | maskMotion | CSSMotionProps | - | 遮罩动画配置。 | | maskStyle | CSSProperties | - | 遮罩样式。 | | maxSize | number | - | 可调整大小的抽屉的最大尺寸。 | -| 运动 | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | 抽屉面板动画配置。 | +| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | 抽屉面板动画配置。 | | onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | 当抽屉请求关闭时调用。 | -| 打开 | boolean | false | 抽屉是否打开。 | +| open | boolean | false | 抽屉是否打开。 | | panelRef | Ref | - | 抽屉面板参考。 | | placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | | prefixCls | string | `rc-drawer` | className前缀。 | @@ -89,9 +89,9 @@ npm start | rootClassName | string | - | 根包装器的className。 | | rootStyle | CSSProperties | - | 根包装器的样式。 | | size | number \| string | `378` for left/right | 抽屉尺寸。控制左/右的宽度和顶部/底部放置的高度。 | -| 风格 | CSSProperties | - | 抽屉面板的样式。 | +| style | CSSProperties | - | 抽屉面板的样式。 | | styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | 内部抽屉元素的语义样式。 | -| 宽度 | number \| string | - | 已废弃。请使用 `size` 进行左侧或右侧放置。 | +| width | number \| string | - | 已废弃。请使用 `size` 进行左侧或右侧放置。 | | zIndex | number | - | 根包装器 z 索引。 | 鼠标和键盘事件处理程序（例如 `onClick` 、 `onMouseEnter` 、 `onMouseLeave` 、 `onKeyDown` 和 `onKeyUp`）将传递到抽屉面板。 From 62b93347b570891acbe106635e9f36066dd442b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 16:51:23 +0800 Subject: [PATCH 22/32] docs: localize Chinese README descriptions --- README.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index d18895a2..5364c3b4 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -82,7 +82,7 @@ npm start | onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | 当抽屉请求关闭时调用。 | | open | boolean | false | 抽屉是否打开。 | | panelRef | Ref | - | 抽屉面板参考。 | -| placement | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement. | +| placement | `left` \| `right` \| `top` \| `bottom` | `right` | 抽屉位置。 | | prefixCls | string | `rc-drawer` | className前缀。 | | push | boolean \| `{ distance?: number \| string }` | - | 嵌套时推动父抽屉。 | | resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | 启用调整大小和可选的调整大小回调。 | From c314ed65a2b8203f3016d24189dcf7f0b3f6a4bd Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 17:14:35 +0800 Subject: [PATCH 23/32] chore: refine preview workflow ignores --- .github/workflows/surge-preview.yml | 3 +++ .prettierignore | 14 ++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 .prettierignore diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index ef5a81d8..394f2b02 100644 --- a/.github/workflows/surge-preview.yml +++ b/.github/workflows/surge-preview.yml @@ -11,6 +11,9 @@ permissions: jobs: preview: runs-on: ubuntu-latest + concurrency: + group: surge-preview-${{ github.event.pull_request.number }} + cancel-in-progress: true steps: - uses: actions/checkout@v7 with: diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..c466d872 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +node_modules +coverage +docs-dist +dist +es +lib +.dumi/tmp +.dumi/tmp-production +.vercel +package-lock.json +pnpm-lock.yaml +yarn.lock +bun.lockb +*.log From e0fccf7e8d10b57281db6afea5925dc40e0d3878 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 17:35:39 +0800 Subject: [PATCH 24/32] docs: polish Chinese README wording --- README.zh-CN.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index 5364c3b4..fb9c682f 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -61,8 +61,8 @@ npm start | afterOpenChange | `(open: boolean) => void` | - | 打开或关闭动画结束后调用。 | | autoFocus | boolean | true | 抽屉打开后是否聚焦。 | | children | ReactNode | - | 抽屉内容。 | -| className | string | - | 抽屉面板的className称。 | -| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义className称。 | +| className | string | - | 抽屉面板的 className。 | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | 内部抽屉元素的语义 className。 | | defaultSize | number \| string | - | 非受控可调整大小抽屉的默认尺寸。 | | destroyOnHidden | boolean | false | 抽屉完全关闭后将其卸下。 | | drawerRender | `(node: ReactNode) => ReactNode` | - | 自定义渲染的抽屉面板内容。 | @@ -73,7 +73,7 @@ npm start | height | number \| string | - | 已废弃。顶部或底部位置请使用 `size`。 | | keyboard | boolean | true | 按 Esc 是否关闭抽屉。 | | mask | boolean | true | 是否显示遮罩。 | -| maskClassName | string | - | 掩码的className称。 | +| maskClassName | string | - | 掩码的 className。 | | maskClosable | boolean | true | 单击蒙版是否会关闭抽屉。 | | maskMotion | CSSMotionProps | - | 遮罩动画配置。 | | maskStyle | CSSProperties | - | 遮罩样式。 | @@ -83,10 +83,10 @@ npm start | open | boolean | false | 抽屉是否打开。 | | panelRef | Ref | - | 抽屉面板参考。 | | placement | `left` \| `right` \| `top` \| `bottom` | `right` | 抽屉位置。 | -| prefixCls | string | `rc-drawer` | className前缀。 | +| prefixCls | string | `rc-drawer` | className 前缀。 | | push | boolean \| `{ distance?: number \| string }` | - | 嵌套时推动父抽屉。 | | resizable | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false | 启用调整大小和可选的调整大小回调。 | -| rootClassName | string | - | 根包装器的className。 | +| rootClassName | string | - | 根包装器的 className。 | | rootStyle | CSSProperties | - | 根包装器的样式。 | | size | number \| string | `378` for left/right | 抽屉尺寸。控制左/右的宽度和顶部/底部放置的高度。 | | style | CSSProperties | - | 抽屉面板的样式。 | From fdc1d29e55acef1e99ffd0b3f73d64dcac4409bc Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 19:13:11 +0800 Subject: [PATCH 25/32] chore: add father config --- .fatherrc.ts | 5 +++++ tsconfig.json | 18 ++++-------------- 2 files changed, 9 insertions(+), 14 deletions(-) create mode 100644 .fatherrc.ts diff --git a/.fatherrc.ts b/.fatherrc.ts new file mode 100644 index 00000000..96268ae1 --- /dev/null +++ b/.fatherrc.ts @@ -0,0 +1,5 @@ +import { defineConfig } from 'father'; + +export default defineConfig({ + plugins: ['@rc-component/father-plugin'], +}); diff --git a/tsconfig.json b/tsconfig.json index eeeb0aec..ae2a1570 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,21 +8,11 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": [ - "src/*" - ], - "@@/*": [ - "src/.umi/*" - ], - "@rc-component/drawer": [ - "src/index.ts" - ] + "@/*": ["src/*"], + "@@/*": ["src/.umi/*"], + "@rc-component/drawer": ["src/index.ts"] }, "ignoreDeprecations": "5.0" }, - "include": [ - ".dumirc.ts", - "**/*.ts", - "**/*.tsx" - ] + "include": [".dumirc.ts", ".fatherrc.ts", "**/*.ts", "**/*.tsx"] } From f0af5ff49a9bc935f60d3b8612ce17ee4c7787ab Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 19:37:59 +0800 Subject: [PATCH 26/32] docs: document dumi dev server port --- README.md | 3 ++- README.zh-CN.md | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 46161ab9..d0fa7814 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,6 @@

English | 简体中文

- ## Highlights | Area | Support | @@ -104,6 +103,8 @@ npm install npm start ``` +The dumi site runs at `http://localhost:8000` by default. + Common commands: ```bash diff --git a/README.zh-CN.md b/README.zh-CN.md index fb9c682f..e57314bd 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -103,6 +103,8 @@ npm install npm start ``` +dumi 站点默认运行在 `http://localhost:8000`。 + Common commands: ```bash From 8390d4b83af6f960bcce3729e5d062c20769f3ed Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 19:56:59 +0800 Subject: [PATCH 27/32] chore: standardize husky configuration --- .husky/pre-commit | 2 +- package.json | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index d0a77842..2312dc58 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1 +1 @@ -npx lint-staged \ No newline at end of file +npx lint-staged diff --git a/package.json b/package.json index a2dbb89d..416d313c 100644 --- a/package.json +++ b/package.json @@ -83,9 +83,7 @@ "react-dom": ">=18.0.0" }, "lint-staged": { - "*.{js,jsx,ts,tsx}": "eslint --fix", - "*.{css,less}": "stylelint --fix", - "*.{js,jsx,ts,tsx,json,less,css,md}": "prettier --write" + "*": "prettier --write --ignore-unknown" }, "publishConfig": { "access": "public" From 991882424aa56aada411b2d507dc5a57d7ea27c9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 20:31:44 +0800 Subject: [PATCH 28/32] chore: standardize package type entry --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 416d313c..691b715b 100644 --- a/package.json +++ b/package.json @@ -87,5 +87,6 @@ }, "publishConfig": { "access": "public" - } + }, + "types": "./es/index.d.ts" } From bb216c8761af11ff99bc692ce61fb357b036aeef Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 20:59:55 +0800 Subject: [PATCH 29/32] docs: normalize readme badges --- README.md | 2 +- README.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d0fa7814..75e44649 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ NPM version npm downloads build status - codecov + Codecov bundle size dumi

diff --git a/README.zh-CN.md b/README.zh-CN.md index e57314bd..38b105ed 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -7,7 +7,7 @@ NPM version npm downloads build status - codecov + Codecov bundle size dumi

From 84b695998455e46911181589ed9f9a0e4e4b948d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 21:19:21 +0800 Subject: [PATCH 30/32] ci: limit reusable workflow secrets --- .github/workflows/react-component-ci.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 9503b960..36dacae4 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -5,4 +5,5 @@ permissions: jobs: test: uses: react-component/rc-test/.github/workflows/test-utoo.yml@main - secrets: inherit + secrets: + CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} From 59b87c9730d110ab82adf774e6c9ac19ab365e61 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Jun 2026 21:32:07 +0800 Subject: [PATCH 31/32] ci: restore reusable workflow compatibility --- .github/workflows/react-component-ci.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 36dacae4..9503b960 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -5,5 +5,4 @@ permissions: jobs: test: uses: react-component/rc-test/.github/workflows/test-utoo.yml@main - secrets: - CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} + secrets: inherit From 796415d920839149df369cb5382a6cbcfce74e71 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Jun 2026 14:24:38 +0800 Subject: [PATCH 32/32] chore: limit reusable workflow secrets --- .github/workflows/react-component-ci.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 9503b960..36dacae4 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -5,4 +5,5 @@ permissions: jobs: test: uses: react-component/rc-test/.github/workflows/test-utoo.yml@main - secrets: inherit + secrets: + CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}