디자인 철학

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 디자인 토큰이 --lh-* 접두사로 명명됩니다. 실시간 테마 전환, 다크 모드, ConfigProvider 전역 구성을 지원합니다.

국제화

ConfigProvider 구성 체계를 내장하여 다국어를 통일되게 관리합니다. 현재 내장된 완전한 언어 패: zh-CN, en-US. ja-JP, ko-KR, de-DE, fr-FR은 구조 자리 표시로 등록되어 있으며 (번역되지 않은 부분은 일시적으로 영어로 대체), 국제화에 따라 확장해 완성할 수 있습니다.

접근성

• 키보드 내비게이션
• ARIA 속성
• WCAG 2.1 AA 색상 대비

국풍의 아름다움으로 코드의 토대를 세웁니다.