登录增加验证码，主页增加语言切换菜单

src/api/login.js

@@ -7,6 +7,12 @@ const api={}
 
 const store=useHomeStore()
 
+api.getCaptcha=()=>{
+	return request({
+	    url: '/login/getImageCaptcha'
+	});
+}
+
 api.checkLogin = async loginForm => {
 	loginForm.pwd=md5(loginForm.pwd)
     /* return request({

src/components/Header.vue

@@ -14,6 +14,7 @@
 			    text-color="#bfcbd9"
 			    active-text-color="#20a0ff"
 				:default-active="defActiveTag"
+				style="max-width: calc(100vw - 530px);"
 			  >
 			   
 				<navmenu-item v-for="menu in menus" :key="menu.menuId" :item="menu" @clickMenuItem="menuClickHandle"></navmenu-item>
@@ -31,11 +32,26 @@
                     </el-tooltip>
                     <span class="btn-bell-badge" v-if="message"></span>
                 </div> -->
-               
+                <el-dropdown @command="(cmd)=>{i18nName=i18nOpts[cmd]}">
+					<div>
+						<div class="el-dropdown-link" style="text-align: right;">
+							{{i18nName}}
+						</div>
+						<el-icon  color="#ffffff" :size="16"><CaretBottom/></el-icon>
+					</div>
+					
+					<template #dropdown>
+					    <el-dropdown-menu>
+					       <el-dropdown-item command="zh">中文</el-dropdown-item> 
+					       <el-dropdown-item command="en">English</el-dropdown-item>
+						   <el-dropdown-item command="ru">Русский язык</el-dropdown-item>
+					    </el-dropdown-menu>
+					</template>
+				</el-dropdown>
                 <!-- 用户名下拉菜单 -->
-                <el-dropdown class="user-name"  @command="handleCommand">
+                <el-dropdown   @command="handleCommand">
 					<div>
-						<div class="el-dropdown-link">
+						<div class="el-dropdown-link" style="width:70px">
 							{{app.takeSetting("usName")}}
 						</div>
 						<el-icon  color="#ffffff" :size="16"><CaretBottom/></el-icon>
@@ -82,6 +98,13 @@
 	
 	const menus = ref([])
 	
+	const i18nName=ref('中文')
+	const i18nOpts=reactive({
+		'zh':'中文',
+		'en':'English',
+		'ru':'Русский язык'
+	})
+	
 	const editDialogShow=ref(false)
 	
 	const editWin=ref(null)
@@ -202,7 +225,7 @@
 	
 	
 	line-height: 60px;
-	width:calc(100vw - 422px);
+	/*width:calc(100vw - 530px);*/
 }
 .header .nav-menu:deep(.el-menu--horizontal){
 	border:none;
@@ -217,7 +240,7 @@
 
 .header-right {
     float: right;
-    padding-right: 15px;
+    padding-right: 0px;
 	
 }
 .header-user-con {
@@ -225,6 +248,9 @@
     height: 60px;
     align-items: center;
 }
+.header-user-con .el-dropdown{
+	margin:0px 10px;
+}
 .btn-fullscreen {
     transform: rotate(45deg);
     margin-right: 5px;
@@ -261,6 +287,8 @@
     color: #fff;
     cursor: pointer;
 	max-width:95px;
+	width:88px;
+	padding:0px 5px;
 	overflow: hidden;
 	text-overflow:ellipsis;
 	white-space: nowrap;

src/pages/Login.vue

@@ -16,12 +16,19 @@
 	            </el-form-item>
 	            <el-form-item prop="pwd">
 	                <el-input type="password" placeholder="密码" v-model="loginForm.pwd" input-style="height:40px" tabindex="2"
-	                    @keyup.enter="submitForm()">
+	                    >
 	                    <template #prepend>
 	                        <el-button icon="Lock"></el-button>
 	                    </template>
 	                </el-input>
 	            </el-form-item>
+				<el-form-item prop="captchaCode">
+				    <el-input  placeholder="请输入验证码" v-model="loginForm.captchaCode" input-style="height:40px;" style="flex:1;" tabindex="3"
+				        @keyup.enter="submitForm()">
+				        
+				    </el-input>
+					<img :src="captchaImgUrl" style="z-index: 100;border-radius: 2px;cursor: pointer;" @click="loadCaptcha"/>
+				</el-form-item>
 	            <div class="login-btn">
 	                <el-button type="primary" @click="submitForm()" size="default" tabindex="3" :loading="isLoading">登录</el-button>
 	            </div>
@@ -46,21 +53,24 @@ import { useHomeStore } from "../store/home.js"
         const loginForm = reactive({
             loginId: '',
             pwd: '',
+			captchaCode:null,
+			captchaId:null
         });
 
         const rules = {
             loginId: [{required: true, message: "请输入用户名",trigger: "blur"}],
-            pwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
+            pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
+			captchaCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
         };
-		
+		const captchaImgUrl=ref(null)
 		const isLoading=ref(false)
 		const login = ref(null);
 		const submitForm = () => {
 		    login.value.validate((valid) => {
 				if (valid) {
 					isLoading.value=true
-					let {loginId,pwd}=loginForm
-					loginAPI.checkLogin({loginId,pwd}).then(resp=>{
+					let {loginId,pwd,captchaCode,captchaId}=loginForm
+					loginAPI.checkLogin({loginId,pwd,captchaCode,captchaId}).then(resp=>{
 						/* console.log(resp)
 						isLoading.value=false
 						if(resp.code===0){
@@ -93,7 +103,18 @@ import { useHomeStore } from "../store/home.js"
 		    });
 		};
 		
+		const loadCaptcha=()=>{
+			loginAPI.getCaptcha().then(resp=>{
+				if(resp.code==0){
+					captchaImgUrl.value=resp.data.img
+					loginForm.captchaId=resp.data.captchaId
+				}
+			})
+		}
 		
+		onMounted(()=>{
+			loadCaptcha()
+		})
 </script>
 
 <style scoped>