ty-ui-mobile-cockpit

公司内部移动端组件库

基于 Ant Design Mobile 5 封装的公司内部移动端组件库，提供统一的 UI 风格和交互体验。现已包含 Cockpit 驾驶舱组件！

✨ 特性

• 🎯 基于 Ant Design Mobile 5 封装，保持设计一致性
• 📱 专为移动端优化的组件
• 🔧 TypeScript 支持，提供完整的类型定义
• 📚 完善的文档和示例
• 🎨 支持主题定制
• 📦 支持按需加载

📦 安装

npm install ty-ui-mobile-cockpit
# 或
yarn add ty-ui-mobile-cockpit

🔨 使用

基本使用

import { Button, Input, Card, Cockpit } from 'ty-ui-mobile-cockpit';
// 重要：导入样式文件
import 'ty-ui-mobile-cockpit/dist/index.css';

function App() {
  const footerTabs = [
    { key: 'home', title: '首页', icon: <HomeIcon />, url: '/home' },
    { key: 'profile', title: '我的', icon: <UserIcon />, url: '/profile' },
  ];

  return (
    <Cockpit
      NavBarTitle="我的应用"
      footerTabs={footerTabs}
      onNavigate={(url) => console.log('跳转到:', url)}
    >
      <div>
        <Button type="primary">主要按钮</Button>
        <Input placeholder="请输入内容" />
        <Card title="卡片标题">
          卡片内容
        </Card>
      </div>
    </Cockpit>
  );
}

按需加载

import Button from 'ty-ui-mobile-cockpit/lib/Button';
import Input from 'ty-ui-mobile-cockpit/lib/Input';
import Card from 'ty-ui-mobile-cockpit/lib/Card';
// 或者在单独使用组件时也可以导入所有样式
import 'ty-ui-mobile-cockpit/dist/index.css';

🔗 组件

Cockpit 驾驶舱组件 🊕

为移动端应用提供统一的页面布局和导航体验。

功能特点：

• 🗺️ 统一的页面布局和导航栏
• 🚀 响应式底部标签导航
• 📋 支持二级菜单显示
• 🎨 可自定义主题色
• 📱 安全区域适配
• 🔄 灵活的路由管理

Button 按钮

基于 Ant Design Mobile Button 组件封装，支持公司内部的设计规范。

Input 输入框

基于 Ant Design Mobile Input 组件封装，提供统一的输入体验。

Card 卡片

基于 Ant Design Mobile Card 组件封装，支持多种布局和样式。

🖥 本地开发

# 安装依赖
npm install

# 启动开发模式
npm run dev

# 启动演示应用
npm run demo

# 启动 Storybook
npm run storybook

# 构建组件库
npm run build

# 代码检查
npm run lint

📁 目录结构

├── src/                 # 源代码
│   ├── components/      # 组件目录
│   │   ├── Button/     # 按钮组件
│   │   ├── Input/      # 输入框组件
│   │   ├── Card/       # 卡片组件
│   │   └── Cockpit/    # 驾驶舱组件
│   └── index.ts        # 入口文件
├── demo/               # 演示应用
├── stories/            # Storybook 文档
└── dist/               # 构建产物

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT License