Merge branch 'ant-design:main' into main

Author: Rain120

.dumi/theme/SiteThemeProvider.tsx

@@ -1,12 +1,13 @@
-import { ConfigProvider, theme as antdTheme } from 'antd';
 import type { ThemeConfig } from 'antd';
+import { theme as antdTheme, ConfigProvider } from 'antd';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
 import React, { useContext } from 'react';
 
 interface NewToken {
  bannerHeight: number;
  headerHeight: number;
+ alertHeight: number;
  menuItemBorder: number;
  mobileMaxWidth: number;
  siteMarkdownCodeBg: string;
@@ -27,7 +28,7 @@ interface NewToken {
 declare module 'antd-style' {
  export interface CustomToken extends NewToken {}
 }
-
+const alertHeight = 40;
 const headerHeight = 80;
 const bannerHeight = 38;
 const indexRadius = 24;
@@ -48,6 +49,7 @@ const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({ children, theme,
  theme={theme}
  customToken={{
  headerHeight,
+ alertHeight,
  bannerHeight,
  indexRadius,
  pcMaxWidth,

.dumi/theme/layouts/GlobalLayout.tsx

@@ -11,7 +11,7 @@ import type { MappingAlgorithm } from 'antd';
 import { App, theme as antdTheme } from 'antd';
 import type { DirectionType, ThemeConfig } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
-import React, { Suspense, useCallback, useEffect } from 'react';
+import React, { Suspense, useCallback, useEffect, useState } from 'react';
 
 import { DarkContext } from '../../hooks/useDark';
 import useLayoutState from '../../hooks/useLayoutState';
@@ -23,18 +23,14 @@ import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
 
 import '@ant-design/v5-patch-for-react-19';
+import Alert from '../slots/Alert';
 
 type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
 type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
 
 const RESPONSIVE_MOBILE = 768;
 export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER';
 
-// const styleCache = createCache();
-// if (typeof global !== 'undefined') {
-// (global as any).styleCache = styleCache;
-// }
-
 const getAlgorithm = (themes: ThemeName[] = []) =>
  themes
  .map((theme) => {
@@ -69,7 +65,6 @@ const GlobalLayout: React.FC = () => {
  (props: SiteState) => {
  setSiteState((prev) => ({ ...prev, ...props }));
 
- // updating `searchParams` will clear the hash
  const oldSearchStr = searchParams.toString();
 
  let nextSearchParams: URLSearchParams = searchParams;
@@ -112,6 +107,8 @@ const GlobalLayout: React.FC = () => {
  }
  }, [theme.length, isIndexPage]);
 
+ const [alertVisible, setAlertVisible] = useState(true);
+
  useEffect(() => {
  const _theme = searchParams.getAll('theme') as ThemeName[];
  const _direction = searchParams.get('direction') as DirectionType;
@@ -140,8 +137,9 @@ const GlobalLayout: React.FC = () => {
  theme: theme!,
  isMobile: isMobile!,
  bannerVisible,
+ alertVisible,
  }),
- [isMobile, direction, updateSiteConfig, theme],
+ [isMobile, direction, updateSiteConfig, alertVisible, theme],
  );
 
  const themeConfig = React.useMemo<ThemeConfig>(
@@ -199,6 +197,11 @@ const GlobalLayout: React.FC = () => {
  >
  <SiteContext value={siteContextValue}>
  <SiteThemeProvider theme={themeConfig}>
+ <Alert
+ afterClose={() => {
+ setAlertVisible(false);
+ }}
+ />
  <App>
  {outlet}
  <Suspense>{pathname.startsWith('/~demos') ? <PeterCat /> : null}</Suspense>

.dumi/theme/layouts/SidebarLayout/index.tsx

@@ -1,20 +1,21 @@
 import { createStyles } from 'antd-style';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-
+import SiteContext from '../../../pages/index/components/SiteContext';
 import CommonHelmet from '../../common/CommonHelmet';
 import Content from '../../slots/Content';
 import Sidebar from '../../slots/Sidebar';
 
-const useStyle = createStyles(({ css, token }) => ({
+const useStyle = createStyles(({ css, token }, { alertVisible }: { alertVisible: boolean }) => ({
  main: css`
  display: flex;
- margin-top: ${token.headerHeight}px;
- `,
+ margin-top: ${token.headerHeight + (alertVisible ? 40 : 0)}px;
+`,
 }));
 
 const SidebarLayout: React.FC<PropsWithChildren> = ({ children }) => {
- const { styles } = useStyle();
+ const { alertVisible } = React.use(SiteContext);
+ const { styles } = useStyle({ alertVisible });
  return (
  <main className={styles.main}>
  <CommonHelmet />

.dumi/theme/slots/Alert/index.tsx

@@ -0,0 +1,68 @@
+import { Alert, Button, Space } from 'antd';
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+import useLocale from '../../../hooks/useLocale';
+
+const useStyle = createStyles(({ token, css }) => {
+ return {
+ alert: css`
+ height: ${token.alertHeight}px;
+ width: 100%;
+ position: fixed;
+ top: 0px;
+ z-index: 1000;
+ border: none;
+ border-radius: 0;
+ background: linear-gradient(90deg, #fe8aff 0%, rgb(111, 179, 226) 66%, rgb(108, 87, 255) 100%);
+ .ant-alert-message{
+ color: #000;
+ text-align: center;
+ }
+ .ant-btn-color-link.ant-btn-variant-link{
+ padding: 0;
+ }
+ `,
+ };
+});
+
+const locales = {
+ cn: {
+ content: '参与 WeaveFox「AI艺术家」大赛，赢 SEE Conf 门票与千元好礼',
+ link: '立即前往',
+ },
+ en: {
+ content:
+ 'Participate in the WeaveFox "AI Artist" contest to win SEE Conf tickets and thousands of prizes',
+ link: 'Go to',
+ },
+};
+
+const Index: React.FC<{ afterClose: () => void }> = ({ afterClose }) => {
+ const { styles } = useStyle();
+ const [locale] = useLocale(locales);
+
+ return (
+ <Alert
+ className={styles.alert}
+ closable
+ afterClose={afterClose}
+ message={
+ <Space>
+ {' '}
+ {locale.content}
+ <Button
+ type="link"
+ onClick={() => {
+ window.open('https://weavefox.cn/?ref=seeconf2025&source=antdx', '_blank');
+ }}
+ >
+ {locale.link}
+ </Button>
+ </Space>
+ }
+ />
+ );
+};
+
+export default Index;

.dumi/theme/slots/Header/index.tsx

@@ -2,31 +2,26 @@ import { CloseOutlined, MenuOutlined } from '@ant-design/icons';
 import { Button, Drawer } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
+import { useLocation } from 'dumi';
 import React, { useEffect } from 'react';
-
 import useLocale from '../../../hooks/useLocale';
 import useScrollY from '../../../hooks/useScrollY';
+import type { SiteContextProps } from '../SiteContext';
 import SiteContext from '../SiteContext';
-
 import HeaderActions from './Actions';
+import type { SharedProps } from './interface';
 import Logo from './Logo';
 import Navigation from './Navigation';
 
-import { useLocation } from 'dumi';
-import type { SiteContextProps } from '../SiteContext';
-import type { SharedProps } from './interface';
-
-const useStyle = createStyles(({ token, css }) => {
+const useStyle = createStyles(({ token, css }, { alertVisible }: { alertVisible: boolean }) => {
  return {
  header: css`
  height: ${token.headerHeight}px;
  width: 100%;
  box-sizing: border-box;
-
  position: fixed;
- top: 0;
+ top: ${alertVisible ? token.alertHeight : '0'}px;
  z-index: 1000;
-
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -37,10 +32,8 @@ const useStyle = createStyles(({ token, css }) => {
  width: calc(100% - ${token.paddingLG * 2}px);
  padding: 0 ${token.paddingLG}px;
  margin: 0 ${token.paddingLG}px;
- 
- top: ${(token.headerHeight - token.paddingLG * 2) / 2}px;
+ top: ${(token.headerHeight - token.paddingLG * 2) / 2 + (alertVisible ? token.alertHeight : 0)}px;
  overflow: hidden;
- 
  border-radius: ${token.indexRadius}px;
  `,
  mini: css`
@@ -103,9 +96,9 @@ const Header: React.FC = () => {
  const [, lang] = useLocale();
  const { pathname } = useLocation();
 
- const { direction, isMobile } = React.useContext<SiteContextProps>(SiteContext);
+ const { direction, isMobile, alertVisible } = React.useContext<SiteContextProps>(SiteContext);
 
- const { styles } = useStyle();
+ const { styles } = useStyle({ alertVisible });
 
  const { scrollY, scrollYDirection } = useScrollY();
 

.dumi/theme/slots/Sidebar/index.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import useMenu from '../../../hooks/useMenu';
 import SiteContext from '../SiteContext';
 
-const useStyle = createStyles(({ token, css }) => {
+const useStyle = createStyles(({ token, css }, { alertVisible }: { alertVisible: boolean }) => {
  const { antCls, fontFamily, colorSplit, marginXXL, paddingXXS } = token;
 
  return {
@@ -94,9 +94,9 @@ const useStyle = createStyles(({ token, css }) => {
  mainMenu: css`
  z-index: 1;
  position: sticky;
- top: ${token.headerHeight}px;
+ top: ${token.headerHeight + (alertVisible ? token.alertHeight : 0)}px;
  width: 100%;
- max-height: calc(100vh - ${token.headerHeight}px);
+ max-height: calc(100vh - ${token.headerHeight + (alertVisible ? token.alertHeight : 0)}px);
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
@@ -110,8 +110,8 @@ const useStyle = createStyles(({ token, css }) => {
 
 const Sidebar: React.FC = () => {
  const sidebarData = useSidebarData();
- const { isMobile, theme } = React.use(SiteContext);
- const { styles } = useStyle();
+ const { isMobile, theme, alertVisible } = React.use(SiteContext);
+ const { styles } = useStyle({ alertVisible });
 
  const [menuItems, selectedKey] = useMenu();
  const isDark = theme.includes('dark');

.dumi/theme/slots/SiteContext.ts

@@ -7,12 +7,14 @@ export interface SiteContextProps {
  isMobile: boolean;
  bannerVisible: boolean;
  direction: DirectionType;
+ alertVisible: boolean;
  theme: ThemeName[];
  updateSiteConfig: (props: Partial<SiteContextProps>) => void;
 }
 
 const SiteContext = React.createContext<SiteContextProps>({
  isMobile: false,
+ alertVisible: true,
  bannerVisible: false,
  direction: 'ltr',
  theme: ['light'],

README-zh_CN.md

@@ -31,7 +31,7 @@
 
 </div>
 
-![demos](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UAEeSbJfuM8AAAAAAAAAAAAADgCCAQ/fmt.webp)
+![demos](https://github.com/user-attachments/assets/8f6b56b9-3619-4ddc-9105-ca0eb7af070f)
 
 ## ✨ 特性
 

README.md

@@ -31,7 +31,7 @@ Craft AI-driven interfaces effortlessly.
 
 </div>
 
-![demos](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UAEeSbJfuM8AAAAAAAAAAAAADgCCAQ/fmt.webp)
+![demos](https://github.com/user-attachments/assets/8f6b56b9-3619-4ddc-9105-ca0eb7af070f)
 
 ## ✨ Features
 

biome.json

@@ -13,7 +13,8 @@
  "!server",
  "!coverage",
  "!scripts/previewEditor/**/*",
- "!package.json"
+ "!package.json",
+ "!tests/index.html"
  ]
  },
  "formatter": {
@@ -57,7 +58,8 @@
  "noArrayIndexKey": "off",
  "noConfusingVoidType": "off",
  "noThenProperty": "off",
- "noTemplateCurlyInString": "off"
+ "noTemplateCurlyInString": "off",
+ "noNonNullAssertedOptionalChain": "off"
  },
  "performance": {
  "noDelete": "off",
@@ -81,6 +83,14 @@
  "quoteStyle": "single"
  }
  },
+ "html": {
+ "formatter": {
+ "enabled": true
+ },
+ "parser": {
+ "interpolation": true
+ }
+ },
  "overrides": [
  {
  "includes": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*", ".dumi/**/*"],