@h-ai/ui 0.1.0-alpha.23 → 0.1.0-alpha.25

package/dist/components/scenes/crud/CrudPage.svelte

@@ -137,6 +137,14 @@
   const canUpdate = $derived(permissions.update !== false && Boolean(crud.api.update))
   const canDelete = $derived(permissions.delete !== false && Boolean(crud.api.remove))
   const searchable = $derived(crud.resource.searchable !== false)
+  const isCompact = $derived(density === 'compact')
+  const pageGapClass = 'space-y-5'
+  const actionButtonSize = $derived(isCompact ? 'xs' : 'sm')
+  const actionIconClass = $derived(isCompact ? 'size-3.5' : 'size-4')
+  const paginationSize = $derived(isCompact ? 'xs' : 'sm')
+  const filterCardClass = 'overflow-hidden rounded-[1.25rem] border-base-content/7 shadow-sm'
+  const listCardClass = 'overflow-hidden rounded-[1.25rem] border-base-content/7 shadow-sm'
+  const paginationBarClass = 'flex justify-center border-t border-base-content/5 px-4 py-2'
 
   // 表单展示配置（抽屉 / 弹窗）
   const formVariant = $derived(form.variant ?? 'drawer')
@@ -395,7 +403,7 @@
   )
 </script>
 
-<div class='space-y-4 {className}'>
+<div class='{pageGapClass} {className}'>
   <!-- 页面标题 -->
   <PageHeader title={resourceLabel}>
     {#snippet actions()}
@@ -403,8 +411,8 @@
         {@render headerActions()}
       {/if}
       {#if canCreate}
-        <Button variant='primary' onclick={openCreate}>
-          <span class='icon-[tabler--plus] size-4.5 mr-1'></span>
+        <Button variant='primary' size='sm' onclick={openCreate} class='shadow-sm'>
+          <span class='icon-[tabler--plus] size-4.5 mr-1.5'></span>
           {uiM('crud_create')}
         </Button>
       {/if}
@@ -413,7 +421,7 @@
 
   <!-- 搜索 + 过滤栏 -->
   {#if searchable || filterFields.length > 0}
-    <Card>
+    <Card padding='sm' class={filterCardClass}>
       <CrudFilterBar
         {searchable}
         searchPlaceholder={searchPlaceholderText}
@@ -428,7 +436,7 @@
   {/if}
 
   <!-- 数据列表 -->
-  <Card>
+  <Card padding='none' class={listCardClass}>
     <DataTable
       data={data.items}
       columns={dtColumns}
@@ -440,32 +448,32 @@
         {#if rowClickDetail}
           <IconButton
             variant='ghost'
-            size='sm'
+            size={actionButtonSize}
             ariaLabel={uiM('crud_detail')}
             onclick={() => openDetail(item)}
           >
-            <span class='icon-[tabler--eye] size-4'></span>
+            <span class='icon-[tabler--eye] {actionIconClass}'></span>
           </IconButton>
         {/if}
         {#if canUpdate}
           <IconButton
             variant='ghost'
-            size='sm'
+            size={actionButtonSize}
             ariaLabel={uiM('crud_edit')}
             onclick={() => openEdit(item)}
           >
-            <span class='icon-[tabler--edit] size-4'></span>
+            <span class='icon-[tabler--edit] {actionIconClass}'></span>
           </IconButton>
         {/if}
         {#if canDelete}
           <IconButton
             variant='ghost'
-            size='sm'
+            size={actionButtonSize}
             ariaLabel={uiM('crud_delete')}
             onclick={() => requestDelete(item)}
             class='hover:text-error'
           >
-            <span class='icon-[tabler--trash] size-4'></span>
+            <span class='icon-[tabler--trash] {actionIconClass}'></span>
           </IconButton>
         {/if}
         {#if listItemActions}
@@ -475,12 +483,12 @@
     </DataTable>
 
     <!-- 分页栏：始终显示，支持每页条数选择与跳页 -->
-    <div class='flex justify-center p-4 border-t border-base-content/5'>
+    <div class={paginationBarClass}>
       <Pagination
         page={data.page}
         total={data.total}
         pageSize={data.pageSize}
-        size='sm'
+        size={paginationSize}
         showTotal={paginationShowTotal}
         showJumper={paginationShowJumper}
         showSizeChanger={paginationShowSizeChanger}
@@ -497,6 +505,7 @@
   open={detailOpen}
   item={selectedItem}
   fields={detailFields}
+  {density}
   title={panelTitle}
   variant={formVariant}
   size={formDrawerSize}
@@ -515,6 +524,7 @@
   open={editOpen}
   mode={panelMode === 'create' ? 'create' : 'edit'}
   fields={panelMode === 'create' ? createFields : editFields}
+  {density}
   bind:formData
   title={panelTitle}
   variant={formVariant}

package/dist/components/scenes/crud/crud-types.d.ts

@@ -142,7 +142,7 @@ export interface CrudPageProps<T = Record<string, unknown>> {
     form?: CrudFormConfig;
     /** 分页栏展示配置（每页条数选择、跳页、总数） */
     pagination?: CrudPaginationConfig;
-    /** 列表显示密度：'normal'（默认）或 'compact'（紧凑） */
+    /** 列表显示密度：影响列表行、行内操作、分页与详情/编辑表单；不影响页头与筛选栏 */
     density?: CrudDensity;
     /** 列表行点击是否打开详情（默认 true） */
     rowClickDetail?: boolean;

package/dist/theme-config.d.ts

@@ -52,6 +52,10 @@ export declare const THEME_GROUPS: ThemeGroup[];
  * 暗色主题列表
  */
 export declare const DARK_THEMES: string[];
+/**
+ * 支持的主题 ID 列表
+ */
+export declare const SUPPORTED_THEME_IDS: string[];
 /**
  * 默认主题色
  */
@@ -64,6 +68,14 @@ export declare const DEFAULT_THEME_COLOR_CSS_VAR = "--hai-theme-color-default";
  * 内置主题色预设
  */
 export declare const THEME_COLOR_PRESETS: ThemeColorPreset[];
+/**
+ * 默认主题
+ */
+export declare const DEFAULT_THEME = "light";
+/**
+ * 主题存储键名
+ */
+export declare const THEME_STORAGE_KEY = "theme";
 /**
  * 获取主题信息
  */
@@ -73,13 +85,57 @@ export declare function getThemeInfo(themeId: string): ThemeInfo | undefined;
  */
 export declare function isDarkTheme(themeId: string): boolean;
 /**
- * 默认主题
+ * 归一化主题 ID，不支持的值回退到默认主题。
  */
-export declare const DEFAULT_THEME = "light";
+export declare function normalizeThemeId(themeId: string | null | undefined, fallbackThemeId?: string): string;
 /**
- * 主题存储键名
+ * 归一化 Hex 颜色；无效值返回 null。
  */
-export declare const THEME_STORAGE_KEY = "theme";
+export declare function normalizeHexColor(value: string | null | undefined): string | null;
+/**
+ * 解析主题对应的浏览器色调。
+ */
+export declare function resolveThemeTone(themeId: string): 'light' | 'dark';
+/**
+ * 主题首屏恢复脚本里可选的语言字段配置。
+ *
+ * 业务侧如果把语言和主题一起落到同一个偏好对象里，可用这组配置在首屏阶段同步恢复语言值，
+ * 避免 HTML shell 和 hydrate 后的语言状态短暂不一致。
+ */
+export interface ThemeBootstrapLocaleConfig {
+    /** 偏好对象中的语言字段名。 */
+    key: string;
+    /** 默认语言。 */
+    defaultValue: string;
+    /** 允许的语言列表。 */
+    supportedValues: string[];
+}
+/**
+ * 生成首屏主题恢复脚本时使用的宿主侧配置。
+ *
+ * 这组配置刻意只保留“HTML shell 首屏恢复”所需的信息，避免把运行时 helper 或 UI 组件状态
+ * 泄漏到脚本字符串里，方便不同应用在 `app.html` / 服务端模板中复用同一套恢复逻辑。
+ */
+export interface ThemeBootstrapScriptOptions {
+    /** 偏好存储 key。 */
+    storageKey: string;
+    /** 历史主题 key；传 null 表示不做迁移。 */
+    legacyThemeStorageKey?: string | null;
+    /** 默认主题 ID。 */
+    defaultThemeId?: string;
+    /** 默认主题色；传 null 表示不处理主题色。 */
+    defaultThemeColor?: string | null;
+    /** 主题色写入的 CSS 变量；传 null 表示不写。 */
+    colorCssVar?: string | null;
+    /** 主题 tone 写入的 dataset key；传 null 表示不写。 */
+    toneDatasetKey?: string | null;
+    /** 可选的语言字段配置。 */
+    locale?: ThemeBootstrapLocaleConfig | null;
+}
+/**
+ * 生成首屏主题恢复脚本，适合注入到 SvelteKit `app.html` 的 `<script>` 中。
+ */
+export declare function createThemeBootstrapScript(options: ThemeBootstrapScriptOptions): string;
 /**
  * 获取主题初始化脚本（用于 HTML shell 防闪烁）
  *

package/dist/theme-config.js

@@ -46,6 +46,10 @@ export const THEME_GROUPS = [
  * 暗色主题列表
  */
 export const DARK_THEMES = THEMES.filter(t => t.dark).map(t => t.id);
+/**
+ * 支持的主题 ID 列表
+ */
+export const SUPPORTED_THEME_IDS = THEMES.map(theme => theme.id);
 /**
  * 默认主题色
  */
@@ -62,6 +66,17 @@ export const THEME_COLOR_PRESETS = [
     { value: '#13b981', labelKey: 'theme_color_grid_green' },
     { value: '#1f5eff', labelKey: 'theme_color_ocean' },
 ];
+const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/i;
+const SHORT_HEX_COLOR_REGEX = /^#[0-9a-f]{3}$/i;
+const SUPPORTED_THEME_ID_SET = new Set(SUPPORTED_THEME_IDS);
+/**
+ * 默认主题
+ */
+export const DEFAULT_THEME = 'light';
+/**
+ * 主题存储键名
+ */
+export const THEME_STORAGE_KEY = 'theme';
 /**
  * 获取主题信息
  */
@@ -74,15 +89,68 @@ export function getThemeInfo(themeId) {
 export function isDarkTheme(themeId) {
     return DARK_THEMES.includes(themeId);
 }
-// ─── 主题初始化工具 ───
 /**
- * 默认主题
+ * 归一化主题 ID，不支持的值回退到默认主题。
  */
-export const DEFAULT_THEME = 'light';
+export function normalizeThemeId(themeId, fallbackThemeId = DEFAULT_THEME) {
+    const normalized = `${themeId ?? ''}`;
+    if (SUPPORTED_THEME_ID_SET.has(normalized)) {
+        return normalized;
+    }
+    return SUPPORTED_THEME_ID_SET.has(fallbackThemeId) ? fallbackThemeId : DEFAULT_THEME;
+}
 /**
- * 主题存储键名
+ * 归一化 Hex 颜色；无效值返回 null。
  */
-export const THEME_STORAGE_KEY = 'theme';
+export function normalizeHexColor(value) {
+    const normalized = value?.trim().toLowerCase() ?? '';
+    if (HEX_COLOR_REGEX.test(normalized)) {
+        return normalized;
+    }
+    if (SHORT_HEX_COLOR_REGEX.test(normalized)) {
+        return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`;
+    }
+    return null;
+}
+/**
+ * 解析主题对应的浏览器色调。
+ */
+export function resolveThemeTone(themeId) {
+    return isDarkTheme(themeId) ? 'dark' : 'light';
+}
+function escapeJsonForScript(value) {
+    return JSON.stringify(value)
+        .replace(/</g, '\\u003C')
+        .replace(/>/g, '\\u003E')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');
+}
+/**
+ * 生成首屏主题恢复脚本，适合注入到 SvelteKit `app.html` 的 `<script>` 中。
+ */
+export function createThemeBootstrapScript(options) {
+    const defaultThemeId = normalizeThemeId(options.defaultThemeId ?? DEFAULT_THEME);
+    const defaultThemeColor = options.defaultThemeColor == null
+        ? null
+        : normalizeHexColor(options.defaultThemeColor) ?? DEFAULT_THEME_COLOR;
+    const locale = options.locale
+        ? {
+            key: options.locale.key,
+            defaultValue: options.locale.defaultValue,
+            supportedValues: [...options.locale.supportedValues],
+        }
+        : null;
+    const defaultPreferences = {
+        themeId: defaultThemeId,
+    };
+    if (defaultThemeColor) {
+        defaultPreferences.themeColor = defaultThemeColor;
+    }
+    if (locale) {
+        defaultPreferences[locale.key] = locale.defaultValue;
+    }
+    return `(function(){var d=${escapeJsonForScript(defaultPreferences)};var s=${escapeJsonForScript(options.storageKey)};var l=${escapeJsonForScript(options.legacyThemeStorageKey ?? null)};var u=new Set(${escapeJsonForScript(SUPPORTED_THEME_IDS)});var k=new Set(${escapeJsonForScript(DARK_THEMES)});var c=${escapeJsonForScript(options.colorCssVar ?? null)};var y=${escapeJsonForScript(options.toneDatasetKey ?? null)};var i=${escapeJsonForScript(locale)};function n(e){var r=''+(e??'');return u.has(r)?r:d.themeId}function h(e){var r=(''+(e??'')).trim().toLowerCase();if(/^#[0-9a-f]{6}$/i.test(r))return r;if(/^#[0-9a-f]{3}$/i.test(r))return '#'+r[1]+r[1]+r[2]+r[2]+r[3]+r[3];return Object.prototype.hasOwnProperty.call(d,'themeColor')?d.themeColor:null}function g(e){var r={...d,themeId:n(e?.themeId)};if(Object.prototype.hasOwnProperty.call(d,'themeColor'))r.themeColor=h(e?.themeColor);if(i)r[i.key]=i.supportedValues.includes(e?.[i.key])?e[i.key]:d[i.key];return r}function a(e){var r=document.documentElement;var o=k.has(e.themeId)?'dark':'light';r.setAttribute('data-theme',e.themeId);if(y)r.dataset[y]=o;if(c){if(e.themeColor){r.style.setProperty(c,e.themeColor)}else{r.style.removeProperty(c)}}r.style.setProperty('color-scheme',o)}var p=d;try{var f=window.localStorage.getItem(s);if(f){p=g(JSON.parse(f))}else if(l){p=g({themeId:window.localStorage.getItem(l)})}else{p=g(d)}a(p);window.localStorage.setItem(s,JSON.stringify(p));if(l)window.localStorage.removeItem(l)}catch{a(d)}})()`;
+}
 /**
  * 获取主题初始化脚本（用于 HTML shell 防闪烁）
  *
@@ -90,7 +158,10 @@ export const THEME_STORAGE_KEY = 'theme';
  * 对于 SvelteKit `app.html`，请直接粘贴这段脚本字符串的内容，不能写 `{@html getThemeInitScript()}`。
  */
 export function getThemeInitScript() {
-    return `(function(){var t='${DEFAULT_THEME}';try{var s=localStorage.getItem('${THEME_STORAGE_KEY}');if(s)t=s}catch{}document.documentElement.setAttribute('data-theme',t)})()`;
+    return createThemeBootstrapScript({
+        storageKey: THEME_STORAGE_KEY,
+        defaultThemeId: DEFAULT_THEME,
+    });
 }
 /**
  * 应用主题

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.23",
+  "version": "0.1.0-alpha.25",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -45,7 +45,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.23"
+    "@h-ai/core": "0.1.0-alpha.25"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",