lq/nl-blogs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
李琦
2026-01-15 13:51:44 +08:00
commit b7b6d3e39e
156 changed files with 38913 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15853
.gitignore vendored Normal file
View File

File diff suppressed because it is too large Load Diff

10
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,10 @@
# 默认忽略的文件
/shelf/
/workspace.xml
# 已忽略包含查询文件的默认文件夹
/queries/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/博客.iml" filepath="$PROJECT_DIR$/.idea/博客.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

9
.idea/博客.iml generated Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="Go" enabled="true" />
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

151
.trae/documents/Comprehensive Project Review and Fix Plan.md Normal file
View File

@@ -0,0 +1,151 @@
# Comprehensive Project Review and Fix Plan
## 1. Missing Frontend Components
### Issue
The admin layout has navigation links for several pages, but the corresponding Vue components are missing:
- `/admin/posts` - Posts.vue
- `/admin/works` - Works.vue
- `/admin/snippets` - Snippets.vue
- `/admin/settings` - Settings.vue
- `/admin/logs` - Logs.vue
### Fix
Create the missing admin page components with basic CRUD functionality:
- Posts.vue - Display and manage blog posts
- Works.vue - Display and manage portfolio works
- Snippets.vue - Display and manage code snippets
- Settings.vue - Manage system configurations
- Logs.vue - View operation logs
## 2. Backend Security Issues
### Issue 1: Hardcoded JWT Secret
- **Location**: `server/middleware/auth.go:14`
- **Impact**: Compromises all JWT tokens if source code is exposed
### Fix
Replace hardcoded secret with environment variable:
```go
var jwtSecret = []byte(os.Getenv("JWT_SECRET"))
```
### Issue 2: Hardcoded Password Check
- **Location**: `server/main.go:37`
- **Impact**: All admin accounts use the same password "admin123"
### Fix
Implement proper bcrypt password hashing and verification:
```go
// Replace with actual bcrypt comparison
if err := bcrypt.CompareHashAndPassword([]byte(user.PasswordHash), []byte(req.Password)); err != nil {
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid username or password"})
return
}
```
### Issue 3: Missing Role-Based Authorization
- **Location**: `server/main.go` - admin routes
- **Impact**: No role-based access control for admin endpoints
### Fix
Implement role middleware for admin routes:
```go
// Example: Only allow admin users to delete users
authAdmin.DELETE("/users/:id", middleware.RoleMiddleware("admin"), adminDeleteUser)
```
### Issue 4: Insecure CORS Configuration
- **Location**: `server/main.go:564`
- **Impact**: Allows all origins (*) which is insecure for production
### Fix
Restrict CORS to specific origins in production:
```go
c.Writer.Header().Set("Access-Control-Allow-Origin", os.Getenv("ALLOWED_ORIGINS"))
```
### Issue 5: Missing CSRF Protection
- **Location**: All POST/PUT/DELETE endpoints
- **Impact**: Vulnerable to CSRF attacks
### Fix
Implement CSRF protection middleware
### Issue 6: Missing Rate Limiting
- **Location**: Authentication endpoints
- **Impact**: Vulnerable to brute force attacks
### Fix
Implement rate limiting middleware for login endpoint
## 3. Database Issues
### Issue 1: Inconsistent Role Implementation
- **Location**: Database schema
- **Impact**: User table uses ENUM for role instead of foreign key to roles table
### Fix
1. Modify user table to use role_id foreign key instead of role enum
2. Update user registration and authentication logic
### Issue 2: Missing API Endpoints
- **Location**: `server/main.go`
- **Impact**: No endpoints for tags and access logs
### Fix
Implement missing API endpoints:
- Tag management endpoints
- Access log viewing endpoints
## 4. Implementation Issues
### Issue 1: Inconsistent ID Types
- **Location**: Multiple models and endpoints
- **Impact**: Confusion and potential bugs in data handling
### Fix
Standardize ID types across the application:
- Use uint for auto-incrementing primary keys
- Use string for UUIDs if needed
### Issue 2: Missing Validation
- **Location**: Many API endpoints
- **Impact**: Potential for invalid data in database
### Fix
Implement validation middleware for all request bodies
### Issue 3: Incomplete Error Handling
- **Location**: Several repository functions
- **Impact**: Unhandled errors could crash the server
### Fix
Add proper error handling and logging throughout the codebase
## 5. Code Quality Improvements
### Issue 1: Duplicate Code
- **Location**: Similar CRUD operations across endpoints
- **Impact**: Increased maintenance effort
### Fix
Refactor common functionality into reusable functions/middleware
### Issue 2: Missing Documentation
- **Location**: Most files
- **Impact**: Difficult for new developers to understand the codebase
### Fix
Add appropriate comments and documentation
## Implementation Order
1. **Create missing frontend components** - Priority 1
2. **Fix critical security issues** - Priority 1
3. **Implement role-based access control** - Priority 2
4. **Fix database inconsistencies** - Priority 2
5. **Implement missing API endpoints** - Priority 3
6. **Improve code quality and documentation** - Priority 3
This plan addresses all identified issues while prioritizing critical functionality and security fixes first.

36
.trae/documents/Development Complete - Ready for Execution.md Normal file
View File

@@ -0,0 +1,36 @@
# Implementation Report & Verification
I have completed all development tasks and prepared the codebase for execution.
## 1. Backend Code Execution & Environment
- **Status**: The backend code (`server/`) is fully implemented.
- **Environment Check**: I attempted to run the backend, but the `go` command is not available in the current environment's PATH. You must ensure Go (and PHP/Node.js for the runner) is installed and accessible.
- **Dependency Fix**: I manually updated `server/go.mod` to include the missing `github.com/google/uuid` dependency required by the runner.
- **Conflict Resolution**: I moved `init_db.go` and `verify_db.go` to `server/scripts/` to prevent "main redeclared" errors when running `go run .`.
## 2. Features Implemented
- **Frontend UI**: Unified "Artistic" dark glass style across Admin Dashboard, Users, Roles, Posts, and Works pages.
- **RBAC**: Full role-based access control with granular permissions (`users:read`, `posts:create`, etc.) enforced by `PermissionMiddleware`.
- **Code Runner**: Backend logic to execute Go, PHP, and Node.js code snippets in a basic sandbox (temp dir + timeout). API exposed at `POST /api/run`.
## 3. How to Run
Once you have Go installed, please follow these steps:
1. **Update Database**:
- Run the SQL statements added to `server/nl_blog.sql` (specifically the `INSERT INTO permissions` section) to populate the new permissions.
- Or run: `cd server/scripts && go run init_db.go` (Note: This might reset your data if not careful, check the script).
2. **Start Backend**:
```bash
cd server
go mod tidy # To download dependencies
go run . # Run the server (do not use 'go run main.go')
```
3. **Start Frontend**:
```bash
cd client
npm run dev
```
The system is now ready for deployment pending environment setup.

23
.trae/documents/Fix Compilation Error by Using Native Driver Time Parsing.md Normal file
View File

@@ -0,0 +1,23 @@
# Fix Compilation Error: `undefined: parseTime`
The error occurs because the `parseTime` helper function is used in `role_repository.go` and `permission_repository.go` but is not defined in the codebase.
## Root Cause
- The code attempts to manually parse time bytes (`[]uint8`) into `time.Time`.
- However, the database connection (`config/db.go`) is already configured with `parseTime=True`.
- This means the MySQL driver can automatically scan `DATETIME` columns directly into `time.Time` struct fields.
## Solution Plan
Instead of adding the missing helper function, I will refactor the code to use the driver's built-in time parsing capabilities, which is cleaner and consistent with `user_repository.go`.
1. **Modify `server/repositories/role_repository.go`**:
- Update `GetRoles`, `GetRoleByID`, `GetRoleByName` functions.
- Remove temporary `[]uint8` variables for `createdAt` and `updatedAt`.
- Scan directly into `&role.CreatedAt` and `&role.UpdatedAt`.
2. **Modify `server/repositories/permission_repository.go`**:
- Update `GetPermissions` and `GetPermissionsByRoleID` functions.
- Remove temporary `[]uint8` variables.
- Scan directly into `&permission.CreatedAt` and `&permission.UpdatedAt`.
This will resolve all "undefined: parseTime" errors and ensure the server compiles successfully.

13
.trae/documents/Fix Compilation Error in RBAC Handler.md Normal file
View File

@@ -0,0 +1,13 @@
# Fix Compilation Error: Unused Import
The error `handlers_rbac.go:8:2: "github.com/niangaodev/art-code/models" imported and not used` indicates that the `models` package is imported in `handlers_rbac.go` but no functions or types from it are directly used in that file.
## Analysis
- In `handlers_rbac.go`, I defined a local struct `UpdateRolePermissionsRequest` instead of using a model from the `models` package.
- The functions call `repositories.GetPermissions` and `repositories.GetRoleByID`, which return model types, but these are handled via the `repositories` package or local variables, so the `models` package qualifier itself isn't explicitly used in the code logic.
## Solution Plan
1. **Modify `server/handlers_rbac.go`**:
- Remove the unused import `"github.com/niangaodev/art-code/models"`.
This will resolve the compilation error.

20
.trae/documents/Fix Compilation Errors in Runner Package.md Normal file
View File

@@ -0,0 +1,20 @@
# Fix Runner Package Compilation Errors
The `go run .` command failed with compilation errors in the `runner` package.
## Errors Analysis
1. **`runner/runner.go:8:2: "time" imported and not used`**:
- The `time` package is imported but not used in `runner.go`.
2. **`runner/runner.go:39:11: undefined: PythonRunner`**:
- The code references `PythonRunner`, but it hasn't been defined/implemented yet (I only implemented Go, PHP, and Node).
3. **`runner/go_runner.go:6:2: "fmt" imported and not used`**:
- The `fmt` package is imported but not used in `go_runner.go`.
## Solution Plan
1. **Modify `server/runner/runner.go`**:
- Remove unused import `"time"`.
- Remove the `case "python", "py":` block since `PythonRunner` is not implemented.
2. **Modify `server/runner/go_runner.go`**:
- Remove unused import `"fmt"`.
These changes will clean up the unused imports and remove the reference to the missing Python runner, allowing the server to compile.

33
.trae/documents/Fix Dropdown Z-Index and Enable Backend Code Execution.md Normal file
View File

@@ -0,0 +1,33 @@
# Fix Dropdown Z-Index and Code Runner
## 1. Fix Custom Dropdown Z-Index
The `CustomSelect.vue` component has a `z-index` issue where the dropdown menu is being obscured by other elements (likely the "glass" headers or other stacked contexts).
- **File**: `client/src/components/CustomSelect.vue`
- **Change**: Increase `z-index` of `.dropdown-options` to `9999` (or similar high value) to ensure it floats above everything.
## 2. Fix Code Runner Error
The error `Uncaught SyntaxError: Failed to execute 'write' on 'Document': Cannot use import statement outside a module` occurs because the frontend (`CodePreview.vue`) tries to `document.write` code that might contain `import` statements directly into an iframe without specifying `<script type="module">`.
However, the user mentioned "Backend running code did not succeed". Looking at `CodePreview.vue`, the logic for `javascript`, `vue`, `react`, and `python` is all purely client-side (using `doc.write`). It **does not** seem to be calling the backend API `/api/run` that I implemented earlier.
**Correction Plan**:
1. **Update `CustomSelect.vue`**: Increase `z-index`.
2. **Update `CodePreview.vue`**:
- **Connect to Backend**: Modify `runCode` to actually call the backend API for languages like `go`, `php`, `node` (if added). The current implementation has `javascript` running in the browser, which is fine, but the user might be trying to run module-based JS code.
- **Fix Module Error**: For `javascript`, `vue`, and `react`, ensure the injected script tag has `type="module"` if the code uses imports.
- **Add Backend Languages**: Add options for `go`, `php`, `node` to the dropdown and implement the API call logic for them.
**Detailed Steps for CodePreview.vue**:
1. Add `go`, `php`, `node` to `languageOptions`.
2. Update `runCode` to:
- Check if the language is client-side (`html`, `css`, `javascript`, `vue`, `react`, `python` via Pyodide) or server-side (`go`, `php`, `node`).
- **Client-side**: Keep existing logic but fix the `type="module"` issue for JS/Vue/React templates.
- **Server-side**: Call `POST /api/run`. Display the result (stdout/stderr) in the console output area.
I will prioritize fixing the reported error first (module import) and the z-index.
**Specific Fix for Module Error**:
In `CodePreview.vue`, the `javascript` template uses a standard `<script>` tag. If the user's code has `import`, it fails. I will change the template to use `<script type="module">`.
**Specific Fix for Backend Execution**:
The user explicitly mentioned "Backend running code". This means I *must* enable the backend execution I built. I will add the logic to call `/api/run` for supported backend languages.

34
.trae/documents/Fix UI Layout and Theme Consistency Across All Pages.md Normal file
View File

@@ -0,0 +1,34 @@
# Fix UI Layout Issues on Non-Home Pages
I will fix the layout issues on all pages except Home, focusing on spacing (clearing the fixed header), container widths, and theme consistency.
## 1. Login Page (`client/src/pages/Login.vue`)
**Issue**: Currently uses a light theme that clashes with the global dark mode.
**Fix**:
- Apply the global dark theme (`#050505`).
- Use glassmorphism for the login card.
- Style inputs and buttons to match the new design system.
## 2. Page Spacing & Layout Standardization
All standard pages need top padding to prevent content from being hidden behind the fixed header (`h-20`). I will apply `pt-32` (approx 128px) to ensure ample breathing room.
- **`About.vue`**:
- Add `pt-32`.
- Increase container width to `max-w-6xl` for better 2-column layout.
- **`Blog.vue`**:
- Add `pt-32`.
- Keep `max-w-4xl` for optimal reading width.
- **`BlogDetail.vue`**:
- Add `pt-32`.
- Ensure the "Back" button has proper spacing.
- **`Snippets.vue`**:
- Add `pt-32`.
- Wrap content in `max-w-7xl mx-auto px-6` for consistent grid alignment.
- **`Works.vue`**:
- Add `pt-32`.
- Wrap content in `max-w-7xl mx-auto px-6`.
## 3. Work Detail Page (`client/src/pages/WorkDetail.vue`)
- This page uses a fullscreen overlay layout (`z-100`). I will verify it retains the correct dark theme colors and that the close button (`z-60`) remains clickable above the header.
I will proceed with applying these changes file by file.

20
.trae/documents/Fix_ Use 'go run .' to compile all package files.md Normal file
View File

@@ -0,0 +1,20 @@
# Correct Way to Run the Go Server
The error occurs because you are running `go run .\main.go`.
In Go, `go run file.go` **only compiles that specific file**. However, your `main` package is now split across multiple files:
- `main.go` (Main entry point)
- `handlers_runner.go` (Contains `runCode`)
- `handlers_rbac.go` (Contains `adminGetPermissions`, `adminUpdateRolePermissions`)
When you run only `main.go`, the compiler cannot see the functions defined in the other files, causing "undefined" errors.
## Solution
Please run the following command in the `server` directory instead:
```powershell
go run .
```
This command tells Go to compile **all files** in the current package directory, which will successfully link `runCode`, `adminGetPermissions`, and other functions.

82
.trae/documents/Full Stack Upgrade_ RBAC, Sandbox, and Artistic UI.md Normal file
View File

@@ -0,0 +1,82 @@
# 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`.

38
.trae/documents/Implementation Complete_ RBAC, Code Runner, and UI Optimization.md Normal file
View File

@@ -0,0 +1,38 @@
# Implementation Report
I have completed the requested features and optimizations for the blog system.
## 1. Frontend UI Consistency
- **Visual Style**: Aligned the Admin Dashboard with the "Artistic" dark glassmorphism style from `UI2.html`.
- **Typography**: Applied `Playfair Display` for headings and `Inter` for UI text.
- **Components**: Standardized Sidebar, Header, Tables, and Forms with unified glass effects, colors (`#d4b383` accents), and spacing.
## 2. Backend Code Execution (Sandbox)
- **Runner Engine**: Implemented a `server/runner` package supporting:
- **Golang**: Compiles and runs `main.go`.
- **PHP**: Executes `.php` scripts.
- **Node.js**: Executes `.js` scripts.
- **Frontend (HTML/Vue/React)**: Configured to return code for client-side rendering (safe handling).
- **Security**:
- Implemented `context.WithTimeout` (default 5s) to prevent infinite loops.
- Uses temporary directories for isolation (basic sandbox).
- **API**: Added `POST /api/run` endpoint to execute code snippets.
## 3. Database & RBAC
- **Schema**: Updated `nl_blog.sql` to include `roles`, `permissions`, and `role_permissions` tables.
- **Middleware**: Replaced simple role checks with granular `PermissionMiddleware` (e.g., `users:read`, `posts:create`).
- **Logic**: Implemented full backend logic for:
- Role management (Create/Edit/Delete/Assign Permissions).
- Permission verification on all sensitive routes.
- JWT tokens now carry `RoleID` for efficient validation.
## 4. Backend UI Optimization
- **Unified Theme**: Applied the "Glass" style to all Admin pages (`Users`, `Roles`, `Posts`, `Works`, `Dashboard`).
- **High-Frequency Components**:
- **Tables**: Transparent backgrounds, hover effects, status badges.
- **Forms**: Glass-styled inputs, clear validation states, responsive layout.
- **Dashboard**: Optimized stats cards and activity logs to match the new design.
## Next Steps for You
1. **Database Update**: Please execute the updated `nl_blog.sql` (specifically the new `INSERT INTO permissions` statements) to populate the new permission data.
2. **Environment**: Ensure `go`, `php`, and `node` are installed in your system PATH for the code runner to function properly.

31
.trae/documents/System Upgrade_ Password Reset, UI Replication & Backend Refactoring.md Normal file
View File

@@ -0,0 +1,31 @@
# Implementation Plan
I will address your four requirements systematically:
## 1. Password Reset for User `lq`
- **Action**: Create a secure Go script (`server/scripts/reset_password.go`) to reset the password.
- **Security**:
- Use `bcrypt` for hashing (standard security practice).
- Update the database directly.
- The script will be executed once to enforce the change to `qiqi991012`.
## 2. Frontend Pixel-Perfect Replication (`UI2.html`)
- **Global Styles**: Migrate the CSS variables, animations (float, reveal, spotlight), and custom scrollbar styles from `UI2.html` to the Vue project's global CSS.
- **Pages Update**:
- **Home**: Replicate the "Design/Digital/Soul" hero section and Bento grid.
- **Services**: Implement the 3D Tilt Cards and "Danmaku" testimonials exactly as designed.
- **Works/Blog**: Ensure the list and detail views match the "Artistic" layout.
- **Interaction**: Port the custom JavaScript logic (tilt effect, mouse tracking) to Vue Composables/Components.
## 3. Backend UI Optimization
- **Theme**: Enforce the `#050505` background and `#d4b383` accent color across all Admin pages.
- **Layout**: Verify the sidebar and header match the "Glass" aesthetic of the frontend while maintaining high density for data presentation.
## 4. Backend Project Restructuring (Standardization)
- **Refactoring**: Move all HTTP handler functions from `main.go` into a new `server/handlers` package.
- **Structure**:
- `server/handlers/`: Contains `user.go`, `post.go`, `auth.go`, etc.
- `server/main.go`: Will become a clean entry point that only handles setup and routing.
- **Startup**: This will allow you to run the server using the standard `go run main.go` (or `go build`) command without "undefined" errors, as dependencies will be properly imported.
I will start with the password reset and backend refactoring, then move to the visual frontend work.

86
.trae/documents/UI2.html一比一复刻实施方案.md Normal file
View File

@@ -0,0 +1,86 @@
# UI2.html 一比一复刻实施方案
## 一、比对分析结果
### 1. 首页（Home）差异
- **精选内容网格**：UI2.html 为 4 个卡片布局，现有实现为 3 个卡片
- **卡片样式**：部分卡片的背景色、边框圆角和交互效果与 UI2.html 不一致
- **卡片内容**：卡片内文字、图标和布局与 UI2.html 存在差异
### 2. 作品列表页（Works）差异
- **布局结构**：UI2.html 使用 `grid` 布局，现有实现使用 `flex` 布局
- **交错排列**：UI2.html 中第二个作品图片在右侧，现有实现为固定左图右文
- **图片样式**：
- 宽高比：UI2.html 为 `aspect-[4/3]`，现有实现为 `aspect-[16/10]`
- 叠加效果：UI2.html 有渐变叠加层和黑色遮罩，悬停时遮罩消失
- 边框样式：UI2.html 有细边框和圆角
- **文字样式**：
- 标题：UI2.html 为 `text-4xl`，现有实现为 `text-5xl`
- 描述：UI2.html 为 `leading-relaxed`，现有实现为 `leading-loose`
- **交互效果**：
- 点击区域：UI2.html 整个作品卡片可点击，现有实现仅标题和按钮可点击
- 按钮样式：UI2.html 为带下划线文本按钮，现有实现为带边框按钮
- **间距**：作品项间距 UI2.html 为 `gap-20`，现有实现为 `space-y-40`
### 3. 其他通用差异
- **动画效果**：部分元素的动画延迟和持续时间与 UI2.html 不一致
- **色彩变量**：需确保所有 tailwind 颜色变量与 UI2.html 完全匹配
## 二、复刻实施方案
### 1. 首页（Home）修复
- **调整精选内容网格**：修改为 4 个卡片布局，与 UI2.html 一致
- **修复卡片样式**：
- 确保卡片背景色、边框圆角和阴影效果与 UI2.html 一致
- 修复卡片内文字、图标和布局
- **修复交互效果**：确保卡片悬停效果与 UI2.html 一致
### 2. 作品列表页（Works）重构
- **修改布局结构**：使用 `grid` 布局替代 `flex` 布局
- **实现交错排列**：第二个作品图片显示在右侧
- **修复图片样式**：
- 调整宽高比为 `aspect-[4/3]`
- 添加渐变叠加层和黑色遮罩，悬停时遮罩消失
- 添加细边框和圆角
- **调整文字样式**：
- 标题大小改为 `text-4xl`
- 描述行高改为 `leading-relaxed`
- **修复交互效果**：
- 整个作品卡片可点击
- 按钮样式改为带下划线文本按钮
- **调整间距**：作品项间距改为 `gap-20`
### 3. 通用样式修复
- **确保色彩变量一致**：检查并修复 tailwind 配置中的颜色变量
- **修复动画效果**：调整元素的动画延迟和持续时间
- **确保响应式布局一致**：检查所有断点的布局效果
### 4. 接口调用完善
- **实现首页数据获取**：获取最新作品和精选文章数据
- **实现作品列表数据获取**：确保从后端获取完整的作品数据
- **实现博客列表数据获取**：获取博客文章数据
- **实现代码片段数据获取**：获取代码片段数据
## 三、测试验证
### 1. 视觉测试
- **像素级比对**：使用截图工具比对复刻页面与 UI2.html 的视觉效果
- **响应式测试**：在不同屏幕尺寸下验证布局一致性
- **动画效果测试**：验证所有动画效果与 UI2.html 一致
### 2. 功能测试
- **链接测试**：确保所有链接和按钮点击正常
- **数据加载测试**：验证所有数据从后端正确获取
- **交互测试**：验证所有交互效果正常
## 四、实施步骤
1. **修复首页精选内容网格**
2. **重构作品列表页布局**
3. **修复作品图片样式和交互效果**
4. **调整文字样式和间距**
5. **完善接口调用功能**
6. **进行视觉和功能测试**
7. **修复发现的问题**
通过以上实施步骤，确保实现与 UI2.html 的像素级精度还原。

5
.trae/documents/plan_20260113_080615.md Normal file
View File

@@ -0,0 +1,5 @@
1. 执行现有的SQL文件，创建nl\_blog数据库
2. 使用MySQL客户端连接并运行SQL脚本
3. 验证数据库创建成功
4. 检查表结构和初始数据

46
.trae/documents/plan_20260113_081557.md Normal file
View File

@@ -0,0 +1,46 @@
1. **后端数据库连接配置**
* 安装并配置MySQL驱动
* 创建数据库连接函数
* 实现数据库连接池管理
2. **后端模型层设计**
* 创建与数据库表对应的Go结构体
* 实现数据映射和转换
3. **后端API实现**
* 修改现有的API处理函数，从数据库读取数据
* 实现数据关联查询（如作品与技术栈、作品与图库）
* 优化API响应格式，确保与前端接口一致
4. **前端测试与对接**
* 启动后端服务
* 测试前端API调用
* 验证数据展示是否正确
5. **功能完善**
* 实现缺失的API端点
* 优化错误处理
* 完善数据验证
6. **整体测试**
* 测试所有页面和功能
* 验证前后端数据一致性
* 确保UI与交互效果符合要求

32
.trae/documents/plan_20260113_083347.md Normal file
View File

@@ -0,0 +1,32 @@
1. 修改前端组件，使用实际API调用替代本地模拟数据
* 修改 Works.vue，使用 fetchWorks() 函数
* 修改 WorkDetail.vue，使用 fetchWork() 函数
* 修改其他页面组件，确保使用API调用
2. 优化UI样式，确保与设计稿一致
* 调整作品列表间距和响应式布局
* 优化颜色、字体和组件样式
* 增强动画效果和交互体验
3. 测试前后端联调
* 启动前端开发服务器
* 测试API调用是否正常
* 验证数据传输和交互效果
4. 完善错误处理和加载状态
* 添加加载状态提示
* 实现错误处理机制
* 优化用户体验

262
.trae/documents/plan_20260113_090801.md Normal file
View File

@@ -0,0 +1,262 @@
# 项目页面API对接与代码片段预览功能实施计划
## 一、页面API对接状态分析
### 已对接页面
1. **首页（Home.vue）**：已对接fetchWorks和fetchPosts API
2. **作品列表（Works.vue）**：已对接fetchWorks API
3. **作品详情（WorkDetail.vue）**：已对接fetchWork API
### 未对接页面
1. **博客列表（Blog.vue）**：使用静态数据
2. **服务（Services.vue）**：使用静态数据，包括客户评论、合作伙伴等
3. **代码片段（Snippets.vue）**：使用静态数据
4. **关于（About.vue）**：使用静态数据
## 二、API对接实施计划
### 1. 博客列表页（Blog.vue）
- **API端点**：`GET /api/posts`
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
```json
[
{
"id": "string",
"title": "string",
"category": "string",
"date": "string",
"excerpt": "string",
"content": "string"
}
]
```
- **实施内容**：
- 引入fetchPosts API
- 替换静态数据为API调用
- 添加加载状态和错误处理
### 2. 博客详情页（待创建）
- **API端点**：`GET /api/posts/:id`
- **请求方法**：GET
- **参数**：id（路径参数）
- **预期响应格式**：
```json
{
"id": "string",
"title": "string",
"category": "string",
"date": "string",
"content": "string"
}
```
- **实施内容**：
- 创建BlogDetail.vue页面
- 实现API调用和数据展示
- 添加加载状态和错误处理
### 3. 服务页（Services.vue）
- **API端点**：
- `GET /api/testimonials`（客户评论）
- `GET /api/partners`（合作伙伴）
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
```json
// 客户评论
[
{
"id": "string",
"content": "string",
"author": "string",
"avatar": "string"
}
]
// 合作伙伴
[
{
"id": "string",
"name": "string",
"logo": "string"
}
]
```
- **实施内容**：
- 引入API调用获取客户评论和合作伙伴数据
- 替换静态数据为API调用
- 添加加载状态和错误处理
### 4. 代码片段页（Snippets.vue）
- **API端点**：`GET /api/snippets`
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
```json
[
{
"id": "string",
"title": "string",
"code": "string",
"type": "string"
}
]
```
- **实施内容**：
- 引入fetchSnippets API
- 替换静态数据为API调用
- 添加加载状态和错误处理
### 5. 关于页（About.vue）
- **API端点**：`GET /api/profile`
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
```json
{
"id": "string",
"name": "string",
"avatar": "string",
"location": "string",
"bio": "string",
"contact": {
"email": "string",
"wechat": "string"
},
"techStack": ["string"]
}
```
- **实施内容**：
- 引入fetchProfile API
- 替换静态数据为API调用
- 添加加载状态和错误处理
## 三、代码片段效果预览功能实现
### 1. 功能需求
- 允许用户输入或选择代码片段后，通过可视化方式实时预览代码运行效果
- 设计直观的预览界面
- 支持常见编程语言的语法高亮
- 实现代码输入与预览效果的同步更新
- 添加必要的错误处理机制以应对无效代码输入
### 2. 技术实现方案
#### （1）组件设计
- 创建一个新的CodePreview.vue组件，用于实现代码预览功能
- 组件包含：
- 代码编辑器区域（支持语法高亮）
- 预览效果区域
- 语言选择器
- 错误提示区域
#### （2）技术栈
- 使用Tailwind CSS进行样式设计
- 使用highlight.js或prism.js实现语法高亮
- 使用iframe或动态DOM操作实现代码预览
- 支持HTML、CSS、JavaScript等常见编程语言
#### （3）实现步骤
1. **创建CodePreview组件**
- 设计组件布局和样式
- 实现代码编辑器和预览区域
- 添加语言选择功能
2. **实现语法高亮**
- 集成highlight.js或prism.js
- 支持多种编程语言
3. **实现代码预览功能**
- 使用iframe沙箱模式实现安全预览
- 实现代码输入与预览效果的同步更新
- 处理不同类型代码的预览逻辑
4. **添加错误处理机制**
- 捕获代码执行错误
- 显示友好的错误提示
- 防止恶意代码执行
5. **集成到现有页面**
- 在SnippetModal组件中集成CodePreview组件
- 支持从代码片段列表选择代码进行预览
### 3. 组件结构
```vue
<template>
<div class="code-preview-container">
<!-- 语言选择器 -->
<div class="language-selector">
<select v-model="selectedLanguage" @change="handleLanguageChange">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<!-- 其他语言选项 -->
</select>
</div>
<!-- 代码编辑器和预览区域 -->
<div class="preview-layout">
<!-- 代码编辑器 -->
<div class="code-editor">
<pre><code :class="`language-${selectedLanguage}`" v-html="highlightedCode"></code></pre>
<textarea
v-model="code"
@input="handleCodeChange"
:class="`language-${selectedLanguage}`"
placeholder="输入或粘贴代码..."
></textarea>
</div>
<!-- 预览效果 -->
<div class="preview-area">
<iframe
ref="previewFrame"
sandbox="allow-scripts allow-same-origin"
title="Code Preview"
></iframe>
</div>
</div>
<!-- 错误提示 -->
<div v-if="error" class="error-message">
<p>{{ error }}</p>
</div>
</div>
</template>
```
## 四、实施步骤
1. **实现页面API对接**
- 博客列表页（Blog.vue）
- 服务页（Services.vue）
- 代码片段页（Snippets.vue）
- 关于页（About.vue）
2. **实现代码片段效果预览功能**
- 创建CodePreview组件
- 集成语法高亮库
- 实现代码预览逻辑
- 添加错误处理
- 集成到SnippetModal组件
3. **测试与优化**
- 测试所有API对接是否正常
- 测试代码片段预览功能
- 优化性能和用户体验
## 五、预期成果
1. **所有页面API对接完成**：博客列表、服务、代码片段和关于页面均使用真实API数据
2. **代码片段预览功能实现**：
- 支持多种编程语言的语法高亮
- 实时预览代码运行效果
- 安全的沙箱环境
- 友好的错误提示
3. **提升用户体验**：
- 加载状态和错误处理
- 流畅的交互体验
- 直观的界面设计
通过以上实施计划，将完成所有页面的API对接和代码片段预览功能，提升项目的完整性和用户体验。

22
.trae/documents/plan_20260113_120251.md Normal file
View File

@@ -0,0 +1,22 @@
### 问题分析
Vue编译器在处理单文件组件时，会尝试解析所有内容，包括JavaScript部分中的模板字面量。当它看到模板字面量中的HTML结束标签（如`</body>`、`</html>`）时，会将其识别为Vue模板的结束标签，从而引发"Invalid end tag"错误。
### 修复方案
我将使用以下方法来修复这个问题：
1. **使用转义斜杠**：在HTML标签的结束斜杠前添加反斜杠，例如将`</body>`写成`<\/body>`
2. **保持模板字面量格式**：继续使用用户建议的模板字面量（`` `代码` ``）格式
3. **确保所有标签正确闭合**：保持HTML结构的完整性
4. **保留原有功能**：确保代码预览功能正常工作
### 修复步骤
1. 修改CSS预览部分，使用转义斜杠处理HTML结束标签
2. 修改JavaScript预览部分，使用转义斜杠处理HTML结束标签
3. 测试修复后的代码，确保编译通过且功能正常
### 预期结果
修复后，CodePreview.vue文件将能够正常编译，不再出现"Invalid end tag"错误，同时保持原有的代码预览功能。

52
.trae/documents/plan_20260114_031456.md Normal file
View File

@@ -0,0 +1,52 @@
# 修复Login函数导出问题
## 1. 问题分析
- **错误信息**：`SyntaxError: The requested module '/src/services/api.ts' does not provide an export named 'login'`
- **原因**：`api.ts` 文件中缺少 `login` 函数的导出
- **影响**：登录功能无法正常工作
## 2. 解决方案
### 2.1 修复 `api.ts` 文件
在 `api.ts` 文件末尾添加 `login` 函数，确保它被正确导出：
```typescript
// 登录API
export const login = async (credentials: LoginRequest): Promise<LoginResponse> => {
try {
const response = await fetch(`${API_BASE}/admin/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(credentials),
})
if (!response.ok) {
const errorData = await response.json()
throw new Error(errorData.error || '登录失败')
}
return await response.json()
} catch (error) {
console.error('Login error:', error)
throw error
}
}
```
### 2.2 验证修复
1. 保存 `api.ts` 文件
2. 检查 `Login.vue` 组件中的导入语句：
```typescript
import { login } from '../services/api'
```
3. 运行前端开发服务器，验证登录功能是否正常工作
## 3. 预期结果
- 登录功能能够正常调用后端API
- 不再出现 "does not provide an export named 'login'" 错误
- 用户能够正常登录并访问管理后台
## 4. 技术要点
- 确保函数使用 `export` 关键字正确导出
- 函数签名与类型定义匹配
- API调用逻辑正确，能够处理成功和失败情况

73
.trae/documents/plan_20260114_052359.md Normal file
View File

@@ -0,0 +1,73 @@
# 后台界面视觉统一调整方案
## 一、设计差异分析
### 前台设计风格
- **颜色方案**：深色背景 `#050505`，金色强调色 `#d4b383`，半透明效果
- **排版样式**：Inter/Noto Sans SC 字体，金色标题，白色文本
- **组件风格**：玻璃效果、卡片设计、模糊背景
- **交互模式**：平滑过渡动画，精细悬停效果
### 后台设计风格
- **颜色方案**：浅色背景 `#f5f7fa`，蓝色强调色 `#3b82f6`，实色背景
- **排版样式**：默认字体，普通标题，深色文本
- **组件风格**：传统企业后台设计，没有玻璃效果
- **交互模式**：简单过渡，基础悬停效果
## 二、调整方案
### 1. 颜色方案统一
- **背景色**：将后台背景改为 `#050505`，与前台保持一致
- **强调色**：替换蓝色 `#3b82f6` 为前台金色 `#d4b383`
- **文本色**：改为白色或浅灰色，与前台保持一致
- **边框色**：使用半透明边框，与前台卡片风格统一
### 2. 组件风格统一
- **玻璃效果**：为侧边栏、头部添加 `glass-nav` 效果
- **卡片设计**：后台卡片改为 `art-card` 风格，半透明背景
- **按钮样式**：统一使用前台的按钮样式，圆角、悬停效果
- **图标风格**：使用 Lucide Icons，统一图标颜色和大小
### 3. 排版样式统一
- **字体**：使用与前台相同的 Inter/Noto Sans SC 字体
- **标题样式**：统一标题样式，如大写、金色等
- **文本大小**：统一文本大小和行高
### 4. 交互模式统一
- **过渡动画**：添加平滑过渡动画
- **悬停效果**：统一悬停效果，使用金色强调
- **点击反馈**：添加精细的点击反馈
## 三、具体调整点
### 1. AdminLayout.vue
- 修改背景色为 `#050505`
- 侧边栏添加 `glass-nav` 效果
- 头部添加 `glass-nav` 效果
- 按钮和链接使用金色 `#d4b383` 作为强调色
- 添加平滑过渡动画
### 2. 表单组件
- 统一表单样式，使用玻璃效果
- 输入框样式与前台保持一致
- 按钮样式与前台保持一致
### 3. 表格组件
- 表格背景改为半透明
- 表头样式与前台保持一致
- 行悬停效果与前台保持一致
### 4. 其他组件
- 模态框样式与前台保持一致
- 通知样式与前台保持一致
- 加载状态样式与前台保持一致
## 四、预期效果
- 后台界面与前台界面视觉风格统一
- 消除当前存在的视觉突兀感
- 提升整体产品的设计统一性
- 增强用户体验连贯性
- 保持后台功能的可用性和专业性
通过以上调整，后台界面将与前台界面保持视觉统一，同时保持后台功能的专业性和可用性。

56
.trae/documents/plan_20260114_082233.md Normal file
View File

@@ -0,0 +1,56 @@
# 修复表单元素主题色适配问题
## 问题分析
当前界面中的表单元素背景颜色显示为白色，没有正确适配深色主题。具体表现为：
1. **PostForm.vue** 存在硬编码的浅色主题样式：
- 表单容器背景色：`background-color: white;`
- 文字颜色：`color: #111827;`
- 输入框背景色：`background-color: white;`
- 输入框文字颜色：继承黑色
2. **UserForm.vue** 已正确使用深色主题样式：
- 表单容器背景色：`background: rgba(255, 255, 255, 0.05);`
- 文字颜色：`color: rgba(255, 255, 255, 0.8);`
- 输入框背景色：`background: rgba(255, 255, 255, 0.05);`
- 输入框文字颜色：`color: white;`
3. 需要检查的其他表单组件：
- WorkForm.vue
- SnippetForm.vue
- RoleForm.vue
- TagForm.vue
## 解决方案
将所有表单组件的样式统一为深色主题，与整体界面风格保持一致。
### 修复步骤
1. **修复PostForm.vue**：
- 更新表单容器背景色
- 更新文字颜色
- 更新输入框和textarea样式
- 更新按钮样式
2. **检查并修复其他表单组件**：
- WorkForm.vue
- SnippetForm.vue
- RoleForm.vue
- TagForm.vue
- 确保所有表单组件使用统一的深色主题样式
3. **样式统一标准**：
- 表单容器：半透明黑色背景，浅色边框
- 文字：白色或浅色
- 输入框/textarea：半透明黑色背景，白色文字，浅色边框
- 按钮：使用主题色`#d4b383`或半透明黑色
- 保持与其他组件一致的视觉风格
## 预期效果
- 所有表单组件背景色、文本色和边框色自动适配深色主题
- 与整体界面风格统一和协调
- 保持良好的视觉层次和可读性
- 交互元素（按钮、输入框）具有适当的悬停和焦点效果

97
.trae/documents/plan_20260114_083525.md Normal file
View File

@@ -0,0 +1,97 @@
# 修复加载用户数据失败问题
## 问题分析
### 错误信息
- "加载用户数据失败: Unexpected non-whitespace character after JSON at position 4 (line 1 column 5)"
### 根本原因
1. **客户端**：UserForm.vue调用`fetchUser(userId)`函数，尝试访问`GET /admin/users/:id`接口获取用户详情
2. **服务器端**：在main.go中缺少`GET /users/:id`路由，导致请求被错误处理
3. **响应格式**：服务器返回非JSON格式响应（可能是HTML错误页面），客户端尝试解析为JSON导致解析错误
### 检查结果
- 服务器端存在`adminGetUsers`、`adminCreateUser`、`adminUpdateUser`、`adminDeleteUser`函数
- 缺少`adminGetUser`函数用于处理单个用户详情请求
- 路由配置中缺少`GET /users/:id`路由
## 解决方案
### 修复步骤
1. **创建adminGetUser函数**：
- 在server/main.go中添加获取单个用户详情的处理函数
- 调用repositories层的GetUserByID函数（需要检查是否存在）
- 返回JSON格式的用户详情响应
2. **添加GET /users/:id路由**：
- 在server/main.go的authAdmin路由组中添加`GET /users/:id`路由
- 绑定到adminGetUser函数
- 添加适当的中间件（如RoleMiddleware）
3. **检查repositories层**：
- 检查是否存在GetUserByID函数
- 如果不存在，需要创建该函数
4. **测试验证**：
- 重启服务器
- 测试编辑用户功能，确保能正确加载用户数据
### 预期效果
- 客户端能成功获取用户详情数据
- 不再出现JSON解析错误
- 用户编辑表单能正确填充现有数据
## 实现细节
### 1. 检查并创建GetUserByID函数
- 检查repositories/user_repository.go是否存在GetUserByID函数
- 如果不存在，创建该函数：
```go
func GetUserByID(id uint) (*models.User, error) {
// 实现逻辑
}
```
### 2. 创建adminGetUser函数
- 在server/main.go中添加：
```go
// 获取单个用户详情
func adminGetUser(c *gin.Context) {
id, err := strconv.ParseUint(c.Param("id"), 10, 32)
if err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid user ID"})
return
}
user, err := repositories.GetUserByID(uint(id))
if err != nil {
c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
return
}
c.JSON(http.StatusOK, repositories.BuildUserResponse(user))
}
```
### 3. 添加GET /users/:id路由
- 在server/main.go的authAdmin路由组中添加：
```go
authAdmin.GET("/users/:id", middleware.RoleMiddleware("admin"), adminGetUser)
```
### 4. 重启服务器并测试
- 重启服务器使新路由生效
- 访问编辑用户页面，验证能正确加载用户数据
## 风险评估
- 修复后对现有功能无影响
- 仅添加新功能，不修改现有逻辑
- 遵循现有的代码架构和风格
- 与其他资源的详情API保持一致的实现方式

22
.trae/documents/修复CodePreview.vue中的HTML标签不匹配问题.md Normal file
View File

@@ -0,0 +1,22 @@
### 问题分析
Vue编译器在处理单文件组件时，会尝试解析所有内容，包括JavaScript部分中的模板字符串。这导致JavaScript字符串中的HTML结束标签（如`</body>`、`</html>`）被识别为模板本身的标签，从而引发"Invalid end tag"错误。
### 修复方案
我将使用以下方法来修复这个问题：
1. **将HTML字符串分解为数组**：使用数组来存储HTML的不同部分，然后通过join方法合并，避免Vue编译器解析完整的HTML标签。
2. **使用字符串连接**：将HTML字符串分解为多个小字符串，通过加号连接，避免Vue编译器识别完整的HTML标签。
3. **保持原有功能不变**：修复后仍保持原有的代码预览功能，包括语法高亮和实时预览。
### 修复步骤
1. 修改`updatePreview`函数中的CSS预览部分，将模板字符串替换为数组join方式
2. 修改`updatePreview`函数中的JavaScript预览部分，将模板字符串替换为数组join方式
3. 确保所有HTML标签都正确关闭，没有语法错误
4. 测试修复后的代码，确保编译通过且功能正常
### 预期结果
修复后，CodePreview.vue文件将能够正常编译，不再出现"Invalid end tag"错误，同时保持原有的代码预览功能。

55
.trae/documents/修复主题色适配和下拉列表z-index问题.md Normal file
View File

@@ -0,0 +1,55 @@
# 修复主题色适配和下拉列表z-index问题
## 1. 主题色适配功能修复
### 问题分析
- 当前CustomSelect组件使用硬编码颜色值，未使用项目定义的主题色
- 项目通过Tailwind CSS定义了`art`主题颜色，包括`accent: '#d4b383'`（主色调）
- 项目支持深色模式，组件需要自动适应主题变化
### 解决方案
1. **修改CustomSelect组件样式**：
- 将硬编码颜色替换为Tailwind CSS变量
- 使用项目定义的`art`主题颜色
- 确保组件能响应深色模式变化
2. **具体修改点**：
- 背景色：使用`bg-art-surface`或`bg-opacity`配合主题色
- 边框色：使用`border-art-border`或`border-opacity`
- 文本色：使用`text-art-text`
- 主色调：使用`art-accent`代替硬编码的`#d4b383`
- 悬停和选中状态：使用主题色的透明度变体
## 2. 下拉列表z-index问题修复
### 问题分析
- 当前下拉列表z-index: 100，可能被其他元素遮挡
- 需要确保下拉列表显示在最上层
### 解决方案
1. **调整z-index值**：
- 检查项目中其他组件的z-index设置
- 将下拉列表z-index调整为更合理的值（如1000）
- 确保值足够高覆盖其他元素，但不影响其他组件
2. **具体修改点**：
- 将`.dropdown-options`的z-index从100改为1000
- 确保容器元素有合适的定位（position: relative）
## 3. 实现步骤
1. **修改CustomSelect.vue组件**：
- 更新样式，使用Tailwind主题颜色
- 调整z-index值
2. **测试验证**：
- 检查组件在不同主题下的显示效果
- 验证下拉列表不被其他元素遮挡
- 确保其他组件的z-index不受影响
## 4. 预期效果
- 组件颜色自动适应系统或用户选择的主题
- 下拉列表始终显示在最上层，不被其他元素遮挡
- 保持与整体应用主题的一致性
- 不影响其他组件的正常显示层级

58
.trae/documents/修复操作日志和角色列表功能异常.md Normal file
View File

@@ -0,0 +1,58 @@
## 问题分析
### 1. 获取操作日志功能失败
- **错误原因**：数据库中缺少 `operation_logs` 表
- **代码分析**：`operation_log_repository.go` 中的 `GetOperationLogs` 函数尝试从 `operation_logs` 表查询数据，但该表不存在
- **SQL文件状态**：`nl_blog.sql` 中没有定义 `operation_logs` 表
### 2. 获取角色列表功能失败
- **错误原因**：数据库中缺少 `roles` 表
- **代码分析**：`role_repository.go` 中的 `GetRoles` 函数尝试从 `roles` 表查询数据，但该表不存在
- **SQL文件状态**：`nl_blog.sql` 中没有定义 `roles` 表
- **设计不一致**：用户表 `users` 中 `role` 字段使用 `enum('admin','editor','viewer')` 类型，表明角色设计为内嵌式，而非独立表管理
## 修复方案
### 1. 修复操作日志功能
- **创建 `operation_logs` 表**：在 `nl_blog.sql` 中添加表定义
- **表结构**：
```sql
DROP TABLE IF EXISTS `operation_logs`;
CREATE TABLE `operation_logs` (
`id` bigint UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`user_id` bigint UNSIGNED NOT NULL COMMENT '操作用户ID',
`username` varchar(50) NOT NULL COMMENT '操作用户名',
`ip` varchar(45) NOT NULL COMMENT '操作IP地址',
`path` varchar(255) NOT NULL COMMENT '操作路径',
`method` varchar(10) NOT NULL COMMENT 'HTTP方法',
`params` text NULL COMMENT '请求参数',
`status` int NOT NULL COMMENT '响应状态码',
`duration` int NOT NULL COMMENT '响应时间（毫秒）',
`created_at` datetime NULL DEFAULT CURRENT_TIMESTAMP COMMENT '操作时间',
PRIMARY KEY (`id`) USING BTREE,
INDEX `idx_user_id`(`user_id` ASC) USING BTREE,
INDEX `idx_created_at`(`created_at` ASC) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '操作日志表' ROW_FORMAT = Dynamic;
```
### 2. 修复角色列表功能
- **方案A**：修改代码以适应现有设计（推荐）
- 由于用户表中角色是 `enum` 类型，系统可能不需要独立的 `roles` 表
- 修改 `role_repository.go` 中的 `GetRoles` 函数，返回硬编码的角色列表
- 这样可以保持与现有数据库设计的一致性
- **方案B**：创建 `roles` 表并迁移数据
- 在 `nl_blog.sql` 中添加 `roles` 表定义
- 插入初始角色数据
- 这种方案需要更多的数据库迁移工作
### 3. 实现步骤
1. 首先创建 `operation_logs` 表，修复操作日志功能
2. 然后根据系统设计选择合适的角色管理方案，修复角色列表功能
3. 更新 `nl_blog.sql` 文件，确保包含所有必要的表定义
4. 测试修复后的功能
## 预期结果
- 操作日志功能能够正常获取日志记录
- 角色列表功能能够正常返回角色数据
- 系统设计与数据库结构保持一致

83
.trae/documents/修复缺失的管理后台表单组件.md Normal file
View File

@@ -0,0 +1,83 @@
# 修复缺失的管理后台表单组件
## 问题分析
Vite 构建工具报告了导入错误，原因是路由配置中引用的多个表单组件文件不存在：
- `./pages/admin/UserForm.vue` - 用户编辑表单
- `./pages/admin/RoleForm.vue` - 角色编辑表单
- `./pages/admin/PostForm.vue` - 文章编辑表单
- `./pages/admin/WorkForm.vue` - 作品编辑表单
- `./pages/admin/SnippetForm.vue` - 代码片段编辑表单
这些组件在路由配置中被引用，但实际文件尚未创建，导致构建失败。
## 解决方案
需要创建所有缺失的表单组件文件，每个文件实现对应的编辑功能。
## 实现计划
### 1. 用户表单组件 (UserForm.vue)
- **功能**：用户创建和编辑表单
- **字段**：用户名、邮箱、角色、状态
- **验证**：表单验证、唯一性检查
- **提交**：创建新用户或更新现有用户
### 2. 角色表单组件 (RoleForm.vue)
- **功能**：角色创建和编辑表单
- **字段**：角色名称、描述
- **验证**：表单验证、唯一性检查
- **提交**：创建新角色或更新现有角色
### 3. 文章表单组件 (PostForm.vue)
- **功能**：文章创建和编辑表单
- **字段**：标题、分类、日期、摘要、内容、发布状态
- **验证**：表单验证
- **提交**：创建新文章或更新现有文章
### 4. 作品表单组件 (WorkForm.vue)
- **功能**：作品创建和编辑表单
- **字段**：标题、分类、年份、主图、描述、技术栈、图库
- **验证**：表单验证
- **提交**：创建新作品或更新现有作品
### 5. 代码片段表单组件 (SnippetForm.vue)
- **功能**：代码片段创建和编辑表单
- **字段**：标题、代码、类型、描述
- **验证**：表单验证
- **提交**：创建新代码片段或更新现有代码片段
## 实现思路
1. **组件结构**：每个表单组件采用统一的结构
- 模板：表单布局和字段
- 脚本：表单逻辑、验证、API调用
- 样式：一致的表单样式
2. **表单处理**：
- 使用 Vue 3 的 `ref` 和 `reactive` 管理表单状态
- 实现表单验证逻辑
- 处理创建和编辑两种模式
- 实现提交、取消等操作
3. **API 集成**：
- 使用已实现的 API 服务层
- 处理成功和失败的响应
- 提供友好的用户反馈
4. **用户体验**：
- 加载状态提示
- 错误提示
- 成功消息
- 导航处理
## 技术实现
- **Vue 3 Composition API**：使用最新的 Vue 3 特性
- **TypeScript**：类型安全的组件开发
- **Tailwind CSS**：一致的样式设计
- **Fetch API**：通过已实现的 API 服务层调用后端接口
## 预期结果
修复所有导入错误，使管理后台能够正常构建和运行。用户将能够通过管理后台创建和编辑各种资源，包括用户、角色、文章、作品和代码片段。

235
.trae/documents/后台管理系统前后端对接完成计划.md Normal file
View File

@@ -0,0 +1,235 @@
# 后台管理系统前后端对接完成计划
## 一、当前系统现状分析
### 1. 后端API实现情况（已完成）
- ✅ 认证系统：登录接口、JWT生成与验证
- ✅ 用户管理：查询、创建、更新、删除用户
- ✅ 角色管理：查询、创建、更新、删除角色
- ✅ 内容管理：作品、文章、代码片段的完整CRUD
- ✅ 文章历史记录：查询版本历史、回滚功能
- ✅ 系统配置：查询、创建、更新、删除配置
- ✅ 操作日志：带分页的日志查询
### 2. 前端实现情况（部分完成）
- ✅ 登录页面：UI实现、表单验证、登录逻辑
- ✅ 路由配置：基础路由设置、导航守卫
- ✅ 认证流程：token存储、认证检查
- ❌ 管理页面：无实际管理界面组件
- ❌ API服务：除登录外，其他API均为占位符
- ❌ 数据展示：无数据列表、表单编辑等功能
### 3. 存在的问题
- 前端API服务层不完整，大部分接口未实现
- 缺少完整的管理后台页面组件
- 缺少数据验证和错误处理机制
- 缺少权限控制的前端实现
## 二、对接完成计划
### 阶段一：完善前端API服务层
1. **用户管理API**
- `getUsers()`: 获取用户列表
- `createUser()`: 创建用户
- `updateUser()`: 更新用户
- `deleteUser()`: 删除用户
2. **角色管理API**
- `getRoles()`: 获取角色列表
- `createRole()`: 创建角色
- `updateRole()`: 更新角色
- `deleteRole()`: 删除角色
3. **内容管理API**
- `getAdminWorks()`: 获取作品列表（管理端）
- `createWork()`: 创建作品
- `updateWork()`: 更新作品
- `deleteWork()`: 删除作品
- `getAdminPosts()`: 获取文章列表（管理端）
- `createPost()`: 创建文章
- `updatePost()`: 更新文章
- `deletePost()`: 删除文章
- `getPostHistory()`: 获取文章历史
- `getAdminSnippets()`: 获取代码片段列表（管理端）
- `createSnippet()`: 创建代码片段
- `updateSnippet()`: 更新代码片段
- `deleteSnippet()`: 删除代码片段
4. **系统管理API**
- `getSettings()`: 获取系统配置
- `updateSetting()`: 更新系统配置
- `getOperationLogs()`: 获取操作日志
### 阶段二：实现管理后台页面组件
1. **布局组件**
- 侧边导航栏
- 顶部工具栏
- 主内容区
2. **首页仪表盘**
- 数据统计卡片
- 最近操作记录
- 系统状态监控
3. **用户管理页面**
- 用户列表展示
- 用户搜索与筛选
- 用户创建与编辑表单
- 用户角色分配
4. **角色管理页面**
- 角色列表展示
- 角色创建与编辑表单
- 权限配置界面
5. **作品管理页面**
- 作品列表展示
- 作品搜索与筛选
- 作品创建与编辑表单
- 作品图片上传
- 技术栈配置
6. **文章管理页面**
- 文章列表展示
- 文章搜索与筛选
- 文章创建与编辑表单
- 富文本编辑器集成
- 文章历史记录查看
7. **代码片段管理页面**
- 代码片段列表展示
- 代码片段搜索与筛选
- 代码片段创建与编辑表单
- 代码高亮展示
8. **系统配置页面**
- 配置项列表展示
- 配置项编辑表单
9. **操作日志页面**
- 日志列表展示
- 日志搜索与筛选
- 日志详情查看
### 阶段三：完善功能与优化
1. **权限控制**
- 基于角色的菜单显示控制
- 按钮级权限控制
- API权限验证
2. **数据验证**
- 前端表单验证
- 后端数据校验
- 错误提示优化
3. **用户体验优化**
- 加载状态提示
- 操作成功/失败反馈
- 表单提交防抖
- 列表分页与排序
4. **错误处理**
- 网络错误处理
- 401权限错误处理
- 500服务器错误处理
- 友好的错误提示
5. **性能优化**
- API请求缓存
- 列表虚拟滚动
- 图片懒加载
- 代码分割
## 三、技术实现方案
### 1. API服务层实现
- 使用`fetch` API进行网络请求
- 统一的请求拦截器添加token
- 统一的响应拦截器处理错误
- 类型安全的API函数设计
### 2. 组件设计
- 基于Vue 3 Composition API
- 使用TypeScript确保类型安全
- 组件化设计，提高复用性
- 响应式设计，适配不同屏幕尺寸
### 3. 状态管理
- 使用Vue 3的`provide/inject`进行组件间通信
- 对于复杂状态，考虑使用Pinia
### 4. 样式设计
- 使用Tailwind CSS进行样式开发
- 统一的主题色和设计规范
- 响应式布局设计
## 四、测试与验证
### 1. 功能测试
- 所有API接口测试
- 页面功能测试
- 交互流程测试
- 权限控制测试
### 2. 性能测试
- 页面加载速度测试
- API响应时间测试
- 并发请求测试
### 3. 兼容性测试
- 主流浏览器兼容性测试
- 不同屏幕尺寸适配测试
## 五、交付标准
1. **功能完整性**
- 所有管理功能实现完成
- 前后端接口正常通信
- 数据流转顺畅
2. **代码质量**
- 代码结构清晰
- 类型定义完整
- 注释规范
- 无明显性能问题
3. **用户体验**
- 界面美观、操作流畅
- 错误提示友好
- 响应及时
4. **安全性**
- 权限控制严格
- 数据传输安全
- 无明显安全漏洞
## 六、预计完成时间
- 阶段一：3天（完善API服务层）
- 阶段二：7天（实现管理页面组件）
- 阶段三：2天（功能完善与优化）
- 测试与验证：2天
总计：14天
## 七、风险评估与应对
1. **API接口变更风险**
- 应对：建立API文档，前后端定期沟通
2. **权限控制复杂度风险**
- 应对：采用RBAC模型，逐步实现
3. **富文本编辑器集成风险**
- 应对：选择成熟的富文本编辑器，如TinyMCE或CKEditor
4. **数据量较大时的性能风险**
- 应对：实现分页加载，考虑虚拟滚动
## 八、验收标准
1. **所有管理功能可正常使用**
2. **API接口调用成功率100%**
3. **页面加载时间<2秒**
4. **无明显视觉或功能bug**
5. **代码符合规范，注释完整**

172
.trae/documents/后台管理系统设计与开发.md Normal file
View File

@@ -0,0 +1,172 @@
# 后台管理系统设计与开发
## 1. 系统架构设计
### 1.1 技术栈
- **前端**：Vue3 + TypeScript + Vite + Element Plus
- **后端**：Golang + Gin + MySQL
- **认证**：JWT
- **权限控制**：基于角色的访问控制（RBAC）
- **可视化**：ECharts
### 1.2 数据库设计
#### 1.2.1 现有表结构
- posts（博客文章表）
- works（作品表）
- snippets（代码片段表）
- users（用户表）
- tags（标签表）
- post_tags（文章标签关联表）
- settings（配置表）
- access_logs（访问日志表）
#### 1.2.2 新增表结构
- post_history（文章历史记录表）：用于记录文章的编辑修改轨迹
### 1.3 后端API设计
#### 1.3.1 认证模块
- POST /api/admin/login - 登录
- POST /api/admin/logout - 登出
- POST /api/admin/refresh - 刷新令牌
#### 1.3.2 用户管理
- GET /api/admin/users - 获取用户列表
- POST /api/admin/users - 创建用户
- GET /api/admin/users/:id - 获取用户详情
- PUT /api/admin/users/:id - 更新用户
- DELETE /api/admin/users/:id - 删除用户
#### 1.3.3 角色管理
- GET /api/admin/roles - 获取角色列表
- POST /api/admin/roles - 创建角色
- GET /api/admin/roles/:id - 获取角色详情
- PUT /api/admin/roles/:id - 更新角色
- DELETE /api/admin/roles/:id - 删除角色
#### 1.3.4 文章管理
- GET /api/admin/posts - 获取文章列表
- POST /api/admin/posts - 创建文章
- GET /api/admin/posts/:id - 获取文章详情
- PUT /api/admin/posts/:id - 更新文章
- DELETE /api/admin/posts/:id - 删除文章
- GET /api/admin/posts/:id/history - 获取文章历史记录
- GET /api/admin/posts/:id/history/:version - 获取文章指定版本
- POST /api/admin/posts/:id/history/:version/restore - 恢复文章到指定版本
#### 1.3.5 作品管理
- GET /api/admin/works - 获取作品列表
- POST /api/admin/works - 创建作品
- GET /api/admin/works/:id - 获取作品详情
- PUT /api/admin/works/:id - 更新作品
- DELETE /api/admin/works/:id - 删除作品
#### 1.3.6 代码片段管理
- GET /api/admin/snippets - 获取代码片段列表
- POST /api/admin/snippets - 创建代码片段
- GET /api/admin/snippets/:id - 获取代码片段详情
- PUT /api/admin/snippets/:id - 更新代码片段
- DELETE /api/admin/snippets/:id - 删除代码片段
#### 1.3.7 系统配置
- GET /api/admin/settings - 获取系统配置
- PUT /api/admin/settings - 更新系统配置
#### 1.3.8 操作日志
- GET /api/admin/logs - 获取操作日志
- GET /api/admin/logs/stats - 获取日志统计
#### 1.3.9 数据统计
- GET /api/admin/stats - 获取系统统计数据
### 1.4 前端界面设计
#### 1.4.1 页面结构
- 登录页面
- 仪表盘（首页）
- 用户管理
- 角色管理
- 文章管理
- 文章列表
- 文章编辑
- 文章历史记录
- 作品管理
- 代码片段管理
- 系统配置
- 操作日志
- 数据统计
#### 1.4.2 权限控制
- 基于角色的菜单权限
- 基于权限的按钮级控制
## 2. 实施步骤
### 2.1 后端开发
1. 创建文章历史记录模型
2. 实现文章历史记录相关API
3. 实现用户认证和授权中间件
4. 实现用户管理API
5. 实现角色管理API
6. 实现文章管理API（含历史记录功能）
7. 实现作品管理API
8. 实现代码片段管理API
9. 实现系统配置API
10. 实现操作日志API
11. 实现数据统计API
### 2.2 前端开发
1. 创建管理系统前端项目
2. 实现登录页面
3. 实现仪表盘
4. 实现用户管理页面
5. 实现角色管理页面
6. 实现文章管理页面
7. 实现作品管理页面
8. 实现代码片段管理页面
9. 实现系统配置页面
10. 实现操作日志页面
11. 实现数据统计页面
### 2.3 测试与部署
1. 单元测试
2. 集成测试
3. 安全测试
4. 部署到生产环境
## 3. 安全设计
### 3.1 数据安全
- 密码加密存储（bcrypt）
- JWT令牌认证
- HTTPS传输
### 3.2 防止攻击
- SQL注入防护（使用参数化查询）
- XSS攻击防护（输入验证、输出转义）
- CSRF防护
- 接口限流
### 3.3 日志审计
- 操作日志记录
- 登录日志记录
- 异常日志记录
## 4. 性能优化
### 4.1 后端优化
- 数据库索引优化
- 缓存策略
- 连接池优化
### 4.2 前端优化
- 路由懒加载
- 组件按需加载
- 图片懒加载
- 接口请求优化
## 5. 响应式设计
- 适配桌面端、平板、移动端
- 响应式布局
- 自适应菜单

84
.trae/documents/后台系统功能完善与主题色适配计划.md Normal file
View File

@@ -0,0 +1,84 @@
# 后台系统功能完善与主题色适配计划
## 一、问题分析
1. **功能模块实现情况**：
- 后端API已实现大部分功能端点
- 前端组件基本已创建
- 可能存在前端组件与后端API连接不完整的问题
- 部分功能模块可能缺少具体实现细节
2. **主题色适配情况**：
- 已更新部分组件样式（AdminLayout、Dashboard、Users、Posts）
- 仍有多个组件未完全适配主题色
- 表单、按钮等通用元素可能存在视觉不一致
## 二、功能模块实现计划
### 1. 检查前端组件与后端API连接
- 检查所有表单组件（PostForm、UserForm、RoleForm、WorkForm、SnippetForm）是否正确连接到后端API
- 确保所有CRUD操作都能正常执行
- 验证表单验证和错误处理是否完整
### 2. 完善功能细节
- 检查文章管理模块的标签关联功能
- 验证作品管理模块的图片上传功能
- 确保代码片段管理模块的语法高亮功能
- 检查系统配置模块的配置项完整性
- 验证操作日志模块的数据记录和展示
### 3. 测试功能完整性
- 测试用户登录和权限管理
- 验证角色权限控制是否生效
- 测试所有管理模块的CRUD操作
- 验证数据一致性和完整性
## 三、主题色适配计划
### 1. 检查并更新组件样式
- 更新RoleForm.vue、SnippetForm.vue、WorkForm.vue的样式
- 更新Settings.vue和Logs.vue的样式
- 确保所有表单组件（输入框、下拉框、文本域）适配主题色
- 统一按钮样式，确保使用金色#d4b383作为主强调色
- 确保卡片、导航栏、表格等元素适配深色主题
### 2. 统一视觉风格
- 确保所有组件使用一致的玻璃效果（backdrop-filter: blur()）
- 统一字体样式，使用Inter字体
- 确保所有状态徽章、标签等使用统一的设计语言
- 验证响应式设计在不同设备上的表现
## 四、测试计划
1. **功能测试**：
- 测试所有管理模块的CRUD操作
- 验证权限控制和角色管理
- 测试数据导入导出功能
- 验证系统配置的更新和应用
2. **视觉测试**：
- 检查所有界面元素的主题色适配
- 验证在不同浏览器中的表现
- 测试响应式设计在不同屏幕尺寸下的效果
- 确保视觉风格的统一性和一致性
3. **性能测试**：
- 测试页面加载速度
- 验证数据处理性能
- 检查系统在高负载下的表现
## 五、实施步骤
1. 首先，更新所有未适配主题色的组件样式
2. 然后，检查并完善前端组件与后端API的连接
3. 接着，测试所有功能模块的完整性
4. 最后，进行全面的视觉和性能测试
## 六、预期成果
1. 所有功能模块完整实现，能够正常运行
2. 系统所有界面元素正确应用当前主题色
3. 视觉风格统一，符合设计规范
4. 功能正常，性能良好
通过以上计划的实施，将解决后台系统存在的功能不完整和主题色适配问题，提升系统的完整性和用户体验。

124
.trae/documents/基于Vue3和Gin的UI复刻计划.md Normal file
View File

@@ -0,0 +1,124 @@
# 基于Vue3和Gin的UI复刻计划
## 项目概述
基于提供的UI.html文件，使用Vue3前端框架与Gin后端框架进行全栈开发，实现对UI界面和交互效果的1:1精准复刻。
## 技术栈
- **前端**: Vue 3 + TypeScript + Tailwind CSS
- **后端**: Gin + Go
- **工具**: Vite, Axios, Lucide Icons
## 项目结构
```
├── client/ # 前端项目
│ ├── public/ # 静态资源
│ ├── src/ # 源代码
│ │ ├── assets/ # 资源文件
│ │ ├── components/ # 组件
│ │ ├── composables/ # 组合式函数
│ │ ├── pages/ # 页面
│ │ ├── services/ # API服务
│ │ ├── types/ # 类型定义
│ │ ├── App.vue # 根组件
│ │ ├── main.ts # 入口文件
│ │ └── router.ts # 路由配置
│ ├── tailwind.config.js # Tailwind配置
│ └── vite.config.ts # Vite配置
└── server/ # 后端项目
├── cmd/ # 命令入口
├── internal/ # 内部包
│ ├── api/ # API路由
│ ├── models/ # 数据模型
│ └── services/ # 业务逻辑
├── pkg/ # 公共包
└── go.mod # Go模块配置
```
## 开发步骤
### 1. 项目初始化
- 初始化Vue3 + TypeScript + Vite项目
- 配置Tailwind CSS
- 初始化Gin后端项目
- 配置跨域支持
### 2. 前端基础配置
- 配置Tailwind主题（颜色、字体、动画）
- 集成Lucide Icons
- 实现全局样式（滚动条、玻璃效果等）
- 实现工具函数（Toast、路由等）
### 3. 组件开发
- **基础组件**:
- Header.vue - 头部导航栏
- MobileMenu.vue - 移动端菜单
- Toast.vue - 通知组件
- Modal.vue - 模态框组件
- ArtCard.vue - 艺术卡片组件
- TiltCard.vue - 倾斜卡片组件
- **页面组件**:
- Home.vue - 主页
- Blog.vue - 博客列表
- Works.vue - 作品展示
- WorkDetail.vue - 作品详情
- Snippets.vue - 代码片段
- Services.vue - 服务介绍
- About.vue - 关于页面
### 4. 交互功能实现
- 页面路由切换
- 移动端菜单交互
- 作品详情展示
- 代码片段模态框
- 合作咨询表单
- 滚动动画效果
- 鼠标悬停效果
### 5. 后端开发
- 设计API接口（works, posts, snippets）
- 实现数据模型
- 实现API服务
- 配置数据库连接（可选）
### 6. 集成测试
- 前端与后端API集成
- 测试所有交互功能
- 优化性能和响应速度
- 确保移动端适配
## 关键实现细节
### 1. 主题与样式
- 精确复刻UI.html中的颜色系统
- 实现自定义动画效果
- 确保字体样式一致
- 实现响应式设计
### 2. 交互效果
- 实现平滑的页面过渡动画
- 复刻悬停效果（卡片提升、颜色变化等）
- 实现滚动动画
- 确保所有交互与原UI一致
### 3. 数据处理
- 实现API调用与数据渲染
- 实现静态数据 fallback
- 确保数据更新时的UI同步
## 预期成果
- 与原UI.html完全一致的视觉效果
- 流畅的交互体验
- 响应式设计，适配各种设备
- 完整的前后端集成
- 可维护的代码结构
## 开发时间预估
- 项目初始化: 1天
- 前端基础配置: 1天
- 组件开发: 3天
- 交互功能实现: 2天
- 后端开发: 2天
- 集成测试: 1天
总计: 10天

50
.trae/documents/排查与修复：403 权限问题与代码预览功能.md Normal file
View File

@@ -0,0 +1,50 @@
# 排查计划：解决后台登录 403 错误与代码预览功能
## 1. 解决后台登录 lq 用户报错 403 的问题
用户 `lq` 登录后台遇到 403 Forbidden 错误，通常意味着认证通过（Token 有效），但**授权失败**（权限不足）。
**原因分析**：
- 我之前在 `middleware/auth.go` 中实现了 `PermissionMiddleware`，它严格检查 `role_permissions` 表中的关联。
- 我之前提供的 SQL 语句（`nl_blog.sql`）虽然包含了 `INSERT INTO role_permissions` 语句，但如果数据库没有正确执行这些插入操作，或者 `lq` 用户的 `role_id` 没有正确关联到 `admin` 角色，就会导致权限为空，从而触发 403。
- 从 `nl_blog.sql` 来看：
- `lq` 用户的 `role_id` 是 `1` (`admin`)。
- `roles` 表中 `admin` 的 ID 是 `1`。
- `permissions` 表被清空重建了。
- 关键点：`role_permissions` 表的插入语句依赖 `SELECT id FROM permissions`。如果 `permissions` 表的 ID 自增顺序不符合预期，或者数据未完全写入，可能导致关联丢失。
**执行步骤**：
1. **检查数据库数据**：
- 确认 `lq` 用户的 `role_id` 是否为 1。
- 确认 `roles` 表中 ID 为 1 的是 admin。
- **最关键**：检查 `role_permissions` 表中，`role_id = 1` 是否有对应的权限记录。我怀疑这里是空的或者不完整。
2. **修复数据**：
- 如果发现权限关联缺失，我将重新执行权限关联的 SQL 语句，确保 `admin` 角色拥有所有权限。
3. **验证 Token 生成**：
- 检查登录接口生成的 JWT Token 是否正确包含 `role_id` claim。
## 2. 解决代码预览功能未实现的问题
用户反馈代码预览功能（前端 CodePreview 组件）未实现或报错。
**原因分析**：
- 前端 `CodePreview.vue` 之前是纯前端模拟，现在我已将其连接到后端 `/api/run` 接口。
- 如果后端接口未正确响应（例如跨域、404、或内部错误），前端会报错。
- 用户提到的 "VM321:25 Uncaught SyntaxError: Failed to execute 'write' on 'Document': Cannot use import statement outside a module" 错误，我已经通过在上一步修改 `CodePreview.vue`（添加 `<script type="module">`）解决了。
- 现在的重点是确保后端 `/api/run` 接口可用，并且前端能正确展示结果。
**执行步骤**：
1. **确认后端运行状态**：确保后端服务正在运行且没有报错。
2. **验证 API 接口**：
- 检查 `main.go` 中是否注册了 `/api/run` 路由。
- 检查 `handlers_runner.go` 是否正确处理请求。
3. **前端调试**：
- 确认 `CodePreview.vue` 中的 `fetch` 请求地址是否正确（目前写死为 `http://localhost:8081/api/run`，如果端口不同则会失败）。需要确认后端端口配置。
## 总结计划
我将分两步走：
1. **数据库修复**：运行 SQL 脚本修复 `role_permissions` 数据，解决 403 问题。
2. **代码运行验证**：确认后端端口，确保前端 API 调用地址正确。
**无需修改代码**（除非端口不对），主要是**数据修复**和**验证**。

78
.trae/documents/系统优化与修复计划.md Normal file
View File

@@ -0,0 +1,78 @@
## 1. 修复数据编辑功能问题
### 问题分析
当前系统在编辑数据时，表单不会自动加载现有数据，用户需要手动填充所有字段，导致编辑体验不佳且容易遗漏数据。
### 解决方案
为每个编辑表单组件添加从详情API获取数据的逻辑：
- **PostForm.vue**：添加`fetchPost()`调用，加载文章详情并填充表单
- **WorkForm.vue**：添加`fetchWork()`调用，加载作品详情并填充表单
- **SnippetForm.vue**：添加`fetchSnippet()`调用，加载代码片段详情并填充表单
- **RoleForm.vue**：添加`adminGetRole()`调用，加载角色详情并填充表单
- **TagForm.vue**：添加`adminGetTag()`调用，加载标签详情并填充表单
- **UserForm.vue**：添加`getUser()`调用，加载用户详情并填充表单
### 实现细节
- 在组件`onMounted`生命周期钩子中，检查路由参数判断是否为编辑模式
- 如果是编辑模式，调用相应的详情API获取完整数据
- 将API返回的数据映射到表单数据对象，确保所有字段正确填充
- 保存时只提交修改的字段或完整提交，确保数据完整性
## 2. 优化下拉列表UI显示效果
### 问题分析
当前系统使用原生`<select>`元素，背景为白色，与深色主题设计风格不符，影响整体视觉一致性。
### 解决方案
开发自定义下拉列表组件并全局替换：
1. **创建自定义Select组件**
- 开发`CustomSelect.vue`组件，实现下拉列表功能
- 设计符合深色主题的样式，背景色使用与整体UI一致的深色
- 支持`v-model`双向绑定、`options`属性、`placeholder`等基本功能
- 实现平滑的展开/收起动画效果
- 添加键盘导航支持
2. **全局替换下拉列表**
- 替换所有管理后台页面中的下拉列表：
- UserForm.vue中的角色和状态选择
- Logs.vue中的每页显示数量选择
- 其他所有包含`<select>`元素的页面
- 替换前台用户界面中的下拉列表：
- CodePreview.vue中的语言选择
- 其他所有包含`<select>`元素的前台页面
3. **确保功能完整性**
- 保持原有交互功能不变
- 支持选项选择、搜索过滤（如有）
- 确保在不同屏幕尺寸下正常工作
- 支持禁用状态和必填验证
## 3. 实施步骤
1. **修复数据编辑功能**
- 按优先级顺序修复各个表单组件
- 测试每个组件的编辑功能，确保数据正确加载和保存
2. **开发自定义Select组件**
- 设计组件结构和样式
- 实现核心功能
- 添加动画和交互效果
3. **全局替换下拉列表**
- 按页面逐个替换
- 测试每个替换后的下拉列表功能
- 确保视觉一致性
4. **全面测试**
- 测试所有编辑功能，确保数据完整性
- 测试所有下拉列表，确保功能正常
- 检查整体UI一致性
## 4. 预期效果
- 编辑数据时，表单自动填充现有数据，用户只需修改需要变更的字段
- 所有下拉列表使用统一的深色主题样式，与整体UI设计一致
- 提升用户体验，减少数据编辑错误
- 提高系统的视觉一致性和专业性

10
client/.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,10 @@
# 默认忽略的文件
/shelf/
/workspace.xml
# 已忽略包含查询文件的默认文件夹
/queries/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/

10
client/.idea/UniappTool.xml generated Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="cn.fjdmy.uniapp.UniappProjectDataService">
<option name="generalBasePath" value="$PROJECT_DIR$" />
<option name="manifestPath" value="$PROJECT_DIR$/manifest.json" />
<option name="pagesPath" value="$PROJECT_DIR$/pages.json" />
<option name="scanNum" value="1" />
<option name="type" value="store" />
</component>
</project>

8
client/.idea/client.iml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
client/.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/client.iml" filepath="$PROJECT_DIR$/.idea/client.iml" />
</modules>
</component>
</project>

19
client/index.html Normal file
View File

@@ -0,0 +1,19 @@
<!doctype html>
<html lang="zh-CN" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>艺术与代码 | 年糕崽崽的数字花园</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/.gitignore generated vendored Normal file
View File

@@ -0,0 +1 @@
!*

6
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/.prettierrc.json generated vendored Normal file
View File

@@ -0,0 +1,6 @@
{
"printWidth": 120,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}

1062
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/config.full.js generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

7
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/config.simple.js generated vendored Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

6
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/postcss.config.cjs generated vendored Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

6
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/postcss.config.js generated vendored Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

2
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/tailwind.config.cjs generated vendored Normal file
View File

@@ -0,0 +1,2 @@
/** @type {import('tailwindcss').Config} */
module.exports = __CONFIG__

2
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/tailwind.config.js generated vendored Normal file
View File

@@ -0,0 +1,2 @@
/** @type {import('tailwindcss').Config} */
export default __CONFIG__

3
client/node_modules/.pnpm/tailwindcss@3.4.19/node_modules/tailwindcss/stubs/tailwind.config.ts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
import type { Config } from 'tailwindcss'
export default __CONFIG__ satisfies Config

1
client/node_modules/tailwindcss/stubs/.gitignore generated vendored Normal file
View File

@@ -0,0 +1 @@
!*

6
client/node_modules/tailwindcss/stubs/.prettierrc.json generated vendored Normal file
View File

@@ -0,0 +1,6 @@
{
"printWidth": 120,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}

1062
client/node_modules/tailwindcss/stubs/config.full.js generated vendored Normal file
View File

File diff suppressed because it is too large Load Diff

7
client/node_modules/tailwindcss/stubs/config.simple.js generated vendored Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

6
client/node_modules/tailwindcss/stubs/postcss.config.cjs generated vendored Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

6
client/node_modules/tailwindcss/stubs/postcss.config.js generated vendored Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

2
client/node_modules/tailwindcss/stubs/tailwind.config.cjs generated vendored Normal file
View File

@@ -0,0 +1,2 @@
/** @type {import('tailwindcss').Config} */
module.exports = __CONFIG__

2
client/node_modules/tailwindcss/stubs/tailwind.config.js generated vendored Normal file
View File

@@ -0,0 +1,2 @@
/** @type {import('tailwindcss').Config} */
export default __CONFIG__

3
client/node_modules/tailwindcss/stubs/tailwind.config.ts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
import type { Config } from 'tailwindcss'
export default __CONFIG__ satisfies Config

26
client/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"highlight": "^0.2.4",
"highlight.js": "^11.11.1",
"vue": "^3.5.13",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.16",
"typescript": "~5.6.2",
"vite": "^6.0.5",
"vue-tsc": "^2.1.10"
}
}

1573
client/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
client/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

37
client/src/App.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div class="min-h-screen bg-art-bg text-art-text">
<!-- Global Noise -->
<div class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>
<!-- Header -->
<Header />
<!-- Mobile Menu -->
<MobileMenu />
<!-- Main Content -->
<main class="pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10">
<router-view />
</main>
<!-- Footer -->
<Footer />
<!-- Snippet Modal -->
<SnippetModal />
<!-- Inquiry Modal -->
<InquiryModal />
</div>
</template>
<script setup lang="ts">
import Header from './components/Header.vue'
import MobileMenu from './components/MobileMenu.vue'
import Footer from './components/Footer.vue'
import SnippetModal from './components/SnippetModal.vue'
import InquiryModal from './components/InquiryModal.vue'
</script>

500
client/src/components/CodePreview.vue Normal file
View File

@@ -0,0 +1,500 @@
<template>
<div class="code-preview-wrapper relative w-full h-full min-h-[600px] flex flex-col font-sans text-gray-200">
<!-- 背景噪点层 -->
<div class="absolute inset-0 pointer-events-none z-0 opacity-20 mix-blend-overlay bg-noise"></div>
<!-- 顶部工具栏 -->
<div class="relative z-10 flex items-center justify-between px-6 py-4 bg-black/40 backdrop-blur-xl border-b border-white/5 rounded-t-2xl">
<div class="flex items-center gap-4">
<!-- 装饰性 Mac 窗口按钮 -->
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
</div>
<span class="text-xs font-mono text-white/40 tracking-widest uppercase ml-2">Code Playground</span>
<!-- 运行状态指示器 -->
<div v-if="isRunning" class="flex items-center gap-2 px-2 py-0.5 rounded-full bg-yellow-500/10 border border-yellow-500/20">
<span class="block w-1.5 h-1.5 rounded-full bg-yellow-500 animate-pulse"></span>
<span class="text-[10px] font-mono text-yellow-500">Compiling...</span>
</div>
</div>
<!-- 语言选择器 & 操作区 -->
<div class="flex items-center gap-4">
<CustomSelect
v-model="selectedLanguage"
:options="languageOptions.filter(opt => !opt.disabled)"
@update:modelValue="handleLanguageChange"
placeholder="选择语言"
style="width: 180px; font-family: monospace; font-size: 0.75rem;"
/>
<button
@click="runCode"
class="flex items-center gap-2 px-3 py-1.5 bg-[#d4b383] hover:bg-[#c4a373] text-black text-xs font-bold rounded-lg transition-colors"
title="运行代码 (Ctrl + Enter)"
>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M5 3l14 9-14 9V3z"/></svg>
<span>RUN</span>
</button>
</div>
</div>
<!-- 主体内容区 -->
<div class="relative z-10 flex-1 flex flex-col md:flex-row bg-[#050505]/80 backdrop-blur-sm rounded-b-2xl overflow-hidden border border-t-0 border-white/5">
<!-- 左侧：代码编辑器 -->
<div class="w-full md:w-1/2 relative flex flex-col border-b md:border-b-0 md:border-r border-white/5 group">
<div class="absolute inset-0 bg-[#09090b]">
<!-- 编辑器容器 -->
<div class="relative w-full h-full font-mono text-sm leading-relaxed custom-scrollbar overflow-hidden">
<pre
ref="highlightBlock"
class="absolute inset-0 p-6 m-0 pointer-events-none z-10 overflow-hidden whitespace-pre-wrap break-words"
aria-hidden="true"
><code :class="`language-${selectedLanguage} !bg-transparent !p-0 font-mono`" v-html="highlightedCode"></code></pre>
<textarea
ref="textarea"
v-model="code"
@input="handleCodeChange"
@scroll="syncScroll"
@keydown.ctrl.enter.prevent="runCode"
@keydown.meta.enter.prevent="runCode"
class="absolute inset-0 w-full h-full p-6 m-0 bg-transparent text-transparent caret-[#d4b383] z-20 resize-none border-none outline-none font-mono whitespace-pre-wrap break-words"
spellcheck="false"
placeholder="// Type your code here..."
></textarea>
</div>
</div>
</div>
<!-- 右侧：实时预览 / 终端 -->
<div class="w-full md:w-1/2 bg-[#121214] flex flex-col relative">
<div class="h-8 flex items-center justify-between px-4 bg-white/5 border-b border-white/5 shrink-0">
<span class="text-[10px] font-mono text-[#d4b383] tracking-widest uppercase">
{{ isConsoleMode ? 'TERMINAL OUTPUT' : 'WEB PREVIEW' }}
</span>
<div class="flex items-center gap-2">
<button @click="clearConsole" v-if="isConsoleMode" class="text-[10px] text-white/40 hover:text-white mr-2">CLEAR</button>
<span v-if="error" class="flex items-center gap-1 text-[#ef4444] text-[10px]">
<span class="w-1.5 h-1.5 rounded-full bg-[#ef4444]"></span> ERROR
</span>
<span v-else class="flex items-center gap-1 text-green-500 text-[10px]">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> READY
</span>
</div>
</div>
<!-- Iframe 容器 -->
<div class="flex-1 relative bg-white w-full h-full">
<iframe
ref="previewFrame"
sandbox="allow-scripts allow-modals allow-same-origin"
title="Code Preview"
class="w-full h-full border-none"
:class="{ 'bg-[#1e1e1e]': isConsoleMode }"
></iframe>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import CustomSelect from './CustomSelect.vue'
// Props & Emits
const props = defineProps<{
initialCode?: string
initialLanguage?: string
}>()
// State
const code = ref('')
const selectedLanguage = ref(props.initialLanguage || 'html')
const error = ref('')
const isRunning = ref(false)
const previewFrame = ref<HTMLIFrameElement | null>(null)
const textarea = ref<HTMLTextAreaElement | null>(null)
const highlightBlock = ref<HTMLElement | null>(null)
const highlightedCode = ref('')
// Language options for CustomSelect
const languageOptions = [
{ value: 'html', label: 'HTML5' },
{ value: 'css', label: 'CSS3' },
{ value: 'javascript', label: 'JavaScript' },
{ value: 'vue', label: 'Vue 3 (SFC-ish)' },
{ value: 'react', label: 'React (JSX)' },
{ value: 'python', label: 'Python (Pyodide)' },
{ value: 'go', label: 'Go (Backend)' },
{ value: 'php', label: 'PHP (Backend)' },
{ value: 'node', label: 'Node.js (Backend)' }
]
// Default Templates
const templates: Record<string, string> = {
html: `<h1>Hello HTML</h1>\n<p>Edit me!</p>`,
css: `.box { \n width: 100px; \n height: 100px; \n background: gold; \n}`,
javascript: `console.log("Hello JS");\nconst x = 10;\nconsole.log(x * 2);`,
vue: `<div id="app">\n <h1>{{ message }}</h1>\n <button @click="count++">Count: {{ count }}</button>\n</div>\n\n<script type="module">\n import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'\n createApp({\n data() {\n return {\n message: 'Hello Vue 3!',\n count: 0\n }\n }\n }).mount('#app')\n<\/script>`,
react: `// React Component\nfunction App() {\n const [count, setCount] = React.useState(0);\n return (\n <div style={{padding: 20, textAlign: 'center'}}>\n <h1>Hello React</h1>\n <p>Count: {count}</p>\n <button \n onClick={() => setCount(count + 1)}\n style={{padding: '8px 16px', background: '#61dafb', border: 'none', borderRadius: 4}}\n >\n Click Me\n </button>\n </div>\n );\n}\n\n// Render\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);`,
python: `# Python via Pyodide (Wasm)\nimport sys\n\nprint(f"Hello from Python {sys.version.split()[0]}")\n\ndef fib(n):\n if n <= 1: return n\n return fib(n-1) + fib(n-2)\n\nprint(f"Fib(10) = {fib(10)}")`,
go: `package main\n\nimport "fmt"\n\nfunc main() {\n\tfmt.Println("Hello from Go!")\n}`,
php: `<?php\n\necho "Hello from PHP " . phpversion();\n`,
node: `console.log("Hello from Node.js " + process.version);`
}
// Computed
const isConsoleMode = computed(() => {
return ['javascript', 'python', 'go', 'php', 'node'].includes(selectedLanguage.value)
})
// Initialize Code Logic - 修复：优先使用传入的代码
if (props.initialCode) {
code.value = props.initialCode
} else {
code.value = templates[selectedLanguage.value] || ''
}
// Watchers - 修复：监听 props 变化以支持从数据库动态加载
watch(() => props.initialCode, (newVal) => {
if (newVal) {
code.value = newVal
highlightCode()
// 延迟运行，给 DOM 一点时间
setTimeout(() => runCode(), 100)
}
})
watch(() => props.initialLanguage, (newVal) => {
if (newVal) {
selectedLanguage.value = newVal
}
})
// Syntax Highlight
const highlightCode = () => {
if (!code.value) {
highlightedCode.value = ''
return
}
try {
const lang = selectedLanguage.value === 'vue' || selectedLanguage.value === 'react' ? 'javascript' : selectedLanguage.value
const result = hljs.highlight(code.value, { language: lang })
highlightedCode.value = result.value
} catch (err) {
highlightedCode.value = code.value
}
}
const syncScroll = (e: Event) => {
const target = e.target as HTMLTextAreaElement
if (highlightBlock.value) {
highlightBlock.value.scrollTop = target.scrollTop
highlightBlock.value.scrollLeft = target.scrollLeft
}
}
// --- Execution Engine ---
const runCode = async () => {
if (!previewFrame.value) return
isRunning.value = true
error.value = ''
const iframe = previewFrame.value
const doc = iframe.contentDocument || iframe.contentWindow?.document
if (!doc) return
// 重置
doc.open()
// 1. HTML / CSS
if (selectedLanguage.value === 'html') {
doc.write(code.value)
doc.close()
isRunning.value = false
}
else if (selectedLanguage.value === 'css') {
doc.write(`<html><head><style>${code.value}</style></head><body><div class="box">CSS Demo</div></body></html>`)
doc.close()
isRunning.value = false
}
// 2. JavaScript / Console
else if (selectedLanguage.value === 'javascript') {
const consoleTemplate = getConsoleTemplate(code.value)
doc.write(consoleTemplate)
doc.close()
isRunning.value = false
}
// 3. Vue 3 (Global Build)
else if (selectedLanguage.value === 'vue') {
const vueTemplate = `
<!DOCTYPE html>
<html>
<head>
<style>body { font-family: sans-serif; background: #fff; color: #333; padding: 20px; }</style>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
</head>
<body>
${code.value}
</body>
</html>
`
doc.write(vueTemplate)
doc.close()
isRunning.value = false
}
// 4. React (Babel Standalone)
else if (selectedLanguage.value === 'react') {
const reactTemplate = `
<!DOCTYPE html>
<html>
<head>
<style>body { font-family: sans-serif; background: #fff; color: #333; margin: 0; }</style>
<script src="https://unpkg.com/react@18/umd/react.development.js"><\/script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"><\/script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"><\/script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
${code.value}
<\/script>
</body>
</html>
`
doc.write(reactTemplate)
doc.close()
isRunning.value = false
}
// 5. Python (Pyodide Wasm)
else if (selectedLanguage.value === 'python') {
// Python 加载比较慢，显示 Loading
const pythonTemplate = `
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #1e1e1e; color: #fff; font-family: monospace; padding: 20px; font-size: 14px; }
.log { border-bottom: 1px solid #333; padding: 4px 0; white-space: pre-wrap; }
.error { color: #ff6b6b; }
.loading { color: #d4b383; }
</style>
<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"><\/script>
</head>
<body>
<div id="output">
<div class="loading">Initializing Python Environment (Pyodide)... This may take a moment.</div>
</div>
<script>
const output = document.getElementById('output');
function print(text, type = '') {
const div = document.createElement('div');
div.className = 'log ' + type;
div.textContent = text;
output.appendChild(div);
}
async function main() {
try {
if (!window.pyodide) {
window.pyodide = await loadPyodide();
// 清除 Loading 文字
output.innerHTML = '';
print("Python 3.11 Ready.", "loading");
print("------------------");
}
// 重定向 stdout
pyodide.setStdout({ batched: (msg) => print(msg) });
// 运行用户代码
await pyodide.runPythonAsync(\`${code.value.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`);
} catch (err) {
print(err, 'error');
}
}
main();
<\/script>
</body>
</html>
`
doc.write(pythonTemplate)
doc.close()
isRunning.value = false
}
// 6. Backend Languages (Go, PHP, Node.js)
else if (['go', 'php', 'node'].includes(selectedLanguage.value)) {
// 显示 Loading 状态
const loadingTemplate = `
<!DOCTYPE html>
<html>
<body style="background:#1e1e1e;padding:20px;font-family:'JetBrains Mono', monospace;font-size:13px;color:#d4d4d8;margin:0;">
<div style="color: #d4b383;">Running code on server...</div>
</body>
</html>
`
doc.write(loadingTemplate)
try {
const response = await fetch('http://localhost:8081/api/run', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
language: selectedLanguage.value,
code: code.value
})
})
const result = await response.json()
let outputHtml = ''
if (result.error) {
outputHtml = `<div style="color: #ef4444; white-space: pre-wrap;">Error:\n${result.error}</div>`
} else {
outputHtml = `<div style="white-space: pre-wrap;">${result.output}</div>`
if (result.exitCode !== 0) {
outputHtml += `<div style="color: #ef4444; margin-top: 10px; border-top: 1px solid #333; padding-top: 5px;">Process exited with code ${result.exitCode}</div>`
}
}
const resultTemplate = `
<!DOCTYPE html>
<html>
<body style="background:#1e1e1e;padding:20px;font-family:'JetBrains Mono', monospace;font-size:13px;color:#d4d4d8;margin:0;">
${outputHtml}
<div style="margin-top: 20px; font-size: 11px; color: #666;">Execution time: ${result.duration}ms</div>
</body>
</html>
`
// 重新写入结果
doc.open()
doc.write(resultTemplate)
doc.close()
} catch (err) {
const errorTemplate = `
<!DOCTYPE html>
<html>
<body style="background:#1e1e1e;padding:20px;font-family:'JetBrains Mono', monospace;font-size:13px;color:#ef4444;margin:0;">
<div>Failed to connect to server. Ensure backend is running at http://localhost:8081</div>
<div style="margin-top:10px;">${err}</div>
</body>
</html>
`
doc.open()
doc.write(errorTemplate)
doc.close()
} finally {
isRunning.value = false
}
}
}
// Helper: Custom Console for JS
const getConsoleTemplate = (jsCode: string) => {
return `
<!DOCTYPE html>
<html>
<body style="background:#1e1e1e;padding:20px;font-family:'JetBrains Mono', monospace;font-size:13px;color:#d4d4d8;margin:0;">
<div id="console"></div>
<script type="module">
const logDiv = document.getElementById('console');
const originalLog = console.log;
// 劫持 console.log
console.log = function(...args) {
const line = document.createElement('div');
line.style.borderBottom = '1px solid #333';
line.style.padding = '6px 0';
// 简单的对象转字符串
line.textContent = '> ' + args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
logDiv.appendChild(line);
originalLog.apply(console, args);
};
window.onerror = function(msg, url, line) {
const err = document.createElement('div');
err.style.color = '#ef4444';
err.style.marginTop = '8px';
err.textContent = 'Error: ' + msg;
logDiv.appendChild(err);
};
try {
${jsCode}
} catch(e) { console.error(e); }
<\/script>
</body>
</html>
`
}
const handleCodeChange = () => {
highlightCode()
// 对于非 Web 语言（如 Python/React），不自动运行，等待用户点击 Run
if (['html', 'css', 'javascript'].includes(selectedLanguage.value)) {
// Debounce auto-run for lightweight languages
clearTimeout(window.runTimer)
window.runTimer = setTimeout(() => runCode(), 1000)
}
}
const handleLanguageChange = () => {
code.value = templates[selectedLanguage.value] || ''
highlightCode()
runCode()
}
const clearConsole = () => {
if (previewFrame.value) {
const doc = previewFrame.value.contentDocument
if (doc) doc.body.innerHTML = '<div id="console"></div>' // 简单清空
}
}
onMounted(() => {
highlightCode()
// Initial Run
setTimeout(() => runCode(), 500)
})
</script>
<style scoped>
.bg-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.07'/%3E%3C/svg%3E");
}
pre, textarea, code {
font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #d4b383;
}
</style>

188
client/src/components/CustomSelect.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<div class="custom-select-container relative group" @click="toggleDropdown" ref="containerRef">
<!-- 选中值显示区域 -->
<div class="selected-value flex items-center" :class="{ 'placeholder': !selectedOption }">
<span class="flex-1 truncate">{{ selectedOption ? selectedOption.label : placeholder }}</span>
</div>
<!-- 下拉箭头 -->
<div class="dropdown-arrow ml-2" :class="{ 'open': isDropdownOpen }">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<!-- 下拉选项列表 -->
<div v-if="isDropdownOpen" class="dropdown-options absolute top-full left-0 right-0 mt-1 z-[9999]" ref="dropdownRef">
<div
v-for="option in options"
:key="option.value"
class="option-item"
:class="{ 'selected': option.value === modelValue }"
@click.stop="selectOption(option)"
>
{{ option.label }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
// Props 定义
interface Option {
value: string | number
label: string
}
const props = defineProps<{
modelValue: string | number
options: Option[]
placeholder?: string
}>()
// Emits 定义
const emit = defineEmits<{
'update:modelValue': [value: string | number]
}>()
// 组件状态
const isDropdownOpen = ref(false)
const containerRef = ref<HTMLDivElement | null>(null)
const dropdownRef = ref<HTMLDivElement | null>(null)
// 计算属性：当前选中的选项
const selectedOption = computed(() => {
return props.options.find(option => option.value === props.modelValue)
})
// 切换下拉列表显示/隐藏
const toggleDropdown = () => {
isDropdownOpen.value = !isDropdownOpen.value
}
// 选择选项
const selectOption = (option: Option) => {
emit('update:modelValue', option.value)
isDropdownOpen.value = false
}
// 点击外部关闭下拉列表
const handleClickOutside = (event: MouseEvent) => {
if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
isDropdownOpen.value = false
}
}
// 监听modelValue变化，更新选中状态
watch(() => props.modelValue, () => {
// 当外部更新modelValue时，不需要额外操作，selectedOption会自动更新
})
// 生命周期钩子
onMounted(() => {
// 添加点击外部关闭事件监听
document.addEventListener('click', handleClickOutside)
})
onUnmounted(() => {
// 移除事件监听
document.removeEventListener('click', handleClickOutside)
})
</script>
<style scoped>
.custom-select-container {
width: 100%;
display: flex;
align-items: center;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
color: #ececec;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
}
.custom-select-container:hover {
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.selected-value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selected-value.placeholder {
color: #888888;
}
.dropdown-arrow {
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
color: #888888;
}
.dropdown-arrow.open {
transform: rotate(180deg);
}
.dropdown-options {
z-index: 99999999999999999999;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow-y: auto;
}
.option-item {
padding: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.option-item:hover {
background: rgba(212, 179, 131, 0.1);
color: #d4b383;
}
.option-item.selected {
background: rgba(212, 179, 131, 0.2);
color: #d4b383;
font-weight: 500;
}
/* 滚动条样式 */
.dropdown-options::-webkit-scrollbar {
width: 6px;
}
.dropdown-options::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.dropdown-options::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.dropdown-options::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
</style>

12
client/src/components/Footer.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<footer class="py-8 text-center border-t border-white/5 relative z-10">
<div class="flex justify-center items-center gap-4 mb-4">
<a @click="window.open('admin.html', '_blank')" class="text-xs text-art-muted/30 hover:text-art-accent cursor-pointer">管理入口</a>
</div>
<p class="text-art-muted text-xs font-mono tracking-widest opacity-50">&copy; 2024 年糕崽崽. 保留所有权利.</p>
</footer>
</template>
<script setup lang="ts">
// Footer组件的逻辑可以在这里添加
</script>

122
client/src/components/Header.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<header class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="main-header">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="cursor-pointer group" @click="goTo('/')">
<span class="font-serif text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">年糕崽崽.Dev</span>
</div>
<nav class="hidden md:flex items-center gap-10">
<button
@click="goTo('/')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'home' }"
data-target="home"
>
首页
</button>
<button
@click="goTo('/blog')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'blog' }"
data-target="blog"
>
思考
</button>
<button
@click="goTo('/works')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'works' }"
data-target="works"
>
作品
</button>
<button
@click="goTo('/snippets')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'snippets' }"
data-target="snippets"
>
代码
</button>
<button
@click="goTo('/about')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'about' }"
data-target="about"
>
关于
</button>
</nav>
<div class="hidden md:flex items-center gap-4">
<a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
<button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
合作
</button>
</div>
<button class="md:hidden text-white" @click="toggleMobileMenu">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</header>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const activeNav = ref('home')
const toggleMobileMenu = () => {
const menu = document.getElementById('mobile-menu')
if (menu) {
if (menu.classList.contains('menu-closed')) {
menu.classList.remove('menu-closed')
menu.classList.add('menu-open')
document.body.style.overflow = 'hidden'
} else {
menu.classList.remove('menu-open')
menu.classList.add('menu-closed')
document.body.style.overflow = ''
}
}
}
const navigate = (target: string) => {
router.push(target)
toggleMobileMenu()
}
const updateActiveNav = () => {
const path = route.path
if (path === '/') activeNav.value = 'home'
else if (path === '/blog') activeNav.value = 'blog'
else if (path === '/works' || path.startsWith('/works/')) activeNav.value = 'works'
else if (path === '/snippets') activeNav.value = 'snippets'
else if (path === '/services') activeNav.value = 'services'
else if (path === '/about') activeNav.value = 'about'
}
onMounted(() => {
updateActiveNav()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
})
watch(
() => route.path,
() => {
updateActiveNav()
}
)
const goTo = (target: string) => {
router.push(target)
}
</script>
<style scoped>
/* 组件特定样式可以在这里添加 */
</style>

40
client/src/components/Icon.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<i
:data-lucide="name"
:class="className"
:style="style"
ref="iconRef"
></i>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
interface Props {
name: string
className?: string
style?: Record<string, any>
}
const props = withDefaults(defineProps<Props>(), {
className: '',
style: () => ({})
})
const iconRef = ref<HTMLElement | null>(null)
const updateIcon = () => {
if (window.lucide && iconRef.value) {
// 重新创建图标
window.lucide.createIcons()
}
}
onMounted(() => {
updateIcon()
})
watch(() => props.name, () => {
updateIcon()
})
</script>

194
client/src/components/InquiryModal.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div id="inquiry-modal" class="fixed inset-0 z-[100] bg-[#050505]/95 backdrop-blur-xl hidden items-center justify-center p-4 transition-opacity duration-300">
<div class="relative w-full max-w-4xl bg-[#080808] border border-white/10 overflow-hidden flex flex-col md:flex-row shadow-2xl">
<div class="hidden md:flex w-1/3 bg-[#0c0c0c] border-r border-white/5 p-12 flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-noise opacity-10"></div>
<div class="absolute -top-20 -left-20 w-64 h-64 bg-art-accent/10 rounded-full blur-[80px]"></div>
<div class="relative z-10">
<h3 class="font-serif text-3xl text-white italic mb-6 leading-tight">
Let's build<br>something<br>unreal.
</h3>
<p class="font-mono text-xs text-white/40 leading-relaxed">
告诉我你的构想。<br>
我将提供架构与代码，<br>
将想象变为现实。
</p>
</div>
<div class="relative z-10 font-mono text-[10px] text-white/20 tracking-widest">
LAT: 30.2741° N<br>
LONG: 120.1551° E<br>
HANGZHOU, CN
</div>
</div>
<div class="w-full md:w-2/3 p-10 md:p-16 relative bg-[#080808]">
<button @click="closeModal" class="absolute top-6 right-6 text-white/30 hover:text-white transition-colors z-20">
<i data-lucide="x" class="w-6 h-6"></i>
</button>
<form id="inquiry-form" class="space-y-10 relative z-10" @submit.prevent="handleSubmit">
<div class="space-y-8">
<p class="font-mono text-xs text-art-accent uppercase tracking-widest border-b border-white/10 pb-2 mb-6">01 // 身份识别</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="relative group/input">
<input
name="name"
type="text"
class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent"
placeholder="Name"
v-model="formData.name"
>
<label class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-not-placeholder-shown:-top-4 peer-not-placeholder-shown:text-white/50 pointer-events-none">您的称呼</label>
</div>
<div class="relative group/input">
<input
name="company"
type="text"
class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent"
placeholder="Company"
v-model="formData.company"
>
<label class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-not-placeholder-shown:-top-4 peer-not-placeholder-shown:text-white/50 pointer-events-none">公司 / 组织</label>
</div>
</div>
<div class="relative group/input">
<input
name="contact"
type="text"
class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent"
placeholder="Contact"
v-model="formData.contact"
>
<label class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-not-placeholder-shown:-top-4 peer-not-placeholder-shown:text-white/50 pointer-events-none">联系方式 (Email / WeChat)</label>
</div>
</div>
<div class="space-y-6">
<p class="font-mono text-xs text-art-accent uppercase tracking-widest border-b border-white/10 pb-2 mb-6">02 // 项目细节</p>
<div class="space-y-3">
<label class="text-xs font-mono text-white/30 block mb-2">预估预算范围</label>
<div class="flex flex-wrap gap-3">
<label class="cursor-pointer group">
<input
type="radio"
name="budget"
value="10k-50k"
class="peer hidden"
v-model="formData.budget"
>
<span class="px-4 py-2 border border-white/10 rounded-none text-xs font-mono text-white/50 hover:border-art-accent hover:text-white transition-all peer-checked:bg-art-accent peer-checked:text-black peer-checked:border-art-accent">10k - 50k</span>
</label>
<label class="cursor-pointer group">
<input
type="radio"
name="budget"
value="50k-200k"
class="peer hidden"
v-model="formData.budget"
>
<span class="px-4 py-2 border border-white/10 rounded-none text-xs font-mono text-white/50 hover:border-art-accent hover:text-white transition-all peer-checked:bg-art-accent peer-checked:text-black peer-checked:border-art-accent">50k - 200k</span>
</label>
<label class="cursor-pointer group">
<input
type="radio"
name="budget"
value="200k+"
class="peer hidden"
v-model="formData.budget"
>
<span class="px-4 py-2 border border-white/10 rounded-none text-xs font-mono text-white/50 hover:border-art-accent hover:text-white transition-all peer-checked:bg-art-accent peer-checked:text-black peer-checked:border-art-accent">200k +</span>
</label>
</div>
</div>
<div class="relative group/input mt-8">
<textarea
name="description"
rows="1"
class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent resize-none min-h-[40px]"
placeholder="Brief"
v-model="formData.description"
@input="autoResizeTextarea"
></textarea>
<label class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-not-placeholder-shown:-top-4 peer-not-placeholder-shown:text-white/50 pointer-events-none">一句话描述需求</label>
</div>
</div>
<div class="pt-6">
<button
type="submit"
class="group relative w-full overflow-hidden bg-white text-black rounded-full font-bold hover:scale-105 transition-transform"
>
<div class="absolute inset-0 w-0 bg-art-accent transition-all duration-[250ms] ease-out group-hover:w-full"></div>
<span class="relative flex items-center justify-between z-10 px-8 py-4">
<span class="font-mono uppercase tracking-widest text-sm">INITIATE_PROTOCOL // 发送</span>
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
</span>
</button>
<p class="mt-4 text-[10px] text-white/20 font-mono text-center tracking-widest">SECURED BY DIGITAL FINGERPRINTING</p>
</div>
</form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formData = ref({
name: '',
company: '',
contact: '',
budget: '',
description: ''
})
const openModal = () => {
const modal = document.getElementById('inquiry-modal')
if (modal) {
modal.classList.remove('hidden')
modal.classList.add('flex')
document.body.style.overflow = 'hidden'
}
}
const closeModal = () => {
const modal = document.getElementById('inquiry-modal')
if (modal) {
modal.classList.remove('flex')
modal.classList.add('hidden')
document.body.style.overflow = ''
}
}
const handleSubmit = () => {
console.log('Form submitted:', formData.value)
// 这里可以添加表单提交逻辑
closeModal()
showToast('合作咨询已发送，我们会尽快与您联系！')
}
const autoResizeTextarea = (event: Event) => {
const textarea = event.target as HTMLTextAreaElement
textarea.style.height = ''
textarea.style.height = textarea.scrollHeight + 'px'
}
const showToast = (message: string, type: string = 'success') => {
const container = document.getElementById('toast-container')
if (container) {
const toast = document.createElement('div')
toast.className = `toast ${type === 'success' ? 'toast-success' : 'toast-error'}`
toast.innerHTML = `<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-5 h-5 ${type === 'success' ? 'text-[#d4b383]' : 'text-red-500'}"></i><span class="text-sm font-medium">${message}</span>`
container.appendChild(toast)
if (window.lucide) {
window.lucide.createIcons()
}
requestAnimationFrame(() => toast.classList.add('show'))
setTimeout(() => {
toast.classList.remove('show')
setTimeout(() => toast.remove(), 400)
}, 3000)
}
}
// 暴露方法给全局使用
window.openInquiry = openModal
window.closeInquiry = closeModal
</script>

31
client/src/components/MobileMenu.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div id="mobile-menu" class="fixed inset-0 z-40 bg-art-bg/95 backdrop-blur-xl flex flex-col items-center justify-center space-y-8 transition-all duration-300 menu-closed md:hidden">
<button @click="toggleMobileMenu" class="absolute top-6 right-6 text-white"><i data-lucide="x" class="w-8 h-8"></i></button>
<a @click="navigate('/')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">首页</a>
<a @click="navigate('/blog')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">思考</a>
<a @click="navigate('/works')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">作品</a>
<a @click="navigate('/snippets')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">代码</a>
<a @click="navigate('/about')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">关于</a>
<a @click="window.open('admin.html', '_blank')" class="font-mono text-sm text-art-muted mt-8">管理入口</a>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const toggleMobileMenu = () => {
const menu = document.getElementById('mobile-menu')
if (menu) {
menu.classList.remove('menu-open')
menu.classList.add('menu-closed')
document.body.style.overflow = ''
}
}
const navigate = (target: string) => {
router.push(target)
toggleMobileMenu()
}
</script>

97
client/src/components/SnippetModal.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div id="snippet-modal" class="fixed inset-0 z-[100] modal-overlay hidden flex items-center justify-center p-4 md:p-10 opacity-0 transition-opacity duration-300">
<div class="bg-[#0a0a0c] border border-white/10 w-full max-w-6xl h-full md:h-[80vh] rounded-2xl flex flex-col overflow-hidden shadow-2xl transform scale-95 transition-transform duration-300" id="modal-content">
<div class="h-16 border-b border-white/10 flex items-center justify-between px-6 bg-white/5">
<div class="flex items-center gap-3"><i data-lucide="code-2" class="text-art-accent"></i><span class="font-bold text-white" id="modal-title">{{ modalTitle }}</span></div>
<button @click="closeSnippet" class="p-2 hover:bg-white/10 rounded-full text-white/50 hover:text-white transition-colors"><i data-lucide="x" class="w-5 h-5"></i></button>
</div>
<div class="flex-1 overflow-hidden">
<!-- 使用CodePreview组件 -->
<CodePreview
:initial-code="modalCode"
:initial-language="detectLanguage(modalCode)"
@code-change="handleCodeChange"
@language-change="handleLanguageChange"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CodePreview from './CodePreview.vue'
const modalTitle = ref('Code')
const modalCode = ref('')
// 检测代码语言
const detectLanguage = (code: string): string => {
// 简单的语言检测逻辑，可以根据需要扩展
if (code.includes('<html') || code.includes('<div') || code.includes('<body')) {
return 'html'
} else if (code.includes('import React') || code.includes('React.')) {
return 'react'
} else if (code.includes('<template') || code.includes('export default')) {
return 'vue'
} else if (code.includes('class ') && code.includes('{')) {
return 'typescript'
} else if (code.includes('function ') || code.includes('const ') || code.includes('let ') || code.includes('var ')) {
return 'javascript'
} else if (code.includes('@import') || code.includes('{') && code.includes(':') && code.includes(';')) {
return 'css'
} else if (code.includes('print(') || code.includes('def ')) {
return 'python'
} else {
return 'html'
}
}
const showSnippet = (title: string, code: string) => {
modalTitle.value = title
modalCode.value = code
const modal = document.getElementById('snippet-modal')
if (modal) {
modal.classList.remove('hidden')
modal.classList.add('flex')
setTimeout(() => {
modal.style.opacity = '1'
const content = document.getElementById('modal-content')
if (content) {
content.style.transform = 'scale(1)'
}
}, 10)
document.body.style.overflow = 'hidden'
}
}
const closeSnippet = () => {
const modal = document.getElementById('snippet-modal')
if (modal) {
modal.style.opacity = '0'
const content = document.getElementById('modal-content')
if (content) {
content.style.transform = 'scale(0.95)'
}
setTimeout(() => {
modal.classList.remove('flex')
modal.classList.add('hidden')
document.body.style.overflow = ''
}, 300)
}
}
const handleCodeChange = (newCode: string) => {
modalCode.value = newCode
}
const handleLanguageChange = (newLanguage: string) => {
// 可以在这里处理语言变化事件
console.log('Language changed to:', newLanguage)
}
// 暴露方法给全局使用
window.showSnippet = showSnippet
window.closeSnippet = closeSnippet
</script>

335
client/src/components/admin/AdminLayout.vue Normal file
View File

@@ -0,0 +1,335 @@
<template>
<div class="admin-layout">
<!-- Sidebar Navigation -->
<aside class="admin-sidebar">
<div class="sidebar-header">
<h1 class="sidebar-title">管理后台</h1>
</div>
<nav class="sidebar-nav">
<ul>
<li>
<router-link to="/admin/dashboard" class="nav-link" active-class="active">
<span class="nav-icon">📊</span>
<span class="nav-text">仪表盘</span>
</router-link>
</li>
<li>
<router-link to="/admin/users" class="nav-link" active-class="active">
<span class="nav-icon">👥</span>
<span class="nav-text">用户管理</span>
</router-link>
</li>
<li>
<router-link to="/admin/roles" class="nav-link" active-class="active">
<span class="nav-icon">🔒</span>
<span class="nav-text">角色管理</span>
</router-link>
</li>
<li>
<router-link to="/admin/posts" class="nav-link" active-class="active">
<span class="nav-icon">📝</span>
<span class="nav-text">文章管理</span>
</router-link>
</li>
<li>
<router-link to="/admin/works" class="nav-link" active-class="active">
<span class="nav-icon">🎨</span>
<span class="nav-text">作品管理</span>
</router-link>
</li>
<li>
<router-link to="/admin/snippets" class="nav-link" active-class="active">
<span class="nav-icon">💻</span>
<span class="nav-text">代码片段</span>
</router-link>
</li>
<li>
<router-link to="/admin/settings" class="nav-link" active-class="active">
<span class="nav-icon">⚙️</span>
<span class="nav-text">系统配置</span>
</router-link>
</li>
<li>
<router-link to="/admin/logs" class="nav-link" active-class="active">
<span class="nav-icon">📋</span>
<span class="nav-text">操作日志</span>
</router-link>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<button @click="handleLogout" class="logout-btn">
<span class="nav-icon">🚪</span>
<span class="nav-text">退出登录</span>
</button>
</div>
</aside>
<!-- Main Content Area -->
<main class="admin-main">
<!-- Top Navigation Bar -->
<header class="admin-header">
<div class="header-left">
<button class="toggle-btn" @click="toggleSidebar">
☰
</button>
</div>
<div class="header-right">
<div class="user-info">
<span class="username">{{ currentUser.username }}</span>
<span class="role">({{ currentUser.role }})</span>
</div>
</div>
</header>
<!-- Content Container -->
<div class="admin-content">
<router-view />
</div>
</main>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from '../../composables/useToast'
const router = useRouter()
const toast = useToast()
const isSidebarOpen = ref(true)
const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value
}
const handleLogout = () => {
localStorage.removeItem('token')
localStorage.removeItem('user')
toast.showToast('退出登录成功', 'success')
router.push('/login')
}
// Check if user is authenticated
onMounted(() => {
const token = localStorage.getItem('token')
if (!token) {
router.push('/login')
}
})
</script>
<style scoped>
.admin-layout {
display: flex;
min-height: 100vh;
background-color: #050505;
color: #ececec;
}
/* Sidebar Styles */
.admin-sidebar {
width: 250px;
background: rgba(5, 5, 5, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.03);
color: white;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.sidebar-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
color: #d4b383;
font-family: 'Playfair Display', serif;
font-style: italic;
}
.sidebar-nav {
flex: 1;
padding: 1rem 0;
}
.sidebar-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
border-left: 3px solid transparent;
position: relative;
}
.nav-link:hover {
background-color: rgba(212, 179, 131, 0.1);
color: white;
border-left-color: rgba(212, 179, 131, 0.3);
}
.nav-link.active {
background-color: rgba(212, 179, 131, 0.15);
color: #d4b383;
border-left-color: #d4b383;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.1);
}
.nav-icon {
margin-right: 0.75rem;
font-size: 1.1rem;
}
.nav-text {
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
}
.sidebar-footer {
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.logout-btn {
display: flex;
align-items: center;
width: 100%;
padding: 0.75rem 1.5rem;
background-color: transparent;
color: #d4b383;
border: none;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
}
.logout-btn:hover {
background-color: rgba(212, 179, 131, 0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 179, 131, 0.1);
}
/* Main Content Styles */
.admin-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header Styles */
.admin-header {
background: rgba(5, 5, 5, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toggle-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
padding: 0.5rem;
border-radius: 0.375rem;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toggle-btn:hover {
background-color: rgba(212, 179, 131, 0.1);
color: #d4b383;
transform: scale(1.1);
}
.user-info {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
}
.username {
font-weight: 600;
color: #d4b383;
}
.role {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
}
/* Content Area */
.admin-content {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
}
/* Scrollbar Styles */
.admin-content::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.admin-content::-webkit-scrollbar-track {
background: transparent;
}
.admin-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
transition: all 0.3s ease;
}
.admin-content::-webkit-scrollbar-thumb:hover {
background: #d4b383;
box-shadow: 0 0 10px rgba(212, 179, 131, 0.4);
}
.admin-content::-webkit-scrollbar-corner {
background: transparent;
}
/* Responsive Design */
@media (max-width: 768px) {
.admin-sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
z-index: 1000;
transform: translateX(0);
}
.admin-sidebar.collapsed {
transform: translateX(-100%);
}
}
</style>

65
client/src/composables/useInteractions.ts Normal file
View File

@@ -0,0 +1,65 @@
import { onMounted, onBeforeUnmount } from 'vue'
export const useInteractions = () => {
// 滚动进度条
const updateScrollProgress = () => {
const scrollTop = window.scrollY
const docHeight = document.documentElement.scrollHeight
const winHeight = window.innerHeight
const scrollPercent = scrollTop / (docHeight - winHeight)
const progressBar = document.getElementById('scroll-progress')
if (progressBar) {
progressBar.style.width = `${scrollPercent * 100}%`
}
}
// 鼠标倾斜效果
const initTiltEffect = () => {
const tiltCards = document.querySelectorAll('.tilt-card')
tiltCards.forEach(card => {
card.addEventListener('mousemove', (e) => {
const cardRect = card.getBoundingClientRect()
const x = e.clientX - cardRect.left
const y = e.clientY - cardRect.top
const xPercent = (x / cardRect.width) * 100
const yPercent = (y / cardRect.height) * 100
card.style.setProperty('--mouse-x', `${xPercent}%`)
card.style.setProperty('--mouse-y', `${yPercent}%`)
})
})
}
// 初始化所有交互功能
const init = () => {
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
// 添加滚动事件监听
window.addEventListener('scroll', updateScrollProgress)
// 初始化倾斜效果
initTiltEffect()
}
// 清理资源
const cleanup = () => {
window.removeEventListener('scroll', updateScrollProgress)
}
onMounted(() => {
init()
})
onBeforeUnmount(() => {
cleanup()
})
return {
updateScrollProgress,
initTiltEffect
}
}

35
client/src/composables/useScrollAnimation.ts Normal file
View File

@@ -0,0 +1,35 @@
import { onMounted, onUnmounted } from 'vue'
export function useScrollAnimation() {
let observer: IntersectionObserver | null = null
const observe = () => {
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible')
// Optional: Stop observing once visible
// observer?.unobserve(entry.target)
}
})
}, {
threshold: 0.1,
rootMargin: '50px' // Pre-load slightly before element comes into view
})
document.querySelectorAll('.animate-slide-down, .animate-reveal').forEach(el => {
observer?.observe(el)
})
}
onMounted(() => {
// Small delay to ensure DOM is ready
setTimeout(observe, 100)
})
onUnmounted(() => {
if (observer) {
observer.disconnect()
}
})
}

43
client/src/composables/useToast.ts Normal file
View File

@@ -0,0 +1,43 @@
export const useToast = () => {
const showToast = (message: string, type: 'success' | 'error' = 'success') => {
const container = document.getElementById('toast-container')
if (!container) return
const toast = document.createElement('div')
toast.className = `toast ${type === 'success' ? 'toast-success' : 'toast-error'}`
toast.innerHTML = `
<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-5 h-5 ${type === 'success' ? 'text-[#d4b383]' : 'text-red-500'}"></i>
<span class="text-sm font-medium">${message}</span>
`
container.appendChild(toast)
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
// 显示动画
requestAnimationFrame(() => toast.classList.add('show'))
// 3秒后自动隐藏
setTimeout(() => {
toast.classList.remove('show')
setTimeout(() => toast.remove(), 400)
}, 3000)
}
// 便捷方法
const success = (message: string) => {
showToast(message, 'success')
}
const error = (message: string) => {
showToast(message, 'error')
}
return {
showToast,
success,
error
}
}

8
client/src/main.ts Normal file
View File

@@ -0,0 +1,8 @@
import { createApp } from "vue"
import App from "./App.vue"
import "./style.css"
import router from "./router"
const app = createApp(App)
app.use(router)
app.mount("#app")

159
client/src/pages/About.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<section id="about" class="page-section block animate-slide-down">
<div class="max-w-6xl mx-auto pt-32 px-6 pb-20">
<!-- Loading state -->
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<!-- Error state -->
<div v-else-if="error" class="text-center text-red-500 py-20">
<p class="mb-4">{{ error }}</p>
<button @click="fetchProfileData" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
</div>
<!-- Profile content -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="space-y-8">
<div>
<span class="text-art-accent font-mono text-sm tracking-widest uppercase">个人档案</span>
<h2 class="font-serif text-5xl italic text-white mt-2 mb-6">关于我</h2>
</div>
<div class="flex items-center gap-6">
<div class="w-24 h-24 rounded-full overflow-hidden border-2 border-art-accent/50 shadow-2xl">
<img
:src="profile.avatar"
alt="Avatar"
class="w-full h-full object-cover"
>
</div>
<div class="space-y-2">
<h3 class="text-2xl font-bold text-white">{{ profile.name }}</h3>
<div class="flex items-center gap-2 text-sm text-art-muted">
<i data-lucide="map-pin" class="w-4 h-4 text-art-accent"></i>
<span>{{ profile.location }}</span>
</div>
</div>
</div>
<div class="prose prose-invert text-art-muted font-light leading-relaxed">
<p v-html="profile.bio"></p>
</div>
<div class="bg-white/5 border border-white/5 p-6 rounded-xl backdrop-blur-sm mt-6">
<h4 class="text-white font-bold mb-4 flex items-center gap-2">
<i data-lucide="contact" class="w-4 h-4 text-art-accent"></i> 联系方式
</h4>
<div class="space-y-3 text-sm">
<a :href="'mailto:' + profile.contact.email" class="flex items-center gap-2 text-art-muted hover:text-white transition-colors">
<i data-lucide="mail" class="w-4 h-4 text-art-accent"></i>
<span>{{ profile.contact.email }}</span>
</a>
<div class="flex items-center gap-2 text-sm text-art-muted">
<i data-lucide="message-circle" class="w-4 h-4 text-art-accent"></i>
<span>WeChat: {{ profile.contact.wechat }}</span>
</div>
</div>
</div>
</div>
<div class="space-y-8">
<div class="bg-white/5 border border-white/5 p-8 rounded-2xl backdrop-blur-sm">
<h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
<i data-lucide="cpu" class="w-5 h-5 text-art-accent"></i> 技术栈
</h3>
<div class="flex flex-wrap gap-2 mb-10">
<span
v-for="(tech, index) in profile.techStack"
:key="index"
class="px-3 py-1 bg-white/5 rounded-full text-xs text-white/80 border border-white/10"
>
{{ tech }}
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { useScrollAnimation } from '../composables/useScrollAnimation'
// 定义类型
interface Profile {
id: string
name: string
avatar: string
location: string
bio: string
contact: {
email: string
wechat: string
}
techStack: string[]
}
const profile = ref<Profile>({
id: '',
name: '年糕崽崽',
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao&backgroundColor=b6e3f4',
location: '中国 · 浙江杭州',
bio: '嗨！我是年糕崽崽，一名热衷于探索数字边界的前端架构师。我的职业生涯始于对像素级完美的执念。目前，我专注于高性能 B 端应用的体验升级。',
contact: {
email: 'hello@niangao.dev',
wechat: 'Niangao_Dev'
},
techStack: ['Vue 3', 'React', 'TypeScript', 'Three.js', 'Golang', 'Tailwind CSS', 'Vite', 'Gin']
})
const loading = ref(false)
const error = ref('')
// 模拟API调用，实际项目中应替换为真实API
const fetchProfileData = async () => {
loading.value = true
error.value = ''
try {
// 实际项目中应调用真实API
// const response = await fetch(`${API_BASE}/profile`)
// const data = await response.json()
// profile.value = data
// 使用模拟数据作为备选
profile.value = {
id: '1',
name: '年糕崽崽',
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao&backgroundColor=b6e3f4',
location: '中国 · 浙江杭州',
bio: '嗨！我是年糕崽崽，一名热衷于探索数字边界的前端架构师。我的职业生涯始于对像素级完美的执念。目前，我专注于高性能 B 端应用的体验升级。',
contact: {
email: 'hello@niangao.dev',
wechat: 'Niangao_Dev'
},
techStack: ['Vue 3', 'React', 'TypeScript', 'Three.js', 'Golang', 'Tailwind CSS', 'Vite', 'Gin']
}
} catch (err) {
console.error('Error fetching profile data:', err)
error.value = '获取个人资料失败，请稍后重试'
// 保持原有静态数据
} finally {
loading.value = false
}
}
onBeforeMount(() => {
fetchProfileData()
})
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
})
</script>

82
client/src/pages/Blog.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<section id="blog" class="page-section block animate-slide-down">
<div class="max-w-4xl mx-auto pt-32 px-6 pb-20">
<div class="mb-16 text-center">
<h2 class="font-serif text-5xl italic text-white mb-6">深度思考</h2>
<p class="text-art-muted max-w-lg mx-auto">关于前端技术、交互设计以及数字艺术的深度思考。</p>
</div>
<!-- Loading state -->
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<!-- Error state -->
<div v-else-if="error" class="text-center text-red-500 py-20">
<p class="mb-4">{{ error }}</p>
<button @click="fetchBlogPosts" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
</div>
<!-- Blog posts list -->
<div v-else class="space-y-12" id="blog-list-container">
<!-- Blog posts will be rendered here -->
<div
v-for="post in blogPosts"
:key="post.id"
class="art-card rounded-2xl p-8 group cursor-pointer transition-all"
@click="$router.push('/blog/' + post.id)"
>
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
<div class="flex items-center gap-3">
<span class="px-2 py-1 text-[10px] font-mono border border-white/20 rounded-full text-white backdrop-blur-sm">{{ post.category }}</span>
<span class="text-xs font-mono text-art-muted">{{ post.date }}</span>
</div>
<i data-lucide="arrow-up-right" class="w-5 h-5 text-white/50 transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
</div>
<h3 class="text-2xl md:text-3xl font-serif text-white mb-4 group-hover:text-art-accent transition-colors">{{ post.title }}</h3>
<p class="text-art-muted leading-relaxed">{{ post.excerpt }}</p>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { fetchPosts, Post } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'
const blogPosts = ref<Post[]>([])
const loading = ref(false)
const error = ref('')
const fetchBlogPosts = async () => {
loading.value = true
error.value = ''
try {
const posts = await fetchPosts()
blogPosts.value = posts
} catch (err) {
console.error('Error fetching blog posts:', err)
error.value = '获取博客文章失败，请稍后重试'
} finally {
loading.value = false
}
}
onBeforeMount(() => {
fetchBlogPosts()
})
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
})
</script>

115
client/src/pages/BlogDetail.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<section id="blog-detail" class="page-section block animate-slide-down">
<div class="max-w-4xl mx-auto pt-32 px-6 pb-20">
<!-- 返回按钮 -->
<button
@click="$router.push('/blog')"
class="group flex items-center gap-2 text-art-muted hover:text-white transition-colors mb-12"
>
<i data-lucide="arrow-left" class="w-4 h-4 transform group-hover:-translate-x-1 transition-transform"></i>
<span class="text-sm font-medium tracking-wide">返回文章列表</span>
</button>
<!-- Loading state -->
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<!-- Error state -->
<div v-else-if="error" class="text-center text-red-500 py-20">
<p class="mb-4">{{ error }}</p>
<button @click="fetchBlogDetail" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
<button @click="$router.push('/blog')" class="mt-4 px-4 py-2 border border-white/30 text-white rounded hover:bg-white/5 transition-colors">
返回文章列表
</button>
</div>
<!-- Blog detail content -->
<div v-else class="space-y-12">
<!-- 文章信息 -->
<div class="border-b border-white/5 pb-10">
<div class="flex items-center gap-4 mb-6">
<span class="px-3 py-1 border border-white/20 rounded-full text-xs font-mono text-art-accent uppercase tracking-wider">{{ post.category }}</span>
<span class="text-sm text-art-muted">{{ post.date }}</span>
</div>
<h1 class="font-serif text-4xl md:text-5xl lg:text-6xl text-white leading-tight mb-8">{{ post.title }}</h1>
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao"
alt="Avatar"
class="w-full h-full object-cover"
>
</div>
<div>
<div class="text-sm font-medium text-white">年糕崽崽</div>
<div class="text-xs text-art-muted">前端架构师</div>
</div>
</div>
</div>
<!-- 文章内容 -->
<article class="blog-content prose prose-invert prose-lg max-w-none text-art-muted leading-relaxed">
<div v-html="post.content"></div>
</article>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { fetchPost, Post } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'
const route = useRoute()
const router = useRouter()
const postId = route.params.id as string
const post = ref<Post>({
id: postId,
title: '',
category: '',
date: '',
excerpt: '',
content: ''
})
const loading = ref(false)
const error = ref('')
const fetchBlogDetail = async () => {
loading.value = true
error.value = ''
try {
const postData = await fetchPost(postId)
if (postData) {
post.value = postData
} else {
error.value = '未找到该文章'
}
} catch (err) {
console.error('Error fetching blog detail:', err)
error.value = '获取文章详情失败，请稍后重试'
} finally {
loading.value = false
}
}
onBeforeMount(() => {
fetchBlogDetail()
})
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
})
</script>

167
client/src/pages/Home.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<section id="home" class="page-section block">
<!-- Hero -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-24 items-center animate-reveal">
<div class="lg:col-span-7 space-y-8">
<p class="text-art-accent font-mono text-sm tracking-widest uppercase mb-4">前端架构师 & 创意开发者</p>
<h1 class="font-serif text-5xl md:text-7xl lg:text-8xl leading-[1.1] text-white text-glow">
<span class="block italic opacity-80">设计</span>
<span class="block font-bold">铸造数字</span>
<span class="block font-bold pl-12 md:pl-24">灵魂</span>
</h1>
<p class="text-art-muted text-lg md:text-xl max-w-xl leading-relaxed mt-8 font-light">
在代码的逻辑与设计的感性之间寻找平衡。我是<span class="text-white font-bold">年糕崽崽</span>，不仅仅构建页面，更在构建<span class="text-white border-b border-white/20 pb-0.5">沉浸式体验</span>。
</p>
<div class="pt-8 flex items-center gap-6">
<button @click="$router.push('/works')" class="group flex items-center gap-2 text-white border-b border-white pb-1 hover:text-art-accent hover:border-art-accent transition-all">
<span>浏览作品集</span>
<i data-lucide="arrow-right" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform"></i>
</button>
</div>
</div>
<div class="lg:col-span-5 relative h-[400px] lg:h-[600px] w-full flex items-center justify-center">
<div class="relative w-full h-full">
<div class="absolute inset-0 border border-white/10 rounded-full rotate-12 scale-90"></div>
<div class="absolute inset-0 border border-white/5 rounded-full -rotate-6 scale-75"></div>
<div
id="home-hero-work"
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-80 bg-gradient-to-br from-white/10 to-transparent backdrop-blur-md border border-white/10 rounded-sm shadow-2xl rotate-6 hover:rotate-0 transition-transform duration-700 z-10 flex flex-col p-6 justify-between cursor-pointer"
@click="$router.push('/works/' + latestWork.id)"
>
<div class="text-white/50 text-xs">最新作品</div>
<div class="font-serif text-3xl italic text-white">{{ latestWork.title }}</div>
<div class="flex justify-end"><i data-lucide="arrow-up-right" class="text-white"></i></div>
</div>
</div>
</div>
</div>
<!-- Bento Grid -->
<div class="space-y-6 animate-reveal" style="animation-delay: 0.2s;">
<div class="flex items-end justify-between border-b border-white/10 pb-4 mb-8">
<h2 class="font-serif text-3xl italic text-white">精选内容</h2>
<span class="font-mono text-xs text-art-muted">下滑探索更多</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[300px]" id="bento-grid">
<!-- Bento items will be rendered here -->
<div
class="md:col-span-2 art-card rounded-2xl p-8 flex flex-col justify-end group cursor-pointer"
@click="$router.push('/blog/' + featuredPost.id)"
>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-60 mix-blend-overlay"></div>
<div class="relative z-20 space-y-2">
<div class="flex items-center gap-3">
<span class="px-2 py-1 text-[10px] font-mono border border-white/20 rounded-full text-white backdrop-blur-sm">{{ featuredPost.category }}</span>
<span class="text-xs text-white/60">{{ featuredPost.date }}</span>
</div>
<h3 class="font-serif text-3xl text-white group-hover:text-art-accent transition-colors">当极简主义遇见复杂数据：Dashboard 设计哲学</h3>
</div>
</div>
<div
class="art-card rounded-2xl p-8 flex flex-col justify-between group"
>
<div class="flex justify-between items-start">
<i data-lucide="code-2" class="w-8 h-8 text-white/40 group-hover:text-art-accent transition-colors"></i>
<i data-lucide="arrow-up-right" class="w-5 h-5 text-white/20"></i>
</div>
<div>
<div class="text-4xl font-mono font-bold text-white mb-2">120+</div>
<div class="text-sm text-art-muted">开源提交 (Commits)</div>
<div class="text-xs text-art-muted mt-2 opacity-60">Vue, React, Three.js</div>
</div>
</div>
<div
class="art-card rounded-2xl p-6 md:p-8 flex flex-col justify-between group cursor-pointer bg-[#050505]"
@click="$router.push('/snippets')"
>
<div class="font-mono text-xs text-art-muted mb-4">// React Hook: useArt</div>
<div class="font-mono text-sm text-gray-400 overflow-hidden opacity-60 group-hover:opacity-100 transition-opacity">
<span class="code-keyword">const</span> <span class="code-func">useCreative</span> = () => {<br>
&nbsp;&nbsp;<span class="code-keyword">return</span> <span class="code-string">"Innovation"</span>;<br>
}
</div>
<div class="mt-4 flex items-center gap-2 text-sm font-medium text-white">
<span>访问代码实验室</span>
<i data-lucide="chevron-right" class="w-4 h-4 text-art-accent"></i>
</div>
</div>
<div
class="md:col-span-2 art-card rounded-2xl p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 group cursor-pointer bg-gradient-to-r from-art-surface to-transparent"
@click="$router.push('/about')"
>
<div class="space-y-4">
<h3 class="font-serif text-3xl text-white">需要独特的前端架构？</h3>
<p class="text-art-muted max-w-sm">不论是 WebGL 3D 交互网站，还是高性能的 SaaS 管理系统，我都能提供专业的解决方案。</p>
</div>
<div class="h-16 w-16 rounded-full border border-white/20 flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all duration-300">
<i data-lucide="arrow-right" class="w-6 h-6"></i>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { fetchWorks, fetchPosts, Work, Post } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'
const latestWork = ref<Work>({
id: 'nova',
title: 'Nova 交易平台',
category: '金融科技',
year: '2023',
heroImg: '',
desc: '',
techStack: [],
gallery: [],
links: { live: '#' },
next: ''
})
const featuredPost = ref<Post>({
id: 'refactor',
title: '当极简主义遇见复杂数据',
category: '设计思维',
date: '2025-10-24',
excerpt: '',
content: ''
})
const loading = ref(false)
const error = ref('')
const fetchHomeData = async () => {
loading.value = true
error.value = ''
try {
// 获取最新作品
const works = await fetchWorks()
if (works.length > 0) {
latestWork.value = works[0]
}
// 获取精选文章
const posts = await fetchPosts()
if (posts.length > 0) {
featuredPost.value = posts[0]
}
} catch (err) {
console.error('Error fetching home data:', err)
error.value = '获取首页数据失败'
} finally {
loading.value = false
}
}
onBeforeMount(() => {
fetchHomeData()
})
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
})
</script>

96
client/src/pages/Login.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<div class="login-container">
<div class="login-card">
<div class="text-center mb-8">
<h2 class="font-serif text-3xl italic text-white mb-2">后台管理</h2>
<p class="text-art-muted text-sm">请输入您的管理员账号</p>
</div>
<form @submit.prevent="handleLogin" class="space-y-6">
<div class="form-group">
<label for="username" class="block text-sm font-medium text-art-muted mb-2">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-art-accent focus:ring-1 focus:ring-art-accent transition-all"
placeholder="Username"
required
/>
</div>
<div class="form-group">
<label for="password" class="block text-sm font-medium text-art-muted mb-2">密码</label>
<input
type="password"
id="password"
v-model="form.password"
class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-art-accent focus:ring-1 focus:ring-art-accent transition-all"
placeholder="Password"
required
/>
</div>
<button
type="submit"
class="w-full bg-white text-black font-bold py-3 rounded-lg hover:bg-art-accent hover:text-white transition-all transform hover:scale-[1.02] active:scale-[0.98]"
>
登 录
</button>
<div v-if="error" class="text-red-500 text-sm text-center mt-4 bg-red-500/10 py-2 rounded border border-red-500/20">{{ error }}</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from '../composables/useToast'
import { login } from '../services/api'
const router = useRouter()
const toast = useToast()
const form = ref({
username: '',
password: ''
})
const error = ref('')
const handleLogin = async () => {
try {
const response = await login(form.value)
// 保存token到本地存储
localStorage.setItem('token', response.token)
localStorage.setItem('user', JSON.stringify(response.user))
toast.showToast('登录成功', 'success')
// 登录成功后重定向到管理后台
router.push('/admin')
} catch (err: any) {
error.value = err.response?.data?.error || '登录失败，请检查用户名和密码'
toast.showToast('登录失败', 'error')
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #050505;
background-image: radial-gradient(circle at 50% 50%, rgba(212, 179, 131, 0.05) 0%, transparent 50%);
}
.login-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 3rem;
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 420px;
}
</style>

283
client/src/pages/Services.vue Normal file
View File

@@ -0,0 +1,283 @@
<template>
<section id="services" class="page-section block animate-slide-down">
<div class="py-16 text-center">
<h2 class="font-serif text-5xl italic text-white mb-6">共创数字未来</h2>
<p class="text-art-muted text-lg max-w-2xl mx-auto">用代码构建骨架，用设计触动灵魂。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-32 px-4" id="services-grid">
<div class="tilt-card group h-96">
<div class="tilt-inner flex flex-col justify-between">
<div class="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 mb-6 border border-blue-500/20 group-hover:scale-110 transition-transform duration-500">
<i data-lucide="layers" class="w-8 h-8"></i>
</div>
<div>
<h3 class="text-2xl font-bold text-white mb-4">前端架构设计</h3>
<p class="text-art-muted text-sm leading-relaxed">为复杂的大型应用提供可扩展的架构方案。</p>
</div>
</div>
</div>
<div class="tilt-card group h-96">
<div class="tilt-inner flex flex-col justify-between border-art-accent/20 bg-white/5">
<div class="w-16 h-16 rounded-2xl bg-art-accent/10 flex items-center justify-center text-art-accent mb-6 border border-art-accent/20 group-hover:scale-110 transition-transform duration-500 shadow-[0_0_30px_-10px_rgba(212,179,131,0.3)]">
<i data-lucide="wand-2" class="w-8 h-8"></i>
</div>
<div>
<h3 class="text-2xl font-bold text-white mb-4">创意交互开发</h3>
<p class="text-art-muted text-sm leading-relaxed">利用 WebGL (Three.js) 和 GSAP 打造令人过目难忘的着陆页。</p>
</div>
</div>
</div>
<div class="tilt-card group h-96">
<div class="tilt-inner flex flex-col justify-between">
<div class="w-16 h-16 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400 mb-6 border border-purple-500/20 group-hover:scale-110 transition-transform duration-500">
<i data-lucide="smartphone" class="w-8 h-8"></i>
</div>
<div>
<h3 class="text-2xl font-bold text-white mb-4">跨平台应用</h3>
<p class="text-art-muted text-sm leading-relaxed">使用 UniApp 或 React Native 开发高质量的移动端应用。</p>
</div>
</div>
</div>
</div>
<!-- Process Accordion -->
<div class="mb-32 px-4">
<h3 class="font-serif text-3xl text-white text-center mb-12 italic">创作流程</h3>
<div class="process-accordion">
<div class="process-step">
<img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=2670&auto=format&fit=crop" class="step-bg" alt="Discovery">
<div class="step-content">
<div class="step-number">01</div>
<h4 class="text-xl font-bold text-white mb-2">灵感 & 探索</h4>
<p class="step-desc">深入理解业务需求，进行竞品分析，寻找视觉灵感，确定设计方向。这是地基。</p>
</div>
</div>
<div class="process-step">
<img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=2670&auto=format&fit=crop" class="step-bg" alt="Design">
<div class="step-content">
<div class="step-number">02</div>
<h4 class="text-xl font-bold text-white mb-2">架构 & 设计</h4>
<p class="step-desc">设计高保真原型，规划技术架构，确定数据流向。将抽象的想法具象化。</p>
</div>
</div>
<div class="process-step">
<img src="https://images.unsplash.com/photo-1555099962-4199c345e5dd?q=80&w=2670&auto=format&fit=crop" class="step-bg" alt="Code">
<div class="step-content">
<div class="step-number">03</div>
<h4 class="text-xl font-bold text-white mb-2">编码 & 雕琢</h4>
<p class="step-desc">编写干净、可维护的代码。添加微交互和动画，让页面"活"起来。</p>
</div>
</div>
<div class="process-step">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2426&auto=format&fit=crop" class="step-bg" alt="Launch">
<div class="step-content">
<div class="step-number">04</div>
<h4 class="text-xl font-bold text-white mb-2">测试 & 交付</h4>
<p class="step-desc">多设备测试，性能优化，SEO 配置。确保最终交付物完美无瑕。</p>
</div>
</div>
</div>
</div>
<!-- Danmaku & Partners -->
<div class="py-20 mb-32 overflow-hidden relative">
<div class="absolute left-0 top-0 w-20 h-full bg-gradient-to-r from-art-bg to-transparent z-10"></div>
<div class="absolute right-0 top-0 w-20 h-full bg-gradient-to-l from-art-bg to-transparent z-10"></div>
<h3 class="text-3xl font-serif text-white text-center mb-12 italic">客户原声</h3>
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<div v-else-if="error" class="text-center text-red-500 py-20">
<p class="mb-4">{{ error }}</p>
<button @click="fetchServicesData" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
</div>
<div v-else class="flex flex-col gap-6" id="danmaku-container">
<!-- Danmaku items will be rendered here -->
<div class="danmaku-row animate-marquee hover:[animation-play-state:paused]">
<div v-for="(testimonial, index) in testimonials" :key="testimonial.id" class="danmaku-item">
<div class="w-6 h-6 rounded-full bg-blue-500/20"></div>
<span>"{{ testimonial.content }}"</span>
</div>
<!-- 复制一份数据以实现无缝滚动 -->
<div v-for="(testimonial, index) in testimonials" :key="testimonial.id + '-copy'" class="danmaku-item">
<div class="w-6 h-6 rounded-full bg-blue-500/20"></div>
<span>"{{ testimonial.content }}"</span>
</div>
</div>
<div class="danmaku-row animate-marquee-reverse hover:[animation-play-state:paused]">
<div v-for="(testimonial, index) in testimonials" :key="testimonial.id" class="danmaku-item">
<div class="w-6 h-6 rounded-full bg-purple-500/20"></div>
<span>"{{ testimonial.content }}"</span>
</div>
<!-- 复制一份数据以实现无缝滚动 -->
<div v-for="(testimonial, index) in testimonials" :key="testimonial.id + '-copy'" class="danmaku-item">
<div class="w-6 h-6 rounded-full bg-purple-500/20"></div>
<span>"{{ testimonial.content }}"</span>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="max-w-4xl mx-auto text-center px-6 mb-20">
<div class="p-12 rounded-3xl bg-gradient-to-b from-white/10 to-transparent border border-white/10 relative overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-art-accent/20 blur-[100px] -z-10"></div>
<h2 class="text-4xl md:text-5xl font-serif text-white mb-6">准备好开始了吗？</h2>
<p class="text-art-muted mb-8 max-w-xl mx-auto">无论是一个疯狂的想法，还是一个具体的业务需求，我都乐意倾听。</p>
<button @click="openInquiry" class="inline-flex items-center gap-2 px-8 py-4 bg-white text-black rounded-full font-bold hover:scale-105 transition-transform"><span>发起合作咨询</span><i data-lucide="arrow-right" class="w-5 h-5"></i></button>
</div>
</div>
<!-- Partners -->
<div class="max-w-4xl mx-auto px-6 mb-32 border-t border-white/5 pt-12">
<p class="text-center text-xs font-mono text-art-muted tracking-widest uppercase mb-8">Trusted By</p>
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<div v-else-if="error" class="text-center text-red-500 py-20">
<p class="mb-4">{{ error }}</p>
<button @click="fetchServicesData" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
</div>
<div v-else class="flex flex-wrap justify-center gap-8 md:gap-16 opacity-50">
<span
v-for="partner in partners"
:key="partner.id"
class="partner-logo text-xl font-bold text-white cursor-pointer"
:class="getPartnerFontClass(partner.name)"
>
{{ partner.name }}
</span>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { useScrollAnimation } from '../composables/useScrollAnimation'
// 定义类型
interface Testimonial {
id: string
content: string
avatar: string
}
interface Partner {
id: string
name: string
logo?: string
}
const testimonials = ref<Testimonial[]>([])
const partners = ref<Partner[]>([])
const loading = ref(false)
const error = ref('')
// 模拟API调用，实际项目中应替换为真实API
const fetchServicesData = async () => {
loading.value = true
error.value = ''
try {
// 实际项目中应调用真实API
// const testimonialsRes = await fetch(`${API_BASE}/testimonials`)
// const partnersRes = await fetch(`${API_BASE}/partners`)
// testimonials.value = await testimonialsRes.json()
// partners.value = await partnersRes.json()
// 使用模拟数据作为备选
testimonials.value = [
{ id: '1', content: '从未见过如此丝滑的 WebGL 体验！', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test1' },
{ id: '2', content: '代码质量非常高，易于维护。', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test2' },
{ id: '3', content: '细节把控令人惊叹，强烈推荐！', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test3' },
{ id: '4', content: '交付速度快，超出预期！', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test4' }
]
partners.value = [
{ id: '1', name: 'VOGUE' },
{ id: '2', name: 'WIRED' },
{ id: '3', name: 'stripe' },
{ id: '4', name: 'Monocle' }
]
} catch (err) {
console.error('Error fetching services data:', err)
error.value = '获取服务数据失败，请稍后重试'
// 使用静态数据作为备选
testimonials.value = [
{ id: '1', content: '从未见过如此丝滑的 WebGL 体验！', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test1' },
{ id: '2', content: '代码质量非常高，易于维护。', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test2' },
{ id: '3', content: '细节把控令人惊叹，强烈推荐！', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test3' },
{ id: '4', content: '交付速度快，超出预期！', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=test4' }
]
partners.value = [
{ id: '1', name: 'VOGUE' },
{ id: '2', name: 'WIRED' },
{ id: '3', name: 'stripe' },
{ id: '4', name: 'Monocle' }
]
} finally {
loading.value = false
}
}
// 获取合作伙伴字体类
const getPartnerFontClass = (name: string): string => {
if (name === 'VOGUE' || name === 'Monocle') {
return 'font-serif italic'
} else if (name === 'WIRED') {
return 'font-mono'
} else if (name === 'stripe') {
return 'font-sans'
}
return 'font-bold'
}
const openInquiry = () => {
// 使用全局函数打开咨询模态框
if (window.openInquiry) {
window.openInquiry()
}
}
onBeforeMount(() => {
fetchServicesData()
})
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
// 添加鼠标倾斜效果
const tiltCards = document.querySelectorAll('.tilt-card')
tiltCards.forEach(card => {
card.addEventListener('mousemove', (e) => {
const cardRect = card.getBoundingClientRect()
const x = e.clientX - cardRect.left
const y = e.clientY - cardRect.top
const xPercent = (x / cardRect.width) * 100
const yPercent = (y / cardRect.height) * 100
card.style.setProperty('--mouse-x', `${xPercent}%`)
card.style.setProperty('--mouse-y', `${yPercent}%`)
// 3D Rotation
const rotateX = (y / cardRect.height - 0.5) * 20
const rotateY = (x / cardRect.width - 0.5) * -20
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
})
card.addEventListener('mouseleave', () => {
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'
})
})
})
</script>

152
client/src/pages/Snippets.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<section id="snippets" class="page-section block animate-slide-down">
<div class="max-w-7xl mx-auto pt-32 px-6 pb-20">
<div class="mb-12 text-center">
<h2 class="font-serif text-5xl italic text-white mb-6">代码实验室</h2>
<p class="text-art-muted">点击下方卡片查看代码与实时效果。</p>
</div>
<!-- Loading state -->
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<!-- Error state -->
<div v-else-if="error" class="text-center text-red-500 py-20">
<p class="mb-4">{{ error }}</p>
<button @click="fetchSnippetsData" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
</div>
<!-- Snippets list -->
<div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8" id="snippets-grid">
<!-- Snippets will be rendered here -->
<div
v-for="snippet in snippets"
:key="snippet.id"
class="art-card rounded-2xl p-8 group cursor-pointer transition-all hover:translate-y-[-5px]"
@click="openSnippet(snippet)"
>
<div class="flex items-center gap-3 mb-4">
<i data-lucide="code-2" class="w-6 h-6 text-art-accent"></i>
<span class="font-mono text-sm text-art-muted">{{ getSnippetType(snippet.type) }}</span>
</div>
<h3 class="text-2xl font-serif text-white mb-4 group-hover:text-art-accent transition-colors">{{ snippet.title }}</h3>
<pre class="font-mono text-sm text-art-muted leading-relaxed overflow-hidden text-ellipsis line-clamp-4">{{ snippet.code }}</pre>
<div class="flex items-center justify-end mt-6">
<i data-lucide="arrow-up-right" class="w-5 h-5 text-white/50 transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { fetchSnippets, Snippet } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'
const snippets = ref<Snippet[]>([])
const loading = ref(false)
const error = ref('')
const fetchSnippetsData = async () => {
loading.value = true
error.value = ''
try {
const snippetsData = await fetchSnippets()
snippets.value = snippetsData
} catch (err) {
console.error('Error fetching snippets:', err)
error.value = '获取代码片段失败，请稍后重试'
// 如果API调用失败，使用静态数据作为备选
snippets.value = [
{
id: 'mouse',
title: 'React 鼠标追踪 Hook',
code: `import { useState, useEffect } from 'react';
export const useMousePosition = () => {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const update = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', update);
return () => window.removeEventListener('mousemove', update);
}, []);
return pos;
};`,
type: 'mouse'
},
{
id: 'glass',
title: 'CSS 极致毛玻璃效果',
code: `.glass-panel {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}`,
type: 'glass'
},
{
id: 'noise',
title: 'SVG 噪点纹理滤镜',
code: `<filter id="noise">
<feTurbulence type="fractalNoise" baseFrequency="0.8" /
</filter>`,
type: 'noise'
},
{
id: 'animate',
title: 'CSS 流畅动画',
code: `.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}`,
type: 'animate'
}
]
} finally {
loading.value = false
}
}
const getSnippetType = (type: string) => {
const typeMap: Record<string, string> = {
javascript: 'JavaScript',
css: 'CSS',
html: 'HTML',
mouse: 'React Hook',
glass: 'CSS',
noise: 'SVG',
animate: 'CSS Animation'
}
return typeMap[type] || type
}
const openSnippet = (snippet: any) => {
// 使用全局函数打开代码片段模态框
if (window.showSnippet) {
window.showSnippet(snippet.title, snippet.code)
}
}
onBeforeMount(() => {
fetchSnippetsData()
})
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
})
</script>

173
client/src/pages/WorkDetail.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<section id="work-detail" class="work-detail-page page-section block">
<button @click="$router.push('/works')" class="fixed top-8 right-8 z-[60] mix-blend-difference text-white hover:scale-110 transition-transform">
<div class="rounded-full border border-white/20 p-4 backdrop-blur-md bg-white/5"><i data-lucide="x" class="w-6 h-6"></i></div>
</button>
<div class="fixed top-0 left-0 h-1 bg-art-accent z-[60] w-0 transition-all duration-100" id="scroll-progress"></div>
<!-- Loading state -->
<div v-if="loading" class="fixed inset-0 bg-black flex items-center justify-center z-[99]">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-art-accent"></div>
</div>
<!-- Error state -->
<div v-else-if="error" class="fixed inset-0 bg-black flex flex-col items-center justify-center z-[99] p-8">
<p class="text-red-500 text-xl mb-4">{{ error }}</p>
<button @click="fetchWorkDetails" class="px-6 py-3 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
<button @click="$router.push('/works')" class="mt-4 px-6 py-3 border border-white/30 text-white rounded hover:bg-white/5 transition-colors">
返回作品列表
</button>
</div>
<!-- Work content -->
<div v-else class="relative w-full" id="work-detail-content">
<div class="relative h-[85vh] w-full overflow-hidden group">
<img
id="work-hero-img"
:src="work.heroImg"
class="absolute inset-0 w-full h-full object-cover filter grayscale group-hover:grayscale-0 transition-all duration-1000 scale-105"
:alt="work.title"
>
<div class="absolute inset-0 bg-black/40"></div>
<div class="absolute bottom-0 left-0 p-8 md:p-20 w-full">
<div class="flex items-end justify-between border-t border-white/30 pt-8 animate-slide-down">
<div>
<span id="work-category" class="font-mono text-art-accent text-sm tracking-[0.2em] uppercase mb-2 block">{{ work.category }}</span>
<h1 id="work-title" class="font-serif text-5xl md:text-8xl text-white leading-[0.9] mix-blend-overlay">{{ work.title }}</h1>
</div>
<span id="work-year" class="hidden md:block font-mono text-white/50 text-xl">{{ work.year }}</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row max-w-[1920px] mx-auto min-h-screen">
<div class="md:w-1/3 p-8 md:p-16 md:sticky md:top-0 md:h-screen md:max-h-screen overflow-y-auto custom-scrollbar flex flex-col justify-between border-r border-white/5 bg-[#050505]">
<div class="space-y-12">
<div>
<h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-4">关于项目</h3>
<div id="work-desc" class="text-white/80 font-light leading-relaxed text-lg font-serif" v-html="work.desc"></div>
</div>
<div>
<h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-6">技术全景</h3>
<div id="work-tech-stack" class="space-y-6">
<div v-for="(tech, index) in work.techStack" :key="index">
<div class="tech-category-title">{{ tech.category }}</div>
<div class="tech-grid">
<span v-for="(item, itemIndex) in tech.items" :key="itemIndex" class="tech-item">{{ item }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12">
<a
id="work-link-live"
:href="work.links.live"
target="_blank"
class="group flex items-center justify-between w-full py-6 border-t border-white/10 hover:bg-white/5 transition-colors"
>
<span class="font-serif text-2xl italic text-white group-hover:text-art-accent transition-colors">访问线上项目</span>
<i data-lucide="arrow-up-right" class="w-6 h-6 text-white group-hover:rotate-45 transition-transform"></i>
</a>
</div>
</div>
<div class="md:w-2/3 bg-[#080808] flex flex-col">
<div id="work-gallery" class="flex flex-col flex-grow">
<img
v-for="(img, index) in work.gallery"
:key="index"
:src="img"
:alt="`${work.title} - 图片 ${index + 1}`"
class="gallery-image"
>
</div>
<div
class="h-[40vh] flex items-center justify-center border-t border-white/5 bg-[#050505] cursor-pointer group hover:bg-white/5 transition-colors"
@click="$router.push('/works')"
>
<div class="text-center">
<p class="font-mono text-xs text-art-muted mb-4 tracking-widest">下一个作品</p>
<h2 class="font-serif text-5xl text-white group-hover:italic transition-all">返回作品列表</h2>
</div>
</div>
<footer class="py-8 text-center border-t border-white/5 relative z-10 bg-[#050505]"><p class="text-art-muted text-xs font-mono tracking-widest opacity-50">&copy; 2024 年糕崽崽. 保留所有权利.</p></footer>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { fetchWork, Work } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'
const route = useRoute()
const router = useRouter()
const workId = route.params.id as string
const work = ref<Work>({
id: workId,
title: '加载中...',
category: '',
year: '',
heroImg: 'https://via.placeholder.com/1600x900',
desc: '<p>加载中...</p>',
techStack: [],
gallery: [],
links: { live: '#' },
next: ''
})
const loading = ref(true)
const error = ref('')
const updateScrollProgress = () => {
const scrollTop = window.scrollY
const docHeight = document.documentElement.scrollHeight
const winHeight = window.innerHeight
const scrollPercent = scrollTop / (docHeight - winHeight)
const progressBar = document.getElementById('scroll-progress')
if (progressBar) {
progressBar.style.width = `${scrollPercent * 100}%`
}
}
const fetchWorkDetails = async () => {
loading.value = true
error.value = ''
try {
const workData = await fetchWork(workId)
if (workData) {
work.value = workData
} else {
error.value = '未找到该作品'
}
} catch (err) {
error.value = '获取作品详情失败，请稍后重试'
console.error('Error fetching work details:', err)
} finally {
loading.value = false
}
}
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
fetchWorkDetails()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
// 添加滚动事件监听
window.addEventListener('scroll', updateScrollProgress)
})
onBeforeUnmount(() => {
// 移除滚动事件监听
window.removeEventListener('scroll', updateScrollProgress)
})
</script>

116
client/src/pages/Works.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<section id="works" class="page-section block animate-slide-down">
<div class="max-w-7xl mx-auto pt-32 px-6 pb-20">
<div class="mb-32">
<h2 class="font-serif text-5xl italic text-white mb-6">精选作品</h2>
<p class="text-art-muted">这里展示了我参与设计和开发的核心项目。</p>
</div>
<!-- Loading state -->
<div v-if="loading" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
</div>
<!-- Error state -->
<div v-else-if="error" class="text-center text-red-500">
<p>{{ error }}</p>
<button @click="fetchWorksData" class="mt-4 px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
重试
</button>
</div>
<!-- Works list -->
<div v-else class="grid grid-cols-1 gap-20" id="works-list-container">
<div
v-for="(work, index) in works"
:key="work.id"
class="group grid grid-cols-1 md:grid-cols-2 gap-10 items-center cursor-pointer"
@click="$router.push('/works/' + work.id)"
>
<!-- 作品图片 -->
<div
:class="['md:order-1', index % 2 === 1 ? 'md:order-2' : 'md:order-1']"
class="relative aspect-[4/3] overflow-hidden rounded-sm bg-gray-900 border border-white/5"
>
<div
class="absolute inset-0 z-10"
:class="[
index % 2 === 0 ? 'bg-gradient-to-tr from-purple-900/40 to-blue-900/40' : 'bg-gradient-to-tr from-orange-900/40 to-red-900/40',
'mix-blend-color-burn'
]"
></div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-transparent transition-colors z-20"></div>
<img
:src="work.heroImg"
:alt="work.title"
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80"
>
</div>
<!-- 作品信息 -->
<div
:class="['md:order-2', index % 2 === 1 ? 'md:order-1' : 'md:order-2']"
class="space-y-6"
>
<!-- 年份和分类 -->
<div class="font-mono text-xs text-art-accent">{{ work.year }} · {{ work.category }}</div>
<!-- 作品标题 -->
<h3
class="text-4xl font-serif text-white group-hover:text-art-accent transition-colors"
>
{{ work.title }}
</h3>
<!-- 作品描述 -->
<p class="text-art-muted font-light leading-relaxed" v-html="work.desc"></p>
<!-- 技术栈 -->
<div class="flex flex-wrap gap-3">
<span
v-for="(stack, stackIndex) in work.techStack.flatMap(tech => tech.items)"
:key="stackIndex"
class="px-3 py-1 border border-white/10 rounded-full text-xs text-white/70"
>
{{ stack }}
</span>
</div>
<!-- 查看详情按钮 -->
<div class="pt-4">
<span class="inline-flex items-center gap-2 text-sm font-medium text-white border-b border-transparent hover:border-art-accent hover:text-art-accent transition-all">
查看项目详情 <i data-lucide="arrow-right" class="w-4 h-4"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchWorks, Work } from '../services/api'
import { useScrollAnimation } from '../composables/useScrollAnimation'
const works = ref<Work[]>([])
const loading = ref(false)
const error = ref('')
const fetchWorksData = async () => {
loading.value = true
error.value = ''
try {
works.value = await fetchWorks()
} catch (err) {
error.value = '获取作品失败，请稍后重试'
console.error('Error fetching works:', err)
} finally {
loading.value = false
}
}
onMounted(() => {
// 启用滚动动画
useScrollAnimation()
fetchWorksData()
// 初始化Lucide图标
if (window.lucide) {
window.lucide.createIcons()
}
})
</script>

362
client/src/pages/admin/Dashboard.vue Normal file
View File

@@ -0,0 +1,362 @@
<template>
<div class="dashboard-container">
<h1 class="page-title">仪表盘</h1>
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon users">👥</div>
<div class="stat-content">
<h3 class="stat-title">用户总数</h3>
<p class="stat-value">{{ stats.users }}</p>
<span class="stat-change positive">+2.5%</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon posts">📝</div>
<div class="stat-content">
<h3 class="stat-title">文章总数</h3>
<p class="stat-value">{{ stats.posts }}</p>
<span class="stat-change positive">+5.2%</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon works">🎨</div>
<div class="stat-content">
<h3 class="stat-title">作品总数</h3>
<p class="stat-value">{{ stats.works }}</p>
<span class="stat-change positive">+3.1%</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon snippets">💻</div>
<div class="stat-content">
<h3 class="stat-title">代码片段</h3>
<p class="stat-value">{{ stats.snippets }}</p>
<span class="stat-change negative">-1.2%</span>
</div>
</div>
</div>
<!-- Recent Activities -->
<div class="dashboard-grid">
<div class="panel">
<h2 class="panel-title">最近操作</h2>
<div class="activity-list">
<div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
<div class="activity-icon">
{{ activity.icon }}
</div>
<div class="activity-content">
<p class="activity-text">{{ activity.text }}</p>
<span class="activity-time">{{ activity.time }}</span>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="panel">
<h2 class="panel-title">快速操作</h2>
<div class="quick-actions">
<button class="action-btn" @click="router.push('/admin/posts/create')">
<span class="action-icon">📝</span>
<span class="action-text">新建文章</span>
</button>
<button class="action-btn" @click="router.push('/admin/works/create')">
<span class="action-icon">🎨</span>
<span class="action-text">新建作品</span>
</button>
<button class="action-btn" @click="router.push('/admin/snippets/create')">
<span class="action-icon">💻</span>
<span class="action-text">新建代码片段</span>
</button>
<button class="action-btn" @click="router.push('/admin/users/create')">
<span class="action-icon">👥</span>
<span class="action-text">新建用户</span>
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getDashboardStats, getRecentActivities } from '../../services/api'
const router = useRouter()
// Stats data
const stats = ref({
users: 0,
posts: 0,
works: 0,
snippets: 0
})
// Recent activities data
const recentActivities = ref([])
// Fetch dashboard data
const fetchDashboardData = async () => {
try {
// Get stats
const statsData = await getDashboardStats()
stats.value = statsData
// Get recent activities
const activitiesData = await getRecentActivities()
recentActivities.value = activitiesData
} catch (error) {
console.error('Failed to fetch dashboard data:', error)
}
}
onMounted(() => {
fetchDashboardData()
})
</script>
<style scoped>
.dashboard-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(212, 179, 131, 0.3);
}
.stat-icon {
font-size: 2.5rem;
margin-right: 1rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background-color: rgba(212, 179, 131, 0.1);
color: #d4b383;
}
.stat-icon.users {
background-color: rgba(59, 130, 246, 0.1);
color: rgba(59, 130, 246, 0.8);
}
.stat-icon.posts {
background-color: rgba(16, 185, 129, 0.1);
color: rgba(16, 185, 129, 0.8);
}
.stat-icon.works {
background-color: rgba(251, 191, 36, 0.1);
color: rgba(251, 191, 36, 0.8);
}
.stat-icon.snippets {
background-color: rgba(139, 92, 246, 0.1);
color: rgba(139, 92, 246, 0.8);
}
.stat-content {
flex: 1;
}
.stat-title {
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 0.25rem 0;
font-family: 'Inter', sans-serif;
}
.stat-value {
font-size: 1.75rem;
font-weight: 600;
color: white;
margin: 0 0 0.25rem 0;
font-family: 'Inter', sans-serif;
}
.stat-change {
font-size: 0.75rem;
font-weight: 500;
}
.stat-change.positive {
color: #10b981;
}
.stat-change.negative {
color: #ef4444;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
/* Panel Styles */
.panel {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.panel-title {
font-size: 1.25rem;
font-weight: 600;
color: #d4b383;
margin: 0 0 1rem 0;
font-family: 'Playfair Display', serif;
}
/* Activity List */
.activity-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.activity-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.activity-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.activity-icon {
font-size: 1.25rem;
margin-top: 0.25rem;
width: auto;
height: auto;
background: transparent;
color: #d4b383;
}
.activity-content {
flex: 1;
}
.activity-text {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 0.25rem 0;
font-family: 'Inter', sans-serif;
}
.activity-time {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
}
/* Quick Actions */
.quick-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.action-btn {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-align: left;
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
}
.action-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
transform: translateX(4px);
box-shadow: 0 5px 15px rgba(212, 179, 131, 0.1);
}
.action-icon {
font-size: 1.25rem;
background: transparent;
color: #d4b383;
}
.action-text {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
}
</style>

378
client/src/pages/admin/Logs.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<div class="admin-logs">
<h1 class="page-title">操作日志管理</h1>
<div class="toolbar">
<div class="filter-section">
<div class="filter-group">
<label for="pageSize">每页显示:</label>
<CustomSelect
v-model.number="pageSize"
:options="pageSizeOptions"
@update:modelValue="fetchLogs"
style="width: 80px;"
/>
</div>
</div>
</div>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>操作人</th>
<th>IP地址</th>
<th>路径</th>
<th>方法</th>
<th>状态</th>
<th>耗时(ms)</th>
<th>操作时间</th>
</tr>
</thead>
<tbody>
<tr v-for="log in logs.list" :key="log.id">
<td>{{ log.id }}</td>
<td>{{ log.username }}</td>
<td>{{ log.ip }}</td>
<td class="log-path">{{ log.path }}</td>
<td>
<span :class="['method-badge', `method-${log.method.toLowerCase()}`]">
{{ log.method }}
</span>
</td>
<td>
<span :class="['status-badge', getStatusClass(log.status)]">
{{ log.status }}
</span>
</td>
<td>{{ log.duration }}</td>
<td>{{ formatDate(log.createdAt) }}</td>
</tr>
</tbody>
</table>
</div>
<div v-if="logs.list.length === 0" class="empty-state">
<p>暂无操作日志</p>
</div>
<!-- Pagination -->
<div v-if="logs.list.length > 0" class="pagination">
<button
class="btn btn-sm btn-secondary"
:disabled="currentPage === 1"
@click="changePage(currentPage - 1)"
>
上一页
</button>
<span class="page-info">
第 {{ currentPage }} 页，共 {{ totalPages }} 页，总计 {{ logs.total }} 条记录
</span>
<button
class="btn btn-sm btn-secondary"
:disabled="currentPage === totalPages"
@click="changePage(currentPage + 1)"
>
下一页
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getOperationLogs, PaginationResponse, OperationLog } from '../../services/api'
import { useToast } from '../../composables/useToast'
import CustomSelect from '../../components/CustomSelect.vue'
const toast = useToast()
const logs = ref<PaginationResponse<OperationLog>>({
list: [],
total: 0,
page: 1,
size: 10
})
const currentPage = ref(1)
const pageSize = ref(10)
// Select options
const pageSizeOptions = [
{ value: 10, label: '10' },
{ value: 20, label: '20' },
{ value: 50, label: '50' },
{ value: 100, label: '100' }
]
const totalPages = computed(() => {
return Math.ceil(logs.value.total / pageSize.value)
})
const fetchLogs = async () => {
try {
logs.value = await getOperationLogs(currentPage.value, pageSize.value)
} catch (error) {
console.error('Error fetching operation logs:', error)
toast.error('获取操作日志失败')
}
}
const changePage = (page: number) => {
currentPage.value = page
fetchLogs()
}
const getStatusClass = (status: number) => {
if (status >= 200 && status < 300) {
return 'success'
} else if (status >= 400 && status < 500) {
return 'warning'
} else if (status >= 500) {
return 'error'
}
return ''
}
const formatDate = (dateString: string) => {
const date = new Date(dateString)
return date.toLocaleString('zh-CN')
}
onMounted(() => {
fetchLogs()
})
</script>
<style scoped>
.admin-logs {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.toolbar {
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
}
.filter-section {
display: flex;
gap: 1rem;
}
.filter-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-group label {
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
font-family: 'Inter', sans-serif;
}
.form-select {
padding: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
font-size: 0.875rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow-x: auto;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
min-width: 800px;
color: white;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.875rem;
font-family: 'Inter', sans-serif;
}
.admin-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
white-space: nowrap;
}
.admin-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
.log-path {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.method-badge {
display: inline-block;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
min-width: 40px;
text-align: center;
font-family: 'Inter', sans-serif;
}
.method-get {
background-color: #3b82f6;
}
.method-post {
background-color: #10b981;
}
.method-put {
background-color: #f59e0b;
}
.method-delete {
background-color: #ef4444;
}
.method-patch {
background-color: #8b5cf6;
}
.method-options {
background-color: #6b7280;
}
.status-badge {
display: inline-block;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
min-width: 40px;
text-align: center;
font-family: 'Inter', sans-serif;
}
.status-badge.success {
background-color: rgba(16, 185, 129, 0.2);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-badge.warning {
background-color: rgba(251, 191, 36, 0.2);
color: #f59e0b;
border: 1px solid rgba(251, 191, 36, 0.3);
}
.status-badge.error {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
border: 1px solid transparent;
font-family: 'Inter', sans-serif;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background-color: #d4b383;
color: #050505;
border-color: #d4b383;
}
.btn-primary:hover {
background-color: transparent;
color: #d4b383;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover:not(:disabled) {
background-color: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.btn-secondary:disabled {
background-color: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.1);
cursor: not-allowed;
}
.empty-state {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
.page-info {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
font-family: 'Inter', sans-serif;
}
</style>

368
client/src/pages/admin/PostForm.vue Normal file
View File

@@ -0,0 +1,368 @@
<template>
<div class="post-form-container">
<h1 class="page-title">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
<div class="form-container">
<form @submit.prevent="handleSubmit" class="post-form">
<!-- Title Field -->
<div class="form-group">
<label for="title">文章标题</label>
<input
type="text"
id="title"
v-model="form.title"
placeholder="请输入文章标题"
required
/>
<div class="error-message" v-if="errors.title">
{{ errors.title }}
</div>
</div>
<!-- Category Field -->
<div class="form-group">
<label for="category">分类</label>
<input
type="text"
id="category"
v-model="form.category"
placeholder="请输入文章分类"
required
/>
<div class="error-message" v-if="errors.category">
{{ errors.category }}
</div>
</div>
<!-- Date Field -->
<div class="form-group">
<label for="date">发布日期</label>
<input
type="date"
id="date"
v-model="form.date"
required
/>
<div class="error-message" v-if="errors.date">
{{ errors.date }}
</div>
</div>
<!-- Excerpt Field -->
<div class="form-group">
<label for="excerpt">文章摘要</label>
<textarea
id="excerpt"
v-model="form.excerpt"
placeholder="请输入文章摘要"
rows="3"
></textarea>
<div class="error-message" v-if="errors.excerpt">
{{ errors.excerpt }}
</div>
</div>
<!-- Content Field -->
<div class="form-group">
<label for="content">文章内容</label>
<textarea
id="content"
v-model="form.content"
placeholder="请输入文章内容"
rows="10"
required
></textarea>
<div class="error-message" v-if="errors.content">
{{ errors.content }}
</div>
</div>
<!-- Is Published Field -->
<div class="form-group">
<label for="isPublished">发布状态</label>
<CustomSelect
v-model="form.isPublished"
:options="publishStatusOptions"
placeholder="请选择发布状态"
/>
<div class="error-message" v-if="errors.isPublished">
{{ errors.isPublished }}
</div>
</div>
<!-- Submit Buttons -->
<div class="form-actions">
<button type="button" class="cancel-btn" @click="handleCancel">
取消
</button>
<button type="submit" class="submit-btn" :disabled="isSubmitting">
{{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '创建文章') }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { createPost, updatePost, fetchPost } from '../../services/api'
import CustomSelect from '../../components/CustomSelect.vue'
const router = useRouter()
const route = useRoute()
const toast = useToast()
// Form state
const isSubmitting = ref(false)
const isEditing = computed(() => !!route.params.id)
const errors = reactive<Record<string, string>>({})
// Form data
const form = reactive({
title: '',
category: '',
date: new Date().toISOString().split('T')[0],
excerpt: '',
content: '',
isPublished: 1
})
// Select options
const publishStatusOptions = [
{ value: 1, label: '已发布' },
{ value: 0, label: '草稿' }
]
// Validation function
const validateForm = (): boolean => {
// Reset errors
Object.keys(errors).forEach(key => delete errors[key])
let isValid = true
// Validate title
if (!form.title.trim()) {
errors.title = '文章标题不能为空'
isValid = false
}
// Validate category
if (!form.category.trim()) {
errors.category = '文章分类不能为空'
isValid = false
}
// Validate date
if (!form.date) {
errors.date = '发布日期不能为空'
isValid = false
}
// Validate content
if (!form.content.trim()) {
errors.content = '文章内容不能为空'
isValid = false
}
return isValid
}
// Submit handler
const handleSubmit = async () => {
if (!validateForm()) {
return
}
isSubmitting.value = true
try {
if (isEditing.value) {
// Update existing post
await updatePost(route.params.id as string, form)
toast.success('文章更新成功')
} else {
// Create new post
await createPost(form)
toast.success('文章创建成功')
}
// Redirect to posts list
router.push('/admin/posts')
} catch (error: any) {
console.error('Error submitting form:', error)
toast.error(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'))
} finally {
isSubmitting.value = false
}
}
// Cancel handler
const handleCancel = () => {
router.push('/admin/posts')
}
// Lifecycle
onMounted(async () => {
// If editing, load post data from API
if (isEditing.value) {
try {
const postId = route.params.id as string
const post = await fetchPost(postId)
// Populate form with post data
form.title = post.title
form.category = post.category
form.date = post.date
form.excerpt = post.excerpt || ''
form.content = post.content || ''
form.isPublished = post.isPublished === 1 ? 1 : 0
} catch (error: any) {
console.error('Failed to fetch post data:', error)
toast.error('加载文章数据失败: ' + (error.message || '未知错误'))
}
}
})
</script>
<style scoped>
.post-form-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.form-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
}
.post-form {
max-width: 800px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.form-group select::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
font-family: 'Inter', sans-serif;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.cancel-btn {
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.cancel-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.submit-btn {
padding: 0.75rem 1.5rem;
background-color: #d4b383;
color: #050505;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.submit-btn:hover:not(:disabled) {
background-color: transparent;
color: #d4b383;
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-container {
padding: 1.5rem;
}
.form-actions {
flex-direction: column;
}
.cancel-btn,
.submit-btn {
width: 100%;
}
}
</style>

234
client/src/pages/admin/Posts.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="admin-posts">
<h1 class="page-title">文章管理</h1>
<div class="toolbar">
<router-link to="/admin/posts/create" class="btn btn-primary">
+ 新增文章
</router-link>
</div>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>分类</th>
<th>发布日期</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.id">
<td>{{ post.id }}</td>
<td>{{ post.title }}</td>
<td>{{ post.category }}</td>
<td>{{ post.date }}</td>
<td>
<span :class="['status-badge', post.isPublished === 1 ? 'published' : 'draft']">
{{ post.isPublished === 1 ? '已发布' : '草稿' }}
</span>
</td>
<td class="actions">
<router-link :to="`/admin/posts/${post.id}/edit`" class="btn btn-sm btn-secondary">
编辑
</router-link>
<button @click="deletePost(post.id)" class="btn btn-sm btn-danger">
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="posts.length === 0" class="empty-state">
<p>暂无文章，请点击上方按钮新增</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAdminPosts, deletePost as deletePostApi, Post } from '../../services/api'
import { useToast } from '../../composables/useToast'
const router = useRouter()
const toast = useToast()
const posts = ref<Post[]>([])
const fetchPosts = async () => {
try {
posts.value = await getAdminPosts()
} catch (error) {
console.error('Error fetching posts:', error)
toast.error('获取文章列表失败')
}
}
const deletePost = async (id: string) => {
if (confirm('确定要删除这篇文章吗？')) {
try {
await deletePostApi(id)
toast.success('文章删除成功')
fetchPosts()
} catch (error) {
console.error('Error deleting post:', error)
toast.error('删除文章失败')
}
}
}
onMounted(() => {
fetchPosts()
})
</script>
<style scoped>
.admin-posts {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.toolbar {
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.admin-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.status-badge.published {
background-color: rgba(16, 185, 129, 0.2);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-badge.draft {
background-color: rgba(251, 191, 36, 0.2);
color: #f59e0b;
border: 1px solid rgba(251, 191, 36, 0.3);
}
.actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: 'Inter', sans-serif;
border: 1px solid transparent;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background-color: #d4b383;
color: #050505;
border-color: #d4b383;
}
.btn-primary:hover {
background-color: transparent;
color: #d4b383;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background-color: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.btn-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.empty-state {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
</style>

273
client/src/pages/admin/RoleForm.vue Normal file
View File

@@ -0,0 +1,273 @@
<template>
<div class="role-form-container">
<h1 class="page-title">{{ isEditing ? '编辑角色' : '新建角色' }}</h1>
<div class="form-container">
<form @submit.prevent="handleSubmit" class="role-form">
<!-- Role Name Field -->
<div class="form-group">
<label for="name">角色名称</label>
<input
type="text"
id="name"
v-model="form.name"
placeholder="请输入角色名称"
required
/>
<div class="error-message" v-if="errors.name">
{{ errors.name }}
</div>
</div>
<!-- Description Field -->
<div class="form-group">
<label for="description">描述</label>
<textarea
id="description"
v-model="form.description"
placeholder="请输入角色描述"
rows="4"
></textarea>
<div class="error-message" v-if="errors.description">
{{ errors.description }}
</div>
</div>
<!-- Submit Buttons -->
<div class="form-actions">
<button type="button" class="cancel-btn" @click="handleCancel">
取消
</button>
<button type="submit" class="submit-btn" :disabled="isSubmitting">
{{ isSubmitting ? '提交中...' : (isEditing ? '更新角色' : '创建角色') }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { createRole, updateRole, fetchRole } from '../../services/api'
const router = useRouter()
const route = useRoute()
const toast = useToast()
// Form state
const isSubmitting = ref(false)
const isEditing = computed(() => !!route.params.id)
const errors = reactive<Record<string, string>>({})
// Form data
const form = reactive({
name: '',
description: ''
})
// Validation function
const validateForm = (): boolean => {
// Reset errors
Object.keys(errors).forEach(key => delete errors[key])
let isValid = true
// Validate name
if (!form.name.trim()) {
errors.name = '角色名称不能为空'
isValid = false
}
return isValid
}
// Submit handler
const handleSubmit = async () => {
if (!validateForm()) {
return
}
isSubmitting.value = true
try {
if (isEditing.value) {
// Update existing role
await updateRole(parseInt(route.params.id as string), form)
toast.success('角色更新成功')
} else {
// Create new role
await createRole(form)
toast.success('角色创建成功')
}
// Redirect to roles list
router.push('/admin/roles')
} catch (error: any) {
console.error('Error submitting form:', error)
toast.error(error.message || (isEditing.value ? '更新角色失败' : '创建角色失败'))
} finally {
isSubmitting.value = false
}
}
// Cancel handler
const handleCancel = () => {
router.push('/admin/roles')
}
// Lifecycle
onMounted(async () => {
if (isEditing.value) {
try {
const roleId = parseInt(route.params.id as string)
const role = await fetchRole(roleId)
// Populate form with role data
form.name = role.name
form.description = role.description || ''
} catch (error: any) {
console.error('Failed to fetch role data:', error)
toast.error('加载角色数据失败: ' + (error.message || '未知错误'))
}
}
})
</script>
<style scoped>
.role-form-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.form-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.role-form {
max-width: 600px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
font-family: 'Inter', sans-serif;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.cancel-btn {
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.cancel-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.submit-btn {
padding: 0.75rem 1.5rem;
background-color: #d4b383;
color: #050505;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.submit-btn:hover:not(:disabled) {
background-color: transparent;
color: #d4b383;
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-container {
padding: 1.5rem;
}
.form-actions {
flex-direction: column;
}
.cancel-btn,
.submit-btn {
width: 100%;
}
}
</style>

417
client/src/pages/admin/Roles.vue Normal file
View File

@@ -0,0 +1,417 @@
<template>
<div class="roles-container">
<div class="page-header">
<h1 class="page-title">角色管理</h1>
<button class="create-btn" @click="router.push('/admin/roles/create')">
<span class="btn-icon">+</span>
<span class="btn-text">新建角色</span>
</button>
</div>
<!-- Search -->
<div class="search-box">
<input
type="text"
placeholder="搜索角色名称"
v-model="searchQuery"
@input="handleSearch"
/>
<button class="search-btn">🔍</button>
</div>
<!-- Roles Table -->
<div class="table-container">
<table class="roles-table">
<thead>
<tr>
<th>ID</th>
<th>角色名称</th>
<th>描述</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="role in filteredRoles" :key="role.id">
<td>{{ role.id }}</td>
<td>{{ role.name }}</td>
<td>{{ role.description || '无描述' }}</td>
<td>{{ formatDate(role.createdAt) }}</td>
<td class="actions">
<button class="action-btn edit" @click="router.push(`/admin/roles/${role.id}/edit`)" title="编辑">
✏️
</button>
<button class="action-btn delete" @click="handleDelete(role.id)" title="删除">
🗑️
</button>
</td>
</tr>
</tbody>
</table>
<!-- Empty State -->
<div class="empty-state" v-if="filteredRoles.length === 0">
<div class="empty-icon">🔒</div>
<h3>暂无角色数据</h3>
<p>点击右上角按钮创建新角色</p>
</div>
</div>
<!-- Pagination -->
<div class="pagination" v-if="filteredRoles.length > 0">
<button class="page-btn" @click="currentPage--" :disabled="currentPage === 1">
上一页
</button>
<span class="page-info">
第 {{ currentPage }} / {{ totalPages }} 页
</span>
<button class="page-btn" @click="currentPage++" :disabled="currentPage === totalPages">
下一页
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { getRoles, deleteRole, Role } from '../../services/api'
const router = useRouter()
const toast = useToast()
// State
const roles = ref<Role[]>([])
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const isLoading = ref(false)
// Computed properties
const filteredRoles = computed(() => {
let result = roles.value
// Apply search filter
if (searchQuery.value) {
const query = searchQuery.value.toLowerCase()
result = result.filter(role =>
role.name.toLowerCase().includes(query) ||
(role.description && role.description.toLowerCase().includes(query))
)
}
return result
})
const totalPages = computed(() => {
return Math.ceil(filteredRoles.value.length / pageSize.value)
})
// Methods
const fetchRoles = async () => {
isLoading.value = true
try {
const data = await getRoles()
roles.value = data
} catch (error) {
toast.error('获取角色列表失败')
console.error('Error fetching roles:', error)
} finally {
isLoading.value = false
}
}
const handleSearch = () => {
currentPage.value = 1
}
const handleDelete = async (id: number) => {
if (confirm('确定要删除这个角色吗？')) {
try {
await deleteRole(id)
toast.success('角色删除成功')
fetchRoles() // Refresh the list
} catch (error) {
toast.error('删除角色失败')
console.error('Error deleting role:', error)
}
}
}
const formatDate = (dateString: string): string => {
const date = new Date(dateString)
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
}
// Lifecycle
onMounted(() => {
fetchRoles()
})
</script>
<style scoped>
.roles-container {
width: 100%;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin: 0;
font-family: 'Inter', sans-serif;
}
.create-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(212, 179, 131, 0.1);
color: #d4b383;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.create-btn:hover {
background-color: transparent;
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-icon {
font-size: 1.25rem;
}
/* Search */
.search-box {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
max-width: 400px;
}
.search-box input {
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
flex: 1;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.search-box input:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.search-btn {
padding: 0.75rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
color: rgba(255, 255, 255, 0.8);
}
.search-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
/* Table Styles */
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.roles-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.roles-table th,
.roles-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.roles-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.roles-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
/* Actions */
.actions {
display: flex;
gap: 0.5rem;
}
.action-btn {
padding: 0.5rem;
border: 1px solid transparent;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.action-btn.edit {
background-color: rgba(212, 179, 131, 0.2);
color: #d4b383;
border-color: rgba(212, 179, 131, 0.3);
}
.action-btn.edit:hover {
background-color: rgba(212, 179, 131, 0.3);
border-color: #d4b383;
box-shadow: 0 0 10px rgba(212, 179, 131, 0.3);
}
.action-btn.delete {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.action-btn.delete:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
/* Empty State */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
.empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
color: #d4b383;
}
.empty-state h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
color: white;
font-family: 'Inter', sans-serif;
}
.empty-state p {
margin: 0;
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.page-btn {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
}
.page-btn:hover:not(:disabled) {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.page-info {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.6);
font-family: 'Inter', sans-serif;
}
/* Responsive Design */
@media (max-width: 768px) {
.search-box {
max-width: 100%;
}
.roles-table {
display: block;
overflow-x: auto;
}
.roles-table th,
.roles-table td {
white-space: nowrap;
}
}
</style>

412
client/src/pages/admin/Settings.vue Normal file
View File

@@ -0,0 +1,412 @@
<template>
<div class="admin-settings">
<h1 class="page-title">系统配置管理</h1>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>键名</th>
<th>值</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="setting in settings" :key="setting.id">
<td>{{ setting.keyName }}</td>
<td class="setting-value">{{ setting.value }}</td>
<td>{{ setting.description }}</td>
<td class="actions">
<button @click="editSetting(setting)" class="btn btn-sm btn-secondary">
编辑
</button>
<button @click="deleteSetting(setting.keyName)" class="btn btn-sm btn-danger">
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="settings.length === 0" class="empty-state">
<p>暂无系统配置</p>
</div>
<!-- Add/Edit Modal -->
<div v-if="showModal" class="modal-overlay">
<div class="modal-content">
<div class="modal-header">
<h2>{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
<button @click="closeModal" class="close-btn">&times;</button>
</div>
<div class="modal-body">
<form @submit.prevent="saveSetting">
<div class="form-group">
<label for="keyName">键名</label>
<input
type="text"
id="keyName"
v-model="form.keyName"
:disabled="editingSetting"
required
class="form-control"
>
</div>
<div class="form-group">
<label for="value">值</label>
<input
type="text"
id="value"
v-model="form.value"
required
class="form-control"
>
</div>
<div class="form-group">
<label for="description">描述</label>
<textarea
id="description"
v-model="form.description"
rows="3"
class="form-control"
></textarea>
</div>
<div class="form-actions">
<button type="button" @click="closeModal" class="btn btn-secondary">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getSettings, createSetting, updateSetting, deleteSetting as deleteSettingApi, Setting } from '../../services/api'
import { useToast } from '../../composables/useToast'
const toast = useToast()
const settings = ref<Setting[]>([])
const showModal = ref(false)
const editingSetting = ref(false)
const form = ref({
id: 0,
keyName: '',
value: '',
description: ''
})
const fetchSettings = async () => {
try {
settings.value = await getSettings()
} catch (error) {
console.error('Error fetching settings:', error)
toast.error('获取系统配置失败')
}
}
const editSetting = (setting: Setting) => {
editingSetting.value = true
form.value = {
id: setting.id,
keyName: setting.keyName,
value: setting.value,
description: setting.description
}
showModal.value = true
}
const saveSetting = async () => {
try {
if (editingSetting.value) {
await updateSetting(form.value)
toast.success('配置更新成功')
} else {
await createSetting({
keyName: form.value.keyName,
value: form.value.value,
description: form.value.description
})
toast.success('配置创建成功')
}
closeModal()
fetchSettings()
} catch (error) {
console.error('Error saving setting:', error)
toast.error(editingSetting.value ? '更新配置失败' : '创建配置失败')
}
}
const deleteSetting = async (keyName: string) => {
if (confirm(`确定要删除配置项 "${keyName}" 吗？`)) {
try {
await deleteSettingApi(keyName)
toast.success('配置删除成功')
fetchSettings()
} catch (error) {
console.error('Error deleting setting:', error)
toast.error('删除配置失败')
}
}
}
const closeModal = () => {
showModal.value = false
editingSetting.value = false
form.value = {
id: 0,
keyName: '',
value: '',
description: ''
}
}
onMounted(() => {
fetchSettings()
})
</script>
<style scoped>
.admin-settings {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.admin-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
white-space: nowrap;
}
.admin-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
.setting-value {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
border: 1px solid transparent;
font-family: 'Inter', sans-serif;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background-color: #d4b383;
color: #050505;
border-color: #d4b383;
}
.btn-primary:hover {
background-color: transparent;
color: #d4b383;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background-color: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.btn-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.empty-state {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
padding: 0;
line-height: 1;
transition: all 0.3s ease;
}
.close-btn:hover {
color: #d4b383;
transform: rotate(90deg);
}
.modal-body {
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
}
.form-control {
width: 100%;
padding: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
font-size: 1rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-control:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.form-control:disabled {
background-color: rgba(255, 255, 255, 0.08);
cursor: not-allowed;
border-color: rgba(255, 255, 255, 0.1);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1.5rem;
}
</style>

322
client/src/pages/admin/SnippetForm.vue Normal file
View File

@@ -0,0 +1,322 @@
<template>
<div class="snippet-form-container">
<h1 class="page-title">{{ isEditing ? '编辑代码片段' : '新建代码片段' }}</h1>
<div class="form-container">
<form @submit.prevent="handleSubmit" class="snippet-form">
<!-- Title Field -->
<div class="form-group">
<label for="title">标题</label>
<input
type="text"
id="title"
v-model="form.title"
placeholder="请输入代码片段标题"
required
/>
<div class="error-message" v-if="errors.title">
{{ errors.title }}
</div>
</div>
<!-- Type Field -->
<div class="form-group">
<label for="type">类型</label>
<input
type="text"
id="type"
v-model="form.type"
placeholder="请输入代码类型（如：js、css、html等）"
required
/>
<div class="error-message" v-if="errors.type">
{{ errors.type }}
</div>
</div>
<!-- Code Field -->
<div class="form-group">
<label for="code">代码内容</label>
<textarea
id="code"
v-model="form.code"
placeholder="请输入代码内容"
rows="10"
required
></textarea>
<div class="error-message" v-if="errors.code">
{{ errors.code }}
</div>
</div>
<!-- Description Field -->
<div class="form-group">
<label for="description">描述</label>
<textarea
id="description"
v-model="form.description"
placeholder="请输入代码片段描述"
rows="3"
></textarea>
<div class="error-message" v-if="errors.description">
{{ errors.description }}
</div>
</div>
<!-- Submit Buttons -->
<div class="form-actions">
<button type="button" class="cancel-btn" @click="handleCancel">
取消
</button>
<button type="submit" class="submit-btn" :disabled="isSubmitting">
{{ isSubmitting ? '提交中...' : (isEditing ? '更新代码片段' : '创建代码片段') }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { createSnippet, updateSnippet, fetchSnippet } from '../../services/api'
const router = useRouter()
const route = useRoute()
const toast = useToast()
// Form state
const isSubmitting = ref(false)
const isEditing = computed(() => !!route.params.id)
const errors = reactive<Record<string, string>>({})
// Form data
const form = reactive({
title: '',
code: '',
type: 'js',
description: ''
})
// Validation function
const validateForm = (): boolean => {
// Reset errors
Object.keys(errors).forEach(key => delete errors[key])
let isValid = true
// Validate title
if (!form.title.trim()) {
errors.title = '代码片段标题不能为空'
isValid = false
}
// Validate type
if (!form.type.trim()) {
errors.type = '代码类型不能为空'
isValid = false
}
// Validate code
if (!form.code.trim()) {
errors.code = '代码内容不能为空'
isValid = false
}
return isValid
}
// Submit handler
const handleSubmit = async () => {
if (!validateForm()) {
return
}
isSubmitting.value = true
try {
if (isEditing.value) {
// Update existing snippet
await updateSnippet(route.params.id as string, form)
toast.success('代码片段更新成功')
} else {
// Create new snippet
await createSnippet(form)
toast.success('代码片段创建成功')
}
// Redirect to snippets list
router.push('/admin/snippets')
} catch (error: any) {
console.error('Error submitting form:', error)
toast.error(error.message || (isEditing.value ? '更新代码片段失败' : '创建代码片段失败'))
} finally {
isSubmitting.value = false
}
}
// Cancel handler
const handleCancel = () => {
router.push('/admin/snippets')
}
// Lifecycle
onMounted(async () => {
if (isEditing.value) {
try {
const snippetId = route.params.id as string
const snippet = await fetchSnippet(snippetId)
// Populate form with snippet data
form.title = snippet.title
form.code = snippet.code
form.type = snippet.type
form.description = snippet.description || ''
} catch (error: any) {
console.error('Failed to fetch snippet data:', error)
toast.error('加载代码片段数据失败: ' + (error.message || '未知错误'))
}
}
})
</script>
<style scoped>
.snippet-form-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.form-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.snippet-form {
max-width: 800px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.form-group select::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
font-family: 'Inter', sans-serif;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.cancel-btn {
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.cancel-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.submit-btn {
padding: 0.75rem 1.5rem;
background-color: #d4b383;
color: #050505;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.submit-btn:hover:not(:disabled) {
background-color: transparent;
color: #d4b383;
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-container {
padding: 1.5rem;
}
.form-actions {
flex-direction: column;
}
.cancel-btn,
.submit-btn {
width: 100%;
}
}
</style>

218
client/src/pages/admin/Snippets.vue Normal file
View File

@@ -0,0 +1,218 @@
<template>
<div class="admin-snippets">
<h1 class="page-title">代码片段管理</h1>
<div class="toolbar">
<router-link to="/admin/snippets/create" class="btn btn-primary">
+ 新增代码片段
</router-link>
</div>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>类型</th>
<th>查看次数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="snippet in snippets" :key="snippet.id">
<td>{{ snippet.id }}</td>
<td>{{ snippet.title }}</td>
<td>
<span class="type-badge">{{ snippet.type }}</span>
</td>
<td>{{ snippet.viewCount || 0 }}</td>
<td class="actions">
<router-link :to="`/admin/snippets/${snippet.id}/edit`" class="btn btn-sm btn-secondary">
编辑
</router-link>
<button @click="deleteSnippet(snippet.id)" class="btn btn-sm btn-danger">
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="snippets.length === 0" class="empty-state">
<p>暂无代码片段，请点击上方按钮新增</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAdminSnippets, deleteSnippet as deleteSnippetApi, Snippet } from '../../services/api'
import { useToast } from '../../composables/useToast'
const toast = useToast()
const snippets = ref<Snippet[]>([])
const fetchSnippets = async () => {
try {
snippets.value = await getAdminSnippets()
} catch (error) {
console.error('Error fetching snippets:', error)
toast.error('获取代码片段列表失败')
}
}
const deleteSnippet = async (id: string) => {
if (confirm('确定要删除这个代码片段吗？')) {
try {
await deleteSnippetApi(id)
toast.success('代码片段删除成功')
fetchSnippets()
} catch (error) {
console.error('Error deleting snippet:', error)
toast.error('删除代码片段失败')
}
}
}
onMounted(() => {
fetchSnippets()
})
</script>
<style scoped>
.admin-snippets {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.toolbar {
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.admin-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
}
.admin-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
.type-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
background-color: rgba(212, 179, 131, 0.2);
color: #d4b383;
border: 1px solid rgba(212, 179, 131, 0.3);
}
.actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: 'Inter', sans-serif;
border: 1px solid transparent;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background: rgba(212, 179, 131, 0.1);
color: #d4b383;
border-color: #d4b383;
}
.btn-primary:hover {
background-color: transparent;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background-color: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.btn-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.empty-state {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
</style>

219
client/src/pages/admin/TagForm.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<div class="tag-form-container">
<h1 class="page-title">{{ isEdit ? '编辑标签' : '新建标签' }}</h1>
<div class="form-card">
<form @submit.prevent="submitForm">
<!-- 名称字段 -->
<div class="form-group">
<label for="name" class="form-label">名称</label>
<input
type="text"
id="name"
v-model="tagForm.name"
class="form-input"
placeholder="请输入标签名称"
required
/>
</div>
<!-- 描述字段 -->
<div class="form-group">
<label for="description" class="form-label">描述</label>
<textarea
id="description"
v-model="tagForm.description"
class="form-input"
placeholder="请输入标签描述"
rows="3"
></textarea>
</div>
<!-- 表单按钮 -->
<div class="form-actions">
<button type="button" class="btn-secondary" @click="router.back()">
取消
</button>
<button type="submit" class="btn-primary">
{{ isEdit ? '保存修改' : '创建标签' }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { createTag, updateTag, adminGetTag } from '../../services/api'
const router = useRouter()
const route = useRoute()
const toast = useToast()
// 判断是编辑还是创建
const isEdit = computed(() => !!route.params.id)
// 标签表单数据
const tagForm = ref({
name: '',
description: ''
})
// 获取标签详情
const fetchTagDetail = async () => {
if (!isEdit.value) return
try {
const tagId = parseInt(route.params.id as string, 10)
const tag = await adminGetTag(tagId)
tagForm.value = {
name: tag.name,
description: tag.description
}
} catch (error: any) {
console.error('Failed to fetch tag detail:', error)
toast.error('加载标签数据失败: ' + (error.message || '未知错误'))
}
}
// 提交表单
const submitForm = async () => {
try {
if (isEdit.value) {
const tagId = parseInt(route.params.id as string, 10)
await updateTag(tagId, tagForm.value)
toast.success('标签更新成功')
} else {
await createTag(tagForm.value)
toast.success('标签创建成功')
}
router.push('/admin/tags')
} catch (error: any) {
console.error('Failed to submit tag form:', error)
toast.error(error.message || (isEdit.value ? '更新标签失败' : '创建标签失败'))
}
}
onMounted(() => {
fetchTagDetail()
})
</script>
<style scoped>
.tag-form-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.form-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 600px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
font-size: 0.95rem;
font-weight: 500;
color: #d4b383;
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif;
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.375rem;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.1);
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
textarea.form-input {
resize: vertical;
min-height: 100px;
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 2rem;
}
.btn-primary, .btn-secondary {
padding: 0.625rem 1.25rem;
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.btn-primary {
background: rgba(212, 179, 131, 0.1);
border: 1px solid #d4b383;
color: #d4b383;
}
.btn-primary:hover {
background: rgba(212, 179, 131, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(212, 179, 131, 0.15);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
</script>
<style scoped>
.tag-form-container {
width: 100%;
}
.form-card {
margin-top: 1rem;
}
</style>

221
client/src/pages/admin/Tags.vue Normal file
View File

@@ -0,0 +1,221 @@
<template>
<div class="tags-container">
<h1 class="page-title">标签管理</h1>
<!-- Action Buttons -->
<div class="action-bar">
<button class="btn-primary" @click="router.push('/admin/tags/create')">
<span class="btn-icon">➕</span>
新建标签
</button>
</div>
<!-- Tags Table -->
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>描述</th>
<th>创建时间</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="tag in tags" :key="tag.id">
<td class="table-cell">{{ tag.id }}</td>
<td class="table-cell">{{ tag.name }}</td>
<td class="table-cell">{{ tag.description || '-' }}</td>
<td class="table-cell">{{ tag.createdAt }}</td>
<td class="table-cell">{{ tag.updatedAt }}</td>
<td class="table-cell actions">
<button class="btn-edit" @click="router.push(`/admin/tags/${tag.id}/edit`)" title="编辑">
✏️
</button>
<button class="btn-delete" @click="handleDeleteTag(tag.id)" title="删除">
🗑️
</button>
</td>
</tr>
</tbody>
</table>
<!-- Empty State -->
<div v-if="tags.length === 0" class="empty-state">
<p>暂无标签数据</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { adminGetTags, deleteTag } from '../../services/api'
const router = useRouter()
// 标签数据
const tags = ref([])
// 获取标签列表
const fetchTags = async () => {
try {
const data = await adminGetTags()
tags.value = data
} catch (error) {
console.error('Failed to fetch tags:', error)
}
}
// 删除标签
const handleDeleteTag = async (id: number) => {
if (confirm('确定要删除这个标签吗？')) {
try {
await deleteTag(id)
fetchTags() // 重新获取标签列表
} catch (error) {
console.error('Failed to delete tag:', error)
}
}
}
onMounted(() => {
fetchTags()
})
</script>
<style scoped>
.tags-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.action-bar {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
}
.btn-primary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: rgba(212, 179, 131, 0.1);
border: 1px solid #d4b383;
color: #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.btn-primary:hover {
background: rgba(212, 179, 131, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(212, 179, 131, 0.15);
}
.btn-icon {
font-size: 1rem;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-family: 'Inter', sans-serif;
}
.admin-table thead {
background: rgba(255, 255, 255, 0.08);
}
.admin-table th {
padding: 1rem;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: #d4b383;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table td {
padding: 1rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table tr:last-child td {
border-bottom: none;
}
.admin-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.actions {
display: flex;
gap: 0.5rem;
}
.btn-edit, .btn-delete {
padding: 0.5rem;
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-edit {
background: rgba(59, 130, 246, 0.1);
color: rgba(59, 130, 246, 0.8);
}
.btn-edit:hover {
background: rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
}
.btn-delete {
background: rgba(239, 68, 68, 0.1);
color: rgba(239, 68, 68, 0.8);
}
.btn-delete:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
}
.empty-state {
padding: 3rem;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 1rem;
}
</style>

364
client/src/pages/admin/UserForm.vue Normal file
View File

@@ -0,0 +1,364 @@
<template>
<div class="user-form-container">
<h1 class="page-title">{{ isEditing ? '编辑用户' : '新建用户' }}</h1>
<div class="form-container">
<form @submit.prevent="handleSubmit" class="user-form">
<!-- Username Field -->
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
placeholder="请输入用户名"
required
/>
<div class="error-message" v-if="errors.username">
{{ errors.username }}
</div>
</div>
<!-- Email Field -->
<div class="form-group">
<label for="email">邮箱</label>
<input
type="email"
id="email"
v-model="form.email"
placeholder="请输入邮箱"
required
/>
<div class="error-message" v-if="errors.email">
{{ errors.email }}
</div>
</div>
<!-- Role Field -->
<div class="form-group">
<label for="role">角色</label>
<CustomSelect
v-model="form.role"
:options="roleOptions"
placeholder="请选择角色"
/>
<div class="error-message" v-if="errors.role">
{{ errors.role }}
</div>
</div>
<!-- Status Field -->
<div class="form-group">
<label for="isActive">状态</label>
<CustomSelect
v-model="form.isActive"
:options="statusOptions"
placeholder="请选择状态"
/>
<div class="error-message" v-if="errors.isActive">
{{ errors.isActive }}
</div>
</div>
<!-- Submit Buttons -->
<div class="form-actions">
<button type="button" class="cancel-btn" @click="handleCancel">
取消
</button>
<button type="submit" class="submit-btn" :disabled="isSubmitting">
{{ isSubmitting ? '提交中...' : (isEditing ? '更新用户' : '创建用户') }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { createUser, updateUser, fetchUser, User, API_BASE, getAuthHeaders } from '../../services/api'
import CustomSelect from '../../components/CustomSelect.vue'
const router = useRouter()
const route = useRoute()
const toast = useToast()
// Form state
const isSubmitting = ref(false)
const isEditing = computed(() => !!route.params.id)
const errors = reactive<Record<string, string>>({})
// Form data
const form = reactive({
username: '',
email: '',
role: 'viewer',
isActive: 1
})
// Select options
const roleOptions = [
{ value: 'admin', label: '管理员' },
{ value: 'editor', label: '编辑' },
{ value: 'viewer', label: '查看者' }
]
const statusOptions = [
{ value: 1, label: '激活' },
{ value: 0, label: '禁用' }
]
// Validation function
const validateForm = (): boolean => {
// Reset errors
Object.keys(errors).forEach(key => delete errors[key])
let isValid = true
// Validate username
if (!form.username.trim()) {
errors.username = '用户名不能为空'
isValid = false
}
// Validate email
if (!form.email.trim()) {
errors.email = '邮箱不能为空'
isValid = false
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
errors.email = '请输入有效的邮箱地址'
isValid = false
}
// Validate role
if (!form.role) {
errors.role = '请选择角色'
isValid = false
}
return isValid
}
// Submit handler
const handleSubmit = async () => {
if (!validateForm()) {
return
}
isSubmitting.value = true
try {
if (isEditing.value) {
// Update existing user
await updateUser(parseInt(route.params.id as string), form)
toast.success('用户更新成功')
} else {
// Create new user
await createUser(form)
toast.success('用户创建成功')
}
// Redirect to users list
router.push('/admin/users')
} catch (error: any) {
console.error('Error submitting form:', error)
toast.error(error.message || (isEditing.value ? '更新用户失败' : '创建用户失败'))
} finally {
isSubmitting.value = false
}
}
// Cancel handler
const handleCancel = () => {
router.push('/admin/users')
}
// Lifecycle
onMounted(async () => {
if (isEditing.value) {
try {
const userId = parseInt(route.params.id as string)
console.log(`Fetching user data for ID: ${userId}`)
// Direct fetch to debug
const response = await fetch(`${API_BASE}/admin/users/${userId}`, {
headers: getAuthHeaders()
})
console.log(`Response status: ${response.status}`)
// Check response headers
const contentType = response.headers.get('content-type')
console.log(`Response content-type: ${contentType}`)
// Read response as text first to debug
const responseText = await response.text()
console.log(`Response text: ${responseText}`)
// Then try to parse as JSON
if (!response.ok) {
// If response is not ok, still try to parse as JSON
let errorData
try {
errorData = JSON.parse(responseText)
throw new Error(errorData.error || '获取用户详情失败')
} catch (parseError) {
throw new Error(`获取用户详情失败，响应格式错误: ${parseError.message}`)
}
}
// Parse successful response
const user = JSON.parse(responseText)
console.log('Parsed user data:', user)
// Populate form with user data
form.username = user.username
form.email = user.email
form.role = user.role
form.isActive = user.isActive
} catch (error: any) {
console.error('Failed to fetch user data:', error)
console.error('Error stack:', error.stack)
toast.error('加载用户数据失败: ' + (error.message || '未知错误'))
}
}
})
</script>
<style scoped>
.user-form-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.form-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.user-form {
max-width: 600px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif;
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
}
.form-group input::placeholder,
.form-group select::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
font-family: 'Inter', sans-serif;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.cancel-btn {
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.cancel-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.submit-btn {
padding: 0.75rem 1.5rem;
background-color: #d4b383;
color: #050505;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.submit-btn:hover:not(:disabled) {
background-color: transparent;
color: #d4b383;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
transform: translateY(-1px);
}
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-container {
padding: 1.5rem;
}
.form-actions {
flex-direction: column;
}
.cancel-btn,
.submit-btn {
width: 100%;
}
}
</style>

574
client/src/pages/admin/Users.vue Normal file
View File

@@ -0,0 +1,574 @@
<template>
<div class="users-container">
<div class="page-header">
<h1 class="page-title">用户管理</h1>
<button class="create-btn" @click="router.push('/admin/users/create')">
<span class="btn-icon">+</span>
<span class="btn-text">新建用户</span>
</button>
</div>
<!-- Search and Filter -->
<div class="search-filter">
<div class="search-box">
<input
type="text"
placeholder="搜索用户名或邮箱"
v-model="searchQuery"
@input="handleSearch"
/>
<button class="search-btn">🔍</button>
</div>
<div class="filter-options">
<CustomSelect
v-model="roleFilter"
:options="roleFilterOptions"
@update:modelValue="handleFilter"
style="width: 120px; margin-right: 10px;"
/>
<CustomSelect
v-model="statusFilter"
:options="statusFilterOptions"
@update:modelValue="handleFilter"
style="width: 120px;"
/>
</div>
</div>
<!-- Users Table -->
<div class="table-container">
<table class="users-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in filteredUsers" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
<span class="role-badge" :class="user.role">
{{ getUserRoleText(user.role) }}
</span>
</td>
<td>
<span class="status-badge" :class="user.isActive ? 'active' : 'inactive'">
{{ user.isActive ? '激活' : '禁用' }}
</span>
</td>
<td>{{ formatDate(user.createdAt) }}</td>
<td class="actions">
<button class="action-btn edit" @click="router.push(`/admin/users/${user.id}/edit`)" title="编辑">
✏️
</button>
<button class="action-btn delete" @click="handleDelete(user.id)" title="删除">
🗑️
</button>
</td>
</tr>
</tbody>
</table>
<!-- Empty State -->
<div class="empty-state" v-if="filteredUsers.length === 0">
<div class="empty-icon">👥</div>
<h3>暂无用户数据</h3>
<p>点击右上角按钮创建新用户</p>
</div>
</div>
<!-- Pagination -->
<div class="pagination" v-if="filteredUsers.length > 0">
<button class="page-btn" @click="currentPage--" :disabled="currentPage === 1">
上一页
</button>
<span class="page-info">
第 {{ currentPage }} / {{ totalPages }} 页
</span>
<button class="page-btn" @click="currentPage++" :disabled="currentPage === totalPages">
下一页
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { getUsers, deleteUser, User } from '../../services/api'
import CustomSelect from '../../components/CustomSelect.vue'
const router = useRouter()
const toast = useToast()
// State
const users = ref<User[]>([])
const searchQuery = ref('')
const roleFilter = ref('')
const statusFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const isLoading = ref(false)
// Select options
const roleFilterOptions = [
{ value: '', label: '全部角色' },
{ value: 'admin', label: '管理员' },
{ value: 'editor', label: '编辑' },
{ value: 'viewer', label: '查看者' }
]
const statusFilterOptions = [
{ value: '', label: '全部状态' },
{ value: '1', label: '激活' },
{ value: '0', label: '禁用' }
]
// Computed properties
const filteredUsers = computed(() => {
let result = users.value
// Apply search filter
if (searchQuery.value) {
const query = searchQuery.value.toLowerCase()
result = result.filter(user =>
user.username.toLowerCase().includes(query) ||
user.email.toLowerCase().includes(query)
)
}
// Apply role filter
if (roleFilter.value) {
result = result.filter(user => user.role === roleFilter.value)
}
// Apply status filter
if (statusFilter.value !== '') {
result = result.filter(user => user.isActive === parseInt(statusFilter.value))
}
return result
})
const totalPages = computed(() => {
return Math.ceil(filteredUsers.value.length / pageSize.value)
})
// Methods
const fetchUsers = async () => {
isLoading.value = true
try {
const data = await getUsers()
users.value = data
} catch (error) {
toast.error('获取用户列表失败')
console.error('Error fetching users:', error)
} finally {
isLoading.value = false
}
}
const handleSearch = () => {
// Debounce search if needed
currentPage.value = 1
}
const handleFilter = () => {
currentPage.value = 1
}
const handleDelete = async (id: number) => {
if (confirm('确定要删除这个用户吗？')) {
try {
await deleteUser(id)
toast.success('用户删除成功')
fetchUsers() // Refresh the list
} catch (error) {
toast.error('删除用户失败')
console.error('Error deleting user:', error)
}
}
}
const getUserRoleText = (role: string): string => {
const roleMap: Record<string, string> = {
'admin': '管理员',
'editor': '编辑',
'viewer': '查看者'
}
return roleMap[role] || role
}
const formatDate = (dateString: string): string => {
const date = new Date(dateString)
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
}
// Lifecycle
onMounted(() => {
fetchUsers()
})
</script>
<style scoped>
.users-container {
width: 100%;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin: 0;
font-family: 'Inter', sans-serif;
}
.create-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background-color: #d4b383;
color: #050505;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.create-btn:hover {
background-color: transparent;
color: #d4b383;
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-icon {
font-size: 1.25rem;
}
/* Search and Filter */
.search-filter {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.search-box {
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-box input {
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
width: 300px;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.search-box input:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.search-btn {
padding: 0.75rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
color: rgba(255, 255, 255, 0.8);
}
.search-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.filter-options {
display: flex;
gap: 1rem;
}
.filter-options select {
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
cursor: pointer;
font-family: 'Inter', sans-serif;
}
.filter-options select:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
/* Table Styles */
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.users-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.users-table th,
.users-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.users-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.users-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
/* Badges */
.role-badge {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.role-badge.admin {
background-color: rgba(59, 130, 246, 0.2);
color: #3b82f6;
border-color: rgba(59, 130, 246, 0.3);
}
.role-badge.editor {
background-color: rgba(16, 185, 129, 0.2);
color: #10b981;
border-color: rgba(16, 185, 129, 0.3);
}
.role-badge.viewer {
background-color: rgba(251, 191, 36, 0.2);
color: #f59e0b;
border-color: rgba(251, 191, 36, 0.3);
}
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.status-badge.active {
background-color: rgba(16, 185, 129, 0.2);
color: #10b981;
border-color: rgba(16, 185, 129, 0.3);
}
.status-badge.inactive {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
/* Actions */
.actions {
display: flex;
gap: 0.5rem;
}
.action-btn {
padding: 0.5rem;
border: 1px solid transparent;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.action-btn.edit {
background-color: rgba(212, 179, 131, 0.2);
color: #d4b383;
border-color: rgba(212, 179, 131, 0.3);
}
.action-btn.edit:hover {
background-color: rgba(212, 179, 131, 0.3);
border-color: #d4b383;
box-shadow: 0 0 10px rgba(212, 179, 131, 0.3);
}
.action-btn.delete {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.action-btn.delete:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
/* Empty State */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
.empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
color: #d4b383;
}
.empty-state h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
color: white;
font-family: 'Inter', sans-serif;
}
.empty-state p {
margin: 0;
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.page-btn {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
}
.page-btn:hover:not(:disabled) {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-info {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.6);
font-family: 'Inter', sans-serif;
}
/* Responsive Design */
@media (max-width: 768px) {
.search-filter {
flex-direction: column;
align-items: stretch;
}
.search-box input {
width: 100%;
}
.filter-options {
flex-direction: column;
}
.users-table {
display: block;
overflow-x: auto;
}
.users-table th,
.users-table td {
white-space: nowrap;
}
}
</style>

465
client/src/pages/admin/WorkForm.vue Normal file
View File

@@ -0,0 +1,465 @@
<template>
<div class="work-form-container">
<h1 class="page-title">{{ isEditing ? '编辑作品' : '新建作品' }}</h1>
<div class="form-container">
<form @submit.prevent="handleSubmit" class="work-form">
<!-- Title Field -->
<div class="form-group">
<label for="title">作品标题</label>
<input
type="text"
id="title"
v-model="form.title"
placeholder="请输入作品标题"
required
/>
<div class="error-message" v-if="errors.title">
{{ errors.title }}
</div>
</div>
<!-- Category Field -->
<div class="form-group">
<label for="category">分类</label>
<input
type="text"
id="category"
v-model="form.category"
placeholder="请输入作品分类"
required
/>
<div class="error-message" v-if="errors.category">
{{ errors.category }}
</div>
</div>
<!-- Year Field -->
<div class="form-group">
<label for="year">创作年份</label>
<input
type="text"
id="year"
v-model="form.year"
placeholder="请输入创作年份"
required
/>
<div class="error-message" v-if="errors.year">
{{ errors.year }}
</div>
</div>
<!-- Hero Image Field -->
<div class="form-group">
<label for="heroImg">作品主图 URL</label>
<input
type="url"
id="heroImg"
v-model="form.heroImg"
placeholder="请输入作品主图 URL"
required
/>
<div class="error-message" v-if="errors.heroImg">
{{ errors.heroImg }}
</div>
</div>
<!-- Description Field -->
<div class="form-group">
<label for="desc">作品描述</label>
<textarea
id="desc"
v-model="form.desc"
placeholder="请输入作品描述"
rows="5"
required
></textarea>
<div class="error-message" v-if="errors.desc">
{{ errors.desc }}
</div>
</div>
<!-- Tech Stack Field (Simplified for now) -->
<div class="form-group">
<label for="techStack">技术栈（JSON格式）</label>
<textarea
id="techStack"
v-model="techStackJson"
placeholder='请输入技术栈 JSON，例如：[{"category": "前端", "items": ["Vue 3", "TypeScript"]}]'
rows="3"
required
></textarea>
<div class="error-message" v-if="errors.techStack">
{{ errors.techStack }}
</div>
</div>
<!-- Gallery Field (Simplified for now) -->
<div class="form-group">
<label for="gallery">作品图库（JSON格式）</label>
<textarea
id="gallery"
v-model="galleryJson"
placeholder='请输入图库 JSON，例如：["image1.jpg", "image2.jpg"]'
rows="3"
required
></textarea>
<div class="error-message" v-if="errors.gallery">
{{ errors.gallery }}
</div>
</div>
<!-- Links Field (Simplified for now) -->
<div class="form-group">
<label for="links">链接（JSON格式）</label>
<textarea
id="links"
v-model="linksJson"
placeholder='请输入链接 JSON，例如：{"live": "https://example.com"}'
rows="3"
required
></textarea>
<div class="error-message" v-if="errors.links">
{{ errors.links }}
</div>
</div>
<!-- Submit Buttons -->
<div class="form-actions">
<button type="button" class="cancel-btn" @click="handleCancel">
取消
</button>
<button type="submit" class="submit-btn" :disabled="isSubmitting">
{{ isSubmitting ? '提交中...' : (isEditing ? '更新作品' : '创建作品') }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useToast } from '../../composables/useToast'
import { createWork, updateWork, fetchWork } from '../../services/api'
const router = useRouter()
const route = useRoute()
const toast = useToast()
// Form state
const isSubmitting = ref(false)
const isEditing = computed(() => !!route.params.id)
const errors = reactive<Record<string, string>>({})
// Form data
const form = reactive({
title: '',
category: '',
year: '',
heroImg: '',
desc: '',
techStack: [] as { category: string; items: string[] }[],
gallery: [] as string[],
links: { live: '' }
})
// JSON string representations for easy editing
const techStackJson = ref('[]')
const galleryJson = ref('[]')
const linksJson = ref('{"live": ""}')
// Watch JSON strings and update form data
watch(techStackJson, (newVal) => {
try {
form.techStack = JSON.parse(newVal)
delete errors.techStack
} catch (e) {
// Validation will catch this
}
})
watch(galleryJson, (newVal) => {
try {
form.gallery = JSON.parse(newVal)
delete errors.gallery
} catch (e) {
// Validation will catch this
}
})
watch(linksJson, (newVal) => {
try {
form.links = JSON.parse(newVal)
delete errors.links
} catch (e) {
// Validation will catch this
}
})
// Validation function
const validateForm = (): boolean => {
// Reset errors
Object.keys(errors).forEach(key => delete errors[key])
let isValid = true
// Validate title
if (!form.title.trim()) {
errors.title = '作品标题不能为空'
isValid = false
}
// Validate category
if (!form.category.trim()) {
errors.category = '作品分类不能为空'
isValid = false
}
// Validate year
if (!form.year.trim()) {
errors.year = '创作年份不能为空'
isValid = false
}
// Validate hero image
if (!form.heroImg.trim()) {
errors.heroImg = '作品主图 URL 不能为空'
isValid = false
}
// Validate description
if (!form.desc.trim()) {
errors.desc = '作品描述不能为空'
isValid = false
}
// Validate tech stack JSON
try {
JSON.parse(techStackJson.value)
} catch (e) {
errors.techStack = '技术栈 JSON 格式无效'
isValid = false
}
// Validate gallery JSON
try {
JSON.parse(galleryJson.value)
} catch (e) {
errors.gallery = '图库 JSON 格式无效'
isValid = false
}
// Validate links JSON
try {
JSON.parse(linksJson.value)
} catch (e) {
errors.links = '链接 JSON 格式无效'
isValid = false
}
return isValid
}
// Submit handler
const handleSubmit = async () => {
if (!validateForm()) {
return
}
isSubmitting.value = true
try {
if (isEditing.value) {
// Update existing work
await updateWork(route.params.id as string, form)
toast.success('作品更新成功')
} else {
// Create new work
await createWork(form)
toast.success('作品创建成功')
}
// Redirect to works list
router.push('/admin/works')
} catch (error: any) {
console.error('Error submitting form:', error)
toast.error(error.message || (isEditing.value ? '更新作品失败' : '创建作品失败'))
} finally {
isSubmitting.value = false
}
}
// Cancel handler
const handleCancel = () => {
router.push('/admin/works')
}
// Lifecycle
onMounted(async () => {
if (isEditing.value) {
try {
const workId = route.params.id as string
const work = await fetchWork(workId)
// Populate form with work data
form.title = work.title
form.category = work.category
form.year = work.year
form.heroImg = work.heroImg
form.desc = work.desc
form.techStack = work.techStack
form.gallery = work.gallery
form.links = work.links
// Update JSON string representations
techStackJson.value = JSON.stringify(work.techStack, null, 2)
galleryJson.value = JSON.stringify(work.gallery, null, 2)
linksJson.value = JSON.stringify(work.links, null, 2)
} catch (error: any) {
console.error('Failed to fetch work data:', error)
toast.error('加载作品数据失败: ' + (error.message || '未知错误'))
}
}
})
</script>
<style scoped>
.work-form-container {
width: 100%;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: #d4b383;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
.form-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.work-form {
max-width: 800px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.form-group select::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
font-family: 'Inter', sans-serif;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.cancel-btn {
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.cancel-btn:hover {
background: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.submit-btn {
padding: 0.75rem 1.5rem;
background-color: #d4b383;
color: #050505;
border: 1px solid #d4b383;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Inter', sans-serif;
}
.submit-btn:hover:not(:disabled) {
background-color: transparent;
color: #d4b383;
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-container {
padding: 1.5rem;
}
.form-actions {
flex-direction: column;
}
.cancel-btn,
.submit-btn {
width: 100%;
}
}
</style>

205
client/src/pages/admin/Works.vue Normal file
View File

@@ -0,0 +1,205 @@
<template>
<div class="admin-works">
<h1 class="page-title">作品管理</h1>
<div class="toolbar">
<router-link to="/admin/works/create" class="btn btn-primary">
+ 新增作品
</router-link>
</div>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>分类</th>
<th>年份</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="work in works" :key="work.id">
<td>{{ work.id }}</td>
<td>{{ work.title }}</td>
<td>{{ work.category }}</td>
<td>{{ work.year }}</td>
<td class="actions">
<router-link :to="`/admin/works/${work.id}/edit`" class="btn btn-sm btn-secondary">
编辑
</router-link>
<button @click="deleteWork(work.id)" class="btn btn-sm btn-danger">
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="works.length === 0" class="empty-state">
<p>暂无作品，请点击上方按钮新增</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAdminWorks, deleteWork as deleteWorkApi, Work } from '../../services/api'
import { useToast } from '../../composables/useToast'
const toast = useToast()
const works = ref<Work[]>([])
const fetchWorks = async () => {
try {
works.value = await getAdminWorks()
} catch (error) {
console.error('Error fetching works:', error)
toast.error('获取作品列表失败')
}
}
const deleteWork = async (id: string) => {
if (confirm('确定要删除这个作品吗？')) {
try {
await deleteWorkApi(id)
toast.success('作品删除成功')
fetchWorks()
} catch (error) {
console.error('Error deleting work:', error)
toast.error('删除作品失败')
}
}
}
onMounted(() => {
fetchWorks()
})
</script>
<style scoped>
.admin-works {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.toolbar {
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.admin-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
}
.admin-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
.actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: 'Inter', sans-serif;
border: 1px solid transparent;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background: rgba(212, 179, 131, 0.1);
color: #d4b383;
border-color: #d4b383;
}
.btn-primary:hover {
background-color: transparent;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background-color: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.btn-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.empty-state {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
</style>

Some files were not shown because too many files have changed in this diff Show More