docs: fix change-log button position (#49552)

* docs: fix changelog button position

* fix lint
This commit is contained in:
afc163 2024-06-22 16:51:41 +08:00 committed by GitHub
parent 7e74c79bdd
commit c5114b3f87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 28 deletions

View File

@ -28,16 +28,6 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
} }
const useStyle = createStyles(({ token, css }) => ({ const useStyle = createStyles(({ token, css }) => ({
history: css`
position: absolute;
top: 0;
inset-inline-end: ${token.marginXS}px;
`,
li: css`
// white-space: pre;
`,
ref: css` ref: css`
margin-inline-start: ${token.marginXS}px; margin-inline-start: ${token.marginXS}px;
`, `,
@ -75,7 +65,7 @@ export interface ComponentChangelogProps {
const locales = { const locales = {
cn: { cn: {
full: '完整更新日志', full: '查看完整日志',
changelog: '更新日志', changelog: '更新日志',
loading: '加载中...', loading: '加载中...',
empty: '暂无更新', empty: '暂无更新',
@ -213,7 +203,7 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
</Typography.Title> </Typography.Title>
<ul> <ul>
{changelogList.map<React.ReactNode>((info, index) => ( {changelogList.map<React.ReactNode>((info, index) => (
<li key={index} className={styles.li}> <li key={index}>
<ParseChangelog {...info} styles={styles} /> <ParseChangelog {...info} styles={styles} />
</li> </li>
))} ))}
@ -234,7 +224,6 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
return ( return (
<> <>
<Button <Button
className={styles.history}
icon={<HistoryOutlined />} icon={<HistoryOutlined />}
onClick={() => { onClick={() => {
setShow(true); setShow(true);

View File

@ -1,5 +1,5 @@
import React, { useContext, useLayoutEffect, useMemo, useState } from 'react'; 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 { createStyles } from 'antd-style';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormattedMessage, useRouteMeta } from 'dumi'; import { FormattedMessage, useRouteMeta } from 'dumi';
@ -70,25 +70,27 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
</InViewSuspense> </InViewSuspense>
<article className={classNames(styles.articleWrapper, { rtl: isRTL })}> <article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
{meta.frontmatter?.title ? ( {meta.frontmatter?.title ? (
<Typography.Title style={{ fontSize: 30, position: 'relative' }}> <Flex justify="space-between">
<Flex gap="small"> <Typography.Title style={{ fontSize: 32, position: 'relative' }}>
<div>{meta.frontmatter?.title}</div> <Space>
<div>{meta.frontmatter?.subtitle}</div> <span>{meta.frontmatter?.title}</span>
{!pathname.startsWith('/components/overview') && ( <span>{meta.frontmatter?.subtitle}</span>
<InViewSuspense fallback={null}> {!pathname.startsWith('/components/overview') && (
<EditButton <InViewSuspense fallback={null}>
title={<FormattedMessage id="app.content.edit-page" />} <EditButton
filename={meta.frontmatter.filename} title={<FormattedMessage id="app.content.edit-page" />}
/> filename={meta.frontmatter.filename}
</InViewSuspense> />
)} </InViewSuspense>
</Flex> )}
</Space>
</Typography.Title>
{pathname.startsWith('/components/') && ( {pathname.startsWith('/components/') && (
<InViewSuspense fallback={null}> <InViewSuspense fallback={null}>
<ComponentChangelog pathname={pathname} /> <ComponentChangelog pathname={pathname} />
</InViewSuspense> </InViewSuspense>
)} )}
</Typography.Title> </Flex>
) : null} ) : null}
<InViewSuspense fallback={null}> <InViewSuspense fallback={null}>
<DocMeta /> <DocMeta />