重生之我在公司写前端 | “博灵语音通知终端” | 登录页面

“博灵语音通知终端” 登录页面

目前在售产品型号：A3、A4、Q3

后续产品：采用全新设计，支持互联网版本的智能语音通知终端

公司官网：https://www.eyegroup.cc/

任务：

1. 首先需要支持中文、英文语言切换
2. 黑暗模式、自定义主题色
3. 登录页面跟随主题切换背景

多语言

导出 Element Plus 的语言包

import enUs from 'element-plus/es/locale/lang/en';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

import type { LanguageKey } from '@/types';

import type { Language } from 'element-plus/es/locale/';

//  Element Plus 语言包
const ELEMENT_PACKAGE: Record<LanguageKey, Language> = {
  enUs,
  zhCn,
};

export { ELEMENT_PACKAGE };

在 pinia 中创建一个全局 store，用来存储当前语言（用来允许用户修改当前语言，以及Element Plus动态加载语言包）。

type LanguageKey = 'zhCn' | 'enUs';

// 当前语言
    const currentLanguage = ref<LanguageKey>(i18n.global.locale.value);

// 监听当前语言，更新 i18n
watch(
  () => currentLanguage.value,
  (value) => {
    i18n.global.locale.value = value;
  },
);

// 设置当前语言
const setCurrentLanguage = (language: LanguageKey) => {
  currentLanguage.value = language;
};

app.vue 文件中配置 Element Plus 加载语言包

const globalStore = useGlobalStore();

// Element Plus 当前加载的语言包
const locale = computed(() => ELEMENT_PACKAGE[globalStore.currentLanguage]);

onMounted(() => {
  // 初始化全局 store
  globalStore.setupInitialize();
});

<el-config-provider :locale="locale">
    <router-view />
</el-config-provider>

登录页面添加切换语言按钮

// 语言指令事件
const languageInstrEvent = (command: LanguageKey) => {
  globalStore.setCurrentLanguage(command);
};

<el-dropdown @command="languageInstrEvent">
    <el-button link>
      <el-icon :size="22">
        <i-mdi-translate-variant />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(value, key) in LANGUAGE_OPTION"
          :key="key"
          :command="key"
          :disabled="globalStore.currentLanguage === key"
        >
          {{ value }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
</el-dropdown>

主题（色）

需要安装 @vueuse/core 包

pnpm add @vueuse/core

// 黑暗模式
const darkMode = ref(false);
const darkTheme = useDark();

// 监听黑暗模式，同步到 darkTheme
watchEffect(() => {
  darkTheme.value = darkMode.value;
});

// 设置黑暗模式
const setDarkMode = (value: boolean) => {
  darkMode.value = value;
};

// 切换黑暗模式
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
};

// 主题色
const elDomElement = useTemplateRef<HTMLElement>('el');
const primaryColor = useCssVar('--el-color-primary', elDomElement);

// 设置主题色
const setPrimaryColor = (value: string) => {
  primaryColor.value = value;
};

<!-- 暗色模式 -->
<el-button link @click="globalStore.toggleDarkMode">
    <el-icon :size="22">
      <i-mdi-white-balance-sunny v-if="globalStore.darkMode" />
      <i-mdi-weather-night v-else />
    </el-icon>
</el-button>