From c5114b3f87a850bca42dae0e4688f9f7bff15202 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 22 Jun 2024 16:51:41 +0800
Subject: [PATCH] docs: fix change-log button position (#49552)

* docs: fix changelog button position

* fix lint
---
 .../ComponentChangelog/ComponentChangelog.tsx | 15 ++-------
 .dumi/theme/slots/Content/index.tsx           | 32 ++++++++++---------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
index 4a091ae3ca..0cbd4af607 100644
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -28,16 +28,6 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }
 
 const useStyle = createStyles(({ token, css }) => ({
-  history: css`
-    position: absolute;
-    top: 0;
-    inset-inline-end: ${token.marginXS}px;
-  `,
-
-  li: css`
-    // white-space: pre;
-  `,
-
   ref: css`
     margin-inline-start: ${token.marginXS}px;
   `,
@@ -75,7 +65,7 @@ export interface ComponentChangelogProps {
 
 const locales = {
   cn: {
-    full: '完整更新日志',
+    full: '查看完整日志',
     changelog: '更新日志',
     loading: '加载中...',
     empty: '暂无更新',
@@ -213,7 +203,7 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
             </Typography.Title>
             <ul>
               {changelogList.map<React.ReactNode>((info, index) => (
-                <li key={index} className={styles.li}>
+                <li key={index}>
                   <ParseChangelog {...info} styles={styles} />
                 </li>
               ))}
@@ -234,7 +224,6 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
   return (
     <>
       <Button
-        className={styles.history}
         icon={<HistoryOutlined />}
         onClick={() => {
           setShow(true);
diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
index c131e848da..01bd414e45 100644
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { Col, Flex, Typography } from 'antd';
+import { Space, Col, Flex, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useRouteMeta } from 'dumi';
@@ -70,25 +70,27 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
         </InViewSuspense>
         <article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
           {meta.frontmatter?.title ? (
-            <Typography.Title style={{ fontSize: 30, position: 'relative' }}>
-              <Flex gap="small">
-                <div>{meta.frontmatter?.title}</div>
-                <div>{meta.frontmatter?.subtitle}</div>
-                {!pathname.startsWith('/components/overview') && (
-                  <InViewSuspense fallback={null}>
-                    <EditButton
-                      title={<FormattedMessage id="app.content.edit-page" />}
-                      filename={meta.frontmatter.filename}
-                    />
-                  </InViewSuspense>
-                )}
-              </Flex>
+            <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>
               {pathname.startsWith('/components/') && (
                 <InViewSuspense fallback={null}>
                   <ComponentChangelog pathname={pathname} />
                 </InViewSuspense>
               )}
-            </Typography.Title>
+            </Flex>
           ) : null}
           <InViewSuspense fallback={null}>
             <DocMeta />