@ace/ui

ACE 平台自研组件库 — 业务场景导向，框架中立。

安装

npm install @ace/ui

使用

1. 引入样式

在业务工程的入口文件（如 main.ts）中：

import '@ace/ui/styles'

2. 使用组件

<template>
  <AppShell>
    <template #top>
      <ModuleSwitcher :modules="modules" v-model="currentModule" />
    </template>
    <template #sidebar>
      <DynamicSidebar :menus="menus" v-model="currentPage" />
    </template>
    <template #breadcrumb>
      <Breadcrumb :items="breadcrumbItems" />
    </template>
    <template #default>
      <!-- 业务页面内容 -->
    </template>
  </AppShell>
</template>

<script setup>
import { AppShell, ModuleSwitcher, DynamicSidebar, Breadcrumb } from '@ace/ui'
import { usePlatformAuth } from '@ace/ui/composables'

const { userModules, currentModule, currentModuleMenus, breadcrumbItems } = usePlatformAuth()
</script>

3. 使用组合式函数

import { usePlatformAuth } from '@ace/ui/composables'

const { userModules, currentModule, switchModule } = usePlatformAuth()

组件清单

基础组件（Primitive）

| 组件 | 说明 | |------|------| | Button | 按钮，支持 primary/secondary/danger/text/link 变体 |

模式组件（Pattern）

| 组件 | 说明 | |------|------| | AppShell | 应用外壳，全局导航布局容器 | | ModuleSwitcher | 模块切换器，顶部下拉面板 | | DynamicSidebar | 动态侧边栏，随模块切换的左侧菜单 | | Breadcrumb | 面包屑导航 | | Badge | 状态徽章，支持 outline/dot/pulse 变体 |

设计令牌（Token）

所有视觉属性通过 CSS Variables 定义，业务工程升级 @ace/ui 即自动继承最新 Token。

业务工程 禁止覆盖 Token 变量，只允许在业务组件中使用。

技术栈

• Vue 3 + Composition API
• TypeScript
• CSS Variables（无 UI 框架依赖）
• Vite 构建

约束

• 禁止在业务工程中引入 Element Plus / Ant Design / Vuetify 等 UI 框架
• 所有颜色必须使用 Token，禁止硬编码
• 所有间距必须是 4px 的倍数
• 业务样式必须使用 scoped