Explorar el Código

国际化

dev_YWQ
HolyKnightIX hace 1 año
padre
commit
770181fb81
Se han modificado 10 ficheros con 301 adiciones y 150 borrados
  1. +13
    -7
      src/components/LangSelect/index.vue
  2. +61
    -12
      src/lang/package/en.ts
  3. +61
    -12
      src/lang/package/zh-cn.ts
  4. +89
    -73
      src/layout/components/Navbar.vue
  5. +7
    -4
      src/layout/components/Sidebar/index.vue
  6. +1
    -1
      src/layout/components/TagsView/index.vue
  7. +12
    -5
      src/router/index.ts
  8. +34
    -12
      src/views/createVideo/index.vue
  9. +13
    -14
      src/views/myAccount/index.vue
  10. +10
    -10
      src/views/myCreating/index.vue

+ 13
- 7
src/components/LangSelect/index.vue Ver fichero

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useAppStore } from '@/store/modules/app';
import { useI18n } from "vue-i18n";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useAppStore } from "@/store/modules/app";

const appStore = useAppStore();
const { locale } = useI18n();
@@ -9,16 +9,16 @@ const { locale } = useI18n();
function handleLanguageChange(lang: string) {
locale.value = lang;
appStore.changeLanguage(lang);
if (lang == 'en') {
ElMessage.success('Switch Language Successful!');
if (lang == "en") {
ElMessage.success("Switch Language Successful!");
} else {
ElMessage.success('切换语言成功!');
ElMessage.success("切换语言成功!");
}
}
</script>

<template>
<el-dropdown trigger="click" @command="handleLanguageChange">
<el-dropdown class="outSide" trigger="click" @command="handleLanguageChange">
<div>
<svg-icon icon-class="language" />
</div>
@@ -37,3 +37,9 @@ function handleLanguageChange(lang: string) {
</template>
</el-dropdown>
</template>

<style lang="scss" scoped>
.outSide {
cursor: pointer;
}
</style>

+ 61
- 12
src/lang/package/en.ts Ver fichero

@@ -1,22 +1,71 @@
export default {
// 路由国际化
route: {
dashboard: 'Dashboard',
document: 'Document'
dashboard: "Dashboard",
document: "Document",
},

// 登录页面国际化
login: {
title: 'Metavatar-PC',
username: 'Username',
password: 'Password',
login: 'Login',
verifyCode: 'Verify Code',
title: "Metavatar-PC",
username: "Username",
password: "Password",
login: "Login",
verifyCode: "Verify Code",
},

// 导航栏国际化
navbar: {
dashboard: 'Dashboard',
logout: 'Logout',
document: 'Document',
gitee: 'Gitee'
}
account: "Account",
logout: "Logout",
},

// 创作视频
createVideo: {
title: "CreateVideo",
typeScript: "Type your Script",
uploadAudio: "Upload Audio",
aiScript: "Ai Script",
typeTitle: "Type a title",
confirm: "Confirm",
aiText: "Please input here",
languages: "Languages",
voices: "Voices",
styles: "Styles",
reload: "Reload",
generateVideo: "Generate Video",
},

// 我的视频
myCreating: {
title: "My Creating",
typeTitle: "Type a title",
name: "Name",
date: "Date",
download: "Download",
delete: "Delete",
more: "More",
},

// 个人账户
account: {
title: "My Account",
reSetPwd: "Reset Password",
getMore: "UPGRADE",
copyCode: "Copy invitation code",
saveCode: "Save QR code",
buyHistory: "OrderHistory",
inviteHistory: "InviteHistory",
orderID: "OrderID",
price: "Price",
date: "Date",
successed: "Successed",
failed: "Failed",
msg1: "Obtain one video production time",
},

// 商店
shop: {
title: "Shop",
},
};

+ 61
- 12
src/lang/package/zh-cn.ts Ver fichero

@@ -1,22 +1,71 @@
export default {
// 路由国际化
route: {
dashboard: '首页',
document: '项目文档'
dashboard: "首页",
document: "项目文档",
},

// 登录页面国际化
login: {
title: 'Metavatar-PC',
username: '用户名',
password: '密码',
login: '登 录',
verifyCode: '验证码'
title: "Metavatar-PC",
username: "用户名",
password: "密码",
login: "登 录",
verifyCode: "验证码",
},

// 导航栏国际化
navbar: {
dashboard: '首页',
logout: '注销',
document: '项目文档',
gitee: '码云'
}
account: "账户",
logout: "注销",
},

// 创作视频
createVideo: {
title: "创作视频",
typeScript: "输入文案",
uploadAudio: "上传视频",
aiScript: "AI生成文本",
typeTitle: "输入标题",
confirm: "确定",
aiText: "在此输入",
languages: "选择语言",
voices: "选择声音",
styles: "选择风格",
reload: "重新上传",
generateVideo: "生成视频",
},

// 我的视频
myCreating: {
title: "我的视频",
typeTitle: "输入标题",
name: "名称",
date: "时间",
download: "下载",
delete: "删除",
more: "更多",
},

// 个人账户
account: {
title: "个人账户",
reSetPwd: "修改密码",
getMore: "升级套餐",
copyCode: "复制邀请码",
saveCode: "保存二维码",
buyHistory: "购买记录",
inviteHistory: "邀请记录",
orderID: "订单号",
price: "支付金额",
date: "购买日期",
successed: "支付成功",
failed: "支付失败",
msg1: "获得视频制作次数一次",
},

// 商店
shop: {
title: "商店",
},
};

+ 89
- 73
src/layout/components/Navbar.vue Ver fichero

@@ -1,3 +1,78 @@
<template>
<!-- 顶部导航栏 -->
<div class="myNavbar">
<!-- 左侧面包屑 -->
<div class="flex" v-if="false">
<hamburger
:is-active="appStore.sidebar.opened"
@toggleClick="toggleSideBar"
/>
<breadcrumb />
</div>
<!-- 右侧导航设置 -->
<div class="flex" v-if="false">
<!-- 导航栏设置(窄屏隐藏)-->
<div class="setting-container" v-if="device !== 'mobile'">
<!--全屏 -->
<div class="setting-item" @click="toggle" v-if="false">
<svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
/>
</div>
<!-- 布局大小 -->
<el-tooltip
content="布局大小"
effect="dark"
placement="bottom"
v-if="false"
>
<size-select class="setting-item" />
</el-tooltip>
</div>
<!-- 用户头像 -->
<span class="account" @click="routerTo">个人账户</span>
<el-dropdown trigger="click" v-if="false">
<div class="avatar-container">
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
<i-ep-caret-bottom class="w-3 h-3" />
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/hxrui">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://gitee.com/haoxr">
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
</a>
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
</a>
<el-dropdown-item divided @click="logout">
{{ $t("navbar.logout") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 显示的,以上代码作废 -->
<div style="position: absolute; left: 30px; font-size: 26px">
{{ $t(routeName as string) }}
</div>
<!--语言选择-->

<lang-select class="navItem" style="color: #ffffff" />

<div class="avatar" @click="routerTo"></div>
<div class="navItem" @click="routerTo">{{ $t("navbar.account") }}</div>
<div class="navItem" @click="logout" style="margin-left: 10px">
{{ $t("navbar.logout") }}
</div>
</div>
</template>

<script setup lang="ts">
import { watch, ref } from "vue";
import { storeToRefs } from "pinia";
@@ -5,6 +80,7 @@ import { RouteLocationRaw, useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/app";
import { useTagsViewStore } from "@/store/modules/tagsView";
import { useUserStore } from "@/store/modules/user";
import LangSelect from "@/components/LangSelect/index.vue";

const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
@@ -61,75 +137,6 @@ watch(
);
</script>

<template>
<!-- 顶部导航栏 -->
<div class="myNavbar">
<!-- 左侧面包屑 -->
<div class="flex" v-if="false">
<hamburger
:is-active="appStore.sidebar.opened"
@toggleClick="toggleSideBar"
/>
<breadcrumb />
</div>
<!-- 右侧导航设置 -->
<div class="flex" v-if="false">
<!-- 导航栏设置(窄屏隐藏)-->
<div class="setting-container" v-if="device !== 'mobile'">
<!--全屏 -->
<div class="setting-item" @click="toggle" v-if="false">
<svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
/>
</div>
<!-- 布局大小 -->
<el-tooltip
content="布局大小"
effect="dark"
placement="bottom"
v-if="false"
>
<size-select class="setting-item" />
</el-tooltip>
<!--语言选择-->
<lang-select class="setting-item" v-if="false" />
</div>
<!-- 用户头像 -->
<span @click="routerTo">个人账户</span>
<el-dropdown trigger="click" v-if="false">
<div class="avatar-container">
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
<i-ep-caret-bottom class="w-3 h-3" />
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/hxrui">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://gitee.com/haoxr">
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
</a>
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
</a>
<el-dropdown-item divided @click="logout">
{{ $t("navbar.logout") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 显示的,以上代码作废 -->
<div style="position: absolute; left: 30px">{{ routeName }}</div>
<div class="avatar"></div>
<div @click="routerTo">个人账户</div>
<div @click="logout" style="margin-left: 10px">退出登录</div>
</div>
</template>

<style lang="scss" scoped>
.navbar {
display: flex;
@@ -151,9 +158,9 @@ watch(
color: #5a5e66;
text-align: center;
cursor: pointer;
margin-right: 25px;
&:hover {
background: rgb(249 250 251 / 100%);
background: #f9fafb;
}
}
}
@@ -187,9 +194,18 @@ watch(
.avatar {
width: 30px;
height: 30px;
margin-right: 5px;
background-color: red;
margin-right: 10px;
margin-left: 20px;
background-color: #4769da;
border-radius: 50%;
cursor: pointer;
}
.navItem {
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #4769da;
}
}
}
</style>

+ 7
- 4
src/layout/components/Sidebar/index.vue Ver fichero

@@ -7,19 +7,19 @@
<div class="icon">
<el-icon><i-ep-edit /></el-icon>
</div>
创作视频
{{ $t("createVideo.title") }}
</div>
<div class="myRouter-item" @click="routerTo('/myCreating')">
<div class="icon">
<el-icon><i-ep-menu /></el-icon>
</div>
我的视频
{{ $t("myCreating.title") }}
</div>
<div class="myRouter-item pricing" @click="routerTo('/myStore')">
<div class="icon">
<el-icon><i-ep-Goods /></el-icon>
</div>
商店
{{ $t("shop.title") }}
</div>
</div>
<!-- <el-scrollbar>
@@ -91,6 +91,9 @@ function routerTo(url: RouteLocationRaw) {
text-align: center;
cursor: pointer;
border-bottom: 2px solid #fff;
transition: all 0.3s;
border-radius: 5px;
margin-bottom: 20px;

.icon {
width: 40px;
@@ -110,7 +113,7 @@ function routerTo(url: RouteLocationRaw) {

&:hover {
color: #000;
background-color: #fff;
background-color: #ffffff;

.el-icon {
color: #000;


+ 1
- 1
src/layout/components/TagsView/index.vue Ver fichero

@@ -242,7 +242,7 @@ onMounted(() => {
</script>

<template>
<div class="tags-container">
<div v-if="false" class="tags-container">
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
<router-link
:class="'tags-item ' + (isActive(tag) ? 'active' : '')"


+ 12
- 5
src/router/index.ts Ver fichero

@@ -1,4 +1,5 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import { getCurrentInstance } from "vue";

export const Layout = () => import("@/layout/index.vue");

@@ -35,7 +36,7 @@ export const constantRoutes: RouteRecordRaw[] = [
title: "createVideo",
icon: "homepage",
affix: true,
name: "创作视频",
name: "createVideo.title",
},
},
],
@@ -54,7 +55,7 @@ export const constantRoutes: RouteRecordRaw[] = [
title: "myCreating",
icon: "homepage",
affix: true,
name: "我的视频",
name: "myCreating.title",
},
},
],
@@ -73,7 +74,7 @@ export const constantRoutes: RouteRecordRaw[] = [
title: "myAccount",
icon: "homepage",
affix: true,
name: "个人账户",
name: "account.title",
},
},
],
@@ -88,7 +89,12 @@ export const constantRoutes: RouteRecordRaw[] = [
path: "myStore",
component: () => import("@/views/myStore/index.vue"),
name: "myStore",
meta: { title: "myStore", icon: "homepage", affix: true, name: "商店" },
meta: {
title: "myStore",
icon: "homepage",
affix: true,
name: "shop.title",
},
},
],
},
@@ -176,7 +182,8 @@ const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes as RouteRecordRaw[],
// 刷新时,滚动条位置还原
scrollBehavior: () => ({ left: 0, top: 0 }),
// 2023-5-23 添加平滑滚动 YWQ
scrollBehavior: () => ({ behavior: "smooth", left: 0, top: 0 }),
});

/**


+ 34
- 12
src/views/createVideo/index.vue Ver fichero

@@ -8,12 +8,15 @@
<el-row class="justify-between">
<!-- title框 -->
<div class="flex justify-between" style="width: 300px">
<el-input v-model="title" placeholder="输入标题" />
<el-input
v-model="title"
:placeholder="$t('createVideo.typeTitle')"
/>
<el-icon class="icon-edit"><i-ep-edit /></el-icon>
</div>
<!-- 上传按钮 -->
<button class="uploadBtn">
重新上传
{{ $t("createVideo.reload") }}
<input type="file" @change="changeFile" />
</button>
</el-row>
@@ -60,30 +63,35 @@
<div class="right">
<el-tabs type="border-card" class="tabs">
<!-- ----------------------------- 1 -->
<el-tab-pane label="Type you Script">
<el-tab-pane :label="$t('createVideo.typeScript')">
<div class="card1">111111111111111111</div>
</el-tab-pane>
<!-- ------------------------ 2 -->
<el-tab-pane label="upload audio">
<el-tab-pane :label="$t('createVideo.uploadAudio')">
<div class="card2">22222222222222222</div>
</el-tab-pane>
<!-- ----------------------- 3 -->
<el-tab-pane label="Ai Script">
<el-tab-pane :label="$t('createVideo.aiScript')">
<div class="card3">
<div class="text">
<el-input v-model="title" placeholder="输入标题" />
<el-button type="primary"> submit </el-button>
<el-input
v-model="title"
:placeholder="$t('createVideo.typeTitle')"
/>
<el-button type="primary">
{{ $t("createVideo.confirm") }}
</el-button>
<el-input
v-model="title"
:rows="15"
type="textarea"
placeholder="Please input"
:placeholder="$t('createVideo.aiText')"
/>
<el-icon :size="20">
<Edit />
</el-icon>
</div>
<p>language</p>
<p>{{ $t("createVideo.languages") }}</p>
<el-select
v-model="language"
placeholder="Select"
@@ -96,7 +104,7 @@
:value="item.value"
/>
</el-select>
<p>voices</p>
<p>{{ $t("createVideo.voices") }}</p>
<el-select
v-model="language"
placeholder="Select"
@@ -109,7 +117,7 @@
:value="item.value"
/>
</el-select>
<p>style</p>
<p>{{ $t("createVideo.styles") }}</p>
<el-select
v-model="language"
placeholder="Select"
@@ -122,7 +130,9 @@
:value="item.value"
/>
</el-select>
<el-button type="primary">Generate Video</el-button>
<el-button type="primary">{{
$t("createVideo.generateVideo")
}}</el-button>
</div>
</el-tab-pane>
</el-tabs>
@@ -139,8 +149,20 @@ function changeFile(e) {
imgUrl.value = URL.createObjectURL(e.target.files[0]);
}

// $t在script中的使用
import { getCurrentInstance } from "vue";
const {
appContext: {
config: { globalProperties },
},
} = getCurrentInstance();

const string = "createVideo.typeScript";
const t = globalProperties.$t(string);

// card3的
let language = reactive("");

let languageOptions = reactive([
{
value: "Option1",


+ 13
- 14
src/views/myAccount/index.vue Ver fichero

@@ -10,14 +10,14 @@
<div class="info">
<div class="name">OLO</div>
<span>weqrewerwer@mail.com</span>
<span class="password">更改密码</span>
<span class="password">{{ $t("account.reSetPwd") }}</span>
</div>
</div>
<!-- 剩余次数 -->
<div class="left-two border">
<div class="number">3 Videos Generation Left</div>
<div class="time">Until 2023/12/31</div>
<div class="getMore">购买更多</div>
<div class="getMore">{{ $t("account.getMore") }}</div>
</div>
<!-- 邀请码 -->
<div class="left-three border flex justify-between">
@@ -30,8 +30,8 @@
<span class="bigWord">Generation</span>
</div>
<div class="btns">
<span class="myBtn">复制邀请码</span>
<span class="myBtn">保存二维码</span>
<span class="myBtn">{{ $t("account.copyCode") }}</span>
<span class="myBtn">{{ $t("account.saveCode") }}</span>
</div>
</div>
</div>
@@ -40,24 +40,24 @@
<div class="right">
<el-tabs type="border-card" class="tabs">
<!-- ----------------------------- 1 -->
<el-tab-pane label="购买记录">
<el-tab-pane :label="$t('account.buyHistory')">
<div class="card scrolly">
<div class="orderItem" v-for="item in 9" :key="item">
<p>订单号:123456</p>
<p>{{ $t("account.orderID") }}:123456</p>
<div class="orderItem-content">
<div class="orderCode"><img src="" alt="" /></div>
<div class="info">
<h5>疯狂星期{{ item }}</h5>
<p>Price:88$</p>
<p>time:2023/5/2</p>
<p>{{ $t("account.price") }}:88$</p>
<p>{{ $t("account.date") }}:2023/5/2</p>
</div>
<div class="state">支付成功</div>
<div class="state">{{ $t("account.successed") }}</div>
</div>
</div>
</div>
</el-tab-pane>
<!-- ------------------------ 2 -->
<el-tab-pane label="邀请记录">
<el-tab-pane :label="$t('account.inviteHistory')">
<div class="card scrolly card2">
<div class="orderItem" v-for="item in 9" :key="item">
<div class="orderItem-content">
@@ -65,9 +65,9 @@
<div class="info">
<h5>张{{ item }}</h5>
<p>E-mail:65465468765465@gmail.com</p>
<p>time:2023/5/2</p>
<p>{{ $t("account.date") }}:2023/5/2</p>
</div>
<div class="state">获得视频制作次数一次</div>
<div class="state">{{ $t("account.msg1") }}</div>
</div>
</div>
</div>
@@ -237,7 +237,7 @@
}

.state {
width: 10%;
margin-right: 30px;
}
}
}
@@ -253,7 +253,6 @@
}

.state {
width: 15%;
font-size: 14px;
line-height: 60px;
}


+ 10
- 10
src/views/myCreating/index.vue Ver fichero

@@ -3,7 +3,7 @@
<!-- 搜索框 -->
<div class="top">
<div class="flex justify-between" style="width: 300px">
<el-input v-model="title" placeholder="输入标题" />
<el-input v-model="title" :placeholder="$t('myCreating.typeTitle')" />
<el-icon class="icon-edit"><i-ep-edit /></el-icon>
</div>
</div>
@@ -14,8 +14,8 @@
<img class="inmiddle" src="" alt="" />
</div>
<div class="workInfo flex">
<span>名称</span>
<span>时间</span>
<span>{{ $t("myCreating.name") }}</span>
<span>{{ $t("myCreating.date") }}</span>
</div>
<!-- 更多遮罩层 -->
<div
@@ -30,13 +30,13 @@
<div class="btns-item-icon">
<el-icon class="icon-delete"><i-ep-download /></el-icon>
</div>
<div class="text">下载</div>
<div class="text">{{ $t("myCreating.download") }}</div>
</div>
<div class="btns-item">
<div class="btns-item-icon">
<el-icon class="icon-delete"><i-ep-delete /></el-icon>
</div>
<div class="text">删除</div>
<div class="text">{{ $t("myCreating.delete") }}</div>
</div>
</div>
</div>
@@ -187,17 +187,17 @@ function mouseenter(item) {
position: absolute;
top: 45px;
right: 10px;
width: 70px;
height: 60px;
// width: 70px;
// height: 60px;
overflow: hidden;
border-radius: 10px;

&-item {
width: 70px;
height: 30px;
// width: 70px;
// height: 30px;
text-align: center;
background-color: #fff;
padding: 10px;
&-icon {
position: relative;
display: inline-block;


Cargando…
Cancelar
Guardar