🎮 ExUI - Vue3 Cyberpunk UI Component Library

移动端优先的响应式 Vue3 组件库 | 赛博朋克主题风格

📖 在线文档 | 🎨 设计系统 | 🚀 快速开始 | 🎯 组件列表

✨ 设计理念

ExUI 是一个专为赛博朋克风格应用打造的 Vue3 组件库，灵感来源于赛博朋克美学和未来科技视觉。我们致力于创造：

🎯 核心特色

• 🌟 赛博朋克体验 - 深色主题配合霓虹蓝紫渐变，营造沉浸式未来科技氛围
• 📱 移动端优先 - 响应式设计，完美适配手机、平板、桌面端
• ⚡ 高性能 - 基于 Vue3 Composition API，轻量化设计，支持 Tree-shaking
• 🎨 现代科技感 - 流畅动画、发光效果、渐变边框、扫描线特效
• 🔧 开发友好 - 完整的 TypeScript 支持，类型安全
• 🌍 国际化 - 内置中英文支持，易于扩展
• ♿ 无障碍 - 遵循 WCAG 标准，支持键盘导航和屏幕阅读器
• 🎭 多主题 - 4 种内置主题，支持动态切换和自定义

🎨 视觉风格

// 主色调系统
--ex-color-primary: #29abe2; // 霓虹蓝
--ex-color-secondary: #a86bff; // 霓虹紫
--ex-color-accent: #ff3bd1; // 强调粉

// 背景色系
--ex-color-bg-primary: #0b0f14; // 主背景
--ex-color-bg-secondary: #0f1720; // 次级背景
--ex-color-bg-tertiary: #1a2332; // 浮起背景

// 文本色系
--ex-color-text-primary: #e6f0ff; // 主文本
--ex-color-text-secondary: #8fa3b8; // 次级文本

// 渐变效果
--ex-gradient-primary: linear-gradient(135deg, #29abe2 0%, #a86bff 100%);

🚀 快速开始

安装

# npm
npm install vue-ex-ui

# yarn
yarn add vue-ex-ui

# pnpm
pnpm add vue-ex-ui

📦 依赖说明：ExUI 依赖以下第三方库，安装时会自动安装：

• @fontsource/audiowide - Audiowide 字体（赛博朋克风格主字体）
• echarts - 图表组件（ExChart）
• qrcode - 二维码组件（ExQRCode）
• jsbarcode - 条码组件（ExBarcode）
• lunar-javascript - 日历组件的农历支持（ExCalendar）

字体会被打包到组件库中，其他依赖如果你不使用对应组件，它们不会被打包到你的应用中（支持 Tree-shaking）。

完整引入

// main.ts
import { createApp } from 'vue';
import ExUI from 'vue-ex-ui';
import 'vue-ex-ui/style.css';

const app = createApp(App);
app.use(ExUI);
app.mount('#app');

按需引入（推荐）

// 只导入需要的组件，减小打包体积
import { ExButton, ExInput, message } from 'vue-ex-ui';
import 'vue-ex-ui/style.css';

// 在组件中使用
export default {
  components: {
    ExButton,
    ExInput
  },
  methods: {
    handleClick() {
      message.success('操作成功！');
    }
  }
};

使用 Composition API：

<script setup lang="ts">
import { ref } from 'vue';
import { ExButton, ExInput, message } from 'vue-ex-ui';
import 'vue-ex-ui/style.css';

const value = ref('');

const handleSubmit = () => {
  message.success('提交成功！');
};
</script>

<template>
  <div>
    <ExInput v-model="value" placeholder="请输入" />
    <ExButton type="primary" @click="handleSubmit">提交</ExButton>
  </div>
</template>

💡 提示： 现代打包工具（Vite、Webpack 5+）会自动进行 Tree Shaking，只打包使用的组件。

📖 查看 按需加载文档 了解更多优化方案。

<!-- 组件使用示例 -->
<template>
  <div class="cyberpunk-app">
    <!-- 赛博朋克风格按钮 -->
    <ex-button type="primary" size="large" :loading="loading">启动系统</ex-button>

    <!-- 用户信息卡片 -->
    <ex-card class="user-stats" type="neon" hoverable>
      <ex-avatar :src="userAvatar" size="large" />
      <ex-badge :count="99" type="primary">
        <ex-icon>
          <img src="https://api.iconify.design/ri/trophy-line.svg" />
        </ex-icon>
      </ex-badge>
    </ex-card>

    <!-- 赛博朋克布局 -->
    <ex-layout has-sider>
      <ex-sider neon-border collapsible>
        <ex-menu>
          <ex-menu-item>控制中心</ex-menu-item>
          <ex-menu-item>数据面板</ex-menu-item>
        </ex-menu>
      </ex-sider>

      <ex-layout>
        <ex-header neon-border blur>
          <template #left>
            <img src="/logo.png" alt="Logo" />
          </template>
          <template #right>
            <ex-button type="primary">登录</ex-button>
          </template>
        </ex-header>

        <ex-content grid scanline>
          <h1>欢迎来到赛博世界</h1>
        </ex-content>

        <ex-footer neon-border>
          <template #center>© 2025 ExUI Cyberpunk</template>
        </ex-footer>
      </ex-layout>
    </ex-layout>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const loading = ref(false);
const playerAvatar = ref('/avatar.jpg');
</script>

📦 组件总览

🎯 开发进度跟踪

• [x] Typography - 排版文本组件
• [x] Icon - 图标组件 (基于 Iconify API)
• [x] Button - 按钮组件
• [x] Badge - 徽标计数组件
• [x] Image - 图片组件
• [x] Link - 链接组件
• [x] Avatar - 头像组件
• [x] Divider - 分割线组件
• [x] Space - 间距组件
• [x] Card - 卡片容器
• [x] Ellipsis - 文本省略组件
• [x] Watermark - 水印组件

• [x] Input - 文本输入框
• [x] NumberInput - 数字输入框
• [x] Select - 下拉选择器
• [x] Cascader - 级联选择器
• [x] Checkbox - 复选框
• [x] Radio - 单选框
• [x] Switch - 开关
• [x] Slider - 滑块
• [x] DateTimePicker - 日期时间选择器
• [x] Rate - 评分组件
• [x] FileUpload - 文件上传
• [x] FileDownload - 文件下载
• [x] FilePreview - 文件预览
• [x] ImageCrop - 图片裁剪
• [x] ImageCompress - 图片压缩
• [x] FileList - 文件列表/资源管理
• [x] Form - 表单容器及验证

• [x] Tag - 标签/标记
• [x] List - 列表
• [x] Empty - 空状态提示
• [x] VirtualList - 虚拟列表
• [x] Collapse - 折叠面板
• [x] Carousel - 走马灯/幻灯片
• [x] Timeline - 时间线
• [x] Progress - 进度组件
• [x] Calendar - 日历视图（支持农历）
• [x] Table - 表格
• [x] Tree - 树形控件
• [x] Code - 代码高亮组件
• [x] QRCode - 二维码组件
• [x] Barcode - 条码组件（支持 9 种格式）
• [x] Heatmap - 热力图
• [x] Skeleton - 骨架屏

• [x] Layout - 布局容器（Header/Sider/Content/Footer）
• [x] Grid - 栅格布局
• [x] Flex - 弹性布局容器
• [x] Menu - 导航菜单
• [x] LoadingBar - 加载条
• [x] Tabs - 选项卡
• [x] Dropdown - 下拉菜单
• [x] Breadcrumb - 面包屑导航
• [x] Steps - 步骤条
• [x] Anchor - 锚点/页面内导航
• [x] Pagination - 分页器

• [x] Dialog - 对话框
• [x] Modal - 模态对话框
• [x] Drawer - 抽屉/侧滑层
• [x] Tooltip - 文字提示
• [x] Popover - 气泡提示
• [x] Popconfirm - 气泡确认框
• [x] Message - 全局提示/通知条
• [x] Notification - 系统通知
• [x] Loading - 加载中/Spinner
• [x] Alert - 警告提示
• [x] Affix - 固定位置
• [x] Panel - 面板容器

• [x] ConfigProvider - 全局化配置（主题、国际化、尺寸）

📊 总体进度

总计组件: 68 个
已完成: 68 ✅
完成度: 100% 🎉

🎨 主题系统

• ✅ Neon Blue - 霓虹蓝主题（默认）
• ✅ Neon Pink - 玫瑰粉主题
• ✅ Dark - GitHub Dark 风格
• ✅ High Contrast - 矩阵绿黑客风格
• ✅ 支持动态主题切换
• ✅ 支持系统主题跟随
• ✅ 支持主题持久化

🎨 设计系统

🌈 色彩系统

// 主题色彩
--ex-color-primary: #29abe2; // 霓虹蓝
--ex-color-secondary: #a86bff; // 霓虹紫
--ex-color-accent: #ff3bd1; // 强调色

// 背景色彩
--ex-color-bg-primary: #0b0f14; // 主背景
--ex-color-bg-secondary: #0f1720; // 次级背景
--ex-color-bg-tertiary: #1a2332; // 浮起背景

// 文本色彩
--ex-color-text-primary: #e6f0ff; // 主文本
--ex-color-text-secondary: #8fa3b8; // 次级文本
--ex-color-text-disabled: #4a5568; // 禁用文本

// 状态色彩
--ex-color-success: #52c41a; // 成功
--ex-color-warning: #faad14; // 警告
--ex-color-error: #ff4d4f; // 错误
--ex-color-info: #1890ff; // 信息

// 透明度变量（支持主题切换）
--ex-color-primary-alpha-10: rgba(主色, 0.1);
--ex-color-primary-alpha-20: rgba(主色, 0.2);
--ex-color-primary-alpha-30: rgba(主色, 0.3);
// ... 更多透明度级别

📏 间距系统

--ex-space-xs: 4px; // 极小间距
--ex-space-sm: 8px; // 小间距
--ex-space-md: 16px; // 中等间距
--ex-space-lg: 24px; // 大间距
--ex-space-xl: 32px; // 超大间距
--ex-space-xxl: 48px; // 巨大间距

🎭 动画系统

// 缓动函数
--ex-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ex-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ex-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

// 持续时间
--ex-duration-fast: 150ms;
--ex-duration-normal: 300ms;
--ex-duration-slow: 500ms;

🎯 主题切换

import { setTheme, useTheme, usePersistedTheme } from 'vue-ex-ui';

// 手动切换主题
setTheme('neon-pink');

// 使用主题 Hook
const { theme, setTheme, toggleTheme } = useTheme();

// 持久化主题（自动保存到 localStorage）
const { theme } = usePersistedTheme();

🌍 国际化（i18n）

ExUI 统一使用 vue-i18n（Composition API）。你可以选择以下任一方式完成初始化。

• 推荐方式：使用 ExUI 提供的 createLocaleProvider
• 手动方式：自行创建 createI18n 并注入 ExUI 的语言包

一、快速开始（推荐）

import { createApp } from 'vue'
import App from './App.vue'
import { createLocaleProvider } from 'vue-ex-ui'

const app = createApp(App)

const i18nProvider = createLocaleProvider({
  locale: 'zh-CN', // 或 'en-US'
  messages: {
    // 可选：合并/覆盖默认文案
    // menu: { search: '查找菜单' }
  }
})

app.use(i18nProvider)
app.mount('#app')

二、手动集成 vue-i18n

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import { enUS, zhCN } from 'vue-ex-ui'

const app = createApp(App)

const i18n = createI18n({
  legacy: false,
  locale: 'zh-CN',
  messages: {
    'en-US': enUS,
    'zh-CN': zhCN,
  }
})

app.use(i18n)
app.mount('#app')

组件中使用

// 方式A：vue-i18n
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

// 方式B：ExUI 提供的作用域翻译（内部优先代理到 vue-i18n）
import { useLocale } from 'vue-ex-ui'
const { t: tm } = useLocale('menu')

// 示例
tm('search') // => '搜索菜单'

依赖与外部化

• 组件库将 vue-i18n 标记为 external（见 vite.config），并声明为 peerDependencies。
• 请在宿主项目安装：npm i vue-i18n，并按上述任一方式完成初始化。

📱 移动端优先

ExUI 采用移动端优先的响应式设计策略：

📐 断点系统

$breakpoints: (
  xs: 0px,
  // 手机竖屏 (< 576px)
  sm: 576px,
  // 手机横屏 (≥ 576px)
  md: 768px,
  // 平板竖屏 (≥ 768px)
  lg: 992px,
  // 平板横屏/小桌面 (≥ 992px)
  xl: 1200px,
  // 桌面 (≥ 1200px)
  xxl: 1400px, // 大桌面 (≥ 1400px)
);

🎯 移动端特性

• 触摸友好 - 44px 最小点击区域，符合人体工程学
• 手势支持 - 滑动、长按、双击等手势操作
• 性能优化 - 懒加载、虚拟滚动、按需加载
• 自适应布局 - 流式布局，自动适配屏幕尺寸
• 高清适配 - 支持 Retina 屏幕
• 离线支持 - PWA 兼容，可离线使用

📱 响应式示例

<template>
  <!-- 在移动端自动调整布局 -->
  <ex-layout has-sider>
    <ex-sider :collapsed="isMobile" :breakpoint="768" @breakpoint="handleBreakpoint">
      侧边栏内容
    </ex-sider>
    <ex-content>主要内容</ex-content>
  </ex-layout>
</template>

<script setup>
import { ref } from 'vue';

const isMobile = ref(window.innerWidth < 768);

const handleBreakpoint = broken => {
  isMobile.value = broken;
};
</script>

🛠️ 技术栈

| 技术 | 版本 | 说明 | | -------------------- | ----- | ------------------------ | | Vue | 3.4+ | 渐进式 JavaScript 框架 | | TypeScript | 5.9+ | 类型安全的 JavaScript | | Vite | 7.1+ | 下一代前端构建工具 | | SCSS | 1.92+ | CSS 预处理器 | | Iconify | API | 图标解决方案（无需安装） | | Vitest | 3.2+ | 单元测试框架 | | VitePress | 1.6+ | 文档生成工具 | | Vue I18n | 11.1+ | 国际化支持 | | JsBarcode | 3.12+ | 条码生成库 | | QRCode | 1.5+ | 二维码生成库 | | Lunar JavaScript | 1.7+ | 农历支持 |

🌃 赛博朋克特性

✨ 视觉效果

• 霓虹发光 - 按钮、边框、卡片霓虹发光效果
• 渐变动画 - 流畅的颜色过渡和主题切换
• 扫描线 - 经典赛博朋克扫描线动画
• 网格背景 - 未来科技感网格背景
• 毛玻璃 - 现代模糊背景效果
• 动态主题 - 4 种赛博朋克主题实时切换

🎨 特色组件效果

<!-- 霓虹边框布局 -->
<ex-layout>
  <ex-header neon-border blur />
  <ex-content grid scanline />
  <ex-footer neon-border />
</ex-layout>

<!-- 赛博朋克风格条码 -->
<ex-barcode value="CYBER2077" type="neon" />

<!-- 霓虹卡片 -->
<ex-card type="neon" hoverable />

<!-- 渐变按钮 -->
<ex-button type="primary" gradient />

🌍 国际化支持

ExUI 内置中英文语言包，支持全局配置和局部覆盖。

import { createApp } from 'vue';
import ExUI from 'vue-ex-ui';
import { zhCN, enUS } from 'vue-ex-ui/locale';

const app = createApp(App);

// 全局配置语言
app.use(ExUI, {
  locale: zhCN, // 或 enUS
});

// 或使用 ConfigProvider 局部配置

<template>
  <ex-config-provider :locale="locale">
    <your-app />
  </ex-config-provider>
</template>

<script setup>
import { ref } from 'vue';
import { zhCN, enUS } from 'vue-ex-ui/locale';

const locale = ref(zhCN);

const switchLanguage = () => {
  locale.value = locale.value === zhCN ? enUS : zhCN;
};
</script>

支持的语言

• 🇨🇳 简体中文 (zh-CN)
• 🇺🇸 英文 (en-US)

自定义语言包

import type { Locale } from 'vue-ex-ui';

const customLocale: Locale = {
  name: 'ja-JP',
  button: {
    confirm: '確認',
    cancel: 'キャンセル',
    // ...
  },
  // ...
};

🌟 特别感谢

感谢所有 AI 为 ExUI 做出贡献！

** 让我们一一起打造最酷的赛博朋克 UI 组件库！**

Made with ❤️ by ExUI Team

⭐ Star | 🐛 Issues | 💬 Discussions