center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
wangjiahao 2021-10-09 22:38:27 +08:00
commit 549bf0da53
15 changed files with 174 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/package.json
View File

@ -27,10 +27,11 @@
"file-saver": "^2.0.5",
"fit2cloud-ui": "1.5.0-beta.0",
"html2canvasde": "^v1.1.4-de",
"jquery": "^3.1.1",
"js-cookie": "2.2.0",
"jsencrypt": "^3.0.0-rc.1",
"jspdf": "^2.3.1",
"lodash": "4.17.21",
"lodash": "^4.17.4",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"screenfull": "4.2.0",
@ -51,9 +52,7 @@
"vuedraggable": "^2.24.3",
"vuex": "3.1.0",
"webpack": "^4.46.0",
"xlsx": "^0.17.0",
"lodash": "^4.17.4",
"jquery": "^3.1.1"
"xlsx": "^0.17.0"
},
"devDependencies": {
"@babel/core": "^7.4.0-0",

2
frontend/src/components/dataease/DeAsideContainer.vue
View File

@ -43,7 +43,7 @@ export default {
padding: 10px;
border-radius: 2px;
box-sizing: border-box;
background-color: var(--MainBG);
background-color: var(--SiderBG);
height: calc(100vh - 56px);
border-right: 0px;
position: relative;

2
frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
View File

@ -28,7 +28,7 @@ export default {
right: 0px;
top: 0;
cursor: col-resize;
background-color: var(--MainBorderColor) !important;
background-color: var(--SiderTextColor) !important;
border: 0px;
}

24
frontend/src/layout/components/Sidebar/index.vue
View File

@ -7,7 +7,7 @@
:collapse="isCollapse"
:unique-opened="false"
:collapse-transition="false"
background-color="var(--MainBG)"
mode="vertical"
>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
@ -57,26 +57,4 @@ export default {
<style lang="scss" scoped>
/* .sidebar-container {
>>>li.el-menu-item.is-active {
background-color: var(--active-bg) !important;
}
>>>li.el-submenu.is-active:not(&:hover){
background-color: var(--active-bg) ;
}
>>>li.el-submenu__title {
&:hover {
background-color: var(--left-menu-hovor) !important;
}
}
>>>.el-submenu.is-active .el-submenu__title {
color: var(--theme) !important;
}
.is-active > .el-submenu__title {
color: var(--theme) !important;
}
} */
</style>

4
frontend/src/layout/components/Topbar.vue
View File

@ -22,7 +22,7 @@
</div>
</el-menu>
<div class="right-menu" style="color: var(--TextPrimary)">
<div class="right-menu" style="color: var(--TopTextColor)">
<template>
<notification class="right-menu-item hover-effect" />
@ -35,7 +35,7 @@
</template>
<el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;">
<span class="el-dropdown-link" style="color: var(--TextPrimary);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<span class="el-dropdown-link" style="color: var(--TopTextColor);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
{{ name }}
<i class="el-icon-arrow-down el-icon--right" />
</span>

4
frontend/src/layout/index.vue
View File

@ -80,7 +80,7 @@ export default {
position: relative;
height: 100%;
// height: $contentHeight;
background-color: var(--MainBG);
background-color: var(--MainContentBG);
width: 100%;
&.mobile.openSidebar{
position: fixed;
@ -124,7 +124,7 @@ export default {
height: calc(100vh - 80px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background-color: var(--MainBG) !important;
background-color: var(--SiderBG) !important;
}
}
</style>

62
frontend/src/styles/index.scss
View File

@ -377,36 +377,40 @@ div:focus {
}
.el-table {
background-color: var(--MainBG) !important;
background-color: var(--TableBG) !important;
tr {
background-color: var(--MainBG) !important;
background-color: var(--TableBG) !important;
}
th {
background-color: var(--MainBG) !important;
background-color: var(--TableBG) !important;
}
}
.blackTheme .el-textarea__inner {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .el-textarea__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-input__inner {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
}
.blackTheme .el-input__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-input-number__decrease {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
}
.blackTheme .el-input-number__increase {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
}
@ -414,25 +418,42 @@ div:focus {
.el-pagination {
button:disabled {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
}
.el-pager li {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .el-select-dropdown {
/* .blackTheme .el-select-dropdown {
background-color: var(--MainBG) !important;
}
} */
.fu-search-bar-button {
background-color: var(--Main) !important;
}
.fu-quick-search input {
.blackTheme .fu-quick-search input {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .vue-treeselect__single-value {
color: var(--TableColor) !important;
}
.blackTheme .el-tag.el-tag--info {
background-color: var(--MainContentBG);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important; ;
}
.blackTheme .vue-treeselect__control {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-popover {
background-color: var(--MainBG);
@ -440,6 +461,7 @@ div:focus {
.blackTheme .main-area-input {
input.el-input__inner {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
@ -448,16 +470,16 @@ div:focus {
}
}
.el-tree {
background-color: var(--MainBG) !important;
.blackTheme .el-tree {
background-color: var(--SiderBG) !important;
}
.el-tree-node__content:hover {
background-color: var(--ContentBG) !important;
.blackTheme .el-tree-node__content:hover {
background-color: var(--SiderBG) !important;
}
.is-current > .el-tree-node__content {
background-color: var(--ContentBG) !important;
.blackTheme .is-current > .el-tree-node__content {
background-color: var(--SiderBG) !important;
}
.blackTheme .el-collapse-item__header {
background-color: var(--ContentBG) !important;
@ -497,28 +519,28 @@ div:focus {
.blackTheme .elx-table--main-wrapper {
.body--wrapper {
background-color: var(--ContentBG) !important;
background-color: var(--TableBG) !important;
}
}
.blackTheme .elx-table {
color: var(--TextPrimary) !important;
color: var(--TableColor) !important;
}
.blackTheme .elx-body--column {
background-image: linear-gradient(var(--MainBorderColor), var(--MainBorderColor)), linear-gradient(var(--MainBorderColor), var(--MainBorderColor)) !important;
background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
}
.blackTheme .elx-header--column {
background-image: linear-gradient(--MainBorderColor, --MainBorderColor), linear-gradient(--MainBorderColor, --MainBorderColor) !important;
background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
}
.blackTheme tr.row--current {
background-color: var(--MainBG) !important;
}
.blackTheme tr.elx-body--row:hover {
background-color: var(--MainBG) !important;
background-color: var(--TableBG) !important;
}
.blackTheme .elx-table--header-border-line {
border-color: var(--MainBorderColor) !important;
border-color: var(--TableBorderColor) !important;
}
.el-collapse-item__content {

69
frontend/src/styles/sidebar.scss
View File

@ -14,7 +14,6 @@
.sidebar-container {
transition: width 0.28s;
// background-color: $--background-color-base;
height: $contentHeight;
position: fixed;
font-size: 0px;
@ -64,33 +63,71 @@
border: none;
height: 100%;
width: 100% !important;
background-color: var(--SiderBG, #ffffff);
}
.submenu-title-noDropdown,
.el-submenu__title {
.submenu-title-noDropdown:not(.is-active), .el-submenu__title {
color: var(--SiderTextColor);
&:hover {
// background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important;
background-color: var(--MenuHovorBG) !important;
color: var(--TextActive);
}
&:focus {
background-color: var(--MenuActiveBG) !important;
color: var(--TextActive);
}
}
.submenu-title-noDropdown.is-active {
background-color: var(--MenuActiveBG) !important;
color: var(--TextActive);
}
.is-active > .el-submenu__title {
background-color: var(--MenuActiveBG) !important;
color: var(--TextActive);
}
/* .nest-menu {
.el-menu-item:not(.is-active) {
min-width: $sideBarWidth !important;
background-color: var(--SiderBG) !important;
color: var(--SiderTextColor);
&:hover {
color: var(--TextActive) !important;
}
&:focus {
background-color: var(--SiderBG) !important;
color: var(--TextActive) !important;
}
}
/* .is-active > .el-submenu__title {
color: $leftMenuTextActive !important;
.el-menu-item.is-active {
color: var(--TextActive) !important;
}
} */
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
// background-color: $leftMenuBg !important;
background-color: var(--MainBG) !important;
background-color: var(--SiderBG) !important;
color: var(--SiderTextColor);
&:hover {
// background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important;
background-color: var(--MenuHovorBG) !important;
color: var(--TextActive) !important;
}
}
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .is-active.el-menu-item {
min-width: $sideBarWidth !important;
background-color: var(--SiderBG) !important;
color: var(--TextActive);
}
}
.hideSidebar {
@ -147,6 +184,8 @@
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
@ -190,7 +229,7 @@
.el-menu-item {
&:hover {
// background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important;
background-color: var(--SiderBG) !important;
}
}

30
frontend/src/styles/theme/dark.scss
View File

@ -11,14 +11,16 @@ $--color-text-regular: #EBEEF5;
$--color-text-secondary: #E4E7ED;
$--color-text-placeholder: #DCDFE6;
$--border-color-base: #2681ff;
$--border-color-light: #2681ff;
$--border-color-lighter: #2681ff;
$--border-color-extra-light: #2681ff;
$--border-color-base: #495865;
$--border-color-light: #495865;
$--border-color-lighter: #495865;
$--border-color-extra-light: #495865;
$--color-white: #FFFFFF;
$--color-black: #000000;
$--color-text-regular: #fff;
$--background-color-base: #171b22;
// 与CSS原生变量映射
@ -27,12 +29,30 @@ $--background-color-base: #171b22;
--test:#FF9227;
--color-primary: #000;
--MainBG: #171b22;
--ContentBG: #303640;
--ContentBG: #1b2a32;
--MainBorderColor: #2681ff;
--TextActive: #FFFFFF;
--TextPrimary: #F2F6FC;
--border-color-input: #303640;
--border-color-input-hovor: #303640;
--TopBG: #00364d;
--TopTextColor: #fafafa;
--MenuHovorBG: #28404d;
--MenuActiveBG: #324f62;
--SiderBG: #17242b;
--SiderTextColor: #acbac3;
--MainContentBG: #1b2a32;
--TableBG: #21333b;
--TableColor: #acbac3;
--TableBorder: .05rem solid #495865;
--TableBorderColor: #495865;
}

18
frontend/src/styles/topbar.scss
View File

@ -5,8 +5,8 @@
left: 0;
z-index: 1001;
overflow: hidden;
border-bottom: 1px solid $--color-primary;
border-bottom: 1px solid var(--TopBG, #E6E6E6);
background-color: var(--TopBG, #ffffff);
.log {
padding: 0 16px;
line-height: 56px;
@ -25,24 +25,28 @@
.el-menu {
float: left;
border: none !important;
background-color: var(--MainBG, #ffffff) !important;
background-color: var(--TopBG, #ffffff) !important;
.nav-item {
display: inline-block;
.el-menu-item:not(.is-active) {
color: var(--TopTextColor);
opacity: 0.65;
&:hover {
background-color: var(--ContentBG, #ecf5ff) !important;
background-color: var(--MenuHovorBG, #ecf5ff) !important;
opacity: 1;
}
&:focus {
background-color: var(--ContentBG, #ecf5ff) !important;
background-color: var(--MenuActiveBG, #ecf5ff) !important;
opacity: 1;
}
}
.el-menu-item.is-active {
background-color: var(--ContentBG, #ecf5ff) ;
background-color: var(--MenuActiveBG, #ecf5ff) ;
color: var(--TextActive) !important;
opacity: 1;
}
}

6
frontend/src/views/msg/setting.vue
View File

@ -244,10 +244,10 @@ export default {
.tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid #e6e6e6;
background-color: #f7f8fa;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: #3d4d66 ;
color: var(--TableColor, #3d4d66) ;
}
.auth-span{

10
frontend/src/views/panel/GrantAuth/dept/index.vue
View File

@ -260,13 +260,21 @@ export default {
border: 1px solid #e6e6e6;
overflow-y: auto;
}
.tree-head{
/* .tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid #e6e6e6;
background-color: #f7f8fa;
font-size: 12px;
color: #3d4d66 ;
} */
.tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: var(--TableColor, #3d4d66) ;
}
.auth-span{

5
frontend/src/views/panel/edit/index.vue
View File

@ -796,6 +796,11 @@ export default {
.de-header {
height: 35px !important;
border-bottom: 1px solid #E6E6E6;
}
.blackTheme .de-header {
background-color: var(--SiderBG) !important;
color: var(--TextActive);
}
.showLeftPanel {

7
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -62,7 +62,7 @@
</el-row>
</el-col>
<el-col v-if="panelInfo.name.length===0" style="height: 100%;">
<el-row style="height: 100%; background-color: var(--MainBG);" class="custom-position">
<el-row style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
{{ $t('panel.select_panel_from_left') }}
</el-row>
</el-col>
@ -306,10 +306,13 @@ export default {
.panel-design-head {
height: 40px;
background-color: white;
background-color: var(--SiderBG, white);
padding: 0 10px;
line-height: 40px;
}
.blackTheme .panel-design-head {
color: var(--TextActive);
}
.panel-design-preview {
width: 100%;

10
frontend/src/views/system/authority/components/LazyTree.vue
View File

@ -300,13 +300,21 @@ export default {
border: 1px solid #e6e6e6;
overflow-y: auto!important;
}
.tree-head{
/* .tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid #e6e6e6;
background-color: #f7f8fa;
font-size: 12px;
color: #3d4d66 ;
} */
.tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: var(--TableColor, #3d4d66) ;
}
.auth-span{