LangSelect 语言选择

语言选择器组件，用于切换系统的显示语言。

🎯 在线体验：登录 https://vue.youlai.tech 后，点击右上角导航栏的语言选择图标即可切换中/英文。

功能特性

• 🌍 多语言切换 - 支持中英文等多语言切换
• 💾 状态持久化 - 语言设置自动保存到本地
• 🔄 实时切换 - 切换后立即生效，无需刷新

基础用法

组件已集成在布局中，无需手动引入：

<template>
  <div class="navbar">
    <LangSelect />
  </div>
</template>

支持的语言

语言	代码	说明
简体中文	zh-cn	默认语言
English	en	英文

与 Store 集成

组件使用 useAppStore 管理语言状态：

import { useAppStore } from "@/store";

const appStore = useAppStore();

// 获取当前语言
const currentLang = appStore.language;

// 设置语言
appStore.setLanguage("en");

添加新语言

1. 在 src/lang/package/ 目录下创建语言包文件：

// src/lang/package/ja.json
{
  "login": {
    "title": "ログイン"
  }
}

2. 在 src/lang/index.ts 中注册语言：

import ja from "./package/ja.json";

const messages = {
  "zh-cn": zhCn,
  en: en,
  ja: ja, // 添加日语
};

3. 在组件中添加语言选项：

const languages = [
  { label: "简体中文", value: "zh-cn" },
  { label: "English", value: "en" },
  { label: "日本語", value: "ja" },
];

样式定制

// 自定义语言选择器样式
:deep(.el-dropdown) {
  cursor: pointer;

  .el-icon {
    font-size: 18px;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

注意事项

1. 语言包完整性：确保所有语言包的 key 保持一致
2. Element Plus：语言切换会同步更新 Element Plus 的语言
3. 持久化：语言设置保存在 localStorage 中

相关链接

• 国际化
• 状态管理