aibase-ui

AIBase UI 组件库

基于Vue 3、TypeScript和Tailwind CSS的UI组件库，提供简洁、可自定义的UI组件。

组件概览

导航组件

导航组件包含以下几个核心组件：

1. AHeader - 基础头部容器组件，提供固定布局和响应式设计
2. ANavMenu - 导航菜单组件，支持多级菜单和弹出子菜单
3. AMobileMenuUnified - 移动端菜单组件
4. AModalContainer - 模态容器组件，用于弹出层
5. AIcon - 图标组件，支持自定义样式和类名
6. ABreadcrumb - 面包屑导航组件，支持自定义链接和当前页面显示
7. ALanguageSelector - 语言选择器组件，支持插槽自定义渲染，解决不同项目路由组件依赖问题
8. ANavigationBar - 完整导航条组件，整合logo、菜单、用户区域等功能，支持插槽自定义非组件库组件

基础组件

1. AButton - 按钮组件，支持多种类型、尺寸和状态
2. AInput - 输入框组件，支持各种输入类型和状态
3. ACard - 卡片组件，用于内容展示和分组

安装

npm install aibase-ui

使用方式

标准 Vue 项目

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { 
  AHeader, ANavMenu, AMobileMenuUnified, AModalContainer, AIcon,
  AButton, AInput, ACard 
} from 'aibase-ui'
import 'aibase-ui/style.css'

const app = createApp(App)

// 注册导航组件
app.component('AHeader', AHeader)
app.component('ANavMenu', ANavMenu)
app.component('AMobileMenuUnified', AMobileMenuUnified)
app.component('AModalContainer', AModalContainer)
app.component('AIcon', AIcon)

// 注册基础组件
app.component('AButton', AButton)
app.component('AInput', AInput)
app.component('ACard', ACard)

app.mount('#app')

Nuxt 项目

// nuxt.config.js
export default {
  modules: [
    'aibase-ui/nuxt'
  ],
  css: [
    'aibase-ui/style.css'
  ]
}

组件使用示例

导航组件示例

<template>
  <AHeader :fixed="true">
    <div class="header-left">
      <!-- Logo -->
      <div class="logo">
        <a href="/">
          <img src="/logo.svg" alt="Logo" />
        </a>
      </div>
      
      <!-- 桌面菜单 -->
      <div class="desktop-menu">
        <ANavMenu 
          v-for="item in menuItems" 
          :key="item.path" 
          :item="item" 
        />
      </div>
    </div>
    
    <div class="header-right">
      <!-- 用户区域 -->
      <div class="user-area">
        <AIcon name="icon-user" />
      </div>
      
      <!-- 移动菜单 -->
      <div class="mobile-menu-button">
        <AModalContainer ref="modalRef">
          <template #default>
            <AIcon name="icon-caidan" />
          </template>
          <template #content>
            <AMobileMenuUnified 
              v-for="item in menuItems"
              :key="item.path"
              :item="item"
              @close-menu="closeMenu"
            />
          </template>
        </AModalContainer>
      </div>
    </div>
  </AHeader>
</template>

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

const menuItems = [
  { title: '首页', path: '/' },
  { 
    title: '产品', 
    path: '/products',
    children: [
      { title: '产品1', path: '/products/1', icon: 'icon-ceshi' },
      { title: '产品2', path: '/products/2', icon: 'icon-youzhixinpin' }
    ]
  },
  { title: '关于', path: '/about' }
]

const modalRef = ref(null)
const closeMenu = () => {
  modalRef.value?.close()
}
</script>

基础组件示例

<template>
  <!-- 按钮组件 -->
  <AButton type="primary">提交</AButton>
  <AButton type="secondary" size="sm">取消</AButton>
  
  <!-- 输入框组件 -->
  <AInput v-model="inputValue" placeholder="请输入内容" />
  
  <!-- 卡片组件 -->
  <ACard title="卡片标题">
    <p>卡片内容</p>
    <template #footer>
      <AButton type="primary" size="sm">确认</AButton>
    </template>
  </ACard>
</template>

面包屑组件示例

<template>
  <!-- 基础用法 -->
  <ABreadcrumb 
    :list="[
      { name: '首页', path: '/' },
      { name: '产品', path: '/products' },
    ]"
    current="详情页"
  />

  <!-- 无当前页面 -->
  <ABreadcrumb 
    :list="[
      { name: '首页', path: '/' },
      { name: '产品', path: '/products' },
      { name: '详情页', path: '/products/detail' }
    ]"
  />
</template>

面包屑组件属性：

导航条组件示例

<template>
  <ANavigationBar
    :logoConfig="logoConfig"
    :menuItems="menuItems"
    :showLanguageSelector="true"
    @close-menu="handleCloseMenu"
  >
    <!-- 自定义语言选择器 -->
    <template #language-selector>
      <LanguageSelector />
    </template>

    <!-- 自定义用户区域 -->
    <template #user-area>
      <UserProfile />
    </template>

    <!-- 移动端语言选择器 -->
    <template #mobile-language-selector="{ closeMenu }">
      <LanguageSelector @language-change="closeMenu" />
    </template>

    <!-- 移动端用户区域 -->
    <template #mobile-user-area>
      <UserProfile />
    </template>
  </ANavigationBar>
</template>

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

const logoConfig = {
  src: '/logo.svg',
  alt: 'My App',
  href: '/'
}

const menuItems = [
  { title: '首页', path: '/' },
  { 
    title: '产品', 
    path: '/products',
    children: [
      { title: '产品1', path: '/products/1', icon: 'icon-ceshi' },
      { title: '产品2', path: '/products/2', icon: 'icon-youzhixinpin' }
    ]
  },
  { title: '关于', path: '/about' }
]

const handleCloseMenu = () => {
  console.log('移动端菜单已关闭')
}
</script>

导航条组件属性：

导航条组件事件：

导航条组件插槽：

LogoConfig 接口：

interface LogoConfig {
  src: string       // Logo图片路径
  alt?: string      // Logo替代文本
  href?: string     // Logo链接地址
  class?: string    // 自定义CSS类名
}

语言选择器组件示例

语言选择器组件通过插槽机制解决了不同项目中路由组件依赖的问题，支持 Nuxt、Vue Router 等不同路由方案。

<template>
  <!-- 基础用法（默认渲染） -->
  <ALanguageSelector 
    :languages="languages" 
    :current-language="currentLanguage"
    @language-change="handleLanguageChange"
  />

  <!-- Nuxt 项目中使用 -->
  <ALanguageSelector 
    :languages="languages" 
    :current-language="currentLanguage"
    @language-change="handleLanguageChange"
  >
    <template #language-item="{ language, isCurrent, onClick }">
      <SwitchLocalePathLink 
        :locale="language.code"
        :class="{ 'activeColor': isCurrent }"
        @click="onClick"
      >
        {{ language.name }}
      </SwitchLocalePathLink>
    </template>
  </ALanguageSelector>

  <!-- Vue Router 项目中使用 -->
  <ALanguageSelector 
    :languages="languages" 
    :current-language="currentLanguage"
    @language-change="handleLanguageChange"
  >
    <template #language-item="{ language, isCurrent, onClick }">
      <router-link 
        :to="{ name: $route.name, params: { ...$route.params, locale: language.code } }"
        :class="{ 'font-bold text-blue-600': isCurrent }"
        @click="onClick"
      >
        {{ language.name }}
      </router-link>
    </template>
  </ALanguageSelector>

  <!-- 自定义样式渲染 -->
  <ALanguageSelector 
    :languages="languages" 
    :current-language="currentLanguage"
    @language-change="handleLanguageChange"
  >
    <template #language-item="{ language, isCurrent, onClick }">
      <div 
        class="flex items-center space-x-2 hover:bg-blue-50 p-2 rounded"
        :class="{ 'bg-blue-100 text-blue-700': isCurrent }"
        @click="onClick"
      >
        <span>{{ getLanguageFlag(language.code) }}</span>
        <span>{{ language.name }}</span>
        <span v-if="isCurrent" class="text-xs bg-blue-500 text-white px-1 rounded">当前</span>
      </div>
    </template>
  </ALanguageSelector>
</template>

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

// 语言配置
const languages = [
  { code: 'zh-CN', name: '简体中文', showName: '中文' },
  { code: 'en', name: 'English', showName: 'EN' },
  { code: 'ja', name: '日本語', showName: '日本語' }
]

const currentLanguage = ref(languages[0])

function handleLanguageChange(language) {
  currentLanguage.value = language
  // 处理语言切换逻辑
}

function getLanguageFlag(code) {
  const flags = {
    'zh-CN': '🇨🇳',
    'en': '🇺🇸', 
    'ja': '🇯🇵'
  }
  return flags[code] || '🌐'
}
</script>

语言选择器组件属性：

语言选择器组件事件：

语言选择器组件插槽：

Language 接口定义：

interface Language {
  code: string        // 语言代码，如 'zh-CN', 'en'
  name: string        // 语言名称，如 '简体中文', 'English'
  showName?: string   // 显示名称（可选），如 '中文', 'EN'
}

导航配置工具

组件库提供了强大的导航配置工具，支持多环境域名配置和动态替换功能。

基础使用

import { 
  navigationConfig, 
  replaceNavigationDomains, 
  transformNavigationWithI18n 
} from 'aibase-ui'

// 配置域名
const domainConfig = {
  mcpUrl: 'https://mcp.aibase.cn',
  appUrl: 'https://app.aibase.cn',
  newsUrl: 'https://news.aibase.cn',
  wwwUrl: 'https://www.aibase.cn',
  modelUrl: 'https://model.aibase.cn'
}

// 替换域名并添加翻译
const finalNavigation = transformNavigationWithI18n(
  replaceNavigationDomains(navigationConfig, domainConfig),
  $t // 你的翻译函数
)

使用预设环境

import { navigationConfig, replaceNavigationWithPreset } from 'aibase-ui'

// 使用预设的生产环境配置
const navigation = replaceNavigationWithPreset(navigationConfig, 'production_cn')

链式调用（推荐）

import { NavigationHelper } from 'aibase-ui'

// 链式调用
const navigation = NavigationHelper
  .create()
  .withPreset('production_cn')
  .replacePath('home', 'https://custom.domain.com')
  .withI18n($t)
  .build()

快速替换菜单路径

import { replaceMenuPath, replaceMultipleMenuPaths } from 'aibase-ui'

// 单个替换
const newNav = replaceMenuPath(navigation, 'home', 'https://new-home.com')

// 批量替换
const newNav2 = replaceMultipleMenuPaths(navigation, {
  'home': 'https://new-home.com',
  'products': 'https://new-products.com'
})

预设环境配置

• production_cn: 中文生产环境 (*.aibase.cn)
• test_cn: 中文测试环境 (test-*.aibase.cn)
• production_intl: 国际生产环境 (*.aibase.com)
• test_intl: 国际测试环境 (test-*.aibase.com)

导航配置工具 API

开发与构建

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建标准版本
npm run build:main

# 构建Nuxt版本
npm run build:nuxt

# 生成类型定义
npm run build:types

# 完整构建（包含所有上述步骤）
npm run build:full

浏览器兼容性

支持所有现代浏览器和 IE11+（需要相应的 polyfill）。

许可证

MIT