feat：新增运维模式
This commit is contained in:
小张
parent
ef49c7b6d3
commit
27b68d2abc
32
src/api/modules/system.ts
Normal file
32
src/api/modules/system.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { request } from '../request'
|
||||
import type { ApiResponse } from '../types'
|
||||
|
||||
export interface SystemSettings {
|
||||
siteEnabled: boolean
|
||||
maintenanceTitle: string
|
||||
maintenanceMessage: string
|
||||
maintenanceStartTime?: string
|
||||
maintenanceEndTime?: string
|
||||
}
|
||||
|
||||
export const SystemApi = {
|
||||
// 获取系统设置
|
||||
getSystemSettings(): Promise<ApiResponse<SystemSettings>> {
|
||||
return request.get('/aiol/system/settings')
|
||||
},
|
||||
|
||||
// 更新系统设置
|
||||
updateSystemSettings(settings: Partial<SystemSettings>): Promise<ApiResponse<SystemSettings>> {
|
||||
return request.put('/aiol/system/settings', settings)
|
||||
},
|
||||
|
||||
// 检查网站状态
|
||||
checkSiteStatus(): Promise<ApiResponse<{ enabled: boolean; message?: string }>> {
|
||||
return request.get('/aiol/system/status')
|
||||
},
|
||||
|
||||
// 切换网站状态
|
||||
toggleSiteStatus(enabled: boolean): Promise<ApiResponse<{ enabled: boolean }>> {
|
||||
return request.post('/aiol/system/toggle', { enabled })
|
||||
}
|
||||
}
|
||||
@ -717,6 +717,25 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: { title: '本地视频播放演示' }
|
||||
},
|
||||
|
||||
// 网站维护页面
|
||||
{
|
||||
path: '/maintenance',
|
||||
name: 'Maintenance',
|
||||
component: () => import('@/views/Maintenance.vue'),
|
||||
meta: { title: '网站维护中' }
|
||||
},
|
||||
|
||||
// 系统管理页面
|
||||
{
|
||||
path: '/admin/system-maintenance',
|
||||
name: 'SystemMaintenance',
|
||||
component: () => import('@/views/admin/SystemMaintenance.vue'),
|
||||
meta: {
|
||||
title: '系统维护管理',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
|
||||
// 404 路由
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
@ -740,22 +759,33 @@ const router = createRouter({
|
||||
})
|
||||
|
||||
// ========== 路由守卫 ==========
|
||||
router.beforeEach((to, _from, next) => {
|
||||
import { maintenanceGuard } from '@/utils/maintenanceGuard'
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 设置页面标题
|
||||
if (to.meta.title) {
|
||||
document.title = `${to.meta.title} - 在线学习平台`
|
||||
}
|
||||
|
||||
// 检查是否需要登录
|
||||
if (to.meta.requiresAuth) {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) {
|
||||
next('/')
|
||||
// 检查网站维护状态
|
||||
maintenanceGuard(to, from, (route?: any) => {
|
||||
if (route) {
|
||||
// 如果维护守卫返回了重定向路由
|
||||
next(route)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
next()
|
||||
// 检查是否需要登录
|
||||
if (to.meta.requiresAuth) {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) {
|
||||
next('/')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
})
|
||||
|
||||
export default router
|
||||
62
src/utils/maintenanceGuard.ts
Normal file
62
src/utils/maintenanceGuard.ts
Normal file
@ -0,0 +1,62 @@
|
||||
/**
|
||||
* 网站维护状态检查工具
|
||||
*/
|
||||
|
||||
// 本地存储键名
|
||||
const STORAGE_KEYS = {
|
||||
SITE_STATUS: 'system_site_enabled'
|
||||
}
|
||||
|
||||
// 管理员路由白名单（这些路由在维护模式下仍可访问）
|
||||
const ADMIN_ROUTES = [
|
||||
'/admin',
|
||||
'/admin/system-maintenance',
|
||||
'/login',
|
||||
'/maintenance'
|
||||
]
|
||||
|
||||
/**
|
||||
* 检查网站是否启用
|
||||
*/
|
||||
export const isSiteEnabled = (): boolean => {
|
||||
const status = localStorage.getItem(STORAGE_KEYS.SITE_STATUS)
|
||||
// 默认为启用状态
|
||||
return status === null || status === 'true'
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查当前路由是否为管理员路由
|
||||
*/
|
||||
export const isAdminRoute = (path: string): boolean => {
|
||||
return ADMIN_ROUTES.some(route => path.startsWith(route))
|
||||
}
|
||||
|
||||
/**
|
||||
* 路由守卫：检查网站维护状态
|
||||
*/
|
||||
export const maintenanceGuard = (to: any, from: any, next: any) => {
|
||||
const siteEnabled = isSiteEnabled()
|
||||
const isAdmin = isAdminRoute(to.path)
|
||||
|
||||
console.log('🔍 维护状态检查:', {
|
||||
path: to.path,
|
||||
siteEnabled,
|
||||
isAdmin
|
||||
})
|
||||
|
||||
// 如果网站已关闭且不是管理员路由，重定向到维护页面
|
||||
if (!siteEnabled && !isAdmin) {
|
||||
console.log('🚫 网站维护中，重定向到维护页面')
|
||||
next('/maintenance')
|
||||
return
|
||||
}
|
||||
|
||||
// 如果网站已开启但访问维护页面，重定向到首页
|
||||
if (siteEnabled && to.path === '/maintenance') {
|
||||
console.log('✅ 网站已开启，重定向到首页')
|
||||
next('/')
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
}
|
||||
@ -90,8 +90,9 @@
|
||||
<div class="course-meta">
|
||||
<span class="course-students">{{ course.studentsCount }}{{ t('home.popularCourses.studentsEnrolled')
|
||||
}}</span>
|
||||
<button class="enroll-btn" @click.stop="handleEnrollCourse(course.id, $event)">{{ t('home.popularCourses.enroll')
|
||||
}}</button>
|
||||
<button class="enroll-btn" @click.stop="handleEnrollCourse(course, $event)">
|
||||
{{ course.isEnrolled ? '去学习' : '去报名' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -602,15 +603,23 @@ const goToCourseDetail = async (courseId: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理课程报名
|
||||
const handleEnrollCourse = async (courseId: string | number, event?: Event) => {
|
||||
// 处理课程报名或学习
|
||||
const handleEnrollCourse = async (course: any, event?: Event) => {
|
||||
// 阻止事件冒泡，避免触发卡片点击事件
|
||||
if (event) {
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
console.log('🎯 点击报名按钮，课程ID:', courseId)
|
||||
console.log('🎯 点击按钮，课程:', course)
|
||||
|
||||
// 如果已经报名，直接跳转到学习页面
|
||||
if (course.isEnrolled) {
|
||||
console.log('✅ 用户已报名，跳转到学习页面')
|
||||
router.push(`/course/${course.id}/exchanged`)
|
||||
return
|
||||
}
|
||||
|
||||
// 未报名，执行报名流程
|
||||
try {
|
||||
// 检查用户是否已登录
|
||||
if (!userStore.isLoggedIn) {
|
||||
@ -620,7 +629,7 @@ const handleEnrollCourse = async (courseId: string | number, event?: Event) => {
|
||||
}
|
||||
|
||||
// 调用报名API
|
||||
const response = await CourseApi.enrollCourse(String(courseId))
|
||||
const response = await CourseApi.enrollCourse(String(course.id))
|
||||
|
||||
if (response.code === 200 || response.code === 0) {
|
||||
console.log('✅ 报名成功:', response.data)
|
||||
@ -628,7 +637,7 @@ const handleEnrollCourse = async (courseId: string | number, event?: Event) => {
|
||||
message.success('报名成功！')
|
||||
|
||||
// 报名成功后跳转到课程详情页
|
||||
router.push(`/course/${courseId}/exchanged`)
|
||||
router.push(`/course/${course.id}/exchanged`)
|
||||
} else {
|
||||
console.error('❌ 报名失败:', response.message)
|
||||
message.error(response.message || '报名失败，请稍后重试')
|
||||
@ -701,12 +710,12 @@ const handleScroll = () => {
|
||||
documentHeight,
|
||||
scrollableHeight,
|
||||
scrollPercentage: scrollPercentage.toFixed(2) + '%',
|
||||
shouldShow: scrollPercentage >= 50,
|
||||
shouldShow: scrollPercentage >= 40,
|
||||
currentShow: showFixedButtons.value
|
||||
})
|
||||
|
||||
// 当滚动超过50%时显示固定按钮组
|
||||
const shouldShow = scrollPercentage >= 50
|
||||
const shouldShow = scrollPercentage >= 40
|
||||
if (shouldShow !== showFixedButtons.value) {
|
||||
showFixedButtons.value = shouldShow
|
||||
console.log(shouldShow ? '🟢 显示固定按钮组' : '🔴 隐藏固定按钮组')
|
||||
@ -778,7 +787,8 @@ const popularCourses = computed(() => {
|
||||
studentsCount: course.studentsCount,
|
||||
rating: course.rating,
|
||||
price: course.price,
|
||||
originalPrice: course.originalPrice
|
||||
originalPrice: course.originalPrice,
|
||||
isEnrolled: course.isEnrolled || false // 添加报名状态字段
|
||||
}))
|
||||
})
|
||||
|
||||
|
||||
294
src/views/Maintenance.vue
Normal file
294
src/views/Maintenance.vue
Normal file
@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="maintenance-page">
|
||||
<div class="maintenance-container">
|
||||
<div class="maintenance-content">
|
||||
<!-- 维护图标 -->
|
||||
<div class="maintenance-icon">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120" fill="none">
|
||||
<circle cx="60" cy="60" r="50" stroke="#1890ff" stroke-width="4" fill="none"/>
|
||||
<path d="M40 60h40M60 40v40" stroke="#1890ff" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle cx="60" cy="60" r="8" fill="#1890ff"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 维护标题 -->
|
||||
<h1 class="maintenance-title">{{ maintenanceTitle }}</h1>
|
||||
|
||||
<!-- 维护说明 -->
|
||||
<div class="maintenance-message">
|
||||
<p v-for="line in messageLines" :key="line">{{ line }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 预计恢复时间 -->
|
||||
<div v-if="estimatedTime" class="estimated-time">
|
||||
<p>预计恢复时间：{{ estimatedTime }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="contact-info">
|
||||
<p>如有紧急问题，请联系技术支持</p>
|
||||
<div class="contact-methods">
|
||||
<a href="mailto:support@example.com" class="contact-link">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M2 3h12l-6 4-6-4z"/>
|
||||
<path d="M2 3v10h12V3l-6 4-6-4z"/>
|
||||
</svg>
|
||||
support@example.com
|
||||
</a>
|
||||
<span class="contact-link">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122L9.98 10.94a6.678 6.678 0 0 1-3.898-3.898l.518-1.805a.678.678 0 0 0-.122-.58L4.684 2.35a.678.678 0 0 0-.122-.58z"/>
|
||||
</svg>
|
||||
400-123-4567
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button">
|
||||
<button @click="goBack" class="btn-primary">
|
||||
稍后再试
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<div class="background-decoration">
|
||||
<div class="decoration-circle circle-1"></div>
|
||||
<div class="decoration-circle circle-2"></div>
|
||||
<div class="decoration-circle circle-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
// 维护信息
|
||||
const maintenanceTitle = ref('网站正在维护中')
|
||||
const maintenanceMessage = ref('我们正在对系统进行升级维护，以提供更好的服务体验。\n维护期间网站暂时无法访问，给您带来的不便敬请谅解。')
|
||||
const estimatedTime = ref('')
|
||||
|
||||
// 将消息按行分割
|
||||
const messageLines = computed(() => {
|
||||
return maintenanceMessage.value.split('\n').filter(line => line.trim())
|
||||
})
|
||||
|
||||
// 本地存储键名
|
||||
const STORAGE_KEYS = {
|
||||
MAINTENANCE_SETTINGS: 'system_maintenance_settings'
|
||||
}
|
||||
|
||||
// 获取维护信息
|
||||
const loadMaintenanceInfo = () => {
|
||||
try {
|
||||
const savedSettings = localStorage.getItem(STORAGE_KEYS.MAINTENANCE_SETTINGS)
|
||||
if (savedSettings) {
|
||||
const settings = JSON.parse(savedSettings)
|
||||
maintenanceTitle.value = settings.title || '网站正在维护中'
|
||||
maintenanceMessage.value = settings.message || maintenanceMessage.value
|
||||
if (settings.endTime) {
|
||||
estimatedTime.value = new Date(settings.endTime).toLocaleString()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取维护信息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 返回操作
|
||||
const goBack = () => {
|
||||
window.history.back()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMaintenanceInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.maintenance-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.maintenance-container {
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.maintenance-content {
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.maintenance-icon {
|
||||
margin-bottom: 30px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.maintenance-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.maintenance-message {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.maintenance-message p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.estimated-time {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 30px;
|
||||
border-left: 4px solid #1890ff;
|
||||
}
|
||||
|
||||
.estimated-time p {
|
||||
margin: 0;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.contact-info p {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.contact-methods {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #40a9ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.background-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.decoration-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 60%;
|
||||
right: 10%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.maintenance-content {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.maintenance-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.contact-methods {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.decoration-circle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
413
src/views/admin/SystemMaintenance.vue
Normal file
413
src/views/admin/SystemMaintenance.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<div class="system-maintenance">
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">系统维护管理</h1>
|
||||
<p class="page-description">控制前台网站的开关状态和维护信息</p>
|
||||
</div>
|
||||
|
||||
<div class="maintenance-card">
|
||||
<!-- 网站状态控制 -->
|
||||
<div class="status-section">
|
||||
<div class="status-header">
|
||||
<h2>网站状态</h2>
|
||||
<div class="status-indicator" :class="{ 'online': siteEnabled, 'offline': !siteEnabled }">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">{{ siteEnabled ? '正常运行' : '维护中' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-controls">
|
||||
<n-button
|
||||
type="success"
|
||||
size="large"
|
||||
:disabled="siteEnabled"
|
||||
@click="enableSite"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><CheckmarkCircle /></n-icon>
|
||||
</template>
|
||||
开启网站
|
||||
</n-button>
|
||||
|
||||
<n-button
|
||||
type="error"
|
||||
size="large"
|
||||
:disabled="!siteEnabled"
|
||||
@click="showMaintenanceModal = true"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><StopCircle /></n-icon>
|
||||
</template>
|
||||
关闭网站
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 维护信息设置 -->
|
||||
<div class="settings-section">
|
||||
<h3>维护信息设置</h3>
|
||||
<n-form :model="maintenanceSettings" label-placement="top">
|
||||
<n-form-item label="维护标题">
|
||||
<n-input
|
||||
v-model:value="maintenanceSettings.title"
|
||||
placeholder="请输入维护标题"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="维护说明">
|
||||
<n-input
|
||||
v-model:value="maintenanceSettings.message"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入维护说明信息"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="预计恢复时间">
|
||||
<n-date-picker
|
||||
v-model:value="maintenanceSettings.endTime"
|
||||
type="datetime"
|
||||
placeholder="选择预计恢复时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<n-button type="primary" @click="saveSettings">
|
||||
保存设置
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作记录 -->
|
||||
<div class="log-section">
|
||||
<h3>操作记录</h3>
|
||||
<div class="log-list">
|
||||
<div v-for="log in operationLogs" :key="log.id" class="log-item">
|
||||
<div class="log-time">{{ formatTime(log.time) }}</div>
|
||||
<div class="log-action" :class="log.type">{{ log.action }}</div>
|
||||
<div class="log-user">{{ log.user }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关闭网站确认弹窗 -->
|
||||
<n-modal v-model:show="showMaintenanceModal" preset="dialog" title="关闭网站">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<n-icon color="#f5222d"><WarningOutline /></n-icon>
|
||||
关闭网站确认
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<p>确定要关闭网站吗？关闭后前台用户将无法访问网站，只会看到维护页面。</p>
|
||||
<p style="color: #f5222d; font-weight: 500;">请确保已经通知相关用户！</p>
|
||||
</div>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="showMaintenanceModal = false">取消</n-button>
|
||||
<n-button type="error" @click="disableSite">确认关闭</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import { CheckmarkCircle, StopCircle, WarningOutline } from '@vicons/ionicons5'
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
// 网站状态
|
||||
const siteEnabled = ref(true)
|
||||
const showMaintenanceModal = ref(false)
|
||||
|
||||
// 维护设置
|
||||
const maintenanceSettings = reactive({
|
||||
title: '网站正在维护中',
|
||||
message: '我们正在对系统进行升级维护，以提供更好的服务体验。\n维护期间网站暂时无法访问，给您带来的不便敬请谅解。',
|
||||
endTime: null as number | null
|
||||
})
|
||||
|
||||
// 操作记录
|
||||
const operationLogs = ref<Array<{
|
||||
id: string
|
||||
time: number
|
||||
action: string
|
||||
type: 'enable' | 'disable'
|
||||
user: string
|
||||
}>>([])
|
||||
|
||||
// 本地存储键名
|
||||
const STORAGE_KEYS = {
|
||||
SITE_STATUS: 'system_site_enabled',
|
||||
MAINTENANCE_SETTINGS: 'system_maintenance_settings',
|
||||
OPERATION_LOGS: 'system_operation_logs'
|
||||
}
|
||||
|
||||
// 开启网站
|
||||
const enableSite = () => {
|
||||
siteEnabled.value = true
|
||||
localStorage.setItem(STORAGE_KEYS.SITE_STATUS, 'true')
|
||||
|
||||
// 记录操作日志
|
||||
addOperationLog('开启网站', 'enable')
|
||||
|
||||
message.success('网站已开启，用户可以正常访问')
|
||||
}
|
||||
|
||||
// 关闭网站
|
||||
const disableSite = () => {
|
||||
siteEnabled.value = false
|
||||
localStorage.setItem(STORAGE_KEYS.SITE_STATUS, 'false')
|
||||
showMaintenanceModal.value = false
|
||||
|
||||
// 记录操作日志
|
||||
addOperationLog('关闭网站', 'disable')
|
||||
|
||||
message.warning('网站已关闭，用户将看到维护页面')
|
||||
}
|
||||
|
||||
// 保存维护设置
|
||||
const saveSettings = () => {
|
||||
localStorage.setItem(STORAGE_KEYS.MAINTENANCE_SETTINGS, JSON.stringify(maintenanceSettings))
|
||||
message.success('维护设置已保存')
|
||||
}
|
||||
|
||||
// 添加操作日志
|
||||
const addOperationLog = (action: string, type: 'enable' | 'disable') => {
|
||||
const log = {
|
||||
id: Date.now().toString(),
|
||||
time: Date.now(),
|
||||
action,
|
||||
type,
|
||||
user: '管理员' // 这里可以从用户状态获取
|
||||
}
|
||||
|
||||
operationLogs.value.unshift(log)
|
||||
|
||||
// 只保留最近50条记录
|
||||
if (operationLogs.value.length > 50) {
|
||||
operationLogs.value = operationLogs.value.slice(0, 50)
|
||||
}
|
||||
|
||||
localStorage.setItem(STORAGE_KEYS.OPERATION_LOGS, JSON.stringify(operationLogs.value))
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleString()
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadData = () => {
|
||||
// 加载网站状态
|
||||
const savedStatus = localStorage.getItem(STORAGE_KEYS.SITE_STATUS)
|
||||
if (savedStatus !== null) {
|
||||
siteEnabled.value = savedStatus === 'true'
|
||||
}
|
||||
|
||||
// 加载维护设置
|
||||
const savedSettings = localStorage.getItem(STORAGE_KEYS.MAINTENANCE_SETTINGS)
|
||||
if (savedSettings) {
|
||||
try {
|
||||
const settings = JSON.parse(savedSettings)
|
||||
Object.assign(maintenanceSettings, settings)
|
||||
} catch (error) {
|
||||
console.error('加载维护设置失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载操作日志
|
||||
const savedLogs = localStorage.getItem(STORAGE_KEYS.OPERATION_LOGS)
|
||||
if (savedLogs) {
|
||||
try {
|
||||
operationLogs.value = JSON.parse(savedLogs)
|
||||
} catch (error) {
|
||||
console.error('加载操作日志失败:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-maintenance {
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.maintenance-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-indicator.online {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
.status-indicator.offline {
|
||||
background: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.status-controls {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.log-section {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.log-section h3 {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.log-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.log-action {
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.log-action.enable {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.log-action.disable {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.log-user {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.system-maintenance {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.status-header {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.status-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user