@h-ai/ui 0.1.0-alpha.10

package/dist/components/scenes/app/FeedbackModal.svelte

@@ -0,0 +1,160 @@
+<!--
+  @component FeedbackModal
+  用户反馈模态框，支持 Bug 报告、功能建议等多种反馈类型。
+
+  @prop {boolean} open - 是否显示模态框（双向绑定）
+  @prop {function} onsubmit - 提交反馈的回调
+
+  @example
+  <FeedbackModal
+    bind:open={showFeedback}
+    onsubmit={async (data) => { await submitFeedback(data) }}
+  />
+-->
+<script lang='ts'>
+  import Modal from '../../compounds/Modal.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import Select from '../../primitives/Select.svelte'
+  import Textarea from '../../primitives/Textarea.svelte'
+
+  type FeedbackType = 'bug' | 'feature' | 'question' | 'other'
+
+  interface FeedbackData {
+    type: FeedbackType
+    description: string
+    contact?: string
+  }
+
+  /** i18n 文案配置 */
+  interface FeedbackLabels {
+    title?: string
+    description?: string
+    typeLabel?: string
+    contentLabel?: string
+    contentPlaceholder?: string
+    contactLabel?: string
+    contactPlaceholder?: string
+    cancel?: string
+    submit?: string
+    errorEmpty?: string
+    errorSubmit?: string
+    types?: {
+      bug?: string
+      feature?: string
+      question?: string
+      other?: string
+    }
+  }
+
+  import { uiM } from '../../../messages.js'
+
+  interface Props {
+    open?: boolean
+    labels?: FeedbackLabels
+    onsubmit?: (data: FeedbackData) => Promise<void>
+  }
+
+  let { open = $bindable(false), labels = {}, onsubmit }: Props = $props()
+
+  // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
+
+  let feedbackType = $state<FeedbackType>('bug')
+  let description = $state('')
+  let contact = $state('')
+  let loading = $state(false)
+  let error = $state('')
+
+  const typeOptions = $derived([
+    { value: 'bug', label: labels.types?.bug ?? uiM('feedback_type_bug') },
+    { value: 'feature', label: labels.types?.feature ?? uiM('feedback_type_feature') },
+    { value: 'question', label: labels.types?.question ?? uiM('feedback_type_question') },
+    { value: 'other', label: labels.types?.other ?? uiM('feedback_type_other') },
+  ])
+
+  async function handleSubmit() {
+    if (!description.trim()) {
+      error = labels.errorEmpty ?? uiM('feedback_error_empty')
+      return
+    }
+
+    loading = true
+    error = ''
+
+    try {
+      await onsubmit?.({
+        type: feedbackType,
+        description: description.trim(),
+        contact: contact.trim() || undefined,
+      })
+      open = false
+      resetForm()
+    }
+    catch (e) {
+      error = e instanceof Error ? e.message : (labels.errorSubmit ?? uiM('feedback_error_submit'))
+    }
+    finally {
+      loading = false
+    }
+  }
+
+  function resetForm() {
+    feedbackType = 'bug'
+    description = ''
+    contact = ''
+    error = ''
+  }
+</script>
+
+<Modal bind:open title={labels.title ?? uiM('feedback_title')}>
+  <p class='text-base-content/70 mb-4'>{labels.description ?? uiM('feedback_description')}</p>
+
+  {#if error}
+    <div class='alert alert-error mb-4'>
+      <span class='icon-[tabler--alert-circle] size-5'></span>
+      <span>{error}</span>
+    </div>
+  {/if}
+
+  <div class='space-y-4'>
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{labels.typeLabel ?? uiM('feedback_type_label')}</legend>
+      <Select
+        id='feedback-type'
+        options={typeOptions}
+        bind:value={feedbackType}
+      />
+    </div>
+
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{labels.contentLabel ?? uiM('feedback_content_label')} <span class='text-error'>*</span></legend>
+      <Textarea
+        id='feedback-desc'
+        class='h-32'
+        placeholder={labels.contentPlaceholder ?? uiM('feedback_content_placeholder')}
+        bind:value={description}
+      />
+    </div>
+
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{labels.contactLabel ?? uiM('feedback_contact_label')}</legend>
+      <Input
+        id='feedback-contact'
+        type='text'
+        class='w-full'
+        placeholder={labels.contactPlaceholder ?? uiM('feedback_contact_placeholder')}
+        bind:value={contact}
+        autocomplete='email'
+      />
+    </div>
+  </div>
+
+  {#snippet footer()}
+    <Button variant='ghost' onclick={() => open = false}>
+      {labels.cancel ?? uiM('feedback_cancel')}
+    </Button>
+    <Button variant='primary' {loading} onclick={handleSubmit}>
+      {labels.submit ?? uiM('feedback_submit')}
+    </Button>
+  {/snippet}
+</Modal>

package/dist/components/scenes/app/FeedbackModal.svelte.d.ts

@@ -0,0 +1,47 @@
+type FeedbackType = 'bug' | 'feature' | 'question' | 'other';
+interface FeedbackData {
+    type: FeedbackType;
+    description: string;
+    contact?: string;
+}
+/** i18n 文案配置 */
+interface FeedbackLabels {
+    title?: string;
+    description?: string;
+    typeLabel?: string;
+    contentLabel?: string;
+    contentPlaceholder?: string;
+    contactLabel?: string;
+    contactPlaceholder?: string;
+    cancel?: string;
+    submit?: string;
+    errorEmpty?: string;
+    errorSubmit?: string;
+    types?: {
+        bug?: string;
+        feature?: string;
+        question?: string;
+        other?: string;
+    };
+}
+interface Props {
+    open?: boolean;
+    labels?: FeedbackLabels;
+    onsubmit?: (data: FeedbackData) => Promise<void>;
+}
+/**
+ * FeedbackModal
+ * 用户反馈模态框，支持 Bug 报告、功能建议等多种反馈类型。
+ *
+ * @prop {boolean} open - 是否显示模态框（双向绑定）
+ * @prop {function} onsubmit - 提交反馈的回调
+ *
+ * @example
+ * <FeedbackModal
+ *   bind:open={showFeedback}
+ *   onsubmit={async (data) => { await submitFeedback(data) }}
+ * />
+ */
+declare const FeedbackModal: import("svelte").Component<Props, {}, "open">;
+type FeedbackModal = ReturnType<typeof FeedbackModal>;
+export default FeedbackModal;

package/dist/components/scenes/app/LanguageSwitch.svelte

@@ -0,0 +1,136 @@
+<!--
+  @component LanguageSwitch
+  语言切换下拉组件，支持多语言切换。
+
+  @prop {string} currentLanguage - 当前语言代码（BCP 47 格式，如 'zh-CN', 'en-US'）
+  @prop {Language[]} languages - 可选语言列表
+  @prop {function} onchange - 语言变更回调，传入选中的语言代码
+
+  @example
+  ```svelte
+  <script>
+    import { LanguageSwitch, createLocaleStore, setGlobalLocale } from '@h-ai/ui'
+    import { setLocale, getLocale } from '../../../paraglide/runtime.js'
+
+    const localeStore = createLocaleStore()
+  </script>
+
+  <LanguageSwitch
+    currentLanguage={localeStore.current}
+    languages={[
+      { value: 'zh-CN', label: '简体中文' },
+      { value: 'en-US', label: 'English' }
+    ]}
+    onchange={(lang) => {
+      localeStore.set(lang)  // 同步到 @h-ai/core 全局 locale
+      setLocale(lang)        // 同步到 Paraglide
+    }}
+  />
+  ```
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+
+  interface Language {
+    value: string
+    label: string
+    flag?: string
+  }
+
+  interface Props {
+    /** 当前语言代码（BCP 47 格式） */
+    currentLanguage?: string
+    /** 可选语言列表 */
+    languages?: Language[]
+    /** 语言变更回调 */
+    onchange?: (lang: string) => void
+    /** 紧凑模式：仅显示图标，适用于移动端头部 */
+    compact?: boolean
+    /** 自定义类名 */
+    class?: string
+  }
+
+  const {
+    currentLanguage = 'zh-CN',
+    languages = [
+      { value: 'zh-CN', label: '简体中文', flag: 'CN' },
+      { value: 'en-US', label: 'English', flag: 'US' },
+    ],
+    onchange,
+    compact = false,
+    class: className = '',
+  }: Props = $props()
+
+  let open = $state(false)
+  let containerRef = $state<HTMLDivElement | null>(null)
+
+  const currentLangInfo = $derived(
+    languages.find(l => l.value === currentLanguage),
+  )
+
+  function selectLanguage(lang: string) {
+    if (lang !== currentLanguage) {
+      onchange?.(lang)
+    }
+    open = false
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (containerRef && !containerRef.contains(event.target as Node)) {
+      open = false
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+    return undefined
+  })
+</script>
+
+<div bind:this={containerRef} class='dropdown dropdown-end {open ? 'dropdown-open' : ''} {className}'>
+  <BareButton
+    type='button'
+    class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'btn-sm gap-2 min-w-fit'}'
+    onclick={() => (open = !open)}
+    ariaLabel={uiM('language_switch_label')}
+  >
+    <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+      <path d='M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129' />
+    </svg>
+    {#if !compact}
+      {#if currentLangInfo?.flag}
+        <span class='shrink-0 text-xs'>{currentLangInfo.flag}</span>
+      {/if}
+      <span class='text-sm whitespace-nowrap'>{currentLangInfo?.label ?? currentLanguage}</span>
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 shrink-0 opacity-50' viewBox='0 0 20 20' fill='currentColor'>
+        <path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' />
+      </svg>
+    {/if}
+  </BareButton>
+
+  {#if open}
+    <div class='dropdown-content bg-base-100 rounded-box shadow-lg border border-base-content/10 z-50 p-2'>
+      {#each languages as lang (lang.value)}
+        <BareButton
+          type='button'
+          class='flex items-center gap-2 w-full px-3 py-2 rounded-lg text-left transition-colors whitespace-nowrap {lang.value === currentLanguage ? 'bg-primary/10 text-primary' : 'hover:bg-base-200'}'
+          onclick={() => selectLanguage(lang.value)}
+        >
+          {#if lang.flag}
+            <span class='shrink-0 text-xs font-medium text-base-content/60'>{lang.flag}</span>
+          {/if}
+          <span class='whitespace-nowrap'>{lang.label}</span>
+          {#if lang.value === currentLanguage}
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4 ml-auto shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
+              <path d='M5 13l4 4L19 7' />
+            </svg>
+          {/if}
+        </BareButton>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/scenes/app/LanguageSwitch.svelte.d.ts

@@ -0,0 +1,50 @@
+interface Language {
+    value: string;
+    label: string;
+    flag?: string;
+}
+interface Props {
+    /** 当前语言代码（BCP 47 格式） */
+    currentLanguage?: string;
+    /** 可选语言列表 */
+    languages?: Language[];
+    /** 语言变更回调 */
+    onchange?: (lang: string) => void;
+    /** 紧凑模式：仅显示图标，适用于移动端头部 */
+    compact?: boolean;
+    /** 自定义类名 */
+    class?: string;
+}
+/**
+ * LanguageSwitch
+ * 语言切换下拉组件，支持多语言切换。
+ *
+ * @prop {string} currentLanguage - 当前语言代码（BCP 47 格式，如 'zh-CN', 'en-US'）
+ * @prop {Language[]} languages - 可选语言列表
+ * @prop {function} onchange - 语言变更回调，传入选中的语言代码
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { LanguageSwitch, createLocaleStore, setGlobalLocale } from '@h-ai/ui'
+ *   import { setLocale, getLocale } from '../../../paraglide/runtime.js'
+ *
+ *   const localeStore = createLocaleStore()
+ * </script>
+ *
+ * <LanguageSwitch
+ *   currentLanguage={localeStore.current}
+ *   languages={[
+ *     { value: 'zh-CN', label: '简体中文' },
+ *     { value: 'en-US', label: 'English' }
+ *   ]}
+ *   onchange={(lang) => {
+ *     localeStore.set(lang)  // 同步到 @h-ai/core 全局 locale
+ *     setLocale(lang)        // 同步到 Paraglide
+ *   }}
+ * />
+ * ```
+ */
+declare const LanguageSwitch: import("svelte").Component<Props, {}, "">;
+type LanguageSwitch = ReturnType<typeof LanguageSwitch>;
+export default LanguageSwitch;

package/dist/components/scenes/app/SettingsModal.svelte

@@ -0,0 +1,174 @@
+<!--
+  @component SettingsModal
+  应用设置模态框，包含语言和主题切换功能。
+  内置多语言支持，自动跟随全局 locale
+
+  @prop {boolean} open - 是否显示模态框（双向绑定）
+  @prop {string} currentLanguage - 当前语言
+  @prop {string} currentTheme - 当前主题
+  @prop {function} onlanguagechange - 语言变更回调
+  @prop {function} onthemechange - 主题变更回调
+-->
+<script lang='ts'>
+  import { uiM } from '../../../messages.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+  import IconButton from '../../primitives/IconButton.svelte'
+
+  interface Props {
+    open?: boolean
+    currentLanguage?: string
+    currentTheme?: string
+    languages?: { value: string, label: string, icon?: string }[]
+    themes?: { value: string, label: string }[]
+    onlanguagechange?: (lang: string) => void
+    onthemechange?: (theme: string) => void
+    onclose?: () => void
+  }
+
+  let {
+    open = $bindable(false),
+    currentLanguage = 'zh-cn',
+    currentTheme = 'light',
+    languages = [
+      { value: 'zh-cn', label: '简体中文', icon: '🇨🇳' },
+      { value: 'en-us', label: 'English', icon: '🇺🇸' },
+    ],
+    themes = [
+      { value: 'light', label: 'Light' },
+      { value: 'dark', label: 'Dark' },
+      { value: 'corporate', label: 'Corporate' },
+      { value: 'luxury', label: 'Luxury' },
+      { value: 'pastel', label: 'Pastel' },
+    ],
+    onlanguagechange,
+    onthemechange,
+    onclose,
+  }: Props = $props()
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      handleClose()
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      handleClose()
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity'
+    onclick={handleBackdropClick}
+  >
+    <div
+      class='relative w-full max-w-lg mx-4 transform overflow-hidden rounded-2xl bg-base-100 shadow-xl transition-all'
+      role='dialog'
+      aria-modal='true'
+    >
+      <!-- 标题栏 -->
+      <div class='flex items-center justify-between border-b border-base-content/10 px-6 py-4'>
+        <h3 class='text-lg font-semibold text-base-content'>{uiM('settings_title')}</h3>
+        <IconButton
+          size='sm'
+          variant='ghost'
+          label={uiM('settings_close')}
+          onclick={handleClose}
+          class='hover:bg-base-content/10'
+        >
+          {#snippet children()}
+            <span class='icon-[tabler--x] size-5'></span>
+          {/snippet}
+        </IconButton>
+      </div>
+
+      <!-- 内容区 -->
+      <div class='overflow-y-auto p-6' style='max-height: calc(85vh - 4rem);'>
+        <!-- 语言设置 -->
+        <section class='mb-8'>
+          <h4 class='mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-base-content/60'>
+            <span class='icon-[tabler--world] size-4'></span>
+            {uiM('settings_language')}
+          </h4>
+          <div class='flex gap-3'>
+            {#each languages as lang (lang.value)}
+              <BareButton
+                type='button'
+                class='group flex flex-1 items-center justify-center gap-3 rounded-xl border-2 px-6 py-4 text-base font-medium transition-all duration-200
+                  hover:border-primary/60 hover:bg-primary/5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
+                  {currentLanguage === lang.value
+                    ? 'border-primary bg-primary/10 text-primary shadow-sm'
+                    : 'border-base-content/15 bg-base-100 text-base-content/80'}'
+                onclick={() => onlanguagechange?.(lang.value)}
+                role='option'
+                ariaSelected={currentLanguage === lang.value}
+              >
+                {#if lang.icon}
+                  <span class='text-2xl'>{lang.icon}</span>
+                {/if}
+                <span>{lang.label}</span>
+                {#if currentLanguage === lang.value}
+                  <span class='icon-[tabler--check] size-5 text-primary'></span>
+                {/if}
+              </BareButton>
+            {/each}
+          </div>
+        </section>
+
+        <!-- 主题设置 -->
+        <section>
+          <h4 class='mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-base-content/60'>
+            <span class='icon-[tabler--sun] size-4'></span>
+            {uiM('settings_theme')}
+          </h4>
+          <div class='grid gap-2.5 grid-cols-2 sm:grid-cols-3'>
+            {#each themes as theme (theme.value)}
+              <BareButton
+                type='button'
+                class='group relative flex flex-col gap-2 rounded-xl border-2 p-3 text-left transition-all duration-200
+                  hover:border-primary/50 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
+                  {currentTheme === theme.value
+                    ? 'border-primary bg-primary/5 shadow-sm'
+                    : 'border-base-content/10 bg-base-100 hover:bg-base-50'}'
+                onclick={() => onthemechange?.(theme.value)}
+                role='option'
+                ariaSelected={currentTheme === theme.value}
+              >
+                {#if currentTheme === theme.value}
+                  <div class='absolute -right-1 -top-1 rounded-full bg-primary p-0.5 text-primary-content shadow'>
+                    <span class='icon-[tabler--check] size-3'></span>
+                  </div>
+                {/if}
+
+                <!-- 主题预览 -->
+                <div data-theme={theme.value} class='flex items-center gap-2 rounded-lg bg-base-100 p-2 ring-1 ring-base-content/10' aria-hidden='true'>
+                  <span class='text-sm font-bold text-base-content'>Aa</span>
+                  <div class='flex flex-1 gap-1'>
+                    <span class='h-3 flex-1 rounded bg-primary'></span>
+                    <span class='h-3 flex-1 rounded bg-secondary'></span>
+                    <span class='h-3 flex-1 rounded bg-accent'></span>
+                  </div>
+                </div>
+
+                <span class='text-xs font-medium text-base-content/80 group-hover:text-base-content'>
+                  {theme.label}
+                </span>
+              </BareButton>
+            {/each}
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/components/scenes/app/SettingsModal.svelte.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    open?: boolean;
+    currentLanguage?: string;
+    currentTheme?: string;
+    languages?: {
+        value: string;
+        label: string;
+        icon?: string;
+    }[];
+    themes?: {
+        value: string;
+        label: string;
+    }[];
+    onlanguagechange?: (lang: string) => void;
+    onthemechange?: (theme: string) => void;
+    onclose?: () => void;
+}
+/**
+ * SettingsModal
+ * 应用设置模态框，包含语言和主题切换功能。
+ * 内置多语言支持，自动跟随全局 locale
+ *
+ * @prop {boolean} open - 是否显示模态框（双向绑定）
+ * @prop {string} currentLanguage - 当前语言
+ * @prop {string} currentTheme - 当前主题
+ * @prop {function} onlanguagechange - 语言变更回调
+ * @prop {function} onthemechange - 主题变更回调
+ */
+declare const SettingsModal: import("svelte").Component<Props, {}, "open">;
+type SettingsModal = ReturnType<typeof SettingsModal>;
+export default SettingsModal;