docs: add design url to component meta (#53379)

* docs: add design url to component meta

* update

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons';
+import { EditOutlined, GithubOutlined, HistoryOutlined, CompassOutlined } from '@ant-design/icons';
 import type { GetProp } from 'antd';
 import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import Link from '../../common/Link';
 
 import useLocale from '../../../hooks/useLocale';
 import ComponentChangelog from '../../common/ComponentChangelog';
@@ -18,6 +19,7 @@ const locales = {
     docs: '文档',
     edit: '编辑此页',
     changelog: '更新日志',
+    design: '设计指南',
     version: '版本',
   },
   en: {
@@ -28,6 +30,7 @@ const locales = {
     docs: 'Docs',
     edit: 'Edit this page',
     changelog: 'Changelog',
+    design: 'Design',
     version: 'Version',
   },
 };
@@ -57,24 +60,8 @@ const useStyle = createStyles(({ token }) => ({
       text-decoration: underline !important;
     }
   `,
-  import: css`
-    color: ${token.magenta8};
-  `,
-  component: css`
-    color: ${token.colorText};
-  `,
-  from: css`
-    color: ${token.magenta8};
-    margin-inline-end: 0.5em;
-  `,
-  antd: css`
-    color: ${token.green8};
-  `,
-  semicolon: css`
-    color: ${token.colorText};
-  `,
   icon: css`
-    margin-inline-end: ${token.marginXXS}px;
+    margin-inline-end: 3px;
   `,
 }));
 
@@ -83,10 +70,11 @@ export interface ComponentMetaProps {
   source: string | true;
   filename?: string;
   version?: string;
+  designUrl?: string;
 }
 
 const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
-  const { component, source, filename, version } = props;
+  const { component, source, filename, version, designUrl } = props;
   const { token } = theme.useToken();
   const [locale, lang] = useLocale(locales);
   const isZhCN = lang === 'cn';
@@ -130,23 +118,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
   };
 
   // ======================== Render ========================
-  const importList = [
-    <span key="import" className={styles.import}>
-      import
-    </span>,
-    <span key="component" className={styles.component}>{`{ ${transformComponentName(
-      component,
-    )} }`}</span>,
-    <span key="from" className={styles.from}>
-      from
-    </span>,
-    <span key="antd" className={styles.antd}>
-      {`"antd"`}
-    </span>,
-    <span key="semicolon" className={styles.semicolon}>
-      ;
-    </span>,
-  ];
+  const importList = `import { ${transformComponentName(component)} } from "antd";`;
 
   return (
     <Descriptions
@@ -187,7 +159,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           filename && {
             label: locale.docs,
             children: (
-              <Flex justify="flex-start" align="center" gap="middle">
+              <Flex justify="flex-start" align="center" gap="small">
                 <Typography.Link
                   className={styles.code}
                   href={`${branchUrl}${filename}`}
@@ -196,6 +168,12 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
                   <EditOutlined className={styles.icon} />
                   <span>{locale.edit}</span>
                 </Typography.Link>
+                {designUrl && (
+                  <Link className={styles.code} to={designUrl}>
+                    <CompassOutlined className={styles.icon} />
+                    <span>{locale.design}</span>
+                  </Link>
+                )}
                 <ComponentChangelog>
                   <Typography.Link className={styles.code}>
                     <HistoryOutlined className={styles.icon} />

.dumi/theme/common/ComponentChangelog/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ComponentChangelog from './ComponentChangelog';
 
 const ChangeLog: React.FC<Readonly<React.PropsWithChildren>> = ({ children }) => (
-  <React.Suspense fallback={null}>
+  <React.Suspense fallback="...">
     <ComponentChangelog>{children}</ComponentChangelog>
   </React.Suspense>
 );

.dumi/theme/common/styles/HeadingAnchor.tsx

@@ -34,6 +34,8 @@ export default () => {
             > .icon-link::before {
               font-size: ${token.fontSizeXL}px;
               content: '#';
+              color: ${token.colorTextSecondary};
+              font-family: ${token.codeFamily};
             }
           }
 

.dumi/theme/slots/Content/index.tsx

@@ -89,6 +89,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                 component={meta.frontmatter.title}
                 filename={meta.frontmatter.filename}
                 version={meta.frontmatter.tag}
+                designUrl={meta.frontmatter.designUrl}
               />
             )}
           <div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>

components/button/index.en-US.md

@@ -4,6 +4,7 @@ title: Button
 description: To trigger an operation.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
+designUrl: /docs/spec/buttons
 demo:
   cols: 2
 group:
@@ -17,18 +18,18 @@ A button means an operation (or a series of operations). Clicking a button will
 
 In Ant Design we provide 5 types of button.
 
-- Primary button: used for the main action, there can be at most one primary button in a section.
-- Default button: used for a series of actions without priority.
-- Dashed button: commonly used for adding more actions.
-- Text button: used for the most secondary action.
-- Link button: used for external links.
+- 🔵 Primary button: used for the main action, there can be at most one primary button in a section.
+- ⚪️ Default button: used for a series of actions without priority.
+- 🫥 Dashed button: commonly used for adding more actions.
+- 🔤 Text button: used for the most secondary action.
+- 🔗 Link button: used for external links.
 
 And 4 other properties additionally.
 
-- `danger`: used for actions of risk, like deletion or authorization.
-- `ghost`: used in situations with complex background, home pages usually.
-- `disabled`: used when actions are not available.
-- `loading`: adds a loading spinner in button, avoids multiple submits too.
+- 🔴 `danger`: used for actions of risk, like deletion or authorization.
+- 👻 `ghost`: used in situations with complex background, home pages usually.
+- 🚫 `disabled`: used when actions are not available.
+- 🔃 `loading`: adds a loading spinner in button, avoids multiple submits too.
 
 ## Examples
 

components/button/index.zh-CN.md

@@ -5,6 +5,7 @@ subtitle: 按钮
 description: 按钮用于开始一个即时操作。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
+designUrl: /docs/spec/buttons-cn
 demo:
   cols: 2
 group:
@@ -18,20 +19,18 @@ group:
 
 在 Ant Design 中我们提供了五种按钮。
 
-- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
-- 默认按钮：用于没有主次之分的一组行动点。
-- 虚线按钮：常用于添加操作。
-- 文本按钮：用于最次级的行动点。
-- 链接按钮：一般用于链接，即导航至某位置。
+- 🔵 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
+- ⚪️ 默认按钮：用于没有主次之分的一组行动点。
+- 🫥 虚线按钮：常用于添加操作。
+- 🔤 文本按钮：用于最次级的行动点。
+- 🔗 链接按钮：一般用于链接，即导航至某位置。
 
 以及四种状态属性与上面配合使用。
 
-- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
-- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
-- 禁用：行动点不可用的时候，一般需要文案解释。
-- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
-
-[完整设计指南](https://ant.design/docs/spec/buttons-cn)
+- ⚠️ 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
+- 👻 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
+- 🚫 禁用：行动点不可用的时候，一般需要文案解释。
+- 🔃 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
 
 ## 代码演示 {#examples}