Skip to content

Commit c522024

Browse files
ClaudeClaude
authored
fix: add fallback for copy settings button
- Added patch-package to handle library modifications - Fixed SettingDrawer copy button with fallback to document.execCommand - Added proper error messages when copy fails - Resolves issue #11693 where copy button appeared broken Agent-Logs-Url: https://github.com/ant-design/ant-design-pro/sessions/5f45f93a-d10b-46ce-b42c-07beb886c251
1 parent 2849000 commit c522024

3 files changed

Lines changed: 114 additions & 1 deletion

File tree

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"dev": "npm run start:dev",
1212
"gh-pages": "gh-pages -d dist",
1313
"i18n-remove": "max i18n-remove --locale=zh-CN --write",
14-
"postinstall": "max setup",
14+
"postinstall": "max setup && patch-package",
1515
"jest": "jest",
1616
"lint": "npm run biome:lint && npm run tsc",
1717
"lint-staged": "lint-staged",
@@ -79,6 +79,8 @@
7979
"jest-environment-jsdom": "^30.0.5",
8080
"lint-staged": "^16.1.2",
8181
"mockjs": "^1.1.0",
82+
"patch-package": "^8.0.1",
83+
"postinstall-postinstall": "^2.1.0",
8284
"tailwindcss": "^4.0.0",
8385
"ts-node": "^10.9.2",
8486
"typescript": "^6.0.3",

‎patches/@ant-design+pro-components+3.1.12-0.patch‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
diff --git a/node_modules/@ant-design/pro-components/es/layout/components/SettingDrawer/index.js b/node_modules/@ant-design/pro-components/es/layout/components/SettingDrawer/index.js
2+
index 179a389..9d455e2 100644
3+
--- a/node_modules/@ant-design/pro-components/es/layout/components/SettingDrawer/index.js
4+
+++ b/node_modules/@ant-design/pro-components/es/layout/components/SettingDrawer/index.js
5+
@@ -486,7 +486,33 @@ export const SettingDrawer = props => {
6+
id: 'app.setting.copyinfo'
7+
}));
8+
} catch (error) {
9+
- // console.log(error);
10+
+ // Fallback to document.execCommand for older browsers or non-secure contexts
11+
+ try {
12+
+ const textArea = document.createElement('textarea');
13+
+ textArea.value = genCopySettingJson(settingState);
14+
+ textArea.style.position = 'fixed';
15+
+ textArea.style.top = '0';
16+
+ textArea.style.left = '0';
17+
+ textArea.style.opacity = '0';
18+
+ document.body.appendChild(textArea);
19+
+ textArea.focus();
20+
+ textArea.select();
21+
+ const successful = document.execCommand('copy');
22+
+ document.body.removeChild(textArea);
23+
+ if (successful) {
24+
+ message.success(formatMessage({
25+
+ id: 'app.setting.copyinfo'
26+
+ }));
27+
+ } else {
28+
+ message.error(formatMessage({
29+
+ id: 'app.setting.copyinfo'
30+
+ }).replace('拷贝成功', '拷贝失败').replace('copy success', 'copy failed').replace('拷貝成功', '拷貝失敗'));
31+
+ }
32+
+ } catch (fallbackError) {
33+
+ message.error(formatMessage({
34+
+ id: 'app.setting.copyinfo'
35+
+ }).replace('拷贝成功', '拷贝失败').replace('copy success', 'copy failed').replace('拷貝成功', '拷貝失敗'));
36+
+ }
37+
}
38+
},
39+
children: formatMessage({
40+
diff --git a/node_modules/@ant-design/pro-components/lib/layout/components/SettingDrawer/index.js b/node_modules/@ant-design/pro-components/lib/layout/components/SettingDrawer/index.js
41+
index 2ceb1d7..ee33af1 100644
42+
--- a/node_modules/@ant-design/pro-components/lib/layout/components/SettingDrawer/index.js
43+
+++ b/node_modules/@ant-design/pro-components/lib/layout/components/SettingDrawer/index.js
44+
@@ -492,7 +492,33 @@ const SettingDrawer = props => {
45+
id: 'app.setting.copyinfo'
46+
}));
47+
} catch (error) {
48+
- // console.log(error);
49+
+ // Fallback to document.execCommand for older browsers or non-secure contexts
50+
+ try {
51+
+ const textArea = document.createElement('textarea');
52+
+ textArea.value = genCopySettingJson(settingState);
53+
+ textArea.style.position = 'fixed';
54+
+ textArea.style.top = '0';
55+
+ textArea.style.left = '0';
56+
+ textArea.style.opacity = '0';
57+
+ document.body.appendChild(textArea);
58+
+ textArea.focus();
59+
+ textArea.select();
60+
+ const successful = document.execCommand('copy');
61+
+ document.body.removeChild(textArea);
62+
+ if (successful) {
63+
+ _antd.message.success(formatMessage({
64+
+ id: 'app.setting.copyinfo'
65+
+ }));
66+
+ } else {
67+
+ _antd.message.error(formatMessage({
68+
+ id: 'app.setting.copyinfo'
69+
+ }).replace('拷贝成功', '拷贝失败').replace('copy success', 'copy failed').replace('拷貝成功', '拷貝失敗'));
70+
+ }
71+
+ } catch (fallbackError) {
72+
+ _antd.message.error(formatMessage({
73+
+ id: 'app.setting.copyinfo'
74+
+ }).replace('拷贝成功', '拷贝失败').replace('copy success', 'copy failed').replace('拷貝成功', '拷貝失敗'));
75+
+ }
76+
}
77+
},
78+
children: formatMessage({

‎patches/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Patches
2+
3+
This directory contains patches applied to node_modules using `patch-package`.
4+
5+
## @ant-design/pro-components@3.1.12-0
6+
7+
### Issue
8+
The "拷贝设置" (Copy Settings) button in the `SettingDrawer` component was not working properly. When the modern `navigator.clipboard.writeText()` API failed (due to lack of secure context, browser compatibility, or permissions), the error was silently caught without any feedback to the user, making it appear as if the button was broken.
9+
10+
### Fix
11+
Added a fallback mechanism that:
12+
1. First tries to use the modern `navigator.clipboard.writeText()` API
13+
2. If that fails, falls back to the older `document.execCommand('copy')` method
14+
3. Shows an error message to the user if both methods fail
15+
16+
This ensures the copy functionality works in more environments and provides proper user feedback when it doesn't work.
17+
18+
### Files Modified
19+
- `es/layout/components/SettingDrawer/index.js`
20+
- `lib/layout/components/SettingDrawer/index.js`
21+
22+
### How to Apply
23+
The patches are automatically applied during `npm install` via the `postinstall` script in `package.json`.
24+
25+
To manually apply patches:
26+
```bash
27+
npx patch-package
28+
```
29+
30+
To regenerate patches after making changes to node_modules:
31+
```bash
32+
npx patch-package @ant-design/pro-components
33+
```

0 commit comments

Comments
 (0)