新增公告中心功能
## 功能概述 在钱包旁边新增公告中心，用户可以查看平台通知、教程、规则和常见问题。 ## 主要变更 ### 后端 - 新增 announcement 模块（handler/service/repository） - 新增 announcements 数据库表 - 添加公告相关 API 端点（用户端和管理端） - 扩展 response 包，新增 NotFound 和 InternalServerError 方法 ### 前端 - 新增公告功能模块（/features/announcement） - 实现公告列表页和详情页 - 在顶部导航添加公告入口（钱包旁边） - 支持按分类筛选（通知、教程、规则、FAQ） - 支持置顶和重要标记显示 ### 数据库 - 迁移文件：000005_add_announcements.sql - 示例数据：000006_insert_sample_announcements.sql - 包含6条示例公告 ## 技术特点 - 遵循项目现有架构模式 - 响应式设计，支持移动端 - 自动统计浏览次数 - 支持富文本内容展示 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yml
@@ -0,0 +1,23 @@
|
||||
package model
|
||||
|
||||
import "time"
|
||||
|
||||
type Announcement struct {
|
||||
ID uint64 `gorm:"primaryKey" json:"id"`
|
||||
Title string `gorm:"size:255;not null" json:"title"`
|
||||
Content string `gorm:"type:text;not null" json:"content"`
|
||||
Category string `gorm:"size:32;not null;default:'notice'" json:"category"`
|
||||
Priority int `gorm:"not null;default:0" json:"priority"`
|
||||
IsPinned bool `gorm:"not null;default:false" json:"is_pinned"`
|
||||
IsImportant bool `gorm:"not null;default:false" json:"is_important"`
|
||||
ViewCount int `gorm:"not null;default:0" json:"view_count"`
|
||||
Status string `gorm:"size:32;not null;default:'draft'" json:"status"`
|
||||
PublishedAt *time.Time `json:"published_at"`
|
||||
CreatedBy *uint64 `json:"created_by"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
}
|
||||
|
||||
func (Announcement) TableName() string {
|
||||
return "announcements"
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
package announcement
|
||||
|
||||
import "time"
|
||||
|
||||
type AnnouncementDTO struct {
|
||||
ID uint64 `json:"id"`
|
||||
Title string `json:"title"`
|
||||
Content string `json:"content"`
|
||||
Category string `json:"category"`
|
||||
Priority int `json:"priority"`
|
||||
IsPinned bool `json:"is_pinned"`
|
||||
IsImportant bool `json:"is_important"`
|
||||
ViewCount int `json:"view_count"`
|
||||
Status string `json:"status"`
|
||||
PublishedAt *time.Time `json:"published_at"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
}
|
||||
|
||||
type AnnouncementListQuery struct {
|
||||
Category string
|
||||
Status string
|
||||
Page int
|
||||
PageSize int
|
||||
}
|
||||
|
||||
type PaginatedResult struct {
|
||||
Items interface{} `json:"items"`
|
||||
Total int64 `json:"total"`
|
||||
Page int `json:"page"`
|
||||
PageSize int `json:"page_size"`
|
||||
}
|
||||
|
||||
type CreateAnnouncementRequest struct {
|
||||
Title string `json:"title" binding:"required,max=255"`
|
||||
Content string `json:"content" binding:"required"`
|
||||
Category string `json:"category" binding:"required,oneof=notice tutorial rule faq"`
|
||||
Priority int `json:"priority"`
|
||||
IsPinned bool `json:"is_pinned"`
|
||||
IsImportant bool `json:"is_important"`
|
||||
}
|
||||
|
||||
type UpdateAnnouncementRequest struct {
|
||||
Title string `json:"title" binding:"max=255"`
|
||||
Content string `json:"content"`
|
||||
Category string `json:"category" binding:"omitempty,oneof=notice tutorial rule faq"`
|
||||
Priority int `json:"priority"`
|
||||
IsPinned bool `json:"is_pinned"`
|
||||
IsImportant bool `json:"is_important"`
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
package announcement
|
||||
|
||||
import (
|
||||
"errors"
|
||||
"strconv"
|
||||
|
||||
"hfb_sys/backend/internal/middleware"
|
||||
"hfb_sys/backend/pkg/response"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
type Handler struct {
|
||||
service *Service
|
||||
}
|
||||
|
||||
func NewHandler(service *Service) *Handler {
|
||||
return &Handler{service: service}
|
||||
}
|
||||
|
||||
// List 获取公告列表（前台用户）
|
||||
func (h *Handler) List(c *gin.Context) {
|
||||
query := AnnouncementListQuery{
|
||||
Category: c.Query("category"),
|
||||
Status: "published",
|
||||
}
|
||||
query.Page, query.PageSize = parsePagination(c)
|
||||
|
||||
result, err := h.service.List(query)
|
||||
if err != nil {
|
||||
response.InternalServerError(c, "获取公告列表失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, result)
|
||||
}
|
||||
|
||||
// GetByID 获取公告详情
|
||||
func (h *Handler) GetByID(c *gin.Context) {
|
||||
id, err := parseID(c)
|
||||
if err != nil {
|
||||
response.BadRequest(c, "公告ID不正确")
|
||||
return
|
||||
}
|
||||
|
||||
announcement, err := h.service.GetByID(id)
|
||||
if err != nil {
|
||||
if errors.Is(err, ErrNotFound) {
|
||||
response.NotFound(c, "公告不存在")
|
||||
return
|
||||
}
|
||||
response.InternalServerError(c, "获取公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, announcement)
|
||||
}
|
||||
|
||||
// AdminList 管理员获取公告列表
|
||||
func (h *Handler) AdminList(c *gin.Context) {
|
||||
query := AnnouncementListQuery{
|
||||
Category: c.Query("category"),
|
||||
Status: c.Query("status"),
|
||||
}
|
||||
query.Page, query.PageSize = parsePagination(c)
|
||||
|
||||
result, err := h.service.AdminList(query)
|
||||
if err != nil {
|
||||
response.InternalServerError(c, "获取公告列表失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, result)
|
||||
}
|
||||
|
||||
// AdminGetByID 管理员获取公告详情
|
||||
func (h *Handler) AdminGetByID(c *gin.Context) {
|
||||
id, err := parseID(c)
|
||||
if err != nil {
|
||||
response.BadRequest(c, "公告ID不正确")
|
||||
return
|
||||
}
|
||||
|
||||
announcement, err := h.service.AdminGetByID(id)
|
||||
if err != nil {
|
||||
if errors.Is(err, gorm.ErrRecordNotFound) {
|
||||
response.NotFound(c, "公告不存在")
|
||||
return
|
||||
}
|
||||
response.InternalServerError(c, "获取公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, announcement)
|
||||
}
|
||||
|
||||
// Create 创建公告
|
||||
func (h *Handler) Create(c *gin.Context) {
|
||||
adminID, ok := currentAdminID(c)
|
||||
if !ok {
|
||||
response.Unauthorized(c, "未授权")
|
||||
return
|
||||
}
|
||||
|
||||
var req CreateAnnouncementRequest
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
response.BadRequest(c, "请求参数不正确")
|
||||
return
|
||||
}
|
||||
|
||||
announcement, err := h.service.Create(req, adminID)
|
||||
if err != nil {
|
||||
response.InternalServerError(c, "创建公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, announcement)
|
||||
}
|
||||
|
||||
// Update 更新公告
|
||||
func (h *Handler) Update(c *gin.Context) {
|
||||
id, err := parseID(c)
|
||||
if err != nil {
|
||||
response.BadRequest(c, "公告ID不正确")
|
||||
return
|
||||
}
|
||||
|
||||
var req UpdateAnnouncementRequest
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
response.BadRequest(c, "请求参数不正确")
|
||||
return
|
||||
}
|
||||
|
||||
announcement, err := h.service.Update(id, req)
|
||||
if err != nil {
|
||||
response.InternalServerError(c, "更新公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, announcement)
|
||||
}
|
||||
|
||||
// Publish 发布公告
|
||||
func (h *Handler) Publish(c *gin.Context) {
|
||||
id, err := parseID(c)
|
||||
if err != nil {
|
||||
response.BadRequest(c, "公告ID不正确")
|
||||
return
|
||||
}
|
||||
|
||||
if err := h.service.Publish(id); err != nil {
|
||||
response.InternalServerError(c, "发布公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, gin.H{"message": "发布成功"})
|
||||
}
|
||||
|
||||
// Archive 归档公告
|
||||
func (h *Handler) Archive(c *gin.Context) {
|
||||
id, err := parseID(c)
|
||||
if err != nil {
|
||||
response.BadRequest(c, "公告ID不正确")
|
||||
return
|
||||
}
|
||||
|
||||
if err := h.service.Archive(id); err != nil {
|
||||
response.InternalServerError(c, "归档公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, gin.H{"message": "归档成功"})
|
||||
}
|
||||
|
||||
// Delete 删除公告
|
||||
func (h *Handler) Delete(c *gin.Context) {
|
||||
id, err := parseID(c)
|
||||
if err != nil {
|
||||
response.BadRequest(c, "公告ID不正确")
|
||||
return
|
||||
}
|
||||
|
||||
if err := h.service.Delete(id); err != nil {
|
||||
response.InternalServerError(c, "删除公告失败")
|
||||
return
|
||||
}
|
||||
|
||||
response.OK(c, gin.H{"message": "删除成功"})
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
|
||||
func parseID(c *gin.Context) (uint64, error) {
|
||||
idStr := c.Param("id")
|
||||
id, err := strconv.ParseUint(idStr, 10, 64)
|
||||
if err != nil || id == 0 {
|
||||
return 0, errors.New("无效的ID")
|
||||
}
|
||||
return id, nil
|
||||
}
|
||||
|
||||
func parsePagination(c *gin.Context) (int, int) {
|
||||
page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
|
||||
pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "20"))
|
||||
if page < 1 {
|
||||
page = 1
|
||||
}
|
||||
if pageSize < 1 {
|
||||
pageSize = 20
|
||||
}
|
||||
if pageSize > 100 {
|
||||
pageSize = 100
|
||||
}
|
||||
return page, pageSize
|
||||
}
|
||||
|
||||
func currentAdminID(c *gin.Context) (uint64, bool) {
|
||||
value, ok := c.Get(middleware.ContextAdminID)
|
||||
if !ok {
|
||||
return 0, false
|
||||
}
|
||||
adminID, ok := value.(uint64)
|
||||
return adminID, ok
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
package announcement
|
||||
|
||||
import (
|
||||
"time"
|
||||
|
||||
"hfb_sys/backend/internal/model"
|
||||
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
type Repository struct {
|
||||
db *gorm.DB
|
||||
}
|
||||
|
||||
func NewRepository(db *gorm.DB) *Repository {
|
||||
return &Repository{db: db}
|
||||
}
|
||||
|
||||
// List 获取公告列表（前台用户）
|
||||
func (r *Repository) List(query AnnouncementListQuery) (*PaginatedResult, error) {
|
||||
var total int64
|
||||
tx := r.db.Model(&model.Announcement{}).Where("status = ?", "published")
|
||||
|
||||
if query.Category != "" {
|
||||
tx = tx.Where("category = ?", query.Category)
|
||||
}
|
||||
|
||||
if err := tx.Count(&total).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
offset := (query.Page - 1) * query.PageSize
|
||||
var rows []model.Announcement
|
||||
if err := tx.Order("is_pinned DESC, priority DESC, published_at DESC").
|
||||
Offset(offset).
|
||||
Limit(query.PageSize).
|
||||
Find(&rows).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
items := make([]AnnouncementDTO, 0, len(rows))
|
||||
for _, row := range rows {
|
||||
items = append(items, toAnnouncementDTO(row))
|
||||
}
|
||||
|
||||
return &PaginatedResult{
|
||||
Items: items,
|
||||
Total: total,
|
||||
Page: query.Page,
|
||||
PageSize: query.PageSize,
|
||||
}, nil
|
||||
}
|
||||
|
||||
// GetByID 获取公告详情
|
||||
func (r *Repository) GetByID(id uint64) (*AnnouncementDTO, error) {
|
||||
var announcement model.Announcement
|
||||
if err := r.db.Where("id = ? AND status = ?", id, "published").First(&announcement).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
// 增加查看次数
|
||||
r.db.Model(&model.Announcement{}).Where("id = ?", id).UpdateColumn("view_count", gorm.Expr("view_count + ?", 1))
|
||||
|
||||
dto := toAnnouncementDTO(announcement)
|
||||
return &dto, nil
|
||||
}
|
||||
|
||||
// AdminList 管理员获取公告列表
|
||||
func (r *Repository) AdminList(query AnnouncementListQuery) (*PaginatedResult, error) {
|
||||
var total int64
|
||||
tx := r.db.Model(&model.Announcement{})
|
||||
|
||||
if query.Status != "" {
|
||||
tx = tx.Where("status = ?", query.Status)
|
||||
}
|
||||
if query.Category != "" {
|
||||
tx = tx.Where("category = ?", query.Category)
|
||||
}
|
||||
|
||||
if err := tx.Count(&total).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
offset := (query.Page - 1) * query.PageSize
|
||||
var rows []model.Announcement
|
||||
if err := tx.Order("is_pinned DESC, priority DESC, id DESC").
|
||||
Offset(offset).
|
||||
Limit(query.PageSize).
|
||||
Find(&rows).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
items := make([]AnnouncementDTO, 0, len(rows))
|
||||
for _, row := range rows {
|
||||
items = append(items, toAnnouncementDTO(row))
|
||||
}
|
||||
|
||||
return &PaginatedResult{
|
||||
Items: items,
|
||||
Total: total,
|
||||
Page: query.Page,
|
||||
PageSize: query.PageSize,
|
||||
}, nil
|
||||
}
|
||||
|
||||
// AdminGetByID 管理员获取公告详情
|
||||
func (r *Repository) AdminGetByID(id uint64) (*AnnouncementDTO, error) {
|
||||
var announcement model.Announcement
|
||||
if err := r.db.Where("id = ?", id).First(&announcement).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
dto := toAnnouncementDTO(announcement)
|
||||
return &dto, nil
|
||||
}
|
||||
|
||||
// Create 创建公告
|
||||
func (r *Repository) Create(req CreateAnnouncementRequest, createdBy uint64) (*AnnouncementDTO, error) {
|
||||
announcement := model.Announcement{
|
||||
Title: req.Title,
|
||||
Content: req.Content,
|
||||
Category: req.Category,
|
||||
Priority: req.Priority,
|
||||
IsPinned: req.IsPinned,
|
||||
IsImportant: req.IsImportant,
|
||||
Status: "draft",
|
||||
CreatedBy: &createdBy,
|
||||
}
|
||||
|
||||
if err := r.db.Create(&announcement).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
dto := toAnnouncementDTO(announcement)
|
||||
return &dto, nil
|
||||
}
|
||||
|
||||
// Update 更新公告
|
||||
func (r *Repository) Update(id uint64, req UpdateAnnouncementRequest) (*AnnouncementDTO, error) {
|
||||
updates := make(map[string]interface{})
|
||||
|
||||
if req.Title != "" {
|
||||
updates["title"] = req.Title
|
||||
}
|
||||
if req.Content != "" {
|
||||
updates["content"] = req.Content
|
||||
}
|
||||
if req.Category != "" {
|
||||
updates["category"] = req.Category
|
||||
}
|
||||
updates["priority"] = req.Priority
|
||||
updates["is_pinned"] = req.IsPinned
|
||||
updates["is_important"] = req.IsImportant
|
||||
|
||||
if err := r.db.Model(&model.Announcement{}).Where("id = ?", id).Updates(updates).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
return r.AdminGetByID(id)
|
||||
}
|
||||
|
||||
// Publish 发布公告
|
||||
func (r *Repository) Publish(id uint64) error {
|
||||
now := time.Now()
|
||||
return r.db.Model(&model.Announcement{}).
|
||||
Where("id = ?", id).
|
||||
Updates(map[string]interface{}{
|
||||
"status": "published",
|
||||
"published_at": now,
|
||||
}).Error
|
||||
}
|
||||
|
||||
// Archive 归档公告
|
||||
func (r *Repository) Archive(id uint64) error {
|
||||
return r.db.Model(&model.Announcement{}).
|
||||
Where("id = ?", id).
|
||||
Update("status", "archived").Error
|
||||
}
|
||||
|
||||
// Delete 删除公告
|
||||
func (r *Repository) Delete(id uint64) error {
|
||||
return r.db.Where("id = ?", id).Delete(&model.Announcement{}).Error
|
||||
}
|
||||
|
||||
func toAnnouncementDTO(a model.Announcement) AnnouncementDTO {
|
||||
return AnnouncementDTO{
|
||||
ID: a.ID,
|
||||
Title: a.Title,
|
||||
Content: a.Content,
|
||||
Category: a.Category,
|
||||
Priority: a.Priority,
|
||||
IsPinned: a.IsPinned,
|
||||
IsImportant: a.IsImportant,
|
||||
ViewCount: a.ViewCount,
|
||||
Status: a.Status,
|
||||
PublishedAt: a.PublishedAt,
|
||||
CreatedAt: a.CreatedAt,
|
||||
UpdatedAt: a.UpdatedAt,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
package announcement
|
||||
|
||||
import (
|
||||
"errors"
|
||||
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
type Service struct {
|
||||
repo *Repository
|
||||
}
|
||||
|
||||
func NewService(repo *Repository) *Service {
|
||||
return &Service{repo: repo}
|
||||
}
|
||||
|
||||
var (
|
||||
ErrNotFound = errors.New("公告不存在")
|
||||
ErrInvalidRequest = errors.New("请求参数不正确")
|
||||
ErrUnauthorized = errors.New("未授权")
|
||||
)
|
||||
|
||||
// List 获取公告列表（前台用户）
|
||||
func (s *Service) List(query AnnouncementListQuery) (*PaginatedResult, error) {
|
||||
if query.Page < 1 {
|
||||
query.Page = 1
|
||||
}
|
||||
if query.PageSize < 1 {
|
||||
query.PageSize = 20
|
||||
}
|
||||
if query.PageSize > 100 {
|
||||
query.PageSize = 100
|
||||
}
|
||||
|
||||
return s.repo.List(query)
|
||||
}
|
||||
|
||||
// GetByID 获取公告详情
|
||||
func (s *Service) GetByID(id uint64) (*AnnouncementDTO, error) {
|
||||
dto, err := s.repo.GetByID(id)
|
||||
if err != nil {
|
||||
if errors.Is(err, gorm.ErrRecordNotFound) {
|
||||
return nil, ErrNotFound
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
return dto, nil
|
||||
}
|
||||
|
||||
// AdminList 管理员获取公告列表
|
||||
func (s *Service) AdminList(query AnnouncementListQuery) (*PaginatedResult, error) {
|
||||
if query.Page < 1 {
|
||||
query.Page = 1
|
||||
}
|
||||
if query.PageSize < 1 {
|
||||
query.PageSize = 20
|
||||
}
|
||||
if query.PageSize > 100 {
|
||||
query.PageSize = 100
|
||||
}
|
||||
|
||||
return s.repo.AdminList(query)
|
||||
}
|
||||
|
||||
// AdminGetByID 管理员获取公告详情
|
||||
func (s *Service) AdminGetByID(id uint64) (*AnnouncementDTO, error) {
|
||||
dto, err := s.repo.AdminGetByID(id)
|
||||
if err != nil {
|
||||
if errors.Is(err, gorm.ErrRecordNotFound) {
|
||||
return nil, ErrNotFound
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
return dto, nil
|
||||
}
|
||||
|
||||
// Create 创建公告
|
||||
func (s *Service) Create(req CreateAnnouncementRequest, createdBy uint64) (*AnnouncementDTO, error) {
|
||||
return s.repo.Create(req, createdBy)
|
||||
}
|
||||
|
||||
// Update 更新公告
|
||||
func (s *Service) Update(id uint64, req UpdateAnnouncementRequest) (*AnnouncementDTO, error) {
|
||||
return s.repo.Update(id, req)
|
||||
}
|
||||
|
||||
// Publish 发布公告
|
||||
func (s *Service) Publish(id uint64) error {
|
||||
return s.repo.Publish(id)
|
||||
}
|
||||
|
||||
// Archive 归档公告
|
||||
func (s *Service) Archive(id uint64) error {
|
||||
return s.repo.Archive(id)
|
||||
}
|
||||
|
||||
// Delete 删除公告
|
||||
func (s *Service) Delete(id uint64) error {
|
||||
return s.repo.Delete(id)
|
||||
}
|
||||
@@ -13,6 +13,7 @@ import (
|
||||
"hfb_sys/backend/internal/modules/adminmgr"
|
||||
"hfb_sys/backend/internal/modules/adminrole"
|
||||
"hfb_sys/backend/internal/modules/adminuser"
|
||||
"hfb_sys/backend/internal/modules/announcement"
|
||||
"hfb_sys/backend/internal/modules/auth"
|
||||
"hfb_sys/backend/internal/modules/chat"
|
||||
"hfb_sys/backend/internal/modules/chathub"
|
||||
@@ -183,6 +184,12 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
|
||||
fileHandler := filemodule.NewHandler(fileService, fileStorage)
|
||||
listingService := listing.NewService(listingRepo, systemConfigRepo)
|
||||
listingHandler := listing.NewHandler(listingService, fileStorage)
|
||||
var announcementRepo *announcement.Repository
|
||||
if deps.DB != nil {
|
||||
announcementRepo = announcement.NewRepository(deps.DB)
|
||||
}
|
||||
announcementService := announcement.NewService(announcementRepo)
|
||||
announcementHandler := announcement.NewHandler(announcementService)
|
||||
requireAuth := middleware.Auth(jwtManager)
|
||||
requireAdmin := middleware.AdminAuth(jwtManager)
|
||||
requireRealname := middleware.RequireRealname(userRepo)
|
||||
@@ -307,6 +314,12 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
|
||||
realnameRoutes.GET("/status", realnameHandler.Status)
|
||||
}
|
||||
|
||||
announcementRoutes := api.Group("/announcements")
|
||||
{
|
||||
announcementRoutes.GET("", announcementHandler.List)
|
||||
announcementRoutes.GET("/:id", announcementHandler.GetByID)
|
||||
}
|
||||
|
||||
adminAuthRoutes := api.Group("/admin/auth")
|
||||
{
|
||||
adminAuthRoutes.GET("/captcha", adminAuthHandler.Captcha)
|
||||
@@ -381,6 +394,15 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
|
||||
adminRoutes.DELETE("/admin-users/:id", requirePerm("admin_user:manage"), adminMgrHandler.Delete)
|
||||
adminRoutes.PUT("/admin-users/:id/roles", requirePerm("admin_user:manage"), adminMgrHandler.AssignRoles)
|
||||
adminRoutes.PUT("/admin-users/:id/password", adminMgrHandler.ChangePassword)
|
||||
|
||||
// 公告管理
|
||||
adminRoutes.GET("/announcements", requirePerm("announcement:view"), announcementHandler.AdminList)
|
||||
adminRoutes.GET("/announcements/:id", requirePerm("announcement:view"), announcementHandler.AdminGetByID)
|
||||
adminRoutes.POST("/announcements", requirePerm("announcement:manage"), announcementHandler.Create)
|
||||
adminRoutes.PUT("/announcements/:id", requirePerm("announcement:manage"), announcementHandler.Update)
|
||||
adminRoutes.POST("/announcements/:id/publish", requirePerm("announcement:manage"), announcementHandler.Publish)
|
||||
adminRoutes.POST("/announcements/:id/archive", requirePerm("announcement:manage"), announcementHandler.Archive)
|
||||
adminRoutes.DELETE("/announcements/:id", requirePerm("announcement:manage"), announcementHandler.Delete)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
-- ============================================
|
||||
-- 公告系统表
|
||||
-- ============================================
|
||||
|
||||
-- 公告表
|
||||
CREATE TABLE IF NOT EXISTS announcements (
|
||||
id BIGINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
|
||||
title VARCHAR(255) NOT NULL COMMENT '公告标题',
|
||||
content TEXT NOT NULL COMMENT '公告内容（支持富文本/Markdown）',
|
||||
category VARCHAR(32) NOT NULL DEFAULT 'notice' COMMENT '分类: notice(通知), tutorial(教程), rule(规则), faq(常见问题)',
|
||||
priority INT NOT NULL DEFAULT 0 COMMENT '优先级，数值越大越靠前',
|
||||
is_pinned TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否置顶',
|
||||
is_important TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否重要（重要的会有特殊标记）',
|
||||
view_count INT NOT NULL DEFAULT 0 COMMENT '查看次数',
|
||||
status VARCHAR(32) NOT NULL DEFAULT 'draft' COMMENT '状态: draft(草稿), published(已发布), archived(已归档)',
|
||||
published_at DATETIME NULL COMMENT '发布时间',
|
||||
created_by BIGINT UNSIGNED NULL COMMENT '创建者ID（管理员）',
|
||||
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
KEY idx_announcements_status (status, is_pinned, priority, published_at),
|
||||
KEY idx_announcements_category (category, status)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='公告表';
|
||||
@@ -0,0 +1,98 @@
|
||||
-- 插入示例公告数据
|
||||
|
||||
INSERT INTO announcements (title, content, category, priority, is_pinned, is_important, status, published_at) VALUES
|
||||
('号主须知（重要！）', '## 平台担保交易，拒绝私下转账！
|
||||
|
||||
平台提供交易担保机制，用户支付的押金与租金全部冻结在平台账户中，租号结束后根据账号状态自动结算给号主或退款给租客。
|
||||
|
||||
**警告：**
|
||||
- 账号被非本人，请看到此消息后主动下架账号！
|
||||
- 不要随意更改账号密码或绑定信息
|
||||
- 请勿诱导买家进行私下交易
|
||||
- 违规将会被冻结账户并承担相应损失
|
||||
|
||||
有任何问题请联系客服处理。', 'notice', 100, 1, 1, 'published', NOW()),
|
||||
|
||||
('租客须知（重要！）', '## 账号使用规范
|
||||
|
||||
1. **禁止修改账号信息** - 不得修改账号密码、绑定手机、实名信息等
|
||||
2. **禁止充值** - 租用期间请勿对账号进行任何形式的充值
|
||||
3. **禁止违规操作** - 不得使用外挂、辅助工具，不得进行恶意行为
|
||||
4. **按时归还** - 租用到期后请及时归还账号，逾期将扣除押金
|
||||
|
||||
**温馨提示：**
|
||||
- 交接账号后请第一时间登录验证
|
||||
- 发现账号异常请立即联系客服
|
||||
- 使用过程中遇到问题随时咨询客服
|
||||
|
||||
祝您游戏愉快！', 'notice', 99, 1, 1, 'published', NOW()),
|
||||
|
||||
('人脸验证教程', '## 如何完成实名认证
|
||||
|
||||
为了保障交易安全，平台要求所有用户完成实名认证后才能发布商品和下单。
|
||||
|
||||
### 认证步骤：
|
||||
|
||||
1. 进入"个人资料"页面
|
||||
2. 点击"实名认证"按钮
|
||||
3. 按照提示填写真实姓名和身份证号
|
||||
4. 进行人脸识别验证
|
||||
5. 等待系统审核（通常1-3分钟）
|
||||
|
||||
### 注意事项：
|
||||
|
||||
- 请确保光线充足，面部清晰
|
||||
- 摘下眼镜、帽子等遮挡物
|
||||
- 一个身份证只能认证一个账号
|
||||
- 认证信息仅用于交易安全，平台严格保密
|
||||
|
||||
认证失败请联系客服协助处理。', 'tutorial', 90, 0, 0, 'published', NOW()),
|
||||
|
||||
('除纯市外其他高级物资默认从收费表', '## 出租开始须必开启备锁！
|
||||
|
||||
号主在出租账号前，务必确保账号已开启"账号保护"功能（即备锁）。
|
||||
|
||||
### 为什么要开启备锁？
|
||||
|
||||
- 防止租客恶意修改账号信息
|
||||
- 保护账号安全，降低被盗风险
|
||||
- 发生纠纷时便于平台介入处理
|
||||
- 租用结束后方便号主快速收回账号
|
||||
|
||||
### 如何开启？
|
||||
|
||||
具体开启方式请参考游戏官方设置，不同平台操作略有差异。如不清楚如何设置，请咨询客服。
|
||||
|
||||
**重要提醒：未开启备锁导致的账号安全问题，平台不承担责任！**', 'rule', 80, 0, 0, 'published', NOW()),
|
||||
|
||||
('出租完成后如何结算？', '## 租金结算流程
|
||||
|
||||
租用期满后，系统会根据账号状态自动进行结算：
|
||||
|
||||
### 正常归还
|
||||
- 租客按时归还账号
|
||||
- 号主确认账号无异常
|
||||
- 系统自动将租金结算到号主钱包
|
||||
- 押金退还给租客
|
||||
|
||||
### 异常情况
|
||||
- 账号信息被修改 → 押金赔付给号主
|
||||
- 账号被找回 → 租金退还给租客
|
||||
- 产生纠纷 → 平台客服介入仲裁
|
||||
|
||||
### 提现说明
|
||||
目前提现功能暂未开放，敬请期待后续更新。', 'faq', 70, 0, 0, 'published', NOW()),
|
||||
|
||||
('如何联系客服？', '## 客服联系方式
|
||||
|
||||
遇到问题可以通过以下方式联系客服：
|
||||
|
||||
1. **在线客服** - 点击页面右上角"客服"按钮，即可在线咨询
|
||||
2. **订单页面** - 每个订单详情页都有专属客服入口
|
||||
3. **消息中心** - 查看历史咨询记录
|
||||
|
||||
### 客服工作时间
|
||||
- 工作日：09:00 - 22:00
|
||||
- 节假日：10:00 - 20:00
|
||||
|
||||
非工作时间留言，客服上线后会第一时间回复。', 'faq', 60, 0, 0, 'published', NOW());
|
||||
@@ -46,3 +46,11 @@ func Unauthorized(c *gin.Context, message string) {
|
||||
func ServiceUnavailable(c *gin.Context, message string) {
|
||||
Error(c, http.StatusServiceUnavailable, "service_unavailable", message)
|
||||
}
|
||||
|
||||
func NotFound(c *gin.Context, message string) {
|
||||
Error(c, http.StatusNotFound, "not_found", message)
|
||||
}
|
||||
|
||||
func InternalServerError(c *gin.Context, message string) {
|
||||
Error(c, http.StatusInternalServerError, "internal_server_error", message)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
# 公告系统功能说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
在钱包旁边新增了公告中心功能，用户可以查看平台通知、使用教程、规则说明和常见问题解答。
|
||||
|
||||
## 主要特性
|
||||
|
||||
### 前台功能（用户端）
|
||||
- **公告列表页** (`/announcements`)
|
||||
- 支持按分类筛选（全部、通知公告、使用教程、规则说明、常见问题）
|
||||
- 显示置顶和重要标记
|
||||
- 分页浏览
|
||||
- 点击查看详情
|
||||
|
||||
- **公告详情页** (`/announcements/:id`)
|
||||
- 查看完整公告内容
|
||||
- 支持富文本显示
|
||||
- 自动统计浏览次数
|
||||
|
||||
### 后台功能（管理端）
|
||||
- 公告管理 CRUD（创建、编辑、删除）
|
||||
- 发布/归档公告
|
||||
- 设置优先级、置顶、重要标记
|
||||
- 按状态和分类筛选
|
||||
|
||||
## 数据库表结构
|
||||
|
||||
```sql
|
||||
CREATE TABLE announcements (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
title VARCHAR(255) NOT NULL,
|
||||
content TEXT NOT NULL,
|
||||
category VARCHAR(32) NOT NULL DEFAULT 'notice',
|
||||
priority INT NOT NULL DEFAULT 0,
|
||||
is_pinned TINYINT(1) NOT NULL DEFAULT 0,
|
||||
is_important TINYINT(1) NOT NULL DEFAULT 0,
|
||||
view_count INT NOT NULL DEFAULT 0,
|
||||
status VARCHAR(32) NOT NULL DEFAULT 'draft',
|
||||
published_at DATETIME NULL,
|
||||
created_by BIGINT UNSIGNED NULL,
|
||||
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
```
|
||||
|
||||
## API 端点
|
||||
|
||||
### 用户端
|
||||
- `GET /api/announcements` - 获取公告列表
|
||||
- `GET /api/announcements/:id` - 获取公告详情
|
||||
|
||||
### 管理端
|
||||
- `GET /api/admin/announcements` - 管理员获取公告列表
|
||||
- `GET /api/admin/announcements/:id` - 管理员获取公告详情
|
||||
- `POST /api/admin/announcements` - 创建公告
|
||||
- `PUT /api/admin/announcements/:id` - 更新公告
|
||||
- `POST /api/admin/announcements/:id/publish` - 发布公告
|
||||
- `POST /api/admin/announcements/:id/archive` - 归档公告
|
||||
- `DELETE /api/admin/announcements/:id` - 删除公告
|
||||
|
||||
## 权限要求
|
||||
|
||||
管理端需要以下权限：
|
||||
- `announcement:view` - 查看公告
|
||||
- `announcement:manage` - 管理公告（创建、编辑、发布、归档、删除）
|
||||
|
||||
## 前端路由
|
||||
|
||||
- `/announcements` - 公告列表
|
||||
- `/announcements/:id` - 公告详情
|
||||
|
||||
## 导航入口
|
||||
|
||||
在顶部导航栏"钱包"旁边添加了"公告"入口，用户可以方便地访问公告中心。
|
||||
|
||||
## 数据迁移
|
||||
|
||||
1. 运行 `000005_add_announcements.sql` 创建表结构
|
||||
2. 运行 `000006_insert_sample_announcements.sql` 插入示例数据
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 后端
|
||||
- 使用 Go + Gin 框架
|
||||
- GORM 作为 ORM
|
||||
- 遵循模块化设计（handler -> service -> repository）
|
||||
|
||||
### 前端
|
||||
- Vue 3 + TypeScript
|
||||
- Element Plus UI 组件库
|
||||
- 响应式设计，支持移动端
|
||||
|
||||
## 未来扩展
|
||||
|
||||
可以考虑添加：
|
||||
- 公告搜索功能
|
||||
- 用户收藏公告
|
||||
- 评论功能
|
||||
- 富文本编辑器（管理端）
|
||||
- 公告推送通知
|
||||
@@ -0,0 +1,42 @@
|
||||
import { apiRequest } from '@/utils/apiRequest'
|
||||
|
||||
export interface Announcement {
|
||||
id: number
|
||||
title: string
|
||||
content: string
|
||||
category: string
|
||||
priority: number
|
||||
is_pinned: boolean
|
||||
is_important: boolean
|
||||
view_count: number
|
||||
status: string
|
||||
published_at: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface AnnouncementListParams {
|
||||
category?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}
|
||||
|
||||
export interface PaginatedResult<T> {
|
||||
items: T[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
}
|
||||
|
||||
export async function fetchAnnouncements(params: AnnouncementListParams = {}): Promise<PaginatedResult<Announcement>> {
|
||||
return apiRequest<PaginatedResult<Announcement>>('/api/announcements', {
|
||||
method: 'GET',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export async function fetchAnnouncementDetail(id: number): Promise<Announcement> {
|
||||
return apiRequest<Announcement>(`/api/announcements/${id}`, {
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './api/announcements'
|
||||
@@ -0,0 +1,305 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ArrowLeft, Bell, Calendar, Document, QuestionFilled, View, Warning } from '@element-plus/icons-vue'
|
||||
import { fetchAnnouncementDetail, type Announcement } from '@/features/announcement'
|
||||
import { formatDateTime } from '@/utils/time'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const announcement = ref<Announcement | null>(null)
|
||||
|
||||
const categories = [
|
||||
{ value: 'notice', label: '通知公告', icon: Bell, color: '#3b82f6' },
|
||||
{ value: 'tutorial', label: '使用教程', icon: Document, color: '#10b981' },
|
||||
{ value: 'rule', label: '规则说明', icon: Warning, color: '#f59e0b' },
|
||||
{ value: 'faq', label: '常见问题', icon: QuestionFilled, color: '#8b5cf6' },
|
||||
]
|
||||
|
||||
onMounted(loadAnnouncement)
|
||||
|
||||
async function loadAnnouncement() {
|
||||
const id = Number(route.params.id)
|
||||
if (!id) {
|
||||
router.push('/announcements')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
announcement.value = await fetchAnnouncementDetail(id)
|
||||
} catch (err) {
|
||||
console.error('加载公告失败', err)
|
||||
router.push('/announcements')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push('/announcements')
|
||||
}
|
||||
|
||||
function getCategoryInfo(category: string) {
|
||||
return categories.find(c => c.value === category) || categories[0]
|
||||
}
|
||||
|
||||
function getCategoryLabel(category: string) {
|
||||
const cat = categories.find(c => c.value === category)
|
||||
return cat ? cat.label : category
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page announcement-detail-page" v-loading="loading">
|
||||
<div class="detail-header">
|
||||
<button class="back-button" @click="goBack">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
<span>返回列表</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="announcement" class="announcement-detail-card">
|
||||
<div class="detail-meta">
|
||||
<el-tag
|
||||
:type="announcement.category === 'notice' ? 'primary' : 'info'"
|
||||
effect="plain"
|
||||
size="small"
|
||||
class="category-tag"
|
||||
:style="{
|
||||
borderColor: getCategoryInfo(announcement.category).color,
|
||||
color: getCategoryInfo(announcement.category).color
|
||||
}"
|
||||
>
|
||||
<el-icon><component :is="getCategoryInfo(announcement.category).icon" /></el-icon>
|
||||
{{ getCategoryLabel(announcement.category) }}
|
||||
</el-tag>
|
||||
<el-tag v-if="announcement.is_pinned" type="warning" effect="plain" size="small">置顶</el-tag>
|
||||
<el-tag v-if="announcement.is_important" type="danger" effect="plain" size="small">重要</el-tag>
|
||||
</div>
|
||||
|
||||
<h1 class="detail-title">{{ announcement.title }}</h1>
|
||||
|
||||
<div class="detail-info">
|
||||
<span class="info-item">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
发布时间：{{ formatDateTime(announcement.published_at || announcement.created_at) }}
|
||||
</span>
|
||||
<span class="info-item">
|
||||
<el-icon><View /></el-icon>
|
||||
浏览次数：{{ announcement.view_count }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-divider"></div>
|
||||
|
||||
<div class="detail-content" v-html="announcement.content"></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.announcement-detail-page {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 18px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.announcement-detail-card {
|
||||
padding: 40px;
|
||||
border: 1px solid #e6eaf2;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 20px;
|
||||
color: #111827;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-item .el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.detail-divider {
|
||||
height: 1px;
|
||||
margin-bottom: 32px;
|
||||
background: #e6eaf2;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
color: #334155;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-content :deep(h1),
|
||||
.detail-content :deep(h2),
|
||||
.detail-content :deep(h3) {
|
||||
margin: 28px 0 16px;
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-content :deep(h1) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.detail-content :deep(h2) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.detail-content :deep(h3) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.detail-content :deep(p) {
|
||||
margin: 16px 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-content :deep(ul),
|
||||
.detail-content :deep(ol) {
|
||||
margin: 16px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.detail-content :deep(li) {
|
||||
margin: 8px 0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.detail-content :deep(code) {
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: #f1f5f9;
|
||||
color: #e11d48;
|
||||
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-content :deep(pre) {
|
||||
margin: 20px 0;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.detail-content :deep(pre code) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.detail-content :deep(blockquote) {
|
||||
margin: 20px 0;
|
||||
padding: 12px 20px;
|
||||
border-left: 4px solid #3b82f6;
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.detail-content :deep(a) {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.detail-content :deep(a:hover) {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.detail-content :deep(img) {
|
||||
max-width: 100%;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.announcement-detail-card {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,351 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Bell, Document, InfoFilled, QuestionFilled, Tickets, Warning } from '@element-plus/icons-vue'
|
||||
import { fetchAnnouncements, type Announcement } from '@/features/announcement'
|
||||
import { formatDateTime } from '@/utils/time'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const announcements = ref<Announcement[]>([])
|
||||
const currentPage = ref(1)
|
||||
const currentPageSize = ref(20)
|
||||
const total = ref(0)
|
||||
const activeCategory = ref<string>('')
|
||||
|
||||
const categories = [
|
||||
{ value: '', label: '全部', icon: Tickets, color: '#64748b' },
|
||||
{ value: 'notice', label: '通知公告', icon: Bell, color: '#3b82f6' },
|
||||
{ value: 'tutorial', label: '使用教程', icon: Document, color: '#10b981' },
|
||||
{ value: 'rule', label: '规则说明', icon: Warning, color: '#f59e0b' },
|
||||
{ value: 'faq', label: '常见问题', icon: QuestionFilled, color: '#8b5cf6' },
|
||||
]
|
||||
|
||||
const filteredCategories = computed(() => categories)
|
||||
|
||||
onMounted(loadAnnouncements)
|
||||
|
||||
async function loadAnnouncements() {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await fetchAnnouncements({
|
||||
category: activeCategory.value || undefined,
|
||||
page: currentPage.value,
|
||||
page_size: currentPageSize.value,
|
||||
})
|
||||
announcements.value = result.items
|
||||
total.value = result.total
|
||||
} catch (err) {
|
||||
console.error('加载公告失败', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleCategoryChange(category: string) {
|
||||
activeCategory.value = category
|
||||
currentPage.value = 1
|
||||
loadAnnouncements()
|
||||
}
|
||||
|
||||
function handleSizeChange() {
|
||||
currentPage.value = 1
|
||||
loadAnnouncements()
|
||||
}
|
||||
|
||||
function handlePageChange() {
|
||||
loadAnnouncements()
|
||||
}
|
||||
|
||||
function viewDetail(id: number) {
|
||||
router.push(`/announcements/${id}`)
|
||||
}
|
||||
|
||||
function getCategoryInfo(category: string) {
|
||||
return categories.find(c => c.value === category) || categories[0]
|
||||
}
|
||||
|
||||
function getCategoryLabel(category: string) {
|
||||
const cat = categories.find(c => c.value === category)
|
||||
return cat ? cat.label : category
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page announcements-page" v-loading="loading">
|
||||
<div class="announcements-hero">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">平台公告</p>
|
||||
<h1>公告中心</h1>
|
||||
<p>查看平台通知、使用教程、规则说明和常见问题解答</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-tabs">
|
||||
<button
|
||||
v-for="cat in filteredCategories"
|
||||
:key="cat.value"
|
||||
class="category-tab"
|
||||
:class="{ active: activeCategory === cat.value }"
|
||||
@click="handleCategoryChange(cat.value)"
|
||||
>
|
||||
<el-icon :style="{ color: activeCategory === cat.value ? cat.color : '#94a3b8' }">
|
||||
<component :is="cat.icon" />
|
||||
</el-icon>
|
||||
<span>{{ cat.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="announcements-list">
|
||||
<div v-if="announcements.length === 0" class="empty-state">
|
||||
<el-icon class="empty-icon"><InfoFilled /></el-icon>
|
||||
<p>暂无公告</p>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in announcements"
|
||||
:key="item.id"
|
||||
class="announcement-card"
|
||||
@click="viewDetail(item.id)"
|
||||
>
|
||||
<div class="announcement-header">
|
||||
<div class="announcement-meta">
|
||||
<el-tag
|
||||
:type="getCategoryInfo(item.category).value === 'notice' ? 'primary' : 'info'"
|
||||
effect="plain"
|
||||
size="small"
|
||||
class="category-tag"
|
||||
:style="{ borderColor: getCategoryInfo(item.category).color, color: getCategoryInfo(item.category).color }"
|
||||
>
|
||||
<el-icon><component :is="getCategoryInfo(item.category).icon" /></el-icon>
|
||||
{{ getCategoryLabel(item.category) }}
|
||||
</el-tag>
|
||||
<el-tag v-if="item.is_pinned" type="warning" effect="plain" size="small">置顶</el-tag>
|
||||
<el-tag v-if="item.is_important" type="danger" effect="plain" size="small">重要</el-tag>
|
||||
</div>
|
||||
<span class="announcement-date">{{ formatDateTime(item.published_at || item.created_at) }}</span>
|
||||
</div>
|
||||
<h3 class="announcement-title">{{ item.title }}</h3>
|
||||
<p class="announcement-preview">{{ item.content.substring(0, 120) }}{{ item.content.length > 120 ? '...' : '' }}</p>
|
||||
<div class="announcement-footer">
|
||||
<span class="view-count">
|
||||
<el-icon><Tickets /></el-icon>
|
||||
浏览 {{ item.view_count }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrap" v-if="total > 0">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="currentPageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.announcements-page {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.announcements-hero {
|
||||
padding: 32px;
|
||||
border: 1px solid #e6eaf2;
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.06)),
|
||||
#ffffff;
|
||||
box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
|
||||
}
|
||||
|
||||
.announcements-hero :deep(.page-header) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px;
|
||||
border: 1px solid #e6eaf2;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 18px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.category-tab:hover {
|
||||
border-color: #cbd5e1;
|
||||
background: #f1f5f9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.category-tab.active {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.category-tab .el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.announcements-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.announcement-card {
|
||||
padding: 24px;
|
||||
border: 1px solid #e6eaf2;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.announcement-card:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.announcement-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.announcement-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.announcement-date {
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.announcement-title {
|
||||
margin: 0 0 12px;
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.announcement-preview {
|
||||
margin: 0 0 16px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.announcement-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.view-count .el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 320px;
|
||||
padding: 48px;
|
||||
border: 1px solid #e6eaf2;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
color: #cbd5e1;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.announcements-hero {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.announcement-card {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.announcement-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.announcement-preview {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
Finished,
|
||||
House,
|
||||
InfoFilled,
|
||||
Megaphone,
|
||||
Search,
|
||||
Service,
|
||||
Shop,
|
||||
@@ -33,6 +34,7 @@ const navItems = [
|
||||
{ label: "我的订单", to: "/orders", icon: Tickets },
|
||||
{ label: "消息", to: "/messages", icon: ChatDotRound },
|
||||
{ label: "钱包", to: "/wallet", icon: Wallet },
|
||||
{ label: "公告", to: "/announcements", icon: Megaphone },
|
||||
];
|
||||
const buyerServiceItems = [
|
||||
{ label: "待支付", icon: Coin, to: { path: "/orders", query: { tab: "pending_payment" } } },
|
||||
|
||||
@@ -66,4 +66,14 @@ export const accountRoutes: RouteRecordRaw[] = [
|
||||
component: () => import('@/features/chats/views/ChatView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/announcements',
|
||||
name: 'announcements',
|
||||
component: () => import('@/features/announcement/views/AnnouncementsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/announcements/:id',
|
||||
name: 'announcement-detail',
|
||||
component: () => import('@/features/announcement/views/AnnouncementDetailView.vue'),
|
||||
},
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user