Skip to content

Commit

Permalink
feature(首页导航菜单配置化、添加用户封禁、各种优化): 首页导航菜单配置化、添加用户封禁、各种优化
Browse files Browse the repository at this point in the history
  • Loading branch information
Hacker233 committed Jun 15, 2024
1 parent c5149a5 commit 6191cd6
Show file tree
Hide file tree
Showing 23 changed files with 912 additions and 181 deletions.
1 change: 1 addition & 0 deletions .eslintrc-auto-import.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"globals": {
"EffectScope": true,
"ElMessage": true,
"ElMessageBox": true,
"asyncComputed": true,
"autoResetRef": true,
"computed": true,
Expand Down
4 changes: 4 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
const { refreshUuid } = appStore.useRefreshStore;
const route = useRoute();
// 查询首页导航菜单
const { getIndexMenuList } = appStore.useIndexMenuStore;
getIndexMenuList();
// 查询和更新用户信息
const { getAndUpdateUserInfo } = appStore.useUserInfoStore;
const { token } = appStore.useTokenStore;
Expand Down
1 change: 1 addition & 0 deletions src/auto-import.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
const computed: typeof import('vue')['computed']
Expand Down
5 changes: 2 additions & 3 deletions src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,21 @@ declare module '@vue/runtime-core' {
DateFormItem: typeof import('./components/DateFormItem/DateFormItem.vue')['default']
Editor: typeof import('./components/packages/components/editor/editor.vue')['default']
EduBackgroundCom: typeof import('./components/ModelComs/EduBackgroundCom.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBacktop: typeof import('element-plus/es')['ElBacktop']
ElButton: typeof import('element-plus/es')['ElButton']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
Expand Down Expand Up @@ -88,6 +86,7 @@ declare module '@vue/runtime-core' {
LoginDialog: typeof import('./components/LoginDialog/LoginDialog.vue')['default']
LoginDialogOld: typeof import('./components/LoginDialog/LoginDialogOld.vue')['default']
LogoCom: typeof import('./components/LogoCom/LogoCom.vue')['default']
MenuItem: typeof import('./components/NavBar/components/MenuItem.vue')['default']
ModelBox: typeof import('./components/ModelBox/ModelBox.vue')['default']
ModelPreviewBox: typeof import('./components/ResumePreview/components/ModelPreviewBox.vue')['default']
NavBar: typeof import('./components/NavBar/NavBar.vue')['default']
Expand Down
284 changes: 143 additions & 141 deletions src/components/NavBar/NavBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,19 @@
></logo-com>
<div class="center">
<el-menu
:default-active="route.name"
:default-active="route.path"
class="el-menu-demo"
mode="horizontal"
:ellipsis="false"
@select="handleSelect"
router
:popper-offset="10"
>
<template v-for="(item, index) in menuList" :key="index">
<template v-if="item.children">
<el-sub-menu
:index="item.name"
popper-class="navbar-popper-box"
:show-timeout="0"
:hide-timeout="100"
>
<template #title>{{ item.title }}</template>
<el-menu-item
v-for="(childItem, childIndex) in item.children"
:key="childIndex"
:index="childItem.name"
>{{ childItem.title }}</el-menu-item
>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.name">{{ item.title }}</el-menu-item>
</template>
</template>
<menu-item
v-for="(item, index) in indexMenuList"
:key="index"
:item="item"
:key-index="item.name + index"
/>
</el-menu>
</div>
<!-- GitHub -->
Expand Down Expand Up @@ -119,123 +105,114 @@
});

// 菜单列表
const menuList = reactive([
{
iconfont: '',
name: 'Template',
title: '简历制作',
children: [
{
iconfont: '',
name: 'Template',
title: '在线制作',
children: null,
path: '/template'
},
{
iconfont: '',
name: 'LegoTemplateList',
title: '积木创作',
children: null,
path: '/legoTemplateList'
}
]
},
{
iconfont: '',
name: 'TemplateDownload',
title: '模板下载',
children: [
{
iconfont: '',
name: 'Word',
title: '简历模板',
children: null,
path: '/word'
},
{
iconfont: '',
name: 'PPT',
title: 'PPT模板',
children: null,
path: '/ppt'
}
]
},
{
iconfont: '',
name: 'Resourceshare',
title: '资源分享',
children: [
{
iconfont: '',
name: 'Soft',
title: '软件分享',
children: null,
path: '/soft'
},
{
iconfont: '',
name: 'Website',
title: '网站分享',
children: null,
path: '/website'
},
{
iconfont: '',
name: 'PanShare',
title: '网盘资源',
children: null,
path: '/panshare'
}
]
},
{
iconfont: '',
name: 'OnlineTool',
title: '在线工具',
children: [
{
iconfont: '',
name: 'ImgCompress',
title: '图片压缩',
children: null,
path: '/imgCompress'
}
]
},
{
iconfont: '',
name: 'WebCode',
title: '私有部署',
children: [
{
iconfont: '',
name: 'WebCode',
title: '源码获取',
children: null,
path: '/webcode'
},
{
iconfont: '',
name: 'DeployDoc',
title: '知识库',
children: null,
path: '/deployDoc'
}
]
}
]);

// 菜单
const currentMenu = ref<string>('');
const handleSelect = (key: string) => {
currentMenu.value = key;
router.push({
name: key
});
console.log(currentMenu.value);
};
const { indexMenuList } = appStore.useIndexMenuStore;
// const menuList = reactive([
// {
// iconfont: '',
// name: 'Template',
// title: '简历制作',
// children: [
// {
// iconfont: '',
// name: 'Template',
// title: '在线制作',
// children: null,
// path: '/template'
// },
// {
// iconfont: '',
// name: 'LegoTemplateList',
// title: '积木创作',
// children: null,
// path: '/legoTemplateList'
// }
// ]
// },
// {
// iconfont: '',
// name: 'TemplateDownload',
// title: '模板下载',
// children: [
// {
// iconfont: '',
// name: 'Word',
// title: '简历模板',
// children: null,
// path: '/word'
// },
// {
// iconfont: '',
// name: 'PPT',
// title: 'PPT模板',
// children: null,
// path: '/ppt'
// }
// ]
// },
// {
// iconfont: '',
// name: 'Resourceshare',
// title: '资源分享',
// children: [
// {
// iconfont: '',
// name: 'Soft',
// title: '软件分享',
// children: null,
// path: '/soft'
// },
// {
// iconfont: '',
// name: 'Website',
// title: '网站分享',
// children: null,
// path: '/website'
// },
// {
// iconfont: '',
// name: 'PanShare',
// title: '网盘资源',
// children: null,
// path: '/panshare'
// }
// ]
// },
// {
// iconfont: '',
// name: 'OnlineTool',
// title: '在线工具',
// children: [
// {
// iconfont: '',
// name: 'ImgCompress',
// title: '图片压缩',
// children: null,
// path: '/imgCompress'
// }
// ]
// },
// {
// iconfont: '',
// name: 'WebCode',
// title: '私有部署',
// children: [
// {
// iconfont: '',
// name: 'WebCode',
// title: '源码获取',
// children: null,
// path: '/webcode'
// },
// {
// iconfont: '',
// name: 'DeployDoc',
// title: '知识库',
// children: null,
// path: '/deployDoc'
// }
// ]
// }
// ]);

const nameColor = computed(() => {
return props.fontColor ? '#2ddd9d' : 'green';
Expand Down Expand Up @@ -538,7 +515,7 @@
</style>
<style lang="scss">
.navbar-popper-box {
overflow: hidden;
// overflow: hidden;
border: none;
border-radius: 0;
.el-menu {
Expand All @@ -553,6 +530,31 @@
justify-content: center;
letter-spacing: 2px;
}
.el-sub-menu {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
color: v-bind('props.fontColor');
padding: 0 15px !important;
letter-spacing: 3px;
font-size: 16px;
border-bottom: 4px solid transparent;
transition: all 0.3s;
&:hover {
background-color: rgba(#ccc, 0.1);
}
:deep(.el-sub-menu__title) {
letter-spacing: 3px;
font-size: 16px;
color: v-bind('props.fontColor');
border: none;
&:hover {
background-color: rgba(#ccc, 0.1);
}
}
}
}
}
</style>
Loading

0 comments on commit 6191cd6

Please sign in to comment.