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 />
<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-icon name="logo-github" />
</t-button>
</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-icon name="help-circle" />
</t-button>
</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">
<template #dropdown>
<t-dropdown-menu>
<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 class="operations-dropdown-container-item" @click="handleLogout">
<poweroff-icon />{{ $t('layout.header.signOut') }}
<poweroff-icon />退出登录
</t-dropdown-item>
</t-dropdown-menu>
</template>
@ -66,7 +52,7 @@
<template #suffix><chevron-down-icon /></template>
</t-button>
</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">
<setting-icon />
</t-button>
@ -78,15 +64,13 @@
</template>
<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 { computed } from 'vue';
import { useRouter } from 'vue-router';
import LogoFull from '@/assets/assets-logo-full.svg?component';
import { prefix } from '@/config/global';
import { langList } from '@/locales/index';
import { useLocale } from '@/locales/useLocale';
import { getActive } from '@/router';
import { useSettingStore, useUserStore } from '@/store';
import type { MenuRoute, ModeType } from '@/types/interface';
@ -152,13 +136,6 @@ const menuCls = computed(() => {
];
});
const menuTheme = computed(() => props.theme as ModeType);
//
const { changeLocale } = useLocale();
const changeLang = (lang: string) => {
changeLocale(lang);
};
const changeCollapsed = () => {
settingStore.updateConfig({
isSidebarCompact: !settingStore.isSidebarCompact,

View File

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

View File

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

View File

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

View File

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

View File

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