Vue Registry

Vue Registry 把轻量 Adapter 源码复制到你的项目中；组件视觉仍由框架无关的 ak-ui CSS Core 提供。

完整属性、插槽、模型与边界行为见 Vue Registry API。从 0.2.x 升级请参阅 1.0 迁移指南。

样式复用模型

模块	负责内容	复用接口
CSS Core	色彩、字体、间距、状态与动效	.ak-* 类名、--ak-* variables
Vue Adapter	语义结构、属性、插槽、事件与键盘交互	输出对应的 Core 类名与状态类
文档主题	示例编排和页面布局	不进入组件实现

Vue 文件不再复制组件 CSS。调整 src/scss 后，原生 HTML 与 Vue 组件会获得同一份视觉结果；Registry 校验也会阻止 Adapter 重新引入 <style>。

入场与数字增长组件 AkEntrance / AkCountUp 见 效果组件文档。

安装组件

项目需要先完成 shadcn-vue 初始化：

pnpm dlx shadcn-vue@latest init

然后按需安装组件：

Button

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/button.json

Card

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/card.json

Input Number

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/input-number.json

Status

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/status.json

Progress

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/progress.json

Notice

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/notice.json

Tabs

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/tabs.json

Dashboard Depth

pnpm dlx shadcn-vue@latest add https://ak-ui.yyj.moe/r/dashboard-depth.json

Vue 实际渲染

下面不是 HTML 字符串预览，而是直接挂载的 Vue 组件。按钮事件与 v-model 都可以交互。

部署协议 / 01

复制源码后可以直接修改结构、属性和交互。

当前部署单位：3

数据展示与终端导航

新组件继续复用 CSS Core；Vue Adapter 只同步数值、语义属性和交互状态。

先锋高级资深干员Online作战终端已连接

Deployment3 / 12

Deploy3units

CAUTION

部署单位发生变化

当前队列由 Input Number 与进度组件共同驱动，数值变化会立即同步。

Operation / 4-10

灯火将熄

确认敌方情报、推荐等级与理智消耗后开始行动。

Squad / E2

当前编队 12 / 12

先锋与医疗干员已经就绪，可以继续调整支援单位。

Reward / Preview

常规掉落与首次掉落

完成行动后可能获得作战记录、龙门币与培养材料。

使用代码

<script setup lang="ts">
import { ref } from 'vue'
import { AkButton } from '@/components/ui/button'
import { AkInputNumber } from '@/components/ui/input-number'
import { AkStatus, AkTag } from '@/components/ui/status'

const count = ref(3)
</script>

<template>
  <AkButton variant="action">
    开始行动
  </AkButton>
  <AkInputNumber v-model="count" :max="12" label="部署单位" />
  <AkTag variant="advanced">高级资深干员</AkTag>
  <AkStatus label="Online" detail="作战终端已连接" />
</template>

组件内部会导入 @yunyoujun/ak-ui CSS Core。需要调整视觉时，优先覆盖 --ak-* CSS variables；需要调整结构或交互时，直接修改复制到项目中的 Vue 文件。

景深复用

景深算法属于 Core 的框架无关能力。原生 HTML 可以直接创建控制器，并在页面销毁时清理：

import { createDashboardDepth } from '@yunyoujun/ak-ui/depth'

const dashboard = document.querySelector('[data-dashboard]')
if (!dashboard) throw new Error('Dashboard element not found')
const depth = createDashboardDepth(dashboard)

// SPA 页面离开时调用
depth.destroy()

Vue 项目可以按需安装 Registry composable。它只负责 Vue 生命周期，实际计算仍调用同一个 createDashboardDepth()：

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useDashboardDepth } from '@/composables/useDashboardDepth'

const dashboard = useTemplateRef<HTMLElement>('dashboard')
useDashboardDepth(dashboard)
</script>

<template>
  <section ref="dashboard" class="ak-dashboard" data-dashboard>
    <div class="ak-dashboard__layer" data-depth="0.08">...</div>
    <div class="ak-dashboard__layer" data-depth="0.2">...</div>
  </section>
</template>

API 参考

组件属性、事件与插槽参阅 Vue Registry API。