perf: layout style

src/layout/components/navbar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
 import Notice from "./notice/index.vue";
@@ -22,6 +23,15 @@ const route = useRoute();
 let usename = storageSession.getItem("info")?.username;
 const { locale } = useI18n();
 
+const getDropdownItemStyle = computed(() => {
+  return t => {
+    return {
+      background: locale.value === t ? "#1b2a47" : "",
+      color: locale.value === t ? "#f4f4f5" : "#000"
+    };
+  };
+});
+
 watch(
   () => locale.value,
   () => {
@@ -82,20 +92,14 @@ function translationEn() {
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
-              :style="{
-                background: locale === 'zh' ? '#1b2a47' : '',
-                color: locale === 'zh' ? '#f4f4f5' : '#000'
-              }"
+              :style="getDropdownItemStyle('zh')"
               @click="translationCh"
               ><el-icon class="check-zh" v-show="locale === 'zh'"
                 ><check /></el-icon
               >简体中文</el-dropdown-item
             >
             <el-dropdown-item
-              :style="{
-                background: locale === 'en' ? '#1b2a47' : '',
-                color: locale === 'en' ? '#f4f4f5' : '#000'
-              }"
+              :style="getDropdownItemStyle('en')"
               @click="translationEn"
               ><el-icon class="check-en" v-show="locale === 'en'"
                 ><check /></el-icon