設計理念

lh-ui-plus 以「以國風之美，築代碼之基」為設計哲學，將中國傳統美學融入現代前端工程實踐。

國風美學

配色體系

色彩	取源	色值	用途
靛藍	青花瓷釉色	#2B4C7C	主色調（--lh-primary-color）
松花綠	竹影青翠	#5B8C5A	成功色（--lh-success-color）
藤黃	秋葉金黃	#C4A35A	警告色（--lh-warning-color）
朱砂	印泥朱紅	#B23A3A	危險色（--lh-danger-color）
黛色	水墨淡彩	#7A7A7A	訊息色（--lh-info-color）
水墨	墨分五色	#2C2C2C	文字色（--lh-text-color-primary）
宣紙	古宣紙白	#FAF6F0	背景色（--lh-bg-color）

完整色板與層級見主題定製。

花紋背景

元件庫內建 6 種傳統花紋 SVG 背景（透過 --lh-bg-pattern 應用，值為對應 CSS 變數）：

• willow — 柳葉紋（輕柔雅緻，--lh-pattern-willow）
• cloud — 祥雲紋（吉祥如意，--lh-pattern-cloud）
• water — 水波紋（流動自然，--lh-pattern-water）
• snow — 雪花紋（六角晶瑩，--lh-pattern-snow）
• plum — 梅花紋（高潔清雅，--lh-pattern-plum）
• bamboo — 竹葉紋（堅韌不屈，--lh-pattern-bamboo）

跨框架架構

核心邏輯提取為純函式，與框架解耦：

@lh-ui/share           純邏輯層 + 樣式源（無框架依賴，以 npm 依賴引入）
packages/components/    Vue 3 組件封裝層
packages/composables/  Vue 專屬 composables

TypeScript 驅動

全鏈路 TypeScript 類型安全：

• Props/Emit 強類型定義
• 事件回呼簽名攜帶負載類型
• IDE 智慧補全
• 類型覆蓋率以 pnpm typecheck 守護（LhSxProps 等動態工具類型保留受控的索引簽章）

CSS 變數主題系統

88+ CSS 設計 token，以 --lh-* 命名前綴。支援即時主題切換、暗色模式、ConfigProvider 全域設定。

國際化

內建 ConfigProvider 設定體系，支援多語言統一管理。 當前內建完整語言包：zh-CN、en-US；ja-JP、ko-KR、de-DE、fr-FR 已註冊為結構佔位（未翻譯部分暫以英文兜底），可按國際化擴充補全。

無障礙存取

• 鍵盤導覽
• ARIA 屬性
• WCAG 2.1 AA 顏色對比度

以國風之美，築代碼之基。