From 6bc35e9b1f11d3e4d3008ff0dfc3b3020dd2468b Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Sun, 17 Mar 2024 16:44:51 +0800
Subject: [PATCH] feat: refactor languange & theme config #24

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src/components/AppProvider.vue         | 44 +++++--------
 src/store/appStore.ts                  | 43 ++++++-------
 src/views/editor/index.vue             | 32 +++-------
 src/views/setting/components/basic.vue | 85 ++++++++++----------------
 4 files changed, 75 insertions(+), 129 deletions(-)

diff --git a/src/components/AppProvider.vue b/src/components/AppProvider.vue
index c856d42..4dd29dc 100644
--- a/src/components/AppProvider.vue
+++ b/src/components/AppProvider.vue
@@ -19,44 +19,28 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, defineComponent, h } from 'vue';
 import { darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui';
-import { useAppStore } from '../store';
+import { storeToRefs } from 'pinia';
+import { LanguageType, ThemeType, useAppStore } from '../store';
 import { naiveThemeOverrides } from '../assets/theme/naive-theme-overrides';
 
 const appStore = useAppStore();
-// system theme type
-const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
-let systemTheme = ref(themeMedia.matches);
-themeMedia.addListener(e => {
-  systemTheme.value = e.matches;
-});
-
-onMounted(() => {
-  let themeType: number = Number(localStorage.getItem('theme-type')) || 0;
-  if (themeType !== appStore.themeType) {
-    appStore.setThemeType(themeType);
-  }
-});
+const { themeType, languageType } = storeToRefs(appStore);
 
 const getTheme = computed(() => {
-  let isDark = appStore.themeType === 0 ? !systemTheme.value : appStore.themeType === 1;
-  if (isDark) {
-    document.documentElement.setAttribute('theme', 'dark');
-    return darkTheme;
-  } else {
-    document.documentElement.setAttribute('theme', 'light');
-    return undefined;
-  }
+  document.documentElement.setAttribute(
+    'theme',
+    themeType.value === ThemeType.DARK ? ThemeType.DARK : ThemeType.LIGHT,
+  );
+  return themeType.value === ThemeType.DARK ? darkTheme : undefined;
 });
 
-const locale = computed(() => {
-  let langType = appStore.languageName;
-  return langType === 'zhCN' ? zhCN : enUS;
-});
-const dateLocale = computed(() => {
-  let langType = appStore.languageName;
-  return langType === 'zhCN' ? dateZhCN : dateEnUS;
-});
+const locale = computed(() => (languageType.value === LanguageType.ZH_CN ? zhCN : enUS));
+const dateLocale = computed(() =>
+  languageType.value === LanguageType.ZH_CN ? dateZhCN : dateEnUS,
+);
+
 const NaiveProviderContent = defineComponent({
   render() {
     return h('div');
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index dbe2868..295b328 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -1,34 +1,29 @@
 import { defineStore } from 'pinia';
+export enum ThemeType {
+  AUTO = 'auto',
+  DARK = 'dark',
+  LIGHT = 'light',
+}
+export enum LanguageType {
+  AUTO = 'auto',
+  ZH_CN = 'zhCN',
+  EN_US = 'enUS',
+}
 export const useAppStore = defineStore('app', {
-  state() {
+  state: () => {
     return {
-      themeType: 0, // 0 auto, 1: dark, 2: light
-      languageType: 'auto', // 0: auto, 1: zhCN, 2: enUS
-      languageName: 'zhCN', // zhCN || enUS
-      connectPannel: true, //
+      themeType: ThemeType.AUTO,
+      languageType: LanguageType.AUTO,
+      connectPanel: true, //
     };
   },
+  persist: true,
   actions: {
-    setThemeType(args: number) {
-      this.themeType = args;
-      localStorage.setItem('theme-type', String(args));
-    },
-    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;
-      }
-    },
     setConnectPannel() {
-      this.connectPannel = !this.connectPannel;
+      this.connectPanel = !this.connectPanel;
+    },
+    getEditorTheme() {
+      return this.themeType === ThemeType.DARK ? 'vs-dark' : 'vs-light';
     },
-  },
-  persist: {
-    // 设置为 true 表示在页面刷新时，Pinia 状态仍然会被保存。
-    paths: ['themeType', 'languageType', 'languageName', 'connectPannel'],
-    storage: localStorage,
   },
 });
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 6491e98..e2052e0 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -7,8 +7,9 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor';
 import { storeToRefs } from 'pinia';
+import { ref, onMounted, watch } from 'vue';
 import { CustomError, Decoration, executeActions, searchTokensProvider } from '../../common';
-import { useAppStore, useSourceFileStore, useConnectionStore } from '../../store';
+import { useAppStore, useSourceFileStore, useConnectionStore, ThemeType } from '../../store';
 import { useLang } from '../../lang';
 type Editor = ReturnType<typeof monaco.editor.create>;
 
@@ -23,7 +24,8 @@ const { defaultFile } = storeToRefs(sourceFileStore);
 const connectionStore = useConnectionStore();
 const { searchQDSL } = connectionStore;
 const { established } = storeToRefs(connectionStore);
-
+const { getEditorTheme } = appStore;
+const { themeType } = storeToRefs(appStore);
 /**
  * refer https://github.com/wobsoriano/codeplayground
  * https://github.com/wobsoriano/codeplayground/blob/master/src/components/MonacoEditor.vue
@@ -115,27 +117,13 @@ const executeDecorationType = 'action-execute-decoration.search';
 
 let executeDecorations: Array<Decoration | string> = [];
 
-const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
-const systemTheme = ref(themeMedia.matches);
-themeMedia.addListener(e => {
-  systemTheme.value = e.matches;
-});
+watch(themeType, () => {
+  const vsTheme = getEditorTheme();
 
-// 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';
+  queryEditor?.updateOptions({ theme: vsTheme });
+  displayEditor?.updateOptions({ theme: vsTheme });
 });
 
-watch(
-  () => editorTheme.value,
-  () => {
-    queryEditor?.updateOptions({ theme: editorTheme.value });
-    displayEditor?.updateOptions({ theme: editorTheme.value });
-  },
-);
-
 const getActionMarksDecorations = (editor: Editor): Array<Decoration> => {
   // Get the model of the editor
   const model = editor.getModel();
@@ -226,7 +214,7 @@ const executeQueryAction = async (
 const setupQueryEditor = (code: string) => {
   queryEditor = monaco.editor.create(queryEditorRef.value, {
     automaticLayout: true,
-    theme: editorTheme.value,
+    theme: getEditorTheme(),
     value: code,
     language: 'search',
   });
@@ -265,7 +253,7 @@ const setupQueryEditor = (code: string) => {
 const setupJsonEditor = () => {
   displayEditor = monaco.editor.create(displayEditorRef.value, {
     automaticLayout: true,
-    theme: editorTheme.value,
+    theme: getEditorTheme(),
     value: '',
     language: 'json',
   });
diff --git a/src/views/setting/components/basic.vue b/src/views/setting/components/basic.vue
index 4305546..7e74376 100644
--- a/src/views/setting/components/basic.vue
+++ b/src/views/setting/components/basic.vue
@@ -5,18 +5,16 @@
         <div class="title">{{ $t('setting.theme') }}</div>
         <div class="content">
           <div
-            v-for="item in themeTypeList"
-            :key="item.type"
+            v-for="theme in themeTypes"
+            :key="theme.type"
             class="content-item"
-            :class="{
-              active: activeType === item.type,
-            }"
-            @click="setThemeType(item.type)"
+            :class="{ active: themeType === theme.type }"
+            @click="setThemeType(theme.type)"
           >
             <div class="img-box">
-              <img :src="item.img" :alt="item.name" />
+              <img :src="theme.img" :alt="theme.name" />
             </div>
-            <div class="item-desc">{{ $t(`setting.${item.name}`) }}</div>
+            <div class="item-desc">{{ $t(`setting.${theme.name}`) }}</div>
             <div class="item-checked">
               <n-icon :size="18" color="#fff">
                 <CheckOutlined />
@@ -28,8 +26,12 @@
       <n-gi span="4">
         <div class="title">{{ $t('setting.language') }}</div>
         <div class="content">
-          <n-radio-group v-model:value="langType" name="radiogroup" @update:value="langTypeChange">
-            <n-radio v-for="langItem in langTypeList" :key="langItem.type" :value="langItem.type">
+          <n-radio-group
+            v-model:value="languageType"
+            name="radiogroup"
+            @update:value="langTypeChange"
+          >
+            <n-radio v-for="langItem in langTypes" :key="langItem.type" :value="langItem.type">
               {{ langItem.name === 'auto' ? $t('setting.auto') : langItem.name }}
             </n-radio>
           </n-radio-group>
@@ -40,59 +42,36 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import lightImg from '../../../assets/img/theme-light.png';
 import darkImg from '../../../assets/img/theme-dark.png';
 import autoImg from '../../../assets/img/theme-auto.png';
-import { useAppStore } from '../../../store';
-import { lang } from '../../../lang';
+import { LanguageType, ThemeType, useAppStore } from '../../../store';
 import { CheckOutlined } from '@vicons/antd';
-
-const themeTypeList = [
-  {
-    type: 0,
-    img: autoImg,
-    name: 'auto',
-  },
-  {
-    type: 1,
-    img: darkImg,
-    name: 'dark',
-  },
-  {
-    type: 2,
-    img: lightImg,
-    name: 'light',
-  },
-];
-const langTypeList = [
-  {
-    type: 'auto',
-    name: 'auto',
-  },
-  {
-    type: 'zhCN',
-    name: '简体中文',
-  },
-  {
-    type: 'enUS',
-    name: 'English',
-  },
-];
+import { lang } from '../../../lang';
 
 const appStore = useAppStore();
-const activeType = ref(appStore.themeType);
+const { themeType, languageType } = storeToRefs(appStore);
 
-const langType = ref(appStore.languageType);
+const themeTypes = [
+  { type: ThemeType.AUTO, img: autoImg, name: 'auto' },
+  { type: ThemeType.DARK, img: darkImg, name: 'dark' },
+  { type: ThemeType.LIGHT, img: lightImg, name: 'light' },
+];
+const langTypes = [
+  { type: LanguageType.AUTO, name: 'auto' },
+  { type: LanguageType.ZH_CN, name: '简体中文' },
+  { type: LanguageType.EN_US, name: 'English' },
+];
 
-const setThemeType = (type: number) => {
-  activeType.value = type;
-  appStore.setThemeType(type);
+const setThemeType = (type: ThemeType) => {
+  themeType.value = type;
 };
 
-const langTypeChange = (value: string) => {
-  langType.value = value;
-  appStore.setLanguageType(value);
-  lang.global.locale.value = appStore.languageName;
+const langTypeChange = (value: LanguageType) => {
+  languageType.value = value;
+  lang.global.locale.value =
+    languageType.value === LanguageType.ZH_CN ? LanguageType.ZH_CN : LanguageType.EN_US;
 };
 </script>