## BorderBeam 组件示例
### 基础用法
基础用法。使用 `BorderBeam` 修饰任意容器即可为边框添加持续流动的装饰性高亮效果。

```tsx
import React from 'react';
import { BorderBeam, Card } from 'antd';
const App: React.FC = () => (
  <div style={{ width: 360 }}>
    <BorderBeam>
      <Card title="Workspace overview">
        Review task status, deployment health, and recent automation activity in one panel.
      </Card>
    </BorderBeam>
  </div>
);
export default App;
```
### 渐变色
展示 6 组渐变流光配色，可切换查看不同效果。

```tsx
import React from 'react';
import { BorderBeam, Card, Flex, Segmented, Tag, Typography } from 'antd';
import type { BorderBeamGradient } from 'antd';
const presets: Array<{
  key: string;
  name: string;
  usage: string;
  description: string;
  color: BorderBeamGradient;
}> = [
  {
    key: 'ocean',
    name: 'Ocean',
    usage: 'Dashboard',
    description: 'A calm blue-green accent that works well for data views and cloud tooling.',
    color: [
      { color: '#1677ff', percent: 0 },
      { color: '#36cfc9', percent: 52 },
      { color: '#95de64', percent: 100 },
    ],
  },
  {
    key: 'sunset',
    name: 'Sunset',
    usage: 'Upgrade',
    description: 'A warm highlight for upgrade prompts, featured cards, and marketing blocks.',
    color: [
      { color: '#ff7a45', percent: 0 },
      { color: '#ff4d4f', percent: 49 },
      { color: '#ff85c0', percent: 100 },
    ],
  },
  {
    key: 'aurora',
    name: 'Aurora',
    usage: 'AI',
    description:
      'A vivid cool-toned beam suited for AI assistants, copilots, and automation panels.',
    color: [
      { color: '#7c3aed', percent: 0 },
      { color: '#06b6d4', percent: 57 },
      { color: '#67e8f9', percent: 100 },
    ],
  },
  {
    key: 'forest',
    name: 'Forest',
    usage: 'Recommendation',
    description:
      'A bright natural palette that feels good on recommendation and growth-oriented cards.',
    color: [
      { color: '#22c55e', percent: 0 },
      { color: '#a3e635', percent: 54 },
      { color: '#facc15', percent: 100 },
    ],
  },
  {
    key: 'ember',
    name: 'Ember',
    usage: 'Alert',
    description: 'A high-energy warm gradient for important alerts, launch cards, and hot paths.',
    color: [
      { color: '#fa541c', percent: 0 },
      { color: '#ff7875', percent: 46 },
      { color: '#ffd666', percent: 100 },
    ],
  },
  {
    key: 'nebula',
    name: 'Nebula',
    usage: 'Labs',
    description: 'A cool purple-pink mix that fits experimental modules and product lab surfaces.',
    color: [
      { color: '#2f54eb', percent: 0 },
      { color: '#722ed1', percent: 44 },
      { color: '#ff85c0', percent: 100 },
    ],
  },
];
const defaultPresetKey = presets[0].key;
const App: React.FC = () => {
  const [currentPresetKey, setCurrentPresetKey] = React.useState(defaultPresetKey);
  const currentPreset = presets.find((preset) => preset.key === currentPresetKey) ?? presets[0];
  return (
    <Flex vertical gap={16} style={{ maxWidth: 480 }}>
      <Segmented
        block
        options={presets.map((preset) => ({
          label: preset.name,
          value: preset.key,
        }))}
        value={currentPresetKey}
        onChange={(value) => setCurrentPresetKey(value as string)}
      />
      <BorderBeam color={currentPreset.color}>
        <Card
          title={currentPreset.name}
          extra={<Tag variant="filled">{currentPreset.usage}</Tag>}
          styles={{
            body: {
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
            },
          }}
        >
          <Typography.Text type="secondary">{currentPreset.description}</Typography.Text>
          <Flex gap={8} wrap>
            {currentPreset.color.map((item) => (
              <Tag key={`${item.color}-${item.percent}`} color={item.color} variant="filled">
                {item.color} · {item.percent}%
              </Tag>
            ))}
          </Flex>
          <Typography.Text type="secondary">
            Stop positions use the public 0-100 input range.
          </Typography.Text>
        </Card>
      </BorderBeam>
    </Flex>
  );
};
export default App;
```
### 不规则圆角---
debug: true
---
通过 `borderRadius="20px 20px 0 0"` 这类多值圆角字符串，让流光轨迹跟随不规则圆角容器。

```tsx
import React from 'react';
import { BorderBeam, Button, Card, Flex, Typography } from 'antd';
const radius = '20px 20px 0 0';
const App: React.FC = () => (
  <div style={{ width: 360 }}>
    <BorderBeam outset={0}>
      <Card
        title="Activity stream"
        style={{
          borderRadius: radius,
          overflow: 'hidden',
        }}
        styles={{
          body: {
            display: 'flex',
            flexDirection: 'column',
            gap: 16,
          },
        }}
      >
        <Typography.Text type="secondary">
          Use a multi-value `borderRadius` like `20px 20px 0 0` to keep the beam aligned with
          non-uniform corners.
        </Typography.Text>
        <Flex align="center" justify="space-between">
          <Typography.Text strong>12 running jobs</Typography.Text>
          <Button type="primary">View queue</Button>
        </Flex>
      </Card>
    </BorderBeam>
  </div>
);
export default App;
```
### 线宽---
debug: true
---
使用全局线宽 Token。

```tsx
import React from 'react';
import { BorderBeam, Card, ConfigProvider, Flex, Typography } from 'antd';
const Panel: React.FC<{ title: string; desc: string }> = ({ title, desc }) => {
  return (
    <div style={{ width: 320 }}>
      <BorderBeam>
        <Card title={title}>
          <Typography.Text type="secondary">{desc}</Typography.Text>
        </Card>
      </BorderBeam>
    </div>
  );
};
const App: React.FC = () => (
  <Flex gap={24} wrap>
    <Panel
      title="Default line width"
      desc="Uses the default global lineWidth token from the current theme."
    />
    <ConfigProvider
      theme={{
        components: {
          BorderBeam: {
            lineWidth: 3,
          },
        },
      }}
    >
      <Panel title="Custom line width" desc="Override lineWidth from theme.token." />
    </ConfigProvider>
  </Flex>
);
export default App;
```