@h-ai/ui 0.1.0-alpha.30 → 0.1.0-alpha.32

package/dist/components/primitives/Select.svelte

@@ -2,15 +2,15 @@
   =============================================================================
   @h-ai/ui - Select 组件
   =============================================================================
-  下拉选择框组件
+  下拉选择框组件（全自定义实现，统一弹出层样式）
 
   使用 Svelte 5 Runes ($props, $derived, $bindable)
-  支持自定义验证消息（validationMessage）覆盖浏览器原生提示
+  支持 clearable（可清空）和 filterable（可筛选）属性
   =============================================================================
 -->
 <script lang='ts' generics="T = string">
   import type { DataAttributes, SelectProps } from '../../types.js'
-  import { cn, getDataAttributes, getSizeClass } from '../../utils.js'
+  import { cn, getDataAttributes, portal } from '../../utils.js'
 
   let {
     value = $bindable<T>(),
@@ -19,78 +19,325 @@
     size = 'md',
     disabled = false,
     required = false,
+    clearable = false,
+    filterable = false,
     error = '',
-    validationMessage = '',
     class: className = '',
     id,
     onchange,
-    children,
     ...restProps
   }: SelectProps<T> & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  let selectRef: HTMLSelectElement | undefined = $state()
+  let inputRef: HTMLInputElement | undefined = $state()
+  let dropdownRef: HTMLDivElement | undefined = $state()
+  let triggerRef: HTMLDivElement | undefined = $state()
+  let listboxRef: HTMLUListElement | undefined = $state()
+  let isDropdownOpen = $state(false)
+  let filterText = $state('')
+  let isHovered = $state(false)
+  // 下拉层定位样式（portal 到 body，用 fixed 逃逸 overflow/stacking）
+  let dropdownStyle = $state('')
 
-  const selectClass = $derived(
+  // 尺寸映射（与 Input 保持一致）
+  const sizeClasses: Record<string, string> = {
+    xs: 'h-8 text-xs px-2.5',
+    sm: 'h-9 text-sm px-3',
+    md: 'h-10 text-sm px-3',
+    lg: 'h-12 text-base px-4',
+    xl: 'h-14 text-lg px-4',
+  }
+
+  // 选项文字尺寸
+  const optionTextClass = $derived(
+    size === 'xs'
+      ? 'text-xs'
+      : size === 'lg'
+      ? 'text-base'
+      : size === 'xl'
+      ? 'text-lg'
+      : 'text-sm',
+  )
+
+  // 获取当前选中的标签
+  const selectedLabel = $derived(() => {
+    if (!options || !value)
+      return ''
+    const selected = options.find(opt => opt.value === value)
+    return selected ? selected.label : ''
+  })
+
+  // 过滤后的选项
+  const filteredOptions = $derived(() => {
+    if (!options)
+      return []
+    if (!filterable || !filterText)
+      return options
+    return options.filter(opt =>
+      opt.label.toLowerCase().includes(filterText.toLowerCase()),
+    )
+  })
+
+  const wrapperClass = $derived(
     cn(
-      'select w-full',
-      getSizeClass(size, 'input'),
-      error && 'select-error',
+      'relative flex w-full min-w-0 items-center rounded-lg border bg-base-100 cursor-pointer',
+      sizeClasses[size] || sizeClasses.md,
+      error
+        ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+        : isDropdownOpen
+        ? 'border-primary/50 ring-2 ring-primary/10'
+        : 'border-base-content/15 hover:border-base-content/25 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      'transition-[border-color,box-shadow] duration-150',
+      disabled && 'opacity-50 cursor-not-allowed',
       className,
     ),
   )
 
-  // 当 validationMessage 变化时更新自定义验证消息
+  const inputClass = $derived(
+    cn(
+      'flex-1 min-w-0 bg-transparent outline-none border-none',
+      'focus:outline-none focus:ring-0 focus:shadow-none',
+      'placeholder:text-base-content/40',
+      error && 'text-error',
+    ),
+  )
+
+  // 点击外部关闭下拉框（下拉层已 portal 到 body，需同时排除 listbox）
+  $effect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node
+      const inTrigger = dropdownRef?.contains(target) ?? false
+      const inListbox = listboxRef?.contains(target) ?? false
+      if (!inTrigger && !inListbox) {
+        isDropdownOpen = false
+        filterText = ''
+      }
+    }
+
+    if (isDropdownOpen) {
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+  })
+
+  // 计算下拉层位置（fixed，基于触发器视口坐标；空间不足时向上翻转）
+  function updateDropdownPosition() {
+    if (!triggerRef)
+      return
+    const rect = triggerRef.getBoundingClientRect()
+    const gap = 4
+    const maxHeight = 240
+    const spaceBelow = window.innerHeight - rect.bottom
+    const openUp = spaceBelow < maxHeight + gap && rect.top > spaceBelow
+    const vertical = openUp
+      ? `bottom:${Math.round(window.innerHeight - rect.top + gap)}px`
+      : `top:${Math.round(rect.bottom + gap)}px`
+    dropdownStyle = `position:fixed;left:${Math.round(rect.left)}px;width:${Math.round(rect.width)}px;${vertical};z-index:1200;`
+  }
+
+  // 打开时定位并跟随滚动/缩放更新
   $effect(() => {
-    if (selectRef) {
-      selectRef.setCustomValidity(validationMessage)
+    if (!isDropdownOpen)
+      return
+    updateDropdownPosition()
+    const scrollOpts = { passive: true, capture: true } as const
+    window.addEventListener('scroll', updateDropdownPosition, scrollOpts)
+    window.addEventListener('resize', updateDropdownPosition)
+    return () => {
+      window.removeEventListener('scroll', updateDropdownPosition, scrollOpts)
+      window.removeEventListener('resize', updateDropdownPosition)
     }
   })
 
-  function handleChange(e: Event & { currentTarget: HTMLSelectElement }) {
-    const selectedValue = e.currentTarget.value as T
-    value = selectedValue
-    // 选择后重置自定义验证
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
+  function handleWrapperClick() {
+    if (disabled)
+      return
+
+    if (!isDropdownOpen) {
+      isDropdownOpen = true
+    }
+
+    if (filterable) {
+      // filterable 模式下点击后始终聚焦输入框，保持下拉可筛状态
+      setTimeout(() => inputRef?.focus(), 0)
+    }
+  }
+
+  function handleOptionSelect(optionValue: T, optionDisabled?: boolean) {
+    if (optionDisabled)
+      return
+    value = optionValue
+    isDropdownOpen = false
+    filterText = ''
+    onchange?.(optionValue)
+  }
+
+  function handleFilterInput(e: Event & { currentTarget: HTMLInputElement }) {
+    filterText = e.currentTarget.value
+    if (!isDropdownOpen) {
+      isDropdownOpen = true
     }
-    onchange?.(selectedValue)
   }
 
-  function handleInvalid(e: Event & { currentTarget: HTMLSelectElement }) {
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
+  function handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      isDropdownOpen = false
+      filterText = ''
+      inputRef?.blur()
+    }
+    else if (e.key === 'Enter') {
+      // 回车选中第一个匹配项
+      const opts = filteredOptions()
+      if (opts.length > 0 && !opts[0].disabled) {
+        handleOptionSelect(opts[0].value)
+      }
+    }
+    else if (e.key === 'Backspace' && filterText === '' && clearable && value) {
+      value = undefined as T
+      onchange?.(undefined as T)
     }
   }
+
+  function handleClear(e: MouseEvent) {
+    e.stopPropagation()
+    e.preventDefault()
+    value = undefined as T
+    filterText = ''
+    onchange?.(undefined as T)
+  }
+
+  // 判断是否显示清除按钮
+  const showClear = $derived(clearable && value !== undefined && value !== null && value !== '' && isHovered)
 </script>
 
-<div {...dataAttributes} class='fieldset w-full'>
-  <select
-    bind:this={selectRef}
-    {id}
-    class={selectClass}
-    {disabled}
-    {required}
-    onchange={handleChange}
-    oninvalid={handleInvalid}
+<div
+  {...dataAttributes}
+  class='fieldset w-full min-w-0'
+  bind:this={dropdownRef}
+  role='combobox'
+  aria-expanded={isDropdownOpen}
+  aria-haspopup='listbox'
+  onmouseenter={() => isHovered = true}
+  onmouseleave={() => isHovered = false}
+>
+  <div
+    class={wrapperClass}
+    bind:this={triggerRef}
+    onclick={handleWrapperClick}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        handleWrapperClick()
+      }
+    }}
+    role='presentation'
   >
-    {#if placeholder}
-      <option value="" disabled selected={!value}>{placeholder}</option>
+    {#if filterable}
+      <!-- 可筛选模式：可输入的 input -->
+      <input
+        bind:this={inputRef}
+        {id}
+        type='text'
+        class={inputClass}
+        {disabled}
+        {required}
+        {placeholder}
+        value={isDropdownOpen ? filterText : selectedLabel()}
+        oninput={handleFilterInput}
+        onkeydown={handleInputKeydown}
+        onfocus={() => {
+          if (!disabled && !isDropdownOpen)
+            isDropdownOpen = true
+        }}
+        role='combobox'
+        aria-autocomplete='list'
+        aria-controls='{id}-listbox'
+        aria-expanded={isDropdownOpen}
+      />
+    {:else}
+      <!-- 普通模式：只读 input 显示选中值 -->
+      <input
+        {id}
+        type='text'
+        class={inputClass}
+        readonly
+        {disabled}
+        {required}
+        {placeholder}
+        value={selectedLabel()}
+        tabindex='-1'
+      />
     {/if}
-    {#if children}
-      {@render children()}
-    {:else if options}
-      {#each options as option (String(option.value))}
-        <option
-          value={option.value as string}
-          disabled={option.disabled}
-          selected={value === option.value}
+
+    <!-- 右侧图标区域 -->
+    <div class='flex items-center pr-2 shrink-0'>
+      {#if showClear}
+        <button
+          type='button'
+          class='flex items-center justify-center w-5 h-5 rounded-full hover:bg-base-content/10 transition-colors'
+          onclick={handleClear}
+          tabindex='-1'
+          aria-label='清空选择'
         >
-          {option.label}
-        </option>
-      {/each}
+          <svg xmlns='http://www.w3.org/2000/svg' class='h-3.5 w-3.5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
+          </svg>
+        </button>
+      {:else}
+        <svg
+          class={cn('h-4 w-4 text-base-content/40 transition-transform duration-200', isDropdownOpen && 'rotate-180')}
+          xmlns='http://www.w3.org/2000/svg'
+          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}
+    </div>
+
+    <!-- 下拉选项列表（portal 到 body，fixed 定位，逃逸 overflow/stacking 裁剪） -->
+    {#if isDropdownOpen}
+      <ul
+        bind:this={listboxRef}
+        use:portal
+        id='{id}-listbox'
+        class='max-h-60 overflow-auto rounded-xl border border-base-content/10 bg-base-100 p-1.5 shadow-xl shadow-base-content/10'
+        style={dropdownStyle}
+        role='listbox'
+      >
+        {#each filteredOptions() as option (String(option.value))}
+          <li
+            class={cn(
+              'flex cursor-pointer items-center rounded-lg px-3 py-2.5 transition-all duration-150',
+              optionTextClass,
+              option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-base-content/5 active:bg-base-content/8',
+              value === option.value && 'bg-primary/10 text-primary font-semibold',
+            )}
+            role='option'
+            aria-selected={value === option.value}
+            aria-disabled={option.disabled}
+            onclick={(e) => {
+              e.stopPropagation()
+              handleOptionSelect(option.value, option.disabled)
+            }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                handleOptionSelect(option.value, option.disabled)
+              }
+            }}
+            tabindex={option.disabled ? -1 : 0}
+          >
+            {option.label}
+          </li>
+        {:else}
+          <li class={cn('px-3 py-3 text-base-content/40 text-center', optionTextClass)}>
+            无匹配选项
+          </li>
+        {/each}
+      </ul>
     {/if}
-  </select>
+  </div>
   {#if error}
     <span class='fieldset-label text-error'>{error}</span>
   {/if}

package/dist/components/primitives/Textarea.svelte

@@ -33,9 +33,20 @@
   const dataAttributes = $derived(getDataAttributes(restProps))
   let textareaRef: HTMLTextAreaElement | undefined = $state()
 
+  const wrapperClass = $derived(
+    cn(
+      'flex w-full rounded-lg border bg-base-100',
+      error
+        ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+        : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      'transition-[border-color,box-shadow] duration-150',
+      disabled && 'opacity-50 cursor-not-allowed',
+    ),
+  )
+
   const textareaClass = $derived(
     cn(
-      'textarea w-full',
+      'textarea w-full bg-transparent border-none outline-none',
       getInputSizeClass(size),
       error && 'textarea-error',
       className,
@@ -74,20 +85,22 @@
 </script>
 
 <div {...dataAttributes} class='fieldset w-full'>
-  <textarea
-    bind:this={textareaRef}
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {required}
-    class={textareaClass}
-    bind:value
-    oninput={handleInput}
-    oninvalid={handleInvalid}
-  ></textarea>
+  <div class={wrapperClass}>
+    <textarea
+      bind:this={textareaRef}
+      {id}
+      {name}
+      {placeholder}
+      {rows}
+      {disabled}
+      {readonly}
+      {required}
+      class={textareaClass}
+      bind:value
+      oninput={handleInput}
+      oninvalid={handleInvalid}
+    ></textarea>
+  </div>
   {#if error}
     <span class='fieldset-label text-error'>{error}</span>
   {/if}

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -240,6 +240,8 @@
     sourceKind = 'markdown',
     // sourceKind=code 时的默认语言提示。
     codeLanguage,
+    // 正文字号，number 会按 px 处理。
+    fontSize,
     // 外层自定义类名。
     class: className = '',
     // 是否显示代码块复制按钮。
@@ -250,6 +252,8 @@
     showCodePreviewToggle = false,
     // 是否显式允许内置 HTML / JS / CSS 预览执行高风险内容。
     allowUnsafeCodePreview = false,
+    // 是否按安全白名单解析原始 HTML 标签。
+    allowHtmlTags = false,
     // 代码预览切换模式下展示在语言标签旁的提示文案。
     codePreviewHint = '',
     // 是否启用语法高亮。
@@ -412,6 +416,7 @@
       codeViewPreviewLabel: uiM('file_list_preview'),
       codePreviewHint: normalizedCodePreviewHint,
       breaks,
+      allowHtmlTags,
     }),
   )
   // html 是最终注入正文的内容。
@@ -466,6 +471,25 @@
       editable ? 'hai-markdown-editable' : '',
     ),
   )
+  const normalizedFontSize = $derived(resolveFontSize(fontSize))
+  const documentStyle = $derived(
+    normalizedFontSize
+      ? `--hai-markdown-font-size:${normalizedFontSize};`
+      : undefined,
+  )
+
+  function resolveFontSize(value: AiDocumentEditorProps['fontSize']): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim()
+      return normalized || undefined
+    }
+
+    return undefined
+  }
 
   $effect(() => {
     void html
@@ -936,6 +960,7 @@
         enableHighlight,
         showCopyButton: false,
         breaks,
+        allowHtmlTags,
       })
 
       host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-preview-rendered">${markdownHtml}</div></div>`
@@ -3138,6 +3163,7 @@
           <article
             bind:this={previewHost}
             class={readerDocumentClass}
+            style={documentStyle}
             contenteditable={editable}
             role='document'
             onmousemove={handlePreviewMouseMove}
@@ -3993,6 +4019,7 @@
   }
 
   .hai-markdown-document {
+    font-size: var(--hai-markdown-font-size, 1rem);
     width: 100%;
     min-width: 0;
     max-width: 52.5rem;
@@ -4045,29 +4072,29 @@
   }
 
   .hai-markdown :global(h1) {
-    font-size: 2.2rem;
+    font-size: 2.2em;
     padding-bottom: 0.45em;
     border-bottom: 1px solid oklch(var(--bc) / 0.12);
   }
 
   .hai-markdown :global(h2) {
-    font-size: 1.48rem;
+    font-size: 1.48em;
   }
 
   .hai-markdown :global(h3) {
-    font-size: 1.18rem;
+    font-size: 1.18em;
   }
 
   .hai-markdown :global(h4) {
-    font-size: 1.02rem;
+    font-size: 1.02em;
   }
 
   .hai-markdown :global(h5) {
-    font-size: 0.95rem;
+    font-size: 0.95em;
   }
 
   .hai-markdown :global(h6) {
-    font-size: 0.88rem;
+    font-size: 0.88em;
     color: oklch(var(--bc) / 0.7);
   }
 
@@ -4264,7 +4291,7 @@
     font-family:
       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
       'Liberation Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     line-height: 1.45;
     tab-size: 2;
 

package/dist/components/scenes/ai/MarkdownRenderer.svelte

@@ -24,19 +24,45 @@
 
   const {
     content = '',
+    fontSize,
     class: className = '',
     showCopyButton = true,
     enableHighlight = true,
     breaks = true,
+    allowHtmlTags = false,
     ...restProps
   }: MarkdownRendererProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const normalizedFontSize = $derived(resolveFontSize(fontSize))
+  const markdownStyle = $derived(
+    normalizedFontSize
+      ? `--hai-markdown-font-size:${normalizedFontSize};`
+      : undefined,
+  )
   /** 解析后的 HTML */
   const html = $derived(
-    parseMarkdown(content, { enableHighlight, showCopyButton, breaks }),
+    parseMarkdown(content, {
+      enableHighlight,
+      showCopyButton,
+      breaks,
+      allowHtmlTags,
+    }),
   )
 
+  function resolveFontSize(value: MarkdownRendererProps['fontSize']): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim()
+      return normalized || undefined
+    }
+
+    return undefined
+  }
+
   /**
    * 事件代理：处理代码块复制按钮点击
    */
@@ -65,9 +91,11 @@
   }
 </script>
 
-<div {...dataAttributes}
-     class={cn('hai-markdown', className)}
-     onclick={handleClick}
+<div
+  {...dataAttributes}
+  class={cn('hai-markdown', className)}
+  style={markdownStyle}
+  onclick={handleClick}
 >
   <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
   {@html html}
@@ -81,6 +109,7 @@
    * ========================================================================= */
 
   .hai-markdown {
+    font-size: var(--hai-markdown-font-size, 1rem);
     line-height: 1.75;
     color: inherit;
     word-wrap: break-word;
@@ -171,6 +200,18 @@
     color: oklch(var(--bc) / 0.55);
   }
 
+  .hai-markdown :global(u) {
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.14em;
+  }
+
+  .hai-markdown :global(mark) {
+    padding: 0 0.12em;
+    border-radius: 0.25rem;
+    background: oklch(var(--wa, 0.9 0.14 90) / 0.34);
+    color: inherit;
+  }
+
   /* ─── 行内代码 ─── */
 
   .hai-markdown :global(:not(pre) > code) {
@@ -245,7 +286,7 @@
 
   .hai-markdown :global(.hai-md-code-block code) {
     font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     line-height: 1.6;
     tab-size: 2;
   }

package/dist/components/scenes/ai/document-parse.d.ts

@@ -21,6 +21,8 @@ export interface MarkdownDocumentParseOptions {
     codePreviewHint?: string;
     /** Whether soft line breaks are converted to <br>. */
     breaks?: boolean;
+    /** Whether raw HTML tags are parsed through a safe allowlist. */
+    allowHtmlTags?: boolean;
 }
 export interface MarkdownRenderResult {
     /** Rendered HTML output. */