![]()
-
@@ -69,16 +74,17 @@ import AppLink from './Sidebar/Link'
import variables from '@/styles/variables.scss'
import { isExternal } from '@/utils/validate'
import Notification from '@/components/Notification'
-// import bus from '@/utils/bus'
+import bus from '@/utils/bus'
import LangSelect from '@/components/LangSelect'
import { getSysUI } from '@/utils/auth'
-
+import ThemePicker from '@/components/ThemePicker'
export default {
name: 'Topbar',
components: {
AppLink,
Notification,
- LangSelect
+ LangSelect,
+ ThemePicker
},
data() {
return {
@@ -92,6 +98,26 @@ export default {
theme() {
return this.$store.state.settings.theme
},
+
+ topMenuColor() {
+ if (this.$store.getters.uiInfo && this.$store.getters.uiInfo['ui.topMenuColor'] && this.$store.getters.uiInfo['ui.topMenuColor'].paramValue) { return this.$store.getters.uiInfo['ui.topMenuColor'].paramValue }
+ return this.variables.topBarBg
+ },
+ topMenuActiveColor() {
+ if (this.$store.getters.uiInfo && this.$store.getters.uiInfo['ui.topMenuActiveColor'] && this.$store.getters.uiInfo['ui.topMenuActiveColor'].paramValue) { return this.$store.getters.uiInfo['ui.topMenuActiveColor'].paramValue }
+ return this.variables.topBarMenuActive
+ },
+ 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
+ },
+ topMenuTextActiveColor() {
+ if (this.$store.getters.uiInfo && this.$store.getters.uiInfo['ui.topMenuTextActiveColor'] && this.$store.getters.uiInfo['ui.topMenuTextActiveColor'].paramValue) { return this.$store.getters.uiInfo['ui.topMenuTextActiveColor'].paramValue }
+ return this.variables.topBarMenuTextActive
+ },
+ /* topMenuColor() {
+ return this.$store.getters.uiInfo.topMenuColor
+ }, */
activeMenu() {
const route = this.$route
const { meta, path } = route
@@ -122,6 +148,11 @@ export default {
mounted() {
this.initCurrentRoutes()
+ bus.$on('set-theme-info', this.setThemeInfo)
+ bus.$on('set-top-menu-info', this.setTopMenuInfo)
+ bus.$on('set-top-menu-active-info', this.setTopMenuActiveInfo)
+ bus.$on('set-top-text-info', this.setTopTextInfo)
+ bus.$on('set-top-text-active-info', this.setTopTextActiveInfo)
},
created() {
this.loadUiInfo()
@@ -230,6 +261,22 @@ export default {
}
this.axiosFinished = true
})
+ },
+ setThemeInfo(val) {
+ // console.log('切换的主题颜色是：' + val)
+ this.$refs['de-theme'] && this.$refs['de-theme'].switch && this.$refs['de-theme'].switch(val)
+ },
+ setTopMenuInfo(val) {
+ this.loadUiInfo()
+ },
+ setTopMenuActiveInfo(val) {
+ this.loadUiInfo()
+ },
+ setTopTextInfo(val) {
+ this.loadUiInfo()
+ },
+ setTopTextActiveInfo(val) {
+ this.loadUiInfo()
}
}
@@ -253,4 +300,11 @@ export default {
vertical-align: text-bottom;
margin-right: 10px;
}
+
+ .de-top-menu {
+ >>>li.is-active {
+ // background-color: #0a7be0 !important;
+ background-color: var(--active-bg-color) !important;
+ }
+ }
diff --git a/frontend/src/layout/components/index.js b/frontend/src/layout/components/index.js
index a7d831232b..a011eabbf6 100644
--- a/frontend/src/layout/components/index.js
+++ b/frontend/src/layout/components/index.js
@@ -1,6 +1,6 @@
// export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
-export { default as Settings } from './Settings'
+// export { default as Settings } from './Settings'
export { default as AppMain } from './AppMain'
export { default as Topbar } from './Topbar'
export { default as Licbar } from './Licbar'
diff --git a/frontend/src/permission.js b/frontend/src/permission.js
index cf8fe899e3..b02aaf2e5f 100644
--- a/frontend/src/permission.js
+++ b/frontend/src/permission.js
@@ -7,6 +7,7 @@ import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
import { buildMenus } from '@/api/system/menu'
import { filterAsyncRouter } from '@/store/modules/permission'
+// import bus from './utils/bus'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -21,7 +22,7 @@ router.beforeEach(async(to, from, next) => {
// determine whether the user has logged in
const hasToken = getToken()
-
+ // bus.$emit('set-theme-info', store.state.settings.theme)
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
@@ -76,7 +77,6 @@ export const loadMenus = (next, to) => {
buildMenus().then(res => {
const filterDatas = filterRouter(res.data)
const asyncRouter = filterAsyncRouter(filterDatas)
- // addMsgMenu(asyncRouter)
asyncRouter.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('permission/GenerateRoutes', asyncRouter).then(() => { // 存储路由
router.addRoutes(asyncRouter)
@@ -89,43 +89,6 @@ export const loadMenus = (next, to) => {
})
}
-export const addMsgMenu = asyncRouter => {
- const menu = {
- path: 'system-msg-web',
- component: () => import('@/views/msg/index'),
- name: 'sys-msg-web',
- meta: { title: '站内消息', icon: 'all-msg' },
- children: [
- {
- path: 'all',
- component: () => import('@/views/msg/all'),
- name: 'sys-msg-web-all',
- meta: { title: '所有消息', icon: 'web-msg' }
- },
- {
- path: 'unread',
- component: () => import('@/views/msg/unread'),
- name: 'sys-msg-web-unread',
- meta: { title: '未读消息', icon: 'unread-msg' }
-
- },
- {
- path: 'readed',
- component: () => import('@/views/msg/readed'),
- name: 'sys-msg-web-readed',
- meta: { title: '已读消息', icon: 'readed-msg' }
- }
- ]
- }
- asyncRouter.forEach(element => {
- if (element.name === 'system') {
- if (element.children) {
- element.children.splice(0, 0, menu)
- }
- // element.children.push(menu)
- }
- })
-}
/**
* 验证path是否有效
* @param {*} path
diff --git a/frontend/src/styles/sidebar.scss b/frontend/src/styles/sidebar.scss
index 9d9f8c04d1..3638594849 100644
--- a/frontend/src/styles/sidebar.scss
+++ b/frontend/src/styles/sidebar.scss
@@ -71,9 +71,9 @@
height: 100%;
width: 100% !important;
- .is-active {
+ /* .is-active {
background-color: $leftMenuActive;
- }
+ } */
}
// menu hover
@@ -84,9 +84,9 @@
}
}
- .is-active > .el-submenu__title {
+ /* .is-active > .el-submenu__title {
color: $leftMenuTextActive !important;
- }
+ } */
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss
index 4684597454..cf659dc197 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -18,7 +18,7 @@
font-weight: bold;
// color: rgb(191, 203, 217);
// color: rgba(255, 255, 255, 0.87);
- color: $topBarBg;
+ // color: $topBarBg;
float: left;
img {
@@ -30,32 +30,27 @@
.el-menu {
float: left;
border: none !important;
- // background-color: #304156;
background-color: $topBarBg;
.nav-item {
display: inline-block;
.el-menu-item:not(.is-active) {
- // color: rgb(191, 203, 217);
color: $topBarMenuText;
&:hover {
background-color: $topBarMenuHovor !important;
- // color: $subMenuActiveText !important;
}
&:focus {
background-color: $topBarMenuHovor !important;
- color: $topBarMenuText !important;
}
}
- .is-active {
+ /* .is-active {
background-color: $topBarMenuActive !important;
- color: $topBarMenuTextActive !important;
- }
+ } */
}
}
@@ -77,7 +72,7 @@
height: 100%;
font-size: 18px;
// color: #5a5e66;
- color: #606266;
+ // color: #606266;
vertical-align: text-bottom;
&.hover-effect {
diff --git a/frontend/src/utils/style.js b/frontend/src/utils/style.js
new file mode 100644
index 0000000000..7305bba619
--- /dev/null
+++ b/frontend/src/utils/style.js
@@ -0,0 +1,44 @@
+export function getThemeCluster(theme) {
+ const tintColor = (color, tint) => {
+ let red = parseInt(color.slice(0, 2), 16)
+ let green = parseInt(color.slice(2, 4), 16)
+ let blue = parseInt(color.slice(4, 6), 16)
+
+ if (tint === 0) { // when primary color is in its rgb space
+ return [red, green, blue].join(',')
+ } else {
+ red += Math.round(tint * (255 - red))
+ green += Math.round(tint * (255 - green))
+ blue += Math.round(tint * (255 - blue))
+
+ red = red.toString(16)
+ green = green.toString(16)
+ blue = blue.toString(16)
+
+ return `#${red}${green}${blue}`
+ }
+ }
+
+ const shadeColor = (color, shade) => {
+ let red = parseInt(color.slice(0, 2), 16)
+ let green = parseInt(color.slice(2, 4), 16)
+ let blue = parseInt(color.slice(4, 6), 16)
+
+ red = Math.round((1 - shade) * red)
+ green = Math.round((1 - shade) * green)
+ blue = Math.round((1 - shade) * blue)
+
+ red = red.toString(16)
+ green = green.toString(16)
+ blue = blue.toString(16)
+
+ return `#${red}${green}${blue}`
+ }
+
+ const clusters = [theme]
+ for (let i = 0; i <= 9; i++) {
+ clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+ }
+ clusters.push(shadeColor(theme, 0.1))
+ return clusters
+}
diff --git a/frontend/src/views/msg/all.vue b/frontend/src/views/msg/all.vue
index 6d98a09703..da43b4e8b7 100644
--- a/frontend/src/views/msg/all.vue
+++ b/frontend/src/views/msg/all.vue
@@ -180,8 +180,8 @@ export default {
>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
color: #fff;
- background-color: #0a7be0;
- border-color: #0a7be0;
+ // background-color: #0a7be0;
+ // border-color: #0a7be0;
-webkit-box-shadow: 0px 0 0 0 #0a7be0;
box-shadow: 0px 0 0 0 #0a7be0;
}
diff --git a/frontend/src/views/msg/readed.vue b/frontend/src/views/msg/readed.vue
index b3b9e40c00..058bd96489 100644
--- a/frontend/src/views/msg/readed.vue
+++ b/frontend/src/views/msg/readed.vue
@@ -210,8 +210,8 @@ export default {
>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
color: #fff;
- background-color: #0a7be0;
- border-color: #0a7be0;
+ /* background-color: #0a7be0;
+ border-color: #0a7be0; */
-webkit-box-shadow: 0px 0 0 0 #0a7be0;
box-shadow: 0px 0 0 0 #0a7be0;
}
diff --git a/frontend/src/views/msg/unread.vue b/frontend/src/views/msg/unread.vue
index 629b59f839..c5500bc8b2 100644
--- a/frontend/src/views/msg/unread.vue
+++ b/frontend/src/views/msg/unread.vue
@@ -218,8 +218,8 @@ export default {
>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
color: #fff;
- background-color: #0a7be0;
- border-color: #0a7be0;
+ /* background-color: #0a7be0;
+ border-color: #0a7be0; */
-webkit-box-shadow: 0px 0 0 0 #0a7be0;
box-shadow: 0px 0 0 0 #0a7be0;
}
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index 7583b04b44..a417b7e5a5 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -25,10 +25,10 @@
-
+
-
+
@@ -37,7 +37,7 @@
-
+
@@ -52,7 +52,7 @@
-
+
-
+
-
+
-
+
-
+
-
+
@@ -144,9 +144,9 @@ export default {
'configuration.connectTimeout': [{ required: true, message: this.$t('datasource.please_input_connect_timeout'), trigger: 'change' }]
},
allTypes: [{ name: 'mysql', label: 'MySQL', type: 'jdbc' },
- { name: 'oracle', label: 'Oracle', type: 'jdbc' },
- { name: 'sqlServer', label: 'SQL Server', type: 'jdbc' },
- { name: 'pg', label: 'PostgreSQL', type: 'jdbc' }],
+ { name: 'oracle', label: 'Oracle', type: 'jdbc' },
+ { name: 'sqlServer', label: 'SQL Server', type: 'jdbc' },
+ { name: 'pg', label: 'PostgreSQL', type: 'jdbc' }],
schemas: [],
canEdit: false,
originConfiguration: {}
@@ -202,8 +202,8 @@ export default {
this.$message.error(this.$t('datasource.please_choose_schema'))
return
}
- if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0 || this.form.configuration.maxIdleTime < 0
- || this.form.configuration.acquireIncrement < 0 || this.form.configuration.idleConnectionTestPeriod < 0 || this.form.configuration.connectTimeout < 0) {
+ if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0 || this.form.configuration.maxIdleTime < 0 ||
+ this.form.configuration.acquireIncrement < 0 || this.form.configuration.idleConnectionTestPeriod < 0 || this.form.configuration.connectTimeout < 0) {
this.$message.error(this.$t('datasource.no_less_then_0'))
return
}
@@ -212,7 +212,7 @@ export default {
const method = this.formType === 'add' ? addDs : editDs
const form = JSON.parse(JSON.stringify(this.form))
form.configuration = JSON.stringify(form.configuration)
- if(this.formType !== 'add' && this.originConfiguration !== form.configuration) {
+ if (this.formType !== 'add' && this.originConfiguration !== form.configuration) {
$confirm(this.$t('datasource.edit_datasource_msg'), () => {
method(form).then(res => {
this.$success(this.$t('commons.save_success'))
@@ -220,7 +220,7 @@ export default {
this.backToList()
})
})
- }else {
+ } else {
method(form).then(res => {
this.$success(this.$t('commons.save_success'))
this.refreshTree()
@@ -255,23 +255,22 @@ export default {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form))
data.configuration = JSON.stringify(data.configuration)
- if(data.showModel === 'show' && !this.canEdit){
+ if (data.showModel === 'show' && !this.canEdit) {
validateDsById(data.id).then(res => {
- if(res.success){
+ if (res.success) {
this.$success(this.$t('datasource.validate_success'))
- }else {
+ } else {
this.$error(this.$t(res.message))
}
this.refreshTree()
}).catch(res => {
this.$error(res.message)
})
-
- }else {
+ } else {
validateDs(data).then(res => {
- if(res.success){
+ if (res.success) {
this.$success(this.$t('datasource.validate_success'))
- }else {
+ } else {
this.$error(this.$t(res.message))
}
}).catch(res => {
@@ -301,8 +300,6 @@ export default {
}