github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 16:15:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support vscode i18n-ally plugin

Browse Source
This commit is contained in:
vben
2020-12-01 23:51:39 +08:00
parent 41a4b827a2
commit 962f90de44
39 changed files with 263 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/default/footer/index.tsx
View File

@@ -13,16 +13,16 @@ import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({
name: 'LayoutContent',
setup() {
const { t } = useI18n('layout.footer');
const { t } = useI18n();
return () => {
return (
<Layout.Footer class="layout-footer">
{() => (
<>
<div class="layout-footer__links">
<a onClick={() => openWindow(SITE_URL)}>{t('onlinePreview')}</a>
<a onClick={() => openWindow(SITE_URL)}>{t('layout.footer.onlinePreview')}</a>
<GithubFilled onClick={() => openWindow(GITHUB_URL)} class="github" />
<a onClick={() => openWindow(DOC_URL)}>{t('onlineDocument')}</a>
<a onClick={() => openWindow(DOC_URL)}>{t('layout.footer.onlineDocument')}</a>
</div>
<div>Copyright &copy;2020 Vben Admin</div>
</>

2
src/layouts/default/header/LayoutHeader.tsx
View File

@@ -66,7 +66,7 @@ export default defineComponent({
const logoWidthRef = ref(200);
const logoRef = ref<ComponentRef>(null);
const { refreshPage } = useTabs();
const { t } = useI18n('layout.header');
const { t } = useI18n();
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting();

12
src/layouts/default/header/UserDropdown.tsx
View File

@@ -44,7 +44,7 @@ const MenuItem: FunctionalComponent<MenuItemProps> = (props) => {
export default defineComponent({
name: 'UserDropdown',
setup() {
const { t } = useI18n('layout.header');
const { t } = useI18n();
const { getShowDoc } = useHeaderSetting();
const getUserInfo = computed(() => {
@@ -91,12 +91,18 @@ export default defineComponent({
<Menu onClick={handleMenuClick}>
{() => (
<>
{showDoc && <MenuItem key="doc" text={t('dropdownItemDoc')} icon="gg:loadbar-doc" />}
{showDoc && (
<MenuItem
key="doc"
text={t('layout.header.dropdownItemDoc')}
icon="gg:loadbar-doc"
/>
)}
{/* @ts-ignore */}
{showDoc && <Menu.Divider />}
<MenuItem
key="loginOut"
text={t('dropdownItemLoginOut')}
text={t('layout.header.dropdownItemLoginOut')}
icon="ant-design:poweroff-outlined"
/>
</>

10
src/layouts/default/lock/LockAction.tsx
View File

@@ -15,7 +15,7 @@ const prefixCls = 'lock-modal';
export default defineComponent({
name: 'LockModal',
setup(_, { attrs }) {
const { t } = useI18n('layout.header');
const { t } = useI18n();
const [register, { closeModal }] = useModalInner();
const [registerForm, { validateFields, resetFields }] = useForm({
@@ -23,7 +23,7 @@ export default defineComponent({
schemas: [
{
field: 'password',
label: t('lockScreenPassword'),
label: t('layout.header.lockScreenPassword'),
component: 'InputPassword',
required: true,
},
@@ -53,7 +53,7 @@ export default defineComponent({
return () => (
<BasicModal
footer={null}
title={t('lockScreen')}
title={t('layout.header.lockScreen')}
{...attrs}
class={prefixCls}
onRegister={register}
@@ -69,10 +69,10 @@ export default defineComponent({
<div class={`${prefixCls}__footer`}>
<Button type="primary" block class="mt-2" onClick={lock}>
{() => t('lockScreenBtn')}
{() => t('layout.header.lockScreenBtn')}
</Button>
<Button block class="mt-2" onClick={lock.bind(null, false)}>
{() => t('notLockScreenPassword')}
{() => t('layout.header.notLockScreenPassword')}
</Button>
</div>
</div>

4
src/layouts/default/multitabs/TabContent.tsx
View File

@@ -59,7 +59,7 @@ export default defineComponent({
},
},
setup(props) {
const { t } = useI18n('layout.multipleTab');
const { t } = useI18n();
const { getShowMenu } = useMenuSetting();
const { getShowHeader } = useHeaderSetting();
const { getShowQuick } = useMultipleTabSetting();
@@ -76,7 +76,7 @@ export default defineComponent({
return () => {
const scaleAction = getScaleAction(
unref(getIsScale) ? t('putAway') : t('unfold'),
unref(getIsScale) ? t('layout.multipleTab.putAway') : t('layout.multipleTab.unfold'),
unref(getIsScale)
);
const dropMenuList = unref(getDropMenuList) || [];

14
src/layouts/default/multitabs/data.ts
View File

@@ -4,7 +4,7 @@ import type { TabItem } from '/@/store/modules/tab';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n('layout.multipleTab');
const { t } = useI18n();
export enum TabContentEnum {
TAB_TYPE,
@@ -41,40 +41,40 @@ export function getActions() {
const REFRESH_PAGE: DropMenu = {
icon: 'ant-design:reload-outlined',
event: MenuEventEnum.REFRESH_PAGE,
text: t('redo'),
text: t('layout.multipleTab.redo'),
disabled: false,
};
const CLOSE_CURRENT: DropMenu = {
icon: 'ant-design:close-outlined',
event: MenuEventEnum.CLOSE_CURRENT,
text: t('close'),
text: t('layout.multipleTab.close'),
disabled: false,
divider: true,
};
const CLOSE_LEFT: DropMenu = {
icon: 'ant-design:pic-left-outlined',
event: MenuEventEnum.CLOSE_LEFT,
text: t('closeLeft'),
text: t('layout.multipleTab.closeLeft'),
disabled: false,
divider: false,
};
const CLOSE_RIGHT: DropMenu = {
icon: 'ant-design:pic-right-outlined',
event: MenuEventEnum.CLOSE_RIGHT,
text: t('closeRight'),
text: t('layout.multipleTab.closeRight'),
disabled: false,
divider: true,
};
const CLOSE_OTHER: DropMenu = {
icon: 'ant-design:pic-center-outlined',
event: MenuEventEnum.CLOSE_OTHER,
text: t('closeOther'),
text: t('layout.multipleTab.closeOther'),
disabled: false,
};
const CLOSE_ALL: DropMenu = {
icon: 'ant-design:line-outlined',
event: MenuEventEnum.CLOSE_ALL,
text: t('closeAll'),
text: t('layout.multipleTab.closeAll'),
disabled: false,
};
return [REFRESH_PAGE, CLOSE_CURRENT, CLOSE_LEFT, CLOSE_RIGHT, CLOSE_OTHER, CLOSE_ALL];

95
src/layouts/default/setting/SettingDrawer.tsx
View File

@@ -56,7 +56,7 @@ interface ThemePickerProps {
}
const { createSuccessModal, createMessage } = useMessage();
const { t } = useI18n('layout.setting');
const { t } = useI18n();
/**
* Menu type Picker comp
@@ -122,8 +122,8 @@ const FooterButton: FunctionalComponent = () => {
const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(getRootSetting), null, 2));
unref(isSuccessRef) &&
createSuccessModal({
title: t('operatingTitle'),
content: t('operatingContent'),
title: t('layout.setting.operatingTitle'),
content: t('layout.setting.operatingContent'),
});
}
function handleResetSetting() {
@@ -133,7 +133,7 @@ const FooterButton: FunctionalComponent = () => {
// updateTheme(themeColor);
updateColorWeak(colorWeak);
updateGrayMode(grayMode);
createMessage.success(t('resetSuccess'));
createMessage.success(t('layout.setting.resetSuccess'));
} catch (error) {
createMessage.error(error);
}
@@ -151,7 +151,7 @@ const FooterButton: FunctionalComponent = () => {
{() => (
<>
<CopyOutlined class="mr-2" />
{t('copyBtn')}
{t('layout.setting.copyBtn')}
</>
)}
</Button>
@@ -159,7 +159,7 @@ const FooterButton: FunctionalComponent = () => {
{() => (
<>
<RedoOutlined class="mr-2" />
{t('resetBtn')}
{t('layout.setting.resetBtn')}
</>
)}
</Button>
@@ -167,7 +167,7 @@ const FooterButton: FunctionalComponent = () => {
{() => (
<>
<RedoOutlined class="mr-2" />
{t('clearBtn')}
{t('layout.setting.clearBtn')}
</>
)}
</Button>
@@ -226,7 +226,7 @@ export default defineComponent({
return (
<>
<MenuTypePicker />
{renderSwitchItem(t('splitMenu'), {
{renderSwitchItem(t('layout.setting.splitMenu'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_SPLIT, e);
},
@@ -240,7 +240,7 @@ export default defineComponent({
function renderTheme() {
return (
<>
<Divider>{() => t('headerTheme')}</Divider>
<Divider>{() => t('layout.setting.headerTheme')}</Divider>
<ThemePicker
colorList={HEADER_PRESET_BG_COLOR_LIST}
def={unref(getHeaderBgColor)}
@@ -248,7 +248,7 @@ export default defineComponent({
baseHandler(HandlerEnum.HEADER_THEME, e);
}}
/>
<Divider>{() => t('sidebarTheme')}</Divider>
<Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
<ThemePicker
colorList={SIDE_BAR_BG_COLOR_LIST}
def={unref(getMenuBgColor)}
@@ -265,56 +265,56 @@ export default defineComponent({
*/
function renderFeatures() {
return [
renderSwitchItem(t('menuDrag'), {
renderSwitchItem(t('layout.setting.menuDrag'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_HAS_DRAG, e);
},
def: unref(getCanDrag),
disabled: !unref(getShowMenuRef),
}),
renderSwitchItem(t('menuSearch'), {
renderSwitchItem(t('layout.setting.menuSearch'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_SHOW_SEARCH, e);
},
def: unref(getShowSearch),
disabled: !unref(getShowMenuRef),
}),
renderSwitchItem(t('menuAccordion'), {
renderSwitchItem(t('layout.setting.menuAccordion'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_ACCORDION, e);
},
def: unref(getAccordion),
disabled: !unref(getShowMenuRef),
}),
renderSwitchItem(t('menuCollapse'), {
renderSwitchItem(t('layout.setting.menuCollapse'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_COLLAPSED, e);
},
def: unref(getCollapsed),
disabled: !unref(getShowMenuRef),
}),
renderSwitchItem(t('collapseMenuDisplayName'), {
renderSwitchItem(t('layout.setting.collapseMenuDisplayName'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_COLLAPSED_SHOW_TITLE, e);
},
def: unref(getCollapsedShowTitle),
disabled: !unref(getShowMenuRef) || !unref(getCollapsed),
}),
renderSwitchItem(t('fixedHeader'), {
renderSwitchItem(t('layout.setting.fixedHeader'), {
handler: (e) => {
baseHandler(HandlerEnum.HEADER_FIXED, e);
},
def: unref(getHeaderFixed),
disabled: !unref(getShowHeader),
}),
renderSwitchItem(t('fixedSideBar'), {
renderSwitchItem(t('layout.setting.fixedSideBar'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_FIXED, e);
},
def: unref(getMenuFixed),
disabled: !unref(getShowMenuRef),
}),
renderSelectItem(t('topMenuLayout'), {
renderSelectItem(t('layout.setting.topMenuLayout'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_TOP_ALIGN, e);
},
@@ -322,7 +322,7 @@ export default defineComponent({
options: topMenuAlignOptions,
disabled: !unref(getShowHeader) || (!unref(getIsTopMenu) && !unref(getSplit)),
}),
renderSelectItem(t('menuCollapseButton'), {
renderSelectItem(t('layout.setting.menuCollapseButton'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_TRIGGER, e);
},
@@ -331,7 +331,7 @@ export default defineComponent({
options: menuTriggerOptions,
}),
renderSelectItem(t('contentMode'), {
renderSelectItem(t('layout.setting.contentMode'), {
handler: (e) => {
baseHandler(HandlerEnum.CONTENT_MODE, e);
},
@@ -339,7 +339,7 @@ export default defineComponent({
options: contentModeOptions,
}),
<div class={`setting-drawer__cell-item`}>
<span>{t('autoScreenLock')}</span>
<span>{t('layout.setting.autoScreenLock')}</span>
<InputNumber
style="width:126px"
size="small"
@@ -350,14 +350,14 @@ export default defineComponent({
defaultValue={appStore.getProjectConfig.lockTime}
formatter={(value: string) => {
if (parseInt(value) === 0) {
return `0(${t('notAutoScreenLock')})`;
return `0(${t('layout.setting.notAutoScreenLock')})`;
}
return `${value}${t('minute')}`;
return `${value}${t('layout.setting.minute')}`;
}}
/>
</div>,
<div class={`setting-drawer__cell-item`}>
<span>{t('expandedMenuWidth')}</span>
<span>{t('layout.setting.expandedMenuWidth')}</span>
<InputNumber
style="width:126px"
size="small"
@@ -377,27 +377,27 @@ export default defineComponent({
function renderContent() {
return [
renderSwitchItem(t('breadcrumb'), {
renderSwitchItem(t('layout.setting.breadcrumb'), {
handler: (e) => {
baseHandler(HandlerEnum.SHOW_BREADCRUMB, e);
},
def: unref(getShowBreadCrumb),
disabled: !unref(getShowHeader),
}),
renderSwitchItem(t('breadcrumbIcon'), {
renderSwitchItem(t('layout.setting.breadcrumbIcon'), {
handler: (e) => {
baseHandler(HandlerEnum.SHOW_BREADCRUMB_ICON, e);
},
def: unref(getShowBreadCrumbIcon),
disabled: !unref(getShowHeader),
}),
renderSwitchItem(t('tabs'), {
renderSwitchItem(t('layout.setting.tabs'), {
handler: (e) => {
baseHandler(HandlerEnum.TABS_SHOW, e);
},
def: unref(getShowMultipleTab),
}),
renderSwitchItem(t('tabsQuickBtn'), {
renderSwitchItem(t('layout.setting.tabsQuickBtn'), {
handler: (e) => {
baseHandler(HandlerEnum.TABS_SHOW_QUICK, e);
},
@@ -405,14 +405,14 @@ export default defineComponent({
disabled: !unref(getShowMultipleTab),
}),
renderSwitchItem(t('sidebar'), {
renderSwitchItem(t('layout.setting.sidebar'), {
handler: (e) => {
baseHandler(HandlerEnum.MENU_SHOW_SIDEBAR, e);
},
def: unref(getShowMenu),
disabled: unref(getIsHorizontal),
}),
renderSwitchItem(t('header'), {
renderSwitchItem(t('layout.setting.header'), {
handler: (e) => {
baseHandler(HandlerEnum.HEADER_SHOW, e);
},
@@ -424,25 +424,25 @@ export default defineComponent({
},
def: unref(getShowLogo),
}),
renderSwitchItem(t('footer'), {
renderSwitchItem(t('layout.setting.footer'), {
handler: (e) => {
baseHandler(HandlerEnum.SHOW_FOOTER, e);
},
def: unref(getShowFooter),
}),
renderSwitchItem(t('fullContent'), {
renderSwitchItem(t('layout.setting.fullContent'), {
handler: (e) => {
baseHandler(HandlerEnum.FULL_CONTENT, e);
},
def: unref(getFullContent),
}),
renderSwitchItem(t('grayMode'), {
renderSwitchItem(t('layout.setting.grayMode'), {
handler: (e) => {
baseHandler(HandlerEnum.GRAY_MODE, e);
},
def: unref(getGrayMode),
}),
renderSwitchItem(t('colorWeak'), {
renderSwitchItem(t('layout.setting.colorWeak'), {
handler: (e) => {
baseHandler(HandlerEnum.COLOR_WEAK, e);
},
@@ -454,13 +454,13 @@ export default defineComponent({
function renderTransition() {
return (
<>
{renderSwitchItem(t('progress'), {
{renderSwitchItem(t('layout.setting.progress'), {
handler: (e) => {
baseHandler(HandlerEnum.OPEN_PROGRESS, e);
},
def: unref(getOpenNProgress),
})}
{renderSwitchItem(t('switchLoading'), {
{renderSwitchItem(t('layout.setting.switchLoading'), {
handler: (e) => {
baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
},
@@ -468,14 +468,14 @@ export default defineComponent({
disabled: !unref(getEnableTransition),
})}
{renderSwitchItem(t('switchAnimation'), {
{renderSwitchItem(t('layout.setting.switchAnimation'), {
handler: (e) => {
baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
},
def: unref(getEnableTransition),
})}
{renderSelectItem(t('animationType'), {
{renderSelectItem(t('layout.setting.animationType'), {
handler: (e) => {
baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
},
@@ -519,26 +519,31 @@ export default defineComponent({
onChange={(e: any) => {
handler && handler(e);
}}
checkedChildren={t('on')}
unCheckedChildren={t('off')}
checkedChildren={t('layout.setting.on')}
unCheckedChildren={t('layout.setting.off')}
/>
</div>
);
}
return () => (
<BasicDrawer {...attrs} title={t('drawerTitle')} width={330} wrapClassName="setting-drawer">
<BasicDrawer
{...attrs}
title={t('layout.setting.drawerTitle')}
width={330}
wrapClassName="setting-drawer"
>
{{
default: () => (
<>
<Divider>{() => t('navMode')}</Divider>
<Divider>{() => t('layout.setting.navMode')}</Divider>
{renderSidebar()}
{renderTheme()}
<Divider>{() => t('interfaceFunction')}</Divider>
<Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
{renderFeatures()}
<Divider>{() => t('interfaceDisplay')}</Divider>
<Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
{renderContent()}
<Divider>{() => t('animation')}</Divider>
<Divider>{() => t('layout.setting.animation')}</Divider>
{renderTransition()}
<Divider />
<FooterButton />

24
src/layouts/default/setting/enum.ts
View File

@@ -6,7 +6,7 @@ import sidebarImg from '/@/assets/images/layout/menu-sidebar.svg';
import menuTopImg from '/@/assets/images/layout/menu-top.svg';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n('layout.setting');
const { t } = useI18n();
export enum HandlerEnum {
CHANGE_LAYOUT,
@@ -51,41 +51,41 @@ export enum HandlerEnum {
export const contentModeOptions = [
{
value: ContentEnum.FULL,
label: t('contentModeFull'),
label: t('layout.setting.contentModeFull'),
},
{
value: ContentEnum.FIXED,
label: t('contentModeFixed'),
label: t('layout.setting.contentModeFixed'),
},
];
export const topMenuAlignOptions = [
{
value: TopMenuAlignEnum.CENTER,
label: t('topMenuAlignRight'),
label: t('layout.setting.topMenuAlignRight'),
},
{
value: TopMenuAlignEnum.START,
label: t('topMenuAlignLeft'),
label: t('layout.setting.topMenuAlignLeft'),
},
{
value: TopMenuAlignEnum.END,
label: t('topMenuAlignCenter'),
label: t('layout.setting.topMenuAlignCenter'),
},
];
export const menuTriggerOptions = [
{
value: TriggerEnum.NONE,
label: t('menuTriggerNone'),
label: t('layout.setting.menuTriggerNone'),
},
{
value: TriggerEnum.FOOTER,
label: t('menuTriggerBottom'),
label: t('layout.setting.menuTriggerBottom'),
},
{
value: TriggerEnum.HEADER,
label: t('menuTriggerTop'),
label: t('layout.setting.menuTriggerTop'),
},
];
@@ -104,20 +104,20 @@ export const routerTransitionOptions = [
export const menuTypeList = [
{
title: t('menuTypeSidebar'),
title: t('layout.setting.menuTypeSidebar'),
mode: MenuModeEnum.INLINE,
type: MenuTypeEnum.SIDEBAR,
src: sidebarImg,
},
{
title: t('menuTypeMix'),
title: t('layout.setting.menuTypeMix'),
mode: MenuModeEnum.INLINE,
type: MenuTypeEnum.MIX,
src: mixImg,
},
{
title: t('menuTypeTopMenu'),
title: t('layout.setting.menuTypeTopMenu'),
mode: MenuModeEnum.HORIZONTAL,
type: MenuTypeEnum.TOP_MENU,
src: menuTopImg,