tt-design

基于 React 17.0.1 和 Ant Design 4.24.8 的企业级前端组件库，使用 Rollup 打包，支持 Storybook 6.x 预览。

安装

yarn add tt-design

或：

npm install tt-design

tt-design 依赖宿主项目提供 react、react-dom、antd 等 peer dependencies，建议业务项目与本库保持以下主版本：

• [email protected]
• [email protected]
• [email protected]

快速开始

引入组件

import { Button } from 'tt-design';

function App() {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <Button type="default">Default Button</Button>
    </div>
  );
}

export default App;

引入样式

在其他项目中接入 tt-design 时，建议同时引入 Ant Design 基础样式和 tt-design 的公开样式入口：

import 'antd/dist/antd.css';
import 'tt-design/style.css';

兼容说明：

import 'tt-design/style.css';
import 'tt-design/dist/esm/index.css';
import 'tt-design/dist/cjs/index.css';

说明：

• tt-design 会产出自己的组件样式文件
• antd 基础样式没有内置到 tt-design 的产物中，宿主项目需要自行引入

按需引入重依赖组件

Chart、QRCode、RichText、ScriptEditor 涉及较重的运行时依赖（echarts、qrcode.react、@wangeditor/editor、monaco-editor）。虽然它们仍可通过根入口引入（import { Chart } from 'tt-design'），但为了减少主包体积，推荐使用子路径按需引入：

| 组件 | 子路径导入 | 额外依赖（需在宿主项目中安装） | |------|-----------|-------------------------------| | Chart | import { Chart } from 'tt-design/chart' | echarts（peer，optional） | | QRCode | import { QRCode } from 'tt-design/qrcode' | qrcode.react（peer，optional） | | RichText | import { RichText } from 'tt-design/rich-text' | @wangeditor/editor（peer，optional） | | ScriptEditor | import { ScriptEditor } from 'tt-design/script-editor' | monaco-editor（peer，optional） |

说明：

• 根入口引入时组件会通过 React.lazy 动态加载，首次渲染有 loading 状态
• 子路径引入直接加载核心实现，无 lazy 包装
• 重依赖组件的样式已包含在 tt-design/style.css 中，无需额外引入

主题

推荐方式：使用 ThemeProvider

ThemeProvider 会同时处理：

• Ant Design 4 的 ConfigProvider 主题配置
• --tt-* CSS 变量注入

import React from 'react';
import 'antd/dist/antd.css';
import 'tt-design/style.css';
import { ThemeProvider, Button } from 'tt-design';

function App() {
  return (
    <ThemeProvider theme="mintGreen">
      <Button type="primary">主要按钮</Button>
    </ThemeProvider>
  );
}

export default App;

运行时切换主题

如果项目需要在运行时动态切换主题，可以直接调用 applyTheme：

import React, { useEffect } from 'react';
import 'antd/dist/antd.css';
import 'tt-design/style.css';
import { applyTheme, Button } from 'tt-design';

function App() {
  useEffect(() => {
    applyTheme('mintGreen');
  }, []);

  return <Button type="primary">主要按钮</Button>;
}

export default App;

可用主题

• geekBlue
• dustRed
• mintGreen
• neonBlue
• sunsetOrange
• goldenPurple
• cyan

主题使用说明

• theme 支持直接传主题名字符串，例如 theme="mintGreen"
• 也支持先通过 getTheme() 获取配置对象后再传入
• 如果没有引入 tt-design 的 CSS 文件，组件样式不会完整生效
• 如果没有引入 antd/dist/antd.css，底层 Ant Design 组件样式会缺失

开发命令

常用命令如下：

yarn build
yarn storybook
yarn lint
yarn test:components

其他仓库脚本请以 package.json 为准。

仓库说明

• 对外接入说明优先看本 README
• 仓库长期开发规则见 AGENTS.md 和 CLAUDE.md
• 面向特定任务的流程说明放在 .agents/skills/ 与 .claude/skills/