refactor(layouts): 移除i18n相关

This commit is contained in:
悠静萝莉 2024-09-03 03:06:10 +08:00
parent 79673bb727
commit 4c53ffa3ca
No known key found for this signature in database
GPG Key ID: 4EDF1CA1CEA8EBCC
6 changed files with 43 additions and 101 deletions

View File

@ -23,38 +23,24 @@
<!-- 全局通知 --> <!-- 全局通知 -->
<notice /> <notice />
<t-tooltip placement="bottom" :content="$t('layout.header.code')"> <t-tooltip placement="bottom" content="代码仓库">
<t-button theme="default" shape="square" variant="text" @click="navToGitHub"> <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
<t-icon name="logo-github" /> <t-icon name="logo-github" />
</t-button> </t-button>
</t-tooltip> </t-tooltip>
<t-tooltip placement="bottom" :content="$t('layout.header.help')"> <t-tooltip placement="bottom" content="帮助文档">
<t-button theme="default" shape="square" variant="text" @click="navToHelper"> <t-button theme="default" shape="square" variant="text" @click="navToHelper">
<t-icon name="help-circle" /> <t-icon name="help-circle" />
</t-button> </t-button>
</t-tooltip> </t-tooltip>
<t-dropdown trigger="click">
<t-button theme="default" shape="square" variant="text">
<translate-icon />
</t-button>
<t-dropdown-menu>
<t-dropdown-item
v-for="(lang, index) in langList"
:key="index"
:value="lang.value"
@click="(options) => changeLang(options.value as string)"
>{{ lang.content }}</t-dropdown-item
></t-dropdown-menu
>
</t-dropdown>
<t-dropdown :min-column-width="120" trigger="click"> <t-dropdown :min-column-width="120" trigger="click">
<template #dropdown> <template #dropdown>
<t-dropdown-menu> <t-dropdown-menu>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')"> <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
<user-circle-icon />{{ $t('layout.header.user') }} <user-circle-icon />个人中心
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout"> <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
<poweroff-icon />{{ $t('layout.header.signOut') }} <poweroff-icon />退出登录
</t-dropdown-item> </t-dropdown-item>
</t-dropdown-menu> </t-dropdown-menu>
</template> </template>
@ -66,7 +52,7 @@
<template #suffix><chevron-down-icon /></template> <template #suffix><chevron-down-icon /></template>
</t-button> </t-button>
</t-dropdown> </t-dropdown>
<t-tooltip placement="bottom" :content="$t('layout.header.setting')"> <t-tooltip placement="bottom" content="系统设置">
<t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel"> <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
<setting-icon /> <setting-icon />
</t-button> </t-button>
@ -78,15 +64,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ChevronDownIcon, PoweroffIcon, SettingIcon, TranslateIcon, UserCircleIcon } from 'tdesign-icons-vue-next'; import { ChevronDownIcon, PoweroffIcon, SettingIcon, UserCircleIcon } from 'tdesign-icons-vue-next';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import LogoFull from '@/assets/assets-logo-full.svg?component'; import LogoFull from '@/assets/assets-logo-full.svg?component';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { langList } from '@/locales/index';
import { useLocale } from '@/locales/useLocale';
import { getActive } from '@/router'; import { getActive } from '@/router';
import { useSettingStore, useUserStore } from '@/store'; import { useSettingStore, useUserStore } from '@/store';
import type { MenuRoute, ModeType } from '@/types/interface'; import type { MenuRoute, ModeType } from '@/types/interface';
@ -152,13 +136,6 @@ const menuCls = computed(() => {
]; ];
}); });
const menuTheme = computed(() => props.theme as ModeType); const menuTheme = computed(() => props.theme as ModeType);
//
const { changeLocale } = useLocale();
const changeLang = (lang: string) => {
changeLocale(lang);
};
const changeCollapsed = () => { const changeCollapsed = () => {
settingStore.updateConfig({ settingStore.updateConfig({
isSidebarCompact: !settingStore.isSidebarCompact, isSidebarCompact: !settingStore.isSidebarCompact,

View File

@ -30,29 +30,29 @@
}" }"
> >
<template v-if="!routeItem.isHome"> <template v-if="!routeItem.isHome">
{{ renderTitle(routeItem.title) }} {{ routeItem.title }}
</template> </template>
<t-icon v-else name="home" /> <t-icon v-else name="home" />
<template #dropdown> <template #dropdown>
<t-dropdown-menu> <t-dropdown-menu>
<t-dropdown-item @click="() => handleRefresh(routeItem, index)"> <t-dropdown-item @click="() => handleRefresh(routeItem, index)">
<t-icon name="refresh" /> <t-icon name="refresh" />
{{ $t('layout.tagTabs.refresh') }} 刷新
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)"> <t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
<t-icon name="arrow-left" /> <t-icon name="arrow-left" />
{{ $t('layout.tagTabs.closeLeft') }} 关闭左侧
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item <t-dropdown-item
v-if="index < tabRouters.length - 1" v-if="index < tabRouters.length - 1"
@click="() => handleCloseBehind(routeItem.path, index)" @click="() => handleCloseBehind(routeItem.path, index)"
> >
<t-icon name="arrow-right" /> <t-icon name="arrow-right" />
{{ $t('layout.tagTabs.closeRight') }} 关闭右侧
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)"> <t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
<t-icon name="close-circle" /> <t-icon name="close-circle" />
{{ $t('layout.tagTabs.closeOther') }} 关闭其它
</t-dropdown-item> </t-dropdown-item>
</t-dropdown-menu> </t-dropdown-menu>
</template> </template>
@ -76,7 +76,6 @@ import { computed, nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { useLocale } from '@/locales/useLocale';
import { useSettingStore, useTabsRouterStore } from '@/store'; import { useSettingStore, useTabsRouterStore } from '@/store';
import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface'; import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface';
@ -92,8 +91,6 @@ const tabsRouterStore = useTabsRouterStore();
const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome)); const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
const activeTabPath = ref(''); const activeTabPath = ref('');
const { locale } = useLocale();
const handleChangeCurrentTab = (path: string) => { const handleChangeCurrentTab = (path: string) => {
const { tabRouters } = tabsRouterStore; const { tabRouters } = tabsRouterStore;
const route = tabRouters.find((i) => i.path === path); const route = tabRouters.find((i) => i.path === path);
@ -108,10 +105,6 @@ const handleRemove = (options: TTabRemoveOptions) => {
if ((options.value as string) === route.path) router.push({ path: nextRouter.path, query: nextRouter.query }); if ((options.value as string) === route.path) router.push({ path: nextRouter.path, query: nextRouter.query });
}; };
const renderTitle = (title: string | Record<string, string>) => {
if (typeof title === 'string') return title;
return title[locale.value];
};
const handleRefresh = (route: TRouterInfo, routeIdx: number) => { const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
tabsRouterStore.toggleTabRouterAlive(routeIdx); tabsRouterStore.toggleTabRouterAlive(routeIdx);
nextTick(() => { nextTick(() => {

View File

@ -6,16 +6,16 @@
<template #icon> <template #icon>
<component :is="menuIcon(item)" class="t-icon"></component> <component :is="menuIcon(item)" class="t-icon"></component>
</template> </template>
{{ renderMenuTitle(item.title) }} {{ item.title }}
</t-menu-item> </t-menu-item>
<t-menu-item v-else :name="item.path" :value="getPath(item)" :to="item.path"> <t-menu-item v-else :name="item.path" :value="getPath(item)" :to="item.path">
<template #icon> <template #icon>
<component :is="menuIcon(item)" class="t-icon"></component> <component :is="menuIcon(item)" class="t-icon"></component>
</template> </template>
{{ renderMenuTitle(item.title) }} {{ item.title }}
</t-menu-item> </t-menu-item>
</template> </template>
<t-submenu v-else :name="item.path" :value="item.path" :title="renderMenuTitle(item.title)"> <t-submenu v-else :name="item.path" :value="item.path" :title="item.title">
<template #icon> <template #icon>
<component :is="menuIcon(item)" class="t-icon"></component> <component :is="menuIcon(item)" class="t-icon"></component>
</template> </template>
@ -28,7 +28,6 @@
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
import { useLocale } from '@/locales/useLocale';
import { getActive } from '@/router'; import { getActive } from '@/router';
import type { MenuRoute } from '@/types/interface'; import type { MenuRoute } from '@/types/interface';
@ -40,10 +39,8 @@ const props = defineProps({
default: () => [], default: () => [],
}, },
}); });
const active = computed(() => getActive()); const active = computed(() => getActive());
const { locale } = useLocale();
const list = computed(() => { const list = computed(() => {
const { navData } = props; const { navData } = props;
return getMenuList(navData); return getMenuList(navData);
@ -55,11 +52,6 @@ const menuIcon = (item: ListItemType) => {
return RenderIcon; return RenderIcon;
}; };
const renderMenuTitle = (title: string | Record<string, string>) => {
if (typeof title === 'string') return title;
return title[locale.value];
};
const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => { const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
if (!list || list.length === 0) { if (!list || list.length === 0) {
return []; return [];

View File

@ -3,14 +3,9 @@
<template #content> <template #content>
<div class="header-msg"> <div class="header-msg">
<div class="header-msg-top"> <div class="header-msg-top">
<p>{{ $t('layout.notice.title') }}</p> <p>通知中心</p>
<t-button <t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
v-if="unreadMsg.length > 0" >清空</t-button
class="clear-btn"
variant="text"
theme="primary"
@click="setRead('all')"
>{{ $t('layout.notice.clear') }}</t-button
> >
</div> </div>
<t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false"> <t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
@ -21,21 +16,19 @@
</div> </div>
<p class="msg-time">{{ item.date }}</p> <p class="msg-time">{{ item.date }}</p>
<template #action> <template #action>
<t-button size="small" variant="outline" @click="setRead('radio', item)"> <t-button size="small" variant="outline" @click="setRead('radio', item)"> 设为已读 </t-button>
{{ $t('layout.notice.setRead') }}
</t-button>
</template> </template>
</t-list-item> </t-list-item>
</t-list> </t-list>
<div v-else class="empty-list"> <div v-else class="empty-list">
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" /> <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
<p>{{ $t('layout.notice.empty') }}</p> <p>暂无通知</p>
</div> </div>
<div v-if="unreadMsg.length > 0" class="header-msg-bottom"> <div v-if="unreadMsg.length > 0" class="header-msg-bottom">
<t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{ <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail"
$t('layout.notice.viewAll') >查看全部</t-button
}}</t-button> >
</div> </div>
</div> </div>
</template> </template>

View File

@ -2,7 +2,7 @@
<div v-if="layout === 'side'" class="header-menu-search"> <div v-if="layout === 'side'" class="header-menu-search">
<t-input <t-input
:class="['header-search', { 'hover-active': isSearchFocus }]" :class="['header-search', { 'hover-active': isSearchFocus }]"
:placeholder="$t('layout.searchPlaceholder')" placeholder="请输入搜索内容"
@blur="changeSearchFocus(false)" @blur="changeSearchFocus(false)"
@focus="changeSearchFocus(true)" @focus="changeSearchFocus(true)"
> >

View File

@ -3,14 +3,14 @@
v-model:visible="showSettingPanel" v-model:visible="showSettingPanel"
size="408px" size="408px"
:footer="false" :footer="false"
:header="$t('layout.setting.title')" header="页面配置"
:close-btn="true" :close-btn="true"
class="setting-drawer-container" class="setting-drawer-container"
@close-btn-click="handleCloseDrawer" @close-btn-click="handleCloseDrawer"
> >
<div class="setting-container"> <div class="setting-container">
<t-form ref="form" :data="formData" label-align="left"> <t-form ref="form" :data="formData" label-align="left">
<div class="setting-group-title">{{ $t('layout.setting.theme.mode') }}</div> <div class="setting-group-title">主题模式</div>
<t-radio-group v-model="formData.mode"> <t-radio-group v-model="formData.mode">
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer"> <div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
<div> <div>
@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</t-radio-group> </t-radio-group>
<div class="setting-group-title">{{ $t('layout.setting.theme.color') }}</div> <div class="setting-group-title">主题色</div>
<t-radio-group v-model="formData.brandTheme"> <t-radio-group v-model="formData.brandTheme">
<div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer"> <div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item" class="setting-layout-color-group"> <t-radio-button :key="index" :value="item" class="setting-layout-color-group">
@ -52,7 +52,7 @@
</t-popup> </t-popup>
</div> </div>
</t-radio-group> </t-radio-group>
<div class="setting-group-title">{{ $t('layout.setting.navigationLayout') }}</div> <div class="setting-group-title">导航布局</div>
<t-radio-group v-model="formData.layout"> <t-radio-group v-model="formData.layout">
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer"> <div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item"> <t-radio-button :key="index" :value="item">
@ -60,50 +60,38 @@
</t-radio-button> </t-radio-button>
</div> </div>
</t-radio-group> </t-radio-group>
<t-form-item v-show="formData.layout === 'mix'" label="分割菜单(混合模式下有效)" name="splitMenu">
<t-form-item v-show="formData.layout === 'mix'" :label="$t('layout.setting.splitMenu')" name="splitMenu">
<t-switch v-model="formData.splitMenu" /> <t-switch v-model="formData.splitMenu" />
</t-form-item> </t-form-item>
<t-form-item <t-form-item v-show="formData.layout === 'mix'" label="固定 Sidebar" name="isSidebarFixed">
v-show="formData.layout === 'mix'"
:label="$t('layout.setting.fixedSidebar')"
name="isSidebarFixed"
>
<t-switch v-model="formData.isSidebarFixed" /> <t-switch v-model="formData.isSidebarFixed" />
</t-form-item> </t-form-item>
<div class="setting-group-title">元素开关</div>
<div class="setting-group-title">{{ $t('layout.setting.element.title') }}</div> <t-form-item label="侧边栏模式" name="sideMode">
<t-form-item :label="$t('layout.setting.sideMode')" name="sideMode">
<t-radio-group v-model="formData.sideMode" class="side-mode-radio"> <t-radio-group v-model="formData.sideMode" class="side-mode-radio">
<t-radio-button key="light" value="light" :label="$t('layout.setting.theme.options.light')" /> <t-radio-button key="light" value="light" label="明亮" />
<t-radio-button key="dark" value="dark" :label="$t('layout.setting.theme.options.dark')" /> <t-radio-button key="dark" value="dark" label="暗黑" />
</t-radio-group> </t-radio-group>
</t-form-item> </t-form-item>
<t-form-item <t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
v-show="formData.layout === 'side'"
:label="$t('layout.setting.element.showHeader')"
name="showHeader"
>
<t-switch v-model="formData.showHeader" /> <t-switch v-model="formData.showHeader" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.showBreadcrumb')" name="showBreadcrumb"> <t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
<t-switch v-model="formData.showBreadcrumb" /> <t-switch v-model="formData.showBreadcrumb" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.showFooter')" name="showFooter"> <t-form-item label="显示 Footer" name="showFooter">
<t-switch v-model="formData.showFooter" /> <t-switch v-model="formData.showFooter" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.useTagTabs')" name="isUseTabsRouter"> <t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
<t-switch v-model="formData.isUseTabsRouter"></t-switch> <t-switch v-model="formData.isUseTabsRouter"></t-switch>
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.menuAutoCollapsed')" name="menuAutoCollapsed"> <t-form-item label="菜单自动折叠" name="menuAutoCollapsed">
<t-switch v-model="formData.menuAutoCollapsed"></t-switch> <t-switch v-model="formData.menuAutoCollapsed"></t-switch>
</t-form-item> </t-form-item>
</t-form> </t-form>
<div class="setting-info"> <div class="setting-info">
<p>{{ $t('layout.setting.tips') }}</p> <p>请复制后手动修改配置文件: /src/config/style.ts</p>
<t-button theme="primary" variant="text" @click="handleCopy"> <t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
{{ $t('layout.setting.copy.title') }}
</t-button>
</div> </div>
</div> </div>
</t-drawer> </t-drawer>
@ -121,7 +109,6 @@ import ColorContainer from '@/components/color/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue'; import Thumbnail from '@/components/thumbnail/index.vue';
import { DEFAULT_COLOR_OPTIONS } from '@/config/color'; import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
import { t } from '@/locales';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
const settingStore = useSettingStore(); const settingStore = useSettingStore();
@ -129,9 +116,9 @@ const settingStore = useSettingStore();
const LAYOUT_OPTION = ['side', 'top', 'mix']; const LAYOUT_OPTION = ['side', 'top', 'mix'];
const MODE_OPTIONS = [ const MODE_OPTIONS = [
{ type: 'light', text: t('layout.setting.theme.options.light') }, { type: 'light', text: '明亮' },
{ type: 'dark', text: t('layout.setting.theme.options.dark') }, { type: 'dark', text: '暗黑' },
{ type: 'auto', text: t('layout.setting.theme.options.auto') }, { type: 'auto', text: '跟随系统' },
]; ];
const initStyleConfig = () => { const initStyleConfig = () => {