# @club-employes/utopia 中文文档

规范地址：https://npmcn.com/package/%40club-employes/utopia/

版本：4\.463\.0
npm 元数据更新时间：2026-11-09T10:30:39.628Z
中文译文更新时间：2026-11-10T03:35:44.238Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40club-employes/utopia
原文对照：https://npmcn.com/package/%40club-employes/utopia/?lang=original
项目主页：https://ds-utopia.vercel.app/
源码仓库：https://github.com/club-employes/ds

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：36.5 MB，2147 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：22 个
- peer 依赖：vue ^3\.5\.33，vue-router ^4\.0\.0，@vueuse/core ^11\.0\.0，@vueuse/integrations ^11\.0\.0
- 首次发布：2025-07-30T14:13:01.268Z
- 最新版本发布：2026-11-09T10:30:39.371Z
- 近 30 天下载量：4977（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：474（近 12 个月 423 个）

## 中文简介

QQ 现代Vue 3设计系统,具有多品牌主题,设计代号,和30+组件. 支持具有轻/暗模式的Club Publicés & Gifteo品牌.

## 安装

```sh
npm install @club-employes/utopia
```

也可以使用：`pnpm add @club-employes/utopia`、`yarn add @club-employes/utopia`、`bun add @club-employes/utopia`

## README

# 乌托邦设计系统

[![npm version](https://badge.fury.io/js/@club-employes%2Futopia.svg)](https://www.npmjs.com/package/@club-employes/utopia) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D.svg)](https://vuejs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6.svg)](https://www.typescriptlang.org/)

> **现代 Vue 3设计系统** 具有多品牌主题,设计符号,以及30+生产准备组件. 建造时间 **俱乐部** 打开 **礼物** 带有完整的类型脚本支持.

## \* 特性

-   🧩 **30+ Vue 3 组件** - 原子、分子、有机体、布局
-   🎨 **多品牌主题** - 职业和礼品品牌俱乐部
-   🌙 **暗模式支持** - 所有主题的浅暗变体
-   🎯 **设计托肯斯** - 用样式词典生成的 CSS 变量
-   📱 **响应** - 具有分点公用事业的移动第一办法
-   ♿ **可访问** - WCAG 2.1 AA合规组件
-   🔧 **类型脚本** - 包括全部类型定义
-   🚀 **可摇动的树** - 只导入你需要的东西
-   📦 **0 配置** - 工作出来的盒子

## QQ 快速启动

### 安装

```bash
npm install @club-employes/utopia
```

### 基本用途

```vue
<template>
  <ThemeProvider :theme="clubEmployesLight">
    <div class="app">
      <Button variant="primary" size="medium" @click="handleClick">
        Get Started
      </Button>
      
      <Card variant="elevated">
        <Icon name="heart" size="large" />
        <h2>Welcome to Utopia</h2>
        <p>Modern design system for Vue 3</p>
      </Card>
    </div>
  </ThemeProvider>
</template>

<script setup lang="ts">
import { 
  Button, 
  Card, 
  Icon, 
  ThemeProvider, 
  clubEmployesLight 
} from '@club-employes/utopia'
import '@club-employes/utopia/styles'

const handleClick = () => {
  console.log('Button clicked!')
}
</script>
```

### 导入样式

```javascript
// Import all styles (recommended)
import '@club-employes/utopia/styles'

// Or import specific theme tokens
import '@club-employes/utopia/tokens/club-employes/light'
import '@club-employes/utopia/tokens/gifteo/dark'
```

## QQ 可用主题

```javascript
import { 
  clubEmployesLight,   // Club Employés light theme
  clubEmployesDark,    // Club Employés dark theme
  gifteoLight,         // Gifteo light theme
  gifteoDark           // Gifteo dark theme
} from '@club-employes/utopia'
```

## 组件

### 原子( 建筑块)

-   **按钮** - 有变体的互动按钮
-   **图标** - 1200+Lucide图标
-   **标记** - 多品牌标志
-   **徽标** - 状况指标
-   **纸牌** - 内容容器
-   **投入** - 表格控制器
-   **复选框** - 布尔输入
-   **切换** - 切换控制

### 分子 (简单组合)

-   **搜索框** - 用图标搜索输入
-   **输入选择** - 随着过滤而下降

### 有机物(复合成分)

-   **数据表** - 高级数据表
-   **页眉** - 导航头
-   **菜单** - 侧边栏导航

### 布局( 文件结构)

-   **默认拉尤特** - 主要应用程序布局

## \* 可编译

```javascript
import { useTheme, useFavicon, useScrollShadows } from '@club-employes/utopia'

// Theme management
const { theme, setTheme } = useTheme()
setTheme('club-employes', 'dark')

// Dynamic favicon
const { setFavicon } = useFavicon()

// Scroll shadows
const { shadowTop, shadowBottom } = useScrollShadows(containerRef)
```

## 设计托肯斯

所有组件都使用 CSS 自定义属性( 设计符号 ):

```css
.my-component {
  /* Colors */
  background: var(--utopia-color-surface);
  color: var(--utopia-color-text-primary);
  
  /* Spacing */
  padding: var(--utopia-space-md);
  margin: var(--utopia-space-lg);
  
  /* Typography */
  font-family: var(--utopia-font-family);
  font-size: var(--utopia-font-size-base);
  
  /* Borders */
  border-radius: var(--utopia-radius-md);
  border: 1px solid var(--utopia-color-border);
}
```

## 主题切换

```vue
<template>
  <div>
    <ThemeProvider :theme="currentTheme">
      <Button @click="toggleTheme">
        Switch to {{ isDark ? 'Light' : 'Dark' }} Mode
      </Button>
      <YourApp />
    </ThemeProvider>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  ThemeProvider, 
  clubEmployesLight, 
  clubEmployesDark 
} from '@club-employes/utopia'

const isDark = ref(false)
const currentTheme = computed(() => 
  isDark.value ? clubEmployesDark : clubEmployesLight
)

const toggleTheme = () => {
  isDark.value = !isDark.value
}
</script>
```

## 基于域的主题初始化( 无 FOUC)

对于具有不同域的多租户应用程序,您可以初始化主题 **在此之前** Vue 挂载来防止未设定内容的闪光 :

```typescript
// main.ts
import { createApp } from 'vue'
import { initializeTheme } from '@club-employes/utopia'
import '@club-employes/utopia/styles'
import App from './App.vue'

// Detect theme from domain
function getThemeFromDomain(): string {
  const hostname = window.location.hostname
  
  if (hostname.includes('gifteo')) {
    return 'gifteo-light'
  }
  
  if (hostname.includes('club-employes')) {
    return 'club-employes-light'
  }
  
  return 'club-employes-light' // Default
}

// Initialize theme BEFORE creating Vue app
async function bootstrap() {
  const themeName = getThemeFromDomain()
  
  try {
    await initializeTheme(themeName)
    console.log('✅ Theme initialized:', themeName)
  } catch (error) {
    console.error('❌ Failed to initialize theme:', error)
  }
  
  // Create Vue app (no FOUC!)
  const app = createApp(App)
  app.mount('#app')
}

bootstrap()
```

> 📖 **[见完整文件](https://npmcn.com/package/%40club-employes/utopia/THEME_INITIALIZATION.md)** 以先进的模式和实例.

## QQ 软件包出口

```javascript
// Main export
import { Button, Icon, ThemeProvider } from '@club-employes/utopia'

// Styles
import '@club-employes/utopia/styles'

// Specific theme tokens
import '@club-employes/utopia/tokens/club-employes/light'
import '@club-employes/utopia/tokens/club-employes/dark'
import '@club-employes/utopia/tokens/gifteo/light'
import '@club-employes/utopia/tokens/gifteo/dark'

// Icons list (JSON)
import iconsList from '@club-employes/utopia/icons'
```

## 高级用途

### 自定义主题配置

```vue
<script setup lang="ts">
import { ThemeProvider } from '@club-employes/utopia'

const customTheme = {
  colors: {
    primary: '#your-brand-color',
    secondary: '#your-secondary-color'
  },
  // ... other theme properties
}
</script>
```

### 树摇

```javascript
// Import only what you need
import { Button } from '@club-employes/utopia/components/Button'
import { Icon } from '@club-employes/utopia/components/Icon'
```

## 响应设计

组件为移动第一并默认响应:

```vue
<template>
  <Button 
    size="small"        <!-- Mobile -->
    size-md="medium"    <!-- Tablet -->
    size-lg="large"     <!-- Desktop -->
  >
    Responsive Button
  </Button>
</template>
```

## \* 无障碍

所有组成部分都遵循《世界保护准则》2.1 AA准则:

-   键盘导航
-   QQ 屏幕阅读器支持
-   高对比度模式
-   QQ 重点管理
-   ARIA 属性

## QQ 类型脚本支持

全部类型脚本定义为 **自动生成** 从源代码通过 `vite-plugin-dts`数字 :

```typescript
import type { ButtonProps, IconProps, ThemeConfig } from '@club-employes/utopia'

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  disabled: false
}
```

**如何运作:**

-   \* 组件道具在本地定义 `types.ts` 文件(真伪来源)
-   QQ 类型自动编译到 `dist/index.d.ts` 构建时
-   QQ 完全 IntelliSense 和自动补全支持
-   \* 不需要手动类型定义

## QQ 套装大小

-   **完整软件包**:~150KB(小于+克齐普)
-   **单一构成部分**:~5~15KB (树上刮花)
-   **仅指针**:~10KB(CSS变量)

## QQ 浏览器支持

-   ✅(Chrome 90+)
-   \* 火狐88+
-   萨法里14+
-   • 边缘90+

## 文档和资源

-   📖 **[完整文档](https://ds-utopia.vercel.app/)** - 互动实例和指南
-   🐙 **[GitHub 仓库](https://github.com/club-employes/ds)** - 源代码和问题
-   📦 **[国家防范机制一揽子计划](https://www.npmjs.com/package/@club-employes/utopia)** - 包裹细节

## 捐款

我们欢迎捐款! 请看我们的 [贡献指南](https://github.com/club-employes/ds/blob/main/CONTRIBUTING.md)。 。 。 .

1.  叉子存储器
2.  创建特性分支
3.  做你的改变
4.  添加测试和文件
5.  提交拉动请求

## 许可证

麻省理工学院 [俱乐部](https://github.com/club-employes)

* * *

**由俱乐部就业队制作**

[网站](https://ds-utopia.vercel.app/) 二. 支助 [GitHub 图像](https://github.com/club-employes/ds) 二. 支助 [国家预防机制](https://www.npmjs.com/package/@club-employes/utopia)

## 常见问题

### @club-employes/utopia 是什么？

QQ 现代Vue 3设计系统,具有多品牌主题,设计代号,和30\+组件\. 支持具有轻/暗模式的Club Publicés & Gifteo品牌\.

### 如何安装 @club-employes/utopia？

在项目目录运行 npm install @club-employes/utopia，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.33）、vue-router（^4\.0\.0）、@vueuse/core（^11\.0\.0）、@vueuse/integrations（^11\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 utopia-check-tokens、utopia-check-testids，可以用 npx utopia-check-tokens 直接运行。

### @club-employes/utopia 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @club-employes/utopia 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @club-employes/utopia 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @club-employes/utopia 可以商用吗？

@club-employes/utopia 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @club-employes/utopia 的下载量有多少？

根据 npm 官方下载统计，@club-employes/utopia 在 2026/10/10 – 2026/11/08 这 30 天内被下载 4,977 次，日均约 166 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @club-employes/utopia 还在维护吗？

最新版本 4\.463\.0 发布于 2026/11/09（今天）；至今共发布 474 个版本，其中过去 12 个月发布了 423 个；首次发布于 2025/07/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。