chore: update

This commit is contained in:
xiaoxian521 2022-08-15 11:59:27 +08:00
parent 3879b99176
commit 9e8907ce21
10 changed files with 56 additions and 115 deletions

View File

@ -2,4 +2,4 @@ ports:
- port: 3344
onOpen: open-preview
tasks:
- init: npm install && npm run serve
- init: pnpm install && pnpm serve

View File

@ -1,39 +1,32 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useNav } from "../../hooks/nav";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import { templateRef } from "@vueuse/core";
import SidebarItem from "./sidebarItem.vue";
import avatars from "/@/assets/avatars.jpg";
import screenfull from "../screenfull/index.vue";
import { useRoute, useRouter } from "vue-router";
import { deviceDetection } from "@pureadmin/utils";
import { watch, nextTick, onMounted, getCurrentInstance } from "vue";
import { ref, watch, nextTick, onMounted } from "vue";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "/@/store/modules/permission";
import globalization from "/@/assets/svg/globalization.svg?component";
const route = useRoute();
const { locale, t } = useI18n();
const routers = useRouter().options.routes;
const menuRef = templateRef<ElRef | null>("menu", null);
const instance =
getCurrentInstance().appContext.config.globalProperties.$storage;
const title =
getCurrentInstance().appContext.config.globalProperties.$config?.Title;
const menuRef = ref();
const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef);
const {
title,
routers,
logout,
backHome,
onPanel,
changeTitle,
handleResize,
menuSelect,
username,
avatarsStyle,
getDropdownItemStyle,
getDropdownItemClass,
changeWangeditorLanguage
getDropdownItemClass
} = useNav();
onMounted(() => {
@ -42,34 +35,12 @@ onMounted(() => {
});
});
watch(
() => locale.value,
() => {
changeTitle(route.meta);
locale.value === "en"
? changeWangeditorLanguage(locale.value)
: changeWangeditorLanguage("zh-CN");
}
);
watch(
() => route.path,
() => {
menuSelect(route.path, routers);
}
);
function translationCh() {
instance.locale = { locale: "zh" };
locale.value = "zh";
handleResize(menuRef.value);
}
function translationEn() {
instance.locale = { locale: "en" };
locale.value = "en";
handleResize(menuRef.value);
}
</script>
<template>
@ -80,7 +51,7 @@ function translationEn() {
</div>
<el-menu
router
ref="menu"
ref="menuRef"
mode="horizontal"
class="horizontal-header-menu"
:default-active="route.path"

View File

@ -1,11 +1,11 @@
<script setup lang="ts">
import { getCurrentInstance } from "vue";
import { useNav } from "../../hooks/nav";
const props = defineProps({
collapse: Boolean
});
const title =
getCurrentInstance().appContext.config.globalProperties.$config?.Title;
const { title } = useNav();
</script>
<template>

View File

@ -1,54 +1,40 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import { useNav } from "../../hooks/nav";
import { templateRef } from "@vueuse/core";
import avatars from "/@/assets/avatars.jpg";
import { transformI18n } from "/@/plugins/i18n";
import screenfull from "../screenfull/index.vue";
import { useRoute, useRouter } from "vue-router";
import { deviceDetection } from "@pureadmin/utils";
import { ref, toRaw, watch, nextTick, onMounted } from "vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { getParentPaths, findRouteByPath } from "/@/router/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "/@/store/modules/permission";
import globalization from "/@/assets/svg/globalization.svg?component";
import {
ref,
toRaw,
watch,
nextTick,
onMounted,
getCurrentInstance
} from "vue";
const route = useRoute();
const { locale, t } = useI18n();
const routers = useRouter().options.routes;
const menuRef = templateRef<ElRef | null>("menu", null);
const instance =
getCurrentInstance().appContext.config.globalProperties.$storage;
const menuRef = ref();
let defaultActive = ref(null);
const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef);
const {
device,
routers,
logout,
onPanel,
changeTitle,
handleResize,
menuSelect,
resolvePath,
username,
avatarsStyle,
getDropdownItemStyle,
getDropdownItemClass,
changeWangeditorLanguage
getDropdownItemClass
} = useNav();
let defaultActive = ref(null);
function getDefaultActive(routePath) {
const wholeMenus = usePermissionStoreHook().wholeMenus;
//
/** 当前路由的父级路径 */
const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
defaultActive.value = findRouteByPath(
parentRoutes,
@ -63,41 +49,19 @@ onMounted(() => {
});
});
watch(
() => locale.value,
() => {
changeTitle(route.meta);
locale.value === "en"
? changeWangeditorLanguage(locale.value)
: changeWangeditorLanguage("zh-CN");
}
);
watch(
() => route.path,
() => {
getDefaultActive(route.path);
}
);
function translationCh() {
instance.locale = { locale: "zh" };
locale.value = "zh";
handleResize(menuRef.value);
}
function translationEn() {
instance.locale = { locale: "en" };
locale.value = "en";
handleResize(menuRef.value);
}
</script>
<template>
<div v-if="device !== 'mobile'" class="horizontal-header">
<el-menu
router
ref="menu"
ref="menuRef"
mode="horizontal"
class="horizontal-header-menu"
:default-active="defaultActive"

View File

@ -1,28 +1,28 @@
<script setup lang="ts">
import Logo from "./logo.vue";
import { useRoute } from "vue-router";
import { emitter } from "/@/utils/mitt";
import { useNav } from "../../hooks/nav";
import SidebarItem from "./sidebarItem.vue";
import leftCollapse from "./leftCollapse.vue";
import type { StorageConfigs } from "/#/index";
import { storageLocal } from "@pureadmin/utils";
import { useRoute, useRouter } from "vue-router";
import { ref, computed, watch, onBeforeMount } from "vue";
import { findRouteByPath, getParentPaths } from "/@/router/utils";
import { usePermissionStoreHook } from "/@/store/modules/permission";
const route = useRoute();
const routers = useRouter().options.routes;
const showLogo = ref(
storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
);
const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
useNav();
let subMenuData = ref([]);
const menuData = computed(() => {
return pureApp.layout === "mix"
return pureApp.layout === "mix" && device.value !== "mobile"
? subMenuData.value
: usePermissionStoreHook().wholeMenus;
});

View File

@ -1,6 +1,7 @@
import { computed } from "vue";
import { router } from "/@/router";
import { getConfig } from "/@/config";
import { useRouter } from "vue-router";
import { emitter } from "/@/utils/mitt";
import { routeMetaType } from "../types";
import { remainingPaths } from "/@/router";
@ -17,11 +18,12 @@ const errorInfo = "当前路由配置不正确,请检查配置";
export function useNav() {
const pureApp = useAppStoreHook();
// 用户名
const routers = useRouter().options.routes;
/** 用户名 */
const username: string =
storageSession.getItem<StorageConfigs>("info")?.username;
// 设置国际化选中后的样式
/** 设置国际化选中后的样式 */
const getDropdownItemStyle = computed(() => {
return (locale, t) => {
return {
@ -30,6 +32,7 @@ export function useNav() {
};
};
});
const getDropdownItemClass = computed(() => {
return (locale, t) => {
return locale === t ? "" : "!dark:hover:color-primary";
@ -48,19 +51,23 @@ export function useNav() {
return pureApp.getDevice;
});
const { $storage } = useGlobal<GlobalPropertiesApi>();
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
const layout = computed(() => {
return $storage?.layout?.layout;
});
// 动态title
const title = computed(() => {
return $config.Title;
});
/** 动态title */
function changeTitle(meta: routeMetaType) {
const Title = getConfig().Title;
if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
else document.title = transformI18n(meta.title);
}
// 退出登录
/** 退出登录 */
function logout() {
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
storageSession.removeItem("info");
@ -101,7 +108,7 @@ export function useNav() {
if (parentPathIndex > 0) {
parentPath = indexPath.slice(0, parentPathIndex);
}
// 找到当前路由的信息
/** 找到当前路由的信息 */
function findCurrentRoute(indexPath: string, routes) {
if (!routes) return console.error(errorInfo);
return routes.map(item => {
@ -109,7 +116,7 @@ export function useNav() {
if (item.redirect) {
findCurrentRoute(item.redirect, item.children);
} else {
// 切换左侧菜单 通知标签页
/** 切换左侧菜单 通知标签页 */
emitter.emit("changLayoutRoute", {
indexPath,
parentPath
@ -123,7 +130,7 @@ export function useNav() {
findCurrentRoute(indexPath, routers);
}
// 判断路径是否参与菜单
/** 判断路径是否参与菜单 */
function isRemaining(path: string): boolean {
return remainingPaths.includes(path);
}
@ -138,9 +145,11 @@ export function useNav() {
}
return {
title,
device,
layout,
logout,
routers,
backHome,
onPanel,
changeTitle,

View File

@ -4,7 +4,6 @@ import { useLayout } from "./useLayout";
import { themeColorsType } from "../types";
import { TinyColor } from "@ctrl/tinycolor";
import { ref, getCurrentInstance } from "vue";
import { useAppStoreHook } from "/@/store/modules/app";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
import {
darken,
@ -45,13 +44,8 @@ export function useDataThemeChange() {
toggleTheme({
scopeName: `layout-theme-${theme}`
});
instance.layout = {
layout: useAppStoreHook().layout,
theme,
darkMode: dataTheme.value,
sidebarStatus: instance.layout.sidebarStatus,
epThemeColor: instance.layout.epThemeColor
};
instance.layout.theme = theme;
instance.layout.darkMode = dataTheme.value;
if (theme === "default" || theme === "light") {
setEpThemeColor(getConfig().EpThemeColor);

View File

@ -1,10 +1,10 @@
import { useNav } from "./nav";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { watch, getCurrentInstance } from "vue";
import { watch, getCurrentInstance, type Ref } from "vue";
export function useTranslationLang() {
const { changeTitle, changeWangeditorLanguage } = useNav();
export function useTranslationLang(ref?: Ref) {
const { changeTitle, changeWangeditorLanguage, handleResize } = useNav();
const { locale, t } = useI18n();
const route = useRoute();
const instance =
@ -13,11 +13,13 @@ export function useTranslationLang() {
function translationCh() {
instance.locale = { locale: "zh" };
locale.value = "zh";
ref && handleResize(ref.value);
}
function translationEn() {
instance.locale = { locale: "en" };
locale.value = "en";
ref && handleResize(ref.value);
}
watch(
@ -29,8 +31,10 @@ export function useTranslationLang() {
: changeWangeditorLanguage("zh-CN");
}
);
return {
t,
route,
locale,
translationCh,
translationEn

View File

@ -13,6 +13,7 @@ import { message } from "@pureadmin/components";
import type { FormInstance } from "element-plus";
import { storageSession } from "@pureadmin/utils";
import { $t, transformI18n } from "/@/plugins/i18n";
import { ref, reactive, watch, computed } from "vue";
import { operates, thirdParty } from "./utils/enums";
import { useLayout } from "/@/layout/hooks/useLayout";
import { useUserStoreHook } from "/@/store/modules/user";
@ -21,7 +22,6 @@ import { ReImageVerify } from "/@/components/ReImageVerify";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
import { ref, reactive, watch, computed, getCurrentInstance } from "vue";
import dayIcon from "/@/assets/svg/day.svg?component";
import darkIcon from "/@/assets/svg/dark.svg?component";
@ -30,8 +30,6 @@ import globalization from "/@/assets/svg/globalization.svg?component";
defineOptions({
name: "Login"
});
const title =
getCurrentInstance().appContext.config.globalProperties.$config?.Title;
const imgCode = ref("");
const router = useRouter();
const loading = ref(false);
@ -46,7 +44,7 @@ initStorage();
const { t } = useI18n();
const { dataTheme, dataThemeChange } = useDataThemeChange();
const { getDropdownItemStyle, getDropdownItemClass } = useNav();
const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
const { locale, translationCh, translationEn } = useTranslationLang();
const ruleForm = reactive({

1
types/global.d.ts vendored
View File

@ -113,6 +113,7 @@ declare global {
declare interface GlobalPropertiesApi {
$echarts: ECharts;
$storage: ResponsiveStorage;
$config: ServerConfigs;
}
function parseInt(s: string | number, radix?: number): number;