mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Merge pull request #48293 from ant-design/master
chore: merge master into feature
This commit is contained in:
lijianan
GitHub
commit
bb74803437
142
.dumi/theme/builtins/InstallDependencies/bun.tsx
Normal file
142
.dumi/theme/builtins/InstallDependencies/bun.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
import React from 'react';
|
||||
import { createStyles, css } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface IconProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const useStyle = createStyles(() => ({
|
||||
iconWrap: css`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
vertical-align: -0.125em;
|
||||
`,
|
||||
}));
|
||||
|
||||
const BunIcon: React.FC<IconProps> = (props) => {
|
||||
const { className, style } = props;
|
||||
const { styles } = useStyle();
|
||||
return (
|
||||
<span className={classNames(styles.iconWrap, className)} style={style}>
|
||||
<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70" width="1em" height="1em">
|
||||
<title>Bun Logo</title>
|
||||
<path
|
||||
id="Shadow"
|
||||
d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"
|
||||
/>
|
||||
<g id="Body">
|
||||
<path
|
||||
id="Background"
|
||||
d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z"
|
||||
style={{
|
||||
fill: '#fbf0df',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Bottom_Shadow"
|
||||
data-name="Bottom Shadow"
|
||||
d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z"
|
||||
style={{
|
||||
fill: '#f6dece',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Light_Shine"
|
||||
data-name="Light Shine"
|
||||
d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z"
|
||||
style={{
|
||||
fill: '#fffefc',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Top"
|
||||
d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z"
|
||||
style={{
|
||||
fill: '#ccbea7',
|
||||
fillRule: 'evenodd',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Outline"
|
||||
d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"
|
||||
/>
|
||||
</g>
|
||||
<g id="Mouth">
|
||||
<g id="Background-2" data-name="Background">
|
||||
<path
|
||||
d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z"
|
||||
style={{
|
||||
fill: '#b71422',
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
<g id="Tongue">
|
||||
<path
|
||||
id="Background-3"
|
||||
data-name="Background"
|
||||
d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z"
|
||||
style={{
|
||||
fill: '#ff6164',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Outline-2"
|
||||
data-name="Outline"
|
||||
d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
id="Outline-3"
|
||||
data-name="Outline"
|
||||
d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"
|
||||
/>
|
||||
</g>
|
||||
<g id="Face">
|
||||
<ellipse
|
||||
id="Right_Blush"
|
||||
data-name="Right Blush"
|
||||
cx="53.22"
|
||||
cy="40.18"
|
||||
rx="5.85"
|
||||
ry="3.44"
|
||||
style={{
|
||||
fill: '#febbd0',
|
||||
}}
|
||||
/>
|
||||
<ellipse
|
||||
id="Left_Bluch"
|
||||
data-name="Left Bluch"
|
||||
cx="22.95"
|
||||
cy="40.18"
|
||||
rx="5.85"
|
||||
ry="3.44"
|
||||
style={{
|
||||
fill: '#febbd0',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Eyes"
|
||||
d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z"
|
||||
style={{
|
||||
fillRule: 'evenodd',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Iris"
|
||||
d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z"
|
||||
style={{
|
||||
fill: '#fff',
|
||||
fillRule: 'evenodd',
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default BunIcon;
|
||||
@ -6,15 +6,17 @@ import type { Tab } from 'rc-tabs/lib/interface';
|
||||
import NpmLogo from './npm';
|
||||
import PnpmLogo from './pnpm';
|
||||
import YarnLogo from './yarn';
|
||||
import BunLogo from './bun';
|
||||
|
||||
interface InstallProps {
|
||||
npm?: string;
|
||||
yarn?: string;
|
||||
pnpm?: string;
|
||||
bun?: string;
|
||||
}
|
||||
|
||||
const InstallDependencies: React.FC<InstallProps> = (props) => {
|
||||
const { npm, yarn, pnpm } = props;
|
||||
const { npm, yarn, pnpm, bun } = props;
|
||||
const items: Tab[] = [
|
||||
{
|
||||
key: 'npm',
|
||||
@ -34,6 +36,12 @@ const InstallDependencies: React.FC<InstallProps> = (props) => {
|
||||
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
|
||||
icon: <PnpmLogo />,
|
||||
},
|
||||
{
|
||||
key: 'bun',
|
||||
label: 'Bun',
|
||||
children: bun ? <SourceCode lang="bash">{bun}</SourceCode> : null,
|
||||
icon: <BunLogo />,
|
||||
},
|
||||
].filter((item) => item.children);
|
||||
|
||||
return (
|
||||
|
||||
@ -1,13 +1,32 @@
|
||||
/* eslint-disable global-require */
|
||||
import React, { useMemo } from 'react';
|
||||
import { HistoryOutlined } from '@ant-design/icons';
|
||||
import { Button, Drawer, Timeline, Typography, Grid } from 'antd';
|
||||
import React from 'react';
|
||||
import { BugOutlined, HistoryOutlined } from '@ant-design/icons';
|
||||
import { Button, Drawer, Grid, Popover, Timeline, Typography } from 'antd';
|
||||
import type { TimelineItemProps } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import semver from 'semver';
|
||||
|
||||
import deprecatedVersions from '../../../../BUG_VERSIONS.json';
|
||||
import useFetch from '../../../hooks/useFetch';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import Link from '../Link';
|
||||
|
||||
interface MatchDeprecatedResult {
|
||||
match?: string;
|
||||
reason: string[];
|
||||
}
|
||||
|
||||
function matchDeprecated(v: string): MatchDeprecatedResult {
|
||||
const match = Object.keys(deprecatedVersions).find((depreciated) =>
|
||||
semver.satisfies(v, depreciated),
|
||||
);
|
||||
const reason = deprecatedVersions[match as keyof typeof deprecatedVersions] || [];
|
||||
return {
|
||||
match,
|
||||
reason: Array.isArray(reason) ? reason : [reason],
|
||||
};
|
||||
}
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
history: css`
|
||||
position: absolute;
|
||||
@ -20,7 +39,33 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
`,
|
||||
|
||||
ref: css`
|
||||
margin-left: ${token.marginXS}px;
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
`,
|
||||
bug: css`
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
display: inline-block;
|
||||
vertical-align: inherit;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
`,
|
||||
bugReasonTitle: css`
|
||||
padding: ${token.paddingXXS}px ${token.paddingXS}px;
|
||||
`,
|
||||
bugReasonList: css`
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
li {
|
||||
padding: ${token.paddingXXS}px ${token.paddingXS}px;
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${token.marginXXS}px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}));
|
||||
|
||||
@ -34,16 +79,18 @@ const locales = {
|
||||
changelog: '更新日志',
|
||||
loading: '加载中...',
|
||||
empty: '暂无更新',
|
||||
bugList: 'Bug 版本',
|
||||
},
|
||||
en: {
|
||||
full: 'Full Changelog',
|
||||
changelog: 'Changelog',
|
||||
loading: 'loading...',
|
||||
empty: 'Nothing update',
|
||||
bugList: 'Bug Versions',
|
||||
},
|
||||
};
|
||||
|
||||
function ParseChangelog(props: { changelog: string; refs: string[]; styles: any }) {
|
||||
const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any }> = (props) => {
|
||||
const { changelog = '', refs = [], styles } = props;
|
||||
|
||||
const parsedChangelog = React.useMemo(() => {
|
||||
@ -78,7 +125,6 @@ function ParseChangelog(props: { changelog: string; refs: string[]; styles: any
|
||||
<>
|
||||
{/* Changelog */}
|
||||
<span>{parsedChangelog}</span>
|
||||
|
||||
{/* Refs */}
|
||||
{refs?.map((ref) => (
|
||||
<a className={styles.ref} key={ref} href={ref} target="_blank" rel="noreferrer">
|
||||
@ -87,39 +133,29 @@ function ParseChangelog(props: { changelog: string; refs: string[]; styles: any
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
type ChangelogInfo = {
|
||||
interface ChangelogInfo {
|
||||
version: string;
|
||||
changelog: string;
|
||||
refs: string[];
|
||||
};
|
||||
}
|
||||
|
||||
function useChangelog(componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] {
|
||||
const data: any = useFetch(
|
||||
lang === 'cn'
|
||||
? {
|
||||
key: 'component-changelog-cn',
|
||||
request: () => import('../../../preset/components-changelog-cn.json'),
|
||||
}
|
||||
: {
|
||||
key: 'component-changelog-en',
|
||||
request: () => import('../../../preset/components-changelog-en.json'),
|
||||
},
|
||||
);
|
||||
|
||||
return useMemo(() => {
|
||||
const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
|
||||
const data = useFetch({
|
||||
key: `component-changelog-${lang}`,
|
||||
request: () => import(`../../../preset/components-changelog-${lang}.json`),
|
||||
});
|
||||
return React.useMemo(() => {
|
||||
const component = componentPath.replace(/-/g, '');
|
||||
|
||||
const componentName = Object.keys(data).find(
|
||||
(name) => name.toLowerCase() === component.toLowerCase(),
|
||||
);
|
||||
|
||||
return data[componentName!];
|
||||
return data[componentName as keyof typeof data] as ChangelogInfo[];
|
||||
}, [data, componentPath]);
|
||||
}
|
||||
};
|
||||
|
||||
export default function ComponentChangelog(props: ComponentChangelogProps) {
|
||||
const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
|
||||
const { pathname = '' } = props;
|
||||
const [locale, lang] = useLocale(locales);
|
||||
const [show, setShow] = React.useState(false);
|
||||
@ -130,7 +166,7 @@ export default function ComponentChangelog(props: ComponentChangelogProps) {
|
||||
|
||||
const list = useChangelog(componentPath, lang);
|
||||
|
||||
const timelineItems = React.useMemo(() => {
|
||||
const timelineItems = React.useMemo<TimelineItemProps[]>(() => {
|
||||
const changelogMap: Record<string, ChangelogInfo[]> = {};
|
||||
|
||||
list?.forEach((info) => {
|
||||
@ -140,13 +176,41 @@ export default function ComponentChangelog(props: ComponentChangelogProps) {
|
||||
|
||||
return Object.keys(changelogMap).map((version) => {
|
||||
const changelogList = changelogMap[version];
|
||||
|
||||
const bugVersionInfo = matchDeprecated(version);
|
||||
return {
|
||||
children: (
|
||||
<Typography>
|
||||
<h4>{version}</h4>
|
||||
<Typography.Title level={4}>
|
||||
{version}
|
||||
{bugVersionInfo.match && (
|
||||
<Popover
|
||||
destroyTooltipOnHide
|
||||
placement="right"
|
||||
title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
|
||||
content={
|
||||
<ul className={styles.bugReasonList}>
|
||||
{bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
|
||||
<li key={`reason-${index}`}>
|
||||
<a type="link" target="_blank" rel="noreferrer" href={reason}>
|
||||
<BugOutlined />
|
||||
{reason
|
||||
?.replace(/#.*$/, '')
|
||||
?.replace(
|
||||
/^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
|
||||
'#',
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
>
|
||||
<BugOutlined className={styles.bug} />
|
||||
</Popover>
|
||||
)}
|
||||
</Typography.Title>
|
||||
<ul>
|
||||
{changelogList.map((info, index) => (
|
||||
{changelogList.map<React.ReactNode>((info, index) => (
|
||||
<li key={index} className={styles.li}>
|
||||
<ParseChangelog {...info} styles={styles} />
|
||||
</li>
|
||||
@ -194,4 +258,6 @@ export default function ComponentChangelog(props: ComponentChangelogProps) {
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ComponentChangelog;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
import { createStyles, useTheme } from 'antd-style';
|
||||
import type { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
|
||||
import classNames from 'classnames';
|
||||
import { useRouteMeta, useTabMeta } from 'dumi';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => {
|
||||
const { antCls } = token;
|
||||
|
||||
return {
|
||||
toc: css`
|
||||
${antCls}-anchor {
|
||||
@ -20,30 +20,25 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
top: ${token.headerHeight + token.contentMarginTop - 8}px;
|
||||
inset-inline-end: 0;
|
||||
width: 160px;
|
||||
margin: 0 0 12px 0;
|
||||
padding: 8px 0;
|
||||
padding-inline: 4px 8px;
|
||||
backdrop-filter: blur(8px);
|
||||
padding: ${token.paddingXS}px;
|
||||
border-radius: ${token.borderRadius}px;
|
||||
box-sizing: border-box;
|
||||
margin-inline-end: calc(16px - 100vw + 100%);
|
||||
z-index: 10;
|
||||
|
||||
.toc-debug {
|
||||
color: ${token.purple6};
|
||||
|
||||
&:hover {
|
||||
color: ${token.purple5};
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop + 24}px) !important;
|
||||
margin: 0 auto;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
padding-inline: 4px;
|
||||
padding: ${token.paddingXXS}px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: ${token.screenLG}px) {
|
||||
@ -72,11 +67,11 @@ interface DocAnchorProps {
|
||||
debugDemos?: string[];
|
||||
}
|
||||
|
||||
type AnchorItem = {
|
||||
interface AnchorItem {
|
||||
id: string;
|
||||
title: string;
|
||||
children?: AnchorItem[];
|
||||
};
|
||||
}
|
||||
|
||||
const DocAnchor: React.FC<DocAnchorProps> = ({ showDebug, debugDemos = [] }) => {
|
||||
const { styles } = useStyle();
|
||||
@ -84,24 +79,24 @@ const DocAnchor: React.FC<DocAnchorProps> = ({ showDebug, debugDemos = [] }) =>
|
||||
const meta = useRouteMeta();
|
||||
const tab = useTabMeta();
|
||||
|
||||
const renderAnchorItem = (item: AnchorItem) => ({
|
||||
const renderAnchorItem = (item: AnchorItem): AnchorLinkItemProps => ({
|
||||
href: `#${item.id}`,
|
||||
title: item.title,
|
||||
key: item.id,
|
||||
children: item.children
|
||||
?.filter((child) => showDebug || !debugDemos.includes(child.id))
|
||||
.map((child) => ({
|
||||
.map<AnchorLinkItemProps>((child) => ({
|
||||
key: child.id,
|
||||
href: `#${child.id}`,
|
||||
title: (
|
||||
<span className={classNames(debugDemos.includes(child.id) && 'toc-debug')}>
|
||||
<span className={classNames({ 'toc-debug': debugDemos.includes(child.id) })}>
|
||||
{child?.title}
|
||||
</span>
|
||||
),
|
||||
})),
|
||||
});
|
||||
|
||||
const anchorItems = useMemo(
|
||||
const anchorItems = React.useMemo<AnchorItem[]>(
|
||||
() =>
|
||||
(tab?.toc || meta.toc).reduce<AnchorItem[]>((result, item) => {
|
||||
if (item.depth === 2) {
|
||||
@ -129,7 +124,7 @@ const DocAnchor: React.FC<DocAnchorProps> = ({ showDebug, debugDemos = [] }) =>
|
||||
affix={false}
|
||||
targetOffset={token.anchorTop}
|
||||
showInkInFixed
|
||||
items={anchorItems.map(renderAnchorItem)}
|
||||
items={anchorItems.map<AnchorLinkItemProps>(renderAnchorItem)}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -104,7 +104,9 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
|
||||
version={meta.frontmatter.tag}
|
||||
/>
|
||||
)}
|
||||
<div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
|
||||
<div style={{ minHeight: 'calc(100vh - 64px)', width: 'calc(100% - 10px)' }}>
|
||||
{children}
|
||||
</div>
|
||||
<InViewSuspense>
|
||||
<ColumnCard
|
||||
zhihuLink={meta.frontmatter.zhihu_url}
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -36,6 +36,7 @@ config/base.yaml
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
bun.lockb
|
||||
.pnpm-debug.log
|
||||
components/**/*.js
|
||||
components/**/*.jsx
|
||||
|
||||
@ -16,6 +16,13 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.16.1
|
||||
|
||||
`2024-04-05`
|
||||
|
||||
- 🛠 Adjust Typography `ellipsis` logic to use CSS ellipsis in SSR to enhance user experience. [#48205](https://github.com/ant-design/ant-design/pull/48205)
|
||||
- 🐞 Fix FloatButton config `tooltip` and `badge` at same time will make `badge` customize background not working. [#48198](https://github.com/ant-design/ant-design/pull/48198) [@LonelySnowman](https://github.com/LonelySnowman)
|
||||
|
||||
## 5.16.0
|
||||
|
||||
`2024-03-31`
|
||||
|
||||
@ -16,6 +16,13 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.16.1
|
||||
|
||||
`2024-04-05`
|
||||
|
||||
- 🛠 调整 Typography 的 `ellipsis` 使其在 SSR 阶段使用 CSS 省略以优化用户体验。[#48205](https://github.com/ant-design/ant-design/pull/48205)
|
||||
- 🐞 修复 FloatButton 中同时配置 `tooltip` 和 `badge` 时， `badge` 的自定义背景色会失效的问题。[#48198](https://github.com/ant-design/ant-design/pull/48198) [@LonelySnowman](https://github.com/LonelySnowman)
|
||||
|
||||
## 5.16.0
|
||||
|
||||
`2024-03-31`
|
||||
|
||||
@ -42,7 +42,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| activeTabKey | Current TabPane's key | string | - | |
|
||||
| bordered | Toggles rendering of the border around the card | boolean | true | |
|
||||
| cover | Card cover | ReactNode | - | |
|
||||
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | - | |
|
||||
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | `The key of first tab` | |
|
||||
| extra | Content to render in the top-right corner of the card | ReactNode | - | |
|
||||
| hoverable | Lift up when hovering card | boolean | false | |
|
||||
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | |
|
||||
@ -76,14 +76,14 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
|
||||
### `styles` 和 `classNames` attribute
|
||||
|
||||
| 名称 | 说明 | 版本 |
|
||||
| ------- | --------------------- | ------ |
|
||||
| header | set `header` of card | 5.14.0 |
|
||||
| body | set `body` of card | 5.14.0 |
|
||||
| extra | set `extra` of card | 5.14.0 |
|
||||
| title | set `title` of card | 5.14.0 |
|
||||
| actions | set `actions` of card | 5.14.0 |
|
||||
| cover | set `cover` of card | 5.14.0 |
|
||||
| Property | Description | Version |
|
||||
| -------- | --------------------- | ------- |
|
||||
| header | set `header` of card | 5.14.0 |
|
||||
| body | set `body` of card | 5.14.0 |
|
||||
| extra | set `extra` of card | 5.14.0 |
|
||||
| title | set `title` of card | 5.14.0 |
|
||||
| actions | set `actions` of card | 5.14.0 |
|
||||
| cover | set `cover` of card | 5.14.0 |
|
||||
|
||||
## Design Token
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA
|
||||
| activeTabKey | 当前激活页签的 key | string | - | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| cover | 卡片封面 | ReactNode | - | |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` | |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签的 key` | |
|
||||
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
||||
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
||||
|
||||
@ -15,7 +15,7 @@ demo:
|
||||
|
||||
Before use icons, you need to install [@ant-design/icons](https://github.com/ant-design/ant-design-icons) package:
|
||||
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save'></InstallDependencies>
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save' bun='bun add @ant-design/icons'></InstallDependencies>
|
||||
|
||||
## List of icons
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ demo:
|
||||
|
||||
使用图标组件，你需要安装 [@ant-design/icons](https://github.com/ant-design/ant-design-icons) 图标组件包：
|
||||
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save'></InstallDependencies>
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save' bun='bun add @ant-design/icons'></InstallDependencies>
|
||||
|
||||
## 设计师专属
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| addIcon | Customize add icon, only works with `type="editable-card"` | ReactNode | `<PlusOutlined />` | 4.4.0 |
|
||||
| animated | Whether to change tabs with animation. | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
||||
| centered | Centers tabs | boolean | false | 4.4.0 |
|
||||
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
|
||||
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | `The key of first tab` | |
|
||||
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
|
||||
| indicator | Customize `size` and `align` of indicator | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
|
||||
| items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 |
|
||||
|
||||
@ -52,7 +52,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
| addIcon | 自定义添加按钮，设置 `type="editable-card"` 时有效 | ReactNode | `<PlusOutlined />` | 4.4.0 |
|
||||
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
||||
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | |
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板的 key` | |
|
||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
|
||||
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
|
||||
| items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 |
|
||||
|
||||
@ -44,7 +44,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| color | Color of the Tag | string | - | |
|
||||
| icon | Set the icon of tag | ReactNode | - | |
|
||||
| bordered | Whether has border style | boolean | true | 5.4.0 |
|
||||
| onClose | Callback executed when tag is closed | (e) => void | - | |
|
||||
| onClose | Callback executed when tag is closed | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
|
||||
|
||||
### Tag.CheckableTag
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ demo:
|
||||
| color | 标签色 | string | - | |
|
||||
| icon | 设置图标 | ReactNode | - | |
|
||||
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
||||
| onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e) => void | - | |
|
||||
| onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
|
||||
|
||||
### Tag.CheckableTag
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/upload/demo/avatar.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-wrapper avatar-uploader ant-upload-picture-card-wrapper"
|
||||
>
|
||||
@ -50,7 +52,7 @@ Array [
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-wrapper avatar-uploader ant-upload-picture-circle-wrapper"
|
||||
>
|
||||
@ -99,8 +101,8 @@ Array [
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/upload/demo/avatar.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/upload/demo/avatar.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
|
||||
>
|
||||
<span
|
||||
class="ant-upload-wrapper avatar-uploader ant-upload-picture-card-wrapper"
|
||||
>
|
||||
@ -50,7 +52,7 @@ Array [
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-wrapper avatar-uploader ant-upload-picture-circle-wrapper"
|
||||
>
|
||||
@ -99,8 +101,8 @@ Array [
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/upload/demo/basic.tsx correctly 1`] = `
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { message, Upload } from 'antd';
|
||||
import { Flex, message, Upload } from 'antd';
|
||||
import type { GetProp, UploadProps } from 'antd';
|
||||
|
||||
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
|
||||
@ -49,7 +49,7 @@ const App: React.FC = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex gap="middle" wrap="wrap">
|
||||
<Upload
|
||||
name="avatar"
|
||||
listType="picture-card"
|
||||
@ -72,7 +72,7 @@ const App: React.FC = () => {
|
||||
>
|
||||
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
|
||||
</Upload>
|
||||
</>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
[
|
||||
"+v",
|
||||
"07akioni",
|
||||
"0xflotus",
|
||||
"17073025",
|
||||
"2724635499",
|
||||
"282159468",
|
||||
@ -41,6 +42,7 @@
|
||||
"Alexander Suevalov",
|
||||
"Alexander.Kosov",
|
||||
"Alexandre Kirszenberg",
|
||||
"Alexey Teterin",
|
||||
"Alexey Vinogradov",
|
||||
"Alexey Yakovlev",
|
||||
"Alfred Qiu",
|
||||
@ -130,6 +132,7 @@
|
||||
"Camol",
|
||||
"Cang Ta",
|
||||
"Canwen Xu",
|
||||
"Carla Paiva",
|
||||
"Carlos Coves Prieto",
|
||||
"Carter Feldman",
|
||||
"Caspian Chen",
|
||||
@ -145,6 +148,7 @@
|
||||
"Charles Covey-Brandt",
|
||||
"Charlie Jonas",
|
||||
"Chelsea Huang",
|
||||
"ChenJiYuan",
|
||||
"ChenXiao",
|
||||
"Cheng Liu",
|
||||
"Chenjia",
|
||||
@ -176,6 +180,7 @@
|
||||
"Cordaro",
|
||||
"CornerSkyless",
|
||||
"Curly.Water",
|
||||
"Cuvii",
|
||||
"D & R",
|
||||
"Daewoong Moon",
|
||||
"Dalton Craven",
|
||||
@ -247,6 +252,7 @@
|
||||
"Eli White",
|
||||
"Eliot Sanford",
|
||||
"Ell Bradshaw",
|
||||
"Eloi0424",
|
||||
"Emerson Laurentino",
|
||||
"Emily Xiong",
|
||||
"Ender Lee",
|
||||
@ -260,14 +266,17 @@
|
||||
"Ernest Folch",
|
||||
"Erwann Mest",
|
||||
"Eslam Yahya",
|
||||
"Eugene",
|
||||
"Eugene Matvejev",
|
||||
"Eugene Molokov",
|
||||
"Eusen",
|
||||
"Evan Charlton",
|
||||
"Evgeniy Aksyonov",
|
||||
"Evgeny Kuznetsov",
|
||||
"Eward Song",
|
||||
"FJHou",
|
||||
"Fachreza Muslim",
|
||||
"Fatpandac",
|
||||
"Federico Marcos",
|
||||
"Ferdi Koomen",
|
||||
"Fergus Leung",
|
||||
@ -320,6 +329,7 @@
|
||||
"Guichi Zhao",
|
||||
"Gunay",
|
||||
"Gundsambuu",
|
||||
"Guo Yunhe",
|
||||
"Guojun Wang",
|
||||
"Guru Mahendran",
|
||||
"HJin.me",
|
||||
@ -379,6 +389,7 @@
|
||||
"Ivan Tsybulin",
|
||||
"Ivan Yakovlev",
|
||||
"Ivo Stratev",
|
||||
"JINGLE",
|
||||
"JRoger",
|
||||
"Jabir K.H",
|
||||
"Jack",
|
||||
@ -407,6 +418,7 @@
|
||||
"Jase Pellerin",
|
||||
"Jason",
|
||||
"Jason Chung",
|
||||
"Jason Feng",
|
||||
"Jason Yin",
|
||||
"Jay Fong",
|
||||
"Jean-Luc Sorak",
|
||||
@ -418,6 +430,7 @@
|
||||
"Jelle de Jong",
|
||||
"Jenna Van Conett",
|
||||
"Jennie",
|
||||
"Jeongseok Kang",
|
||||
"JeromeLin",
|
||||
"Jerry Bendy",
|
||||
"Jesper We",
|
||||
@ -510,6 +523,7 @@
|
||||
"KingxBeta",
|
||||
"Kirill Alexander Khalitov",
|
||||
"Kirill Stiopin",
|
||||
"Kirk Ross",
|
||||
"Kiyan",
|
||||
"Knacktus",
|
||||
"Knut Olav Bøhmer",
|
||||
@ -600,10 +614,10 @@
|
||||
"Matt Lein",
|
||||
"Matt Wilkinson",
|
||||
"Max",
|
||||
"Maxim Kolesnikov",
|
||||
"Maximilian Meyer",
|
||||
"Mayowa Sogbein",
|
||||
"Md_ZubairAhmed",
|
||||
"Mehdi Salem Naraghi",
|
||||
"MeiLin",
|
||||
"MengZhaoFly",
|
||||
"Meow-z",
|
||||
@ -662,6 +676,7 @@
|
||||
"Nathan Tavares Nascimento",
|
||||
"Nathan Wells",
|
||||
"Naveen",
|
||||
"Navid",
|
||||
"Neekey",
|
||||
"Neil",
|
||||
"Nekron",
|
||||
@ -690,6 +705,7 @@
|
||||
"Nokecy",
|
||||
"OAwan",
|
||||
"Oceansdeep7",
|
||||
"OctKun",
|
||||
"Olaniyi Philip Ojeyinka",
|
||||
"Oleg Kuzava",
|
||||
"Oleksandr Kovalchuk",
|
||||
@ -734,6 +750,7 @@
|
||||
"QC-L",
|
||||
"Qhan W",
|
||||
"Qiaosen Huang",
|
||||
"Qin Zan",
|
||||
"QingLance",
|
||||
"Qingrong Ke",
|
||||
"QoVoQ",
|
||||
@ -745,6 +762,7 @@
|
||||
"Rain120",
|
||||
"Rainey",
|
||||
"Rainy",
|
||||
"Rajasekhar Gandavarapu",
|
||||
"Rajil Bajracharya",
|
||||
"Rallets",
|
||||
"Ramsés Moreno",
|
||||
@ -763,6 +781,7 @@
|
||||
"Ricardo Raphael Joson",
|
||||
"Richard D. Worth",
|
||||
"Rick Zhou",
|
||||
"Rickvian Aldi",
|
||||
"Ritesh Makan",
|
||||
"Riyad Elberkawy",
|
||||
"Robert Wilkinson",
|
||||
@ -773,6 +792,7 @@
|
||||
"Roman Soroka",
|
||||
"Ron Šmeral",
|
||||
"Rongjian Zhang",
|
||||
"Roxannej",
|
||||
"Rrrandom",
|
||||
"RunningCoderLee",
|
||||
"Ryan Lee",
|
||||
@ -820,6 +840,7 @@
|
||||
"ShuYu Wang",
|
||||
"Shubham Kanodia",
|
||||
"Shun",
|
||||
"Shunze Chen",
|
||||
"Shuvalov Anton",
|
||||
"SimaQ",
|
||||
"Simo Aleksandrov",
|
||||
@ -856,6 +877,7 @@
|
||||
"SyMind",
|
||||
"Sylvain Boulade",
|
||||
"SylvanasGone",
|
||||
"Sébastien Béal",
|
||||
"TTC",
|
||||
"TangLL",
|
||||
"Tanmoy Bhowmik",
|
||||
@ -926,6 +948,7 @@
|
||||
"Wang Zhengchen",
|
||||
"Wang yb",
|
||||
"Warren Seymour",
|
||||
"WeLong",
|
||||
"Webber Takken",
|
||||
"Wei Zhu",
|
||||
"Wenchao Hu",
|
||||
@ -950,6 +973,7 @@
|
||||
"XBTop1!",
|
||||
"XIN HU",
|
||||
"XTY",
|
||||
"XiaoDong",
|
||||
"XiaoPi",
|
||||
"Xiaoming",
|
||||
"Xie Guanglei",
|
||||
@ -972,6 +996,7 @@
|
||||
"Yann Pringault",
|
||||
"Yash Joshi",
|
||||
"Yasin Uslu",
|
||||
"Yawen Xiao",
|
||||
"Yee",
|
||||
"Yevhen Hryhorevskyi",
|
||||
"Yiming",
|
||||
@ -1041,6 +1066,7 @@
|
||||
"alex89lj",
|
||||
"alexchen",
|
||||
"amedora",
|
||||
"anilpixel",
|
||||
"aoxiang78",
|
||||
"appleshell",
|
||||
"arange",
|
||||
@ -1103,6 +1129,7 @@
|
||||
"cwg",
|
||||
"daczczcz1",
|
||||
"dainli",
|
||||
"daisy",
|
||||
"dally_G",
|
||||
"damon.chen",
|
||||
"david.lv",
|
||||
@ -1141,6 +1168,7 @@
|
||||
"fkysly",
|
||||
"flashback313",
|
||||
"flyerH",
|
||||
"flyflydogdog",
|
||||
"frezc",
|
||||
"gaokaifeis",
|
||||
"gaoryrt",
|
||||
@ -1175,6 +1203,7 @@
|
||||
"howard",
|
||||
"huangyan.py",
|
||||
"hugorezende",
|
||||
"huiliangShen",
|
||||
"huishiyi",
|
||||
"hustcc",
|
||||
"huzzbuzz",
|
||||
@ -1223,15 +1252,17 @@
|
||||
"kayw",
|
||||
"kdenz",
|
||||
"kdepp",
|
||||
"kelvine",
|
||||
"keng",
|
||||
"kenve",
|
||||
"kermolaev",
|
||||
"killa",
|
||||
"kily zhou",
|
||||
"kiner-tang(文辉)",
|
||||
"kiner-tang",
|
||||
"klouskingsley",
|
||||
"ko",
|
||||
"konakona",
|
||||
"konka",
|
||||
"kossel",
|
||||
"kouchao",
|
||||
"kristof0425",
|
||||
@ -1257,7 +1288,6 @@
|
||||
"lilun",
|
||||
"limingxin",
|
||||
"linqiqi077",
|
||||
"linxianxi",
|
||||
"lisenenkov",
|
||||
"littleLane",
|
||||
"littledian",
|
||||
@ -1281,6 +1311,7 @@
|
||||
"mArker",
|
||||
"maks",
|
||||
"maomao",
|
||||
"max",
|
||||
"maximest-pierre",
|
||||
"melchior voidwolf",
|
||||
"memoryza",
|
||||
@ -1291,6 +1322,7 @@
|
||||
"mkermani144",
|
||||
"mmmveggies",
|
||||
"mofelee",
|
||||
"momesana",
|
||||
"moonrailgun",
|
||||
"morning-star",
|
||||
"mraiguo",
|
||||
@ -1379,6 +1411,7 @@
|
||||
"tdida",
|
||||
"thegatheringstorm",
|
||||
"thilo-behnke",
|
||||
"thinkasany",
|
||||
"tianli.zhao",
|
||||
"tom",
|
||||
"toshi1127",
|
||||
@ -1451,17 +1484,20 @@
|
||||
"yehq",
|
||||
"yeliex",
|
||||
"yeshan333",
|
||||
"yexiaolong",
|
||||
"yibu.wang",
|
||||
"yifanwww",
|
||||
"yiminanci",
|
||||
"yiminghe",
|
||||
"yingxirz",
|
||||
"yiwwhl",
|
||||
"yoshinyan",
|
||||
"youmoo",
|
||||
"youngz",
|
||||
"yuche",
|
||||
"yuezk",
|
||||
"yui",
|
||||
"yuza",
|
||||
"yykoypj",
|
||||
"z",
|
||||
"zack",
|
||||
@ -1481,6 +1517,8 @@
|
||||
"zhaopeidong",
|
||||
"zhenfan.yu",
|
||||
"zhengjitf",
|
||||
"zhipenglin",
|
||||
"zhoulixiang",
|
||||
"zhuguibiao",
|
||||
"zhujun24",
|
||||
"zhyupe",
|
||||
@ -1530,11 +1568,14 @@
|
||||
"南小北",
|
||||
"只捱宅",
|
||||
"可乐",
|
||||
"叶枫",
|
||||
"吕立青",
|
||||
"吴泽康",
|
||||
"啸生",
|
||||
"大猫",
|
||||
"子瞻 Luci",
|
||||
"孙术",
|
||||
"宋红凯",
|
||||
"宝码",
|
||||
"小哈husky",
|
||||
"小菜",
|
||||
@ -1568,6 +1609,7 @@
|
||||
"松子",
|
||||
"林煌东",
|
||||
"柚子男",
|
||||
"栗康",
|
||||
"梓安",
|
||||
"沐霖",
|
||||
"炒米粉",
|
||||
@ -1585,6 +1627,7 @@
|
||||
"社长长",
|
||||
"章鱼怪",
|
||||
"竹尔",
|
||||
"米家-iOS-张文锋",
|
||||
"米老朱",
|
||||
"精武陈真",
|
||||
"红",
|
||||
@ -1614,7 +1657,9 @@
|
||||
"郑国庆",
|
||||
"郑旭",
|
||||
"野迂迂",
|
||||
"闲夕",
|
||||
"闲耘™",
|
||||
"阿菜 Cai",
|
||||
"陆离",
|
||||
"陈帅",
|
||||
"陈广亮",
|
||||
|
||||
@ -44,11 +44,11 @@ You can subscribe to this feed for new version notifications: https://github.com
|
||||
|
||||
## Installation
|
||||
|
||||
### Using npm or yarn or pnpm
|
||||
### Using npm or yarn or pnpm or bun
|
||||
|
||||
**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
|
||||
|
||||
|
||||
@ -44,11 +44,11 @@ title: Ant Design of React
|
||||
|
||||
## 安装
|
||||
|
||||
### 使用 npm 或 yarn 或 pnpm 安装
|
||||
### 使用 npm 或 yarn 或 pnpm 或 bun 安装
|
||||
|
||||
**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
|
||||
**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 或 [bun](https://bun.sh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
|
||||
|
||||
@ -11,9 +11,9 @@ title: Usage with create-react-app
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/).
|
||||
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript' bun='$ bun create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it.
|
||||
|
||||
@ -48,13 +48,13 @@ Below is the default directory structure.
|
||||
|
||||
Now we install `antd` from yarn or npm or pnpm.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="App">
|
||||
@ -72,8 +72,8 @@ OK, you should now see a blue primary button displayed on the page. Next you can
|
||||
Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider:
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
|
||||
|
||||
@ -11,9 +11,9 @@ title: 在 create-react-app 中使用
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/) 或者 [bun](https://bun.sh/)。
|
||||
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript' bun='$ bun create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
|
||||
|
||||
@ -48,7 +48,7 @@ $ npm run start
|
||||
|
||||
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ tag: Updated
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/).
|
||||
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo' bun='$ bun create next-app antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
||||
|
||||
@ -27,9 +27,9 @@ Open the browser at http://localhost:3000/. if you see the NEXT logo, it is cons
|
||||
|
||||
## Import antd
|
||||
|
||||
Now we install `antd` from yarn or npm or pnpm.
|
||||
Now we install `antd` from yarn or npm or pnpm or bun.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
Modify `src/app/page.tsx`, import Button component from `antd`.
|
||||
|
||||
@ -56,7 +56,7 @@ If you are using the App Router in Next.js and using antd as your component libr
|
||||
|
||||
1. Install `@ant-design/nextjs-registry`
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save' bun='$ bun add @ant-design/nextjs-registry'></InstallDependencies>
|
||||
|
||||
2. Use it in `app/layout.tsx`
|
||||
|
||||
@ -94,7 +94,7 @@ If you are using the Pages Router in Next.js and using antd as your component li
|
||||
>
|
||||
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save' bun='$ bun add @ant-design/cssinjs'></InstallDependencies>
|
||||
|
||||
2. Rewrite `pages/_document.tsx`
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ tag: Updated
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/) 或者 [bun](https://bun.sh/)。
|
||||
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo' bun='$ bun create next-app antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装项目的各种必要依赖，在安装过程中，有一些配置项需要自行选择，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry，例如，你可以切换到淘宝镜像源：`npm config set registry https://registry.npmmirror.com`。
|
||||
|
||||
@ -27,9 +27,9 @@ $ npm run dev
|
||||
|
||||
## 引入 antd
|
||||
|
||||
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
|
||||
现在从 yarn 或 npm 或 pnpm 或 bun 安装并引入 antd。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
修改 `src/app/page.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
@ -56,7 +56,7 @@ export default Home;
|
||||
|
||||
1. 安装 `@ant-design/nextjs-registry`
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save' bun='$ bun add @ant-design/nextjs-registry'></InstallDependencies>
|
||||
|
||||
2. 在 `app/layout.tsx` 中使用
|
||||
|
||||
@ -94,7 +94,7 @@ export default RootLayout;
|
||||
>
|
||||
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save' bun='$ bun add @ant-design/cssinjs'></InstallDependencies>
|
||||
|
||||
2. 改写 `pages/_document.tsx`
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ title: Usage with Vite
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/).
|
||||
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo' bun='$ bun create vite antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
||||
|
||||
@ -45,9 +45,9 @@ Below is the default directory structure.
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
Now we install `antd` from yarn or npm or pnpm.
|
||||
Now we install `antd` from yarn or npm or pnpm or bun.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ title: 在 Vite 中使用
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/) 或者 [bun](https://bun.sh/)。
|
||||
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo' bun='$ bun create vite antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry。
|
||||
|
||||
@ -45,9 +45,9 @@ $ npm run dev
|
||||
└── vite.config.js
|
||||
```
|
||||
|
||||
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
|
||||
现在从 yarn 或 npm 或 pnpm 或 bun 安装并引入 antd。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
|
||||
21
package.json
21
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.16.0",
|
||||
"version": "5.16.1",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -76,7 +76,7 @@
|
||||
"lint-fix": "npm run lint-fix:script && npm run lint-fix:demo",
|
||||
"lint-fix:demo": "npm run lint:demo -- --fix",
|
||||
"lint-fix:script": "npm run lint:script -- --fix",
|
||||
"pre-publish": "npm run test-all -- --skip-lint --skip-build --skip-dist --skip-es --skip-lib --skip-test --skip-node && tsx ./scripts/pre-publish.ts",
|
||||
"pre-publish": "npm run test-all -- --skip-build && tsx ./scripts/pre-publish-notice.ts",
|
||||
"prepare": "is-ci || husky && dumi setup",
|
||||
"prepublishOnly": "antd-tools run guard",
|
||||
"prettier": "prettier -c --write **/* --cache",
|
||||
@ -119,7 +119,7 @@
|
||||
"@ant-design/cssinjs": "^1.19.1",
|
||||
"@ant-design/icons": "^5.3.6",
|
||||
"@ant-design/react-slick": "~1.1.2",
|
||||
"@babel/runtime": "^7.24.1",
|
||||
"@babel/runtime": "^7.24.4",
|
||||
"@ctrl/tinycolor": "^3.6.1",
|
||||
"@rc-component/color-picker": "~1.5.3",
|
||||
"@rc-component/mutate-observer": "^1.1.0",
|
||||
@ -180,7 +180,6 @@
|
||||
"@emotion/server": "^11.11.0",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
|
||||
"@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
|
||||
"@octokit/rest": "^20.0.2",
|
||||
"@qixian.cs/github-contributors-list": "^2.0.1",
|
||||
"@size-limit/file": "^11.1.2",
|
||||
"@stackblitz/sdk": "^1.9.0",
|
||||
@ -202,9 +201,8 @@
|
||||
"@types/jsdom": "^21.1.6",
|
||||
"@types/lodash": "^4.17.0",
|
||||
"@types/minimist": "^1.2.5",
|
||||
"@types/node": "^20.12.3",
|
||||
"@types/node": "^20.12.4",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/ora": "^3.2.0",
|
||||
"@types/pixelmatch": "^5.2.6",
|
||||
"@types/pngjs": "^6.0.4",
|
||||
"@types/prismjs": "^1.26.3",
|
||||
@ -212,11 +210,11 @@
|
||||
"@types/qs": "^6.9.14",
|
||||
"@types/react": "^18.2.74",
|
||||
"@types/react-copy-to-clipboard": "^5.0.7",
|
||||
"@types/react-dom": "^18.2.23",
|
||||
"@types/react-dom": "^18.2.24",
|
||||
"@types/react-highlight-words": "^0.16.7",
|
||||
"@types/react-resizable": "^3.0.7",
|
||||
"@types/semver": "^7.5.8",
|
||||
"@types/tar": "^6.1.11",
|
||||
"@types/tar": "^6.1.12",
|
||||
"@types/throttle-debounce": "^5.0.2",
|
||||
"@types/warning": "^3.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^7.5.0",
|
||||
@ -247,7 +245,7 @@
|
||||
"eslint-plugin-markdown": "^4.0.1",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"eslint-plugin-unicorn": "^52.0.0",
|
||||
"fast-glob": "^3.3.2",
|
||||
"fetch-jsonp": "^1.3.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
@ -282,7 +280,6 @@
|
||||
"node-notifier": "^10.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"open": "^10.1.0",
|
||||
"ora": "^8.0.1",
|
||||
"pixelmatch": "^5.3.0",
|
||||
"pngjs": "^7.0.0",
|
||||
"prettier": "^3.2.5",
|
||||
@ -328,9 +325,9 @@
|
||||
"tar": "^6.2.1",
|
||||
"tar-fs": "^3.0.5",
|
||||
"terser": "^5.30.3",
|
||||
"tsx": "^4.7.1",
|
||||
"tsx": "^4.7.2",
|
||||
"typedoc": "^0.25.12",
|
||||
"typescript": "~5.4.3",
|
||||
"typescript": "~5.4.4",
|
||||
"vanilla-jsoneditor": "^0.23.1",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"webpack": "^5.91.0",
|
||||
|
||||
@ -38,7 +38,7 @@ async function checkBranch({ current }: StatusResult) {
|
||||
version.includes('-experimental.')
|
||||
) {
|
||||
console.log(chalk.cyan('😃 Alpha version. Skip branch check.'));
|
||||
} else if (current !== 'master') {
|
||||
} else if (current !== 'master' && current !== '4.0-prepare') {
|
||||
console.log(chalk.yellow('🤔 You are not in the master branch!'));
|
||||
exitProcess();
|
||||
}
|
||||
|
||||
9
scripts/pre-publish-notice.ts
Normal file
9
scripts/pre-publish-notice.ts
Normal file
@ -0,0 +1,9 @@
|
||||
const { Notification: Notifier } = require('node-notifier');
|
||||
|
||||
new Notifier().notify({
|
||||
title: '✅ 准备发布到 npm',
|
||||
message: '测试用例执行完毕，快回来输入 npm 校验码了！',
|
||||
sound: 'Crystal',
|
||||
});
|
||||
|
||||
process.exit(0);
|
||||
@ -1,100 +0,0 @@
|
||||
import { Octokit } from '@octokit/rest';
|
||||
import ora from 'ora';
|
||||
import chalk from 'chalk';
|
||||
|
||||
const simpleGit = require('simple-git');
|
||||
const { Notification: Notifier } = require('node-notifier');
|
||||
|
||||
const emojify = (status: string = '') => {
|
||||
if (!status) {
|
||||
return '';
|
||||
}
|
||||
const emoji = {
|
||||
/* status */
|
||||
completed: '✅',
|
||||
queued: '🕒',
|
||||
in_progress: '⌛',
|
||||
/* conclusion */
|
||||
success: '✅',
|
||||
failure: '❌',
|
||||
neutral: '⚪',
|
||||
cancelled: '❌',
|
||||
skipped: '⏭️',
|
||||
timed_out: '⌛',
|
||||
action_required: '🔴',
|
||||
}[status];
|
||||
return `${emoji || ''} ${(status || '').padEnd(15)}`;
|
||||
};
|
||||
|
||||
const runPrePublish = async () => {
|
||||
const spinner = ora('Loading unicorns').start();
|
||||
spinner.info(chalk.black.bgGreenBright('本次发布将跳过本地 CI 检查，远程 CI 通过后方可发布'));
|
||||
const git = simpleGit();
|
||||
if (!process.env.GITHUB_ACCESS_TOKEN) {
|
||||
spinner.fail(
|
||||
'请先设置 GITHUB_ACCESS_TOKEN 环境变量到本地，请不要泄露给任何在线页面: https://octokit.github.io/rest.js/v20#authentication',
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
const octokit = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN });
|
||||
const { current: currentBranch } = await git.branch();
|
||||
spinner.start(`正在拉取远程分支 ${currentBranch}`);
|
||||
await git.pull('origin', currentBranch);
|
||||
spinner.succeed(`成功拉取远程分支 ${currentBranch}`);
|
||||
spinner.start(`正在推送本地分支 ${currentBranch}`);
|
||||
await git.push('origin', currentBranch);
|
||||
spinner.succeed(`成功推送远程分支 ${currentBranch}`);
|
||||
spinner.succeed(`已经和远程分支保持同步 ${currentBranch}`);
|
||||
spinner.succeed(`找到本地最新 commit:`);
|
||||
const { latest } = await git.log();
|
||||
spinner.info(` hash: ${latest.hash}`);
|
||||
spinner.info(` date: ${latest.date}`);
|
||||
spinner.info(` message: ${latest.message}`);
|
||||
spinner.info(` body: ${latest.body}`);
|
||||
spinner.info(` author_name: ${latest.author_name}`);
|
||||
const owner = 'ant-design';
|
||||
const repo = 'ant-design';
|
||||
spinner.start(`开始检查远程分支 CI 状态 ${currentBranch}`);
|
||||
const result = await octokit.checks.listForRef({
|
||||
owner,
|
||||
repo,
|
||||
ref: latest.hash,
|
||||
});
|
||||
spinner.succeed(`远程分支 CI 状态：`);
|
||||
result.data.check_runs.forEach((run) => {
|
||||
spinner.info(
|
||||
` ${run.name.padEnd(30)} ${emojify(run.status)} ${emojify(run.conclusion || '')}`,
|
||||
);
|
||||
});
|
||||
const conclusions = result.data.check_runs.map((run) => run.conclusion);
|
||||
if (
|
||||
conclusions.includes('failure') ||
|
||||
conclusions.includes('cancelled') ||
|
||||
conclusions.includes('timed_out')
|
||||
) {
|
||||
spinner.fail('远程分支 CI 执行异常，无法继续发布，请尝试修复或重试');
|
||||
spinner.info(` 点此查看状态：https://github.com/${owner}/${repo}/commit/${latest.hash}`);
|
||||
process.exit(1);
|
||||
}
|
||||
const statuses = result.data.check_runs.map((run) => run.status);
|
||||
if (
|
||||
result.data.check_runs.length < 1 ||
|
||||
statuses.includes('queued') ||
|
||||
statuses.includes('in_progress')
|
||||
) {
|
||||
spinner.fail('远程分支 CI 还在执行中，请稍候再试');
|
||||
spinner.info(` 点此查看状态：https://github.com/${owner}/${repo}/commit/${latest.hash}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// 远程分支 CI 跑过才能继续
|
||||
spinner.succeed(`远程分支 CI 已通过，准备开始发布`);
|
||||
new Notifier().notify({
|
||||
title: '✅ 准备发布到 npm',
|
||||
message: '测试用例执行完毕，快回来输入 npm 校验码了！',
|
||||
sound: 'Crystal',
|
||||
});
|
||||
process.exit(0);
|
||||
};
|
||||
|
||||
runPrePublish();
|
||||
Loading…
Reference in New Issue
Block a user