feat: 前端新增中英文多语言支持

- 引入 vue-i18n,新增 locales/messages.ts 以中英对照方式维护词条
- 新增 LocaleSwitch 组件,在登录/注册页与主布局顶部栏提供切换入口
- 语言持久化到 localStorage 并同步 <html lang>,Naive UI 组件语言联动
- 各视图、表格列、弹窗与提示文案全部接入国际化
- 修复 confirmImport 缺失的 tagIds 类型定义
This commit is contained in:
2026-09-17 17:03:49 +08:00
parent 65c0d8c550
commit 179e9b78ca
15 changed files with 806 additions and 351 deletions
+16 -10
View File
@@ -2,13 +2,16 @@
// 登录页面组件:提供用户名/密码表单,验证后跳转至首页
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useMessage, NCard, NForm, NFormItem, NInput, NButton, NSpace } from 'naive-ui'
import { login } from '../api/user'
import { useUserStore } from '../store/user'
import LocaleSwitch from '../components/LocaleSwitch.vue'
const router = useRouter()
const message = useMessage() // 消息提示工具
const userStore = useUserStore() // 用户状态管理
const { t } = useI18n() // 国际化
// 登录表单数据
const form = ref({
@@ -20,7 +23,7 @@ const loading = ref(false) // 登录按钮加载状态
/** 处理登录操作:校验表单 -> 调用登录接口 -> 保存 token -> 跳转首页 */
async function handleLogin() {
if (!form.value.username || !form.value.password) {
message.warning('请填写用户名和密码')
message.warning(t('login.fillRequired'))
return
}
loading.value = true
@@ -28,10 +31,10 @@ async function handleLogin() {
const res: any = await login(form.value)
userStore.setToken(res.data.token) // 保存 token
userStore.setUserInfo(res.data.user.nickname, res.data.user.id) // 保存用户信息
message.success('登录成功')
message.success(t('login.success'))
router.push('/dashboard') // 跳转到统计面板
} catch (e: any) {
message.error(e.message || '登录失败')
message.error(e.message || t('login.failed'))
} finally {
loading.value = false
}
@@ -40,17 +43,20 @@ async function handleLogin() {
<template>
<div class="login-container">
<NCard title="收支管理系统 - 登录" style="width: 400px" :bordered="true">
<NCard :title="t('login.title')" style="width: 400px" :bordered="true">
<template #header-extra>
<LocaleSwitch />
</template>
<NForm>
<NFormItem label="用户名">
<NInput v-model:value="form.username" placeholder="请输入用户名" @keyup.enter="handleLogin" />
<NFormItem :label="t('login.username')">
<NInput v-model:value="form.username" :placeholder="t('login.usernamePlaceholder')" @keyup.enter="handleLogin" />
</NFormItem>
<NFormItem label="密码">
<NInput v-model:value="form.password" type="password" show-password-on="click" placeholder="请输入密码" @keyup.enter="handleLogin" />
<NFormItem :label="t('login.password')">
<NInput v-model:value="form.password" type="password" show-password-on="click" :placeholder="t('login.passwordPlaceholder')" @keyup.enter="handleLogin" />
</NFormItem>
<NSpace vertical>
<NButton type="primary" block :loading="loading" @click="handleLogin">登录</NButton>
<NButton text type="info" @click="router.push('/register')">没有账号?去注册</NButton>
<NButton type="primary" block :loading="loading" @click="handleLogin">{{ t('login.submit') }}</NButton>
<NButton text type="info" @click="router.push('/register')">{{ t('login.toRegister') }}</NButton>
</NSpace>
</NForm>
</NCard>