Skip to content

D
dataease
Unverified 提交 d7d07b91 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者： GitHub
浏览文件
操作

Merge pull request #894 from dataease/pr@dev@feat_theme_switch

feat: 增加主题切换
上级 8fffb3d7 d83bebfa
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 420 行增加 和 195 行删除
backend/src/main/resources/db/migration/V26__de1.3.sql
浏览文件 @ d7d07b91
......@@ -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);
......
frontend/package.json
浏览文件 @ d7d07b91
......@@ -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",
......
frontend/src/App.vue
浏览文件 @ d7d07b91
......@@ -6,6 +6,10 @@
<script>
export default {
name: 'App'
name: 'App',
beforeCreate() {
// document.body.className = 'blackTheme'
}
}
</script>
frontend/src/components/LangSelect/index.vue
浏览文件 @ d7d07b91
<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) {
......
frontend/src/components/Notification/index.vue
浏览文件 @ d7d07b91
......@@ -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;
......
frontend/src/components/business/LayoutContent.vue
浏览文件 @ d7d07b91
......@@ -42,7 +42,7 @@ export default {
.content-container {
transition: 0.3s;
background-color: #FFFFFF;
background-color: var(--ContentBG);
overflow: auto;
height: 100%;
padding: 20px;
......
frontend/src/components/dataease/DeAsideContainer.vue
浏览文件 @ d7d07b91
......@@ -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;
......
frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
浏览文件 @ d7d07b91
......@@ -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;
}
......
frontend/src/lang/en.js
浏览文件 @ d7d07b91
......@@ -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',
......@@ -1333,7 +1334,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',
......
frontend/src/lang/tw.js
浏览文件 @ d7d07b91
......@@ -127,7 +127,8 @@ export default {
tokenError: '登陸信息錯誤，請重新登錄',
username_error: '請輸入正確的 ID',
password_error: '密碼不小于 8 位',
re_login: '重新登錄'
re_login: '重新登錄',
default_login: '普通登錄'
},
commons: {
search: '搜索',
......@@ -1344,7 +1345,11 @@ export default {
topMenuTextColor: '頭部字體顔色',
topMenuTextActiveColor: '頭部字體選中顔色'
topMenuTextActiveColor: '頭部字體選中顔色',
themeLight: '淺色',
themeDark: '深色',
themeCustom: '自定義'
},
auth: {
......
frontend/src/lang/zh.js
浏览文件 @ d7d07b91
......@@ -127,7 +127,8 @@ export default {
tokenError: '登陆信息错误，请重新登录',
username_error: '请输入正确的 ID',
password_error: '密码不小于 8 位',
re_login: '重新登录'
re_login: '重新登录',
default_login: '普通登录'
},
commons: {
search: '搜索',
......@@ -1349,7 +1350,11 @@ export default {
topMenuTextColor: '头部字体颜色',
topMenuTextActiveColor: '头部字体选中颜色'
topMenuTextActiveColor: '头部字体选中颜色',
themeLight: '浅色',
themeDark: '深色',
themeCustom: '自定义'
},
auth: {
......
frontend/src/layout/components/Sidebar/index.vue
浏览文件 @ d7d07b91
<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>
frontend/src/layout/components/Topbar.vue
浏览文件 @ d7d07b91
<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>
frontend/src/layout/index.vue
浏览文件 @ d7d07b91
......@@ -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>
frontend/src/styles/common/mixins.scss deleted 100644 → 0
浏览文件 @ 8fffb3d7
@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;
}
frontend/src/styles/common/variables.scss deleted 100644 → 0
浏览文件 @ 8fffb3d7
/* 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;
}
frontend/src/styles/index.scss
浏览文件 @ d7d07b91
$--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;
}
}
} */
frontend/src/styles/sidebar.scss
浏览文件 @ d7d07b91
#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;
......
frontend/src/styles/theme/dark.scss 0 → 100644
浏览文件 @ d7d07b91
/* 改变主题色变量 */
$--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;
}
frontend/src/styles/theme/default.scss 0 → 100644
浏览文件 @ d7d07b91
/* 改变主题色变量 */
$--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;
}
\ No newline at end of file
frontend/src/styles/topbar.scss
浏览文件 @ d7d07b91
.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 {
......
frontend/src/styles/variables.scss
浏览文件 @ d7d07b91
......@@ -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);
......
frontend/src/views/chart/group/Group.vue
浏览文件 @ d7d07b91
......@@ -18,6 +18,7 @@
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>
......
frontend/src/views/chart/index.vue
浏览文件 @ d7d07b91
<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" />
......
frontend/src/views/dataset/data/FieldEdit.vue
浏览文件 @ d7d07b91
......@@ -23,6 +23,7 @@
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>
......
frontend/src/views/dataset/data/TabDataPreview.vue
浏览文件 @ d7d07b91
......@@ -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>
......
frontend/src/views/dataset/data/ViewTable.vue
浏览文件 @ d7d07b91
......@@ -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>
......
frontend/src/views/dataset/group/Group.vue
浏览文件 @ d7d07b91
......@@ -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()
......
frontend/src/views/login/index.vue
浏览文件 @ d7d07b91
......@@ -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 => {
......
frontend/src/views/panel/list/PanelList.vue
浏览文件 @ d7d07b91
......@@ -9,6 +9,7 @@
:placeholder="$t('commons.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-col>
<el-col :span="8">
......
frontend/src/views/system/datasource/DsTree.vue
浏览文件 @ d7d07b91
......@@ -18,6 +18,7 @@
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>
......
frontend/src/views/system/datasource/index.vue
浏览文件 @ d7d07b91
<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>
......
frontend/vue.config.js
浏览文件 @ d7d07b91
......@@ -79,6 +79,13 @@ module.exports = {
.options({
symbolId: 'icon-[name]'
})
},
css: {
loaderOptions: {
sass: {
prependData: `@import "@/style/index.scss"`
}
}
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论