feat(projects): add LangSwitch to component, fix login page i18n

package.json

@@ -7,6 +7,7 @@
     "email": "soybeanjs@outlook.com",
     "url": "https://github.com/soybeanjs"
   },
+  "packageManager": "pnpm@8.10.2",
   "scripts": {
     "dev": "vite",
     "build": "run-s typecheck build-only",

src/components/common/lang-switch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'LangSwitch'
+});
+
+interface Props {
+  lang: App.I18n.LangType;
+  langOptions: App.I18n.LangOption[];
+}
+
+defineProps<Props>();
+
+type Emits = {
+  (e: 'changeLang', lang: App.I18n.LangType): void;
+};
+
+const emits = defineEmits<Emits>();
+
+function changeLang(lang: App.I18n.LangType) {
+  emits('changeLang', lang);
+}
+</script>
+
+<template>
+  <ADropdown placement="bottom">
+    <AButton type="text" class="h-full">
+      <div class="flex-y-center">
+        <SvgIcon icon="heroicons:language" class="text-icon" />
+      </div>
+    </AButton>
+    <template #overlay>
+      <AMenu :selected-keys="[lang]">
+        <AMenuItem v-for="option in langOptions" :key="option.key" @click="changeLang(option.key)">
+          {{ option.label }}
+        </AMenuItem>
+      </AMenu>
+    </template>
+  </ADropdown>
+</template>
+
+<style scoped></style>

src/constants/app.ts

@@ -1,12 +1,11 @@
-import { $t } from '@/locales';
 import { transformObjectToOption } from '@/utils/common';
 
-export const loginModuleLabels: Record<UnionKey.LoginModule, string> = {
-  'pwd-login': $t('page.login.pwdLogin.title'),
-  'code-login': $t('page.login.codeLogin.title'),
-  register: $t('page.login.register.title'),
-  'reset-pwd': $t('page.login.resetPwd.title'),
-  'bind-wechat': $t('page.login.bindWeChat.title')
+export const loginModuleLabels: Record<UnionKey.LoginModule, App.I18n.I18nKey> = {
+  'pwd-login': 'page.login.pwdLogin.title',
+  'code-login': 'page.login.codeLogin.title',
+  register: 'page.login.register.title',
+  'reset-pwd': 'page.login.resetPwd.title',
+  'bind-wechat': 'page.login.bindWeChat.title'
 };
 
 export const themeLayoutModeLabels: Record<UnionKey.ThemeLayoutMode, string> = {

src/layouts/modules/global-header/components/user-avatar.vue

@@ -8,8 +8,12 @@ defineOptions({
   name: 'UserAvatar'
 });
 
-const { resetStore } = useAuthStore();
-const { routerPushByKey } = useRouterPush();
+const auth = useAuthStore();
+const { routerPushByKey, toLogin } = useRouterPush();
+
+function loginOrRegister() {
+  toLogin();
+}
 
 function logout() {
   Modal.confirm({
@@ -18,18 +22,19 @@ function logout() {
     okText: $t('common.confirm'),
     cancelText: $t('common.cancel'),
     onOk: () => {
-      resetStore();
+      auth.resetStore();
     }
   });
 }
 </script>
 
 <template>
-  <ADropdown placement="bottomRight">
+  <AButton v-if="!auth.isLogin" @click="loginOrRegister">{{ $t('page.login.common.loginOrRegister') }}</AButton>
+  <ADropdown v-else placement="bottomRight">
     <AButton type="text" class="h-full">
       <div class="flex-y-center">
         <SvgIcon icon="ph:user-circle" class="text-icon-large" />
-        <span class="pl-8px text-16px font-medium">Soybean</span>
+        <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
       </div>
     </AButton>
     <template #overlay>

src/layouts/modules/global-header/index.vue

@@ -2,7 +2,6 @@
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 // import GlobalLogo from '../../components/global-logo.vue';
-import SwitchLang from './components/switch-lang.vue';
 import UserAvatar from './components/user-avatar.vue';
 
 const app = useAppStore();
@@ -19,7 +18,7 @@ defineOptions({
       <MenuToggler :collapsed="app.siderCollapse" @click="app.toggleSiderCollapse" />
     </div>
     <div class="flex justify-end h-full">
-      <SwitchLang />
+      <LangSwitch :lang="app.locale" :lang-options="app.localeOptions" @change-lang="app.changeLocale" />
       <ColorSchemaSwitch
         :color-schema="themeStore.colorScheme"
         :is-dark="themeStore.darkMode"

src/layouts/modules/global-tab/context-menu.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ContextMenu'
+});
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-tab/index.vue

@@ -20,7 +20,7 @@ const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrap
 const bsScroll = ref<InstanceType<typeof BetterScroll>>();
 const tabRef = ref<HTMLElement>();
 
-const isChromeMode = false;
+const isChromeMode = true;
 
 const TAB_DATA_ID = 'data-tab-id';
 
@@ -96,7 +96,6 @@ init();
           <PageTab
             v-for="item in tab.tabs"
             :key="item.id"
-            mode="button"
             :[TAB_DATA_ID]="item.id"
             :dark-mode="theme.darkMode"
             :active="item.id === tab.activeTabId"

src/locales/lang/en.ts

@@ -43,6 +43,7 @@ const local: App.I18n.Schema = {
   page: {
     login: {
       common: {
+        loginOrRegister: 'Login / Register',
         userNamePlaceholder: 'Please enter user name',
         phonePlaceholder: 'Please enter phone number',
         codePlaceholder: 'Please enter verification code',

src/locales/lang/zh-CN.ts

@@ -43,6 +43,7 @@ const local: App.I18n.Schema = {
   page: {
     login: {
       common: {
+        loginOrRegister: '登录 / 注册',
         userNamePlaceholder: '请输入用户名',
         phonePlaceholder: '请输入手机号',
         codePlaceholder: '请输入验证码',