From abde5d1f9d3c0fa8cf9111334bbdfa1d4733be1f Mon Sep 17 00:00:00 2001 From: zyh Date: Wed, 27 Aug 2025 17:36:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20AdminLayout=20=E4=BB=A5?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E9=A1=B9=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=85=AC=E5=91=8A?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=B9=B6=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E8=B7=AF=E7=94=B1=E6=9D=83=E9=99=90=E6=A3=80=E6=9F=A5?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BB=A5=E6=94=AF=E6=8C=81=E6=96=B0=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/公告管理使用说明.md | 117 +++++++ src/api/announcement.js | 42 +++ src/layouts/AdminLayout.vue | 40 +-- src/router/index.js | 17 +- src/utils/permission.js | 33 +- src/views/announcements/AnnouncementList.vue | 324 +++++++++++++++++++ 6 files changed, 514 insertions(+), 59 deletions(-) create mode 100644 docs/公告管理使用说明.md create mode 100644 src/api/announcement.js create mode 100644 src/views/announcements/AnnouncementList.vue diff --git a/docs/公告管理使用说明.md b/docs/公告管理使用说明.md new file mode 100644 index 0000000..5352ce2 --- /dev/null +++ b/docs/公告管理使用说明.md @@ -0,0 +1,117 @@ +# 公告管理使用说明 + +## 功能概述 + +公告管理模块提供了完整的公告信息管理功能，包括公告的创建、编辑、删除、启用/禁用等操作。 + +## 功能特性 + +- ✅ 公告列表查看（支持分页） +- ✅ 按标题/内容关键词搜索 +- ✅ 按启用状态筛选 +- ✅ 创建新公告 +- ✅ 编辑现有公告 +- ✅ 删除公告 +- ✅ 一键启用/禁用公告 +- ✅ 支持跳转链接设置 +- ✅ 权限控制（管理员和代理商不同权限） + +## 权限说明 + +### 管理员权限 +- 查看公告列表 +- 创建新公告 +- 编辑现有公告 +- 删除公告 +- 启用/禁用公告 + +### 代理商权限 +- 查看公告列表（只读） + +## 使用步骤 + +### 1. 访问公告管理 +- 登录管理后台 +- 在左侧导航菜单中点击"公告管理" + +### 2. 查看公告列表 +- 公告列表显示所有公告信息 +- 支持按关键词搜索（标题或内容） +- 支持按启用状态筛选 +- 支持分页浏览 + +### 3. 创建新公告 +1. 点击"新增公告"按钮 +2. 填写公告信息： + - **标题**：必填，公告标题 + - **内容**：必填，公告详细内容 + - **跳转链接**：可选，点击公告后跳转的URL + - **状态**：选择是否启用 +3. 点击"保存"完成创建 + +### 4. 编辑公告 +1. 在公告列表中找到要编辑的公告 +2. 点击"编辑"按钮 +3. 修改公告信息 +4. 点击"保存"完成修改 + +### 5. 删除公告 +1. 在公告列表中找到要删除的公告 +2. 点击"删除"按钮 +3. 确认删除操作 + +### 6. 启用/禁用公告 +- 在公告列表中，直接点击状态开关即可快速启用或禁用公告 +- 只有启用的公告才会对用户可见 + +## 字段说明 + +| 字段 | 类型 | 必填 | 说明 | +|------|------|------|------| +| 标题 | 文本 | 是 | 公告标题，用于列表显示 | +| 内容 | 文本 | 是 | 公告详细内容 | +| 跳转链接 | URL | 否 | 点击公告后跳转的链接地址 | +| 状态 | 布尔 | 是 | 是否启用，只有启用的公告用户才能看到 | + +## 注意事项 + +1. **权限控制**：只有具备相应权限的用户才能进行相应操作 +2. **数据验证**：标题和内容为必填字段 +3. **URL验证**：跳转链接必须是有效的URL格式（以http://或https://开头） +4. **状态控制**：只有启用的公告才会在前端显示给用户 +5. **操作记录**：所有操作都会记录创建时间和更新时间 + +## API接口 + +公告管理使用以下API接口： + +- `GET /api/admin/announcement/list` - 获取公告列表 +- `POST /api/admin/announcement` - 创建公告 +- `PUT /api/admin/announcement/{id}` - 更新公告 +- `DELETE /api/admin/announcement/{id}` - 删除公告 +- `PUT /api/admin/announcement/{id}/enabled` - 更新启用状态 +- `GET /api/admin/announcement/enabled` - 获取启用的公告 + +详细的API文档请参考项目根目录的接口文档。 + +## 故障排除 + +### 常见问题 + +1. **无法访问公告管理页面** + - 检查用户是否有相应权限 + - 确认已正确登录 + +2. **创建公告失败** + - 检查标题和内容是否已填写 + - 检查跳转链接格式是否正确 + +3. **状态切换失败** + - 检查网络连接 + - 确认用户有编辑权限 + +4. **搜索无结果** + - 检查搜索关键词是否正确 + - 尝试重置搜索条件 + +如有其他问题，请联系系统管理员。 diff --git a/src/api/announcement.js b/src/api/announcement.js new file mode 100644 index 0000000..89cfc6d --- /dev/null +++ b/src/api/announcement.js @@ -0,0 +1,42 @@ +import http from '../plugins/http' + +/** + * 公告管理API + */ + +// 获取公告列表（分页） +export function getAnnouncementList(params) { + return http.get('/api/admin/announcement/list', { params }) +} + +// 获取公告详情 +export function getAnnouncementDetail(id) { + return http.get(`/api/admin/announcement/${id}`) +} + +// 创建公告 +export function createAnnouncement(data) { + return http.post('/api/admin/announcement', data) +} + +// 更新公告 +export function updateAnnouncement(id, data) { + return http.put(`/api/admin/announcement/${id}`, data) +} + +// 删除公告 +export function deleteAnnouncement(id) { + return http.delete(`/api/admin/announcement/${id}`) +} + +// 更新公告启用状态 +export function updateAnnouncementStatus(id, enabled) { + return http.put(`/api/admin/announcement/${id}/enabled`, null, { + params: { enabled } + }) +} + +// 获取启用的公告 +export function getEnabledAnnouncements() { + return http.get('/api/admin/announcement/enabled') +} diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue index 6f7844e..a800849 100644 --- a/src/layouts/AdminLayout.vue +++ b/src/layouts/AdminLayout.vue @@ -14,42 +14,28 @@ text-color="#bfcbd9" active-text-color="#fff" > - - - 仪表盘 - + 用户管理 - - - 游戏管理 - - - - 订单管理 - - - - 报表分析 - + + + - + 链接管理 + + + 公告管理 + 系统设置 - - - 错误测试 - - - - 权限测试 - + +
@@ -92,10 +78,8 @@ const currentUser = computed(() => getCurrentUser()) // 权限检查 const canAccessUsers = computed(() => canAccessRoute('Users')) -const canAccessGames = computed(() => canAccessRoute('Games')) -const canAccessOrders = computed(() => canAccessRoute('Orders')) -const canAccessReports = computed(() => canAccessRoute('Reports')) const canAccessLinks = computed(() => canAccessRoute('Links')) +const canAccessAnnouncements = computed(() => canAccessRoute('Announcements')) const canAccessSettings = computed(() => canAccessRoute('Settings')) function onProfile() { diff --git a/src/router/index.js b/src/router/index.js index 010506d..90a66bd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -5,15 +5,10 @@ import { canAccessRoute } from '@/utils/permission' const AdminLayout = () => import('@/layouts/AdminLayout.vue') const Login = () => import('@/views/Login.vue') -const Dashboard = () => import('@/views/Dashboard.vue') const UserList = () => import('@/views/users/UserList.vue') -const GameList = () => import('@/views/games/GameList.vue') -const OrderList = () => import('@/views/orders/OrderList.vue') -const ReportAnalysis = () => import('@/views/reports/ReportAnalysis.vue') const Settings = () => import('@/views/settings/Settings.vue') const LinkGenerate = () => import('@/views/links/LinkGenerate.vue') -const ErrorTest = () => import('@/views/ErrorTest.vue') -const PermissionTest = () => import('@/views/PermissionTest.vue') +const AnnouncementList = () => import('@/views/announcements/AnnouncementList.vue') const Play = () => import('@/views/Play.vue') const NotFound = () => import('@/views/NotFound.vue') @@ -24,15 +19,11 @@ export const routes = [ path: '/', component: AdminLayout, children: [ - { path: '', name: 'Dashboard', component: Dashboard, meta: { title: '仪表盘' } }, + { path: '', redirect: '/users' }, { path: 'users', name: 'Users', component: UserList, meta: { title: '用户管理' } }, - { path: 'games', name: 'Games', component: GameList, meta: { title: '游戏管理' } }, - { path: 'orders', name: 'Orders', component: OrderList, meta: { title: '订单管理' } }, - { path: 'reports', name: 'Reports', component: ReportAnalysis, meta: { title: '报表分析' } }, { path: 'settings', name: 'Settings', component: Settings, meta: { title: '系统设置' } }, { path: 'links', name: 'Links', component: LinkGenerate, meta: { title: '链接管理' } }, - { path: 'error-test', name: 'ErrorTest', component: ErrorTest, meta: { title: '错误处理测试' } }, - { path: 'permission-test', name: 'PermissionTest', component: PermissionTest, meta: { title: '权限测试' } }, + { path: 'announcements', name: 'Announcements', component: AnnouncementList, meta: { title: '公告管理' } }, ], }, { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: { public: true, title: '未找到' } }, @@ -51,7 +42,7 @@ router.beforeEach((to, from, next) => { // 检查路由权限 if (to.name && !canAccessRoute(to.name)) { - return next({ name: 'Dashboard' }) // 无权限时跳转到仪表盘 + return next({ name: 'Users' }) // 无权限时跳转到用户管理 } next() diff --git a/src/utils/permission.js b/src/utils/permission.js index 697ce65..96ed17b 100644 --- a/src/utils/permission.js +++ b/src/utils/permission.js @@ -36,6 +36,13 @@ export const PERMISSIONS = { // 二维码权限 QR_GENERATE: 'qr:generate', QR_VIEW: 'qr:view', + + // 公告管理权限 + ANNOUNCEMENT_MANAGE: 'announcement:manage', + ANNOUNCEMENT_CREATE: 'announcement:create', + ANNOUNCEMENT_UPDATE: 'announcement:update', + ANNOUNCEMENT_DELETE: 'announcement:delete', + ANNOUNCEMENT_VIEW: 'announcement:view', } // 角色权限映射 @@ -47,14 +54,6 @@ export const ROLE_PERMISSIONS = { PERMISSIONS.USER_UPDATE, PERMISSIONS.USER_DELETE, PERMISSIONS.USER_VIEW, - PERMISSIONS.GAME_MANAGE, - PERMISSIONS.GAME_CREATE, - PERMISSIONS.GAME_UPDATE, - PERMISSIONS.GAME_DELETE, - PERMISSIONS.GAME_VIEW, - PERMISSIONS.ORDER_MANAGE, - PERMISSIONS.ORDER_VIEW, - PERMISSIONS.REPORT_VIEW, PERMISSIONS.SETTING_MANAGE, PERMISSIONS.LINK_MANAGE, PERMISSIONS.LINK_CREATE, @@ -63,28 +62,26 @@ export const ROLE_PERMISSIONS = { PERMISSIONS.LINK_VIEW, PERMISSIONS.QR_GENERATE, PERMISSIONS.QR_VIEW, + PERMISSIONS.ANNOUNCEMENT_MANAGE, + PERMISSIONS.ANNOUNCEMENT_CREATE, + PERMISSIONS.ANNOUNCEMENT_UPDATE, + PERMISSIONS.ANNOUNCEMENT_DELETE, + PERMISSIONS.ANNOUNCEMENT_VIEW, ], AGENT: [ // 代理商只有查看权限，没有管理权限 - PERMISSIONS.GAME_VIEW, - PERMISSIONS.ORDER_VIEW, - PERMISSIONS.REPORT_VIEW, PERMISSIONS.LINK_VIEW, PERMISSIONS.QR_VIEW, + PERMISSIONS.ANNOUNCEMENT_VIEW, ] } // 路由权限映射 export const ROUTE_PERMISSIONS = { - 'Dashboard': [], // 仪表盘所有用户都可以访问 'Users': [PERMISSIONS.USER_VIEW], - 'Games': [PERMISSIONS.GAME_VIEW], - 'Orders': [PERMISSIONS.ORDER_VIEW], - 'Reports': [PERMISSIONS.REPORT_VIEW], 'Settings': [PERMISSIONS.SETTING_MANAGE], 'Links': [PERMISSIONS.LINK_VIEW], - 'ErrorTest': [], // 错误测试页面所有用户都可以访问 - 'PermissionTest': [], // 权限测试页面所有用户都可以访问 + 'Announcements': [PERMISSIONS.ANNOUNCEMENT_VIEW], } // 获取当前用户信息 @@ -153,7 +150,7 @@ export function getAccessibleRoutes() { // 管理员可以访问所有路由 if (isAdmin()) { - return ['Dashboard', 'Users', 'Games', 'Orders', 'Reports', 'Settings', 'Links', 'ErrorTest', 'PermissionTest'] + return ['Dashboard', 'Users', 'Games', 'Orders', 'Reports', 'Settings', 'Links', 'Announcements', 'ErrorTest', 'PermissionTest'] } const userPermissions = ROLE_PERMISSIONS[userType?.toUpperCase()] || [] diff --git a/src/views/announcements/AnnouncementList.vue b/src/views/announcements/AnnouncementList.vue new file mode 100644 index 0000000..09c8c21 --- /dev/null +++ b/src/views/announcements/AnnouncementList.vue @@ -0,0 +1,324 @@ + + + + +