style: 布局多语言

This commit is contained in:
TsMask
2023-11-10 10:03:37 +08:00
parent b41d3c3882
commit e4b504825d
4 changed files with 53 additions and 11 deletions

View File

@@ -58,7 +58,7 @@ export default {
} }
}, },
// 导入 // 组件
components: { components: {
UploadModal:{ UploadModal:{
uploadTitle:'Data Import', uploadTitle:'Data Import',
@@ -88,6 +88,23 @@ export default {
codeSmsSend: 'Successfully sent, please pay attention to checking the SMS', codeSmsSend: 'Successfully sent, please pay attention to checking the SMS',
}, },
// 布局
loayouts: {
rightContent: {
fullscreen: "Full Screen",
logout: "Logout",
profile: "Profile",
settings: "Settings",
},
tabs: {
reload: "Refresh current",
more: "More Options",
closeCurrent: "Close Current",
closeOther: "Close Other",
closeAll: "Close All",
}
},
// 页面 // 页面
views: { views: {
index: { index: {

View File

@@ -58,7 +58,7 @@ export default {
} }
}, },
// 导入 // 组件
components: { components: {
UploadModal:{ UploadModal:{
uploadTitle:'数据导入', uploadTitle:'数据导入',
@@ -88,6 +88,23 @@ export default {
codeSmsSend: '发送成功,请注意查看短信', codeSmsSend: '发送成功,请注意查看短信',
}, },
// 布局
loayouts: {
rightContent: {
fullscreen: "全屏显示",
logout: "退出登录",
profile: "个人中心",
settings: "个人设置",
},
tabs: {
reload: "刷新当前",
more: "更多选项",
closeCurrent: "关闭当前",
closeOther: "关闭其他",
closeAll: "关闭全部",
}
},
// 页面 // 页面
views: { views: {
index: { index: {

View File

@@ -50,7 +50,7 @@ function fnChangeLocale(e: any) {
</a-button> </a-button>
<a-tooltip> <a-tooltip>
<template #title>全屏显示</template> <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
<a-button type="text" @click="toggle"> <a-button type="text" @click="toggle">
<template #icon> <template #icon>
<FullscreenExitOutlined v-if="isFullscreen()" /> <FullscreenExitOutlined v-if="isFullscreen()" />
@@ -90,20 +90,20 @@ function fnChangeLocale(e: any) {
<template #icon> <template #icon>
<UserOutlined /> <UserOutlined />
</template> </template>
<span>个人中心</span> <span>{{ t('loayouts.rightContent.profile') }}</span>
</a-menu-item> --> </a-menu-item> -->
<a-menu-item key="settings"> <a-menu-item key="settings">
<template #icon> <template #icon>
<SettingOutlined /> <SettingOutlined />
</template> </template>
<span>个人设置</span> <span>{{ t('loayouts.rightContent.settings') }}</span>
</a-menu-item> </a-menu-item>
<a-menu-divider /> <a-menu-divider />
<a-menu-item key="logout"> <a-menu-item key="logout">
<template #icon> <template #icon>
<LogoutOutlined /> <LogoutOutlined />
</template> </template>
<span>退出登录</span> <span>{{ t('loayouts.rightContent.logout') }}</span>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>

View File

@@ -3,6 +3,8 @@ import IconFont from '@/components/IconFont/index.vue';
import { computed, watch } from 'vue'; import { computed, watch } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import useTabsStore from '@/store/modules/tabs'; import useTabsStore from '@/store/modules/tabs';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const tabsStore = useTabsStore(); const tabsStore = useTabsStore();
const router = useRouter(); const router = useRouter();
@@ -126,7 +128,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
<template #rightExtra> <template #rightExtra>
<a-space :size="8" align="end"> <a-space :size="8" align="end">
<a-tooltip placement="topRight"> <a-tooltip placement="topRight">
<template #title>刷新当前</template> <template #title>{{ t('loayouts.tabs.reload') }}</template>
<a-button <a-button
type="ghost" type="ghost"
shape="circle" shape="circle"
@@ -137,16 +139,22 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<a-tooltip placement="topRight"> <a-tooltip placement="topRight">
<template #title>更多选项</template> <template #title>{{ t('loayouts.tabs.more') }}</template>
<a-dropdown :trigger="['click', 'hover']" placement="bottomRight"> <a-dropdown :trigger="['click', 'hover']" placement="bottomRight">
<a-button type="ghost" shape="circle" size="small"> <a-button type="ghost" shape="circle" size="small">
<template #icon><DownOutlined /></template> <template #icon><DownOutlined /></template>
</a-button> </a-button>
<template #overlay> <template #overlay>
<a-menu @click="({ key }:any) => fnTabMenu(key)"> <a-menu @click="({ key }:any) => fnTabMenu(key)">
<a-menu-item key="current">关闭当前</a-menu-item> <a-menu-item key="current">
<a-menu-item key="other">关闭其他 </a-menu-item> {{ t('loayouts.tabs.closeCurrent') }}
<a-menu-item key="all">关闭全部</a-menu-item> </a-menu-item>
<a-menu-item key="other">
{{ t('loayouts.tabs.closeOther') }}
</a-menu-item>
<a-menu-item key="all">
{{ t('loayouts.tabs.closeAll') }}
</a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>