83 lines
4.4 KiB
Markdown
83 lines
4.4 KiB
Markdown
|
# 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`.
|