Skip to content

R
ruoshui-ui
提交 42e90655 authored 作者: 吕本才's avatar 吕本才
浏览文件
操作

优化表格和数据集成页面

上级 f2091d07
隐藏空白字符变更
内嵌 并排
正在显示 包含 226 行增加 和 45 行删除
.gitignore
浏览文件 @ 42e90655
......@@ -6,7 +6,8 @@ bin-release/
# Other files and folders
.settings/
.history/
.vscode/
# Executables
*.swf
*.air
......
public/index.html
浏览文件 @ 42e90655
......@@ -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
浏览文件 @ 42e90655
/**
/**
* 通用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
浏览文件 @ 42e90655
......@@ -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
浏览文件 @ 42e90655
......@@ -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
浏览文件 @ 42e90655
......@@ -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
浏览文件 @ 42e90655
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论