@yashon/design-system

ULTIMATE Design · 智能空间中控设计系统 + 完整演示 App

A React 19 + TypeScript + Tailwind design system for smart-space control panels (tablet-first dark UI) — includes 20+ base components, Chart.js wrappers, smart-space dashboard widgets, a full demo App, and a self-contained design-system.html preview.

✨ 特性

• 🎨 完整设计令牌：Primary / Accent / Semantic / Neutral 调色板，圆角、阴影、间距、字体、暗色表面
• 🧩 20+ 基础组件：Avatar / Badge / Button / Card / Checkbox / Dialog / Drawer / Dropdown / Input / Label / Progress / Radio / Sidebar / Slider / Switch / Table / Tabs / Toast / ToggleButton
• 📊 6 种 Chart.js 封装：Line / Bar / Pie / Doughnut / Radar / Area
• 🏠 智能空间中控仪表盘：HealthMetrics / EnvironmentMetrics / HeartRateChart / ActivityChart / SleepChart / HealthRadar / AIRecommendations / QuickControls
• 📱 平板端优先：玻璃拟态 / 光晕 / 8~12px 圆角克制风格
• 🌗 仅深色模式：与"科技未来感 · 智能空间"主题一致
• 📦 ESM + CJS + .d.ts 完整类型定义

📦 安装

npm install @yashon/design-system
# or
pnpm add @yashon/design-system

需要安装 peer deps：

npm install react@^18 react-dom@^18

🚀 快速开始

1. 注入设计令牌

import { designTokensCSS } from '@yashon/design-system'

function Root() {
  useEffect(() => {
    const style = document.createElement('style')
    style.textContent = designTokensCSS
    document.head.appendChild(style)
    return () => { document.head.removeChild(style) }
  }, [])

  return <App />
}

2. 使用组件

import { Button, Card, LineChart } from '@yashon/design-system'

export default function Demo() {
  return (
    <Card title="示例">
      <LineChart
        data={{
          labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
          datasets: [{ label: '心率', data: [72, 75, 78, 74, 76, 73, 71] }],
        }}
      />
      <Button variant="primary" onClick={() => alert('Hi')}>
        确认
      </Button>
    </Card>
  )
}

3. 跑完整演示 App

import { App } from '@yashon/design-system'

export default App

App 是一个完整的智能空间中控仪表盘页面（侧边栏 + 仪表盘 + 健康数据 + 环境监控 + AI 建议 + Toast 通知）。

4. 预览 HTML 演示

@yashon/design-system/design-system.html 是一个完全自包含的 HTML（CDN 引入 Chart.js + Inter 字体），双击即可在浏览器打开。

🎨 设计令牌速查

| Token | 用途 | 示例 | | --- | --- | --- | | --color-primary-500 | 主色 | #14b88e | | --color-accent-500 | 强调色 | #0ea5e9 | | --color-success-500 | 成功 | #22c55e | | --color-warning-500 | 警告 | #f59e0b | | --color-danger-500 | 危险 | #ef4444 | | --color-dark-bg | 暗色背景 | #0a0f1a | | --radius-md | 圆角 | 10px |

📄 许可证

MIT © 2026 yashon