# Implementation Plan

## Phase 1: UI Consistency & Visual Polish
**Goal:** Align the Admin UI with the `UI2.html` artistic direction (Dark Glassmorphism, specific typography).

1.  **Font & Theme Configuration**
    -   Update `client/index.html` to include `Playfair Display` (Serif) and `JetBrains Mono` (Monospace) fonts.
    -   Update `client/tailwind.config.js` (or `style.css`) to define these font families.
    -   Define global CSS variables for colors if not already present (`--art-bg`, `--art-accent`, etc.) to match `UI2.html`.

2.  **Admin UI Refinement**
    -   Update `client/src/components/admin/AdminLayout.vue`:
        -   Apply `Playfair Display` to the "管理后台" sidebar title.
        -   Refine sidebar transparency and blur effects to match `UI2.html`.
    -   Update `client/src/pages/admin/Dashboard.vue`:
        -   Apply serif fonts to section headers.
        -   Ensure cards use the correct glassmorphism background (`rgba(255, 255, 255, 0.05)`).
    -   **Responsive Check:** Verify sidebar behavior on mobile (already present in code, but needs visual verification of transition/overlay).

3.  **Component Standardization**
    -   Ensure `CustomSelect.vue` is used in place of native `<select>` elements in all admin forms (`UserForm.vue`, `PostForm.vue`, etc.).

## Phase 2: Database & RBAC Implementation
**Goal:** Implement a robust Role-Based Access Control system.

1.  **Database Schema Update**
    -   Modify `server/nl_blog.sql` to include:
        -   `roles` table (id, name, description, created_at...).
        -   `permissions` table (id, name, resource, action...).
        -   `role_permissions` junction table.
        -   Update `users` table to reference `roles.id` (foreign key) instead of a string enum, or keep the string but validate against the table. *Decision: Use foreign key for strict integrity.*
    -   Add default data: Admin, Editor, Viewer roles and basic permissions.

2.  **Backend Models & Repositories**
    -   Create/Update `server/models/role.go` and `permission.go`.
    -   Create `server/repositories/permission_repository.go`.
    -   Update `server/repositories/user_repository.go` to handle role relationships.

3.  **Middleware & Logic**
    -   Update `server/middleware/auth.go`:
        -   Load user's permissions upon authentication (or cache them).
        -   Implement `PermissionMiddleware(resource, action)` to replace the simple `RoleMiddleware`.

4.  **API Endpoints**
    -   Add CRUD endpoints for Roles and Permissions in `server/main.go`.
    -   Add endpoint to assign permissions to roles.

## Phase 3: Backend Code Execution (Sandbox)
**Goal:** Securely execute code snippets.

1.  **Runner Logic (`server/runner`)**
    -   Create a package `runner` to handle code execution.
    -   **Strategy:**
        -   **Backend Languages (Go, PHP, Python):** Write code to a temporary file, execute via `os/exec` with a strict `context.WithTimeout` (e.g., 5s limit). Capture `stdout` and `stderr`.
        -   **Frontend Languages (Vue, React, HTML):** Do not "execute" on backend. Return the code wrapped in a secure `<iframe>` template for the frontend to render.
    -   **Security:**
        -   Input validation: Block common dangerous keywords (e.g., `os.Remove`, `rm -rf`, `exec`) using regex for a basic layer of protection (Note: not perfect, but adds friction).
        -   Resource limits: Set execution timeouts.

2.  **API Implementation**
    -   Add `POST /api/run` endpoint.
    -   Accepts `{ language: string, code: string }`.
    -   Returns `{ output: string, error: string, duration: int }`.

3.  **Logging**
    -   Log every execution attempt (User, IP, Code hash, Result) to a new `execution_logs` table or existing logs.

## Phase 4: Backend UI Optimization
**Goal:** Unify the visual style of forms and tables.

1.  **Global Styles**
    -   Create a standard "Glass Table" CSS class/component for `Users.vue`, `Posts.vue`, etc.
    -   Create a standard "Glass Form" style for inputs and textareas (remove default borders, add bottom border + glow effect).

2.  **Page Refactoring**
    -   Apply these styles to:
        -   `client/src/pages/admin/Users.vue` & `UserForm.vue`
        -   `client/src/pages/admin/Posts.vue` & `PostForm.vue`
        -   `client/src/pages/admin/Roles.vue` (New page)

3.  **Validation Feedback**
    -   Ensure form errors use the "Artistic Error Red" (`#ef4444`) and shake animation from `UI2.html`.