tt-design-web-vue

TT Design Vue

基于 Vue 3 与 Element Plus 的 TT Design 风格组件库。

当前版本为 0.1.8（下一次发布的版本号，发布即 npm publish，不再改版本）。registry 上的最新已发布版本可用 npm view tt-design-web-vue dist-tags 查询。本项目从原 workspace 的 tt-design-vue 迁出，作为独立项目构建并提供真实的 JavaScript、类型声明和 CSS 产物。

安装

yarn add vue element-plus tt-design-web-vue

vue 与 element-plus 是 peer dependencies，请由宿主应用自行安装和维护版本。

快速开始

先注册 Element Plus，并按顺序导入基础样式和 TT Design 样式：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import 'tt-design-web-vue/style.css';

import App from './App.vue';

createApp(App)
  .use(ElementPlus)
  .mount('#app');

主题模式通过 data-tt-theme 控制，也可使用公共 API：

import { applyColorFamily, applyTheme, resetColorFamily } from 'tt-design-web-vue';

applyTheme('light'); // 'light' | 'dark' | 'system'

applyColorFamily('red'); // 换主题色系，可选值见 TT_COLOR_FAMILIES（14 个）
resetColorFamily(); // 回到库默认色系

按需从根入口导入组件：

<script setup lang="ts">
import { TtButton, TtDialog, TtForm, TtFormItem, TtInput } from 'tt-design-web-vue';
</script>

<template>
  <tt-form>
    <tt-form-item label="名称">
      <tt-input />
    </tt-form-item>
    <tt-button type="primary">保存</tt-button>
  </tt-form>
</template>

样式入口

下面两个入口都指向同一份构建后的 CSS；第二个保留用于兼容旧 workspace 的调用方式：

import 'tt-design-web-vue/style.css';
// 或
import 'tt-design-web-vue/dist/style.css';

组件库不会内置完整的 Element Plus 样式。因此，宿主必须先加载 Element Plus 的 CSS（或其自定义 Sass 主题），再加载 TT Design 样式。

主题

组件库通过 --tt-* CSS 变量提供主题契约。主色阶是当前主题色系（默认极客蓝）的别名，色板是唯一事实来源：

--tt-color-geek-blue-1 … 7  →  --tt-color-primary-1 … 7  →  --el-color-primary

换主题色只需覆盖对应色板变量，TT 组件与 Element Plus 桥接变量会一起跟随。全量色板（14 个色系 × 10 阶）、深色主题的推导规则和覆盖示例见 主题说明。

兼容范围

首发版本保留迁出源中全部根入口导出，包括基础组件与既有组合组件，例如 TtActivityFeed、TtQueryForm、TtEChartsWrapper 和 TtUserDisplay。所有组件导出均使用 Tt 前缀，与 Element Plus 的组件名称区分；与 React 基线的对应状态将记录在 组件兼容清单。

本地开发

yarn install
yarn lint
yarn test
yarn build
yarn test:package

• lint：运行严格的 Vue/TypeScript 静态检查。
• test：运行组件与公开 API 测试。
• build：生成 dist/index.js、dist/index.cjs、dist/types/index.d.ts 和 dist/style.css。
• test:package：校验构建产物、ESM/CJS 导出、CSS Token 和 npm tarball 包含的文件。
• docs:build：构建安装、主题、迁出与兼容性等 VitePress 长文档。
• storybook：启动组件交互展示站，提供 Docs、Canvas、Controls、Actions 与状态案例。
• storybook:build：构建静态 Storybook 展示站，用于 CI 验证。

迁出边界

原 workspace 包仍保留在：

/Users/meng/Documents/productcode/platform/apps/frontend/web/packages/tt-design-vue

本项目不会删除、移动或修改该路径，也不会在本次迁出中切换任何旧 workspace 消费者。

发布

发布前请依次运行构建与打包校验，并审阅 npm 将包含的文件：

yarn prepack
npm pack --dry-run

实际发布 registry 与 latest 标签必须在发布操作前单独确认。