mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-11 20:00:26 +08:00
feat: 界面新增暗模式
This commit is contained in:
meilin.huang
@@ -15,11 +15,11 @@
|
|||||||
"countup.js": "^2.7.0",
|
"countup.js": "^2.7.0",
|
||||||
"cropperjs": "^1.5.11",
|
"cropperjs": "^1.5.11",
|
||||||
"echarts": "^5.4.0",
|
"echarts": "^5.4.0",
|
||||||
"element-plus": "^2.3.8",
|
"element-plus": "^2.3.12",
|
||||||
"jsencrypt": "^3.3.1",
|
"jsencrypt": "^3.3.1",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
"monaco-editor": "^0.41.0",
|
"monaco-editor": "^0.43.0",
|
||||||
"monaco-sql-languages": "^0.11.0",
|
"monaco-sql-languages": "^0.11.0",
|
||||||
"monaco-themes": "^0.4.4",
|
"monaco-themes": "^0.4.4",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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>
|
<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-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>
|
<el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
|
||||||
|
|||||||
@@ -145,13 +145,7 @@
|
|||||||
width="600px"
|
width="600px"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<el-input
|
<el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
|
||||||
input-style="color: black;"
|
|
||||||
:autosize="{ minRows: 3, maxRows: 15 }"
|
|
||||||
disabled
|
|
||||||
v-model="formatVal"
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-link
|
<el-link
|
||||||
|
|||||||
@@ -288,18 +288,18 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.terminal-status-error {
|
.terminal-status-error {
|
||||||
box-shadow: 0 3px 4px var(--color-danger);
|
box-shadow: 0 3px 4px var(--el-color-danger);
|
||||||
border-color: var(--color-danger);
|
border-color: var(--el-color-danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-status-no-connect {
|
.terminal-status-no-connect {
|
||||||
box-shadow: 0 3px 4px var(--color-warning);
|
box-shadow: 0 3px 4px var(--el-color-warning);
|
||||||
border-color: var(--color-warning);
|
border-color: var(--el-color-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-status-success {
|
.terminal-status-success {
|
||||||
box-shadow: 0 3px 4px var(--color-success);
|
box-shadow: 0 3px 4px var(--el-color-success);
|
||||||
border-color: var(--color-success);
|
border-color: var(--el-color-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-card__body {
|
.el-card__body {
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { registElSvgIcon } from '@/common/utils/svgIcons';
|
|||||||
|
|
||||||
import ElementPlus from 'element-plus';
|
import ElementPlus from 'element-plus';
|
||||||
import 'element-plus/dist/index.css';
|
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 zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
|||||||
@@ -24,13 +24,13 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||||
topBar: '#ffffff',
|
topBar: '#ffffff',
|
||||||
// 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
// 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||||
menuBar: '#545c64',
|
menuBar: '#FFFFFF',
|
||||||
// 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
// 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||||
columnsMenuBar: '#545c64',
|
columnsMenuBar: '#545c64',
|
||||||
// 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
// 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||||
topBarColor: '#606266',
|
topBarColor: '#606266',
|
||||||
// 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
// 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||||
menuBarColor: '#eaeaea',
|
menuBarColor: '#606266',
|
||||||
// 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
// 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||||
columnsMenuBarColor: '#e6e6e6',
|
columnsMenuBarColor: '#e6e6e6',
|
||||||
// 是否开启顶栏背景颜色渐变
|
// 是否开启顶栏背景颜色渐变
|
||||||
@@ -81,6 +81,8 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
isSortableTagsView: true,
|
isSortableTagsView: true,
|
||||||
// 是否开启 Footer 底部版权信息
|
// 是否开启 Footer 底部版权信息
|
||||||
isFooter: false,
|
isFooter: false,
|
||||||
|
// 是否暗模式
|
||||||
|
isDark: false,
|
||||||
// 是否开启灰色模式
|
// 是否开启灰色模式
|
||||||
isGrayscale: false,
|
isGrayscale: false,
|
||||||
// 是否开启色弱模式
|
// 是否开启色弱模式
|
||||||
|
|||||||
@@ -7,6 +7,23 @@
|
|||||||
outline: none !important;
|
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,
|
html,
|
||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
@@ -18,7 +35,7 @@ body,
|
|||||||
font-weight: 450;
|
font-weight: 450;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
background-color: #f8f8f8;
|
background-color: var(--bg-main-color);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -53,7 +70,7 @@ body,
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #f8f8f8;
|
background-color: var(--bg-main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
@@ -65,11 +82,11 @@ body,
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #ebeef5;
|
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-el-aside-br-color {
|
.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 {
|
.layout-aside-width-default {
|
||||||
@@ -116,7 +133,7 @@ body,
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
border-bottom: 1px solid rgb(230, 230, 230);
|
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-divider {
|
.el-divider {
|
||||||
@@ -128,7 +145,7 @@ body,
|
|||||||
------------------------------- */
|
------------------------------- */
|
||||||
#nprogress {
|
#nprogress {
|
||||||
.bar {
|
.bar {
|
||||||
background: var(--color-primary) !important;
|
background: var(--el-color-primary) !important;
|
||||||
z-index: 9999999 !important;
|
z-index: 9999999 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -195,23 +212,23 @@ body,
|
|||||||
/* 颜色值
|
/* 颜色值
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
.color-primary {
|
.color-primary {
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-success {
|
.color-success {
|
||||||
color: var(--color-success);
|
color: var(--el-color-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-warning {
|
.color-warning {
|
||||||
color: var(--color-warning);
|
color: var(--el-color-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-danger {
|
.color-danger {
|
||||||
color: var(--color-danger);
|
color: var(--el-color-danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-info {
|
.color-info {
|
||||||
color: var(--color-info);
|
color: var(--el-color-info);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 字体大小全局样式
|
/* 字体大小全局样式
|
||||||
@@ -262,17 +279,17 @@ body,
|
|||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
background-color: #F5F5F5;
|
background-color: var(--el-border-color-light, #ebeef5);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
-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-scrollbar-thumb {
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
-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 {
|
.el-menu .fa {
|
||||||
@@ -318,10 +335,8 @@ body,
|
|||||||
.toolbar {
|
.toolbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background-color: #ffffff;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
border: 1px solid #e6ebf5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fl {
|
.fl {
|
||||||
@@ -355,5 +370,5 @@ body,
|
|||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
.pointer-icon:hover {
|
.pointer-icon:hover {
|
||||||
color: var(--color-primary); /* 鼠标移动到图标时的颜色 */
|
color: var(--el-color-primary); /* 鼠标移动到图标时的颜色 */
|
||||||
}
|
}
|
||||||
@@ -1,2 +1 @@
|
|||||||
@import 'common/transition.scss';
|
@import 'common/transition.scss';
|
||||||
@import 'common/var.scss';
|
|
||||||
|
|||||||
@@ -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
27
mayfly_go_web/src/theme/dark.scss
Normal 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;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -4,4 +4,5 @@
|
|||||||
@import './element.scss';
|
@import './element.scss';
|
||||||
@import './media/media.scss';
|
@import './media/media.scss';
|
||||||
@import './waves.scss';
|
@import './waves.scss';
|
||||||
|
@import './dark.scss';
|
||||||
@import './iconSelector.scss';
|
@import './iconSelector.scss';
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
.loading-next .loading-next-box-warp .loading-next-box-item {
|
.loading-next .loading-next-box-warp .loading-next-box-item {
|
||||||
width: 33.333333%;
|
width: 33.333333%;
|
||||||
height: 33.333333%;
|
height: 33.333333%;
|
||||||
background: var(--color-primary);
|
background: var(--el-color-primary);
|
||||||
float: left;
|
float: left;
|
||||||
animation: loading-next-animation 1.2s infinite ease;
|
animation: loading-next-animation 1.2s infinite ease;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
height: 3px !important;
|
height: 3px !important;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-track-piece {
|
::-webkit-scrollbar-track-piece {
|
||||||
background-color: #f8f8f8;
|
background-color: var(--bg-main-color);
|
||||||
}
|
}
|
||||||
// 滚动条的设置
|
// 滚动条的设置
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
height: 7px;
|
height: 7px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-track-piece {
|
::-webkit-scrollbar-track-piece {
|
||||||
background-color: #f8f8f8;
|
background-color: var(--bg-main-color);
|
||||||
}
|
}
|
||||||
// 滚动条的设置
|
// 滚动条的设置
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
/* 颜色调用函数
|
|
||||||
------------------------------- */
|
|
||||||
@function set-color($key) {
|
|
||||||
@return var(--color-#{$key});
|
|
||||||
}
|
|
||||||
@@ -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() {
|
@mixin text-no-wrap() {
|
||||||
3
mayfly_go_web/src/types/pinia.d.ts
vendored
3
mayfly_go_web/src/types/pinia.d.ts
vendored
@@ -1,5 +1,5 @@
|
|||||||
declare interface UserInfoState<T = any> {
|
declare interface UserInfoState<T = any> {
|
||||||
userInfo: any
|
userInfo: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare interface ThemeConfigState {
|
declare interface ThemeConfigState {
|
||||||
@@ -37,6 +37,7 @@ declare interface ThemeConfigState {
|
|||||||
isCacheTagsView: boolean;
|
isCacheTagsView: boolean;
|
||||||
isSortableTagsView: boolean;
|
isSortableTagsView: boolean;
|
||||||
isFooter: boolean;
|
isFooter: boolean;
|
||||||
|
isDark: boolean;
|
||||||
isGrayscale: boolean;
|
isGrayscale: boolean;
|
||||||
isInvert: boolean;
|
isInvert: boolean;
|
||||||
isWartermark: boolean;
|
isWartermark: boolean;
|
||||||
|
|||||||
@@ -7,8 +7,7 @@
|
|||||||
<img :src="userInfo.photo" />
|
<img :src="userInfo.photo" />
|
||||||
<div class="home-card-first-right ml15">
|
<div class="home-card-first-right ml15">
|
||||||
<div class="flex-margin">
|
<div class="flex-margin">
|
||||||
<div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}`
|
<div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}` }}</div>
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -31,7 +30,7 @@
|
|||||||
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
|
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
|
||||||
// import * as echarts from 'echarts';
|
// import * as echarts from 'echarts';
|
||||||
import { CountUp } from 'countup.js';
|
import { CountUp } from 'countup.js';
|
||||||
import { formatAxis } from '@/common/utils/format.ts';
|
import { formatAxis } from '@/common/utils/format';
|
||||||
import { indexApi } from './api';
|
import { indexApi } from './api';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
@@ -65,9 +64,7 @@ const state = reactive({
|
|||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const { topCardItemList } = toRefs(state);
|
||||||
topCardItemList,
|
|
||||||
} = toRefs(state)
|
|
||||||
|
|
||||||
// 当前时间提示语
|
// 当前时间提示语
|
||||||
const currentTime = computed(() => {
|
const currentTime = computed(() => {
|
||||||
@@ -179,8 +176,8 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.home-card-first {
|
.home-card-first {
|
||||||
background: white;
|
background: var(--bg-main-color);
|
||||||
border: 1px solid #ebeef5;
|
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@@ -188,7 +185,7 @@ onMounted(() => {
|
|||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: 2px solid var(--color-primary-light-5);
|
border: 2px solid var(--el-color-primary-light-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-card-first-right {
|
.home-card-first-right {
|
||||||
@@ -247,7 +244,8 @@ onMounted(() => {
|
|||||||
.home-dynamic-item-left {
|
.home-dynamic-item-left {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
.home-dynamic-item-left-time1 {}
|
.home-dynamic-item-left-time1 {
|
||||||
|
}
|
||||||
|
|
||||||
.home-dynamic-item-left-time2 {
|
.home-dynamic-item-left-time2 {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@@ -262,7 +260,7 @@ onMounted(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
@@ -284,7 +282,7 @@ onMounted(() => {
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
padding: 3px 2px 2px;
|
padding: 3px 2px 2px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,11 +2,18 @@
|
|||||||
<div class="layout-columns-aside">
|
<div class="layout-columns-aside">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(v, k) in state.columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" :ref="
|
<li
|
||||||
|
v-for="(v, k) in state.columnsAsideList"
|
||||||
|
:key="k"
|
||||||
|
@click="onColumnsAsideMenuClick(v, k)"
|
||||||
|
:ref="
|
||||||
(el) => {
|
(el) => {
|
||||||
if (el) columnsAsideOffsetTopRefs[k] = el;
|
if (el) columnsAsideOffsetTopRefs[k] = el;
|
||||||
}
|
}
|
||||||
" :class="{ 'layout-columns-active': state.liIndex === k }" :title="v.meta.title">
|
"
|
||||||
|
: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)">
|
<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>
|
<i :class="v.meta.icon"></i>
|
||||||
<div class="layout-columns-aside-li-box-title font12">
|
<div class="layout-columns-aside-li-box-title font12">
|
||||||
@@ -166,7 +173,7 @@ onBeforeRouteUpdate((to) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.columns-round {
|
.columns-round {
|
||||||
background: var(--color-primary);
|
background: var(--el-color-primary);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
<img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
|
<img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
|
||||||
<span>
|
<span>
|
||||||
{{ `${themeConfig.globalTitle}` }}
|
{{ `${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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
|
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
|
||||||
@@ -41,14 +43,14 @@ const onThemeConfigChange = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
|
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
animation: logoAnimation 0.3s ease-in-out;
|
animation: logoAnimation 0.3s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
span {
|
span {
|
||||||
color: var(--color-primary-light-2);
|
color: var(--el-color-primary-light-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,6 @@ import Logo from '@/views/layout/logo/index.vue';
|
|||||||
import Horizontal from '@/views/layout/navMenu/horizontal.vue';
|
import Horizontal from '@/views/layout/navMenu/horizontal.vue';
|
||||||
import mittBus from '@/common/utils/mitt';
|
import mittBus from '@/common/utils/mitt';
|
||||||
|
|
||||||
|
|
||||||
const { themeConfig } = storeToRefs(useThemeConfig());
|
const { themeConfig } = storeToRefs(useThemeConfig());
|
||||||
const { routesList } = storeToRefs(useRoutesList());
|
const { routesList } = storeToRefs(useRoutesList());
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@@ -106,6 +105,6 @@ onUnmounted(() => {
|
|||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
background: var(--bg-topBar);
|
background: var(--bg-topBar);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-bottom: 1px solid #f1f2f3;
|
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,47 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-breadcrumb-seting">
|
<div class="layout-breadcrumb-seting">
|
||||||
<el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
|
<el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
|
||||||
@close="onDrawerClose">
|
|
||||||
<el-scrollbar class="layout-breadcrumb-seting-bar">
|
<el-scrollbar class="layout-breadcrumb-seting-bar">
|
||||||
<!-- ssh终端主题 -->
|
<!-- ssh终端主题 -->
|
||||||
<el-divider content-position="left">终端主题</el-divider>
|
<el-divider content-position="left">终端主题</el-divider>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">字体颜色</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">字体颜色</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.terminalForeground" size="small"
|
<el-color-picker v-model="themeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
|
||||||
@change="onColorPickerChange('terminalForeground')">
|
|
||||||
</el-color-picker>
|
</el-color-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">背景颜色</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">背景颜色</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.terminalBackground" size="small"
|
<el-color-picker v-model="themeConfig.terminalBackground" size="small" @change="onColorPickerChange('terminalBackground')">
|
||||||
@change="onColorPickerChange('terminalBackground')">
|
|
||||||
</el-color-picker>
|
</el-color-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">cursor颜色</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">cursor颜色</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.terminalCursor" size="small"
|
<el-color-picker v-model="themeConfig.terminalCursor" size="small" @change="onColorPickerChange('terminalCursor')"> </el-color-picker>
|
||||||
@change="onColorPickerChange('terminalCursor')">
|
|
||||||
</el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-input-number v-model="themeConfig.terminalFontSize" controls-position="right" :min="12"
|
<el-input-number
|
||||||
:max="24" @change="setLocalThemeConfig" size="small" style="width: 90px">
|
v-model="themeConfig.terminalFontSize"
|
||||||
|
controls-position="right"
|
||||||
|
:min="12"
|
||||||
|
:max="24"
|
||||||
|
@change="setLocalThemeConfig"
|
||||||
|
size="small"
|
||||||
|
style="width: 90px"
|
||||||
|
>
|
||||||
</el-input-number>
|
</el-input-number>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">字体粗细</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">字体粗细</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small"
|
<el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small" style="width: 90px">
|
||||||
style="width: 90px">
|
|
||||||
<el-option label="normal" value="normal"> </el-option>
|
<el-option label="normal" value="normal"> </el-option>
|
||||||
<el-option label="bold" value="bold"> </el-option>
|
<el-option label="bold" value="bold"> </el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -52,8 +53,7 @@
|
|||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small"
|
<el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small" style="width: 130px">
|
||||||
style="width: 130px">
|
|
||||||
<el-option label="vs" value="vs"> </el-option>
|
<el-option label="vs" value="vs"> </el-option>
|
||||||
<el-option label="vs-dark" value="vs-dark"> </el-option>
|
<el-option label="vs-dark" value="vs-dark"> </el-option>
|
||||||
<el-option label="SolarizedLight" value="SolarizedLight"> </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">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.primary" size="small"
|
<el-color-picker v-model="themeConfig.primary" size="small" @change="onColorPickerChange('primary')"> </el-color-picker>
|
||||||
@change="onColorPickerChange('primary')"> </el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">success</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">success</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.success" size="small"
|
<el-color-picker v-model="themeConfig.success" size="small" @change="onColorPickerChange('success')"> </el-color-picker>
|
||||||
@change="onColorPickerChange('success')"> </el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">info</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">info</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')">
|
<el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')"> </el-color-picker>
|
||||||
</el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.warning" size="small"
|
<el-color-picker v-model="themeConfig.warning" size="small" @change="onColorPickerChange('warning')"> </el-color-picker>
|
||||||
@change="onColorPickerChange('warning')"> </el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')">
|
<el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')"> </el-color-picker>
|
||||||
</el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -104,46 +99,37 @@
|
|||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.topBar" size="small"
|
<el-color-picker v-model="themeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
|
||||||
@change="onBgColorPickerChange('topBar')"> </el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.menuBar" size="small"
|
<el-color-picker v-model="themeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
|
||||||
@change="onBgColorPickerChange('menuBar')"> </el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.columnsMenuBar" size="small"
|
<el-color-picker v-model="themeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')"> </el-color-picker>
|
||||||
@change="onBgColorPickerChange('columnsMenuBar')">
|
|
||||||
</el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.topBarColor" size="small"
|
<el-color-picker v-model="themeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
|
||||||
@change="onBgColorPickerChange('topBarColor')">
|
|
||||||
</el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.menuBarColor" size="small"
|
<el-color-picker v-model="themeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
|
||||||
@change="onBgColorPickerChange('menuBarColor')">
|
|
||||||
</el-color-picker>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex">
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small"
|
<el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small" @change="onBgColorPickerChange('columnsMenuBarColor')">
|
||||||
@change="onBgColorPickerChange('columnsMenuBarColor')">
|
|
||||||
</el-color-picker>
|
</el-color-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -162,15 +148,13 @@
|
|||||||
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景渐变</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景渐变</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-switch v-model="themeConfig.isColumnsMenuBarColorGradual"
|
<el-switch v-model="themeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
|
||||||
@change="onColumnsMenuBarGradualChange"></el-switch>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-switch v-model="themeConfig.isMenuBarColorHighlight"
|
<el-switch v-model="themeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
|
||||||
@change="onMenuBarHighlightChange"></el-switch>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -194,12 +178,10 @@
|
|||||||
<el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
|
<el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15"
|
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
|
||||||
:style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
|
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'"
|
<el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'" @change="onClassicSplitMenuChange">
|
||||||
@change="onClassicSplitMenuChange">
|
|
||||||
</el-switch>
|
</el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -212,8 +194,15 @@
|
|||||||
<div class="layout-breadcrumb-seting-bar-flex mt11">
|
<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-label">自动锁屏(s/秒)</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-input-number v-model="themeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
|
<el-input-number
|
||||||
@change="setLocalThemeConfig" size="small" style="width: 90px">
|
v-model="themeConfig.lockScreenTime"
|
||||||
|
controls-position="right"
|
||||||
|
:min="0"
|
||||||
|
:max="9999"
|
||||||
|
@change="setLocalThemeConfig"
|
||||||
|
size="small"
|
||||||
|
style="width: 90px"
|
||||||
|
>
|
||||||
</el-input-number>
|
</el-input-number>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -226,12 +215,14 @@
|
|||||||
<el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
|
<el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15"
|
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
|
||||||
: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-label">开启Breadcrumb</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-switch v-model="themeConfig.isBreadcrumb" :disabled="themeConfig.layout === 'transverse'"
|
<el-switch
|
||||||
@change="onIsBreadcrumbChange"></el-switch>
|
v-model="themeConfig.isBreadcrumb"
|
||||||
|
:disabled="themeConfig.layout === 'transverse'"
|
||||||
|
@change="onIsBreadcrumbChange"
|
||||||
|
></el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
<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 mt15">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px"
|
<el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
|
||||||
@change="setLocalThemeConfig">
|
|
||||||
<el-option label="风格1" value="tags-style-one"></el-option>
|
<el-option label="风格1" value="tags-style-one"></el-option>
|
||||||
<el-option label="风格2" value="tags-style-two"></el-option>
|
<el-option label="风格2" value="tags-style-two"></el-option>
|
||||||
<el-option label="风格3" value="tags-style-three"></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 mt15">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px"
|
<el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
|
||||||
@change="setLocalThemeConfig">
|
|
||||||
<el-option label="slide-right" value="slide-right"></el-option>
|
<el-option label="slide-right" value="slide-right"></el-option>
|
||||||
<el-option label="slide-left" value="slide-left"></el-option>
|
<el-option label="slide-left" value="slide-left"></el-option>
|
||||||
<el-option label="opacitys" value="opacitys"></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 mt15 mb28">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small"
|
<el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
|
||||||
style="width: 90px" @change="setLocalThemeConfig">
|
|
||||||
<el-option label="圆角" value="columns-round"></el-option>
|
<el-option label="圆角" value="columns-round"></el-option>
|
||||||
<el-option label="卡片" value="columns-card"></el-option>
|
<el-option label="卡片" value="columns-card"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -323,16 +311,14 @@
|
|||||||
<div class="layout-drawer-content-flex">
|
<div class="layout-drawer-content-flex">
|
||||||
<!-- defaults 布局 -->
|
<!-- defaults 布局 -->
|
||||||
<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
|
<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
|
||||||
<section class="el-container el-circular"
|
<section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
|
||||||
:class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
|
|
||||||
<aside class="el-aside" style="width: 20px"></aside>
|
<aside class="el-aside" style="width: 20px"></aside>
|
||||||
<section class="el-container is-vertical">
|
<section class="el-container is-vertical">
|
||||||
<header class="el-header" style="height: 10px"></header>
|
<header class="el-header" style="height: 10px"></header>
|
||||||
<main class="el-main"></main>
|
<main class="el-main"></main>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<div class="layout-tips-warp"
|
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
|
||||||
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
|
|
||||||
<div class="layout-tips-box">
|
<div class="layout-tips-box">
|
||||||
<p class="layout-tips-txt">默认</p>
|
<p class="layout-tips-txt">默认</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -340,8 +326,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- classic 布局 -->
|
<!-- classic 布局 -->
|
||||||
<div class="layout-drawer-content-item" @click="onSetLayout('classic')">
|
<div class="layout-drawer-content-item" @click="onSetLayout('classic')">
|
||||||
<section class="el-container is-vertical el-circular"
|
<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
|
||||||
:class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
|
|
||||||
<header class="el-header" style="height: 10px"></header>
|
<header class="el-header" style="height: 10px"></header>
|
||||||
<section class="el-container">
|
<section class="el-container">
|
||||||
<aside class="el-aside" style="width: 20px"></aside>
|
<aside class="el-aside" style="width: 20px"></aside>
|
||||||
@@ -350,8 +335,7 @@
|
|||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<div class="layout-tips-warp"
|
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
|
||||||
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
|
|
||||||
<div class="layout-tips-box">
|
<div class="layout-tips-box">
|
||||||
<p class="layout-tips-txt">经典</p>
|
<p class="layout-tips-txt">经典</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -359,8 +343,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- transverse 布局 -->
|
<!-- transverse 布局 -->
|
||||||
<div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
|
<div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
|
||||||
<section class="el-container is-vertical el-circular"
|
<section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
|
||||||
:class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
|
|
||||||
<header class="el-header" style="height: 10px"></header>
|
<header class="el-header" style="height: 10px"></header>
|
||||||
<section class="el-container">
|
<section class="el-container">
|
||||||
<section class="el-container is-vertical">
|
<section class="el-container is-vertical">
|
||||||
@@ -368,8 +351,7 @@
|
|||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<div class="layout-tips-warp"
|
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
|
||||||
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
|
|
||||||
<div class="layout-tips-box">
|
<div class="layout-tips-box">
|
||||||
<p class="layout-tips-txt">横向</p>
|
<p class="layout-tips-txt">横向</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -377,8 +359,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- columns 布局 -->
|
<!-- columns 布局 -->
|
||||||
<div class="layout-drawer-content-item" @click="onSetLayout('columns')">
|
<div class="layout-drawer-content-item" @click="onSetLayout('columns')">
|
||||||
<section class="el-container el-circular"
|
<section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
|
||||||
:class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
|
|
||||||
<aside class="el-aside-dark" style="width: 10px"></aside>
|
<aside class="el-aside-dark" style="width: 10px"></aside>
|
||||||
<aside class="el-aside" style="width: 20px"></aside>
|
<aside class="el-aside" style="width: 20px"></aside>
|
||||||
<section class="el-container is-vertical">
|
<section class="el-container is-vertical">
|
||||||
@@ -386,8 +367,7 @@
|
|||||||
<main class="el-main"></main>
|
<main class="el-main"></main>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<div class="layout-tips-warp"
|
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
|
||||||
:class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
|
|
||||||
<div class="layout-tips-box">
|
<div class="layout-tips-box">
|
||||||
<p class="layout-tips-txt">分栏</p>
|
<p class="layout-tips-txt">分栏</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -395,10 +375,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="copy-config">
|
<div class="copy-config">
|
||||||
<el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false">
|
<el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false"> </el-alert>
|
||||||
</el-alert>
|
<el-button
|
||||||
<el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
|
size="small"
|
||||||
ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
|
class="copy-config-btn"
|
||||||
|
icon="el-icon-document-copy"
|
||||||
|
type="primary"
|
||||||
|
ref="copyConfigBtnRef"
|
||||||
|
@click="onCopyConfigClick($event.target)"
|
||||||
|
>一键复制配置
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
@@ -412,8 +397,8 @@ import { ElMessage } from 'element-plus';
|
|||||||
import ClipboardJS from 'clipboard';
|
import ClipboardJS from 'clipboard';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '@/store/themeConfig';
|
import { useThemeConfig } from '@/store/themeConfig';
|
||||||
import { getLightColor } from '@/common/utils/theme.ts';
|
import { getLightColor } from '@/common/utils/theme';
|
||||||
import { setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
|
import { setLocal, getLocal, removeLocal } from '@/common/utils/storage';
|
||||||
import mittBus from '@/common/utils/mitt';
|
import mittBus from '@/common/utils/mitt';
|
||||||
|
|
||||||
const copyConfigBtnRef = ref();
|
const copyConfigBtnRef = ref();
|
||||||
@@ -428,7 +413,7 @@ const onColorPickerChange = (color: string) => {
|
|||||||
const setPropertyFun = (color: string, targetVal: any) => {
|
const setPropertyFun = (color: string, targetVal: any) => {
|
||||||
document.documentElement.style.setProperty(color, targetVal);
|
document.documentElement.style.setProperty(color, targetVal);
|
||||||
for (let i = 1; i <= 9; i++) {
|
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、菜单 / 顶栏
|
// 2、菜单 / 顶栏
|
||||||
@@ -449,11 +434,7 @@ const onMenuBarGradualChange = () => {
|
|||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||||
const onColumnsMenuBarGradualChange = () => {
|
const onColumnsMenuBarGradualChange = () => {
|
||||||
setGraduaFun(
|
setGraduaFun('.layout-container .layout-columns-aside', themeConfig.value.isColumnsMenuBarColorGradual, themeConfig.value.columnsMenuBar);
|
||||||
'.layout-container .layout-columns-aside',
|
|
||||||
themeConfig.value.isColumnsMenuBarColorGradual,
|
|
||||||
themeConfig.value.columnsMenuBar
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏 --> 背景渐变函数
|
// 2、菜单 / 顶栏 --> 背景渐变函数
|
||||||
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
||||||
@@ -522,17 +503,14 @@ const onSortableTagsViewChange = () => {
|
|||||||
mittBus.emit('openOrCloseSortable');
|
mittBus.emit('openOrCloseSortable');
|
||||||
setLocalThemeConfig();
|
setLocalThemeConfig();
|
||||||
};
|
};
|
||||||
// 4、界面显示 --> 灰色模式/色弱模式
|
// 4、界面显示 --> 暗模式/灰色模式/色弱模式
|
||||||
const onAddFilterChange = (attr: string) => {
|
const onAddFilterChange = (attr: string) => {
|
||||||
if (attr === 'grayscale') {
|
if (attr === 'grayscale') {
|
||||||
if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
|
if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
|
||||||
} else {
|
} else {
|
||||||
if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
|
if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
|
||||||
}
|
}
|
||||||
const cssAttr =
|
const cssAttr = attr === 'grayscale' ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})` : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
|
||||||
attr === 'grayscale'
|
|
||||||
? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})`
|
|
||||||
: `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
|
|
||||||
const appEle: any = document.querySelector('#app');
|
const appEle: any = document.querySelector('#app');
|
||||||
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
||||||
setLocalThemeConfig();
|
setLocalThemeConfig();
|
||||||
@@ -549,49 +527,37 @@ const onSetLayout = (layout: string) => {
|
|||||||
};
|
};
|
||||||
// 设置布局切换，重置主题样式
|
// 设置布局切换，重置主题样式
|
||||||
const initSetLayoutChange = () => {
|
const initSetLayoutChange = () => {
|
||||||
|
// themeConfig.value.menuBar = '#FFFFFF';
|
||||||
|
// themeConfig.value.menuBarColor = '#606266';
|
||||||
|
// themeConfig.value.topBar = '#ffffff';
|
||||||
|
// themeConfig.value.topBarColor = '#606266';
|
||||||
|
|
||||||
if (themeConfig.value.layout === 'classic') {
|
if (themeConfig.value.layout === 'classic') {
|
||||||
themeConfig.value.isShowLogo = true;
|
themeConfig.value.isShowLogo = true;
|
||||||
themeConfig.value.isBreadcrumb = true;
|
themeConfig.value.isBreadcrumb = true;
|
||||||
themeConfig.value.isCollapse = false;
|
themeConfig.value.isCollapse = false;
|
||||||
themeConfig.value.isClassicSplitMenu = 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') {
|
} else if (themeConfig.value.layout === 'transverse') {
|
||||||
themeConfig.value.isShowLogo = true;
|
themeConfig.value.isShowLogo = true;
|
||||||
themeConfig.value.isBreadcrumb = false;
|
themeConfig.value.isBreadcrumb = false;
|
||||||
themeConfig.value.isCollapse = false;
|
themeConfig.value.isCollapse = false;
|
||||||
themeConfig.value.isTagsview = false;
|
themeConfig.value.isTagsview = true;
|
||||||
themeConfig.value.isClassicSplitMenu = false;
|
themeConfig.value.isClassicSplitMenu = false;
|
||||||
themeConfig.value.menuBarColor = '#FFFFFF';
|
|
||||||
themeConfig.value.topBar = '#545c64';
|
|
||||||
themeConfig.value.topBarColor = '#FFFFFF';
|
|
||||||
initLayoutChangeFun();
|
|
||||||
} else if (themeConfig.value.layout === 'columns') {
|
} else if (themeConfig.value.layout === 'columns') {
|
||||||
themeConfig.value.isShowLogo = true;
|
themeConfig.value.isShowLogo = true;
|
||||||
themeConfig.value.isBreadcrumb = true;
|
themeConfig.value.isBreadcrumb = true;
|
||||||
themeConfig.value.isCollapse = false;
|
themeConfig.value.isCollapse = false;
|
||||||
themeConfig.value.isTagsview = true;
|
themeConfig.value.isTagsview = true;
|
||||||
themeConfig.value.isClassicSplitMenu = false;
|
themeConfig.value.isClassicSplitMenu = false;
|
||||||
themeConfig.value.menuBar = '#FFFFFF';
|
|
||||||
themeConfig.value.menuBarColor = '#606266';
|
|
||||||
themeConfig.value.topBar = '#ffffff';
|
|
||||||
themeConfig.value.topBarColor = '#606266';
|
|
||||||
initLayoutChangeFun();
|
|
||||||
} else {
|
} else {
|
||||||
themeConfig.value.isShowLogo = false;
|
themeConfig.value.isShowLogo = false;
|
||||||
themeConfig.value.isBreadcrumb = true;
|
themeConfig.value.isBreadcrumb = true;
|
||||||
themeConfig.value.isCollapse = false;
|
themeConfig.value.isCollapse = false;
|
||||||
themeConfig.value.isTagsview = true;
|
themeConfig.value.isTagsview = true;
|
||||||
themeConfig.value.isClassicSplitMenu = false;
|
themeConfig.value.isClassicSplitMenu = false;
|
||||||
themeConfig.value.menuBar = '#545c64';
|
|
||||||
themeConfig.value.menuBarColor = '#eaeaea';
|
|
||||||
themeConfig.value.topBar = '#FFFFFF';
|
|
||||||
themeConfig.value.topBarColor = '#606266';
|
|
||||||
initLayoutChangeFun();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initLayoutChangeFun();
|
||||||
};
|
};
|
||||||
// 设置布局切换函数
|
// 设置布局切换函数
|
||||||
const initLayoutChangeFun = () => {
|
const initLayoutChangeFun = () => {
|
||||||
@@ -660,6 +626,7 @@ onMounted(() => {
|
|||||||
onMenuBarHighlightChange();
|
onMenuBarHighlightChange();
|
||||||
themeConfig.value.isCollapse = false;
|
themeConfig.value.isCollapse = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
// 刷新页面时，设置了值，直接取缓存中的值进行初始化
|
// 刷新页面时，设置了值，直接取缓存中的值进行初始化
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -691,7 +658,7 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
// // 语言国际化
|
// // 语言国际化
|
||||||
// if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
|
// if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
|
||||||
}, 1100);
|
}, 100);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -701,7 +668,7 @@ onUnmounted(() => {
|
|||||||
mittBus.off('layoutMobileResize');
|
mittBus.off('layoutMobileResize');
|
||||||
});
|
});
|
||||||
|
|
||||||
defineExpose({openDrawer})
|
defineExpose({ openDrawer });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -767,7 +734,7 @@ defineExpose({openDrawer})
|
|||||||
|
|
||||||
.drawer-layout-active {
|
.drawer-layout-active {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-tips-warp,
|
.layout-tips-warp,
|
||||||
@@ -778,7 +745,7 @@ defineExpose({openDrawer})
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--color-primary-light-4);
|
border-color: var(--el-color-primary-light-4);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
||||||
@@ -788,7 +755,7 @@ defineExpose({openDrawer})
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--color-primary-light-4);
|
border-color: var(--el-color-primary-light-4);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
||||||
.layout-tips-txt {
|
.layout-tips-txt {
|
||||||
@@ -799,7 +766,7 @@ defineExpose({openDrawer})
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--color-primary-light-4);
|
color: var(--el-color-primary-light-4);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: rotate(30deg);
|
transform: rotate(30deg);
|
||||||
left: -1px;
|
left: -1px;
|
||||||
@@ -813,14 +780,14 @@ defineExpose({openDrawer})
|
|||||||
|
|
||||||
.layout-tips-warp-active {
|
.layout-tips-warp-active {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--el-color-primary);
|
||||||
|
|
||||||
.layout-tips-box {
|
.layout-tips-box {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--el-color-primary);
|
||||||
|
|
||||||
.layout-tips-txt {
|
.layout-tips-txt {
|
||||||
color: var(--color-primary) !important;
|
color: var(--el-color-primary) !important;
|
||||||
background-color: #e9eef3 !important;
|
background-color: #e9eef3 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -830,20 +797,20 @@ defineExpose({openDrawer})
|
|||||||
.el-circular {
|
.el-circular {
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-tips-warp {
|
.layout-tips-warp {
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--el-color-primary);
|
||||||
|
|
||||||
.layout-tips-box {
|
.layout-tips-box {
|
||||||
transition: inherit;
|
transition: inherit;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--el-color-primary);
|
||||||
|
|
||||||
.layout-tips-txt {
|
.layout-tips-txt {
|
||||||
transition: inherit;
|
transition: inherit;
|
||||||
color: var(--color-primary) !important;
|
color: var(--el-color-primary) !important;
|
||||||
background-color: #e9eef3 !important;
|
background-color: #e9eef3 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
|
<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">
|
<div class="layout-navbars-breadcrumb-user-icon">
|
||||||
<el-icon title="组件大小">
|
<el-icon title="组件大小">
|
||||||
<plus />
|
<plus />
|
||||||
@@ -13,7 +23,7 @@
|
|||||||
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
|
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown> -->
|
||||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
|
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
|
||||||
<el-icon title="菜单搜索">
|
<el-icon title="菜单搜索">
|
||||||
<search />
|
<search />
|
||||||
@@ -65,7 +75,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="layoutBreadcrumbUser">
|
<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 { useRouter } from 'vue-router';
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||||
import screenfull from 'screenfull';
|
import screenfull from 'screenfull';
|
||||||
@@ -82,6 +92,7 @@ import openApi from '@/common/openApi';
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchRef = ref();
|
const searchRef = ref();
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
isDark: false,
|
||||||
isScreenfull: false,
|
isScreenfull: false,
|
||||||
isShowUserNewsPopover: false,
|
isShowUserNewsPopover: false,
|
||||||
disabledI18n: 'zh-cn',
|
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 = () => {
|
const onSearchClick = () => {
|
||||||
searchRef.value.openSearch();
|
searchRef.value.openSearch();
|
||||||
@@ -188,6 +212,10 @@ const initComponentSize = () => {
|
|||||||
// 页面加载时
|
// 页面加载时
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (getLocal('themeConfig')) {
|
if (getLocal('themeConfig')) {
|
||||||
|
const isDark = themeConfig.value.isDark;
|
||||||
|
state.isDark = isDark;
|
||||||
|
switchDark(isDark);
|
||||||
|
|
||||||
initComponentSize();
|
initComponentSize();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -39,9 +39,7 @@ export default {
|
|||||||
state.newsList = [];
|
state.newsList = [];
|
||||||
};
|
};
|
||||||
// 前往通知中心点击
|
// 前往通知中心点击
|
||||||
const toMsgCenter = () => {
|
const toMsgCenter = () => {};
|
||||||
|
|
||||||
};
|
|
||||||
return {
|
return {
|
||||||
onAllReadClick,
|
onAllReadClick,
|
||||||
toMsgCenter,
|
toMsgCenter,
|
||||||
@@ -62,7 +60,7 @@ export default {
|
|||||||
height: 35px;
|
height: 35px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.head-box-btn {
|
.head-box-btn {
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
@@ -90,7 +88,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.foot-box {
|
.foot-box {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|||||||
@@ -2,29 +2,43 @@
|
|||||||
<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
|
<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
|
||||||
<el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
|
<el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
|
||||||
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
|
<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"
|
<li
|
||||||
:class="{ 'is-active': isActive(v) }" @contextmenu.prevent="onContextmenu(v, $event)"
|
v-for="(v, k) in state.tagsViewList"
|
||||||
@click="onTagsClick(v, k)" :ref="
|
: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) => {
|
(el) => {
|
||||||
if (el) tagsRefs[k] = 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="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"
|
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
|
||||||
v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
|
|
||||||
<span>{{ v.meta.title }}</span>
|
<span>{{ v.meta.title }}</span>
|
||||||
<template v-if="isActive(v)">
|
<template v-if="isActive(v)">
|
||||||
<SvgIcon name="RefreshRight" class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
|
<SvgIcon
|
||||||
@click.stop="refreshCurrentTagsView($route.fullPath)" />
|
name="RefreshRight"
|
||||||
<SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
|
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"
|
v-if="!v.meta.isAffix"
|
||||||
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
|
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
|
||||||
|
/>
|
||||||
</template>
|
</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"
|
v-if="!v.meta.isAffix"
|
||||||
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
|
@click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
|
||||||
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
@@ -107,7 +121,7 @@ const addTagsView = (path: string, to: any = null) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const tagView = { ...to }
|
const tagView = { ...to };
|
||||||
// 防止Converting circular structure to JSON错误
|
// 防止Converting circular structure to JSON错误
|
||||||
tagView.matched = null;
|
tagView.matched = null;
|
||||||
tagView.redirectedFrom = null;
|
tagView.redirectedFrom = null;
|
||||||
@@ -135,7 +149,7 @@ const closeCurrentTagsView = (path: string) => {
|
|||||||
let next;
|
let next;
|
||||||
// 最后一个且高亮时
|
// 最后一个且高亮时
|
||||||
if (state.tagsViewList.length === k) {
|
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 {
|
} else {
|
||||||
next = arr[k];
|
next = arr[k];
|
||||||
}
|
}
|
||||||
@@ -366,8 +380,8 @@ onBeforeRouteUpdate((to) => {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.layout-navbars-tagsview {
|
.layout-navbars-tagsview {
|
||||||
background-color: var(--el-color-white);
|
background-color: var(--bg-main-color);
|
||||||
border-bottom: 1px solid var(--next-border-color-light);
|
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ const oauth2Login = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
@@ -121,7 +121,7 @@ const oauth2Login = () => {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%) translate3d(0, 0, 0);
|
transform: translate(-50%, -50%) translate3d(0, 0, 0);
|
||||||
background-color: rgba(255, 255, 255, 0.99);
|
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;
|
border-radius: 4px;
|
||||||
transition: height 0.2s linear;
|
transition: height 0.2s linear;
|
||||||
height: 490px;
|
height: 490px;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="instances-box">
|
<div class="tag-tree">
|
||||||
<el-row type="flex" justify="space-between">
|
<el-row type="flex" justify="space-between">
|
||||||
<el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
|
<el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
|
||||||
<el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
|
<el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
|
||||||
@@ -92,7 +92,7 @@ onMounted(async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const setHeight = () => {
|
const setHeight = () => {
|
||||||
state.height = window.innerHeight - 147 + 'px';
|
state.height = window.innerHeight - 157 + 'px';
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(filterText, (val) => {
|
watch(filterText, (val) => {
|
||||||
@@ -168,11 +168,13 @@ defineExpose({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
.instances-box {
|
.tag-tree {
|
||||||
overflow: 'auto';
|
overflow: 'auto';
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
|
|
||||||
.el-tree {
|
.el-tree {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row>
|
<el-row class="mb5">
|
||||||
<el-col :span="4">
|
<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 type="primary" icon="plus" @click="addQueryTab({ id: nowDbInst.id, dbs: nowDbInst.databases.split(' ') }, state.db)" size="small"
|
||||||
>新建查询</el-button
|
>新建查询</el-button
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex">
|
<el-row type="flex">
|
||||||
<el-col :span="4" style="border-left: 1px solid #eee; margin-top: 10px">
|
<el-col :span="4">
|
||||||
<tag-tree
|
<tag-tree
|
||||||
ref="tagTreeRef"
|
ref="tagTreeRef"
|
||||||
@node-click="nodeClick"
|
@node-click="nodeClick"
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
</tag-tree>
|
</tag-tree>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20">
|
<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-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">
|
<el-tab-pane closable v-for="dt in state.tabs.values()" :key="dt.key" :label="dt.key" :name="dt.key">
|
||||||
<table-data
|
<table-data
|
||||||
@@ -458,11 +458,6 @@ const reloadTables = (nodeKey: string) => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tabs__header {
|
|
||||||
padding: 0 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#data-exec {
|
#data-exec {
|
||||||
min-height: calc(100vh - 155px);
|
min-height: calc(100vh - 155px);
|
||||||
|
|
||||||
|
|||||||
@@ -902,7 +902,7 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
|
|||||||
.sqlEditor {
|
.sqlEditor {
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.update_field_active {
|
.update_field_active {
|
||||||
|
|||||||
@@ -8,8 +8,6 @@
|
|||||||
:show-close="true"
|
:show-close="true"
|
||||||
:before-close="handleClose"
|
:before-close="handleClose"
|
||||||
width="55%"
|
width="55%"
|
||||||
draggable
|
|
||||||
append-to-body
|
|
||||||
>
|
>
|
||||||
<page-table
|
<page-table
|
||||||
ref="pageTableRef"
|
ref="pageTableRef"
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
>
|
>
|
||||||
<el-table-column type="selection" width="30" />
|
<el-table-column type="selection" width="30" />
|
||||||
|
|
||||||
<el-table-column prop="name" label="名称" show-overflow-tooltip>
|
<el-table-column prop="name" label="名称">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="machine-file-table-header">
|
<div class="machine-file-table-header">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -35,31 +35,31 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="20">
|
<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-row v-if="nowColl">
|
||||||
<el-descriptions :column="10" size="small" border>
|
<el-descriptions :column="10" size="small" border>
|
||||||
<!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
|
<!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
|
||||||
|
|
||||||
<el-descriptions-item label="ns" label-align="right">
|
<el-descriptions-item label="ns" label-align="right">
|
||||||
{{ nowColl.stats.ns }}
|
{{ nowColl.stats?.ns }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="count" label-align="right">
|
<el-descriptions-item label="count" label-align="right">
|
||||||
{{ nowColl.stats.count }}
|
{{ nowColl.stats?.count }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="avgObjSize" label-align="right">
|
<el-descriptions-item label="avgObjSize" label-align="right">
|
||||||
{{ formatByteSize(nowColl.stats.avgObjSize) }}
|
{{ formatByteSize(nowColl.stats?.avgObjSize) }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="size" label-align="right">
|
<el-descriptions-item label="size" label-align="right">
|
||||||
{{ formatByteSize(nowColl.stats.size) }}
|
{{ formatByteSize(nowColl.stats?.size) }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="totalSize" label-align="right">
|
<el-descriptions-item label="totalSize" label-align="right">
|
||||||
{{ formatByteSize(nowColl.stats.totalSize) }}
|
{{ formatByteSize(nowColl.stats?.totalSize) }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="storageSize" label-align="right">
|
<el-descriptions-item label="storageSize" label-align="right">
|
||||||
{{ formatByteSize(nowColl.stats.storageSize) }}
|
{{ formatByteSize(nowColl.stats?.storageSize) }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="freeStorageSize" label-align="right">
|
<el-descriptions-item label="freeStorageSize" label-align="right">
|
||||||
{{ formatByteSize(nowColl.stats.freeStorageSize) }}
|
{{ formatByteSize(nowColl.stats?.freeStorageSize) }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<el-row type="flex" justify="space-between">
|
<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">
|
<tag-tree @node-click="nodeClick" :load="loadNode">
|
||||||
<template #prefix="{ data }">
|
<template #prefix="{ data }">
|
||||||
<span v-if="data.type == NodeType.Redis">
|
<span v-if="data.type == NodeType.Redis">
|
||||||
@@ -85,7 +85,13 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-tree
|
<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"
|
ref="keyTreeRef"
|
||||||
:highlight-current="true"
|
:highlight-current="true"
|
||||||
:data="keyTreeData"
|
:data="keyTreeData"
|
||||||
@@ -244,7 +250,7 @@ onMounted(async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const setHeight = () => {
|
const setHeight = () => {
|
||||||
state.keyTreeHeight = window.innerHeight - 177 + 'px';
|
state.keyTreeHeight = window.innerHeight - 174 + 'px';
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ defineExpose({ getContent });
|
|||||||
|
|
||||||
/*outline same with text viewer's .el-textarea__inner*/
|
/*outline same with text viewer's .el-textarea__inner*/
|
||||||
.format-viewer-container .text-formated-container {
|
.format-viewer-container .text-formated-container {
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
|||||||
@@ -294,7 +294,7 @@ const getMsgTypeDesc = (type: number) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import '../../theme/mixins/mixins.scss';
|
@import '../../theme/mixins/index.scss';
|
||||||
|
|
||||||
.personal {
|
.personal {
|
||||||
.personal-user {
|
.personal-user {
|
||||||
@@ -359,7 +359,7 @@ const getMsgTypeDesc = (type: number) => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -383,7 +383,7 @@ const getMsgTypeDesc = (type: number) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
& a:hover {
|
& a:hover {
|
||||||
color: var(--color-primary);
|
color: var(--el-color-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -447,7 +447,7 @@ const getMsgTypeDesc = (type: number) => {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
background: var(--color-primary);
|
background: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -804,10 +804,10 @@ echarts@^5.4.0:
|
|||||||
tslib "2.3.0"
|
tslib "2.3.0"
|
||||||
zrender "5.4.0"
|
zrender "5.4.0"
|
||||||
|
|
||||||
element-plus@^2.3.8:
|
element-plus@^2.3.12:
|
||||||
version "2.3.8"
|
version "2.3.12"
|
||||||
resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.8.tgz#46032abe1a712abfb65932f146ee19281312a9cf"
|
resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz#d3c91d0c701b2b3e67d06a351cb0c42dcc46460e"
|
||||||
integrity sha512-yHQR0/tG2LvPkpGUt7Te/hPmP2XW/BytBNUbx+EFO54VnGCOE3upmQcVffNp1PLgwg9sthYDXontUWpnpmLPJw==
|
integrity sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@ctrl/tinycolor" "^3.4.1"
|
"@ctrl/tinycolor" "^3.4.1"
|
||||||
"@element-plus/icons-vue" "^2.0.6"
|
"@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"
|
resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
|
||||||
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
|
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
|
||||||
|
|
||||||
monaco-editor@^0.41.0:
|
monaco-editor@^0.43.0:
|
||||||
version "0.41.0"
|
version "0.43.0"
|
||||||
resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.41.0.tgz#2ba31e5af7e3ae93ac5d7467ec2772ef9b3d967f"
|
resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.43.0.tgz#cb02a8d23d1249ad00b7cffe8bbecc2ac09d4baf"
|
||||||
integrity sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==
|
integrity sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==
|
||||||
|
|
||||||
monaco-sql-languages@^0.11.0:
|
monaco-sql-languages@^0.11.0:
|
||||||
version "0.11.0"
|
version "0.11.0"
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
server:
|
server:
|
||||||
# debug release test
|
# debug release test
|
||||||
model: release
|
model: release
|
||||||
port: 8888
|
port: 18888
|
||||||
cors: true
|
cors: true
|
||||||
tls:
|
tls:
|
||||||
enable: false
|
enable: false
|
||||||
|
|||||||
Reference in New Issue
Block a user