feat: 前端新增中英文多语言支持
- 引入 vue-i18n,新增 locales/messages.ts 以中英对照方式维护词条 - 新增 LocaleSwitch 组件,在登录/注册页与主布局顶部栏提供切换入口 - 语言持久化到 localStorage 并同步 <html lang>,Naive UI 组件语言联动 - 各视图、表格列、弹窗与提示文案全部接入国际化 - 修复 confirmImport 缺失的 tagIds 类型定义
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user