import { ConfigProvider, App as AntdApp, Button } from 'antd';
import zhCN from 'antd/locale/zh_CN'; // 引入中文语言包

const App = () => (
  // 使用 ConfigProvider 包裹整个应用
  <ConfigProvider
    locale={zhCN} // 1. 全局配置国际化为中文
    theme={{
      token: {
        colorPrimary: '#00b96b', // 2. 全局主色
      },
    }}
    componentSize="middle" // 3. 全局组件尺寸
  >
    {/* 使用 antd 内置的 App 组件，
      用于解决 message, notification, Modal.confirm 等静态方法无法消费 context 的问题
    */}
    <AntdApp>
      <MyApp />
    </AntdApp>
  </ConfigProvider>
);

// 你的业务应用
const MyApp = () => {
  const { message } = AntdApp.useApp(); // 从 AntdApp 中获取 context-aware 的静态方法
  
  const showMessage = () => {
    message.success('这是一条成功消息！');
  };

  return <Button type="primary" onClick={showMessage}>显示消息</Button>;
};

export default App;

import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        // 1. 修改 Seed Token，影响范围大
        colorPrimary: '#00b96b',
        borderRadius: 2,

        // 2. 覆盖派生的 Map Token，影响范围小
        colorBgContainer: '#f6ffed',
      },
    }}
  >
    <Space>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
    </Space>
  </ConfigProvider>
);

export default App;

import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      // 组合使用暗色算法与紧凑算法
      algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
      token: {
        colorPrimary: '#722ed1'
      }
    }}
  >
    <div style={{ background: '#000', padding: '20px', borderRadius: '4px' }}>
      <Space>
        <Input placeholder="紧凑的输入框" />
        <Button type="primary">紧凑的按钮</Button>
      </Space>
    </div>
  </ConfigProvider>
);

export default App;

import React from 'react';
import { ConfigProvider, Button, Input, Space } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      // 全局主色为蓝色
      token: { colorPrimary: '#1677ff' },
      components: {
        // 针对 Input 组件的特殊配置
        Input: {
          colorPrimary: '#eb2f96', // Input 激活时的主色
          algorithm: true,         // 启用算法，使其派生色（如 hover, active）也随之改变
        },
      },
    }}
  >
    <Space>
      <Input placeholder="Focus me to see the magic" />
      <Button type="primary">Primary Button</Button>
    </Space>
  </ConfigProvider>
);

export default App;

import { Button, ConfigProvider, Space, ColorPicker, Divider } from 'antd';
import type { Color } from 'antd/es/color-picker';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [primaryColor, setPrimaryColor] = useState('#1677ff');

  const onColorChange = (color: Color) => {
    setPrimaryColor(color.toHexString());
  };
  
  return (
    <>
      <ColorPicker showText value={primaryColor} onChangeComplete={onColorChange} />
      <Divider />
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: primaryColor,
          },
        }}
      >
        <Space>
          <Button type="primary">Primary</Button>
          <Button>Default</Button>
        </Space>
      </ConfigProvider>
    </>
  );
}

export default App;

import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';

const App: React.FC = () => (
  <ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
    <Space>
      <Button type="primary">全局主题 (蓝)</Button>
      <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
        <Button type="primary">局部主题 (绿)</Button>
      </ConfigProvider>
    </Space>
  </ConfigProvider>
);

export default App;

import React from 'react';
import { theme } from 'antd';

const { useToken } = theme;

const MyCustomCard: React.FC = () => {
  const { token } = useToken(); // 获取 Token 对象

  return (
    <div
      style={{
        backgroundColor: token.colorBgContainer, // 使用容器背景色
        padding: token.paddingLG,                // 使用大号内边距
        borderRadius: token.borderRadiusLG,      // 使用大号圆角
        boxShadow: token.boxShadow,              // 使用标准阴影
        border: `1px solid ${token.colorBorder}`, // 使用边框颜色
      }}
    >
      这是一个自定义卡片，其样式完全由 Ant Design 的 Design Token 驱动。
    </div>
  );
};

export default MyCustomCard;

import React from 'react';
import { ConfigProvider, Button, App as AntdApp, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';

// 假设这是我们的应用主组件
const MyApp: React.FC = () => (
  <div style={{ padding: '20px' }}>
    <Button type="primary">一个启用了 CSS 变量的按钮</Button>
  </div>
);

const App: React.FC = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
        // 👇 核心配置：开启 CSS 变量
        cssVar: true,
      }}
    >
      <AntdApp>
        <MyApp />
      </AntdApp>
    </ConfigProvider>
  );
};

export default App;

// 仅在 React 17 或 16 中需要手动提供 key
<ConfigProvider theme={{ cssVar: { key: 'my-app-theme' } }}>
  <App />
</ConfigProvider>

import React from 'react';
import { ConfigProvider, Button, App as AntdApp, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';

const MyApp: React.FC = () => (
  <div style={{ padding: '20px' }}>
    <Button type="primary">一个无 Hash 的按钮</Button>
  </div>
);

const App: React.FC = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
        // 开启 CSS 变量
        cssVar: true,
        // 👇 进阶优化：关闭 hash
        hashed: false,
      }}
    >
      <AntdApp>
        <MyApp />
      </AntdApp>
    </ConfigProvider>
  );
};

export default App;

import React from "react";
import { Typography, Divider } from "antd";
import { BookOutlined } from "@ant-design/icons";

const { Title, Paragraph, Text, Link } = Typography;

const ArticleHeader: React.FC = () => {
  return (
    <Typography>
      <Title level={2}>
        <BookOutlined /> Ant Design 实战入门
      </Title>

      {/* 1. 可复制的文本：只需添加 `copyable` 属性 */}
      <Paragraph>
        欢迎来到 Ant Design 的世界。项目ID:{" "}
        <Text copyable>20250926-AD-PRO</Text>
      </Paragraph>

      {/* 2. 可编辑的文本：添加 `editable` 属性 */}
      <Paragraph editable={{ tooltip: "点击编辑标题" }}>
        这是一个可编辑的副标题
      </Paragraph>

      {/* 3. 自动省略的多行文本：`ellipsis` 是一个功能强大的属性 */}
      <Paragraph
        ellipsis={{
          rows: 2,
          expandable: true,
          symbol: "展开阅读",
        }}
      >
        Ant Design
        是一个服务于企业级产品的设计体系，基于『确定』和『自然』的设计价值观，
        通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
        它提供了丰富的基础组件和业务组件，能够帮助开发者快速构建出高质量的后台管理系统。
        Ant Design 的设计理念源于大量的企业级产品实践，它不仅仅是一套 UI 组件库，
        更是一套完整的设计语言和前端解决方案。从最初的设计稿到最终的产品交付，
        Ant Design 都能提供完整的工具链支持。它包含了设计原则、视觉规范、交互模式、
        以及大量经过验证的最佳实践。无论是初学者还是经验丰富的开发者，
        都能通过 Ant Design 快速上手并构建出专业级的用户界面。
        其组件库涵盖了表单、表格、导航、反馈、数据展示等各个方面，
        每个组件都经过精心设计和充分测试，确保在不同场景下的稳定性和易用性。

      </Paragraph>

      <Divider />

      <Link href="https://ant.design/components/overview-cn" target="_blank">
        访问官方文档
      </Link>
    </Typography>
  );
};

export default ArticleHeader;

import { SmileOutlined, SmileFilled, SmileTwoTone } from '@ant-design/icons';

<Space>
  <SmileOutlined style={{ fontSize: '24px' }} />
  <SmileFilled style={{ fontSize: '24px', color: '#00b96b' }} />
  <SmileTwoTone style={{ fontSize: '24px' }} twoToneColor="#eb2f96" />
</Space>

import { LoadingOutlined, SyncOutlined } from '@ant-design/icons';

<Space>
  {/* `spin` 属性使其持续旋转，常用于加载状态 */}
  <LoadingOutlined style={{ fontSize: '24px' }} spin />
  
  {/* `rotate` 属性使其静态旋转指定的角度 */}
  <SyncOutlined style={{ fontSize: '24px' }} rotate={90} />
</Space>

import React from 'react';
import { Button, Flex, Space, Tooltip } from 'antd';
import {
  EditOutlined,
  ShareAltOutlined,
  DeleteOutlined,
  SaveOutlined,
} from '@ant-design/icons';

const AdvancedToolbar: React.FC = () => {
  return (
    // 1. 使用 Flex 容器作为父布局，实现左右对齐
    // `justify='space-between'` 将子元素推向两端
    // `align='center'` 确保子元素在交叉轴（垂直方向）上居中
    <Flex justify="space-between" align="center">
      {/* 左侧按钮组：使用 Space 来保证内部按钮的间距 */}
      <Space>
        <Button type="primary" icon={<SaveOutlined />}>
          保存
        </Button>
        <Button icon={<ShareAltOutlined />}>分享</Button>
      </Space>

      {/* 右侧按钮组 */}
      <Space>
        <Tooltip title="编辑文章">
          <Button shape="circle" icon={<EditOutlined />} />
        </Tooltip>
        <Tooltip title="删除文章">
          <Button danger shape="circle" icon={<DeleteOutlined />} />
        </Tooltip>
      </Space>
    </Flex>
  );
};

export default AdvancedToolbar;

import React from 'react';
import { Row, Col, Card } from 'antd';

const ResponsiveCardGrid: React.FC = () => {
  const cardData = [
    { title: '数据分析', content: '深入分析用户行为数据。' },
    { title: '销售报告', content: '本季度销售额同比增长20%。' },
    { title: '库存监控', content: 'A-01 仓库库存告急。' },
  ];

  return (
    <div>
      <h3 className="text-xl font-bold mb-4">关键指标</h3>
      {/* `gutter` 属性用于设置 Col 之间的间距 */}
      <Row gutter={[16, 16]}>
        {cardData.map((card, index) => (
          // 1. Col 的响应式属性是核心
          // `xs`: extra small (<576px) -> 占据 24/24 = 100% 宽度
          // `md`: medium (≥768px) -> 占据 24/12 = 50% 宽度
          // `lg`: large (≥992px) -> 占据 24/8 = 33.3% 宽度
          <Col key={index} xs={24} md={12} lg={8}>
            <Card title={card.title} bordered={false}>
              {card.content}
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default ResponsiveCardGrid;

import React, { useState } from "react";
import { Layout, Menu, Breadcrumb, theme } from "antd";

import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";

import type { MenuProps } from "antd";

// 从 Layout 中解构出所有子组件
const { Header, Content, Footer, Sider } = Layout;
// 定义 MenuItem 类型，这是 Ant Design 的 Menu 组件的类型定义
type MenuItem = Required<MenuProps>["items"][number];

// 在这个函数，我们可以获得一个 MenuItem 对象，他身上包含了
// 1. label: 菜单项的文本
// 2. key: 菜单项的唯一标识
// 3. icon: 菜单项的图标
// 4. children: 菜单项的子菜单
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return { key, icon, children, label } as MenuItem;
}

const items: MenuItem[] = [
  getItem("数据看板", "1", <PieChartOutlined />),
  getItem("订单管理", "2", <DesktopOutlined />),
  getItem("用户中心", "sub1", <UserOutlined />, [
    getItem("个人信息", "3"),
    getItem("团队列表", "4"),
  ]),
  getItem("系统设置", "sub2", <TeamOutlined />, [getItem("权限管理", "6")]),
  getItem("文件", "9", <FileOutlined />),
];

const AdminLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    // Layout 组件可以嵌套，形成复杂布局
    <Layout style={{ minHeight: "100vh" }}>
      {/* Sider: 侧边栏，`collapsible` 属性使其可折叠 */}
      <Sider
        theme="dark"
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        {/* 这里一般是Logo区域 */}
        <div
          className="demo-logo-vertical"
          style={{
            height: "32px",
            margin: "16px",
            background: "rgba(255, 255, 255, .2)",
          }}
        />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
        />
      </Sider>

      <Layout>
        {/* Header: 顶部导航栏 */}
        <Header style={{ padding: 0, background: colorBgContainer }} />

        {/* Content: 主内容区 */}
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>用户中心</Breadcrumb.Item>
            <Breadcrumb.Item>个人信息</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            这里是主内容区域。我们可以在这里放置之前创建的 ResponsiveCardGrid
            等组件。
          </div>
        </Content>

        {/* Footer: 页脚 */}
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Prorise
        </Footer>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;