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

mayfly_go_web/src/components/monaco/MonacoEditor.vue

@@ -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 { ElOption, ElSelect } from 'element-plus';
 
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+
 const props = defineProps({
     modelValue: {
         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);
 
 let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
@@ -209,17 +223,13 @@ const initMonacoEditorIns = () => {
     // 初始化一些主题
     monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
     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.onDidChangeModelContent(() => {
         emit('update:modelValue', monacoEditorIns.getModel()?.getValue());
     });
-
-    // 动态设置主题
-    // monaco.editor.setTheme('hc-black');
 };
 
 const changeLanguage = (value: any) => {

mayfly_go_web/src/components/terminal/TerminalSearch.vue

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

mayfly_go_web/src/theme/app.scss

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

mayfly_go_web/src/theme/element.scss

@@ -2,20 +2,6 @@
 
 /* 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 计数器
 ------------------------------- */
@@ -145,7 +131,7 @@
 	}
 	// 横向菜单
 	.el-menu--horizontal {
-		background: var(--next-bg-topBar);
+		background: var(--bg-topBar);
 		.el-menu-item,
 		.el-sub-menu {
 			height: 48px !important;

mayfly_go_web/src/views/layout/lockScreen/index.vue

@@ -67,7 +67,7 @@ import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 
 // 定义变量内容
-const layoutLockScreenDateRef = ref<null>();
+const layoutLockScreenDateRef = ref<any>();
 const layoutLockScreenInputRef = ref();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -213,7 +213,7 @@ onUnmounted(() => {
 }
 .layout-lock-screen-img {
     @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%;
     z-index: 9999991;
 }

mayfly_go_web/src/views/layout/main/defaults.vue

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

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -155,7 +155,7 @@ onMounted(() => {
  */
 const setHeight = () => {
     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';
 };
 

mayfly_go_web/src/views/ops/db/component/tab/Query.vue

@@ -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 () => {
     console.log('in query mounted');
     state.ti = props.data;
@@ -286,9 +295,6 @@ const initMonacoEditor = () => {
         },
     });
 
-    // 动态设置主题
-    // monaco.editor.setTheme('hc-black');
-
     // 如果sql有值，则默认赋值
     if (state.sql) {
         monacoEditor.getModel()?.setValue(state.sql);

mayfly_go_web/src/views/ops/db/component/tab/TableData.vue

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

mayfly_go_web/src/views/ops/machine/file/MachineFileContent.vue

@@ -1,6 +1,14 @@
 <template>
     <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>
                 <monaco-editor :can-change-mode="true" v-model="content" :language="fileType" />
             </div>