mirror of
https://gitee.com/yiming_chang/vue-pure-admin.git
synced 2024-11-29 09:48:06 +08:00
chore: update
This commit is contained in:
parent
3879b99176
commit
9e8907ce21
@ -2,4 +2,4 @@ ports:
|
||||
- port: 3344
|
||||
onOpen: open-preview
|
||||
tasks:
|
||||
- init: npm install && npm run serve
|
||||
- init: pnpm install && pnpm serve
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
|
@ -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
|
||||
|
@ -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
1
types/global.d.ts
vendored
@ -113,6 +113,7 @@ declare global {
|
||||
declare interface GlobalPropertiesApi {
|
||||
$echarts: ECharts;
|
||||
$storage: ResponsiveStorage;
|
||||
$config: ServerConfigs;
|
||||
}
|
||||
|
||||
function parseInt(s: string | number, radix?: number): number;
|
||||
|
Loading…
Reference in New Issue
Block a user