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

feat: 增加主题切换

Browse Source
This commit is contained in:
fit2cloud-chenyw 2021-10-08 17:22:21 +08:00
parent 49f8c0e335
commit d83bebfad6
34 changed files with 516 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/main/resources/db/migration/V26__de1.3.sql
View File

@ -30,6 +30,7 @@ ALTER TABLE `sys_user` ADD COLUMN `from` int(4) NOT NULL COMMENT '来源' AFTER
-- INSERT INTO `sys_menu` VALUES (60, 1, 0, 1, '导入LDAP用户', 'system-user-import', 'system/user/imp-ldap', 11, NULL, 'user-ldap', b'0', b'0', b'1', 'user:import', NULL, NULL, NULL, NULL);
-- ----------------------------
BEGIN;
INSERT INTO `system_parameter` VALUES ('ui.themeStr', 'light', 'text', 12);
INSERT INTO `system_parameter` VALUES ('ldap.url', NULL, 'text', 1);
INSERT INTO `system_parameter` VALUES ('ldap.dn', NULL, 'text', 2);
INSERT INTO `system_parameter` VALUES ('ldap.password', NULL, 'password', 3);

2
frontend/package.json
View File

@ -72,7 +72,7 @@
"mockjs": "1.0.1-beta3",
"runjs": "^4.1.3",
"sass": "^1.32.5",
"sass-loader": "^10.1.1",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "^0.7.2",
"serve-static": "^1.13.2",

6
frontend/src/App.vue
View File

@ -6,6 +6,10 @@
<script>
export default {
name: 'App'
name: 'App',
beforeCreate() {
// document.body.className = 'blackTheme'
}
}
</script>

14
frontend/src/components/LangSelect/index.vue
View File

@ -1,7 +1,7 @@
<template>
<el-dropdown style="display: flex;align-items: center;" trigger="click" class="international" @command="handleSetLanguage">
<div>
<svg-icon :style="{color: topMenuTextColor}" class-name="international-icon" icon-class="language" />
<svg-icon style="color: var(--TextPrimary)" class-name="international-icon" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language==='zh_CN'" command="zh_CN">
@ -24,19 +24,19 @@
</template>
<script>
import variables from '@/styles/variables.scss'
/* import variables from '@/styles/variables.scss' */
export default {
computed: {
language() {
return this.$store.getters.language
},
variables() {
}
/* variables() {
return variables
},
topMenuTextColor() {
}, */
/* topMenuTextColor() {
if (this.$store.getters.uiInfo && this.$store.getters.uiInfo['ui.topMenuTextColor'] && this.$store.getters.uiInfo['ui.topMenuTextColor'].paramValue) { return this.$store.getters.uiInfo['ui.topMenuTextColor'].paramValue }
return this.variables.topBarMenuText
}
} */
},
methods: {
handleSetLanguage(lang) {

69
frontend/src/components/Notification/index.vue
View File

@ -9,44 +9,45 @@
style="display: flex;align-items: center;"
class="international"
>
<div style="height: 30px;">
<div style="float: left;font-size:16px;font-weight:bold;">
<span>{{ $t('webmsg.web_msg') }}</span>
</div>
<div v-if="showSetting" style="float: right;">
<a href="#" style="text-detext-decoratext-decoration:none;cursor:point;" @click="msgSetting">消息规则</a>
</div>
<div>
<div style="height: 30px;">
<div style="float: left;font-size:16px;font-weight:bold;">
<span>{{ $t('webmsg.web_msg') }}</span>
</div>
<div v-if="showSetting" style="float: right;">
<a href="#" style="text-detext-decoratext-decoration:none;cursor:point;" @click="msgSetting">消息规则</a>
</div>
</div>
<el-divider class="msg-line-class" />
<el-table
class="de-msg-data-table"
:data="data"
:show-header="false"
:highlight-current-row="true"
style="width: 100%"
>
<el-table-column prop="content" :label="$t('commons.name')">
<template slot-scope="scope">
<div class="start-item">
<div class="filter-db-row star-item-content" @click="showDetail(scope.row)">
<!-- <svg-icon icon-class="panel" class="ds-icon-scene" /> -->
<div class="title-div"><span>【{{ getTypeName(scope.row.typeId) }}】&nbsp;&nbsp;{{ scope.row.content }}</span></div>
<div class="title-div"><span>{{ scope.row.createTime | timestampFormatDate }}</span></div>
</div>
</div>
<el-divider class="msg-line-class" />
<el-table
class="de-msg-data-table"
:data="data"
:show-header="false"
:highlight-current-row="true"
style="width: 100%"
>
<el-table-column prop="content" :label="$t('commons.name')">
<template slot-scope="scope">
<div class="start-item">
<div class="filter-db-row star-item-content" @click="showDetail(scope.row)">
<!-- <svg-icon icon-class="panel" class="ds-icon-scene" /> -->
<div class="title-div"><span>【{{ getTypeName(scope.row.typeId) }}】&nbsp;&nbsp;{{ scope.row.content }}</span></div>
<div class="title-div"><span>{{ scope.row.createTime | timestampFormatDate }}</span></div>
</div>
<!-- <div class="star-item-close">
<i class="el-icon-delete " @click="remove(scope.row)" />
</div> -->
</div>
</template>
</el-table-column>
</el-table>
<div class="msg-foot-class" @click="showMore">
<el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
<span>{{ $t('webmsg.show_more') }}</span>
</el-row>
</div>
</template>
</el-table-column>
</el-table>
<div class="msg-foot-class" @click="showMore">
<el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
<span>{{ $t('webmsg.show_more') }}</span>
</el-row>
</div>
</div>
<div slot="reference">
<div>
<svg-icon
@ -233,7 +234,7 @@ export default {
right: 178px;
top: 8px;
background: red;
color: #fff;
color: var(--TextActive);
border-radius: 17px;
padding: 4px 7px;
font-size: 16px;

2
frontend/src/components/business/LayoutContent.vue
View File

@ -42,7 +42,7 @@ export default {
.content-container {
transition: 0.3s;
background-color: #FFFFFF;
background-color: var(--ContentBG);
overflow: auto;
height: 100%;
padding: 20px;

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

@ -39,11 +39,11 @@ export default {
<style scoped>
.ms-aside-container {
border: 1px solid #E6E6E6;
/* border: 1px solid #E6E6E6; */
padding: 10px;
border-radius: 2px;
box-sizing: border-box;
background-color: #FFF;
background-color: var(--MainBG);
height: calc(100vh - 56px);
border-right: 0px;
position: relative;

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

@ -17,7 +17,18 @@ export default {
right: 0px;
top: 0;
cursor: col-resize;
background-color: #E6E6E6;
background-color: #E6E6E6;;
border: 0px;
}
.blackTheme .drag-bar {
height: 100%;
width: 1px;
position: absolute;
right: 0px;
top: 0;
cursor: col-resize;
background-color: var(--MainBorderColor) !important;
border: 0px;
}

9
frontend/src/lang/en.js
View File

@ -127,7 +127,8 @@ export default {
tokenError: 'Token error, please login again',
username_error: 'Please enter the correct ID',
password_error: 'The password can not be less than 8 digits',
re_login: 'Login again'
re_login: 'Login again',
default_login: 'Normal'
},
commons: {
search: 'Search',
@ -1329,7 +1330,11 @@ export default {
loginImage: 'Picture on the right side of the login page',
loginTitle: 'Login page title',
title: 'System name',
advice_size: 'Advice picture size'
advice_size: 'Advice picture size',
themeLight: 'Light',
themeDark: 'Dark',
themeCustom: 'Custom'
},
auth: {
authConfig: 'Auth Config',

9
frontend/src/lang/tw.js
View File

@ -127,7 +127,8 @@ export default {
tokenError: '登陸信息錯誤，請重新登錄',
username_error: '請輸入正確的 ID',
password_error: '密碼不小于 8 位',
re_login: '重新登錄'
re_login: '重新登錄',
default_login: '普通登錄'
},
commons: {
search: '搜索',
@ -1340,7 +1341,11 @@ export default {
topMenuTextColor: '頭部字體顔色',
topMenuTextActiveColor: '頭部字體選中顔色'
topMenuTextActiveColor: '頭部字體選中顔色',
themeLight: '淺色',
themeDark: '深色',
themeCustom: '自定義'
},
auth: {

9
frontend/src/lang/zh.js
View File

@ -127,7 +127,8 @@ export default {
tokenError: '登陆信息错误，请重新登录',
username_error: '请输入正确的 ID',
password_error: '密码不小于 8 位',
re_login: '重新登录'
re_login: '重新登录',
default_login: '普通登录'
},
commons: {
search: '搜索',
@ -1345,7 +1346,11 @@ export default {
topMenuTextColor: '头部字体颜色',
topMenuTextActiveColor: '头部字体选中颜色'
topMenuTextActiveColor: '头部字体选中颜色',
themeLight: '浅色',
themeDark: '深色',
themeCustom: '自定义'
},
auth: {

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

@ -1,11 +1,13 @@
<template>
<div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}">
<!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-menu
:default-active="activeMenu"
: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" />
@ -18,7 +20,6 @@ import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { getThemeCluster } from '@/utils/style'
export default {
components: { SidebarItem, Logo },
@ -48,23 +49,15 @@ export default {
},
isCollapse() {
return false
},
activeBg() {
const theme = this.$store.state.settings.theme
const styleCluster = getThemeCluster(theme.replace('#', ''))
if (styleCluster.length > 2) {
const len = styleCluster.length
const val = styleCluster[len - 2]
return val
}
return ''
}
}
}
</script>
<style lang="scss" scoped>
.sidebar-container {
/* .sidebar-container {
>>>li.el-menu-item.is-active {
background-color: var(--active-bg) !important;
}
@ -85,5 +78,5 @@ export default {
.is-active > .el-submenu__title {
color: var(--theme) !important;
}
}
} */
</style>

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

@ -1,17 +1,15 @@
<template>
<div class="top-nav" :style="{backgroundColor: topMenuColor, '--active-bg-color': topMenuActiveColor}">
<div class="top-nav">
<div v-loading="!axiosFinished" class="log">
<svg-icon v-if="!logoUrl && axiosFinished" icon-class="DataEase" custom-class="top-nav-logo-icon" />
<img v-if="logoUrl && axiosFinished" :src="logoUrl" width="140" alt="" style="padding-top: 10px;">
</div>
<el-menu
class="de-top-menu"
:background-color="topMenuColor"
:text-color="topMenuTextColor"
:active-text-color="topMenuTextActiveColor"
:default-active="activeMenu"
mode="horizontal"
:style="{'margin-left': '260px', 'position': 'absolute'}"
active-text-color="#409EFF"
:default-active="activeMenu"
@select="handleSelect"
>
<div v-for="item in permission_routes" :key="item.path" class="nav-item">
@ -24,7 +22,7 @@
</div>
</el-menu>
<div class="right-menu" :style=" {color: topMenuTextColor}">
<div class="right-menu" style="color: var(--TextPrimary)">
<template>
<notification class="right-menu-item hover-effect" />
@ -37,7 +35,7 @@
</template>
<el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;">
<span :style=" {color: topMenuTextColor}" class="el-dropdown-link" style="font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<span class="el-dropdown-link" style="color: var(--TextPrimary);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>
@ -302,9 +300,7 @@ export default {
}
.de-top-menu {
>>>li.is-active {
// background-color: #0a7be0 !important;
background-color: var(--active-bg-color) !important;
}
background-color: var(--MainBG);
}
</style>

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

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

15
frontend/src/styles/common/mixins.scss
View File

@ -1,15 +0,0 @@
@mixin flex-row($justify: flex-start, $align: stretch) {
display: flex;
@if $justify != flex-start {
justify-content: $justify;
}
@if $align != stretch {
align-items: $align;
}
}
@mixin variant($color, $background-color, $border-color) {
color: $color;
background-color: $background-color;
border-color: $border-color;
}

54
frontend/src/styles/common/variables.scss
View File

@ -1,54 +0,0 @@
/* Element 变量 */
$--color-primary: #447df7;
$--color-success: #87cb16;
$--color-warning: #ffa534;
$--color-danger: #fb404b;
$--box-shadow-light: 0 1px 4px 0 rgb(0 0 0 / 14%);
$--color-text-primary: #3c4858;
/* layout */
$layout-bg-color: #f2f2f2;
/* sidebar */
$sidebar-open-width: 260px;
$sidebar-close-width: 60px;
$sidebar-bg-color: #30373d;
$sidebar-bg-gradient: linear-gradient(to bottom right, #30373d, #3e3e3d);
/* menu */
$menu-height: 50px; // 菜单项高度
$menu-bg-color: transparent; // 菜单项背景
$menu-bg-color-hover: mix($sidebar-bg-color, #000, 90%); // 菜单项hover背景
$menu-color: #b6c0cd; // 菜单项字体颜色
$menu-open-bg-color: #252b2f; // 菜单项展开背景
$menu-active-color: #FFF; // 菜单项激活时颜色
$menu-active-bg-color: transparent; // 菜单项激活时背景
$submenu-height: 40px; // 子菜单项高度
$submenu-bg-color-hover: mix($menu-open-bg-color, #000, 80%); // 子菜单项hover背景
$submenu-active-color: $menu-active-color; // 子菜单项激活时颜色
$submenu-active-bg-color: transparent; // 子菜单项激活时背景
$menu-active-prefix-color: $--color-primary; // 菜单激活前缀颜色
$menu-active-prefix-width: 4px; // 菜单激活前缀宽度
/* logo */
$logo-height: 40px;
$logo-bg-color: #4e5051;
/* header */
$header-height: 60px;
$header-padding: 30px;
/* main */
$view-padding: 15px;
/* fit2cloud-ui的variables加载了element-ui的变量 */
@import "~fit2cloud-ui/src/styles/common/variables";
:export {
theme: $--color-primary;
}

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

@ -1,3 +1,17 @@
$--font-path: '~element-ui/lib/theme-chalk/fonts';
.defaultTheme {
@import './theme/default.scss';
@import "~element-ui/packages/theme-chalk/src/index";
}
.blackTheme {
@import './theme/dark.scss';
@import "~element-ui/packages/theme-chalk/src/index";
}
@import '~normalize.css/normalize.css';
@import './variables.scss';
@import './mixin.scss';
@ -361,3 +375,156 @@ div:focus {
.el-color-dropdown__link-btn {
display: none!important;
}
.el-table {
background-color: var(--MainBG) !important;
tr {
background-color: var(--MainBG) !important;
}
th {
background-color: var(--MainBG) !important;
}
}
.blackTheme .el-input__inner {
background-color: var(--MainBG) !important;
}
.blackTheme .el-input__inner:not(:focus) {
// border: none !important;
border-color: var(--border-color-input) !important;
}
.el-pagination {
button:disabled {
background-color: var(--MainBG) !important;
}
}
.el-pager li {
background-color: var(--MainBG) !important;
}
.blackTheme .el-select-dropdown {
background-color: var(--MainBG) !important;
}
.fu-search-bar-button {
background-color: var(--Main) !important;
}
.fu-quick-search input {
background-color: var(--MainBG) !important;
}
.blackTheme .el-popover {
background-color: var(--MainBG);
}
.blackTheme .main-area-input {
input.el-input__inner {
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
background-color: var(--ContentBG) !important;
border-color: var(--ContentBG) !important;
}
}
.el-tree {
background-color: var(--MainBG) !important;
}
.el-tree-node__content:hover {
background-color: var(--ContentBG) !important;
}
.is-current > .el-tree-node__content {
background-color: var(--ContentBG) !important;
}
.blackTheme .el-collapse-item__header {
background-color: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
border: none !important;
}
.blackTheme .el-collapse-item__wrap {
background-color: var(--ContentBG) !important;
border: none !important;
}
.blackTheme .content-container__header {
color: var(--TextPrimary);
}
.blackTheme .el-button--default {
background-color: var(--MainBG) !important;
color: var(--Main) !important;
}
.blackTheme .el-dialog {
background: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
}
.blackTheme .el-dialog__title {
color: var(--TextPrimary) !important;
}
.blackTheme .title-text {
color: var(--TextPrimary) !important;
}
.blackTheme .el-tabs__item:not(.is-active) {
color: var(--TextPrimary) !important;
}
.blackTheme .el-tabs__item:hover{
color: var(--Main) !important;
}
.blackTheme .elx-table--main-wrapper {
.body--wrapper {
background-color: var(--ContentBG) !important;
}
}
.blackTheme .elx-table {
color: var(--TextPrimary) !important;
}
.blackTheme .elx-body--column {
background-image: linear-gradient(var(--MainBorderColor), var(--MainBorderColor)), linear-gradient(var(--MainBorderColor), var(--MainBorderColor)) !important;
}
.blackTheme .elx-header--column {
background-image: linear-gradient(--MainBorderColor, --MainBorderColor), linear-gradient(--MainBorderColor, --MainBorderColor) !important;
}
.blackTheme tr.row--current {
background-color: var(--MainBG) !important;
}
.blackTheme tr.elx-body--row:hover {
background-color: var(--MainBG) !important;
}
.blackTheme .elx-table--header-border-line {
border-color: var(--MainBorderColor) !important;
}
.el-collapse-item__content {
padding-bottom: 0!important;
}
.el-collapse-item__header {
height: 34px !important;
line-height: 34px !important;
padding: 0 0 0 6px !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.blackTheme .el-submenu__title {
color: var(--TextPrimary) ;
}
/* .chart-radio-div {
label.el-radio {
span.el-radio__input {
display: none !important;
}
}
} */

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

@ -1,7 +1,6 @@
#app {
.main-container {
// min-height: 100%;
height: $contentHeight;
transition: margin-left .28s;
margin-left: $sideBarWidth;
@ -15,21 +14,16 @@
.sidebar-container {
transition: width 0.28s;
background-color: $leftMenuBg;
// background-color: $--background-color-base;
height: $contentHeight;
position: fixed;
font-size: 0px;
// top: 0;
top: $topBarHeight;
bottom: 0;
left: 0;
z-index: 999;
overflow: hidden;
// min-width: 260px;
// max-width: 400px;
// border-right: 1px solid rgba(0, 0, 0, 0.12);
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
@ -71,16 +65,14 @@
height: 100%;
width: 100% !important;
/* .is-active {
background-color: $leftMenuActive;
} */
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $leftMenuHovor !important;
// background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important;
}
}
@ -91,10 +83,12 @@
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $leftMenuBg !important;
// background-color: $leftMenuBg !important;
background-color: var(--MainBG) !important;
&:hover {
background-color: $leftMenuHovor !important;
// background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important;
}
}
}
@ -146,6 +140,7 @@
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
@ -156,7 +151,6 @@
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
@ -185,7 +179,6 @@
}
}
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
.svg-icon {
@ -196,11 +189,11 @@
.nest-menu .el-submenu > .el-submenu__title,
.el-menu-item {
&:hover {
background-color: $leftMenuHovor !important;
// background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important;
}
}
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;

38
frontend/src/styles/theme/dark.scss Normal file
View File

@ -0,0 +1,38 @@
/* 改变主题色变量 */
$--color-primary: #2681ff;
$--color-success: #05AA65;
$--color-warning: #FF9227;
$--color-danger: #F64346;
$--color-info: #BABEC5;
$--color-text-primary: #F2F6FC;
$--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;
$--color-white: #FFFFFF;
$--color-black: #000000;
$--background-color-base: #171b22;
// 与CSS原生变量映射
#app {
--Main:#2681ff;
--test:#FF9227;
--color-primary: #000;
--MainBG: #171b22;
--ContentBG: #303640;
--MainBorderColor: #2681ff;
--TextActive: #FFFFFF;
--TextPrimary: #F2F6FC;
--border-color-input: #303640;
--border-color-input-hovor: #303640;
}

35
frontend/src/styles/theme/default.scss Normal file
View File

@ -0,0 +1,35 @@
/* 改变主题色变量 */
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
$--color-text-primary: #303133;
$--color-text-regular: #606266;
$--color-text-secondary: #909399;
$--color-text-placeholder: #C0C4CC;
$--border-color-base: #DCDFE6;
$--border-color-light: #E4E7ED;
$--border-color-lighter: #EBEEF5;
$--border-color-extra-light: #F2F6FC;
$--color-white: #FFFFFF;
$--color-black: #000000;
$--background-color-base: #F5F7FA;
// 与CSS原生变量映射
#app {
--Main:#00B9AD;
--test:#FF9227;
--color-primary: #00B9AD;
--MainBG: #FFFFFF;
--border-color-input: #DCDFE6;
--border-color-input-hovor: #C0C4CC;
}

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

@ -1,14 +1,11 @@
.top-nav {
// margin-left: $sideBarWidth;
width: 100%;
// background-color: #304156;
background-color: $topBarBg;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
overflow: hidden;
border-bottom: 1px solid #DCDFE6;
border-bottom: 1px solid $--color-primary;
.log {
padding: 0 16px;
@ -16,9 +13,7 @@
height: 56px;
font-size: 24px;
font-weight: bold;
// color: rgb(191, 203, 217);
// color: rgba(255, 255, 255, 0.87);
// color: $topBarBg;
float: left;
img {
@ -30,29 +25,51 @@
.el-menu {
float: left;
border: none !important;
background-color: $topBarBg;
.nav-item {
display: inline-block;
.el-menu-item:not(.is-active) {
color: $topBarMenuText;
&:hover {
background-color: $topBarMenuHovor !important;
background-color: var(--ContentBG, #ecf5ff) !important;
}
&:focus {
background-color: $topBarMenuHovor !important;
background-color: var(--ContentBG, #ecf5ff) !important;
}
}
.el-menu-item.is-active {
background-color: var(--ContentBG, #ecf5ff) ;
color: var(--TextActive) !important;
}
/* .is-active {
background-color: $topBarMenuActive !important;
} */
}
}
/* .blackTheme .el-menu {
.nav-item {
.el-menu-item:not(.is-active) {
&:hover {
background-color: var(--ContentBG) !important;
}
&:focus {
background-color: var(--ContentBG) !important;
}
}
.blackTheme .el-menu-item.is-active {
background-color: var(--ContentBG) !important;
color: var(--TextActive) !important;
}
}
} */
.right-menu {
float: right;
@ -71,8 +88,7 @@
padding: 10px 8px;
height: 100%;
font-size: 18px;
// color: #5a5e66;
// color: #606266;
vertical-align: text-bottom;
&.hover-effect {

5
frontend/src/styles/variables.scss
View File

@ -7,10 +7,10 @@
/* theme color */
$--color-primary: #0a7be0;
/* $--color-primary: #0a7be0;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-danger: #F56C6C; */
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
@ -23,7 +23,6 @@ $--table-border: 1px solid #dfe6ec;
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
@import "~fit2cloud-ui/src/styles/common/variables";
// topBar
$topBarBg: #f1f3f8;
$topBarMenuHovor: rgba(158,158,158,.2);

1
frontend/src/views/chart/group/Group.vue
View File

@ -18,6 +18,7 @@
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>

2
frontend/src/views/chart/index.vue
View File

@ -1,5 +1,5 @@
<template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-aside-container>
<group :save-status="saveStatus" @switchComponent="switchComponent" />

137
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -1,7 +1,8 @@
<template>
<el-row v-loading="loading" style="height: 100%;overflow-y: hidden;width: 100%;">
<!-- <span v-show="false">{{ vId }}</span>-->
<el-row style="height: 40px;background-color: white" class="padding-lr">
<!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
<el-row style="height: 40px;" class="padding-lr">
<el-popover
placement="right-start"
width="400"
@ -10,7 +11,7 @@
@hide="hideTab"
>
<dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
<span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
<span slot="reference" class="title-text" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
</el-popover>
<span style="float: right;line-height: 40px;">
<!-- <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
@ -29,9 +30,9 @@
<el-tabs type="card" :stretch="true" class="tab-header">
<el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
<el-row class="view-panel">
<el-col
style="width: 180px;border-right: 1px solid #E6E6E6;"
>
<!-- <el-col style="width: 180px;border-right: 1px solid #E6E6E6;" > -->
<el-col class="theme-border-class" style="width: 180px;border-right: 1px solid #E6E6E6;">
<div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
<el-input
v-model="searchField"
@ -39,6 +40,7 @@
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
<el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
<el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
@ -92,25 +94,9 @@
<el-col
style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
>
<!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
<!-- <el-row>-->
<!-- <span>{{ $t('chart.title') }}</span>-->
<!-- <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
<!-- </el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="view.title"-->
<!-- size="mini"-->
<!-- :placeholder="$t('chart.title')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<div style="height: 25vh;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span>
<div style="height: 25vh;overflow:auto" class="padding-lr theme-border-class">
<span class="title-text">{{ $t('chart.chart_type') }}</span>
<el-row>
<div class="chart-type">
<el-radio-group
@ -119,7 +105,7 @@
:disabled="!hasDataPermission('manage',param.privileges)"
@change="save(true,'chart',true,true)"
>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<div class="chart-radio-div" style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="table-normal" label="table-normal">
<span :title="$t('chart.chart_table_normal')">
<svg-icon icon-class="table-normal" class="chart-icon" />
@ -233,7 +219,7 @@
</el-radio-group>
</div>
</el-row>
<el-row style="color: #909399;">
<el-row class="title-text" style="color: #909399;">
<span>
<span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">
Tips: {{ $t('chart.only_one_quota') }}
@ -247,7 +233,7 @@
</span>
</el-row>
</div>
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style theme-border-class">
<el-row style="height: 100%;">
<el-row v-if="view.type ==='map'" class="padding-lr">
<span style="width: 80px;text-align: right;">
@ -419,6 +405,7 @@
group="drag"
animation="300"
:move="onMove"
class="theme-item-class"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@add="addCustomFilter"
@update="save(true)"
@ -462,9 +449,9 @@
</el-tab-pane>
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
<el-row class="view-panel">
<div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style">
<div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style theme-border-class">
<el-row class="padding-lr">
<span>{{ $t('chart.style_priority') }}</span>
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
@ -1659,6 +1646,9 @@ export default {
height: calc(100% - 40px);
background-color: #f7f8fa;
}
.blackTheme .view-panel {
background-color: var(--MainBG);
}
.drag-list {
height: calc(100% - 26px);
@ -1680,6 +1670,13 @@ export default {
text-overflow: ellipsis;
}
.blackTheme .item-dimension {
border: solid 1px ;
border-color: var(--MainBorderColor);
color: var(--TextPrimary);
background-color: var(--MainBG);
}
.item-dimension + .item-dimension {
margin-top: 2px;
}
@ -1691,13 +1688,18 @@ export default {
cursor: pointer;
}
.blackTheme .item-dimension:hover {
color: var(--Main);
background: var(--ContentBG);
cursor: pointer;
}
.item-quota {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
/*background-color: rgba(35,46,64,.05);*/
background-color: white;
display: block;
word-break: break-all;
@ -1705,6 +1707,14 @@ export default {
white-space: nowrap;
text-overflow: ellipsis;
}
.blackTheme .item-quota {
border: solid 1px ;
border-color: var(--MainBorderColor);
color: var(--TextPrimary);
background-color: var(--MainBG);
}
.item-quota + .item-quota {
margin-top: 2px;
@ -1717,6 +1727,10 @@ export default {
cursor: pointer;
}
.blackTheme .item-quota:hover {
background: var(--ContentBG);
}
.el-form-item {
margin-bottom: 0;
}
@ -1730,10 +1744,19 @@ export default {
background-color: #E8EAED;
}
.blackTheme .tab-header>>>.el-tabs__item{
background-color: var(--MainBG);
}
.tab-header>>>.is-active{
background-color: #f7f8fa;
border-bottom-color: #f7f8fa!important;
}
.blackTheme .tab-header>>>.is-active{
background-color: var(--ContentBG);
border-bottom-color: var(--ContentBG) !important;
}
.tab-header>>>.el-tabs__nav-scroll{
padding-left: 0!important;
}
@ -1763,7 +1786,7 @@ export default {
}
.chart-type>>>.el-radio__input{
display: none!important;
display: none !important;
}
.el-radio{
@ -1778,6 +1801,11 @@ export default {
height: calc(100vh - 56px - 25vh - 40px - 40px);
}
.blackTheme .attr-style{
border-color: var(--MainBorderColor) !important;
color: var(--TextPrimary);
}
.attr-selector{
width:100%;
height: 100%;
@ -1788,15 +1816,9 @@ export default {
background-color: white
}
.style-collapse>>>.el-collapse-item__content {
padding-bottom: 0!important;
}
.style-collapse>>>.el-collapse-item__header {
height: 34px;
line-height: 34px;
padding: 0 0 0 6px;
font-size: 12px;
font-weight: 400;
.blackTheme .attr-selector{
background-color: var(--MainBG)
}
.disabled-none-cursor{
@ -1830,6 +1852,7 @@ export default {
justify-content: space-between;
align-items: center;
}
.chart-error-class{
text-align: center;
height: 100%;
@ -1838,10 +1861,20 @@ export default {
justify-content: center;
background-color: #ece7e7;
}
.blackTheme .chart-error-class{
background-color: var(--MainBG)
}
.field-height{
height: calc(50% - 20px);
border-top: 1px solid #E6E6E6;
}
.blackTheme .field-height{
border-top: 1px solid ;
border-color: var(--MainBorderColor) !important;
}
.padding-tab{
padding: 0;
height: 100%;
@ -1852,6 +1885,7 @@ export default {
font-weight: normal !important;
}
}
.drag-block-style{
padding:2px 0 0 0;
width:100%;
@ -1863,6 +1897,12 @@ export default {
align-items: center;
background-color: white;
}
.blackTheme .drag-block-style{
border: 1px solid ;
border-color: var(--MainBorderColor);
background-color: var(--ContentBG);
}
.drag-placeholder-style{
position: absolute;
top: calc(50% - 2px);
@ -1870,7 +1910,24 @@ export default {
width: 100%;
color: #CCCCCC;
}
.blackTheme .drag-placeholder-style{
color: var(--TextPrimary);
}
.drag-placeholder-style-span{
padding-left: 16px;
}
.blackTheme .theme-border-class {
border-color: var(--MainBorderColor) !important;
color: var(--TextPrimary) !important;
background-color: var(--ContentBG);
}
.blackTheme .padding-lr {
border-color: var(--MainBorderColor) !important;
}
.blackTheme .theme-item-class {
background-color: var(--MainBG) !important;
border-color: var(--MainBorderColor) !important;
}
</style>

1
frontend/src/views/dataset/data/FieldEdit.vue
View File

@ -23,6 +23,7 @@
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>

4
frontend/src/views/dataset/data/TabDataPreview.vue
View File

@ -4,8 +4,8 @@
<el-col style="width: 300px;">
<el-form ref="form" :model="form" size="mini" class="row-style">
<el-form-item>
<span style="width: 100px;">{{ $t('dataset.showRow') }}</span>
<el-input v-model="form.row">
<span class="title-text" style="width: 100px;">{{ $t('dataset.showRow') }}</span>
<el-input v-model="form.row" class="main-area-input">
<el-button slot="append" size="mini" icon="el-icon-search" @click="reSearch" />
</el-input>
</el-form-item>

2
frontend/src/views/dataset/data/ViewTable.vue
View File

@ -10,7 +10,7 @@
@hide="hideTab"
>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
<span slot="reference" style="line-height: 26px;cursor: pointer;">
<span slot="reference" class="title-text" style="line-height: 26px;cursor: pointer;">
{{ table.name }}
</span>
</el-popover>

9
frontend/src/views/dataset/group/Group.vue
View File

@ -30,6 +30,7 @@
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>
@ -341,7 +342,7 @@
</template>
<script>
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post, isKettleRunning, alter} from '@/api/dataset/dataset'
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post, isKettleRunning, alter } from '@/api/dataset/dataset'
import GroupMoveSelector from './GroupMoveSelector'
import DsMoveSelector from './DsMoveSelector'
@ -420,9 +421,6 @@ export default {
},
computed: {
},
created() {
this.kettleState()
},
watch: {
search(val) {
this.$emit('switchComponent', { name: '' })
@ -439,6 +437,9 @@ export default {
this.refreshNodeBy(this.saveStatus.sceneId)
}
},
created() {
this.kettleState()
},
mounted() {
this.treeNode(this.groupForm)
this.refresh()

11
frontend/src/views/login/index.vue
View File

@ -17,7 +17,7 @@
<div class="login-form">
<el-form-item v-if="loginTypes.length > 1">
<el-radio-group v-if="loginTypes.length > 1" v-model="loginForm.loginType" @change="changeLoginType">
<el-radio :label="0" size="mini">普通登录</el-radio>
<el-radio :label="0" size="mini">{{ $t('login.default_login') }}</el-radio>
<el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
<el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
</el-radio-group>
@ -146,7 +146,16 @@ export default {
if (this.uiInfo['ui.loginLogo'] && this.uiInfo['ui.loginLogo'].paramValue) {
this.loginLogoUrl = '/system/ui/image/' + this.uiInfo['ui.loginLogo'].paramValue
}
if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
// this.loginLogoUrl = '/system/ui/image/' + this.uiInfo['ui.loginLogo'].paramValue
if (this.uiInfo['ui.themeStr'].paramValue === 'dark') {
document.body.className = 'blackTheme'
} else if (this.uiInfo['ui.themeStr'].paramValue === 'light') {
document.body.className = ''
}
}
},
handleLogin() {
this.clearOidcMsg()
this.$refs.loginForm.validate(valid => {

1
frontend/src/views/panel/list/PanelList.vue
View File

@ -9,6 +9,7 @@
:placeholder="$t('commons.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-col>
<el-col :span="8">

1
frontend/src/views/system/datasource/DsTree.vue
View File

@ -18,6 +18,7 @@
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>

3
frontend/src/views/system/datasource/index.vue
View File

@ -1,5 +1,6 @@
<template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
<!-- <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa"> -->
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-main-container>
<ds-main ref="dsMain" />
</de-main-container>

7
frontend/vue.config.js
View File

@ -79,6 +79,13 @@ module.exports = {
.options({
symbolId: 'icon-[name]'
})
},
css: {
loaderOptions: {
sass: {
prependData: `@import "@/style/index.scss"`
}
}
}
}