Add headless CMS for official site content management

Integrate article and page management into the Laravel admin dashboard
to serve as a headless CMS for the Next.js frontend (usher-site).

Backend:
- 7 migrations: article_categories, article_tags, articles, pivots, attachments, pages
- 5 models with relationships: Article, ArticleCategory, ArticleTag, ArticleAttachment, Page
- 4 admin controllers: articles (with publish/archive/pin), categories, tags, pages
- Admin views with EasyMDE markdown editor, multi-select categories/tags
- Navigation section "官網管理" in admin sidebar

API (v1):
- GET /api/v1/articles (filtered by type, category, tag, search; paginated)
- GET /api/v1/articles/{slug} (with related articles)
- GET /api/v1/categories
- GET /api/v1/pages/{slug} (with children)
- GET /api/v1/homepage (aggregated homepage data)
- Attachment download endpoint
- CORS configured for usher.org.tw, vercel.app, localhost:3000

Content migration:
- ImportHugoContent command: imports Hugo markdown files as articles/pages
- Successfully imported 27 articles, 17 categories, 11 tags, 9 pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/admin/pages/create.blade.php

@@ -0,0 +1,131 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex items-center justify-between">
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                建立頁面
+            </h2>
+            <a href="{{ route('admin.pages.index') }}" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                ← 返回列表
+            </a>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                <form method="POST" action="{{ route('admin.pages.store') }}" class="space-y-6 p-6">
+                    @csrf
+
+                    <!-- Title -->
+                    <div>
+                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標題 <span class="text-red-500">*</span></label>
+                        <input type="text" name="title" id="title" value="{{ old('title') }}" required
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
+                            placeholder="輸入頁面標題">
+                        @error('title')
+                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <!-- Slug -->
+                    <div>
+                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">網址代碼（選填，自動產生）</label>
+                        <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
+                            placeholder="about-us">
+                        @error('slug')
+                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <!-- Parent Page -->
+                    <div>
+                        <label for="parent_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">上層頁面（選填）</label>
+                        <select name="parent_id" id="parent_id"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                            <option value="">無（頂層頁面）</option>
+                            @foreach($parentPages as $parentPage)
+                                <option value="{{ $parentPage->id }}" {{ old('parent_id') == $parentPage->id ? 'selected' : '' }}>{{ $parentPage->title }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Content (Markdown Editor) -->
+                    <div>
+                        <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">內容 <span class="text-red-500">*</span></label>
+                        <textarea name="content" id="content" rows="15" required>{{ old('content') }}</textarea>
+                        @error('content')
+                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <!-- Template -->
+                    <div>
+                        <label for="template" class="block text-sm font-medium text-gray-700 dark:text-gray-300">模板（選填）</label>
+                        <input type="text" name="template" id="template" value="{{ old('template') }}"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
+                            placeholder="例如：homepage, about, contact">
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">用於前端顯示不同版面配置</p>
+                    </div>
+
+                    <!-- Sort Order -->
+                    <div>
+                        <label for="sort_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">排序</label>
+                        <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', 0) }}" min="0"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                    </div>
+
+                    <!-- Meta Description -->
+                    <div>
+                        <label for="meta_description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SEO 描述（選填）</label>
+                        <textarea name="meta_description" id="meta_description" rows="2"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
+                            placeholder="搜尋引擎描述">{{ old('meta_description') }}</textarea>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-gray-700 pt-6">
+                        <a href="{{ route('admin.pages.index') }}" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                            取消
+                        </a>
+                        <button type="submit" name="status" value="draft" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                            儲存為草稿
+                        </button>
+                        <button type="submit" name="status" value="published" class="rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
+                            發布頁面
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    @push('styles')
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+    @endpush
+
+    @push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            new EasyMDE({
+                element: document.getElementById('content'),
+                spellChecker: false,
+                autosave: {
+                    enabled: true,
+                    uniqueId: 'page-create',
+                    delay: 10000,
+                },
+                placeholder: '使用 Markdown 撰寫頁面內容...',
+                toolbar: [
+                    'bold', 'italic', 'heading', '|',
+                    'quote', 'unordered-list', 'ordered-list', '|',
+                    'link', 'image', 'table', '|',
+                    'preview', 'side-by-side', 'fullscreen', '|',
+                    'guide'
+                ],
+            });
+        });
+    </script>
+    @endpush
+</x-app-layout>

resources/views/admin/pages/edit.blade.php

@@ -0,0 +1,135 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex items-center justify-between">
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                編輯頁面
+            </h2>
+            <a href="{{ route('admin.pages.show', $page) }}" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                ← 返回查看
+            </a>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                <form method="POST" action="{{ route('admin.pages.update', $page) }}" class="space-y-6 p-6">
+                    @csrf
+                    @method('PATCH')
+
+                    <!-- Title -->
+                    <div>
+                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標題 <span class="text-red-500">*</span></label>
+                        <input type="text" name="title" id="title" value="{{ old('title', $page->title) }}" required
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                        @error('title')
+                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <!-- Slug -->
+                    <div>
+                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">網址代碼</label>
+                        <input type="text" name="slug" id="slug" value="{{ old('slug', $page->slug) }}"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                        @error('slug')
+                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <!-- Parent Page -->
+                    <div>
+                        <label for="parent_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">上層頁面</label>
+                        <select name="parent_id" id="parent_id"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                            <option value="">無（頂層頁面）</option>
+                            @foreach($parentPages as $parentPage)
+                                <option value="{{ $parentPage->id }}" {{ old('parent_id', $page->parent_id) == $parentPage->id ? 'selected' : '' }}>{{ $parentPage->title }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Content (Markdown Editor) -->
+                    <div>
+                        <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">內容 <span class="text-red-500">*</span></label>
+                        <textarea name="content" id="content" rows="15" required>{{ old('content', $page->content) }}</textarea>
+                        @error('content')
+                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <!-- Template -->
+                    <div>
+                        <label for="template" class="block text-sm font-medium text-gray-700 dark:text-gray-300">模板</label>
+                        <input type="text" name="template" id="template" value="{{ old('template', $page->template) }}"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
+                            placeholder="例如：homepage, about, contact">
+                    </div>
+
+                    <!-- Status -->
+                    <div>
+                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">狀態</label>
+                        <select name="status" id="status"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                            <option value="draft" {{ old('status', $page->status) === 'draft' ? 'selected' : '' }}>草稿</option>
+                            <option value="published" {{ old('status', $page->status) === 'published' ? 'selected' : '' }}>已發布</option>
+                        </select>
+                    </div>
+
+                    <!-- Sort Order -->
+                    <div>
+                        <label for="sort_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">排序</label>
+                        <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', $page->sort_order) }}" min="0"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
+                    </div>
+
+                    <!-- Meta Description -->
+                    <div>
+                        <label for="meta_description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SEO 描述</label>
+                        <textarea name="meta_description" id="meta_description" rows="2"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">{{ old('meta_description', $page->meta_description) }}</textarea>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-gray-700 pt-6">
+                        <a href="{{ route('admin.pages.show', $page) }}" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                            取消
+                        </a>
+                        <button type="submit" class="rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
+                            儲存變更
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    @push('styles')
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+    @endpush
+
+    @push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            new EasyMDE({
+                element: document.getElementById('content'),
+                spellChecker: false,
+                autosave: {
+                    enabled: true,
+                    uniqueId: 'page-edit-{{ $page->id }}',
+                    delay: 10000,
+                },
+                placeholder: '使用 Markdown 撰寫頁面內容...',
+                toolbar: [
+                    'bold', 'italic', 'heading', '|',
+                    'quote', 'unordered-list', 'ordered-list', '|',
+                    'link', 'image', 'table', '|',
+                    'preview', 'side-by-side', 'fullscreen', '|',
+                    'guide'
+                ],
+            });
+        });
+    </script>
+    @endpush
+</x-app-layout>

resources/views/admin/pages/index.blade.php

@@ -0,0 +1,120 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex items-center justify-between">
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                官網頁面管理
+            </h2>
+            <a href="{{ route('admin.pages.create') }}" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
+                + 建立頁面
+            </a>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 space-y-6">
+            @if (session('status'))
+                <div class="rounded-md bg-green-50 dark:bg-green-900/50 p-4">
+                    <p class="text-sm font-medium text-green-800 dark:text-green-200">{{ session('status') }}</p>
+                </div>
+            @endif
+
+            @if (session('error'))
+                <div class="rounded-md bg-red-50 dark:bg-red-900/50 p-4">
+                    <p class="text-sm font-medium text-red-800 dark:text-red-200">{{ session('error') }}</p>
+                </div>
+            @endif
+
+            <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-700">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">頁面</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">網址代碼</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">狀態</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">排序</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">建立者</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        @forelse($pages as $page)
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                        <a href="{{ route('admin.pages.show', $page) }}" class="hover:text-indigo-600 dark:hover:text-indigo-400">
+                                            {{ $page->title }}
+                                        </a>
+                                    </div>
+                                    @if($page->template)
+                                        <div class="text-xs text-gray-500 dark:text-gray-400">模板：{{ $page->template }}</div>
+                                    @endif
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
+                                    {{ $page->slug }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
+                                        @if($page->status === 'draft') bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300
+                                        @else bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300
+                                        @endif">
+                                        {{ $page->getStatusLabel() }}
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                    {{ $page->sort_order }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                    {{ $page->creator->name ?? 'N/A' }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                                    <a href="{{ route('admin.pages.show', $page) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300">查看</a>
+                                    <a href="{{ route('admin.pages.edit', $page) }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">編輯</a>
+                                </td>
+                            </tr>
+                            {{-- Child pages --}}
+                            @foreach($page->children as $child)
+                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 bg-gray-50/50 dark:bg-gray-800/50">
+                                    <td class="px-6 py-4 whitespace-nowrap pl-12">
+                                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                            <span class="text-gray-400 dark:text-gray-500 mr-1">└</span>
+                                            <a href="{{ route('admin.pages.show', $child) }}" class="hover:text-indigo-600 dark:hover:text-indigo-400">
+                                                {{ $child->title }}
+                                            </a>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
+                                        {{ $child->slug }}
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
+                                            @if($child->status === 'draft') bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300
+                                            @else bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300
+                                            @endif">
+                                            {{ $child->getStatusLabel() }}
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                        {{ $child->sort_order }}
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                        {{ $child->creator->name ?? 'N/A' }}
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                                        <a href="{{ route('admin.pages.show', $child) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300">查看</a>
+                                        <a href="{{ route('admin.pages.edit', $child) }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">編輯</a>
+                                    </td>
+                                </tr>
+                            @endforeach
+                        @empty
+                            <tr>
+                                <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
+                                    沒有找到頁面。<a href="{{ route('admin.pages.create') }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">建立第一個頁面</a>
+                                </td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</x-app-layout>

resources/views/admin/pages/show.blade.php

@@ -0,0 +1,155 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex items-center justify-between">
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                頁面詳情
+            </h2>
+            <div class="flex items-center space-x-2">
+                <a href="{{ route('admin.pages.index') }}" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                    ← 返回列表
+                </a>
+                <a href="{{ route('admin.pages.edit', $page) }}" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
+                    編輯頁面
+                </a>
+            </div>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="mx-auto max-w-4xl sm:px-6 lg:px-8 space-y-6">
+            @if (session('status'))
+                <div class="rounded-md bg-green-50 dark:bg-green-900/50 p-4">
+                    <p class="text-sm font-medium text-green-800 dark:text-green-200">{{ session('status') }}</p>
+                </div>
+            @endif
+
+            @if (session('error'))
+                <div class="rounded-md bg-red-50 dark:bg-red-900/50 p-4">
+                    <p class="text-sm font-medium text-red-800 dark:text-red-200">{{ session('error') }}</p>
+                </div>
+            @endif
+
+            <!-- Page Content -->
+            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
+                <div class="mb-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                            {{ $page->title }}
+                        </h3>
+                        <span class="inline-flex rounded-full px-3 py-1 text-sm font-semibold
+                            @if($page->status === 'draft') bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300
+                            @else bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300
+                            @endif">
+                            {{ $page->getStatusLabel() }}
+                        </span>
+                    </div>
+
+                    <div class="prose dark:prose-invert max-w-none">
+                        <div class="whitespace-pre-wrap text-gray-700 dark:text-gray-300">{{ $page->content }}</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Child Pages -->
+            @if($page->children->count() > 0)
+                <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">子頁面</h4>
+                    <div class="space-y-2">
+                        @foreach($page->children as $child)
+                            <div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 rounded-md p-3">
+                                <a href="{{ route('admin.pages.show', $child) }}" class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">{{ $child->title }}</a>
+                                <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
+                                    @if($child->status === 'draft') bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300
+                                    @else bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300
+                                    @endif">
+                                    {{ $child->getStatusLabel() }}
+                                </span>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+
+            <!-- Metadata -->
+            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
+                <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">頁面資訊</h4>
+                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">網址代碼</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $page->slug }}</dd>
+                    </div>
+                    @if($page->template)
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">模板</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->template }}</dd>
+                    </div>
+                    @endif
+                    @if($page->parent)
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">上層頁面</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                            <a href="{{ route('admin.pages.show', $page->parent) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ $page->parent->title }}</a>
+                        </dd>
+                    </div>
+                    @endif
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">排序</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->sort_order }}</dd>
+                    </div>
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">建立者</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->creator->name ?? 'N/A' }}</dd>
+                    </div>
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">建立時間</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->created_at->format('Y-m-d H:i:s') }}</dd>
+                    </div>
+                    @if($page->published_at)
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">發布時間</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->published_at->format('Y-m-d H:i:s') }}</dd>
+                    </div>
+                    @endif
+                    @if($page->lastUpdatedBy)
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">最後更新者</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->lastUpdatedBy->name }}</dd>
+                    </div>
+                    @endif
+                    @if($page->meta_description)
+                    <div class="sm:col-span-2">
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">SEO 描述</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $page->meta_description }}</dd>
+                    </div>
+                    @endif
+                </dl>
+            </div>
+
+            <!-- Actions -->
+            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
+                <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">操作</h4>
+                <div class="flex flex-wrap gap-3">
+                    @if($page->isDraft() && auth()->user()->can('publish_pages'))
+                        <form method="POST" action="{{ route('admin.pages.publish', $page) }}">
+                            @csrf
+                            <button type="submit" class="inline-flex items-center rounded-md border border-transparent bg-green-600 dark:bg-green-500 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 dark:hover:bg-green-600">
+                                發布頁面
+                            </button>
+                        </form>
+                    @endif
+
+                    @if(auth()->user()->can('delete_pages'))
+                        <form method="POST" action="{{ route('admin.pages.destroy', $page) }}"
+                            onsubmit="return confirm('確定要刪除此頁面嗎？');">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit" class="inline-flex items-center rounded-md border border-transparent bg-red-600 dark:bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 dark:hover:bg-red-600">
+                                刪除頁面
+                            </button>
+                        </form>
+                    @endif
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>