修改样式及根据身份生成路由代码
This commit is contained in:
熊丽君
1
src/assets/icons/exit-fullscreen.svg
Normal file
1
src/assets/icons/exit-fullscreen.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
src/assets/icons/fullscreen.svg
Normal file
1
src/assets/icons/fullscreen.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
1
src/assets/icons/size.svg
Normal file
1
src/assets/icons/size.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z"/></svg>
|
||||
|
After Width: | Height: | Size: 211 B |
@ -1 +1,31 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
|
||||
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
|
||||
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rdf:Description rdf:about=""/>
|
||||
</rdf:RDF>
|
||||
</x:xmpmeta>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?xpacket end="w"?></metadata>
|
||||
<image id="quxiaoquanping" width="18" height="18" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmARkNOCA4kWz6AAAA+ElEQVQoz43SsUpCYRjG8d/5jmepplZvQjnQFeSoYJxBaGl2aQmhKwgkiBbnEIICSbApvAMXvQnXJpsOaoNCJww67/DAB//3+fPCF6VH3gxM/D0tXRdROnUulwnGqFugZo62jZHER/BkIzFydtByZiSRG1Q8YyjRO4B6YrmsOQn48mgrBieFjK3dC1QwLmxXC0nsFlFQYiqo7xVVTMFUB0urHRSl/7Q0UUoXpdR+6T5xqvGjay4qmBeWOl7R8FIsKqULaHuw3b+XhWTtTnsHHbsWWcP+6NUeid3YEFwaCnL9A0tfLjF6bwVXglxmdgDNZHKJblTm030Dnp9Abj87ELAAAAAASUVORK5CYII="/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 3.1 KiB |
@ -1 +1,31 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="23" viewBox="0 0 24 23">
|
||||
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
|
||||
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rdf:Description rdf:about=""/>
|
||||
</rdf:RDF>
|
||||
</x:xmpmeta>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?xpacket end="w"?></metadata>
|
||||
<image id="quanping" width="24" height="23" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAQAAAA6heU+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmARQJJQQOnZQ2AAAA8klEQVQoz5WSv07DMBDGf7YiPFoKahESM7ufJO/AVGXrxsbBxBam8Bx5kj4AO5ESKarHSFVhsPOnqK3CTXffffZ99n2KNTlTlDQx+4Mn5PcvU12DhEy/3m3meBIOf/cR8WPv59ADKPVwU0MgNrTvkVIOvOO2/QLQj2bDQASg4DR6CgHePqMUFoam6nznqS4y+sZ3nkoBDtid44QPEAeyU9fGycnoxRr/QXS4qwKcOABn9mZ/nioI+iP0NVlqU0t28UKztqklW6xxWuEWgJLBHoZcZq+N7jk8h7Idd66L2ycApVbM3JOYeNCOE9SA1aFc6vBflDY+qevCKjsAAAAASUVORK5CYII="/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 421 B After Width: | Height: | Size: 3.1 KiB |
@ -1 +1,31 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
|
||||
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
|
||||
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rdf:Description rdf:about=""/>
|
||||
</rdf:RDF>
|
||||
</x:xmpmeta>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?xpacket end="w"?></metadata>
|
||||
<image id="zitidaxiaoim" width="18" height="18" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmARQJJCVb77UpAAABDElEQVQoz3XRTStEYRjG8d85szgpSrEQqZGSkpUFsVIkalZkMXktiRQ+B/kClIWNslLsZEdZ2eEDaFZepiwQaSzmDGfGcT2bu/v5d93PfT1Bn4Q63IlwKF9p5RAmGasiMC2bbCehyGJcZaz9B01p/qmX1KdDq+BaCY3m06BeQ2DbOVgX/IXKPkXH9kCX8VqowQw48O7YA9ishfIawC4+7INRPdVQediF2xgtgY3yZdAHgy6l6U177qnitCJddZYrTk0KIhS9JIAWEQo6cp8hFuIfm5BNnC3QZpJQED/6xlXVqD1flSBCIzohXvtX905B/8lApnVHNz7Nea3Bns2Wgw4NgyOPf3Y7i1Mb+wanZDRhbsTIdwAAAABJRU5ErkJggg=="/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 211 B After Width: | Height: | Size: 3.1 KiB |
@ -20,8 +20,10 @@
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
// -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
// box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
-webkit-box-shadow: 0px 0px 42px 0px rgba(0, 42, 255, 0.1);
|
||||
box-shadow: 0px 0px 42px 0px rgba(0, 42, 255, 0.1);
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@ -73,12 +75,26 @@
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.sub-menu-title-noDropdown,
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
// background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
// 如需首页需要显示当前选中效果 需要将注释解开
|
||||
// .submenu-title-noDropdown.is-active {
|
||||
// background-color: #f2f5fe !important;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// width: 4px;
|
||||
// height: 100%;
|
||||
// background-color: #0054ff;
|
||||
// }
|
||||
// }
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: $base-menu-color-active !important;
|
||||
@ -89,7 +105,8 @@
|
||||
min-width: $base-sidebar-width !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
// background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,6 +118,18 @@
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
}
|
||||
}
|
||||
& .nest-menu .el-menu-item.is-active {
|
||||
background-color: #f2f5fe !important;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #0054ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
@ -112,7 +141,7 @@
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.sub-menu-title-noDropdown {
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ $--color-warning: #E6A23C;
|
||||
$--color-danger: #F56C6C;
|
||||
$--color-info: #909399;
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
$base-sidebar-width: 220px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="route.path"/>
|
||||
<component :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
@ -11,17 +11,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let store = useStore()
|
||||
let store = useStore();
|
||||
const cachedViews = computed(() => {
|
||||
return store.state.tagsView.cachedViews
|
||||
})
|
||||
return store.state.tagsView.cachedViews;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
margin: 15px;
|
||||
box-shadow: 0px 0px 16px 0px rgba(78, 118, 251, 0.1);
|
||||
/* 50= navbar 50 */
|
||||
min-height: calc(100vh - 50px);
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 80px);
|
||||
width: calc(100% - 30px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -94,7 +94,8 @@ function setLayout() {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
box-shadow: 0px 0px 42px 0px rgba(0, 42, 255, 0.1);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
@ -152,7 +153,7 @@ function setLayout() {
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 40px;
|
||||
margin-right: 30px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
@ -162,14 +163,14 @@ function setLayout() {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
top: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,12 @@
|
||||
class="sidebar-logo-link"
|
||||
to="/"
|
||||
>
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<img
|
||||
v-if="logo"
|
||||
:src="logo"
|
||||
class="sidebar-logo"
|
||||
style="width: unset"
|
||||
/>
|
||||
<h1
|
||||
v-else
|
||||
class="sidebar-title"
|
||||
@ -31,7 +36,7 @@
|
||||
</h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
|
||||
<h1
|
||||
class="sidebar-title"
|
||||
:style="{
|
||||
@ -96,8 +101,10 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
|
||||
width: 100%;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
width: 75px;
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div id="tags-view-container" class="tags-view-container">
|
||||
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
|
||||
<scroll-pane
|
||||
ref="scrollPaneRef"
|
||||
class="tags-view-wrapper"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
:key="tag.path"
|
||||
@ -14,36 +18,43 @@
|
||||
>
|
||||
{{ tag.title }}
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
|
||||
<close
|
||||
class="el-icon-close"
|
||||
style="width: 1em; height: 1em; vertical-align: middle"
|
||||
/>
|
||||
</span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<ul
|
||||
v-show="visible"
|
||||
:style="{ left: left + 'px', top: top + 'px' }"
|
||||
class="contextmenu"
|
||||
>
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面
|
||||
<refresh-right style="width: 1em; height: 1em" /> 刷新页面
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<close style="width: 1em; height: 1em;" /> 关闭当前
|
||||
<close style="width: 1em; height: 1em" /> 关闭当前
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 关闭其他
|
||||
<circle-close style="width: 1em; height: 1em" /> 关闭其他
|
||||
</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
||||
<back style="width: 1em; height: 1em;" /> 关闭左侧
|
||||
<back style="width: 1em; height: 1em" /> 关闭左侧
|
||||
</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags">
|
||||
<right style="width: 1em; height: 1em;" /> 关闭右侧
|
||||
<right style="width: 1em; height: 1em" /> 关闭右侧
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 全部关闭
|
||||
<circle-close style="width: 1em; height: 1em" /> 全部关闭
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ScrollPane from './ScrollPane'
|
||||
import { getNormalPath } from '@/utils/ruoyi'
|
||||
import ScrollPane from "./ScrollPane";
|
||||
import { getNormalPath } from "@/utils/ruoyi";
|
||||
const visible = ref(false);
|
||||
const top = ref(0);
|
||||
const left = ref(0);
|
||||
@ -61,68 +72,74 @@ const routes = computed(() => store.state.permission.routes);
|
||||
const theme = computed(() => store.state.settings.theme);
|
||||
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
moveToCurrentTag()
|
||||
})
|
||||
addTags();
|
||||
moveToCurrentTag();
|
||||
});
|
||||
watch(visible, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu)
|
||||
document.body.addEventListener("click", closeMenu);
|
||||
} else {
|
||||
document.body.removeEventListener('click', closeMenu)
|
||||
document.body.removeEventListener("click", closeMenu);
|
||||
}
|
||||
})
|
||||
});
|
||||
onMounted(() => {
|
||||
initTags()
|
||||
addTags()
|
||||
})
|
||||
initTags();
|
||||
addTags();
|
||||
});
|
||||
|
||||
function isActive(r) {
|
||||
return r.path === route.path
|
||||
return r.path === route.path;
|
||||
}
|
||||
function activeStyle(tag) {
|
||||
if (!isActive(tag)) return {};
|
||||
return {
|
||||
"background-color": theme.value,
|
||||
"border-color": theme.value
|
||||
"border-color": theme.value,
|
||||
};
|
||||
}
|
||||
function isAffix(tag) {
|
||||
return tag.meta && tag.meta.affix
|
||||
return tag.meta && tag.meta.affix;
|
||||
}
|
||||
function isFirstView() {
|
||||
try {
|
||||
return selectedTag.value.fullPath === visitedViews.value[1].fullPath || selectedTag.value.fullPath === '/index'
|
||||
return (
|
||||
selectedTag.value.fullPath === visitedViews.value[1].fullPath ||
|
||||
selectedTag.value.fullPath === "/index"
|
||||
);
|
||||
} catch (err) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function isLastView() {
|
||||
try {
|
||||
return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath
|
||||
return (
|
||||
selectedTag.value.fullPath ===
|
||||
visitedViews.value[visitedViews.value.length - 1].fullPath
|
||||
);
|
||||
} catch (err) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function filterAffixTags(routes, basePath = '') {
|
||||
let tags = []
|
||||
routes.forEach(route => {
|
||||
function filterAffixTags(routes, basePath = "") {
|
||||
let tags = [];
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = getNormalPath(basePath + '/' + route.path)
|
||||
const tagPath = getNormalPath(basePath + "/" + route.path);
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta }
|
||||
})
|
||||
meta: { ...route.meta },
|
||||
});
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path)
|
||||
const tempTags = filterAffixTags(route.children, route.path);
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
tags = [...tags, ...tempTags];
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
});
|
||||
return tags;
|
||||
}
|
||||
function initTags() {
|
||||
const res = filterAffixTags(routes.value);
|
||||
@ -130,16 +147,16 @@ function initTags() {
|
||||
for (const tag of res) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
store.dispatch('tagsView/addVisitedView', tag)
|
||||
store.dispatch("tagsView/addVisitedView", tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
function addTags() {
|
||||
const { name } = route
|
||||
const { name } = route;
|
||||
if (name) {
|
||||
store.dispatch('tagsView/addView', route)
|
||||
store.dispatch("tagsView/addView", route);
|
||||
}
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
function moveToCurrentTag() {
|
||||
nextTick(() => {
|
||||
@ -148,11 +165,11 @@ function moveToCurrentTag() {
|
||||
scrollPaneRef.value.moveToTarget(r);
|
||||
// when query is different then update
|
||||
if (r.fullPath !== route.fullPath) {
|
||||
store.dispatch('tagsView/updateVisitedView', route)
|
||||
store.dispatch("tagsView/updateVisitedView", route);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
function refreshSelectedTag(view) {
|
||||
proxy.$tab.refreshPage(view);
|
||||
@ -160,75 +177,75 @@ function refreshSelectedTag(view) {
|
||||
function closeSelectedTag(view) {
|
||||
proxy.$tab.closePage(view).then(({ visitedViews }) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view)
|
||||
toLastView(visitedViews, view);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
function closeRightTags() {
|
||||
proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
|
||||
if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews)
|
||||
proxy.$tab.closeRightPage(selectedTag.value).then((visitedViews) => {
|
||||
if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
function closeLeftTags() {
|
||||
proxy.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
|
||||
if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews)
|
||||
proxy.$tab.closeLeftPage(selectedTag.value).then((visitedViews) => {
|
||||
if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
function closeOthersTags() {
|
||||
router.push(selectedTag.value).catch(() => { });
|
||||
router.push(selectedTag.value).catch(() => {});
|
||||
proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
|
||||
moveToCurrentTag()
|
||||
})
|
||||
moveToCurrentTag();
|
||||
});
|
||||
}
|
||||
function closeAllTags(view) {
|
||||
proxy.$tab.closeAllPage().then(({ visitedViews }) => {
|
||||
if (affixTags.value.some(tag => tag.path === route.path)) {
|
||||
return
|
||||
if (affixTags.value.some((tag) => tag.path === route.path)) {
|
||||
return;
|
||||
}
|
||||
toLastView(visitedViews, view)
|
||||
})
|
||||
toLastView(visitedViews, view);
|
||||
});
|
||||
}
|
||||
function toLastView(visitedViews, view) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
const latestView = visitedViews.slice(-1)[0];
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
router.push(latestView.fullPath);
|
||||
} else {
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view.name === 'Dashboard') {
|
||||
if (view.name === "Dashboard") {
|
||||
// to reload home page
|
||||
router.replace({ path: '/redirect' + view.fullPath })
|
||||
router.replace({ path: "/redirect" + view.fullPath });
|
||||
} else {
|
||||
router.push('/')
|
||||
router.push("/");
|
||||
}
|
||||
}
|
||||
}
|
||||
function openMenu(tag, e) {
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = proxy.$el.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = proxy.$el.offsetWidth // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth // left boundary
|
||||
const l = e.clientX - offsetLeft + 15 // 15: margin right
|
||||
const menuMinWidth = 105;
|
||||
const offsetLeft = proxy.$el.getBoundingClientRect().left; // container margin left
|
||||
const offsetWidth = proxy.$el.offsetWidth; // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth; // left boundary
|
||||
const l = e.clientX - offsetLeft + 15; // 15: margin right
|
||||
|
||||
if (l > maxLeft) {
|
||||
left.value = maxLeft
|
||||
left.value = maxLeft;
|
||||
} else {
|
||||
left.value = l
|
||||
left.value = l;
|
||||
}
|
||||
|
||||
top.value = e.clientY
|
||||
visible.value = true
|
||||
selectedTag.value = tag
|
||||
top.value = e.clientY;
|
||||
visible.value = true;
|
||||
selectedTag.value = tag;
|
||||
}
|
||||
function closeMenu() {
|
||||
visible.value = false
|
||||
visible.value = false;
|
||||
}
|
||||
function handleScroll() {
|
||||
closeMenu()
|
||||
closeMenu();
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -238,7 +255,8 @@ function handleScroll() {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
||||
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0px 0px 42px 0px rgba(0, 42, 255, 0.1);
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
|
||||
@ -117,6 +117,17 @@ export const constantRoutes = [
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/redirect/:path(.*)',
|
||||
component: () => import('@/views/redirect'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login'),
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
/**
|
||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||
*/
|
||||
sideTheme: 'theme-dark',
|
||||
sideTheme: 'theme-light',
|
||||
/**
|
||||
* 是否系统布局配置
|
||||
*/
|
||||
|
||||
@ -41,21 +41,21 @@ const permission = {
|
||||
return new Promise(resolve => {
|
||||
let data = []
|
||||
// localStorage.setItem('select_identity',role) // 测试
|
||||
// if (role == 1) {
|
||||
// // 企业
|
||||
// data = enterpriseRoutes
|
||||
// } else if (role == 2) {
|
||||
// // 专家
|
||||
// data = expertRoutes
|
||||
// } else if (role == 4) {
|
||||
// // 研究机构
|
||||
// data = researchRoutes
|
||||
// } else if (role == 8) {
|
||||
// // 实验室
|
||||
// } else if (role == 16) {
|
||||
// // 科技经纪人
|
||||
// }
|
||||
data = expertRoutes
|
||||
if (role == 1) {
|
||||
// 企业
|
||||
data = enterpriseRoutes
|
||||
} else if (role == 2) {
|
||||
// 专家
|
||||
data = expertRoutes
|
||||
} else if (role == 4) {
|
||||
// 研究机构
|
||||
data = researchRoutes
|
||||
} else if (role == 8) {
|
||||
// 实验室
|
||||
} else if (role == 16) {
|
||||
// 科技经纪人
|
||||
}
|
||||
// data = expertRoutes
|
||||
data.map(item=>{
|
||||
router.addRoute(item)
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dyn
|
||||
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
|
||||
const state = {
|
||||
title: '',
|
||||
theme: storageSetting.theme || '#409EFF',
|
||||
theme: storageSetting.theme || '#0054ff',
|
||||
sideTheme: storageSetting.sideTheme || sideTheme,
|
||||
showSettings: showSettings,
|
||||
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
||||
|
||||
Reference in New Issue
Block a user