docs: fix import wrap style (#261)

ant-design · Nov 27, 2024 · c0bf866 · c0bf866
1 parent 1731062
commit c0bf866
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx
@@ -1,6 +1,6 @@
 import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons';
 import type { GetProp } from 'antd';
-import { Descriptions, Space, Tooltip, Typography, theme } from 'antd';
+import { Descriptions, Flex, Tooltip, Typography, theme } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import React from 'react';
@@ -50,6 +50,7 @@ const useStyle = createStyles(({ token }) => ({
     transition: all ${token.motionDurationSlow} !important;
     font-family: ${token.codeFamily};
     color: ${token.colorTextSecondary} !important;
+    white-space: nowrap;
     &:hover {
       background: ${token.controlItemBgHover};
     }
@@ -166,7 +167,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
                   title={copied ? locale.copied : locale.copy}
                   onOpenChange={onOpenChange}
                 >
-                  <Typography.Text className={styles.code} onClick={onCopy}>
+                  <Typography.Text className={styles.code} ellipsis onClick={onCopy}>
                     {importList}
                   </Typography.Text>
                 </Tooltip>
@@ -185,7 +186,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           filename && {
             label: locale.docs,
             children: (
-              <Space size="middle">
+              <Flex gap={16}>
                 <Typography.Link
                   className={styles.code}
                   href={`${branchUrl}${filename}`}
@@ -200,7 +201,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
                     <span>{locale.changelog}</span>
                   </Typography.Link>
                 </ComponentChangelog>
-              </Space>
+              </Flex>
             ),
           },
           isVersionNumber(version) && {

diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
@@ -1,4 +1,4 @@
-import { Col, Flex, Space, Typography } from 'antd';
+import { Col, Flex, Typography } from 'antd';
 import classNames from 'classnames';
 import { FormattedMessage, useRouteMeta } from 'dumi';
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
@@ -54,22 +54,20 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
         </InViewSuspense>
         <article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
           {meta.frontmatter?.title ? (
-            <Flex justify="space-between">
-              <Typography.Title style={{ fontSize: 32, position: 'relative' }}>
-                <Space>
-                  <span>{meta.frontmatter?.title}</span>
-                  <span>{meta.frontmatter?.subtitle}</span>
-                  {!pathname.startsWith('/components/overview') && (
-                    <InViewSuspense fallback={null}>
-                      <EditButton
-                        title={<FormattedMessage id="app.content.edit-page" />}
-                        filename={meta.frontmatter.filename}
-                      />
-                    </InViewSuspense>
-                  )}
-                </Space>
-              </Typography.Title>
-            </Flex>
+            <Typography.Title style={{ fontSize: 32, position: 'relative' }}>
+              <Flex gap={8} wrap>
+                <span>{meta.frontmatter?.title}</span>
+                <span>{meta.frontmatter?.subtitle}</span>
+                {!pathname.startsWith('/components/overview') && (
+                  <InViewSuspense fallback={null}>
+                    <EditButton
+                      title={<FormattedMessage id="app.content.edit-page" />}
+                      filename={meta.frontmatter.filename}
+                    />
+                  </InViewSuspense>
+                )}
+              </Flex>
+            </Typography.Title>
           ) : null}
           <InViewSuspense fallback={null}>
             <DocMeta />