nl-blogs/.trae/documents/Full Stack Upgrade_ RBAC, Sandbox, and Artistic UI.md

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.