新增公告中心功能

## 功能概述
在钱包旁边新增公告中心，用户可以查看平台通知、教程、规则和常见问题。

## 主要变更

### 后端
- 新增 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>

backend/internal/model/announcement.go

@@ -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"
+}

backend/internal/modules/announcement/dto.go

@@ -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"`
+}

backend/internal/modules/announcement/handler.go

@@ -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
+}

backend/internal/modules/announcement/repository.go

@@ -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,
+	}
+}

backend/internal/modules/announcement/service.go

@@ -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)
+}

backend/internal/router/router.go

@@ -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)
 		}
 	}
 

backend/migrations/000005_add_announcements.sql

@@ -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='公告表';

backend/migrations/000006_insert_sample_announcements.sql

@@ -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());

backend/pkg/response/response.go

@@ -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)
+}

docs/announcement-feature.md

@@ -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 组件库
+- 响应式设计，支持移动端
+
+## 未来扩展
+
+可以考虑添加：
+- 公告搜索功能
+- 用户收藏公告
+- 评论功能
+- 富文本编辑器（管理端）
+- 公告推送通知

frontend/src/features/announcement/api/announcements.ts

@@ -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',
+  })
+}

frontend/src/features/announcement/index.ts

@@ -0,0 +1 @@
+export * from './api/announcements'

frontend/src/features/announcement/views/AnnouncementDetailView.vue

@@ -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>

frontend/src/features/announcement/views/AnnouncementsView.vue

@@ -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>

frontend/src/layouts/AppLayout.vue

@@ -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" } } },

frontend/src/router/accountRoutes.ts

@@ -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'),
+  },
 ]