attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 国际化字段新增

Browse Source
This commit is contained in:
wf 2024-04-29 17:11:33 +08:00
parent ad7de59d46
commit ae60062405
5 changed files with 122 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lang/modules/enUS.ts
View File

@ -28,6 +28,18 @@ export default {
["close-right-side"]: "close right side", ["close-right-side"]: "close right side",
["close-other"]: "close other", ["close-other"]: "close other",
["close-all"]: "close all", ["close-all"]: "close all",
["internationalization"]: "internationalization" ["internationalization"]: "internationalization",
["switch-to-night-mode"]: "switch to night mode",
["switch-to-daytime-mode"]: "switch to daytime mode",
["full-screen"]: "full screen",
["system-settings"]: "system settings",
["theme-settings"]: "theme settings",
["personal-information"]: "personal information",
["change-password"]: "change password",
["project-address"]: "project address",
["logout"]: "logout",
["notice"]: "Notice",
["message"]: "Message",
["backlog"]: "Backlog"
} }
}; };

14
src/lang/modules/zhCN.ts
View File

@ -28,6 +28,18 @@ export default {
["close-right-side"]: "关闭右侧", ["close-right-side"]: "关闭右侧",
["close-other"]: "关闭其它", ["close-other"]: "关闭其它",
["close-all"]: "关闭全部", ["close-all"]: "关闭全部",
["internationalization"]: "国际化" ["internationalization"]: "国际化",
["switch-to-night-mode"]: "切换黑夜模式",
["switch-to-daytime-mode"]: "切换白天模式",
["full-screen"]: "全屏",
["system-settings"]: "系统设置",
["theme-settings"]: "主题设置",
["personal-information"]: "个人信息",
["change-password"]: "修改密码",
["project-address"]: "项目地址",
["logout"]: "退出登录",
["notice"]: "通知",
["message"]: "消息",
["backlog"]: "待办"
} }
}; };

142
src/layout/components/Header/components/Notice/index.vue
View File

@ -1,71 +1,71 @@
<template> <template>
<a-tabs :default-active-key="current" :active-key="current" @tab-click="onTab"> <a-tabs :default-active-key="current" :active-key="current" @tab-click="onTab">
<a-tab-pane v-for="item in noticeData" :key="item.id"> <a-tab-pane v-for="item in noticeData" :key="item.id">
<template #title>{{ `${item.title}(${item.data.length})` }}</template> <template #title>{{ `${$t(`language.${item.title}`)}(${item.data.length})` }}</template>
<div class="notice" v-for="content in item.data" :key="content.id"> <div class="notice" v-for="content in item.data" :key="content.id">
<a-image width="36" height="36" fit="cover" :src="myImage" class="notice_img" /> <a-image width="36" height="36" fit="cover" :src="myImage" class="notice_img" />
<div class="content margin-left-text"> <div class="content margin-left-text">
<div> <div>
<span class="nickname">{{ content.nickname }}</span> <span class="nickname">{{ content.nickname }}</span>
<span class="time margin-left-text">{{ content.time }}</span> <span class="time margin-left-text">{{ content.time }}</span>
</div> </div>
<div class="context">{{ content.content }}</div> <div class="context">{{ content.content }}</div>
</div> </div>
</div> </div>
<a-empty v-if="item.data.length === 0" /> <a-empty v-if="item.data.length === 0" />
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import myImage from "@/assets/img/my-image.jpg"; import myImage from "@/assets/img/my-image.jpg";
const data = ref([ const data = ref([
{ id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" }, { id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" },
{ id: 120, img: "", time: "1小时前", nickname: "捷克大力士", content: "与你握手问好" }, { id: 120, img: "", time: "1小时前", nickname: "捷克大力士", content: "与你握手问好" },
{ id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" } { id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" }
]); ]);
const noticeData = ref([ const noticeData = ref([
{ {
id: 1, id: 1,
title: "通知", title: "notice",
data: data.value data: data.value
}, },
{ id: 2, title: "消息", data: [] }, { id: 2, title: "message", data: [] },
{ id: 3, title: "代办", data: [] } { id: 3, title: "backlog", data: [] }
]); ]);
const current = ref<number>(1); const current = ref<number>(1);
const onTab = (key: number) => { const onTab = (key: number) => {
current.value = key; current.value = key;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.notice { .notice {
margin-bottom: $margin; margin-bottom: $margin;
display: flex; display: flex;
align-items: center; align-items: center;
.notice_img { .notice_img {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
} }
.content { .content {
width: 200px; width: 200px;
.nickname { .nickname {
font-size: $font-size-body-3; font-size: $font-size-body-3;
color: $color-text-2; color: $color-text-2;
} }
.time { .time {
font-size: $font-size-body-1; font-size: $font-size-body-1;
color: $color-text-3; color: $color-text-3;
} }
.context { .context {
font-size: $font-size-body-3; font-size: $font-size-body-3;
} }
} }
} }
// 解决tabs宽度异常的bug // 解决tabs宽度异常的bug
:deep(.arco-tabs-content .arco-tabs-content-list) { :deep(.arco-tabs-content .arco-tabs-content-list) {
display: unset; display: unset;
} }
</style> </style>

26
src/layout/components/Header/index.vue
View File

@ -14,6 +14,7 @@
</div> </div>
</div> </div>
<div class="header_setting"> <div class="header_setting">
<!-- 国际化 -->
<a-dropdown trigger="hover" @select="onLange"> <a-dropdown trigger="hover" @select="onLange">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn">
<template #icon> <template #icon>
@ -25,13 +26,15 @@
<a-doption :disabled="language === 'en-US'">{{ $t(`language.en-US`) }}</a-doption> <a-doption :disabled="language === 'en-US'">{{ $t(`language.en-US`) }}</a-doption>
</template> </template>
</a-dropdown> </a-dropdown>
<a-tooltip content="切换黑夜模式"> <!-- 切换黑夜模式 -->
<a-tooltip :content="$t(`language.switch-to-night-mode`)">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn">
<template #icon> <template #icon>
<icon-sun-fill :size="18" /> <icon-sun-fill :size="18" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<!-- 通知 -->
<a-popover position="bottom" trigger="click"> <a-popover position="bottom" trigger="click">
<a-button size="mini" type="text" class="icon_btn notice"> <a-button size="mini" type="text" class="icon_btn notice">
<template #icon> <template #icon>
@ -40,21 +43,24 @@
</a-button> </a-button>
<template #content><Notice /></template> <template #content><Notice /></template>
</a-popover> </a-popover>
<a-tooltip content="全屏"> <!-- 全屏 -->
<a-tooltip :content="$t(`language.full-screen`)">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn">
<template #icon> <template #icon>
<icon-fullscreen :size="18" /> <icon-fullscreen :size="18" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<a-tooltip content="系统设置"> <!-- 系统设置 -->
<a-tooltip :content="$t(`language.system-settings`)">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn">
<template #icon> <template #icon>
<icon-settings :size="18" /> <icon-settings :size="18" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<a-tooltip content="主题设置"> <!-- 主题设置 -->
<a-tooltip :content="$t(`language.theme-settings`)">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn">
<template #icon> <template #icon>
<icon-skin :size="18" /> <icon-skin :size="18" />
@ -71,29 +77,33 @@
</div> </div>
</div> </div>
<template #content> <template #content>
<!-- 个人中心 -->
<a-doption> <a-doption>
<template #default> <template #default>
<SvgIcon :name="'user'" :size="18" /> <SvgIcon :name="'user'" :size="18" />
<span class="margin-left-text">个人信息</span> <span class="margin-left-text">{{ $t(`language.personal-information`) }}</span>
</template> </template>
</a-doption> </a-doption>
<!-- 修改密码 -->
<a-doption> <a-doption>
<template #default> <template #default>
<SvgIcon :name="'lock-pwd'" :size="18" /> <SvgIcon :name="'lock-pwd'" :size="18" />
<span class="margin-left-text">修改密码</span> <span class="margin-left-text">{{ $t(`language.change-password`) }}</span>
</template> </template>
</a-doption> </a-doption>
<!-- 项目地址 -->
<a-doption> <a-doption>
<template #default> <template #default>
<SvgIcon :name="'gitee'" :size="18" /> <SvgIcon :name="'gitee'" :size="18" />
<span class="margin-left-text">项目地址</span> <span class="margin-left-text">{{ $t(`language.project-address`) }}</span>
</template> </template>
</a-doption> </a-doption>
<a-divider margin="0" /> <a-divider margin="0" />
<!-- 退出登录 -->
<a-doption @click="logOut"> <a-doption @click="logOut">
<template #default> <template #default>
<SvgIcon :name="'exit'" :size="18" /> <SvgIcon :name="'exit'" :size="18" />
<span class="margin-left-text">退出登录</span> <span class="margin-left-text">{{ $t(`language.logout`) }}</span>
</template> </template>
</a-doption> </a-doption>
</template> </template>

19
src/views/home/home.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<div> <div>首页</div>
首页 </template>
<img :src="tom" />
</div> <script setup lang="ts"></script>
</template>
<style lang="scss" scoped></style>
<script setup>
import tom from "@/assets/img/tom.jpg";
</script>
<style lang="scss" scoped></style>