pref:修改状态监控页面显示效果

src/views/os-dataDisplay/components/esDataTab.vue

@@ -2,18 +2,12 @@
   <div class="text-left p-4 toolbarStyle">
     <div class="formStyle">
       <el-form inline>
-        <el-form-item>
-          <el-text class="mx-1">目标名称:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="目标名称:">
           <div>
-            <el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" />
+            <el-input placeholder="请输入目标名称:" v-model="searchTargetName" style="width: 180px" />
           </div>
         </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">获取时间:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="获取时间:">
           <el-config-provider :locale="zhCn">
             <el-date-picker
               type="datetimerange"
@@ -28,16 +22,13 @@
             />
           </el-config-provider>
         </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">站点名称:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="站点名称:">
           <el-input placeholder="请输入" v-model="searchStation" style="width: 170.5px" />
         </el-form-item>
         <el-form-item>
           <el-space>
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-            <el-button type="primary" @click="getData">重置表格</el-button>
+            <el-button plain type="primary" @click="handleSearch">查询</el-button>
+            <el-button plain @click="getData">重置表格</el-button>
           </el-space>
         </el-form-item>
       </el-form>
@@ -96,12 +87,14 @@
       </el-table-column>
       <el-table-column fixed="right" label="操作" min-width="85">
         <template #default="scope">
+          <div class="btns">
             <el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)">
               目标信息
             </el-button>
             <el-button link type="primary" size="small" @click="handleStationDetails(scope.row.data.station)"
               >站点信息</el-button
             >
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -125,7 +118,7 @@
           <el-card>
             <div class="title">目标信息：</div>
             <el-divider style="margin: 0"></el-divider>
-            <el-row :gutter="20" style="display: flex; justify-content: space-between">
+            <el-row :gutter="50" style="display: flex; justify-content: space-between">
               <el-col :span="12">
                 <div class="info-item">
                   <span class="item-title">目标名称：</span>
@@ -222,7 +215,7 @@
           <el-card>
             <div class="title">站点信息：</div>
             <el-divider style="margin: 0"></el-divider>
-            <el-row :gutter="20" style="display: flex; justify-content: space-between">
+            <el-row :gutter="50" style="display: flex; justify-content: space-between">
               <el-col :span="12">
                 <div class="info-item">
                   <span class="item-title">站点名称：</span>
@@ -656,6 +649,9 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__label) {
+  color: white;
+}
 // 调整表单项间距
 .detailForm {
   .el-dialog-title {
@@ -711,6 +707,10 @@ onMounted(() => {
 .target-desc {
   color: white;
 }
+
+.btns {
+  display: flex;
+}
 </style>
 
 <style>

src/views/os-dataDisplay/components/ituDataTab.vue

@@ -2,18 +2,12 @@
   <div class="text-left p-4 toolbarStyle">
     <div class="formStyle">
       <el-form inline>
-        <el-form-item>
-          <el-text class="mx-1">目标名称:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="目标名称:">
           <div>
-            <el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" />
+            <el-input placeholder="请输入目标名称" v-model="searchTargetName" style="width: 180px" />
           </div>
         </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">获取时间:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="获取时间:">
           <el-config-provider :locale="zhCn">
             <el-date-picker
               type="datetimerange"
@@ -28,15 +22,12 @@
             />
           </el-config-provider>
         </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">SNS Notice ID:</el-text>
-        </el-form-item>
-        <el-form-item>
-          <el-input placeholder="请输入" v-model="searchTargetId" style="width: 170.5px" />
+        <el-form-item label="SNS Notice ID:">
+          <el-input placeholder="请输入ID" v-model="searchTargetId" style="width: 170.5px" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleSearch">查询</el-button>
-          <el-button type="primary" @click="getData">重置表格</el-button>
+          <el-button plain type="primary" @click="handleSearch">查询</el-button>
+          <el-button plain="" @click="getData">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -369,6 +360,9 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__label) {
+  color: white;
+}
 // 调整表单项间距
 .detailForm {
   // background-image: url("@/assets/picture/dialog1.png");

src/views/os-dataDisplay/components/stDataTab.vue

@@ -2,18 +2,10 @@
   <div class="text-left p-4 toolbarStyle">
     <div class="formStyle">
       <el-form inline>
-        <el-form-item>
-          <el-text class="mx-1">目标名称:</el-text>
-        </el-form-item>
-        <el-form-item>
-          <div>
-            <el-input placeholder="请输入" style="width: 180px" v-model="searchTargetName" />
-          </div>
-        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">获取时间:</el-text>
+        <el-form-item label="目标名称:">
+          <el-input placeholder="请输入目标名称" style="width: 180px" v-model="searchTargetName" />
         </el-form-item>
-        <el-form-item>
+        <el-form-item label="获取时间:">
           <el-config-provider :locale="zhCn">
             <el-date-picker
               v-model="timeValue"
@@ -28,11 +20,8 @@
             />
           </el-config-provider>
         </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">NORAD CAT ID:</el-text>
-        </el-form-item>
-        <el-form-item>
-          <el-input placeholder="请输入" style="width: 170.5px" v-model="noradCatId" />
+        <el-form-item label="NORAD CAT ID:">
+          <el-input placeholder="请输入ID" style="width: 170.5px" v-model="noradCatId" />
         </el-form-item>
         <!-- <el-form-item>
 					<el-space>
@@ -41,8 +30,8 @@
 				</el-form-item> -->
         <el-form-item>
           <el-space>
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-            <el-button type="primary" @click="getData">重置表格</el-button>
+            <el-button plain type="primary" @click="handleSearch">查询</el-button>
+            <el-button plain @click="getData">重置表格</el-button>
           </el-space>
         </el-form-item>
       </el-form>
@@ -100,7 +89,7 @@
           <el-card>
             <div class="title">目标信息：</div>
             <el-divider style="margin: 0"></el-divider>
-            <el-row :gutter="20" style="display: flex;justify-content: space-between;">
+            <el-row :gutter="50" style="display: flex; justify-content: space-between">
               <el-col :span="12">
                 <div class="info-item">
                   <span class="item-title">目标名称：</span>
@@ -316,6 +305,9 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__label) {
+  color: white;
+}
 // 调整表单项间距
 .detailForm {
   .el-dialog-title {

src/views/os-dataDisplay/index.vue

 <template>
   <div>
+    <el-card style="margin-bottom: 0">
+      <div class="title">数据展示</div>
+      <div class="low-titme">Data Display</div>
+      <el-divider class="divider" style="margin-bottom: 0" />
+    </el-card>
     <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
     <div class="segment-content">
       <div class="custom-style flex gap-4">
@@ -76,6 +81,22 @@ onMounted(() => {
   outline: none;
 }
 
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
+
 /* 文字样式 */
 .el-text {
   color: #ffffff;

src/views/os-spiderManager/index.vue

@@ -39,7 +39,6 @@
       />
     </div>
 
-    //编辑弹窗
     <el-dialog style="z-index: 999999" draggable v-model="editDialogVisible" title="指定下载以下卫星" width="400">
       <div class="No-Content" ref="noContentRef">
         <TransitionGroup
@@ -72,7 +71,26 @@
         </div>
         <div class="btn">
           <el-button :disabled="curSateNo == ''" plain type="primary" @click="addNoToList">添加</el-button>
-          <el-button plain type="danger" @click="delNoList">删除</el-button>
+          <el-popconfirm title="确定删除选中编号吗？" width="200">
+            <template #reference>
+              <el-button :disabled="curSelSateNo.length === 0" plain type="danger">删除</el-button>
+            </template>
+            <template #actions="{ confirm, cancel }">
+              <el-button size="small" @click="cancel">取消</el-button>
+              <el-button
+                type="danger"
+                size="small"
+                @click="
+                  () => {
+                    confirm();
+                    delNoList();
+                  }
+                "
+              >
+                确定
+              </el-button>
+            </template>
+          </el-popconfirm>
         </div>
       </div>
     </el-dialog>

src/views/os-status/components/dataCard.vue

@@ -7,19 +7,15 @@
       </div>
       <div class="wordStyle">
         <span>总数据量:</span>
-        <span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(totalDataNumber) }}</span>
       </div>
       <div class="wordStyle">
         <span>采集的页面数量:</span>
-        <span class="total-num">
-          {{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
-        >
+        <span class="total-num"> {{ formatExactLargeNum(totalPageNumber) }}</span>
       </div>
       <div class="wordStyle">
         <span>采集的目标数量:</span>
-        <span class="total-num">
-          {{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
-        >
+        <span class="total-num"> {{ formatExactLargeNum(totalTargetNumber) }}</span>
       </div>
     </div>
     <div class="dataCard" @click="goToTaskRecordPage">
@@ -28,15 +24,15 @@
       </div>
       <div class="wordStyle">
         <span>任务执行成功统计:</span>
-        <span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(successTask) }}</span>
       </div>
       <div class="wordStyle">
         <span>任务执行失败统计:</span>
-        <span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(failTask) }}</span>
       </div>
       <div class="wordStyle">
         <span>任务异常数统计:</span>
-        <span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(unusualTask) }}</span>
       </div>
     </div>
     <div class="dataCard">
@@ -64,6 +60,7 @@ import { useRouter } from "vue-router";
 import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
 import { onMounted, ref } from "vue";
 import formatExactLargeNum from "@/utils/formatExactLargeNum";
+import { ElSkeleton } from "element-plus";
 
 const router = useRouter();
 const totalDataNumber = ref("");
@@ -129,16 +126,21 @@ onMounted(() => {
   border-radius: 5px;
 }
 
+/* 标题区 */
 .titleStyle {
-  font-size: 20px;
-  margin-top: 5%;
-  color: #ffffff;
+  color: #dff6ff;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 10px;
 }
 
 .wordStyle {
   font-size: 18px;
   color: #ffffff;
-  margin-top: 2%;
+  margin-top: 1%;
   display: flex;
   margin-left: 15px;
   display: flex;
@@ -147,16 +149,19 @@ onMounted(() => {
 
 .textStyle {
   writing-mode: vertical-lr;
-  font-size: 26px;
+  font-size: 22px;
   letter-spacing: 3px;
   margin-left: 0.5%;
   color: #ffffff;
   font-weight: 500;
-  // display: flex;
 }
 
 .total-num {
+  color: #4edaff;
+  font-size: 16px;
+  font-weight: 600;
+  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
+  letter-spacing: 1px;
   margin-right: 30px;
-  color: skyblue;
 }
 </style>

src/views/os-status/components/qbDataMonitor.vue

 <template>
-	<div class="flex gap-10">
+  <div class="flex">
     <span class="textStyle">QB数据管理</span>
     <!-- <div class="dataCard" @click="goToAllDataPage">
 			<div class="titleStyle">
@@ -29,80 +29,80 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
+import { useRouter } from "vue-router";
+const router = useRouter();
 
 defineProps({
   totalDataNumber: {
     type: String,
-		default: ''
+    default: "",
   },
   totalPageNumber: {
     type: String,
-		default: ''
+    default: "",
   },
   totalTargetNumber: {
     type: String,
-		default: ''
+    default: "",
   },
   successTask: {
     type: String,
-		default: ''
+    default: "",
   },
   failTask: {
     type: String,
-		default: ''
+    default: "",
   },
   unusualTask: {
     type: String,
-		default: ''
+    default: "",
   },
   speed: {
     type: String,
-		default: ''
+    default: "",
   },
   errorRate: {
     type: String,
-		default: ''
-	}
-})
+    default: "",
+  },
+});
 
 const goToAllDataPage = () => {
   router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
     query: {
-			mode: '综合数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "综合数据",
+      jump: "yes",
+    },
+  });
+};
 const goToDSNDataPage = () => {
   router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
     query: {
-			mode: 'DSN数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "DSN数据",
+      jump: "yes",
+    },
+  });
+};
 const goToITUDataPage = () => {
   router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
     query: {
-			mode: 'ITU数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "ITU数据",
+      jump: "yes",
+    },
+  });
+};
 const goToSTDataPage = () => {
   router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
     query: {
-			mode: 'ST数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "ST数据",
+      jump: "yes",
+    },
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -133,23 +133,24 @@ const goToSTDataPage = () => {
 }
 
 .titleStyle {
-	font-size: 30px;
+  font-size: 24px;
   margin-top: 5%;
-	color: #FFFFFF;
+  color: #ffffff;
 }
 
 .wordStyle {
   font-size: 20px;
-	color: #FFFFFF;
+  color: #ffffff;
   margin-top: 2%;
 }
 
 .textStyle {
   writing-mode: vertical-lr;
-	font-size: 26px;
+  font-size: 22px;
   letter-spacing: 3px;
   margin-left: 0.5%;
-	color: #FFFFFF;
+  color: #ffffff;
+  font-weight: 500;
   // display: flex;
 }
 </style>

src/views/os-status/components/taskCard.vue

 <template>
-  <div class="flex gap-10">
+  <div class="flex">
     <span class="textStyle">任务统计</span>
     <div class="dataCard" @click="goToDSNTaskRecordPage">
       <div class="titleStyle">
@@ -175,15 +175,19 @@ onMounted(() => {
 }
 
 .titleStyle {
-  font-size: 20px;
-  margin-top: 5%;
-  color: #ffffff;
+  color: #dff6ff;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 10px;
 }
 
 .wordStyle {
   font-size: 18px;
   color: #ffffff;
-  margin-top: 2%;
+  margin-top: 1%;
   display: flex;
   margin-left: 15px;
   display: flex;
@@ -192,15 +196,19 @@ onMounted(() => {
 
 .textStyle {
   writing-mode: vertical-lr;
-  font-size: 26px;
+  font-size: 22px;
   letter-spacing: 3px;
   margin-left: 0.5%;
   color: #ffffff;
-  // display: flex;
+  font-weight: 500;
 }
 
 .total-num {
+  color: #4edaff;
+  font-size: 16px;
+  font-weight: 600;
+  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
+  letter-spacing: 1px;
   margin-right: 30px;
-  color: skyblue;
 }
 </style>

src/views/os-status/index.vue

 <template>
   <div>
     <div>
+      <el-card style="margin-bottom: 0">
+        <div class="title">状态监控</div>
+        <div class="low-titme">Status Monitor</div>
+        <el-divider class="divider" style="margin-bottom: 0" />
+      </el-card>
       <div class="text-left timeStyle" />
       <div class="border-100">
         <statusMonitor />
       </div>
     </div>
   </div>
-  
 </template>
 
 <script setup lang="ts">
-import statusMonitor from './components/statusMonitor.vue'
+import statusMonitor from "./components/statusMonitor.vue";
 </script>
 
 <style lang="scss" scoped>
@@ -26,5 +30,18 @@ import statusMonitor from './components/statusMonitor.vue'
   border: 1.5px solid rgb(193, 188, 188);
 }
 
-
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
 </style>

src/views/os-system/index.vue

@@ -19,6 +19,8 @@
         :cell-style="{ textAlign: 'center' }"
         :row-style="{ height: '58px' }"
         @selection-change="handleSelectionChange"
+        v-loading="tableData?.length == 0"
+        element-loading-background="rgba(48, 65, 86, 0.7)"
       >
         <el-table-column type="selection" width="40" />
         <el-table-column property="number" label="序号" width="55" type="index" />
@@ -84,8 +86,8 @@ import { getUserList } from "@/api/user.ts";
 import { DeleteMode } from "@/components/Delete/enum.ts";
 import { AddMode } from "./components/enum.ts";
 import { ElMessage } from "element-plus";
-const userId = ref<any>([]);
-const userIds = ref<any>();
+const userId = ref<number>(-1);
+const userIds = ref<number[]>([]);
 const nickName = ref<string>("");
 const userName = ref<string>("");
 const userRole = ref<number>(0);
@@ -95,7 +97,7 @@ const showDeleteDialog = ref(false);
 const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE);
 const dialogVisible = ref<boolean>(false);
 const mode = ref<AddMode>(AddMode.ADD_MODE);
-const tableData = ref();
+const tableData = ref([]);
 const pageObj = ref({
   total: 0,
   pageSize: 10,
@@ -117,11 +119,10 @@ const handleDelete = async (row: any) => {
   showDeleteDialog.value = true;
   deleteMode.value = DeleteMode.SINGLE_DELETE;
   userId.value = row.id;
-  console.log(userId.value);
 };
 // 批量删除用户的方法
 const handleBatchDelete = async () => {
-  if (userIds.value == undefined) {
+  if (!userIds.value || userIds.value.length === 0) {
     ElMessage({
       message: "请先选择要删除的用户",
       type: "warning",
@@ -153,7 +154,6 @@ const getUserListData = async () => {
   });
   tableData.value = userList.data.list;
   pageObj.value.total = userList.data.total;
-  console.log(userList);
 };
 onMounted(async () => {
   getUserListData();

src/views/os-taskInformation/components/taskCard.vue

@@ -5,10 +5,9 @@
     <div class="text-left p-4 toolbarStyle">
       <div class="formStyle">
         <el-form inline>
-          <el-form-item>
-            <el-text class="mx-1" style="color: #fff">所属爬虫:</el-text>
-          </el-form-item>
-          <el-form-item>
+          <el-row>
+            <el-col :span="16" style="display: flex; padding-left: 40px">
+              <el-form-item label="所属爬虫:">
                 <div>
                   <el-select
                     v-model="searchCondition.spiders"
@@ -25,47 +24,44 @@
                   </el-select>
                 </div>
               </el-form-item>
+            </el-col>
+            <el-col :span="8" style="display: flex; justify-content: end">
               <el-form-item>
-            <el-space>
-              <el-button type="primary" @click="search">查询</el-button>
-              <el-button type="primary" @click="resetData">重置列表</el-button>
-              <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
-            </el-space>
+                <el-button plain type="primary" @click="search">查询</el-button>
+                <el-button @click="resetData" style="margin-right: 20px">重置</el-button>
+                <el-button plain type="primary" @click="openTaskDialog">新建任务</el-button>
               </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
       </div>
     </div>
     <div class="cardStyle">
-      <!-- 加载状态优化：用专门的 loading 变量，避免依赖 taskList 长度 -->
-      <el-row v-loading="isLoading" element-loading-background="rgba(48, 65, 86, 0.7)">
-        <!-- 任务列表为空时显示提示，避免空循环 -->
       <div v-if="taskList.length === 0 && !isLoading" class="empty-tip">暂无任务数据</div>
-        <!-- 循环前确保 taskList 是数组，key 用安全的 id -->
-        <div class="taskCard p-6" v-for="task in taskList || []" :key="task?.id || task?.taskId">
-          <div class="taskContent">
-            <div>
-              <el-form-item class="form-item">
-                <!-- 安全访问 JSON 解析，避免 options 为 undefined 或 JSON 解析失败 -->
-                <span class="titleStyle">{{
-                  (task?.kwargs?.options && JSON.parse(task.kwargs.options).jobName) || "无名称"
-                }}</span>
-              </el-form-item>
+      <div
+        v-loading="taskList.length == 0"
+        element-loading-background="rgba(48, 65, 86, 0.7)"
+        class="taskCard p-6"
+        v-for="task in taskList || []"
+        :key="task?.id || task?.taskId"
+      >
+        <div class="header">
+          <span class="task-name"
+            >任务名称: {{ (task?.kwargs?.options && JSON.parse(task.kwargs.options).jobName) || "无名称" }}</span
+          >
+          <el-divider style="margin-top: 5px"></el-divider>
         </div>
-            <div>
-              <el-form-item class="form-item">
-                <el-button type="primary" @click="editTask(task)" class="editButton" :disabled="!task?.id"
+        <div class="btns">
+          <el-button plain type="primary" @click="editTask(task)" class="editButton" :disabled="!task?.id"
             >编辑</el-button
           >
-                <el-button type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id"
+          <el-button plain type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id"
             >删除</el-button
           >
-              </el-form-item>
         </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
+        <div class="info">
+          <div class="item">
             <span class="wordStyle">启用/停止: </span>
-                  <!-- 确保 task.status 有默认值，避免 v-model 绑定 undefined -->
             <el-switch
               v-model="task.status"
               :active-value="'running'"
@@ -73,41 +69,18 @@
               @change="(newStatus: any) => changeStatus(task, newStatus)"
               :disabled="!task?.id"
             />
-                </el-space>
-              </el-form-item>
           </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
-                  <span class="wordStyle"
-                    >执行频率:
-                    <span style="color: skyblue">{{ parseCronExpression(task?.kwargs?.cron) || "未设置" }} </span>
-                  </span>
-                </el-space>
-              </el-form-item>
+          <div class="item">
+            <span class="wordStyle">执行频率: </span>
+            <span class="wordStyle">{{ parseCronExpression(task?.kwargs?.cron) || "未设置" }} </span>
           </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
-                  <span class="wordStyle"
-                    >执行次数: <span style="color: skyblue">{{ formatExactLargeNum(task?.count || 0) }}</span>
-                  </span>
-                </el-space>
-              </el-form-item>
+          <div class="item">
+            <span class="wordStyle">执行次数: </span>
+            <span class="wordStyle">{{ formatExactLargeNum(task?.count || 0) }}</span>
           </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
-                  <span class="wordStyle"
-                    >所属爬虫: <span style="color: skyblue"> {{ task?.kwargs?.spider || "未知" }}</span></span
-                  >
-                </el-space>
-              </el-form-item>
         </div>
       </div>
     </div>
-      </el-row>
-    </div>
 
     <addTaskDialog
       v-model:dialogVisible="showTaskDialog"
@@ -158,7 +131,6 @@ const searchCondition = ref({
   options: "",
 });
 
-const belongSpider = ref("");
 const taskName = ref("");
 const taskValue = ref("");
 const belongSpiderType = ref("");
@@ -198,16 +170,6 @@ const editTask = (task: any) => {
   showTaskDialog.value = true;
 };
 
-const goToTaskRecord = () => {
-  router.push({
-    path: "/osTaskRecord/list",
-    query: {
-      jump: "yes",
-      mode: "任务信息",
-    },
-  });
-};
-
 // 启动与停止任务的方法
 const changeStatus = async (task: any, newStatus: string) => {
   if (!task?.id) return; // 避免 task 为 undefined
@@ -377,6 +339,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  color: white;
+}
 .cardStyle {
   margin-top: 1.5%;
   padding: 18px;
@@ -390,25 +355,25 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
   height: 100%;
   gap: 6px;
   padding: 5px 0;
 }
 
+.task-name {
+  color: #fff !important;
+}
+
 /* 任务卡片样式 */
 .taskCard {
-  margin-left: 1%;
   background-image: url("@/assets/picture/box2.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  margin-bottom: 10px;
-  width: 380px;
   font-size: 20px;
   min-height: 240px;
+  min-width: 300px;
   border-radius: 7px;
-  display: flex;
-  flex-direction: column;
 }
 
 /* 减小表单的间距 */
@@ -417,10 +382,23 @@ onMounted(() => {
 }
 
 .taskCard .titleStyle {
-  font-size: 22px;
+  display: flex;
+  font-size: 20px;
   color: #ffffff;
 }
 
+.task-name {
+  color: #ccc;
+}
+
+.item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 8px 0;
+}
+
 .taskCard .wordStyle {
   font-size: 16px;
   color: #ffffff;
@@ -442,8 +420,6 @@ onMounted(() => {
 
 /* 表单样式 */
 .formStyle {
-  display: flex;
-  justify-content: space-around;
   margin-top: 0.5%;
   padding: 2px;
 }

src/views/os-taskInformation/index.vue

 <template>
   <div>
+    <el-card style="margin-bottom: 0">
+      <div class="title">任务信息</div>
+      <div class="low-titme">Task Information</div>
+      <el-divider class="divider" style="margin-bottom: 0" />
+    </el-card>
     <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
     <div class="m-t-8" />
     <div>
       <taskCard :spiderType="spiderType" failTask="10" unusualTask="1" />
-      <!-- <div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
-        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
-          @pagination="getData" />
-      </div> -->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import Pagination from '@/components/pagination/index.vue'
-import taskCard from './components/taskCard.vue'
-import { useRouter } from 'vue-router'
-import { useRoute } from 'vue-router'
-import { getSpiderTaskList,getTaskData } from '@/api/spiderTask'
-import { AddMode } from './components/enum'
-
-const route = useRoute()
-const router = useRouter()
-const spiderType = ref<any>(route.query.spiderType)
-const taskValue = ref('')
-const taskList = ref([])
-const taskOptions = [
-  {
-    value: 'task1',
-    label: 'sk网',
-  },
-  {
-    value: 'task2',
-    label: 'nasa网',
-  },
-  {
-    value: 'task3',
-    label: '网',
-  },
-]
-const pageObj = ref({
-  total: 10,
-  pageSize: 10,
-  pageNo: 1
-})
+import { ref } from "vue";
+import taskCard from "./components/taskCard.vue";
+import { useRouter } from "vue-router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+const spiderType = ref<any>(route.query.spiderType);
 
 const goToTaskInformation = () => {
-  if(route.query.page === 'spiderManager'){
-    router.push({ path: '/osSpiderManager/list' })
-  }else{
-    router.push({ path: '/osStatus/list' })
+  if (route.query.page === "spiderManager") {
+    router.push({ path: "/osSpiderManager/list" });
+  } else {
+    router.push({ path: "/osStatus/list" });
   }
-}
-
-onMounted(async () => {  
-  // if(route.query.spiderType){
-  //   spiderType.value = route.query.spiderType
-  // }
-})
+};
 </script>
 
 <style scoped>
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
 /* 返回样式 */
 .backStyle {
   background-image: url("@/assets/picture/back.png");
@@ -85,7 +71,7 @@ onMounted(async () => {
 
 /* 文本样式 */
 .el-text {
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* 工具栏样式 */
@@ -129,7 +115,7 @@ onMounted(async () => {
 
 /* 修改el下拉框选项的字体颜色 */
 .el-select-dropdown__item {
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* 修改el下拉框选项选中时的文字颜色 */

src/views/os-taskRecord/index.vue

 <template>
   <div>
+    <el-card style="margin-bottom: 0">
+      <div class="title">任务执行记录</div>
+      <div class="low-titme">Task Record</div>
+      <el-divider class="divider" style="margin-bottom: 0" />
+    </el-card>
     <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
     <div class="m-t-7" />
-    <div class="text-left p-6 toolbarStyle">
+    <div class="text-left toolbarStyle">
       <div class="formStyle">
+        <div class="form-content">
           <el-form inline>
-          <el-form-item>
-            <el-text class="mx-1">时间:</el-text>
-          </el-form-item>
-          <el-form-item>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="时间:">
                   <el-config-provider :locale="zhCn">
                     <el-date-picker
                       v-model="timeValue"
@@ -22,15 +27,18 @@
                     />
                   </el-config-provider>
                 </el-form-item>
+              </el-col>
+              <el-col :span="12" style="display: flex; justify-content: end">
                 <el-form-item>
-            <el-space>
-              <el-button type="primary" @click="searchData">查询</el-button>
-              <el-button type="primary" @click="getData">重置表格</el-button>
-            </el-space>
+                  <el-button plain type="primary" @click="searchData">查询</el-button>
+                  <el-button plain @click="getData">重置</el-button>
                 </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
         </div>
       </div>
+    </div>
     <div class="m-t-10" />
     <div class="table-content">
       <div>
@@ -97,7 +105,6 @@ zhCn.el.pagination.pagesize = "条/页";
 zhCn.el.pagination.pageClassifier = "页";
 const route = useRoute();
 const router = useRouter();
-const taskValue = ref("");
 const timeValue = ref("");
 const taskOptions = [
   {
@@ -174,6 +181,9 @@ onMounted(() => {
 </script>
 
 <style scoped>
+:deep(.el-form-item__label) {
+  color: white;
+}
 /* 工具栏样式 */
 .toolbarStyle {
   background-image: url("@/assets/picture/box3.png");
@@ -183,8 +193,6 @@ onMounted(() => {
 
 /* 表格样式 */
 .formStyle {
-  display: flex;
-  justify-content: space-around;
   padding: 3px;
 }
 
@@ -197,6 +205,11 @@ onMounted(() => {
   padding: 0 10px;
 }
 
+.form-content {
+  margin-top: 20px;
+  padding-left: 50px;
+}
+
 .backStyle {
   background-image: url("@/assets/picture/back.png");
   background-size: 100% 100%;
@@ -206,6 +219,22 @@ onMounted(() => {
   display: flex;
   margin-left: 0.8%;
 }
+
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
 </style>
 <style>
 /* 修改el选择器的样式 */

src/views/system/SystemIndex.vue

-<template>
-  <h1>system index</h1>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-</script>