Browse Source

perf: 同步主分支代码

i18n
xiaoxian521 3 years ago
parent
commit
4ef4768c65
  1. 3
      mock/asyncRoutes.ts
  2. 38
      src/components/ReIcon/index.ts
  3. 9
      src/layout/components/navbar.vue
  4. 7
      src/layout/components/sidebar/breadCrumb.vue
  5. 36
      src/layout/components/sidebar/sidebarItem.vue
  6. 6
      src/layout/components/tag/index.vue
  7. 3
      src/layout/types.ts
  8. 7
      src/plugins/element-plus/index.ts
  9. 16
      src/router/index.ts
  10. 3
      src/router/modules/error.ts
  11. 2
      src/router/modules/externalLink.ts
  12. 2
      src/router/modules/home.ts
  13. 2
      src/router/modules/remaining.ts
  14. 19
      src/utils/i18n.ts
  15. 2
      src/utils/storage/index.ts
  16. 3
      src/utils/storage/responsive.ts

3
mock/asyncRoutes.ts

@ -9,6 +9,7 @@ const permissionRouter = {
meta: { meta: {
title: "message.permission", title: "message.permission",
icon: "Lollipop", icon: "Lollipop",
i18n: true,
showLink: true, showLink: true,
rank: 3 rank: 3
}, },
@ -18,6 +19,7 @@ const permissionRouter = {
name: "permissionPage", name: "permissionPage",
meta: { meta: {
title: "message.permissionPage", title: "message.permissionPage",
i18n: true,
showLink: true showLink: true
} }
}, },
@ -26,6 +28,7 @@ const permissionRouter = {
name: "permissionButton", name: "permissionButton",
meta: { meta: {
title: "message.permissionButton", title: "message.permissionButton",
i18n: true,
showLink: true, showLink: true,
authority: [] authority: []
} }

38
src/components/ReIcon/index.ts

@ -1,5 +1,7 @@
import { App } from "vue";
import { App, defineComponent } from "vue";
import icon from "./src/Icon.vue"; import icon from "./src/Icon.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { iconComponents } from "/@/plugins/element-plus";
export const Icon = Object.assign(icon, { export const Icon = Object.assign(icon, {
install(app: App) { install(app: App) {
@ -10,3 +12,37 @@ export const Icon = Object.assign(icon, {
export default { export default {
Icon Icon
}; };
/**
* find icon component
* @param icon icon图标
* @returns component
*/
export function findIconReg(icon: string) {
const faReg = /^fa-/;
if (faReg.test(icon)) {
return findIcon(icon.split(faReg)[1]);
} else {
return findIcon(icon, false);
}
}
export function findIcon(icon: String, isFa: Boolean = true) {
if (isFa) {
return defineComponent({
name: "FaIcon",
data() {
return { icon: icon };
},
components: { FontAwesomeIcon },
template: `<font-awesome-icon :icon="icon" />`
});
} else {
const components = iconComponents.filter(
component => component.name === icon
);
if (components.length > 0) {
return components[0];
} else {
return null;
}
}
}

9
src/layout/components/navbar.vue

@ -10,6 +10,7 @@ import { unref, watch, getCurrentInstance } from "vue";
import { deviceDetection } from "/@/utils/deviceDetection"; import { deviceDetection } from "/@/utils/deviceDetection";
import screenfull from "../components/screenfull/index.vue"; import screenfull from "../components/screenfull/index.vue";
import globalization from "/@/assets/svg/globalization.svg"; import globalization from "/@/assets/svg/globalization.svg";
import { transformI18n } from "/@/utils/i18n";
const instance = const instance =
getCurrentInstance().appContext.config.globalProperties.$storage; getCurrentInstance().appContext.config.globalProperties.$storage;
@ -17,13 +18,17 @@ const pureApp = useAppStoreHook();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
let usename = storageSession.getItem("info")?.username; let usename = storageSession.getItem("info")?.username;
const { locale, t } = useI18n();
const { locale } = useI18n();
watch( watch(
() => locale.value, () => locale.value,
() => { () => {
//@ts-ignore //@ts-ignore
document.title = t(unref(route.meta.title)); // title
document.title = transformI18n(
//@ts-ignore
unref(route.meta.title),
unref(route.meta.i18n)
); // title
} }
); );

7
src/layout/components/sidebar/breadCrumb.vue

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router"; import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
import { transformI18n } from "/@/utils/i18n";
const levelList = ref([]); const levelList = ref([]);
const route = useRoute(); const route = useRoute();
@ -22,7 +23,7 @@ const getBreadcrumb = (): void => {
{ {
path: "/welcome", path: "/welcome",
parentPath: "/", parentPath: "/",
meta: { title: "message.hshome" }
meta: { title: "message.hshome", i18n: true }
} as unknown as RouteLocationMatched } as unknown as RouteLocationMatched
].concat(matched); ].concat(matched);
} }
@ -55,10 +56,10 @@ const handleLink = (item: RouteLocationMatched): any => {
<span <span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect" class="no-redirect"
>{{ $t(item.meta.title) }}</span
>{{ transformI18n(item.meta.title, item.meta.i18n) }}</span
> >
<a v-else @click.prevent="handleLink(item)"> <a v-else @click.prevent="handleLink(item)">
{{ $t(item.meta.title) }}
{{ transformI18n(item.meta.title, item.meta.i18n) }}
</a> </a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>

36
src/layout/components/sidebar/sidebarItem.vue

@ -4,7 +4,8 @@ import { PropType, ref, nextTick, getCurrentInstance } from "vue";
import { childrenType } from "../../types"; import { childrenType } from "../../types";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import Icon from "/@/components/ReIcon/src/Icon.vue"; import Icon from "/@/components/ReIcon/src/Icon.vue";
import { transformI18n } from "/@/utils/i18n";
import { findIconReg } from "/@/components/ReIcon";
const instance = getCurrentInstance().appContext.app.config.globalProperties; const instance = getCurrentInstance().appContext.app.config.globalProperties;
const menuMode = instance.$storage.layout?.layout === "vertical"; const menuMode = instance.$storage.layout?.layout === "vertical";
const pureApp = useAppStoreHook(); const pureApp = useAppStoreHook();
@ -92,7 +93,10 @@ function resolvePath(routePath) {
<el-icon v-show="props.item.meta.icon"> <el-icon v-show="props.item.meta.icon">
<component <component
:is=" :is="
onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
findIconReg(
onlyOneChild.meta.icon ||
(props.item.meta && props.item.meta.icon)
)
" "
></component> ></component>
</el-icon> </el-icon>
@ -106,14 +110,20 @@ function resolvePath(routePath) {
overflow: 'hidden' overflow: 'hidden'
}" }"
> >
<span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
<span v-if="!menuMode">{{
transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
}}</span>
<el-tooltip <el-tooltip
v-else v-else
placement="top" placement="top"
:offset="-10" :offset="-10"
:disabled="!onlyOneChild.showTooltip" :disabled="!onlyOneChild.showTooltip"
> >
<template #content> {{ $t(onlyOneChild.meta.title) }} </template>
<template #content>
{{
transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
}}
</template>
<span <span
ref="menuTextRef" ref="menuTextRef"
:style="{ :style="{
@ -123,7 +133,9 @@ function resolvePath(routePath) {
}" }"
@mouseover="hoverMenu(onlyOneChild)" @mouseover="hoverMenu(onlyOneChild)"
> >
{{ $t(onlyOneChild.meta.title) }}
{{
transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
}}
</span> </span>
</el-tooltip> </el-tooltip>
<Icon <Icon
@ -144,16 +156,22 @@ function resolvePath(routePath) {
> >
<template #title> <template #title>
<el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon"> <el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon">
<component :is="props.item.meta && props.item.meta.icon"></component>
<component
:is="findIconReg(props.item.meta && props.item.meta.icon)"
></component>
</el-icon> </el-icon>
<span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
<span v-if="!menuMode">{{
transformI18n(props.item.meta.title, props.item.meta.i18n)
}}</span>
<el-tooltip <el-tooltip
v-else v-else
placement="top" placement="top"
:offset="-10" :offset="-10"
:disabled="!pureApp.sidebar.opened || !props.item.showTooltip" :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
> >
<template #content> {{ $t(props.item.meta.title) }} </template>
<template #content>
{{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
</template>
<div <div
ref="menuTextRef" ref="menuTextRef"
:style="{ :style="{
@ -165,7 +183,7 @@ function resolvePath(routePath) {
@mouseover="hoverMenu(props.item)" @mouseover="hoverMenu(props.item)"
> >
<span style="overflow: hidden; text-overflow: ellipsis"> <span style="overflow: hidden; text-overflow: ellipsis">
{{ $t(props.item.meta.title) }}
{{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
</span> </span>
</div> </div>
</el-tooltip> </el-tooltip>

6
src/layout/components/tag/index.vue

@ -6,6 +6,7 @@ let routerArrays: Array<RouteConfigs> = [
meta: { meta: {
title: "message.hshome", title: "message.hshome",
icon: "el-icon-s-home", icon: "el-icon-s-home",
i18n: true,
showLink: true showLink: true
} }
} }
@ -31,6 +32,7 @@ import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import { toggleClass, removeClass, hasClass } from "/@/utils/operate"; import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
import { transformI18n } from "/@/utils/i18n";
import close from "/@/assets/svg/close.svg"; import close from "/@/assets/svg/close.svg";
import refresh from "/@/assets/svg/refresh.svg"; import refresh from "/@/assets/svg/refresh.svg";
@ -166,6 +168,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "message.hshome", title: "message.hshome",
i18n: true,
icon: "el-icon-s-home", icon: "el-icon-s-home",
showLink: true showLink: true
} }
@ -280,6 +283,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
relativeStorage.routesInStorage = routerArrays; relativeStorage.routesInStorage = routerArrays;
usePermissionStoreHook().clearAllCachePage(); usePermissionStoreHook().clearAllCachePage();
router.push("/welcome"); router.push("/welcome");
break; break;
} }
setTimeout(() => { setTimeout(() => {
@ -480,7 +484,7 @@ onBeforeMount(() => {
@mouseleave.prevent="onMouseleave(item, index)" @mouseleave.prevent="onMouseleave(item, index)"
> >
<router-link :to="item.path" @click="tagOnClick(item)">{{ <router-link :to="item.path" @click="tagOnClick(item)">{{
$t(item.meta.title)
transformI18n(item.meta.title, item.meta.i18n)
}}</router-link> }}</router-link>
<el-icon <el-icon
v-if=" v-if="

3
src/layout/types.ts

@ -4,6 +4,7 @@ export const routerArrays: Array<RouteConfigs> = [
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "message.hshome", title: "message.hshome",
i18n: true,
icon: "el-icon-s-home", icon: "el-icon-s-home",
showLink: true showLink: true
} }
@ -15,6 +16,7 @@ export type RouteConfigs = {
parentPath?: string; parentPath?: string;
meta?: { meta?: {
title?: string; title?: string;
i18n?: boolean;
icon?: string; icon?: string;
showLink?: boolean; showLink?: boolean;
savedPosition?: boolean; savedPosition?: boolean;
@ -58,6 +60,7 @@ export type childrenType = {
meta?: { meta?: {
icon?: string; icon?: string;
title?: string; title?: string;
i18n?: boolean;
extraIcon?: { extraIcon?: {
svg?: boolean; svg?: boolean;
name?: string; name?: string;

7
src/plugins/element-plus/index.ts

@ -93,9 +93,11 @@ const components = [
ElDescriptions, ElDescriptions,
ElDescriptionsItem, ElDescriptionsItem,
ElBacktop, ElBacktop,
ElSwitch,
ElSwitch
];
// icon
// icon
export const iconComponents = [
Check, Check,
Menu, Menu,
HomeFilled, HomeFilled,
@ -115,6 +117,7 @@ const components = [
const plugins = [ElLoading]; const plugins = [ElLoading];
export function useElementPlus(app: App) { export function useElementPlus(app: App) {
components.push(...iconComponents);
components.forEach((component: Component) => { components.forEach((component: Component) => {
app.component(component.name, component); app.component(component.name, component);
}); });

16
src/router/index.ts

@ -7,11 +7,10 @@ import {
} from "vue-router"; } from "vue-router";
import { RouteConfigs } from "/@/layout/types"; import { RouteConfigs } from "/@/layout/types";
import { split, uniqBy } from "lodash-es"; import { split, uniqBy } from "lodash-es";
import { i18n } from "/@/plugins/i18n";
import { transformI18n } from "../utils/i18n";
import { openLink } from "/@/utils/link"; import { openLink } from "/@/utils/link";
import NProgress from "/@/utils/progress"; import NProgress from "/@/utils/progress";
import { useTimeoutFn } from "@vueuse/core"; import { useTimeoutFn } from "@vueuse/core";
import { RouteConfigs } from "/@/layout/types";
import { storageSession, storageLocal } from "/@/utils/storage"; import { storageSession, storageLocal } from "/@/utils/storage";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
@ -201,10 +200,15 @@ router.beforeEach((to, _from, next) => {
const name = storageSession.getItem("info"); const name = storageSession.getItem("info");
NProgress.start(); NProgress.start();
const externalLink = to?.redirectedFrom?.fullPath; const externalLink = to?.redirectedFrom?.fullPath;
// @ts-ignore
const { t } = i18n.global;
// @ts-ignore
if (!externalLink) to.meta.title ? (document.title = t(to.meta.title)) : "";
if (!externalLink)
to.matched.some(item => {
item.meta.title
? (document.title = transformI18n(
item.meta.title as string,
item.meta?.i18n as boolean
))
: "";
});
if (name) { if (name) {
if (_from?.name) { if (_from?.name) {
// 如果路由包含http 则是超链接 反之是普通路由 // 如果路由包含http 则是超链接 反之是普通路由

3
src/router/modules/error.ts

@ -9,6 +9,7 @@ const errorRouter = {
icon: "Position", icon: "Position",
title: "message.hserror", title: "message.hserror",
showLink: true, showLink: true,
i18n: true,
rank: 7 rank: 7
}, },
children: [ children: [
@ -18,6 +19,7 @@ const errorRouter = {
component: () => import("/@/views/error/401.vue"), component: () => import("/@/views/error/401.vue"),
meta: { meta: {
title: "message.hsfourZeroOne", title: "message.hsfourZeroOne",
i18n: true,
showLink: true showLink: true
} }
}, },
@ -27,6 +29,7 @@ const errorRouter = {
component: () => import("/@/views/error/404.vue"), component: () => import("/@/views/error/404.vue"),
meta: { meta: {
title: "message.hsfourZeroFour", title: "message.hsfourZeroFour",
i18n: true,
showLink: true showLink: true
} }
} }

2
src/router/modules/externalLink.ts

@ -8,6 +8,7 @@ const externalLink = {
icon: "Link", icon: "Link",
title: "message.externalLink", title: "message.externalLink",
showLink: true, showLink: true,
i18n: true,
rank: 190 rank: 190
}, },
children: [ children: [
@ -16,6 +17,7 @@ const externalLink = {
meta: { meta: {
title: "message.externalLink", title: "message.externalLink",
showLink: true, showLink: true,
i18n: true,
rank: 191 rank: 191
} }
} }

2
src/router/modules/home.ts

@ -8,6 +8,7 @@ const homeRouter = {
meta: { meta: {
icon: "HomeFilled", icon: "HomeFilled",
showLink: true, showLink: true,
i18n: true,
rank: 0 rank: 0
}, },
children: [ children: [
@ -17,6 +18,7 @@ const homeRouter = {
component: () => import("/@/views/welcome.vue"), component: () => import("/@/views/welcome.vue"),
meta: { meta: {
title: "message.hshome", title: "message.hshome",
i18n: true,
showLink: true showLink: true
} }
} }

2
src/router/modules/remaining.ts

@ -8,6 +8,7 @@ const remainingRouter = [
meta: { meta: {
title: "message.hslogin", title: "message.hslogin",
showLink: false, showLink: false,
i18n: true,
rank: 101 rank: 101
} }
}, },
@ -18,6 +19,7 @@ const remainingRouter = [
meta: { meta: {
icon: "HomeFilled", icon: "HomeFilled",
title: "message.hshome", title: "message.hshome",
i18n: true,
showLink: false, showLink: false,
rank: 104 rank: 104
}, },

19
src/utils/i18n.ts

@ -0,0 +1,19 @@
import { i18n } from "../plugins/i18n";
/**
*
* @param message message
* @param isI18n true,,this
* @returns message
*/
export function transformI18n(message = "", isI18n = false) {
if (!message) {
return "";
}
if (isI18n) {
//@ts-ignore
return i18n.global.tc.call(i18n.global, message);
} else {
return message;
}
}

2
src/utils/storage/index.ts

@ -20,7 +20,7 @@ class sessionStorageProxy implements ProxyStorage {
// 取 // 取
public getItem(key: string): any { public getItem(key: string): any {
return JSON.parse(this.storage.getItem(key)) || null;
return JSON.parse(this.storage.getItem(key));
} }
// 删 // 删

3
src/utils/storage/responsive.ts

@ -13,7 +13,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "message.hshome", title: "message.hshome",
icon: "el-icon-s-home",
i18n: true,
icon: "HomeFilled",
showLink: true showLink: true
} }
} }

Loading…
Cancel
Save