Kepler Mobile

专为量化金融业务设计的移动端 UI 组件库

棱角为骨 · 猎刀为魂

特性

• 🎯 专为金融场景设计：涨跌色独立体系、金额承重墙、数字翻牌动画
• ⚡ 零圆角设计：棱角三定律，边界二值逻辑
• 🔪 猎刀出鞘交互：表格行触摸时左侧锚线劈开
• 🎨 主题切换：浅色 / 深色 / A股 / 美股风格
• 📱 移动端优先：安全区适配、触摸反馈、震动触觉

安装

npm install @gulun/kepler-mobile

快速开始

import React from 'react';
import {
  Button,
  Card,
  Table,
  AmountWall,
  CardFlow,
  CardFlowItem,
} from '@gulun/kepler-mobile';
import '@gulun/kepler-mobile/dist/kepler-mobile.css';

// 主题切换
document.body.classList.add('dark'); // 深色模式
// document.body.classList.add('us-market'); // 美股风格

function App() {
  return (
    <Card>
      <Table
        columns={[
          { key: 'name', title: '股票' },
          { key: 'price', title: '价格', align: 'right' },
        ]}
        dataSource={[
          { id: 1, name: '腾讯控股', price: 380.5 },
          { id: 2, name: '阿里巴巴', price: 85.2 },
        ]}
      />
      <AmountWall value={5000000} />
      <Button type="primary" block>
        确认下单
      </Button>
    </Card>
  );
}

设计原则

棱角三定律

| 定律 | 工程体现 | |------|----------| | 可见性 | border-radius: 0 !important | | 不模糊 | 边框仅三个等级 | | 不表演 | box-shadow: none !important |

灵动三定律

• 独立性：数据在跳动，不依赖用户指令
• 猎手本能：猎刀出鞘 150ms 劈开
• 不喧哗：所有动效 ≤200ms

时间伦理

| CSS 变量 | 值 | 名称 | |----------|------|------| | --time-press | 0.06s | 触觉诚实线 | | --time-slash | 0.15s | 猎刀出鞘线 | | --time-cognitive | 0.18s | 认知完整线 |

组件列表

通用基础（9 个）

| 组件 | 说明 | |------|------| | Button | 主要、次要、危险、文本按钮 | | Icon | 零圆角矢量图标 | | Typography | 标题、正文、辅助文本 | | Divider | 1px 实线分割线 | | Space | 间距系统 | | Avatar | 用户头像 | | Spin | 加载指示器 | | Form | 表单容器 | | FormItem | 表单项 |

数据展示（12 个）

| 组件 | 说明 | |------|------| | Table | 表格，猎刀出鞘 + 光学矩阵 | | Card | 卡片容器 | | Tag | 标签 | | Badge | 角标 | | KpiCard | 指标卡片 | | Statistic | 统计数值 | | Progress | 进度条 | | Timeline | 时间线 | | Empty | 空状态 | | Skeleton | 骨架屏 | | Cell | 列表项 | | CellGroup | 列表组 |

数据录入（9 个）

| 组件 | 说明 | |------|------| | Input | 输入框 | | Textarea | 多行文本 | | Select | 下拉选择 | | DatePicker | 日期选择 | | Switch | 开关，60ms 跃迁 | | Checkbox | 复选框 | | Radio | 单选框 | | SearchBar | 搜索栏 | | Upload | 文件上传 |

反馈（3 个）

| 组件 | 说明 | |------|------| | Alert | 警告提示 | | Toast | 轻提示 | | Modal | 模态框，底部弹出 |

导航（7 个）

| 组件 | 说明 | |------|------| | Tabs | 标签页 | | Steps | 步骤条 | | Pagination | 分页 | | Breadcrumb | 面包屑 | | Menu | 菜单 | | BottomNav | 底部导航 | | PageContainer | 页面容器 |

工具类（6 个）

| 组件 | 说明 | |------|------| | JsonViewer | JSON 展示 | | Diff | 差异对比 | | MaskText | 脱敏文本 | | Watermark | 水印 | | CopyableText | 可复制文本 | | CodeInline | 行内代码 |

开发

# 安装依赖
npm install

# 启动 Storybook
npm run storybook

# 构建
npm run build

# 测试
npm run test

主题切换

// 深色模式
document.body.classList.add('dark');

// 美股风格（A 股 convention 红涨绿跌，美股相反）
document.body.classList.add('us-market');

// 紧凑模式
document.body.classList.add('compact');

License

MIT