使用 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 官方文件。