'admin-21.01.31:删除不必要logo、处理tagsView无权限也显示菜单、优化布局等'
This commit is contained in:
lyt-Top
parent
c3a8f42155
commit
71a28c2252
@ -6,6 +6,7 @@
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"clipboard": "^2.0.6",
|
||||
"element-plus": "^1.0.2-beta.30",
|
||||
"mitt": "^2.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
@ -16,6 +17,7 @@
|
||||
"vuex": "^4.0.0-rc.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/clipboard": "^2.0.1",
|
||||
"@types/node": "^14.14.22",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.6",
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 18 KiB |
@ -528,9 +528,12 @@ export function formatTwoStageRoutes(arr: any) {
|
||||
return newArr
|
||||
}
|
||||
|
||||
// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单过滤中使用：未过滤隐藏的(isHide))
|
||||
// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单搜索中使用：未过滤隐藏的(isHide))
|
||||
export function setCacheTagsViewRoutes() {
|
||||
store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children)
|
||||
// 先处理有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
|
||||
let authsRoutes = setFilterMenuFun(dynamicRoutes, store.state.auths)
|
||||
// 添加到 vuex setTagsViewRoutes 中
|
||||
store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(authsRoutes))[0].children)
|
||||
}
|
||||
|
||||
// 获取当前用户的权限去比对路由表，用于左侧菜单/横向菜单的显示
|
||||
@ -634,4 +637,5 @@ router.afterEach(() => {
|
||||
NProgress.done()
|
||||
})
|
||||
|
||||
// 导出路由
|
||||
export default router
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="layout-search-dialog">
|
||||
<el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen>
|
||||
<el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
|
||||
<el-autocomplete v-model="menuQuery" :fetch-suggestions="menuSearch" placeholder="菜单搜索：支持中文、路由路径"
|
||||
prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect">
|
||||
prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect" @blur="onSearchBlur">
|
||||
<template #default="{ item }">
|
||||
<div><i :class="item.meta.icon" class="mr10"></i>{{ item.meta.title }}</div>
|
||||
</template>
|
||||
@ -74,12 +74,17 @@ export default defineComponent({
|
||||
else router.push(path);
|
||||
closeSearch();
|
||||
};
|
||||
// input 失去焦点时
|
||||
const onSearchBlur = () => {
|
||||
closeSearch();
|
||||
};
|
||||
return {
|
||||
layoutMenuAutocompleteRef,
|
||||
openSearch,
|
||||
closeSearch,
|
||||
menuSearch,
|
||||
onHandleSelect,
|
||||
onSearchBlur,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
@ -100,12 +105,5 @@ export default defineComponent({
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
::v-deep(.el-dialog__headerbtn) {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
.el-dialog__close {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -339,12 +339,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="copy-config">
|
||||
<el-alert title="点击下方按钮，复制 / 还原布局配置。" type="warning" :closable="false">
|
||||
<el-alert title="点击下方按钮，复制布局配置去 `src/utils/themeConfig.ts` 中修改。" type="warning" :closable="false">
|
||||
</el-alert>
|
||||
<el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary">一键复制配置
|
||||
<el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
|
||||
ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
|
||||
</el-button>
|
||||
<el-button size="small" class="copy-config-btn copy-config-last-btn" icon="el-icon-refresh" type="warning">
|
||||
一键还原配置</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
@ -359,7 +358,10 @@ import {
|
||||
getCurrentInstance,
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
} from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ClipboardJS from "clipboard";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import { getLightColor } from "/@/utils/theme.ts";
|
||||
import Watermark from "/@/utils/wartermark.ts";
|
||||
@ -369,6 +371,7 @@ export default defineComponent({
|
||||
name: "layoutBreadcrumbSeting",
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const copyConfigBtnRef = ref();
|
||||
const store = useStore();
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
@ -597,6 +600,10 @@ export default defineComponent({
|
||||
// 布局配置弹窗打开
|
||||
const openDrawer = () => {
|
||||
getThemeConfig.value.isDrawer = true;
|
||||
nextTick(() => {
|
||||
// 初始化复制功能，防止点击两次才可以复制
|
||||
onCopyConfigClick(copyConfigBtnRef.value.$el);
|
||||
});
|
||||
};
|
||||
// 触发 store 布局配置更新
|
||||
const setDispatchThemeConfig = () => {
|
||||
@ -611,6 +618,23 @@ export default defineComponent({
|
||||
const setLocalThemeConfigStyle = () => {
|
||||
setLocal("themeConfigStyle", document.documentElement.style.cssText);
|
||||
};
|
||||
// 一键复制配置
|
||||
const onCopyConfigClick = (target: any) => {
|
||||
let copyThemeConfig = getLocal("themeConfig");
|
||||
copyThemeConfig.isDrawer = false;
|
||||
const clipboard = new ClipboardJS(target, {
|
||||
text: () => JSON.stringify(copyThemeConfig),
|
||||
});
|
||||
clipboard.on("success", () => {
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
ElMessage.success("复制成功！");
|
||||
clipboard.destroy();
|
||||
});
|
||||
clipboard.on("error", () => {
|
||||
ElMessage.error("复制失败！");
|
||||
clipboard.destroy();
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// 监听菜单点击，菜单字体背景高亮
|
||||
@ -682,6 +706,8 @@ export default defineComponent({
|
||||
onClassicSplitMenuChange,
|
||||
onIsBreadcrumbChange,
|
||||
onSortableTagsViewChange,
|
||||
copyConfigBtnRef,
|
||||
onCopyConfigClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
|
||||
<span class="layout-navbars-breadcrumb-user-link">
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
|
||||
class="layout-navbars-breadcrumb-user-link-photo mr5" /> small@小柒
|
||||
class="layout-navbars-breadcrumb-user-link-photo mr5" />
|
||||
{{userInfo.userName === '' ? 'test' : userInfo.userName}}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
@ -47,13 +48,14 @@ import {
|
||||
toRefs,
|
||||
toRef,
|
||||
ref,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import screenfull from "screenfull";
|
||||
import { resetRoute } from "/@/router/index.ts";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import { clearSession } from "/@/utils/storage.ts";
|
||||
import { getSession, clearSession } from "/@/utils/storage.ts";
|
||||
import UserNews from "/@/views/layout/navBars/breadcrumb/userNews.vue";
|
||||
import Search from "/@/views/layout/navBars/breadcrumb/search.vue";
|
||||
export default {
|
||||
@ -67,6 +69,7 @@ export default {
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
isShowUserNewsPopover: false,
|
||||
userInfo: {},
|
||||
});
|
||||
// 设置布局
|
||||
const setFlexAutoStyle = computed(() => {
|
||||
@ -121,7 +124,7 @@ export default {
|
||||
resetRoute(); // 删除/重置路由
|
||||
router.push("/login");
|
||||
setTimeout(() => {
|
||||
ElMessage.success("退出成功！记得回来哟~");
|
||||
ElMessage.success("安全退出成功！");
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {});
|
||||
@ -137,6 +140,15 @@ export default {
|
||||
const onUserNewsPopoverClick = () => {
|
||||
state.isShowUserNewsPopover = !state.isShowUserNewsPopover;
|
||||
};
|
||||
// 获取用户信息（sessionStorage）
|
||||
const initUserInfo = () => {
|
||||
if (!getSession("userInfo")) return false;
|
||||
state.userInfo = getSession("userInfo");
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initUserInfo();
|
||||
});
|
||||
return {
|
||||
setFlexAutoStyle,
|
||||
onLayoutSetingClick,
|
||||
@ -145,6 +157,7 @@ export default {
|
||||
onSearchClick,
|
||||
onUserNewsPopoverClick,
|
||||
searchRef,
|
||||
initUserInfo,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
||||
@ -79,10 +79,9 @@ export default {
|
||||
.content-box {
|
||||
font-size: 13px;
|
||||
.content-box-item {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 12px 0;
|
||||
padding-top: 12px;
|
||||
&:last-of-type {
|
||||
border-bottom: 1px solid transparent;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.content-box-msg {
|
||||
color: #999999;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-logo">
|
||||
<img src="/@/assets/logo-web-element.svg" />
|
||||
<span>SMALL@小柒</span>
|
||||
</div>
|
||||
<div class="login-content" :class="{'login-content-mobile' : tabsActiveName === 'mobile'}">
|
||||
<div class="login-content-main">
|
||||
@ -61,10 +61,15 @@ export default {
|
||||
.login-logo {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
left: 50%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
color: var(--color-primary);
|
||||
letter-spacing: 2px;
|
||||
width: 90%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.login-content {
|
||||
width: 500px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user