fix: 处理界面展示相关联的问题

src/components/UserInfo/components/SystemSet/index.d.ts

@@ -0,0 +1,8 @@
+export type ListType = {
+  key: string
+  type: string
+  name: string
+  desc: string
+  value: boolean
+  tip: string
+}

src/components/UserInfo/components/SystemSet/index.ts

@@ -0,0 +1,3 @@
+import SystemSet from './index.vue';
+
+export { SystemSet };

src/components/UserInfo/components/SystemSet/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <n-modal v-model:show="modelShow" @afterLeave="closeModal">
+    <n-list bordered class="go-system-setting">
+      <template #header> 系统设置 </template>
+
+      <n-list-item v-for="item in list" :key="item.name">
+        <n-space :size="40">
+          <n-space>
+            <n-text class="item-left">{{ item.name }}</n-text>
+            <template v-if="item.type === 'switch'">
+              <n-switch
+                v-model:value="item.value"
+                size="small"
+                @update:value="handleChange($event, item)"
+              />
+            </template>
+          </n-space>
+          <n-space>
+            <n-text class="item-right">{{ item.desc }}</n-text>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon size="21">
+                  <HelpOutlineIcon />
+                </n-icon>
+              </template>
+              <span>
+                {{ item.tip }}
+              </span>
+            </n-tooltip>
+          </n-space>
+        </n-space>
+      </n-list-item>
+      <n-list-item></n-list-item>
+    </n-list>
+  </n-modal>
+</template>
+
+<script script lang="ts" setup>
+import { reactive, h } from 'vue'
+import { ListType } from './index.d'
+import { useLangStore } from '@/store/modules/langStore/langStore'
+import { icon } from '@/plugins'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const emit = defineEmits(['update:modelShow'])
+
+defineProps({
+  modelShow: Boolean
+})
+
+const langStore = useLangStore()
+
+const list = reactive<ListType[]>([
+  {
+    key: 'lang',
+    value: false,
+    type: 'switch',
+    name: '切换语言',
+    desc: '切换语言是否重新加载页面',
+    tip: '不重载可能会导致部分区域语言切换失败'
+  }
+])
+
+const closeModal = () => {
+  emit('update:modelShow', false)
+}
+
+const handleChange = (e: Event, item: ListType) => {
+  switch (item.key) {
+    case 'lang':
+      langStore.changeReload(item.value)
+      break
+
+    default:
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('system-setting') {
+  @extend .go-background-filter;
+  min-width: 100px;
+  max-width: 60vw;
+  .item-left {
+    width: 200px;
+  }
+}
+</style>

src/components/UserInfo/index.vue

@@ -17,19 +17,31 @@
       />
     </div>
   </n-dropdown>
+
+  <!-- 系统设置 model -->
+  <SystemSet v-model:modelShow="modelShow"/>
 </template>
 
 <script lang="ts" setup>
-import { h, ref, reactive } from 'vue';
+import { h, ref, reactive } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout } from '@/utils'
+import { SystemSet } from './components/SystemSet/index'
 
 import { icon } from '@/plugins'
-const { DocumentTextIcon, ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon } = icon.ionicons5
+const {
+  DocumentTextIcon,
+  ChatboxEllipsesIcon,
+  PersonIcon,
+  LogOutOutlineIcon,
+  SettingsSharpIcon
+} = icon.ionicons5
 
 const t = window['$t']
 
+const modelShow = ref(false)
+
 const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
 
 // 是否失败
@@ -78,9 +90,14 @@ const options = reactive([
     key: 'contact',
     icon: renderIcon(ChatboxEllipsesIcon)
   },
+  {
+    label: t('global.sys_set'),
+    key: 'sysSet',
+    icon: renderIcon(SettingsSharpIcon)
+  },
   {
     type: 'divider',
-    key: 'd2'
+    key: 'd3'
   },
   {
     label: t('global.logout'),
@@ -94,6 +111,11 @@ const errorHandle = (e: Event) => {
   fallback.value = true
 }
 
+// 系统设置
+const sysSetHandle = () => {
+  modelShow.value = true
+}
+
 const handleSelect = (key: string) => {
   switch (key) {
     case 'doc':
@@ -102,6 +124,9 @@ const handleSelect = (key: string) => {
     case 'contact':
       openDoc()
       break
+    case 'sysSet':
+      sysSetHandle()
+      break
     case 'logout':
       logout()
       break
@@ -112,6 +137,6 @@ const handleSelect = (key: string) => {
 <style lang="scss" scoped>
 .user-info-box {
   cursor: pointer;
-  transform: scale(.7);
+  transform: scale(0.7);
 }
 </style>