常見問題

安裝與設定

如何安裝 @lh-ui/vue3？

pnpm add @lh-ui/vue3

如何匯入元件？

import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

app.use(LhUiPlus)

如何按需匯入？

import { LhButton, LhInput } from '@lh-ui/vue3'

主題定製

如何自訂主題色？

<LhConfigProvider :theme-vars="{ 'primary-color': '#e63946' }">
  <App />
</LhConfigProvider>

暗色模式如何使用？

import { useLhTheme } from '@lh-ui/vue3'
const { theme, toggleTheme } = useLhTheme()

useLhTheme 傳回 { theme, setTheme, toggleTheme }：theme 是當前明暗模式（light / dark），toggleTheme 切換，setTheme 直接設定。

如何切換預設主題？

用 useLhPresetTheme：

import { useLhPresetTheme } from '@lh-ui/vue3'
const { preset, setPreset, presets } = useLhPresetTheme()
setPreset('songhua') // 切到松花綠，寫入 :root 並持久化

傳入 applyToRoot: false 可只取傳回的 themeVars 交給 LhConfigProvider 做局部作用域。詳見預設主題。

國際化

如何切換語言？

<script setup lang="ts">
import { LhConfigProvider, enUS } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :locale="enUS">
    <App />
  </LhConfigProvider>
</template>

語言包從套件根路徑具名匯入（zhCN / enUS）。

如何新增語言？

語言包原始碼位於共享層 @lh-ui/share（@lh-ui/share/locales/lang/），本儲存庫不再持有。 執行時註冊新語言：lhlocale.use({ locale: 'xx-XX', messages })，lhlocale 從 @lh-ui/vue3 匯出。

元件使用

sx 快速版面配置怎麼用？

<LhButton :sx="{ mt: 2, px: 4 }">按钮</LhButton>

sx 只支援版面配置類屬性（寬高 w / h、間距 m* / p*、彈性版面 display / flex 等）；顏色請用 type 或主題變數控制。

花紋背景如何啟用？

<LhConfigProvider :pattern-components="['button', 'dialog']">
  <LhButton bg-pattern="var(--lh-pattern-willow)">花纹按钮</LhButton>
</LhConfigProvider>

patternComponents 接收小寫元件名（'button' / 'dialog' 等，不帶 Lh 前綴）；bg-pattern 的值是 CSS 變數（如 var(--lh-pattern-willow)）或圖片 URL。詳見花紋背景。

開發相關

如何貢獻程式碼？

請參考貢獻指南。

AI 輔助開發

專案使用 AI agent 輔助維護程式碼。所有驗證命令由使用者手動執行。