fix:添加审计和全局

src/components/layout/Breadcrumb.vue

@@ -37,13 +37,18 @@ const iconMap = {
   'tags': 'List',
   'statistics': 'PieChart',
   'visits': 'DataAnalysis',
-  'performance': 'DataAnalysis'
+  'performance': 'DataAnalysis',
+  'servers': 'Setting',
+  'server': 'Setting',
+  'vm': 'Setting',
+  'container': 'Setting'
 }
 
 // 生成面包屑数据
 const breadcrumbs = computed(() => {
   // 当前路由的完整路径
   const currentPath = route.path
+  const currentQuery = route.query
   
   // 按照路径层级生成面包屑
   const pathSegments = currentPath.split('/').filter(segment => segment !== '')
@@ -56,7 +61,90 @@ const breadcrumbs = computed(() => {
     icon: 'HomeFilled'
   })
   
-  // 构建剩余的面包屑
+  // 特殊处理服务器相关页面
+  if (currentPath.includes('/servers/')) {
+    // 处理服务器详情页面
+    if (currentPath === '/servers/server') {
+      // 构建完整的路径，包含查询参数，用于面包屑导航
+      const fullPath = currentQuery.server_id ? 
+        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        currentPath
+      
+      result.push({
+        path: fullPath,
+        title: '服务器详情',
+        icon: 'Setting'
+      })
+    } else if (currentPath === '/servers/vm') {
+      const fullPath = currentQuery.server_id ? 
+        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        currentPath
+      
+      result.push({
+        path: fullPath,
+        title: '虚拟机详情',
+        icon: 'Setting'
+      })
+    } else if (currentPath === '/servers/container') {
+      const fullPath = currentQuery.server_id ? 
+        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        currentPath
+      
+      result.push({
+        path: fullPath,
+        title: '容器详情', 
+        icon: 'Setting'
+      })
+    } else if (currentPath === '/servers/container/console') {
+      // 添加容器详情面包屑
+      const containerPath = currentQuery.server_id ? 
+        `/servers/container?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        '/servers/container'
+      
+      result.push({
+        path: containerPath,
+        title: '容器详情',
+        icon: 'Setting'
+      })
+      
+      // 添加当前页面面包屑
+      const consolePath = currentQuery.server_id ? 
+        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        currentPath
+      
+      result.push({
+        path: consolePath,
+        title: '终端容器',
+        icon: 'Setting'
+      })
+    } else if (currentPath === '/servers/container/files') {
+      // 添加容器详情面包屑
+      const containerPath = currentQuery.server_id ? 
+        `/servers/container?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        '/servers/container'
+      
+      result.push({
+        path: containerPath,
+        title: '容器详情',
+        icon: 'Setting'
+      })
+      
+      // 添加当前页面面包屑
+      const filesPath = currentQuery.server_id ? 
+        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
+        currentPath
+      
+      result.push({
+        path: filesPath,
+        title: '容器文件管理',
+        icon: 'Setting'
+      })
+    }
+    
+    return result
+  }
+  
+  // 构建剩余的面包屑（非服务器页面的常规处理）
   let currentPathBuilder = ''
   
   for (let i = 0; i < pathSegments.length; i++) {
@@ -73,6 +161,7 @@ const breadcrumbs = computed(() => {
         title: matchedRoute.meta.title,
         icon: segmentIcon
       })
+
     } else if (segment) {
       // 如果没有匹配的路由，但有路径段，也添加到面包屑
       result.push({

src/config/menus.js

@@ -45,5 +45,20 @@ export const menus = [
       // { path: '/system/operation-log', title: '操作日志' },
       { path: '/system/domain-whitelist', title: '域名白名单' }
     ]
+  },{
+    path: '/audit',
+    title: '站点审计',
+    icon: 'Monitor',
+    children: [
+      { path: '/audit/all', title: '所有站点' },
+      { path: '/audit/violation', title: '违规站点' }
+    ]
+  },{
+    path:'/setting',
+    title:'全局设置管理',
+    icon:'Setting',
+    children:[
+      {path:'/setting/global',title:'全局设置'}
+    ]
   }
 ]

src/router/index.js

@@ -41,6 +41,7 @@ const routes = [
         },
         component: () => import('../views/ticket/TicketChat.vue'),
       },
+      
       // ACS管理路由
       {
         path: 'acs',
@@ -139,22 +140,23 @@ const routes = [
           title: '系统管理',
           icon: 'Setting'
         },
-        redirect: '/system/users',
+        redirect: '/system/domain-whitelist',
         children: [
-          {
+          // 注释掉的用户管理和操作日志路由，与菜单配置保持一致
-            path: 'users',
+          // {
-            name: 'Users',
+          //   path: 'users',
-            component: () => import('../views/system/Users.vue'),
+          //   name: 'Users',
-            meta: {
+          //   component: () => import('../views/system/Users.vue'),
-              title: '用户管理'
+          //   meta: {
-            }
+          //     title: '用户管理'
-          },
+          //   }
-          {
+          // },
-            path: 'operation-log',
+          // {
-            name: 'OperationLog',
+          //   path: 'operation-log',
-            component: OperationLog,
+          //   name: 'OperationLog',
-            meta: { title: '操作日志' }
+          //   component: OperationLog,
-          },
+          //   meta: { title: '操作日志' }
+          // },
           {
             path: 'domain-whitelist',
             name: 'DomainWhitelist',
@@ -163,6 +165,54 @@ const routes = [
           }
         ]
       },
+      // 站点审计路由
+      {
+        path: 'audit',
+        name: 'Audit',
+        meta: {
+          title: '站点审计',
+          icon: 'Monitor'
+        },
+        redirect: '/audit/all',
+        children: [
+          {
+            path: 'all',
+            name: 'AuditAll',
+            component: () => import('../views/audit/AllSites.vue'),
+            meta: {
+              title: '所有站点'
+            }
+          },
+          {
+            path: 'violation',
+            name: 'AuditViolation',
+            component: () => import('../views/audit/ViolationSites.vue'),
+            meta: {
+              title: '违规站点'
+            }
+          }
+        ]
+      },
+      // 全局设置管理路由
+      {
+        path: 'setting',
+        name: 'Setting',
+        meta: {
+          title: '全局设置管理',
+          icon: 'Setting'
+        },
+        redirect: '/setting/global',
+        children: [
+          {
+            path: 'global',
+            name: 'GlobalSetting',
+            component: () => import('../views/setting/GlobalSetting.vue'),
+            meta: {
+              title: '全局设置'
+            }
+          }
+        ]
+      },
       // 个人中心路由
       {
         path: 'profile',

src/utils/acs/audit.js

@@ -3,13 +3,13 @@ import {http2} from "@/utils/request.js";
 
 /**获取所有站点 */
 export const getSiteList = (data) => {
-  return http2.get(`/v1/admin/audit/list?page=${data.page}&count=${data.count}&key=${data.key}`)
+  return http2.get(`/v1/admin/audit/list?page=${data.page}&server_id=${data.server_id}&user_id=${data.user_id}&count=${data.count}&key=${data.key}`)
 }
 /**手动触发站点审计 */
 export const auditSite = () => {
   return http2.get(`/v1/admin/audit/start`)
 }
-/**删除违规网页审计 */
+/**删除违规网页审计 传入参数： web_key  站点名*/
 export const delAudit = (data) => {
   return http2.post(`/v1/admin/audit/delete`,data,{
     headers: {

src/utils/acs/server.js

@@ -410,6 +410,10 @@ export const getRealDisk = data => {
 export const getTraffic = data => {
   return http2.get(`/v1/admin/server/get_server_bandwidth?server_id=${data}`);
 };
+/**获取服务器总流量信息 */
+export const getTotalTraffic = data => {
+  return http2.get(`/v1/admin/server/get_server_total_bandwidth?server_id=${data}`);
+};
 /**获取版本更新 */
 export const getVersion = () => {
   return http2.get(`/v1/admin/version`);

src/utils/request.js

@@ -72,7 +72,7 @@ class Request {
                 //             break
                 //     }
                 // }
-                return error.response.data
+                return error.response
             }
         )
     }

src/views/acs/images/ContainerImages.vue

@@ -181,7 +181,7 @@
     <el-dialog
       v-model="formDialogVisible"
       :title="editOr ? '编辑镜像' : '上传镜像'"
-      width="60%"
+      width="45%"
       :before-close="handleDialogClose"
     >
       <el-form :model="form" label-width="120px" :rules="rules" ref="imageFormRef">
@@ -195,12 +195,18 @@
         <el-form-item label="展示名称" prop="show_name">
           <el-input v-model="form.show_name" placeholder="请输入展示名称" />
         </el-form-item>
-        <el-form-item label="分类ID" prop="class_id">
+        <el-form-item label="分类" prop="image_class_id" v-if="editOr == true">
+          <el-select v-model="form.image_class_id" placeholder="请选择分类">
+              <el-option v-for="item in options" :key="item.class_id" :label="item.name" :value="item.class_id">
+              </el-option>
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="分类ID" prop="class_id">
           <el-input v-model="form.class_id" placeholder="请输入分类ID" />
         </el-form-item>
         <el-form-item label="分类名称" prop="class_name">
           <el-input v-model="form.class_name" placeholder="请输入分类名称" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="图标">
           <div class="image-icon-upload">
             <img v-if="form.image_ico" :src="mainUrl + form.image_ico" class="preview-icon" />
@@ -391,7 +397,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getServer } from '@/utils/acs/server'
 import { 
   getMirrorList, uploadMirror, editMirror, delMirror, 
-  syncMirror, getUserMirrorList, pullMirror
+  syncMirror, getUserMirrorList, pullMirror, getImageTypeList
 } from '@/utils/acs/mirror'
 import { uploadFile, getFileList } from '@/utils/acs/message'
 // import { message } from '@/utils/acs/message'
@@ -410,6 +416,7 @@ const resetSearch = () => {
   searchForm.name = ''
   handleSearch()
 }
+const options = ref([])
 
 // 表格数据
 const loading = ref(false)
@@ -710,6 +717,20 @@ const addnet = (data) => {
 const delProt = (index) => {
   prot_data.value.splice(index, 1)
 }
+// 获取镜像分类列表
+const fetchCategoryList = async (serverId) => {
+  try {
+    const response = await getImageTypeList(serverId)
+    if (response.data.code === 200) {
+      options.value = response.data.data || []
+    } else {
+      ElMessage.error('获取镜像分类失败：' + response.data.message)
+    }
+  } catch (error) {
+    console.error('获取镜像分类出错：', error)
+    ElMessage.error('获取镜像分类列表失败')
+  }
+}
 
 // 编辑镜像
 const handleEdit = async (data) => {
@@ -722,6 +743,8 @@ const handleEdit = async (data) => {
           id: item.plan_id,
         }
       })
+      await fetchCategoryList(data.server_id)
+      
     } else {
       planlist.value = []
     }
@@ -904,6 +927,7 @@ const uploadImage = async () => {
     return acc
   }, {})
   form.env = JSON.stringify(env)
+  form.class_id = form.image_class_id
   
   if (editOr.value == true) {
     let res = await editMirror(form)

src/views/acs/images/VmImages.vue

@@ -143,13 +143,13 @@
         <el-form-item label="镜像名称" prop="name">
           <el-input v-model="imageForm.name" placeholder="请输入镜像名称" />
         </el-form-item>
-        <el-form-item label="文件路径" prop="path" v-if="!editOr">
+        <el-form-item label="文件路径" prop="path" v-if="editOr == true">
           <el-input v-model="imageForm.path" placeholder="请输入镜像文件路径" />
         </el-form-item>
         <el-form-item label="展示名称" prop="show_name">
           <el-input v-model="imageForm.show_name" placeholder="请输入展示名称" />
         </el-form-item>
-        <el-form-item label="分类" prop="class_id" v-if="!editOr">
+        <el-form-item label="分类" prop="class_id" v-if="editOr == true">
           <el-select v-model="imageForm.class_id" placeholder="请选择分类" clearable style="width: 100%">
             <el-option v-for="item in categoryList" :key="item.class_id" :label="item.name" :value="item.class_id" />
           </el-select>

src/views/acs/nodes/VmDetail.vue

@@ -273,46 +273,18 @@
           
           <div class="monitor-charts" v-loading="monitorLoading">
             <el-row :gutter="20">
-              <el-col :span="12">
+              <el-col :span="24">
                 <el-card class="chart-card">
                   <template #header>
                     <div class="card-header">
-                      <span>CPU使用率</span>
+                      <span>实时监控</span>
+                      <div class="monitor-stats">
+                        <span class="stat-item">CPU: {{ latestCpuUsage }}%</span>
+                        <span class="stat-item">内存: {{ latestMemoryUsage }}MB</span>
+                      </div>
                     </div>
                   </template>
-                  <div ref="cpuChart" class="chart"></div>
+                  <div ref="realTimeChart" class="chart"></div>
-                </el-card>
-              </el-col>
-              <el-col :span="12">
-                <el-card class="chart-card">
-                  <template #header>
-                    <div class="card-header">
-                      <span>内存使用率</span>
-                    </div>
-                  </template>
-                  <div ref="memoryChart" class="chart"></div>
-                </el-card>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="margin-top: 20px;">
-              <el-col :span="12">
-                <el-card class="chart-card">
-                  <template #header>
-                    <div class="card-header">
-                      <span>磁盘使用率</span>
-                    </div>
-                  </template>
-                  <div ref="diskChart" class="chart"></div>
-                </el-card>
-              </el-col>
-              <el-col :span="12">
-                <el-card class="chart-card">
-                  <template #header>
-                    <div class="card-header">
-                      <span>网络流量</span>
-                    </div>
-                  </template>
-                  <div ref="networkChart" class="chart"></div>
                 </el-card>
               </el-col>
             </el-row>
@@ -804,7 +776,8 @@ import {
   openInstance,
   pauseInstance,
   unpauseInstance,
-  deleteInstance
+  deleteInstance,
+  getInstanceStatus
 } from '@/utils/acs/server';
 import { 
   Mirrorinfo,
@@ -867,14 +840,12 @@ const monitorDateRange = ref([
   new Date(new Date().getTime() - 24 * 60 * 60 * 1000), // 默认24小时前
   new Date() // 当前时间
 ]);
-const cpuChart = ref(null);
+const realTimeChart = ref(null);
-const memoryChart = ref(null);
+let realTimeChartInstance = null;
-const diskChart = ref(null);
+
-const networkChart = ref(null);
+// 最新的监控数据
-let cpuChartInstance = null;
+const latestCpuUsage = ref(0);
-let memoryChartInstance = null;
+const latestMemoryUsage = ref(0);
-let diskChartInstance = null;
-let networkChartInstance = null;
 
 // 日期选择器快捷选项
 const dateRangeShortcuts = [
@@ -1156,6 +1127,13 @@ const fetchDataVolumesList = async () => {
     volumesLoading.value = false;
   }
 };
+const fetchInstanceStatus = async () => {
+  const res = await getInstanceStatus(route.query.instance_id);
+  console.log("获取虚拟机状态",res)
+  if (res && res.data && res.data.data.data.state === 200) {
+    vmInfo.value.state = res.data.data;
+  }
+};
 
 // 初始化数据
 onMounted(() => {
@@ -1173,6 +1151,7 @@ onMounted(() => {
     fetchNetworkRulesList();
     fetchSnapshotsList();
     fetchDataVolumesList();
+    fetchInstanceStatus();
     
     // 延迟初始化图表，确保DOM已经渲染
     setTimeout(() => {
@@ -1738,148 +1717,152 @@ const getStatusText = (state) => {
 
 // 初始化图表
 const initCharts = () => {
-  if (!cpuChart.value || !memoryChart.value || !diskChart.value || !networkChart.value) return;
+  if (!realTimeChart.value) return;
   
-  // 初始化CPU图表
+  // 初始化实时监控图表
-  cpuChartInstance = echarts.init(cpuChart.value);
+  realTimeChartInstance = echarts.init(realTimeChart.value);
-  const cpuOption = {
+  const realTimeOption = {
-    tooltip: {
+    title: {
-      formatter: '{a} <br/>{b} : {c}%'
+      text: '实时监控数据',
+      left: 'center',
+      textStyle: {
+        fontSize: 16,
+        color: '#303133'
+      }
     },
-    series: [
-      {
-        name: 'CPU',
-        type: 'gauge',
-        detail: { formatter: '{value}%' },
-        data: [{ value: 0, name: '使用率' }],
-        axisLine: {
-          lineStyle: {
-            width: 30,
-            color: [
-              [0.3, '#67C23A'],
-              [0.7, '#E6A23C'],
-              [1, '#F56C6C']
-            ]
-          }
-        }
-      }
-    ]
-  };
-  cpuChartInstance.setOption(cpuOption);
-
-  // 初始化内存图表
-  memoryChartInstance = echarts.init(memoryChart.value);
-  const memoryOption = {
     tooltip: {
-      formatter: '{a} <br/>{b} : {c}%'
+      trigger: 'axis',
-    },
+      formatter: function (params) {
-    series: [
+        let result = params[0].axisValueLabel + '<br/>';
-      {
+        params.forEach(param => {
-        name: '内存',
+          const unit = param.seriesName === 'CPU使用率' ? '%' : 'MB';
-        type: 'gauge',
+          result += `${param.marker}${param.seriesName}: ${param.value}${unit}<br/>`;
-        detail: { formatter: '{value}%' },
+        });
-        data: [{ value: 0, name: '使用率' }],
+        return result;
-        axisLine: {
-          lineStyle: {
-            width: 30,
-            color: [
-              [0.3, '#67C23A'],
-              [0.7, '#E6A23C'],
-              [1, '#F56C6C']
-            ]
       }
-        }
-      }
-    ]
-  };
-  memoryChartInstance.setOption(memoryOption);
-
-  // 初始化磁盘图表
-  diskChartInstance = echarts.init(diskChart.value);
-  const diskOption = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b} : {c} ({d}%)'
     },
     legend: {
-      orient: 'vertical',
+      data: ['CPU使用率', '内存使用量'],
-      left: 'left',
+      top: '10%'
-      data: ['已使用', '可用']
     },
-    series: [
+    grid: {
-      {
+      left: '3%',
-        name: '磁盘空间',
+      right: '4%',
-        type: 'pie',
+      bottom: '3%',
-        radius: '55%',
+      containLabel: true
-        center: ['50%', '60%'],
-        data: [
-          { value: 0, name: '已使用' },
-          { value: 100, name: '可用' }
-        ],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  };
-  diskChartInstance.setOption(diskOption);
-
-  // 初始化网络流量图表
-  networkChartInstance = echarts.init(networkChart.value);
-  const networkOption = {
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      data: ['上传', '下载']
     },
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: Array(10).fill('').map((_, i) => `${i}`)
+      data: []
     },
-    yAxis: {
+    yAxis: [
+      {
         type: 'value',
+        name: 'CPU使用率(%)',
+        position: 'left',
         axisLabel: {
-        formatter: '{value} MB/s'
+          formatter: '{value}%'
         }
       },
+      {
+        type: 'value',
+        name: '内存使用量(MB)',
+        position: 'right',
+        axisLabel: {
+          formatter: '{value}MB'
+        }
+      }
+    ],
     series: [
       {
-        name: '上传',
+        name: 'CPU使用率',
         type: 'line',
-        data: Array(10).fill(0),
+        yAxisIndex: 0,
-        areaStyle: {}
+        data: [],
+        smooth: true,
+        lineStyle: {
+          color: '#409EFF'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: 'rgba(64, 158, 255, 0.3)'
+            }, {
+              offset: 1, color: 'rgba(64, 158, 255, 0.1)'
+            }]
+          }
+        }
       },
       {
-        name: '下载',
+        name: '内存使用量',
         type: 'line',
-        data: Array(10).fill(0),
+        yAxisIndex: 1,
-        areaStyle: {}
+        data: [],
+        smooth: true,
+        lineStyle: {
+          color: '#67C23A'
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: 'rgba(103, 194, 58, 0.3)'
+            }, {
+              offset: 1, color: 'rgba(103, 194, 58, 0.1)'
+            }]
+          }
+        }
       }
     ]
   };
-  networkChartInstance.setOption(networkOption);
+  realTimeChartInstance.setOption(realTimeOption);
 };
 
+
+const formatDateTime = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  };
+  
+
+
+
+
 // 获取监控数据
 const fetchMonitorData = async () => {
   if (!monitorDateRange.value || !monitorDateRange.value[0] || !monitorDateRange.value[1]) return;
   
   monitorLoading.value = true;
   try {
-    const startTime = Math.floor(monitorDateRange.value[0].getTime() / 1000);
+    // 将日期转换为 YYYY-MM-DD HH:MM:ss 格式
-    const endTime = Math.floor(monitorDateRange.value[1].getTime() / 1000);
+  
+    
+    const startTime = formatDateTime(monitorDateRange.value[0]);
+    const endTime = formatDateTime(monitorDateRange.value[1]);
+    
+    console.log('监控数据时间范围:', startTime, 'to', endTime);
     
     const res = await getVirtualLog({
       id: route.query.instance_id,
       start_time: startTime,
       end_time: endTime
     });
+    console.log("获取监控数据",res)
     
     if (res && res.data && res.data.code === 200) {
       const monitorData = res.data.data;
@@ -1899,78 +1882,45 @@ const fetchMonitorData = async () => {
 
 // 更新图表数据
 const updateCharts = (data) => {
-  if (!data) return;
+  if (!data || !Array.isArray(data) || data.length === 0) return;
   
-  // 更新CPU图表
+  if (!realTimeChartInstance) return;
-  if (cpuChartInstance && data.cpu) {
-    const cpuUsage = data.cpu.current || 0;
-    cpuChartInstance.setOption({
-      series: [
-        {
-          data: [{ value: parseFloat(cpuUsage).toFixed(2), name: '使用率' }]
-        }
-      ]
-    });
-  }
   
-  // 更新内存图表
+  // 处理时间轴数据
-  if (memoryChartInstance && data.memory) {
+  const timeLabels = data.map(item => {
-    const memoryUsage = data.memory.usage_percent || 0;
+    const date = new Date(item.time);
-    memoryChartInstance.setOption({
+    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
-      series: [
-        {
-          data: [{ value: parseFloat(memoryUsage).toFixed(2), name: '使用率' }]
-        }
-      ]
-    });
-  }
-  
-  // 更新磁盘图表
-  if (diskChartInstance && data.disk) {
-    const used = data.disk.used || 0;
-    const available = data.disk.available || 100;
-    const total = used + available;
-    const usedPercent = (used / total) * 100;
-    const availablePercent = 100 - usedPercent;
-    
-    diskChartInstance.setOption({
-      series: [
-        {
-          data: [
-            { value: usedPercent.toFixed(2), name: '已使用' },
-            { value: availablePercent.toFixed(2), name: '可用' }
-          ]
-        }
-      ]
-    });
-  }
-  
-  // 更新网络流量图表
-  if (networkChartInstance && data.network) {
-    const timestamps = data.network.timestamps || [];
-    const upload = data.network.upload || [];
-    const download = data.network.download || [];
-    
-    // 格式化时间戳
-    const formattedTimes = timestamps.map(ts => {
-      const date = new Date(ts * 1000);
-      return `${date.getHours()}:${date.getMinutes()}`;
   });
   
-    networkChartInstance.setOption({
+  // 处理CPU数据
+  const cpuData = data.map(item => parseFloat(item.cpu_usage || 0).toFixed(2));
+  
+  // 处理内存数据
+  const memoryData = data.map(item => parseInt(item.memory_usage || 0));
+  
+  // 更新最新数据显示
+  if (data.length > 0) {
+    const latestData = data[data.length - 1];
+    latestCpuUsage.value = parseFloat(latestData.cpu_usage || 0).toFixed(2);
+    latestMemoryUsage.value = parseInt(latestData.memory_usage || 0);
+  }
+  
+  // 更新图表
+  realTimeChartInstance.setOption({
     xAxis: {
-        data: formattedTimes
+      data: timeLabels
     },
     series: [
       {
-          data: upload
+        name: 'CPU使用率',
+        data: cpuData
       },
       {
-          data: download
+        name: '内存使用量',
+        data: memoryData
       }
     ]
   });
-  }
 };
 
 // 处理日期范围变化
@@ -2276,10 +2226,7 @@ const submitEditVolume = async () => {
 
 // 调整图表大小
 const resizeCharts = () => {
-  cpuChartInstance && cpuChartInstance.resize();
+  realTimeChartInstance && realTimeChartInstance.resize();
-  memoryChartInstance && memoryChartInstance.resize();
-  diskChartInstance && diskChartInstance.resize();
-  networkChartInstance && networkChartInstance.resize();
 };
 
 // 监听窗口大小变化
@@ -2291,10 +2238,7 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', resizeCharts);
   
   // 销毁图表实例
-  cpuChartInstance && cpuChartInstance.dispose();
+  realTimeChartInstance && realTimeChartInstance.dispose();
-  memoryChartInstance && memoryChartInstance.dispose();
-  diskChartInstance && diskChartInstance.dispose();
-  networkChartInstance && networkChartInstance.dispose();
 });
 
 // 获取服务器列表
@@ -2556,6 +2500,21 @@ const fetchServersList = async () => {
   align-items: center;
 }
 
+.monitor-stats {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.stat-item {
+  padding: 4px 12px;
+  background-color: #f0f2f5;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #606266;
+}
+
 .chart {
   height: 300px;
 }

src/views/audit/AllSites.vue

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

src/views/setting/GlobalSetting.vue

@@ -0,0 +1,474 @@
+<template>
+  <div class="global-setting-container">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="left">
+        <h2 class="title">全局设置</h2>
+        <el-tag type="info" effect="plain" class="info-tag">系统全局配置管理</el-tag>
+      </div>
+      <div class="actions">
+        <el-button type="primary" @click="handleAdd" :icon="Plus" class="action-btn">
+          新增设置
+        </el-button>
+        <el-button type="success" @click="handleRefresh" :icon="Refresh" class="action-btn">
+          刷新
+        </el-button>
+      </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.name" placeholder="请输入设置名称" clearable />
+        </el-form-item>
+        <el-form-item label="权限">
+          <el-select v-model="queryParams.authority" placeholder="请选择权限" clearable>
+            <el-option label="全部" value="" />
+            <el-option label="公有" value="0" />
+            <el-option label="私有" value="1" />
+          </el-select>
+        </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="settingsList"
+        style="width: 100%"
+        border
+        stripe
+      >
+        <el-table-column prop="setting_id" label="ID" width="80" />
+        <el-table-column prop="name" label="Name值" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="value" label="Value值" min-width="150" show-overflow-tooltip />
+        <el-table-column label="权限" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getAuthorityType(row.authority)" size="small">
+              {{ getAuthorityText(row.authority) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="notes" label="备注" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="created_at" label="创建时间" width="180" />
+        <el-table-column label="操作" width="200" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="action-buttons">
+              <el-tooltip content="编辑" placement="top">
+                <el-button type="primary" :icon="Edit" circle size="small" @click="handleEdit(row)" />
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top">
+                <el-button type="danger" :icon="Delete" circle size="small" @click="handleDelete(row)" />
+              </el-tooltip>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+     
+    </el-card>
+
+    <!-- 新增/编辑设置对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增设置' : '编辑设置'"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        ref="settingFormRef"
+        :model="settingForm"
+        :rules="settingRules"
+        label-width="120px"
+      >
+        <el-form-item label="设置名称" prop="name">
+          <el-input v-model="settingForm.name" placeholder="请输入设置名称" />
+        </el-form-item>
+        <el-form-item label="设置值" prop="value">
+          <el-input v-model="settingForm.value" placeholder="请输入设置值" />
+        </el-form-item>
+        <el-form-item label="默认值" prop="default_value">
+          <el-input v-model="settingForm.default_value" placeholder="请输入默认值" />
+        </el-form-item>
+        <el-form-item label="权限" prop="authority">
+          <el-radio-group v-model="settingForm.authority">
+            <el-radio :value="0">公有</el-radio>
+            <el-radio :value="1">私有</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="notes">
+          <el-input 
+            v-model="settingForm.notes" 
+            type="textarea" 
+            :rows="3"
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm" :loading="submitting">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import { 
+  Plus, Refresh, Search, Delete, Edit
+} from '@element-plus/icons-vue'
+import {
+    getSetting,
+    updateSetting,
+    addSetting, 
+    deleteSetting, 
+    getOneSetting, 
+    getSettings
+} from '@/utils/acs/setting'
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  authority: '',
+  pageNum: 1,
+  pageSize: 10
+})
+
+// 数据加载状态
+const loading = ref(false)
+const submitting = ref(false)
+
+
+
+// 设置列表数据
+const settingsList = ref([])
+
+// 对话框相关
+const dialogVisible = ref(false)
+const dialogType = ref('add') // 'add' | 'edit'
+const settingFormRef = ref(null)
+
+// 表单数据
+const settingForm = reactive({
+  setting_id: null,
+  name: '',
+  value: '',
+  default_value: '',
+  authority: 0,
+  notes: ''
+})
+
+// 表单验证规则
+const settingRules = {
+  name: [
+    { required: true, message: '请输入设置名称', trigger: 'blur' }
+  ],
+  value: [
+    { required: true, message: '请输入设置值', trigger: 'blur' }
+  ],
+  default_value: [
+    { required: true, message: '请输入默认值', trigger: 'blur' }
+  ],
+  authority: [
+    { required: true, message: '请选择权限', trigger: 'change' }
+  ]
+}
+
+// 获取设置列表
+const getList = async () => {
+  loading.value = true
+  try {
+    // const params = {
+    //   page: queryParams.pageNum,
+    //   count: queryParams.pageSize,
+    //   name: queryParams.name || '',
+    //   authority: queryParams.authority !== '' ? queryParams.authority : undefined
+    // }
+    
+    const response = await getSetting()
+    console.log('获取设置列表结果', response)
+    
+    if (response && response.data) {
+      const apiData = response.data.data || []
+      
+      // 处理API返回的数据
+      settingsList.value = apiData.map(item => ({
+        setting_id: item.setting_id,
+        name: item.name,
+        value: item.value,
+        default_value: item.default_value,
+        authority: item.authority,
+        notes: item.notes || '',
+        created_at: formatTime(item.created_at)
+      }))
+      
+      // pagination.total = response.data.total || response.data.count || settingsList.value.length
+    } else {
+      settingsList.value = []
+      // pagination.total = 0
+    }
+  } catch (error) {
+    console.error('获取设置列表失败:', error)
+    ElMessage.error('获取设置列表失败')
+    settingsList.value = []
+    // pagination.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 格式化时间
+const formatTime = (timeStr) => {
+  if (!timeStr) return '未知时间'
+  
+  try {
+    let dateStr = timeStr
+    if (dateStr.includes('T')) {
+      dateStr = dateStr.replace('T', ' ').substring(0, 19)
+    }
+    if (dateStr.includes('+') || dateStr.includes('Z')) {
+      dateStr = dateStr.substring(0, 19)
+    }
+    return dateStr
+  } catch (error) {
+    return timeStr || '未知时间'
+  }
+}
+
+// 获取权限类型
+const getAuthorityType = (authority) => {
+  return authority === 0 ? 'success' : 'warning'
+}
+
+// 获取权限文本
+const getAuthorityText = (authority) => {
+  return authority === 0 ? '公有' : '私有'
+}
+
+
+
+
+
+
+
+
+
+// 刷新
+const handleRefresh = () => {
+  ElNotification({
+    title: '刷新中',
+    message: '正在重新获取设置数据',
+    type: 'info',
+    duration: 2000
+  })
+  getList()
+}
+
+// 新增设置
+const handleAdd = () => {
+  dialogType.value = 'add'
+  resetForm()
+  dialogVisible.value = true
+}
+
+// 编辑设置
+const handleEdit = (row) => {
+  dialogType.value = 'edit'
+  settingForm.setting_id = row.setting_id
+  settingForm.name = row.name
+  settingForm.value = row.value
+  settingForm.default_value = row.default_value
+  settingForm.authority = row.authority
+  settingForm.notes = row.notes
+  dialogVisible.value = true
+}
+
+// 删除设置
+const handleDelete = (row) => {
+  ElMessageBox.confirm(
+    `确定要删除设置 "${row.name}" 吗？`,
+    '删除确认',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  ).then(async () => {
+    try {
+      const response = await deleteSetting({ setting_id: row.setting_id })
+      console.log('删除设置结果', response)
+      
+      if (response && response.data) {
+        ElMessage.success('删除成功')
+        getList()
+      } else {
+        ElMessage.error('删除失败')
+      }
+    } catch (error) {
+      console.error('删除设置失败:', error)
+      ElMessage.error('删除设置失败')
+    }
+  }).catch(() => {})
+}
+
+// 重置表单
+const resetForm = () => {
+  settingForm.setting_id = null
+  settingForm.name = ''
+  settingForm.value = ''
+  settingForm.default_value = ''
+  settingForm.authority = 0
+  settingForm.notes = ''
+  
+  if (settingFormRef.value) {
+    settingFormRef.value.clearValidate()
+  }
+}
+
+// 提交表单
+const submitForm = async () => {
+  if (!settingFormRef.value) return
+  
+  try {
+    await settingFormRef.value.validate()
+    
+    submitting.value = true
+    
+    const formData = {
+      name: settingForm.name,
+      value: settingForm.value,
+      default_value: settingForm.default_value,
+      authority: settingForm.authority,
+      notes: settingForm.notes
+    }
+    
+    let response
+    if (dialogType.value === 'add') {
+      response = await addSetting(formData)
+      console.log('新增设置结果', response)
+    } else {
+      formData.setting_id = settingForm.setting_id
+      response = await updateSetting(formData)
+      console.log('更新设置结果', response)
+    }
+    
+    if (response && response.data) {
+      ElMessage.success(dialogType.value === 'add' ? '新增成功' : '更新成功')
+      dialogVisible.value = false
+      getList()
+    } else {
+      ElMessage.error(dialogType.value === 'add' ? '新增失败' : '更新失败')
+    }
+    
+  } catch (error) {
+    console.error('提交表单失败:', error)
+    ElMessage.error('操作失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 初始化
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style scoped>
+.global-setting-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;
+}
+
+.info-tag {
+  font-size: 13px;
+}
+
+.page-header .actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+/* 筛选容器 */
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.search-form {
+  margin-bottom: 0;
+}
+
+/* 表格容器 */
+.table-container {
+  margin-bottom: 20px;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+
+
+/* 对话框底部 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 响应式设计 */
+@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;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+</style>

vite.config.js

@@ -13,6 +13,7 @@ export default defineConfig({
   optimizeDeps: {
     include: ['monaco-editor']
   },
+  
   build: {
     rollupOptions: {
       output: {