Browse Source
- 新增完整后台管理系统设计文档，涵盖架构、模块、数据模型、 页面布局、核心功能、技术规范、权限及安全策略 - 设计文章管理模块和联系信息管理模块的功能及数据流程 - 确定控制器、服务、模型及视图层设计方案与文件结构 - 实现后台独立样式文件 admin.css，包含导航栏、侧边栏、 文章列表、联系信息列表等样式 - 建立响应式布局及现代化管理界面风格，提升用户体验 - 规划单元测试、集成测试及安全测试策略确保系统稳定性main
26 changed files with 5726 additions and 47 deletions
@ -0,0 +1,355 @@ |
|||
# Admin后台管理系统设计文档 |
|||
|
|||
## 概述 |
|||
|
|||
为 koa3-demo 项目设计并实现一个完整的后台管理系统，允许注册用户管理自己的文章并查看联系我们的提交信息。系统采用传统的左侧导航栏布局，不继承现有页面样式，完全独立实现。 |
|||
|
|||
### 核心需求 |
|||
- 注册用户可以对自己的文章进行增删改查操作 |
|||
- 展示联系表单提交的信息 |
|||
- 采用Session认证，不使用API接口 |
|||
- 独立的管理界面，左侧导航栏+右侧内容区域 |
|||
- 不允许修改其他现有代码 |
|||
|
|||
## 架构设计 |
|||
|
|||
### 整体架构图 |
|||
|
|||
```mermaid |
|||
graph TB |
|||
A[用户访问 /admin] --> B[AdminController] |
|||
B --> C{Session验证} |
|||
C -->|未登录| D[跳转登录页] |
|||
C -->|已登录| E[后台主界面] |
|||
|
|||
E --> F[文章管理模块] |
|||
E --> G[联系信息模块] |
|||
|
|||
F --> H[ArticleService] |
|||
G --> I[ContactService] |
|||
|
|||
H --> J[ArticleModel] |
|||
I --> K[ContactModel] |
|||
|
|||
J --> L[(Articles表)] |
|||
K --> M[(Contacts表)] |
|||
``` |
|||
|
|||
### 模块架构 |
|||
|
|||
```mermaid |
|||
classDiagram |
|||
class AdminController { |
|||
+dashboard() |
|||
+articlesIndex() |
|||
+articleShow() |
|||
+articleCreate() |
|||
+articleEdit() |
|||
+articleUpdate() |
|||
+articleDelete() |
|||
+contactsIndex() |
|||
+contactShow() |
|||
+contactDelete() |
|||
} |
|||
|
|||
class ContactModel { |
|||
+findAll() |
|||
+findById() |
|||
+create() |
|||
+delete() |
|||
+findByDateRange() |
|||
} |
|||
|
|||
class ContactService { |
|||
+getAllContacts() |
|||
+getContactById() |
|||
+deleteContact() |
|||
+getContactsByDateRange() |
|||
} |
|||
|
|||
AdminController --> ContactService |
|||
AdminController --> ArticleService |
|||
ContactService --> ContactModel |
|||
ArticleService --> ArticleModel |
|||
``` |
|||
|
|||
## 数据模型设计 |
|||
|
|||
### 联系信息表 (contacts) |
|||
|
|||
| 字段名 | 类型 | 约束 | 描述 | |
|||
|--------|------|------|------| |
|||
| id | INTEGER | PRIMARY KEY | 主键ID | |
|||
| name | VARCHAR(100) | NOT NULL | 联系人姓名 | |
|||
| email | VARCHAR(255) | NOT NULL | 邮箱地址 | |
|||
| subject | VARCHAR(255) | NOT NULL | 主题 | |
|||
| message | TEXT | NOT NULL | 留言内容 | |
|||
| ip_address | VARCHAR(45) | NULL | IP地址 | |
|||
| user_agent | TEXT | NULL | 浏览器信息 | |
|||
| status | ENUM('unread','read','replied') | DEFAULT 'unread' | 处理状态 | |
|||
| created_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 创建时间 | |
|||
| updated_at | TIMESTAMP | DEFAULT CURRENT_TIMESTAMP | 更新时间 | |
|||
|
|||
### 数据库迁移设计 |
|||
|
|||
```sql |
|||
-- 创建联系信息表 |
|||
CREATE TABLE contacts ( |
|||
id INTEGER PRIMARY KEY AUTOINCREMENT, |
|||
name VARCHAR(100) NOT NULL, |
|||
email VARCHAR(255) NOT NULL, |
|||
subject VARCHAR(255) NOT NULL, |
|||
message TEXT NOT NULL, |
|||
ip_address VARCHAR(45), |
|||
user_agent TEXT, |
|||
status VARCHAR(20) DEFAULT 'unread', |
|||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP, |
|||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP |
|||
); |
|||
|
|||
-- 创建索引 |
|||
CREATE INDEX idx_contacts_status ON contacts(status); |
|||
CREATE INDEX idx_contacts_created_at ON contacts(created_at); |
|||
CREATE INDEX idx_contacts_email ON contacts(email); |
|||
``` |
|||
|
|||
## 后台界面设计 |
|||
|
|||
### 布局结构 |
|||
|
|||
``` |
|||
┌─────────────────────────────────────────────────────┐ |
|||
│ 顶部导航栏 │ |
|||
├──────────────┬──────────────────────────────────────┤ |
|||
│ │ │ |
|||
│ 左侧导航 │ 主内容区域 │ |
|||
│ │ │ |
|||
│ - 仪表盘 │ ┌────────────────────────────────┐ │ |
|||
│ - 文章管理 │ │ │ │ |
|||
│ - 所有文章 │ │ 页面内容 │ │ |
|||
│ - 新建文章 │ │ │ │ |
|||
│ - 联系信息 │ │ │ │ |
|||
│ │ └────────────────────────────────┘ │ |
|||
│ │ │ |
|||
└──────────────┴──────────────────────────────────────┘ |
|||
``` |
|||
|
|||
### 页面流程图 |
|||
|
|||
```mermaid |
|||
flowchart TD |
|||
A[访问 /admin] --> B{用户已登录?} |
|||
B -->|否| C[跳转到登录页] |
|||
B -->|是| D[后台仪表盘] |
|||
|
|||
D --> E[文章管理] |
|||
D --> F[联系信息管理] |
|||
|
|||
E --> G[文章列表] |
|||
E --> H[新建文章] |
|||
G --> I[编辑文章] |
|||
G --> J[删除文章] |
|||
|
|||
F --> K[联系信息列表] |
|||
K --> L[查看详情] |
|||
K --> M[删除信息] |
|||
|
|||
C --> N[登录成功] --> D |
|||
``` |
|||
|
|||
## 核心功能模块 |
|||
|
|||
### 1. 文章管理模块 |
|||
|
|||
#### 功能列表 |
|||
- **文章列表**: 显示当前用户的所有文章，支持状态筛选（草稿/已发布） |
|||
- **新建文章**: 创建新文章，支持Markdown编辑 |
|||
- **编辑文章**: 修改现有文章内容 |
|||
- **删除文章**: 删除指定文章 |
|||
- **发布/取消发布**: 切换文章发布状态 |
|||
|
|||
#### 权限控制 |
|||
- 用户只能操作自己创建的文章 |
|||
- 通过 `author` 字段进行权限过滤 |
|||
|
|||
#### 数据流程 |
|||
|
|||
```mermaid |
|||
sequenceDiagram |
|||
participant U as 用户 |
|||
participant AC as AdminController |
|||
participant AS as ArticleService |
|||
participant AM as ArticleModel |
|||
participant DB as 数据库 |
|||
|
|||
U->>AC: 访问文章列表 |
|||
AC->>AS: getUserArticles(userId) |
|||
AS->>AM: findByAuthor(userId) |
|||
AM->>DB: SELECT * FROM articles WHERE author = userId |
|||
DB-->>AM: 返回文章列表 |
|||
AM-->>AS: 文章数据 |
|||
AS-->>AC: 处理后的文章列表 |
|||
AC-->>U: 渲染文章管理页面 |
|||
``` |
|||
|
|||
### 2. 联系信息管理模块 |
|||
|
|||
#### 功能列表 |
|||
- **信息列表**: 显示所有联系表单提交的信息 |
|||
- **查看详情**: 查看完整的联系信息内容 |
|||
- **状态管理**: 标记为已读/未读/已回复 |
|||
- **删除信息**: 删除不需要的联系信息 |
|||
- **搜索筛选**: 按时间、状态、邮箱等条件筛选 |
|||
|
|||
#### 数据流程 |
|||
|
|||
```mermaid |
|||
sequenceDiagram |
|||
participant U as 用户 |
|||
participant AC as AdminController |
|||
participant CS as ContactService |
|||
participant CM as ContactModel |
|||
participant DB as 数据库 |
|||
|
|||
U->>AC: 访问联系信息列表 |
|||
AC->>CS: getAllContacts() |
|||
CS->>CM: findAll() |
|||
CM->>DB: SELECT * FROM contacts ORDER BY created_at DESC |
|||
DB-->>CM: 返回联系信息列表 |
|||
CM-->>CS: 联系信息数据 |
|||
CS-->>AC: 处理后的信息列表 |
|||
AC-->>U: 渲染联系信息页面 |
|||
``` |
|||
|
|||
## 技术实现规范 |
|||
|
|||
### 1. 控制器层设计 |
|||
|
|||
**AdminController.js** - 后台管理主控制器 |
|||
- 继承现有项目架构模式 |
|||
- 使用session进行用户认证 |
|||
- 所有路由需要登录权限 |
|||
|
|||
### 2. 服务层设计 |
|||
|
|||
**ContactService.js** - 联系信息业务逻辑 |
|||
- 提供联系信息的CRUD操作 |
|||
- 实现状态管理功能 |
|||
- 支持分页和搜索 |
|||
|
|||
### 3. 数据访问层设计 |
|||
|
|||
**ContactModel.js** - 联系信息数据模型 |
|||
- 实现基础CRUD操作 |
|||
- 支持条件查询和排序 |
|||
- 与现有模型保持一致的设计模式 |
|||
|
|||
### 4. 视图层设计 |
|||
|
|||
**布局文件**: `admin.pug` - 后台专用布局 |
|||
- 独立的CSS样式，不继承现有页面 |
|||
- 响应式左侧导航栏设计 |
|||
- 现代化的管理界面风格 |
|||
|
|||
**页面模板**: |
|||
- `admin/dashboard.pug` - 仪表盘首页 |
|||
- `admin/articles/index.pug` - 文章列表页 |
|||
- `admin/articles/create.pug` - 新建文章页 |
|||
- `admin/articles/edit.pug` - 编辑文章页 |
|||
- `admin/contacts/index.pug` - 联系信息列表页 |
|||
- `admin/contacts/show.pug` - 联系信息详情页 |
|||
|
|||
### 5. 路由设计 |
|||
|
|||
``` |
|||
/admin GET - 后台首页（仪表盘） |
|||
/admin/articles GET - 文章列表 |
|||
/admin/articles/create GET - 新建文章页面 |
|||
/admin/articles POST - 创建文章 |
|||
/admin/articles/:id GET - 查看文章详情 |
|||
/admin/articles/:id/edit GET - 编辑文章页面 |
|||
/admin/articles/:id PUT - 更新文章 |
|||
/admin/articles/:id DELETE - 删除文章 |
|||
/admin/contacts GET - 联系信息列表 |
|||
/admin/contacts/:id GET - 联系信息详情 |
|||
/admin/contacts/:id DELETE - 删除联系信息 |
|||
/admin/contacts/:id/status PUT - 更新联系信息状态 |
|||
``` |
|||
|
|||
## 安全考虑 |
|||
|
|||
### 1. 权限控制 |
|||
- 所有后台路由需要用户登录 |
|||
- 文章操作权限验证：用户只能操作自己的文章 |
|||
- 联系信息管理：所有登录用户都可查看 |
|||
|
|||
### 2. 数据验证 |
|||
- 服务端表单验证 |
|||
- XSS防护：模板自动转义 |
|||
- CSRF保护：利用现有session机制 |
|||
|
|||
### 3. 操作日志 |
|||
- 记录重要操作（删除文章、删除联系信息） |
|||
- 利用现有logger系统 |
|||
|
|||
## 集成方案 |
|||
|
|||
### 1. 现有系统集成 |
|||
- **联系表单增强**: 修改BasePageController中的contactPost方法，将数据存储到数据库 |
|||
- **用户认证复用**: 利用现有session认证机制 |
|||
- **数据库集成**: 使用现有Knex.js配置和迁移系统 |
|||
|
|||
### 2. 不影响现有功能 |
|||
- 新增模块独立部署在 `/admin` 路径下 |
|||
- 不修改现有控制器、服务和模型 |
|||
- 独立的样式文件，避免样式冲突 |
|||
|
|||
## 文件结构 |
|||
|
|||
``` |
|||
src/ |
|||
├── controllers/ |
|||
│ └── Page/ |
|||
│ └── AdminController.js # 后台管理控制器 |
|||
├── services/ |
|||
│ └── ContactService.js # 联系信息服务 |
|||
├── db/ |
|||
│ ├── models/ |
|||
│ │ └── ContactModel.js # 联系信息模型 |
|||
│ └── migrations/ |
|||
│ └── xxxx_create_contacts_table.mjs # 联系表迁移文件 |
|||
├── views/ |
|||
│ ├── layouts/ |
|||
│ │ └── admin.pug # 后台布局模板 |
|||
│ └── admin/ |
|||
│ ├── dashboard.pug # 仪表盘 |
|||
│ ├── articles/ |
|||
│ │ ├── index.pug # 文章列表 |
|||
│ │ ├── create.pug # 新建文章 |
|||
│ │ └── edit.pug # 编辑文章 |
|||
│ └── contacts/ |
|||
│ ├── index.pug # 联系信息列表 |
|||
│ └── show.pug # 联系信息详情 |
|||
└── public/ |
|||
├── css/ |
|||
│ └── admin.css # 后台专用样式 |
|||
└── js/ |
|||
└── admin.js # 后台专用脚本 |
|||
``` |
|||
|
|||
## 测试策略 |
|||
|
|||
### 单元测试 |
|||
- ContactModel CRUD操作测试 |
|||
- ContactService业务逻辑测试 |
|||
- AdminController路由处理测试 |
|||
|
|||
### 集成测试 |
|||
- 用户权限验证测试 |
|||
- 文章管理完整流程测试 |
|||
- 联系信息管理流程测试 |
|||
|
|||
### 安全测试 |
|||
- 权限绕过测试 |
|||
- XSS攻击防护测试 |
|||
- 数据验证测试 |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
@ -0,0 +1,973 @@ |
|||
/** |
|||
* Admin 后台管理系统 JavaScript |
|||
* 提供通用的交互功能和工具函数 |
|||
*/ |
|||
|
|||
(function() { |
|||
'use strict'; |
|||
|
|||
// 通用工具函数
|
|||
const AdminUtils = { |
|||
/** |
|||
* 显示Toast消息 |
|||
* @param {string} type - 消息类型 (success, error, warning, info) |
|||
* @param {string} message - 消息内容 |
|||
* @param {number} duration - 显示时长（毫秒） |
|||
*/ |
|||
showToast: function(type, message, duration = 3000) { |
|||
// 移除现有的toast
|
|||
const existingToast = document.querySelector('.admin-toast'); |
|||
if (existingToast) { |
|||
existingToast.remove(); |
|||
} |
|||
|
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close" aria-label="关闭">×</button> |
|||
`;
|
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失
|
|||
setTimeout(() => { |
|||
this.hideToast(toast); |
|||
}, duration); |
|||
|
|||
// 点击关闭
|
|||
const closeBtn = toast.querySelector('.toast-close'); |
|||
if (closeBtn) { |
|||
closeBtn.addEventListener('click', () => { |
|||
this.hideToast(toast); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 隐藏Toast消息 |
|||
* @param {HTMLElement} toast - Toast元素 |
|||
*/ |
|||
hideToast: function(toast) { |
|||
if (toast && toast.parentNode) { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
if (toast.parentNode) { |
|||
toast.parentNode.removeChild(toast); |
|||
} |
|||
}, 300); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 确认对话框 |
|||
* @param {string} message - 确认消息 |
|||
* @param {string} title - 对话框标题 |
|||
* @returns {boolean} 用户确认结果 |
|||
*/ |
|||
confirm: function(message, title = '确认') { |
|||
return confirm(`${title}\n\n${message}`); |
|||
}, |
|||
|
|||
/** |
|||
* 发送AJAX请求 |
|||
* @param {string} url - 请求URL |
|||
* @param {object} options - 请求选项 |
|||
* @returns {Promise} 请求Promise |
|||
*/ |
|||
ajax: function(url, options = {}) { |
|||
const defaultOptions = { |
|||
method: 'GET', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
credentials: 'same-origin' |
|||
}; |
|||
|
|||
const mergedOptions = Object.assign(defaultOptions, options); |
|||
|
|||
if (mergedOptions.body && typeof mergedOptions.body === 'object') { |
|||
mergedOptions.body = JSON.stringify(mergedOptions.body); |
|||
} |
|||
|
|||
return fetch(url, mergedOptions) |
|||
.then(response => { |
|||
if (!response.ok) { |
|||
throw new Error(`HTTP ${response.status}: ${response.statusText}`); |
|||
} |
|||
return response.json(); |
|||
}) |
|||
.catch(error => { |
|||
console.error('AJAX请求失败:', error); |
|||
throw error; |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 防抖函数 |
|||
* @param {Function} func - 要防抖的函数 |
|||
* @param {number} delay - 延迟时间（毫秒） |
|||
* @returns {Function} 防抖后的函数 |
|||
*/ |
|||
debounce: function(func, delay) { |
|||
let timeoutId; |
|||
return function(...args) { |
|||
clearTimeout(timeoutId); |
|||
timeoutId = setTimeout(() => func.apply(this, args), delay); |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 格式化日期 |
|||
* @param {Date|string} date - 日期对象或字符串 |
|||
* @param {string} format - 格式类型 (date, time, datetime) |
|||
* @returns {string} 格式化后的日期字符串 |
|||
*/ |
|||
formatDate: function(date, format = 'datetime') { |
|||
const d = new Date(date); |
|||
if (isNaN(d.getTime())) { |
|||
return '无效日期'; |
|||
} |
|||
|
|||
const options = { |
|||
date: { year: 'numeric', month: '2-digit', day: '2-digit' }, |
|||
time: { hour: '2-digit', minute: '2-digit' }, |
|||
datetime: { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit' |
|||
} |
|||
}; |
|||
|
|||
return d.toLocaleString('zh-CN', options[format] || options.datetime); |
|||
}, |
|||
|
|||
/** |
|||
* 复制文本到剪贴板 |
|||
* @param {string} text - 要复制的文本 |
|||
* @returns {Promise<boolean>} 复制是否成功 |
|||
*/ |
|||
copyToClipboard: function(text) { |
|||
if (navigator.clipboard) { |
|||
return navigator.clipboard.writeText(text) |
|||
.then(() => { |
|||
this.showToast('success', '已复制到剪贴板'); |
|||
return true; |
|||
}) |
|||
.catch(err => { |
|||
console.error('复制失败:', err); |
|||
return this.fallbackCopyTextToClipboard(text); |
|||
}); |
|||
} else { |
|||
return Promise.resolve(this.fallbackCopyTextToClipboard(text)); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 降级复制文本到剪贴板 |
|||
* @param {string} text - 要复制的文本 |
|||
* @returns {boolean} 复制是否成功 |
|||
*/ |
|||
fallbackCopyTextToClipboard: function(text) { |
|||
const textArea = document.createElement('textarea'); |
|||
textArea.value = text; |
|||
textArea.style.position = 'fixed'; |
|||
textArea.style.left = '-999999px'; |
|||
textArea.style.top = '-999999px'; |
|||
document.body.appendChild(textArea); |
|||
textArea.focus(); |
|||
textArea.select(); |
|||
|
|||
try { |
|||
const successful = document.execCommand('copy'); |
|||
if (successful) { |
|||
this.showToast('success', '已复制到剪贴板'); |
|||
} else { |
|||
this.showToast('error', '复制失败，请手动复制'); |
|||
} |
|||
return successful; |
|||
} catch (err) { |
|||
console.error('降级复制失败:', err); |
|||
this.showToast('error', '复制失败，请手动复制'); |
|||
return false; |
|||
} finally { |
|||
document.body.removeChild(textArea); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
// 初始化函数
|
|||
const AdminApp = { |
|||
/** |
|||
* 初始化应用 |
|||
*/ |
|||
init: function() { |
|||
this.initDropdowns(); |
|||
this.initMobileNav(); |
|||
this.initToasts(); |
|||
this.initFormValidation(); |
|||
this.initTableActions(); |
|||
this.initSearch(); |
|||
this.initArticleEditor(); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化下拉菜单 |
|||
*/ |
|||
initDropdowns: function() { |
|||
document.addEventListener('click', (e) => { |
|||
// 关闭所有下拉菜单
|
|||
const dropdowns = document.querySelectorAll('.dropdown'); |
|||
dropdowns.forEach(dropdown => { |
|||
if (!dropdown.contains(e.target)) { |
|||
dropdown.classList.remove('active'); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
// 下拉菜单触发器
|
|||
const dropdownTriggers = document.querySelectorAll('.dropdown-trigger'); |
|||
dropdownTriggers.forEach(trigger => { |
|||
trigger.addEventListener('click', (e) => { |
|||
e.stopPropagation(); |
|||
const dropdown = trigger.closest('.dropdown'); |
|||
dropdown.classList.toggle('active'); |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化移动端导航 |
|||
*/ |
|||
initMobileNav: function() { |
|||
// 创建移动端菜单按钮
|
|||
if (window.innerWidth <= 768) { |
|||
this.createMobileMenuButton(); |
|||
} |
|||
|
|||
window.addEventListener('resize', () => { |
|||
if (window.innerWidth <= 768) { |
|||
this.createMobileMenuButton(); |
|||
} else { |
|||
this.removeMobileMenuButton(); |
|||
document.body.classList.remove('sidebar-open'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 创建移动端菜单按钮 |
|||
*/ |
|||
createMobileMenuButton: function() { |
|||
if (document.querySelector('.mobile-menu-btn')) return; |
|||
|
|||
const button = document.createElement('button'); |
|||
button.className = 'mobile-menu-btn'; |
|||
button.innerHTML = '☰'; |
|||
button.style.cssText = ` |
|||
background: none; |
|||
border: none; |
|||
font-size: 1.25rem; |
|||
cursor: pointer; |
|||
padding: 0.5rem; |
|||
color: #4a5568; |
|||
`;
|
|||
|
|||
button.addEventListener('click', () => { |
|||
document.body.classList.toggle('sidebar-open'); |
|||
}); |
|||
|
|||
const headerLeft = document.querySelector('.admin-header-left'); |
|||
if (headerLeft) { |
|||
headerLeft.insertBefore(button, headerLeft.firstChild); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 移除移动端菜单按钮 |
|||
*/ |
|||
removeMobileMenuButton: function() { |
|||
const button = document.querySelector('.mobile-menu-btn'); |
|||
if (button) { |
|||
button.remove(); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 初始化现有Toast消息 |
|||
*/ |
|||
initToasts: function() { |
|||
const existingToasts = document.querySelectorAll('.admin-toast'); |
|||
existingToasts.forEach(toast => { |
|||
setTimeout(() => { |
|||
AdminUtils.hideToast(toast); |
|||
}, 3000); |
|||
|
|||
const closeBtn = toast.querySelector('.toast-close'); |
|||
if (closeBtn) { |
|||
closeBtn.addEventListener('click', () => { |
|||
AdminUtils.hideToast(toast); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化表单验证 |
|||
*/ |
|||
initFormValidation: function() { |
|||
const forms = document.querySelectorAll('form'); |
|||
forms.forEach(form => { |
|||
form.addEventListener('submit', (e) => { |
|||
const requiredFields = form.querySelectorAll('[required]'); |
|||
let isValid = true; |
|||
|
|||
requiredFields.forEach(field => { |
|||
if (!field.value.trim()) { |
|||
isValid = false; |
|||
field.style.borderColor = '#f56565'; |
|||
|
|||
// 移除已有的错误提示
|
|||
const existingError = field.parentNode.querySelector('.field-error'); |
|||
if (existingError) { |
|||
existingError.remove(); |
|||
} |
|||
|
|||
// 添加错误提示
|
|||
const error = document.createElement('div'); |
|||
error.className = 'field-error'; |
|||
error.style.cssText = 'color: #f56565; font-size: 0.75rem; margin-top: 0.25rem;'; |
|||
error.textContent = '此字段为必填项'; |
|||
field.parentNode.appendChild(error); |
|||
} else { |
|||
field.style.borderColor = ''; |
|||
const existingError = field.parentNode.querySelector('.field-error'); |
|||
if (existingError) { |
|||
existingError.remove(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
if (!isValid) { |
|||
e.preventDefault(); |
|||
AdminUtils.showToast('error', '请填写所有必填字段'); |
|||
} |
|||
}); |
|||
|
|||
// 实时验证
|
|||
const requiredFields = form.querySelectorAll('[required]'); |
|||
requiredFields.forEach(field => { |
|||
field.addEventListener('blur', () => { |
|||
if (!field.value.trim()) { |
|||
field.style.borderColor = '#f56565'; |
|||
} else { |
|||
field.style.borderColor = ''; |
|||
const existingError = field.parentNode.querySelector('.field-error'); |
|||
if (existingError) { |
|||
existingError.remove(); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化表格操作 |
|||
*/ |
|||
initTableActions: function() { |
|||
// 表格行点击
|
|||
const tableRows = document.querySelectorAll('tbody tr'); |
|||
tableRows.forEach(row => { |
|||
row.addEventListener('click', (e) => { |
|||
// 如果点击的是按钮或链接，不执行行点击事件
|
|||
if (e.target.closest('button, a, select, input')) { |
|||
return; |
|||
} |
|||
|
|||
// 高亮当前行
|
|||
tableRows.forEach(r => r.classList.remove('selected')); |
|||
row.classList.add('selected'); |
|||
}); |
|||
}); |
|||
|
|||
// 状态选择器
|
|||
const statusSelects = document.querySelectorAll('.status-select'); |
|||
statusSelects.forEach(select => { |
|||
select.addEventListener('change', (e) => { |
|||
e.stopPropagation(); |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化搜索功能 |
|||
*/ |
|||
initSearch: function() { |
|||
const searchInputs = document.querySelectorAll('.search-input'); |
|||
searchInputs.forEach(input => { |
|||
// 搜索防抖
|
|||
const debouncedSearch = AdminUtils.debounce((value) => { |
|||
if (value.length >= 2 || value.length === 0) { |
|||
// 可以在这里添加实时搜索功能
|
|||
console.log('搜索:', value); |
|||
} |
|||
}, 300); |
|||
|
|||
input.addEventListener('input', (e) => { |
|||
debouncedSearch(e.target.value); |
|||
}); |
|||
|
|||
// 回车搜索
|
|||
input.addEventListener('keypress', (e) => { |
|||
if (e.key === 'Enter') { |
|||
e.preventDefault(); |
|||
e.target.closest('form').submit(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化文章编辑器增强功能 |
|||
*/ |
|||
initArticleEditor: function() { |
|||
const titleInput = document.getElementById('title'); |
|||
const slugInput = document.getElementById('slug'); |
|||
const contentTextarea = document.getElementById('content'); |
|||
|
|||
if (titleInput && slugInput) { |
|||
// 自动生成slug
|
|||
titleInput.addEventListener('input', AdminUtils.debounce((e) => { |
|||
if (!slugInput.value.trim() || slugInput.dataset.autoGenerated === 'true') { |
|||
const slug = this.generateSlug(e.target.value); |
|||
slugInput.value = slug; |
|||
slugInput.dataset.autoGenerated = 'true'; |
|||
} |
|||
}, 300)); |
|||
|
|||
// 手动编辑slug时停止自动生成
|
|||
slugInput.addEventListener('input', () => { |
|||
slugInput.dataset.autoGenerated = 'false'; |
|||
}); |
|||
} |
|||
|
|||
if (contentTextarea) { |
|||
// 添加工具栏
|
|||
this.addEditorToolbar(contentTextarea); |
|||
|
|||
// Tab键支持
|
|||
contentTextarea.addEventListener('keydown', (e) => { |
|||
if (e.key === 'Tab') { |
|||
e.preventDefault(); |
|||
const start = contentTextarea.selectionStart; |
|||
const end = contentTextarea.selectionEnd; |
|||
const value = contentTextarea.value; |
|||
|
|||
contentTextarea.value = value.substring(0, start) + ' ' + value.substring(end); |
|||
contentTextarea.selectionStart = contentTextarea.selectionEnd = start + 4; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// 初始化字符计数
|
|||
this.initCharCounters(); |
|||
}, |
|||
|
|||
/** |
|||
* 生成URL别名 |
|||
*/ |
|||
generateSlug: function(title) { |
|||
return title |
|||
.toLowerCase() |
|||
.replace(/[^\w\u4e00-\u9fa5]+/g, '-') |
|||
.replace(/^-+|-+$/g, '') |
|||
.substring(0, 100); |
|||
}, |
|||
|
|||
/** |
|||
* 添加编辑器工具栏 |
|||
*/ |
|||
addEditorToolbar: function(textarea) { |
|||
const toolbar = document.createElement('div'); |
|||
toolbar.className = 'editor-toolbar'; |
|||
toolbar.innerHTML = ` |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="bold" title="粗体 (Ctrl+B)">💪</button> |
|||
<button type="button" class="editor-btn" data-action="italic" title="斜体 (Ctrl+I)">🌯</button> |
|||
<button type="button" class="editor-btn" data-action="code" title="代码">💻</button> |
|||
</div> |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="h1" title="标题 1">🏆</button> |
|||
<button type="button" class="editor-btn" data-action="h2" title="标题 2">🥈</button> |
|||
<button type="button" class="editor-btn" data-action="h3" title="标题 3">🥉</button> |
|||
</div> |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="ul" title="无序列表">📝</button> |
|||
<button type="button" class="editor-btn" data-action="ol" title="有序列表">🔢</button> |
|||
<button type="button" class="editor-btn" data-action="quote" title="引用">💬</button> |
|||
</div> |
|||
<div class="editor-toolbar-group"> |
|||
<button type="button" class="editor-btn" data-action="link" title="链接">🔗</button> |
|||
<button type="button" class="editor-btn" data-action="image" title="图片">🖼️</button> |
|||
</div> |
|||
`;
|
|||
|
|||
// 添加样式
|
|||
const style = document.createElement('style'); |
|||
style.textContent = ` |
|||
.editor-toolbar { |
|||
display: flex; |
|||
gap: 0.5rem; |
|||
padding: 0.75rem; |
|||
background: #f8fafc; |
|||
border: 1px solid #e2e8f0; |
|||
border-bottom: none; |
|||
border-radius: 6px 6px 0 0; |
|||
flex-wrap: wrap; |
|||
} |
|||
.editor-toolbar-group { |
|||
display: flex; |
|||
gap: 0.25rem; |
|||
padding: 0 0.5rem; |
|||
border-right: 1px solid #e2e8f0; |
|||
} |
|||
.editor-toolbar-group:last-child { |
|||
border-right: none; |
|||
} |
|||
.editor-btn { |
|||
background: none; |
|||
border: 1px solid transparent; |
|||
border-radius: 4px; |
|||
padding: 0.25rem 0.5rem; |
|||
cursor: pointer; |
|||
font-size: 0.875rem; |
|||
transition: all 0.2s; |
|||
} |
|||
.editor-btn:hover { |
|||
background: #e2e8f0; |
|||
border-color: #cbd5e0; |
|||
} |
|||
.editor-toolbar + textarea { |
|||
border-radius: 0 0 6px 6px; |
|||
} |
|||
`;
|
|||
|
|||
if (!document.querySelector('#editor-toolbar-style')) { |
|||
style.id = 'editor-toolbar-style'; |
|||
document.head.appendChild(style); |
|||
} |
|||
|
|||
// 插入工具栏
|
|||
textarea.parentNode.insertBefore(toolbar, textarea); |
|||
|
|||
// 绑定事件
|
|||
toolbar.addEventListener('click', (e) => { |
|||
if (e.target.classList.contains('editor-btn')) { |
|||
e.preventDefault(); |
|||
const action = e.target.dataset.action; |
|||
this.executeEditorAction(textarea, action); |
|||
} |
|||
}); |
|||
|
|||
// 键盘快捷键
|
|||
textarea.addEventListener('keydown', (e) => { |
|||
if (e.ctrlKey || e.metaKey) { |
|||
switch (e.key.toLowerCase()) { |
|||
case 'b': |
|||
e.preventDefault(); |
|||
this.executeEditorAction(textarea, 'bold'); |
|||
break; |
|||
case 'i': |
|||
e.preventDefault(); |
|||
this.executeEditorAction(textarea, 'italic'); |
|||
break; |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 执行编辑器动作 |
|||
*/ |
|||
executeEditorAction: function(textarea, action) { |
|||
const start = textarea.selectionStart; |
|||
const end = textarea.selectionEnd; |
|||
const selectedText = textarea.value.substring(start, end); |
|||
const beforeText = textarea.value.substring(0, start); |
|||
const afterText = textarea.value.substring(end); |
|||
|
|||
let insertText = ''; |
|||
let cursorOffset = 0; |
|||
|
|||
switch (action) { |
|||
case 'bold': |
|||
insertText = `**${selectedText || '粗体文字'}**`; |
|||
cursorOffset = selectedText ? 0 : -2; |
|||
break; |
|||
case 'italic': |
|||
insertText = `*${selectedText || '斜体文字'}*`; |
|||
cursorOffset = selectedText ? 0 : -1; |
|||
break; |
|||
case 'code': |
|||
insertText = `\`${selectedText || '代码'}\``; |
|||
cursorOffset = selectedText ? 0 : -1; |
|||
break; |
|||
case 'h1': |
|||
insertText = `# ${selectedText || '标题 1'}`; |
|||
break; |
|||
case 'h2': |
|||
insertText = `## ${selectedText || '标题 2'}`; |
|||
break; |
|||
case 'h3': |
|||
insertText = `### ${selectedText || '标题 3'}`; |
|||
break; |
|||
case 'ul': |
|||
insertText = `- ${selectedText || '列表项'}`; |
|||
break; |
|||
case 'ol': |
|||
insertText = `1. ${selectedText || '列表项'}`; |
|||
break; |
|||
case 'quote': |
|||
insertText = `> ${selectedText || '引用文字'}`; |
|||
break; |
|||
case 'link': |
|||
const linkText = selectedText || '链接文字'; |
|||
insertText = `[${linkText}](URL)`; |
|||
cursorOffset = -4; |
|||
break; |
|||
case 'image': |
|||
const altText = selectedText || '图片描述'; |
|||
insertText = ``; |
|||
cursorOffset = -4; |
|||
break; |
|||
} |
|||
|
|||
textarea.value = beforeText + insertText + afterText; |
|||
const newCursorPos = start + insertText.length + cursorOffset; |
|||
textarea.setSelectionRange(newCursorPos, newCursorPos); |
|||
textarea.focus(); |
|||
}, |
|||
|
|||
/** |
|||
* 初始化字符计数器 |
|||
*/ |
|||
initCharCounters: function() { |
|||
const fields = [ |
|||
{ id: 'title', max: 200 }, |
|||
{ id: 'excerpt', max: 500 }, |
|||
{ id: 'tags', max: 200 }, |
|||
{ id: 'slug', max: 100 } |
|||
]; |
|||
|
|||
fields.forEach(field => { |
|||
const element = document.getElementById(field.id); |
|||
if (element) { |
|||
this.setupCharCounter(element, field.max); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 设置字符计数器 |
|||
*/ |
|||
setupCharCounter: function(element, maxLength) { |
|||
const helpElement = element.nextElementSibling; |
|||
if (!helpElement || !helpElement.classList.contains('form-help')) { |
|||
return; |
|||
} |
|||
|
|||
const originalText = helpElement.textContent; |
|||
|
|||
const updateCounter = () => { |
|||
const currentLength = element.value.length; |
|||
const remaining = maxLength - currentLength; |
|||
|
|||
if (remaining < 50) { |
|||
helpElement.textContent = `${originalText} (还可输入${remaining}字符)`; |
|||
helpElement.style.color = remaining < 10 ? '#f56565' : '#ed8936'; |
|||
} else { |
|||
helpElement.textContent = originalText; |
|||
helpElement.style.color = ''; |
|||
} |
|||
}; |
|||
|
|||
element.addEventListener('input', updateCounter); |
|||
updateCounter(); |
|||
} |
|||
}; |
|||
|
|||
// 全局删除函数
|
|||
window.deleteArticle = function(id, title) { |
|||
if (AdminUtils.confirm(`确定要删除文章《${title}》吗？此操作不可撤销。`, '删除确认')) { |
|||
AdminUtils.ajax(`/admin/articles/${id}`, { |
|||
method: 'DELETE' |
|||
}) |
|||
.then(data => { |
|||
if (data.success) { |
|||
AdminUtils.showToast('success', data.message || '文章删除成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
AdminUtils.showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
AdminUtils.showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 全局联系信息删除函数
|
|||
window.deleteContact = function(id, title) { |
|||
if (AdminUtils.confirm(`确定要删除联系信息《${title}》吗？此操作不可撤销。`, '删除确认')) { |
|||
AdminUtils.ajax(`/admin/contacts/${id}`, { |
|||
method: 'DELETE' |
|||
}) |
|||
.then(data => { |
|||
if (data.success) { |
|||
AdminUtils.showToast('success', data.message || '联系信息删除成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
AdminUtils.showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
AdminUtils.showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 全局状态更新函数
|
|||
window.updateContactStatus = function(id, status) { |
|||
if (!status) return; |
|||
|
|||
AdminUtils.ajax(`/admin/contacts/${id}/status`, { |
|||
method: 'PUT', |
|||
body: { status } |
|||
}) |
|||
.then(data => { |
|||
if (data.success) { |
|||
AdminUtils.showToast('success', data.message || '状态更新成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
AdminUtils.showToast('error', data.message || '状态更新失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('状态更新失败:', error); |
|||
AdminUtils.showToast('error', '状态更新失败，请稍后重试'); |
|||
}); |
|||
}; |
|||
|
|||
// 全局复制邮箱函数
|
|||
window.copyEmail = function(email) { |
|||
AdminUtils.copyToClipboard(email || document.querySelector('[data-email]')?.dataset.email || ''); |
|||
}; |
|||
|
|||
// 全局预览文章函数
|
|||
window.previewArticle = function() { |
|||
const titleElement = document.getElementById('title'); |
|||
const contentElement = document.getElementById('content'); |
|||
|
|||
if (!titleElement || !contentElement) { |
|||
AdminUtils.showToast('error', '无法找到文章内容'); |
|||
return; |
|||
} |
|||
|
|||
const title = titleElement.value.trim(); |
|||
const content = contentElement.value.trim(); |
|||
|
|||
if (!content) { |
|||
AdminUtils.showToast('warning', '请先输入文章内容'); |
|||
contentElement.focus(); |
|||
return; |
|||
} |
|||
|
|||
// 简单的Markdown预览
|
|||
const previewWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes'); |
|||
if (!previewWindow) { |
|||
AdminUtils.showToast('error', '无法打开预览窗口，请检查浏览器弹窗设置'); |
|||
return; |
|||
} |
|||
|
|||
// 基础的Markdown转换
|
|||
let htmlContent = content |
|||
.replace(/\n/g, '<br>') |
|||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') |
|||
.replace(/\*(.*?)\*/g, '<em>$1</em>') |
|||
.replace(/`(.*?)`/g, '<code>$1</code>') |
|||
.replace(/^# (.*$)/gim, '<h1>$1</h1>') |
|||
.replace(/^## (.*$)/gim, '<h2>$1</h2>') |
|||
.replace(/^### (.*$)/gim, '<h3>$1</h3>'); |
|||
|
|||
previewWindow.document.write(` |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>文章预览 - ${title || '未设置标题'}</title> |
|||
<style> |
|||
body { |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; |
|||
max-width: 800px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
line-height: 1.7; |
|||
color: #2d3748; |
|||
background: #ffffff; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { |
|||
color: #1a202c; |
|||
margin-top: 2rem; |
|||
margin-bottom: 1rem; |
|||
font-weight: 600; |
|||
} |
|||
h1 { font-size: 2rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; } |
|||
h2 { font-size: 1.5rem; } |
|||
h3 { font-size: 1.25rem; } |
|||
p { margin-bottom: 1rem; } |
|||
code { |
|||
background: #f7fafc; |
|||
padding: 0.25rem 0.5rem; |
|||
border-radius: 0.25rem; |
|||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; |
|||
font-size: 0.875rem; |
|||
color: #e53e3e; |
|||
} |
|||
pre { |
|||
background: #f7fafc; |
|||
padding: 1rem; |
|||
border-radius: 0.5rem; |
|||
overflow-x: auto; |
|||
border: 1px solid #e2e8f0; |
|||
} |
|||
pre code { |
|||
background: none; |
|||
padding: 0; |
|||
color: #2d3748; |
|||
} |
|||
blockquote { |
|||
border-left: 4px solid #4299e1; |
|||
padding-left: 1rem; |
|||
margin: 1rem 0; |
|||
color: #4a5568; |
|||
background: #f7fafc; |
|||
padding: 1rem; |
|||
border-radius: 0.5rem; |
|||
} |
|||
strong { font-weight: 600; color: #1a202c; } |
|||
em { font-style: italic; color: #4a5568; } |
|||
.preview-header { |
|||
background: #4299e1; |
|||
color: white; |
|||
padding: 1rem; |
|||
margin: -2rem -2rem 2rem -2rem; |
|||
border-radius: 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.preview-title { |
|||
font-size: 1.125rem; |
|||
font-weight: 600; |
|||
margin: 0; |
|||
} |
|||
.preview-close { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border: none; |
|||
color: white; |
|||
padding: 0.5rem 1rem; |
|||
border-radius: 0.25rem; |
|||
cursor: pointer; |
|||
font-size: 0.875rem; |
|||
} |
|||
.preview-close:hover { |
|||
background: rgba(255, 255, 255, 0.3); |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="preview-header"> |
|||
<h1 class="preview-title">📄 文章预览</h1> |
|||
<button class="preview-close" onclick="window.close()">关闭预览</button> |
|||
</div> |
|||
<h1>${title || '未设置标题'}</h1> |
|||
<div class="article-content">${htmlContent}</div> |
|||
<script> |
|||
// 键盘快捷键
|
|||
document.addEventListener('keydown', (e) => { |
|||
if (e.key === 'Escape') { |
|||
window.close(); |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
`);
|
|||
previewWindow.document.close(); |
|||
|
|||
// 聚焦到预览窗口
|
|||
previewWindow.focus(); |
|||
}; |
|||
|
|||
// 全局工具函数
|
|||
window.AdminUtils = AdminUtils; |
|||
|
|||
// 页面加载完成后初始化
|
|||
if (document.readyState === 'loading') { |
|||
document.addEventListener('DOMContentLoaded', () => { |
|||
AdminApp.init(); |
|||
}); |
|||
} else { |
|||
AdminApp.init(); |
|||
} |
|||
|
|||
// CSS样式注入（移动端菜单按钮样式）
|
|||
const style = document.createElement('style'); |
|||
style.textContent = ` |
|||
.selected { |
|||
background-color: #ebf8ff !important; |
|||
} |
|||
|
|||
.field-error { |
|||
color: #f56565; |
|||
font-size: 0.75rem; |
|||
margin-top: 0.25rem; |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.admin-sidebar { |
|||
transform: translateX(-100%); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.sidebar-open .admin-sidebar { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
.sidebar-open::before { |
|||
content: ''; |
|||
position: fixed; |
|||
top: 60px; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 40; |
|||
} |
|||
} |
|||
`;
|
|||
document.head.appendChild(style); |
|||
|
|||
})(); |
|||
@ -0,0 +1,391 @@ |
|||
import Router from "../../utils/router.js" |
|||
import ArticleService from "../../services/ArticleService.js" |
|||
import ContactService from "../../services/ContactService.js" |
|||
import { logger } from "../../logger.js" |
|||
import CommonError from "../../utils/error/CommonError.js" |
|||
|
|||
/** |
|||
* 后台管理控制器 |
|||
* 负责处理后台管理相关的页面和操作 |
|||
*/ |
|||
class AdminController { |
|||
constructor() { |
|||
this.articleService = new ArticleService() |
|||
this.contactService = new ContactService() |
|||
} |
|||
|
|||
/** |
|||
* 后台首页（仪表盘） |
|||
*/ |
|||
async dashboard(ctx) { |
|||
try { |
|||
// 获取统计数据
|
|||
const [contactStats, userArticles] = await Promise.all([ |
|||
this.contactService.getContactStats(), |
|||
this.articleService.getUserArticles(ctx.session.user.id) |
|||
]); |
|||
|
|||
// 计算文章统计
|
|||
const articleStats = { |
|||
total: userArticles.length, |
|||
published: userArticles.filter(a => a.status === 'published').length, |
|||
draft: userArticles.filter(a => a.status === 'draft').length |
|||
}; |
|||
|
|||
// 获取最近的联系信息
|
|||
const recentContacts = await this.contactService.getAllContacts({ |
|||
page: 1, |
|||
limit: 5, |
|||
orderBy: 'created_at', |
|||
order: 'desc' |
|||
}); |
|||
|
|||
// 获取最近的文章
|
|||
const recentArticles = userArticles |
|||
.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)) |
|||
.slice(0, 5); |
|||
|
|||
return await ctx.render("admin/dashboard", { |
|||
contactStats, |
|||
articleStats, |
|||
recentContacts: recentContacts.contacts, |
|||
recentArticles, |
|||
title: "后台管理" |
|||
}, { layout: "admin" }); |
|||
} catch (error) { |
|||
logger.error(`仪表盘加载失败: ${error.message}`); |
|||
throw new CommonError("仪表盘加载失败"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 列表页 |
|||
*/ |
|||
async articlesIndex(ctx) { |
|||
try { |
|||
const { page = 1, status = null, q = null } = ctx.query; |
|||
const userId = ctx.session.user.id; |
|||
|
|||
// 使用分页查询，提高性能
|
|||
const result = await this.articleService.getUserArticlesWithPagination(userId, { |
|||
page: parseInt(page), |
|||
limit: 10, |
|||
status, |
|||
keyword: q |
|||
}); |
|||
|
|||
return await ctx.render("admin/articles/index", { |
|||
articles: result.articles, |
|||
pagination: result.pagination, |
|||
filters: { status, q }, |
|||
title: "文章管理" |
|||
}, { layout: "admin" }); |
|||
} catch (error) { |
|||
logger.error(`文章列表加载失败: ${error.message}`); |
|||
throw new CommonError("文章列表加载失败"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 查看详情 |
|||
*/ |
|||
async articleShow(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
const userId = ctx.session.user.id; |
|||
|
|||
const article = await this.articleService.getArticleById(id); |
|||
|
|||
// 检查权限：只能查看自己的文章
|
|||
if (+article.author !== +userId) { |
|||
throw new CommonError("无权访问此文章"); |
|||
} |
|||
|
|||
return await ctx.render("admin/articles/show", { |
|||
article, |
|||
title: `查看文章 - ${article.title}` |
|||
}, { layout: "admin" }); |
|||
} catch (error) { |
|||
logger.error(`文章详情加载失败: ${error.message}`); |
|||
if (error instanceof CommonError) { |
|||
ctx.throw(403, error.message); |
|||
} |
|||
throw new CommonError("文章详情加载失败"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 新建页面 |
|||
*/ |
|||
async articleCreate(ctx) { |
|||
return await ctx.render("admin/articles/create", { |
|||
title: "新建文章" |
|||
}, { layout: "admin" }); |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 创建文章 |
|||
*/ |
|||
async articleStore(ctx) { |
|||
try { |
|||
const userId = ctx.session.user.id; |
|||
const data = { |
|||
...ctx.request.body, |
|||
author: userId |
|||
}; |
|||
|
|||
const article = await this.articleService.createArticle(data); |
|||
|
|||
ctx.session.toast = { |
|||
type: "success", |
|||
message: "文章创建成功" |
|||
}; |
|||
|
|||
ctx.redirect(`/admin/articles/${article.id}`); |
|||
} catch (error) { |
|||
logger.error(`文章创建失败: ${error.message}`); |
|||
ctx.session.toast = { |
|||
type: "error", |
|||
message: error.message || "文章创建失败" |
|||
}; |
|||
ctx.redirect("/admin/articles/create"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 编辑页面 |
|||
*/ |
|||
async articleEdit(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
const userId = ctx.session.user.id; |
|||
|
|||
const article = await this.articleService.getArticleById(id); |
|||
|
|||
// 检查权限：只能编辑自己的文章
|
|||
|
|||
if (+article.author !== +userId) { |
|||
throw new CommonError("无权编辑此文章"); |
|||
} |
|||
|
|||
return await ctx.render("admin/articles/edit", { |
|||
article, |
|||
title: `编辑文章 - ${article.title}` |
|||
}, { layout: "admin" }); |
|||
} catch (error) { |
|||
logger.error(`文章编辑页面加载失败: ${error.message}`); |
|||
if (error instanceof CommonError) { |
|||
ctx.throw(403, error.message); |
|||
} |
|||
throw new CommonError("文章编辑页面加载失败"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 更新文章 |
|||
*/ |
|||
async articleUpdate(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
const userId = ctx.session.user.id; |
|||
|
|||
// 检查权限
|
|||
const existingArticle = await this.articleService.getArticleById(id); |
|||
if (+existingArticle.author !== +userId) { |
|||
throw new CommonError("无权编辑此文章"); |
|||
} |
|||
|
|||
const article = await this.articleService.updateArticle(id, ctx.request.body); |
|||
|
|||
ctx.session.toast = { |
|||
type: "success", |
|||
message: "文章更新成功" |
|||
}; |
|||
|
|||
ctx.redirect(`/admin/articles/${article.id}`); |
|||
} catch (error) { |
|||
logger.error(`文章更新失败: ${error.message}`); |
|||
ctx.session.toast = { |
|||
type: "error", |
|||
message: error.message || "文章更新失败" |
|||
}; |
|||
ctx.redirect(`/admin/articles/${ctx.params.id}/edit`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 文章管理 - 删除文章 |
|||
*/ |
|||
async articleDelete(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
const userId = ctx.session.user.id; |
|||
|
|||
// 检查权限
|
|||
const article = await this.articleService.getArticleById(id); |
|||
if (+article.author !== +userId) { |
|||
throw new CommonError("无权删除此文章"); |
|||
} |
|||
|
|||
await this.articleService.deleteArticle(id); |
|||
|
|||
ctx.session.toast = { |
|||
type: "success", |
|||
message: "文章删除成功" |
|||
}; |
|||
|
|||
ctx.body = { success: true, message: "文章删除成功" }; |
|||
} catch (error) { |
|||
logger.error(`文章删除失败: ${error.message}`); |
|||
ctx.status = 500; |
|||
ctx.body = { |
|||
success: false, |
|||
message: error.message || "文章删除失败" |
|||
}; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 联系信息管理 - 列表页 |
|||
*/ |
|||
async contactsIndex(ctx) { |
|||
try { |
|||
const { |
|||
page = 1, |
|||
status = null, |
|||
q = null, |
|||
limit = 15 |
|||
} = ctx.query; |
|||
|
|||
let result; |
|||
|
|||
if (q && q.trim()) { |
|||
// 搜索模式
|
|||
result = await this.contactService.searchContacts(q, { |
|||
page: parseInt(page), |
|||
limit: parseInt(limit), |
|||
status |
|||
}); |
|||
} else { |
|||
// 普通列表模式
|
|||
result = await this.contactService.getAllContacts({ |
|||
page: parseInt(page), |
|||
limit: parseInt(limit), |
|||
status, |
|||
orderBy: 'created_at', |
|||
order: 'desc' |
|||
}); |
|||
} |
|||
|
|||
return await ctx.render("admin/contacts/index", { |
|||
contacts: result.contacts, |
|||
pagination: result.pagination, |
|||
filters: { status, q }, |
|||
title: "联系信息管理" |
|||
}, { layout: "admin" }); |
|||
} catch (error) { |
|||
logger.error(`联系信息列表加载失败: ${error.message}`); |
|||
throw new CommonError("联系信息列表加载失败"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 联系信息管理 - 查看详情 |
|||
*/ |
|||
async contactShow(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
const contact = await this.contactService.getContactById(id); |
|||
|
|||
// 如果是未读状态，自动标记为已读
|
|||
if (contact.status === 'unread') { |
|||
await this.contactService.markAsRead(id); |
|||
contact.status = 'read'; |
|||
} |
|||
|
|||
return await ctx.render("admin/contacts/show", { |
|||
contact, |
|||
title: `联系信息详情 - ${contact.subject}` |
|||
}, { layout: "admin" }); |
|||
} catch (error) { |
|||
logger.error(`联系信息详情加载失败: ${error.message}`); |
|||
throw new CommonError("联系信息详情加载失败"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 联系信息管理 - 删除 |
|||
*/ |
|||
async contactDelete(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
await this.contactService.deleteContact(id); |
|||
|
|||
ctx.body = { success: true, message: "联系信息删除成功" }; |
|||
} catch (error) { |
|||
logger.error(`联系信息删除失败: ${error.message}`); |
|||
ctx.status = 500; |
|||
ctx.body = { |
|||
success: false, |
|||
message: error.message || "联系信息删除失败" |
|||
}; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 联系信息管理 - 更新状态 |
|||
*/ |
|||
async contactUpdateStatus(ctx) { |
|||
try { |
|||
const { id } = ctx.params; |
|||
const { status } = ctx.request.body; |
|||
|
|||
await this.contactService.updateContactStatus(id, status); |
|||
|
|||
ctx.body = { success: true, message: "状态更新成功" }; |
|||
} catch (error) { |
|||
logger.error(`联系信息状态更新失败: ${error.message}`); |
|||
ctx.status = 500; |
|||
ctx.body = { |
|||
success: false, |
|||
message: error.message || "状态更新失败" |
|||
}; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 创建后台管理路由 |
|||
*/ |
|||
static createRoutes() { |
|||
const controller = new AdminController(); |
|||
const router = new Router({ |
|||
auth: true, |
|||
prefix: "/admin", |
|||
authFailRedirect: "/login" |
|||
}); |
|||
|
|||
// 后台首页
|
|||
router.get("", controller.dashboard.bind(controller)); |
|||
router.get("/", controller.dashboard.bind(controller)); |
|||
|
|||
// 文章管理路由
|
|||
router.get("/articles", controller.articlesIndex.bind(controller)); |
|||
router.get("/articles/create", controller.articleCreate.bind(controller)); |
|||
router.post("/articles", controller.articleStore.bind(controller)); |
|||
router.get("/articles/:id", controller.articleShow.bind(controller)); |
|||
router.get("/articles/:id/edit", controller.articleEdit.bind(controller)); |
|||
router.put("/articles/:id", controller.articleUpdate.bind(controller)); |
|||
router.post("/articles/:id", controller.articleUpdate.bind(controller)); // 兼容表单提交
|
|||
router.delete("/articles/:id", controller.articleDelete.bind(controller)); |
|||
|
|||
// 联系信息管理路由
|
|||
router.get("/contacts", controller.contactsIndex.bind(controller)); |
|||
router.get("/contacts/:id", controller.contactShow.bind(controller)); |
|||
router.delete("/contacts/:id", controller.contactDelete.bind(controller)); |
|||
router.put("/contacts/:id/status", controller.contactUpdateStatus.bind(controller)); |
|||
|
|||
return router; |
|||
} |
|||
} |
|||
|
|||
export default AdminController |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* 联系信息表迁移文件 |
|||
* @param { import("knex").Knex } knex |
|||
* @returns { Promise<void> } |
|||
*/ |
|||
export const up = function(knex) { |
|||
return knex.schema.createTable('contacts', function (table) { |
|||
table.increments('id').primary(); |
|||
table.string('name', 100).notNullable().comment('联系人姓名'); |
|||
table.string('email', 255).notNullable().comment('邮箱地址'); |
|||
table.string('subject', 255).notNullable().comment('主题'); |
|||
table.text('message').notNullable().comment('留言内容'); |
|||
table.string('ip_address', 45).nullable().comment('IP地址'); |
|||
table.text('user_agent').nullable().comment('浏览器信息'); |
|||
table.string('status', 20).defaultTo('unread').comment('处理状态: unread, read, replied'); |
|||
table.timestamps(true, true); // created_at, updated_at
|
|||
|
|||
// 添加索引
|
|||
table.index('status', 'idx_contacts_status'); |
|||
table.index('created_at', 'idx_contacts_created_at'); |
|||
table.index('email', 'idx_contacts_email'); |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* @param { import("knex").Knex } knex |
|||
* @returns { Promise<void> } |
|||
*/ |
|||
export const down = function(knex) { |
|||
return knex.schema.dropTable('contacts'); |
|||
}; |
|||
@ -0,0 +1,169 @@ |
|||
import db from "../index.js" |
|||
|
|||
class ContactModel { |
|||
/** |
|||
* 获取所有联系信息 |
|||
* @param {Object} options - 查询选项 |
|||
* @param {number} options.page - 页码 |
|||
* @param {number} options.limit - 每页数量 |
|||
* @param {string} options.status - 状态筛选 |
|||
* @param {string} options.orderBy - 排序字段 |
|||
* @param {string} options.order - 排序方向 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
static async findAll(options = {}) { |
|||
const { |
|||
page = 1, |
|||
limit = 20, |
|||
status = null, |
|||
orderBy = 'created_at', |
|||
order = 'desc' |
|||
} = options; |
|||
|
|||
let query = db("contacts").select("*"); |
|||
|
|||
// 状态筛选
|
|||
if (status) { |
|||
query = query.where("status", status); |
|||
} |
|||
|
|||
// 排序
|
|||
query = query.orderBy(orderBy, order); |
|||
|
|||
// 分页
|
|||
if (page && limit) { |
|||
const offset = (page - 1) * limit; |
|||
query = query.limit(limit).offset(offset); |
|||
} |
|||
|
|||
return query; |
|||
} |
|||
|
|||
/** |
|||
* 根据ID查找联系信息 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<Object|null>} 联系信息对象 |
|||
*/ |
|||
static async findById(id) { |
|||
return db("contacts").where("id", id).first() |
|||
} |
|||
|
|||
/** |
|||
* 创建新联系信息 |
|||
* @param {Object} data - 联系信息数据 |
|||
* @returns {Promise<Array>} 插入结果 |
|||
*/ |
|||
static async create(data) { |
|||
return db("contacts").insert({ |
|||
...data, |
|||
created_at: db.fn.now(), |
|||
updated_at: db.fn.now(), |
|||
}).returning("*") |
|||
} |
|||
|
|||
/** |
|||
* 更新联系信息 |
|||
* @param {number} id - 联系信息ID |
|||
* @param {Object} data - 更新数据 |
|||
* @returns {Promise<Array>} 更新结果 |
|||
*/ |
|||
static async update(id, data) { |
|||
return db("contacts").where("id", id).update({ |
|||
...data, |
|||
updated_at: db.fn.now(), |
|||
}).returning("*") |
|||
} |
|||
|
|||
/** |
|||
* 删除联系信息 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<number>} 删除的行数 |
|||
*/ |
|||
static async delete(id) { |
|||
return db("contacts").where("id", id).del() |
|||
} |
|||
|
|||
/** |
|||
* 根据邮箱查找联系信息 |
|||
* @param {string} email - 邮箱地址 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
static async findByEmail(email) { |
|||
return db("contacts").where("email", email).orderBy('created_at', 'desc') |
|||
} |
|||
|
|||
/** |
|||
* 根据状态查找联系信息 |
|||
* @param {string} status - 状态 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
static async findByStatus(status) { |
|||
return db("contacts").where("status", status).orderBy('created_at', 'desc') |
|||
} |
|||
|
|||
/** |
|||
* 根据日期范围查找联系信息 |
|||
* @param {string} startDate - 开始日期 |
|||
* @param {string} endDate - 结束日期 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
static async findByDateRange(startDate, endDate) { |
|||
return db("contacts") |
|||
.whereBetween('created_at', [startDate, endDate]) |
|||
.orderBy('created_at', 'desc') |
|||
} |
|||
|
|||
/** |
|||
* 获取联系信息统计 |
|||
* @returns {Promise<Object>} 统计信息 |
|||
*/ |
|||
static async getStats() { |
|||
const total = await db("contacts").count('id as count').first(); |
|||
const unread = await db("contacts").where('status', 'unread').count('id as count').first(); |
|||
const read = await db("contacts").where('status', 'read').count('id as count').first(); |
|||
const replied = await db("contacts").where('status', 'replied').count('id as count').first(); |
|||
|
|||
return { |
|||
total: parseInt(total.count), |
|||
unread: parseInt(unread.count), |
|||
read: parseInt(read.count), |
|||
replied: parseInt(replied.count) |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* 获取总数（用于分页） |
|||
* @param {Object} options - 查询选项 |
|||
* @returns {Promise<number>} 总数 |
|||
*/ |
|||
static async count(options = {}) { |
|||
const { status = null } = options; |
|||
|
|||
let query = db("contacts"); |
|||
|
|||
if (status) { |
|||
query = query.where("status", status); |
|||
} |
|||
|
|||
const result = await query.count('id as count').first(); |
|||
return parseInt(result.count); |
|||
} |
|||
|
|||
/** |
|||
* 批量更新状态 |
|||
* @param {Array} ids - ID数组 |
|||
* @param {string} status - 新状态 |
|||
* @returns {Promise<number>} 更新的行数 |
|||
*/ |
|||
static async updateStatusBatch(ids, status) { |
|||
return db("contacts") |
|||
.whereIn("id", ids) |
|||
.update({ |
|||
status, |
|||
updated_at: db.fn.now() |
|||
}); |
|||
} |
|||
} |
|||
|
|||
export default ContactModel |
|||
export { ContactModel } |
|||
@ -0,0 +1,390 @@ |
|||
import ContactModel from "../db/models/ContactModel.js" |
|||
import CommonError from "../utils/error/CommonError.js" |
|||
|
|||
class ContactService { |
|||
/** |
|||
* 获取所有联系信息 |
|||
* @param {Object} options - 查询选项 |
|||
* @returns {Promise<Object>} 联系信息列表和分页信息 |
|||
*/ |
|||
async getAllContacts(options = {}) { |
|||
try { |
|||
const { |
|||
page = 1, |
|||
limit = 20, |
|||
status = null, |
|||
orderBy = 'created_at', |
|||
order = 'desc' |
|||
} = options; |
|||
|
|||
// 获取联系信息列表
|
|||
const contacts = await ContactModel.findAll({ |
|||
page, |
|||
limit, |
|||
status, |
|||
orderBy, |
|||
order |
|||
}); |
|||
|
|||
// 获取总数
|
|||
const total = await ContactModel.count({ status }); |
|||
|
|||
// 计算分页信息
|
|||
const totalPages = Math.ceil(total / limit); |
|||
const hasNext = page < totalPages; |
|||
const hasPrev = page > 1; |
|||
|
|||
return { |
|||
contacts, |
|||
pagination: { |
|||
page: parseInt(page), |
|||
limit: parseInt(limit), |
|||
total, |
|||
totalPages, |
|||
hasNext, |
|||
hasPrev |
|||
} |
|||
}; |
|||
} catch (error) { |
|||
throw new CommonError(`获取联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 根据ID获取联系信息 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<Object>} 联系信息对象 |
|||
*/ |
|||
async getContactById(id) { |
|||
try { |
|||
if (!id) { |
|||
throw new CommonError("联系信息ID不能为空"); |
|||
} |
|||
|
|||
const contact = await ContactModel.findById(id); |
|||
if (!contact) { |
|||
throw new CommonError("联系信息不存在"); |
|||
} |
|||
|
|||
return contact; |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`获取联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 创建新联系信息 |
|||
* @param {Object} data - 联系信息数据 |
|||
* @returns {Promise<Object>} 创建的联系信息 |
|||
*/ |
|||
async createContact(data) { |
|||
try { |
|||
// 验证必需字段
|
|||
if (!data.name || !data.email || !data.subject || !data.message) { |
|||
throw new CommonError("姓名、邮箱、主题和留言内容为必填字段"); |
|||
} |
|||
|
|||
// 验证邮箱格式
|
|||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|||
if (!emailRegex.test(data.email)) { |
|||
throw new CommonError("邮箱格式不正确"); |
|||
} |
|||
|
|||
// 验证字段长度
|
|||
if (data.name.length > 100) { |
|||
throw new CommonError("姓名长度不能超过100字符"); |
|||
} |
|||
if (data.email.length > 255) { |
|||
throw new CommonError("邮箱长度不能超过255字符"); |
|||
} |
|||
if (data.subject.length > 255) { |
|||
throw new CommonError("主题长度不能超过255字符"); |
|||
} |
|||
|
|||
const contact = await ContactModel.create(data); |
|||
return Array.isArray(contact) ? contact[0] : contact; |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`创建联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 更新联系信息状态 |
|||
* @param {number} id - 联系信息ID |
|||
* @param {string} status - 新状态 |
|||
* @returns {Promise<Object>} 更新后的联系信息 |
|||
*/ |
|||
async updateContactStatus(id, status) { |
|||
try { |
|||
if (!id) { |
|||
throw new CommonError("联系信息ID不能为空"); |
|||
} |
|||
|
|||
// 验证状态值
|
|||
const validStatuses = ['unread', 'read', 'replied']; |
|||
if (!validStatuses.includes(status)) { |
|||
throw new CommonError("无效的状态值"); |
|||
} |
|||
|
|||
const contact = await ContactModel.findById(id); |
|||
if (!contact) { |
|||
throw new CommonError("联系信息不存在"); |
|||
} |
|||
|
|||
const updatedContact = await ContactModel.update(id, { status }); |
|||
return Array.isArray(updatedContact) ? updatedContact[0] : updatedContact; |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`更新联系信息状态失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 删除联系信息 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<number>} 删除的行数 |
|||
*/ |
|||
async deleteContact(id) { |
|||
try { |
|||
if (!id) { |
|||
throw new CommonError("联系信息ID不能为空"); |
|||
} |
|||
|
|||
const contact = await ContactModel.findById(id); |
|||
if (!contact) { |
|||
throw new CommonError("联系信息不存在"); |
|||
} |
|||
|
|||
return await ContactModel.delete(id); |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`删除联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 根据邮箱获取联系信息 |
|||
* @param {string} email - 邮箱地址 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
async getContactsByEmail(email) { |
|||
try { |
|||
if (!email) { |
|||
throw new CommonError("邮箱地址不能为空"); |
|||
} |
|||
|
|||
return await ContactModel.findByEmail(email); |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`获取联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 根据状态获取联系信息 |
|||
* @param {string} status - 状态 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
async getContactsByStatus(status) { |
|||
try { |
|||
if (!status) { |
|||
throw new CommonError("状态不能为空"); |
|||
} |
|||
|
|||
const validStatuses = ['unread', 'read', 'replied']; |
|||
if (!validStatuses.includes(status)) { |
|||
throw new CommonError("无效的状态值"); |
|||
} |
|||
|
|||
return await ContactModel.findByStatus(status); |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`获取联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 根据日期范围获取联系信息 |
|||
* @param {string} startDate - 开始日期 |
|||
* @param {string} endDate - 结束日期 |
|||
* @returns {Promise<Array>} 联系信息列表 |
|||
*/ |
|||
async getContactsByDateRange(startDate, endDate) { |
|||
try { |
|||
if (!startDate || !endDate) { |
|||
throw new CommonError("开始日期和结束日期不能为空"); |
|||
} |
|||
|
|||
return await ContactModel.findByDateRange(startDate, endDate); |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`获取联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取联系信息统计 |
|||
* @returns {Promise<Object>} 统计信息 |
|||
*/ |
|||
async getContactStats() { |
|||
try { |
|||
return await ContactModel.getStats(); |
|||
} catch (error) { |
|||
throw new CommonError(`获取联系信息统计失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 批量更新联系信息状态 |
|||
* @param {Array} ids - ID数组 |
|||
* @param {string} status - 新状态 |
|||
* @returns {Promise<number>} 更新的行数 |
|||
*/ |
|||
async updateContactStatusBatch(ids, status) { |
|||
try { |
|||
if (!Array.isArray(ids) || ids.length === 0) { |
|||
throw new CommonError("ID数组不能为空"); |
|||
} |
|||
|
|||
const validStatuses = ['unread', 'read', 'replied']; |
|||
if (!validStatuses.includes(status)) { |
|||
throw new CommonError("无效的状态值"); |
|||
} |
|||
|
|||
return await ContactModel.updateStatusBatch(ids, status); |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`批量更新联系信息状态失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 批量删除联系信息 |
|||
* @param {Array} ids - ID数组 |
|||
* @returns {Promise<Object>} 删除结果 |
|||
*/ |
|||
async deleteContactsBatch(ids) { |
|||
try { |
|||
if (!Array.isArray(ids) || ids.length === 0) { |
|||
throw new CommonError("ID数组不能为空"); |
|||
} |
|||
|
|||
const results = []; |
|||
const errors = []; |
|||
|
|||
for (const id of ids) { |
|||
try { |
|||
await this.deleteContact(id); |
|||
results.push(id); |
|||
} catch (error) { |
|||
errors.push({ |
|||
id, |
|||
error: error.message |
|||
}); |
|||
} |
|||
} |
|||
|
|||
return { |
|||
success: results, |
|||
errors, |
|||
total: ids.length, |
|||
successCount: results.length, |
|||
errorCount: errors.length |
|||
}; |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`批量删除联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 搜索联系信息 |
|||
* @param {string} keyword - 搜索关键词 |
|||
* @param {Object} options - 查询选项 |
|||
* @returns {Promise<Object>} 搜索结果和分页信息 |
|||
*/ |
|||
async searchContacts(keyword, options = {}) { |
|||
try { |
|||
if (!keyword || keyword.trim() === '') { |
|||
return await this.getAllContacts(options); |
|||
} |
|||
|
|||
const { |
|||
page = 1, |
|||
limit = 20, |
|||
status = null |
|||
} = options; |
|||
|
|||
const searchTerm = keyword.toLowerCase().trim(); |
|||
|
|||
// 获取所有联系信息进行搜索
|
|||
const allContacts = await ContactModel.findAll({ status }); |
|||
|
|||
const filteredContacts = allContacts.filter(contact => { |
|||
return ( |
|||
contact.name?.toLowerCase().includes(searchTerm) || |
|||
contact.email?.toLowerCase().includes(searchTerm) || |
|||
contact.subject?.toLowerCase().includes(searchTerm) || |
|||
contact.message?.toLowerCase().includes(searchTerm) |
|||
); |
|||
}); |
|||
|
|||
// 手动分页
|
|||
const total = filteredContacts.length; |
|||
const offset = (page - 1) * limit; |
|||
const contacts = filteredContacts.slice(offset, offset + limit); |
|||
|
|||
// 计算分页信息
|
|||
const totalPages = Math.ceil(total / limit); |
|||
const hasNext = page < totalPages; |
|||
const hasPrev = page > 1; |
|||
|
|||
return { |
|||
contacts, |
|||
pagination: { |
|||
page: parseInt(page), |
|||
limit: parseInt(limit), |
|||
total, |
|||
totalPages, |
|||
hasNext, |
|||
hasPrev |
|||
}, |
|||
keyword: searchTerm |
|||
}; |
|||
} catch (error) { |
|||
if (error instanceof CommonError) throw error; |
|||
throw new CommonError(`搜索联系信息失败: ${error.message}`); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 标记联系信息为已读 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<Object>} 更新后的联系信息 |
|||
*/ |
|||
async markAsRead(id) { |
|||
return await this.updateContactStatus(id, 'read'); |
|||
} |
|||
|
|||
/** |
|||
* 标记联系信息为已回复 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<Object>} 更新后的联系信息 |
|||
*/ |
|||
async markAsReplied(id) { |
|||
return await this.updateContactStatus(id, 'replied'); |
|||
} |
|||
|
|||
/** |
|||
* 标记联系信息为未读 |
|||
* @param {number} id - 联系信息ID |
|||
* @returns {Promise<Object>} 更新后的联系信息 |
|||
*/ |
|||
async markAsUnread(id) { |
|||
return await this.updateContactStatus(id, 'unread'); |
|||
} |
|||
} |
|||
|
|||
export default ContactService |
|||
@ -0,0 +1,225 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/articles") 文章管理 |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current 新建文章 |
|||
h1.page-title 新建文章 |
|||
p.page-subtitle 创建一篇新的文章内容 |
|||
|
|||
//- 文章表单 |
|||
.content-section |
|||
form.article-form(method="POST" action="/admin/articles") |
|||
.form-grid |
|||
//- 左侧主要内容 |
|||
.form-main |
|||
.form-group |
|||
label.form-label(for="title") 文章标题 * |
|||
input.form-input( |
|||
type="text" |
|||
id="title" |
|||
name="title" |
|||
placeholder="请输入文章标题" |
|||
required |
|||
maxlength="200" |
|||
) |
|||
.form-help 建议标题长度在10-50字之间 |
|||
|
|||
.form-group |
|||
label.form-label(for="slug") URL别名 |
|||
input.form-input( |
|||
type="text" |
|||
id="slug" |
|||
name="slug" |
|||
placeholder="自动生成或手动输入" |
|||
pattern="[a-z0-9-]+" |
|||
maxlength="100" |
|||
) |
|||
.form-help 用于生成友好的URL，只能包含小写字母、数字和连字符 |
|||
|
|||
.form-group |
|||
label.form-label(for="excerpt") 文章摘要 |
|||
textarea.form-textarea( |
|||
id="excerpt" |
|||
name="excerpt" |
|||
placeholder="请输入文章摘要（可选）" |
|||
rows="3" |
|||
maxlength="500" |
|||
) |
|||
.form-help 简短描述文章内容，有助于SEO |
|||
|
|||
.form-group |
|||
label.form-label(for="content") 文章内容 * |
|||
textarea.form-textarea.content-editor( |
|||
id="content" |
|||
name="content" |
|||
placeholder="请输入文章内容，支持Markdown格式" |
|||
rows="20" |
|||
required |
|||
) |
|||
.form-help 支持Markdown语法，可直接粘贴Markdown内容 |
|||
|
|||
//- 右侧设置面板 |
|||
.form-sidebar |
|||
.sidebar-section |
|||
h3.sidebar-title 发布设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="status") 发布状态 |
|||
select.form-select(id="status" name="status") |
|||
option(value="draft") 📝 保存为草稿 |
|||
option(value="published") ✅ 立即发布 |
|||
.form-help 草稿状态下文章不会在前台显示 |
|||
|
|||
.form-group |
|||
label.form-label(for="category") 文章分类 |
|||
input.form-input( |
|||
type="text" |
|||
id="category" |
|||
name="category" |
|||
placeholder="如：技术、生活、随笔" |
|||
maxlength="50" |
|||
) |
|||
.form-help 用于组织和分类文章 |
|||
|
|||
.form-group |
|||
label.form-label(for="tags") 文章标签 |
|||
input.form-input( |
|||
type="text" |
|||
id="tags" |
|||
name="tags" |
|||
placeholder="标签1,标签2,标签3" |
|||
maxlength="200" |
|||
) |
|||
.form-help 多个标签用英文逗号分隔 |
|||
|
|||
.sidebar-section |
|||
h3.sidebar-title 高级设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="featured_image") 特色图片URL |
|||
input.form-input( |
|||
type="url" |
|||
id="featured_image" |
|||
name="featured_image" |
|||
placeholder="https://example.com/image.jpg" |
|||
) |
|||
.form-help 文章封面图片链接 |
|||
|
|||
//- 表单按钮 |
|||
.form-actions |
|||
.action-buttons |
|||
button.btn.btn-primary(type="submit") 💾 保存文章 |
|||
a.btn.btn-outline(href="/admin/articles") 取消 |
|||
button.btn.btn-secondary(type="button" onclick="previewArticle()") 👁️ 预览 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 自动生成slug |
|||
document.getElementById('title').addEventListener('input', function() { |
|||
const title = this.value; |
|||
const slugInput = document.getElementById('slug'); |
|||
|
|||
if (!slugInput.value) { |
|||
// 简单的slug生成逻辑 |
|||
const slug = title |
|||
.toLowerCase() |
|||
.replace(/[^a-z0-9\u4e00-\u9fa5]/g, '-') |
|||
.replace(/-+/g, '-') |
|||
.replace(/^-|-$/g, ''); |
|||
slugInput.value = slug; |
|||
} |
|||
}); |
|||
|
|||
// 字符计数 |
|||
function setupCharCounter(inputId, maxLength) { |
|||
const input = document.getElementById(inputId); |
|||
const help = input.nextElementSibling; |
|||
|
|||
function updateCounter() { |
|||
const current = input.value.length; |
|||
const remaining = maxLength - current; |
|||
const originalText = help.textContent; |
|||
|
|||
if (remaining < 50) { |
|||
help.textContent = `${originalText} (还可输入${remaining}字符)`; |
|||
help.style.color = remaining < 10 ? '#ff4757' : '#ffa726'; |
|||
} else { |
|||
help.style.color = ''; |
|||
} |
|||
} |
|||
|
|||
input.addEventListener('input', updateCounter); |
|||
updateCounter(); |
|||
} |
|||
|
|||
// 设置字符计数 |
|||
setupCharCounter('title', 200); |
|||
setupCharCounter('excerpt', 500); |
|||
setupCharCounter('tags', 200); |
|||
|
|||
// 预览功能 |
|||
function previewArticle() { |
|||
const content = document.getElementById('content').value; |
|||
if (!content.trim()) { |
|||
alert('请先输入文章内容'); |
|||
return; |
|||
} |
|||
|
|||
// 简单的Markdown预览（实际项目中可以使用更完善的Markdown解析器） |
|||
const previewWindow = window.open('', '_blank', 'width=800,height=600'); |
|||
previewWindow.document.write(` |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>文章预览</title> |
|||
<style> |
|||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } |
|||
h1, h2, h3 { color: #333; } |
|||
pre { background: #f4f4f4; padding: 10px; border-radius: 4px; } |
|||
code { background: #f4f4f4; padding: 2px 4px; border-radius: 2px; } |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>${document.getElementById('title').value || '未设置标题'}</h1> |
|||
<div>${content.replace(/\n/g, '<br>')}</div> |
|||
</body> |
|||
</html> |
|||
`); |
|||
previewWindow.document.close(); |
|||
} |
|||
|
|||
// 表单验证 |
|||
document.querySelector('.article-form').addEventListener('submit', function(e) { |
|||
const title = document.getElementById('title').value.trim(); |
|||
const content = document.getElementById('content').value.trim(); |
|||
|
|||
if (!title) { |
|||
alert('请输入文章标题'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (!content) { |
|||
alert('请输入文章内容'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (title.length < 5) { |
|||
alert('文章标题至少需要5个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (content.length < 10) { |
|||
alert('文章内容至少需要10个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
}); |
|||
@ -0,0 +1,251 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/articles") 文章管理 |
|||
span.breadcrumb-separator / |
|||
a(href=`/admin/articles/${article.id}`)= article.title |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current 编辑 |
|||
h1.page-title 编辑文章 |
|||
p.page-subtitle= `编辑：${article.title}` |
|||
|
|||
//- 文章表单 |
|||
.content-section |
|||
form.article-form(method="POST" action=`/admin/articles/${article.id}`) |
|||
input(type="hidden" name="_method" value="PUT") |
|||
|
|||
.form-grid |
|||
//- 左侧主要内容 |
|||
.form-main |
|||
.form-group |
|||
label.form-label(for="title") 文章标题 * |
|||
input.form-input( |
|||
type="text" |
|||
id="title" |
|||
name="title" |
|||
value=article.title |
|||
placeholder="请输入文章标题" |
|||
required |
|||
maxlength="200" |
|||
) |
|||
.form-help 建议标题长度在10-50字之间 |
|||
|
|||
.form-group |
|||
label.form-label(for="slug") URL别名 |
|||
input.form-input( |
|||
type="text" |
|||
id="slug" |
|||
name="slug" |
|||
value=article.slug || '' |
|||
placeholder="自动生成或手动输入" |
|||
pattern="[a-z0-9-]+" |
|||
maxlength="100" |
|||
) |
|||
.form-help 用于生成友好的URL，只能包含小写字母、数字和连字符 |
|||
|
|||
.form-group |
|||
label.form-label(for="excerpt") 文章摘要 |
|||
textarea.form-textarea( |
|||
id="excerpt" |
|||
name="excerpt" |
|||
placeholder="请输入文章摘要（可选）" |
|||
rows="3" |
|||
maxlength="500" |
|||
)= article.excerpt || '' |
|||
.form-help 简短描述文章内容，有助于SEO |
|||
|
|||
.form-group |
|||
label.form-label(for="content") 文章内容 * |
|||
textarea.form-textarea.content-editor( |
|||
id="content" |
|||
name="content" |
|||
placeholder="请输入文章内容，支持Markdown格式" |
|||
rows="20" |
|||
required |
|||
)= article.content || '' |
|||
.form-help 支持Markdown语法，可直接粘贴Markdown内容 |
|||
|
|||
//- 右侧设置面板 |
|||
.form-sidebar |
|||
.sidebar-section |
|||
h3.sidebar-title 发布设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="status") 发布状态 |
|||
select.form-select(id="status" name="status") |
|||
option(value="draft" selected=article.status === 'draft') 📝 保存为草稿 |
|||
option(value="published" selected=article.status === 'published') ✅ 立即发布 |
|||
.form-help 草稿状态下文章不会在前台显示 |
|||
|
|||
.form-group |
|||
label.form-label(for="category") 文章分类 |
|||
input.form-input( |
|||
type="text" |
|||
id="category" |
|||
name="category" |
|||
value=article.category || '' |
|||
placeholder="如：技术、生活、随笔" |
|||
maxlength="50" |
|||
) |
|||
.form-help 用于组织和分类文章 |
|||
|
|||
.form-group |
|||
label.form-label(for="tags") 文章标签 |
|||
input.form-input( |
|||
type="text" |
|||
id="tags" |
|||
name="tags" |
|||
value=article.tags || '' |
|||
placeholder="标签1,标签2,标签3" |
|||
maxlength="200" |
|||
) |
|||
.form-help 多个标签用英文逗号分隔 |
|||
|
|||
.sidebar-section |
|||
h3.sidebar-title 高级设置 |
|||
|
|||
.form-group |
|||
label.form-label(for="featured_image") 特色图片URL |
|||
input.form-input( |
|||
type="url" |
|||
id="featured_image" |
|||
name="featured_image" |
|||
value=article.featured_image || '' |
|||
placeholder="https://example.com/image.jpg" |
|||
) |
|||
.form-help 文章封面图片链接 |
|||
|
|||
.sidebar-section |
|||
h3.sidebar-title 文章信息 |
|||
.info-list |
|||
.info-item |
|||
.info-label 创建时间 |
|||
.info-value= new Date(article.created_at).toLocaleString('zh-CN') |
|||
.info-item |
|||
.info-label 更新时间 |
|||
.info-value= new Date(article.updated_at).toLocaleString('zh-CN') |
|||
if article.view_count |
|||
.info-item |
|||
.info-label 阅读量 |
|||
.info-value= article.view_count |
|||
|
|||
//- 表单按钮 |
|||
.form-actions |
|||
.action-buttons |
|||
button.btn.btn-primary(type="submit") 💾 更新文章 #{article.id} |
|||
a.btn.btn-outline(href=`/admin/articles/${article.id}`) 取消 |
|||
button.btn.btn-secondary(type="button" onclick="previewArticle()") 👁️ 预览 |
|||
if article.status === 'published' && article.slug |
|||
a.btn.btn-outline(href=`/articles/${article.slug}` target="_blank") 🔗 查看前台 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 自动生成slug（仅在为空时） |
|||
document.getElementById('title').addEventListener('input', function() { |
|||
const title = this.value; |
|||
const slugInput = document.getElementById('slug'); |
|||
|
|||
if (!slugInput.value.trim()) { |
|||
// 简单的slug生成逻辑 |
|||
const slug = title |
|||
.toLowerCase() |
|||
.replace(/[^a-z0-9\u4e00-\u9fa5]/g, '-') |
|||
.replace(/-+/g, '-') |
|||
.replace(/^-|-$/g, ''); |
|||
slugInput.value = slug; |
|||
} |
|||
}); |
|||
|
|||
// 字符计数 |
|||
function setupCharCounter(inputId, maxLength) { |
|||
const input = document.getElementById(inputId); |
|||
const help = input.nextElementSibling; |
|||
|
|||
function updateCounter() { |
|||
const current = input.value.length; |
|||
const remaining = maxLength - current; |
|||
const originalText = help.textContent.split('(')[0].trim(); |
|||
|
|||
if (remaining < 50) { |
|||
help.textContent = `${originalText} (还可输入${remaining}字符)`; |
|||
help.style.color = remaining < 10 ? '#ff4757' : '#ffa726'; |
|||
} else { |
|||
help.textContent = originalText; |
|||
help.style.color = ''; |
|||
} |
|||
} |
|||
|
|||
input.addEventListener('input', updateCounter); |
|||
updateCounter(); |
|||
} |
|||
|
|||
// 设置字符计数 |
|||
setupCharCounter('title', 200); |
|||
setupCharCounter('excerpt', 500); |
|||
setupCharCounter('tags', 200); |
|||
|
|||
// 预览功能 |
|||
function previewArticle() { |
|||
const content = document.getElementById('content').value; |
|||
if (!content.trim()) { |
|||
alert('请先输入文章内容'); |
|||
return; |
|||
} |
|||
|
|||
// 简单的Markdown预览 |
|||
const previewWindow = window.open('', '_blank', 'width=800,height=600'); |
|||
previewWindow.document.write(` |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>文章预览</title> |
|||
<style> |
|||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } |
|||
h1, h2, h3 { color: #333; } |
|||
pre { background: #f4f4f4; padding: 10px; border-radius: 4px; } |
|||
code { background: #f4f4f4; padding: 2px 4px; border-radius: 2px; } |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>${document.getElementById('title').value || '未设置标题'}</h1> |
|||
<div>${content.replace(/\n/g, '<br>')}</div> |
|||
</body> |
|||
</html> |
|||
`); |
|||
previewWindow.document.close(); |
|||
} |
|||
|
|||
// 表单验证 |
|||
document.querySelector('.article-form').addEventListener('submit', function(e) { |
|||
const title = document.getElementById('title').value.trim(); |
|||
const content = document.getElementById('content').value.trim(); |
|||
|
|||
if (!title) { |
|||
alert('请输入文章标题'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (!content) { |
|||
alert('请输入文章内容'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (title.length < 5) { |
|||
alert('文章标题至少需要5个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if (content.length < 10) { |
|||
alert('文章内容至少需要10个字符'); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
}); |
|||
@ -0,0 +1,198 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
h1.page-title 文章管理 |
|||
p.page-subtitle 管理您的所有文章内容 |
|||
.page-header-right |
|||
a.btn.btn-primary(href="/admin/articles/create") ✨ 新建文章 |
|||
|
|||
//- 筛选和搜索 |
|||
.page-filters |
|||
form.filter-form(method="GET") |
|||
.filter-group |
|||
label.filter-label 状态筛选: |
|||
select.filter-select(name="status" onchange="this.form.submit()") |
|||
option(value="" selected=!filters.status) 全部状态 |
|||
option(value="published" selected=filters.status === 'published') 已发布 |
|||
option(value="draft" selected=filters.status === 'draft') 草稿 |
|||
|
|||
.filter-group |
|||
label.filter-label 搜索: |
|||
.search-box |
|||
input.search-input( |
|||
type="text" |
|||
name="q" |
|||
placeholder="搜索文章标题、内容或标签..." |
|||
value=filters.q || '' |
|||
) |
|||
button.search-btn(type="submit") 🔍 |
|||
|
|||
if filters.status || filters.q |
|||
a.filter-clear(href="/admin/articles") 清除筛选 |
|||
|
|||
//- 文章列表 |
|||
.content-section |
|||
if articles && articles.length > 0 |
|||
.article-table-container |
|||
table.article-table |
|||
thead |
|||
tr |
|||
th.col-title 标题 |
|||
th.col-status 状态 |
|||
th.col-category 分类 |
|||
th.col-date 更新时间 |
|||
th.col-actions 操作 |
|||
tbody |
|||
each article in articles |
|||
tr.article-row |
|||
td.col-title |
|||
.article-title-cell |
|||
h3.article-title |
|||
a(href=`/admin/articles/${article.id}`)= article.title |
|||
if article.excerpt |
|||
p.article-summary= article.excerpt.substring(0, 80) + (article.excerpt.length > 80 ? '...' : '') |
|||
if article.tags |
|||
.article-tags |
|||
each tag in article.tags.split(',') |
|||
span.tag= tag.trim() |
|||
|
|||
td.col-status |
|||
span.status-badge(class=`status-${article.status}`) |
|||
if article.status === 'published' |
|||
| ✅ 已发布 |
|||
else if article.status === 'draft' |
|||
| 📝 草稿 |
|||
else |
|||
| ❓ #{article.status} |
|||
|
|||
td.col-category |
|||
if article.category |
|||
span.category-badge= article.category |
|||
else |
|||
span.text-muted 未分类 |
|||
|
|||
td.col-date |
|||
.date-info |
|||
.primary-date= new Date(article.updated_at).toLocaleDateString('zh-CN') |
|||
.secondary-date= new Date(article.updated_at).toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'}) |
|||
|
|||
td.col-actions |
|||
.action-buttons |
|||
a.btn.btn-sm.btn-outline(href=`/admin/articles/${article.id}` title="查看详情") 👁️ |
|||
a.btn.btn-sm.btn-outline(href=`/admin/articles/${article.id}/edit` title="编辑文章") ✏️ |
|||
if article.status === 'published' |
|||
a.btn.btn-sm.btn-outline(href=`/articles/${article.slug}` target="_blank" title="预览文章") 🔗 |
|||
button.btn.btn-sm.btn-danger( |
|||
onclick=`deleteArticle(${article.id}, '${article.title.replace(/'/g, "\\'")}')` |
|||
title="删除文章" |
|||
) 🗑️ |
|||
|
|||
//- 分页导航 |
|||
if pagination.totalPages > 1 |
|||
.pagination-container |
|||
nav.pagination |
|||
if pagination.hasPrev |
|||
a.pagination-link(href=`?page=${pagination.page - 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) ‹ 上一页 |
|||
|
|||
- var start = Math.max(1, pagination.page - 2) |
|||
- var end = Math.min(pagination.totalPages, pagination.page + 2) |
|||
|
|||
if start > 1 |
|||
a.pagination-link(href=`?page=1${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 1 |
|||
if start > 2 |
|||
span.pagination-ellipsis ... |
|||
|
|||
- for (var i = start; i <= end; i++) |
|||
if i === pagination.page |
|||
span.pagination-link.active= i |
|||
else |
|||
a.pagination-link(href=`?page=${i}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= i |
|||
|
|||
if end < pagination.totalPages |
|||
if end < pagination.totalPages - 1 |
|||
span.pagination-ellipsis ... |
|||
a.pagination-link(href=`?page=${pagination.totalPages}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= pagination.totalPages |
|||
|
|||
if pagination.hasNext |
|||
a.pagination-link(href=`?page=${pagination.page + 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 下一页 › |
|||
|
|||
//- 统计信息 |
|||
.list-footer |
|||
.list-stats |
|||
| 共 #{pagination.total} 篇文章 |
|||
if filters.status || filters.q |
|||
|，当前显示筛选结果 |
|||
else |
|||
//- 空状态 |
|||
.empty-state |
|||
.empty-icon 📝 |
|||
.empty-title 暂无文章 |
|||
if filters.status || filters.q |
|||
.empty-text 没有找到符合筛选条件的文章 |
|||
a.btn.btn-outline(href="/admin/articles") 查看全部文章 |
|||
else |
|||
.empty-text 您还没有创建任何文章 |
|||
a.btn.btn-primary(href="/admin/articles/create") 创建第一篇文章 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 删除文章确认 |
|||
function deleteArticle(id, title) { |
|||
if (confirm(`确定要删除文章《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/articles/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
// 显示成功消息 |
|||
showToast('success', data.message || '文章删除成功'); |
|||
// 刷新页面或移除行 |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
@ -0,0 +1,158 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/articles") 文章管理 |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current= article.title |
|||
h1.page-title= article.title |
|||
.article-meta |
|||
span.meta-item |
|||
strong 状态: |
|||
span.status-badge(class=`status-${article.status}`) |
|||
if article.status === 'published' |
|||
| ✅ 已发布 |
|||
else if article.status === 'draft' |
|||
| 📝 草稿 |
|||
if article.category |
|||
span.meta-item |
|||
strong 分类: |
|||
span.category-badge= article.category |
|||
span.meta-item |
|||
strong 创建时间: |
|||
span= new Date(article.created_at).toLocaleString('zh-CN') |
|||
span.meta-item |
|||
strong 更新时间: |
|||
span= new Date(article.updated_at).toLocaleString('zh-CN') |
|||
if article.view_count |
|||
span.meta-item |
|||
strong 阅读量: |
|||
span= article.view_count |
|||
|
|||
.page-header-right |
|||
.action-buttons |
|||
a.btn.btn-outline(href=`/admin/articles/${article.id}/edit`) ✏️ 编辑 |
|||
if article.status === 'published' && article.slug |
|||
a.btn.btn-outline(href=`/articles/${article.slug}` target="_blank") 🔗 预览 |
|||
button.btn.btn-danger( |
|||
onclick=`deleteArticle(${article.id}, '${article.title.replace(/'/g, "\\'")}')` |
|||
) 🗑️ 删除 |
|||
|
|||
//- 文章内容 |
|||
.content-section |
|||
.article-view |
|||
//- 文章摘要 |
|||
if article.excerpt |
|||
.article-summary-section |
|||
h3.section-title 文章摘要 |
|||
.article-summary= article.excerpt |
|||
|
|||
//- 文章内容 |
|||
.article-content-section |
|||
h3.section-title 文章内容 |
|||
.article-content |
|||
if article.content |
|||
!= article.content.replace(/\n/g, '<br>') |
|||
else |
|||
.empty-content 暂无内容 |
|||
|
|||
//- 文章标签 |
|||
if article.tags |
|||
.article-tags-section |
|||
h3.section-title 标签 |
|||
.article-tags |
|||
each tag in article.tags.split(',') |
|||
span.tag= tag.trim() |
|||
|
|||
//- 文章链接信息 |
|||
if article.slug |
|||
.article-link-section |
|||
h3.section-title 文章链接 |
|||
.link-info |
|||
strong 访问链接: |
|||
if article.status === 'published' |
|||
a.article-link(href=`/articles/${article.slug}` target="_blank")= `/articles/${article.slug}` |
|||
else |
|||
span.text-muted= `/articles/${article.slug}` |
|||
small (草稿状态，暂不可访问) |
|||
|
|||
//- 技术信息 |
|||
.article-technical-section |
|||
h3.section-title 技术信息 |
|||
.technical-info |
|||
.info-grid |
|||
.info-item |
|||
.info-label ID |
|||
.info-value= article.id |
|||
.info-item |
|||
.info-label Slug |
|||
.info-value= article.slug || '未设置' |
|||
.info-item |
|||
.info-label 作者ID |
|||
.info-value= article.author |
|||
if article.featured_image |
|||
.info-item |
|||
.info-label 特色图片 |
|||
.info-value |
|||
a(href=article.featured_image target="_blank")= article.featured_image |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 删除文章确认 |
|||
function deleteArticle(id, title) { |
|||
if (confirm(`确定要删除文章《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/articles/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '文章删除成功'); |
|||
setTimeout(() => { |
|||
window.location.href = '/admin/articles'; |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
@ -0,0 +1,243 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
h1.page-title 联系信息管理 |
|||
p.page-subtitle 管理用户提交的联系表单信息 |
|||
.page-header-right |
|||
.stats-summary |
|||
span.stat-item |
|||
.stat-number= pagination.total |
|||
.stat-label 总数 |
|||
span.stat-item.unread |
|||
.stat-number |
|||
| #{contacts.filter(c => c.status === 'unread').length} |
|||
.stat-label 未读 |
|||
|
|||
//- 筛选和搜索 |
|||
.page-filters |
|||
form.filter-form(method="GET") |
|||
.filter-group |
|||
label.filter-label 状态筛选: |
|||
select.filter-select(name="status" onchange="this.form.submit()") |
|||
option(value="" selected=!filters.status) 全部状态 |
|||
option(value="unread" selected=filters.status === 'unread') 📧 未读 |
|||
option(value="read" selected=filters.status === 'read') 👁️ 已读 |
|||
option(value="replied" selected=filters.status === 'replied') ✅ 已回复 |
|||
|
|||
.filter-group |
|||
label.filter-label 搜索: |
|||
.search-box |
|||
input.search-input( |
|||
type="text" |
|||
name="q" |
|||
placeholder="搜索姓名、邮箱、主题或内容..." |
|||
value=filters.q || '' |
|||
) |
|||
button.search-btn(type="submit") 🔍 |
|||
|
|||
if filters.status || filters.q |
|||
a.filter-clear(href="/admin/contacts") 清除筛选 |
|||
|
|||
//- 联系信息列表 |
|||
.content-section |
|||
if contacts && contacts.length > 0 |
|||
.contact-table-container |
|||
table.contact-table |
|||
thead |
|||
tr |
|||
th.col-contact 联系人信息 |
|||
th.col-subject 主题 |
|||
th.col-status 状态 |
|||
th.col-date 提交时间 |
|||
th.col-actions 操作 |
|||
tbody |
|||
each contact in contacts |
|||
tr.contact-row(class=`status-${contact.status}`) |
|||
td.col-contact |
|||
.contact-info |
|||
.contact-name= contact.name |
|||
.contact-email= contact.email |
|||
if contact.ip_address |
|||
.contact-ip IP: #{contact.ip_address} |
|||
|
|||
td.col-subject |
|||
.subject-content |
|||
h4.subject-title= contact.subject |
|||
.subject-preview= contact.message.substring(0, 80) + (contact.message.length > 80 ? '...' : '') |
|||
|
|||
td.col-status |
|||
span.status-badge(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 📧 未读 |
|||
else if contact.status === 'read' |
|||
| 👁️ 已读 |
|||
else if contact.status === 'replied' |
|||
| ✅ 已回复 |
|||
else |
|||
| ❓ #{contact.status} |
|||
|
|||
td.col-date |
|||
.date-info |
|||
.primary-date= new Date(contact.created_at).toLocaleDateString('zh-CN') |
|||
.secondary-date= new Date(contact.created_at).toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'}) |
|||
|
|||
td.col-actions |
|||
.action-buttons |
|||
a.btn.btn-sm.btn-outline(href=`/admin/contacts/${contact.id}` title="查看详情") 👁️ |
|||
|
|||
.status-dropdown |
|||
select.status-select(onchange=`updateContactStatus(${contact.id}, this.value)`) |
|||
option(value="" disabled selected) 状态... |
|||
option(value="unread" class=contact.status === 'unread' ? 'disabled' : '') 标记未读 |
|||
option(value="read" class=contact.status === 'read' ? 'disabled' : '') 标记已读 |
|||
option(value="replied" class=contact.status === 'replied' ? 'disabled' : '') 标记已回复 |
|||
|
|||
button.btn.btn-sm.btn-danger( |
|||
onclick=`deleteContact(${contact.id}, '${contact.name} - ${contact.subject}')` |
|||
title="删除联系信息" |
|||
) 🗑️ |
|||
|
|||
//- 分页导航 |
|||
if pagination.totalPages > 1 |
|||
.pagination-container |
|||
nav.pagination |
|||
if pagination.hasPrev |
|||
a.pagination-link(href=`?page=${pagination.page - 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) ‹ 上一页 |
|||
|
|||
- var start = Math.max(1, pagination.page - 2) |
|||
- var end = Math.min(pagination.totalPages, pagination.page + 2) |
|||
|
|||
if start > 1 |
|||
a.pagination-link(href=`?page=1${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 1 |
|||
if start > 2 |
|||
span.pagination-ellipsis ... |
|||
|
|||
- for (var i = start; i <= end; i++) |
|||
if i === pagination.page |
|||
span.pagination-link.active= i |
|||
else |
|||
a.pagination-link(href=`?page=${i}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= i |
|||
|
|||
if end < pagination.totalPages |
|||
if end < pagination.totalPages - 1 |
|||
span.pagination-ellipsis ... |
|||
a.pagination-link(href=`?page=${pagination.totalPages}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`)= pagination.totalPages |
|||
|
|||
if pagination.hasNext |
|||
a.pagination-link(href=`?page=${pagination.page + 1}${filters.status ? '&status=' + filters.status : ''}${filters.q ? '&q=' + encodeURIComponent(filters.q) : ''}`) 下一页 › |
|||
|
|||
//- 统计信息 |
|||
.list-footer |
|||
.list-stats |
|||
| 共 #{pagination.total} 条联系信息 |
|||
if filters.status || filters.q |
|||
|，当前显示筛选结果 |
|||
|
|||
//- 批量操作（如果需要的话） |
|||
.bulk-actions |
|||
.bulk-info 提示：点击联系人姓名可以查看完整信息 |
|||
else |
|||
//- 空状态 |
|||
.empty-state |
|||
.empty-icon 📧 |
|||
.empty-title 暂无联系信息 |
|||
if filters.status || filters.q |
|||
.empty-text 没有找到符合筛选条件的联系信息 |
|||
a.btn.btn-outline(href="/admin/contacts") 查看全部联系信息 |
|||
else |
|||
.empty-text 还没有用户提交联系表单 |
|||
.empty-help 用户可以通过前台的联系页面提交联系信息 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 更新联系信息状态 |
|||
function updateContactStatus(id, status) { |
|||
if (!status) return; |
|||
|
|||
fetch(`/admin/contacts/${id}/status`, { |
|||
method: 'PUT', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify({ status }) |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '状态更新成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '状态更新失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('状态更新失败:', error); |
|||
showToast('error', '状态更新失败，请稍后重试'); |
|||
}); |
|||
} |
|||
|
|||
// 删除联系信息确认 |
|||
function deleteContact(id, title) { |
|||
if (confirm(`确定要删除联系信息《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/contacts/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '联系信息删除成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
|
|||
// 重置状态下拉框 |
|||
document.querySelectorAll('.status-select').forEach(select => { |
|||
select.value = ''; |
|||
}); |
|||
@ -0,0 +1,229 @@ |
|||
extends ../../layouts/admin |
|||
|
|||
block $$content |
|||
.page-container |
|||
//- 页面头部 |
|||
.page-header |
|||
.page-header-left |
|||
.breadcrumb |
|||
a(href="/admin/contacts") 联系信息管理 |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-current= contact.subject |
|||
h1.page-title= contact.subject |
|||
.contact-meta |
|||
span.meta-item |
|||
strong 状态: |
|||
span.status-badge(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 📧 未读 |
|||
else if contact.status === 'read' |
|||
| 👁️ 已读 |
|||
else if contact.status === 'replied' |
|||
| ✅ 已回复 |
|||
span.meta-item |
|||
strong 提交时间: |
|||
span= new Date(contact.created_at).toLocaleString('zh-CN') |
|||
|
|||
.page-header-right |
|||
.action-buttons |
|||
.status-actions |
|||
if contact.status !== 'read' |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'read')`) 👁️ 标记已读 |
|||
if contact.status !== 'replied' |
|||
button.btn.btn-success(onclick=`updateContactStatus(${contact.id}, 'replied')`) ✅ 标记已回复 |
|||
if contact.status !== 'unread' |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'unread')`) 📧 标记未读 |
|||
|
|||
button.btn.btn-danger( |
|||
onclick=`deleteContact(${contact.id}, '${contact.name} - ${contact.subject}')` |
|||
) 🗑️ 删除 |
|||
|
|||
//- 联系信息详情 |
|||
.content-section |
|||
.contact-details |
|||
//- 联系人信息 |
|||
.detail-section |
|||
h3.section-title 联系人信息 |
|||
.info-grid |
|||
.info-item |
|||
.info-label 姓名 |
|||
.info-value= contact.name |
|||
.info-item |
|||
.info-label 邮箱 |
|||
.info-value |
|||
a(href=`mailto:${contact.email}`)= contact.email |
|||
if contact.ip_address |
|||
.info-item |
|||
.info-label IP地址 |
|||
.info-value= contact.ip_address |
|||
if contact.user_agent |
|||
.info-item |
|||
.info-label 浏览器信息 |
|||
.info-value.user-agent= contact.user_agent |
|||
|
|||
//- 联系主题 |
|||
.detail-section |
|||
h3.section-title 联系主题 |
|||
.subject-content= contact.subject |
|||
|
|||
//- 联系内容 |
|||
.detail-section |
|||
h3.section-title 联系内容 |
|||
.message-content |
|||
.message-text= contact.message |
|||
|
|||
//- 系统信息 |
|||
.detail-section |
|||
h3.section-title 系统信息 |
|||
.info-grid |
|||
.info-item |
|||
.info-label ID |
|||
.info-value= contact.id |
|||
.info-item |
|||
.info-label 创建时间 |
|||
.info-value= new Date(contact.created_at).toLocaleString('zh-CN') |
|||
.info-item |
|||
.info-label 更新时间 |
|||
.info-value= new Date(contact.updated_at).toLocaleString('zh-CN') |
|||
.info-item |
|||
.info-label 当前状态 |
|||
.info-value |
|||
span.status-badge(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 📧 未读 |
|||
else if contact.status === 'read' |
|||
| 👁️ 已读 |
|||
else if contact.status === 'replied' |
|||
| ✅ 已回复 |
|||
|
|||
//- 快速回复（可选功能） |
|||
.detail-section |
|||
h3.section-title 快速操作 |
|||
.quick-actions |
|||
.action-group |
|||
h4.action-title 邮件操作 |
|||
.action-buttons |
|||
a.btn.btn-primary(href=`mailto:${contact.email}?subject=Re: ${encodeURIComponent(contact.subject)}&body=${encodeURIComponent('您好，感谢您的联系...')}`) 📧 回复邮件 |
|||
button.btn.btn-outline(onclick="copyEmail()") 📋 复制邮箱 |
|||
|
|||
.action-group |
|||
h4.action-title 状态操作 |
|||
.action-buttons |
|||
if contact.status === 'unread' |
|||
button.btn.btn-success(onclick=`updateContactStatus(${contact.id}, 'read')`) 标记已读 |
|||
button.btn.btn-primary(onclick=`updateContactStatus(${contact.id}, 'replied')`) 标记已回复 |
|||
else if contact.status === 'read' |
|||
button.btn.btn-primary(onclick=`updateContactStatus(${contact.id}, 'replied')`) 标记已回复 |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'unread')`) 标记未读 |
|||
else if contact.status === 'replied' |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'read')`) 标记已读 |
|||
button.btn.btn-outline(onclick=`updateContactStatus(${contact.id}, 'unread')`) 标记未读 |
|||
|
|||
//- 导航 |
|||
.detail-navigation |
|||
a.btn.btn-outline(href="/admin/contacts") ← 返回列表 |
|||
|
|||
block $$scripts |
|||
script. |
|||
// 更新联系信息状态 |
|||
function updateContactStatus(id, status) { |
|||
fetch(`/admin/contacts/${id}/status`, { |
|||
method: 'PUT', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify({ status }) |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '状态更新成功'); |
|||
setTimeout(() => { |
|||
window.location.reload(); |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '状态更新失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('状态更新失败:', error); |
|||
showToast('error', '状态更新失败，请稍后重试'); |
|||
}); |
|||
} |
|||
|
|||
// 删除联系信息确认 |
|||
function deleteContact(id, title) { |
|||
if (confirm(`确定要删除联系信息《${title}》吗？此操作不可撤销。`)) { |
|||
fetch(`/admin/contacts/${id}`, { |
|||
method: 'DELETE', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
} |
|||
}) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
if (data.success) { |
|||
showToast('success', data.message || '联系信息删除成功'); |
|||
setTimeout(() => { |
|||
window.location.href = '/admin/contacts'; |
|||
}, 1000); |
|||
} else { |
|||
showToast('error', data.message || '删除失败'); |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
console.error('删除失败:', error); |
|||
showToast('error', '删除失败，请稍后重试'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 复制邮箱地址 |
|||
function copyEmail() { |
|||
const email = '#{contact.email}'; |
|||
navigator.clipboard.writeText(email).then(() => { |
|||
showToast('success', '邮箱地址已复制到剪贴板'); |
|||
}).catch(err => { |
|||
console.error('复制失败:', err); |
|||
// 降级处理 |
|||
const textArea = document.createElement('textarea'); |
|||
textArea.value = email; |
|||
document.body.appendChild(textArea); |
|||
textArea.select(); |
|||
try { |
|||
document.execCommand('copy'); |
|||
showToast('success', '邮箱地址已复制到剪贴板'); |
|||
} catch (fallbackErr) { |
|||
showToast('error', '复制失败，请手动复制'); |
|||
} |
|||
document.body.removeChild(textArea); |
|||
}); |
|||
} |
|||
|
|||
// 显示提示消息 |
|||
function showToast(type, message) { |
|||
const toast = document.createElement('div'); |
|||
toast.className = `admin-toast toast-${type}`; |
|||
toast.innerHTML = ` |
|||
<span>${message}</span> |
|||
<button class="toast-close">×</button> |
|||
`; |
|||
|
|||
document.body.appendChild(toast); |
|||
|
|||
// 自动消失 |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
// 点击关闭 |
|||
toast.querySelector('.toast-close').addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
@ -0,0 +1,125 @@ |
|||
extends ../layouts/admin |
|||
|
|||
block $$content |
|||
.dashboard |
|||
//- 页面标题 |
|||
.page-header |
|||
h1.page-title 仪表盘 |
|||
p.page-subtitle 欢迎回到后台管理系统 |
|||
|
|||
//- 统计卡片 |
|||
.stats-grid |
|||
.stats-card |
|||
.stats-icon.stats-icon-primary 📧 |
|||
.stats-info |
|||
.stats-number= contactStats.total |
|||
.stats-label 总联系信息 |
|||
.stats-detail |
|||
.stats-breakdown |
|||
span.breakdown-item |
|||
span.breakdown-label 未读: |
|||
span.breakdown-value= contactStats.unread |
|||
span.breakdown-item |
|||
span.breakdown-label 已读: |
|||
span.breakdown-value= contactStats.read |
|||
span.breakdown-item |
|||
span.breakdown-label 已回复: |
|||
span.breakdown-value= contactStats.replied |
|||
|
|||
.stats-card |
|||
.stats-icon.stats-icon-success 📝 |
|||
.stats-info |
|||
.stats-number= articleStats.total |
|||
.stats-label 我的文章 |
|||
.stats-detail |
|||
.stats-breakdown |
|||
span.breakdown-item |
|||
span.breakdown-label 已发布: |
|||
span.breakdown-value= articleStats.published |
|||
span.breakdown-item |
|||
span.breakdown-label 草稿: |
|||
span.breakdown-value= articleStats.draft |
|||
|
|||
//- 主要内容区域 |
|||
.dashboard-content |
|||
.dashboard-grid |
|||
//- 最近联系信息 |
|||
.dashboard-section |
|||
.section-header |
|||
h2.section-title 最近联系信息 |
|||
a.section-action(href="/admin/contacts") 查看全部 → |
|||
|
|||
if recentContacts && recentContacts.length > 0 |
|||
.contact-list |
|||
each contact in recentContacts |
|||
.contact-item(class=`status-${contact.status}`) |
|||
.contact-header |
|||
.contact-info |
|||
strong.contact-name= contact.name |
|||
span.contact-email= contact.email |
|||
.contact-meta |
|||
span.contact-status(class=`status-${contact.status}`) |
|||
if contact.status === 'unread' |
|||
| 未读 |
|||
else if contact.status === 'read' |
|||
| 已读 |
|||
else if contact.status === 'replied' |
|||
| 已回复 |
|||
span.contact-date= new Date(contact.created_at).toLocaleDateString('zh-CN') |
|||
.contact-subject= contact.subject |
|||
.contact-actions |
|||
a.btn.btn-sm(href=`/admin/contacts/${contact.id}`) 查看详情 |
|||
else |
|||
.empty-state |
|||
.empty-icon 📧 |
|||
.empty-text 暂无联系信息 |
|||
|
|||
//- 最近文章 |
|||
.dashboard-section |
|||
.section-header |
|||
h2.section-title 最近文章 |
|||
a.section-action(href="/admin/articles") 查看全部 → |
|||
|
|||
if recentArticles && recentArticles.length > 0 |
|||
.article-list |
|||
each article in recentArticles |
|||
.article-item |
|||
.article-header |
|||
.article-info |
|||
strong.article-title= article.title |
|||
span.article-status(class=`status-${article.status}`) |
|||
if article.status === 'published' |
|||
| 已发布 |
|||
else if article.status === 'draft' |
|||
| 草稿 |
|||
.article-meta |
|||
span.article-date= new Date(article.updated_at).toLocaleDateString('zh-CN') |
|||
if article.excerpt |
|||
.article-summary= article.excerpt.substring(0, 100) + (article.excerpt.length > 100 ? '...' : '') |
|||
.article-actions |
|||
a.btn.btn-sm(href=`/admin/articles/${article.id}`) 查看 |
|||
a.btn.btn-sm.btn-outline(href=`/admin/articles/${article.id}/edit`) 编辑 |
|||
else |
|||
.empty-state |
|||
.empty-icon 📝 |
|||
.empty-text 暂无文章 |
|||
a.btn.btn-primary(href="/admin/articles/create") 创建第一篇文章 |
|||
|
|||
//- 快速操作 |
|||
.quick-actions |
|||
h3.quick-actions-title 快速操作 |
|||
.quick-actions-grid |
|||
a.quick-action-card(href="/admin/articles/create") |
|||
.quick-action-icon 📝 |
|||
.quick-action-title 新建文章 |
|||
.quick-action-desc 创建一篇新的文章 |
|||
|
|||
a.quick-action-card(href="/admin/articles") |
|||
.quick-action-icon 📚 |
|||
.quick-action-title 管理文章 |
|||
.quick-action-desc 查看和编辑我的文章 |
|||
|
|||
a.quick-action-card(href="/admin/contacts") |
|||
.quick-action-icon 📧 |
|||
.quick-action-title 联系信息 |
|||
.quick-action-desc 查看用户联系信息 |
|||
@ -0,0 +1,128 @@ |
|||
include utils.pug |
|||
|
|||
doctype html |
|||
html(lang="zh-CN") |
|||
head |
|||
block $$head |
|||
title #{title ? title + ' - ' : ''}后台管理 - #{$site && $site.site_title || ''} |
|||
meta(name="description" content="后台管理系统") |
|||
meta(charset="utf-8") |
|||
meta(name="viewport" content="width=device-width, initial-scale=1") |
|||
+css('lib/reset.css') |
|||
+css('css/admin.css') |
|||
+js('lib/htmx.min.js') |
|||
+js('lib/tailwindcss.3.4.17.js') |
|||
body.admin-body |
|||
#admin-app |
|||
//- 顶部导航栏 |
|||
header.admin-header |
|||
.admin-header-left |
|||
.admin-logo |
|||
a(href="/admin") 后台管理 |
|||
.admin-header-center |
|||
.admin-breadcrumb |
|||
span.breadcrumb-item |
|||
a(href="/admin") 首页 |
|||
if title |
|||
span.breadcrumb-separator / |
|||
span.breadcrumb-item= title |
|||
.admin-header-right |
|||
.admin-user-menu |
|||
.dropdown |
|||
button.dropdown-trigger |
|||
span= $user ? $user.name || $user.username : '用户' |
|||
i.dropdown-arrow ▼ |
|||
.dropdown-menu |
|||
a.dropdown-item(href="/profile") 个人资料 |
|||
a.dropdown-item(href="/") 前台首页 |
|||
.dropdown-divider |
|||
a.dropdown-item(href="/logout") 退出登录 |
|||
|
|||
//- 主要内容区域 |
|||
.admin-main |
|||
//- 左侧导航 |
|||
aside.admin-sidebar |
|||
nav.admin-nav |
|||
.nav-section |
|||
.nav-title 主要功能 |
|||
ul.nav-list |
|||
li.nav-item |
|||
a.nav-link(href="/admin" class=title === '后台管理' ? 'active' : '') |
|||
i.nav-icon 📊 |
|||
span 仪表盘 |
|||
li.nav-item |
|||
a.nav-link(href="/admin/articles" class=title === '文章管理' ? 'active' : '') |
|||
i.nav-icon 📝 |
|||
span 文章管理 |
|||
li.nav-item |
|||
a.nav-link(href="/admin/contacts" class=title === '联系信息管理' ? 'active' : '') |
|||
i.nav-icon 📧 |
|||
span 联系信息 |
|||
|
|||
//- 右侧内容区域 |
|||
main.admin-content |
|||
if toast |
|||
.admin-toast(class=`toast-${toast.type}`) |
|||
span= toast.message |
|||
button.toast-close × |
|||
|
|||
.admin-content-inner |
|||
block $$content |
|||
|
|||
//- JavaScript |
|||
script(src="/js/admin.js") |
|||
block $$scripts |
|||
|
|||
//- 处理Toast消息 |
|||
script. |
|||
// Toast消息处理 |
|||
const toast = document.querySelector('.admin-toast'); |
|||
if (toast) { |
|||
setTimeout(() => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}, 3000); |
|||
|
|||
const closeBtn = toast.querySelector('.toast-close'); |
|||
if (closeBtn) { |
|||
closeBtn.addEventListener('click', () => { |
|||
toast.style.opacity = '0'; |
|||
setTimeout(() => { |
|||
toast.remove(); |
|||
}, 300); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 下拉菜单处理 |
|||
const dropdown = document.querySelector('.dropdown'); |
|||
if (dropdown) { |
|||
const trigger = dropdown.querySelector('.dropdown-trigger'); |
|||
const menu = dropdown.querySelector('.dropdown-menu'); |
|||
|
|||
trigger.addEventListener('click', (e) => { |
|||
e.stopPropagation(); |
|||
dropdown.classList.toggle('active'); |
|||
}); |
|||
|
|||
document.addEventListener('click', () => { |
|||
dropdown.classList.remove('active'); |
|||
}); |
|||
} |
|||
|
|||
// 移动端侧边栏切换 |
|||
function toggleSidebar() { |
|||
document.body.classList.toggle('sidebar-open'); |
|||
} |
|||
|
|||
// 响应式处理 |
|||
function handleResize() { |
|||
if (window.innerWidth > 768) { |
|||
document.body.classList.remove('sidebar-open'); |
|||
} |
|||
} |
|||
|
|||
window.addEventListener('resize', handleResize); |
|||
handleResize(); |
|||
Loading…
Reference in new issue