feat(前端): 更新登录相关组件和国际化配置

- 更新登录、注册和重置密码页面的输入框占位符和按钮文本
- 添加新的Element Plus组件类型声明
- 调整设置页面布局和样式
- 更新中英文国际化配置,新增主题设置相关翻译
- 修改API基础URL和WebSocket端点配置
This commit is contained in:
zhangtao
2026-05-01 01:05:16 +08:00
parent b7800e2ddd
commit dd4191973f
9 changed files with 78 additions and 41 deletions
+2 -2
View File
@@ -6,7 +6,7 @@ VITE_APP_TITLE=fastapiadmin
# 网络请求公用地址,根据实际部署情况修改 # 网络请求公用地址,根据实际部署情况修改
# VITE_API_BASE_URL=http://127.0.0.1:8001 # VITE_API_BASE_URL=http://127.0.0.1:8001
VITE_API_BASE_URL=https://server.fastapiadmin.com VITE_API_BASE_URL=https://service.fastapiadmin.com
# 代理前缀 # 代理前缀
VITE_APP_BASE_API=/api/v1 VITE_APP_BASE_API=/api/v1
@@ -19,4 +19,4 @@ VITE_TIMEOUT=10000
# WebSocket 端点(不配置则关闭),ai对话需要配置 # WebSocket 端点(不配置则关闭),ai对话需要配置
# VITE_APP_WS_ENDPOINT=ws://127.0.0.1:8001 # VITE_APP_WS_ENDPOINT=ws://127.0.0.1:8001
VITE_APP_WS_ENDPOINT=wss://server.fastapiadmin.com VITE_APP_WS_ENDPOINT=wss://service.fastapiadmin.com
@@ -9,7 +9,7 @@
<div class="settings-content"> <div class="settings-content">
<!-- 主题设置 --> <!-- 主题设置 -->
<section class="config-section"> <section class="config-section">
<el-divider>{{ t("settings.theme") }}</el-divider> <el-divider>{{ t("settings.themeSetting") }}</el-divider>
<div class="flex-center"> <div class="flex-center">
<el-switch <el-switch
@@ -200,7 +200,6 @@
<!-- 操作按钮区域 - 固定到底部 --> <!-- 操作按钮区域 - 固定到底部 -->
<div class="action-footer"> <div class="action-footer">
<div class="action-divider"></div>
<div class="action-card"> <div class="action-card">
<div class="action-buttons"> <div class="action-buttons">
<el-tooltip <el-tooltip
@@ -215,7 +214,7 @@
class="action-btn" class="action-btn"
@click="handleCopySettings" @click="handleCopySettings"
> >
{{ copyLoading ? "复制中..." : t("settings.copyConfig") }} {{ copyLoading ? "复制中..." : t("settings.actions.copyConfig") }}
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="重置将恢复所有设置为默认值" placement="top"> <el-tooltip content="重置将恢复所有设置为默认值" placement="top">
@@ -227,7 +226,7 @@
class="action-btn" class="action-btn"
@click="handleResetSettings" @click="handleResetSettings"
> >
{{ resetLoading ? "重置中..." : t("settings.resetConfig") }} {{ resetLoading ? "重置中..." : t("settings.actions.resetConfig") }}
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</div> </div>
@@ -464,22 +463,14 @@ const handleCloseDrawer = () => {
/* 底部操作区域样式 */ /* 底部操作区域样式 */
.action-footer { .action-footer {
flex-shrink: 0; flex-shrink: 0;
padding: 0; padding: 16px 20px;
background: var(--el-bg-color);
border-top: 1px solid var(--el-border-color-light); border-top: 1px solid var(--el-border-color-light);
.action-divider {
display: none; /* 移除重复的分割线 */
}
.action-card { .action-card {
padding: 16px 20px;
margin: 0; margin: 0;
background: var(--el-fill-color-extra-light);
border: none; border: none;
border-radius: 0; border-radius: 0;
/* 底部操作区域样式 */
.action-buttons { .action-buttons {
display: flex; display: flex;
@@ -487,12 +478,6 @@ const handleCloseDrawer = () => {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
} }
} }
} }
@@ -807,7 +792,6 @@ const handleCloseDrawer = () => {
/* 深色模式适配 */ /* 深色模式适配 */
.dark { .dark {
.action-footer { .action-footer {
background: var(--el-bg-color);
border-top-color: var(--el-border-color); border-top-color: var(--el-border-color);
} }
+20 -3
View File
@@ -105,7 +105,7 @@
"selectKeydown": "Select", "selectKeydown": "Select",
"exitKeydown": "Close" "exitKeydown": "Close"
}, },
"setting": { "settings": {
"menuType": { "menuType": {
"title": "Menu Layout", "title": "Menu Layout",
"list": ["Vertical", "Horizontal", "Mixed", "Dual"] "list": ["Vertical", "Horizontal", "Mixed", "Dual"]
@@ -169,6 +169,7 @@
"resetFailed": "Reset failed, please refresh the page and try again" "resetFailed": "Reset failed, please refresh the page and try again"
}, },
"project": "Project Settings", "project": "Project Settings",
"themeSetting": "Theme Settings",
"themeColor": "Theme Color", "themeColor": "Theme Color",
"customColor": "Custom Color", "customColor": "Custom Color",
"showTagsView": "Show Tags View", "showTagsView": "Show Tags View",
@@ -196,7 +197,17 @@
"showGuide": "Show Guide", "showGuide": "Show Guide",
"showSettings": "Show Settings", "showSettings": "Show Settings",
"interface": "Interface", "interface": "Interface",
"navigation": "Navigation" "navigation": "Navigation",
"copySuccess": "Copy Success",
"resetSuccess": "Reset Success",
"none": "None",
"fade": "Fade",
"fade-slide": "Fade Slide",
"fade-scale": "Fade Scale",
"slide-left-right": "Slide Left Right",
"zoom-in-out": "Zoom In Out",
"slide-up-down": "Slide Up Down",
"bounce": "Bounce"
}, },
"notice": { "notice": {
"title": "Notice", "title": "Notice",
@@ -238,6 +249,7 @@
"rememberPwd": "Remember password", "rememberPwd": "Remember password",
"forgetPwd": "Forgot password", "forgetPwd": "Forgot password",
"btnText": "Login", "btnText": "Login",
"backLoginBtnText": "Back to Login",
"noAccount": "No account yet?", "noAccount": "No account yet?",
"register": "Register", "register": "Register",
"success": { "success": {
@@ -296,6 +308,9 @@
"selectUser": "Select a user", "selectUser": "Select a user",
"reg": "Register" "reg": "Register"
}, },
"loginForm": {
"remember": "Remember me"
},
"forgetPassword": { "forgetPassword": {
"title": "Forgot password?", "title": "Forgot password?",
"subTitle": "Enter your email to reset your password", "subTitle": "Enter your email to reset your password",
@@ -329,7 +344,9 @@
"placeholder": "Please enter lock screen password", "placeholder": "Please enter lock screen password",
"message": "Password error", "message": "Password error",
"backToLogin": "Back to login", "backToLogin": "Back to login",
"entrySystem": "Enter system" "entrySystem": "Enter system",
"lockScreen": "Lock screen",
"required": "Please enter password"
}, },
"lockScreen": { "lockScreen": {
"pwdError": "Password error", "pwdError": "Password error",
+20 -3
View File
@@ -105,7 +105,7 @@
"selectKeydown": "选择", "selectKeydown": "选择",
"exitKeydown": "关闭" "exitKeydown": "关闭"
}, },
"setting": { "settings": {
"menuType": { "menuType": {
"title": "菜单布局", "title": "菜单布局",
"list": ["垂直", "水平", "混合", "双列"] "list": ["垂直", "水平", "混合", "双列"]
@@ -169,6 +169,7 @@
"resetFailed": "重置失败,请刷新页面后重试" "resetFailed": "重置失败,请刷新页面后重试"
}, },
"project": "项目配置", "project": "项目配置",
"themeSetting": "主题设置",
"themeColor": "主题颜色", "themeColor": "主题颜色",
"themeColorTip": "主题颜色", "themeColorTip": "主题颜色",
"customColor": "自定义颜色", "customColor": "自定义颜色",
@@ -199,7 +200,17 @@
"showGuide": "启动引导", "showGuide": "启动引导",
"showSettings": "显示设置", "showSettings": "显示设置",
"interface": "界面设置", "interface": "界面设置",
"navigation": "导航主题" "navigation": "导航主题",
"copySuccess": "复制成功",
"resetSuccess": "重置成功",
"none": "无动画",
"fade": "淡入淡出",
"fade-slide": "平滑切换",
"fade-scale": "缩放切换",
"slide-left-right": "左右滑动",
"zoom-in-out": "缩放进出",
"slide-up-down": "上下滑动",
"bounce": "弹性效果"
}, },
"notice": { "notice": {
"title": "通知", "title": "通知",
@@ -241,6 +252,7 @@
"rememberPwd": "记住密码", "rememberPwd": "记住密码",
"forgetPwd": "忘记密码", "forgetPwd": "忘记密码",
"btnText": "登录", "btnText": "登录",
"backLoginBtnText": "返回登录",
"noAccount": "还没有账号?", "noAccount": "还没有账号?",
"register": "注册", "register": "注册",
"success": { "success": {
@@ -299,6 +311,9 @@
"selectUser": "请选择用户", "selectUser": "请选择用户",
"reg": "注 册" "reg": "注 册"
}, },
"loginForm": {
"remember": "记住我"
},
"forgetPassword": { "forgetPassword": {
"title": "忘记密码?", "title": "忘记密码?",
"subTitle": "输入您的电子邮件来重置您的密码", "subTitle": "输入您的电子邮件来重置您的密码",
@@ -332,7 +347,9 @@
"placeholder": "请输入锁屏密码", "placeholder": "请输入锁屏密码",
"message": "密码错误", "message": "密码错误",
"backToLogin": "返回登录", "backToLogin": "返回登录",
"entrySystem": "进入系统" "entrySystem": "进入系统",
"lockScreen": "锁定屏幕",
"required": "请输入密码"
}, },
"lockScreen": { "lockScreen": {
"pwdError": "密码错误", "pwdError": "密码错误",
+1
View File
@@ -8,6 +8,7 @@ export {}
declare global { declare global {
const EffectScope: typeof import('vue')['EffectScope'] const EffectScope: typeof import('vue')['EffectScope']
const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElNotification: typeof import('element-plus/es')['ElNotification']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate'] const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+6
View File
@@ -37,6 +37,7 @@ declare module 'vue' {
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker'] ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -66,6 +67,8 @@ declare module 'vue' {
ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem'] ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs'] ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
@@ -133,4 +136,7 @@ declare module 'vue' {
WelcomeScreen: typeof import('./../views/module_ai/chat/components/WelcomeScreen.vue')['default'] WelcomeScreen: typeof import('./../views/module_ai/chat/components/WelcomeScreen.vue')['default']
WorkflowDesignDrawer: typeof import('./../views/module_task/workflow/components/WorkflowDesignDrawer.vue')['default'] WorkflowDesignDrawer: typeof import('./../views/module_task/workflow/components/WorkflowDesignDrawer.vue')['default']
} }
export interface GlobalDirectives {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
} }
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<h3 text-center m-0 mb-20px>{{ t("login.login") }}</h3> <h3 text-center m-0 mb-20px>{{ t("login.title") }}</h3>
<el-tabs v-model="activeTab" class="login-tabs"> <el-tabs v-model="activeTab" class="login-tabs">
<!-- 账号登录 --> <!-- 账号登录 -->
@@ -16,7 +16,7 @@
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model.trim="loginForm.username" v-model.trim="loginForm.username"
:placeholder="t('login.username')" :placeholder="t('login.placeholder.username')"
clearable clearable
> >
<template #prefix> <template #prefix>
@@ -30,7 +30,7 @@
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model.trim="loginForm.password" v-model.trim="loginForm.password"
:placeholder="t('login.password')" :placeholder="t('login.placeholder.password')"
type="password" type="password"
show-password show-password
clearable clearable
@@ -77,16 +77,16 @@
</el-form-item> </el-form-item>
<div class="flex-x-between w-full"> <div class="flex-x-between w-full">
<el-checkbox v-model="loginForm.remember">{{ t("login.rememberMe") }}</el-checkbox> <el-checkbox v-model="loginForm.remember">{{ t("login.rememberPwd") }}</el-checkbox>
<el-link type="primary" underline="never" @click="toOtherForm('resetPwd')"> <el-link type="primary" underline="never" @click="toOtherForm('resetPwd')">
{{ t("login.forgetPassword") }} {{ t("login.forgetPwd") }}
</el-link> </el-link>
</div> </div>
<!-- 登录按钮 --> <!-- 登录按钮 -->
<el-form-item> <el-form-item>
<el-button :loading="loading" type="primary" class="w-full" @click="handleLoginSubmit"> <el-button :loading="loading" type="primary" class="w-full" @click="handleLoginSubmit">
{{ t("login.login") }} {{ t("login.btnText") }}
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -4,7 +4,11 @@
<el-form ref="formRef" :model="model" :rules="rules" size="large" label-suffix=":"> <el-form ref="formRef" :model="model" :rules="rules" size="large" label-suffix=":">
<!-- 账号 --> <!-- 账号 -->
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model.trim="model.username" :placeholder="t('login.username')" clearable> <el-input
v-model.trim="model.username"
:placeholder="t('login.placeholder.username')"
clearable
>
<template #prefix> <template #prefix>
<el-icon><User /></el-icon> <el-icon><User /></el-icon>
</template> </template>
@@ -16,7 +20,7 @@
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model.trim="model.password" v-model.trim="model.password"
:placeholder="t('login.password')" :placeholder="t('login.placeholder.password')"
type="password" type="password"
show-password show-password
clearable clearable
@@ -72,7 +76,9 @@
</el-form> </el-form>
<div flex-center gap-10px> <div flex-center gap-10px>
<el-text size="default">{{ t("login.haveAccount") }}</el-text> <el-text size="default">{{ t("login.haveAccount") }}</el-text>
<el-link type="primary" underline="never" @click="toLogin">{{ t("login.login") }}</el-link> <el-link type="primary" underline="never" @click="toLogin">
{{ t("login.backLoginBtnText") }}
</el-link>
</div> </div>
</div> </div>
</template> </template>
@@ -4,7 +4,11 @@
<el-form ref="formRef" :model="model" :rules="rules" size="large" label-suffix=":"> <el-form ref="formRef" :model="model" :rules="rules" size="large" label-suffix=":">
<!-- 用户名 --> <!-- 用户名 -->
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model.trim="model.username" :placeholder="t('login.username')" clearable> <el-input
v-model.trim="model.username"
:placeholder="t('login.placeholder.username')"
clearable
>
<template #prefix> <template #prefix>
<el-icon><User /></el-icon> <el-icon><User /></el-icon>
</template> </template>
@@ -16,7 +20,7 @@
<el-form-item prop="new_password"> <el-form-item prop="new_password">
<el-input <el-input
v-model.trim="model.new_password" v-model.trim="model.new_password"
:placeholder="t('login.password')" :placeholder="t('login.placeholder.password')"
type="password" type="password"
show-password show-password
clearable clearable
@@ -52,14 +56,16 @@
<!-- 重置密码按钮 --> <!-- 重置密码按钮 -->
<el-form-item> <el-form-item>
<el-button type="warning" class="w-full" @click="submit"> <el-button type="warning" class="w-full" @click="submit">
{{ t("login.resetPassword") }} {{ t("common.confirm") }}
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div flex-center gap-10px> <div flex-center gap-10px>
<el-text size="default">{{ t("login.thinkOfPasswd") }}</el-text> <el-text size="default">{{ t("login.thinkOfPasswd") }}</el-text>
<el-link type="primary" underline="never" @click="toLogin">{{ t("login.login") }}</el-link> <el-link type="primary" underline="never" @click="toLogin">
{{ t("login.backLoginBtnText") }}
</el-link>
</div> </div>
</div> </div>
</template> </template>