feat: 国际化字段新增
This commit is contained in:
wf
parent
ad7de59d46
commit
ae60062405
@ -28,6 +28,18 @@ export default {
|
||||
["close-right-side"]: "close right side",
|
||||
["close-other"]: "close other",
|
||||
["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"
|
||||
}
|
||||
};
|
||||
|
||||
@ -28,6 +28,18 @@ export default {
|
||||
["close-right-side"]: "关闭右侧",
|
||||
["close-other"]: "关闭其它",
|
||||
["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"]: "待办"
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
<template>
|
||||
<a-tabs :default-active-key="current" :active-key="current" @tab-click="onTab">
|
||||
<a-tab-pane v-for="item in noticeData" :key="item.id">
|
||||
<template #title>{{ `${item.title}(${item.data.length})` }}</template>
|
||||
<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" />
|
||||
<div class="content margin-left-text">
|
||||
<div>
|
||||
<span class="nickname">{{ content.nickname }}</span>
|
||||
<span class="time margin-left-text">{{ content.time }}</span>
|
||||
</div>
|
||||
<div class="context">{{ content.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-if="item.data.length === 0" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import myImage from "@/assets/img/my-image.jpg";
|
||||
const data = ref([
|
||||
{ id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" },
|
||||
{ id: 120, img: "", time: "1小时前", nickname: "捷克大力士", content: "与你握手问好" },
|
||||
{ id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" }
|
||||
]);
|
||||
const noticeData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "通知",
|
||||
data: data.value
|
||||
},
|
||||
{ id: 2, title: "消息", data: [] },
|
||||
{ id: 3, title: "代办", data: [] }
|
||||
]);
|
||||
const current = ref<number>(1);
|
||||
const onTab = (key: number) => {
|
||||
current.value = key;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
margin-bottom: $margin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.notice_img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.content {
|
||||
width: 200px;
|
||||
.nickname {
|
||||
font-size: $font-size-body-3;
|
||||
color: $color-text-2;
|
||||
}
|
||||
.time {
|
||||
font-size: $font-size-body-1;
|
||||
color: $color-text-3;
|
||||
}
|
||||
.context {
|
||||
font-size: $font-size-body-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 解决tabs宽度异常的bug
|
||||
:deep(.arco-tabs-content .arco-tabs-content-list) {
|
||||
display: unset;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<a-tabs :default-active-key="current" :active-key="current" @tab-click="onTab">
|
||||
<a-tab-pane v-for="item in noticeData" :key="item.id">
|
||||
<template #title>{{ `${$t(`language.${item.title}`)}(${item.data.length})` }}</template>
|
||||
<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" />
|
||||
<div class="content margin-left-text">
|
||||
<div>
|
||||
<span class="nickname">{{ content.nickname }}</span>
|
||||
<span class="time margin-left-text">{{ content.time }}</span>
|
||||
</div>
|
||||
<div class="context">{{ content.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-if="item.data.length === 0" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import myImage from "@/assets/img/my-image.jpg";
|
||||
const data = ref([
|
||||
{ id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" },
|
||||
{ id: 120, img: "", time: "1小时前", nickname: "捷克大力士", content: "与你握手问好" },
|
||||
{ id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" }
|
||||
]);
|
||||
const noticeData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "notice",
|
||||
data: data.value
|
||||
},
|
||||
{ id: 2, title: "message", data: [] },
|
||||
{ id: 3, title: "backlog", data: [] }
|
||||
]);
|
||||
const current = ref<number>(1);
|
||||
const onTab = (key: number) => {
|
||||
current.value = key;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
margin-bottom: $margin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.notice_img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.content {
|
||||
width: 200px;
|
||||
.nickname {
|
||||
font-size: $font-size-body-3;
|
||||
color: $color-text-2;
|
||||
}
|
||||
.time {
|
||||
font-size: $font-size-body-1;
|
||||
color: $color-text-3;
|
||||
}
|
||||
.context {
|
||||
font-size: $font-size-body-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 解决tabs宽度异常的bug
|
||||
:deep(.arco-tabs-content .arco-tabs-content-list) {
|
||||
display: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_setting">
|
||||
<!-- 国际化 -->
|
||||
<a-dropdown trigger="hover" @select="onLange">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
@ -25,13 +26,15 @@
|
||||
<a-doption :disabled="language === 'en-US'">{{ $t(`language.en-US`) }}</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-tooltip content="切换黑夜模式">
|
||||
<!-- 切换黑夜模式 -->
|
||||
<a-tooltip :content="$t(`language.switch-to-night-mode`)">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-sun-fill :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<!-- 通知 -->
|
||||
<a-popover position="bottom" trigger="click">
|
||||
<a-button size="mini" type="text" class="icon_btn notice">
|
||||
<template #icon>
|
||||
@ -40,21 +43,24 @@
|
||||
</a-button>
|
||||
<template #content><Notice /></template>
|
||||
</a-popover>
|
||||
<a-tooltip content="全屏">
|
||||
<!-- 全屏 -->
|
||||
<a-tooltip :content="$t(`language.full-screen`)">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-fullscreen :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="系统设置">
|
||||
<!-- 系统设置 -->
|
||||
<a-tooltip :content="$t(`language.system-settings`)">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-settings :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="主题设置">
|
||||
<!-- 主题设置 -->
|
||||
<a-tooltip :content="$t(`language.theme-settings`)">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-skin :size="18" />
|
||||
@ -71,29 +77,33 @@
|
||||
</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<!-- 个人中心 -->
|
||||
<a-doption>
|
||||
<template #default>
|
||||
<SvgIcon :name="'user'" :size="18" />
|
||||
<span class="margin-left-text">个人信息</span>
|
||||
<span class="margin-left-text">{{ $t(`language.personal-information`) }}</span>
|
||||
</template>
|
||||
</a-doption>
|
||||
<!-- 修改密码 -->
|
||||
<a-doption>
|
||||
<template #default>
|
||||
<SvgIcon :name="'lock-pwd'" :size="18" />
|
||||
<span class="margin-left-text">修改密码</span>
|
||||
<span class="margin-left-text">{{ $t(`language.change-password`) }}</span>
|
||||
</template>
|
||||
</a-doption>
|
||||
<!-- 项目地址 -->
|
||||
<a-doption>
|
||||
<template #default>
|
||||
<SvgIcon :name="'gitee'" :size="18" />
|
||||
<span class="margin-left-text">项目地址</span>
|
||||
<span class="margin-left-text">{{ $t(`language.project-address`) }}</span>
|
||||
</template>
|
||||
</a-doption>
|
||||
<a-divider margin="0" />
|
||||
<!-- 退出登录 -->
|
||||
<a-doption @click="logOut">
|
||||
<template #default>
|
||||
<SvgIcon :name="'exit'" :size="18" />
|
||||
<span class="margin-left-text">退出登录</span>
|
||||
<span class="margin-left-text">{{ $t(`language.logout`) }}</span>
|
||||
</template>
|
||||
</a-doption>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
首页
|
||||
<img :src="tom" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import tom from "@/assets/img/tom.jpg";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<template>
|
||||
<div>首页</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user