Complete the function optimization of v1.0.1 version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "RedFish",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Kuari",
   "homepage": "https://github.com/Kuari/RedFish",
   "scripts": {

src/App.vue

@@ -3,39 +3,63 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 const { locale } = useI18n()
-const state: { language: string } = reactive({
-  language: 'en_GB'
-})
-const fetchData = () => {
+const store = useStore()
+
+const initConfig = async () => {
+  await store.dispatch('config/init')
+}
+const switchLanguageToZH = () => {
+  locale.value = 'zh_CN'
+}
+const switchLanguageToEN = () => {
+  locale.value = 'en_GB'
+}
+const switchLanguageToAuto = () => {
   switch (navigator.language) {
     // 环境语言中间的线是居中的
     case 'zh-CN':
-      state.language = 'zh_CN'
-      locale.value = 'zh_CN'
+      switchLanguageToZH()
       break
     case 'en-GB':
-      state.language = 'en_GB'
-      locale.value = 'en_GB'
+      switchLanguageToEN()
+      break
+    default:
+      switchLanguageToEN()
+  }
+}
+const handleLanguageSwitch = (label: number) => {
+  switch (label) {
+    case 1:
+      switchLanguageToZH()
+      break
+    case 2:
+      switchLanguageToEN()
+      break
+    case 3:
+      switchLanguageToAuto()
       break
     default:
-      state.language = 'en_GB'
-      locale.value = 'en_GB'
+      switchLanguageToAuto()
   }
 }
 
-const store = useStore()
-const initTheme = () => {
-  store.dispatch('config/init')
+const fetchData = async () => {
+  let language = store.getters.language
+  if (!language) {
+    language = 3
+  }
+  console.log(language)
+  handleLanguageSwitch(language)
 }
 
-onMounted(() => {
-  initTheme()
-  fetchData()
+onMounted(async () => {
+  await initConfig()
+  await fetchData()
 })
 </script>
 

src/components/contentDetail/index.vue

@@ -3,8 +3,9 @@
     <!--textarea-->
     <el-input
       v-model="localMessage"
-      :autosize="{ minRows: 20, maxRows: 30 }"
+      rows="30"
       type="textarea"
+      resize="none"
       v-show="!checkIsJSON(localMessage)"
       @click.left.meta.exact="copyKey(localMessage, t('valueContent.notification.copySuccessMessage'))"
       @click.left.ctrl.exact="copyKey(localMessage, t('valueContent.notification.copySuccessMessage'))"

src/locales/en_GB.json

@@ -5,6 +5,7 @@
       "checkBtn": "submit",
       "historyLabel": "commands history",
       "historyPaneLabel": "run result",
+      "commandInputPlaceholder": "Enter to execute the command",
       "dialog": {
         "title": "tip",
         "content": "The following command will be executed:",
@@ -37,7 +38,8 @@
       "content": "The selected key is about to be deleted, do you want to execute it?",
       "cancel": "cancel",
       "submit": "run"
-    }
+    },
+    "clearLog": "clear"
   },
   "keyTab": {},
   "newKeyValue": {
@@ -156,6 +158,17 @@
       "dark": "Dark",
       "auto": "Auto"
     },
+    "videoTutorial": {
+      "label": "show video tutorial",
+      "yes": "show",
+      "no": "hide"
+    },
+    "language": {
+      "label": "language",
+      "zh": "简体中文",
+      "en": "English",
+      "auto": "follow the system"
+    },
     "hotKey": {
       "click": "left mouse click",
       "rightClick": "right mouse click",
@@ -180,5 +193,6 @@
     "cpu": "CPU consumption rate",
     "memory": "memory usage",
     "clientCount": "number of connected clients and number of clients waiting for blocking commands"
-  }
+  },
+  "videoTutorial": "video tutorial"
 }

src/locales/zh_CN.json

@@ -5,6 +5,7 @@
       "checkBtn": "提交操作",
       "historyLabel": "执行历史",
       "historyPaneLabel": "执行结果",
+      "commandInputPlaceholder": "回车以执行命令",
       "dialog": {
         "title": "提示",
         "content": "将要执行如下命令：",
@@ -37,7 +38,8 @@
       "content": "将要删除所选key，是否执行？",
       "cancel": "取消",
       "submit": "执行"
-    }
+    },
+    "clearLog": "清空日志"
   },
   "keyTab": {},
   "newKeyValue": {
@@ -156,6 +158,17 @@
       "dark": "深色",
       "auto": "自动"
     },
+    "videoTutorial": {
+      "label": "显示视频教程",
+      "yes": "显示",
+      "no": "隐藏"
+    },
+    "language": {
+      "label": "语言",
+      "zh": "简体中文",
+      "en": "English",
+      "auto": "跟随系统"
+    },
     "hotKey": {
       "click": "鼠标左击",
       "rightClick": "鼠标右击",
@@ -182,5 +195,6 @@
     "clientCount": "已连接客户端数(个)和等待阻塞命令客户端数(个)",
     "clientCountLegend1": "已连接客户端数",
     "clientCountLegend2": "等待阻塞命令客户端数"
-  }
+  },
+  "videoTutorial": "视频教程"
 }

src/store/getters.ts

@@ -5,7 +5,9 @@ const getters = {
   keyTabList: (state: any) => state.keyList.keyTabList,
   monitorList: (state: any) => state.keyMenuAndTabBind.monitorList,
   psList: (state: any) => state.keyMenuAndTabBind.psList,
-  theme: (state: any) => state.config.theme
+  theme: (state: any) => state.config.theme,
+  isVideoShow: (state: any) => state.config.isVideoShow,
+  language: (state: any) => state.config.language
 }
 
 export default getters

src/store/modules/config.ts

@@ -3,19 +3,29 @@ import { configType, getConfig, setConfig } from '@/utils/configStore'
 import { handleThemeChange } from '@/utils/theme'
 
 const state: configType = {
-  theme: 3
+  theme: 3,
+  isVideoShow: 1,
+  language: 3
 }
 
 const mutations = {
   initConfig (state: configType, config: configType): void {
     state.theme = config.theme
+    state.isVideoShow = config.isVideoShow
+    state.language = config.language
     handleThemeChange(config.theme)
   },
   storeConfig (state: configType): void {
     setConfig(state)
   },
   updateTheme (state: configType, theme: number): void {
     state.theme = theme
+  },
+  updateVideoShow (state: configType, isVideoShow: number): void {
+    state.isVideoShow = isVideoShow
+  },
+  updateLanguage (state: configType, language: number): void {
+    state.language = language
   }
 }
 
@@ -24,9 +34,17 @@ const actions = {
     const configData = await getConfig()
     commit('initConfig', configData)
   },
-  async update ({ commit }: { commit: Commit }, theme: number): Promise<void> {
+  async updateTheme ({ commit }: { commit: Commit }, theme: number): Promise<void> {
     commit('updateTheme', theme)
     commit('storeConfig')
+  },
+  async updateVideoShow ({ commit }: { commit: Commit }, isVideoShow: number): Promise<void> {
+    commit('updateVideoShow', isVideoShow)
+    commit('storeConfig')
+  },
+  async updateLanguage ({ commit }: { commit: Commit }, theme: number): Promise<void> {
+    commit('updateLanguage', theme)
+    commit('storeConfig')
   }
 }
 

src/utils/configStore.ts

@@ -8,6 +8,8 @@ const storeFilePath = path.join(remote.app.getPath('home'), '.myRedisClient/.con
 
 export interface configType {
   theme: number
+  isVideoShow: number
+  language: number
 }
 
 export const getConfig = async (): Promise<configType> => {
@@ -17,7 +19,9 @@ export const getConfig = async (): Promise<configType> => {
     return JSON.parse(result)
   } else {
     return {
-      theme: 1
+      theme: 3,
+      isVideoShow: 1,
+      language: 3
     }
   }
 }

src/views/config/content.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import GeneralCom from './theme.vue'
+import GeneralCom from './general.vue'
 import HotKey from './hotKey.vue'
 import About from './about.vue'
 

src/views/config/general.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="flex flex-col">
     <theme-com />
+    <video-show />
+    <language />
   </div>
 </template>
 
 <script setup lang="ts">
 import ThemeCom from './theme.vue'
+import VideoShow from './videoShow.vue'
+import Language from './language.vue'
 </script>

src/views/config/language.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="p-4 flex flex-row items-center">
+    <div class="w-40 font-bold">{{ t('config.language.label') }}:</div>
+    <el-radio-group v-model="radio" @change="handleChange">
+      <el-radio :label="1" class="w-20">{{ t('config.language.zh') }}</el-radio>
+      <el-radio :label="2" class="w-20">{{ t('config.language.en') }}</el-radio>
+      <el-radio :label="3" class="w-20">{{ t('config.language.auto') }}</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+const { t, locale } = useI18n()
+const store = useStore()
+
+const radio = ref(3)
+
+const switchLanguageToZH = () => {
+  locale.value = 'zh_CN'
+}
+const switchLanguageToEN = () => {
+  locale.value = 'en_GB'
+}
+const switchLanguageToAuto = () => {
+  switch (navigator.language) {
+    // 环境语言中间的线是居中的
+    case 'zh-CN':
+      switchLanguageToZH()
+      break
+    case 'en-GB':
+      switchLanguageToEN()
+      break
+    default:
+      switchLanguageToEN()
+  }
+}
+const handleLanguageSwitch = (label: number) => {
+  switch (label) {
+    case 1:
+      switchLanguageToZH()
+      break
+    case 2:
+      switchLanguageToEN()
+      break
+    case 3:
+      switchLanguageToAuto()
+      break
+    default:
+      switchLanguageToAuto()
+  }
+}
+const handleChange = async (label: number) => {
+  handleLanguageSwitch(label)
+  await store.dispatch('config/updateLanguage', label)
+}
+
+onMounted(() => {
+  radio.value = store.getters.language || 3
+})
+</script>

src/views/config/theme.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="p-4 flex flex-row items-center">
-    <div class="w-28 font-bold">{{ t('config.theme.label') }}:</div>
+    <div class="w-40 font-bold">{{ t('config.theme.label') }}:</div>
     <el-radio-group v-model="radio" @change="handleChange">
-      <el-radio :label="1">{{ t('config.theme.light') }}</el-radio>
-      <el-radio :label="2">{{ t('config.theme.dark') }}</el-radio>
-      <el-radio :label="3">{{ t('config.theme.auto') }}</el-radio>
+      <el-radio :label="1" class="w-20">{{ t('config.theme.light') }}</el-radio>
+      <el-radio :label="2" class="w-20">{{ t('config.theme.dark') }}</el-radio>
+      <el-radio :label="3" class="w-20">{{ t('config.theme.auto') }}</el-radio>
     </el-radio-group>
   </div>
 </template>
@@ -21,7 +21,7 @@ const radio = ref(3)
 const store = useStore()
 
 const handleChange = async (label: number) => {
-  await store.dispatch('config/update', label)
+  await store.dispatch('config/updateTheme', label)
   handleThemeChange(label)
 }