@h-ai/ui 0.1.0-alpha.65 → 0.1.0-alpha.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.en.md CHANGED
@@ -4,19 +4,29 @@
4
4
 
5
5
  [Framework home](../../README.en.md) · Related modules: [@h-ai/core](../core/README.en.md)
6
6
 
7
- > A cross-platform Svelte 5 Runes component library with DaisyUI v5 + Tailwind CSS v4 styling and Bits UI v2 headless interactions. Includes built-in i18n (zh-CN / en-US) and 15 curated DaisyUI themes.
7
+ ## Introduction
8
8
 
9
- ## Installation
9
+ A cross-platform Svelte 5 Runes component library with DaisyUI v5 + Tailwind CSS v4 styling and Bits UI v2 headless interactions. Includes built-in i18n (zh-CN / en-US) and 15 curated DaisyUI themes.
10
+
11
+ ## Core features
12
+
13
+ - Forms, tables, dialogs, navigation, charts and application components.
14
+ - Authentication, CRUD, AI content, onboarding and a help center.
15
+ - Svelte 5, themes, responsive layouts and Chinese/English component messages.
16
+
17
+ ## Getting started
18
+
19
+ ### Installation
10
20
 
11
21
  ```bash
12
- npm install @h-ai/ui
22
+ npm install @h-ai/ui @h-ai/core
13
23
  ```
14
24
 
15
- Depends on `@h-ai/core`, installed automatically.
25
+ For a Node server, declare both UI and core as production dependencies so the adapter preserves native logging and runtime dependencies.
16
26
 
17
- ## Quick start
27
+ ### Quick start
18
28
 
19
- ### 1. Configure svelte.config.js
29
+ #### 1. Configure svelte.config.js
20
30
 
21
31
  ```js
22
32
  import { autoImportHaiUi } from '@h-ai/ui/auto-import'
@@ -33,7 +43,7 @@ const config = {
33
43
  export default config
34
44
  ```
35
45
 
36
- ### 2. Configure vite.config.ts
46
+ #### 2. Configure vite.config.ts
37
47
 
38
48
  ```ts
39
49
  import { haiOptimizeExclude, haiPrebundledDeps } from '@h-ai/ui/vite'
@@ -51,11 +61,13 @@ export default defineConfig({
51
61
  // 避免首次进入业务路由时触发依赖再优化与整页刷新
52
62
  include: [...haiPrebundledDeps],
53
63
  },
54
- ssr: { noExternal: [/@h-ai\//] },
64
+ ssr: { noExternal: ['@h-ai/ui', '@h-ai/kit'], external: ['@h-ai/core', 'sm-crypto'] },
55
65
  })
56
66
  ```
57
67
 
58
- ### 3. Configure src/app.css
68
+ When using Crypto or Kit/IAM, include `sm-crypto@0.5.7` in application production dependencies. CLI projects already do this; for manual setup, run `pnpm add sm-crypto@0.5.7`. The external option alone is insufficient: adapter-node also uses direct production dependencies to preserve native package loading.
69
+
70
+ #### 3. Configure src/app.css
59
71
 
60
72
  ```css
61
73
  @import 'tailwindcss';
@@ -76,7 +88,7 @@ export default defineConfig({
76
88
 
77
89
  > `@source` makes TailwindCSS scan classes in `@h-ai/ui`; without it, component styles are missing. In nested monorepo apps, dependencies may be hoisted to root `node_modules`, so retain both paths.
78
90
 
79
- ### 4. Use components
91
+ #### 4. Use components
80
92
 
81
93
  ```svelte
82
94
  <script>
@@ -108,7 +120,7 @@ import { Button } from '@h-ai/ui/components/primitives/index'
108
120
  import { getThemeInfo, THEMES } from '@h-ai/ui/theme'
109
121
  ```
110
122
 
111
- ### data-\* attribute forwarding
123
+ #### data-\* attribute forwarding
112
124
 
113
125
  Public Svelte components forward caller-supplied `data-*` attributes to their root or primary interactive element for tests, analytics, and automation. Other unknown attributes are not forwarded.
114
126
 
@@ -120,7 +132,7 @@ Public Svelte components forward caller-supplied `data-*` attributes to their ro
120
132
 
121
133
  No extra button, input, or overlay wrappers are needed just for `data-testid`.
122
134
 
123
- ## Component architecture
135
+ ### Component architecture
124
136
 
125
137
  Three layers (primitives → compounds → scenes):
126
138
 
@@ -137,9 +149,9 @@ components/
137
149
  └── crypto/ # Cryptographic display
138
150
  ```
139
151
 
140
- ## Component catalog
152
+ ### Component catalog
141
153
 
142
- ### Primitives (20)
154
+ #### Primitives (20)
143
155
 
144
156
  | Component | Description | Key props |
145
157
  | ---------------- | ------------------- | ------------------------------------------------------------------------------ |
@@ -166,9 +178,9 @@ components/
166
178
 
167
179
  For `BareInput` with `type="file"`, read `event.currentTarget.files` in `onchange` and leave the file path `value` unbound. Other input types support `bind:value`.
168
180
 
169
- ### Compounds (37)
181
+ #### Compounds (37)
170
182
 
171
- #### Forms
183
+ ##### Forms
172
184
 
173
185
  | Component | Description | Key props |
174
186
  | ----------- | -------------- | -------------------------------------------- |
@@ -177,7 +189,7 @@ For `BareInput` with `type="file"`, read `event.currentTarget.files` in `onchang
177
189
  | `FormLayout` | Form layout | `columns`, `labelPosition`, `labelWidth` |
178
190
  | `TagInput` | Tag input | `tags`, `maxTags`, `allowDuplicates`, `size` |
179
191
 
180
- #### Form layouts and validation
192
+ ##### Form layouts and validation
181
193
 
182
194
  `Form` and `FormLayout` (for native `<form>` elements) share `columns={1 | 2}`, `labelPosition="top" | "left"` and `labelWidth` (default `8rem`). Defaults are one column and stacked labels. Two columns collapse below a container width of `36rem`; inline labels stack below `28rem`.
183
195
 
@@ -206,14 +218,14 @@ Client validation appears on the first blur and updates as invalid input is corr
206
218
  </Form>
207
219
  ```
208
220
 
209
- #### Feedback
221
+ ##### Feedback
210
222
 
211
223
  | Component | Description | Key props |
212
224
  | ---------------- | --------------- | ------------------------------------------------- |
213
225
  | `Alert` | Alert | `variant`, `title`, `dismissible` |
214
226
  | `ToastContainer` | Toast container | Place globally and use with the `toast` singleton |
215
227
 
216
- #### Overlays
228
+ ##### Overlays
217
229
 
218
230
  | Component | Description | Key props |
219
231
  | --------- | ------------------- | ---------------------------------------------------------------------------- |
@@ -222,7 +234,7 @@ Client validation appears on the first blur and updates as invalid input is corr
222
234
  | `Confirm` | Confirmation dialog | `open`, `title`, `message`, `variant`, `onconfirm` |
223
235
  | `Popover` | Popover | `open`, `position`, `trigger`, `offset`, `portal` |
224
236
 
225
- #### Data display
237
+ ##### Data display
226
238
 
227
239
  | Component | Description | Key props |
228
240
  | ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -231,7 +243,7 @@ Client validation appears on the first blur and updates as invalid input is corr
231
243
  | `Accordion` | Accordion | `items: AccordionItem[]` |
232
244
  | `Timeline` | Timeline | `items: TimelineItem[]` |
233
245
 
234
- #### Bits UI headless interactions
246
+ ##### Bits UI headless interactions
235
247
 
236
248
  | Component | Description | Key props |
237
249
  | ------------ | ----------------------------------- | ----------------------------------------------------------- |
@@ -241,7 +253,7 @@ Client validation appears on the first blur and updates as invalid input is corr
241
253
 
242
254
  > Dates use `DateValue` / `CalendarDate` from `@internationalized/date`.
243
255
 
244
- #### Mobile / enhanced interactions
256
+ ##### Mobile / enhanced interactions
245
257
 
246
258
  | Component | Description | Key props |
247
259
  | ---------------- | ------------------- | ------------------------------------------------------ |
@@ -253,7 +265,7 @@ Client validation appears on the first blur and updates as invalid input is corr
253
265
  | `SafeArea` | Safe area container | `top`, `bottom`, `left`, `right` |
254
266
  | `SwipeCell` | Swipe actions | `leftActions`, `rightActions`, `threshold`, `onaction` |
255
267
 
256
- #### Navigation
268
+ ##### Navigation
257
269
 
258
270
  | Component | Description | Key props |
259
271
  | ------------ | ------------------------------- | ---------------------------------------------------------------------------------------------------------- |
@@ -264,7 +276,7 @@ Client validation appears on the first blur and updates as invalid input is corr
264
276
  | `Dropdown` | Dropdown menu | `items`, `trigger`, `triggerClass`, `position` |
265
277
  | `Tooltip` | Tooltip | `content`, `position`, `delay` |
266
278
 
267
- #### State placeholders
279
+ ##### State placeholders
268
280
 
269
281
  | Component | Description | Key props |
270
282
  | ---------- | ----------- | ------------------------------------- |
@@ -272,22 +284,22 @@ Client validation appears on the first blur and updates as invalid input is corr
272
284
  | `Empty` | Empty state | `title`, `description`, `icon` |
273
285
  | `Result` | Result page | `status`, `title`, `description` |
274
286
 
275
- #### Page-level
287
+ ##### Page-level
276
288
 
277
289
  | Component | Description | Key props |
278
290
  | ------------ | ----------- | ----------------------------------------------- |
279
291
  | `PageHeader` | Page header | `title`, `description`; supports `actions` slot |
280
292
 
281
- ### Scenes (36)
293
+ #### Scenes (36)
282
294
 
283
- #### Guide (2)
295
+ ##### Guide (2)
284
296
 
285
297
  | Component | Description | Key props |
286
298
  | --- | --- | --- |
287
299
  | `GuideHost` | First-use invitations, tours and help dialog host | `guide`, `locale`, `scope`, `autoStart` |
288
300
  | `HelpCenter` | Standalone searchable help center | `articles`, `tours`, `locale`, `selectedId`, `onstart` |
289
301
 
290
- #### App (7)
302
+ ##### App (7)
291
303
 
292
304
  | Component | Description | Key props |
293
305
  | ------------------ | ---------------------------------------------- | -------------------------------------------------------- |
@@ -299,7 +311,7 @@ Client validation appears on the first blur and updates as invalid input is corr
299
311
  | `ThemeSelector` | Full theme selector | No props required |
300
312
  | `ThemeToggle` | Light/dark toggle | No props required |
301
313
 
302
- #### IAM authentication (10)
314
+ ##### IAM authentication (10)
303
315
 
304
316
  | Component | Description | Key props |
305
317
  | -------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
@@ -314,7 +326,7 @@ Client validation appears on the first blur and updates as invalid input is corr
314
326
  | `PermGuard` | Permission guard | `permissions`, `mode`, `fallback` |
315
327
  | `UserProfile` | User profile | `user`, `editable`, `fields`, `avatarAccept`, `avatarHint`, `onsubmit` |
316
328
 
317
- #### Storage (4)
329
+ ##### Storage (4)
318
330
 
319
331
  | Component | Description | Key props |
320
332
  | -------------- | ------------- | ------------------------------------------------------------ |
@@ -325,7 +337,7 @@ Client validation appears on the first blur and updates as invalid input is corr
325
337
 
326
338
  Upload components do not embed presigning, headers, or PUT/POST protocols. Applications call their service through `uploadHandler(file, { signal, onProgress })` and return `{ url?, response? }`. Image/avatar uploads require a displayable `url`. Without a handler, `FileUpload` only selects files, and image/avatar components generate local previews only.
327
339
 
328
- #### Crypto display (3)
340
+ ##### Crypto display (3)
329
341
 
330
342
  Input changes immediately clear `encryptedValue`; only successful results for current input are restored. Clearing, callback replacement, and unmounting invalidate old requests. Failures show built-in errors and leave ciphertext empty. Submit encrypted inputs only when current ciphertext is nonempty.
331
343
 
@@ -339,7 +351,7 @@ Callers must connect `EncryptedInput` to a real encryption service through `onen
339
351
 
340
352
  Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and `SM2` for signatures.
341
353
 
342
- #### AI documents and spreadsheets (4)
354
+ ##### AI documents and spreadsheets (4)
343
355
 
344
356
  | Component | Description | Key props / capabilities |
345
357
  | ------------------------ | ---------------------- | ---------------------------------------------------------------------------------------------------------- |
@@ -370,7 +382,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
370
382
  />
371
383
  ```
372
384
 
373
- #### Charts
385
+ ##### Charts
374
386
 
375
387
  `Chart type='line'` uses LayerChart's native line chart by default. For monitoring dashboards with segmented lines, points, nearest-point hover, and vertical reference lines, use `lineVariant='segmented-point'`:
376
388
 
@@ -389,7 +401,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
389
401
  />
390
402
  ```
391
403
 
392
- #### CRUD scenes (5)
404
+ ##### CRUD scenes (5)
393
405
 
394
406
  | Component | Description | Key props / capabilities |
395
407
  | ------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -405,7 +417,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
405
417
  >
406
418
  > Columns first shrink to 7rem and truncate long text; horizontal scrolling appears only if total width still exceeds the container. The action column stays fixed on the right.
407
419
 
408
- #### Error pages (1)
420
+ ##### Error pages (1)
409
421
 
410
422
  | Component | Description | Key props / capabilities |
411
423
  | ----------- | --------------------------------------------------- | ----------------------------------------------------------------------- |
@@ -436,9 +448,9 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
436
448
  >
437
449
  > `Tabs` supports lazy content. With `lazy`, never-activated panes are not rendered (`children` receives `isActivated(key)`); `onactivate(key)` runs once on first activation. Combine with `createCrudController({ autoLoad: false })` to load only when first visible.
438
450
 
439
- ## Examples
451
+ ### Examples
440
452
 
441
- ### Toast notifications
453
+ #### Toast notifications
442
454
 
443
455
  ```svelte
444
456
  <script>
@@ -458,7 +470,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
458
470
 
459
471
  > Built-in `notifySuccess` / `notifyError` / `notifyInfo` / `notifyWarning` remove the need for application toast wrappers. `notifyError(err, fallback?)` accepts `Error` or strings with a fallback message. Success lasts 3s and errors 5s by default.
460
472
 
461
- ### Message feedback
473
+ #### Message feedback
462
474
 
463
475
  ```svelte
464
476
  <script>
@@ -476,7 +488,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
476
488
  <MessageContainer />
477
489
  ```
478
490
 
479
- ### Typical CRUD page
491
+ #### Typical CRUD page
480
492
 
481
493
  ```svelte
482
494
  <script>
@@ -546,7 +558,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
546
558
 
547
559
  `Modal` retains the top-right close button without a `title` / `header`, but does not render a full header row. Use `radius="1.4rem"` for rounded corners and `bodyOverflow="visible"` when internal dropdowns/overlays need to extend outside.
548
560
 
549
- ### Declarative CRUD page (CrudPage)
561
+ #### Declarative CRUD page (CrudPage)
550
562
 
551
563
  ```svelte
552
564
  <script lang='ts'>
@@ -572,7 +584,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
572
584
 
573
585
  > Use `form={{ variant: 'drawer', drawerWidth: '40rem' }}` for drawers. User resizing overrides the initial width and is remembered per resource.
574
586
 
575
- ### Login page
587
+ #### Login page
576
588
 
577
589
  ```svelte
578
590
  <script>
@@ -598,7 +610,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
598
610
  <LoginForm {loading} {errors} onsubmit={handleLogin} showRegisterLink />
599
611
  ```
600
612
 
601
- ### Controlled PasswordInput
613
+ #### Controlled PasswordInput
602
614
 
603
615
  ```svelte
604
616
  <script>
@@ -615,7 +627,7 @@ Defaults match `@h-ai/crypto`: `SM4` for encrypted inputs, `SM3` for hashes, and
615
627
  />
616
628
  ```
617
629
 
618
- ## Style dependencies
630
+ ### Style dependencies
619
631
 
620
632
  Components use TailwindCSS v4 + DaisyUI. Configure application `app.css` as follows:
621
633
 
@@ -654,7 +666,7 @@ On mobile pages, match `BottomNav` width to the page shell to avoid spanning the
654
666
  </div>
655
667
  ```
656
668
 
657
- ### Icons
669
+ #### Icons
658
670
 
659
671
  Components use Iconify (Tabler Icons):
660
672
 
@@ -669,7 +681,7 @@ npm install -D @iconify/tailwind4 @iconify-json/tabler
669
681
  }
670
682
  ```
671
683
 
672
- ### Theme switching
684
+ #### Theme switching
673
685
 
674
686
  Manage 15 curated DaisyUI themes through built-in utilities:
675
687
 
@@ -713,7 +725,7 @@ const themeBootstrapScript = createThemeBootstrapScript({
713
725
  transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstrapScript)
714
726
  ```
715
727
 
716
- ## Internationalization (i18n)
728
+ ### Internationalization (i18n)
717
729
 
718
730
  @h-ai/ui uses **built-in component translations**:
719
731
 
@@ -722,7 +734,7 @@ transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstr
722
734
  - Applications handle **page text** only; @h-ai/ui manages internal component text.
723
735
  - Override specific text with props such as `submitText` or `labels`.
724
736
 
725
- ### createLocaleStore
737
+ #### createLocaleStore
726
738
 
727
739
  Client locale state management, automatically synchronized with the `@h-ai/core` global locale manager:
728
740
 
@@ -746,7 +758,7 @@ Client locale state management, automatically synchronized with the `@h-ai/core`
746
758
  </select>
747
759
  ```
748
760
 
749
- ### Exported i18n utilities
761
+ #### Exported i18n utilities
750
762
 
751
763
  ```ts
752
764
  import {
@@ -762,7 +774,7 @@ import {
762
774
  } from '@h-ai/ui/i18n'
763
775
  ```
764
776
 
765
- ## Configuration driven authentication
777
+ ### Configuration driven authentication
766
778
 
767
779
  Agreement content can be configured as `agreements.userAgreementMarkdown` and `privacyPolicyMarkdown` using YAML `|`. The modal safely renders configured Markdown and prefers it over the URL of the same agreement. URL-only content stays in a sandboxed iframe.
768
780
 
@@ -791,9 +803,11 @@ AuthPanel accepts public IAM config and actions for password/LDAP/email/SMS logi
791
803
 
792
804
  AuthPanel disables native form controls during SSR and enables input after client mount binds events, preventing early input from being lost during hydration. Applications need no extra readiness code. E2E tests wait for editable controls and cover delayed client scripts.
793
805
 
806
+ When an authentication link points to the current complete URL, AuthPanel switches scenes without navigating again, so input entered after returning to login is preserved. Links with a different path, query, or hash use application routing. Modified clicks such as Ctrl/Cmd retain browser behavior.
807
+
794
808
  [完整 IAM 配置 / IAM configuration](../iam/README.en.md)
795
809
 
796
- ## Onboarding and help center
810
+ ### Onboarding and help center
797
811
 
798
812
  Import `createGuide`, `GuideHost` and `HelpCenter` from `@h-ai/ui/guide`. No init/close is required. The tour engine loads when a tour starts; controls follow the current theme and include Chinese/English translations. Business text uses application i18n callbacks.
799
813
 
@@ -845,7 +859,7 @@ Use `() => m.key()` for localized content and pass the current locale. Steps ren
845
859
 
846
860
  HelpCenter can also render a standalone page using articles, optional tours, locale, selectedId and onstart. The admin-console example and CLI fullstack Web/App/Desktop include first-use invitations, help and profile tours by default. See the [complete integration guide](../cli/templates/skills/hai-ui/guide.md).
847
861
 
848
- ## Other exports
862
+ ### Other exports
849
863
 
850
864
  ```ts
851
865
  // 类型
@@ -875,3 +889,16 @@ Agreements open in a Modal and preserve form input. Pages must allow iframe embe
875
889
  {/snippet}
876
890
  </AuthPanel>
877
891
  ```
892
+
893
+ ## Development and testing
894
+
895
+ ```sh
896
+ pnpm --filter @h-ai/ui typecheck
897
+ pnpm --filter @h-ai/ui lint
898
+ pnpm --filter @h-ai/ui build
899
+ pnpm --filter @h-ai/ui test
900
+ ```
901
+
902
+ ## License
903
+
904
+ Apache-2.0
package/README.ja.md CHANGED
@@ -4,19 +4,29 @@
4
4
 
5
5
  [フレームワークのホーム](../../README.ja.md) · 関連モジュール:[@h-ai/core](../core/README.ja.md)
6
6
 
7
- > Svelte 5 Runes のクロスプラットフォーム UI ライブラリーです。DaisyUI v5 + Tailwind CSS v4 のスタイル、Bits UI v2 のヘッドレス UI、内蔵 i18n(zh-CN / en-US)、15 種類の厳選テーマを提供します。
7
+ ## 概要
8
8
 
9
- ## インストール
9
+ Svelte 5 Runes のクロスプラットフォーム UI ライブラリーです。DaisyUI v5 + Tailwind CSS v4 のスタイル、Bits UI v2 のヘッドレス UI、内蔵 i18n(zh-CN / en-US)、15 種類の厳選テーマを提供します。
10
+
11
+ ## 主な機能
12
+
13
+ - フォーム、テーブル、ダイアログ、ナビゲーション、チャートなどの部品。
14
+ - 認証、CRUD、AI コンテンツ、操作ガイド、ヘルプセンター。
15
+ - Svelte 5、テーマ、レスポンシブ表示、中国語・英語のコンポーネント文言。
16
+
17
+ ## 使い始める
18
+
19
+ ### インストール
10
20
 
11
21
  ```bash
12
- npm install @h-ai/ui
22
+ npm install @h-ai/ui @h-ai/core
13
23
  ```
14
24
 
15
- `@h-ai/core` に依存し、自動的にインストールされます。
25
+ Node サーバーでは UI と core の両方を本番依存に含め、ログなどのネイティブ依存を通常どおり読み込めるようにします。
16
26
 
17
- ## クイックスタート
27
+ ### クイックスタート
18
28
 
19
- ### 1. svelte.config.js の設定
29
+ #### 1. svelte.config.js の設定
20
30
 
21
31
  ```js
22
32
  import { autoImportHaiUi } from '@h-ai/ui/auto-import'
@@ -33,7 +43,7 @@ const config = {
33
43
  export default config
34
44
  ```
35
45
 
36
- ### 2. vite.config.ts の設定
46
+ #### 2. vite.config.ts の設定
37
47
 
38
48
  ```ts
39
49
  import { haiOptimizeExclude, haiPrebundledDeps } from '@h-ai/ui/vite'
@@ -51,11 +61,13 @@ export default defineConfig({
51
61
  // 避免首次进入业务路由时触发依赖再优化与整页刷新
52
62
  include: [...haiPrebundledDeps],
53
63
  },
54
- ssr: { noExternal: [/@h-ai\//] },
64
+ ssr: { noExternal: ['@h-ai/ui', '@h-ai/kit'], external: ['@h-ai/core', 'sm-crypto'] },
55
65
  })
56
66
  ```
57
67
 
58
- ### 3. src/app.css の設定
68
+ Crypto または Kit/IAM を使う場合、アプリの本番依存に `sm-crypto@0.5.7` を含めます。CLI 生成済みのプロジェクトでは設定済みです。手動導入は `pnpm add sm-crypto@0.5.7` を実行してください。adapter-node は直接の本番依存も参照するため、external 指定だけでは不十分です。
69
+
70
+ #### 3. src/app.css の設定
59
71
 
60
72
  ```css
61
73
  @import 'tailwindcss';
@@ -76,7 +88,7 @@ export default defineConfig({
76
88
 
77
89
  > `@source` で TailwindCSS に `@h-ai/ui` の class を走査させます。ない場合はスタイルが欠落します。monorepo 内のアプリでは依存がルート `node_modules` に置かれる場合があるため、両方のパスを残すことを推奨します。
78
90
 
79
- ### 4. コンポーネントの使用
91
+ #### 4. コンポーネントの使用
80
92
 
81
93
  ```svelte
82
94
  <script>
@@ -108,7 +120,7 @@ import { Button } from '@h-ai/ui/components/primitives/index'
108
120
  import { getThemeInfo, THEMES } from '@h-ai/ui/theme'
109
121
  ```
110
122
 
111
- ### data-\* 属性の転送
123
+ #### data-\* 属性の転送
112
124
 
113
125
  公開 Svelte コンポーネントは `data-*` をルート・主操作要素へ転送し、テスト・計測・自動化に使えます。通常の未知属性は転送しません。
114
126
 
@@ -120,7 +132,7 @@ import { getThemeInfo, THEMES } from '@h-ai/ui/theme'
120
132
 
121
133
  `data-testid` のためだけにボタン・入力・ポップアップをラップする必要はありません。
122
134
 
123
- ## コンポーネント構成
135
+ ### コンポーネント構成
124
136
 
125
137
  3 層で構成します(primitives → compounds → scenes):
126
138
 
@@ -137,9 +149,9 @@ components/
137
149
  └── crypto/ # 暗号表示
138
150
  ```
139
151
 
140
- ## コンポーネント一覧
152
+ ### コンポーネント一覧
141
153
 
142
- ### Primitives:基本コンポーネント(20)
154
+ #### Primitives:基本コンポーネント(20)
143
155
 
144
156
  | コンポーネント | 説明 | 主なプロパティ |
145
157
  | ---------------- | ---------------------- | ------------------------------------------------------------------------------ |
@@ -166,9 +178,9 @@ components/
166
178
 
167
179
  `BareInput` の `type="file"` では `onchange` の `event.currentTarget.files` を読み取り、ファイルパスの `value` はバインドしません。他の入力型では `bind:value` を使用できます。
168
180
 
169
- ### Compounds:複合コンポーネント(37)
181
+ #### Compounds:複合コンポーネント(37)
170
182
 
171
- #### フォーム
183
+ ##### フォーム
172
184
 
173
185
  | コンポーネント | 説明 | 主なプロパティ |
174
186
  | -------------- | ------------------ | -------------------------------------------- |
@@ -177,7 +189,7 @@ components/
177
189
  | `FormLayout` | フォーム配置 | `columns`, `labelPosition`, `labelWidth` |
178
190
  | `TagInput` | タグ入力 | `tags`, `maxTags`, `allowDuplicates`, `size` |
179
191
 
180
- #### フォームのレイアウトと検証
192
+ ##### フォームのレイアウトと検証
181
193
 
182
194
  `Form` とネイティブ `<form>` 内で使う `FormLayout` は、`columns={1 | 2}`、`labelPosition="top" | "left"`、`labelWidth`(既定 `8rem`)を共有します。既定は1列・ラベルを上に配置します。コンテナー幅が `36rem` 未満では1列、`28rem` 未満では横並びラベルも縦並びになります。
183
195
 
@@ -206,14 +218,14 @@ components/
206
218
  </Form>
207
219
  ```
208
220
 
209
- #### フィードバック
221
+ ##### フィードバック
210
222
 
211
223
  | コンポーネント | 説明 | 主なプロパティ |
212
224
  | ---------------- | -------------- | ---------------------------------------- |
213
225
  | `Alert` | アラート | `variant`, `title`, `dismissible` |
214
226
  | `ToastContainer` | 通知コンテナー | 全体に配置し、`toast` シングルトンと併用 |
215
227
 
216
- #### オーバーレイ
228
+ ##### オーバーレイ
217
229
 
218
230
  | コンポーネント | 説明 | 主なプロパティ |
219
231
  | -------------- | -------------- | ---------------------------------------------------------------------------- |
@@ -222,7 +234,7 @@ components/
222
234
  | `Confirm` | 確認ダイアログ | `open`, `title`, `message`, `variant`, `onconfirm` |
223
235
  | `Popover` | ポップオーバー | `open`, `position`, `trigger`, `offset`, `portal` |
224
236
 
225
- #### データ表示
237
+ ##### データ表示
226
238
 
227
239
  | コンポーネント | 説明 | 主なプロパティ |
228
240
  | -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
@@ -231,7 +243,7 @@ components/
231
243
  | `Accordion` | アコーディオン | `items: AccordionItem[]` |
232
244
  | `Timeline` | タイムライン | `items: TimelineItem[]` |
233
245
 
234
- #### Bits UI によるヘッドレス UI
246
+ ##### Bits UI によるヘッドレス UI
235
247
 
236
248
  | コンポーネント | 説明 | 主なプロパティ |
237
249
  | -------------- | -------------------------- | ----------------------------------------------------------- |
@@ -241,7 +253,7 @@ components/
241
253
 
242
254
  > 日付値には `@internationalized/date` の `DateValue` / `CalendarDate` を使います。
243
255
 
244
- #### モバイル・拡張操作
256
+ ##### モバイル・拡張操作
245
257
 
246
258
  | コンポーネント | 説明 | 主なプロパティ |
247
259
  | ---------------- | ---------------------- | ------------------------------------------------------ |
@@ -253,7 +265,7 @@ components/
253
265
  | `SafeArea` | セーフエリアコンテナー | `top`, `bottom`, `left`, `right` |
254
266
  | `SwipeCell` | スワイプ操作 | `leftActions`, `rightActions`, `threshold`, `onaction` |
255
267
 
256
- #### ナビゲーション
268
+ ##### ナビゲーション
257
269
 
258
270
  | コンポーネント | 説明 | 主なプロパティ |
259
271
  | -------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------- |
@@ -264,7 +276,7 @@ components/
264
276
  | `Dropdown` | ドロップダウンメニュー | `items`, `trigger`, `triggerClass`, `position` |
265
277
  | `Tooltip` | ツールチップ | `content`, `position`, `delay` |
266
278
 
267
- #### 状態表示
279
+ ##### 状態表示
268
280
 
269
281
  | コンポーネント | 説明 | 主なプロパティ |
270
282
  | -------------- | ---------- | ------------------------------------- |
@@ -272,22 +284,22 @@ components/
272
284
  | `Empty` | 空状態 | `title`, `description`, `icon` |
273
285
  | `Result` | 結果ページ | `status`, `title`, `description` |
274
286
 
275
- #### ページ単位
287
+ ##### ページ単位
276
288
 
277
289
  | コンポーネント | 説明 | 主なプロパティ |
278
290
  | -------------- | -------------- | ---------------------------------------------- |
279
291
  | `PageHeader` | ページヘッダー | `title`, `description`、`actions` スロット対応 |
280
292
 
281
- ### Scenes:用途別コンポーネント(36)
293
+ #### Scenes:用途別コンポーネント(36)
282
294
 
283
- #### Guide:案内・ヘルプ(2)
295
+ ##### Guide:案内・ヘルプ(2)
284
296
 
285
297
  | コンポーネント | 説明 | 主なプロパティ |
286
298
  | --- | --- | --- |
287
299
  | `GuideHost` | 初回案内・ガイド・ヘルプダイアログ | `guide`, `locale`, `scope`, `autoStart` |
288
300
  | `HelpCenter` | 独立して使える検索付きヘルプ | `articles`, `tours`, `locale`, `selectedId`, `onstart` |
289
301
 
290
- #### App:アプリ全体(7)
302
+ ##### App:アプリ全体(7)
291
303
 
292
304
  | コンポーネント | 説明 | 主なプロパティ |
293
305
  | ------------------ | ------------------------------------------- | -------------------------------------------------------- |
@@ -299,7 +311,7 @@ components/
299
311
  | `ThemeSelector` | テーマ選択パネル | プロパティ不要 |
300
312
  | `ThemeToggle` | ライト・ダーク切り替え | プロパティ不要 |
301
313
 
302
- #### IAM:認証(10)
314
+ ##### IAM:認証(10)
303
315
 
304
316
  | コンポーネント | 説明 | 主なプロパティ |
305
317
  | -------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------ |
@@ -314,7 +326,7 @@ components/
314
326
  | `PermGuard` | 権限ガード | `permissions`, `mode`, `fallback` |
315
327
  | `UserProfile` | ユーザープロフィール | `user`, `editable`, `fields`, `avatarAccept`, `avatarHint`, `onsubmit` |
316
328
 
317
- #### Storage:ストレージ(4)
329
+ ##### Storage:ストレージ(4)
318
330
 
319
331
  | コンポーネント | 説明 | 主なプロパティ |
320
332
  | -------------- | -------------------- | ------------------------------------------------------------ |
@@ -325,7 +337,7 @@ components/
325
337
 
326
338
  アップロード部品は presign・ヘッダー・PUT/POST を内蔵しません。アプリは `uploadHandler(file, { signal, onProgress })` からサービスを呼び、`{ url?, response? }` を返します。画像・アバターには表示可能な `url` が必要です。handler がなければ `FileUpload` は選択のみ、画像・アバターはローカルのプレビューのみを作成します。
327
339
 
328
- #### Crypto:暗号表示(3)
340
+ ##### Crypto:暗号表示(3)
329
341
 
330
342
  入力変更で `encryptedValue` を即座に消去し、現在の入力の成功結果のみを反映します。消去・コールバック置換・破棄で旧リクエストを無効化します。失敗時は組み込みエラーを表示し暗号文は空です。暗号化対象の送信は現在の暗号文が空でない場合に限ってください。
331
343
 
@@ -339,7 +351,7 @@ components/
339
351
 
340
352
  既定は `@h-ai/crypto` と共通で、暗号化入力は `SM4`、ハッシュは `SM3`、署名は `SM2` です。
341
353
 
342
- #### AI:文書・表計算(4)
354
+ ##### AI:文書・表計算(4)
343
355
 
344
356
  | コンポーネント | 説明 | 主なプロパティ・機能 |
345
357
  | ------------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------- |
@@ -370,7 +382,7 @@ components/
370
382
  />
371
383
  ```
372
384
 
373
- #### Charts:グラフ
385
+ ##### Charts:グラフ
374
386
 
375
387
  `Chart type='line'` は既定で LayerChart の折れ線を使います。監視画面で分割線・点・最寄りの点への hover・縦基準線が必要な場合は `lineVariant='segmented-point'` を使います:
376
388
 
@@ -389,7 +401,7 @@ components/
389
401
  />
390
402
  ```
391
403
 
392
- #### CRUD:一覧操作(5)
404
+ ##### CRUD:一覧操作(5)
393
405
 
394
406
  | コンポーネント | 説明 | 主なプロパティ・機能 |
395
407
  | ------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -405,7 +417,7 @@ components/
405
417
  >
406
418
  > 列は先に 7rem まで縮小し長文を切り詰め、総幅が容器を超える場合のみ横スクロールを出します。操作列は右に固定し、横スクロール中も表示します。
407
419
 
408
- #### エラーページ(1)
420
+ ##### エラーページ(1)
409
421
 
410
422
  | コンポーネント | 説明 | 主なプロパティ・機能 |
411
423
  | -------------- | -------------------------------------------------- | ----------------------------------------------------------------------- |
@@ -436,9 +448,9 @@ components/
436
448
  >
437
449
  > `Tabs` は遅延表示に対応し、`lazy` では未使用タブの内容を描画しません(`children` の `isActivated(key)` で判定)。`onactivate(key)` は初回のみ実行し、`createCrudController({ autoLoad: false })` と組み合わせて最初に表示されたときに読み込めます。
438
450
 
439
- ## 使用例
451
+ ### 使用例
440
452
 
441
- ### Toast 通知
453
+ #### Toast 通知
442
454
 
443
455
  ```svelte
444
456
  <script>
@@ -458,7 +470,7 @@ components/
458
470
 
459
471
  > `notifySuccess` / `notifyError` / `notifyInfo` / `notifyWarning` を内蔵し、アプリ独自の toast ツールは不要です。`notifyError(err, fallback?)` は `Error`・文字列と代替文言を受け付け、既定は成功 3 秒・失敗 5 秒です。
460
472
 
461
- ### Message 表示
473
+ #### Message 表示
462
474
 
463
475
  ```svelte
464
476
  <script>
@@ -476,7 +488,7 @@ components/
476
488
  <MessageContainer />
477
489
  ```
478
490
 
479
- ### 標準的な CRUD ページ
491
+ #### 標準的な CRUD ページ
480
492
 
481
493
  ```svelte
482
494
  <script>
@@ -546,7 +558,7 @@ components/
546
558
 
547
559
  `Modal` は `title` / `header` がなくても右上の閉じるボタンを表示し、ヘッダー全体は追加しません。角丸は `radius="1.4rem"`、内部ドロップダウンなどを外に表示する場合は `bodyOverflow="visible"` を指定できます。
548
560
 
549
- ### 宣言的な CRUD ページ(CrudPage)
561
+ #### 宣言的な CRUD ページ(CrudPage)
550
562
 
551
563
  ```svelte
552
564
  <script lang='ts'>
@@ -572,7 +584,7 @@ components/
572
584
 
573
585
  > ドロワーは `form={{ variant: 'drawer', drawerWidth: '40rem' }}` に変更できます。ユーザーが変更した幅が初期幅より優先され、リソースごとに記憶されます。
574
586
 
575
- ### ログインページ
587
+ #### ログインページ
576
588
 
577
589
  ```svelte
578
590
  <script>
@@ -598,7 +610,7 @@ components/
598
610
  <LoginForm {loading} {errors} onsubmit={handleLogin} showRegisterLink />
599
611
  ```
600
612
 
601
- ### PasswordInput の制御モード
613
+ #### PasswordInput の制御モード
602
614
 
603
615
  ```svelte
604
616
  <script>
@@ -615,7 +627,7 @@ components/
615
627
  />
616
628
  ```
617
629
 
618
- ## スタイルの依存関係
630
+ ### スタイルの依存関係
619
631
 
620
632
  コンポーネントは TailwindCSS v4 + DaisyUI を使います。アプリの `app.css` に次を設定します:
621
633
 
@@ -654,7 +666,7 @@ components/
654
666
  </div>
655
667
  ```
656
668
 
657
- ### アイコン
669
+ #### アイコン
658
670
 
659
671
  Iconify(Tabler Icons)を使用します:
660
672
 
@@ -669,7 +681,7 @@ npm install -D @iconify/tailwind4 @iconify-json/tabler
669
681
  }
670
682
  ```
671
683
 
672
- ### テーマ切り替え
684
+ #### テーマ切り替え
673
685
 
674
686
  内蔵ツールで 15 種類の厳選 DaisyUI テーマを管理します:
675
687
 
@@ -713,7 +725,7 @@ const themeBootstrapScript = createThemeBootstrapScript({
713
725
  transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstrapScript)
714
726
  ```
715
727
 
716
- ## 国際化(i18n)
728
+ ### 国際化(i18n)
717
729
 
718
730
  @h-ai/ui は**コンポーネント内蔵翻訳**を使います:
719
731
 
@@ -722,7 +734,7 @@ transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstr
722
734
  - アプリは**ページ単位の文言**のみを扱い、内部テキストは @h-ai/ui が管理します。
723
735
  - 個別文言の変更は `submitText`・`labels` などの props で指定。
724
736
 
725
- ### createLocaleStore
737
+ #### createLocaleStore
726
738
 
727
739
  クライアントの locale 状態を管理し、`@h-ai/core` の全体管理器へ自動同期します:
728
740
 
@@ -746,7 +758,7 @@ transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstr
746
758
  </select>
747
759
  ```
748
760
 
749
- ### エクスポートされる i18n ツール
761
+ #### エクスポートされる i18n ツール
750
762
 
751
763
  ```ts
752
764
  import {
@@ -762,7 +774,7 @@ import {
762
774
  } from '@h-ai/ui/i18n'
763
775
  ```
764
776
 
765
- ## 設定による認証画面
777
+ ### 設定による認証画面
766
778
 
767
779
  YAML の `|` で `agreements.userAgreementMarkdown` と `privacyPolicyMarkdown` を設定できます。Modal は本文を安全に描画し、同じ規約の URL より本文を優先します。URL のみの場合は隔離 iframe を使用します。
768
780
 
@@ -791,9 +803,11 @@ AuthPanel に IAM 公開設定と actions を渡すと、複数方式のログ
791
803
 
792
804
  AuthPanel は SSR 中のフォーム操作を無効にし、クライアントのマウントとイベント登録が完了してから入力を有効にします。ハイドレーションによる入力の消失を防ぎ、アプリ側の追加の準備処理は不要です。E2E では入力可能な状態を待ち、クライアントスクリプトの読み込みが遅れる場合も検証します。
793
805
 
806
+ 認証リンクが現在の完全な URL を指す場合、AuthPanel は再ナビゲーションせずに画面だけを切り替え、ログインに戻った直後の入力を保持します。パス、クエリー、hash が異なる場合はアプリのルーターに任せます。Ctrl/Cmd などの修飾キーを使ったクリックはブラウザーの動作を維持します。
807
+
794
808
  [完整 IAM 配置 / IAM configuration](../iam/README.ja.md)
795
809
 
796
- ## 初回ガイドとヘルプセンター
810
+ ### 初回ガイドとヘルプセンター
797
811
 
798
812
  `@h-ai/ui/guide` から `createGuide`、`GuideHost`、`HelpCenter` をインポートします。init/close は不要です。ガイド開始時にエンジンを読み込み、既存テーマと中国語・英語の共通文言を使用します。業務内容はアプリの翻訳関数を使います。
799
813
 
@@ -845,7 +859,7 @@ start(id) は Promise<boolean> を返し、手動で再表示できます。失
845
859
 
846
860
  HelpCenter は articles、任意の tours、locale、selectedId、onstart で独立ページにも配置できます。admin-console と CLI fullstack Web/App/Desktop は初回案内、ヘルプ、プロフィールガイドを標準搭載します。[詳細ガイド](../cli/templates/skills/hai-ui/guide.md)を参照してください。
847
861
 
848
- ## その他のエクスポート
862
+ ### その他のエクスポート
849
863
 
850
864
  ```ts
851
865
  // 类型
@@ -875,3 +889,16 @@ import { toast } from '@h-ai/ui'
875
889
  {/snippet}
876
890
  </AuthPanel>
877
891
  ```
892
+
893
+ ## 開発とテスト
894
+
895
+ ```sh
896
+ pnpm --filter @h-ai/ui typecheck
897
+ pnpm --filter @h-ai/ui lint
898
+ pnpm --filter @h-ai/ui build
899
+ pnpm --filter @h-ai/ui test
900
+ ```
901
+
902
+ ## ライセンス
903
+
904
+ Apache-2.0
package/README.md CHANGED
@@ -4,19 +4,29 @@
4
4
 
5
5
  [框架首页](../../README.md) · 相关模块:[@h-ai/core](../core/README.md)
6
6
 
7
- > 基于 Svelte 5 Runes 的多端 UI 组件库,采用 DaisyUI v5 + Tailwind CSS v4 样式 + Bits UI v2 headless 交互,内置 i18n(zh-CN / en-US),内置 15 个精选 DaisyUI 主题。
7
+ ## 简介
8
8
 
9
- ## 安装
9
+ 基于 Svelte 5 Runes 的多端 UI 组件库,采用 DaisyUI v5 + Tailwind CSS v4 样式 + Bits UI v2 headless 交互,内置 i18n(zh-CN / en-US),内置 15 个精选 DaisyUI 主题。
10
+
11
+ ## 核心功能清单
12
+
13
+ - 表单、表格、弹窗、导航、图表与业务场景组件。
14
+ - 认证、CRUD、AI 内容展示、新手引导和帮助中心。
15
+ - Svelte 5、主题切换、响应式布局及中英文组件文案。
16
+
17
+ ## 使用入门
18
+
19
+ ### 安装
10
20
 
11
21
  ```bash
12
- npm install @h-ai/ui
22
+ npm install @h-ai/ui @h-ai/core
13
23
  ```
14
24
 
15
- 依赖 `@h-ai/core`(会自动安装)。
25
+ Node 服务端工程将 UI 与 core 都列为生产依赖,确保适配器保留 core 的日志和原生依赖加载。
16
26
 
17
- ## 快速开始
27
+ ### 快速开始
18
28
 
19
- ### 1. 配置 svelte.config.js
29
+ #### 1. 配置 svelte.config.js
20
30
 
21
31
  ```js
22
32
  import { autoImportHaiUi } from '@h-ai/ui/auto-import'
@@ -33,7 +43,7 @@ const config = {
33
43
  export default config
34
44
  ```
35
45
 
36
- ### 2. 配置 vite.config.ts
46
+ #### 2. 配置 vite.config.ts
37
47
 
38
48
  ```ts
39
49
  import { haiOptimizeExclude, haiPrebundledDeps } from '@h-ai/ui/vite'
@@ -51,11 +61,13 @@ export default defineConfig({
51
61
  // 避免首次进入业务路由时触发依赖再优化与整页刷新
52
62
  include: [...haiPrebundledDeps],
53
63
  },
54
- ssr: { noExternal: [/@h-ai\//] },
64
+ ssr: { noExternal: ['@h-ai/ui', '@h-ai/kit'], external: ['@h-ai/core', 'sm-crypto'] },
55
65
  })
56
66
  ```
57
67
 
58
- ### 3. 配置 src/app.css
68
+ 使用 Crypto 或依赖它的 Kit/IAM 时,应用生产依赖需包含 `sm-crypto@0.5.7`。CLI 已配好这一项;手工接入时运行 `pnpm add sm-crypto@0.5.7`。仅设置 external 不够,adapter-node 还需要这项直接依赖声明才能保留原包加载。
69
+
70
+ #### 3. 配置 src/app.css
59
71
 
60
72
  ```css
61
73
  @import 'tailwindcss';
@@ -76,7 +88,7 @@ export default defineConfig({
76
88
 
77
89
  > `@source` 让 TailwindCSS 扫描 `@h-ai/ui` 组件中使用的 class 名,否则组件样式会丢失。嵌套应用位于 monorepo 中时,依赖包可能被提升到工作区根 `node_modules`,所以建议同时保留两条路径。
78
90
 
79
- ### 4. 使用组件
91
+ #### 4. 使用组件
80
92
 
81
93
  ```svelte
82
94
  <script>
@@ -108,7 +120,7 @@ import { Button } from '@h-ai/ui/components/primitives/index'
108
120
  import { getThemeInfo, THEMES } from '@h-ai/ui/theme'
109
121
  ```
110
122
 
111
- ### data-* 属性透传
123
+ #### data-* 属性透传
112
124
 
113
125
  公开 Svelte 组件支持把调用方传入的 `data-*` 属性透传到组件根节点或主交互节点,便于测试选择器、埋点和自动化标记。普通未知属性不会被透传。
114
126
 
@@ -120,7 +132,7 @@ import { getThemeInfo, THEMES } from '@h-ai/ui/theme'
120
132
 
121
133
  无需再为了 `data-testid` 单独封装按钮、输入框或弹层组件。
122
134
 
123
- ## 组件架构
135
+ ### 组件架构
124
136
 
125
137
  组件按三层划分(primitives → compounds → scenes):
126
138
 
@@ -137,9 +149,9 @@ components/
137
149
  └── crypto/ # 加密展示
138
150
  ```
139
151
 
140
- ## 组件清单
152
+ ### 组件清单
141
153
 
142
- ### 原子组件 Primitives(20 个)
154
+ #### 原子组件 Primitives(20 个)
143
155
 
144
156
  | 组件 | 描述 | 主要属性 |
145
157
  | ---------------- | ------------ | ------------------------------------------------------------------ |
@@ -166,9 +178,9 @@ components/
166
178
 
167
179
  `BareInput` 的 `file` 类型通过 `onchange` 读取 `event.currentTarget.files`,不绑定文件路径 `value`;其他输入类型可使用 `bind:value`。
168
180
 
169
- ### 组合组件 Compounds(37 个)
181
+ #### 组合组件 Compounds(37 个)
170
182
 
171
- #### 表单
183
+ ##### 表单
172
184
 
173
185
  | 组件 | 描述 | 主要属性 |
174
186
  | ----------- | -------- | -------------------------------------------- |
@@ -177,7 +189,7 @@ components/
177
189
  | `FormLayout` | 表单布局 | `columns`, `labelPosition`, `labelWidth` |
178
190
  | `TagInput` | 标签输入 | `tags`, `maxTags`, `allowDuplicates`, `size` |
179
191
 
180
- #### 表单布局与校验
192
+ ##### 表单布局与校验
181
193
 
182
194
  `Form` 和可嵌入原生 `<form>` 的 `FormLayout` 共用 `columns={1 | 2}`、`labelPosition="top" | "left"`、`labelWidth`(默认 `8rem`)。默认单列、标签独立成行;双列在容器不足 `36rem` 时收为单列,同行标签在容器不足 `28rem` 时改为上下排列。
183
195
 
@@ -206,14 +218,14 @@ components/
206
218
  </Form>
207
219
  ```
208
220
 
209
- #### 反馈
221
+ ##### 反馈
210
222
 
211
223
  | 组件 | 描述 | 主要属性 |
212
224
  | ---------------- | -------- | --------------------------------- |
213
225
  | `Alert` | 警告框 | `variant`, `title`, `dismissible` |
214
226
  | `ToastContainer` | 通知容器 | 全局放置,配合 `toast` 单例使用 |
215
227
 
216
- #### 弹层
228
+ ##### 弹层
217
229
 
218
230
  | 组件 | 描述 | 主要属性 |
219
231
  | --------- | ------ | ------------------------------------------------------- |
@@ -222,7 +234,7 @@ components/
222
234
  | `Confirm` | 确认框 | `open`, `title`, `message`, `variant`, `onconfirm` |
223
235
  | `Popover` | 弹出层 | `open`, `position`, `trigger`, `offset`, `portal` |
224
236
 
225
- #### 数据展示
237
+ ##### 数据展示
226
238
 
227
239
  | 组件 | 描述 | 主要属性 |
228
240
  | ----------- | -------- | ---------------------------------------- |
@@ -231,7 +243,7 @@ components/
231
243
  | `Accordion` | 手风琴 | `items: AccordionItem[]` |
232
244
  | `Timeline` | 时间线 | `items: TimelineItem[]` |
233
245
 
234
- #### Bits UI headless 交互
246
+ ##### Bits UI headless 交互
235
247
 
236
248
  | 组件 | 描述 | 主要属性 |
237
249
  | ------------ | --------------------------- | ----------------------------------------------------------- |
@@ -241,7 +253,7 @@ components/
241
253
 
242
254
  > 日期值使用 `@internationalized/date` 的 `DateValue` / `CalendarDate` 类型。
243
255
 
244
- #### 移动端 / 增强交互
256
+ ##### 移动端 / 增强交互
245
257
 
246
258
  | 组件 | 描述 | 主要属性 |
247
259
  | ---------------- | ------------ | --------------------------------------------------- |
@@ -253,7 +265,7 @@ components/
253
265
  | `SafeArea` | 安全区域容器 | `top`, `bottom`, `left`, `right` |
254
266
  | `SwipeCell` | 滑动操作单元 | `leftActions`, `rightActions`, `threshold`, `onaction` |
255
267
 
256
- #### 导航
268
+ ##### 导航
257
269
 
258
270
  | 组件 | 描述 | 主要属性 |
259
271
  | ------------ | -------- | -------------------------------------------- |
@@ -264,7 +276,7 @@ components/
264
276
  | `Dropdown` | 下拉菜单 | `items`, `trigger`, `triggerClass`, `position` |
265
277
  | `Tooltip` | 提示 | `content`, `position`, `delay` |
266
278
 
267
- #### 状态占位
279
+ ##### 状态占位
268
280
 
269
281
  | 组件 | 描述 | 主要属性 |
270
282
  | ---------- | ------ | ------------------------------------- |
@@ -272,22 +284,22 @@ components/
272
284
  | `Empty` | 空状态 | `title`, `description`, `icon` |
273
285
  | `Result` | 结果页 | `status`, `title`, `description` |
274
286
 
275
- #### 页面级
287
+ ##### 页面级
276
288
 
277
289
  | 组件 | 描述 | 主要属性 |
278
290
  | ------------ | -------- | ------------------------------------------- |
279
291
  | `PageHeader` | 页面头部 | `title`, `description`,支持 `actions` 插槽 |
280
292
 
281
- ### 场景组件 Scenes(36 个)
293
+ #### 场景组件 Scenes(36 个)
282
294
 
283
- #### Guide 引导与帮助(2 个)
295
+ ##### Guide 引导与帮助(2 个)
284
296
 
285
297
  | 组件 | 描述 | 主要属性 |
286
298
  | --- | --- | --- |
287
299
  | `GuideHost` | 首次邀请、页面导览与帮助弹窗宿主 | `guide`, `locale`, `scope`, `autoStart` |
288
300
  | `HelpCenter` | 可独立使用的帮助中心 | `articles`, `tours`, `locale`, `selectedId`, `onstart` |
289
301
 
290
- #### App 应用级(7 个)
302
+ ##### App 应用级(7 个)
291
303
 
292
304
  | 组件 | 描述 | 主要属性 |
293
305
  | ---------------- | ---------------- | ------------------ |
@@ -299,7 +311,7 @@ components/
299
311
  | `ThemeSelector` | 完整主题选择面板 | 无需 Props |
300
312
  | `ThemeToggle` | 明/暗主题切换 | 无需 Props |
301
313
 
302
- #### IAM 身份认证(10 个)
314
+ ##### IAM 身份认证(10 个)
303
315
 
304
316
  | 组件 | 描述 | 主要属性 |
305
317
  | -------------------- | ---------- | ----------------------------------------------------- |
@@ -314,7 +326,7 @@ components/
314
326
  | `PermGuard` | 权限守卫 | `permissions`, `mode`, `fallback` |
315
327
  | `UserProfile` | 用户资料 | `user`, `editable`, `fields`, `avatarAccept`, `avatarHint`, `onsubmit` |
316
328
 
317
- #### Storage 存储(4 个)
329
+ ##### Storage 存储(4 个)
318
330
 
319
331
  | 组件 | 描述 | 主要属性 |
320
332
  | -------------- | -------- | -------------------------------------------------------- |
@@ -325,7 +337,7 @@ components/
325
337
 
326
338
  上传组件不内置 presign、请求头或 PUT/POST 协议。应用层通过 `uploadHandler(file, { signal, onProgress })` 调用自己的 service,并返回 `{ url?, response? }`;图片和头像上传需要返回可展示的 `url`。未提供 handler 时,`FileUpload` 只选择文件,图片/头像组件只生成本地预览。
327
339
 
328
- #### Crypto 加密展示(3 个)
340
+ ##### Crypto 加密展示(3 个)
329
341
 
330
342
  输入变化立即清空 `encryptedValue`,只有当前输入的成功结果会回填;清空、回调替换和卸载均使旧请求失效。失败显示内置错误提示且密文保持为空;表单应仅在当前密文非空时提交需要加密的输入。
331
343
 
@@ -339,7 +351,7 @@ components/
339
351
 
340
352
  默认算法与 `@h-ai/crypto` 对齐:加密输入使用 `SM4`,哈希展示使用 `SM3`,签名展示使用 `SM2`。
341
353
 
342
- #### AI 文档与表格(4 个)
354
+ ##### AI 文档与表格(4 个)
343
355
 
344
356
  | 组件 | 描述 | 主要属性 / 能力 |
345
357
  | ------------------------ | ---------------- | ---------------- |
@@ -369,7 +381,7 @@ components/
369
381
  />
370
382
  ```
371
383
 
372
- #### Charts 图表
384
+ ##### Charts 图表
373
385
 
374
386
  `Chart type='line'` 默认透传 LayerChart 原生折线图;需要监控看板常见的“分段线 + 圆点 + 最近点 hover + 竖向参考线”时,使用 `lineVariant='segmented-point'`:
375
387
 
@@ -388,7 +400,7 @@ components/
388
400
  />
389
401
  ```
390
402
 
391
- #### CRUD 场景(5 个)
403
+ ##### CRUD 场景(5 个)
392
404
 
393
405
  | 组件 | 描述 | 主要属性 / 能力 |
394
406
  | -------------------- | ------------ | ---------------- |
@@ -404,7 +416,7 @@ components/
404
416
  >
405
417
  > 表格列会优先压缩到 7rem 并截断超长文本;列总宽度仍超过容器时才显示横向滚动条。操作列固定在右侧,横向滚动时保持可见。
406
418
 
407
- #### 错误页场景(1 个)
419
+ ##### 错误页场景(1 个)
408
420
 
409
421
  | 组件 | 描述 | 主要属性 / 能力 |
410
422
  | ----------- | ------------ | ---------------- |
@@ -435,9 +447,9 @@ components/
435
447
  >
436
448
  > `Tabs` 支持惰性页签:`lazy` 开启后未激活过的页签内容不渲染(`children` 提供 `isActivated(key)` 判断),`onactivate(key)` 在页签首次激活时触发一次,适合配合 `createCrudController({ autoLoad: false })` 在首次可见时才加载。
437
449
 
438
- ## 使用示例
450
+ ### 使用示例
439
451
 
440
- ### Toast 通知
452
+ #### Toast 通知
441
453
 
442
454
  ```svelte
443
455
  <script>
@@ -457,7 +469,7 @@ components/
457
469
 
458
470
  > 已内置 `notifySuccess` / `notifyError` / `notifyInfo` / `notifyWarning` 封装,业务应用无需自建 toast 工具文件:`notifyError(err, fallback?)` 接受 `Error` 或字符串并内置兑底文案,默认成功 3s / 失败 5s。
459
471
 
460
- ### Message 消息提示
472
+ #### Message 消息提示
461
473
 
462
474
  ```svelte
463
475
  <script>
@@ -475,7 +487,7 @@ components/
475
487
  <MessageContainer />
476
488
  ```
477
489
 
478
- ### 典型 CRUD 页面
490
+ #### 典型 CRUD 页面
479
491
 
480
492
  ```svelte
481
493
  <script>
@@ -545,7 +557,7 @@ components/
545
557
 
546
558
  `Modal` 不传 `title` / `header` 时会保留右上角关闭按钮,但不额外渲染整条头部。需要调整圆角时可传 `radius="1.4rem"`,内部下拉等浮层需要越界显示时可传 `bodyOverflow="visible"`。
547
559
 
548
- ### 声明式 CRUD 页面(CrudPage)
560
+ #### 声明式 CRUD 页面(CrudPage)
549
561
 
550
562
  ```svelte
551
563
  <script lang='ts'>
@@ -571,7 +583,7 @@ components/
571
583
 
572
584
  > 抽屉形式可改用 `form={{ variant: 'drawer', drawerWidth: '40rem' }}`;用户拖动后的宽度会覆盖初始宽度并按资源记忆。
573
585
 
574
- ### 登录页面
586
+ #### 登录页面
575
587
 
576
588
  ```svelte
577
589
  <script>
@@ -597,7 +609,7 @@ components/
597
609
  <LoginForm {loading} {errors} onsubmit={handleLogin} showRegisterLink />
598
610
  ```
599
611
 
600
- ### PasswordInput 受控模式
612
+ #### PasswordInput 受控模式
601
613
 
602
614
  ```svelte
603
615
  <script>
@@ -614,7 +626,7 @@ components/
614
626
  />
615
627
  ```
616
628
 
617
- ## 样式依赖
629
+ ### 样式依赖
618
630
 
619
631
  组件基于 TailwindCSS v4 + DaisyUI。应用层 `app.css` 需要以下配置:
620
632
 
@@ -653,7 +665,7 @@ components/
653
665
  </div>
654
666
  ```
655
667
 
656
- ### 图标
668
+ #### 图标
657
669
 
658
670
  组件使用 Iconify (Tabler Icons):
659
671
 
@@ -668,7 +680,7 @@ npm install -D @iconify/tailwind4 @iconify-json/tabler
668
680
  }
669
681
  ```
670
682
 
671
- ### 主题切换
683
+ #### 主题切换
672
684
 
673
685
  使用内置的主题工具函数管理 15 个精选 DaisyUI 主题:
674
686
 
@@ -712,7 +724,7 @@ const themeBootstrapScript = createThemeBootstrapScript({
712
724
  transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstrapScript)
713
725
  ```
714
726
 
715
- ## 国际化 (i18n)
727
+ ### 国际化 (i18n)
716
728
 
717
729
  @h-ai/ui 采用**组件内置翻译**模式:
718
730
 
@@ -721,7 +733,7 @@ transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstr
721
733
  - 应用层只需处理**页面级文本**,组件内部文本由 @h-ai/ui 统一管理
722
734
  - 如需覆盖特定文本,通过 `submitText`、`labels` 等 props 传入
723
735
 
724
- ## 配置驱动认证页面
736
+ ### 配置驱动认证页面
725
737
 
726
738
  协议支持 `agreements.userAgreementMarkdown` 与 `privacyPolicyMarkdown` 直接从配置加载;YAML 的 `|` 保留 Markdown 段落和换行。弹窗复用安全 MarkdownRenderer,关闭原始 HTML、脚本和代码复制工具。同主题同时提供正文与 URL 时优先正文,URL 可作为额外查看入口;只有 URL 时使用隔离 iframe。
727
739
 
@@ -750,9 +762,11 @@ AuthPanel 直接接收 IAM 白名单配置和 actions,内置登录(密码/LD
750
762
 
751
763
  AuthPanel 在 SSR 阶段禁用原生表单控件,客户端挂载并绑定事件后自动开放输入,避免接管时丢失早到的输入。应用无需额外的就绪适配;E2E 等待控件可编辑,并覆盖客户端脚本延迟加载的场景。
752
764
 
765
+ 认证链接指向当前完整 URL 时,AuthPanel 只切换场景并阻止重复导航,返回登录后可立即输入。路径、查询串或 hash 不同时交给应用路由处理;Ctrl/Cmd 等修改键点击保留浏览器行为。
766
+
753
767
  [完整 IAM 配置 / IAM configuration](../iam/README.md)
754
768
 
755
- ### createLocaleStore
769
+ #### createLocaleStore
756
770
 
757
771
  用于客户端 locale 状态管理,自动同步到 `@h-ai/core` 全局 locale 管理器:
758
772
 
@@ -776,7 +790,7 @@ AuthPanel 在 SSR 阶段禁用原生表单控件,客户端挂载并绑定事
776
790
  </select>
777
791
  ```
778
792
 
779
- ### 导出的 i18n 工具
793
+ #### 导出的 i18n 工具
780
794
 
781
795
  ```ts
782
796
  import {
@@ -809,8 +823,7 @@ import {
809
823
 
810
824
  上例的 subscribe 为应用自身的 $state,应用包装 register 动作校验/提交扩展业务数据;如需单独组合表单,使用 `<RegisterForm> {#snippet extraFields()}...{/snippet} </RegisterForm>`。扩展里的按钮须为 `type="button"`,避免误提交。
811
825
 
812
-
813
- ## 新手引导与帮助中心
826
+ ### 新手引导与帮助中心
814
827
 
815
828
  `@h-ai/ui/guide` 提供 `createGuide`、`GuideHost`、`HelpCenter` 和相关类型。无需 init/close;引擎在开始导览时按需加载,浮层复用当前主题。组件内置中英文按钮、进度和错误提示,业务内容使用应用 i18n。
816
829
 
@@ -863,7 +876,7 @@ import {
863
876
 
864
877
  admin-console 示例和 CLI fullstack Web/App/Desktop 默认包含帮助入口、首次邀请及个人资料导览。完整配置和验证场景见 [引导指南](../cli/templates/skills/hai-ui/guide.md)。
865
878
 
866
- ## 其他导出
879
+ ### 其他导出
867
880
 
868
881
  ```ts
869
882
  // 类型
@@ -879,3 +892,16 @@ import { cn, generateId, getSizeClass, getVariantClass } from '@h-ai/ui'
879
892
  // Toast 单例
880
893
  import { toast } from '@h-ai/ui'
881
894
  ```
895
+
896
+ ## 开发测试
897
+
898
+ ```sh
899
+ pnpm --filter @h-ai/ui typecheck
900
+ pnpm --filter @h-ai/ui lint
901
+ pnpm --filter @h-ai/ui build
902
+ pnpm --filter @h-ai/ui test
903
+ ```
904
+
905
+ ## 许可证
906
+
907
+ Apache-2.0
@@ -73,12 +73,18 @@
73
73
 
74
74
  {#snippet link(next: AuthPanelMode, label: string, href?: string)}
75
75
  {#if href}<a {href} class='link link-primary text-sm' aria-disabled={loading} onclick={(event) => {
76
- if (loading)
76
+ if (loading) {
77
+ event.preventDefault()
78
+ return
79
+ }
80
+ if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
81
+ return
82
+ // 当前完整 URL 只切换场景,阻止重复导航重建表单并清空刚输入的内容。
83
+ // 跨路径、查询或 hash 的链接由路由接管;修改键点击保留浏览器的新窗口行为。
84
+ if (event.currentTarget.href === window.location.href) {
77
85
  event.preventDefault()
78
- // 跨路径或哈希路由由路由创建新表单;提前切换会让输入被随后导航清空。
79
- // 当前路由只更新场景,支持登录页内的找回密码和返回登录。
80
- else if (event.currentTarget.origin === window.location.origin && event.currentTarget.pathname === window.location.pathname && event.currentTarget.hash === window.location.hash)
81
86
  switchMode(next)
87
+ }
82
88
  }}>{label}</a>
83
89
  {:else}<BareButton type='button' class='link link-primary text-sm' disabled={loading} onclick={() => switchMode(next)}>{label}</BareButton>{/if}
84
90
  {/snippet}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@h-ai/ui",
3
3
  "type": "module",
4
- "version": "0.1.0-alpha.65",
4
+ "version": "0.1.0-alpha.67",
5
5
  "description": "Hai Framework UI component library for Svelte 5 Runes.",
6
6
  "license": "Apache-2.0",
7
7
  "svelte": "./dist/index.js",
@@ -59,7 +59,7 @@
59
59
  "svelte": "^5.57.2"
60
60
  },
61
61
  "dependencies": {
62
- "@h-ai/core": "0.1.0-alpha.65",
62
+ "@h-ai/core": "0.1.0-alpha.67",
63
63
  "@internationalized/date": "^3.12.4",
64
64
  "@shikijs/langs": "^4.5.0",
65
65
  "bits-ui": "^2.19.5",