fix:添加审计和全局
This commit is contained in:
@@ -0,0 +1,709 @@
|
||||
<template>
|
||||
<div class="all-sites-container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="left">
|
||||
<h2 class="title">所有站点</h2>
|
||||
<el-tag type="info" effect="plain" class="count-tag">共 {{ pagination.total }} 个容器</el-tag>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="handleRefresh" :icon="Refresh" class="action-btn">刷新</el-button>
|
||||
<!-- <el-button type="success" @click="handleExport" :icon="Download" class="action-btn">导出数据</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-panel">
|
||||
<div class="stat-card total-card">
|
||||
<div class="stat-icon"><el-icon><Monitor /></el-icon></div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ pagination.total }}</div>
|
||||
<div class="stat-label">总容器数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card normal-card">
|
||||
<div class="stat-icon"><el-icon><CircleCheck /></el-icon></div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ siteStats.normal }}</div>
|
||||
<div class="stat-label">已构建容器</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card warning-card">
|
||||
<div class="stat-icon"><el-icon><Warning /></el-icon></div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ siteStats.warning }}</div>
|
||||
<div class="stat-label">未构建/未知容器</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card violation-card">
|
||||
<div class="stat-icon"><el-icon><CircleClose /></el-icon></div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ siteStats.violation }}</div>
|
||||
<div class="stat-label">异常容器</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选 -->
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="搜索容器">
|
||||
<el-input v-model="queryParams.domain" placeholder="请输入容器id或服务器id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery" :icon="Search">查询</el-button>
|
||||
<el-button @click="resetQuery" :icon="Delete">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 站点列表 -->
|
||||
<el-card class="table-container" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="siteList"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="container_id" label="容器id" width="300"/>
|
||||
<el-table-column label="容器状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="getStatusType(row.status)"
|
||||
effect="plain"
|
||||
size="small"
|
||||
>
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastCheck" label="最后检查时间" />
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
<el-table-column label="操作" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-buttons">
|
||||
|
||||
<el-tooltip content="重新检查" placement="top">
|
||||
<el-button type="warning" :icon="Refresh" circle size="small" @click="handleRecheck(row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="标记违规" placement="top" v-if="row.status !== 'violation'">
|
||||
<el-button type="danger" :icon="Warning" circle size="small" @click="handleMarkViolation(row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="标记正常" placement="top" v-if="row.status === 'violation'">
|
||||
<el-button type="success" :icon="CircleCheck" circle size="small" @click="handleMarkNormal(row)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.pageNum"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pagination.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
||||
import {
|
||||
Refresh, Download, Search, Delete, View, Warning,
|
||||
Monitor, CircleCheck, CircleClose
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getSiteList,
|
||||
auditSite,
|
||||
delAudit,
|
||||
getAuditList
|
||||
|
||||
} from '@/utils/acs/audit'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
domain: '',
|
||||
status: '',
|
||||
dateRange: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
// 数据加载和分页相关
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 站点列表和统计数据
|
||||
const siteList = ref([])
|
||||
const selectedRows = ref([])
|
||||
const siteStats = reactive({
|
||||
total: 0,
|
||||
normal: 0,
|
||||
warning: 0,
|
||||
violation: 0
|
||||
})
|
||||
|
||||
// 是否需要获取统计数据的标志
|
||||
const needsStatsUpdate = ref(true)
|
||||
|
||||
// 对话框相关
|
||||
const detailDialogVisible = ref(false)
|
||||
const currentSite = ref(null)
|
||||
|
||||
|
||||
|
||||
// 获取站点列表数据
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 构造API请求参数
|
||||
const params = {
|
||||
page: queryParams.pageNum,
|
||||
count: queryParams.pageSize,
|
||||
server_id: '', // 可以根据需要添加服务器ID筛选
|
||||
user_id: '', // 可以根据需要添加用户ID筛选
|
||||
key: queryParams.domain || '' // 使用域名作为搜索关键字
|
||||
}
|
||||
|
||||
// 调用API获取站点列表
|
||||
const response = await getSiteList(params)
|
||||
console.log("获取站点列表结果",response)
|
||||
if (response && response.data) {
|
||||
// 处理API返回的数据
|
||||
const apiData = response.data.data || []
|
||||
|
||||
// 将API数据转换为页面需要的格式
|
||||
const transformedData = apiData.map(item => ({
|
||||
container_id: item.container_id ,
|
||||
domain: item.domain || item.Domain || item.web_key,
|
||||
title: item.title || item.Title || item.web_name || '未知站点',
|
||||
status: getStatusFromApi(item.container_state),
|
||||
lastCheck: formatTime(item.become_time),
|
||||
createTime: formatTime(item.create_time || item.CreateTime || item.created_at || item.CreatedAt),
|
||||
description: item.description || item.Description || '',
|
||||
checkHistory: [] // API可能不返回历史记录，可以单独获取
|
||||
}))
|
||||
|
||||
// 如果有状态筛选，在前端进行过滤
|
||||
let filteredData = transformedData
|
||||
|
||||
|
||||
siteList.value = filteredData
|
||||
pagination.total = response.data.total || response.data.count || filteredData.length
|
||||
|
||||
// 检查API是否返回了统计信息
|
||||
if (response.data.stats) {
|
||||
// 如果API返回了统计信息，直接使用
|
||||
updateStatsFromApi(response.data.stats)
|
||||
needsStatsUpdate.value = false
|
||||
} else {
|
||||
// 如果需要获取统计数据且是第一页，获取全部数据进行统计
|
||||
if (needsStatsUpdate.value && queryParams.pageNum === 1) {
|
||||
await getFullStatsData()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
siteList.value = []
|
||||
pagination.total = 0
|
||||
updateStats([])
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取站点列表失败:', error)
|
||||
ElMessage.error('获取站点列表失败')
|
||||
// 出错时显示空列表
|
||||
siteList.value = []
|
||||
pagination.total = 0
|
||||
updateStats([])
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 将API返回的状态转换为页面需要的状态
|
||||
const getStatusFromApi = (apiStatus) => {
|
||||
// 根据API返回的容器状态值进行转换
|
||||
// 0未支付 1未构建 2已构建 3未知 4已删除
|
||||
if (typeof apiStatus === 'number') {
|
||||
switch (apiStatus) {
|
||||
case 0: return 'violation' // 未支付 - 违规状态
|
||||
case 1: return 'warning' // 未构建 - 警告状态
|
||||
case 2: return 'normal' // 已构建 - 正常状态
|
||||
case 3: return 'warning' // 未知 - 警告状态
|
||||
case 4: return 'violation' // 已删除 - 违规状态
|
||||
default: return 'warning' // 默认为警告状态
|
||||
}
|
||||
} else if (typeof apiStatus === 'string') {
|
||||
const status = apiStatus.toLowerCase()
|
||||
if (status.includes('已构建') || status.includes('normal') || status.includes('正常')) return 'normal'
|
||||
if (status.includes('未构建') || status.includes('未知') || status.includes('warning') || status.includes('警告')) return 'warning'
|
||||
if (status.includes('未支付') || status.includes('已删除') || status.includes('violation') || status.includes('违规')) return 'violation'
|
||||
return 'warning'
|
||||
}
|
||||
return 'warning' // 默认为警告状态
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr) => {
|
||||
if (!timeStr) return '未知时间'
|
||||
|
||||
try {
|
||||
// 处理不同的时间格式
|
||||
let dateStr = timeStr
|
||||
|
||||
// 如果包含T，替换为空格并截取到秒
|
||||
if (dateStr.includes('T')) {
|
||||
dateStr = dateStr.replace('T', ' ').substring(0, 19)
|
||||
}
|
||||
|
||||
// 如果包含+或Z，截取到秒
|
||||
if (dateStr.includes('+') || dateStr.includes('Z')) {
|
||||
dateStr = dateStr.substring(0, 19)
|
||||
}
|
||||
|
||||
return dateStr
|
||||
} catch (error) {
|
||||
console.warn('时间格式化失败:', error)
|
||||
return timeStr || '未知时间'
|
||||
}
|
||||
}
|
||||
|
||||
// 更新统计数据（基于当前页数据）
|
||||
const updateStats = (data = []) => {
|
||||
console.log("更新统计数据",data)
|
||||
siteStats.total = data.length
|
||||
siteStats.normal = data.filter(site => site.status === 'normal').length
|
||||
siteStats.warning = data.filter(site => site.status === 'warning').length
|
||||
siteStats.violation = data.filter(site => site.status === 'violation').length
|
||||
}
|
||||
|
||||
// 从API统计信息更新
|
||||
const updateStatsFromApi = (apiStats) => {
|
||||
siteStats.total = apiStats.total || 0
|
||||
siteStats.normal = apiStats.normal || apiStats.built || 0
|
||||
siteStats.warning = apiStats.warning || apiStats.unbuilt || apiStats.unknown || 0
|
||||
siteStats.violation = apiStats.violation || apiStats.error || apiStats.deleted || apiStats.unpaid || 0
|
||||
}
|
||||
|
||||
// 获取全部数据进行统计（仅在需要时调用）
|
||||
const getFullStatsData = async () => {
|
||||
try {
|
||||
// 获取第一页大量数据来进行统计，或者调用专门的统计接口
|
||||
const statsParams = {
|
||||
page: 1,
|
||||
count: 1000, // 获取大量数据进行统计
|
||||
server_id: '',
|
||||
user_id: '',
|
||||
key: queryParams.domain || ''
|
||||
}
|
||||
|
||||
const response = await getSiteList(statsParams)
|
||||
if (response && response.data && response.data.data) {
|
||||
const allData = response.data.data.map(item => ({
|
||||
status: getStatusFromApi(item.container_state)
|
||||
}))
|
||||
|
||||
// 更新统计数据
|
||||
siteStats.total = response.data.total || response.data.count || allData.length
|
||||
siteStats.normal = allData.filter(site => site.status === 'normal').length
|
||||
siteStats.warning = allData.filter(site => site.status === 'warning').length
|
||||
siteStats.violation = allData.filter(site => site.status === 'violation').length
|
||||
|
||||
needsStatsUpdate.value = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('获取统计数据失败:', error)
|
||||
// 如果统计数据获取失败，使用总数和当前页数据的比例估算
|
||||
if (pagination.total > 0 && siteList.value.length > 0) {
|
||||
const ratio = pagination.total / siteList.value.length
|
||||
siteStats.total = pagination.total
|
||||
siteStats.normal = Math.round((siteList.value.filter(site => site.status === 'normal').length) * ratio)
|
||||
siteStats.warning = Math.round((siteList.value.filter(site => site.status === 'warning').length) * ratio)
|
||||
siteStats.violation = Math.round((siteList.value.filter(site => site.status === 'violation').length) * ratio)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态类型
|
||||
const getStatusType = (status) => {
|
||||
const statusMap = {
|
||||
normal: 'success',
|
||||
warning: 'warning',
|
||||
violation: 'danger'
|
||||
}
|
||||
return statusMap[status] || 'info'
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
normal: '已构建', // 对应容器状态 2
|
||||
warning: '未构建', // 对应容器状态 1 和 3(未知)
|
||||
violation: '异常' // 对应容器状态 0(未支付) 和 4(已删除)
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
// 查询按钮
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNum = 1
|
||||
needsStatsUpdate.value = true // 重新查询时需要更新统计
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询条件
|
||||
const resetQuery = () => {
|
||||
queryParams.domain = ''
|
||||
queryParams.status = ''
|
||||
queryParams.dateRange = []
|
||||
queryParams.pageNum = 1
|
||||
needsStatsUpdate.value = true // 重置查询时需要更新统计
|
||||
getList()
|
||||
}
|
||||
|
||||
// 表格复选框选择
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
|
||||
// 分页大小变化处理
|
||||
const handleSizeChange = (size) => {
|
||||
queryParams.pageSize = size
|
||||
getList()
|
||||
}
|
||||
|
||||
// 分页页码变化处理
|
||||
const handleCurrentChange = (page) => {
|
||||
queryParams.pageNum = page
|
||||
getList()
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
ElNotification({
|
||||
title: '刷新中',
|
||||
message: '正在重新获取站点数据',
|
||||
type: 'info',
|
||||
duration: 2000
|
||||
})
|
||||
needsStatsUpdate.value = true // 刷新时需要更新统计
|
||||
getList()
|
||||
}
|
||||
|
||||
// 导出数据
|
||||
const handleExport = () => {
|
||||
ElMessage.success('导出功能开发中...')
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleView = (row) => {
|
||||
currentSite.value = row
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 重新检查
|
||||
const handleRecheck = async (row) => {
|
||||
try {
|
||||
ElMessage.info(`正在重新检查站点: ${row.domain}`)
|
||||
|
||||
// 调用手动触发站点审计API
|
||||
const response = await auditSite()
|
||||
console.log("触发站点审计结果",response)
|
||||
|
||||
if (response && response.data) {
|
||||
ElMessage.success('重新检查完成')
|
||||
// 重新获取列表数据
|
||||
needsStatsUpdate.value = true // 重新检查后需要更新统计
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.warning('重新检查请求已发送，请稍后查看结果')
|
||||
// 延迟刷新数据
|
||||
setTimeout(() => {
|
||||
needsStatsUpdate.value = true
|
||||
getList()
|
||||
}, 2000)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('重新检查失败:', error)
|
||||
ElMessage.error('重新检查失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 标记违规
|
||||
const handleMarkViolation = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要将站点 "${row.domain}" 标记为违规吗？`,
|
||||
'标记违规',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
// 这里可能需要调用特定的API来标记违规
|
||||
// 由于audit.js中没有专门的标记违规接口，我们可能需要：
|
||||
// 1. 触发审计检查
|
||||
// 2. 或者通过其他方式更新状态
|
||||
|
||||
// 临时方案：触发审计检查
|
||||
await auditSite()
|
||||
|
||||
ElMessage.success('已提交违规标记请求')
|
||||
|
||||
// 延迟刷新数据以获取最新状态
|
||||
setTimeout(() => {
|
||||
needsStatsUpdate.value = true
|
||||
getList()
|
||||
}, 1500)
|
||||
|
||||
} catch (error) {
|
||||
console.error('标记违规失败:', error)
|
||||
ElMessage.error('标记违规失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 标记正常（移除违规标记）
|
||||
const handleMarkNormal = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要将站点 "${row.domain}" 标记为正常吗？这将移除其违规标记。`,
|
||||
'标记正常',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success'
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
// 使用删除违规审计接口来移除违规标记
|
||||
const deleteData = {
|
||||
web_key: row.domain // 使用域名作为站点标识
|
||||
}
|
||||
|
||||
const response = await delAudit(deleteData)
|
||||
console.log("删除违规审计结果",response)
|
||||
if (response && response.data) {
|
||||
ElMessage.success('已标记为正常站点')
|
||||
needsStatsUpdate.value = true
|
||||
getList() // 刷新列表
|
||||
} else {
|
||||
ElMessage.warning('标记请求已发送，请稍后查看结果')
|
||||
setTimeout(() => {
|
||||
needsStatsUpdate.value = true
|
||||
getList()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('标记正常失败:', error)
|
||||
ElMessage.error('标记正常失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.all-sites-container {
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 120px);
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 页面标题样式 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.page-header .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-header .title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.page-header .actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
margin-right: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.total-card .stat-icon {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.normal-card .stat-icon {
|
||||
background-color: rgba(103, 194, 58, 0.1);
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.warning-card .stat-icon {
|
||||
background-color: rgba(230, 162, 60, 0.1);
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.violation-card .stat-icon {
|
||||
background-color: rgba(245, 108, 108, 0.1);
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 筛选容器 */
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.pagination {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 站点详情 */
|
||||
.site-detail {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.detail-section h4 {
|
||||
margin-bottom: 12px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 对话框底部 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (max-width: 1200px) {
|
||||
.stats-panel {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header .actions {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user