feat: set monaco editor theme,width,height to auto

src/components/AppProvider.vue

@@ -44,11 +44,11 @@ const getTheme = computed(() => {
 });
 
 const locale = computed(() => {
-  let langType = appStore.languageType;
+  let langType = appStore.languageName;
   return langType === 'zhCN' ? zhCN : enUS;
 });
 const dateLocale = computed(() => {
-  let langType = appStore.languageType;
+  let langType = appStore.languageName;
   return langType === 'zhCN' ? dateZhCN : dateEnUS;
 });
 const NaiveProviderContent = defineComponent({

src/store/appStore.ts

@@ -3,7 +3,8 @@ export const useAppStore = defineStore('app', {
   state() {
     return {
       themeType: 0, // 0 auto, 1: dark, 2: light
-      languageType: 'zhCN', // zhCN || enUS
+      languageType: 'auto', // 0: auto, 1: zhCN, 2: enUS
+      languageName: 'zhCN', // zhCN || enUS
     };
   },
   actions: {
@@ -14,6 +15,11 @@ export const useAppStore = defineStore('app', {
     setLanguageType(args: string) {
       this.languageType = args;
       localStorage.setItem('lang', String(args));
+      if (args === 'auto') {
+        this.languageName = navigator.language === 'zh-CN' ? 'zhCN' : 'enUS';
+      } else {
+        this.languageName = args;
+      }
     },
   },
 });

src/views/editor/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div id="editor" ref="editor"></div>
+  <div id="editor" ref="editorRef"></div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
 import * as monaco from 'monaco-editor';
-
+import { useAppStore } from './../../store';
+const appStore = useAppStore();
 /**
  * refer https://github.com/wobsoriano/codeplayground
  * https://github.com/wobsoriano/codeplayground/blob/master/src/components/MonacoEditor.vue
@@ -309,10 +309,33 @@ monaco.languages.setMonarchTokensProvider('search', {
     ],
   },
 });
-const editor = ref();
+// DOM
+const editorRef = ref();
+
+const editorView = ref();
+const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
+const systemTheme = ref(themeMedia.matches);
+themeMedia.addListener(e => {
+  systemTheme.value = e.matches;
+});
 
+// set Editoer theme name
+const editorTheme = computed(() => {
+  // 'vs-dark',
+  let isDark = appStore.themeType === 0 ? !systemTheme.value : appStore.themeType === 1;
+  return isDark ? 'vs-dark' : 'vs-light';
+});
+
+watch(
+  () => editorTheme.value,
+  () => {
+    editorView.value.updateOptions({ theme: editorTheme.value });
+  },
+);
 onMounted(() => {
-  monaco.editor.create(editor.value, {
+  editorView.value = monaco.editor.create(editorRef.value, {
+    automaticLayout: true,
+    theme: editorTheme.value,
     value: `// Type source code in your language here...
 GET students/_search
 {
@@ -331,9 +354,9 @@ GET students/_search
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 #editor {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 </style>

src/views/setting/components/basic.vue

@@ -83,11 +83,8 @@ const setThemeType = (type: number) => {
 
 const langTypeChange = (value: string) => {
   langType.value = value;
-  if (value === 'auto') {
-    value = navigator.language === 'zh-CN' ? 'zhCN' : 'enUS';
-  }
   appStore.setLanguageType(value);
-  lang.global.locale.value = value;
+  lang.global.locale.value = appStore.languageName;
 };
 </script>