aurora-plus

Aurora Plus

Aurora Plus 是 Vue 3 通用组件库，npm 包名为 aurora-plus。公共 API 使用 Au 前缀，支持完整安装、按需导入和命令式服务。

当前组件

弹性布局

• 表单、列表、面板和导航组件默认允许随父容器收缩，长文本会换行、截断或在横向导航内滚动，避免内容撑破布局。
• Dialog、Drawer、Popover、Dropdown、Tooltip、ContextMenu 和 FloatingToolbar 的可用尺寸受视口约束；窄屏下的层级菜单会改为容器内展开。
• Button、Link、Checkbox 和 Switch 保留内容驱动宽度，但不会超过父容器；可伸缩文本区域不会挤压图标、状态标记等结构元素。
• 图标、颜色样本、开关轨道、圆形按钮和桌面窗口控制键需要保持形状，因此仍使用明确的结构尺寸。控件高度继续由 size 或组件变体控制，不随屏幕宽度自动放大。

安装

npm install aurora-plus

完整安装

import { createApp } from 'vue';
import AuroraPlus from 'aurora-plus';
import 'aurora-plus/style.css';
import App from './App.vue';

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

按需导入

<script setup>
import { AuButton, AuMessage } from 'aurora-plus';
import 'aurora-plus/style.css';

function save() {
  AuMessage.success('保存成功');
}
</script>

<template>
  <AuButton type="primary" @click="save">保存</AuButton>
</template>

图标

从独立的 aurora-plus/icons 入口按需导入图标组件，并传给 AuIcon 或其他接受图标的 Aurora Plus 组件。图标实现已包含在 Aurora Plus 的发布产物中，只需安装 aurora-plus：

<script setup>
import { AuButton, AuIcon } from 'aurora-plus';
import { IconBold, IconHeart } from 'aurora-plus/icons';
</script>

<template>
  <AuButton :icon="IconBold">加粗</AuButton>
  <AuIcon :icon="IconHeart" size="24" color="#df4c62" />
</template>

主题

使用 setAuroraTheme 在运行时切换亮色和暗色：

import { setAuroraTheme } from 'aurora-plus';

setAuroraTheme('dark');
setAuroraTheme('light');

使用 setAuroraMaterial 切换玻璃材质，默认 solid，可选 soft、clear 和 solid：

import { setAuroraMaterial } from 'aurora-plus';

setAuroraMaterial('clear');
setAuroraMaterial('solid');