@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.
- package/dist/app.css +76 -104
- package/dist/components/AdminApp.svelte +18 -14
- package/dist/components/AutoForm.svelte +32 -47
- package/dist/components/AutoTable.svelte +26 -31
- package/dist/components/CanAccess.svelte +3 -2
- package/dist/components/CanAccess.svelte.d.ts +1 -0
- package/dist/components/CreateInferencer.svelte +13 -0
- package/dist/components/CreateInferencer.svelte.d.ts +7 -0
- package/dist/components/EditInferencer.svelte +21 -0
- package/dist/components/EditInferencer.svelte.d.ts +9 -0
- package/dist/components/Header.svelte +6 -6
- package/dist/components/Layout.svelte +21 -11
- package/dist/components/ListInferencer.svelte +14 -0
- package/dist/components/ListInferencer.svelte.d.ts +7 -0
- package/dist/components/PageHeader.svelte +7 -9
- package/dist/components/ResourceInferencer.svelte +28 -0
- package/dist/components/ResourceInferencer.svelte.d.ts +7 -0
- package/dist/components/ResourceOperationsPage.svelte +168 -21
- package/dist/components/ResourceOperationsPage.svelte.d.ts +2 -0
- package/dist/components/SettingsPage.svelte +76 -41
- package/dist/components/ShowInferencer.svelte +21 -0
- package/dist/components/ShowInferencer.svelte.d.ts +9 -0
- package/dist/components/ShowPage.svelte +11 -11
- package/dist/components/ShowPage.svelte.d.ts +1 -0
- package/dist/components/Sidebar.svelte +214 -300
- package/dist/components/Sidebar.svelte.d.ts +0 -1
- package/dist/components/SidebarItem.svelte +141 -108
- package/dist/components/account/TeamMembersPage.svelte +9 -3
- package/dist/components/buttons/CloneButton.svelte +10 -2
- package/dist/components/buttons/CloneButton.svelte.d.ts +2 -4
- package/dist/components/buttons/CreateButton.svelte +9 -2
- package/dist/components/buttons/CreateButton.svelte.d.ts +2 -4
- package/dist/components/buttons/DeleteButton.svelte +10 -2
- package/dist/components/buttons/DeleteButton.svelte.d.ts +2 -4
- package/dist/components/buttons/EditButton.svelte +10 -2
- package/dist/components/buttons/EditButton.svelte.d.ts +2 -4
- package/dist/components/buttons/ExportButton.svelte +9 -2
- package/dist/components/buttons/ExportButton.svelte.d.ts +2 -4
- package/dist/components/buttons/ImportButton.svelte +9 -2
- package/dist/components/buttons/ImportButton.svelte.d.ts +2 -4
- package/dist/components/buttons/ShowButton.svelte +10 -2
- package/dist/components/buttons/ShowButton.svelte.d.ts +2 -4
- package/dist/components/buttons/access-control.d.ts +7 -0
- package/dist/components/buttons/access-control.js +5 -0
- package/dist/components/ui/sheet/sheet.svelte +3 -3
- package/dist/index.d.ts +5 -0
- package/dist/index.js +5 -0
- package/dist/router-state.svelte.js +15 -0
- package/package.json +2 -2
|
@@ -484,17 +484,13 @@
|
|
|
484
484
|
}
|
|
485
485
|
</script>
|
|
486
486
|
|
|
487
|
-
<div class="space-y-
|
|
487
|
+
<div class="space-y-4">
|
|
488
488
|
<!-- Header -->
|
|
489
|
-
<div class="
|
|
490
|
-
<
|
|
491
|
-
|
|
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"
|
|
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"
|
|
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
|
|
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-
|
|
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="
|
|
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-
|
|
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="
|
|
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-
|
|
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="
|
|
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
|
|
649
|
-
<Table.Header
|
|
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("
|
|
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}
|
|
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
|
|
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-
|
|
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"
|
|
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-
|
|
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
|
|
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}
|
|
@@ -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,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-
|
|
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
|
|
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="
|
|
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
|
|
70
|
-
<kbd class="
|
|
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-
|
|
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
|
|
108
|
-
<div class="hidden w-
|
|
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
|
|
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-
|
|
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-
|
|
142
|
-
class:
|
|
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
|
-
<
|
|
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
|
-
|
|
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
|
|
176
|
+
<main class="flex-1 overflow-y-auto p-5 md:p-7 bg-muted/30">
|
|
167
177
|
{#key getPath()}
|
|
168
|
-
<div
|
|
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} />
|
|
@@ -19,21 +19,19 @@
|
|
|
19
19
|
}: Props = $props();
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
|
-
<div class="
|
|
22
|
+
<div class="space-y-4 {className}">
|
|
23
23
|
{#if showBreadcrumbs}
|
|
24
|
-
<
|
|
25
|
-
<Breadcrumbs />
|
|
26
|
-
</div>
|
|
24
|
+
<Breadcrumbs />
|
|
27
25
|
{/if}
|
|
28
|
-
<div class="flex flex-col gap-
|
|
29
|
-
<div
|
|
30
|
-
<h1 class="
|
|
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="
|
|
30
|
+
<p class="text-sm text-muted-foreground">{description}</p>
|
|
33
31
|
{/if}
|
|
34
32
|
</div>
|
|
35
33
|
{#if actions}
|
|
36
|
-
<div class="flex
|
|
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}
|