refactor(i18n): ♻️ 加强基础国际化

src/components/AppLink/index.vue

@@ -26,15 +26,8 @@ const type = computed(() => {
 });
 
 const linkProps = (to: string) => {
-  if (isExternalLink.value) {
-    return {
-      href: to,
-      target: "_blank",
-      rel: "noopener noreferrer",
-    };
-  }
-  return {
-    to: to,
-  };
+  return isExternalLink.value
+    ? { href: to, target: "_blank", rel: "noopener noreferrer" }
+    : { to };
 };
 </script>

src/components/Breadcrumb/index.vue

@@ -32,7 +32,7 @@ const pathCompile = (path: string) => {
   return toPath(params);
 };
 
-const breadcrumbs = ref([] as Array<RouteLocationMatched>);
+const breadcrumbs = ref<Array<RouteLocationMatched>>([]);
 
 function getBreadcrumb() {
   let matched = currentRoute.matched.filter(

src/components/LangSelect/index.vue

@@ -6,13 +6,12 @@
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
-          :disabled="appStore.language === 'zh-cn'"
-          command="zh-cn"
+          v-for="item in langOptions"
+          :key="item.value"
+          :disabled="appStore.language === item.value"
+          :command="item.value"
         >
-          中文
-        </el-dropdown-item>
-        <el-dropdown-item :disabled="appStore.language === 'en'" command="en">
-          English
+          {{ item.label }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -30,16 +29,18 @@ defineProps({
   },
 });
 
+const langOptions = [
+  { label: "中文", value: "zh-cn" },
+  { label: "English", value: "en" },
+];
+
 const appStore = useAppStore();
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 
 function handleLanguageChange(lang: string) {
   locale.value = lang;
   appStore.changeLanguage(lang);
-  if (lang === "en") {
-    ElMessage.success("Switch Language Successful!");
-  } else {
-    ElMessage.success("切换语言成功！");
-  }
+
+  ElMessage.success(t("langSelect.message.success"));
 }
 </script>

src/components/SizeSelect/index.vue

@@ -20,15 +20,19 @@
 
 <script setup lang="ts">
 import { useAppStore } from "@/store/modules/app";
-const sizeOptions = ref([
-  { label: "默认", value: "default" },
-  { label: "大型", value: "large" },
-  { label: "小型", value: "small" },
-]);
+
+const { t } = useI18n();
+const sizeOptions = computed(() => {
+  return [
+    { label: t("sizeSelect.default"), value: "default" },
+    { label: t("sizeSelect.large"), value: "large" },
+    { label: t("sizeSelect.small"), value: "small" },
+  ];
+});
 
 const appStore = useAppStore();
 function handleSizeChange(size: string) {
   appStore.changeSize(size);
-  ElMessage.success("切换布局大小成功");
+  ElMessage.success(t("sizeSelect.message.success"));
 }
 </script>