feat: user page i18n
This commit is contained in:
KUN1007
parent
def0b75f0b
commit
9c2a1dcfd3
|
|
@ -208,6 +208,64 @@ export default {
|
|||
privacy: 'Privacy Policy',
|
||||
},
|
||||
},
|
||||
user: {
|
||||
user: 'User',
|
||||
admin: 'Administrator',
|
||||
SU: 'Super Admin',
|
||||
normal: 'Normal',
|
||||
banned: 'Banned',
|
||||
nav: {
|
||||
profile: 'Profile',
|
||||
settings: 'Settings',
|
||||
email: 'Email',
|
||||
published: 'Published',
|
||||
liked: 'Liked',
|
||||
upvote: 'Upvote',
|
||||
reply: 'Reply',
|
||||
comment: 'Comment',
|
||||
},
|
||||
profile: {
|
||||
name: 'Name',
|
||||
moemoepoint: 'MoeMoePoint',
|
||||
register: 'Registration Number',
|
||||
roles: 'Roles',
|
||||
status: 'Status',
|
||||
upvote: 'Number of Upvotes',
|
||||
like: 'Number of Likes',
|
||||
dislike: 'Number of Dislikes',
|
||||
today: 'Published Today',
|
||||
topic: 'Number of Topics',
|
||||
reply: 'Number of Replies',
|
||||
comment: 'Number of Comments',
|
||||
time: 'Registration Date',
|
||||
bio: 'Bio',
|
||||
null: `Please fill this loli in because she hasn't left anything`,
|
||||
},
|
||||
settings: {
|
||||
avatar: 'Change Avatar',
|
||||
drag: 'Drag and drop an image into the box OR',
|
||||
click: 'Click to upload',
|
||||
supportImage: 'Supports images up to 1007KB',
|
||||
supportFormat: 'Supports jpg and png formats',
|
||||
confirm: 'Confirm',
|
||||
bio: 'Change Bio',
|
||||
hint: 'Please enter your new signature, up to 107 characters',
|
||||
count: 'Character count',
|
||||
},
|
||||
email: {
|
||||
email: 'Change Email',
|
||||
current: 'Your current email is',
|
||||
newEmail: 'Please enter your new email',
|
||||
code: 'Please enter the verification code',
|
||||
send: 'Send Code',
|
||||
confirmEmail: 'Confirm Change',
|
||||
pwd: 'Change Password',
|
||||
oldPwd: 'Please enter your old password',
|
||||
newPwd: 'Please enter your new password',
|
||||
rePwd: 'Please enter your new password again',
|
||||
confirmPwd: 'Confirm Password Change',
|
||||
},
|
||||
},
|
||||
// 非页面组件这里统一用大驼峰
|
||||
ComponentAlert: {
|
||||
confirm: 'OK',
|
||||
|
|
|
|||
|
|
@ -207,6 +207,63 @@ export default {
|
|||
privacy: '隐私政策',
|
||||
},
|
||||
},
|
||||
user: {
|
||||
user: '用户',
|
||||
admin: '管理员',
|
||||
SU: '超级管理员',
|
||||
normal: '正常',
|
||||
banned: '封禁',
|
||||
nav: {
|
||||
profile: '个人信息',
|
||||
settings: '信息设置',
|
||||
email: '邮箱密码',
|
||||
published: '发的话题',
|
||||
liked: '赞的话题',
|
||||
upvote: '推的话题',
|
||||
reply: '发的回复',
|
||||
comment: '发的评论',
|
||||
},
|
||||
profile: {
|
||||
name: '用户名',
|
||||
moemoepoint: '萌萌点',
|
||||
register: '注册序号',
|
||||
roles: '角色',
|
||||
status: '状态',
|
||||
upvote: '被推数',
|
||||
like: '被赞数',
|
||||
dislike: '被踩数',
|
||||
today: '今日发表',
|
||||
topic: '话题数',
|
||||
reply: '回复数',
|
||||
comment: '评论数',
|
||||
time: '注册时间',
|
||||
bio: '签名',
|
||||
null: `请填满这只萝莉吧，因为她什么都没留下`,
|
||||
},
|
||||
settings: {
|
||||
avatar: '更改头像',
|
||||
drag: '拖拽图片到方框内或点击方框上传',
|
||||
supportImage: '支持 1007KB 以内的图片',
|
||||
supportFormat: '支持 jpg 和 png 格式',
|
||||
confirm: '确定更改',
|
||||
bio: '更改签名',
|
||||
hint: '输入您的新签名，最大 107 个字符',
|
||||
count: '字数',
|
||||
},
|
||||
email: {
|
||||
email: '更改邮箱',
|
||||
current: '您当前的邮箱是',
|
||||
newEmail: '请输入您的新邮箱',
|
||||
code: '请输入您的验证码',
|
||||
send: '发送验证码',
|
||||
confirmEmail: '确定更改邮箱',
|
||||
pwd: '更改密码',
|
||||
oldPwd: '请输入您的旧密码',
|
||||
newPwd: '请输入您的新密码',
|
||||
rePwd: '请再次输入新密码',
|
||||
confirmPwd: '确定更改密码',
|
||||
},
|
||||
},
|
||||
// 非页面组件这里统一用大驼峰
|
||||
ComponentAlert: {
|
||||
confirm: '确定',
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const category = ['Galgame']
|
|||
<!-- 搜索框，主页只有 Galgame -->
|
||||
<KUNGalgameSearchBox :category="category" style="border: none" />
|
||||
<!-- 交互区域进入全部话题 -->
|
||||
<RouterLink to="/pool/index" class="more">
|
||||
<RouterLink to="/pool" class="more">
|
||||
<span>{{ $tm('mainPage.header.all') }}</span>
|
||||
<Icon class="all-topic" icon="line-md:chevron-triple-right" />
|
||||
</RouterLink>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ onMounted(async () => {
|
|||
<style lang="scss" scoped>
|
||||
.root {
|
||||
height: 100vh;
|
||||
min-height: 800px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -62,6 +63,7 @@ onMounted(async () => {
|
|||
/* 内容区占整个页面的比例 */
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
min-height: 700px;
|
||||
/* 内容区的最大宽度和高度 */
|
||||
max-width: 1350px;
|
||||
max-width: 1200px;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const handleChangeAvatar = () => {
|
|||
|
||||
<template>
|
||||
<div class="avatar">
|
||||
<div class="title">更改头像</div>
|
||||
<div class="title">{{ $tm('user.settings.avatar') }}</div>
|
||||
|
||||
<div class="container">
|
||||
<div
|
||||
|
|
@ -98,13 +98,18 @@ const handleChangeAvatar = () => {
|
|||
|
||||
<!-- 帮助区域 -->
|
||||
<div class="help">
|
||||
<p class="hint">拖拽图片到方框内或点击方框上传</p>
|
||||
<div class="support">
|
||||
<span>支持 1007KB 以内的图片</span>
|
||||
<br />
|
||||
<span>支持 jpg 和 png 格式</span>
|
||||
<div class="hint">
|
||||
<span>{{ $tm('user.settings.drag') }}</span>
|
||||
<span>{{ $tm('user.settings.click') }}</span>
|
||||
</div>
|
||||
<button @click="handleChangeAvatar">确定更改</button>
|
||||
<div class="support">
|
||||
<span>{{ $tm('user.settings.supportImage') }}</span>
|
||||
<br />
|
||||
<span>{{ $tm('user.settings.supportFormat') }}</span>
|
||||
</div>
|
||||
<button @click="handleChangeAvatar">
|
||||
{{ $tm('user.settings.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,9 +211,19 @@ const handleChangeAvatar = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.support {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
v-show="isShowNavItem(kun.permission)"
|
||||
>
|
||||
<RouterLink :to="`/kungalgamer/${currentPageUid}/${kun.router}`">
|
||||
<span>{{ kun.name }}</span>
|
||||
<span>{{ $tm(`user.nav.${kun.name}`) }}</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,49 +8,49 @@ interface nav {
|
|||
export const navBarRoute: nav[] = [
|
||||
{
|
||||
index: 1,
|
||||
name: '个人信息',
|
||||
name: 'profile',
|
||||
router: 'info',
|
||||
permission: [1, 2, 3, 4],
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: '信息设置',
|
||||
name: 'settings',
|
||||
router: 'settings',
|
||||
permission: [4],
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: '邮箱密码',
|
||||
name: 'email',
|
||||
router: 'password',
|
||||
permission: [4],
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
name: '发的话题',
|
||||
name: 'published',
|
||||
router: 'published-topic',
|
||||
permission: [1, 2, 3, 4],
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
name: '赞的话题',
|
||||
name: 'liked',
|
||||
router: 'liked-topic',
|
||||
permission: [2, 3, 4],
|
||||
},
|
||||
{
|
||||
index: 6,
|
||||
name: '推的话题',
|
||||
name: 'upvote',
|
||||
router: 'upvote-topic',
|
||||
permission: [2, 3, 4],
|
||||
},
|
||||
{
|
||||
index: 7,
|
||||
name: '发的回复',
|
||||
name: 'reply',
|
||||
router: 'reply',
|
||||
permission: [1, 2, 3, 4],
|
||||
},
|
||||
{
|
||||
index: 8,
|
||||
name: '发的评论',
|
||||
name: 'comment',
|
||||
router: 'comment',
|
||||
permission: [1, 2, 3, 4],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -46,29 +46,47 @@ const statusName = () => {
|
|||
<!-- 用户基本信息 -->
|
||||
<div class="basic">
|
||||
<!-- 用户名 -->
|
||||
<span>用户名: {{ user.name }}</span>
|
||||
<span>{{ $tm('user.profile.name') }}: {{ user.name }}</span>
|
||||
<!-- 萌萌点 -->
|
||||
<span>萌萌点: {{ user.moemoepoint }}</span>
|
||||
<span>
|
||||
{{ $tm('user.profile.moemoepoint') }}: {{ user.moemoepoint }}
|
||||
</span>
|
||||
<!-- 注册序号 -->
|
||||
<span>注册序号: {{ user.uid }}</span>
|
||||
<span>角色: {{ rolesName() }}</span>
|
||||
<span>状态: {{ statusName() }}</span>
|
||||
<span>被推数: {{ user.upvote }}</span>
|
||||
<span>被赞数: {{ user.like }}</span>
|
||||
<span>被踩数: {{ user.dislike }}</span>
|
||||
<span>今日发表: {{ user.daily_topic_count }}</span>
|
||||
|
||||
<span>话题数: {{ user.topic.length }}</span>
|
||||
<span>回复数: {{ user.reply.length }}</span>
|
||||
<span>评论数: {{ user.comment.length }}</span>
|
||||
<span>{{ $tm('user.profile.register') }}: {{ user.uid }}</span>
|
||||
<!-- 角色 -->
|
||||
<span>{{ $tm('user.profile.roles') }}: {{ rolesName() }}</span>
|
||||
<!-- 状态 -->
|
||||
<span>{{ $tm('user.profile.status') }}: {{ statusName() }}</span>
|
||||
<!-- 被推数 -->
|
||||
<span>{{ $tm('user.profile.upvote') }}: {{ user.upvote }}</span>
|
||||
<!-- 被赞数 -->
|
||||
<span>{{ $tm('user.profile.like') }}: {{ user.like }}</span>
|
||||
<!-- 被踩数 -->
|
||||
<span>{{ $tm('user.profile.dislike') }}: {{ user.dislike }}</span>
|
||||
<!-- 今日发布话题数 -->
|
||||
<span>
|
||||
{{ $tm('user.profile.today') }}: {{ user.daily_topic_count }}
|
||||
</span>
|
||||
<!-- 发布话题数 -->
|
||||
<span>{{ $tm('user.profile.topic') }}: {{ user.topic.length }}</span>
|
||||
<!-- 发布回复数 -->
|
||||
<span>{{ $tm('user.profile.reply') }}: {{ user.reply.length }}</span>
|
||||
<!-- 发布评论数 -->
|
||||
<span>
|
||||
{{ $tm('user.profile.comment') }}: {{ user.comment.length }}
|
||||
</span>
|
||||
|
||||
<!-- 注册时间 -->
|
||||
<span>注册时间: {{ dayjs(user.time).format('YYYY/MM/DD') }}</span>
|
||||
<span>
|
||||
{{ $tm('user.profile.time') }}:
|
||||
{{ dayjs(user.time).format('YYYY/MM/DD') }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 用户签名 -->
|
||||
<div class="bio">
|
||||
<div>签名:</div>
|
||||
<div>{{ user.bio ? user.bio : 'NULL' }}</div>
|
||||
<div>{{ $tm('user.profile.bio') }}:</div>
|
||||
<div v-if="user.bio">{{ user.bio }}</div>
|
||||
<div v-if="!user.bio" class="null">{{ $tm('user.profile.null') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,4 +132,10 @@ const statusName = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 签名为空 */
|
||||
.null {
|
||||
color: var(--kungalgame-blue-2);
|
||||
font-style: oblique;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -144,43 +144,56 @@ const handleClickForgotPassword = () => {
|
|||
<div class="article">
|
||||
<!-- 更改邮箱 -->
|
||||
<div class="email">
|
||||
<div class="title">更改邮箱:</div>
|
||||
<div class="current-email">您当前的邮箱是: {{ email }}</div>
|
||||
<div class="title">{{ $tm('user.email.email') }}:</div>
|
||||
<!-- 当前的邮箱 -->
|
||||
<div class="current-email">
|
||||
{{ $tm('user.email.current') }}: {{ email }}
|
||||
</div>
|
||||
<!-- 新邮箱 -->
|
||||
<div class="input">
|
||||
<span>请输入您的新邮箱: </span>
|
||||
<span>{{ $tm('user.email.newEmail') }}: </span>
|
||||
<input v-model="input.newEmail" type="text" />
|
||||
</div>
|
||||
<!-- 邮箱验证码 -->
|
||||
<div class="input">
|
||||
<span>请输入您的验证码: </span>
|
||||
<span>{{ $tm('user.email.code') }}: </span>
|
||||
<input v-model="input.code" type="text" />
|
||||
</div>
|
||||
|
||||
<!-- 发送验证码 -->
|
||||
<div class="btn">
|
||||
<button @click="handleSendCode" v-if="!hasSentCodeEmail">
|
||||
发送验证码
|
||||
{{ $tm('user.email.send') }}
|
||||
</button>
|
||||
<!-- 确定更改 -->
|
||||
<button @click="handleResetEmail">
|
||||
{{ $tm('user.email.confirmEmail') }}
|
||||
</button>
|
||||
<button @click="handleResetEmail">确定更改邮箱</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户更改密码 -->
|
||||
<div class="password">
|
||||
<div class="title">更改密码:</div>
|
||||
<div class="title">{{ $tm('user.email.pwd') }}:</div>
|
||||
<!-- 旧密码 -->
|
||||
<div class="input">
|
||||
<span>请输入您的旧密码: </span>
|
||||
<span>{{ $tm('user.email.oldPwd') }}: </span>
|
||||
<input v-model="input.oldPassword" type="password" />
|
||||
</div>
|
||||
<!-- 新密码 -->
|
||||
<div class="input">
|
||||
<span>请输入您的新密码: </span>
|
||||
<span>{{ $tm('user.email.newPwd') }}: </span>
|
||||
<input v-model="input.newPassword" type="password" />
|
||||
</div>
|
||||
<!-- 确认密码 -->
|
||||
<div class="input">
|
||||
<span>请再次输入新密码: </span>
|
||||
<span>{{ $tm('user.email.rePwd') }}: </span>
|
||||
<input v-model="input.repeatPassword" type="password" />
|
||||
</div>
|
||||
|
||||
<div class="btn">
|
||||
<button @click="handleChangePassword">确定更改密码</button>
|
||||
<button @click="handleChangePassword">
|
||||
{{ $tm('user.email.confirmPwd') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -219,7 +232,8 @@ const handleClickForgotPassword = () => {
|
|||
.input {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
input {
|
||||
height: 25px;
|
||||
padding-left: 5px;
|
||||
|
|
@ -274,6 +288,7 @@ const handleClickForgotPassword = () => {
|
|||
font-size: medium;
|
||||
}
|
||||
.input {
|
||||
padding: 0;
|
||||
span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,18 +42,22 @@ const handleChangeBio = async () => {
|
|||
|
||||
<!-- 更改 bio -->
|
||||
<div class="bio">
|
||||
<div class="title">更改签名</div>
|
||||
<div class="title">{{ $tm('user.settings.bio') }}</div>
|
||||
<textarea
|
||||
name="bio"
|
||||
placeholder="请输入您的新签名，最大 107 个字符"
|
||||
:placeholder="`${$tm('user.settings.hint')}`"
|
||||
rows="5"
|
||||
v-model="bioValue"
|
||||
>
|
||||
</textarea>
|
||||
|
||||
<div class="help">
|
||||
<span class="bioCount">字数：{{ bioValue.length }}</span>
|
||||
<button @click="handleChangeBio">确定更改</button>
|
||||
<span class="bioCount">
|
||||
{{ $tm('user.settings.count') }}: {{ bioValue.length }}
|
||||
</span>
|
||||
<button @click="handleChangeBio">
|
||||
{{ $tm('user.settings.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue