全局配置

src/messages/common_cn.js

@@ -4,6 +4,8 @@ export const common = baseMessages()
 common.label.title = '简单Element+模板'
 common.label.login = '登录'
 common.label.index = '首页'
+common.label.settings = '设置'
+common.label.close = '关闭'
 common.label.langCn = '中文'
 common.label.langEn = 'English'
 common.label.language = '语言'

src/messages/common_en.js

@@ -4,6 +4,8 @@ export const common = baseMessages()
 common.label.title = 'Simple Element+'
 common.label.login = 'Login'
 common.label.index = 'Home'
+common.label.settings = 'Settings'
+common.label.close = 'Close'
 common.label.langCn = '中文'
 common.label.langEn = 'English'
 common.label.language = 'Language'

src/services/global/GlobalService.js

@@ -35,6 +35,11 @@ export const useBaseTopMenus = () => {
       iconIf: () => !globalConfigStore.isDarkTheme ? 'moon' : 'sunny',
       click: () => globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
     },
+    {
+      isDropdown: true,
+      icon: 'Setting',
+      click: () => globalConfigStore.changeShowSettings(true)
+    },
     {
       icon: 'AutoAwesomeMosaicFilled',
       isDropdown: true,

src/stores/GlobalConfigStore.js

@@ -8,11 +8,13 @@ export const useGlobalConfigStore = defineStore('globalConfig', () => {
   const currentLocale = ref(GlobalLocales.CN)
   const isDarkTheme = useDark()
   const isCollapseLeft = ref(false)
+  const isShowSettings = ref(false)
   const layoutMode = ref(GlobalLayoutMode.LEFT)
   return {
     currentLocale,
     isDarkTheme,
     isCollapseLeft,
+    isShowSettings,
     layoutMode,
     changeLocale (locale) {
       if (Object.values(GlobalLocales).includes(locale)) {
@@ -25,6 +27,9 @@ export const useGlobalConfigStore = defineStore('globalConfig', () => {
     changeTheme (dark) {
       isDarkTheme.value = dark
     },
+    changeShowSettings (val) {
+      isShowSettings.value = val
+    },
     collapseLeft () {
       isCollapseLeft.value = !isCollapseLeft.value
     },

src/views/HomeView.vue

@@ -5,6 +5,7 @@ import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { useTabsViewStore } from '@/stores/TabsViewStore'
 import { GlobalLayoutMode } from '@/consts/GlobalConstants'
 import { computed } from 'vue'
+import GlobalSettings from '@/views/components/global/GlobalSettings.vue'
 const globalConfigStore = useGlobalConfigStore()
 const tabsViewStore = useTabsViewStore()
 const showLeftMenu = computed(() => {
@@ -43,6 +44,7 @@ const showLeftMenu = computed(() => {
           </transition>
         </router-view>
       </el-main>
+      <global-settings/>
     </el-container>
   </el-container>
 </template>

src/views/components/global/GlobalSettings.vue

@@ -0,0 +1,27 @@
+<script setup>
+import {useGlobalConfigStore} from '@/stores/GlobalConfigStore'
+const globalConfigStore = useGlobalConfigStore()
+
+</script>
+
+<template>
+  <el-drawer v-model="globalConfigStore.isShowSettings" direction="rtl">
+    <template #header>
+      <strong>{{ $t('common.label.settings') }}</strong>
+    </template>
+    <template #default>
+      <div>
+
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="globalConfigStore.changeShowSettings(false)">{{$t('common.label.close')}}</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped>
+
+</style>