docs: support for opening demos in a new window (#38556)

.dumi/theme/builtins/Previewer/index.jsx

@@ -14,6 +14,7 @@ import CodePenIcon from '../../common/CodePenIcon';
 import CodePreview from '../../common/CodePreview';
 import CodeSandboxIcon from '../../common/CodeSandboxIcon';
 import RiddleIcon from '../../common/RiddleIcon';
+import ExternalLinkIcon from '../../common/ExternalLinkIcon';
 import fromDumiProps from './fromDumiProps';
 
 const { ErrorBoundary } = Alert;
@@ -456,6 +457,12 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 })}
               </Tooltip>
             </CopyToClipboard>
+            <Tooltip title={<FormattedMessage id="app.demo.separate" />}>
+              <a className="code-box-code-action" target="_blank" rel="noreferer" href={src}>
+                <ExternalLinkIcon className="code-box-separate" />
+              </a>
+            </Tooltip>
+
             <Tooltip
               title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
             >

.dumi/theme/common/ExternalLinkIcon.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Icon from '@ant-design/icons';
+
+const SVGIcon = () => (
+  <svg viewBox="0 0 1024 1024" width="1em" height="1em">
+    <path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" />
+    <path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" />
+  </svg>
+);
+
+const ExternalLinkIcon = props => <Icon component={SVGIcon} {...props} />;
+
+export default ExternalLinkIcon;

.dumi/theme/locales/en-US.json

@@ -34,6 +34,7 @@
   "app.demo.codesandbox": "Open in CodeSandbox",
   "app.demo.stackblitz": "Open in Stackblitz",
   "app.demo.riddle": "Open in Riddle",
+  "app.demo.separate": "Open in a new window",
   "app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",
   "app.home.pr-welcome": "💡 It is an alpha version and still in progress. Contribution from community is welcome!",
   "app.home.recommend": "Recommended",
@@ -135,4 +136,4 @@
   "app.components.overview.search": "Search in components",
   "app.implementation.community": "community",
   "app.implementation.official": "official"
-}
+}

.dumi/theme/locales/zh-CN.json

@@ -34,6 +34,7 @@
   "app.demo.codesandbox": "在 CodeSandbox 中打开",
   "app.demo.stackblitz": "在 Stackblitz 中打开",
   "app.demo.riddle": "在 Riddle 中打开",
+  "app.demo.separate": "在新窗口打开",
   "app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",
   "app.home.pr-welcome": "💡 当前为 alpha 版本，仍在开发中。欢迎社区一起共建，让 Ant Design 变得更好！",
   "app.home.recommend": "精彩推荐",
@@ -134,4 +135,4 @@
   "app.components.overview.search": "搜索组件",
   "app.implementation.community": "社区实现",
   "app.implementation.official": "官方"
-}
+}