使用 reka-ui 原语

@swift-web/framework 以 reka-ui 为底层基础，reka-ui 已作为直接依赖安装，无需在项目中单独 pnpm add。

Sw* 组件专注于业务场景（加密图片、分块上传、HLS 播放器、富文本编辑器等），通用 UI 原语（Select、Tooltip、Tabs、Accordion、Popover 等）由 reka-ui 提供。

直接 import 使用

无需注册，直接在 <script setup> 中导入即可：

<script setup lang="ts">
import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectItemText,
} from 'reka-ui'

const city = ref('')
</script>

<template>
  <SelectRoot v-model="city">
    <SelectTrigger class="select-trigger">
      <SelectValue placeholder="请选择城市" />
    </SelectTrigger>
    <SelectContent class="select-content">
      <SelectItem value="beijing">
        <SelectItemText>北京</SelectItemText>
      </SelectItem>
      <SelectItem value="shanghai">
        <SelectItemText>上海</SelectItemText>
      </SelectItem>
    </SelectContent>
  </SelectRoot>
</template>

reka-ui 是无样式原语库，所有视觉样式需自行编写。推荐在 app/assets/styles/ 下为用到的组件单独建一个 CSS 文件，便于维护。

已有 Sw* 封装的 reka-ui 组件

以下 reka-ui 原语已被框架封装，请直接使用对应的 Sw* 组件，不要绕过封装层：

reka-ui 原语	对应 Sw* 组件	说明
Dialog	`<SwModal>`	增加了命令式 API、按钮插槽、`useModal()`
Dialog	`<SwAdPopup>`	广告弹窗场景（同基于 Dialog，增加频控 + 曝光埋点）
Toast	`<SwToast>`	增加了全局队列管理、四种语义类型、`useToast()`

可直接使用的 reka-ui 组件（部分）

以下是框架尚未封装、可直接使用的常用原语：

类别	组件
表单	Select、Checkbox、RadioGroup、TagsInput、PinInput、NumberField、Slider
弹出层	Tooltip、Popover、DropdownMenu、ContextMenu、HoverCard
导航	Tabs、NavigationMenu、Pagination、Accordion
数据展示	Avatar、Progress、ScrollArea、Separator
高级输入	Combobox、Editable、DateField、DatePicker

完整组件列表请参考 reka-ui 官方文档。