登录页开发，控制台页面开发，页面跳转逻辑调整
This commit is contained in:
sswiki
78
zyplayer-doc-ui/wiki-ui/src/views/wiki/aside/ConsoleMenu.vue
Normal file
78
zyplayer-doc-ui/wiki-ui/src/views/wiki/aside/ConsoleMenu.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<a-menu v-model:selectedKeys="storeUser.menuRouteKey" mode="inline" class="menu-view-box" style="border-right: 0;" >
|
||||
<a-menu-item key="wiki-space" :icon="h(IconParkNotebook)">
|
||||
<router-link to="/wiki/space">知识库</router-link>
|
||||
</a-menu-item>
|
||||
<a-sub-menu vxxxx-if="storeUser.userInfo.isManager" title="系统管理" key="manage" :icon="h(IconParkSettingConfig)">
|
||||
<a-menu-item key="user-userList" :icon="h(IconParkUser)">
|
||||
<router-link to="/user/userList">用户管理</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="user-department" :icon="h(IconParkPeoples)">
|
||||
<router-link to="/user/department">部门管理</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="system-setting" :icon="h(IconParkSettingTwo)">
|
||||
<router-link to="/system/setting">系统配置</router-link>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Peoples as IconParkPeoples,
|
||||
User as IconParkUser,
|
||||
SettingConfig as IconParkSettingConfig,
|
||||
Notebook as IconParkNotebook,
|
||||
SettingTwo as IconParkSettingTwo,
|
||||
} from '@icon-park/vue-next'
|
||||
import {toRefs, ref, reactive, onMounted, onBeforeUnmount, watch, h, defineEmits, computed} from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
|
||||
import {useStoreUserData} from "@/store/userData";
|
||||
|
||||
let storeUser = useStoreUserData();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-badge .el-badge__content {
|
||||
margin-top: 14px;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.menu-view-box {
|
||||
.i-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 左侧菜单收缩时的样式，上面图标、下面文字，样式强制覆盖
|
||||
.left-layout-sider.ant-layout-sider-collapsed {
|
||||
.ant-menu {
|
||||
> .ant-menu-item, > .ant-menu-submenu .ant-menu-submenu-title {
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
padding-inline: unset;
|
||||
|
||||
.ant-menu-item-icon {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ant-menu-title-content {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
margin-inline-start: 8px;
|
||||
line-height: 24px;
|
||||
width: 56px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
zyplayer-doc-ui/wiki-ui/src/views/wiki/aside/HeaderView.vue
Normal file
60
zyplayer-doc-ui/wiki-ui/src/views/wiki/aside/HeaderView.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="wiki-header-view">
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<span class="logo-box">
|
||||
<span class="system-name">文档管理系统</span>
|
||||
<el-divider direction="vertical" style="margin: 0 10px;"/>
|
||||
<span class="company-name">开源版</span>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: right;">
|
||||
<UserHead/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {toRefs, ref, reactive, onMounted, watch, defineEmits, computed} from 'vue';
|
||||
import {useRouter, useRoute} from "vue-router";
|
||||
import { message } from 'ant-design-vue';
|
||||
import UserHead from './UserHead.vue'
|
||||
|
||||
let router = useRouter();
|
||||
onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wiki-header-view {
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background: #2876d7;
|
||||
|
||||
.logo-box {
|
||||
.image {
|
||||
height: 41px;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.system-name {
|
||||
font-size: 21px;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
zyplayer-doc-ui/wiki-ui/src/views/wiki/aside/UserHead.vue
Normal file
38
zyplayer-doc-ui/wiki-ui/src/views/wiki/aside/UserHead.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<a-dropdown trigger="click" placement="bottomRight" arrow overlayClassName="header-action-user-dropdown">
|
||||
<a-button :icon="h(UserOutlined)" size="large" type="text" style="color: #fff;"></a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="showAbout">关于</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item @click="userSignOut" danger>退出登录</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<AboutDialog v-model:visible="aboutDialogVisible"/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {UserOutlined} from '@ant-design/icons-vue';
|
||||
import {toRefs, ref, reactive, onMounted, watch, defineEmits, h, computed} from 'vue';
|
||||
import {useRouter, useRoute} from "vue-router";
|
||||
import userApi from "@/assets/api/user";
|
||||
import AboutDialog from "@/views/common/AboutDialog.vue";
|
||||
|
||||
let router = useRouter();
|
||||
const userSignOut = () => {
|
||||
userApi.userLogout().then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
let aboutDialogVisible = ref(false);
|
||||
const showAbout = () => {
|
||||
aboutDialogVisible.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header-action-user-dropdown {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user