适配语言

src/views/css/style.css

@@ -146,8 +146,8 @@
   color: #666666;
   font-weight: 400;
 }
-.register > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > span,
-.login > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > span {
+.register > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > div > span,
+.login > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > div > span {
   text-decoration: underline;
   cursor: pointer;
 }
@@ -172,8 +172,8 @@
   font-size: 1.6rem;
   color: #666;
 }
-.register > .right > .box > .tip-2 > span,
-.login > .right > .box > .tip-2 > span {
+.register > .right > .box > .tip-2::v-deep > span,
+.login > .right > .box > .tip-2::v-deep > span {
   text-decoration: underline;
   color: #FF7A50;
   cursor: pointer;

src/views/home/left-nav.vue

@@ -9,15 +9,15 @@
 		</div>
 		<button class="create-btn">
 			<span class="icon"><svg-icon name="add" size="16" /></span>
-			<span v-show="!isCollapse" class="text">New Project</span>
+			<span v-show="!isCollapse" class="text">{{ $t('Home.newProject') }}</span>
 		</button>
 		<!-- <div class="menu-item" @click="onHome">
 			<span class="icon"><svg-icon name="home" size="24" /></span>
-			<span class="title" v-show="!isCollapse">Home</span>
+			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
 		</div> -->
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
 			<span class="icon"><svg-icon name="history" size="24" /></span>
-			<span class="title" v-show="!isCollapse">History</span>
+			<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
 			<span class="icon jiantou" v-show="!isCollapse"
 				><svg-icon name="arrow-right" size="14" />
 			</span>
@@ -45,6 +45,8 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	const { t: $t } = useI18n()
 	const route = useRoute()
 	const router = useRouter()
 	import { useGlobalStore } from '@/stores'
@@ -57,7 +59,7 @@
 	const historyList = ref([
 		{
 			title: true,
-			name: 'Today'
+			name: $t('Home.today')
 		},
 		{
 			name: 'Conversation Item 1'
@@ -67,14 +69,14 @@
 		},
 		{
 			title: true,
-			name: 'Yesterday'
+			name: $t('Home.yesterday')
 		},
 		{
 			name: 'Conversation Item 3'
 		},
 		{
 			title: true,
-			name: 'Earlier Chat'
+			name: $t('Home.earlierChat')
 		},
 		{
 			name: 'Conversation Item 4'

src/views/home/top-nav.vue

@@ -5,7 +5,7 @@
 		</span>
 		<p class="division"></p>
 		<div class="credits-box">
-			<span class="credits">Credits: 6000</span>
+			<span class="credits">{{ $t('Home.creditsNum', { num: 6000 }) }}</span>
 			<span class="icon" @click="onRefresh" :class="{ loading }">
 				<svg-icon name="refresh" size="21" />
 			</span>

src/views/login/index.vue

@@ -2,8 +2,8 @@
 	<div class="index background-pink">
 		<div class="header">
 			<p class="split"></p>
-			<button class="login" @click="onLogin">Log in</button>
-			<button class="register" @click="onRegister">Sign up</button>
+			<button class="login" @click="onLogin">{{ $t('Login.Login') }}</button>
+			<button class="register" @click="onRegister">{{ $t('Login.SignUp') }}</button>
 		</div>
 	</div>
 </template>

src/views/login/login.vue

@@ -17,38 +17,42 @@
 				<img src="@/assets/images/login/elephant.png" />
 				<template v-if="!isVisible">
 					<div class="title">
-						<span>Log on to</span>
+						<span>{{ $t('Login.LoginTo') }}</span>
 						<img src="@/assets/images/logo-2.png" />
 					</div>
-					<div class="tip">A multi-agent canvas for rapid, trend driven design iteration.</div>
+					<div class="tip">{{ $t('Login.LoginTitle') }}</div>
 					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
-						<el-form-item label="Email" prop="email">
-							<el-input v-model="formData.email" placeholder="Enter your email" name="email" />
+						<el-form-item :label="$t('Login.email')" prop="email">
+							<el-input
+								v-model="formData.email"
+								:placeholder="$t('Login.enterEmail')"
+								name="email"
+							/>
 						</el-form-item>
-						<el-form-item label="Password" prop="password">
+						<el-form-item :label="$t('Login.password')" prop="password">
 							<el-input
 								v-model="formData.password"
-								placeholder="Enter your password"
+								:placeholder="$t('Login.enterPassword')"
 								type="password"
 								show-password
 								name="password"
 							/>
 						</el-form-item>
 						<div class="forgetPassword">
-							<span>forget password?</span>
+							<span>{{ $t('Login.forgetPassword') }}</span>
 						</div>
 						<el-form-item prop="privacy" class="privacy">
 							<el-checkbox v-model="formData.privacy">
-								I agree to the <span @click.prevent="onClickPrivacy">Terms, Policy</span> and Fees.
+								<div v-html="$t('Login.agreeTermsPolicy')"></div>
 							</el-checkbox>
 						</el-form-item>
 						<el-form-item>
-							<el-button class="submit" type="primary" @click="onSubmit">Log in</el-button>
+							<el-button class="submit" type="primary" @click="onSubmit">{{
+								$t('Login.Login')
+							}}</el-button>
 						</el-form-item>
 					</el-form>
-					<div class="tip-2">
-						Don't have an account? <span @click.prevent="onClickRegister">Sign up</span>
-					</div>
+					<div class="tip-2" v-html="$t('Login.noAccountToSignUp')"></div>
 				</template>
 				<visible-code v-else :email="formData.email" @submit="onVerifyCode" />
 				<other-login />
@@ -97,10 +101,6 @@
 		console.log(code)
 		router.push({ name: 'home' })
 	}
-	const onClickPrivacy = () => {}
-	const onClickRegister = () => {
-		router.push({ name: 'register' })
-	}
 </script>
 
 <style lang="less" scoped>

src/views/login/other-login.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="other-login">
-		<div class="title">or continue with</div>
+		<div class="title">{{ $t('Login.orContinueWith') }}</div>
 		<div class="btns">
 			<el-button class="submit" @click="onGoogle">
 				<img src="@/assets/images/login/google.png" />
-				Sign in with Google
+				{{ $t('Login.googleLogin') }}
 			</el-button>
 			<el-button class="submit" @click="onWechat">
 				<img src="@/assets/images/login/wechat.png" />
-				Sign in with Wechat
+				{{ $t('Login.wechatLogin') }}
 			</el-button>
 		</div>
 	</div>

src/views/login/register.vue

@@ -17,38 +17,40 @@
 				<img src="@/assets/images/login/elephant.png" />
 				<template v-if="!isVisible">
 					<div class="title">
-						<span>Register for</span>
+						<span>{{ $t('Login.registerFor') }}</span>
 						<img src="@/assets/images/logo-2.png" />
 					</div>
-					<div class="tip">A multi-agent canvas for rapid, trend driven design iteration.</div>
+					<div class="tip">{{ $t('Login.registerTip') }}</div>
 					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
-						<el-form-item label="Name" prop="name">
-							<el-input name="name" v-model="formData.name" placeholder="Enter your name" />
+						<el-form-item :label="$t('Login.name')" prop="name">
+							<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
 						</el-form-item>
-						<el-form-item label="Password" prop="password">
+						<el-form-item :label="$t('Login.password')" prop="password">
 							<el-input
 								name="password"
 								v-model="formData.password"
-								placeholder="Enter your password"
+								:placeholder="$t('Login.enterPassword')"
 								type="password"
 								show-password
 							/>
 						</el-form-item>
-						<el-form-item label="Email" prop="email">
-							<el-input name="email" v-model="formData.email" placeholder="Enter your email" />
+						<el-form-item :label="$t('Login.email')" prop="email">
+							<el-input
+								name="email"
+								v-model="formData.email"
+								:placeholder="$t('Login.enterEmail')"
+							/>
 						</el-form-item>
 						<el-form-item prop="privacy" class="privacy">
 							<el-checkbox v-model="formData.privacy">
-								I agree to the <span @click.prevent="onClickPrivacy">Terms, Policy</span> and Fees.
+								<div v-html="$t('Login.agreeTermsPolicy')"></div>
 							</el-checkbox>
 						</el-form-item>
 						<el-form-item>
-							<el-button class="submit" type="primary" @click="onSubmit">Register</el-button>
+							<el-button class="submit" type="primary" @click="onSubmit">{{ $t('Login.register') }}</el-button>
 						</el-form-item>
 					</el-form>
-					<div class="tip-2">
-						Already have an account? <span @click.prevent="onClickLogin">Log in</span>
-					</div>
+					<div class="tip-2" v-html="$t('Login.havenAccountToLogin')"></div>
 				</template>
 				<visible-code v-else :email="formData.email" @submit="onVerifyCode" />
 				<other-login />
@@ -99,10 +101,6 @@
 		console.log(code)
 		router.push({ name: 'nuic' })
 	}
-	const onClickPrivacy = () => {}
-	const onClickLogin = () => {
-		router.push({ name: 'login' })
-	}
 </script>
 
 <style lang="less" scoped>

src/views/login/style.less

@@ -143,9 +143,11 @@
 							color: #666666;
 							font-weight: 400;
 
-							>span {
-								text-decoration: underline;
-								cursor: pointer;
+							>div {
+								>span {
+									text-decoration: underline;
+									cursor: pointer;
+								}
 							}
 						}
 					}
@@ -172,7 +174,7 @@
 				font-size: 1.6rem;
 				color: #666;
 
-				>span {
+				&::v-deep>span {
 					text-decoration: underline;
 					color: #FF7A50;
 					cursor: pointer;

src/views/login/tools.js

@@ -1,9 +1,11 @@
+import i18n from '@/lang'
+const t = i18n.global.t
 export const validateName = (rule, value, callback) => {
 	var str = ""
 	if (!value) {
-		str = 'Please input the name'
+		str = t('Login.pleaseInputName')
 	} else if (value.length < 2 || value.length > 20) {
-		str = 'Name length must be between 2 and 20 characters'
+		str = t('Login.nameLengthError', { min: 2, max: 20 })
 	}
 	callback(str ? new Error(str) : undefined)
 }
@@ -11,24 +13,24 @@ export const validateEmail = (rule, value, callback) => {
 	const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/
 	var str = ''
 	if (!value) {
-		str = 'Please input the email'
+		str = t('Login.pleaseInputEmail')
 	} else if (!emailRegex.test(value)) {
-		str = 'Please input the email again'
+		str = t('Login.emailFormatError')
 	}
 	callback(str ? new Error(str) : undefined)
 }
 export const validatePass = (rule, value, callback) => {
 	var str = ''
 	if (!value) {
-		str = 'Please input the password'
+		str = t('Login.pleaseInputPassword')
 	} else if (value.length < 6 || value.length > 20) {
-		str = 'Password length must be between 6 and 20 characters'
+		str = t('Login.passwordLengthError', { min: 6, max: 20 })
 	}
 	callback(str ? new Error(str) : undefined)
 }
 export const validatePrivacy = (rule, value, callback) => {
 	if (!value) {
-		callback(new Error('Please agree to the Terms, Policy and Fees'))
+		callback(new Error(t('Login.pleaseTermsPolicy')))
 	} else {
 		callback()
 	}

src/views/login/visible-code.vue

@@ -1,13 +1,12 @@
 <template>
 	<div class="visible-code">
-		<div class="title">Verify your email address</div>
-		<div class="tip">
-			A verification code has been sent to <span>{{ email }}</span>
-		</div>
+		<div class="title">{{ $t('Login.verifyEmail') }}</div>
+		<div class="tip" v-html="$t('Login.verifyCodeHasSent', { email: props.email })"></div>
 		<input-code @submit="onVerify" v-model="code" />
-		<el-button class="verify" @click="onVerify">Verify</el-button>
-		<p class="time" v-if="time > -1">
-			<span @click="onResend">Resend Code </span> in {{ timeStr }}
+		<el-button class="verify" @click="onVerify">{{ $t('Login.verify') }}</el-button>
+		<p class="time" v-if="time > 0">{{ $t('Login.resendCodeIn', { time: timeStr }) }}</p>
+		<p class="time" v-if="time === 0">
+			<span @click="onResend">{{ $t('Login.resendCode') }}</span>
 		</p>
 	</div>
 </template>
@@ -45,7 +44,7 @@
 		clearTime()
 	})
 	onMounted(() => {
-		setTime()
+		setTime(5)
 	})
 	const onResend = () => {
 		if (time.value > 0) return

src/views/nuic/nuic-1.vue

@@ -1,16 +1,12 @@
 <template>
 	<div class="nuic-1">
 		<img src="@/assets/images/nuic/nuic-1-bg.png" />
-		<p class="hi">Hi, Aaa.</p>
-		<p class="title">Help Fiphant discover the <b>'YOU'</b> in your space.</p>
-		<p class="tip">
-			Let's set up your profile. A few quick details will help Fiphant understand
-			<br />
-			your needs and find exactly what you're looking for.
-		</p>
+		<p class="hi">{{ $t('Nuic.hiName', { name: 'Aaa' }) }}</p>
+		<p class="title" v-html="$t('Nuic.nuic1Title')"></p>
+		<p class="tip" v-html="$t('Nuic.nuic1Tip')"></p>
 		<div class="btns">
-			<button class="next" @click="emit('next')">Let’s go, Fiphant!</button>
-			<button class="skip" @click="onSkip">Skip</button>
+			<button class="next" @click="emit('next')">{{ $t('Nuic.letsGo') }}</button>
+			<button class="skip" @click="onSkip">{{ $t('Nuic.skip') }}</button>
 		</div>
 	</div>
 </template>
@@ -41,7 +37,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 2rem;
-			> b {
+			&::v-deep > b {
 				font-size: 4.8rem;
 			}
 		}

src/views/nuic/nuic-2.vue

@@ -1,21 +1,20 @@
 <template>
 	<div class="nuic-2">
-		<!-- <img src="@/assets/images/nuic/nuic-1-bg.png" /> -->
-		<p class="title">What's your dream <b>home vibe</b> ?</p>
+		<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
 		<div class="list">
 			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
 				<img :src="v.url" draggable="false" />
 				<div class="active" v-show="v.active">
-					<span>Constructivism</span>
+					<span>这是一段文字</span>
 				</div>
 			</div>
 		</div>
 		<div class="btns">
 			<button class="more" @click="onLoadMore">
-				<span>Load more</span>
+				<span>{{ $t('Nuic.loadMore') }}</span>
 				<div><svg-icon name="refresh-single" size="24" /></div>
 			</button>
-			<button class="next" @click="emit('next')">Next</button>
+			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
 		</div>
 	</div>
 </template>
@@ -35,9 +34,7 @@
 		{ id: 7, url: '/image/nuic/style-7.png', active: false },
 		{ id: 8, url: '/image/nuic/style-8.png', active: false }
 	])
-	const onLoadMore = () => {
-
-	}
+	const onLoadMore = () => {}
 </script>
 
 <style lang="less" scoped>
@@ -46,7 +43,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 6rem;
-			> b {
+			&::v-deep > b {
 				font-size: 4.8rem;
 			}
 		}
@@ -97,10 +94,9 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				>span{
+				> span {
 					margin-right: 1.2rem;
 				}
-				
 			}
 		}
 	}

src/views/nuic/nuic-3.vue

@@ -1,21 +1,21 @@
 <template>
 	<div class="nuic-3">
-		<p class="title"><b>Where</b> are you based? What do you <b>do</b> ?</p>
+		<p class="title" v-html="$t('Nuic.nuic3Title')"></p>
 
 		<div class="select-item">
-			<div class="title">Based in</div>
+			<div class="title">{{ $t('Nuic.basedIn') }}</div>
 			<el-select v-model="data.based">
 				<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value" />
 			</el-select>
 		</div>
 		<div class="select-item">
-			<div class="title">Role</div>
+			<div class="title">{{ $t('Nuic.role') }}</div>
 			<el-select v-model="data.role">
 				<el-option v-for="v in data.roleList" :key="v.value" :label="v.label" :value="v.value" />
 			</el-select>
 		</div>
 		<div class="btns">
-			<button class="next" @click="emit('next')">All set!</button>
+			<button class="next" @click="emit('next')">{{ $t('Nuic.allSet') }}</button>
 		</div>
 	</div>
 </template>