jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): new i18n function $t & login page and setting drawer config i18n

Browse Source
This commit is contained in:
Soybean
2023-07-23 20:19:47 +08:00
parent 458e387b68
commit 854d0bcf20
49 changed files with 1176 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/common/global-header/components/global-breadcrumb.vue
View File

@ -35,7 +35,7 @@ import { routePath } from '@/router';
import { useRouteStore, useThemeStore } from '@/store';
import { useRouterPush } from '@/composables';
import { getBreadcrumbByRouteKey } from '@/utils';
import { t } from '@/locales';
import { $t } from '@/locales';
defineOptions({ name: 'GlobalBreadcrumb' });
@ -48,8 +48,8 @@ const breadcrumbs = computed(() =>
getBreadcrumbByRouteKey(route.name as string, routeStore.menus as App.GlobalMenuOption[], routePath('root')).map(
item => ({
...item,
label: item.i18nTitle ? t(item.i18nTitle) : item.label,
options: item.options?.map(oItem => ({ ...oItem, label: oItem.i18nTitle ? t(oItem.i18nTitle) : oItem.label }))
label: item.i18nTitle ? $t(item.i18nTitle) : item.label,
options: item.options?.map(oItem => ({ ...oItem, label: oItem.i18nTitle ? $t(oItem.i18nTitle) : oItem.label }))
})
)
);

6
src/layouts/common/global-header/components/toggle-lang.vue
View File

@ -15,7 +15,7 @@ import { localStg } from '@/utils';
const theme = useThemeStore();
const { locale } = useI18n();
const language = ref<I18nType.langType>(localStg.get('lang') || 'zh-CN');
const language = ref<I18nType.LangType>(localStg.get('lang') || 'zh-CN');
const options = [
{
label: '中文',
@ -31,9 +31,9 @@ const options = [
}
];
const handleSelect = (key: string) => {
language.value = key as I18nType.langType;
language.value = key as I18nType.LangType;
locale.value = key;
localStg.set('lang', key as I18nType.langType);
localStg.set('lang', key as I18nType.LangType);
};
</script>
<style scoped></style>

4
src/layouts/common/global-logo/index.vue
View File

@ -2,14 +2,14 @@
<router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
<system-logo class="text-32px text-primary" />
<h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
{{ t('message.system.title') }}
{{ $t('system.title') }}
</h2>
</router-link>
</template>
<script setup lang="ts">
import { routePath } from '@/router';
import { t } from '@/locales';
import { $t } from '@/locales';
defineOptions({ name: 'GlobalLogo' });

6
src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue
View File

@ -9,7 +9,7 @@
:style="{ width: showDrawer ? theme.sider.mixChildMenuWidth + 'px' : '0px' }"
>
<header class="header-height flex-y-center justify-between" :style="{ height: theme.header.height + 'px' }">
<h2 class="text-primary pl-8px text-16px font-bold">{{ title }}</h2>
<h2 class="text-primary pl-8px text-16px font-bold">{{ $t('system.title') }}</h2>
<div class="px-8px text-16px text-gray-600 cursor-pointer" @click="app.toggleMixSiderFixed">
<icon-mdi-pin-off v-if="app.mixSiderFixed" />
<icon-mdi-pin v-else />
@ -35,8 +35,9 @@ import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import type { MenuOption } from 'naive-ui';
import { useAppStore, useThemeStore } from '@/store';
import { useAppInfo, useRouterPush } from '@/composables';
import { useRouterPush } from '@/composables';
import { getActiveKeyPathsOfMenus } from '@/utils';
import { $t } from '@/locales';
defineOptions({ name: 'MixMenuDrawer' });
@ -53,7 +54,6 @@ const route = useRoute();
const app = useAppStore();
const theme = useThemeStore();
const { routerPush } = useRouterPush();
const { title } = useAppInfo();
const showDrawer = computed(() => (props.visible && props.menus.length) || app.mixSiderFixed);

4
src/layouts/common/global-sider/components/vertical-mix-sider/index.vue
View File

@ -28,7 +28,7 @@ import { useRouterPush } from '@/composables';
import { useBoolean } from '@/hooks';
import { translateMenuLabel } from '@/utils';
import { GlobalLogo } from '@/layouts/common';
import { t } from '@/locales';
import { $t } from '@/locales';
import { MixMenuCollapse, MixMenuDetail, MixMenuDrawer } from './components';
defineOptions({ name: 'VerticalMixSider' });
@ -53,7 +53,7 @@ const firstDegreeMenus = computed(() =>
return {
routeName,
label: i18nTitle ? t(i18nTitle) : label,
label: i18nTitle ? $t(i18nTitle) : label,
icon,
hasChildren
};

4
src/layouts/common/global-tab/components/tab-detail/index.vue
View File

@ -19,7 +19,7 @@
class="inline-block align-text-bottom text-16px"
/>
</template>
{{ item.meta.i18nTitle ? t(item.meta.i18nTitle) : item.meta.title }}
{{ item.meta.i18nTitle ? $t(item.meta.i18nTitle) : item.meta.title }}
</PageTab>
</div>
<context-menu
@ -36,7 +36,7 @@
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { PageTab } from '@soybeanjs/vue-materials';
import { useTabStore, useThemeStore } from '@/store';
import { t } from '@/locales';
import { $t } from '@/locales';
import { ContextMenu } from './components';
defineOptions({ name: 'TabDetail' });

15
src/layouts/common/setting-drawer/components/dark-mode/index.vue
View File

@ -1,7 +1,7 @@
<template>
<n-divider title-placement="center">主题模式</n-divider>
<n-divider title-placement="center">{{ $t('layout.settingDrawer.themeModeTitle') }}</n-divider>
<n-space vertical size="large">
<setting-menu label="深色主题">
<setting-menu :label="$t('layout.settingDrawer.darkMode')">
<n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px text-white" />
@ -11,7 +11,7 @@
</template>
</n-switch>
</setting-menu>
<setting-menu label="跟随系统">
<setting-menu :label="$t('layout.settingDrawer.followSystemTheme')">
<n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">
<template #checked>
<icon-ic-baseline-do-not-disturb class="text-14px text-white" />
@ -21,7 +21,7 @@
</template>
</n-switch>
</setting-menu>
<setting-menu label="自定义暗黑主题动画过渡">
<setting-menu :label="$t('layout.settingDrawer.isCustomizeDarkModeTransition')">
<n-switch :value="theme.isCustomizeDarkModeTransition" @update:value="theme.setIsCustomizeDarkModeTransition">
<template #checked>
<icon-ic-baseline-do-not-disturb class="text-14px text-white" />
@ -31,13 +31,13 @@
</template>
</n-switch>
</setting-menu>
<setting-menu label="侧边栏深色">
<setting-menu :label="$t('layout.settingDrawer.sider.inverted')">
<n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
</setting-menu>
<setting-menu label="头部深色">
<setting-menu :label="$t('layout.settingDrawer.header.inverted')">
<n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
</setting-menu>
<setting-menu label="底部深色">
<setting-menu :label="$t('layout.settingDrawer.footer.inverted')">
<n-switch :value="theme.footer.inverted" @update:value="theme.setFooterInverted" />
</setting-menu>
</n-space>
@ -45,6 +45,7 @@
<script lang="ts" setup>
import { useThemeStore } from '@/store';
import { $t } from '@/locales';
import SettingMenu from '../setting-menu/index.vue';
defineOptions({ name: 'DarkMode' });

3
src/layouts/common/setting-drawer/components/layout-mode/index.vue
View File

@ -1,5 +1,5 @@
<template>
<n-divider title-placement="center">布局模式</n-divider>
<n-divider title-placement="center">{{ $t('layout.settingDrawer.layoutModelTitle') }}</n-divider>
<n-space justify="space-around" :wrap="true" :size="24" class="px-12px">
<layout-card
v-for="item in theme.layout.modeList"
@ -43,6 +43,7 @@
<script setup lang="ts">
import { useThemeStore } from '@/store';
import { $t } from '@/locales';
import { LayoutCard } from './components';
defineOptions({ name: 'LayoutMode' });

25
src/layouts/common/setting-drawer/components/page-func/index.vue
View File

@ -1,7 +1,7 @@
<template>
<n-divider title-placement="center">界面功能</n-divider>
<n-divider title-placement="center">{{ $t('layout.settingDrawer.pageFunctionsTitle') }}</n-divider>
<n-space vertical size="large">
<setting-menu label="滚动模式">
<setting-menu :label="$t('layout.settingDrawer.scrollMode')">
<n-select
class="w-120px"
size="small"
@ -10,10 +10,10 @@
@update:value="theme.setScrollMode"
/>
</setting-menu>
<setting-menu label="固定头部和多页签">
<setting-menu :label="$t('layout.settingDrawer.fixedHeaderAndTab')">
<n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
</setting-menu>
<setting-menu label="顶部菜单位置">
<setting-menu :label="$t('layout.settingDrawer.menu.horizontalPosition')">
<n-select
class="w-120px"
size="small"
@ -22,7 +22,7 @@
@update:value="theme.setHorizontalMenuPosition"
/>
</setting-menu>
<setting-menu label="头部高度">
<setting-menu :label="$t('layout.settingDrawer.header.height')">
<n-input-number
class="w-120px"
size="small"
@ -31,7 +31,7 @@
@update:value="theme.setHeaderHeight"
/>
</setting-menu>
<setting-menu label="多页签高度">
<setting-menu :label="$t('layout.settingDrawer.tab.height')">
<n-input-number
class="w-120px"
size="small"
@ -40,10 +40,10 @@
@update:value="theme.setTabHeight"
/>
</setting-menu>
<setting-menu label="多页签缓存">
<setting-menu :label="$t('layout.settingDrawer.tab.isCache')">
<n-switch :value="theme.tab.isCache" @update:value="theme.setTabIsCache" />
</setting-menu>
<setting-menu label="侧边栏展开宽度">
<setting-menu :label="$t('layout.settingDrawer.sider.width')">
<n-input-number
class="w-120px"
size="small"
@ -52,7 +52,7 @@
@update:value="theme.setSiderWidth"
/>
</setting-menu>
<setting-menu label="左侧混合侧边栏展开宽度">
<setting-menu :label="$t('layout.settingDrawer.sider.mixWidth')">
<n-input-number
class="w-120px"
size="small"
@ -61,13 +61,13 @@
@update:value="theme.setMixSiderWidth"
/>
</setting-menu>
<setting-menu label="显示底部">
<setting-menu :label="$t('layout.settingDrawer.footer.visible')">
<n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
</setting-menu>
<setting-menu label="固定底部">
<setting-menu :label="$t('layout.settingDrawer.footer.fixed')">
<n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
</setting-menu>
<setting-menu label="底部居右">
<setting-menu :label="$t('layout.settingDrawer.footer.right')">
<n-switch :value="theme.footer.right" @update:value="theme.setFooterIsRight" />
</setting-menu>
</n-space>
@ -75,6 +75,7 @@
<script lang="ts" setup>
import { useThemeStore } from '@/store';
import { $t } from '@/locales';
import SettingMenu from '../setting-menu/index.vue';
defineOptions({ name: 'PageFunc' });

15
src/layouts/common/setting-drawer/components/page-view/index.vue
View File

@ -1,16 +1,16 @@
<template>
<n-divider title-placement="center">界面显示</n-divider>
<n-divider title-placement="center">{{ $t('layout.settingDrawer.pageViewTitle') }}</n-divider>
<n-space vertical size="large">
<setting-menu label="面包屑">
<setting-menu :label="$t('layout.settingDrawer.header.crumb.visible')">
<n-switch :value="theme.header.crumb.visible" @update:value="theme.setHeaderCrumbVisible" />
</setting-menu>
<setting-menu label="面包屑图标">
<setting-menu :label="$t('layout.settingDrawer.header.crumb.icon')">
<n-switch :value="theme.header.crumb.showIcon" @update:value="theme.setHeaderCrumbIconVisible" />
</setting-menu>
<setting-menu label="多页签">
<setting-menu :label="$t('layout.settingDrawer.tab.visible')">
<n-switch :value="theme.tab.visible" @update:value="theme.setTabVisible" />
</setting-menu>
<setting-menu label="多页签风格">
<setting-menu :label="$t('layout.settingDrawer.tab.modeList.mode')">
<n-select
class="w-120px"
size="small"
@ -19,10 +19,10 @@
@update:value="theme.setTabMode"
/>
</setting-menu>
<setting-menu label="页面切换动画">
<setting-menu :label="$t('layout.settingDrawer.page.animate')">
<n-switch :value="theme.page.animate" @update:value="theme.setPageIsAnimate" />
</setting-menu>
<setting-menu label="页面切换动画类型">
<setting-menu :label="$t('layout.settingDrawer.page.animateMode')">
<n-select
class="w-120px"
size="small"
@ -36,6 +36,7 @@
<script lang="ts" setup>
import { useThemeStore } from '@/store';
import { $t } from '@/locales';
import SettingMenu from '../setting-menu/index.vue';
defineOptions({ name: 'PageView' });

7
src/layouts/common/setting-drawer/components/theme-color-select/index.vue
View File

@ -1,5 +1,5 @@
<template>
<n-divider title-placement="center">系统主题</n-divider>
<n-divider title-placement="center">{{ $t('layout.settingDrawer.systemThemeTitle') }}</n-divider>
<n-grid :cols="8" :x-gap="8" :y-gap="12">
<n-grid-item v-for="color in theme.themeColorList" :key="color" class="flex-x-center">
<color-checkbox :color="color" :checked="color === theme.themeColor" @click="theme.setThemeColor(color)" />
@ -7,7 +7,9 @@
</n-grid>
<n-space :vertical="true" class="pt-12px">
<n-color-picker :value="theme.themeColor" :show-alpha="false" @update-value="theme.setThemeColor" />
<n-button :block="true" :type="otherColorBtnType" @click="openModal">更多颜色</n-button>
<n-button :block="true" :type="otherColorBtnType" @click="openModal">
{{ $t('layout.settingDrawer.systemTheme.moreColors') }}
</n-button>
</n-space>
<color-modal :visible="visible" @close="closeModal" />
</template>
@ -17,6 +19,7 @@ import { computed } from 'vue';
import { isInTraditionColors } from '@/settings';
import { useThemeStore } from '@/store';
import { useBoolean } from '@/hooks';
import { $t } from '@/locales';
import { ColorCheckbox, ColorModal } from './components';
defineOptions({ name: 'ThemeColorSelect' });

17
src/layouts/common/setting-drawer/components/theme-config/index.vue
View File

@ -1,11 +1,13 @@
<template>
<n-divider title-placement="center">主题配置</n-divider>
<n-divider title-placement="center">{{ $t('layout.settingDrawer.themeConfiguration.title') }}</n-divider>
<textarea id="themeConfigCopyTarget" v-model="dataClipboardText" class="absolute opacity-0" />
<n-space vertical>
<div ref="copyRef" data-clipboard-target="#themeConfigCopyTarget">
<n-button type="primary" :block="true">拷贝当前配置</n-button>
<n-button type="primary" :block="true">{{ $t('layout.settingDrawer.themeConfiguration.copy') }}</n-button>
</div>
<n-button type="warning" :block="true" @click="handleResetConfig">重置当前配置</n-button>
<n-button type="warning" :block="true" @click="handleResetConfig">
{{ $t('layout.settingDrawer.themeConfiguration.reset') }}
</n-button>
</n-space>
</template>
@ -13,6 +15,7 @@
import { onMounted, onUnmounted, ref, watch } from 'vue';
import Clipboard from 'clipboard';
import { useThemeStore } from '@/store';
import { $t } from '@/locales';
defineOptions({ name: 'ThemeConfig' });
@ -28,7 +31,7 @@ function getClipboardText() {
function handleResetConfig() {
theme.resetThemeStore();
window.$message?.success('已重置配置，请重新拷贝！');
window.$message?.success($t('layout.settingDrawer.themeConfiguration.resetSuccess'));
}
function clipboardEventListener() {
@ -36,9 +39,9 @@ function clipboardEventListener() {
const copy = new Clipboard(copyRef.value);
copy.on('success', () => {
window.$dialog?.success({
title: '操作成功',
content: '复制成功,请替换 src/settings/theme.json的内容！',
positiveText: '确定'
title: $t('layout.settingDrawer.themeConfiguration.operateSuccess'),
content: $t('layout.settingDrawer.themeConfiguration.copySuccess'),
positiveText: $t('layout.settingDrawer.themeConfiguration.confirmCopy')
});
});
}

3
src/layouts/common/setting-drawer/index.vue
View File

@ -1,6 +1,6 @@
<template>
<n-drawer :show="app.settingDrawerVisible" display-directive="show" :width="330" @mask-click="app.closeSettingDrawer">
<n-drawer-content title="主题配置" :native-scrollbar="false">
<n-drawer-content :title="$t('layout.settingDrawer.title')" :native-scrollbar="false">
<dark-mode />
<layout-mode />
<theme-color-select />
@ -14,6 +14,7 @@
<script setup lang="ts">
import { useAppStore } from '@/store';
import { $t } from '@/locales';
import { DarkMode, DrawerButton, LayoutMode, PageFunc, PageView, ThemeColorSelect, ThemeConfig } from './components';
defineOptions({ name: 'SettingDrawer' });