TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-02 23:40:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 界面新增暗模式

Browse Source
This commit is contained in:
meilin.huang
2023-09-13 19:54:43 +08:00
parent 4b973b22a4
commit ead3b0d0d8
38 changed files with 502 additions and 1239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
mayfly_go_web/package.json
View File

@@ -15,11 +15,11 @@
"countup.js": "^2.7.0",
"cropperjs": "^1.5.11",
"echarts": "^5.4.0",
"element-plus": "^2.3.8",
"element-plus": "^2.3.12",
"jsencrypt": "^3.3.1",
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"monaco-editor": "^0.41.0",
"monaco-editor": "^0.43.0",
"monaco-sql-languages": "^0.11.0",
"monaco-themes": "^0.4.4",
"nprogress": "^0.2.0",

2
mayfly_go_web/src/components/monaco/MonacoEditor.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="monaco-editor" style="border: 1px solid #ccc">
<div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5)">
<div class="monaco-editor-content" ref="monacoTextarea" :style="{ height: height }"></div>
<el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage">
<el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>

8
mayfly_go_web/src/components/pagetable/PageTable.vue
View File

@@ -145,13 +145,7 @@
width="600px"
>
<template #default>
<el-input
input-style="color: black;"
:autosize="{ minRows: 3, maxRows: 15 }"
disabled
v-model="formatVal"
type="textarea"
/>
<el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
</template>
<template #reference>
<el-link

12
mayfly_go_web/src/components/terminal/TerminalDialog.vue
View File

@@ -288,18 +288,18 @@ defineExpose({
}
.terminal-status-error {
box-shadow: 0 3px 4px var(--color-danger);
border-color: var(--color-danger);
box-shadow: 0 3px 4px var(--el-color-danger);
border-color: var(--el-color-danger);
}
.terminal-status-no-connect {
box-shadow: 0 3px 4px var(--color-warning);
border-color: var(--color-warning);
box-shadow: 0 3px 4px var(--el-color-warning);
border-color: var(--el-color-warning);
}
.terminal-status-success {
box-shadow: 0 3px 4px var(--color-success);
border-color: var(--color-success);
box-shadow: 0 3px 4px var(--el-color-success);
border-color: var(--el-color-success);
}
.el-card__body {

1
mayfly_go_web/src/main.ts
View File

@@ -9,6 +9,7 @@ import { registElSvgIcon } from '@/common/utils/svgIcons';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import 'element-plus/theme-chalk/dark/css-vars.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';

6
mayfly_go_web/src/store/themeConfig.ts
View File

@@ -24,13 +24,13 @@ export const useThemeConfig = defineStore('themeConfig', {
// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
topBar: '#ffffff',
// 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
menuBar: '#545c64',
menuBar: '#FFFFFF',
// 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
columnsMenuBar: '#545c64',
// 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
topBarColor: '#606266',
// 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
menuBarColor: '#eaeaea',
menuBarColor: '#606266',
// 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
columnsMenuBarColor: '#e6e6e6',
// 是否开启顶栏背景颜色渐变
@@ -81,6 +81,8 @@ export const useThemeConfig = defineStore('themeConfig', {
isSortableTagsView: true,
// 是否开启 Footer 底部版权信息
isFooter: false,
// 是否暗模式
isDark: false,
// 是否开启灰色模式
isGrayscale: false,
// 是否开启色弱模式

49
mayfly_go_web/src/theme/app.scss
View File

@@ -7,6 +7,23 @@
outline: none !important;
}
:root {
--color-white: #ffffff;
--bg-main-color: #f8f8f8;
--bg-color: #f5f5ff;
--border-color-light: #f1f2f3;
--el-color-primary-lighter: #ecf5ff;
--color-success-lighter: #f0f9eb;
--color-warning-lighter: #fdf6ec;
--color-danger-lighter: #fef0f0;
--color-dark-hover: #0000001a;
--color-menu-hover: rgba(0, 0, 0, 0.2);
--color-user-hover: rgba(0, 0, 0, 0.04);
--color-seting-main: #e9eef3;
--color-seting-aside: #d3dce6;
--color-seting-header: #b3c0d1;
}
html,
body,
#app {
@@ -18,7 +35,7 @@ body,
font-weight: 450;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: #f8f8f8;
background-color: var(--bg-main-color);
font-size: 14px;
overflow: hidden;
position: relative;
@@ -53,7 +70,7 @@ body,
padding: 0 !important;
overflow: hidden;
width: 100%;
background-color: #f8f8f8;
background-color: var(--bg-main-color);
}
.el-scrollbar {
@@ -65,11 +82,11 @@ body,
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid #ebeef5;
border: 1px solid var(--el-border-color-light, #ebeef5);
}
.layout-el-aside-br-color {
border-right: 1px solid rgb(238, 238, 238);
border-right: 1px solid var(--el-border-color-light, #ebeef5);
}
.layout-aside-width-default {
@@ -116,7 +133,7 @@ body,
display: flex;
align-items: center;
margin-bottom: 0 !important;
border-bottom: 1px solid rgb(230, 230, 230);
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
}
.el-divider {
@@ -128,7 +145,7 @@ body,
------------------------------- */
#nprogress {
.bar {
background: var(--color-primary) !important;
background: var(--el-color-primary) !important;
z-index: 9999999 !important;
}
}
@@ -195,23 +212,23 @@ body,
/* 颜色值
------------------------------- */
.color-primary {
color: var(--color-primary);
color: var(--el-color-primary);
}
.color-success {
color: var(--color-success);
color: var(--el-color-success);
}
.color-warning {
color: var(--color-warning);
color: var(--el-color-warning);
}
.color-danger {
color: var(--color-danger);
color: var(--el-color-danger);
}
.color-info {
color: var(--color-info);
color: var(--el-color-info);
}
/* 字体大小全局样式
@@ -262,17 +279,17 @@ body,
::-webkit-scrollbar {
width: 4px;
height: 8px;
background-color: #F5F5F5;
background-color: var(--el-border-color-light, #ebeef5);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
background-color: var(--el-border-color-light, #ebeef5);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #F5F5F5;
background-color: var(--el-border-color-light, #ebeef5);
}
.el-menu .fa {
@@ -318,10 +335,8 @@ body,
.toolbar {
width: 100%;
padding: 6px;
background-color: #ffffff;
overflow: hidden;
line-height: 32px;
border: 1px solid #e6ebf5;
}
.fl {
@@ -355,5 +370,5 @@ body,
transition: color 0.3s;
}
.pointer-icon:hover {
color: var(--color-primary); /* 鼠标移动到图标时的颜色 */
color: var(--el-color-primary); /* 鼠标移动到图标时的颜色 */
}

1
mayfly_go_web/src/theme/base.scss
View File

@@ -1,2 +1 @@
@import 'common/transition.scss';
@import 'common/var.scss';

129
mayfly_go_web/src/theme/common/var.scss
View File

@@ -1,129 +0,0 @@
/**
* scss 怎么动态创建变量
* 本来想用 @function，@for 好像不可以动态创建
* 2020.12.19 lyt 记录
**/
/* 定义初始颜色
------------------------------- */
$--color-primary: #409eff !default;
$--color-whites: #ffffff !default;
$--color-blacks: #000000 !default;
$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
$--color-primary-light-4: mix($--color-whites, $--color-primary, 40%) !default;
$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default;
$--color-primary-light-6: mix($--color-whites, $--color-primary, 60%) !default;
$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default;
$--color-primary-light-8: mix($--color-whites, $--color-primary, 80%) !default;
$--color-primary-light-9: mix($--color-whites, $--color-primary, 90%) !default;
$--color-success: #67c23a !default;
$--color-success-light-1: mix($--color-whites, $--color-success, 10%) !default;
$--color-success-light-2: mix($--color-whites, $--color-success, 20%) !default;
$--color-success-light-3: mix($--color-whites, $--color-success, 30%) !default;
$--color-success-light-4: mix($--color-whites, $--color-success, 40%) !default;
$--color-success-light-5: mix($--color-whites, $--color-success, 50%) !default;
$--color-success-light-6: mix($--color-whites, $--color-success, 60%) !default;
$--color-success-light-7: mix($--color-whites, $--color-success, 70%) !default;
$--color-success-light-8: mix($--color-whites, $--color-success, 80%) !default;
$--color-success-light-9: mix($--color-whites, $--color-success, 90%) !default;
$--color-info: #909399 !default;
$--color-info-light-1: mix($--color-whites, $--color-info, 10%) !default;
$--color-info-light-2: mix($--color-whites, $--color-info, 20%) !default;
$--color-info-light-3: mix($--color-whites, $--color-info, 30%) !default;
$--color-info-light-4: mix($--color-whites, $--color-info, 40%) !default;
$--color-info-light-5: mix($--color-whites, $--color-info, 50%) !default;
$--color-info-light-6: mix($--color-whites, $--color-info, 60%) !default;
$--color-info-light-7: mix($--color-whites, $--color-info, 70%) !default;
$--color-info-light-8: mix($--color-whites, $--color-info, 80%) !default;
$--color-info-light-9: mix($--color-whites, $--color-info, 90%) !default;
$--color-warning: #e6a23c !default;
$--color-warning-light-1: mix($--color-whites, $--color-warning, 10%) !default;
$--color-warning-light-2: mix($--color-whites, $--color-warning, 20%) !default;
$--color-warning-light-3: mix($--color-whites, $--color-warning, 30%) !default;
$--color-warning-light-4: mix($--color-whites, $--color-warning, 40%) !default;
$--color-warning-light-5: mix($--color-whites, $--color-warning, 50%) !default;
$--color-warning-light-6: mix($--color-whites, $--color-warning, 60%) !default;
$--color-warning-light-7: mix($--color-whites, $--color-warning, 70%) !default;
$--color-warning-light-8: mix($--color-whites, $--color-warning, 80%) !default;
$--color-warning-light-9: mix($--color-whites, $--color-warning, 90%) !default;
$--color-danger: #f56c6c !default;
$--color-danger-light-1: mix($--color-whites, $--color-danger, 10%) !default;
$--color-danger-light-2: mix($--color-whites, $--color-danger, 20%) !default;
$--color-danger-light-3: mix($--color-whites, $--color-danger, 30%) !default;
$--color-danger-light-4: mix($--color-whites, $--color-danger, 40%) !default;
$--color-danger-light-5: mix($--color-whites, $--color-danger, 50%) !default;
$--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default;
$--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
$--bg-topBar: #ffffff;
$--bg-menuBar: #545c64;
$--bg-columnsMenuBar: #545c64;
$--bg-topBarColor: #606266;
$--bg-menuBarColor: #eaeaea;
$--bg-columnsMenuBarColor: #e6e6e6;
/* 赋值给:root
------------------------------- */
:root {
--color-primary: #{$--color-primary};
--color-whites: #{$--color-whites};
--color-blacks: #{$--color-blacks};
--color-primary-light-1: #{$--color-primary-light-1};
--color-primary-light-2: #{$--color-primary-light-2};
--color-primary-light-3: #{$--color-primary-light-3};
--color-primary-light-4: #{$--color-primary-light-4};
--color-primary-light-5: #{$--color-primary-light-5};
--color-primary-light-6: #{$--color-primary-light-6};
--color-primary-light-7: #{$--color-primary-light-7};
--color-primary-light-8: #{$--color-primary-light-8};
--color-primary-light-9: #{$--color-primary-light-9};
--color-success: #{$--color-success};
--color-success-light-1: #{$--color-success-light-1};
--color-success-light-2: #{$--color-success-light-2};
--color-success-light-3: #{$--color-success-light-3};
--color-success-light-4: #{$--color-success-light-4};
--color-success-light-5: #{$--color-success-light-5};
--color-success-light-6: #{$--color-success-light-6};
--color-success-light-7: #{$--color-success-light-7};
--color-success-light-8: #{$--color-success-light-8};
--color-success-light-9: #{$--color-success-light-9};
--color-info: #{$--color-info};
--color-info-light-1: #{$--color-info-light-1};
--color-info-light-2: #{$--color-info-light-2};
--color-info-light-3: #{$--color-info-light-3};
--color-info-light-4: #{$--color-info-light-4};
--color-info-light-5: #{$--color-info-light-5};
--color-info-light-6: #{$--color-info-light-6};
--color-info-light-7: #{$--color-info-light-7};
--color-info-light-8: #{$--color-info-light-8};
--color-info-light-9: #{$--color-info-light-9};
--color-warning: #{$--color-warning};
--color-warning-light-1: #{$--color-warning-light-1};
--color-warning-light-2: #{$--color-warning-light-2};
--color-warning-light-3: #{$--color-warning-light-3};
--color-warning-light-4: #{$--color-warning-light-4};
--color-warning-light-5: #{$--color-warning-light-5};
--color-warning-light-6: #{$--color-warning-light-6};
--color-warning-light-7: #{$--color-warning-light-7};
--color-warning-light-8: #{$--color-warning-light-8};
--color-warning-light-9: #{$--color-warning-light-9};
--color-danger: #{$--color-danger};
--color-danger-light-1: #{$--color-danger-light-1};
--color-danger-light-2: #{$--color-danger-light-2};
--color-danger-light-3: #{$--color-danger-light-3};
--color-danger-light-4: #{$--color-danger-light-4};
--color-danger-light-5: #{$--color-danger-light-5};
--color-danger-light-6: #{$--color-danger-light-6};
--color-danger-light-7: #{$--color-danger-light-7};
--color-danger-light-8: #{$--color-danger-light-8};
--color-danger-light-9: #{$--color-danger-light-9};
--bg-topBar: #{$--bg-topBar};
--bg-menuBar: #{$--bg-menuBar};
--bg-columnsMenuBar: #{$--bg-columnsMenuBar};
--bg-topBarColor: #{$--bg-topBarColor};
--bg-menuBarColor: #{$--bg-menuBarColor};
--bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor};
}

27
mayfly_go_web/src/theme/dark.scss Normal file
View File

@@ -0,0 +1,27 @@
html.dark {
// 变量(自定义时，只需修改这里的值)
--next-bg-main: #1f1f1f;
--next-color-white: #ffffff;
--next-color-disabled: #191919;
--next-color-bar: #dadada;
--next-color-primary: #303030;
--next-border-color: #424242;
--next-border-black: #333333;
--next-border-columns: #2a2a2a;
--next-color-seting: #505050;
--next-text-color-regular: #9b9da1;
--next-text-color-placeholder: #7a7a7a;
--next-color-hover: #3c3c3c;
--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
/* 自定义深色背景颜色 */
// root
--bg-main-color: var(--next-bg-main) !important;
--bg-topBar: var(--next-color-disabled) !important;
--bg-topBarColor: var(--next-color-bar) !important;
--bg-menuBar: var(--next-color-disabled) !important;
--bg-menuBarColor: var(--next-color-bar) !important;
--bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
--bg-columnsMenuBar: var(--next-color-disabled) !important;
--bg-columnsMenuBarColor: var(--next-color-bar) !important;
}

979
mayfly_go_web/src/theme/element.scss
View File

File diff suppressed because it is too large Load Diff

1
mayfly_go_web/src/theme/index.scss
View File

@@ -4,4 +4,5 @@
@import './element.scss';
@import './media/media.scss';
@import './waves.scss';
@import './dark.scss';
@import './iconSelector.scss';

2
mayfly_go_web/src/theme/loading.scss
View File

@@ -15,7 +15,7 @@
.loading-next .loading-next-box-warp .loading-next-box-item {
width: 33.333333%;
height: 33.333333%;
background: var(--color-primary);
background: var(--el-color-primary);
float: left;
animation: loading-next-animation 1.2s infinite ease;
border-radius: 1px;

6
mayfly_go_web/src/theme/media/scrollbar.scss
View File

@@ -9,7 +9,7 @@
height: 3px !important;
}
::-webkit-scrollbar-track-piece {
background-color: #f8f8f8;
background-color: var(--bg-main-color);
}
// 滚动条的设置
::-webkit-scrollbar-thumb {
@@ -40,7 +40,7 @@
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #f8f8f8;
background-color: var(--bg-main-color);
}
// 滚动条的设置
::-webkit-scrollbar-thumb {
@@ -53,4 +53,4 @@
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 147, 153, 0.5);
}
}
}

34
mayfly_go_web/src/theme/mixins/element-mixins.scss
View File

@@ -1,34 +0,0 @@
/* Button 按钮
------------------------------- */
@mixin Button($main, $c1, $c2) {
color: set-color($main);
background: set-color($c1);
border-color: set-color($c2);
}
/* Radio 单选框、Checkbox 多选框
------------------------------- */
@mixin RadioCheckbox($name) {
background-color: set-color($name);
border-color: set-color($name);
}
/* Tag 标签
------------------------------- */
@mixin Tag($main, $c1, $c2) {
color: set-color($main);
background-color: set-color($c1);
border-color: set-color($c2);
}
@mixin TagDark($main, $c1) {
color: set-color($main);
background-color: set-color($c1);
}
/* Alert 警告
------------------------------- */
@mixin Alert($main, $c1, $c2) {
color: set-color($main);
background: set-color($c1);
border: 1px solid set-color($c2);
}

5
mayfly_go_web/src/theme/mixins/function.scss
View File

@@ -1,5 +0,0 @@
/* 颜色调用函数
------------------------------- */
@function set-color($key) {
@return var(--color-#{$key});
}

14
mayfly_go_web/src/theme/mixins/mixins.scss → mayfly_go_web/src/theme/mixins/index.scss
View File

@@ -1,3 +1,15 @@
/* 第三方图标字体间距/大小设置
------------------------------- */
@mixin generalIcon {
font-size: 14px !important;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
justify-content: center;
}
/* 文本不换行
------------------------------- */
@mixin text-no-wrap() {
@@ -41,4 +53,4 @@
&::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
}
}

9
mayfly_go_web/src/types/pinia.d.ts vendored
View File

@@ -1,5 +1,5 @@
declare interface UserInfoState<T = any> {
userInfo: any
userInfo: any;
}
declare interface ThemeConfigState {
@@ -37,6 +37,7 @@ declare interface ThemeConfigState {
isCacheTagsView: boolean;
isSortableTagsView: boolean;
isFooter: boolean;
isDark: boolean;
isGrayscale: boolean;
isInvert: boolean;
isWartermark: boolean;
@@ -61,8 +62,8 @@ declare interface ThemeConfigState {
// TagsView 路由列表
declare interface TagsViewRoutesState<T = any> {
tagsViewRoutes: T[];
isTagsViewCurrenFull: Boolean;
tagsViewRoutes: T[];
isTagsViewCurrenFull: Boolean;
}
// 路由列表
@@ -74,4 +75,4 @@ declare interface RoutesListState {
declare interface KeepAliveNamesState {
keepAliveNames: string[];
cachedViews: string[];
}
}

22
mayfly_go_web/src/views/home/Home.vue
View File

@@ -7,8 +7,7 @@
<img :src="userInfo.photo" />
<div class="home-card-first-right ml15">
<div class="flex-margin">
<div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}`
}}</div>
<div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}` }}</div>
</div>
</div>
</div>
@@ -31,7 +30,7 @@
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
// import * as echarts from 'echarts';
import { CountUp } from 'countup.js';
import { formatAxis } from '@/common/utils/format.ts';
import { formatAxis } from '@/common/utils/format';
import { indexApi } from './api';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
@@ -65,9 +64,7 @@ const state = reactive({
],
});
const {
topCardItemList,
} = toRefs(state)
const { topCardItemList } = toRefs(state);
// 当前时间提示语
const currentTime = computed(() => {
@@ -179,8 +176,8 @@ onMounted(() => {
}
.home-card-first {
background: white;
border: 1px solid #ebeef5;
background: var(--bg-main-color);
border: 1px solid var(--el-border-color-light, #ebeef5);
display: flex;
align-items: center;
@@ -188,7 +185,7 @@ onMounted(() => {
width: 60px;
height: 60px;
border-radius: 100%;
border: 2px solid var(--color-primary-light-5);
border: 2px solid var(--el-color-primary-light-5);
}
.home-card-first-right {
@@ -247,7 +244,8 @@ onMounted(() => {
.home-dynamic-item-left {
text-align: right;
.home-dynamic-item-left-time1 {}
.home-dynamic-item-left-time1 {
}
.home-dynamic-item-left-time2 {
font-size: 13px;
@@ -262,7 +260,7 @@ onMounted(() => {
position: relative;
i {
color: var(--color-primary);
color: var(--el-color-primary);
font-size: 12px;
position: absolute;
top: 1px;
@@ -284,7 +282,7 @@ onMounted(() => {
border-radius: 100%;
padding: 3px 2px 2px;
text-align: center;
color: var(--color-primary);
color: var(--el-color-primary);
}
}

19
mayfly_go_web/src/views/layout/component/columnsAside.vue
View File

@@ -2,11 +2,18 @@
<div class="layout-columns-aside">
<el-scrollbar>
<ul>
<li v-for="(v, k) in state.columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" :ref="
(el) => {
if (el) columnsAsideOffsetTopRefs[k] = el;
}
" :class="{ 'layout-columns-active': state.liIndex === k }" :title="v.meta.title">
<li
v-for="(v, k) in state.columnsAsideList"
:key="k"
@click="onColumnsAsideMenuClick(v, k)"
:ref="
(el) => {
if (el) columnsAsideOffsetTopRefs[k] = el;
}
"
:class="{ 'layout-columns-active': state.liIndex === k }"
:title="v.meta.title"
>
<div class="layout-columns-aside-li-box" v-if="!v.meta.link || (v.meta.link && v.meta.linkType == 1)">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title font12">
@@ -166,7 +173,7 @@ onBeforeRouteUpdate((to) => {
}
.columns-round {
background: var(--color-primary);
background: var(--el-color-primary);
color: #ffffff;
position: absolute;
left: 50%;

8
mayfly_go_web/src/views/layout/logo/index.vue
View File

@@ -3,7 +3,9 @@
<img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
<span>
{{ `${themeConfig.globalTitle}` }}
<sub><span style="font-size: 10px;color:goldenrod">{{ ` ${config.version}` }}</span></sub>
<sub
><span style="font-size: 10px; color: goldenrod">{{ ` ${config.version}` }}</span></sub
>
</span>
</div>
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
@@ -41,14 +43,14 @@ const onThemeConfigChange = () => {
align-items: center;
justify-content: center;
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
color: var(--color-primary);
color: var(--el-color-primary);
font-size: 16px;
cursor: pointer;
animation: logoAnimation 0.3s ease-in-out;
&:hover {
span {
color: var(--color-primary-light-2);
color: var(--el-color-primary-light-2);
}
}

3
mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
View File

@@ -20,7 +20,6 @@ import Logo from '@/views/layout/logo/index.vue';
import Horizontal from '@/views/layout/navMenu/horizontal.vue';
import mittBus from '@/common/utils/mitt';
const { themeConfig } = storeToRefs(useThemeConfig());
const { routesList } = storeToRefs(useRoutesList());
const route = useRoute();
@@ -106,6 +105,6 @@ onUnmounted(() => {
padding-right: 15px;
background: var(--bg-topBar);
overflow: hidden;
border-bottom: 1px solid #f1f2f3;
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
}
</style>

219
mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
View File

@@ -1,47 +1,48 @@
<template>
<div class="layout-breadcrumb-seting">
<el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
@close="onDrawerClose">
<el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
<el-scrollbar class="layout-breadcrumb-seting-bar">
<!-- ssh终端主题 -->
<el-divider content-position="left">终端主题</el-divider>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">字体颜色</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.terminalForeground" size="small"
@change="onColorPickerChange('terminalForeground')">
<el-color-picker v-model="themeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
</el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">背景颜色</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.terminalBackground" size="small"
@change="onColorPickerChange('terminalBackground')">
<el-color-picker v-model="themeConfig.terminalBackground" size="small" @change="onColorPickerChange('terminalBackground')">
</el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">cursor颜色</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.terminalCursor" size="small"
@change="onColorPickerChange('terminalCursor')">
</el-color-picker>
<el-color-picker v-model="themeConfig.terminalCursor" size="small" @change="onColorPickerChange('terminalCursor')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input-number v-model="themeConfig.terminalFontSize" controls-position="right" :min="12"
:max="24" @change="setLocalThemeConfig" size="small" style="width: 90px">
<el-input-number
v-model="themeConfig.terminalFontSize"
controls-position="right"
:min="12"
:max="24"
@change="setLocalThemeConfig"
size="small"
style="width: 90px"
>
</el-input-number>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">字体粗细</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small"
style="width: 90px">
<el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small" style="width: 90px">
<el-option label="normal" value="normal"> </el-option>
<el-option label="bold" value="bold"> </el-option>
</el-select>
@@ -52,8 +53,7 @@
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small"
style="width: 130px">
<el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small" style="width: 130px">
<el-option label="vs" value="vs"> </el-option>
<el-option label="vs-dark" value="vs-dark"> </el-option>
<el-option label="SolarizedLight" value="SolarizedLight"> </el-option>
@@ -66,36 +66,31 @@
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.primary" size="small"
@change="onColorPickerChange('primary')"> </el-color-picker>
<el-color-picker v-model="themeConfig.primary" size="small" @change="onColorPickerChange('primary')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">success</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.success" size="small"
@change="onColorPickerChange('success')"> </el-color-picker>
<el-color-picker v-model="themeConfig.success" size="small" @change="onColorPickerChange('success')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">info</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')">
</el-color-picker>
<el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.warning" size="small"
@change="onColorPickerChange('warning')"> </el-color-picker>
<el-color-picker v-model="themeConfig.warning" size="small" @change="onColorPickerChange('warning')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')">
</el-color-picker>
<el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')"> </el-color-picker>
</div>
</div>
@@ -104,46 +99,37 @@
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.topBar" size="small"
@change="onBgColorPickerChange('topBar')"> </el-color-picker>
<el-color-picker v-model="themeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.menuBar" size="small"
@change="onBgColorPickerChange('menuBar')"> </el-color-picker>
<el-color-picker v-model="themeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.columnsMenuBar" size="small"
@change="onBgColorPickerChange('columnsMenuBar')">
</el-color-picker>
<el-color-picker v-model="themeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.topBarColor" size="small"
@change="onBgColorPickerChange('topBarColor')">
</el-color-picker>
<el-color-picker v-model="themeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.menuBarColor" size="small"
@change="onBgColorPickerChange('menuBarColor')">
</el-color-picker>
<el-color-picker v-model="themeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small"
@change="onBgColorPickerChange('columnsMenuBarColor')">
<el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small" @change="onBgColorPickerChange('columnsMenuBarColor')">
</el-color-picker>
</div>
</div>
@@ -162,15 +148,13 @@
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景渐变</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="themeConfig.isColumnsMenuBarColorGradual"
@change="onColumnsMenuBarGradualChange"></el-switch>
<el-switch v-model="themeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="themeConfig.isMenuBarColorHighlight"
@change="onMenuBarHighlightChange"></el-switch>
<el-switch v-model="themeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
</div>
</div>
@@ -194,12 +178,10 @@
<el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15"
:style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
<div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'"
@change="onClassicSplitMenuChange">
<el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'" @change="onClassicSplitMenuChange">
</el-switch>
</div>
</div>
@@ -212,8 +194,15 @@
<div class="layout-breadcrumb-seting-bar-flex mt11">
<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input-number v-model="themeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
@change="setLocalThemeConfig" size="small" style="width: 90px">
<el-input-number
v-model="themeConfig.lockScreenTime"
controls-position="right"
:min="0"
:max="9999"
@change="setLocalThemeConfig"
size="small"
style="width: 90px"
>
</el-input-number>
</div>
</div>
@@ -226,12 +215,14 @@
<el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15"
:style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
<div class="layout-breadcrumb-seting-bar-flex-label">开启Breadcrumb</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="themeConfig.isBreadcrumb" :disabled="themeConfig.layout === 'transverse'"
@change="onIsBreadcrumbChange"></el-switch>
<el-switch
v-model="themeConfig.isBreadcrumb"
:disabled="themeConfig.layout === 'transverse'"
@change="onIsBreadcrumbChange"
></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -288,8 +279,7 @@
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px"
@change="setLocalThemeConfig">
<el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="风格1" value="tags-style-one"></el-option>
<el-option label="风格2" value="tags-style-two"></el-option>
<el-option label="风格3" value="tags-style-three"></el-option>
@@ -299,8 +289,7 @@
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px"
@change="setLocalThemeConfig">
<el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="opacitys" value="opacitys"></el-option>
@@ -310,8 +299,7 @@
<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small"
style="width: 90px" @change="setLocalThemeConfig">
<el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="圆角" value="columns-round"></el-option>
<el-option label="卡片" value="columns-card"></el-option>
</el-select>
@@ -323,16 +311,14 @@
<div class="layout-drawer-content-flex">
<!-- defaults 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
<section class="el-container el-circular"
:class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
<section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
<aside class="el-aside" style="width: 20px"></aside>
<section class="el-container is-vertical">
<header class="el-header" style="height: 10px"></header>
<main class="el-main"></main>
</section>
</section>
<div class="layout-tips-warp"
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">默认</p>
</div>
@@ -340,8 +326,7 @@
</div>
<!-- classic 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('classic')">
<section class="el-container is-vertical el-circular"
:class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
<header class="el-header" style="height: 10px"></header>
<section class="el-container">
<aside class="el-aside" style="width: 20px"></aside>
@@ -350,8 +335,7 @@
</section>
</section>
</section>
<div class="layout-tips-warp"
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">经典</p>
</div>
@@ -359,8 +343,7 @@
</div>
<!-- transverse 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
<section class="el-container is-vertical el-circular"
:class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
<header class="el-header" style="height: 10px"></header>
<section class="el-container">
<section class="el-container is-vertical">
@@ -368,8 +351,7 @@
</section>
</section>
</section>
<div class="layout-tips-warp"
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">横向</p>
</div>
@@ -377,8 +359,7 @@
</div>
<!-- columns 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('columns')">
<section class="el-container el-circular"
:class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
<section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
<aside class="el-aside-dark" style="width: 10px"></aside>
<aside class="el-aside" style="width: 20px"></aside>
<section class="el-container is-vertical">
@@ -386,8 +367,7 @@
<main class="el-main"></main>
</section>
</section>
<div class="layout-tips-warp"
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">分栏</p>
</div>
@@ -395,10 +375,15 @@
</div>
</div>
<div class="copy-config">
<el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false">
</el-alert>
<el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
<el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false"> </el-alert>
<el-button
size="small"
class="copy-config-btn"
icon="el-icon-document-copy"
type="primary"
ref="copyConfigBtnRef"
@click="onCopyConfigClick($event.target)"
>一键复制配置
</el-button>
</div>
</el-scrollbar>
@@ -412,8 +397,8 @@ import { ElMessage } from 'element-plus';
import ClipboardJS from 'clipboard';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/store/themeConfig';
import { getLightColor } from '@/common/utils/theme.ts';
import { setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
import { getLightColor } from '@/common/utils/theme';
import { setLocal, getLocal, removeLocal } from '@/common/utils/storage';
import mittBus from '@/common/utils/mitt';
const copyConfigBtnRef = ref();
@@ -428,7 +413,7 @@ const onColorPickerChange = (color: string) => {
const setPropertyFun = (color: string, targetVal: any) => {
document.documentElement.style.setProperty(color, targetVal);
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10));
document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10) as any);
}
};
// 2、菜单 / 顶栏
@@ -449,11 +434,7 @@ const onMenuBarGradualChange = () => {
};
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
const onColumnsMenuBarGradualChange = () => {
setGraduaFun(
'.layout-container .layout-columns-aside',
themeConfig.value.isColumnsMenuBarColorGradual,
themeConfig.value.columnsMenuBar
);
setGraduaFun('.layout-container .layout-columns-aside', themeConfig.value.isColumnsMenuBarColorGradual, themeConfig.value.columnsMenuBar);
};
// 2、菜单 / 顶栏 --> 背景渐变函数
const setGraduaFun = (el: string, bool: boolean, color: string) => {
@@ -522,17 +503,14 @@ const onSortableTagsViewChange = () => {
mittBus.emit('openOrCloseSortable');
setLocalThemeConfig();
};
// 4、界面显示 --> 灰色模式/色弱模式
// 4、界面显示 --> 暗模式/灰色模式/色弱模式
const onAddFilterChange = (attr: string) => {
if (attr === 'grayscale') {
if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
} else {
if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
}
const cssAttr =
attr === 'grayscale'
? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})`
: `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
const cssAttr = attr === 'grayscale' ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})` : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
const appEle: any = document.querySelector('#app');
appEle.setAttribute('style', `filter: ${cssAttr}`);
setLocalThemeConfig();
@@ -549,49 +527,37 @@ const onSetLayout = (layout: string) => {
};
// 设置布局切换，重置主题样式
const initSetLayoutChange = () => {
// themeConfig.value.menuBar = '#FFFFFF';
// themeConfig.value.menuBarColor = '#606266';
// themeConfig.value.topBar = '#ffffff';
// themeConfig.value.topBarColor = '#606266';
if (themeConfig.value.layout === 'classic') {
themeConfig.value.isShowLogo = true;
themeConfig.value.isBreadcrumb = true;
themeConfig.value.isCollapse = false;
themeConfig.value.isClassicSplitMenu = false;
themeConfig.value.menuBar = '#FFFFFF';
themeConfig.value.menuBarColor = '#606266';
themeConfig.value.topBar = '#ffffff';
themeConfig.value.topBarColor = '#606266';
initLayoutChangeFun();
} else if (themeConfig.value.layout === 'transverse') {
themeConfig.value.isShowLogo = true;
themeConfig.value.isBreadcrumb = false;
themeConfig.value.isCollapse = false;
themeConfig.value.isTagsview = false;
themeConfig.value.isTagsview = true;
themeConfig.value.isClassicSplitMenu = false;
themeConfig.value.menuBarColor = '#FFFFFF';
themeConfig.value.topBar = '#545c64';
themeConfig.value.topBarColor = '#FFFFFF';
initLayoutChangeFun();
} else if (themeConfig.value.layout === 'columns') {
themeConfig.value.isShowLogo = true;
themeConfig.value.isBreadcrumb = true;
themeConfig.value.isCollapse = false;
themeConfig.value.isTagsview = true;
themeConfig.value.isClassicSplitMenu = false;
themeConfig.value.menuBar = '#FFFFFF';
themeConfig.value.menuBarColor = '#606266';
themeConfig.value.topBar = '#ffffff';
themeConfig.value.topBarColor = '#606266';
initLayoutChangeFun();
} else {
themeConfig.value.isShowLogo = false;
themeConfig.value.isBreadcrumb = true;
themeConfig.value.isCollapse = false;
themeConfig.value.isTagsview = true;
themeConfig.value.isClassicSplitMenu = false;
themeConfig.value.menuBar = '#545c64';
themeConfig.value.menuBarColor = '#eaeaea';
themeConfig.value.topBar = '#FFFFFF';
themeConfig.value.topBarColor = '#606266';
initLayoutChangeFun();
}
initLayoutChangeFun();
};
// 设置布局切换函数
const initLayoutChangeFun = () => {
@@ -660,6 +626,7 @@ onMounted(() => {
onMenuBarHighlightChange();
themeConfig.value.isCollapse = false;
});
window.addEventListener('load', () => {
// 刷新页面时，设置了值，直接取缓存中的值进行初始化
setTimeout(() => {
@@ -691,7 +658,7 @@ onMounted(() => {
}
// // 语言国际化
// if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
}, 1100);
}, 100);
});
});
});
@@ -701,7 +668,7 @@ onUnmounted(() => {
mittBus.off('layoutMobileResize');
});
defineExpose({openDrawer})
defineExpose({ openDrawer });
</script>
<style scoped lang="scss">
@@ -767,7 +734,7 @@ defineExpose({openDrawer})
.drawer-layout-active {
border: 1px solid;
border-color: var(--color-primary);
border-color: var(--el-color-primary);
}
.layout-tips-warp,
@@ -778,7 +745,7 @@ defineExpose({openDrawer})
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid;
border-color: var(--color-primary-light-4);
border-color: var(--el-color-primary-light-4);
border-radius: 100%;
padding: 4px;
@@ -788,7 +755,7 @@ defineExpose({openDrawer})
height: 30px;
z-index: 9;
border: 1px solid;
border-color: var(--color-primary-light-4);
border-color: var(--el-color-primary-light-4);
border-radius: 100%;
.layout-tips-txt {
@@ -799,7 +766,7 @@ defineExpose({openDrawer})
line-height: 1;
letter-spacing: 2px;
white-space: nowrap;
color: var(--color-primary-light-4);
color: var(--el-color-primary-light-4);
text-align: center;
transform: rotate(30deg);
left: -1px;
@@ -813,14 +780,14 @@ defineExpose({openDrawer})
.layout-tips-warp-active {
border: 1px solid;
border-color: var(--color-primary);
border-color: var(--el-color-primary);
.layout-tips-box {
border: 1px solid;
border-color: var(--color-primary);
border-color: var(--el-color-primary);
.layout-tips-txt {
color: var(--color-primary) !important;
color: var(--el-color-primary) !important;
background-color: #e9eef3 !important;
}
}
@@ -830,20 +797,20 @@ defineExpose({openDrawer})
.el-circular {
transition: all 0.3s ease-in-out;
border: 1px solid;
border-color: var(--color-primary);
border-color: var(--el-color-primary);
}
.layout-tips-warp {
transition: all 0.3s ease-in-out;
border-color: var(--color-primary);
border-color: var(--el-color-primary);
.layout-tips-box {
transition: inherit;
border-color: var(--color-primary);
border-color: var(--el-color-primary);
.layout-tips-txt {
transition: inherit;
color: var(--color-primary) !important;
color: var(--el-color-primary) !important;
background-color: #e9eef3 !important;
}
}

34
mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
View File

@@ -1,6 +1,16 @@
<template>
<div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user-icon">
<el-switch
@change="switchDark(state.isDark)"
v-model="state.isDark"
active-action-icon="Moon"
inactive-action-icon="Sunny"
style="--el-switch-off-color: #c4c9c4; --el-switch-on-color: #2c2c2c"
class="dark-icon"
/>
</div>
<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user-icon">
<el-icon title="组件大小">
<plus />
@@ -13,7 +23,7 @@
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-dropdown> -->
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
<el-icon title="菜单搜索">
<search />
@@ -65,7 +75,7 @@
</template>
<script setup lang="ts" name="layoutBreadcrumbUser">
import { ref, computed, reactive, onMounted } from 'vue';
import { ref, computed, reactive, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import screenfull from 'screenfull';
@@ -82,6 +92,7 @@ import openApi from '@/common/openApi';
const router = useRouter();
const searchRef = ref();
const state = reactive({
isDark: false,
isScreenfull: false,
isShowUserNewsPopover: false,
disabledI18n: 'zh-cn',
@@ -152,6 +163,19 @@ const onHandleCommandClick = (path: string) => {
}
};
const switchDark = (isDark: boolean) => {
themeConfig.value.isDark = isDark;
setLocal('themeConfig', themeConfig.value);
const body = document.documentElement as HTMLElement;
if (isDark) {
body.setAttribute('class', 'dark');
themeConfig.value.editorTheme = 'vs-dark';
} else {
body.setAttribute('class', '');
themeConfig.value.editorTheme = 'SolarizedLight';
}
};
// // 菜单搜索点击
const onSearchClick = () => {
searchRef.value.openSearch();
@@ -188,6 +212,10 @@ const initComponentSize = () => {
// 页面加载时
onMounted(() => {
if (getLocal('themeConfig')) {
const isDark = themeConfig.value.isDark;
state.isDark = isDark;
switchDark(isDark);
initComponentSize();
}
});

8
mayfly_go_web/src/views/layout/navBars/breadcrumb/userNews.vue
View File

@@ -39,9 +39,7 @@ export default {
state.newsList = [];
};
// 前往通知中心点击
const toMsgCenter = () => {
};
const toMsgCenter = () => {};
return {
onAllReadClick,
toMsgCenter,
@@ -62,7 +60,7 @@ export default {
height: 35px;
align-items: center;
.head-box-btn {
color: var(--color-primary);
color: var(--el-color-primary);
font-size: 13px;
cursor: pointer;
opacity: 0.8;
@@ -90,7 +88,7 @@ export default {
}
.foot-box {
height: 35px;
color: var(--color-primary);
color: var(--el-color-primary);
font-size: 13px;
cursor: pointer;
opacity: 0.8;

52
mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
View File

@@ -2,29 +2,43 @@
<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
<el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
<li v-for="(v, k) in state.tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
:class="{ 'is-active': isActive(v) }" @contextmenu.prevent="onContextmenu(v, $event)"
@click="onTagsClick(v, k)" :ref="
<li
v-for="(v, k) in state.tagsViewList"
:key="k"
class="layout-navbars-tagsview-ul-li"
:data-name="v.name"
:class="{ 'is-active': isActive(v) }"
@contextmenu.prevent="onContextmenu(v, $event)"
@click="onTagsClick(v, k)"
:ref="
(el) => {
if (el) tagsRefs[k] = el;
}
">
<SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14"
v-if="isActive(v)" />
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont"
v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
"
>
<SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)" />
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
<span>{{ v.meta.title }}</span>
<template v-if="isActive(v)">
<SvgIcon name="RefreshRight" class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
@click.stop="refreshCurrentTagsView($route.fullPath)" />
<SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
<SvgIcon
name="RefreshRight"
class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
@click.stop="refreshCurrentTagsView($route.fullPath)"
/>
<SvgIcon
name="Close"
class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
v-if="!v.meta.isAffix"
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
/>
</template>
<SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
<SvgIcon
name="Close"
class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
v-if="!v.meta.isAffix"
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
/>
</li>
</ul>
</el-scrollbar>
@@ -106,8 +120,8 @@ const addTagsView = (path: string, to: any = null) => {
return false;
}
}
const tagView = { ...to }
const tagView = { ...to };
// 防止Converting circular structure to JSON错误
tagView.matched = null;
tagView.redirectedFrom = null;
@@ -135,7 +149,7 @@ const closeCurrentTagsView = (path: string) => {
let next;
// 最后一个且高亮时
if (state.tagsViewList.length === k) {
next = k !== arr.length ? arr[k] : arr[arr.length - 1]
next = k !== arr.length ? arr[k] : arr[arr.length - 1];
} else {
next = arr[k];
}
@@ -366,8 +380,8 @@ onBeforeRouteUpdate((to) => {
<style scoped lang="scss">
.layout-navbars-tagsview {
background-color: var(--el-color-white);
border-bottom: 1px solid var(--next-border-color-light);
background-color: var(--bg-main-color);
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
position: relative;
z-index: 4;

4
mayfly_go_web/src/views/login/index.vue
View File

@@ -107,7 +107,7 @@ const oauth2Login = () => {
display: flex;
align-items: center;
font-size: 20px;
color: var(--color-primary);
color: var(--el-color-primary);
letter-spacing: 2px;
width: 90%;
transform: translateX(-50%);
@@ -121,7 +121,7 @@ const oauth2Login = () => {
left: 50%;
transform: translate(-50%, -50%) translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.99);
box-shadow: 0 2px 12px 0 var(--color-primary-light-5);
box-shadow: 0 2px 12px 0 var(--el-color-primary-light-5);
border-radius: 4px;
transition: height 0.2s linear;
height: 490px;

10
mayfly_go_web/src/views/ops/component/TagTree.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="instances-box">
<div class="tag-tree">
<el-row type="flex" justify="space-between">
<el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
<el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
@@ -92,7 +92,7 @@ onMounted(async () => {
});
const setHeight = () => {
state.height = window.innerHeight - 147 + 'px';
state.height = window.innerHeight - 157 + 'px';
};
watch(filterText, (val) => {
@@ -168,11 +168,13 @@ defineExpose({
});
</script>
<style lang="scss">
.instances-box {
<style lang="scss" scoped>
.tag-tree {
overflow: 'auto';
position: relative;
border: 1px solid var(--el-border-color-light, #ebeef5);
.el-tree {
display: inline-block;
min-width: 100%;

11
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<el-row>
<el-row class="mb5">
<el-col :span="4">
<el-button type="primary" icon="plus" @click="addQueryTab({ id: nowDbInst.id, dbs: nowDbInst.databases.split(' ') }, state.db)" size="small"
>新建查询</el-button
@@ -23,7 +23,7 @@
</el-col>
</el-row>
<el-row type="flex">
<el-col :span="4" style="border-left: 1px solid #eee; margin-top: 10px">
<el-col :span="4">
<tag-tree
ref="tagTreeRef"
@node-click="nodeClick"
@@ -64,7 +64,7 @@
</tag-tree>
</el-col>
<el-col :span="20">
<el-container id="data-exec" style="border-left: 1px solid #eee; margin-top: 10px">
<el-container id="data-exec" class="mt10">
<el-tabs @tab-remove="onRemoveTab" @tab-change="onTabChange" style="width: 100%" v-model="state.activeName">
<el-tab-pane closable v-for="dt in state.tabs.values()" :key="dt.key" :label="dt.key" :name="dt.key">
<table-data
@@ -458,11 +458,6 @@ const reloadTables = (nodeKey: string) => {
text-align: center;
}
.el-tabs__header {
padding: 0 10px;
background-color: #fff;
}
#data-exec {
min-height: calc(100vh - 155px);

2
mayfly_go_web/src/views/ops/db/component/tab/Query.vue
View File

@@ -902,7 +902,7 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
.sqlEditor {
font-size: 8pt;
font-weight: 600;
border: 1px solid #ccc;
border: 1px solid var(--el-border-color-light, #ebeef5);
}
.update_field_active {

2
mayfly_go_web/src/views/ops/machine/ScriptManage.vue
View File

@@ -8,8 +8,6 @@
:show-close="true"
:before-close="handleClose"
width="55%"
draggable
append-to-body
>
<page-table
ref="pageTableRef"

2
mayfly_go_web/src/views/ops/machine/file/MachineFile.vue
View File

@@ -22,7 +22,7 @@
>
<el-table-column type="selection" width="30" />
<el-table-column prop="name" label="名称" show-overflow-tooltip>
<el-table-column prop="name" label="名称">
<template #header>
<div class="machine-file-table-header">
<div>

16
mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
View File

@@ -35,31 +35,31 @@
</el-col>
<el-col :span="20">
<div id="mongo-tab" style="border: 1px solid #eee; margin-top: 1px">
<div id="mongo-tab" class="ml5" style="border: 1px solid var(--el-border-color-light, #ebeef5); margin-top: 1px">
<el-row v-if="nowColl">
<el-descriptions :column="10" size="small" border>
<!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
<el-descriptions-item label="ns" label-align="right">
{{ nowColl.stats.ns }}
{{ nowColl.stats?.ns }}
</el-descriptions-item>
<el-descriptions-item label="count" label-align="right">
{{ nowColl.stats.count }}
{{ nowColl.stats?.count }}
</el-descriptions-item>
<el-descriptions-item label="avgObjSize" label-align="right">
{{ formatByteSize(nowColl.stats.avgObjSize) }}
{{ formatByteSize(nowColl.stats?.avgObjSize) }}
</el-descriptions-item>
<el-descriptions-item label="size" label-align="right">
{{ formatByteSize(nowColl.stats.size) }}
{{ formatByteSize(nowColl.stats?.size) }}
</el-descriptions-item>
<el-descriptions-item label="totalSize" label-align="right">
{{ formatByteSize(nowColl.stats.totalSize) }}
{{ formatByteSize(nowColl.stats?.totalSize) }}
</el-descriptions-item>
<el-descriptions-item label="storageSize" label-align="right">
{{ formatByteSize(nowColl.stats.storageSize) }}
{{ formatByteSize(nowColl.stats?.storageSize) }}
</el-descriptions-item>
<el-descriptions-item label="freeStorageSize" label-align="right">
{{ formatByteSize(nowColl.stats.freeStorageSize) }}
{{ formatByteSize(nowColl.stats?.freeStorageSize) }}
</el-descriptions-item>
</el-descriptions>
</el-row>

12
mayfly_go_web/src/views/ops/redis/DataOperation.vue
View File

@@ -3,7 +3,7 @@
<el-row>
<el-col :span="4">
<el-row type="flex" justify="space-between">
<el-col :span="24" class="el-scrollbar flex-auto">
<el-col :span="24" class="flex-auto">
<tag-tree @node-click="nodeClick" :load="loadNode">
<template #prefix="{ data }">
<span v-if="data.type == NodeType.Redis">
@@ -85,7 +85,13 @@
</el-row>
<el-tree
:style="{ maxHeight: state.keyTreeHeight, height: state.keyTreeHeight, overflow: 'auto', border: '1px solid #e1f3d8' }"
:style="{
maxHeight: state.keyTreeHeight,
height: state.keyTreeHeight,
overflow: 'auto',
border: '1px solid var(--el-border-color-light, #ebeef5)',
marginLeft: '5px',
}"
ref="keyTreeRef"
:highlight-current="true"
:data="keyTreeData"
@@ -244,7 +250,7 @@ onMounted(async () => {
});
const setHeight = () => {
state.keyTreeHeight = window.innerHeight - 177 + 'px';
state.keyTreeHeight = window.innerHeight - 174 + 'px';
};
/**

2
mayfly_go_web/src/views/ops/redis/FormatViewer.vue
View File

@@ -93,7 +93,7 @@ defineExpose({ getContent });
/*outline same with text viewer's .el-textarea__inner*/
.format-viewer-container .text-formated-container {
border: 1px solid #dcdfe6;
border: 1px solid var(--el-border-color-light, #ebeef5);
padding: 5px 10px;
border-radius: 4px;
clear: both;

8
mayfly_go_web/src/views/personal/index.vue
View File

@@ -294,7 +294,7 @@ const getMsgTypeDesc = (type: number) => {
</script>
<style scoped lang="scss">
@import '../../theme/mixins/mixins.scss';
@import '../../theme/mixins/index.scss';
.personal {
.personal-user {
@@ -359,7 +359,7 @@ const getMsgTypeDesc = (type: number) => {
font-size: 13px;
&:hover {
color: var(--color-primary);
color: var(--el-color-primary);
cursor: pointer;
}
}
@@ -383,7 +383,7 @@ const getMsgTypeDesc = (type: number) => {
}
& a:hover {
color: var(--color-primary);
color: var(--el-color-primary);
cursor: pointer;
}
}
@@ -447,7 +447,7 @@ const getMsgTypeDesc = (type: number) => {
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--color-primary);
background: var(--el-color-primary);
}
}

16
mayfly_go_web/yarn.lock
View File

@@ -804,10 +804,10 @@ echarts@^5.4.0:
tslib "2.3.0"
zrender "5.4.0"
element-plus@^2.3.8:
version "2.3.8"
resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.8.tgz#46032abe1a712abfb65932f146ee19281312a9cf"
integrity sha512-yHQR0/tG2LvPkpGUt7Te/hPmP2XW/BytBNUbx+EFO54VnGCOE3upmQcVffNp1PLgwg9sthYDXontUWpnpmLPJw==
element-plus@^2.3.12:
version "2.3.12"
resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz#d3c91d0c701b2b3e67d06a351cb0c42dcc46460e"
integrity sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==
dependencies:
"@ctrl/tinycolor" "^3.4.1"
"@element-plus/icons-vue" "^2.0.6"
@@ -1414,10 +1414,10 @@ mitt@^3.0.1:
resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
monaco-editor@^0.41.0:
version "0.41.0"
resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.41.0.tgz#2ba31e5af7e3ae93ac5d7467ec2772ef9b3d967f"
integrity sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==
monaco-editor@^0.43.0:
version "0.43.0"
resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.43.0.tgz#cb02a8d23d1249ad00b7cffe8bbecc2ac09d4baf"
integrity sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==
monaco-sql-languages@^0.11.0:
version "0.11.0"

2
server/config.yml.example
View File

@@ -1,7 +1,7 @@
server:
# debug release test
model: release
port: 8888
port: 18888
cors: true
tls:
enable: false