feat: 🎸 重构layout
chenkl
5 years ago
parent
51313d7116
commit
7ede02141e
@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||||
|
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||||
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||||
|
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||||
|
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||||
|
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||||
|
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<g id="Rectangle-18">
|
||||||
|
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||||
|
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||||
|
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
|
||||||
|
<defs>
|
||||||
|
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||||
|
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||||
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||||
|
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||||
|
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="setting-copy-2" transform="translate(-1254.000000, -337.000000)">
|
||||||
|
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
|
||||||
|
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 338.000000)">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<g id="Rectangle-18">
|
||||||
|
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||||
|
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||||
|
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||||
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||||
|
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||||
|
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g id="é
ç½®é¢æ¿" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||||
|
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||||
|
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<g id="Rectangle-18">
|
||||||
|
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||||
|
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle-18" fill="#fff" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||||
|
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<div class="setting__content">
|
||||||
|
<div class="setting__title">导航栏布局</div>
|
||||||
|
<div class="icon__wrap">
|
||||||
|
<span :class="{'icon--active': layout==='Classic'}" @click="setLayout('Classic')">
|
||||||
|
<el-tooltip effect="dark" content="经典布局" placement="bottom">
|
||||||
|
<svg-icon icon-class="layout-classic" class="setting-svg-icon" />
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
<span :class="{'icon--active': layout==='LeftTop'}" @click="setLayout('LeftTop')">
|
||||||
|
<el-tooltip effect="dark" content="左侧顶部布局" placement="bottom">
|
||||||
|
<svg-icon icon-class="layout-topLeft" class="setting-svg-icon" />
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
<span :class="{'icon--active': layout==='Top'}" @click="setLayout('Top')">
|
||||||
|
<el-tooltip effect="dark" content="顶部布局" placement="bottom">
|
||||||
|
<svg-icon icon-class="layout-top" class="setting-svg-icon" />
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting__title">侧边菜单主题</div>
|
||||||
|
|
||||||
|
<div class="setting__title">顶部菜单主题</div>
|
||||||
|
|
||||||
|
<div class="setting__title">界面功能</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>固定顶部操作栏</span>
|
||||||
|
<el-switch v-model="fixedNavbar" @change="setFixedNavbar" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting__title">界面显示</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>顶部操作栏</span>
|
||||||
|
<el-switch v-model="navbar" @change="setNavbar" />
|
||||||
|
</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>侧边栏缩收</span>
|
||||||
|
<el-switch v-model="hamburger" @change="setHamburger" />
|
||||||
|
</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>面包屑</span>
|
||||||
|
<el-switch v-model="breadcrumb" @change="setBreadcrumb" />
|
||||||
|
</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>全屏按钮</span>
|
||||||
|
<el-switch v-model="screenfull" @change="setScreenfull" />
|
||||||
|
</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>用户头像</span>
|
||||||
|
<el-switch v-model="userInfo" @change="setUserInfo" />
|
||||||
|
</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>标签页</span>
|
||||||
|
<el-switch v-model="tagsView" @change="setTagsView" />
|
||||||
|
</div>
|
||||||
|
<div class="setting__item">
|
||||||
|
<span>LOGO</span>
|
||||||
|
<el-switch v-model="logo" @change="setLogo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, computed, ref } from 'vue'
|
||||||
|
import { appStore } from '_p/index/store/modules/app'
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Setting',
|
||||||
|
setup() {
|
||||||
|
const layout = computed(() => appStore.layout)
|
||||||
|
function setLayout(mode: 'Classic' | 'LeftTop' | 'Top' | 'Test') {
|
||||||
|
if (mode === layout.value) return
|
||||||
|
appStore.SetLayout(mode)
|
||||||
|
}
|
||||||
|
|
||||||
|
const fixedNavbar = ref<boolean>(appStore.fixedNavbar)
|
||||||
|
function setFixedNavbar(fixedNavbar: boolean) {
|
||||||
|
appStore.SetFixedNavbar(fixedNavbar)
|
||||||
|
}
|
||||||
|
|
||||||
|
const navbar = ref<boolean>(appStore.showNavbar)
|
||||||
|
function setNavbar(navbar: boolean) {
|
||||||
|
appStore.SetShowNavbar(navbar)
|
||||||
|
}
|
||||||
|
|
||||||
|
const hamburger = ref<boolean>(appStore.showHamburger)
|
||||||
|
function setHamburger(hamburger: boolean) {
|
||||||
|
appStore.SetHamburger(hamburger)
|
||||||
|
}
|
||||||
|
|
||||||
|
const breadcrumb = ref<boolean>(appStore.showBreadcrumb)
|
||||||
|
function setBreadcrumb(breadcrumb: boolean) {
|
||||||
|
appStore.SetBreadcrumb(breadcrumb)
|
||||||
|
}
|
||||||
|
|
||||||
|
const screenfull = ref<boolean>(appStore.showScreenfull)
|
||||||
|
function setScreenfull(screenfull: boolean) {
|
||||||
|
appStore.SetScreenfull(screenfull)
|
||||||
|
}
|
||||||
|
|
||||||
|
const userInfo = ref<boolean>(appStore.showUserInfo)
|
||||||
|
function setUserInfo(userInfo: boolean) {
|
||||||
|
appStore.SetUserInfo(userInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
const tagsView = ref<boolean>(appStore.showTags)
|
||||||
|
function setTagsView(tagsView: boolean) {
|
||||||
|
appStore.SetShowTags(tagsView)
|
||||||
|
}
|
||||||
|
|
||||||
|
const logo = ref<boolean>(appStore.showLogo)
|
||||||
|
function setLogo(logo: boolean) {
|
||||||
|
appStore.SetShowLogo(logo)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
layout, setLayout,
|
||||||
|
fixedNavbar, setFixedNavbar,
|
||||||
|
navbar, setNavbar,
|
||||||
|
hamburger, setHamburger,
|
||||||
|
breadcrumb, setBreadcrumb,
|
||||||
|
screenfull, setScreenfull,
|
||||||
|
userInfo, setUserInfo,
|
||||||
|
tagsView, setTagsView,
|
||||||
|
logo, setLogo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.setting__content {
|
||||||
|
background: @appBg;
|
||||||
|
padding: 0 20px;
|
||||||
|
.setting__title {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
.icon__wrap {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
&>span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 2px solid @appBg;
|
||||||
|
.setting-svg-icon {
|
||||||
|
font-size: 60px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.setting-svg-icon:nth-of-type(2) {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--active {
|
||||||
|
border: 2px solid #018ffb;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.setting__item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
|
|
||||||
<slot />
|
|
||||||
</a>
|
|
||||||
<router-link v-else :to="to">
|
|
||||||
<slot />
|
|
||||||
</router-link>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, PropType } from 'vue'
|
|
||||||
import { isExternal } from '@/utils/validate'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
to: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
return {
|
|
||||||
isExternal
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<el-scrollbar
|
||||||
|
ref="scrollContainer"
|
||||||
|
class="scroll-container"
|
||||||
|
@wheel="handleScroll"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, unref, nextTick } from 'vue'
|
||||||
|
import { useScrollTo } from '@/hooks/useScrollTo'
|
||||||
|
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ScrollPane',
|
||||||
|
setup() {
|
||||||
|
const scrollContainer = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
function handleScroll(e: any): void {
|
||||||
|
const eventDelta: number = e.wheelDelta || -e.deltaY * 40
|
||||||
|
const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
|
||||||
|
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveToTarget(currentTag: any) {
|
||||||
|
const $container: any = (unref(scrollContainer) as any).$el
|
||||||
|
const $containerWidth: number = $container.offsetWidth
|
||||||
|
const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
|
||||||
|
const tagList = (unref(scrollContainer) as any).$parent.$parent.tagRefs
|
||||||
|
|
||||||
|
let firstTag: any = null
|
||||||
|
let lastTag: any = null
|
||||||
|
|
||||||
|
// find first tag and last tag
|
||||||
|
if (tagList.length > 0) {
|
||||||
|
firstTag = tagList[0]
|
||||||
|
lastTag = tagList[tagList.length - 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (firstTag === currentTag) {
|
||||||
|
$scrollWrapper.scrollLeft = 0
|
||||||
|
} else if (lastTag === currentTag) {
|
||||||
|
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||||
|
} else {
|
||||||
|
// find preTag and nextTag
|
||||||
|
const currentIndex: number = tagList.findIndex((item: any) => item === currentTag)
|
||||||
|
const prevTag = tagList[currentIndex - 1]
|
||||||
|
const nextTag = tagList[currentIndex + 1]
|
||||||
|
// the tag's offsetLeft after of nextTag
|
||||||
|
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
|
||||||
|
|
||||||
|
// the tag's offsetLeft before of prevTag
|
||||||
|
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
||||||
|
|
||||||
|
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||||
|
nextTick(() => {
|
||||||
|
const { start } = useScrollTo({
|
||||||
|
el: $scrollWrapper,
|
||||||
|
position: 'scrollLeft',
|
||||||
|
to: afterNextTagOffsetLeft - $containerWidth,
|
||||||
|
duration: 500
|
||||||
|
})
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||||
|
nextTick(() => {
|
||||||
|
const { start } = useScrollTo({
|
||||||
|
el: $scrollWrapper,
|
||||||
|
position: 'scrollLeft',
|
||||||
|
to: beforePrevTagOffsetLeft,
|
||||||
|
duration: 500
|
||||||
|
})
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveTo(to: number) {
|
||||||
|
const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
|
||||||
|
nextTick(() => {
|
||||||
|
const { start } = useScrollTo({
|
||||||
|
el: $scrollWrapper,
|
||||||
|
position: 'scrollLeft',
|
||||||
|
to: $scrollWrapper.scrollLeft + to,
|
||||||
|
duration: 500
|
||||||
|
})
|
||||||
|
start()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
handleScroll,
|
||||||
|
scrollContainer,
|
||||||
|
moveToTarget,
|
||||||
|
moveTo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.scroll-container {
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
@{deep}(.el-scrollbar__wrap) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<el-dropdown class="avatar-container" trigger="hover">
|
||||||
|
<div>
|
||||||
|
<div class="avatar-wrapper">
|
||||||
|
<img :src="require('@/assets/img/avatar.gif')" class="user-avatar">
|
||||||
|
<span class="name-item">管理员</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item key="1">
|
||||||
|
<span style="display: block;" @click="toHome">首页</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item key="2">
|
||||||
|
<span style="display: block;" @click="loginOut">退出登录</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { resetRouter } from '_p/index/router'
|
||||||
|
import wsCache from '@/cache'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { tagsViewStore } from '_p/index/store/modules/tagsView'
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'UserInfo',
|
||||||
|
setup() {
|
||||||
|
const { replace, push } = useRouter()
|
||||||
|
async function loginOut(): Promise<void> {
|
||||||
|
wsCache.clear()
|
||||||
|
await resetRouter() // 重置静态路由表
|
||||||
|
await tagsViewStore.delAllViews() // 删除所有的tags标签页
|
||||||
|
replace('/login')
|
||||||
|
}
|
||||||
|
function toHome() {
|
||||||
|
push('/')
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
loginOut,
|
||||||
|
toHome
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.avatar-container {
|
||||||
|
margin-right: 30px;
|
||||||
|
padding: 0 10px;
|
||||||
|
.avatar-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
.user-avatar {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.name-item {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue