快速上手

安装

npm install @lite-code/aui-vue
# 或
pnpm add @lite-code/aui-vue

引入样式

在项目入口文件中引入全局样式：

import "@lite-code/aui-vue/styles";

基础使用

<template>
  <div>
    <AButton variant="primary">点击我</AButton>
    <AInput placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { AButton, AInput } from "@lite-code/aui-vue";
</script>

主题切换

使用 AuiPlugin 管理全局主题：

import { createApp } from "vue";
import App from "./App.vue";
import { AuiPlugin } from "@lite-code/aui-vue";

const app = createApp(App);
app.use(AuiPlugin, { defaultTheme: "dark", defaultAccentColor: "#6366f1" });
app.mount("#app");

在子组件中使用 useTheme Composable：

<template>
  <button @click="toggle">
    切换为 {{ theme === "dark" ? "亮色" : "暗色" }} 主题
  </button>
</template>

<script setup>
import { useTheme } from "@lite-code/aui-vue";

const { theme, setTheme, accentColor, setAccentColor } = useTheme();

function toggle() {
  setTheme(theme.value === "dark" ? "light" : "dark");
}
</script>

高亮色预设

import { ACCENT_PRESETS } from "@lite-code/aui-vue";

// ACCENT_PRESETS 包含 Indigo / Violet / Sky / Emerald / Rose / Amber

自定义主题色

通过修改 CSS 变量可全局覆盖主题色：

:root {
  --aui-accent: #your-color;
}