@svadmin/ui 0.36.0 → 0.38.0

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.
Files changed (49) hide show
  1. package/dist/app.css +76 -104
  2. package/dist/components/AdminApp.svelte +18 -14
  3. package/dist/components/AutoForm.svelte +32 -47
  4. package/dist/components/AutoTable.svelte +26 -31
  5. package/dist/components/CanAccess.svelte +3 -2
  6. package/dist/components/CanAccess.svelte.d.ts +1 -0
  7. package/dist/components/CreateInferencer.svelte +13 -0
  8. package/dist/components/CreateInferencer.svelte.d.ts +7 -0
  9. package/dist/components/EditInferencer.svelte +21 -0
  10. package/dist/components/EditInferencer.svelte.d.ts +9 -0
  11. package/dist/components/Header.svelte +6 -6
  12. package/dist/components/Layout.svelte +21 -11
  13. package/dist/components/ListInferencer.svelte +14 -0
  14. package/dist/components/ListInferencer.svelte.d.ts +7 -0
  15. package/dist/components/PageHeader.svelte +7 -9
  16. package/dist/components/ResourceInferencer.svelte +28 -0
  17. package/dist/components/ResourceInferencer.svelte.d.ts +7 -0
  18. package/dist/components/ResourceOperationsPage.svelte +168 -21
  19. package/dist/components/ResourceOperationsPage.svelte.d.ts +2 -0
  20. package/dist/components/SettingsPage.svelte +76 -41
  21. package/dist/components/ShowInferencer.svelte +21 -0
  22. package/dist/components/ShowInferencer.svelte.d.ts +9 -0
  23. package/dist/components/ShowPage.svelte +11 -11
  24. package/dist/components/ShowPage.svelte.d.ts +1 -0
  25. package/dist/components/Sidebar.svelte +214 -300
  26. package/dist/components/Sidebar.svelte.d.ts +0 -1
  27. package/dist/components/SidebarItem.svelte +141 -108
  28. package/dist/components/account/TeamMembersPage.svelte +9 -3
  29. package/dist/components/buttons/CloneButton.svelte +10 -2
  30. package/dist/components/buttons/CloneButton.svelte.d.ts +2 -4
  31. package/dist/components/buttons/CreateButton.svelte +9 -2
  32. package/dist/components/buttons/CreateButton.svelte.d.ts +2 -4
  33. package/dist/components/buttons/DeleteButton.svelte +10 -2
  34. package/dist/components/buttons/DeleteButton.svelte.d.ts +2 -4
  35. package/dist/components/buttons/EditButton.svelte +10 -2
  36. package/dist/components/buttons/EditButton.svelte.d.ts +2 -4
  37. package/dist/components/buttons/ExportButton.svelte +9 -2
  38. package/dist/components/buttons/ExportButton.svelte.d.ts +2 -4
  39. package/dist/components/buttons/ImportButton.svelte +9 -2
  40. package/dist/components/buttons/ImportButton.svelte.d.ts +2 -4
  41. package/dist/components/buttons/ShowButton.svelte +10 -2
  42. package/dist/components/buttons/ShowButton.svelte.d.ts +2 -4
  43. package/dist/components/buttons/access-control.d.ts +7 -0
  44. package/dist/components/buttons/access-control.js +5 -0
  45. package/dist/components/ui/sheet/sheet.svelte +3 -3
  46. package/dist/index.d.ts +5 -0
  47. package/dist/index.js +5 -0
  48. package/dist/router-state.svelte.js +15 -0
  49. package/package.json +2 -2
@@ -484,17 +484,13 @@
484
484
  }
485
485
  </script>
486
486
 
487
- <div class="space-y-5" data-svadmin-list>
487
+ <div class="space-y-4">
488
488
  <!-- Header -->
489
- <div class="rounded-3xl border border-border/70 bg-card/90 p-5 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-list-header>
490
- <div class="flex flex-wrap items-center justify-between gap-4">
491
- <div class="min-w-0">
492
- <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{resource.label}</h1>
493
- <p class="mt-1 text-sm text-muted-foreground">{t('common.list')}</p>
494
- </div>
495
- <div class="flex flex-wrap items-center gap-2" data-svadmin-list-actions>
489
+ <div class="flex flex-wrap items-center justify-between gap-2">
490
+ <h1 class="text-lg sm:text-xl font-semibold text-foreground">{resource.label}</h1>
491
+ <div class="flex flex-wrap items-center gap-2">
496
492
  {#if canExport}
497
- <Button variant="outline" size="sm" class="h-10 rounded-xl" onclick={exportCSV}>
493
+ <Button variant="outline" size="sm" onclick={exportCSV}>
498
494
  <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
499
495
  </Button>
500
496
  {/if}
@@ -517,8 +513,8 @@
517
513
  <DropdownMenu.Root>
518
514
  <DropdownMenu.Trigger>
519
515
  {#snippet child({ props })}
520
- <Button variant="outline" size="sm" class="h-10 rounded-xl" {...props}>
521
- <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns')}
516
+ <Button variant="outline" size="sm" {...props}>
517
+ <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns') || 'Columns'}
522
518
  </Button>
523
519
  {/snippet}
524
520
  </DropdownMenu.Trigger>
@@ -537,16 +533,15 @@
537
533
  {@render headerActions()}
538
534
  {/if}
539
535
  {#if canCreate}
540
- <Button class="h-10 rounded-xl px-4 shadow-sm shadow-primary/15" onclick={() => navigate(`/${resourceName}/create`)}>
536
+ <Button onclick={() => navigate(`/${resourceName}/create`)}>
541
537
  <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
542
538
  </Button>
543
539
  {/if}
544
- </div>
545
540
  </div>
546
541
  </div>
547
542
 
548
543
  <!-- Search and Advanced Filters -->
549
- <div class="flex flex-wrap items-center gap-3 rounded-3xl border border-border/70 bg-card/80 p-3 shadow-sm shadow-slate-900/[0.02] backdrop-blur" data-svadmin-table-toolbar>
544
+ <div class="flex flex-wrap items-center gap-2">
550
545
  {#if searchableFields.length > 0}
551
546
  <div class="relative max-w-sm flex-1 sm:min-w-[250px]">
552
547
  <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -555,7 +550,7 @@
555
550
  bind:value={searchText}
556
551
  oninput={() => { pagination = { ...pagination, current: 1 }; }}
557
552
  placeholder={t('common.search')}
558
- class="h-10 rounded-xl border-border/70 bg-background/85 pl-10"
553
+ class="pl-10 h-9"
559
554
  />
560
555
  </div>
561
556
  {/if}
@@ -564,7 +559,7 @@
564
559
  <Popover.Root>
565
560
  <Popover.Trigger>
566
561
  {#snippet child({ props })}
567
- <Button variant="outline" size="sm" class="h-10 rounded-xl px-3" {...props}>
562
+ <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
568
563
  <FilterIcon class="h-4 w-4" data-icon="inline-start" />
569
564
  {t('common.filter')}
570
565
  {#if activeFilterCount > 0}
@@ -582,7 +577,7 @@
582
577
  {#if field.type === 'select' && field.options}
583
578
  <select
584
579
  id="filter-{field.key}"
585
- class="flex h-10 w-full items-center justify-between rounded-xl border border-input bg-background px-3 py-2 text-sm font-normal ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
580
+ class="h-9 text-sm w-full font-normal flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
586
581
  value={filterValues[field.key] ?? ''}
587
582
  onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
588
583
  >
@@ -598,7 +593,7 @@
598
593
  value={filterValues[field.key] ?? ''}
599
594
  oninput={(e) => filterValues[field.key] = (e.currentTarget as HTMLInputElement).value}
600
595
  placeholder={field.label}
601
- class="h-10 rounded-xl text-sm"
596
+ class="h-9 text-sm"
602
597
  />
603
598
  {/if}
604
599
  </div>
@@ -621,7 +616,7 @@
621
616
  </div>
622
617
 
623
618
  <!-- Table (TanStack-powered) -->
624
- <div class="overflow-hidden rounded-3xl border border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-table-card role="region" aria-label="{resource.label} {t('common.list')}">
619
+ <div class="rounded-[24px] bg-card/80 backdrop-blur-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden ring-1 ring-border/30" role="region" aria-label="{resource.label} {t('common.list')}">
625
620
  {#if query.isLoading}
626
621
  <div class="p-4 space-y-3">
627
622
  <div class="flex gap-4 mb-2">
@@ -645,8 +640,8 @@
645
640
  <div in:fade={{ duration: 150 }}>
646
641
  <!-- Desktop Table (hidden on mobile) -->
647
642
  <div class="hidden md:block">
648
- <Table.Root class="svadmin-data-table" data-svadmin-datatable>
649
- <Table.Header data-svadmin-table-head>
643
+ <Table.Root>
644
+ <Table.Header>
650
645
  {#each table_getHeaderGroups(tbl) as headerGroup, _i (_i)}
651
646
  <DraggableHeader
652
647
  columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
@@ -657,7 +652,7 @@
657
652
  {@const header = col.header as typeof headerGroup.headers[0]}
658
653
  <Table.Head
659
654
  {...dragProps}
660
- class={cn("border-b border-border/50 bg-muted/35 px-4 py-4 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/75 hover:bg-muted/45", dragProps.class)}
655
+ class={cn("bg-transparent hover:bg-muted/10 border-b border-border/20 uppercase tracking-[0.12em] text-[10px] text-muted-foreground/70 font-semibold py-4", dragProps.class)}
661
656
  style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
662
657
  >
663
658
  {#if header.id === '_select'}
@@ -699,9 +694,9 @@
699
694
  <ContextMenu.Root>
700
695
  <ContextMenu.Trigger>
701
696
  {#snippet child({ props })}
702
- <Table.Row {...props} data-svadmin-table-row class="border-b border-border/30 transition-colors duration-200 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/25'}">
697
+ <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
703
698
  {#each row_getVisibleCells(row) as cell, _i (_i)}
704
- <Table.Cell class="px-4 py-3.5">
699
+ <Table.Cell>
705
700
  {#if cell.column.id === '_select'}
706
701
  <Checkbox
707
702
  checked={row_getIsSelected(row)}
@@ -760,9 +755,9 @@
760
755
  onSave={() => listResult.refetch()}
761
756
  />
762
757
  {:else if field?.key === primaryKey}
763
- <span class="font-mono text-xs">{cell_getValue(cell) ?? '—'}</span>
758
+ <span class="block truncate font-mono text-xs" title={String(cell_getValue(cell) ?? '—')}>{cell_getValue(cell) ?? '—'}</span>
764
759
  {:else}
765
- {cell_getValue(cell) ?? '—'}
760
+ <span class="block truncate" title={String(cell_getValue(cell) ?? '—')}>{cell_getValue(cell) ?? '—'}</span>
766
761
  {/if}
767
762
  {/if}
768
763
  </Table.Cell>
@@ -808,7 +803,7 @@
808
803
  <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
809
804
  </svg>
810
805
  <p class="text-sm font-medium text-muted-foreground mb-1">{t('common.noData')}</p>
811
- <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint')}</p>
806
+ <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint') || 'Get started by creating your first record.'}</p>
812
807
  {#if canCreate}
813
808
  <Button variant="outline" size="sm" class="gap-2" onclick={() => navigate(`/${resourceName}/create`)}>
814
809
  <Plus class="h-3.5 w-3.5" />
@@ -830,7 +825,7 @@
830
825
  {@const record = row.original}
831
826
  {@const id = record[primaryKey] as string | number}
832
827
  <div
833
- class="rounded-3xl border border-border/60 bg-card p-5 shadow-sm shadow-slate-900/[0.03] transition-all {row_getIsSelected(row) ? 'border-primary/35 bg-primary/5 ring-2 ring-primary/20' : ''}"
828
+ class="rounded-[20px] shadow-[0_4px_20px_rgb(0,0,0,0.03)] ring-1 ring-border/20 bg-card p-5 transition-all {row_getIsSelected(row) ? 'ring-2 ring-primary/50 bg-primary/5' : ''}"
834
829
  >
835
830
  <!-- Card header: ID + select + actions -->
836
831
  <div class="flex items-center justify-between mb-3">
@@ -911,11 +906,11 @@
911
906
 
912
907
  <!-- Pagination (shadcn) -->
913
908
  {#if totalPages > 0}
914
- <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground" data-svadmin-pagination>
909
+ <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
915
910
  <div class="flex items-center gap-2">
916
911
  <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
917
912
  <select
918
- class="h-8 w-[70px] px-2 rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
913
+ class="h-8 w-[70px] px-1 py-1 flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
919
914
  value={String(pagination.pageSize ?? 10)}
920
915
  onchange={(e) => {
921
916
  const size = Number((e.target as HTMLSelectElement).value);
@@ -930,7 +925,7 @@
930
925
  <option value="100">100</option>
931
926
  </select>
932
927
  </div>
933
- <PaginationUI.Root class="sm:w-auto sm:justify-end sm:mx-0">
928
+ <PaginationUI.Root>
934
929
  <PaginationUI.Content>
935
930
  <PaginationUI.Item>
936
931
  <PaginationUI.Previous
@@ -3,15 +3,16 @@
3
3
  import { useCan } from '@svadmin/core';
4
4
  import type { Action } from '@svadmin/core';
5
5
 
6
- let { resource, action, params, children, fallback } = $props<{
6
+ let { resource, action, params, meta, children, fallback } = $props<{
7
7
  resource: string;
8
8
  action: Action;
9
9
  params?: Record<string, unknown>;
10
+ meta?: Record<string, unknown>;
10
11
  children: Snippet;
11
12
  fallback?: Snippet;
12
13
  }>();
13
14
 
14
- const can = useCan(() => ({ resource, action, params }));
15
+ const can = useCan(() => ({ resource, action, params, meta }));
15
16
  </script>
16
17
 
17
18
  {#if can.isLoading}
@@ -4,6 +4,7 @@ type $$ComponentProps = {
4
4
  resource: string;
5
5
  action: Action;
6
6
  params?: Record<string, unknown>;
7
+ meta?: Record<string, unknown>;
7
8
  children: Snippet;
8
9
  fallback?: Snippet;
9
10
  };
@@ -0,0 +1,13 @@
1
+ <script lang="ts">
2
+ // CreateInferencer — 基于资源定义零配置渲染创建表单
3
+ import CreatePage from './CreatePage.svelte';
4
+
5
+ interface Props {
6
+ resourceName: string;
7
+ class?: string;
8
+ }
9
+
10
+ let { resourceName, class: className = '' }: Props = $props();
11
+ </script>
12
+
13
+ <CreatePage {resourceName} class={className} />
@@ -0,0 +1,7 @@
1
+ interface Props {
2
+ resourceName: string;
3
+ class?: string;
4
+ }
5
+ declare const CreateInferencer: import("svelte").Component<Props, {}, "">;
6
+ type CreateInferencer = ReturnType<typeof CreateInferencer>;
7
+ export default CreateInferencer;
@@ -0,0 +1,21 @@
1
+ <script lang="ts">
2
+ // EditInferencer — 基于资源定义零配置渲染编辑表单
3
+ // 从 URL 自动提取 :id 参数
4
+ import EditPage from './EditPage.svelte';
5
+ import { useParsed } from '@svadmin/core';
6
+
7
+ interface Props {
8
+ resourceName: string;
9
+ /** 可选:显式指定 id,默认从 URL 解析 */
10
+ id?: string | number;
11
+ class?: string;
12
+ }
13
+
14
+ let { resourceName, id, class: className = '' }: Props = $props();
15
+ const parsed = useParsed();
16
+ const resolvedId = $derived(id ?? parsed.id ?? '');
17
+ </script>
18
+
19
+ {#if resolvedId}
20
+ <EditPage {resourceName} id={resolvedId} class={className} />
21
+ {/if}
@@ -0,0 +1,9 @@
1
+ interface Props {
2
+ resourceName: string;
3
+ /** 可选:显式指定 id,默认从 URL 解析 */
4
+ id?: string | number;
5
+ class?: string;
6
+ }
7
+ declare const EditInferencer: import("svelte").Component<Props, {}, "">;
8
+ type EditInferencer = ReturnType<typeof EditInferencer>;
9
+ export default EditInferencer;
@@ -35,7 +35,7 @@
35
35
  const CustomNotificationPanel = registry.NotificationPanel;
36
36
  </script>
37
37
 
38
- <header class="sticky top-0 z-30 flex h-16 w-full shrink-0 items-center justify-between border-b border-border/70 bg-card/85 px-4 shadow-sm shadow-slate-900/[0.02] backdrop-blur-xl md:px-6">
38
+ <header class="sticky top-0 z-30 flex h-[70px] w-full shrink-0 items-center justify-between border-b border-border/40 bg-background/95 backdrop-blur-sm px-4 md:px-6">
39
39
  <div class="flex items-center gap-4">
40
40
  {#if children}
41
41
  {@render children()}
@@ -54,7 +54,7 @@
54
54
  {/if}
55
55
 
56
56
  {#if siteUrl}
57
- <TooltipButton tooltip={t('common.goToSite')} href={siteUrl} target="_blank" rel="noopener noreferrer" class="flex items-center justify-center rounded-xl border border-border/60 bg-background/80">
57
+ <TooltipButton tooltip={t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
58
58
  <MonitorUp class="h-4 w-4 text-muted-foreground transition-colors hover:text-foreground" />
59
59
  </TooltipButton>
60
60
  {/if}
@@ -64,10 +64,10 @@
64
64
  {/if}
65
65
 
66
66
  {#if showSearch && onSearchClick}
67
- <Button variant="outline" size="sm" onclick={onSearchClick} class="h-10 gap-2 rounded-xl border-border/70 bg-background/85 px-3 text-muted-foreground shadow-sm shadow-slate-900/[0.02] hover:bg-muted/45 sm:min-w-56 sm:justify-start">
67
+ <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-9 px-3 rounded-lg border-border/60">
68
68
  <Search class="h-3.5 w-3.5" />
69
- <span class="hidden text-xs sm:inline">{t('common.search')}</span>
70
- <kbd class="ml-auto hidden items-center gap-0.5 rounded-md border bg-muted/60 px-1.5 py-0.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">
69
+ <span class="hidden sm:inline text-xs">{t('common.search')}...</span>
70
+ <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
71
71
  <span class="text-xs">⌘</span>K
72
72
  </kbd>
73
73
  </Button>
@@ -77,7 +77,7 @@
77
77
  {#if CustomThemeToggle}
78
78
  <CustomThemeToggle />
79
79
  {:else}
80
- <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-xl border border-border/60 bg-background/80">
80
+ <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
81
81
  {#if getResolvedTheme() === 'dark'}
82
82
  <Moon class="h-4 w-4 transition-all" />
83
83
  {:else}
@@ -7,7 +7,6 @@
7
7
  import CommandPalette from './CommandPalette.svelte';
8
8
  import KeyboardShortcuts from './KeyboardShortcuts.svelte';
9
9
  import ChatDialog from './ChatDialog.svelte';
10
- import TooltipButton from './TooltipButton.svelte';
11
10
  import { t } from '@svadmin/core/i18n';
12
11
  import { getAuthProvider, getTaskProvider } from '@svadmin/core';
13
12
  import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
@@ -17,6 +16,7 @@
17
16
  import * as Sheet from './ui/sheet/index.js';
18
17
  import { Menu } from '@lucide/svelte';
19
18
  import { getComponentRegistry } from '../component-registry.svelte.js';
19
+ import { Button } from './ui/button/index.js';
20
20
 
21
21
  let commandOpen = $state(false);
22
22
  let shortcutsOpen = $state(false);
@@ -104,8 +104,8 @@
104
104
  ontouchend={handleTouchEnd}
105
105
  />
106
106
  {#if loading}
107
- <div class="flex h-screen bg-muted/30" in:fade={{ duration: 150 }}>
108
- <div class="hidden w-64 space-y-4 border-r border-border/70 bg-card p-4 md:block">
107
+ <div class="flex h-screen" in:fade={{ duration: 150 }}>
108
+ <div class="hidden md:block w-[252px] bg-sidebar/80 p-4 space-y-4">
109
109
  <Skeleton class="h-8 w-32" />
110
110
  <div class="space-y-2 mt-6">
111
111
  {#each Array(5) as _, _i (_i)}
@@ -113,7 +113,7 @@
113
113
  {/each}
114
114
  </div>
115
115
  </div>
116
- <div class="flex-1 space-y-6 p-8">
116
+ <div class="flex-1 p-8 space-y-6">
117
117
  <Skeleton class="h-8 w-48" />
118
118
  <div class="space-y-3">
119
119
  {#each Array(4) as _, _i (_i)}
@@ -123,7 +123,7 @@
123
123
  </div>
124
124
  </div>
125
125
  {:else}
126
- <div class="flex h-screen bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.08),transparent_32rem),linear-gradient(180deg,hsl(var(--muted)/0.48),hsl(var(--background))_42rem)]" in:fade={{ duration: 200, delay: 50 }}>
126
+ <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
127
127
  <!-- Desktop sidebar -->
128
128
  <div class="hidden md:block">
129
129
  <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
@@ -138,8 +138,10 @@
138
138
 
139
139
  <div
140
140
  class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
141
- class:md:ml-72={!collapsed}
142
- class:md:ml-16={collapsed}
141
+ class:md:ml-[252px]={!collapsed}
142
+ class:sidebar-content-expanded={!collapsed}
143
+ class:md:ml-[70px]={collapsed}
144
+ class:sidebar-content-collapsed={collapsed}
143
145
  >
144
146
  <!-- Header with mobile hamburger -->
145
147
  <Header
@@ -149,9 +151,17 @@
149
151
  >
150
152
  {#snippet children()}
151
153
  <!-- Mobile hamburger -->
152
- <TooltipButton tooltip={t('common.menu')} class="md:hidden" onclick={() => { mobileMenuOpen = true; }}>
154
+ <Button
155
+ type="button"
156
+ variant="outline"
157
+ size="sm"
158
+ class="md:hidden gap-1.5 px-2.5"
159
+ aria-label={t('common.menu')}
160
+ onclick={() => { mobileMenuOpen = true; }}
161
+ >
153
162
  <Menu class="h-5 w-5" />
154
- </TooltipButton>
163
+ <span class="text-xs">{t('common.menu')}</span>
164
+ </Button>
155
165
  {/snippet}
156
166
  {#snippet rightActions()}
157
167
  {#if taskProvider}
@@ -163,9 +173,9 @@
163
173
  </Header>
164
174
 
165
175
  <!-- Content area -->
166
- <main class="flex-1 overflow-y-auto px-4 py-5 sm:px-6 md:px-8 md:py-7">
176
+ <main class="flex-1 overflow-y-auto p-5 md:p-7 bg-muted/30">
167
177
  {#key getPath()}
168
- <div class="mx-auto w-full max-w-[1680px]" in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
178
+ <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
169
179
  {@render children()}
170
180
  </div>
171
181
  {/key}
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ // ListInferencer — 基于资源定义零配置渲染列表视图
3
+ // 直接复用 ListPage + AutoTable,不需要手写任何页面代码。
4
+ import ListPage from './ListPage.svelte';
5
+
6
+ interface Props {
7
+ resourceName: string;
8
+ class?: string;
9
+ }
10
+
11
+ let { resourceName, class: className = '' }: Props = $props();
12
+ </script>
13
+
14
+ <ListPage {resourceName} class={className} />
@@ -0,0 +1,7 @@
1
+ interface Props {
2
+ resourceName: string;
3
+ class?: string;
4
+ }
5
+ declare const ListInferencer: import("svelte").Component<Props, {}, "">;
6
+ type ListInferencer = ReturnType<typeof ListInferencer>;
7
+ export default ListInferencer;
@@ -19,21 +19,19 @@
19
19
  }: Props = $props();
20
20
  </script>
21
21
 
22
- <div class="border-b border-border/70 pb-5 {className}" data-svadmin-page-header>
22
+ <div class="space-y-4 {className}">
23
23
  {#if showBreadcrumbs}
24
- <div class="mb-4">
25
- <Breadcrumbs />
26
- </div>
24
+ <Breadcrumbs />
27
25
  {/if}
28
- <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
29
- <div class="min-w-0">
30
- <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
26
+ <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
27
+ <div>
28
+ <h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
31
29
  {#if description}
32
- <p class="mt-1 max-w-3xl text-sm text-muted-foreground">{description}</p>
30
+ <p class="text-sm text-muted-foreground">{description}</p>
33
31
  {/if}
34
32
  </div>
35
33
  {#if actions}
36
- <div class="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:justify-end">
34
+ <div class="flex items-center gap-2">
37
35
  {@render actions()}
38
36
  </div>
39
37
  {/if}
@@ -0,0 +1,28 @@
1
+ <script lang="ts">
2
+ // ResourceInferencer — 一站式零配置 CRUD 渲染器
3
+ // 根据 URL action(list/create/edit/show)自动分发到对应的 Inferencer 组件。
4
+ // 用法:<ResourceInferencer resourceName="posts" />
5
+ import { useParsed } from '@svadmin/core';
6
+ import ListInferencer from './ListInferencer.svelte';
7
+ import CreateInferencer from './CreateInferencer.svelte';
8
+ import EditInferencer from './EditInferencer.svelte';
9
+ import ShowInferencer from './ShowInferencer.svelte';
10
+
11
+ interface Props {
12
+ resourceName: string;
13
+ class?: string;
14
+ }
15
+
16
+ let { resourceName, class: className = '' }: Props = $props();
17
+ const parsed = useParsed();
18
+ </script>
19
+
20
+ {#if parsed.action === 'create'}
21
+ <CreateInferencer {resourceName} class={className} />
22
+ {:else if parsed.action === 'edit'}
23
+ <EditInferencer {resourceName} class={className} />
24
+ {:else if parsed.action === 'show'}
25
+ <ShowInferencer {resourceName} class={className} />
26
+ {:else}
27
+ <ListInferencer {resourceName} class={className} />
28
+ {/if}
@@ -0,0 +1,7 @@
1
+ interface Props {
2
+ resourceName: string;
3
+ class?: string;
4
+ }
5
+ declare const ResourceInferencer: import("svelte").Component<Props, {}, "">;
6
+ type ResourceInferencer = ReturnType<typeof ResourceInferencer>;
7
+ export default ResourceInferencer;