优化表格和数据集成页面

.gitignore

@@ -6,7 +6,8 @@ bin-release/
 
 # Other files and folders
 .settings/
-
+.history/
+.vscode/
 # Executables
 *.swf
 *.air

public/index.html

@@ -42,7 +42,7 @@
       margin: -75px 0 0 -75px;
       border-radius: 50%;
       border: 3px solid transparent;
-      border-top-color: #FFF;
+      border-top-color: #FFFFFF;
       -webkit-animation: spin 2s linear infinite;
       -ms-animation: spin 2s linear infinite;
       -moz-animation: spin 2s linear infinite;
@@ -60,7 +60,7 @@
       bottom: 5px;
       border-radius: 50%;
       border: 3px solid transparent;
-      border-top-color: #FFF;
+      border-top-color: #FFFFFF;
       -webkit-animation: spin 3s linear infinite;
       -moz-animation: spin 3s linear infinite;
       -o-animation: spin 3s linear infinite;
@@ -77,7 +77,7 @@
       bottom: 15px;
       border-radius: 50%;
       border: 3px solid transparent;
-      border-top-color: #FFF;
+      border-top-color: #FFFFFF;
       -moz-animation: spin 1.5s linear infinite;
       -o-animation: spin 1.5s linear infinite;
       -ms-animation: spin 1.5s linear infinite;
@@ -118,7 +118,7 @@
       top: 0;
       width: 51%;
       height: 100%;
-      background: #7171C6;
+      background: #7bb2ea;
       z-index: 1000;
       -webkit-transform: translateX(0);
       -ms-transform: translateX(0);

src/assets/styles/ruoyi.scss

- /**
+/**
  * 通用css样式布局处理
  * Copyright (c) 2019 ruoyi
  */
@@ -72,29 +72,106 @@
 }
 
 .el-table {
+	// 移除默认边框
+	border: none !important;
+	
+	// 表头样式
 	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
 		th {
 			word-break: break-word;
-			background-color: #f0f7ff; // 浅蓝色表头背景
-			color: #409EFF; // 蓝色表头文字
-			height: 40px;
+			background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%); // 蓝色渐变表头背景，与主题一致
+			color: #FFFFFF; // 白色表头文字
+			height: 45px; // 增加表头高度
 			font-size: 13px;
 			font-weight: 600;
-			border-bottom: 2px solid #409EFF; // 蓝色底部边框
+			border-bottom: 1px solid #e9ecef; // 浅灰色底部边框
+			border-right: 1px solid #e9ecef; // 浅灰色右侧边框
+			padding: 0 12px; // 增加内边距
+		}
+		
+		th:last-child {
+			border-right: none; // 最后一列移除右侧边框
 		}
 	}
+	
+	// 表格主体样式
 	.el-table__body-wrapper {
 		.el-button [class*="el-icon-"] + span {
 			margin-left: 1px;
 		}
+		
+		// 表格单元格样式
+		td {
+			border-bottom: 1px solid #e9ecef; // 浅灰色底部边框
+			border-right: 1px solid #e9ecef; // 浅灰色右侧边框
+			padding: 15px 12px; // 增加内边距
+			font-size: 13px; // 调整字体大小
+			white-space: normal; // 允许文本换行
+			word-break: break-word; // 单词换行
+			min-height: 48px; // 设置最小行高
+		}
+		
+		td:last-child {
+			border-right: none; // 最后一列移除右侧边框
+		}
 	}
 	
 	// 表格行悬停效果
 	.el-table__body tr:hover > td {
-		background-color: #f0f7ff !important; // 浅蓝色悬停背景
+		background-color: #f0f7ff !important; // 浅蓝色悬停背景，与主题一致
+	}
+	
+	// 移除表格底部边框
+	.el-table__footer-wrapper, .el-table__header-wrapper {
+		border-bottom: none !important;
+	}
+	
+	// 移除表格左侧边框
+	.el-table__fixed {
+		box-shadow: none !important;
+	}
+	
+	// 移除表格右侧边框
+	.el-table__fixed-right {
+		box-shadow: none !important;
 	}
 }
 
+/* 表格样式增强 */
+.el-table--fit,
+.el-table--enable-row-hover,
+.el-table--enable-row-transition,
+.el-table--medium {
+  // 移除默认边框和阴影
+  border: none !important;
+  border-radius: 0;
+  box-shadow: none;
+  
+  // 表头样式
+  .el-table__header th {
+    background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%); // 蓝色渐变表头背景，与主题一致
+    color: #FFFFFF; // 白色表头文字
+    font-weight: 600;
+    border-bottom: 1px solid #e9ecef; // 浅灰色底部边框
+    border-right: 1px solid #e9ecef; // 浅灰色右侧边框
+  }
+  
+  // 表格单元格样式
+  .el-table__body td {
+    border-bottom: 1px solid #e9ecef; // 浅灰色底部边框
+    border-right: 1px solid #e9ecef; // 浅灰色右侧边框
+    padding: 15px 12px; // 增加内边距
+    white-space: normal; // 允许文本换行
+    word-break: break-word; // 单词换行
+    min-height: 48px; // 设置最小行高
+  }
+  
+  // 表格行悬停效果
+  .el-table__body tr:hover > td {
+    background-color: #f0f7ff !important; // 浅蓝色悬停背景，与主题一致
+  }
+}
+
 /** 表单布局 **/
 .form-header {
     font-size:15px;
@@ -108,10 +185,12 @@
 /** 表格布局 **/
 .pagination-container {
 	position: relative;
-	height: 25px;
+	height: 60px; // 增加高度
 	margin-bottom: 10px;
 	margin-top: 15px;
-	padding: 10px 20px !important;
+	padding: 15px 20px !important; // 增加内边距
+	background-color: #f8f9fa; // 增加背景色
+	border-top: 1px solid #e9ecef; // 增加顶部边框
 }
 
 /* tree border */
@@ -127,7 +206,16 @@
 	right: 0;
 	position: absolute;
 	
-	// 分页器蓝色主题增强
+	// 分页器样式
+	.el-pager li {
+		border: 1px solid #e9ecef; // 浅灰色边框
+		margin: 0 2px; // 调整间距
+		border-radius: 0; // 移除圆角
+		min-width: 30px; // 调整宽度
+		height: 30px; // 调整高度
+		line-height: 28px; // 调整行高
+	}
+	
 	.el-pager li.active {
 		background-color: #409EFF !important; // 当前页蓝色背景
 		color: #fff !important; // 白色文字
@@ -136,11 +224,30 @@
 	
 	.el-pager li:hover {
 		color: #409EFF; // 悬停蓝色
+		border-color: #409EFF; // 悬停蓝色边框
+	}
+	
+	.btn-prev,
+	.btn-next {
+		border: 1px solid #e9ecef; // 浅灰色边框
+		border-radius: 0; // 移除圆角
+		min-width: 30px; // 调整宽度
+		height: 30px; // 调整高度
+		line-height: 28px; // 调整行高
 	}
 	
 	.btn-prev:hover,
 	.btn-next:hover {
 		color: #409EFF; // 箭头悬停蓝色
+		border-color: #409EFF; // 箭头悬停蓝色边框
+	}
+	
+	.el-pagination__sizes {
+		margin-right: 10px; // 调整间距
+	}
+	
+	.el-pagination__jump {
+		margin-left: 10px; // 调整间距
 	}
 }
 
@@ -175,6 +282,38 @@
 	font-size: 12px;
 }
 
+/** 表格操作按钮样式 */
+.el-table .el-button--text {
+	color: #409EFF; // 蓝色文字
+	font-size: 12px; // 调整字体大小
+	padding: 0 5px; // 调整内边距
+	
+	&:hover {
+		color: #66B1FF; // 浅蓝色悬停
+	}
+}
+
+/** 表格状态标签样式 */
+.status-tag {
+	display: inline-block;
+	padding: 2px 8px;
+	border-radius: 10px;
+	font-size: 12px;
+	font-weight: 500;
+}
+
+.status-tag.pending {
+	background-color: #FFF7E6;
+	color: #E6A23C;
+	border: 1px solid #FFD591;
+}
+
+.status-tag.scheduled {
+	background-color: #F0F9EB;
+	color: #67C23A;
+	border: 1px solid #B3E19D;
+}
+
 .el-tree-node__content > .el-checkbox {
 	margin-right: 8px;
 }
@@ -322,4 +461,4 @@
 .top-right-btn {
 	position: relative;
 	float: right;
-}
+}
\ No newline at end of file

src/components/TopNav/index.vue

@@ -5,10 +5,10 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-        ><svg-icon :icon-class="item.meta.icon" />
-        {{ item.meta.title }}</el-menu-item
-      >
+      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" 
+          v-if="index <visibleNumber"><svg-icon :icon-class="item.meta.icon" />
+        {{ item.meta.title }}
+      </el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
@@ -37,7 +37,7 @@ export default {
   data() {
     return {
       // 顶部栏初始数
-      visibleNumber: 5,
+      visibleNumber: 8,
       // 当前激活菜单的 index
       currentIndex: undefined
     };
@@ -113,7 +113,9 @@ export default {
   methods: {
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
-      const width = document.body.getBoundingClientRect().width / 3;
+      // 优化计算逻辑
+      const width = document.body.getBoundingClientRect().width / 2.4;
+      console.log(width);
       this.visibleNumber = parseInt(width / 85);
     },
     // 菜单选择事件

src/layout/components/Sidebar/Logo.vue

@@ -57,7 +57,8 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  // 使用动态颜色，适配系统整体主题
+  background: v-bind('sideTheme === "theme-dark" ? variables.menuBackground : variables.menuLightBackground');
   text-align: center;
   overflow: hidden;
 
@@ -75,7 +76,8 @@ export default {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      // 使用动态颜色，适配系统整体主题
+      color: v-bind('sideTheme === "theme-dark" ? variables.logoTitleColor : variables.logoLightTitleColor');
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
@@ -90,4 +92,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/views/datax/jobInfo/index.vue

@@ -33,33 +33,31 @@
       <el-table-column label="任务名称" align="center">
         <template slot-scope="scope">{{ scope.row.jobDesc }}</template>
       </el-table-column>
-      <el-table-column label="所属项目" align="center" width="120">
-        <template slot-scope="scope">{{ scope.row.projectName }}</template>
-      </el-table-column>
+      
       <el-table-column label="Cron" align="center" width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.jobCron }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="路由策略" align="center" width="130">
+      <!-- <el-table-column label="路由策略" align="center" width="130">
         <template slot-scope="scope"> {{ routeStrategies.find(t => t.value === scope.row.executorRouteStrategy).label }}</template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" width="150">
+      </el-table-column> -->
+      <el-table-column label="状态" align="center" width="100">
         <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.triggerStatus"
-            active-color="#00A854"
-            active-text="启动"
-            :active-value="1"
-            inactive-color="#F04134"
-            inactive-text="停止"
-            :inactive-value="0"
-            @change="changeSwitch(scope.row)"
-            v-hasPermi="['datax:job:startorstop']"
-          />
+          <el-tooltip :content="scope.row.triggerStatus === 1 ? '启动' : '停止'" placement="top">
+            <el-switch
+              v-model="scope.row.triggerStatus"
+              active-color="#00A854"
+              :active-value="1"
+              inactive-color="#909399"
+              :inactive-value="0"
+              @change="changeSwitch(scope.row)"
+              v-hasPermi="['datax:job:startorstop']"
+            />
+          </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column label="注册节点" align="center" width="100">
+      <el-table-column label="注册节点" align="center" width="110">
         <template slot-scope="scope">
           <el-popover
             placement="bottom"
@@ -75,7 +73,7 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="下次触发时间" align="center" width="120">
+      <el-table-column label="下次触发时间" align="center" width="110">
         <template slot-scope="scope">
           <el-popover
             placement="bottom"
@@ -90,10 +88,11 @@
       <el-table-column label="执行状态" align="center" width="80">
         <template slot-scope="scope"> {{ statusList.find(t => t.value === scope.row.lastHandleCode).label }}</template>
       </el-table-column>
-            <el-table-column
+      <el-table-column
               label="操作"
               align="center"
               class-name="small-padding fixed-width"
+              width="200"
             >
             <template slot-scope="scope">
                 <el-button
@@ -547,7 +546,7 @@ export default {
       jobProjectApi.getJobProjectList().then(response => {
         this.jobProjectList = response.data
         // 默认选择第一个项目，再查询
-        this.projectIds = [this.jobProjectList[0].id];
+        this.projectIds = [this.jobProjectList[1].id];
         this.fetchData();
       })
     },

src/views/index/admin/index.vue

+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-text">欢迎使用大数据平台</div>
+    <div class="dashboard-description">这是一个用于管理大数据任务的平台</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index'
+}
+</script>
+
+<style scoped>
+.dashboard-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 20px;
+  text-align: center;
+}
+
+.dashboard-text {
+  font-size: 24px;
+  font-weight: 600;
+  color: #409EFF;
+  margin-bottom: 10px;
+}
+
+.dashboard-description {
+  font-size: 16px;
+  color: #606266;
+}
+</style>