docs: mark admin dashboard plan complete
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
# 後台 Dashboard 化 Implementation Plan
|
# 後台 Dashboard 化 Implementation Plan
|
||||||
|
|
||||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [x]`) syntax for tracking.
|
||||||
|
|
||||||
**Goal:** 將 `/admin` 由綠色純 CSS 表單頁改造成「墨黑 sidebar + 米白內容」嘅真 dashboard：`/admin` 做總覽、文章列表搬去 `/admin/posts`，所有 admin 頁統一視覺；維持純 Astro + CSS、無 React。
|
**Goal:** 將 `/admin` 由綠色純 CSS 表單頁改造成「墨黑 sidebar + 米白內容」嘅真 dashboard：`/admin` 做總覽、文章列表搬去 `/admin/posts`，所有 admin 頁統一視覺；維持純 Astro + CSS、無 React。
|
||||||
|
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
|
|
||||||
**Files:** Modify `src/layouts/AdminLayout.astro`
|
**Files:** Modify `src/layouts/AdminLayout.astro`
|
||||||
|
|
||||||
- [ ] **Step 1: 換 `:root` 同佈局 CSS** — 將現有 `:root`（line 138-144）＋ `.inner`／`.bar*`（149-158）換成：
|
- [x] **Step 1: 換 `:root` 同佈局 CSS** — 將現有 `:root`（line 138-144）＋ `.inner`／`.bar*`（149-158）換成：
|
||||||
|
|
||||||
```css
|
```css
|
||||||
:root {
|
:root {
|
||||||
@@ -64,7 +64,7 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
.topbar{display:none}
|
.topbar{display:none}
|
||||||
```
|
```
|
||||||
|
|
||||||
- [ ] **Step 2: 加 mobile CSS**（同一 `<style>` 內）：
|
- [x] **Step 2: 加 mobile CSS**（同一 `<style>` 內）：
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@media (max-width:900px){
|
@media (max-width:900px){
|
||||||
@@ -79,7 +79,7 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- [ ] **Step 3: 換 body markup**（line 29-51）成：
|
- [x] **Step 3: 換 body markup**（line 29-51）成：
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
<body>
|
<body>
|
||||||
@@ -124,11 +124,11 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
</body>
|
</body>
|
||||||
```
|
```
|
||||||
|
|
||||||
- [ ] **Step 4: 換 form／table／card CSS**（現有 164-206）— 保留 class 名（`.card` `.badge` `.actions` `.grid2` `.image-*` `.muted` `.err` `.field-error` `.row`），色值改用 tokens：`.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}`；`th`/`td` 用 `var(--border)`；input/textarea/select 用 `var(--border)`＋focus `outline:2px solid var(--brand-soft);border-color:var(--brand)`；`button,.btn` 用 `background:var(--ink);border-color:var(--ink);border-radius:var(--radius-sm)`，`.btn.secondary` 白底、`button.danger` 用 `--danger`／`--danger-soft`；`.badge.published{background:var(--ok-soft);color:var(--ok)}`、`.badge.draft{background:var(--warn-soft);color:var(--warn)}`。
|
- [x] **Step 4: 換 form／table／card CSS**（現有 164-206）— 保留 class 名（`.card` `.badge` `.actions` `.grid2` `.image-*` `.muted` `.err` `.field-error` `.row`），色值改用 tokens：`.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}`；`th`/`td` 用 `var(--border)`；input/textarea/select 用 `var(--border)`＋focus `outline:2px solid var(--brand-soft);border-color:var(--brand)`；`button,.btn` 用 `background:var(--ink);border-color:var(--ink);border-radius:var(--radius-sm)`，`.btn.secondary` 白底、`button.danger` 用 `--danger`／`--danger-soft`；`.badge.published{background:var(--ok-soft);color:var(--ok)}`、`.badge.draft{background:var(--warn-soft);color:var(--warn)}`。
|
||||||
|
|
||||||
- [ ] **Step 5: 驗證** — `npm run build`，Expected: success（0 errors）。
|
- [x] **Step 5: 驗證** — `npm run build`，Expected: success（0 errors）。
|
||||||
- [ ] **Step 6: 目測** — `npm run dev`，喺 ≥900px 同 <900px 開 `/admin`，確認 sidebar、active 態、漢堡開合、各頁表單／表格可讀。
|
- [x] **Step 6: 目測** — `npm run dev`，喺 ≥900px 同 <900px 開 `/admin`，確認 sidebar、active 態、漢堡開合、各頁表單／表格可讀。
|
||||||
- [ ] **Step 7: Commit** — `git add src/layouts/AdminLayout.astro && git commit -m "feat(admin): sidebar shell and design tokens"`
|
- [x] **Step 7: Commit** — `git add src/layouts/AdminLayout.astro && git commit -m "feat(admin): sidebar shell and design tokens"`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -136,10 +136,10 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
|
|
||||||
**Files:** Modify `src/data/content.ts`
|
**Files:** Modify `src/data/content.ts`
|
||||||
|
|
||||||
- [ ] **Step 1: 加 import** — `import { and, asc, desc, eq, isNull, ne, sql } from "drizzle-orm";`，並喺 schema import 加入 `CONTENT_KINDS`。
|
- [x] **Step 1: 加 import** — `import { and, asc, desc, eq, isNull, ne, sql } from "drizzle-orm";`，並喺 schema import 加入 `CONTENT_KINDS`。
|
||||||
- [ ] **Step 2: 加 type ＋ function**（`getKeywords` 之後）：見 spec §4，實作 `DashboardData` + `getDashboardData`（用 `groupBy` + `sql\`count(*)\``，`pick` helper 取 status 計數，`recentPosts` limit 5，`postsWithoutCover` 用 `isNull(posts.coverImage)`）。
|
- [x] **Step 2: 加 type ＋ function**（`getKeywords` 之後）：見 spec §4，實作 `DashboardData` + `getDashboardData`（用 `groupBy` + `sql\`count(*)\``，`pick` helper 取 status 計數，`recentPosts` limit 5，`postsWithoutCover` 用 `isNull(posts.coverImage)`）。
|
||||||
- [ ] **Step 3: 驗證** — `npm run build`，Expected: success。
|
- [x] **Step 3: 驗證** — `npm run build`，Expected: success。
|
||||||
- [ ] **Step 4: Commit** — `git add src/data/content.ts && git commit -m "feat(admin): add getDashboardData query"`
|
- [x] **Step 4: Commit** — `git add src/data/content.ts && git commit -m "feat(admin): add getDashboardData query"`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -147,13 +147,13 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
|
|
||||||
**Files:** Create `src/pages/admin/posts.astro`；Modify `src/pages/admin/index.astro`、`src/pages/admin/post/[id].astro`
|
**Files:** Create `src/pages/admin/posts.astro`；Modify `src/pages/admin/index.astro`、`src/pages/admin/post/[id].astro`
|
||||||
|
|
||||||
- [ ] **Step 1: 建立 `posts.astro`** — 將原 `index.astro` 查詢＋文章表搬去，`<AdminLayout title="文章">`、`<h1>文章</h1>`，heading 加「+ 寫新文」；保留 `export const prerender = false`。
|
- [x] **Step 1: 建立 `posts.astro`** — 將原 `index.astro` 查詢＋文章表搬去，`<AdminLayout title="文章">`、`<h1>文章</h1>`，heading 加「+ 寫新文」；保留 `export const prerender = false`。
|
||||||
- [ ] **Step 2: 改寫 `index.astro`** 成 dashboard（frontmatter 用 `getDashboardData` + `getSettings`，砌 `todos`；markup 見 spec §3）。
|
- [x] **Step 2: 改寫 `index.astro`** 成 dashboard（frontmatter 用 `getDashboardData` + `getSettings`，砌 `todos`；markup 見 spec §3）。
|
||||||
- [ ] **Step 3: 加 dashboard CSS**（`.stats`／`.stat`／`.dash`／`.todo`／`.status-row`／`.status-dot`，RWD breakpoints 1100／900／560）。
|
- [x] **Step 3: 加 dashboard CSS**（`.stats`／`.stat`／`.dash`／`.todo`／`.status-row`／`.status-dot`，RWD breakpoints 1100／900／560）。
|
||||||
- [ ] **Step 4: 改 redirect** — `post/[id].astro` line 29／39／96 `"/admin"` → `"/admin/posts"`；line 174 取消 link `href="/admin"` → `"/admin/posts"`。
|
- [x] **Step 4: 改 redirect** — `post/[id].astro` line 29／39／96 `"/admin"` → `"/admin/posts"`；line 174 取消 link `href="/admin"` → `"/admin/posts"`。
|
||||||
- [ ] **Step 5: 驗證** — `npm run build`，Expected: success。
|
- [x] **Step 5: 驗證** — `npm run build`，Expected: success。
|
||||||
- [ ] **Step 6: 目測** — dev：登入後 `/admin` 見總覽；`/admin/posts` 新增／儲存／刪文後返 `/admin/posts`；統計同待辦數字正確。
|
- [x] **Step 6: 目測** — dev：登入後 `/admin` 見總覽；`/admin/posts` 新增／儲存／刪文後返 `/admin/posts`；統計同待辦數字正確。
|
||||||
- [ ] **Step 7: Commit** — `git add src/pages/admin && git commit -m "feat(admin): dashboard overview and move posts list to /admin/posts"`
|
- [x] **Step 7: Commit** — `git add src/pages/admin && git commit -m "feat(admin): dashboard overview and move posts list to /admin/posts"`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -161,11 +161,11 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
|
|
||||||
**Files:** Modify `src/pages/admin/cases.astro`、`content/[kind].astro`、`settings.astro`、`ai.astro`
|
**Files:** Modify `src/pages/admin/cases.astro`、`content/[kind].astro`、`settings.astro`、`ai.astro`
|
||||||
|
|
||||||
- [ ] **Step 1: 移除 inline 硬編色**，改用 tokens／既有 class；成功提示改 `.notice`。
|
- [x] **Step 1: 移除 inline 硬編色**，改用 tokens／既有 class；成功提示改 `.notice`。
|
||||||
- [ ] **Step 2: 統一 section 標題／spacing**。
|
- [x] **Step 2: 統一 section 標題／spacing**。
|
||||||
- [ ] **Step 3: 驗證** — `npm run build`，Expected: success。
|
- [x] **Step 3: 驗證** — `npm run build`，Expected: success。
|
||||||
- [ ] **Step 4: 目測** — dev 逐頁睇 cases／content 四 kind／settings／ai，確認色系一致、表單可用、圖片上傳正常。
|
- [x] **Step 4: 目測** — dev 逐頁睇 cases／content 四 kind／settings／ai，確認色系一致、表單可用、圖片上傳正常。
|
||||||
- [ ] **Step 5: Commit** — `git add src/pages/admin && git commit -m "style(admin): align pages with dashboard tokens"`
|
- [x] **Step 5: Commit** — `git add src/pages/admin && git commit -m "style(admin): align pages with dashboard tokens"`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -173,10 +173,10 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
|
|
||||||
**Files:** Modify `src/pages/admin/login.astro`
|
**Files:** Modify `src/pages/admin/login.astro`
|
||||||
|
|
||||||
- [ ] **Step 1:** 將 `<style is:global>` 改成同 tokens 一致（米白底、白卡髮絲邊、琥珀 focus、墨黑掣、serif 標題、`.err` 用 danger 色）。
|
- [x] **Step 1:** 將 `<style is:global>` 改成同 tokens 一致（米白底、白卡髮絲邊、琥珀 focus、墨黑掣、serif 標題、`.err` 用 danger 色）。
|
||||||
- [ ] **Step 2: 驗證** — `npm run build`，Expected: success。
|
- [x] **Step 2: 驗證** — `npm run build`，Expected: success。
|
||||||
- [ ] **Step 3: 目測** — dev 登出睇 `/admin/login`，登入流程正常。
|
- [x] **Step 3: 目測** — dev 登出睇 `/admin/login`，登入流程正常。
|
||||||
- [ ] **Step 4: Commit** — `git add src/pages/admin/login.astro && git commit -m "style(admin): restyle login page"`
|
- [x] **Step 4: Commit** — `git add src/pages/admin/login.astro && git commit -m "style(admin): restyle login page"`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -184,6 +184,6 @@ a{color:var(--brand-strong);text-decoration:none} a:hover{text-decoration:underl
|
|||||||
|
|
||||||
**Files:** Modify `src/AGENTS.md`
|
**Files:** Modify `src/AGENTS.md`
|
||||||
|
|
||||||
- [ ] **Step 1:** 更新 `src/AGENTS.md` Admin 段落（路由、dashboard、sidebar、色系、`getDashboardData`）。
|
- [x] **Step 1:** 更新 `src/AGENTS.md` Admin 段落（路由、dashboard、sidebar、色系、`getDashboardData`）。
|
||||||
- [ ] **Step 2: 驗證** — `npm run build`，Expected: success。
|
- [x] **Step 2: 驗證** — `npm run build`，Expected: success。
|
||||||
- [ ] **Step 3: Commit** — `git add src/AGENTS.md && git commit -m "docs: document admin dashboard redesign"`
|
- [x] **Step 3: Commit** — `git add src/AGENTS.md && git commit -m "docs: document admin dashboard redesign"`
|
||||||
|
|||||||
Reference in New Issue
Block a user