Vue Registry

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

安装组件

项目需要先完成 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

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 文件。