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

fix: 切换暗模式时编辑器主题同步调整

Browse Source
This commit is contained in:
meilin.huang
2023-09-13 23:57:28 +08:00
parent ead3b0d0d8
commit 0bd7d38c23
10 changed files with 326 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,6 +48,11 @@ import SolarizedLight from 'monaco-themes/themes/Solarized-light.json';
import { language as shellLan } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js'; import { language as shellLan } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
import { ElOption, ElSelect } from 'element-plus'; import { ElOption, ElSelect } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/store/themeConfig';
const { themeConfig } = storeToRefs(useThemeConfig());
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: String, type: String,
@@ -189,6 +194,15 @@ watch(
} }
); );
// 监听 themeConfig editorTheme配置文件的变化
watch(
() => themeConfig.value.editorTheme,
(val) => {
console.log('monaco editor theme change: ', val);
monaco?.editor?.setTheme(val);
}
);
const monacoTextarea: any = ref(null); const monacoTextarea: any = ref(null);
let monacoEditorIns: editor.IStandaloneCodeEditor = null as any; let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
@@ -209,17 +223,13 @@ const initMonacoEditorIns = () => {
// 初始化一些主题 // 初始化一些主题
monaco.editor.defineTheme('SolarizedLight', SolarizedLight); monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
options.language = state.languageMode; options.language = state.languageMode;
// 从localStorage中获取，通过store可能存在父子组件都使用store报错 options.theme = themeConfig.value.editorTheme;
options.theme = JSON.parse(localStorage.getItem('themeConfig') as string).editorTheme || 'vs';
monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options as any)); monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options as any));
// 监听内容改变,双向绑定 // 监听内容改变,双向绑定
monacoEditorIns.onDidChangeModelContent(() => { monacoEditorIns.onDidChangeModelContent(() => {
emit('update:modelValue', monacoEditorIns.getModel()?.getValue()); emit('update:modelValue', monacoEditorIns.getModel()?.getValue());
}); });
// 动态设置主题
// monaco.editor.setTheme('hc-black');
}; };
const changeLanguage = (value: any) => { const changeLanguage = (value: any) => {

2
mayfly_go_web/src/components/terminal/TerminalSearch.vue
View File

@@ -81,8 +81,6 @@ function closeSearch() {
state.search.visible = false; state.search.visible = false;
state.search.value = ''; state.search.value = '';
props.searchAddon?.clearDecorations(); props.searchAddon?.clearDecorations();
// 取消查询关键字高亮
props.searchAddon?.clearActiveDecoration();
emit('close'); emit('close');
} }

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

@@ -11,6 +11,7 @@
--color-white: #ffffff; --color-white: #ffffff;
--bg-main-color: #f8f8f8; --bg-main-color: #f8f8f8;
--bg-color: #f5f5ff; --bg-color: #f5f5ff;
--bg-menuBarActiveColor: #0000001a;
--border-color-light: #f1f2f3; --border-color-light: #f1f2f3;
--el-color-primary-lighter: #ecf5ff; --el-color-primary-lighter: #ecf5ff;
--color-success-lighter: #f0f9eb; --color-success-lighter: #f0f9eb;
@@ -334,9 +335,10 @@ body,
.toolbar { .toolbar {
width: 100%; width: 100%;
padding: 6px; padding: 4px;
overflow: hidden; overflow: hidden;
line-height: 32px; line-height: 24px;
border: 1px solid var(--el-border-color-light, #ebeef5);
} }
.fl { .fl {

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

@@ -2,20 +2,6 @@
/* Button 按钮 /* Button 按钮
------------------------------- */ ------------------------------- */
// 第三方字体图标大小
.el-button:not(.is-circle) i.el-icon,
.el-button i.iconfont,
.el-button i.fa,
.el-button--default i.iconfont,
.el-button--default i.fa {
font-size: 14px !important;
margin-right: 5px;
}
.el-button--small i.iconfont,
.el-button--small i.fa {
font-size: 12px !important;
margin-right: 5px;
}
/* Input 输入框、InputNumber 计数器 /* Input 输入框、InputNumber 计数器
------------------------------- */ ------------------------------- */
@@ -145,7 +131,7 @@
} }
// 横向菜单 // 横向菜单
.el-menu--horizontal { .el-menu--horizontal {
background: var(--next-bg-topBar); background: var(--bg-topBar);
.el-menu-item, .el-menu-item,
.el-sub-menu { .el-sub-menu {
height: 48px !important; height: 48px !important;

552
mayfly_go_web/src/views/layout/lockScreen/index.vue
View File

@@ -1,62 +1,62 @@
<template> <template>
<div v-show="state.isShowLockScreen"> <div v-show="state.isShowLockScreen">
<div class="layout-lock-screen-mask"></div> <div class="layout-lock-screen-mask"></div>
<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div> <div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
<div class="layout-lock-screen"> <div class="layout-lock-screen">
<div <div
class="layout-lock-screen-date" class="layout-lock-screen-date"
ref="layoutLockScreenDateRef" ref="layoutLockScreenDateRef"
@mousedown="onDownPc" @mousedown="onDownPc"
@mousemove="onMovePc" @mousemove="onMovePc"
@mouseup="onEnd" @mouseup="onEnd"
@touchstart.stop="onDownApp" @touchstart.stop="onDownApp"
@touchmove.stop="onMoveApp" @touchmove.stop="onMoveApp"
@touchend.stop="onEnd" @touchend.stop="onEnd"
> >
<div class="layout-lock-screen-date-box"> <div class="layout-lock-screen-date-box">
<div class="layout-lock-screen-date-box-time"> <div class="layout-lock-screen-date-box-time">
{{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span> {{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
</div> </div>
<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div> <div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
</div> </div>
<div class="layout-lock-screen-date-top"> <div class="layout-lock-screen-date-top">
<SvgIcon name="ele-Top" /> <SvgIcon name="ele-Top" />
<div class="layout-lock-screen-date-top-text">上滑解锁</div> <div class="layout-lock-screen-date-top-text">上滑解锁</div>
</div> </div>
</div> </div>
<transition name="el-zoom-in-center"> <transition name="el-zoom-in-center">
<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login"> <div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
<div class="layout-lock-screen-login-box"> <div class="layout-lock-screen-login-box">
<div class="layout-lock-screen-login-box-img"> <div class="layout-lock-screen-login-box-img">
<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" /> <img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
</div> </div>
<div class="layout-lock-screen-login-box-name">Administrator</div> <div class="layout-lock-screen-login-box-name">Administrator</div>
<div class="layout-lock-screen-login-box-value"> <div class="layout-lock-screen-login-box-value">
<el-input <el-input
placeholder="请输入密码" placeholder="请输入密码"
ref="layoutLockScreenInputRef" ref="layoutLockScreenInputRef"
v-model="state.lockScreenPassword" v-model="state.lockScreenPassword"
@keyup.enter.native.stop="onLockScreenSubmit()" @keyup.enter.native.stop="onLockScreenSubmit()"
> >
<template #append> <template #append>
<el-button @click="onLockScreenSubmit"> <el-button @click="onLockScreenSubmit">
<el-icon class="el-input__icon"> <el-icon class="el-input__icon">
<ele-Right /> <ele-Right />
</el-icon> </el-icon>
</el-button> </el-button>
</template> </template>
</el-input> </el-input>
</div> </div>
</div> </div>
<div class="layout-lock-screen-login-icon"> <div class="layout-lock-screen-login-icon">
<SvgIcon name="ele-Microphone" :size="20" /> <SvgIcon name="ele-Microphone" :size="20" />
<SvgIcon name="ele-AlarmClock" :size="20" /> <SvgIcon name="ele-AlarmClock" :size="20" />
<SvgIcon name="ele-SwitchButton" :size="20" /> <SvgIcon name="ele-SwitchButton" :size="20" />
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts" name="layoutLockScreen"> <script setup lang="ts" name="layoutLockScreen">
@@ -67,286 +67,286 @@ import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/store/themeConfig'; import { useThemeConfig } from '@/store/themeConfig';
// 定义变量内容 // 定义变量内容
const layoutLockScreenDateRef = ref<null>(); const layoutLockScreenDateRef = ref<any>();
const layoutLockScreenInputRef = ref(); const layoutLockScreenInputRef = ref();
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig); const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({ const state = reactive({
transparency: 1, transparency: 1,
downClientY: 0, downClientY: 0,
moveDifference: 0, moveDifference: 0,
isShowLoockLogin: false, isShowLoockLogin: false,
isFlags: false, isFlags: false,
querySelectorEl: '' as any, querySelectorEl: '' as any,
time: { time: {
hm: '', hm: '',
s: '', s: '',
mdq: '', mdq: '',
}, },
setIntervalTime: 0, setIntervalTime: 0,
isShowLockScreen: false, isShowLockScreen: false,
isShowLockScreenIntervalTime: 0, isShowLockScreenIntervalTime: 0,
lockScreenPassword: '', lockScreenPassword: '',
}); });
// 鼠标按下 pc // 鼠标按下 pc
const onDownPc = (down: MouseEvent) => { const onDownPc = (down: MouseEvent) => {
state.isFlags = true; state.isFlags = true;
state.downClientY = down.clientY; state.downClientY = down.clientY;
}; };
// 鼠标按下 app // 鼠标按下 app
const onDownApp = (down: TouchEvent) => { const onDownApp = (down: TouchEvent) => {
state.isFlags = true; state.isFlags = true;
state.downClientY = down.touches[0].clientY; state.downClientY = down.touches[0].clientY;
}; };
// 鼠标移动 pc // 鼠标移动 pc
const onMovePc = (move: MouseEvent) => { const onMovePc = (move: MouseEvent) => {
state.moveDifference = move.clientY - state.downClientY; state.moveDifference = move.clientY - state.downClientY;
onMove(); onMove();
}; };
// 鼠标移动 app // 鼠标移动 app
const onMoveApp = (move: TouchEvent) => { const onMoveApp = (move: TouchEvent) => {
state.moveDifference = move.touches[0].clientY - state.downClientY; state.moveDifference = move.touches[0].clientY - state.downClientY;
onMove(); onMove();
}; };
// 鼠标移动事件 // 鼠标移动事件
const onMove = () => { const onMove = () => {
if (state.isFlags) { if (state.isFlags) {
const el = <HTMLElement>state.querySelectorEl; const el = <HTMLElement>state.querySelectorEl;
const opacitys = (state.transparency -= 1 / 200); const opacitys = (state.transparency -= 1 / 200);
if (state.moveDifference >= 0) return false; if (state.moveDifference >= 0) return false;
el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`); el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
if (state.moveDifference < -400) { if (state.moveDifference < -400) {
el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`); el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
state.moveDifference = -el.clientHeight; state.moveDifference = -el.clientHeight;
setTimeout(() => { setTimeout(() => {
el && el.parentNode?.removeChild(el); el && el.parentNode?.removeChild(el);
}, 300); }, 300);
} }
if (state.moveDifference === -el.clientHeight) { if (state.moveDifference === -el.clientHeight) {
state.isShowLoockLogin = true; state.isShowLoockLogin = true;
layoutLockScreenInputRef.value.focus(); layoutLockScreenInputRef.value.focus();
} }
} }
}; };
// 鼠标松开 // 鼠标松开
const onEnd = () => { const onEnd = () => {
state.isFlags = false; state.isFlags = false;
state.transparency = 1; state.transparency = 1;
if (state.moveDifference >= -400) { if (state.moveDifference >= -400) {
(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`); (<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
} }
}; };
// 获取要拖拽的初始元素 // 获取要拖拽的初始元素
const initGetElement = () => { const initGetElement = () => {
nextTick(() => { nextTick(() => {
state.querySelectorEl = layoutLockScreenDateRef.value; state.querySelectorEl = layoutLockScreenDateRef.value;
}); });
}; };
// 时间初始化 // 时间初始化
const initTime = () => { const initTime = () => {
state.time.hm = formatDate(new Date(), 'HH:MM'); state.time.hm = formatDate(new Date(), 'HH:MM');
state.time.s = formatDate(new Date(), 'SS'); state.time.s = formatDate(new Date(), 'SS');
state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW'); state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
}; };
// 时间初始化定时器 // 时间初始化定时器
const initSetTime = () => { const initSetTime = () => {
initTime(); initTime();
state.setIntervalTime = window.setInterval(() => { state.setIntervalTime = window.setInterval(() => {
initTime(); initTime();
}, 1000); }, 1000);
}; };
// 锁屏时间定时器 // 锁屏时间定时器
const initLockScreen = () => { const initLockScreen = () => {
if (themeConfig.value.isLockScreen) { if (themeConfig.value.isLockScreen) {
state.isShowLockScreenIntervalTime = window.setInterval(() => { state.isShowLockScreenIntervalTime = window.setInterval(() => {
if (themeConfig.value.lockScreenTime <= 1) { if (themeConfig.value.lockScreenTime <= 1) {
state.isShowLockScreen = true; state.isShowLockScreen = true;
setLocalThemeConfig(); setLocalThemeConfig();
return false; return false;
} }
themeConfig.value.lockScreenTime--; themeConfig.value.lockScreenTime--;
}, 1000); }, 1000);
} else { } else {
clearInterval(state.isShowLockScreenIntervalTime); clearInterval(state.isShowLockScreenIntervalTime);
} }
}; };
// 存储布局配置 // 存储布局配置
const setLocalThemeConfig = () => { const setLocalThemeConfig = () => {
themeConfig.value.isDrawer = false; themeConfig.value.isDrawer = false;
setLocal('themeConfig', themeConfig.value); setLocal('themeConfig', themeConfig.value);
}; };
// 密码输入点击事件 // 密码输入点击事件
const onLockScreenSubmit = () => { const onLockScreenSubmit = () => {
themeConfig.value.isLockScreen = false; themeConfig.value.isLockScreen = false;
themeConfig.value.lockScreenTime = 30; themeConfig.value.lockScreenTime = 30;
setLocalThemeConfig(); setLocalThemeConfig();
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
initGetElement(); initGetElement();
initSetTime(); initSetTime();
initLockScreen(); initLockScreen();
}); });
// 页面卸载时 // 页面卸载时
onUnmounted(() => { onUnmounted(() => {
window.clearInterval(state.setIntervalTime); window.clearInterval(state.setIntervalTime);
window.clearInterval(state.isShowLockScreenIntervalTime); window.clearInterval(state.isShowLockScreenIntervalTime);
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.layout-lock-screen-fixed { .layout-lock-screen-fixed {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.layout-lock-screen-filter { .layout-lock-screen-filter {
filter: blur(1px); filter: blur(1px);
} }
.layout-lock-screen-mask { .layout-lock-screen-mask {
background: var(--el-color-white); background: var(--el-color-white);
@extend .layout-lock-screen-fixed; @extend .layout-lock-screen-fixed;
z-index: 9999990; z-index: 9999990;
} }
.layout-lock-screen-img { .layout-lock-screen-img {
@extend .layout-lock-screen-fixed; @extend .layout-lock-screen-fixed;
background-image: url('@/assets/image/bg-login.png'); background: url('@/assets/image/bg-login.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 9999991; z-index: 9999991;
} }
.layout-lock-screen { .layout-lock-screen {
@extend .layout-lock-screen-fixed; @extend .layout-lock-screen-fixed;
z-index: 9999992; z-index: 9999992;
&-date { &-date {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: var(--el-color-white); color: var(--el-color-white);
z-index: 9999993; z-index: 9999993;
user-select: none; user-select: none;
&-box { &-box {
position: absolute; position: absolute;
left: 30px; left: 30px;
bottom: 50px; bottom: 50px;
&-time { &-time {
font-size: 100px; font-size: 100px;
color: var(--el-color-white); color: var(--el-color-white);
} }
&-info { &-info {
font-size: 40px; font-size: 40px;
color: var(--el-color-white); color: var(--el-color-white);
} }
&-minutes { &-minutes {
font-size: 16px; font-size: 16px;
} }
} }
&-top { &-top {
width: 40px; width: 40px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border-radius: 100%; border-radius: 100%;
border: 1px solid var(--el-border-color-light, #ebeef5); border: 1px solid var(--el-border-color-light, #ebeef5);
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: var(--el-color-white); color: var(--el-color-white);
opacity: 0.8; opacity: 0.8;
position: absolute; position: absolute;
right: 30px; right: 30px;
bottom: 50px; bottom: 50px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
i { i {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
&-text { &-text {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 150%; top: 150%;
font-size: 12px; font-size: 12px;
color: var(--el-color-white); color: var(--el-color-white);
left: 50%; left: 50%;
line-height: 1.2; line-height: 1.2;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: all 0.3s ease; transition: all 0.3s ease;
width: 35px; width: 35px;
} }
&:hover { &:hover {
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
color: var(--el-color-white); color: var(--el-color-white);
opacity: 1; opacity: 1;
transition: all 0.3s ease; transition: all 0.3s ease;
i { i {
transform: translateY(-40px); transform: translateY(-40px);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.layout-lock-screen-date-top-text { .layout-lock-screen-date-top-text {
opacity: 1; opacity: 1;
top: 50%; top: 50%;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
} }
} }
} }
&-login { &-login {
position: relative; position: relative;
z-index: 9999994; z-index: 9999994;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: var(--el-color-white); color: var(--el-color-white);
&-box { &-box {
text-align: center; text-align: center;
margin: auto; margin: auto;
&-img { &-img {
width: 180px; width: 180px;
height: 180px; height: 180px;
margin: auto; margin: auto;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100%; border-radius: 100%;
} }
} }
&-name { &-name {
font-size: 26px; font-size: 26px;
margin: 15px 0 30px; margin: 15px 0 30px;
} }
} }
&-icon { &-icon {
position: absolute; position: absolute;
right: 30px; right: 30px;
bottom: 30px; bottom: 30px;
i { i {
font-size: 20px; font-size: 20px;
margin-left: 15px; margin-left: 15px;
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
} }
} }
} }
} }
:deep(.el-input-group__append) { :deep(.el-input-group__append) {
background: var(--el-color-white); background: var(--el-color-white);
padding: 0px 15px; padding: 0px 15px;
} }
:deep(.el-input__inner) { :deep(.el-input__inner) {
border-right-color: var(--el-border-color-extra-light); border-right-color: var(--el-border-color-extra-light);
&:hover { &:hover {
border-color: var(--el-border-color-extra-light); border-color: var(--el-border-color-extra-light);
} }
} }
</style> </style>

2
mayfly_go_web/src/views/layout/main/defaults.vue
View File

@@ -32,7 +32,7 @@ export default {
watch( watch(
() => route.path, () => route.path,
() => { () => {
proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0; proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
} }
); );
return { return {

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

@@ -155,7 +155,7 @@ onMounted(() => {
*/ */
const setHeight = () => { const setHeight = () => {
state.editorHeight = window.innerHeight - 518 + 'px'; state.editorHeight = window.innerHeight - 518 + 'px';
state.dataTabsTableHeight = window.innerHeight - 219 - 36 + 'px'; state.dataTabsTableHeight = window.innerHeight - 261 + 'px';
state.tagTreeHeight = window.innerHeight - 165 + 'px'; state.tagTreeHeight = window.innerHeight - 165 + 'px';
}; };

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

@@ -180,6 +180,15 @@ watch(
} }
); );
// 监听 themeConfig editorTheme配置文件的变化
watch(
() => themeConfig.value.editorTheme,
(val) => {
console.log('monaco editor theme change: ', val);
monaco?.editor?.setTheme(val);
}
);
onMounted(async () => { onMounted(async () => {
console.log('in query mounted'); console.log('in query mounted');
state.ti = props.data; state.ti = props.data;
@@ -286,9 +295,6 @@ const initMonacoEditor = () => {
}, },
}); });
// 动态设置主题
// monaco.editor.setTheme('hc-black');
// 如果sql有值，则默认赋值 // 如果sql有值，则默认赋值
if (state.sql) { if (state.sql) {
monacoEditor.getModel()?.setValue(state.sql); monacoEditor.getModel()?.setValue(state.sql);

14
mayfly_go_web/src/views/ops/db/component/tab/TableData.vue
View File

@@ -66,9 +66,9 @@
style="width: 100%" style="width: 100%"
> >
<template #prepend> <template #prepend>
<el-popover trigger="click" :width="320" placement="right"> <el-popover :visible="state.condPopVisible" trigger="click" :width="320" placement="right">
<template #reference> <template #reference>
<el-link type="success" :underline="false">选择列</el-link> <el-link @click="state.condPopVisible = true" type="success" :underline="false">选择列</el-link>
</template> </template>
<el-table <el-table
:data="columns" :data="columns"
@@ -125,7 +125,7 @@
<span>{{ state.sql }}</span> <span>{{ state.sql }}</span>
</div> </div>
<el-dialog v-model="conditionDialog.visible" :title="conditionDialog.title" width="420px"> <el-dialog style="z-index: 10000" v-model="conditionDialog.visible" :title="conditionDialog.title" width="420px">
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-select v-model="conditionDialog.condition"> <el-select v-model="conditionDialog.condition">
@@ -138,7 +138,7 @@
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<el-input v-model="conditionDialog.value" :placeholder="conditionDialog.placeholder" /> <el-input ref="conditionInputRef" v-model="conditionDialog.value" :placeholder="conditionDialog.placeholder" />
</el-col> </el-col>
</el-row> </el-row>
<template #footer> <template #footer>
@@ -190,6 +190,7 @@ import DbTable from '../DbTable.vue';
const emits = defineEmits(['genInsertSql']); const emits = defineEmits(['genInsertSql']);
const dataForm: any = ref(null); const dataForm: any = ref(null);
const conditionInputRef: any = ref();
const props = defineProps({ const props = defineProps({
data: { data: {
@@ -218,6 +219,7 @@ const state = reactive({
pageSizes: [20, 40, 80, 100, 200, 300, 400], pageSizes: [20, 40, 80, 100, 200, 300, 400],
count: 0, count: 0,
selectionDatas: [] as any, selectionDatas: [] as any,
condPopVisible: false,
conditionDialog: { conditionDialog: {
title: '', title: '',
placeholder: '', placeholder: '',
@@ -328,6 +330,10 @@ const onConditionRowClick = (event: any) => {
state.conditionDialog.placeholder = `${row.columnType} ${row.columnComment}`; state.conditionDialog.placeholder = `${row.columnType} ${row.columnComment}`;
state.conditionDialog.columnRow = row; state.conditionDialog.columnRow = row;
state.conditionDialog.visible = true; state.conditionDialog.visible = true;
state.condPopVisible = false;
setTimeout(() => {
conditionInputRef.value.focus();
}, 100);
}; };
// 确认条件 // 确认条件

10
mayfly_go_web/src/views/ops/machine/file/MachineFileContent.vue
View File

@@ -1,6 +1,14 @@
<template> <template>
<div class="machine-file-content"> <div class="machine-file-content">
<el-dialog :before-close="handleClose" :title="title || path" v-model="dialogVisible" :close-on-click-modal="false" top="5vh" width="65%"> <el-dialog
destroy-on-close
:before-close="handleClose"
:title="title || path"
v-model="dialogVisible"
:close-on-click-modal="false"
top="5vh"
width="65%"
>
<div> <div>
<monaco-editor :can-change-mode="true" v-model="content" :language="fileType" /> <monaco-editor :can-change-mode="true" v-model="content" :language="fileType" />
</div> </div>