feat: 注入块拖拽排序（后台顺序即渲染顺序）+ theme.json 声明 inject_points + 主题卡片展示注入点

2026-08-11 23:25:34 +08:00
parent 3e3b9a2bfd
commit d9a6ca2959
16 changed files with 57 additions and 7 deletions
@@ -58,6 +58,7 @@ class ThemeManager
                'description' => $manifest['description'] ?? '',
                'author' => $manifest['author'] ?? '',
                'screenshot' => $manifest['screenshot'] ?? null,
+                'inject_points' => $manifest['inject_points'] ?? null,
                'active' => $name === $this->active(),
            ];
        }
@@ -51,16 +51,17 @@ class ThemeInject extends Page
            $tabs[] = Tab::make(($i + 1).'. '.$label)
                ->schema([
                    Repeater::make("inject.{$point}")
-                        ->label('注入块（可多条，按排序渲染）')
+                        ->label('注入块（可多条，拖拽排序，按顺序渲染）')
                        ->schema([
                            TextInput::make('title')->label('名称')->placeholder('如：百度统计')->columnSpan(2),
                            Textarea::make('html')->label('内容（HTML）')->rows(3)->columnSpanFull(),
-                            TextInput::make('sort')->label('排序')->numeric()->default(0)->columnSpan(1),
-                            Toggle::make('enabled')->label('启用')->default(true)->columnSpan(1),
+                            Toggle::make('enabled')->label('启用')->default(true),
                        ])
                        ->columns(3)
                        ->defaultItems(0)
                        ->collapsible()
+                        ->reorderable()
+                        ->reorderableWithButtons()
                        ->addActionLabel('添加一条'),
                ]);
            $i++;
@@ -90,6 +91,7 @@ class ThemeInject extends Page

        $blocks = [];
        foreach ($data['inject'] ?? [] as $point => $items) {
+            $order = 0;
            foreach ($items ?? [] as $item) {
                if (trim((string) ($item['html'] ?? '')) === '') {
                    continue;
@@ -98,7 +100,7 @@ class ThemeInject extends Page
                    'point' => $point,
                    'title' => $item['title'] ?? '',
                    'html' => $item['html'],
-                    'sort' => (int) ($item['sort'] ?? 0),
+                    'sort' => $order++,
                    'enabled' => (bool) ($item['enabled'] ?? true),
                ];
            }
@@ -22,7 +22,8 @@ themes/{name}/
    "version": "1.0.0",
    "description": "主题描述",
    "author": "作者",
-    "screenshot": "screenshot.png"
+    "screenshot": "screenshot.png",
+    "inject_points": ["head", "header", "sidebar_top", "sidebar_bottom", "content_top", "content_bottom", "post_content_top", "post_content_bottom", "footer", "body_end"]
 }
 ```

@@ -124,6 +125,10 @@ themes/{name}/

 新主题须在对应 partial/视图放置 `@stack('theme:xxx')` 才能接收注入。

+**声明注入点**：`theme.json` 的 `inject_points` 声明主题实现了哪些注入点（缺省视为全部支持），后台主题卡片会展示，切换主题时一目了然。
+
+**多注入排序**：同一位置可添加多条，后台「主题注入」页按列表拖拽排序，保存后按顺序渲染。
+
 ## 预览图

 `theme.json` 的 `screenshot` 指向 `assets/` 下的预览图（如 `screenshot.png`），后台主题管理以卡片形式展示。可用无头浏览器截图生成：`node` + playwright 打开站点首页保存为 `themes/{name}/assets/screenshot.png`。
@@ -29,6 +29,14 @@
                        <p class="mt-1 flex-1 text-sm text-gray-500 dark:text-gray-400">{{ $theme['description'] }}</p>
                        <p class="mt-1 text-xs text-gray-400">{{ $theme['author'] }}</p>

+                        @if($theme['inject_points'])
+                            <div class="mt-3 flex flex-wrap gap-1">
+                                @foreach($theme['inject_points'] as $point)
+                                    <x-filament::badge color="gray" size="xs">{{ $point }}</x-filament::badge>
+                                @endforeach
+                            </div>
+                        @endif
+
                        <div class="mt-4 flex gap-2">
                            @if(! $theme['active'])
                                <x-filament::button size="sm" color="primary" wire:click="activateTheme('{{ $theme['name'] }}')">启用</x-filament::button>
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -0,0 +1 @@
+fake-jpg
@@ -3,5 +3,17 @@
    "version": "1.0.0",
    "description": "极简现代风格，支持深色模式",
    "author": "LaraLog",
-    "screenshot": "screenshot.png"
+    "screenshot": "screenshot.png",
+    "inject_points": [
+        "head",
+        "header",
+        "sidebar_top",
+        "sidebar_bottom",
+        "content_top",
+        "content_bottom",
+        "post_content_top",
+        "post_content_bottom",
+        "footer",
+        "body_end"
+    ]
 }
@@ -3,5 +3,17 @@
    "version": "1.0.0",
    "description": "移植自 SaBlog-X 经典两栏风格",
    "author": "LaraLog",
-    "screenshot": "screenshot.png"
+    "screenshot": "screenshot.png",
+    "inject_points": [
+        "head",
+        "header",
+        "sidebar_top",
+        "sidebar_bottom",
+        "content_top",
+        "content_bottom",
+        "post_content_top",
+        "post_content_bottom",
+        "footer",
+        "body_end"
+    ]
 }