mscpore-react

基于 MSCPO 核心设计语言 (Swiss Style) 构建的高性能 React 组件库。全面拥抱“白底黑线”的网格化复古美学，去除了所有多余的阴影与圆角，呈现最纯粹、最硬核的像素级视觉体验。

✨ 特性

• ⚛️ React 19.2 — 基于最新 React 版本，支持非受控/受控组件的完美状态切换。
• 📦 Rollup Bundler — 优化的 ES Module 输出，支持 tree-shaking。
• 🔷 TypeScript — 完整的类型声明。
• 📚 Storybook 10 — 交互式组件文档与开发预览。
• 🧪 测试驱动 — Vitest 单元测试 + React Testing Library。
• ✅ 规范约束 — ESLint & Prettier & Stylelint BEM 命名规范。

📦 安装

# yarn
yarn add mscpore-react

# npm
npm install mscpore-react

依赖

| 依赖 | 版本 | |------|------| | react | 19.x | | react-dom | 19.x | | clsx | 2.x |

yarn add react react-dom clsx

🚀 快速开始

import {
  Button,
  Container,
  Heading,
  Grid,
  Card,
  CardImage,
  CardBody,
  Badge,
} from 'mscpore-react';

function App() {
  return (
    <Container>
      <Heading level="h1" gradient>
        Welcome to MSCPO
      </Heading>
      <Grid cols="cols-3">
        <Card hoverable>
          <CardImage src="/hero.jpg" alt="Hero" />
          <CardBody>
            <Badge count={5}>Notifications</Badge>
            <Heading level="h3">Card Title</Heading>
            <p>Card description goes here.</p>
          </CardBody>
        </Card>
      </Grid>
      <Button variant="ore-green">Get Started</Button>
    </Container>
  );
}

📁 项目结构

src/
├── components/
│   ├── Alert/           # 提示
│   ├── Anchor/          # 锚点
│   ├── Attachment/      # 附件
│   ├── Avatar/          # 头像
│   ├── Badge/           # 徽标
│   ├── BorderBeam/      # 边框流动效果
│   ├── Breadcrumb/      # 面包屑
│   ├── Bubble/          # 聊天气泡
│   ├── Button/          # 按钮
│   ├── Calendar/        # 日历
│   ├── Card/            # 卡片
│   ├── Checkbox/        # 多选框 / 单选框
│   ├── Collapse/        # 折叠面板
│   ├── ColorPicker/     # 颜色选择器
│   ├── ConfigProvider/  # 全局配置
│   ├── Container/       # 容器
│   ├── DatePicker/      # 日期/时间选择器
│   ├── Descriptions/    # 描述列表
│   ├── Divider/         # 分割线
│   ├── Empty/           # 空状态
│   ├── ErrorBoundary/   # 错误边界
│   ├── FeatureCard/     # 特色卡片
│   ├── FloatButton/     # 浮动按钮
│   ├── Form/            # 表单
│   ├── Grid/            # 网格
│   ├── Heading/         # 标题
│   ├── HeroBanner/      # 主横幅
│   ├── Input/           # 输入框
│   ├── InputNumber/     # 数字输入框
│   ├── Layout/          # 布局
│   ├── Marker/          # 会话标记
│   ├── Menu/            # 导航菜单
│   ├── Message/         # 消息
│   ├── MessageScroller/ # 消息滚动容器
│   ├── Modal/           # 对话框 / 抽屉
│   ├── Pagination/      # 分页
│   ├── Popover/         # 气泡卡片
│   ├── Progress/        # 进度条
│   ├── Rate/            # 评分
│   ├── SearchInput/     # 搜索框
│   ├── Select/          # 选择器
│   ├── Skeleton/        # 骨架屏
│   ├── Slider/          # 滑动输入条
│   ├── SocialButton/    # 社交按钮
│   ├── Space/           # 间距
│   ├── Spin/            # 加载中 / 引导 / 结果
│   ├── StatCard/        # 统计卡片
│   ├── Steps/           # 步骤条
│   ├── Switch/          # 开关
│   ├── Table/           # 表格
│   ├── Tabs/            # 标签页
│   ├── Tag/             # 标签
│   ├── Timeline/        # 时间轴
│   ├── Toast/           # 轻提示
│   ├── Tooltip/         # 工具提示
│   ├── Tour/            # 漫游式引导
│   ├── Tree/            # 树形控件
│   ├── Typography/      # 排版
│   ├── Upload/          # 上传 / 穿梭框
│   ├── Affix/           # 固钉
│   ├── Carousel/        # 轮播图
│   ├── Image/           # 图片预览
│   ├── SplitPane/       # 分割面板
│   └── index.ts
├── styles/
│   ├── _variables.scss
│   └── _mixins.scss
└── index.ts

API 参考

Affix

import { Affix } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | offsetTop | number | — | — | | offsetBottom | number | — | — | | target | (() => Window \| HTMLElement \| null) | — | — | | zIndex | number | 100 | — | | className | string | — | — | | onChange | ((affixed: boolean) => void) | — | — |

基本用例

<Affix offsetTop={120}>
  <Button variant="ore-dark">固钉按钮</Button>
</Affix>

Alert

MSCPO Alert – inline feedback banner.

Automatically gets role="alert" for screen-reader announcement. Use closable + onClose for dismissible alerts.

import { Alert } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | enum | — | Alert severity level | | title | string | — | Optional bold title above the content | | closable | boolean | — | Show a dismiss button | | onClose | (() => void) | — | Callback when close button is clicked | | className | string | — | — |

基本用例

<Alert type="info">
  This is an info message.
</Alert>

Anchor

import { Anchor } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | items | AnchorLinkType[] | [] | — | | onClick | ((e: MouseEvent<HTMLAnchorElement, MouseEvent>, link: { href: string; title: ReactNode; }) => void) | — | — | | className | string | — | — |

基本用例

<Anchor items={[
  { href: '#part-1', title: 'Part 1' },
  { href: '#part-2', title: 'Part 2' }
]} />

Attachment

MSCPO Attachment – file/image preview card. Strictly follows MSCPO pixel-grid design:

• Square, no border-radius
• 2px solid black border
• Progress bar with green accent
• Inset box-shadow depth

import { Attachment } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | name | string | — | File name or title | | size | string | — | File size string e.g. "2.4 MB" | | type | string | — | File type / extension e.g. "PDF", "PNG" | | thumbnail | string | — | Thumbnail or preview image URL | | state | enum | loaded | Current upload / load state | | progress | number | 0 | Progress 0–100 (used when state="uploading") | | actions | ReactNode | — | Optional action buttons | | onRemove | (() => void) | — | Show a remove / dismiss button | | onClick | (() => void) | — | Click handler for the whole attachment |

基本用例

<Attachment name="screenshot-2025.png" size="2.4 MB" type="PNG" thumbnail="https://picsum.photos/seed/img1/200/150" state="loaded" />

Avatar

MSCPO Avatar – square image with fallback initials.

Displays an image when src is provided and loads successfully. Falls back to initials (extracted from fallback or alt) when the image fails to load or src is empty.

Strictly follows the MSCPO pixel-grid design language:

• Sharp square corners (NO border-radius)
• 2px solid black border
• System font fallback text
• Inset box-shadow for 3D depth

import { Avatar } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | fallback | string | — | Fallback text (initials) when image is unavailable | | size | enum | md | Size variant | | status | enum | — | Status indicator: online / offline / away | | statusColor | string | — | Custom status color override |

基本用例

<Avatar src="https://i.pravatar.cc/150?img=3" alt="User" size="md" />

AvatarGroup

Horizontal stack of avatars with overlapping effect

import { AvatarGroup } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | className | string | — | — |

基本用例

<AvatarGroup>
  <Avatar src="a.jpg" alt="A" />
  <Avatar src="b.jpg" alt="B" />
  <Avatar fallback="+3" />
</AvatarGroup>

Badge

MSCPO Badge – numeric or dot status indicator.

import { Badge } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | — | Display variant: count badge, dot-only, or default | | count | number | — | Numeric count (only used when variant="count") | | overflowCount | number | — | Maximum count before showing "${overflowCount}+" | | danger | boolean | — | Danger / alert color styling | | className | string | — | — |

基本用例

<Badge count={5}>
  Notifications
</Badge>

BorderBeam

import { BorderBeam } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | duration | number | 10 | — | | borderWidth | number | 2 | — | | className | string | — | — |

基本用例

<div style={{ position: 'relative', width: 200, height: 100 }}>
  <BorderBeam duration={8} borderWidth={3} />
  <p>流动边框展示</p>
</div>

Breadcrumb

import { Breadcrumb } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | items | BreadcrumbItemType[] | — | — | | separator | ReactNode | / | — | | className | string | — | — |

基本用例

<Breadcrumb items={[
  { title: 'Home', href: '/' },
  { title: 'Library' },
  { title: 'Data' }
]} />

Bubble

MSCPO Bubble – conversational content container. Strictly follows MSCPO pixel-grid design:

• Sharp square corners (no border-radius)
• 2px solid black border
• Sent bubbles: white bg / received: dark bg
• Reaction chips as square bordered tags

import { Bubble } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | sent | Visual variant: sent (outgoing) or received (incoming) | | align | enum | end | Alignment within the message group | | grouped | boolean | false | Whether this bubble is grouped with the previous one | | children | ReactNode | — | Bubble content | | reactions | IReaction[] | — | Reactions below the bubble | | onReact | ((emoji: string) => void) | — | Callback when a reaction is clicked | | collapsible | boolean | false | Whether content is collapsible | | collapsed | boolean | false | Collapsed state (controlled) | | onToggleCollapse | (() => void) | — | Toggle collapse callback | | header | ReactNode | — | Header text (displayed inside the bubble) | | footer | ReactNode | — | Footer text (displayed inside the bubble) | | timestamp | string | — | Timestamp |

基本用例

<Bubble variant="sent" timestamp="2:30 PM">
  Hey! Are you coming to the meetup tonight?
</Bubble>

Button

MSCPO Button – primary action trigger.

Supports three ore-inspired variants (ore-dark, ore-green, ore-purple) plus fullWidth for block-level layout. Defaults to type="button" to prevent accidental form submissions.

import { Button } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | ore-dark | Visual variant matching MSCPO design language | | fullWidth | boolean | false | Make the button span its full container width | | size | enum | md | Button size | | loading | boolean | false | Loading state | | icon | ReactNode | — | Optional icon to render before children |

基本用例

<Button variant="ore-dark" disabled={false}>
  Ore Dark
</Button>

Calendar

import { Calendar } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | Date | new Date() | — | | onChange | ((date: Date) => void) | — | — | | className | string | — | — |

基本用例

<Calendar value={"2026-07-13T14:32:21.351Z"} />

CardImage

Card image wrapper with 16:9 aspect ratio

import { CardImage } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | wrapperClassName | string | — | Use a wrapper with aspect-ratio instead of bare img |

基本用例

<Card hoverable>
  <CardImage src="/assets/cover.jpg" alt="Cover" />
</Card>

CardBody

import { CardBody } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | className | string | — | — |

基本用例

<Card>
  <CardBody>
    <Heading level="h3">卡片标题</Heading>
    <p>卡片内容展示</p>
  </CardBody>
</Card>

CardFooter

import { CardFooter } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | className | string | — | — |

基本用例

<Card>
  <CardBody>主体内容</CardBody>
  <CardFooter>
    <Button variant="ore-green">操作按钮</Button>
  </CardFooter>
</Card>

Card

MSCPO Card – content container with optional hover, feature, and input-card variants.

The featureBg prop is validated before being passed into --mscpo-bg as a CSS url() value to prevent injection.

import { Card } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | hoverable | boolean | false | Enable hover lift effect | | compact | boolean | false | Tighter padding variant | | feature | boolean | false | Feature card style — hover reveals background image (MSCPO style) | | featureBg | string | — | URL for feature card background image. Must be a valid http(s) URL or relative path; invalid values are silently ignored. | | inputCard | boolean | false | Card with an input/action footer section |

基本用例

<Card hoverable>
  <CardBody>Hover Me!</CardBody>
</Card>

Carousel

import { Carousel } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | autoplay | boolean | false | — | | autoplaySpeed | number | 3000 | — | | dots | boolean | true | — | | arrows | boolean | true | — | | className | string | — | — | | onChange | ((current: number) => void) | — | — |

基本用例

<Carousel autoplay autoplaySpeed={4000} dots arrows>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
</Carousel>

Checkbox

import { Checkbox } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | checked | boolean | — | — | | defaultChecked | boolean | false | — | | onChange | ((e: ChangeEvent<HTMLInputElement>) => void) | — | — | | disabled | boolean | false | — | | className | string | — | — | | name | string | — | — |

基本用例

<Checkbox defaultChecked={false}>
  同意用户协议
</Checkbox>

Collapse

import { Collapse } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | items | CollapseItemType[] | [] | — | | activeKey | string \| string[] | — | — | | defaultActiveKey | string \| string[] | — | — | | accordion | boolean | false | — | | onChange | ((key: string \| string[]) => void) | — | — | | className | string | — | — |

基本用例

<Collapse 
  accordion 
  items={[
    { key: '1', label: '面板一', children: '内容一' },
    { key: '2', label: '面板二', children: '内容二' }
  ]} 
/>

ColorPicker

import { ColorPicker } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | | — | | defaultValue | `string` | | — | | onChange | ((color: string) => void) | — | — | | className | string | — | — |

基本用例

<ColorPicker defaultValue="#3C8527" />

Mentions

import { Mentions } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | | — | | defaultValue | `string` | | — | | onChange | ((value: string) => void) | — | — | | options | MentionsOptionType[] | [] | — | | prefix | string | @ | — | | placeholder | string | 输入 @ 触发建议 | — | | disabled | boolean | false | — | | className | string | — | — |

基本用例

<Mentions 
  prefix="@" 
  placeholder="输入 @ 提及他人" 
  options={[{ value: 'afc163' }, { value: 'zombieJ' }]} 
/>

ConfigContext

import { ConfigContext } from 'mscpore-react';

基本用例

// 内部配置 Context，通常无需直接调用

ConfigProvider

import { ConfigProvider } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | theme | ThemeConfig | — | — |

基本用例

<ConfigProvider theme={{ primaryColor: '#3C8527' }}>
  <App />
</ConfigProvider>

App

import { App } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | className | string | — | — |

基本用例

// 作为根组件包裹层
<App>
  <YourRoutes />
</App>

Watermark

import { Watermark } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | string | MSCPO | — | | className | string | — | — |

基本用例

<Watermark content="MSCPO Confidential">
  <div style={{ height: 300 }}>受保护的内容</div>
</Watermark>

Container

import { Container } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | fluid | boolean | false | Remove max-width constraint for full-bleed layouts | | bordered | boolean | false | Add MSCPO-style border on all sides | | borderTop | boolean | false | Add top border only (section divider) | | borderBottom | boolean | false | Add bottom border only |

基本用例

<Container fluid bordered>
  <h2>全宽带边框容器</h2>
</Container>

DatePicker

import { DatePicker } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | — | — | | defaultValue | string | `` | — | | placeholder | string | 请选择时间 | — | | disabled | boolean | false | — | | onChange | ((dateString: string) => void) | — | — | | className | string | — | — |

基本用例

<DatePicker placeholder="请选择日期" />

TimePicker

import { TimePicker } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | — | — | | defaultValue | string | `` | — | | placeholder | string | 请选择时间 | — | | disabled | boolean | false | — | | onChange | ((timeString: string) => void) | — | — | | className | string | — | — |

基本用例

<TimePicker onChange={(time) => console.log(time)} />

Descriptions

import { Descriptions } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | items | DescriptionsItemType[] | [] | — | | bordered | boolean | true | — | | column | number | 3 | — | | className | string | — | — |

基本用例

<Descriptions title="用户信息" bordered>
  <Descriptions.Item label="用户名">Zhou Maomao</Descriptions.Item>
  <Descriptions.Item label="电话">18100000000</Descriptions.Item>
</Descriptions>

QRCode

import { QRCode } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | 0 | — | | size | number | 160 | — | | className | string | — | — |

基本用例

<QRCode value="https://mscpo.com" />

Statistic

import { Statistic } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | value | string \| number | 0 | — | | precision | number | — | — | | prefix | ReactNode | — | — | | suffix | ReactNode | — | — | | className | string | — | — |

基本用例

<Statistic title="Active Users" value={112893} precision={2} />

Divider

MSCPO Divider – horizontal or vertical separator.

Uses the semantic <hr> element for plain horizontal dividers. Falls back to a <div> wrapper only when children (label text) or vertical direction is used, since <hr> cannot contain children.

import { Divider } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | direction | enum | — | Line direction | | dashed | boolean | — | Dashed style | | labelPosition | enum | — | Position of text label: left / center / right | | className | string | — | — |

基本用例

<div style={{ display:'flex', height:60 }}><span>Left</span><Divider direction="vertical" /><span>Right</span></div>

Dropdown

import { Dropdown } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | overlay | ReactNode | — | — | | trigger | enum | hover | — | | className | string | — | — | | placement | enum | bottomLeft | — |

基本用例

<Dropdown 
  overlay={
    <Menu>
      <Menu.Item>选项一</Menu.Item>
      <Menu.Item>选项二</Menu.Item>
    </Menu>
  }
>
  <Button>下拉菜单</Button>
</Dropdown>

Empty

MSCPO Empty – placeholder for empty states.

Renders a centered icon, description, and optional action slot.

import { Empty } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | description | string | — | Description text shown below the icon | | icon | ReactNode | — | Custom icon (ReactNode); defaults to 📭 | | className | string | — | — |

基本用例

<Empty><Button variant="ore-green">Create</Button></Empty>

ErrorBoundary

Catches JavaScript errors anywhere in the child component tree, logs those errors, and displays a fallback UI instead of crashing the entire React tree (white screen).

Usage:

import { ErrorBoundary } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | fallback | ReactNode | — | Custom fallback UI; defaults to a simple error panel | | onError | ((error: Error, info: ErrorInfo) => void) | — | Callback when an error is caught (e.g. send to monitoring service) |

基本用例

<ErrorBoundary>
  <MyComponentThatMightCrash />
</ErrorBoundary>

FeatureCard

import { FeatureCard } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | — | Card heading | | description | string | — | Card description text | | bgImage | string | — | Background image URL — hover reveals image with dark overlay (MSCPO style) | | bgAlt | string | `` | Background image alt text | | plain | boolean | false | Plain text variant without background image |

基本用例

<FeatureCard title="共同呼应" description="玩家与服主直接受益于我们的合作机制，玩家能够玩到风格各异的服务器。" bgImage="https://picsum.photos/seed/mscpo-ft1/640/400" />

FloatButton

import { FloatButton } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | backTop | boolean | false | Back-to-top behavior | | position | enum | bottom-right | Fixed position corner |

基本用例

<FloatButton backTop />

Form

import { Form } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | layout | enum | vertical | — | | className | string | — | — |

基本用例

<Form>
  <Form.Item label="用户名" name="username">
    <Input placeholder="请输入用户名" />
  </Form.Item>
  <Button type="submit" variant="ore-green">提交</Button>
</Form>

Grid

import { Grid } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | cols | enum | cols-3 | Column layout preset | | gap | enum | md | Gap size between items | | bordered | boolean | false | Add MSCPO-style borders between grid cells |

基本用例

<Grid cols="cols-3" gap="md">
  <Card>Col 1</Card>
  <Card>Col 2</Card>
  <Card>Col 3</Card>
</Grid>

Heading

import { Heading } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | level | enum | h1 | Semantic HTML level and visual size | | gradient | boolean | false | Apply the ore-gradient text effect (like MSCPO hero titles) |

基本用例

<Heading level="h1">
  Hero Heading
</Heading>

HeroBanner

import { HeroBanner } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | — | Main headline text | | subtitle | string | — | Optional subtitle / description | | label | string | — | Small label above the title | | gradient | boolean | false | Apply ore-gradient effect to the title | | children | ReactNode | — | CTA buttons or action elements |

基本用例

<HeroBanner label="MSCPO 社区" title="严选 Minecraft 服务器" subtitle="我们致力于打造公平、透明、高效的宣传和交流平台，为 Minecraft 生态注入新活力。" />

Image

import { Image } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | preview | boolean | true | — |

基本用例

<Image 
  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  width={200} 
/>

Input

MSCPO Input – text input with optional addons.

import { Input } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | size | enum | — | Input size | | prefix | ReactNode | — | Prefix element (icon, label, etc.) | | suffix | ReactNode | — | Suffix element (icon, button, etc.) | | fullWidth | boolean | — | Full-width mode | | error | boolean | — | Error state | | allowClear | boolean | — | Allow clearing the input |

基本用例

<Input placeholder="Enter text..." />

InputNumber

import { InputNumber } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | number | — | — | | defaultValue | number | — | — | | min | number | -Infinity | — | | max | number | — | — | | step | number | 1 | — | | disabled | boolean | false | — | | onChange | ((value: number \| null) => void) | — | — | | placeholder | string | — | — | | className | string | — | — |

基本用例

<InputNumber min={1} max={10} defaultValue={5} />

Layout

import { Layout } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | className | string | — | — | | style | CSSProperties | — | — |

基本用例

<Layout>
  <Header>Header</Header>
  <Layout>
    <Sider>Sider</Sider>
    <Content>Content</Content>
  </Layout>
  <Footer>Footer</Footer>
</Layout>

Splitter

import { Splitter } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | direction | enum | horizontal | — | | className | string | — | — |

基本用例

<Splitter>
  <Splitter.Panel defaultSize="30%">左侧内容</Splitter.Panel>
  <Splitter.Panel>右侧内容</Splitter.Panel>
</Splitter>

Marker

MSCPO Marker – conversation status markers, system notes, dividers. Strictly follows MSCPO pixel-grid design:

• Square, no border-radius
• 2px solid black borders where applicable
• Monospace or bold system font
• Clean geometric shapes

import { Marker } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | status | Visual variant | | children | ReactNode | — | Content – text string or ReactNode for rich content | | color | string | — | Color accent for status variant | | timestamp | string | — | Show a timestamp (used in divider variant) |

基本用例

<Marker variant="status">
  Online
</Marker>

Menu

import { Menu } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | items | MenuItemType[] | [] | — | | mode | enum | vertical | — | | selectedKeys | string[] | — | — | | defaultSelectedKeys | string[] | [] | — | | onClick | ((info: { key: string; }) => void) | — | — | | className | string | — | — |

基本用例

<Menu mode="horizontal">
  <Menu.Item key="home">首页</Menu.Item>
  <Menu.Item key="about">关于</Menu.Item>
</Menu>

Message

MSCPO Message – full message unit with avatar, sender, and bubble. Strictly follows MSCPO pixel-grid design:

• Square corners throughout
• 2px black borders on bubble
• System font typography
• Clean alignment grid

import { Message } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | received | Visual variant | | avatar | Pick<IAvatarProps, "status" \| "fallback" \| "size" \| "alt" \| "src"> | — | Avatar props – pass src, fallback, size, etc. | | sender | string | — | Sender display name | | children | ReactNode | — | Message content | | timestamp | string | — | Timestamp string | | footer | ReactNode | — | Footer content below the bubble | | grouped | boolean | false | Whether this message is part of a grouped sequence | | after | ReactNode | — | Additional content after the bubble (e.g. reactions handled by Bubble) |

基本用例

// Message 为命令式调用
Message.info('这是一条全局提示！');

MessageScroller

MSCPO MessageScroller – chat scroll container. Strictly follows MSCPO pixel-grid design:

• Sharp square corners (no border-radius)
• 2px solid black border
• Custom square scrollbar
• Clean geometric layout

import { MessageScroller } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | children | ReactNode | — | Message list content | | autoScroll | boolean | true | Whether to auto-scroll to bottom on new content | | showScrollToBottom | boolean | true | Show a "scroll to bottom" button when scrolled up | | onLoadMore | (() => void) | — | Callback when user scrolls near top (for loading history) | | loading | boolean | false | Whether more history is loading | | loadMoreThreshold | number | 100 | Threshold from top (px) to trigger onLoadMore |

基本用例

<MessageScroller 
  messages={[{ id: '1', text: '弹幕 1' }, { id: '2', text: '弹幕 2' }]} 
/>

Modal

import { Modal } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | open | boolean | false | — | | title | ReactNode | — | — | | onOk | (() => void) | — | — | | onCancel | (() => void) | — | — | | footer | ReactNode | — | — | | className | string | — | — | | confirmLoading | boolean | false | — | | maskClosable | boolean | true | — |

基本用例

const [open, setOpen] = useState(false);
    return (
      <div style={{ padding: '20px' }}>
        <Button onClick={() => setOpen(true)}>打开 Modal</Button>
        <Modal 
          {...args} 
          open={open} 
          onCancel={() => setOpen(false)}
          onOk={() => setOpen(false)}
        />
      </div>
    );

Drawer

import { Drawer } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | open | boolean | false | — | | title | ReactNode | — | — | | onClose | (() => void) | — | — | | placement | enum | right | — | | className | string | — | — | | maskClosable | boolean | true | — |

基本用例

<Drawer title="基础抽屉" placement="right" open={open} onClose={() => setOpen(false)}>
  <p>这里是抽屉内容...</p>
</Drawer>

open

import { open } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | description | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | placement | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

success

import { success } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | description | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | placement | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

info

import { info } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | description | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | placement | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

warning

import { warning } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | description | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | placement | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

error

import { error } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | description | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | placement | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

Pagination

import { Pagination } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | current | number | — | — | | total | number | 0 | — | | pageSize | number | 10 | — | | onChange | ((page: number, pageSize: number) => void) | — | — | | className | string | — | — |

基本用例

<Pagination total={50} pageSize={10} />

Popover

import { Popover } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | ReactNode | — | — | | content | ReactNode | — | — | | trigger | enum | hover | — | | className | string | — | — |

基本用例

<Popover 
  title="气泡标题"
  content="这里是气泡卡片的详细内容。"
  trigger="click"
>
  <Button>点击弹出气泡</Button>
</Popover>

Progress

import { Progress } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | percent | number | 0 | — | | status | enum | normal | — | | showInfo | boolean | true | — |

基本用例

<Progress percent={60} />

RadioGroup

import { RadioGroup } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | any | — | — | | defaultValue | any | — | — | | onChange | ((e: ChangeEvent<HTMLInputElement>) => void) | — | — | | disabled | boolean | — | — | | name | string | — | — | | className | string | — | — |

基本用例

<RadioGroup options={['Apple', 'Pear', 'Orange']} onChange={onChange} />

Radio

import { Radio } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | any | — | — |

基本用例

return (
      <div style={{ display: 'flex', gap: '16px' }}>
        <Radio value="1">Radio</Radio>
        <Radio value="2" disabled>Disabled Radio</Radio>
        <Radio value="3" checked disabled>Disabled Checked</Radio>
      </div>
    );

Rate

import { Rate } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | number | — | — | | defaultValue | number | 0 | — | | count | number | 5 | — | | disabled | boolean | false | — | | onChange | ((value: number) => void) | — | — | | className | string | — | — |

基本用例

<Rate count={5} defaultValue={3} />

SearchInput

import { SearchInput } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | — | Current value | | onChange | ((value: string) => void) | — | Change handler | | icon | ReactNode | — | Icon element (SVG) rendered on the left |

基本用例

<SearchInput icon={SearchSvg} placeholder="搜索服务器名称 / 标签 / 玩法..." style={{ maxWidth: 480 }} />,

Select

import { Select } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string \| number \| (string \| number)[] | — | — | | defaultValue | string \| number \| (string \| number)[] | — | — | | onChange | ((value: any) => void) | — | — | | options | SelectOptionType[] | [] | — | | placeholder | string | 请选择 | — | | disabled | boolean | false | — | | loading | boolean | false | — | | allowClear | boolean | false | — | | showSearch | boolean | false | — | | mode | enum | — | — | | className | string | — | — |

基本用例

<Select 
  options={[
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' }
  ]} 
  placeholder="请选择"
/>

Skeleton

import { Skeleton } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | text | Preset shape | | width | string \| number | — | Width override | | height | string \| number | — | Height override |

基本用例

<Skeleton variant="image" style={{ maxWidth: 360 }} />,

SkeletonCard

Pre-built skeleton card (image + title + 2 text lines)

import { SkeletonCard } from 'mscpore-react';

基本用例

<SkeletonCard />

Slider

import { Slider } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | number | — | — | | defaultValue | number | 0 | — | | min | number | 0 | — | | max | number | 100 | — | | step | number | 1 | — | | disabled | boolean | false | — | | onChange | ((value: number) => void) | — | — | | className | string | — | — |

基本用例

<Slider min={0} max={100} defaultValue={50} />

SocialButton

import { SocialButton } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | small | boolean | false | Render as a compact button | | href | string | — | URL for the link |

基本用例

<SocialButton href="https://github.com">
  GitHub
</SocialButton>

Space

import { Space } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | direction | enum | horizontal | — | | size | number \| "small" \| "middle" \| "large" | small | — | | align | enum | stretch | — | | wrap | boolean | nowrap | — | | className | string | — | — |

基本用例

<Space direction="vertical" size="lg">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</Space>

Spin

import { Spin } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | spinning | boolean | true | — | | tip | string | — | — | | className | string | — | — |

基本用例

<Spin spinning tip="获取服务器最新数据中..." />

SplitPane

import { SplitPane } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | direction | enum | horizontal | — | | defaultSize | number | 300 | — | | minSize | number | 50 | — | | maxSize | number | — | — | | className | string | — | — | | onChange | ((newSize: number) => void) | — | — |

基本用例

<SplitPane 
  split="vertical"
  defaultSize="50%"
>
  <div>左侧面板</div>
  <div>右侧面板</div>
</SplitPane>

StatCard

import { StatCard } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | — | Large display value (e.g. "100+") | | label | string | — | Small label text | | accent | boolean | false | Use accent (ore-green) color for the value |

基本用例

<StatCard value="128+" label="委员会人数" />

Steps

import { Steps } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | current | number | 0 | — | | direction | enum | horizontal | — | | items | StepItemType[] | [] | — | | onChange | ((current: number) => void) | — | — | | className | string | — | — |

基本用例

<Steps 
  current={1} 
  items={[
    { title: '第一步', description: '完成注册' },
    { title: '第二步', description: '填写信息' },
    { title: '第三步', description: '审核中' }
  ]}
/>

Switch

import { Switch } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | checked | boolean | — | — | | defaultChecked | boolean | false | — | | disabled | boolean | false | — | | onChange | ((checked: boolean) => void) | — | — | | className | string | — | — |

基本用例

<Switch defaultChecked={false} />

Table

import { Table } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | columns | ColumnType<any>[] | — | — | | dataSource | any[] | [] | — | | rowKey | string \| ((record: any) => string \| number) | key | — | | className | string | — | — | | loading | boolean | false | — | | pagination | false \| IPaginationProps | — | — | | onChange | ((pagination: any, filters: any, sorter: any) => void) | — | — |

基本用例

<Table 
  dataSource={[{ id: 1, name: 'John', age: 28 }]}
  columns={[
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' }
  ]}
/>

Tabs

import { Tabs } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | id | string | tabs | — | | testId | string | — | — | | selected | number | — | — | | setSelected | (idx: number) => void | — | — |

基本用例

<Tabs selected={0} setSelected={console.log}>
  <TabsList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabsList>
  <TabPanel>Content 1</TabPanel>
  <TabPanel>Content 2</TabPanel>
</Tabs>

Tag

import { Tag } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | enum | default | Visual variant |

基本用例

<Tag>
  默认
</Tag>

Timeline

import { Timeline } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | items | TimelineItemType[] | [] | — | | className | string | — | — |

基本用例

<Timeline 
  items={[
    { children: 'Create a services site 2015-09-01' },
    { children: 'Solve initial network problems 2015-09-01' }
  ]}
/>

open

import { open } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

success

import { success } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

info

import { info } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

warning

import { warning } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

error

import { error } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | ReactNode | — | — | | duration | number | — | — | | type | enum | — | — | | className | string | — | — | | onClose | (() => void) | — | — |

Tooltip

import { Tooltip } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | label | ReactNode | — | Tooltip content | | placement | enum | top | — |

基本用例

<div style={{padding:40}}><Tooltip label="Help text" placement="top"><Button variant="ore-dark">Hover</Button></Tooltip></div>

Tour

import { Tour } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | open | boolean | — | — | | steps | ITourStep[] | — | — | | onClose | (() => void) | — | — | | className | string | — | — |

基本用例

<Tour 
  open={open}
  onClose={() => setOpen(false)}
  steps={[
    { title: '第一步', description: '这是漫游指引的第一步', target: () => ref1.current }
  ]}
/>

Tree

import { Tree } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | treeData | TreeNodeType[] | [] | — | | expandedKeys | string[] | [] | — | | selectedKeys | string[] | [] | — | | onSelect | ((selectedKeys: string[]) => void) | — | — | | className | string | — | — |

基本用例

<Tree 
  treeData={[
    { title: 'parent 1', key: '0-0', children: [{ title: 'leaf', key: '0-0-0' }] }
  ]}
/>

Typography

import { Typography } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | className | string | — | — |

基本用例

<Typography.Title level={2}>H2 标题</Typography.Title>
<Typography.Text type="secondary">次要文本</Typography.Text>

Upload

import { Upload } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | onChange | ((info: { fileList: File[]; }) => void) | — | — | | multiple | boolean | false | — | | disabled | boolean | false | — | | className | string | — | — |

基本用例

<Upload.Dragger />,

Transfer

import { Transfer } from 'mscpore-react';

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | dataSource | TransferItem[] | [] | — | | targetKeys | string[] | [] | — | | onChange | ((targetKeys: string[]) => void) | — | — | | className | string | — | — |

基本用例

<Transfer 
  dataSource={mockData}
  targetKeys={targetKeys}
  onChange={handleChange}
  render={item => item.title}
/>