mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 03:59:54 +08:00
refactor(layouts): 移除i18n相关
This commit is contained in:
parent
79673bb727
commit
4c53ffa3ca
|
@ -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,
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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 [];
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)"
|
||||
>
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
Loading…
Reference in New Issue
Block a user