Skip to main content

​
概述

使用 shadcn/ui 构建，基于 Radix UI 提供无障碍支持。

​
组件列表

组件文件用途
ConfirmButtonconfirm-button.tsx确认按钮
CancelButtoncancel-button.tsx取消按钮
DongButtondong-button.tsxDong 按钮
PoissonDialogpoisson-dialog.tsx弹窗
PoissonInputpoisson-input.tsx输入框
PoissonToastpoisson-toast.tsx提示消息
PoissonLoadingpoisson-loading.tsx加载动画
DropdownMenudropdown-menu.tsx下拉菜单
Selectselect.tsx选择器
SelectDropdownselect-dropdown.tsx选择下拉框
Switchswitch.tsx开关
Tooltiptooltip.tsx工具提示
OptimizedImageoptimized-image.tsx优化图片组件
Emptyempty.tsx空状态占位

​
目录结构

components
ui
confirm-button.tsx
cancel-button.tsx
dong-button.tsx
poisson-dialog.tsx
poisson-input.tsx
poisson-toast.tsx
poisson-loading.tsx
dropdown-menu.tsx
select.tsx
select-dropdown.tsx
switch.tsx
tooltip.tsx
optimized-image.tsx
empty.tsx
seo

​
主题定制

/* globals.css - uses --p-* and --illa-* naming scheme, not shadcn --primary */
:root {
  /* p-techPurple (primary purple) */
  --p-techPurple-01: #26189c;
  --p-techPurple-02: #422ec4;
  --p-techPurple-03: #654aec;  /* primary brand color */
  --p-techPurple-04: #8368f0;
  --p-techPurple-08: #f0e8ff;

  /* p-grayBlue (text / neutral) */
  --p-grayBlue-01: #0b0c0f;
  --p-grayBlue-02: #1d2129;
  --p-grayBlue-03: #787e85;
  --p-grayBlue-09: #f2f3f5;

  /* p-background */
  --p-background-gray01: #edeef0;
  --p-background-white01: #ffffff;
  /* ... */
}

​
使用示例

import { ConfirmButton } from '@/components/ui/confirm-button';
import { PoissonDialog } from '@/components/ui/poisson-dialog';

function Example() {
  return (
    <PoissonDialog>
      <ConfirmButton>确认</ConfirmButton>
      {/* 弹窗内容 */}
    </PoissonDialog>
  );
}

​
最佳实践

  1. 复用 shadcn/ui 组件，保持风格统一
  2. 遵循 Radix UI 的无障碍设计规范
  3. 通过 CSS 变量定制主题颜色